Best HTML Tutorial
HTML, or HyperText Markup Language, is the coding technique used to build web pages. Knowing these codes can allow users to create their own pages from scratch, using a basic text editing program. It is important to learn HTML if you plan on having a website that is easy to access and of a high standard of quality. Fortunately, while it may look like a foreign language at first, HTML is not overly complicated, or particularly hard to learn. More of an explanation about why learning HTML is important is available from EchoEcho: Why Learn HTML and MediaCollege: Why Should I Learn HTML .
Start and end every page with the following code:
<html>
<head>
<title>Your Title Goes Here</title>
</head>
<body>
</body>
</html>
This is the basic setup that you need. Most of the other tags you use will be put between the two <body> tags. Pages should start with a title, or headline. Headlines are shown with a number after them, such as <h1> or <h2>. The larger the number following the <h>, the smaller the font will be. You can choose a number between 1 and 6 for the headline size. The headline tag is always closed immediately after its text. Larger amounts of text go inside the paragraph <p></p> tags. Each paragraph should have its own set of tags to help with formatting. This will create a line break between each chunk of text.
To create a line across your page, called a horizontal rule, use <hr>. This will make a line across your page, making a visual border between ideas or topics. To create a line break, or a space between areas of text, use <br>.
Lists are one of the easiest ways to present large amounts of information. There are tags to set up lists on your web pages. This example shows both unordered lists <ul></ul> and ordered lists <ol></ol>.
<html>
<head>
<title>List Exercise</title>
</head>
<h1>Unordered List</h1>
<body>
<ul>
<li>Item one</li>
<li>item two</li>
</ul>
<h1>Ordered List</h1>
<ol>
<li>item one<li>
<li>item two</li>
</ol>
</body>
</html>
When viewed as a web page, this would look like:
Unordered List
Item One
Item Two
Ordered List
1.Item One
2.Item Two
Tables are a little more challenging to plan out, and require you to know how many rows or columns you need ahead of time. For a table with three rows and three columns, this is the code you would use:
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>Data here</td>
<td>Data here</td>
<td>data here</td>
</tr>
<tr>
<td>Data here</td>
<td>Data here</td>
<td>data here</td>
</tr>
<tr>
<td>Data here</td>
<td>Data here</td>
<td>data here</td>
</tr>
</table>
</body>
</html>
This would create a table with nine squares, plus three header boxes for labeling what is in each column. Setting the table border size allows the viewer to see a defined border around your table.
Forms are a way for the person viewing your website to input data, such as their name, email, and a comment. They are easy to add onto your page. A form asking for the user's first and last name would be written like this:
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Fonts are one of the trickiest parts of a web page to alter. Basic font code looks like this:
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
The font size is determined by the number in the quotation marks. This number can be altered by either replacing the number with a larger or smaller number, or, if you want to increase or decrease the number by a certain amount, by putting a + or – before the number. For example, if the font size was currently a 5, but you wanted it to be a 3, you could either write <font size=3> or <font size= -2>. The face is the font type.
Adding links to your page is easy. Linking uses an attribution tag to tell your page where to send visitors if they click on one of the links you offer. There are three ways to use links on your webpage. The first is as an actual hyperlink, sending your visitors to another web page.
<a href="http://www.your-
In this example, "text description" would be the hyper linked text for the viewer to click on. Images can also be used as links. An example of this is buttons used to navigate a webpage, or a smaller image (thumbnail) that leads to a larger image. The image you are using needs to be in your web system already so that the website can access it. The code for using an image as a link is as follows:
<a href="where-the-link-sends-
<img border="0" src="name-of-image.gif" width="65" height="38">
</a>
The width and height of the image are determined by how large you want the image to be on the page. This number should be changed with photo-imaging software, not through HTML code. The final way to use links is to navigate the web site itself. Unlike the first type of link, this won't send the user to another person's web page, but instead allows them to access different pages of your web site. These are called relative reference links. The code for a reference link is:
<a href="destinationpage.html">
By clicking on the 'Click here' text, the user would be brought to the destination page.
These basic HTML tags are only the beginning of the codes available for building a web page. There are several web sites with more information on learning HTML. To really be able to use HTML to develop pages, it is essential for you to learn as much as you possibly can, and to practice often. Although it looks difficult at first, it is easy to learn once you understand the basic tags. More information about using HTML to build web pages can be found on these web sites:
HTML Made Really Easy