A Blog — by Alyssa Lau A Blog — by Alyssa Lau

HTML/CSS basics

A few of you have already requested a tutorial on how to code and design your own blogs, and even though HTML and CSS are entirely new languages that have taken me years to become familiar with, I’m going to be sharing a couple things that will (hopefully) prove useful to you. Also, this tutorial will only work for blogs that run off HTML and CSS (such as blogspot). So sorry, WordPress-ers!

LESSON 1 THE BORING STUFF YOU NEED TO KNOW
There are a few basic things you need to know about coding before we can really get into the thick of it.
Actually, before we get started, Ima let chu know right now that coding isn’t for everyone. It takes a lot of patience and meticulous work, and is extremely finicky. If you forget to close a tag, accidentally misspell a value, or mess up the order of your tags, your code won’t work. Sometimes it’ll seem like your codes aren’t working for any reason. Either way, if you don’t mind experimenting a little and maybe staying up ’til 3 AM in the morning, then maybe coding will be the thing for you.

 

Anyway, the first thing you need to know about HTML is that HTML documents consist of HTML tags that make up elements (just think of them as the same for now). These tags are always enclosed in arrowheads or angle brackets (< >), and these tags usually come in pairs (a start and end tag), where the tag with a forward slash defines the end tag. For example, this is a paragraph tag: <p>Your paragraph.</p>. And if one HTML element is surrounded by more than one set of HTML tags, its best to open and close your tags always in the same order. For instance:
<font color=”black”><a href=”URL”>Text</a></font>
The following is the skeleton of a webpage. For the purposes of this tutorial, all that’s really important here is what is between the head, title, and body tags. The text between the head tags provides information about the web page. The text between the title tags provides a title for the webpage. The text between the body tags describes the visible page content.
<html>
<head>
  <title>This is your Page’s Title</title>
</head>
<body>
  BLAH BLAH BLAH
</body>
</html>
We will be dealing with coding primarily within the head and body of the your webpage, so it’s probably a good idea to become familiarized with what type of codes go where. For the purposes of this tutorial, the majority of the HTML tags we will be dealing with will be found within the body tags. As for our CSS codes, they will be found within the head tags. But until you kind of understand HTML, CSS will make even less sense than it already does. So, let’s get started with HTML.
LESSON 2 BASIC TAGS FOR BASIC B*TCHES
As I said previously, HTML is a lot like a language. There are millions of codes that Google can teach you about, but after having coded my own blog for the past few years, I’ve found that I only really need a handful of codes to get me by.
LESSON 2.1 IMAGE TAGS
Image tags define, well, an image. They usually don’t require a closing image tag </img> and always start out with <img. Now, to define the image itself, your’e going to need to paste an image URL within the src=”” quotation marks. Once you’ve closed the image tag with an arrowhead, you’ve made your first image tag!

<img src=”imageURL.jpg”>

LESSON 2.2 CUSTOMIZING TAGS
Now that we (kinda) know how to make tags, we’re going to quickly learn about the many ways we can customize these tags. Almost all HTML tags are customizeable, which means that we can often change a element’s width, height, color, padding, margins, etc. All you need to do is add the attribute within the < >. Anywhere will do, as long as you keep spaces between each attribute within the tag. For instance, in the tag <font family=”arial” size=”12pt” color=”#000000″>, each attribute is separated by at least one space.These values all follow the same format, and if you forget what they are, it’s easy enough to Google them. Anyway, a tag’s defining values are contained within quotation marks (“”). For instance, to define a tag’s width, width=”140px”. Or to define a tag’s color, color=”#ffffff”. Just make sure to close the quotation marks, otherwise your code won’t work the way you want it to. Here’s a list of definitions we’ll be using, so get familiar with them.
ATTRIBUTE DESCRIPTION VALUES EXAMPLES
Width
Sets the width of a tag. Can be an image, a table, a <div> tag. Anything, really.
 Pixels or Percentage <img src=”imageURL.jpg” width=”100%”>
<img src=”imageURL.jpg” width=”100px”>
Height Sets the height of a tag. Pixels or Percentage <img src=”imageURL.jpg” height=”100%”>
<img src=”imageURL.jpg” height=”100px”>
Align
Aligns the tag, much you like align paragraphs in a Word document.
 Left, right, center, justify <img src=”imageURL.jpg” align=”left”>
<img src=”imageURL.jpg” align=”center”>
Color
Sets the color of a tag. This usually applies to fonts, backgrounds, and other such things that require a color tag.
 6 numerical digit HTML color code <font color=”#BE81F7″>
Size
Sets the size of a tag. Can be the size of a font or the size of a line.
 Pixels or Points (fonts only) <font size=”12pt”>
<hr size=”2px”>
Face
Defines your font. Note that not all fonts are recognized by different browsers.
 A font family <font face=”times new roman”>
Style
Let’s you define an HTML tag with CSS properties.
 MANY <div style=”CSS”>

 

LESSON 2.3 LINK TAGS

It’s easiest to explain link tags by showing you one first:

<a href=”URL” target=”_blank”>Link Text</a>

