book oh html

8/13/2019 Book Oh HTML

1/188

How to create Web sites andapplications with HTML, CSS,Javascript, PHP and MySQL.By obert Schi!reenThis boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.The S%all Print. Please ead.This boo" is !ree o! char#e !or personal )se. o) can )se it to help yo) developsites !or yo)rsel! or !or anyone else.o) %ay not share the P&' !ile or )pload itto online services. -! a !riend orcollea#)e wants a copy, please as" the% to download it !ro% o)r web site.To distrib)te copies o! this boo" !or co%%ercial p)rposes, s)ch as a tetboo"!or a school class or a trainin# co)rse, or i! yo)/re an internet service providerand yo) want to #ive or sell copies to yo)r c)sto%ers, yo) need to b)y a licence!or each copy that yo) distrib)te. See www.the$web$boo".co%!or details.Prod)cin# derivative wor"s is !orbidden.o) %ay not create yo)r own versiono! this boo", re#ardless o! whether a !ee is char#ed. -n addition, yo) %ay not

create a web site the content o! which is wholly or partly based on tetetracted !ro% this boo".Separate editions o! The Web Boo" are available, !eat)rin# ea%ples !ro%di!!erent hostin# co%panies and con!i#)red!or di!!erent printer pa#e si0es.e!er to the web site to see the latest o!!erin#s.The Web Boo" is p)blished by 1a"worth B)siness P)blishin# Ltd.e#istered in the 23. Co%pany n)%ber 4567488.Telephone 9:;4; 4:7654 ;; :;4; 4:7654


2/188

What -s a Web Site (nywayD.........................................................................................:;How the WebWor"s ............................................................................................................................:;&o%ainEa%es.....................................................................................................................................:FThe Si%ple1ption .............................................................................................................................. :?The 'leible1ption.............................................................................................................................49

(bo)t WebContent ............................................................................................................................. 47&o yo) need a develop%entserverD ................................................................................................... 4;Gettin# *verythin# To#ether........................................................................................ 4F&o%ain Ea%e and Hostin# ......................................................................................... 45-t/s Eot )de toPoint.......................................................................................................................... 77HTML *ditor and 'TP Client ....................................................................................... 7F

(%aya .................................................................................................................................................. 7F

Ma"e ( Web Wor" 'older...................................................................................................................7F'ile0illa ................................................................................................................................................ 78Creatin# o)r 'irst Web Pa#e...................................................................................... 7?Eow step away !ro% the co%p)ter ............................................................................. ;;WWW What, Why,WhoD ................................................................................................................ ;;-%portin# *istin# Content ................................................................................................................;FWritin# 'or TheWeb...........................................................................................................................;8'onts and

Colo)rs ............................................................................................................................... ;5Hyperlin"s .................................................................................................................. ;6Lin"in# to 1therSites .........................................................................................................................F9MailtoILin"s .......................................................................................................................................F92nderstandin# The Basics o! HTML ............................................................................ F4Metata#s ............................................................................................................................................. FFHTML (ccessibility, (cc)racy andPrivacy ........................................................................................F8alidatin# yo)r HTML ........................................................................................................................F8

