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 H !" for PC utorial Part #

$sing !% &otepad 'evised (dition )une *+,+

!y -irst .eb Page

he third part of this tutorial e/plains0 How to create another web page and lin1 it to your home page. 2 he start of a little web site3 How to use your own images and lin1 them %pecifying color by He/adecimal Code "ist of useful html tags and more

%tep ,0 4pen your inde/.html file

4pen your inde/.html file we created in Part * &avigate to your inde/.html file and single right clic1, select 4pen .ith and left clic1 &otepad. See figure 1

!igure 1

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

1 o 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

%tep *0 Creating another web page

he inde/ file we created in H !" tutorial part * 2-igure *3

Figure 2

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

2 o 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 -irst we insert a lin1 on the inde/ page calling the new page we will create in the ne/t chapter. After the mailto lin1 type two 5br 67 tags 5a href89mailto0username:yahoo.com.au97Contact me56a75br 675br 67 hen press enter and insert line below 5a href8;photopage.html;7!y Photos56a75br 675br 67 2-igure #3

Figure 3

Click Save under the File menu.

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

3 o 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

<n the inde/ = &otepad file clic1 %ave As under the -ile menu. &avigate to your web folder under %ave in0 2$se drop down arrow3. %elect All -iles under %ave as type and then type a name for your new page without spaces or special characters followed by .html 2!a1e sure of identical spelling with the lin1 in the inde/ page3 2-igure >3

Figure 4

?our photopage.html opens 2-igure @3

Figure 5

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

" o 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

aking change! to your photopage.html <n your photopage.html file change the te/t in between the title tags to !y Photo Page then change te/t in between 5h,7 tags to !y Photo Page. %elect all te/t as shown below and press delete on your 1eyboard, ma1e sure 5td7 tags stay intact. ?ou might li1e to insert new te/t in this place describing your web page content. !a1e sure te/t shows in between 5td7 and 56td7 tags. $se the 5br 67 tag to start a new line or two 5br 67 tags for an empty line. 2-igure A3

Figure "

%ave your updated web page0 <n your notepad photopage.html document clic1 file in top menu bar and clic1 save. Biew your web page0 <n windows e/plorer 2!y Computer3 navigate to your myCfirstCwebpage folder and double left clic1 your inde/.html file to view your updated web page. here clic1 your !y Photos lin1 and your photo page should appear. As you might noticed there is no lin1 bac1 to your homepage. he ne/t step is to insert images and this missing lin1 into your Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch # o 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. o use your own images follow the <mage (diting utorial using Picasa and save web optimiDed copies into your myCfirstCwebpage folder. %ee lin1s at end of this tutorial.

rouble %hooting0 !ost errors are caused by spelling mista1es and added or missing spaces in H !" tags. Chec1 for missing inverted comas and closing tags. Cannot find server he page cannot be displayed error message !a1e sure of identical spelling of the lin1 in the inde/ page with the actual name of your photo page 2i.e. photopage.html3.

%tep #0 <nserting a new table

his step will create another table with one row and three cells beneath your first table to hold more content in a different layout. ype this code beneath your first closing 56table7 closing tag and above the 56body7 closing tag. he 5br 67 tags will force the cells to e/pand before we include more content. 56table7 5table width8;E++; align8;center; border8;,;7 5tr7 5td75br 6756td7 5td75br 6756td7 5td75br 6756td7 56tr7 56table7 2-igure F3

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

$ o 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 #

%tep >0 <nclude a lin1 to your home page.

ype this code above the te/t in the first table and beneath the opening 5td7 tag. 5br 67 5a href8;inde/.html;7Home Page56a75br 675br 67 2-igure G3

Figure $

%ave your updated web page0 Copyright 2007 -2010 Basic HTML Tutorial Part 3 by Peter Krisch

7 o 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

<n your notepad photopage.html document clic1 file in top menu bar and clic1 save. Biew your web page0 <n windows e/plorer 2!y Computer3 navigate to your myCfirstCwebpage folder and double left clic1 your photopage.html file to view your updated web page. 2-igure E3

Figure %

%tep @0 <nserting and "in1ing <mages

Copy and paste your photos you prepared in the Picasa <mage utorial or other photo editors into the myCfirstCwebpage root folder. ?ou can also copy and paste more images from our web site. humbnail images should be ,@+/,,# p/ and images for the enlarged view of the same photo should be >++/#++ p/ or larger. 2$p to G++/A++ p/3 'emember no spaces or special characters in image file names. $se hyphens or underscores. 4nly )PH, H<and P&H file formats will wor1 on the net. Delete 5br 67 tags and insert images tags for your small thumbnail photos enclosed within center tags. 5center75image src8;myphoto,small.Ipg; 6756center7 5center75image src8;myphoto*small.Ipg; 6756center7 5center75image src8;myphoto#small.Ipg; 6756center7 Add bac1ground color to row. <nclude bgcolor89blac19 into your row 5tr7 tag. 2-igure ,+3

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

