Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the

written permission by Peter Krisch of allcreativedesigns.com.au

All Creative Designs

Basic HTML for PC Tutorial Part 3

Using MS Notepad Revised Edition June 2010

My First Web Page

The third part of this tutorial explains: How to create another web page and link it to your home page. (The start of a little web site) How to use your own images and link them Specifying color by Hexadecimal Code List of useful html tags and more

Step 1: Open your index.html file

Open your index.html file we created in Part 2 Navigate to your index.html file and single right click, select Open With and left click Notepad. See figure 1

Figure 1

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

1 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Step 2: Creating another web page

The index file we created in HTML tutorial part 2 (Figure 2)

Figure 2

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

2 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Include a link to your new page on the index file First we insert a link on the index page calling the new page we will create in the next chapter. After the mailto link type two <br /> tags <a href=mailto:[email protected]>Contact me</a><br /><br /> Then press enter and insert line below <a href="photopage.html">My Photos</a><br /><br /> (Figure 3)

Figure 3

Click Save under the File menu.

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

3 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

In the index Notepad file click Save As under the File menu. Navigate to your web folder under Save in: (Use drop down arrow). Select All Files under Save as type and then type a name for your new page without spaces or special characters followed by .html (Make sure of identical spelling with the link in the index page) (Figure 4)

Figure 4

Your photopage.html opens (Figure 5)

Figure 5

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

4 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Making changes to your photopage.html

In your photopage.html file change the text in between the title tags to My Photo Page then change text in between <h1> tags to My Photo Page. Select all text as shown below and press delete on your keyboard, make sure <td> tags stay intact. You might like to insert new text in this place describing your web page content. Make sure text shows in between <td> and </td> tags. Use the <br /> tag to start a new line or two <br /> tags for an empty line. (Figure 6)

Figure 6

Save your updated web page: In your notepad photopage.html document click file in top menu bar and click save. View your web page: In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your index.html file to view your updated web page. There click your My Photos link and your photo page should appear. As you might noticed there is no link back to your homepage. The next step is to insert images and this missing link into your Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch 5 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

photo page. To use your own images follow the Image Editing Tutorial using Picasa and save web optimized copies into your my_first_webpage folder. See links at end of this tutorial.

Trouble Shooting: Most errors are caused by spelling mistakes and added or missing spaces in HTML tags. Check for missing inverted comas and closing tags. Cannot find server The page cannot be displayed error message Make sure of identical spelling of the link in the index page with the actual name of your photo page (i.e. photopage.html).

Step 3: Inserting a new table

This step will create another table with one row and three cells beneath your first table to hold more content in a different layout. Type this code beneath your first closing </table> closing tag and above the </body> closing tag. The <br /> tags will force the cells to expand before we include more content. </table> <table width="900" align="center" border="1"> <tr> <td><br /></td> <td><br /></td> <td><br /></td> </tr> </table> (Figure 7)

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

6 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Figure 7

Step 4: Include a link to your home page.

Type this code above the text in the first table and beneath the opening <td> tag. <br /> <a href="index.html">Home Page</a><br /><br /> (Figure 8)

Figure 8

Save your updated web page: Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

7 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

In your notepad photopage.html document click file in top menu bar and click save. View your web page: In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your photopage.html file to view your updated web page. (Figure 9)

Figure 9

Step 5: Inserting and Linking Images

Copy and paste your photos you prepared in the Picasa Image Tutorial or other photo editors into the my_first_webpage root folder. You can also copy and paste more images from our web site. Thumbnail images should be 150x113 px and images for the enlarged view of the same photo should be 400x300 px or larger. (Up to 800x600 px) Remember no spaces or special characters in image file names. Use hyphens or underscores. Only JPG, GIF and PNG file formats will work on the net. Delete <br /> tags and insert images tags for your small thumbnail photos enclosed within center tags. <center><image src="myphoto1small.jpg" /></center> <center><image src="myphoto2small.jpg" /></center> <center><image src="myphoto3small.jpg" /></center> Add background color to row. Include bgcolor=black into your row <tr> tag. (Figure 10)

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