( Bit More abo)t(ccessibility ............................................................................................................ F5Cascadin# Style Sheets ................................................................................................ F?

(bo)t&1CTP*s................................................................................................................................89Gettin# Started withCSS.....................................................................................................................89

( Word (bo)t'onts............................................................................................................................ 85Classes .............................................................................................................................................


3/188

....8?To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s7This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Ma"in# Styles Wor" 'oro) .............................................................................................................. 59HTML Ta#sEa%es.............................................................................................................................. 59

( Better CSS*ditor ..............................................................................................................................5:-&$basedStyles.................................................................................................................................... 5;*tre%e

CSS ........................................................................................................................................ 5FPa#e Layo)ts and &iv Ta#s .......................................................................................... 56The CSS BoModel .............................................................................................................................67Pict)res 1nPa#es........................................................................................................ 6;

(bo)t -%a#eSi0es ............................................................................................................................... 6FPict)res (sLin"s .................................................................................................................................68'indin# -%a#es to 2se on o)rSite.................................................................................................... 65

( Browser -con !or yo)r Site ....................................................................................... 66Short C)ts to Great Web Pa#es .................................................................................... ?4

2sin# an 1pen So)rce&esi#n.............................................................................................................?;Twea"in# theTet ............................................................................................................................... ?FChan#in# thePict)res .........................................................................................................................?8Chan#in# the CSSStyles...................................................................................................................... ?5Which Style -sThisD ............................................................................................................................??

(ddin# Pa#es andEavi#ation ............................................................................................................:9:2ploadin# the 'inished 'iles ............................................................................................................

:9;)les, Tables and -%a#e Maps................................................................................... :98Hori0ontal )les................................................................................................................................:98Tables.................................................................................................................................................:96-%a#eMaps ........................................................................................................................................::9Password$Protectin# yo)r Web Pa#es ........................................................................ ::7The .htaccess


4/188

'ile ...............................................................................................................................::7The .htpasswd'ile.............................................................................................................................. ::FProtectin# M)ltiple 'olders ...............................................................................................................::5CMSes and 1ther So!tware ......................................................................................... ::6CMSes andTe%plates ....................................................................................................................... :49

()to%atic-nstallers ...........................................................................................................................:4:Try Be!ore o) -nstall .......................................................................................................................:44

( Word abo)t Patchin# .....................................................................................................................:47Settin# 2p ( &atabase.......................................................................................................................:4;General -nstallation Proced)res .......................................................................................................:482ninstallin# ........................................................................................................................................:45

Joo%la .......................................................................................................................:462ploadin# the 'iles ...........................................................................................................................:46Con!i#)rin# Joo%la...........................................................................................................................:4?o)r Eew Joo%la Site .......................................................................................................................:7;WordPress .................................................................................................................:7?&ownloadin# the So!tware................................................................................................................:7?Ma"e a&atabase ............................................................................................................................... :7?Con!i#)re WordPress ........................................................................................................................

:7?2pload TheSo!tware..........................................................................................................................:;:To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s;This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.

'inalCon!i#)ration ............................................................................................................................:;:phpBB ........................................................................................................................:;8'ilePer%issions .................................................................................................................................:;5Plo##er.......................................................................................................................:F;Gettin#Started ...................................................................................................................................:F;The -nstallationProcess.....................................................................................................................:F8


5/188

2ploadin# o)r Pict)res ...................................................................................................................:F6

(voidin# &ata 1verload ....................................................................................................................:89-nstallin# the PSPad *ditor ........................................................................................:84Javascript...................................................................................................................:88Choose o)rSide............................................................................................................................... :88Javascript andSe%icolons.................................................................................................................:5;*%ail (ddress1b!)scation................................................................................................................:5;Why2ploadD ......................................................................................................................................:5FSec)rity andCoo"ies ..........................................................................................................................:58Mornin#

(ll .......................................................................................................................................:56Gettin# the ScreenSi0e.......................................................................................................................:5?

Javascript Tool"its and'ra%ewor"s.................................................................................................:5?'indin# 1)t More..............................................................................................................................:69Web$hosted &atabases with MySQL ...........................................................................:64&atabases, Tables, 'ields, ows and Col)%ns.................................................................................:67Eor%ali0ation....................................................................................................................................:67e!erential -nte#rity..........................................................................................................................:68Creatin# (&atabase...........................................................................................................................:65

Port Proble%s....................................................................................................................................:?92sin# phpMy(d%in ..........................................................................................................................:?9Creatin# The C)sto%ers Table..........................................................................................................:?4-nsertin# So%e&ata...........................................................................................................................:?5Q)eryin# the C)sto%ers Table..........................................................................................................:??-ntrod)cin# PHP ....................................................................................................... 496&on/tPanic .......................................................................................................................................496

o)r 'irst PHPPro#ra% ...................................................................................................................49?So%e More PHP .........................................................................................................4:8ando% E)%bers .............................................................................................................................4:8Sendin# *%ail with PHP...................................................................................................................4:?Passin# -n!or%ation toPHP .............................................................................................................444Eever 'or#et to


6/188

Saniti0e....................................................................................................................44;Loop the Loop....................................................................................................................................445

(rrays.................................................................................................................................................44?2ser$&e!ined ')nctions ....................................................................................................................477HTML 'or%s............................................................................................................. 478Creatin# a 'or% with

(%aya ............................................................................................................476Ea%in# the 'or% 1bects .................................................................................................................4;:Handlin# 'or% &ata and Q)oteMar"s ............................................................................................4;;Testin# The'or% ..............................................................................................................................4;8etrievin# Tetarea and &ropdown&ata .........................................................................................4;?To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l

-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"sFThis boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Chec"bo

(rrays................................................................................................................................4F9'eedbac"'or%s ................................................................................................................................ 4F4Hidden 'ields ....................................................................................................................................

4F4(ccessin# MySQL &atabases with PHP ...................................................................... 4FFCo)ntin# ows ..................................................................................................................................4F5eadin#&ata ..................................................................................................................................... 4F?Searchin# (Table..............................................................................................................................48;Preventin# SQL -nection

(ttac"s.....................................................................................................48?(ddin# &ata to aTable......................................................................................................................459*ditin# a &ata ecord .......................................................................................................................

458&eletin#&ata.....................................................................................................................................46;P)ttin# it (llTo#ether.......................................................................................................................46F&eb)##in# and Global ariables................................................................................ 465Synta *rrors.....................................................................................................................................465Codin#*rrors ....................................................................................................................................466


7/188

The KS**ariables.................................................................................................................4?4

(pplication Str)ct)re evisited................................................................................. 4?FWeb Servers and the ealWorld ......................................................................................................4?8Savin#State ....................................................................................................................................... 4?5How to Bac" 2p yo)r Web Site .................................................................................. 4?6&ont 'or#et the&ata........................................................................................................................4?6estorin# Lost-n!or%ation ..............................................................................................................799Pro%otin# and Pro!itin#............................................................................................ 794Pro%otin# o)rSite..........................................................................................................................794Ma"in#Money...................................................................................................................................79;

(cceptin# 1nlinePay%ents ..............................................................................................................798Mana#in# yo)r

Mar"etin#.................................................................................................................796Search *n#ine 1pti%isation.......................................................................................7:7S*1Tips .............................................................................................................................................7:73eepin# the Crawlers

(way................................................................................................................7:F-! at 'irst yo) &on/t S)cceed, Pay .....................................................................................................7:8The *nd. So, What EowD............................................................................................7:6

(ppendi ( B)ildin#a Test Server...........................................................................7:?1)r Goal ............................................................................................................................................7:?'irst -nstall the

1S ............................................................................................................................749So%e 2se!)lCo%%ands ................................................................................................................... 74:Get 2pdated.......................................................................................................................................744Test o)r Web Server........................................................................................................................747-nstall the Telnet Server ....................................................................................................................747

(n 'TPserver ....................................................................................................................................74;Web%in .............................................................................................................................................748

Webali0er...........................................................................................................................................745PHP andMySQL ...............................................................................................................................746To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s8This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%


8/188

Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.

(bo)t The Web Boo"-! yo) want to create web sites, there are h)ndreds o! boo"s and web pa#es that clai% toshow yo) how. So%e o! the% are very #ood indeed. B)t this boo" isn/t li"e all those otherboo"s and web pa#es, !or a n)%ber o! i%portant reasonsI:. The Web Boo" is an electronicboo", or e$boo". o) si%ply download it as a P&' !ile!ro% www.the$web$boo".co%and print it yo)rsel!. 1r read it on$screen.4. The Web Boo" covers all o! the technolo#ies that yo) need to "now in order to createWeb sites, both )sin# static HTML pa#es and database$driven sites.7. 2nli"e %any boo"s on the s)bect that were written so%e years a#o, The Web Boo"teaches yo) )p$to$date %ethods. 'ollow the instr)ctions here and yo) can becon!ident that yo)/re doin# thin#s in the ri#ht way, rather than )sin# old$!ashionedtechniN)es that are now !rowned )pon.;. -/ve tried %y hardest to "eep everythin# non$technical. -! yo)/re OintoO co%p)ters,yo) sho)ld be able to !ollow everythin# )st !ine. o) certainly don/t need to be apro!essional techie. -n !act, i! yo) are, yo)/ll probably ta"e o!!ence at the way -/vesi%pli!ied so%e thin#s. 'or which - apolo#ise.

F. -! yo) already loo" a!ter a web site, perhaps !or yo)r school or colle#e, or thedepart%ent yo) wor" !or, yo) %ay be itchin# tota"e yo)r s"ills to the net level. 1r%aybe yo) didn/t act)ally #et %)ch trainin# when yo) too"on the responsibility, andyo) don/t really )nderstand how everythin# !its to#ether. -n which case, this boo" isper!ect !or yo). We don/t )st tell yo) to press b)ttons. We eplain what thoseb)ttons do, and why yo) need to press


9/188

-! yo)/re considerin# )sin# a di!!erent host, chec" o)r web site !irst. There %ay be a c)sto%edition o! the boo" available !or that host. Were wor"in# on new ones all the ti%e.

( C)sto% *dition 'or o)r Co%pany-! yo)r co%pany sells web hostin# services and yo) wish to #ive away or sell copies o! thiseboo", we can create a c)sto% version o! the boo" !or yo), where all the ea%ples !eat)re yo)rhostin#. o) can then point yo)r c)sto%ers at o)r web site to download their copy.'or in!or%ation on this service, see www.the$web$booo".co%Ac)sto%i0e.ht%lore%ail in!o+the$web$boo".co%.Who/s Written This Boo"D (nd WhyDThe Web Boo"is written by obert Schi!reen, a 23$based o)rnalist, writer and technicala)thor. - have %ore than 4F years/ eperienceo! writin# all sorts o! technical articles !orvario)s co%p)ter %a#a0ines, and ? years/ eperience developin# web sites !or %ysel! andclients. -/ve also written a OtraditionalO boo" be!ore, that was p)blished in 4998 and wasavailable as a real hardbac" in real boo"shops.( Goo#le search !or Ode!eatin# the hac"erOwill !ind it !or yo).Havin# ta)#ht web develop%ent to the 4,F99 sta!! at a 23$based )niversity !or the past !ewyears, - tho)#ht it %i#ht be help!)l to t)rn %yco)rse into a boo", which is loosely based onthe st)!! - teach and is also inspired by the N)estions that %y st)dents as". 'ro% now on,when people as" %e how to create a web site, orwhether it/s easy, - don/t have to spend ti%eeplainin# everythin#. - can )st say O#o to www.the$web$boo".co%and download %y

!ree boo", which tells yo) everythin# yo) need to "nowO.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s6This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.This is the boo" which - really wish had eisted when - started doin# web st)!! all those yearsa#o. B)t, yo)/re probably as"in#, why a% - #ivin# it away instead o! sellin# itD There are 7

reasons.1ne. - N)ite li"e the idea o! bein# able to write what - want !or a chan#e, witho)t havin#p)blishers and editors to answer to.Two. - want as %any people as possible to see this boo", beca)se - thin" it/s )se!)l. Thetro)ble with traditional p)blishin# is that, o! the hard$earned %oney that yo) hand over topay !or a copy o! a traditional boo", %ost o! itis swallowed )p by the p)blishers and their%ar"etin# costs. The a)thor, the #)y who sat in !ront o! his PC !or %onths writin# the thin#,typically #ets aro)nd :F o! yo)r cash. So%eti%es less. So -/ve decided to try so%ethin#di!!erent. This boo" is !ree to download and )se. -t is !inanced in 7 waysI -! yo) want to %a"e a s%all donation via www.the$web$boo".co%Adonate.ht%lyo)re %ore than welco%e. -! yo) r)n a web hostin# co%pany and yo) wo)ld li"e %e to prod)ce a c)sto%version o! the boo" that !eat)res yo)r hostin# service, please see the pa#e online at

www.the$web$boo".co%Ac)sto%i0e.ht%l!or details and pricin#. -! yo) want to si#n )p witha web host, -d really appreciate yo) si#nin# )p withHost%onster


10/188