For some reason, <a> is the HTML symbol for a link. Either way, link tags belong with <a href and must always be closed with </a> (unless you want a whole paragraph to be a link). If you add the target=”_blank” attribute, it will open your link in a new window. Super easy, super simple.
LESSON 2.4 THE REST OF THE TAGS
Now that we kind of get how tags work, and maybe even how to customize them, I’m just going to put the important ones down below in a table. That way, you don’t have to read a billion paragraphs, and I don’t have to type them out.
ELEMENT DESCRIPTION ATTRIBUTES EXAMPLES
Font What does it sound like? Defines your font (you may also see <Span>; treat it the same as you would a <Font> tag) Size, Color, Face, Style <font size=”12pt” color=”#000000″ face=”arial” style=”CSS”>
Image Just including this in case you’re already forgotten. Width, Height, Style <img src=”imageURL.jpg” width=”100%” height=”50px” style=”CSS”>
Div One of the most important tags you’ll ever learn. This tag is a container that encapsulates other HTML tags and can be used to group them together. I’ve even written an entire section on it below, but for reference, here it is. Width, Height, Align, Style <div align=”center” width=”100%” height=”200px” style=”CSS”>
LESSON 2.5 DIV TAGS

Div tags are one of the most important HTML codes you’ll learn out there when designing you’re blog. They’re a great way to position HTML elements, and even add small bits of CSS when you’re in desperate need. Now, before we really get into the whole shizam with Div codes, we’re going to need to quickly learn how to use CSS, since a lot of the coding done with Div codes employ CSS.

LESSON 3 CSS
So far, it’s taken me a couple hours to write this post (mostly because I’ve been binge-watching Marco Polo). So I’m going to get through this quick. CSS contains styles that define how HTML elements are displayed. Basically, if you define an HTML element using CSS once, you won’t ever have to define again. For instance, if you want your webpage’s font to be yellow, define it once in CSS and you won’t have to keep repeating it every time you close your <font> tag. Basically, CSS saves you a lot of work. But, before I forget, all CSS must be contained within <style></style> tags.CSS consists of rule sets (similar to an HTML tag), and these rule sets consist of a selector and a declaration block. The selector points to the HTML element you want to style, while the declaration block contains > 1 declarations separated by semicolons. Each declaration contains a property name and a value.

 

There are many types of selectors in CSS. For one, there’s the element selector which is based on the element name. For example, you can select all <p> elements, center-align and define every paragraph’s color by defining it in CSS.

p {
text-align: center;
color: red;
}

More importantly, there’s the id selector, which uses the id attribute of an HTML tag to define one or more specific elements. This id should be unique within the page, and is preceded by a hashtag when being defined in CSS. For instance, if I’m creating a menu that I want only 5 pixels from the top and 300 pixels wide, this would be my code:

#menu {
top: 5px;
width: 300px;
}

Now that we know all that, if you look at your webpage’s HTML, you’ll notice that there’s already quite a bit of CSS coding involved. And once you understand the different properties and values, customizing any bit of CSS you see becomes 100x easier.

PROPERTY DESCRIPTION VALUES EXAMPLES
Color Boring, but this defines the color. Color code h1 {color: blue;}
Font-family Defines the font family. Font family h1 {font-family: arial}
Font-size Defines the font size. Pixels or Points h1 {font-size:10px;}
Margins
Defines the the element’s margins, which are the spaces around an element. There are technically four values that a margin can have: left, right, top and bottom. And when defining a margin, you can either use the shorthand or define each margin value separately. If using the shorthand, the order is: top right bottom left. If you only write one value for the margin, this makes all values the same.
 Pixels or Percentage h1 {margin: 10px 5px 15px 20px}
h1 (margin:10px;}
h1 {margin-bottom: 50px;}
h1 {margin-right:50%;}
Padding
Defines an element’s padding, which clears an area around the element inside the border of an element. The padding is affected by the background color of the element (i.e., if your padding value is 10px, your background will also be padded or increased by 10px). Like margins, you can either use the shorthand to define each padding value, or define the four padding values separately.
 Pixels or Percentage h1 {padding: 10px 5px 15px 20px}
