UNSW, Faculty of the Built Environment

• home /
• Learning /
• HTML /
• HTML Tutorial

Creating Web Pages using HTML

Introduction

This tutorial will guide you through the creation of a simple Web page, you should refer to my "HTML Reference" document for details on the meanings of things that are unclear in this tutorial! This tutorial will not attempt to explain everything, rather it will explain how to string all the various bits together.

Beginnings

The first stage of creating a web page is to load Notepad (click on the 'Start' button then: Programs : Accessories : Notepad), then type in the following:

Save this file in your directory (on drive N:), use the extension: .htm (e.g: "page1.htm"), and then (using your file manager [Windows Explorer]) double-click on this file. The computer should load up the default browser and then display your page!

If you close your editor, it is quite simple to open the page up again - but there's a trick! By default, if you double-click on a HTML file your computer will open the page in the web browser (which is sensible for most people)! In Windows (using the file manager - Windows Explorer), you can open a HTML file in your editor by right-clicking on the file's name or icon then select Open with... and select your editor (or Choose Program...).

One jargon word that I'm going to use and that you need to understand is "tag". In HTML, a tag is a keyword enclosed in brackets (<>). The text in tags are not case sensitive. Generally tags are binary - that is there is a begining tag (for example: <title>) and then an end tag (for example: </title>). All the text between the tags is effected by the tag; so in the case of the title tag the text with the tags is the title! Some tags are unary - that is there is only one part. A good example of a unary tag is the horizontal line tag <hr>, which causes the browser to display a horizontal line!

Now I want you to delete the line "Hello World", replacing it with:

Refresh button :

Once you've done that, save the file and swap back to the Web Browser and click on the Refresh button this causes the browser to re-read the document.

The <h1> tag is used for major headings, there are 6 heading tags - numbered from 1 to 6, with <h1> being the "biggest" and <h6> being the smallest. The align" attribute is used to control the positioning of the text within the tag, the options are "left", "center", and "right" (the default is left).

Different browsers may display the heading tags differently, in-fact people are able to change the fonts and font size associated with all these tags! This is an important point! HTML and Web Browsers are not WYSIWYG, pages can look very different on different computers, BUT all Web Browsers will attempt to display the information on the page. The same HTML file can be read and displayed on Macs and PCs...! That is one of the key factors in understanding the power of the Web!

A Picture is worth a thousand words!

Web Browsers can display a number of different kinds of images, the two most commonly used formats that are supported (by most) Browsers are GIF and JPG image formats. GIF images are normally images with limited colours (like diagrams), while JPG images are normally scanned photographs (or similar).

Below the "Hello Australia" line add the following:

This instructs the browser to display an image from the Faculty's server. Notice that the image's dimensions (in pixels) are included - this is optional, but it helps the Browser because it then "knows" how much space the image requires. The alt="..." entry is included for people using the Web who can't or don't display images.

The <p align="center"> tag tells the browser that we want this paragraph (the image!) centred.

If the image being displayed is located in the same directory as the HTML file then the server and directory information can be skipped. For example: if you had an image FRED.JPG in the directory with your file you could include the tag: <img src="fred.jpg"> to display that image.

Add some text...

After the image tag add:

Once you've saved and then reloaded the HTML page you will note that this text starts beside the image and continues in one paragraph. Now add paragraph tags around each of the paragraph's, as shown below:

The default text size is 3, you can increase this to 6, or decrease it to 1, with the <font> tag. Replace the "S" in Sydney at the start of each of the two paragraphs with:

To create a "drop capital" you need to use a (left aligned) image! If you want to try it replace the large S above with:

Hypertext Links - Building the Web

Links are where the fun starts! When writing a document, you can mention complicated issues or concepts without going into the details, because you can include a link to another page that provides a detailed explanation.

The syntax for a link is simply:
        <a href="URL">some text</a>
where URL is the address of the page being linked to and some text is the text (and/or images) that are displayed and that people will click onto!

Add the following after the two paragraphs (about Sydney) just entered:

Save and reload your page. You will notice the point list at the bottom of the page. The text that is blue and underlined is the link, move the mouse over one of the links and you'll see the cursor change into a hand!

You might like to click on one of the links and have a look! Use the "Back" button to move back to your page, when you're finished. Alternatively, click on the "Go" menu, you'll see a list of the pages that you've visited, one of them should be your pages title (My first page!) select that item to reload that page.

The Hypertext links above, use text as the link (that is: the person viewing the page sees the link as some text [usually blue] that is underlined), it's also possible to use an image instead of text...

Add the following text after the previous links.

Quote it Blockhead

The blockquote tag is used for direct quotes, most browsers will indent the text within the blockquote tags from the left and right edges on the display window.

Edit you file to make the following alterations:

Character Formatting

HTML offers limited character formatting options, basically you can set text to be bold and/or italic! In addition, you can set the font size (shown earlier), the font colour and make text superscript or subscript.

Edit your file to make the following alterations:

Notice that when you set Sydney to bold you were placing a tag inside another (the new tag went "around" the old tag).

The break tag <br> is very useful, it forces the Browser to start a new-line. Use this tag when you want a new-line or when you want one or more blank lines.

Endings

Finally, lets finish this masterpiece! Insert the following before the final </body> and </html> tags:

The <hr> tag causes the Browser to draw a horizontal line across the browser's page.

That's the end of this simple introduction to HTML. We've covered the basic structure of web pages, displaying images, making links and finally character formatting. This tutorial doesn't introduce many important topics including: page layout (using Tables and/or Cascading Style Sheets).

If you are interested in learning more, surf the Web!! If you find some neat "trick" on a web page have a look at the page's source and you may be able to work out how the author's achieved the effect. There are also many websites offering tutorials in various aspects of web page design - use your favourite search engine...

If you're ready for some "higher level" comments then have a look at the Straight Web Style Guide and / or the Bent Web Style Guide.

• UNSW Sydney NSW 2052 AUSTRALIA
• +61 2 9385 4799
• fbe@unsw.edu.au

• ABN 57 195 873 179
• CRICOS Provider Code 00098G
• Authorised by Dean, FBE

• Copyright & Disclaimer
• Privacy Policy
• Site enquiry