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!
<img src=”imageURL.jpg”>
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”> |
It’s easiest to explain link tags by showing you one first:
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”> |
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.
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.
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:
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} |
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.
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; ‘>
<a href=’www.URL.com/about’ target=’_blank’>ABOUT</a>
<a href=’www.URL.com/contact’ target=’_blank’>CONTACT</a>
<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, 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>
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.
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!
I’d like to find out more? I’d love to find out more details.
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
Great article. It is a great blog for learning Html and CSS basics.
Thank you so much for sharing helpful information.
website design hyderabad and website design amaravati