HTML For Beginners Part 4
Welcome to the final part of our HTML For Beginners series. We are going to look at some more HTML tags in this tutorial and also give you some tips on where to go next.
View other entries in this series:
HTML For Beginners Part 1
HTML For Beginners Part 2
HTML For Beginners Part 3
Introducing DIVs
When creating HTML layouts, one of the important elements you will come across is the <div> tag. DIVs allow us to position content practically anywhere on the page. This makes our lives easier when we want to create pretty looking websites.
However, creating a DIV isn't as easy as it seems. Unfortunately, HTML isn't the only language we need to use in order to use DIVs. We need to use the style-scripting language known as CSS (Cascading Style Sheets). CSS allows us to style any HTML element we like, whether that means changing the text color, the background of a page or the size of an element. Likewise, for DIVs, we use CSS to position them on the page. Let's look at the HTML markup first:
<div id="myDiv">This is some content</div>
Quite a simple tag on its own. You can use the attributes ID and Class to identify the DIV tag (in this case we used the ID attribute with a value of myDiv). Since this is a HTML Guide and not a CSS Guide, we won't go into too much detail about how to use CSS and all the possible options we have available. But for the purpose of showing you how to use DIVs, here is a little taster:
<div id="myDiv" style="position: absolute; top: 100px; left: 200px;">This is some content</div>
The <div> tag above has a new attribute called style. This can be applied to almost every element in HTML. The style attribute allows us to put CSS directly inside the tag (called inline-css).
CSS properties follow a simple pattern: property: value; In this case, we have used the position property and given it a value of absolute. This allows us to position the div anywhere on the page. We then use the top and left properties to position exactly where we want it to go. Think of it as positioning something on a grid using x and y values.
DIVs can be positioned in a number of ways; absolute, fixed and relative. The fixed property will position the element on the page at a certain point no matter if you scroll the page, the element will stay at the same spot. The relative property will make the DIV behave normally as any other tag and is positioned depending on the surrounding elements.
You can find a lot more out about CSS on the internet, and perhaps we will do some CSS tutorials in the future.
Lists
One HTML tag that you might find useful is the list tag. Let's take a look at it's markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
We begin the list using the unordered list tags <ul></ul>. We then place our items inside the tags using the list item tags <li></li>. When you view a list on a webpage, each item is displayed in a list, usually with a bullet point.
Another type of list is the ordered list <ol> which uses similar markup:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
The OL tag will list items one after another, but instead of using a bullet point, it will use numbers like
1) Item 1
2) Item 2
3) Item 3
Heading Tags
Sometimes you want to head a certain section of your website with a title. Introducing the heading tags:
<h1>I am a heading</h1>
<h2>I am a heading</h2>
<h3>I am a heading</h3>
<h4>I am a heading</h4>
The H1~H4 tags are used as heading tags. The content inside them has the font-size increased and also given lots of spacing around it, making them for perfect headers. The difference between the tags is the size and spacing around them; h1 is the biggest and h4 is the smallest. You can also change the size yourself using CSS.
Comments
One other part of programming in any language is using comments. Comments allow you to make mental notes by writing little snippets in the language file and also let other people know what is going on if they read the code. It can be helpful too; suppose you create a HTML page and then come back to it a week later, you can use HTML comments to explain what the code is doing.
The syntax for HTML comments is quite different than regular tags:
<!-- This is a html comment -- >
You start a comment using the <!-- and any text in between is a comment. The HTML comment isn't outputted onto the page, it's just hidden in the source code. You can then close the comment using the -- >.
If you want to view the HTML source of any webpage, you can do so using your web browser. Usually you can find it under one of the options (on FireFox, pressing CTRL+U will open up the source code). You will then be able to see any comments that you have left.
Ending The Series
So you've learn quite a lot about HTML and the different tags that can be used. Learning HTML isn't all you need to know in order to make websites, but it is a start. My next suggestion would be to try and master some more HTML tags and know how they work. Then you will want to move onto CSS, since that is where you can really make website's designs look great.
Some good tutorials on the web:
http://www.w3schools.com/html/default.asp
http://code.tutsplus.com/categories/html-css
http://www.tizag.com/htmlT/
And of course, Google is your friend! You might also benefit from joining a programming community or forum that allows you to ask any questions you might have. Try http://www.sitepoint.com/ or http://www.codingforums.com/
I hope you have enjoyed this series, and if you need any help with learning HTML or would like something explain better or even to let me know of any mistakes made in this series, drop a comment below!
Enjoyed that? Check These Posts Out
Leave A Comment