This is how the page should appear when the html code (in blue) below is interpreted by the browser:

This is my first heading

The next heading will be slightly smaller

This is my first paragraph. Browsers automatically add an empty line before and after paragraphs

Click here to visit Google

This is my second paragraph. I am going to insert an image after this paragraph

image of a seagull


<html>
<body>
<h1>This is my first heading</h1>
<h2>The next heading will be slightly smaller</h2>
<p>This is my first paragraph. Browsers automatically add an empty line before and after paragraphs</p>
<a href="http://www.google.com/">Click here to visit Google</a>
<p>This is my second paragraph. I am going to insert an image after this paragraph</p>
<img src="images/seagull.jpg"/>
</body>
</html>

 

Now try making an HTML Web Page yourself:

  1. Create a new folder, in your Documents or Desktop, (right click, then > New > Folder) named myweb
  2. Create an images folder inside your myweb folder
  3. Right click on the seagull image (above) and save to your images folder as - seagull.jpg*
  4. Copy ALL of the html code above (in blue)** and paste into Notepad - (usually found in - All Progammes >Accessories >Notepad)
  5. Save this text file inside your 'myweb' folder - as mypage.txt (you can edit this file again in Notepad again later)
  6. Save, (Save As), this file again and replace .txt extension with .html - name it mypage.html

    Image - Save As - html

  7. Locate and open your myweb folder.
  8. Double click the mypage.html file and it will open as a Web Page in your default browser, (check the link to Google)

Congratulation on making your first Web Page!

* Using lower case letters for html code and filenames is best practice.
** Missing brackets, speech marks, slashes and misspelled filenames may cause the code to break.

Now try making a few changes to your original text file:

  1. Wrap bold <b> tags or italics <i> tags around a word. Make sure to use the correct ending tag i.e. <b>bold</b>
  2. Insert a new image. If you are not going to publish the site, (copyright issues), you can copy one from Google images into the images folder. Make sure you choose one that isn't too big, (the seagull above is 300 x 250 pixels)
  3. Give visually impaired users, (who use screen readers), a break and provide an alternative text description for image files by using the alt attribute:
    <img src="images/seagull.jpg" alt="image of a seagull"/>
  4. Single line breaks can be inserted with an empty tag <br /> (empty tags need no ending tag)
  5. Change the heading text of your page to read Home Page
  6. Save this as a new page - re-saving as ( index.html and index.txt)
  7. Link your two pages together by inserting these links on both pages:
    <p><a href="index.html">Home Page</a><br/><a href="mypage.html">My page</a></p>
  8. When re-saving the files don't forget to save both versions of the file. (.html and .txt)
  9. Create a link to another external web page - don't miss out the http:// (tip - copy and paste the URL from your browser)
  10. Be nosey (but don't copy) - have a look at the html code of other web pages including this one* - right click on the page and 'view source'.

* If you view the source of this page you will find some hidden notes!

Click here to return to the Dimond Design Tuition Page.