8 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Figure 10

Save your updated web page: In your notepad photopage.html document click File in top menu bar and click save.

View your web page: In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your photopage.html file to view your updated web page. Linking your Images When your thumbnail images are clicked on the web page the enlarged view of your photo opens. Insert image links by enclosing thumbnail image tag within an <a href=> </a> Link tag. In the href reference type the image file name of your large photo within the inverted comas. Include target=blank if you like your large photo to open up in a new browser window.
<a href="myphoto1large.jpg" target="blank"><image src="daylillie_purple_tn.jpg" /></a> <a href="myphoto2large.jpg" target="blank"><image src="dahlia-redtn.jpg" /></a> <a href="myphoto3large.jpg" target="blank"><image src="bourgainvillia_redtn.jpg" /></a>

(Figure 11)

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

9 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Figure 11

Trouble Shooting: Most errors are caused by spelling mistakes and added or missing spaces in HTML tags. Check for missing inverted comas and closing tags. Cannot find server The page cannot be displayed error message Make sure of identical spelling of the image file name in your web folder with the one you used in the link reference.

Making addition to your table Insert a new row with 3 cells containing descriptions of images. Under your last </tr> table row closing tag and above your closing table tag insert code below. <tr bgcolor="white"> <td>Daylily</td> <td>Dahlia</td> <td>Bougainvillea</td> </tr> (Figure 12)

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

10 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

Figure 12

Save your updated web page: In your notepad photopage.html document click File in top menu bar and click save. View your web page: In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your photopage.html file to view your updated web page. Repeat steps 3 to 5 to create your own photo album.

Specifying color by Hexadecimal Code The combination of Red, Green, and Blue color values (RGB). Where ff stands for maximum and 00 for minimum values Red Green Blue ff 00 00 Will show a strong red bgcolor="#ff0000" = red bgcolor="#00ff00" = green bgcolor="#0000ff" = blue bgcolor="#000000" = black bgcolor="#ffffff" = white Find out more about web safe colors at: http://www.webmonkey.com/reference/Color_Charts
You might have to type or copy and paste this address into your browser if viewing the PDF version

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

11 of 12

Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au

More useful HTML tags Description

Paragraph tag Horizontal rule Bold text Italic text Font type Font size

Actual Code
<p> </p> <hr /> <b>bold text </b> <i>italic text </i> <font face="verdana">verdana</font> <font size=2> </font>

Explanation
Opens and closes a paragraph in your text and add spaces above and below Inserts dividing line, no closing tag All text in between tags turns bold All text in between tags turns talic Changes font to Verdana Changes font size, values are 1 to 7 Opens unordered list Opens and closes first item in list Opens and closes second item in list Closes unordered list

Unordered list open <ul> First item in list Second item in list Unordered list closed <li>first</list> <li>second</list> </ul>

For a full list go to: http://www.w3schools.com/tags/default.asp

You might have to type or copy and paste this address into your browser if viewing the PDF version

Other tutorials available from www.allcreativedesigns.com.au

You might have to type or copy and paste this address into your browser if viewing the PDF version

www.allcreativedesigns.com.au/pages/tutorialbasicp1.html HTML Web Page Tutorial using Notepad, PDF Download Page Part 1 www.allcreativedesigns.com.au/pages/tutorialbasicp2.html Free PDF HTML Tag Tutorial using Notepad, Download Page Part 2 www.allcreativedesigns.com.au/pages/webtutorialkompozer.html Web Design Tutorial using KompoZer, PDF Download Page www.allcreativedesigns.com.au/pages/tutorialpicasa.html Picasa Photo Editing Tutorial, Free PDF Download Page www.allcreativedesigns.com.au/pages/tutorialseo.html SEO Tutorial Basic Search Engine Optimization PDF Download Page

Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

12 of 12