Co%p)ter %a#a0ines across the world are bein# sh)t down and boo" sellers are havin# ahard ti%e, beca)se the Web, not the pa#es o! a boo", is )ndo)btedly the best place to !indin!or%ation abo)t technical s)bects.-n %any cases, those p)blications sh)t downnot beca)se the prod)ct was poor, b)t beca)sethe p)blishers !ailed to see the internet co%in# and !ailed to act accordin#ly. P)blishersneed to wor" with the internet, not a#ainst it. S)re, a search en#ine %eans that - can !ind ananswer to a technical proble% instantly witho)t havin# to plo)#h thro)#h shelves o! boo"sand %a#a0ines. B)t the Web is also the #reatest, bi##est, best, cheapest and %ost e!!icientway o! copyin# and disse%inatin# in!or%ation that/s ever been invented. J)st as" the %)sicind)stry. So by pro%otin# this boo" on the internet as a !ree download - hope that - caneploit the power o! the internet ratherthan tryin# to wor" a#ainst it.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s?This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$

boo".co%!or details.Why We/re HereEo one co)ld have believed, in the last years o! the 49thcent)ry, that the way we/d all beendoin# Web sites was abo)t to chan#e so dra%atically. B)t it did, in two !)nda%ental ways.'irstly, Web sites #enerally consisted o! a collection o! HTML doc)%ent !iles. *ach pa#e o!the site was a separate !ile


11/188

To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:9This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.www.blo##er.co% (nother blo##in# site which is !ree to )se. 1wned by Goo#le. -! yo)want a personal blo# with the %ini%)% o! !)ss, then )sin# this site orwordpress.co% is by !ar the easiest way to do it.sites.#oo#le.co% Create tet$based pa#es and p)blish the% online !or !ree, co)rtesy o!Goo#le.www.!lic"r.co% The best$"nown place to )pload yo)rphotos and share the% with theworld.www.yo)t)be.co% &oes !or video what !lic"r does !or stills. 2pload :9$%in)te clips o!

)st abo)t anythin#.docs.#oo#le.co% Goo#le/s web$accessible word processor and spreadsheet. 2se it )st

!or yo)rsel!, or share doc)%ents with !riends !or collaborativeeditin#.spaces.live.co% 'ree web space !or yo) p)blish a blo#, pict)res, %)sic, or whateveryo) li"e. 'ro% Microso!t.www.twitter.co% The %icro$blo##in# site, where yo) can tell everyone what yo)/re )pto.Be!ore yo) read any !)rther, yo) %ay want to consider si#nin# )p with one or %ore o! thesesyste%s, even i! only to #ain so%e inspiration into what yo)r own site sho)ld, or sho)ldn/t,loo" li"e.

(nother option is to si#n )p with a site thato!!ers an easy, a)to%ated way to create webpa#es. Many hostin# co%panies o!!er s)ch thin#s, th)s %a"in# it easy to create pa#es on thehostin# space that yo)/ve )st bo)#ht. (%on# s)ch o!!erin#s are *asy Website Creator !ro%leadin# hostin# co%pany :R:, the desi#n selection screen o! which loo"s li"e thisI

To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s::This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.J)st pic" a desi#n and a colo)r sche%e, type in so%e tet, and yo) have a web site.

(nother ea%ple o! the #enre is !ro% 23$based hostin# co%pany easily.co.)". (#ain, theirdesi#n selection screen is shown belowI

1nce a#ain, choose a desi#n and )st start typin#.(ltho)#h these syste%s allow yo) to create a web site N)ic"ly and easily, they are veryli%ited. -! yo) want JavaScript, PHP and MySQL, yo)/re nor%ally )nable to add it. o)To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:4This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$


12/188

boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.can/t easily %a"e %aor chan#es tothe desi#n. (nd yo)/re !reN)ently li%ited to )st 49 or 79pa#es, dependin# on which hostin# pac"a#e yo) si#n )p !or. So%eti%es the !i#)re is as lowas )st one pa#e.'ro% Word Processor to Web SiteTheres yet another way to create web pa#es, and thats to write the tet with a wordprocessor s)ch as Microso!t Word or 1pen1!!ice Writer and then )se the Osave as web pa#eO!eat)re to create !iles which yo) can p)t online. This is o!ten a te%ptin# option, beca)se a= itloo"s to be very easy, and b= lots o! people write doc)%ents with a word processor and thenrealise that theyd act)ally N)ite li"e to p)blish the% online.The tro)ble is, the Osave as web pa#eO !eat)re in Microso!t Word, incl)din# the %ost recentversion, is horrible. -t prod)ces pa#es which contain ten ti%es as %)ch in!or%ation as isstrictly necessary. Which %eans that theyll ta"e)p ten ti%es the space on yo)r server, ta"eyo)r visitors ten ti%es as lon# to download, and cost people ten ti%es as %)ch i! they/reaccessin# yo)r site via %obile broadband orso%e other %etered or pay$per$%e#abyteconnection. Serio)sly, dont do it.-! yo) do have so%e Word doc)%ents that yo) want to p)t online, there are so%e ecellentthird$party prod)cts available to do the conversion !or yo). My !avo)rite is OClic" To

ConvertO, which is what - )sed to create the web$based preview version o! this boo". (ll o!the pa#es at www.the$web$boo".co%Apreview.phpwere #enerated a)to%atically byClic" To Convert.-! yo)/ve bo)#ht a hostin# pac"a#e and a do%ainna%e, and yo)/re not N)ite s)re what to dowith it, one o! the N)ic"$start pa#es as %entioned above is better than nothin# at all. B)t i!yo) really want to %a"e the %osto! the web, there really is nos)bstit)te !or learnin# how todo it properly, and that/s what yo)/ll do i! yo) contin)e readin#.B)t How Lon# will (ll This Ta"eD- do hope that yo) decide to read this boo" all the way thro)#h, and !ollow the ea%ples in it.e%e%ber that this is a tetboo" rather than a novel. By all %eans read thro)#h it in a dayor two, b)t yo) won/t #et the best !ro% it. 'or that, yo) need to wor" thro)#h it #rad)ally, atyo)r co%p)ter, !ollowin# the ea%ples. o) sho)ld allow a wee" or 4, at least, to #et the#reatest bene!it. Maybe even a little lon#er i! yo) want to eperi%ent !)rther, and enhance

