Beginners Guide to HTML
Right, I thought i'd start contributing to this forum with random posts based on whatever i'm working on at the time, and since i've been doing alot of coding recently, I thought what better topic than an intro to HTML for those that have yet to get to grips with it, or simply want to know a little bit more.
So let's get started.
CONTENTS
Introduction - What is HTML?
DIV tags and CSS
Introduction - What is HTML?
HTML stands for Hyper Text Markup Language.
- Hyper means beyond, over and above. Implying excess. Hypertext implies it's beyond normal text. I.e Has extra properties. Hyperlink is a form of hypertext.
- Markup is the the type of language. A markup language involves annotating by adding "markup codes" to the current document, in much the same way a teacher would "Mark up" an assignment with a different colour pen.
- Language - This indicates it's communicating with the browser and giving it instructions.
So HTML is simply a way to annotate normal text to create "hypertext" that'll give the browser instructions on how to display it/interact with it.
So How do we do that?
Beginning With HTML
HTML uses a Tag System. All HTML tags are contained within the less than (<) and greater than (>) signs.
For example the very first tag required in all HTML documents is: <HTML>
That let's the browser know that the document is going to be a HTML document. Though any tag you open in HTML, you must also close. To close a tag, you simply rewrite it, with a slash infront of the tag name. I.e </HTML>
So we'd have
<HTML>
</HTML>
Anything you want to go into your HTML document (web page) you must put in between those two tags. The Same goes for any other HTML tag, anything you want to be processed by those tags, goes in between them.
So how do you Get Started? What do you Need?
HTML is very easy to get started with. You only need a text editor i.e Notepad. To create a HTML document you simply begin with the <HTML> tag, end with the </HTML> tag, and save your document as .html file.
In notepad type 'filename.html' into the filename box without the quotes, and change the "Save as Type" box to "All files (*.*)", otherwise it'll save it as filename.html.txt, and include the .html part as part of the filename, rather than the extension.
So that's that, back to the HTML! Let's figure out how to put some text and other fun things on our page.
The Basic Layout - The Header and the Body
As we've mentioned previously, all HTML documents need <HTML></HTML> tags to begin and end them respectively. But they also require a few extra sections to work properly on the web.
Here's what you need to get started:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Here we've split the html document up into the Header and Body with the <HEAD></HEAD> and <BODY></BODY> tags respectively. Notice that the other new tag <TITLE></TITLE> is contained within the Header.
The Body of the document is designed for everything that's going to be displayed on the page (i.e pretty much everything). And the Head (or header) is designed for any meta information relating to the page.
For example, above we have the <TITLE></TITLE> tag in our document, which simply tells the browser the title of the page, which will be displayed in the browser toolbar, at the top of new tabs and as your sites title in the SERPs.
The header is also the place where you can add Keywords and descriptions relating to your page via <META> tags.
The body is where we'll be designing the page and adding the actual content.
So now we've split it up, how do we display the content!?
Displaying Content
Headings
Now one of the first things you'll probably want to do, is put up a title. We can do this nice and easily via the heading tags. You can use <h1></h1> for your first heading, and then <h2></h2> down to <h6></h6> for subheadings.
The larger the number, the smaller and "less important" in the eyes of google the heading will be.
For that reason always remember to put your titles in <h1></h1> tags.
So Let's say we've got a Gardening site, we might have this;
<HTML>
<HEAD>
<TITLE>Gardening World: The No.1 Site for Gardening Tips</TITLE>
</HEAD>
<BODY>
<H1>Gardening World</H1>
</BODY>
</HTML>
That would give us a blank page, with "Gardening World" written on it, and "Gardening World: The No.1 Site for Gardening Tips" in the browser toolbar.
Paragraphs
There's a good chance you'll want to add some text to your site, maybe an article, and paragraphs are the perfect way to do that. Using the <p></p> tags, or paragraph tags, you can add all the text in the world.
Putting each paragraph in separate <p></p> tags will automatically add the required padding between paragraphs.
You could do something like this;
<HTML>
<HEAD>
<TITLE>Gardening World: The No.1 Site for Gardening Tips</TITLE>
</HEAD>
<BODY>
<H1>Gardening World</H1>
<p>Welcome to gardening World, the best place on the web to get all
the information you could want on gardening and caring for your garden</p>
<p>Check out the links below for some of our favourite articles</p>
</BODY>
</HTML>
This would give us the same page as before with our title, except we'd now have two paragraphs of text below it as well.
Formatting - Bold/Italics/Underline & Line Breaks.
Most formatting with HTML should really be done with CSS, however there's a few tags you should definitely know to format your text with pure html.
Sidenote: Back in the day everyone used to use html to format everything, however it became messy and complicated, so
CSS is now widely used to perform styling, and leaves html free to simply define elements.
Some of the most widely used styling tags in HTML are the Bold, Italic and Underline tags. These are all easy as pie;
<b></b> - For Bold.
<i></i> - For Italics.
and
<u></u> - For your guessed it, underlined text.
Another useful formatting character is the Line break. Used like a carriage return to take you onto the next line.
It's tag is simply;
<br> - Which means Break (or Line Break). The <br> tag doesn't have a closing </br> tag, because it's an empty tag, and contains no content. In XHTML it must be closed by writing it with a slash like so; <br />, but in HTML it's not strictly neccesary.
Images and Links
Now you're definitely going to need some Images and Links on your page, and they're both pretty straight forward.
To insert an image we use the <img> tag.
However, we need to tell the browser where to get the image from, so we have to include it's source location like
so;
<img src="http://www.yoursite.com/image.jpg">
the 'src' bit stands for source, so image source. And always remember the http:// part of the link, or your image won't show up. (A common newbie mistake).
Like the <br> tag, the image tag has no end tag, though again in XHTML must be closed with a slash at the end. I.e:
<img src="http://www.yoursite.com/image.jpg" />
Links are easy enough as well, we use the <a> tag. And again include the address.
<a href="http://www.sitetolinkto.com">Anchor Text</a>
href indicates the location to link to, and you close the tag with </a>. As you can also see, the anchor text of the link goes in between.
You can combine tags or "nest" tags within each other for effects like so;
Linking an image;
<a href="http://www.sitetolinkto.com"><img src="http://www.site.com/image.jpg"></a>
Which would link the image, and take you to "www.sitetolinkto.com" when clicked.
LISTS and NAV MENUS
Another useful Tag for formatting is the <UL> Tag, and </UL> tag respectively.
UL stands for Unordered List, as opposed to OL, which stands for Ordered List.
The <OL> tag creates a numbered list of items, whereas the UL tag creates a bullet point style list of items.
In order to create a List, we use <UL> and </UL> to open and close the list, and <LI> and </LI> for each item.
Here it is in action;
<UL>
<li>Tea</li>
<li>Milk>/li>
<li>Coffee</li>
</UL>
Sidenote: As you may have noticed HTML is not case sensitive, <LI> and <li> and <Li> do the same thing.
The reason I mention lists, is 1. Because they're useful, especially in our SEO style articles. But also, because they're essentially the best and most widely used method for creating excellent navigation menus.
The exact method is out of the scope of this article, however if you want to create a nice nav bar, with roll over style links that "pop" or change colour or something, this is what you'll want to look into. Simply google "UL navbar" or something to that effect.
DIV Tags and CSS
Finally I wanted to talk to you about <DIV> and </DIV> tags, and CSS.
As mentioned earlier CSS is the main way in which things tend to be styled these days (previously tables were widely used to align a page nicely, however they're old now and CSS is much more elegant so never use tables!)
And the main way in which that is done, is via <DIV></DIV> tags.
A <DIV> tag creates a "Division" and can be used to encapsulate certain elements of a page, and style them separately.
For example, you could place an image of your logo in a <DIV> tag, and style it accordingly.
E.g
<DIV ID="Logo"><img src="http://www.mysite.com/logo.jpg"></DIV>
You'd then have a CSS file with the following in;
#Logo {
color: white;
font-family: Arial, sans-serif;
font-size: 13px;
}
Or whatever other styling information you wanted. You could also position it a number of ways on the page. And it makes moving things round, and organising the page much much easier.
I won't go into any more details, however definitely look into CSS and the various ways of designing a page with it. It's the way to go.
Anyway I hope you've enjoyed this Tutorial, it's taken up a large portion of my night, and it's definitely been fun to write.
Despite expecting a large majority of warriors to already know this stuff, i've tried to include bits and peices even regular HTML users may not know.
For those who want something a bit more robust than notepad to code in, but still Lightweight, I highly recommend the free tool: Notepad++
That's all for now,
Zul Sadiq
So let's get started.
CONTENTS
Introduction - What is HTML?
Beginning with HTML
What Do You Need to Get Started?The Basic Layout
- HEADER & BODYDisplaying Content
- Headings - Writing Your Title
- Paragraphs
- Basic Formatting - Bold/Italics/Underlines/Link Breaks
- Images and Links
- Lists & Navigation Menus
DIV tags and CSS
- What is CSS
- DIV tags and Positioning
Introduction - What is HTML?
HTML stands for Hyper Text Markup Language.
- Hyper means beyond, over and above. Implying excess. Hypertext implies it's beyond normal text. I.e Has extra properties. Hyperlink is a form of hypertext.
- Markup is the the type of language. A markup language involves annotating by adding "markup codes" to the current document, in much the same way a teacher would "Mark up" an assignment with a different colour pen.
- Language - This indicates it's communicating with the browser and giving it instructions.
So HTML is simply a way to annotate normal text to create "hypertext" that'll give the browser instructions on how to display it/interact with it.
So How do we do that?
Beginning With HTML
HTML uses a Tag System. All HTML tags are contained within the less than (<) and greater than (>) signs.
For example the very first tag required in all HTML documents is: <HTML>
That let's the browser know that the document is going to be a HTML document. Though any tag you open in HTML, you must also close. To close a tag, you simply rewrite it, with a slash infront of the tag name. I.e </HTML>
So we'd have
<HTML>
</HTML>
Anything you want to go into your HTML document (web page) you must put in between those two tags. The Same goes for any other HTML tag, anything you want to be processed by those tags, goes in between them.
So how do you Get Started? What do you Need?
HTML is very easy to get started with. You only need a text editor i.e Notepad. To create a HTML document you simply begin with the <HTML> tag, end with the </HTML> tag, and save your document as .html file.
In notepad type 'filename.html' into the filename box without the quotes, and change the "Save as Type" box to "All files (*.*)", otherwise it'll save it as filename.html.txt, and include the .html part as part of the filename, rather than the extension.
So that's that, back to the HTML! Let's figure out how to put some text and other fun things on our page.
The Basic Layout - The Header and the Body
As we've mentioned previously, all HTML documents need <HTML></HTML> tags to begin and end them respectively. But they also require a few extra sections to work properly on the web.
Here's what you need to get started:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Here we've split the html document up into the Header and Body with the <HEAD></HEAD> and <BODY></BODY> tags respectively. Notice that the other new tag <TITLE></TITLE> is contained within the Header.
The Body of the document is designed for everything that's going to be displayed on the page (i.e pretty much everything). And the Head (or header) is designed for any meta information relating to the page.
For example, above we have the <TITLE></TITLE> tag in our document, which simply tells the browser the title of the page, which will be displayed in the browser toolbar, at the top of new tabs and as your sites title in the SERPs.
The header is also the place where you can add Keywords and descriptions relating to your page via <META> tags.
The body is where we'll be designing the page and adding the actual content.
So now we've split it up, how do we display the content!?
Displaying Content
Headings
Now one of the first things you'll probably want to do, is put up a title. We can do this nice and easily via the heading tags. You can use <h1></h1> for your first heading, and then <h2></h2> down to <h6></h6> for subheadings.
The larger the number, the smaller and "less important" in the eyes of google the heading will be.
For that reason always remember to put your titles in <h1></h1> tags.
So Let's say we've got a Gardening site, we might have this;
<HTML>
<HEAD>
<TITLE>Gardening World: The No.1 Site for Gardening Tips</TITLE>
</HEAD>
<BODY>
<H1>Gardening World</H1>
</BODY>
</HTML>
That would give us a blank page, with "Gardening World" written on it, and "Gardening World: The No.1 Site for Gardening Tips" in the browser toolbar.
Paragraphs
There's a good chance you'll want to add some text to your site, maybe an article, and paragraphs are the perfect way to do that. Using the <p></p> tags, or paragraph tags, you can add all the text in the world.
Putting each paragraph in separate <p></p> tags will automatically add the required padding between paragraphs.
You could do something like this;
<HTML>
<HEAD>
<TITLE>Gardening World: The No.1 Site for Gardening Tips</TITLE>
</HEAD>
<BODY>
<H1>Gardening World</H1>
<p>Welcome to gardening World, the best place on the web to get all
the information you could want on gardening and caring for your garden</p>
<p>Check out the links below for some of our favourite articles</p>
</BODY>
</HTML>
This would give us the same page as before with our title, except we'd now have two paragraphs of text below it as well.
Formatting - Bold/Italics/Underline & Line Breaks.
Most formatting with HTML should really be done with CSS, however there's a few tags you should definitely know to format your text with pure html.
Sidenote: Back in the day everyone used to use html to format everything, however it became messy and complicated, so
CSS is now widely used to perform styling, and leaves html free to simply define elements.
Some of the most widely used styling tags in HTML are the Bold, Italic and Underline tags. These are all easy as pie;
<b></b> - For Bold.
<i></i> - For Italics.
and
<u></u> - For your guessed it, underlined text.
Another useful formatting character is the Line break. Used like a carriage return to take you onto the next line.
It's tag is simply;
<br> - Which means Break (or Line Break). The <br> tag doesn't have a closing </br> tag, because it's an empty tag, and contains no content. In XHTML it must be closed by writing it with a slash like so; <br />, but in HTML it's not strictly neccesary.
Images and Links
Now you're definitely going to need some Images and Links on your page, and they're both pretty straight forward.
To insert an image we use the <img> tag.
However, we need to tell the browser where to get the image from, so we have to include it's source location like
so;
<img src="http://www.yoursite.com/image.jpg">
the 'src' bit stands for source, so image source. And always remember the http:// part of the link, or your image won't show up. (A common newbie mistake).
Like the <br> tag, the image tag has no end tag, though again in XHTML must be closed with a slash at the end. I.e:
<img src="http://www.yoursite.com/image.jpg" />
Links are easy enough as well, we use the <a> tag. And again include the address.
<a href="http://www.sitetolinkto.com">Anchor Text</a>
href indicates the location to link to, and you close the tag with </a>. As you can also see, the anchor text of the link goes in between.
You can combine tags or "nest" tags within each other for effects like so;
Linking an image;
<a href="http://www.sitetolinkto.com"><img src="http://www.site.com/image.jpg"></a>
Which would link the image, and take you to "www.sitetolinkto.com" when clicked.
LISTS and NAV MENUS
Another useful Tag for formatting is the <UL> Tag, and </UL> tag respectively.
UL stands for Unordered List, as opposed to OL, which stands for Ordered List.
The <OL> tag creates a numbered list of items, whereas the UL tag creates a bullet point style list of items.
In order to create a List, we use <UL> and </UL> to open and close the list, and <LI> and </LI> for each item.
Here it is in action;
<UL>
<li>Tea</li>
<li>Milk>/li>
<li>Coffee</li>
</UL>
Sidenote: As you may have noticed HTML is not case sensitive, <LI> and <li> and <Li> do the same thing.
The reason I mention lists, is 1. Because they're useful, especially in our SEO style articles. But also, because they're essentially the best and most widely used method for creating excellent navigation menus.
The exact method is out of the scope of this article, however if you want to create a nice nav bar, with roll over style links that "pop" or change colour or something, this is what you'll want to look into. Simply google "UL navbar" or something to that effect.
DIV Tags and CSS
Finally I wanted to talk to you about <DIV> and </DIV> tags, and CSS.
As mentioned earlier CSS is the main way in which things tend to be styled these days (previously tables were widely used to align a page nicely, however they're old now and CSS is much more elegant so never use tables!)
And the main way in which that is done, is via <DIV></DIV> tags.
A <DIV> tag creates a "Division" and can be used to encapsulate certain elements of a page, and style them separately.
For example, you could place an image of your logo in a <DIV> tag, and style it accordingly.
E.g
<DIV ID="Logo"><img src="http://www.mysite.com/logo.jpg"></DIV>
You'd then have a CSS file with the following in;
#Logo {
color: white;
font-family: Arial, sans-serif;
font-size: 13px;
}
Or whatever other styling information you wanted. You could also position it a number of ways on the page. And it makes moving things round, and organising the page much much easier.
I won't go into any more details, however definitely look into CSS and the various ways of designing a page with it. It's the way to go.
Anyway I hope you've enjoyed this Tutorial, it's taken up a large portion of my night, and it's definitely been fun to write.
Despite expecting a large majority of warriors to already know this stuff, i've tried to include bits and peices even regular HTML users may not know.
For those who want something a bit more robust than notepad to code in, but still Lightweight, I highly recommend the free tool: Notepad++
That's all for now,
Zul Sadiq
“An expert is a person who has made all the mistakes that can be made in a very narrow field†Niels Bohr