Lesson 1
Beginner HTML Tutorial
Adapted from http://www.htmldog.com/guides/htmlbeginner/
Tags, Attributes and Elements.
An HTML document is a type of "markup" surrounding and interspersing content. HTML is made up of tags which surround content and apply meaning to it.
Throughout the tutorial, html code will be displayed inside yellow blocks of text:
Bold text inside code blocks indicates the changes to the code you need to make.
This is the code for a basic web page:
<html>
<body>
This is my first hand coded web page
</body>
</html>
Lets make a web page that contains the above code.
- Create a folder in your My Documents directory called Lesson1.
- Create a new text document by navigating File > New > Text Document.
- Important:If you can't see the extension ".txt" at the end of the file name (and you probably won't), you need to navigate Tools > Folder Options > View and uncheck the "Hide extensions for known file types" box, then click OK.
- Rename the "New Text Document.txt" to "index.html"
- You will be asked to confirm that you want to change the file extension. Click Yes.
- Right click on your index.html file and navigate > open with > notepad. If notepad is not available, navigate choose program and then select notepad.
- Copy the above HTML code (select it with your mouse then press Crtl+c) and paste it into your index.html file (Crtl+v).
- Save your file
- Double click your index.html file in windows explorer to load your web page in your default browser (Internet Explorer).
- You have created your first web page!
Your page should look like this. Nothing too exciting, but it works. While looking at your new page in Internet Explorer, navigate View > Source to see the source of your HTML page. It should be exactly what is in the code block above, and what you see in your index.html file open in Notepad. You can view the source code of any web page using View > Source.
Now lets go over what is in the web page we've created.
The first line on the top that starts <!DOCTYPE... is to let the browser know that you know what you're doing. You may think that you don't actually know what you're doing yet, but it's important to stick this in. If you don't, browsers will switch into "quirks mode" and act in a very peculiar way.
<html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. Between <body> and </body> is the main content of the document that will appear in the browser window.
Closing tags
The </body> and </html> close their respective tags. ALL HTML tags need to be closed for your document to render correctly.
Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this: <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.
Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Rumple Stiltskin</title>' is a title element.
In HTML code it is best practice to indent your elements and their children progressively further in order to keep the document tree tidy. This may not seem important now, but it becomes so on larger documents.
Titles
To add a title to your page, change the code in your index.html file so that it looks like this:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
This is my first hand coded web page
</body>
</html>
We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).
The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.
We will see later on that other elements can appear inside the head element, but the most important of them is the title element.
Save your changes, then refresh the Internet Explorer view of your page (Ctrl+F5). Your page should now look like this. You will see that "My first hand coded web page" will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your 'favourites' (or 'bookmarks', depending on your browser), you would see that the title is also used there.
Paragraphs
Go back to your text editor and add another line to your page:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
This is my first hand coded web page
This is my second Line
</body>
</html>
Save your file, then refresh it in Internet Explorer.
You might have expected your document to appear as you typed it, on two lines, but instead you should see this.
This is because web browsers don't take any notice of what line your code is on. It also doesn't take any notice of spaces (you would get the same result if you typed "This is my first hand coded web page This is my second Line").
If you want text to appear on different lines, you need to explicitly state that.
Change your two lines of content so that they look like this:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<p>This is my first hand coded web page</p>
<p>This is my second Line</p>
</body>
</html>
The p tag is for paragraph.
Save your index.html and look at the results of your changes in Internet Explorer. The two lines will now appear on two lines.
Think of the HTML content as if it were a book - with paragraphs where appropriate.
Emphasis
You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> awesome.</p>
Line breaks
The line-break tag can also be used to separate lines like this:
This is my first hand coded web page<br />This is my second Line
However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).
Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".
Headings
The p tag is just the start of text formatting.
If you have documents with genuine headings, then there are HTML tags specifically designed just for them.
They are h1, h2, h3, h4, h5 and h6; h1 being the almighty emperor of headings and h6 being the lowest pleb.
Change your code to the following:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
Lists
Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.
The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
Change your code to the following:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>So I can build websites</li>
</ul>
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
You should see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<ol>
<li>This is a nested list.</li>
<li>This is an ordered list.</li>
<li>I understand lists</li>
</ol>
<li>So I can build websites</ li>
</ul>
</body>
</html>
Et voila. Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
A list within a list. And you could put another list within that. And another within that. And so on and so forth.
Links
Links are what the web is all about!
An anchor tag (a) is used to define a link, but you also need to add an attribute to the anchor tag - the destination of the link.
Add this to your document:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<ol>
<li>This is a nested list.</li>
<li>This is an ordered list.</li>
<li>I understand lists</li>
</ol>
<li>So I can build websites</ li>
</ul>
<h2>Find this tutorial:</h2>
<p><a href="http://www.abd.net.nz/webdesign/">ABD DOT NET</a></p>
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://www.abd.net.nz", or it can be relative to the current page. For example, if you had another file called "flying-moss.html" then the line of code would simply be
or something like this.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.
A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example
and then link to it by using something like this:
Selecting this link will scroll the page straight to the element with that id.
The a tag allows you to open the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't take the user away from your site.
There are a number of reasons why you shouldn't do this however.
From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the "back" button. Opening a new window disables this function.
On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves. Anyway, if you want to make a link open in a new window you add the attribute "target" with the value of "_blank" to the anchor tag.
Images
The img tag is used to put an image in an HTML document and it looks like this:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<ol>
<li>This is a nested list.</li>
<li>This is an ordered list.</li>
<li>I understand lists</li>
</ol>
<li>So I can build websites</ li>
</ul>
<h2>Find this tutorial:</h2>
<p><a href="http://www.abd.net.nz/webdesign/">ABD DOT NET</a></p>
<img src="http://www.abd.net.nz/graphics/ABD-Header.gif" width="113" height="46" alt="ABD logo" />
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as "alienpie.jpg" in a directory called "images" then the code would be <img src="images/alienpie.jpg"...
The width and height attributes are important to include, although not necessary, because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with "/>"
The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things...
The most commonly used file formats used for images are GIFs and JPEGs. They are both compressed formats, and have very different uses.
GIFs can have no more than 256 colours, but they maintain the colours of the original image. The lower the number of colours you have in the image, the lower the file size will be.
GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLOURS.
JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.
JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.
Images are perhaps the largest files a new web designer will be handling. It is a common mistake to be oblivious to the file size of images, which can be extremely large. Web pages should download as quickly as possible, and if you keep in mind that some people still use modems that download at less than 5Kb a second, you can see how a large file will greatly slow down the download time of a full page.
You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress images and the best way to figure out what is best suited for yourself is trial and error.
Tables
Across the worldwide web, HTML tables are used and abused to layout pages. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.
There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this tutorial.
Type the following code into the body of your document and then we will go through what each tag is doing:
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<ol>
<li>This is a nested list.</li>
<li>This is an ordered list.</li>
<li>I understand lists</li>
</ol>
<li>So I can build websites</ li>
</ul>
<h2>Find this tutorial:</h2>
<p><a href="http://www.abd.net.nz/webdesign/">ABD DOT NET</a></p>
<img src="http://www.abd.net.nz/graphics/ABD-Header.gif" width="113" height="46" alt="ABD logo" />
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</table>
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this. But it may not, because tables can be tricky! You may have to go back and ensure you have all the tr and td tags, and that you close all the tags you open.
The table element defines the table.
The tr element defines a table row.
The td element defines a data cell. These must be enclosed in tr tags, as shown above.
If you imagine a 3x2 table (what we have coded above), which is 6 cells, there should be 2 tr elements to define the rows and three td elements within each of the rows, making a total of 6 td elements.
Forms
On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside the scope of this tutorial.
The basic tags used in the actual HTML of forms are form, input, textarea, select and option.
form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get latches the information onto the URL).
So a form element will look something like this:
The input tag is the daddy of the form world. It can take ten forms, outlined below:
- <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
- <input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
- <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.
- <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.
- <input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.
- <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
- <input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.
- <input type="button" /> is a button that will not do anything without extra code added.
- <input type="reset" /> is a button that when selected will reset the form fields to their default values.
- <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
Note that the input tag closes itself with a "/>" at the end.
A textarea is, basically, a large textbox. It requires a rows and cols attribute and is used like this:
The select tag works with the option tag to make drop-down select boxes.
They work like this:
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>
When the form is submitted, the value of the selected option will be sent.
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>.
All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge" />
Lets put a form into our index.html file. (Note: this form will not work unless there is a "contactus.php" file, which is stated in the action attribute of the form tag, to handle the submitted date)
<html>
<head>
<title>
My first hand coded web page
</title>
</head>
<body>
<h1>My first hand coded web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<ol>
<li>This is a nested list.</li>
<li>This is an ordered list.</li>
<li>I understand lists</li>
</ol>
<li>So I can build websites</ li>
</ul>
<h2>Find this tutorial:</h2>
<p><a href="http://www.abd.net.nz/webdesign/">ABD DOT NET</a></p>
<img src="http://www.abd.net.nz/graphics/ABD-Header.gif" width="113" height="46" alt="ABD logo" />
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</table>
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>
</body>
</html>
Save your index.html and look at the results of your changes in Internet Explorer. The page in your browser should now look like this.
Well done!
You now know basic HTML and have created a pretty complicated web page! It doesn't look pretty (We'll learn how to do that next week), but it's reasonably functional, which at the end of the day is what the web is all about.
Challenge
Use your new html skills to create a page identical to this one, but without viewing the source code unless you have to! The challenge only uses skills learned in this lesson, but combines them in new ways.