so%e o! the ea%ples with yo)r own ideas.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:7This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.What -s a Web Site (nywayD

( web site is, traditionally, a collection o! pa#es o! in!or%ation.Creatin# a web pa#e is, in

%any ways, very si%ilar to writin# a letter with a word processor and savin# it on yo)rco%p)ter, b)t there are a co)ple o! i%portant di!!erences.'irst, yo) have to save the pa#e in a special !or%at


13/188

pro#ra% called a web browser. 'or ea%ple, -nternet *plorer, 'ire!o, Sa!ari, Goo#leChro%e, or 1pera. The only type o! in!or%ation that web browsers are #)aranteed to be ableto display are HTML !iles. S)re, i! yo) p)t a Word doc)%ent on yo)r web site, or a P&' !ile,so%e web browsers %i#ht %a"e a #ood stab at displayin# the !ile. B)t it/s never #)aranteedto wor".The second di!!erence between creatin# web pa#es and writin# a letter is that, havin# createdyo)r web pa#e, yo) obvio)sly needto save it. B)t rather than savin# on yo)r own co%p)ter,where only yo) can see it, yo) need to save it onto a web server. ( web server is si%ply anor%al co%p)ter, connected to the internet, which r)ns a web server pro#ra%. Thispro#ra% %eans that other peoples co%p)ters across the internet can connect to it, reN)est acopy o! yo)r pa#e, and display it.-n theory, any co%p)ter that has a per%anent connection to the internet can be t)rned into aweb server. J)st install the necessary so!tware, which is easily available !ree o! char#e, andthe ob is done. However, hac"ers love brea"in# into web servers and crashin# the%, ortryin# to chan#e the contents o! the pa#es they store. So )nless yo) really "now what yo)/redoin#, it/s %)ch easier and sa!er to rent so%e space on so%eone else/s web server to storeyo)r web sites, rather than r)nnin# yo)r own server. -t/s very cheap to do, as we/ll discoverlater.How the Web Wor"s-t/s )se!)l at this point to o)tline, in very basic ter%s, )sthow the World Wide Web act)ally

wor"s in practice. What really happens when yo) t)rn on yo)r co%p)ter, open )p yo)r webTo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:;This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.browser and type www.the$web$boo".co%into the address barD How does thein!or%ation #et onto yo)r screenD (nd where does it co%e !ro% in the !irst placeD

(s - %entioned above, a web pa#e is a doc)%ent !ile, stored on a web server, created with apro#ra% that/s a bit li"e a wordprocessor b)t which saves its !iles in HTML !or%at. Whenyo) open )p yo)r web browser and type www.the$web$boo".co%, yo)r co%p)ter connectsvia the internet to a lar#e, centralised directory in order to !ind o)t where the www.theweb$boo".co%site is stored. This directory is called a &ES Server. &ES is the &o%ainEa%e Syste%, which #ives each web server


14/188

www.ha%sterwheels.co%. To create a new web site na%e, and add it to the #lobal &ESdirectory, we need to call )pon the services o! a do%ain na%e re#istration co%pany. Thereare tho)sands o! s)ch co%panies, any o! which will sell yo) an entry in the #lobal &ESdirectory. Prices vary, b)t they/re all sellin# yo) the sa%e service, so shop aro)nd and !ind are#istrar that yo)/re happy to deal with.-t/s easiest i! the re#istrar is based in yo)r own co)ntry, b)t it/s not essential. -! yo) don/t"now where to !ind s)ch a co%pany, type Odo%ain na%e re#istrationO into Goo#le or loo" atthe adverts in yo)r !avo)rite co%p)ter %a#a0ine.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:FThis boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.'or this ea%ple, we/ll )se a 23$based re#istration co%pany called :47$re#.co.)". 1nce yo)s)r! to their web site yo)/ll see the !ollowin#I

-n the centre o! the screen, )nder Odo%ain searchO, yo) can type in the na%e o! the do%ainyo) want to re#ister. (ltho)#h there are tho)sands o! do%ain na%e re#istration co%paniesaro)nd, they/re all sellin# space in the sa%e, sin#le #lobal directory, and yo) can only re#istera na%e i! no one else has already re#istered it. So the !irst step is to see i! o)r reN)iredha%sterwheels.co% na%e is still available. We type ha%sterwheels into the do%ain searchbo, and the res)lts co%e bac" a !ew seconds laterITo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:8This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$

boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.-t/s bad news. The ha%sterwheels.co% na%e is already ta"en, so we can/t re#ister it. Weco)ld, tho)#h, re#ister ha%sterwheels.co.)" or ha%sterwheels.e), or any o! a whole host o!alternatives


15/188

-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s:5This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.!ind a co%pany that will re#ister the na%e !or yo). So i!, !or ea%ple, yo)/re based inGer%any and yo) want a .es do%ain na%e

(s yo) can see, re#isterin# a do%ain na%e isn/t epensive. -n the ea%ple above,ha%sterwheels.co.)" is UF.?6, or aro)nd 2SK:9, !or 4 years. o)/ll also notice that yo) can/t

b)y do%ain na%es o)tri#ht. o) %erely rent the% !or a period o! between : and :9 years.When the re#istration epires, yo) a)to%atically have !irst re!)sal when it co%es to renewal.-! yo) renew


16/188

con!ir%ation e%ail %essa#e will arrive. We are now the pro)d owners, at least !or a year or4, o! an internet do%ain na%e.Havin# bo)#ht the do%ain na%e, how can we t)rnit into a web siteD There are two optionsb)t, whichever we choose, the !irst step is always the sa%e.

( web site consists o! two thin#s. 'irst, the do%ain na%e, ie the www.so%ethin#$orother.co%na%e that so%eone has to type into their web browser in order to #et to the site.Second, the site itsel!, which is!reN)ently


17/188

So, i! yo)/re te%pted to start settin# )p a web site in a low$ris" way, and si%ply #et so%e !reespace on a site s)ch as MySpace or Blo##er, it/s a really #ood idea to "eep the %yspace.co%or blo##er.co% address private, and re#ister yo)rown do%ain na%e !or it instead. -! yo) dothis !ro% the start, it/ll only cost a !ew dollars a year b)t will %ean that yo) retain the!reedo% to %ove yo)r hostin# whenever yo) wish, witho)t the ris" o! con!)sin# or losin#yo)r eistin# visitors.1n pa#e 77, once we/ve re#istered o)r do%ain na%e, -/ll show yo) how to point it at yo)rpa#e on 'aceboo".The 'leible 1ption-nstead o! pointin# yo)r new do%ain na%e at yo)r area on a site s)ch as MySpace orBlo##er, the O#rown$)pO option is to create a !)lly$!led#ed web site o! yo)r own and to pointthe do%ain na%e there instead. To do this, yo) need to rent so%e space on a p)blic webserver in order to host yo)r site, ie to store yo)r pa#es.-t #enerally %a"es sense to b)y yo)r hostin# space !ro% the sa%e co%pany that rents yo)yo)r do%ain na%e. (ltho)#h it/s not essential, it does "eep thin#s si%ple. Whenever yo)rent a do%ain na%e, the re#istration co%pany will also as" yo) whether yo) want to b)yso%e hostin# space. Si%ply tic" the OyesO bo and a !ew %ore po)nds or dollars will bea)to%atically added to yo)r bill. -t/s not partic)larly epensive. entin# the do%ain na%eTo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l

-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s49This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.will be aro)nd KF per year, and the hostin# space will be ro)#hly KF per %onth


18/188

3B, that/s an additional 4:9 3B o! trans!er each ti%e. So yo)/ll want to %a"e s)rethat the a%o)nt o! data trans!er o!!ered by yo)r hostin# co%pany is s)!!icient !oryo)r needs.7. What other !acilities do yo) need, and are they incl)ded in the priceD -n o)r case,!or developin# the sites covered in this boo", we/re #oin# to need the PHPpro#ra%%in# lan#)a#e and the MySQL database server. Most hosts o!!er this, b)tnot all o! the% do. (nd in so%e cases yo) have to pay etra


19/188

Syste%. -n the world o! !ree so!tware, the leaders in this area are Joo%la, &r)pal andWordPress. J)st download the so!tware !ro% the web, install it on the hostin# space thatyo) are rentin#, and yo)/re ready to roll.-! yo) want additional !eat)res s)ch as pict)re #alleries, real$ti%e chat, etc etc, there are addon%od)les !or %ost CMSes that provide s)ch thin#s.-! this so)nds li"e the way yo) want to %ove !orward, yo) %ay wish to s"ip the net !ewchapters and #o directly to pa#e ::6.4. &evelop a &atabase$&riven Site with a WS-WG ToolThe second way to create a wor"in# site withinyo)r hostin# space is to )se a prod)ct thatlets yo) )se dra#$and$drop, and point$and$clic" !eat)res to desi#n yo)r own CMS$basedsyste%, which the tool then t)rns into a n)%bero! c)sto%$written pro#ra%s and databases!or yo) to )pload to yo)r hostin# space. -! yo) want to #o down this ro)te, the leadin#co%%ercial prod)ct is (dobe &rea%weaver, which is s)pre%ely power!)l andcorrespondin#ly epensive. -! yo) want do b)ild yo)r web site in this way, %)ch o! what!ollows is not !or yo). -nstead, #o b)y a &rea%weaver boo", or loo" on(dobe/s web site !orso%e t)torials.7. Create The Site o)rsel!The third option, and the one which #ives yo) the %ost power and !leibility, is to create theweb site yo)rsel!. This %eans startin# o!! by creatin# a !ew si%ple pa#es )sin# HTML, andTo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$

boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s47This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.s)bseN)ently pro#ressin# to )sin# database techniN)es with PHP and MySQL. -! yo) choosethis %ethod, yo) can %a"e yo)r web site do anythin# yo) want. -t/s the way that %ostpro!essional web developers wor".&on/t worry i! yo)/re not an eperienced pro#ra%%er or desi#ner. The pro#ra%%in# side,

