HTML Basics
Welcome to my second guide. This guide is about the basics of HTML. If you have never seen HTML before this is the guide for you.
What is HTML?
HTML or Hypertext Markup Language is the most often used way of relaying information across the World Wide Web. It uses a set of “Tags” to change how information is displayed.
What is a browser?
A browser is what finds and displays websites. The browser that you are using (IE, FF, Ect.) deciphers the HTML tags and your text to display your website as you want it. Each browser displays the tags slightly differently, so while making your own website you will want to look at in as many browsers as possible to make sure it looks nice and works well. Two of the largest and most popular browsers are Internet Explorer that comes with Windows Operating systems and Fire Fox a free browser which many find to be better than IE.
Before you begin making HTML documents you will need a simple text editor, such as Notepad. For all of our proposes I will say that that all HTML files need to be saved with a “.html” or “.htm” extension, which is not entirely true.
Now lets begin your first website. To begin copy and paste the following code into your editor.
Code:
<html>
<head>
<title>My first website</title>
</head>
<body>
My body!
</body>
</html>
If you open that with FF or IE you will see the great wonders of your first website. Pretty boring eh?
Anywhere you see a “<Word>”, it is an opening tag. “</Word>” is a closing tag. Tags do many things from changing font color to adding links and images. Some tags do not have a closing tag, so there is a special way to close them that is not required but suggested.
NOTE: Unlike what others say, none of those tags are required for your website to work. But you should put them anyway.
Let’s break down that file to see what it really does.
This tag declares the beginning of your HTML document. You must put its closing tag, “</html>”, on the last line of your file. Everything between the opening and closing tags is where everything else goes.
Between the opening and closing tags of this tag you put many things that are more advanced, and unnecessary so we will skip this.
Code:
<title>My first website</title>
This tag changes what the title bar says. The title bar is in the top left corner of your browser. Put what you it to say between the opening and closing tags.
End of the <head> area. Nothing special enough for a basic HTML guide.
Code:
<body>My body!</body>
Ah, your body. The main part of your webpage is displayed here. Anything you want the viewer to see besides the title bar should be between the opening and closing tags of the body.
Like I said before, this is required at the end of your file, to say that there is no more HTML within the file.
Note: There are cases that “</html>” will not be on the last line of your file.
Now that’s all good and dandy but it does not meet W3C, the HTML police’s recommendations for the correct way to “mark up” or use HTML. They came out with XHTML in 2000. It makes many tags and attributes of tags deprecated, which means that your should not use them. Instead you should use CSS (Cascading Style Sheets) which requires just a bit more work.
Here is the same example above but it meets the W3C XHTML Strict recommendation.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body>
<p>YAY!</p>
</body>
</html>
It seems more complicated but it really is not. It is just telling the browser what type of (X)HTML your file is using to help with the displaying of your information.
We have a new tag, <p>. This simply makes the text in a paragraph type form, and all text is required to be surrounded by some sort of tag besides just the <body> tag in the XHTML Strict recommendation.
Now let’s make your text red.
In the old way of doing things you would use:
Code:
<font color = "red">YAY</font>
Congratulations, you just used your second attribute, color. (The first one is xmlns in the head tag in previous example.)
Attributes in tags tell the tags what to do. The <font> tag has many attributes that change how text is displayed. Most are deprecated, which means you should use CSS. An example of XHTML Strict is below.
Code:
<p style = "color: red;">YAY</p>
This makes everything within the <p> tag have those attributes. Let’s say we wanted to make our text bigger, and green.
NOTE: Make sure that the quotes are not “Curly Quotes”. If you are using Word or a similar program it might automatically put them in, which makes it non XHTML Strict, so because of this try and stick with simple text editors like Notepad.
Code:
<p style = "color: green; font-size: 150%;">YAY</p>
That makes the text within the <p> tags 150% bigger than normal, and green.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body>
<p style = "color: green; font-size: 150%;">YAY</p>
<p style = "color: red; font-size: 75%;">YAY</p>
<p style = "color: yellow; font-size: 300%;">YAY</p>
</body>
</html>
If you look at that in a browser you will see many different colors. But notice how they are all on the same line even though they are on different lines in your .HTML document. White space (Spaces, tabs, enter) do not effect how HTML is displayed. To start a new line in HTML use:
This makes the text start on a new line. Use two to make a line in between things.
Note: This is the first tag that needs to close its self. It has not closing tag so you must put “ />” instead of just the normal “>”. This is only required for certain tags, which you will learn more about later. Just using “<br>” will work, but it does not meet W3C’s recommendation, again. Damned W3C!
Here is an example of use of <br /> tags.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body>
<p style = "color: green; font-size: 150%;">YAY</p><br />
<p style = "color: red; font-size: 75%;">YAY</p><br /><br />
<p style = "color: yellow; font-size: 300%;">YAY</p> <br /><br /> <br />
</body>
</html>
If you look at that in your browser you can see how the <br />s change it.
Now your website is pretty boring. Let’s give it some links to spice it up a bit!
Code:
<a href = "http://www.google.com">Text for link here</a>
That creates a link that says “Text for link here” which links to google.com.
Here is an example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body>
<p><a href = "http://www.google.com">Text for link here</a></p>
</body>
</html>
Remember all of your text, links and such must be placed within tags such as <p>. You will learn more of these tags later on when you start working with div tags and other tags like it, but for now remember to use <p> around stuff.
Note: <p> makes the text like a paragraph so use it for each different paragraph.
Now, let’s make the link red. To do this we will be using the same style attribute as we did before.
Code:
<a style ="color: red;" href="http://www.google.com">Text for link here</a>
It’s pretty simple right? The style attribute is very versatile working for almost everything. You could also change the size like you did above and many other things! Now, I know you are all dying to add pictures, so that is next.
Code:
<img src="name of file" alt ="what text if pic not displayed" />
Now that was not so hard was it? The “alt” attribute is required for XHTML Strict recommendation. <img> is the second tag that requires the /> to close it since it does not have a closing tag. Remember to do that to follow W3’s recommendation.
Note: All tags should be in lower case to follow W3’s recommendation.
Here is a list of some other text formatting tags:
Code:
<b></b> - Makes text bold
<i></i> - Makes text italic
<big></big> - Makes text bigger than surrounding text
<small></small> - Makes text smaller than surrounding text
<sub></sub> - Subscript
<sup></sup> - Superscript
All of these need to be used in the <p> tag or within a <div> tag which is more advanced. For now just surround each paragraph of your text in a <p> tag.
If you want to format a heading outside of a <p> tag you should use one of these.
Code:
<h1></h1> - The largest heading format
<h2></h2> - smaller
<h3></h3> - smaller
<h4></h4> - smaller still
Remember do not use these within a <p> tag.
That is the conclusion of my HTML Basics Guide.
To check if your HTML is valid XHTML you can go to
http://validator.w3.org/ to have it validated, which I used to validate the examples in this guide.
Please post any suggestions you have and if you are confused about a section I will put more detail into it if you ask. If there is wrong information also please feel free to tell me and I will change it.
I am going to start working on a more advanced (X)HTML guide sometime.
SuF's HTML Basics Guide I
SuF's HTML Basics Guide I
Linear Mode