% o 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 '(

%ave your updated web page0 <n your notepad photopage.html document clic1 -ile in top menu bar and clic1 save.

Biew your web page0 <n windows e/plorer 2!y Computer3 navigate to your myCfirstCwebpage folder and double left clic1 your photopage.html file to view your updated web page. &inking your Image! .hen your thumbnail images are clic1ed on the web page the enlarged view of your photo opens. <nsert image lin1s by enclosing thumbnail image tag within an 5a href8997 56a7 "in1 tag. <n the href reference type the image file name of your large photo within the inverted comas. <nclude target89blan19 if you li1e your large photo to open up in a new browser window.
5a href8;myphoto,large.Ipg; target8;blan1;75image src8;daylillieCpurpleCtn.Ipg; 6756a7 5a href8;myphoto*large.Ipg; target8;blan1;75image src8;dahliaJredtn.Ipg; 6756a7 5a href8;myphoto#large.Ipg; target8;blan1;75image src8;bourgainvilliaCredtn.Ipg; 6756a7

2-igure ,,3

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

& o 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 ''

rouble %hooting0 !ost errors are caused by spelling mista1es and added or missing spaces in H !" tags. Chec1 for missing inverted comas and closing tags. Cannot find server he page cannot be displayed error message !a1e sure of identical spelling of the image file name in your web folder with the one you used in the lin1 reference.

aking addition to your ta)le <nsert a new row with # cells containing descriptions of images. $nder your last 56tr7 table row closing tag and above your closing table tag insert code below. 5tr bgcolor8;white;7 5td7Daylily56td7 5td7Dahlia56td7 5td7Bougainvillea56td7 56tr7 2-igure ,*3

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

10 o 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 '2

%ave your updated web page0 <n your notepad photopage.html document clic1 -ile in top menu bar and clic1 save. Biew your web page0 <n windows e/plorer 2!y Computer3 navigate to your myCfirstCwebpage folder and double left clic1 your photopage.html file to view your updated web page. 'epeat steps # to @ to create your own photo album. Specifying color )y *exadecimal Code he combination of 'ed, Hreen, and Blue color values 2'HB3. .here ff stands for ma/imum and ++ for minimum values 'ed Hreen Blue ff ++ ++ .ill show a strong red bgcolor8;Kff++++; 8 red bgcolor8;K++ff++; 8 green bgcolor8;K++++ff; 8 blue bgcolor8;K++++++; 8 blac1 bgcolor8;Kffffff; 8 white -ind out more about web safe colors at0 http066www.webmon1ey.com6reference6ColorCCharts
?ou might have to type or copy and paste this address into your browser if viewing the PD- version

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

11 o 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

ore u!eful *+ & tag! Description

Paragraph tag HoriDontal rule Bold te/t <talic te/t -ont type -ont siDe -irst item in list %econd item in list $nordered list closed

Actual Code
5p7 56p7 5hr 67 5b7)old text 56b7 5i7italic text 56i7 5font face8;verdana;7verdana56font7 5font siDe89*97 56font7 5li7first56list7 5li7second56list7 56ul7

(/planation
4pens and closes a paragraph in your te/t and add spaces above and below <nserts dividing line, no closing tag All te/t in between tags turns bold All te/t in between tags turns talic Changes font to Berdana Changes font siDe, values are , to F 4pens unordered list 4pens and closes first item in list 4pens and closes second item in list Closes unordered list

$nordered list open 5ul7

-or a full list go to0 http066www.w#schools.com6tags6default.asp

?ou might have to type or copy and paste this address into your browser if viewing the PD- version

4ther tutorials available from www.allcreativedesigns.com.au

?ou might have to type or copy and paste this address into your browser if viewing the PD- version

www.allcreativedesigns.com.au6pages6tutorialbasicp,.html H !" .eb Page utorial using &otepad, PD- Download Page Part , www.allcreativedesigns.com.au6pages6tutorialbasicp*.html -ree PD- H !" ag utorial using &otepad, Download Page Part * www.allcreativedesigns.com.au6pages6webtutorial1ompoDer.html .eb Design utorial using KompoLer, PD- Download Page www.allcreativedesigns.com.au6pages6tutorialpicasa.html Picasa Photo (diting utorial, -ree PD- Download Page www.allcreativedesigns.com.au6pages6tutorialseo.html %(4 utorial Basic %earch (ngine 4ptimiDation PD- Download Page

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

12 o 12