with PHP, isn/t partic)larly di!!ic)lt. (nd there are loads o! #reat web sites with ready$%adepa#e desi#ns that yo) can )se !or !ree.-! this so)nds li"e the way yo) want to do web st)!!, everythin# that !ollows is %ost de!initely!or yo). We/ll start with the basics o! HTML and CSS to create si%plew web pa#es, and then%ove on to techniN)es s)ch as web$based pro#ra%%in# with PHP in order to create dyna%icWeb$4.9 online applications.&o yo) need a develop%ent serverD-n order to create web sites, yo) need to store the content o! yo)r site on a web server. -!yo)/re rentin# so%e hostin# space, yo) already have a per!ectly )sable web server !or yo)rsite. So, is it 13 to )se that server d)rin# the develop%ent process, !or testin# yo)r site as itta"es shape and !or storin# pa#es that %ay not be N)ite !inishedDChances are, yes it/s per!ectly 13. There/s no har% in )sin# yo)r OliveO hostin# space, or parto! it, as a test bed !or an )n!inished site. (nd there/s certainly no need to set )p a co%pletely

separate web server, accessible only toyo), !or develop%ent p)rposes.However, settin# )p a test server %i#ht occasionally be reN)ired. 'or ea%ple, i! yo)/rewor"in# on a new b)siness idea that yo) hope will %a"e yo) rich, yo) really don/t wanthal!!inished pa#es appearin# on a p)blicly accessible site be!ore the proect is o!!icially la)nched.

(lso, i! yo)/re wor"in# on a partic)larly co%ple piece o! pro#ra%%in#, which %i#ht crashthe server i! it doesn/t wor", yo) don/t want toris" da%a#in# a wor"in# site that is alreadybein# )sed by eistin# clients.-n s)ch cases, yo) %i#ht want to consider settin# )p a test web server !or develop%entp)rposes. (lso, settin# )p s)ch a server is a !)n thin# to do, which can teach yo) a lot abo)thow web sites and the internet wor".


20/188

To !ind o)t how to set )p a test web server, step by step, re!er to (ppendi ( on pa#e 7:?.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s4;This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Gettin# *verythin# To#ethero) sho)ld now "now all abo)t do%ain na%es, web hostin#, HTML !iles, and )ploadin#.With this "nowled#e, yo) can now create yo)r !irst web pa#e. This %eans creatin# an HTMLdoc)%ent !ile and )ploadin# it to the hostin# space on a web server.Thro)#ho)t this boo", !or all o! the ea%ple web content we create, we/ll need so%e hostin#space on a server so%ewhere. (s - %entioned, there are tho)sands o! co%panies that willrent yo) space on their servers. -n this boo" we/ll )se a 2S$based or#anisation calledhost%onster !or the ea%ples. -! yo)r hostin# iswith so%eone else, that/s no proble% theyall wor" in ro)#hly the sa%e way.

So havin# acN)ired so%e server space, what/s netD To create web pa#es and )pload the% toa web server yo)/ll need so%e s)itable so!twareinstalled on yo)r co%p)ter. 'irst, yo)/llneed an HTML editor. This is a pro#ra% which wor"s %)ch li"e a word processor, b)t whichsaves the !inished doc)%ent in HTML !or%at


21/188

So be!ore yo) pro#ress to the net chapter, here/s what yo) need to do.:. -! yo) haven/t already re#istered a do%ain na%e and bo)#ht so%e hostin# space !orit, now is the ti%e to do so. 'or the ea%ples in this boo" we/re )sin# the services o!www.host%onster.co%, b)t other co%panies are also available. ( Goo#le search !orOweb hostin#O will #et yo) started.4. Ma"e s)re yo) have the details to hand o!how to access yo)r hostin# space. o)sho)ld "now the address o! the server, the !older to )pload !iles to, and a )serna%eand password.7. &ownload and install (%aya on yo)r co%p)ter. This is yo)r HTML editor.;. &ownload and install 'ileilla on yo)r co%p)ter. This is the 'TP pro#ra% !or)ploadin# !inished pa#es to the server.The !ollowin# chapters will eplain how to do all this.-t/s ass)%ed that yo)/re wor"in# on a Windows co%p)ter, )sin# VP, ista or Windows 5.

(polo#ies to those o! yo) who pre!er (pple Macs, b)t this boo" isn/t co%patible with yo)ralternative li!estyle and - have no plans to prod)ce a Mac version.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s48

This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.&o%ain Ea%e and Hostin#The !irst sta#e in creatin# a new p)blic web site is to re#ister the do%ain na%e and rent so%ehostin# space, so let/s do that now. Let/s si#n )p at www.host%onster.co%, and re#ister thedo%ain called www.the$web$boo".co%. Thats the do%ain that -ll be )sin# !or all theea%ples that !ollow. 1bvio)sly yo)ll need to s)bstit)te the$web$boo".co% !or whateverdo%ain yo) decide to re#ister.-ncidentally, a %inor technical point that/s worth "nowin# at this point. We won/t act)allybe re#isterin# www.the$web$boo".co%b)t %erely the$web$boo".co%. That/s the way

that &ES wor"s. o) re#isterthe top$level na%e, s)ch as the$web$boo".co%or!abnews.co.n0. How to handle pre!ies is technically )p to yo), b)t in practice isa)to%atically handled by yo)r hostin# co%pany. o) co)ld, i! yo) wish, chan#e the pre!i!ro% www to web. 1r con!i#)re thin#s so that www.yo)rsite.co%ends )p at one placeb)t web.yo)rsite.co%ends )p so%ewhere else. Eot thatyo)/d do that, beca)se it wo)ldcon!)se people, b)t it/s possible.These additional pre!ies are called s)bdo%ains, and can be )se!)l in so%e circ)%stances.The BBC/s news pa#es, !or ea%ple, are at news.bbc.co.)"whereas its %ain site iswww.bbc.co.)". Creatin# s)bdo%ains isn/t so%ethin# that we/ll cover a#ain in this boo",b)t %ost hostin# co%panies s)pport the !acility i! yo) partic)larly need to do it in the !)t)re.i#ht, bac" to host%onster.co%. Let/s start by re#isterin# o)r na%e.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l

-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s45This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.We enter the do%ain na%e we want to re#ister, and allow host%onster to chec" whether it/savailable.


22/188

Eote the option !or privacy. There/s a p)blic directory o! internet do%ain na%e re#istrationsthat allows anyone to !ind o)t the na%e and address o! the person or or#anisation whichre#istered any do%ain. -t/s "nown as the OwhoisO syste%. By selectin# the privacy option,which all do%ain na%e re#istration co%panies o!!er in one !or% or another, yo)r personalna%e and address are withheld !ro% the directory. 2nless yo)/re a lar#e co%pany, yo)/llprobably want to do this.1)r do%ain na%e is available, so let/s si#n)p and b)y it, alon# with the basic hostin#pac"a#e so we #et so%e space on the server !or o)r web content. We/ll need to s)pply o)rcredit card details and an e%ail address, and also choose a password !or lo##in# into thecontrol panel.

(nd we/re done. That/s all there is to it. We/ve now set )p the reN)ired in!rastr)ct)re !or abrand new web site. We/ve #ot a na%e, and so%espace on which to host the site. (ll weneed to do now is wait !or the e%ail %essa#e with details o! how to connect to o)r hostin#space.

(!ter a !ew %in)tes, it arrives. Here/s what it loo"s li"eITo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s46

This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.So now we have those O!)nda%ental !o)rO bits o! in!or%ation we need in order to )ploadcontent to o)r new hostin# space. The address o! the server !or 'TP )ploads is the$webboo".co%and the !older is Ap)blicht%l. The )serna%e is thewebbo.'or obvio)s reasons -/ve obsc)red the password. e%e%ber to "eep all web hostin#passwords sa!e and sec)re, and not let anyone else )se the%. (nyone who !inds yo)rpassword co)ld, in )st a !ew seconds, delete yo)r entire site !ro% the server. 1r, worse,replace yo)r care!)lly$cra!ted pa#es with #ibberish or obscenities.Havin# bo)#ht so%e hostin# space, the only way yo)/ll ever lo# into the hostin# co%pany/s

