Html

Html is the code that we use to build websites. In this lesson we will look at some of the basic elements of Html and how we can write and use Html to create a webpage. A great resource for finding out more about Html is W3 Schools. The site provides a full explanation of Html and a more detailed view of Html.

This lesson is meant to be used as a guide to help you get started with the basics of Html. Some of the elements are created in a very basic way, or named in a simple way, if you are comfortable that you understand the Html then you should expand upon what is being covered in this lesson with your own ideas that are more relevant to your project.


Create a Html Document

First we will need to create a folder to store our files. In your coding folder create another folder called ‘lessonOne‘. Open up Notepad and then we can begin to write our code. It is a good idea to keep a copy of a very basic Html document to work from. Copy and paste the code below into Notepad and then save the document as ‘basicPage.html‘. It is important to ensure that you add the ‘.html‘ to the end of your file name, that way the computer will know what type of file it is and how to open it.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Make sure that you add the file extension .html to your basicPage file.
   

Once you have saved the file in your lessonOne folder we will make a copy of the file. Right click the file and select copy, then right click in the file browser window and select paste. You should now have two identical Html documents, one named ‘basicPage‘ and one called ‘basicPage – Copy‘.

   

Next create three new folders within your ‘lessonOne‘ folder. You should name them ‘html‘, ‘css‘ and ‘images‘. Now drag and drop your ‘basicPage – Copy‘ document into the ‘html‘ folder that you just made, click into the ‘html‘ folder and right click the ‘basicPage – Copy‘ document and rename it to ‘homePage‘. We can open the document in a web browser to see what this simple Html document looks like.

At this stage we need to make a distinction between viewing the document in a web browser such as Internet Explorer or Google Chrome and viewing the document in an editor such as Notepad. When we look at the document in a browser we see how the web page will look to someone browsing the world wide web, when we open the document with an editor we see the code that creates the web page.


Creating a Home Page

Right click the ‘homePage’ document and select ‘Open with’ option from the menu and open the document with Notepad. We can now begin to edit the ‘homePage’ document to add more details to our webpage.

We will begin by adding a Html list to our home page. There are two types of lists in html, ordered lists and un-ordered lists. In this instance we will be adding an un-ordered list between the <h1>This is a Heading</h1> tag and the <p>This is a paragraph</p> tag. We need to open our un-oredered list using the <ul> tag, we then need to add items to the list, we do this by using <li></li>, ‘list item’ tags.

Add three list items and then close the un-ordered list with the following tag, </ul>. Your code should look like this:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Next we will add some <a> tags into the un-ordered list, these <a> tags will be nested inside the <li></li> (list item) tags. The <a> tag will contain a href attribute which will make the <a> tag a hyperlink. The three links that we add will link to the home page and two other sample pages. There are several types of hyperlinks that we can add, for this lesson we will look at including relative URLs which point to a file within a website for example, <a href=”homePage.html”>. You might also include hyperlinks to an absolute URL which points to an external website for example, <a href=”http://www.example.com/home.html”> .

Now add the three hyperlinks to complete the Html for your site navigation. We have not created the second and third pages yet so these links will not work in a browser. Once you have added the code below we will then duplicate the homePage.html to create pageTwo.html and pageThree.html.

<ul>
   <li><a href=”homePage.html”>Home Page</a></li>
   <li> <a href=”pageTwo.html”>Page Two</a> </li>
   <li> <a href=”pageThree.html”>Page Three</a> </li>
</ul>


Create Additional Pages

To finish off our basic template we will need to create additional pages. We can do this by copy and pasting the homePage.html document twice. In the file browser, right click the homePage.html, select copy and then paste it twice so that you have three copies of the same file. then rename the two copies, pageTwo.html and pageThree.html. We can now change the content in the <p> tag for each page so that we can see that the navigation is working properly. Open homePage.html in Notepad and change the text in the <p> tag to read, This is the home page. Do the same for pageTwo.html adding; This is page two in the <p> tag, and pageThree.html add; This is page three to the <p> tag. Now as we navfigate through the pages in our browser we can see the content change.

<p>This is the home page.</p>

<p>This is page two.</p>

<p>This is page three.</p>

Now you can check that all your pages are working in the browser and the navigation links are working correctly. Once you have this completed you can look at adding CSS to your Html and your webpages will begin to take shape. Lesson Two CSS


Html Lesson Video