How to use this HTML Tutorial


Having read the tutorial notes, use the HTML code in the grey boxes to eith type or copy and paste to you text editor. Any red text is new, whereas you would have copied the black text before.


Create Your First Web Page


Are you ready to create your first web page? Open up your text editor, such as Notepad2, and type or copy and paste the following:



<html>

<body>

<p>I am going to build my first website using HTML.</p>

</body>

</html>



Save this as my_first_page.html, or something similar. Now go to the folder you saved it in, double click on the icon and it will open up in your Internet browser. Alternatively, Right Click on the icon, select 'Open With' and select your browser. Your web page should look like this Example. How did you do?


Headings in HTML


Next we will add a heading to our web page. To insert a heading the Start Tag is like this: <h1> and the End Tag looks like this: </h1>. There are a number of Heading sizes to choose from, the smallest has tags like this <h6> and </h6>. To see the difference between the sizes, see this Example. Now add a heading to your newly created web page by copying the red text below. Again, click Save then refresh your browser.



<html>

<body>

<h1>My First Web Page</h1>

<p>I am going to build my first website using HTML.</p>

</body>

</html>



Your web page should now look like this Example. If so, you are well on your way to creating a web page!



>>Next - Fonts in HTML>>



Summary of HTML Tips so far


Use small letters throughout your HTML code

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.


Summary of HTML Tags


<a>

Anchor Tag for creating links.

<b>

Bold tag.

<body>

Designates the body of the web page. Must come after the </html> tag.

<h1>

Heading tag number from 1 to 6, with h1 having the largest font.

<html>

Designates the document as a web page.

<p>

Paragraph tag.