syste%s is via 'TP in order to )pload !iles. B)t all hosts also o!!er a control panel o! so%esort, where yo) can %aintain yo)r billin# in!or%ation and do all sorts o! other interestin#thin#s. Let/s have a loo" at o)r control panel now. To do this, we s)r! towww.host%onster.co% and we/ll see that there/s a control panel lo#in option. We si%plylo# in with o)r )serna%e and password as speci!ied in the e%ail we received earlierIHavin# done this, the control panel appears.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s4?This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$

boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s79This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$


23/188

boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.-! yo)/ve not seen a web control panel be!ore, itprobably loo"s rather da)ntin#. *speciallywhen yo) see that there are 6 tabsAsections and o)r screen shot shows )st one o! the%. The#ood news is that yo)/ll hardly ever need to to)ch it. B)t the other #ood news is that, sho)ldyo) ever need to chan#e anythin# abo)t the way yo)r web hostin# wor"s, it can all be donevia this control panel. 1ne word o! advice, tho)#hI each ti%e yo) chan#e so%ethin# on thecontrol panel, %a"e a note so%ewhere.-tll co%e in )se!)l one day.Let/s ta"e a brie! loo" thro)#h so%e o! the %ost i%portant sections o! this control panel. Thedesi#n o! which, incidentally, isnot )niN)e to host%onster. -t/s a co%%ercial prod)ct calledcPanel, which %any hostin# co%panies b)y beca)se it saves the% havin# to write their own.StatsThe area down the le!t hand side o! the screen is yo)r web site dashboard. -t shows yo) how%)ch stora#e space and trans!er capacity yo)/re )sin#, when the hostin# acco)nt epires,and so on. There/s also a lin" to the Service Stat)s pa#e. -! yo) ever !ind that yo)r web siteisn/t wor"in# properly, chec" this pa#e be!ore ass)%in# that it/s yo)r !a)lt. The server %aybe down !or %aintenance.PartnersAPro%otionalThis section shows vario)s additional services that yo) can si#n )p !or, so%e o! which are

!ree. 'eel !ree to clic" on the lin"s and eplore !)rther. B)t none o! these services isessential, at least !or the ti%e bein#, so don/t bother si#nin# )p !or anythin# )nless yo) reallywant to. -t/ll only co%plicated thin#s !)rther on.Mail'ro% here yo) can set )p the way that e%ail wor"s !or yo)r do%ain. When yo) b)y ado%ain na%e, yo) have control not only over the website at www.yo)rdo%ain.co%, b)talso any e%ail sent to anyone+yo)rdo%ain.co%. (t so%e point we/ll need to con!i#)rethis, beca)se we want to ens)re that %ail sent to, say, in!o+%y$web$boo".co%act)allyends )p so%ewhere where we can access it. *N)ally, we want to be able to send %ail whichappears to have co%e !ro% so%eone+%y$web$boo".co%. B)t !or now, this can wait. Weneed to #et the web site )p and r)nnin# !irst.'ilesThe 'iles section o! cPanel lets yo) browse and bac" )p the !iles on yo)r site, ie the HTML

doc)%ents that co%prise yo)r web pa#es. -t/s si%plest to do this via an 'TP pro#ra% ratherthan the web control panel, tho)#h, so %yadvice is to i#nore this !eat)re.Lo#s-t/s )se!)l to "now how %any people have been loo"in# at yo)r web site. (ll web servers"eep lo#s o! s)ch thin#s, and all hostin# co%panies o!!er yo) a variety o! ways to view thoseTo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s7:This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%

We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.lo#s. 1ne o! the !riendliest lo# viewers is webali0er which, as yo) can see, has been installedon the server !or )s. To view the lo#s we need do nothin# %ore than clic" on the lin". We/lltal" %ore abo)t lo#s, and how to %ar"et yo)r web site, in a later chapter.'or now, tho)#h, clic" on Choose Lo# Pro#ra%s and %a"e s)re that Webali0er is enabled.That way, when yo) co%e to the chapter on how toloo" at the stats !or yo)r site, there will beso%e nice Webali0er #raphs to loo" at. -!yo) dont tic" this option, there wont be,Sec)rityThese options allow yo) to add sec)rity to yo)r web site. o) can add password protection


24/188

to so%e or all o! yo)r pa#es, or prevent access to yo)r site !ro% certain -P addresses. LeechProtectadds additional protection to password$protected areas o! yo)r site, by allowin# yo)to speci!y how %any di!!erent -P addresses a partic)lar password is per%itted to be )sed!ro%. This prevents %is)se o! yo)r site ca)sed by passwords to protected areas beco%in#"nown and bein# distrib)ted a%on# hac"ers. We/ll cover web site sec)rity, and how toprotect the in!or%ation on yo)r site, in %)ch %ore detail in a later chapter. Generally,protectin# yo)r web site is so%ethin# yo) do within the site itsel!, rather than !ro% a controlpanel.&o%ainsThis area o! the control panels lets yo) %ana#e the do%ain na%es that yo) have re#isteredvia the hostin# co%pany. o) can trans!er their re#istration to a di!!erent co%pany i! yo)wish, or %ove other do%ains that yo) own !ro%a di!!erent hostin# co%pany to this one.o) can also create s)bdo%ains, as %entioned on pa#e 45.&atabases-n later chapters, we/ll set )p MySQL databases on the server and then create web sites thatcan access the%. 'ro% this section o! the control panel yo) can %ana#e those databases.So!twareAServicesThis section allows yo) to chan#e the way that certain "ey so!tware applications on the serverwor". 'or ea%ple, yo) can chan#e the %aster con!i#)ration !ile !or the PHP pro#ra%%in#lan#)a#e i! yo) need totwea" certain settin#s.

(dvanced(%on# the options available here are Ocron obsO. Most web servers, incl)din# this one, )sethe Lin) operatin# syste% rather than Windows, and a cron ob is the Lin) eN)ivalent o!what Windows re!ers to as a sched)led tas". This is a way !or yo) to tell the server toa)to%atically r)n a speci!ic pro#ra% at speci!ied ti%es thro)#ho)t the day, wee", %onthandAor year. o) %i#ht, !or ea%ple, set )p a cron ob that r)ns a PHP pro#ra% on the !irstday o! every %onth, which chec"s the %e%bership database o! yo)r web site and sends ane%ail re%inder to everyone whose s)bscription to the site is abo)t to epire.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s74

This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.-t/s Eot )de to Point*arlier on, - %entioned that the easiest way to #et a pro!essional$loo"in# web presence is tore#ister yo)r own do%ain na%e b)t, instead o! b)yin# hostin# space and spendin# ti%ecreatin# pa#es, )st point the do%ain na%e at yo)r personal area on a site s)ch as MySpace,Blo##er.co%, o)t)be, 'aceboo" etc. Eow that we/ve re#istered o)r do%ain na%e, - canshow yo) how to do )st that.'irst, %a"e s)re yo) "now the web address


25/188

1bvio)sly, i! yo)/re intendin# to #o down this ro)te !ro% the start, there/s no need to pay !orhostin# space when yo) re#ister yo)r do%ain na%e. -ndeed, yo) can stop readin# this boo"now, as we/ve covered everythin# yo) need to "now. However, with so %any #ood o!!ersaro)nd !or co%bined re#istration and hostin#, yo) %ay decide that it/seasier to )st b)yboth at the sa%e ti%e, even i! yo) start o!! by pointin# yo)r do%ain na%eat an eternal site!or the !irst !ew %onths rather than creatin# yo)r own content.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s77This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.-! yo) really do want to re#ister )st a do%ain na%e and have no intention o! occ)pyin# anyhostin# space, %ost hostin# co%panies o!!er this service. They all o!!er redirect !acilities,too, so that yo) can point yo)r new na%e wherever yo) wish.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$

boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s7;This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.HTML *ditor and 'TP ClientWith o)r hostin# space now p)rchased b)t sittin#e%pty, we need so%e pro#ra%s that willlet )s start to !ill it. This %eans an HTML editor to create pa#es, and an 'TP pro#ra% to)pload those pa#es to the server.