h1 (padding:10px;}
h1 {padding-top:40px;}
h1 {padding-right: 20%;}
Letter-spacing Defines the spaces between letters. Pixels h1 {letter-spacing: 2px;}
Line-height Defines the space between lines of text. Pixels h1 {line-height:5px;}
Background-color Defines the background color of the element. Color code h1 {background-color: #cccccc;}
Top/ Left/ Right/ Bottom
Defines an element’s distance away from the top, left, right, or bottom of its designated container. For instance, if I want my h1 text to be 5px from the right of my webpage, I’d describe it as h1 {right:5px;}.
 Pixels or Percentage h1 {top: 5px;}
h1 {right: 5%;}
Text-align
Defines a text’s alignment.
 Left, Right, Center, Justify h1 {text-align: left;}
h1 {text-align: justify;}
Position
Very important property that specifies the type of positioning method used for an element. Absolute positions an element completely unrelated to the body element. This means they have no effect at all on their parent element and can overlap other content. Fixed positions an element relative to the browser window. Relative positions an element relative to its normal position (i.e., left:20; adds 20 pixels to the element’s normal left position).
 Relative, Absolute, Fixed h1 {position: absolute;}
h1 {position: relative;}
h1 {position: fixed;}
Font-weight
Determines the font’s weight. When using a number to define the font-weight, 400 is normal, and 700 is bold. Different browsers may react differently to a font’s weight.
 Normal, Bold, Number (100 to 900)

h1 {font-weight: bold;}
h1 {font-weight:400;}
Text-transform
Transform’s an element’s text.
 None, Uppercase, Lowercase, Capitalize

h1 {text-transform: uppercase;}
h1 {text-transform: capitalize}
Text-decoration
Decorate a text (yay!)
 None, Overline, Line-Through, Underline

h1 {text-decoration: overline;}
h1 {text-decoration: line-through}
Font-style
Define’s a font’s style.
 Normal, Italic, Oblique

h1 {font-style:italic}
h1 {font-style: oblique}

 

LESSON 3 DESIGNING YOUR BLOG


Okay, phew. Now that we’re past all that, we can get on to the real stuff. Before I get onto some examples, I’m going to share some tips on how to design your blog. And because I use Blogspot, this will specifically be for all you Google Blogger users. 


If you head over to the Layout tab in your Blogger dashboard, you’ll notice that you can add HTML widgets onto the sideboard or header of your blog. When designing my blog, I use these widgets to add things like social media icons and fixed position menus that scroll down with the browser. These elements can be added into the HTML template of your blog, but for purposes of organization, I like to use the widgets to keep them separate. Otherwise, changing things like the positioning of blog posts’ titles or of the date header can be done within the template. They may be hard to find, but should you be interested in tweaking these little things, Google tutorials are great for this. Unfortunately I’m not going to be going through all this in this tutorial since your code is likely pretty different from mine at the moment. But either way, Google knows all. 

LESSON 4 EXAMPLES


Personally, I find one of the best ways to learn HTML is just going through some examples. I highly encourage that you experiment with these codes on your own website!


<div align=”center” style=’top:0px; background-color: #cccccc; width:100%; position: fixed; padding-top:5px; font-weight:700; text-decoration: none; padding-bottom:5px; ‘>

<font style=”padding-left:30px; font-color: #000000; font-family:arial; padding-right:30px;letter-spacing: 2px;”>
<a href=’www.URL.com/about’  target=’_blank’>ABOUT</a>&nbsp; &nbsp;
<a href=’www.URL.com/contact’ target=’_blank’>CONTACT</a>&nbsp; &nbsp;
<a href=’www.URL.com/blog-roll’ target=’_blank’>BLOG ROLL</a>
</font>
</div>Put this within the <body> tags of your website, and you’ll get a fixed menu with a grey background. And for reference, &nbsp; signifies a space in HTML.<html>
<head>
<style>


body {
  font-family: arial;
  font-size:11px;
  color: #000000;
  letter-spacing:1px;
  padding: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom:50px;
  background: #ffffff;


}


html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}


a:link {
  text-decoration:none;
  color: #000000;
}


a:visited {
  text-decoration:none;
  color: #000000;
}


a:hover {
  text-decoration: none;
  color: #ffffff;
font-weight:none;


}


#menu {
width: 400px;
top: 0px; 
background-color: #cccccc;
width: 100%;
position: fixed;
padding-top:5px; 
font-weight: 700;
text-decoration: none;
padding-bottom: 5px;


}
</style>
</head>
<body>


<div align=”center” id=”menu” >
<font style=”padding-left:30px; font-color: #000000; font-family:arial; padding-right:30px;letter-spacing: 2px;”>
<a href=’www.URL.com/about’  target=’_blank’ style=”padding: 0px 15px 0px 15px;”>ABOUT</a>
<a href=’www.URL.com/contact” target=’_blank’ style=”padding: 0px 15px 0px 15px;”>CONTACT</a>
<a href=’www.URL.com/blog-roll’ target=’_blank’ style=”padding: 0px 15px 0px 15px;”>BLOG ROLL</a>
</font>
</div>
</body></html>
This code employs both CSS and HTML to give you a more interactive fixed menu. Now you can adjust the color of your visited links, etc. Should you not want your menu to move, all you need to do is change your position from fixed to absolute!
I’m going to leave it here for now, since it’s 3:15 AM in the morning and it’s kind of embarrassing that I’ve already watched 7 episodes of Marco Polo just tonight. I know this post was ridiiiiculously long, but hopefully that has taught you a little bit about how you can use CSS and HTML to design your own blog. Good luck! And should you have any questions, let me know in the comments!

5 Comments

LEAVE A REPLY

  • Just wish to say your article is as astounding. The clearness
    in your post is simply spectacular and i can assume you’re an expert on this
    subject. Fine with your permission allow me to grab your RSS feed to
    keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

    Reply

  • I learned to code in high school but didn’t code a single thing till I started blogging and of course I remember nothing now! I really wish I had kept up with it but who knew the things you learn in high school can be useful! This guide is soooo helpful! Thanks so much!

    Reply

  • Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

    Reply

Leave a Reply