HTML Tutorial

This is a very basic HTML tutorial to get you started with making your own webpage.

I. Introduction

What is HTML?

HTML, or Hypertext Markup Language,is the web programming language that tells web browsers how to structure and present content on a web page.

CSS, or Cascading Style Sheets, is something that styles HTML.

II. Hello World!

We are going to create our first web page.

You should put this in a text editor and save it as helloworld.html and then try opening it in your browser.

 
        <!doctype html>

        <head>

        <title>Hello World!>/title>

        </head>

        <body>

        Hello World!

        </body>

        </html>

III. Dissecting the HTML File

The first line <!doctype html> states that this is an HTML5 document. This doesn't really impact you at this point so this will be discussed in greater depth in a later tutorial or as we go on. Just know that this is necessary to have for the browser to know its an HTML file.

The next line <head> is an indication that this is sort of a header. This part of the HTML file isn't shown by the browser but can be used to link javascript, CSS or other metadata you want to include such as title.

All html tags, are included in <> as the starting tag and </> as the end.

The next line <title>Hello World!</title> is pretty obvious. Anything between the <title></title> tags is the title. The title is what you see on the top bar.

Title of this page:

</head> is a closure for the <head> tag.

The <body> tag starts what the user sees. What you want to put here is the content you want people to see. There is nothing to stop you from putting all of your css here, but it is advisable that you put it in another file and link it in the header.

"Hello World!" is the text that is displayed. Normally you should put it in the tag (paragraph tag) but since it is only one phrase in the whole page, it really isn't necessary.

</body> and </html> closes the body tag and the HTML document respectively.

The finished product should be this:

Now note that there is nothing to stop you from putting everything in one line like this:

 
        <!doctype html>
        <head>
        <title>Hello World!>/title>
        </head>
        <body>
        Hello World!
        </body>
        </html>

However, it isn't neat and as you put more and more things into a webpage, it will become sloppy if you don't indent or make it look readable. Also you would inconvenience yourself if you ever needed to edit the page.

IV. Making it better

You might think that this page is a bit plain. You might wonder how you can add other things such as bold or italics. Well, those are all tags as well. Now lets explore some of these tags.

 
        <i>Italics</i>   <b>Bold</b>   <a href="http://forrst.com">Link</a>

The is for italics. So in the code above, the word Italics would be italicized.

The makes text bold. The words Bold would be in bold.

The <a></a> is a link. This is a bit more complicated than the last two tags. In after "<a", you add href="". Inside the quotes is where you put your link. The important thing is that the link has to be around quotes or else it will be invalid. In between the <a> and the </a> is the text you want to show up as the link. So if I wanted google.com to show up as Search engine, my code would be this:

 
        <a href="http://google.com">Search engine</a>

Images won't work with <a> however as they have their own tag.

 
        <img src="coda.png" alt="Coda by Panic" height="45px" width="45px" />

The <img> tag doesn't need a closing tag. The src="" is where the image is located. For example to display the google logo:

 
       <img src="http://www.google.com/images/logos/ps_logo2a_cp.png" />

Alt="" is what you see if the image is not displayed so its more like a description. Height and width is specifying the height and width in pixels.