'TP pro#ra%s co%e in two !lavo)rs, na%ely clients and servers. 'or copyin# !iles between 4co%p)ters, yo) need a client. (n 'TP server is what the web server r)ns, allowin# clients toconnect to it. &on/t %ista"enly install an 'TP server on yo)r co%p)ter, as it will alloweveryone in the world to atte%pt to connect to yo)r co%p)ter via the internet and copy !ilesto or !ro% yo)r co%p)ter.There are plenty o! !ree HTML editors available !or Windows, and the one we/ll be )sin#thro)#ho)t this boo" is (%aya. -ts relatively easy to )se and, )nli"e so%e o! the other !reepro#ra%s, doesn/t atte%pt to install additional spyware or toolbars that yo) don/t need.There are %any !ree 'TP clients available. 1ne o! the %ost pop)lar is 'ile0illa, so that/s whatwe/ll )se.

(%ayaTo download (%aya, visit httpIAAwww.w7.or#A(%ayaand !ollow the &istrib)tions lin"to reach the download pa#e. -t doesn/t %atter whether yo) #et the http or 'TP version the

pro#ra%s are both the sa%e, the only di!!erence is how yo)r co%p)ter per!or%s thedownload.Eew versions o! (%aya are released every ; %onths or so. The ea%ples in this boo" arebased on version ::.4, released in %id$499?.1nce yo)/ve downloaded the (%aya pro#ra% and saved it to yo)r co%p)ter, do)ble$clic" the!ile to start the installation process. 3eep clic"in# Eet to accept the s)##ested options, andthe installation will co%plete. The installer will add an icon to yo)r Windows des"top,%a"in# it easy to r)n the pro#ra% whenever yo) want.Ma"e ( Web Wor" 'olderEow is a #ood ti%e to #ive a %o%ent/s tho)#ht abo)t where yo) want to store wor"$inpro#ress


26/188

web pa#es on yo)r co%p)ter. When yo)/re creatin# web content, s)ch as HTML!iles, the nor%al way o! wor"in# is to create and edit the !iles on yo)r co%p)ter, and only to)pload the% to the web server


27/188

co%p)ter, while the latter shows !iles on the web server. 1r at least, they will when we havecon!i#)red the pro#ra%.'ro% the 'ile %en), choose Site Mana#er and then clic" the Eew Site b)tton. Choose ana%e !or the server yo) want to connect to, and press et)rn. Web Wor" is a s)itablechoice, or perhaps )se the na%e o! the site yo) intend to create. 'TP pro#ra%s allow yo) tocreate %)ltiple connections li"ethis, each with their own na%e, so that yo) can )pload !ilesto di!!erent servers

(ss)%in# that ' can connect to yo)r server, yo) sho)ld see so%ethin# li"e thisI

1n the le!t hand side o! the screen, )nder Local Site, yo) can see the local !older on yo)rco%p)ter which we desi#nated to hold o)r HTML !iles. -n this case, it/s the Web Wor"!older, which c)rrently has nothin# in it beca)se we haven/t yet created any HTML !iles.1n the ri#ht, the e%ote Site col)%n shows the !olders and !iles on yo)r server. o)/ll seevario)s !olders s)ch as .cpanel, .htpasswds, .ssh and others. The !older that is o! pri%aryinterest at this point is p)blicht%l. This is where yo) will p)t all o! the content that %a"es)p yo)r web site. (ll o! the other !olders are !or )se by the web server only, and are notaccessible to the #eneral p)blic via yo)r web site. 'or now, it/s sa!est to leave the% alone andnot be te%pted to eplore or delete the%.With an HTML editor and an 'TP client now d)ly installed and con!i#)red, we/re !inallyready to create web pa#es. So close 'ileilla and we/ll #et started.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l

-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s76This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Creatin# o)r 'irst Web Pa#eTi%e to create a web pa#e. Start (%aya, and close the tip o! the day i! one #ets displayed.


28/188

'ro% the 'ile %en), choose Eew &oc)%ent and yo)/ll see a bo so%ethin# li"e thisIClic" the !older icon near the top ri#ht hand corner, browse to yo)r Web Wor" !older andclic" 13. (%aya will now #enerate a !ilena%e !or yo)r new pa#e that ends with Eew.ht%l,b)t this isn/t what yo) want. So chan#e it to inde.ht%l, as ill)strated above.Why inde.ht%lD Beca)se i! so%eone visits yo)r web site and doesn/t speci!y a partic)larpa#e that they want to see, the server will show the% the ho%e pa#e. (nd the way that yo)tell yo)r server which is the ho%e pa#e, is by na%in# it inde.ht%l.-! so%eone visits yo)r site and eplicitly types www.yo)rsite.co%Aprod)cts.ht%lintotheir Web browser, the server will send the% prod)cts.ht%l. B)t i! they %erely typewww.yo)rsite.co%, the server will atte%pt to send the% inde.ht%l. (nd i! inde.ht%ldoesn/t eist, the visitor will see an O*rror ;9; pa#e not !o)ndO error %essa#e. So, yo)always need to start with inde.ht%l when yo)/re creatin# a new site, or any new !older in aneistin# site.-ncidentally, yo) %ay have noticed we na%ed o)r pa#e inde rather than -nde or -E&*V.This is i%portant. Generally, yo) sho)ld always na%e web pa#es in lower case, witho)t anyC(P-T(L L*TT*S or spaces. That/s beca)se %ost Web servers are case$sensitive, andre#ard -nde.ht%l and inde.ht%las two separate !iles. To avoid con!)sion ca)sed by pa#esnot bein# !o)nd beca)se they were typed by the visitor


29/188

boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s;:This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.There it is, ri#ht at the botto% o! the list, a!ter assorted !iles s)ch as .htaccess, ;99.sht%l andothers.-! yo)r hostin# co%pany p)ts any !olders or !iles in yo)r p)blicht%l !older, it/s #enerallyN)ite sa!e to delete the%


30/188

create a !ew test pa#es, and !eel !ree to "eep on eperi%entin#, b)t please don/t ass)%e thatthere/s nothin# else i%portant le!t to learn.

(t the very least, please dont start creatin# a site !or real )ntil yo)ve readI:. The re%ainder o! this chapter.4. The chapter abo)t CSS, which starts on pa#e F?.7. The introd)ction to Content Mana#e%ent Syste%s


31/188

(ll o! which leaves the N)estion o! what to dowith all those eistin# Word doc)%ents, *celspreadsheets, PowerPoint presentations, P&' !iles and so on, that yo)/d li"e to %a"eavailable online via yo)r Web site.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s;FThis boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Generally, yo) have two choices. The !irst option is to )pload the !iles to yo)r site, )st asyo) wo)ld with any other !ile s)ch as an HTMLdoc)%ent or a css !ile. o) can then providea lin" to the .&1C, .VLS, .P&' or .PPT !ile )stas yo) wo)ld to any other pa#e on yo)r site.However, there/s no #)arantee as to what will happen when the visitor clic"s on the lin". -twill depend #reatly on which Web browser the visitor is )sin#, whether he le!t$ or ri#ht$clic"son the lin", and what so!tware is already installed on his syste%.

(%on# the vario)s thin#s that %i#ht happen areIthe browser will open the !ile and %a"e a

stab


32/188

a plain, easy$to$read desi#n, or wo)ld so%ethin# %ore arty appealD4. &on/t start with a lon# Owelco%eO intro, sayin#what the pa#e is !or. The visitor willN)ic"ly s"i%$read the pa#e and %a"e )p their own %ind as to whether it see%ss)itable. The N)ic"er they !ind o)t, the %ore chance o! the% stayin# aro)nd.7. &on/t ass)%e that everyone readin# yo)r Web site will have an enor%o)s screen or a!ast internet connection. They %ay be browsin# on a %obile phone or P&(, wherethe screen is s%all and every %in)te online costs %oney.;. 3eep para#raphs short and col)%ns narrow. -t/s %)ch easier to read this way. (lso,don/t pac" too %)ch in!or%ation on each pa#e. 2sers pre!er to clic" rather thanscroll.F. Line spacin# o! :.F or 4 is #ood. S%all tet with 4.9 line spacin# is easier to read thanlar#e tet with :.9 spacin#.8. Eever )se bl)e or )nderlined tet. People will thin" it/s a clic"able lin".5. Stic" to the vario)s conventions, s)ch as a clic" on yo)r %ain lo#o ta"in# readers tothe ho%e pa#e. So%eone loo"in# to contact yo) will be see"in# a OContact 2sOb)tton, not so%ethin# that says OGet in to)chO.6. &on/t arran#e tet in col)%ns s)ch that the reader has to scroll the screen )p anddown. -t/s a Web pa#e, not a newspaper.?. &on/t waste too %)ch above$the$!old


33/188

select the act)al words that yo) want to t)rn into a lin", by dra##in# over the% with yo)r%o)se li"e thisIBy selectin# the tet, we/ve told (%aya which words we want to t)rn into a hyperlin". (llthat re%ains is to speci!y which web pa#e to open when the lin" is clic"ed. So, !ro% theLin"s %en), clic" on OCreate or chan#e lin"O and, in the bo that appears, type %ore.ht%lTo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"s;6This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.and clic" the Con!ir% b)tton. Then clic" so%ewhere on the blan" white space within yo)rinde pa#e.o)r lin" is now created, and sho)ld appear on yo)r pa#e as )nderlined tet li"e thisIo)/ve probably noticed %y choice o! clic"able tet, na%ely O!ind o)t %oreO. o) %i#ht haveepected %e to choose Oclic" hereO instead. (!ter all, doesn/t it %a"e sense to always t)rn

Oclic" hereO or Oclic" this lin"O into, well, so%ethin# clic"ableD (ct)ally, no it doesn/t.1ne i%portant aspect o! web site desi#n is accessibility. This %eans %a"in# s)re that yo)rsite can be )sed !)lly by those with disabilities. 'or ea%ple, that bit o! tet which pops )pwhen so%eone hovers over a pict)re


34/188

yo)r server. 'inally, close 'ileilla and )se yo)rWeb browser to s)r! toyo)r web site. Clic"on the lin"s, and yo) sho)ld be able to %ovebetween yo)r two pa#es. -sn/t that neatDEow that yo) "now everythin# that/s reN)ired tocreate a si%ple web site with lin"s, why nottry creatin# a third and !o)rth pa#e !or yo)r site, and set )p so%e %ore hyperlin"s betweenthe%DLin"in# to 1ther SitesThe destination !or yo)r hyperlin"sdoesn/t have to be li%ited to pa#es on yo)r own site. o)can easily create lin"s to other places. -n the bo where yo) type in the destination !or thelin", )st type in the co%plete address


35/188

intricacies o! HTML, beca)se pro#ra%s li"e (%aya a)to%atically #enerate this special code!or yo).However, !or reasons that will beco%e apparent when we start to learn abo)t CSS stylesheets, yo) do need to "now so%e HTML. Than"!)lly, the a%o)nt yo) need to "now isrelatively little, and it/s not di!!ic)lt.Let/s ta"e a loo" at so%e o! the HTML which (%aya has, )ntil now, been hidin# !ro% yo).2se (%aya to open yo)r inde.ht%l pa#e. Then, !ro% the iews %en), clic" on ShowSo)rce. The screen will split toshow yo)r pa#e at the top and the HTML code version at thebotto%. 2se yo)r %o)se to dra# the dividin# line )pwards, so yo) can see %ore HTML codeli"e thisI

(ltho)#h the code loo"s da)ntin# at !irst, two !)nda%ental r)les will help yo) to %a"e senseo! it.:. (n HTML !ile contains a %it)re o! pa#econtent


36/188

This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.1ne set o! ta#s that yo)/ll )se o!ten are the headin# levels. There are 8 o! these ta#s b)ilt intothe HTML lan#)a#e, which allow yo) to create headin#s o! )p to 8 levels. Typically, the %ainheadin# on yo)r pa#e will be a level one headin#, which starts with an Yh:Z ta# and endswith YAh:Z. o) %i#ht then want to incl)de a s)b$headin# later on, !or which yo)/d )se a%atchin# pair o! h4 ta#s.

(%aya can #enerate headin# ta#s !or yo) a)to%atically. -n the top hal! o! the screen,hi#hli#ht the !irst line and then clic" the T: b)tton in the ri#ht hand panel. Then clic" intothe lower hal! o! the screen and see how that tet is now s)rro)nded by h: ta#s li"e thisITo si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"sF;This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$

boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Meta ta#s*arlier, - %entioned %eta ta#s. Speci!ically the %eta$ta# with a na%e o! OGeneratorO and aval)e o! O(%ayaO. Meta$ta#s are a way !or a web pa#e to s)pply in!or%ation abo)t itsel! tothe web browser that is displayin#the pa#e. 1ne o! the %ost pop)lar )ses o! %eta$ta#s is toincl)de a brie! description o! the pa#e, and a !ew "eywords abo)t it too. 'or ea%ple, theYheadZ section o! an HTML !ile %i#ht contain the !ollowin# codeIY%eta na%eXOdescriptionO contentXOLatest availability !or the Grand HotelOZY%eta na%eXO"eywordsO contentXOavailability, late boo"in#s, vacant roo%sOZ-ts always a #ood idea to incl)de these two ta#s


37/188

'or ea%ple, open yo)r web browser and then s)r! to one o! yo)r !avo)rite pa#es, s)ch asGoo#le, Wi"ipedia, 'aceboo", or any other pa#e that yo) pre!er. -! yo)/re )sin# -nternet*plorer, brin# )p the iew %en)


38/188

To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"sF5This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details. *ns)re that there is s)!!icient contrast between tet and bac"#ro)nd colo)rs. (void scrollin# tet and other dyna%ic e!!ects. They are hard to read. (void any techniN)e which %ay prod)ce !lic"erin# e!!ects on$screen. 2se the clearest and si%plest lan#)a#e !or site content. 3eep para#raphs short, and incl)de so%e white space between the%. &o not )se !ra%es. Screenreaders don/t li"e the%. &ar" tet on a li#ht bac"#ro)nd wor"s better that li#ht tet on a dar" bac"#ro)nd. 2se a line spacin# o! aro)nd :.F to ens)re that the tet on a pa#e doesn/t loo" too[heavy\.Eow that yo) "now the basics o! HTML, and speci!ically the way that !or%attin# ta#s wor"

!or thin#s s)ch as para#raphs, headin#s, bold tet and so on, we can %ove on to learn abo)tCSS.To si#n )p with the web hostin# co%pany !eat)red in this boo", please visit www.the$web$boo".co%Ahosts.ht%l-t costs yo) )st the sa%e, b)t brin#s %e a s%all co%%ission that !)nds the develop%ent o! thisboo". Than"sF6This boo" is !ree o! char#e. To #et the latest version, see www.the$web$boo".co%Please do not %a"e copies o! the P&' !ile !or others. (ll downloads %)st be !ro% www.the$web$boo".co%We can prod)ce c)sto% versions o! this boo" !or other web hosts. *%ail in!o+the$web$boo".co%!or details.Cascadin# Style Sheets

1ne o! the "ey techniN)es )sed in %odern web pa#e desi#n techniN)es is so%ethin# calledthe separation o! presentation and content. -n the early days o! the web, there was no way todo this, which %eant that HTML pa#es were bloated, repetitive and di!!ic)lt to )nderstand.'or ea%ple, i! yo) wanted the %ain body tet o! the site to )se the erdana type!ace, in asi0e o! :4 pt, every sin#le para#raph o! tet wo)ld need to start with a Y!ont!aceXverdana si0eX:4ptZ ta#. That co)ld a%o)nt to h)ndreds or tho)sands o! s)chta#s across the entire site. -! yo) s)bseN)ently wanted to redesi#n the site, chan#in# all thoseta#s was a lot o! wor".

( !ew years a#o, alon# ca%e a new revision o! the HTML lan#)a#e


39/188

s%artphone or a P&( or a proector.- %entioned accessibility, and %a"in# yo)r site disability$!riendly, on pa#e ;?. CSS can helphere too. o) can set )p a separate style sheet !or people who have basic si#ht proble%s ordysleia, ie lar#e tet, no #raphics, and a %orereadable bac"#ro)nd colo)r. o) can theneasily add an option to yo)r site that )ses this style sheet rather than the nor%al one, !orthose visitors who pre!er it. (nd all, o! co)rse, witho)t havin#

book oh html

Documents