HTML Beginners – Basics of Web Designdl.booktolearn.com/ebooks2/computer/webdesign/b01hflaaj2_html... · many exercises and examples which can be downloaded from the web site. It

HTMLBeginners–BasicsofWebDesignPaulGibbs

HTMLBeginners–BasicsOfWebDesignwrittenbyPaulGibbs

CopyrightCopyright©2016PaulGibbs

Allrightsreserved.Thisbookoranyportionthereofmaynotbereproducedorusedinanymannerwhatsoeverwithouttheexpresswrittenpermissionofthepublisherexceptfortheuseofbriefquotationsinabookreview.

AmazonASINNumber:(eBook–Kindle)

Websites,SourceCodeandFeedback

http://www.paulvgibbs.comhttp://www.withinweb.com

Downloadallofthesourcecodefrom:http://www.paulvgibbs.comorhttp://www.withinweb.com/ebooks/

Email:[email protected]

Trademarks

MySQLisatrademarkofOracleCorporationand/oritsaffiliates.MacintoshandMacOSXareregisteredtrademarksofAppleInc.MicrosoftandWindowsareregisteredtrademarksofMicrosoftCorp.DreamweaverisaregisteredtrademarkofAdobeSystemsincorporated.TheWordPressFoundationownsandoverseesthetrademarksfortheWordPressandWordCampnamesandlogos.Otherproductnamesusedinthisbookmaybetrademarksoftheirownrespectivecompanies.Thisbookisnotaffiliatedwithorendorsedbyanyoftheproductsmentioned.

WarningandDisclaimer

Everyefforthasbeenmadetomakethisbookascompleteandasaccurateaspossible,butnowarrantyorfitnessisimplied.Theinformationprovidedisonan‘asis’basis.Theauthorandpublishershallhavenoliabilityorresponsibilitytoanypersonorentityregardinganylossordamageincurred,orallegedtohaveincurred,directlyorindirectly,bytheinformationcontainedinthisbook.Youherebyagreetobeboundbythisdisclaimer.

mailto:[email protected]

Preface

ThisbookhasbeenwrittenfromaseriesofcollegelecturesonWebDesign.Itishasmanyexercisesandexampleswhichcanbedownloadedfromthewebsite.ItstartswithanintroductiontoHTMLandthentakesthereaderthroughtheconceptsofstylesandhowtoapplythem.

TherearealsochaptersonGraphics,JQuery,settingupawebsiteandlooksatHTML5andresponsivewebdesignconcepts.

Thebookexplainsissuesthatyouencounterinrealworldsituationsandprovidesthebasicexamplesfromwhichyoucanthenusetofurtherdevelop.Manyofthetutorialsconsistsofaseriesofexamplesandtaskswhichillustrateeachpointandconcentrateonsimplifiedcodesothatyoucanseehowtheyareused.

*Introduction-AnintroductiontoHTML.*HTMLTags–AlookatstandardHTMLTags.*ImagesandTables-Usingimagesandcreatingtables.*StylesandStylesheets-Differentwaystousestyles.*FurtherStyles-Definitionsandfurtherexamples.*SiteExamples-Asitelayout.*ListsandMenus-Creatingnavigation.*Graphics–GraphicconceptsandPhotoshop.*Layouts–Someprinciplesofdesign.*Addingfunctionality-JQueryandotherfeatures.*htaccessfile-Examplesofusinganhtaccessfile.*Sitesetup–Domainnamesandsearchoptimisation.*Forms–Formattingandlayoutofforms.*HTML5Design–FeaturesofHTML5.*ResponsiveDesign–Aresponsivedesignexample.

OneoftheissuesthatwehaveinthecomputerworldisthatitisverymuchinfluencedbytheUSdesignersofsoftware.Hencetheword“color”isusedinsteadoftheBritishEnglishspellingof“colour”.InthisbookIuse“color”throughout.Ididforawhileconsiderusingtheword“color”whenwritingaboutthestyleattributebutuse“colour”whenwritingaboutcolorgenerally,butthoughtthatwouldjustconfusethings.SoBritishEnglishreaderswillhavetoputupwith“color”fornow.

Usingthecodeexamples

Allthecodeexampleswithanswerstotheexercisesmaybedownloadedtoyourcomputerfromthewebsite:

http://www.paulvgibbs.comor:http://www.withinweb.com/ebook

HowtocopyandpastetextfromKindlebooks

YoumaywanttocopyandpasteprogrammingcodeexamplesfromKindleontoyourcomputersothatyoudon’thavetore-typethem.

TodothisinKindle,highlightthetextyouwanttocopyandclickonthe“Highlight”button.NowgoonthewebtoyourKindleaccount(https://kindle.amazon.com)andclickon“YourHighlights”link.You’llseeallthetextyou’vehighlightedinyourKindlebooks.Fromthere,youcancopythetextandpasteitintoanotherprogram.

SomeWebDesignTerms

Responsive–Referstotheabilityforawebpagetorespondstodifferentdevicesandscreenresolutionscontrolledbytheselectionofdifferentstyles.

Cascading–Pageelementsarestyleddependingonruleswhichcontrolwhichstyletakesprecedencewhentherearemorethanonestyleforanelement.

Inheritance–Certainstylesareinheriteddownthedocumenttree.Soforexamplefont-familycanbeplacedinthebodystyleandthiswillmeanalltextonthepagewillhavethatfont-family.Thismakesstylesheetssimpler.

In-linestyles–Amethodtoplacestylesintoawebpagedirectlyagainsttheelementratherthanintheheadofadocumentorinastylesheet.

class–Aclasscanbeusedtostylemorethanoneelement.

id–AnIdisusedtostyleoneparticularelement.

W3C–Theinternationalbodythatoverseesthewebspecifications.

Elements–Isacomponentofawebpagesuchasheadings<h1>,<h2>,<h3>andwhenplacedonawebpageformpartofthedocumenttree

Tags–Thelessthantagis<andthegreaterthantagis>whichareusedtodefinethestartandendofanelement.Forexample<h1>,<p>andsoon.

Attributes–ElementscanhaveattributeswhicharepropertieswhichprovidefurtherinformationdependingontheelementtypesuchasthehrefvalueforaURLlinkoranimagenameforanimageelement.

POSTandGET-Thisishowyousenddatatoanotherwebpagewhereyoucanthenprocessthedata.POSTandGETworkwithformswheretheuserentersinformation.

Cookies-Acookieissmalltextfilethatsitsontheuser’scomputer.Itisoftenusedto

storedatasothattheuserhasabetterbrowsingexperienceshouldtheyreturntothewebsite.Forexample,ashoppingcartsystemmaystoretheitemsthattheuserhasselected.Whentheyreturntothestore,thecontentsofthecartcanbedisplayedandtheusercancontinueshopping.

Sessions-Anotherwayfortheprogrammertoretaininformation;however,sessiondataisdeletedandlostwhentheuserclosesthebrowserwindow.

BookVersion

June2016isthecurrentversion

OtherBooksbyPaulGibbs

PHPTutorials:ProgrammingwithPHPandMySQLAmazonASINNumber:B00CBLZ1U0(eBook–Kindle)ISBNNumbers:978-0-9928697-0-0(eBook–PDF)978-0-9928697-1-7(eBook-ePub)978-0-9928697-2-4(eBook–Kindle)978-0-9928697-3-1(PaperBack)

TableofContents1IntroductionTheprocessingofanHTMLpage

AbasicHTMLpage

ThetypeDeclarationtag

TheHeadtag

TheBodytag

SomeHTMLtags

HTML5

CSS3

FoldersandFilesandServers

ContentManagementSystemsandHTML

Commonerrorsthatbeginnersmake

Someusefulwebsites

SomeHTMLEditors

Summary

2HTMLTagsTASK1-CreatingFolders

TASK2–CreateanewWebPage

TASK2-SavingthePage

TASK3-Insertingheadings

TASK4-Insertingandformattingthetext

TASK5-Formattingyourtext-Thestyleattribute

TASK6-Thebold<strong>anditalic<i>tags

TASK7-Copyingfilesintofoldersand-insertinganimage

TASK8-Theimagetag

TASK9-Bordersandaligningimages

TASK10-AddingaHorizontalline

TASK11-Otherformatting

TASK12-Linkstootherpages

TASK13-AnchorLinkstoplacesonthesamepage

TASK14-Emaillinks

TASK15-HTMLSpecialCharacters

TASK16-Listsandbullets

TASK17-Colorsinhtml

TASK18-Pagevalidation

Debugginginthebrowser

Usingtheinbuiltdevelopertoolsinwebbrowsers

EmulatingdifferentdevicesusingGoogleChrome

Firefoxdebugger

XHTMLvalidatethewebpage

UseDreamweavertocheckthedocument

GoogleChromePageSpeedutility

SomeStandardHTMLTags

Summary

3ImagesandTablesATableexample

TASK1-Creatingatable

TableHeadings

SimpleTableExercise

AGalleryofPictures

TASK2-Creatinganewimagesfolder

TASK3-AddingImages

TASK4-SetupthePage

TASK5-Addthetable

TASK6–Thetable

TASK7-Insertyourimagesintothetable

TASK8-Adddescriptionstoyourimages

TASK9-Addahorizontallineorrule<hr/>

TASK10–Completetheformattingofyourgallerypage

TASK11Centerthetable

TASK12–Addintheemaillink

TASK13–Testyourpages

Summary

4StyleandStyleSheetsInlinestyles

Placingstylesintheheadofthedocument

Stylesyntax

CreatingstyleswithDreamweaver

CSS-CascadingStyleSheets

InheritanceinStyles

TASK1–Placingstylesintheheadofthewebpage

TASK2-Creatingyourownstyles

TASK3-Creatingastyleforponly

CSSidandClass

TASK4-Anexampleofaselectorid

TASK5-Anexampleofaselectorclass

SomenotesaboutFontSizes

DIVsandSPAN

Creatingaseparatestylesheet

The@mediarule

Summary

5FurtherStylesStyleDefinitionSummary

[1]BuiltinTags(selectors)

[2]Classes

[3]ids

StyleExercises

TASK1-Setthepagetoadefinedfontandsize

STYLES

BODYTEXT

TASK2-Modifyanh1tag

TASK3-Modifyaparagraphtag

TASK4-Creatingaquoteblockoftext

Links

TASK5-Removetheunderlinefromahyperlink

TASK6-Makehyperlinksblockhover

TASK7-Creatingtwotypesofstylesforlinksusingadivclass

TASK8-Creatingtwotypesofstylesusinganhrefclass

ImagesandStyles

TASK9-Removeaborderoraddabordertoanimage

TASK10-Addashadowtoanimage

CSSBoxModel

BlockandInlineelements

BlockElements

InlineElements

HTMLDivandSpan

Differencebetweendivandspan

TASK11-Floatleftandfloatrightblocks

TASK12-Centreablockoftextwithadiv

TASK13-Centreablockoftextwithtwodivs

TASK14-Floatingimagestotheright

TASK15-Floatingimagestotheleft

FurtherTables

TASK16-Creatinganewtable

TASK17-Addinginsomestyles

TASK18-Formattingthedisplayfurther

Summary

6SiteExamples

CreateaBusinessCardWebSite

TASK1-Createanewwebpage

TASK2-CreatesomeDIVcontainers

TASK3-Addinmainimage

TASK4-Addinheadertext

TASK5-Addindescriptiontext

TASK6-Addinopeninghourstext

TASK7-Addinlocationtext

TASK8-Addinpricestext

TASK9-Addincontacttext

TASK10-Addinfootertext

TASK11-Formattext

TASK12-Addinbodystyles

TASK13-Addinheaderstyles

TASK14-Addinstylesforeachblock

TASK15-Addinfooterstyles

TASK16-AddInCanvasStyles

TASK17-AddinGooglemap

TASK18-Addinlogoandlogostyles

TASK19-Addinhrefanchorlinks

TASK20-Addinthehreflinksstylesfortheheader

TASK21-Placestylesintoaseparatestylesheet

FilesforBusinessCardWebSite

MinifyCSS

[A]-Createaseparatestylesheet

[B]-Minifythecss

Summary

7ListsandMenusUnorderedlists

OrderedLists

Usingimagesinlists

AllCSSListProperties

CreateamenuusinganUnorderedList

Exampleofamenuinawebpage

CSSMouseoverButtons

Summary

8GraphicsGraphicformatsusedontheweb

gifformat

jpgformat

pngformat

bmpformat

tiffformat

Photoshopbasicprinciples

TASK1-CreatingshapesinPhotoshop

TASK2-UsingtextinPhotoshop

TASK3-Savingforawebpage

TASK4-TocreateabuttonwithPhotoshop

TASK5-UsingLayers

Checkingthesizeofimages

Creatingrolloverimages

UsingDreamweavertocreatearolloverimage

CreatetwobuttonsusingPhotoshop

TASK6-CreatingarolloverusingCSS

ExerciseinBackgroundImages

TASK7-Backgroundbodyimage

TASK8-Creatingabackgroundimage

TASK9-Backgroundposition

Preparingandsavingimagesfortheweb

[1]BringanimageintoPhotoshop

[2]SetMonitorRGB

[3]Croptheimage

[4]Re-sizetheimage

[5]Createthere-sizedimage

[6]Filteringtheimage

[7]Sharpenyourimage

[8]Alternativemethodforsharpening

[9]Savethefile

[10]Addyourimagetoawebpage

Summary

9LayoutsPageSizes

Generallayoutsconcepts

TraditionalAspects:

Sitedetails:

Colortheory?

Howtoselectcolorschemes

WebDesign-GoodPractice

GoodWebPages

BadWebPages

ResponsiveDesign

Howdowefindalayoutforoursite?

SomeFreeTemplateSites

ResponsiveDesignFrameworks

AWebSiteProject

Websitespecification

Awebsiteconsistingof6pages

Generalconsiderations

Layoutchoice

UsingWireFramedesign

SuggestedPages

[1]index.htmlpage

[2]Productsorservicespage

[3]FAQorCustomerServicesInformation

[4]Contactspage

[5]Gallerypage

[6]Aboutuspage

Sitemappage

Sitenavigation

Siteoptimisationandsubmissiontosearchengines

Thingstoconsider

WheredoIgetmyimagesfrom?

Howmanypagesshouldthesitehave?

Whatlayoutshouldthesitehave?

HowdoIresearchothersimilarwebsites?

Summary

10AddingFunctionalityWebFontsfromAdobeandGoogle

GoogleFonts

AdobeEdgeWebFonts

TASK1–Addsomefontstoyourownwebpage.

IntroductiontoJavaScript

WhatisJavaScript?

WhatisJavaScriptusedfor?

HowdoweuseJavaScript?

AsimpleexampleofJavaScript

UsingJQuery

WhatisJQuery?

UsesofJQuery

IncorporatingJQuery

AnillustrationofJQuery

UIAccordioninterface

MenuInterface

DatePicker

Addingmoviestoawebpages

Addingaudiotoawebpages

Summary

11.htaccessFilesThingsthatcanbedonewithan.htaccessfile

Tocreatean.htaccessfile

Examplesof.htaccessfiles

301ispermanentredirect

302istemporaryredirect

Definingacustom404errorpage

Stopusersdisplayingthedirectorylistingofawebsite

Stopusersdisplayingthedetailsofan.htaccessfile

Toprotectyouradminareayoucancreatean.htaccess/.htpasswdfile.

Createan.htaccessfile

Createthe.htpasswdusername/passwordfile

PageStatusCodes

Summary

12SiteSetUpDomainNamesandWebSpace

DomainName

ConsiderationsforTLD

WebSpaceandWebServers

Thingstoconsiderwhenlookingforwebhosting

Afterpurchaseofwebspace

NotesonPageSetUp

Pagedetails

SiteNavigation

SearchEngineOptimisation(SEO)

SEOsitetasks

GoogleAnalytics

TocreateanewView(Profile)

Filterdatabysubfolder

ToseeGooglesearchenginewords

Todisplayrealtime

Todisplay%ofuseshowingwhichlinksarebeingused

ToolsforAnalysingandOptimisingPages

Otherfacilitiesfortestingwebpages

Structureddatamark-up

AnintroductiontoMicrodata

ToolforcreatingMicrodata

TestingyourMicrodata

Summary

13FormsBasicFormStructure

DreamweaverandForms

Formelements

[1]Text

[2]Password

[3]Hidden

[4]Textarea

[5]Checkbox

[6]RadioButton

[7]DropdownList

[8]Emailinputbox(HTML5)

[9]SubmitButton

[10]ResetButton

[11]ImageButton

FormControls

ExampleHTMLemailform

Issueswithemailforms

FormsinHTML5

HTML5andformvalidation

TASK1-Therequiredattribute

TASK2-Inputtypeof“number”

FormattingFormsinHTML5

TASK3-Createaform

Summary

14HTML5DesignExerciseinHTML5Layout

TASK1-CreateanewHTML5webpage

TASK2-Addinbasicstructure

TASK3–Addthefirststyles

TASK4-Thewrapperandheaderstyles

TASK5-Theh1tags

TASK6-Addinalltext

TASK7-Navigationstyles

TASK8-Thesectionandarticleschematicmark-uptags

TASK9-Thefigureandhgroupstyles

TASK10-theasidestyles

TASK11-Addinthefinalgroupofstylestofinishoffthelinks,htagsandfooter

TASK12-AddinhtmlshvJavaScriptcode

Summary

15ResponsiveWebDesign(RWD)Theimportanceofmobiledesign

MediaQueries

AResponsiveWebDesignFrameworkexample

TASK1-DownloadtheHTML-KickStartframework

TASK2-Copythefileblank.htmlandcallitindex.html

TASK3-Pagetitle

TASK4-Addinthebasicgridstructures

TASK5-Addintextforlogoforheadermenu

TASK6-Addinstyles

TASK7-Addintheheaderstyle

TASK8-Addinlinkstyles

TASK9-AddinLogostyles

TASK10-Addintheslideshow

TASK11-Addthetexttothethreecolumnblocks

TASK12-AddinsomestylesfortheThreeblocks

TASK13-Addintextandimageforthedescriptionblock

TASK14–AddintheimagewhichispartofthedescriptionDIV

TASK15-Stylesfordescription

TASK16–AddintextforOpeningHours

TASK17–AddinStylesforOpeningHours

TASK18-Addintextforfooter

TASK19-Addinstylesforrefsatthebottomofthepage

TASK20-Finishoffthepage

Summary

1Introduction

What’sinthischapter:

*HTMLProcessing.*ABasicHTMLWebPage.*Someusefulwebsites.*Alistofwebeditors.

TheacronymHTMLmeans“HypertextMarkUpLanguage”whichessentiallymeansthattextistaggedinaparticularwaytorepresentinformationthatawebbrowsercanunderstand.

AwebpageisnothingmorethananordinarytextfileandyoucancreateandeditwebpagesusingatexteditorlikeNotePadorNotePad++.However,thereareanumberofcommercialeditorssuchasDreamweaverorCofeeCup.TherearealsoanumberoffreeeditorssuchasKompozerwhichalsohastheabilitytocreateandeditHTMLdocuments.

Creatingwebpagesisstraightforwardandyoucandisplayyourresultsinawebpagebysimplyrightclickingonthefileandopeningitusingoneofyourinstalledwebbrowsers.Soyoudonotneedtohaveaccesstoawebservertodevelopwebsites.

TheprocessingofanHTMLpageIfyouhaveasitewhichconsistsonlyofHTMLwebpages,theservermerelysendstheHTMLdatatothewebbrowserasshowninthefigurebelow.

ThisiswhyHTMLpagescanbeviewedlocallyinyourwebbrowserfromyourowncomputersincetheydonotneedtobe“served,”whereasdynamicallygeneratedpagessuchasPHPneedtobeaccessedthroughaserverwhichhandlestheprocessing.

AbasicHTMLpageAnHTMLpageadherestodefinedstandardswhichyouneedtomeetorotherwisethepagewillnotdisplaycorrectly.Thepointofhavingthesestandardsisthatyouknowthepagewilllookmoreorlessthesameinwhateverbrowseryouuse.Ifyoudon’tfollowtherulesyoucan’tbesureitwilllookthesameondifferentbrowsers.

Abasicwebpageconsistsof:

-declaration-head-body

Sowestartwithasimplewebpageasfollows:

<!doctypehtml><html><head><title>Awebpage</title>

</head><body>

Thebodytextgoeshere

</body></html>

ThetypeDeclarationtagThe<!DOCTYPE>declarationisnotanHTMLtag;itisaninstructiontothewebbrowseraboutwhatversionofHTMLthepageiswrittenin.

Italwaysappearsatthetopofthepage.InthisbookwewillbeusingHTML5andthedoctypeforthatis

<!doctypehtml>

Ifyoulookatotherwebpages,youwillcomeacrossothertypedeclarationsuchas:

<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>

whichisthedoctypeforhtml4.01.Asyoucansee,html5hassimplifiedthisentry.

TheHeadtagWithinthe<head>..</head>tagsweplaceelementswhichdon’tnormallydisplayanythingonthewebpage.Thisincludesthetitletag,stylesforthedocument,JavaScript

code,metatags,andothers.

TheBodytagThebodytagiswherethemainbodyofthedocumentisplacedandthisiswhereweputyourtext,graphicsandallthewebpagestructure.Thebodyisplacedafter</head>andfinishesbeforethe</html>.

SomeHTMLtagsHTMLisactuallyXMLwhichisataggedmark-uplanguagewherethetagsinfermeaning.Alltagshaveastartandanendandherearesomeexamples:

<title>……..</title>

<p>………</p>

<div>…….</div>

<td>……….</td>

Asthefollowingshows,thetagconsistsofthetagnamewithoptionalarguments.

<tag_nametag_attributes(optional)>…………</tag_name>

HTMLdefinesthestructureofthedocumentsuchasifitisaheadingorifitisaparagraph.Styles(orCSS)definetheformattingofthepage,likethefonttype,sizeorcolor.UsingthismethodseparatesthestructureofthewebpagefromtheformattingandisthebasicconceptofawebpageusingHTMLandCSS.

HTML5ForanumberofyearswebstandardsusedvariousformsofHTML4.

TheHTML5specificationwasfinallycompletedin2014althoughmanybrowsersalreadyincorporatedelementsofthespecificationsotherewasnorealdelaybeforedeveloperscouldstarttouseit.Now,thelatestbrowserslargelysupportthespecification.

HTML5takesoverfromallthepreviousspecificationandistheonethatshouldbeusedfromnowon.

HTML5incorporatesmanynewfeaturesparticularlyformulti-mediaandgraphicalcontentandaddsanewpagestructureusing“schematicmark-upelements”tomakelayoutseasiertounderstand.

CSS3CSS3isthelatestversionoftheCascadingStyleSheetspecificationandisresponsibleforthepresentationoftheelements.

UsingCSSmeansthatcontentonthewebpagecanbeseparatedfromthepresentationmakingitpossibletochangethestylessothatthesamecontentcanbepresentedwithadifferentlook.

CSS3isnotonesinglespecificationbutismadeupofanumberofmodules.Thereareover50ofthesemoduleseachofwhichareinvariousstatesofstatusandstability.Fromthepointofviewofthewebdeveloperthemajorityofattributesthatyouwillwanttouseareavailableonthemajorityofthelatestwebbrowsers.However,therewillbesomefeaturesthatwillnotworkoncertainbrowsersandtherearesitessuchas:

http://caniuse.com/

whichshowbrowsercompatibility.

http://caniuse.com/

FoldersandFilesandServersWhenyoucreateyourwebpagesyouhavetogivethemfilenamesofcourse.Thereareacoupleofthingsthatyoushouldbeawareofwhenyoudecideonyourfileandfoldernames.

First,thereareessentiallytwotypesofwebserver:LinuxandWindowsbased.ThefileandfoldernamesonLinuxwebserversarecasesensitive,whilewindowsarenotcasesensitive.

Therecommendationsforfilenamesandfoldersinbothtypesofserversare:

nospaceslowercasealphabeticcharacters(a–z)

sodon’tuse“odd”characterslikequotemarks,bracketsandsoon.

ThefileextensionforawebpageshouldbehtmorhtmlYoumaycomeacrossotherfileextensionssuchasphpforthePHPprogramminglanguage,or.aspxforthedotnetprogramminglanguage,butforallourworkwewillbeusinghtmorhtml

Websitescanconsistofaverylargenumberoffilesandfoldersandnormallywecreatefolderstomakelogicalstructures.Asimplewebsitewithonefoldermaylooksomethinglikethefollowing:

Notethatforeachfoldertherewillalwaysbeadefaultpageandthisdefaultpagewillhaveafilenameofoneofthefollowing:

Index.htmlorindex.htmordefault.htmlordefault.htm

Thedefaultpageisthe“home”pageforthatfolderorthefirstpagethatthevisitorgoesto.Inourexampleabove,whenthevisitorentersinhttp://www.sitename.comtheserver“knows”tosendthevisitortoindex.htmleventhoughthevisitordidnotexplicitlyidentifythatintherequestedURL

http://www.sitename.com

ContentManagementSystemsandHTMLContentManagementSystems(CMS)arewebapplicationsthatareusuallydatabasedrivenandwhereyoucreatewebpagesthroughawebadmininterface.SomeexamplesofpopularCMS’sareWordPress,Joomla,andsoon.

TogetthemostoutofaCMSsystemyoudoneedtohaveanunderstandingofHTMLandCSSparticularlyifyouwanttodomorethanjustplacetextandgraphicsonthepages.

CommonerrorsthatbeginnersmakeIhavetaughtHTMLoveranumberofyearstostudentsofvariousstandardsbutthereareanumberofproblemsthatstudentscontinuouslyseemtohave:

-Theydon’trememberthebasicstructureofawebpageandplacethingsinthewronglocation.Forexample,theyplacethewebcontentintotheheadofthepageinsteadofthebodyandsonothingdisplays.

-Theydon’tcloseofftagsproperlyanddon’tusethetoolsintheireditortoseewheretheirmistakesare.Thiscanresultintextpickingupincorrectstylesorlosingthepagestructure.

-Theyarenotpreciseenoughwhentheyenterintheirstyles,missingouta(:)symbolor(“)symbolwhichcausesthestylesnottowork.

Practicehelpstoovercometheseproblems.Also,usingagoodwebeditorhelpsastheyprovidecodehintsanddisplayerrormessagesifsomethingisnotcorrect.

Someusefulwebsites

MicrosoftDreamSparkhttp://www.dreamspark.com/

ThissiteallowsyoutodownloadmanyMicrosoftProductsforfreeifyouareastudentorateacher.Thisisdonebyself-verificationwhereyouusetheemailaddressofthecollegeorschoolwhereyouareregistered.IfyouuseyourstudentorstaffemailaddressyoucandownloadMicrosoftSoftware.

HTMLReferencehttp://www.w3schools.com/html/default.asp

ThissitehasbecomeverypopularandhasanextensiverangeofreferencematerialcoveringHTML,CSSandmanyprogramminglanguagessuchasPHP.

CanIusehttp://caniuse.com/

Ausefulwebsitethatshowswhicheffectscanbeusedonwhichbrowser.

10minuteguideonhtmlhttp://www.w3.org/MarkUp/Guide/

WebDesigncoursehttp://www.homeandlearn.co.uk/wd/WebDesign.html

BeginnersPHPhttp://www.homeandlearn.co.uk/php/php.html

CSSPositioningofDIVshttp://www.barelyfitz.com/screencast/html-training/css/positioning/

Floattutorialhttp://css.maxdesign.com.au/floatutorial/

Wireframingdesignhttp://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

http://www.dreamspark.com/

http://caniuse.com/

http://www.w3.org/MarkUp/Guide/

http://www.homeandlearn.co.uk/wd/WebDesign.html

http://www.homeandlearn.co.uk/php/php.html

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://css.maxdesign.com.au/floatutorial/

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

Websiteon“Toolsandresourcesforwebprofessionals”http://westciv.com/

GoogleDevelopersitehttps://developers.google.com

HTML5Rockshttp://www.html5rocks.com/

http://westciv.com/

https://developers.google.com

http://www.html5rocks.com/

SomeHTMLEditors

BlueGriffonhttp://bluegriffon.org/pages/Download

Afreeeditor

VisualWebDeveloperExpress(FreefromMicrosoft)http://www.asp.net/vwd

ThishasanHTMLandCSSeditorandalsoanumberofotherdevelopmentfeaturesforprogramming.

CoffeeCup(Commercial)http://www.coffeecup.com/free-editor/

Freeversiondoesnothaveftpandotherextras

HTMLeditorwhichhasmanyfeaturessimilartoDreamweaver.

HTMLKit(Commercial,butfreeifyouinstallpreviousversion)http://www.htmlkit.com/

Kompozer(Freetodownload)http://www.kompozer.net/

Codeanywherehttps://codeanywhere.com/

Onlineeditorbuthasnovisualdesigntools

Sublimetexthttp://www.sublimetext.com/

Thistexteditorisfreewithanunlimitedtrialversionbutyouhavetopayfortheversionwithftp.

IthasacolorcodeddisplaywhichisgoodforcodinginhtmlandphpbuthasnofacilitytorunthecodeinawebserverinthewaythatDreamweaverdoes,nordoesithaveanylayoutfacilitieslikeDreamweaver.

WebMatrixMicrosoftfreecodeeditor,goodforPHPbuthasnorealdesigntools.ThelatestversionisWebMatrix3-Itisreallyintendedasaprogrammer’stoolandisnotreallyallthatgoodforpagelayout.

http://bluegriffon.org/pages/Download

http://www.coffeecup.com/free-editor/

http://www.htmlkit.com/

http://www.kompozer.net/

https://codeanywhere.com/

http://www.sublimetext.com/

MicrosoftExpressionWeb(Free)

http://www.microsoft.com/en-us/download/details.aspx?id=36179

ThiseditorwillnotbefurtherdevelopedbyMicrosoft-uptoafewmonthsagoitwasaproductyouhadtopurchasebutnowisfreetodownload.

ApantaStudiohttp://www.aptana.com/

ApantaisanIDEwhichisusedforHTML,CSS,andprogrammingaswell.Itisafreetodownloadapplicationandhasagoodsupportcommunity.

Bracketshttp://brackets.io/

IsanopensourcecodeeditordevelopedbyAdobe.Theeditorhastheabilitytopreviewchangesthatyoumakeinthewebpageasyoumakethem.

http://www.microsoft.com/en-us/download/details.aspx?id=36179

http://brackets.io/

SummaryThischaptergivesanintroductiontowebpagesusingHTML.Youcancreatewebpagesusingatexteditorbuttherearemanycommercialandfreeeditorsthatmakepagedevelopmentmucheasier.Thechapterintroducedthebasicstructureofapageandillustratedtagstructurewhichwillbelookedatinmoredetailinthenextchapter.

2HTMLTags


*Abasicwebpage*LooksatthebasicHTMLtags*Debuggingusingabrowser*SomestandardHTMLtags

ThischapterisanintroductiontomanyofthebasicelementtagsthatareavailableinHTMLandwhichmakeupawebpage.

InthelastchapterwelookedatthewayinwhichanHTMLelementisdefined:

<tag_nametag_attributes(optional)>…………</tag_name>

Notethateachelementconsistsofatagnameenclosedin<>brackets.ItisarequirementofavalidHTMLdocumentthatalltagsareproperlywritten.

TASK1-CreatingFoldersThefirstthingtodoistocreateasetoffolderswhereyoucanstoreallyourfiles.Iwouldsuggestthatyoucreateanewfolderforeachchapter,e.g.chapter01,chapter02andsoon.

Youmaywanttousaflashpendriveasthefilesarequitesmallanditwillmeanyoucanworkontheondifferentcomputers.

TASK2–CreateanewWebPageThefollowingillustratesabasicwebpage:

<!doctypehtml>

<html>

<head>

<metacharset=“utf-8”>

<title>UntitledDocument</title>

</head>

<body>

</body>

</html>

Codefile:02_HTML_Tags/files/basic_html_page_01.html

InDreamweaver,tocreateanewwebpage,selectFile->Newwhichwilllistasetoftemplates.ThesetemplatesarejustlayoutsthatDreamweaverhavekindlycreatedforus.However,wejustwanttostartwithaBlankPage,somakesurethatthepagetypeofHTMLisselectedandalayoutofnone.

YoushouldalsoselectaDocTypeofHTML5.

TheDocTypeissimplyawaytotellthebrowserwhatspecificationthewebpagewillbeusingsothatthebrowserwillbeabletointerpretthetagscorrectly.

Notethatthewebpagecontentgoesinbetweenthebodytags.Onecommonerrorthatisoftenmadeistoinsertthewebcontentsintheheadofthepage.

Notethattheabovepageiscompletelyblankasithasnobodycontent.

HTMLconsistsoftagsdefinedwithastartandendtag.Differenttagsmayhaveattributessuchaswidthandheightforanimage.

TheHeadandBodyElementsofawebpage:

<!doctypehtml>

<head>tag-

<body>tag-

<title>tag-

TASK2-SavingthePageSavethefilewiththename(basic_html_page_01.html)andthe<title>Abasicwebpage</title>.

TASK3-InsertingheadingsNowwemodifyourpagebyaddinginsomeheadingtagsandparagraphtags.

TheHeadingtags<h1>…</h1>isthebiggest<h6>…</h6>isthesmallest

Sowecantryouth1,h2,h3,h4,h5,h6andseehowtheyappearonthepage.

Insertheadingsontoyourpagebetweentheopening<body>andclosing</body>tagssothatitlookssomethinglikethefollowing:

<!doctypehtml>

<html>

<head>


<title>Abasicwebpage</title>

</head>

<body>

<h1>Thisisthemainheadingusingh1</h1>

<p>Thismightbeanintroductiontotherestofthepage.</p>

<h2>Thisisasubheadingusingh2</h2>

<p>Moretexttodescribethesubheading</p>

<h3>Anothersubsubheadingusingh3</h3>

<p>Somemoretextdescribingthesubheading</p>

<h1>Thisanothermainheadingusingh1</h1>

</body>

</html>

Codefile:02_HTML_Tags/files/html_02.html

Viewyourpageinabrowser.IfyouareusingDreamweaver,pressF12todisplaythepageinthebrowser.

TASK4-InsertingandformattingthetextThistaskisanexerciseintakingsometextandformattingitfortheweb.Youwillcopysometextfromatextfileandthenaddin<p>and<h1>tags.Youwillneedtohaveaccesstothebookdownloadfiles.

[1]CreateanewHTML5webpageandsaveitwithafilenameofarticle.htmlintoafoldercalledchapter02.

[2]Changethe<title>ofthewebpageto“GiantSnailFound”

[3]Copyandinsertthetextfromthefile/02_HTML_Tags/files/html_text_1.txtfromthedownloadedfilesforthebookandplacethetextbelowthe<body>tag.

[4]Formatthetextsothattheheadinghas<h1>tagandtheparagraphshave<p>tags

Theparagraphtagisasfollows:

<p>Sometext</p>

Important-Alwaysclosetags,toensurewell-formedHTML.

AllHTMLhasstartandendtagsandallmustbeclosed.

However,therearesometagswhichhavetheclosingtagbuiltinsoforexample

<br/>

isalinebreak.Thisiscalledasingleton.ItiscorrectHTMLbuttheformatisslightlydifferenttoatagsuchas<p>…</p>

Formattheimportedhtmltextusingheadingtagsandparagraphtags.Notethatwhentextisimportedintothecodeview,thetextwilljustwrapwithoutformatting.Youhavetoaddyourtagstomakethepagelookcorrect.

[5]Saveyourfileanddisplayitinabrowser.Youcanseethispageinthefilearticle.html

Codefile:02_HTML_Tags/files/article.html

TASK5-Formattingyourtext-ThestyleattributeHTMLisamark-uplanguagewhichconsistsoftagsthatdefinethestructureofthedocument.Styles(whichareoftenplacedinseparatestylesheets)defineformattingattributesoftags,suchascolororfontsize.Wewillquicklyshowwhatastyleisbutwewilllookatitinmoredetaillateron.

[1]Inarticle.htmlmodifythecolor,font-familyandfont-sizeofanh1tagbyaddinginsomestyleattributes.

Example:

<h1style=“color:blue;font-family:Verdana,Arial;font-size:20pt”>FloridaexperiencesGiantSnailinfestation</h1>

Modifyan<h1>tagasshownaboveinthecodeview.

Theabove<h1>taghasbeenmodifiedtoaddattributetags.Thismethodofaddingstylesiscalled“InLineStyles”.Lateronwewillseethatwecanaddstylestothetopofthepagewhichisabettermethod.

Thestructureofanin-linestyleis:

style=

andthenthereisthenameofthestyle,followedbythevalue.

Notethatwhenyoudefineafontface,thebrowserwillonlydisplayitifitisinstalledonthatcomputer.NormallywerestrictourselvestoArial,Helvetica,Verdana,TimesNewRomanandCourieralthoughtherearewaysofaddingotherfontswhichwewillseeinalaterchapter.

Youcanseethispageinthefilearticle_02.html

Codefile:02_HTML_Tags/files/article_02.html

TASK6-Thebold<strong>anditalic<i>tagsInarticle.htmltryoutboldanditalictags.

Tomaketextbold,use<strong>…..</strong>

Tomaketextitalic,use<i>…</i>

TASK7-Copyingfilesintofoldersand-insertinganimageInthistaskwewillmakeuseofanimage.

Firstcreateanewfoldercalled“images”insidethefolderwherethefilearticle.htmlislocated,whichyouhavecalledchapter02.

Copytheimagesnail.jpgimageintothe“images”folder.Youwillhavetohaveaccesstothebookdownloadfiles.

TASK8-Theimagetag[1]Inarticle.html,addinthesnail.jpgimageunderthe<h1>mainheading

Thehtmltagforanimageis:

<imgsrc=“image_name.jpg”title=“imagename”alt=“imagename”/>

Soinserttheimagefile–“images/snail.jpg”Thisassumesthattheimageisintheimagesfolder.

<imgsrc=“images/snail.jpg”title=“Asnail”alt=“Asnail”/>

Theimagetagstartswithimgandthenithasanumberofattributes.src,titlewidth,height,altandsoon.

Incodeview,youcantypeintheabovecode.

altandtitleattributes

Notetheextraattributesofaltandtitle.

altmeans“alternative”andthisisusedbyaudiobrowsersforpeoplewhohavepoorvisibility.Thealtattributetextisreadoutbytheaudiobrowser.

titleisatooltiptextwherethetextisdisplayedasyouhoverovertheimage.

NotethatifyouareusinganeditorsuchasDreamweaver,itwillprobablyhavetheabilitytodraganddropimagesontothepagewhereitautomaticallycreatesthecodeforyou.

Youcanseethisinthefilearticle_03.html


TASK9-BordersandaligningimagesAmendtheimagetoaddaborder.

Youcanaddabordertoanimagebyaddingtheborderattributetotheimageelementasfollows:

<divalign=“center”><imgsrc=“images/snail.jpg”title=“Asnail”alt=“Asnail”border=”5”/></div>



TASK10-AddingaHorizontallineHorizontallinesaresometimesusedtoseparatepartsofapage.

Thebasicformofahorizontallineis:<hr/>

Orwemightdo:

<hrsize=“5”width=“100%”/>

Placeahorizontallineatthebottomofyourpageasshowninthefilearticle_05.html.


TASK11-OtherformattingIhaveaddedafewextraformatting,someofwhichwehavenotcoveredyet.

FortheheadingIhaveused:

style=”color:blue;font-family:Verdana,Arial;font-size:20pt;background-color:#D0CDCD;text-align:center;”

Thisgivesabackgroundcoloroflightgreytotheheading.

Ihavealsousedadivtocenterablock:

<divstyle=“width:700px;margin-left:auto;margin-right:auto;”>

…..

</div>

Andadded<divalign=“center”>aroundtheimagetoalignthecontent.

Notethedifferencebetweenalign=centerfortheimageandthecenteringthewholediv

above.

WehavenotlookedatwhatadivisyetbutitisactuallyacontainerforourHTMLcodewhichwecanusetopositiononthepage.Wewillseelaterthatdivsareusedtocontrolthelayoutofpagesandgivethestructure.



TASK12-LinkstootherpagesInthistaskwewillcreatehypertextlinkstootherwebpages.

Weusetheanchorelement<a>todefineahyperlinktomovefromonepagetoanother.The<a>tagusesthehrefattributewhichisthehyperlinkreferencetotherequiredpagewhichcaneitherbethefullurlofthepageifitisnotonthesameserver,oritcanbearelativeurl.

Linkstowebpagesonotherwebsites:

<ahref=“http://www.paulvgibbs.com”>Thisisalinktomywebsite</a>

Orwecanaddatargetattributeasfollows:

<ahref=“http://www.paulvgibbs.com”target=“_blank”>Thisisalinktomywebsite</a>

Linkstowebpagesonthecurrentwebsite:

<ahref=“page1.html”>Thisisalinktoapageonthissite</a>

YoucandothiseithertypingthecodemanuallyorifyouareusingDreamweaveryoucanhighlightthetextandpointtothefile.

NOTEthatyoucanlinkfromotherthingsotherthantext.Soyoucanhaveahyperlinkaroundanimageaswell.

Ifyoutryplacingthesnail.jpgimageonyourpage,youcancreatealinkarounditinthesameway:

<ahref=”http://www.paulvgibbs.com”><imgscr=”snail.jpg”></a>

Inourpreviouswebpagearticle.htmlwecanaddalinkatthebottomreferencinganexternalwebsite.

<p>Forinformationonkeepingsnailsaspets,referto

<ahref=“http://www.petsnails.co.uk”>http://www.petsnails.co.uk</a>


http://www.petsnails.co.uk


TASK13-AnchorLinkstoplacesonthesamepageSometimesyouwanttohaveahyperlinktoanotherpointonthesamepage.Thisisdonebyanchorlinks.

Atthepointwhereyouwanttomovetointhedocumentputsomethinglike:

<aname=”top”></a>

Thisistheanchortag.

Toreferencethetagyouputahyperlinkusingthe#characterasfollows:

<ahref=”#top”>Backtotop</a>



TASK14-EmaillinksAddanemaillinkontoyourpagewithsomeappropriatetext:

<ahref=“mailto:[email protected]”>Emailmeandgivefeedback</a>



TASK15-HTMLSpecialCharactersCertaincharactersarenotavailableonanormalkeyboard.Thesearesuchthingsasmathematicalsymbols,Greeksymbolsandotherspecialcharacterssuchascopyrightandregistersymbols.

HTMLcharactercodesarelistedhere:

http://www.ascii.cl/htmlcodes.htm

YoucaneithertypeintheHTMLnumberortheHTMLname.Soforcopyrightsymbolyoucaneithertypein©or©

InDreamweaverselectInsert->Html->SpecialCharacters


TASK16-ListsandbulletsWelookatanexampleoflistsinournextwebtutorialpagebutwecanshowthetechniquehere.

http://www.ascii.cl/htmlcodes.htm

[1]Createanewwebpagewithafilenameoflists.html

[2]Tryouttheseexamplesoflists,eithercreatingthembyhandorusingDreamweaverorothereditor.

AnorderedLists:

<ol>

<li>firstitem</li>

<li>seconditem</li>

<li>thirditem</li>

</ol>

Anunorderedlists

<ul>

<li>firstitem</li>

<li>seconditem</li>

<li>thirditem</li>

</ul>

Youcanchangethetypeofbulletinthelistusingstyles:

<ul>

<listyle=“list-style-type:circle”>firstitem</li>

<listyle=“list-style-type:circle”>seconditem</li>

<listyle=“list-style-type:circle”>thirditem</li>

</ul>

Youcanseethisinthefilelists.html

Codefile:02_HTML_Tags/files/lists.html

TASK17-ColorsinhtmlColorsareidentifiedeitherbyhexadecimal(hex)valuesorbycolornames.Notallcolorshavecolornamessoyouwillhavetogetusetohexadecimalvalues.

HexvaluesareintheorderRed,GreenBlueandarerepresentedbya#symbolfollowedbythreesetsofnumbers.Ahexnumberistobase16.

#XXYYZZXXisthehexvalueforRed,YYisthehexvalueforGreenandzzisthehexvalueforblue.

So#000000isblack

#ffffffiswhite

#ff0000isred

Eachcolorcanhave256variationssotheredhas256variations,asdoesgreenandblue.Sothetotalnumberofcolorspossibleinhtmlisover16millioncombinations.

Intheearlydaysoftheweb,therewastheconceptof“websafe”colorswhichwere256colorsthatcouldberepresented.Thelimitationwasbecausegraphicsandvideocardscouldnotdisplaymorethan256colors.Thetermisnotreallyrelevantnowalthoughyoumaycomeacrossthelimitedpaletteofwebsafecolors.

Colornames:

Weblink:http://html-color-codes.info

HTMLeditorsusuallyhaveawaytoselectthecorrectcolorcodeandinDreamweaverthatisdoneusingthepagepropertieswindows.

TASK18-Pagevalidationhttp://validator.w3.org/

Usetheabovelinktovalidateyourhtmlcode.

YoucanalsovalidatepageswithinDreamweaver

FirstmakesureyourpageissavedtoyourPC.

SelectFile->Validate->Markup

MakesurethattheValidationtabisdisplayed.

ClickontheGreenarrowtoselectthecurrentdocumentorthelocalsite.

AnyHTMLerrorswillbedisplayedontheValidationTab.

IfyoudisplayapageinyourbrowseranddeliberatelycauseanHTMLerrorsuchasremovinga</p>thenthisshouldgetflaggedasanerror.

http://html-color-codes.info

http://validator.w3.org/

DebugginginthebrowserHowdoyoudebugaproblemwithawebpageifthelayoutdoesnotappearinthewayyouwantittoorastyleisnotcorrect?Theseissuesarequitedifficulttodobutnowtherearein-builtdebuggingfacilitiesinbrowsersthathelp.

UsingtheinbuiltdevelopertoolsinwebbrowsersMostmodernwebbrowsershaveadeveloper’stoolsystemwhichisnormallyaccessedbypressingF12.

InternetExplorer,FirefoxandGoogleChromeallhavethisbuiltintothewebbrowser,howevereachareslightlydifferentandhaveslightlydifferentfeatures.

SoinGoogleChrome,displayawebpageinthebrowserandpressF12.

*Makesurethatthe‘Elements’tagisselected,

*Ifyouselectaparticularelementonthewebpageandrightclickandthenclick“InspectElement”,itwillshowthedetailsofthatparticularelement.Ontherighthandsideofthepageisthestylesforthatelement.

*Notethatsomestylesmaybecrossedout.

Stylescanbequitecomplicatedandconsistofinheritedstyles,sothisdisplayisanattempttoshowwhatstylesareapplicabletoaparticularelementtakingintoaccountotherstyledefinitionsinthewebpage.

Ifanelementisnotdisplayingaparticularstyle,thenthismaybethewaythatyoucanseeifthestyleisavailableforthatelement.Youcanalsoeditandaddstylesonthepagebyclickonthe(+)newelementstylerule.However,thesechangeswillnotbesavedtothepage.

EmulatingdifferentdevicesusingGoogleChromeGooglechromecanbeusedtodisplaythewebpageusingemulation.FirstpressF12andthenpresstheEscapekeywhichdisplaystheEmulationmode.InthisscreenwecanchooseaDevicemodel.

AninterestingpointthatF12showsisthatyoucanhaveHTMLwhichisincorrectbutthebrowserautomaticallycorrectsit.Sowiththefollowingtableexamplethereisa</td>missing.IfyoushowthisinthebrowserandpressF12,youwillseethebrowserautomaticallyaddsinthe</td>tagforyousothatthetableisnotbroken.

<table>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4

</tr>

</table>

Weblink:https://developer.chrome.com/devtools/index

Inparticularseehttps://developer.chrome.com/devtools/docs/networkwhichdescribesthemeaningofthenetworkcolorbardisplays.

FirefoxdebuggerFirebugisaFirefoxextensionwhichcanbefoundhere:

Weblink:https://addons.mozilla.org/en-US/firefox/addon/firebug/

ItprovidesverysimilarfacilitiestothosefoundonGoogleChromeallowingyoutoinspectanddebugandchangevalues.

XHTMLvalidatethewebpageYoucanvalidateawebpageathttp://validator.w3.org/whichwillindicatepageerrorsintheHTMLsuchasincorrectHTMLsyntax,missingargumentsandsoon.

*ValidatebyURI*Validatebyfileupload*Validatebydirectinput

Validationistheprocessofverifyingifthewebpageactuallyfollowstherulesofthemark-uplanguage.SoitwillcheckifitmatchestherequiredHTMLsyntax.Whenyousubmitthecodetothevalidator,itisabletounderstandwhatversionofHTMLitisusingandhenceprovidetheappropriatetests.

UseDreamweavertocheckthedocumentMostwebeditorsenvironmentslikeDreamweaverorCoffeeCupwillhavesomewaytocheckthatyouhavethecorrectnumberoftagsandhaveclosedtagscorrectly.

Webeditorsdothisindifferentways,somemayhighlightitasyoutype.

Dreamweaverhasawaytovalidatethemarkup–Ifyoucreateyourpageandthenin

https://developer.chrome.com/devtools/index

https://developer.chrome.com/devtools/docs/

https://addons.mozilla.org/en-US/firefox/addon/firebug/

http://validator.w3.org/

CodeviewselectFile->Validate->MarkUp

OrpressShift-F6willcheckyourhtmlcode.

Youcantestthisbyenteringatagwithoutaclosingtag.Soifyouenter<div>andthenpressShift-F6itshoulddisplaythelocationoftheerror.

GoogleChromePageSpeedutilityAusefulfeatureofGoogleChromeisthePageSpeedutility.

LoadupawebpageinGoogleChromeandClickon‘PageSpeed’tag.

ClickonAnalyseandGooglewillreturnalistofsuggestionstoimprovethepageloadingtimes.

SomeStandardHTMLTagsThefollowingisalistofsomeofthecommonHTMLtagsthatwhichwehaveusedsofarinthischapter:

<!doctypehtml>

HTML5Doctypedeclaration.NotactuallyanHTMLtagbutincludedforcompleteness.

<title>………</title> Definestitleofthewebpage

<h1>,<h2>.<h3>,<h4>.<h5>.<h6> Standardheadingtags

<p>…</p> Paragraphtag

<br/> Alinebreak

<strong>….</strong> Boldtext

<i>…..</i> Italics

<ahref=“url”>linktext</a> Links

<imgsrc=“pic_mountain.jpg”alt=“MountainView”/> Images

<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

Un-orderedlist

<ol>

<li>firstvalue</li>

<li>secondvalue</li>

<li>thirdvalue</li>

</ol>

Orderedlist

SummaryThischapterintroducedmanystandardHTMLtagsthatyouwilluseinawebpage.Itusedanumberofwebexamplestoshowthesework.Thechapterhasintroducedsomeconceptsofstylesbutonlybriefly.Styleswillbefurtherexplainedinthenextchapter.

3ImagesandTables


*Cratingatableexample.*Tableheadings*Atableofimages.

Tablesareanimportantpartofwebdesign.TableswereusedforgeneralpagelayoutbutthathasbeentakenoverbyDIVsandstylesheets.

However,tablesarestillverymuchusedwherethereisarequirementfordisplayingdatainrowsandcolumns.WithCSS3wecanaddinstylesthatgreatlyimprovethelookoftables.

ATableexample

TASK1-Creatingatable

[1]Createanewwebpagecalledtable_01.htmlinafoldercalledchapter03

[2]CreateatableusingthefollowingHTMLcode:

<tablewidth=“200”border=“1”>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

[2]IfyouareusingDreamweaveryoucancreateatableinDESGINviewbyInsert->Tables.ThiswilldisplayadialogboxwhichifyoupressOKwillcreateatableof3columnsby3rowssimilartotheabove.

Fromtheabovewecanseethat<tr>isusedtodefineROWsand<td>isusedtodefineCOLUMNs.

The isjustanotbreakingspacetopaditout.

Notethatsettingborder=”1”helpsustoseethestructureofthetablewhichwemaysettoborder=”0”oncethetablehasbeencompleted.

[3]Trycreatingothertableswithmorerowsorcolumnsandchangetheborderwidthtoseewhathappens.

[4]Trychangingthewidthofthetableto100%sothatitextendsoverthefullwidthofthepage.

[5]Trymergingcellstogetherusingthecolspanattributeasfollows:

<tr>

<tdcolspan=“3”> </td>

</tr>

Inthisexamplewearemergingallthreecolumns.

TableHeadingsTableheadings<th>isthefirstrowofatableandcontainthetitlesofthecolumns.Tableheadingsareoptionalandareformattedtobeboldandcentredbydefault.

<table><tr><th>Column1heading</th><th>Column2heading</th><th>Column3heading</th></tr>

Tableheadingsgiveawayofapplyingadifferentstyletothefirstrowofatable.

Youcanseeanexampleoftableheadingsandabasictablelayoutinthefilehtml_01.html

Codefile:03_Images_and_Tables/files/table_01.html

SimpleTableExerciseThisexerciseistocreateatablethatlookslikethefollowing:

Comparisonfrom1999to2014

1999 2014

PentiumIII600MHzprocessor Inteli52.4GHzProcessor

128MbyteRam 8GbyteRam

15GbyteHardDrive 500GbyteHardDrive

3.5inchdiscdrive(1.4Mbyte)

CD-Romdrive DVDRead/Writer

[1]Makeatablewith7rowsby2columns.

[2]MergethetoprowtogetherusingcolspanoruseDreamweavermergetablerowfacility.

[3]Replacethetdforthetoptworowbythwhichautomaticallycentresandboldsthetext.IfyouareusingDreamweaver,thetoprowmayalreadybesetasthdependingonyoursettings.

[4]Setthewidthofthetableto800pxasfollows:

<tablewidth=”800px”>

andsetthetwoelementwidthsto400pxeach:

<thwidth=”400px”></th><thwidth=”400px”></th>

[5]Entersometextintothefields-thereissomesampletextprovidedbutyoucanputinanytextyouwant.

Thefollowingisthecompletehtmlforthetable:

<tablewidth=”800px”>

<trbgcolor=”#CCCCCC”>

<thcolspan=“2”>Comparisonfrom1999to2014</th>

</tr>

<tr>

<thwidth=“400px”>1999</th>

<thwidth=“400px”>2014</th>

</tr>

<tr>

<td>PentiumIII600MHzprocessor</td>

<td>Inteli52.4GHzProcessor</td>

</tr>

<tr>

<td>128MbyteRam</td>

<td>8GbyteRam</p></td>

</tr>

<tr>

<td>15GbyteHardDrive</td>

<td>500GbyteHardDrive</td>

</tr>

<tr>

<td>3.5inchdiscdrive(1.4Mbyte)</td>

<td></td>

</tr>

<tr>

<td>CD-Romdrive</td>

<td>DVDRead/Writer</td>

</tr>

</table>

Codefile:03_Images_and_Tables/files/table_02.html

AGalleryofPicturesThisisanexerciseincreatingagalleryofimagesusingastructureofatable.

TASK2-CreatinganewimagesfolderThisexercisewillbeinafoldercalledtutorial03whichyoumayhavealreadycreated.YouwillalsoneedafolderINSIDEthisfoldercalledimages

TASK3-AddingImagesCopysiximagesofyourchoicefromthechapter03imagesfolderandplacethemintoyournewimagesfolder.Renamethemifyouwishinordertomakethemmoreeasilyidentifiable.

TASK4-SetupthePageCreateanewwebpagecalledgallery.htmlandaddatitletothe<title>tag.

<title>ImageGallery</title>

Savethepage.

TASK5-AddthetableNowaddthetabletoyourpage.

InDreamweaver,youcaninsertatablebyInsert->TableSettheborderthicknessto0andselecttheheaderasnone.Youneedatableof7rowsby5columns.

Refertothefilegallery_base_table.txtwhichshowsthebasictableifyouwish.

Codefile:03_Images_and_Tables/files/gallery_base_table.txt

TASK6–Thetable

Thetoprowiswheretheheadingshouldgo.Mergetherowintoonerowandaddacentredtitleasfollows:

<h1align=“center”>FlowerGallery</h1>

TASK7-InsertyourimagesintothetableInsertandaddyourchosengalleryimagestothe3rdand5thRows,inthe1st,3rdand5thcolumns.

TheHTMLwilllooksomethinglikethis.Foreachimageyouwillwanttoenterthealttextandthetitletext.

<tr><td><imgsrc=“images/file_name.jpg”alt=”?”title=”?”/></td><td> </td><td><imgsrc=“images/file_name.jpg”alt=”?”title=”?”/></td><td> </td><td><imgsrc=“images/file_name.jpg”alt=”?”title=”?”/></td></tr>

Youmaywanttochangethewidthoftheimages.Tryaddingwidth=”200”toeachoftheimages.Ifyouleaveoutthewidth,theimagewillautomaticallybeadjustedtomaintainthecorrectaspectratio.

<imgsrc=“images/file_name.jpg”alt=”?”title=”?”width=”200”/>

NOTEthatyoucansetthepropertiesofanimageinDreamweaver,ifyouaredisplayingthePropertieswindowatthebottomofDreamweaver.

TASK8-AdddescriptionstoyourimagesAddanimagedescriptionforeachoftheimagesonthe4thandthe6throws.

<tr><td><p>YourDescription</p></td><td> </td><td><p>YourDescription</p></td><td> </td><td><p>YourDescription</p></td></tr>

TASK9-Addahorizontallineorrule<hr/>Inthesecondfrombottomrow,mergetherowusingcolspanandaddahorizontalline.

<tr>

<tdcolspan=“5”><hr/></td></tr>

TASK10–CompletetheformattingofyourgallerypageFormatandcentrealigntheimagesandtheimagedescriptions.

<tr><td><divalign=“center”><imgsrc=“images/file_name.jpg”alt=”?”title=”?”></div></td><td> </td><td><divalign=“center”><imgsrc=“imagesfile_name.jpg”alt=”?”title=”?”></div></td><td> </td><td><divalign=“center”><imgsrc=“images/file_name.jpg”alt=”?”title=”?”></div></td></tr>

<tr><td><divalign=“center”>YourDescription</p></div></td><td> </td><td><divalign=“center”>YourDescription</p></div></td><td> </td><td><divalign=“center”>YourDescription</p></div></td></tr>

TASK11CenterthetableYoumayalsowanttosetthewidthofthetableto65%andcentrethetableusingalign=”center”

<tablealign=”center”border=”0”width=”65%”>

TASK12–AddintheemaillinkAddandemaillinkandcopyrightinformation(<p>©Allrightsreserved.</p>)tothebottomrowandcentreandalign.Youwillhavetomergethebottomrowtogethertomakeonelongrow.

TASK13–TestyourpagesTestyourpagesinawebbrowser.

Codefile:03_Images_and_Tables/files/gallery.html

SummaryThischapterillustratesaHTMLtables,theirstructureandlayout.HTMLtablesprovideareallygoodwaytoshowcertaintypesofdataandarerelativelyeasytoconstruct.

4StyleandStyleSheets


*Inlinestyles.*Stylesinthehead.*Cascadingandinheritance.*ClassesandIDs*Externalstylesheets.

WehavementionedbeforethatHTMLdefinesthestructureofthewebpage,whereasstylesdefinetheformattingofthewebpage.Thisisabasicconceptofwebpageswherethereisseparationbetweenthelayoutandformat.

Upuntilnowwehaveusedsomestylesbecauseitisdifficulttoillustrateparticularpointswithoutmentioningthem.Also,ifyouareusingDreamweaveryouwillfindthatitdoessometimesgeneratestylesforyousoyoumayhaveseenthemasyouworkwithawebpage.

Astyleisa“rule”thatdefinesparticularattributes.ThelatestdefinitionisCSS3whichincludesanumberofnewfeaturessuchasroundedcorners,animation,fadingandtransparencywhichcanimprovetheappearanceofyourdesign.

Stylescanbe:

*inlinewhichareapplieddirectlytotheelementitself.*instyledefinitionslocatedintheheadofthewebpage.*inaseparatestylesheetreferencedinthewebpage.

InlinestylesInlinestylesisawayofquicklyapplyingstylestoanelementwithoutgettinginvolvedincreatingnamedstyles.Forexample:

<pstyle=“border:thin#000solid;padding:5px;border-radius:10px;”>Thisisanexampleofaboxaroundaparagraph</p>

Normallystylesaregivenclassesandarenamedwhichwewillshowlater.

Youcanapplystyleslikethistoanyhtmlelement,suchash1,h2,p,imgandsoon.

Someexamplesofinlinestyles

<h1style=“font-size:36pt;”>36pointheading</h1>

<pstyle=“font-size:16pt;”>16pointparagraphTest</p>

<pstyle=“background-color:green;font-size:2em;”>Green2emsizeparagraph.</p>

PlacingstylesintheheadofthedocumentThefollowingillustrateshowastyleisplacedintotheheadofawebpage.

<!DOCTYPEHTML>

<html>

<head>


<title>Styleintheheadofadocument</title>

<styletype=“text/css”>

h1{

color:#2E7DD0;

font-size:36px;

}

p

{

padding-left:20px;

padding-right:20px;

text-align:justify;

font-family:Arial;

font-size:16px;

}

</style>

</head>

<body>

<h1>Amainheading</h1>

<p>Thisisanexampleofaparagraph</p>

<p>Thisisanotherexampleofaparagraph</p>

<p>Thisisyetanotherexampleofaparagraph</p>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/01_head01.html

WithCSS,youcansetmanypropertiesonce,eitherintheheadsectionofeachHTMLdocumentorinaremotefile,andhaveitcontroleveryinstanceofthattagonyourpage.

Notethatstylesareplacedbetweenthetags<styletype=“text/css”>and</style>

Theexampleaboveappliesstylestoanh1tagandaptagandwhenyoudisplaythisinyourbrowseryoucanseetheresult.

StylesyntaxWecandefinestylesyntaxinthefollowingway:

p{color:red;text-align:center;}

pistheSelectorinthisexample.Sowearecreatinga‘rule’totargetspecificHTMLelementsonthewebpagewhichinthisexampleareptheelements.

Inthebracketsarethedeclarationswhichconsistofapropertyandavalue.

Sointhisexample:

PropertyiscolorValueisred

Propertyistext-alignValueiscenter

Theyarealwaysstructuredinthisform:

property:value;property:value;andsoon.

sothegeneralformofastyleis

selector{property:value;property:value;}

Notehowthestylesaredefinedintheheadofthedocumentusing:

<styletype=”text/css”>……..</style>

CreatingstyleswithDreamweaverCreatingstylescanbedifficultifyouhavetoentertheminbyhandasitcanbeeasytomistypeastyle.

Dreamweaverdoeshaveastyledesignerwhichcanhelpyouinthis.

[1]OntherighthandsideofDreamweaver,atthetopofthetabgroupisasetoftabs.ClickontheCSSDesignertab.

[2]AddaCSSSourcebyclickingonthe+symbolandselect“DefineinPage”.

[3]IntheSelectorssectionclickonthe+symbolandentertheselectorrequired.

[4]Forexample,typeinh1andtheninthepropertiessection,youcanchoosedifferentstyles.(Makesurethat“showset”hasbeenticked).

CSS-CascadingStyleSheetsCascadingStyleSheet(CSS)arestatements(alsoknownasrules)thatspecifyhowthecontentofanelementwillappear.

Cascadinginthename“CascadingStyleSheets”refertothewayinwhichruletakesprecedenceoveranother.

1.Laterpropertiesoverrideearlierproperties

2.Morespecificselectorsoverridelessspecificselectors

3.Specifiedpropertiesoverrideinheritedproperties

CSScanbethoughtofasapriorityschemewhichdetermineswhichstylewillapplywhenthereismorethanoneruleforaparticularelement.

WebpagescanhavemultiplestylesheetswithstylesapplyingtothesameelementanditisthisprioritysystemthatworksoutwhichspecificstylesheetruleappliestowhichpieceofHTML.

Therulecascadesdownfromthemoregeneralruletothespecificrule.Themostspecificruleischosen.Soyoucouldhaveanenclosingdivwithfonttype,andparagraphswithinthedivwithdifferentfonttypesanditwillbethemorespecificparagraphrulethatwouldbechosen.

Thefollowingillustratesthis.<p>willbeat200%not100%becauseitismorespecificwhilethebodytagismoregeneral.

<!DOCTYPEhtml>

<head>

<metacontent=“text/html;charset=ISO-8859-1”http-equiv=“content-type”>

<title>Anexamplewebpage</title>


body{

font-size:100%;

}

p{

font-size:200%;

}

</style>

</head>

<body>

<p>Thisisanexampleofaparagraphtext</p>

<br>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/cascading_styles_example1.html

Theaboveisillustratedinthefilecascding_styles_example1.html.

Afurtherexampleisshownincascading_styles_example2.htmlfile.

Sotheadvantagewiththismethodisthatyoucouldhaveamainstylesheetandthenhaveaseparatestylesheetwithstylesthatoverridessomeofthosestyles.Youcancreateasetofstylesthatdefinethegenericcharacteristicsofyourpageandthenaddinmorespecificstylessosimplifyingyourstylesheets.

InheritanceinStylesInheritanceiswheresomestylepropertiesareinheritedbytheirchildelements.

Sofont-familyinthebodystylemeansthatallchildelementsinheritthisproperty.Thismeansthatyoudon’thavetoincludethefontfamilyinallotherstylesmakingthestylesheetmuchsimpler.

However,notallelementsareinheritedsuchasborderproperties.Ifborderpropertieswereinheritedtheneveryelementincludingthepelementswouldhaveaborderaroundthemmakingthepageverymessy.

Inthefollowingstyleexamplealltexttakesthefontfamilyasdefinedinthebodystylewhichshowsthatfontfamilystylesareinherited.However,theborderstyleisonlyappliedtothewrapperandnottotheh1andpelements.

<!DOCTYPEHTML>

<html>

<head>


<title>Inheritanceinstyles</title>


body{

font-family:Verdana;

color:#666666;

}

.wrapper{

border:1pxsolid#ff0000;

background-color:#eeeeee;

}

</style>

</head>

<body>

<divclass=”wrapper”>

<h1>Maintitle</h1>

<p>Aparagraph</p>

<p>Anotherparagraph</p>

</div>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/inheritance.html

NOTE:Youcanforceapropertytoinheritfromitsparentbyplacingthewordinheritaftertheproperty.

TASK1–PlacingstylesintheheadofthewebpageAsmentionedpreviously,stylesareplacedintheheadofthedocumentwithin:

<styletext=”text/css”>

––––—</style>Wewilldoacoupleofexamplesshowingsomebasicprinciples.

Createanewwebpagecalledhead01.htmlasfollows.Itshouldhaveaparagraphwith<p></p>tagsandusethepstyleintheheadofthedocument.Itshouldalsohave<h1>tagwithstyle.

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”>



h1{

color:#2E7DD0;

font-size:36px;

}

p

{

padding-left:20px;

padding-right:20px;

text-align:justify;

font-family:Arial;

font-size:16px;

}

</style>

</head>

<body>





</body>

</html>


Notethatallparagraphsnowhavethesamestyle.

Modifythisfurthertoaddinabodystyle:

<!DOCTYPEHTML>

<html>

<head>




body{

font-family:Arial;

font-size:16px;

}

h1{

color:#2E7DD0;

font-size:36px;

}

p

{

padding-left:20px;

padding-right:20px;

text-align:justify;

}

</style>

</head>

<body>





</body>

</html>


Notethatthefontfamilyandthefontsizehavebeenplacedintothebodystyle.Thebodystylethenbecomeswhereyouplacethedefaultstylesforthepage.

TASK2-CreatingyourownstylesNamingyourownclassofcodeisreallyquiteeasy.Supposeyouwanttohaveaspecialstyletohighlightaparagraph.Todothiswecreateaclasswhichisdefinedusingthedotnotationbeforethenameofyourstyle.

Inthefollowingexampleourclassisdefinedusing.highlight

Createanewwebpagecalledclass_01.htmlasfollows:

<!doctypehtml>

<html>

<head>


<title>Exampleofaclassstyle</title>

</head>


body{

font-family:Arial,Verdana;

font-size:16px;

}

.highlight{

color:#D02210;

font-weight:bold;

border:thinsolid#000000;

padding:10px;

}

</style>

<body>

<p>Someparagraphtext</p>

<pclass=“highlight”>Anotherparagraphtext</p>

<p>Yetanotherparagraphtext</p>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/class_01.html

TASK3-CreatingastyleforponlyTheaboveexampleshowshowtocreateaclassthatcanbeappliedtoanyelement.

However,wemaywantastylethatcanonlybeusedforaparticularselectorsuchasp.

Supposeyouwanttohaveaspecialstylewithasmallerfontandlesspadding.Thisisshownintheexampleclass_02.html

<!DOCTYPEHTML>

<html>

<head>


<title>Exampleofaclassstyleforp</title>


<!—

p{

padding-left:20px;

padding-right:20px;

text-align:left;

font-family:Arial;

font-size:16px;

}

p.smallerpara{

padding-left:3px;

padding-right:3px;

text-align:left;

font-size:12px;

}

—>

</style>

</head>

<body>

<h1>Thisisaheading</h1>


<pclass=“smallerpara”>Thisisanexampleofaparagraph</p>


</body>

Codefile:04_Styles_and_Stylesheets/files/class_02.html

Herewehavedefinedastyleofp.smallerpara

Notethatstylesthataredefinedinthepelementareinheritedtothoseinthep.smallerparaelement.Sop.smallerparahasthesamefontfamilyeventhoughp.smallerparadoesnotdefineit.

Alsonotethatthesmallerparaclasscanonlybeappliedtopelements.

CSSidandClassSofarwehavesetstylesforHTMLelements.

WecanalsocreateourownSelectorswhichcanbeidorclass.

Wehaveseenhowtodefineaclassselectorandtheycanbeusedasmanytimesasyoulikeonthepage.

Theidselectorisusedonceforauniqueelementandisdefinedusingthe#character.Anidnameisusedonlyonceonawebpagewhereasaclassselectorisusedtosetthestyleformanyitemsonawebpage.Idselectorsprovideforinheritancewhileclassselectorsdonothaveinheritance.

Thefollowingpagegivesanexplanationofthedifferences:

#wrapper{padding-left:20px;padding-right:20px;}

theclassselectorisusedformanyelementsandisdefinedusingthe.character(afullstop)

.bluepara{color:blue;}

TASK4-Anexampleofaselectorid

<!doctypehtml>

<html>

<head>




#wrapper{

padding-left:20px;padding-right:20px;

}

#wrapperp{

color:green;

}

</style>

</head>

<body>

<divid=“wrapper”>Thisisanexampleofid<p>Aparagraph</p></div>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/selector_01.html

Notethewaythatwecancontroltheelementswiththeidusingthesyntaxof#wrapperp

TASK5-Anexampleofaselectorclass

<!doctypehtml>

<html>

<head>




.bluepara{

color:blue;

}

</style>

</head>

<body>


<pclass=“bluepara”>Thisisanexampleofablueparagraph</p>

</body>

</html>

Codefile:04_Styles_and_Stylesheets/files/selector_02.html

SomenotesaboutFontSizesShouldIusepixels,points,emsorsomethingelseforfontsizes?

FontsizescanbePoints(pt),Picas(pc),Pixels(px),Ems(em)orPercent(%)

Points(pt)andPicas(pc):PointsandPicasaretraditionallyusedinprintmedia(anythingthatistobeprintedonpaper,etc.).Onepointisequalto1/72ofaninch.PointsandPicasaremuchlikepixels,inthattheyarefixed-sizeunitsandcannotscaleinsize.Picaisanotherprintsizeandis1/6ofaninch.Avoidusingthesesizesbecausemonitorsarenotalwaysabletoaccuratelysetthesecorrectly.Examplesare:

p{font-size:10pt;}p{font-size:10pc;}

Pixels(px):Pixelsarefixed-sizeunitsthatareusedinscreenmedia(i.e.tobereadonthecomputerscreen).Onepixelisequaltoonedotonthecomputerscreen(thesmallestdivisionofyourscreen’sresolution).Manywebdesignersusepixelunitsinwebdocumentsinordertoproduceapixel-perfectrepresentationoftheirsiteasitisrenderedinthebrowser.Oneproblemwiththepixelunitisthatitdoesnotscaleupwardforvisually-impairedreadersordownwardtofitmobiledevices.Anexampleis:

p{font-size:10px;}

“Ems”(em):The“em”isascalableunitthatisusedinwebdocumentmedia.Anemisequaltothecurrentfont-size,forinstance,ifthefont-sizeofthedocumentis12pt,1emisequalto12pt.Infact1emisthehightoftheletter“M”.Emsarescalableinnature,so2emwouldequal24pt,.5emwouldequal6pt,etc.Emsarebecomingincreasinglypopularinwebdocumentsduetoscalabilityandtheirmobile-device-friendlynature.Thedefaultfontsettingwithbe1emforafontsize.“Rems”(rem)isavariationofems.ThesizeisrelativetotherootHTMLdefinition.Itseffectistoresetthesizeandcanbeusefulinsomesituationswhenyoudon’twantchildrenelementstoinheritthesize.Someexamplesare:

p{font-size:1em;}p{font-size:0.9em;}

Percent(%):Thepercentunitismuchlikethe“em”unit,saveforafewfundamentaldifferences.Firstandforemost,thecurrentfont-sizeisequalto100%(e.g.12pt=100%).Whileusingthepercentunit,yourtextremainsfullyscalableformobiledevicesandforaccessibility.Anexampleis:

p{font-size:90%;}

Sodon’tusePointsandPicasorPixels,butuseeitherpercentagesoremsbothofwhicharescalable.Scalablefontsarebecomingmuchmoreimportantwithresponsivedesignwhereyouarecreatinglayoutsfordifferentsizebrowsers.

DIVsandSPANDIVsandSPANsarethewayinwhichCSSusestodivideuppagesandapplydifferentstyles.

ASPANdefinesasectionwhichyoucanthenapplystylesto-Idon’ttendtousespansthatmuchbuttheremaybesituationswhereyouwanttodothat.

ADIVdefinesablockoracontainerwhichyoucanthenapplystylesto.

CreatingaseparatestylesheetIntheseexampleswecanalsogobacktoour“GiantSnail”(article.html)exercisetotryouttheexternalstylesheet.

Wecanplacethestylesintoaseparatestylesheetsothatwecanusethesamestylesindifferentwebpages.

Thecodetodothisgoesinthe<head>….</head>

<linkhref=“styles.css”rel=“stylesheet”media=“screen”type=“text/css”/>

Thereferencestyles.csscanbeeitherrelativetothislocationorafullURL.

Thewebpageexample.htmllookslikethiswithareferencetoastylesheet.

<!DOCTYPEHTML><html><head><metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”><title>UntitledDocument</title>

<linkhref=“styles.css”rel=“stylesheet”media=“screen”type=“text/css”/>

</head><body>


</body></html>

Thestylesheetstyles.csslookslikethis

p{padding-left:20px;padding-right:20px;text-align:justify;font-family:Arial;font-size:16px;}

Codefile:04_Styles_and_Stylesheets/files/example.html

Notethatyoucanhavemultiplestylesheetsinawebpage.Somedesignershaveseparate

stylesheets,soonesheetmightcontainfont,tablestylesandanothercontainspagelayoutstyles.

Exercise

Createthewebpageexample.htmlasaboveandthestylesheetstyles.cssasabove.Testthatyouexternalstylesheetisworkingcorrectly.

Modifythestylesheettoincludeabodystyle.Defineastyleforfontfamilyinthebodystyleandtestyourwebpage.

The@mediarule@mediaisusedtodefinedifferentstylerulesfordifferentmedia,suchasscreen,screenswithdifferentwidth,printer,speechandothers.

Inparticular,itcanbeusedtocreatestylesspecificallyforaprinterversionofapage.Youmightcreatestyleswhichalwayshaveblackforthefontcolorandmayalsomakecertainimagesnotdisplay.


.bluepara{color:blue;}

/*printstylesplacedattheendofthemainstyles*/

@mediaprint{

.bluepara{color:black;}

}

</style>

Inthisexample,whenyouprintthepage,thestylewillhaveacolorofblack.

The@mediaruleisextensivelyusedinresponsivedesignlayouts.

SummaryThischapterhaslookedatsomeofthefeaturesofstylesthatmakethemsouseful.Ithaslookedatusingexternalstylesheetswhichmeansthatmanydifferentwebpagescanusethesamestyles.Ithasalsolookedattheconceptofcascading.Agoodunderstandingofhowstylescascadewillmeanthatyouwillhavefewerstylesandtheywillbeeasiertomaintainandmodify.

5FurtherStyles


*Summaryofstyledefinitions.*Addingstylestotheheadofthepage.*Hyperlinksinwebpages.*TheCSSboxmodel.*DIVSandSPANS.*Furthertables.

StyleDefinitionSummaryWefirstlookatthethreemaincategorisationofstyleswhichare:tags,classesandids

[1]BuiltinTags(selectors)Stylesfortags(selectors)definethestylesforbuiltinstandardtagslike<h1>,<p>,<imgandsoon.

<h1>Thisisaheading</h1>Styleisdefinedas:

h1{background-color:#cccccc;}

Whenyoucreateastyleforthese,ALLh1tagswillthenhavethosestyles.

Thisrefinesanhtmlelement.

[2]ClassesClassesareuserdefinedstylesthatwecanapplytoanytag(selector)tochangethestyleforoneormoretag.Youcanchoosewhichonestoapplythestylesto.ThenameoftheclasscanbeanythingthatyouwantandinthisexampleIhaveused“quote”astheclassname.

<pclass=”quote”>Thisisaparagraph</p>Styleisdefinedas

.quote{font-size:16px}Notethefullstopinfrontofthestyledefinitionname

ThiscanapplytoanyHTMLelement.

[3]idsidsaretags(selectors)whichweuseONCEonthepageandareoftenusedwithdiv(divisions)whichdefinethelayoutofapage.

<divid=”wrapper”>Thisisadiv</div>Styleisdefineas:

#wrapper{background-color:blue;}Notethe#ThisappliestoonlyoneHTMLelement.

StyleExercisesThefollowingTasksillustratemanystylefeaturesthatyouwillwanttocontrolinyourwebpage.

Forthesetasks,youmaywanttocreateanewwebpageforeachtask,oryoumaywanttousejusttheonewebpage,addingoneachstyleasyougo–itdoesn’tmatterwhichmethodyouchoose.

Youshouldstartbycreatingawebpageandintheheadofthewebpage,enterinthestyles.

TASK1-SetthepagetoadefinedfontandsizeCreateanewwebpageandcreate:

[1]Abodystyle.[2]Afontsize.[3]Afontfamily.[4]Abackgroundcolor.

Modifythevaluestoseetheeffectsastheyarechanged.

Notethatplacingthestylesintothebodytagdefinesthedefaultstylesforthepage.

Codefile:05_Further_Styles/files/styles01.html

STYLES

body{

font-size:16px;

background-color:#CCCCCC;

font-family:Arial,Helvetica,sans-serif;

}

BODYTEXT

<p>Thisissometext</p>

TASK2-Modifyanh1tagCreateanewwebpageandcreate:

Anewclassstyle

[1]Defineafont.[2]Defineaborder.[3]Defineabackgroundcolor.

Modifythevaluestoseetheeffectsastheyarechanged.


STYLES

.box{

background-color:#FFFF99;

font-family:Geneva,Arial,Helvetica,sans-serif;

border-style:solid;

border-width:1px;

}

BODYTEXT

<h1class=“box”>Thisisaheading</h1>

Trychangingtheborderstyleandotherattributesoftheboxclass.

TASK3-ModifyaparagraphtagCreateanewwebpageandcreate:

Anewclassstyle

[1]Afontsize.[2]Amarginleftvalue.[3]Atextindentvalue.

Applytheclassstyletoaparagraphtag.


STYLES

.myPara{

font-size:120%;

margin-left:20px;

text-indent:20px;

}

BODYTEXT

<pclass=“myPara”>Loremipsumdolorsitamet,consecteturadipiscingelit.Pellentesqueullamcorper,metusidtempordictum,magnamiultricesligula,

sagittisporttitormetussapiensitametsapien.Craseueniminantesagittisornarequisnonaugue.Maurispellentesquequamvitae

pulvinarullamcorper.Donectempuseleifendtortor,euaccumsanodiolobortiset.Donecsedhendreritipsum.Sedsedexutlectusconsectetur

condimentumegetaliquetneque.Maurisnisltortor,pretiumetfermentumeu,bibendumatodio.Praesentligulaarcu,</p>

TASK4-CreatingaquoteblockoftextCreateanewwebpageandcreate:

Anewclassstyle

[1]Afontsizeandfontfamily.[2]Amarginandpaddingforthetext.[2]Athinborderbox.[3]Abackgroundcolor.

Applytheclassstyletoaparagraphtag.


STYLES

.quote{

font-size:90%;

font-style:italic;


margin:30px0px30px0px;

padding:20px20px20px20px;

border:thin#000000solid;

background-color:#FFFFCC;

}

BODYTEXT

<pclass=“quote”>Uteleifend,loremsitametviverrasollicitudin,exmassavenenatisnisl,quisfaucibusvelitipsumatodio.Crasluctusnequeorci,

utmolestieliberotincidunteu.Aliquamvelloremnonturpisfacilisislaoreet.Vivamusantemauris,condimentumnonporttitornon,

lobortisnecest.Vivamusacrisusidodiovenenatistempus.Utmalesuadatortornecfacilisiscondimentum.</p>

Trychangingtheattributesofthequoteclass,margin,paddingetc.toseethechanges.

NOTE:WecaneasilylookuptheattributesofmarginbygoingtoGoogleanddoingasearchwithsomethinglikethefollowing:‘htmlmargin’.ThiswillreturnwithasetofURLswhichyoucangotoanddescribethisparticularattribute.

LinksLinksorHyperlinksisthewayinwhichyoumovefromonewebpagetoanother.Wecanapplystylestogivedifferenttypeofeffectsassomeonemovestheirmouseoverthelink.

a:linkDefinesthestylefornormalunvisitedlinks.

a:visitedDefinesthestyleforvisitedlinks.

a:activeDefinesthestyleforactivelinks.Thisisthestylethemomentthelinkisclicked.

a:hoverDefinesthestyleforhoveredlinks.

link,visited,activeandhoverarecalledPseudoClasseswhichaddaneffecttosomeselectors.Inthiscasetheymodifythelinkdisplay.

Notethattheordershouldbea:link,a:visited,a:hoverforittowork

TASK5-RemovetheunderlinefromahyperlinkCreateanewwebpagetodemonstratehowtheunderlinecanberemovedfromahyperlink.

[1]Addstylesforthea:linkandthea:hoverPseudoClasses.


STYLES

a:link{text-decoration:none;}a:hover{text-decoration:none;}

BODYTEXT

<ahref=“http://www.withinweb.com”>Mysite</a>

TASK6-MakehyperlinksblockhoverCreateanewwebpageandaddinthestyles:

[1]a:link,a:visited,a:hoveranda:activePseudoClasses.


STYLES

a:link{color:#036;}

a:visited{color:#066;}

a:hover,a:active{color:#fff;background-color:#036;}

Note::activeMUSTcomeafter:hover(ifpresent)intheCSSdefinitioninordertobeeffective.

BODYTEXT

<ahref=“http://www.withinweb.com”>Mysite</a>

Asanadditionalexercise,addinthetext-decoration:nonetothea:linkanda:hoverexamplesabove.

TASK7-CreatingtwotypesofstylesforlinksusingadivclassCreateanewwebpageandaddinthefollowingstylestoillustratehowtohavetwodifferenthyperlinkstyles.


STYLES

a:link{color:#036;}

a:visited{color:#066;}

a:hover,a:active{color:#fff;background-color:#036;}

.sectiona:link{color:#036;}

.sectiona:visited{color:#066;}

.sectiona:hover,a:active{color:#fff;background-color:#CCCCCC}

BODYTEXT

<p><ahref=“http://www.withinweb.com”>Mysite</a></p>

<divclass=“section”>

<p><ahref=“http://www.withinweb.com”>Myothersite</a></p>

</div>

TASK8-CreatingtwotypesofstylesusinganhrefclassCreateawebpagewiththefollowingstylestoillustrateusingaclassforthehreflink.


STYLES

a:link{color:#FF0000;}/*unvisitedlink*/

a:visited{color:#00FF00;}/*visitedlink*/

a:hover{color:#FF00FF;}/*mouseoverlink*/

a:active{color:#0000FF;}/*selectedlink*/

a.topbar:link{color:#0099FF;}

a.topbar:visited{color:#FF9933;}

a.topbar:hover{color:#FFFFCC;}

a.topbar:active{color:#99CC66;}

BODYTEXT

<br/>

<ahref=“http://www.wiltshire.ac.uk”>Testlink</a>

<br/>

<ahref=“http://www.wiltshire.ac.uk”class=“topbar”>Testlink</a>

ImagesandStyles

TASK9-RemoveaborderoraddabordertoanimageCreateawebpagewithanewclassandwith:

[1]aborderstyle.


STYLES

.imgborder{

border:10px;

border-color:#CCCCCC;

border-style:solid;

}

BODYTEXT

<imgsrc=“snail.jpg”class=“imgborder”/>

TASK10-AddashadowtoanimageCreateawebpagewithaclassandstyletoaddashadowtoanimage


STYLES

.imgborder{

box-shadow:10px10px5px#888;}

BODYTEXT

<imgsrc=“snail.jpg”class=“imgborder”/>

CSSBoxModelOneofthemostimportantthingstounderstandaboutCSSistheBoxModel.Everyelementthatweuseinthepageisconsideredtobearectangularbox.

Thepropertiesforthisboxareasfollow:

content,padding,borderandmargin.

Youcanunderstandhowthiselementinteractsfromthefollowingimage:

Asyoucanseethepaddingisappliedaroundthecontentarea.Sowecanusethepaddingtocreateagutteraroundthecontent.Thenwehavetheborder,showninblueinthediagram,whichifappliedcreatesalinearoundthepaddingelement.Wecandefinethethicknessinpixelsoftheline,thestyleofthelinesuchassolid,dashed,dotted.

Aftertheborderthereisthemargin.Thisistransparentandwecanuseittocreateandcontrolspacingbetweendifferentboxes.Padding,bordersandmarginsareoptionalandtheyaresettozeroasdefaultsetting.Ifwewanttothemsetbacktozerowecanusetheuniversalselectorandthefollowingcode:

*{margin:0;padding:0;}

Ifweassignawidthandheighttoabox,itreferstothecontentoftheboxonly.Thepadding,borders,andmarginsarethenaddedtothisvalueandsummingalltogethergivesthetotalboxwidth.SoifIwantatotalboxtobe100pxwide,onewayistousethefollowingvalues:

*{margin:10px;padding:10px;width:60px;}

Thisconsistsofatotalmarginof20pxandatotalpaddingof20pxplusthewidthofthecontent.

Soinsummary,thepaddingaddsinspacebetweenthecontentandtheborder,andthemarginaddsinspacebetweentheborderandothercontent.

Therearetwowebpageexamplesofthis:

CodeFile:05_Further_Styles/files/CSS_Box_Model_Margin.html

Thisshowsaboxwithamargin

Codefile:05_Further_Styles/files/CSS_Box_Model_Padding.html

Thisshowsaboxwithpadding

BlockandInlineelements

BlockElementsSomeelementswillalwaysappeartostartinanewlineinthebrowser.Thesearecalledblocklevelelementsandexampleoftheseare<h1>,<h2>,<p>,<div>

InlineElementsSomeelementsalwaysappeartocontinueonthesamelineasneighbouringelements.Theseareknownasinlineelements.Examplesofthesewouldbe<i>,<strong>and<span>.

Itisquiteeasytodemonstratethedifferencebetweenblockandinlineelementsusingasimplewebpageandaddingborderstothestyles.

Ifwelookatthewebpage:

Codefile:05_Further_Styles/files/block_and_inline.html

wewillseethatitismadeupofamixtureofblocklevelandinlineelements.Wecanshowthismoreclearlybyapplyingborderstyles.

Codefile:05_Further_Styles/files/block_and_inline.html

Allblocklevelelementshavebeenidentifiedbyaborderoforange,andallinlineelementshavebeenidentifiedwithaborderofgreen.

HTMLDivandSpanInthefollowingtaskswewillbeusingtheexampletextinthefilediv_and_span_example_text.txt

Differencebetweendivandspandiv(divisionorcontainer)isablockelement,spanisinline.

Thismeansthatdivsshouldbeusedtowrapsectionsofadocument,whilespansshouldbeusedtowrapsmallportionsoftext,images,etc.divsareusedto“group”togetherelements.

Exampleofaspan:

[1]Createandsaveanewwebpagecalleddiv01.html

[2]Inthebodyofthewebpage,addthetextfromthefilediv_and_span_example_text.txt

[3]Foreachparagraph,put<p>startand</p>endtagsaroundtheparagraphs.

[4]Nowwecandemonstrateaspanelement:

<spanstyle=”background-color:#00ff00;”>

Sometexthere

</span>

Placetheexamplespanaroundsometextinoneoftheparagraphsandviewinabrowser.

Viewthepageinthebrowser.

Codefile:05_Further_Styles/files/div01.html

TASK11-FloatleftandfloatrightblocksAnexampleoffloatleftandfloatrightofadiv:



[3]Weneedtofloatleftthefirstblockandfloatrightthesecondblockoftextandthenviewthepageinthebrowsertoseetheresult.

<divstyle=“float:left;width:300px;height:auto;”>

Firstblockoftexthere

</div>

<divstyle=“float:right;width:300px;height:auto;”>

Secondblockoftexthere

</div>


Youmaywanttotrymodifyingthewidthoftheblockstoseewhathappens.

Thenormalflowofadiv(orinfactanyelement)isoneundertheother.Floatmeansthatyoutaketheelementfromthenormalflowandplaceoneithertheleftortherightsideofthecontainer.

TASK12-CentreablockoftextwithadivYoumustdefinewidthandmarginsasautoasbelow(youcanusethismethodtocentreanythinginadiv):



[3]Weneedtoapplythefollowingstyletothedivwithdefiningthewidthandmarginsasautoandthenviewthepageinabrowser.

<divstyle=“width:400px;margin:0auto;>

Texttobecenteredhere

</div>


TASK13-CentreablockoftextwithtwodivsThisshowshowtocentretwodivs.Thisusesonedivwhichiscentredandtheothertwodivsusefloatleftandfloatleft.Youmightfindthisusefulwhenyouwanttoputtwosetsoftexttogether.



[3]Weneedtouseanouterdivtocentreallthetextandonetextblockisfloatedleft,the

otherfloatedright.

<divstyle=“width:60%;margin-left:auto;margin-right:auto;height:auto;”>

<divstyle=“float:left;width:40%;height:auto;”>

Firstblockoftexthere

</div>

<divstyle=“float:right;width:40%;height:auto;”>

Secondblockoftexthere

</div>

</div>


TASK14-FloatingimagestotherightItisquitecommontowanttohavetextwrappingaroundanimage.Wecandothisbyfloatingtheimagetotherightbutwithallthetextcontainedwithinanouterdivasfollows.


[2]Inthebodyofthewebpage,addthetextfromthefilediv_and_span_example_text.txt.Wealsohavetoaddimageusingthesnail.jpgfilewithawidthof300pxinthisexample.

[3]Wecreateadivaroundtheimagetofloattheimageright.Butwealsohavetocreateanouterdivaroundalltheitemslikethis:

<divstyle=“float:left;width:550px;”><divstyle=“width:300px;float:right;”><imgsrc=“snail.jpg”width=“300px”/></div>

Enterthetexthere

</div>


TASK15-FloatingimagestotheleftThisisessentiallythesameasthepreviousexamplebutwiththeimagefloatingtotheleft.


[2]Inthebodyofthewebpage,addthetextfromthefile

div_and_span_example_text.txt.Wealsohavetoaddimageusingthesnail.jpgfilewithawidthof300pxinthisexample.

[3]Wecreateadivaroundtheimagetofloattheimageleft.Butwealsohavetocreateanouterdivaroundalltheitemslikethis:

<divstyle=“float:left;width:550px;”><divstyle=“width:300px;float:left;”><imgsrc=“snail.jpg”width=“300px”/></div>

Enterthetexthere

</div>


FurtherTablesInapreviouschapterwelookedattables.Tablesareusedfortabulardataofcourse.TablescanalsobeusedtolayoutareasofawebpagebutyoushouldtrytorestricttheuseoftablesfortabulardatabecauseitisoftencleanerandeasiertouseDIVs.Ifwegobackanumberofyears,tableswereusedtodefinewebpagelayout,nowadaysusingtablesforpagestructureisfrownedupon.

HTML5andCSS3enablethecreationofreallynicelookingtableswhichwewilllookathere.

TASK16-Creatinganewtable[1]CreateanewHTML5webpagecalledtable_01.htmlinafolder.

[2]Inthebodyofthewebpageweneedtocreateabasictableasfollows:

<table>

<tr>

<th>Name</th>

<th>Job</th>

<th>Dept</th>

<th>Salary</th>

</tr>

<tr>

<td>FredBlogs</td>

<td>Programmer</td>

<td>IT</td>

<td>£35000</td>

</tr>

<tr>

<td>PeteSmith</td>

<td>SystemsEngineer</td>

<td>IT</td>

<td>£28000</td>

</tr>

<tr>

<td>JoeSoap</td>

<td>HRAdmin</td>

<td>HR</td>

<td>£16000</td>

</tr>

</table>

IfyouareusingDreamweaver,youshouldbeabletocreatethisfairlyeasilyindesignview.

Notethatthefirstrowdefinesheadercolumnsidentifiedasth.Theheadercolumnautomaticallyisdefinedasbold.

ThethtableheaderelementissomethingthathasalwaysbeenavailableinHTMLandallowsyoutodefinetheheadersofatable.Oneofthereasonsforusingthistodowithaudioscreenreaderswhichwillunderstandthatathisactuallyatableheaderandnottabledata.

Codefile:05_Further_Styles/files/table_01.html

TASK17-Addinginsomestyles

body{


}

table{

width:550px;

border-collapse:collapse;

}

th,td

{


}

tr:nth-of-type(odd){

background-color:#efefef;

}

tr:hover{

background:#cccccc;

}


TASK18-Formattingthedisplayfurther

Addinthefollowingstyletoformattheheader:

th

{

background:#cccccc;

text-align:left;

}

Addinthefollowingclasstoformatthecolumnusedfordisplayingthesalary:

.money{

text-align:right;

}

Thenaddclass=”money”tothe<th>and<td>forthesalarycolumn.


SummaryThischapterlooksathowtousestylesinmoredetail.Itlooksatplacingstylesintoexternalstylesheetsandgivesvariousexamplesofthesomeofthetechniquesthatyoumaywanttouse.Italsolookedattheboxmodelandthedifferencebetweenblocklevelandinlineelements.

6SiteExamples


*Createasinglepagewebsite.*MinifytheCSS.

CreateaBusinessCardWebSiteTheconceptofthisisasinglepage‘businesscard’websitewhereallthedetailsofthecompany/shopareononewebpage.ThiscouldalsobeusedasthebasisforaCVtypewebsite.

Asyouworkthroughtheexercise,testeachstageandyouwillseehowthepageisbuiltupasthestylesareadded.

TASK1-CreateanewwebpageCreateanewfoldercalledbusiness.

CreateanewHTML5webpagecalledindex.html

ChangethetitleofthepagetoArchibald’sBarbersShop

Codefile:06_Site_Examples\files\BusinessCardLayout\index_task01.html

TASK2-CreatesomeDIVcontainersCreateadivwithidnameofcontainer.Thisistheoverallcontainer

Insidethatdivcreateotherdivscalledheader,logoimage,description,openinghrs,location,prices,map-canvasandfooterasfollows:

<body>

<divid=“container”>

<divid=“header”>

</div>

<divid=“logo”>

</div>

<divid=“image”>

</div>

<divid=“description”>

</div>

<divid=“openinghrs”>

</div>

<divid=“location”>

</div>

<divid=“prices”>

</div>

<divid=“contactus”>

</div>

<divid=“map-canvas”>

</div>

<divid=“footer”>

</div>

</div>

</body>


TASK3-AddinmainimageInsertimage03.jpginsidetheimagedivandsetwidth=“100%”inthe<imgtag

<imgsrc=“image03.jpg”width=“100%”>

Thiswillconstraintheimagetothesizeofthewebpage.


TASK4-AddinheadertextIntheheadertypein:

Home|OpeningHours|Location|Prices|ContactUs

Createanewstylecalled#headerwithabackground-colorofblack.


#header{

Background-color:#000000;

}

</style>


TASK5-AddindescriptiontextInthedescriptiondivcopyin:

WelcometoArchibald’sBarberinIlfracombeDevon

Youdon’tneedanappointmentandweareopenlateonThursdayeveningtoaccommodatebusyschedules.

Tryourprofessionalhairdressertoday.Codefile:06_Site_Examples\files\BusinessCardLayout\index_task05.html

TASK6-AddinopeninghourstextIntheopeninghoursdivcopyin:

ComeVisitUs

OpeningHours

MondayClosedAllDayTuesday8.00amto5.30pmWednesday8.00amto5.30pmThursday11.00amto6.30pmFriday11.00amto6.30pmSaturdayClosedalldaySundayClosedallday


TASK7-AddinlocationtextInthelocationdivcopyin:

Location

NorthFieldRoadIlfracombe

DevonEX348AL


TASK8-AddinpricestextInthepricesdivcopyin:

Prices

Adults£7.00Children£6.00SeniorCitizens£4.00


TASK9-AddincontacttextInthecontactusdivcopyin:

ContactUs

07824728621Codefile:06_Site_Examples\files\BusinessCardLayout\index_task09.html

TASK10-AddinfootertextInthefooterdiv,copyin:

&copy2016


TASK11-FormattextForeachtextareaaddin<h1>..</h1>tagforthetitleandparagraph<p>..</p>tagsaroundthemaintextand<br/>linebreakattheendofeachlinetoforceanewline.


TASK12-Addinbodystyles

#body{

font-family:Arial,Helvetica,sans-serif;color:#030;margin:0px;}


TASK13-Addinheaderstyles

#header{background-color:#000000;color:#FFF;margin:0px;padding:20px;font-size:120%;

}Codefile:06_Site_Examples\files\BusinessCardLayout\index_task13.html

TASK14-AddinstylesforeachblockForthedescriptiondiv:

#description{

padding-top:20px;padding-right:250px;padding-bottom:10px;padding-left:250px;text-align:center;}

#descriptionh1{

font-size:120%;color:#F30;}andthenforeachoftheotherdivsopeninghrs,locationandpricesusethesamestyles.

Notethatwecoulddomultiplestyleslikethis:

#pricesh1,#locationh1{

}Codefile:06_Site_Examples\files\BusinessCardLayout\index_task14.html

TASK15-Addinfooterstyles

#footer{

background-color:#000;color:#FFF;margin:0px;padding:20px;}


TASK16-AddinCanvasStyles

#map-canvas{

width:100%;height:400px;}


TASK17-AddinGooglemapGoogleprovidesJavaScriptcodethatcanbejustpastedintoawebpageandwhichwillthendisplayaGooglemap.

TheJavaScriptisshownbelowalreadyconfiguredandshouldbecopiedandpastedbetweenthe<head>….</head>tags.

<scriptsrc=“https://maps.googleapis.com/maps/api/js”></script>

<script>

functioninitialize(){varmapCanvas=document.getElementById(‘map-canvas’);

varmapOptions={center:newgoogle.maps.LatLng(51.208656,-4.126427),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP

}

varmap=newgoogle.maps.Map(mapCanvas,mapOptions)varmyLatlng=newgoogle.maps.LatLng(51.208656,-4.126427);varmarker=newgoogle.maps.Marker({position:myLatlng,map:map,title:‘ArchibaldsBarbersShop’});

}

google.maps.event.addDomListener(window,‘load’,initialize);</script>

Theentriesthatareconfiguredforthiswebpageare:

-thenameofthedivwherethemapwillappearwhichinthisexampleis‘map-canvas’

-thelatitudeandlongitudewhereyouwantthemaptobefocusedon

-thelatitudeandlongitudeofthemarker

-Thetitleofthemarker

Forfurtherinformation,refertoGoogledocumentationwhichshouldexplainalltheoptionsandotheroptionsavailable:

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

Toaddamarkertothepointofinterest:

https://developers.google.com/maps/documentation/javascript/examples/marker-simple


TASK18-AddinlogoandlogostylesInthelogodiv,addinsometextwhichrepresentsthetitleofthesite:

Archibald’sBarberShop

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

#logo{background-color:#000;color:#FFF;font-size:240%;padding-top:30px;padding-right:40px;padding-bottom:40px;padding-left:120px;border-top-width:thick;border-top-style:solid;border-top-color:#CCC;}Thisshouldcreateablackbackgroundwithwhitetext,andcreateatopbordertogiveaseparation.

Ifyouwantedtoyoucouldreplacethetextwithagraphicimage.


TASK19-AddinhrefanchorlinksAddinhrefanchorlinksandlinksforstyles.

Thetopheadertextisintendedtobealistofhreflinks.Whenalinkisselected,thepageshouldscrolldownratherthangotoanotherpage.

Todothisweusethehreflinkbutusinganamedanchortext:

Place<aname=”location”></a>nexttothediv<div=”location”>

Thenintheheadertextweput<ahref=”#location”>Location</a>

Noticethatthehreflinkhasthe#characterfollowedbythenameofthe<aname

Nowwhenweclickonthe‘Location’linkatthetopofthepage,itshouldmovedowntothatpositiononthepage.


TASK20-AddinthehreflinksstylesfortheheaderThefollowingstyleswillchangethehreflinkstodisplaycolorscorrectly.

#headera:visited{color:#FFF;text-decoration:none;

}

#headera:link{color:#FFF;text-decoration:none;}

#headera:hover{color:#F00;text-decoration:none;}


TASK21-PlacestylesintoaseparatestylesheetCreateanewfoldercalledCSS

Createanewfilecalledstyles.cssandcopyallthestylesfromthewebpageintostyles.cssandreplacethestylesinthewebpagewitha<linktothestylesheet.

FilesforBusinessCardWebSiteAllthefilesforthisprojectarelocatedinChapter6underthefolderBusinessCardProject.

MinifyCSSOneoftheissuesofmodernwebpagesisthattheycancreatelargeCSSstylesheetsparticularlywithresponsivelayoutsthathavetoworkwithdifferentdisplaydeviceswhichoperateoverslowernetworkspeeds.

MinifyisonewaytoovercomethesizeofCSSstylesheets.Essentially,theideaistoremoveunwantedspaces,commentsandothertextfromthestylesheetwhichreducesthefilesizeandhencespeedsupthetimetodownloadthepage.

Therearemanywebsiteswhichhelpyoutocompressandminimisefilestospeedupthespeedofapage,andthisexampleshowsasimplewayofminimisingCSS.

[A]-Createaseparatestylesheet

FortheexamplewebpagethatwehavejustcreatedforArchibald’sBarbers,extractthestylesandplacethemintoaseparatestylesheetcalledstyles.css.

Thisstylesheetshouldbeplacedinanewfoldercalledstylesheets

Nowinyourwebpagecreatealinktothestyles.csswhichwilllooksomethinglike:

<linkrel=”stylesheet”href=”stylesheets/styles.css”type=”text/css”/>

Displaythewebpageinyourbrowsertomakesurethestylesareworkingasexpected.

[B]-Minifythecss

Gotothewebpage:

http://www.feedthebot.com/tools/css/#minify

whereyoushouldcopyinthestylestominifythecss.

Copytheresultbackintothestylesheetandtestthatthewebpagesstillwork.

http://www.feedthebot.com/tools/css/#minify

SummaryThischapterhastriedtobringtogethermanyoftheideasthathavebeenexplainedinpreviouschapters.ItbringstogetherDivstodefinethepagelayoutandthenapplyingstylesandclassestocontrolthelookandfeelofthepage.Asyouworkedthroughtheexercisesyoushouldhaveseenthechangesthattakeplacetogivethefinalresult.

7ListsandMenus


*Unorderedandorderedlists.*Menusandlist.*CSSmenulists.

Thischapterlooksatusinglistsandmenus.Wehavealreadylookedatlistsbrieflywhereweshowedthatyoucancreateanorderedlistoranunorderedlist.Addingstylestolistsandmakingthelistgoinahorizontaldirectionisawayinwhichmenusarecreated.

UnorderedlistsUnorderedlistsaredefinedby<ul>witheachelementusing<li>asshowninthefollowingexample:

<ul>

<li>Onelargetomato</li>

<li>Apinchofsalt</li>

<li>3kgofpotatoes</li>

</ul>

Thelist-style-typeCSSpropertycanhavevaluestogivedifferentappearancetothebulletedlisting:

So

list-style-type:square

displaysasquarebulletlist:

<ulstyle=”list-style-type:square”>




</ul>

Codefile:07_Lists_and_Menus/files/lists.html

Hereisalistofsomeofthemorecommonlist-style-type.

Disc Solidcircle.

circle Hollowcircle.

square Solidsquare.

decimal 1,2,3,4,etc.

decimal-leading-zero 01,02,03…10,11,etc.

lower-roman i,ii,iii,iv,etc.

upper-roman I,II,III,IV,etc.

lower-greek Greekcharacters.

lower-latin a,b,c,d,etc.

upper-latin A,B,C,D,etc.

armenian Armeniannumbering.

georgian Georgiannumbering.

lower-alpha Equivalentoflower-roman.

upper-alpha Equivalentofupper-roman.

none Nomarker.

OrderedListsOrderedlistsaredefinedby<ol>witheachelementusing<li>

<ol>




</ol>

Toaddstyletotheorderlistwecanaddthetypeattribute:

Typetype=“1”Thelistitemswillbenumberedwithnumbers(default)type=“A”Thelistitemswillbenumberedwithuppercaseletterstype=“a”Thelistitemswillbenumberedwithlowercaseletterstype=“I”Thelistitemswillbenumberedwithuppercaseromannumberstype=“i”Thelistitemswillbenumberedwithlowercaseromannumbers

<oltype=”A”>




</ol>

Codefile:07_Lists_and_Menus/files/lists.html

UsingimagesinlistsAnotherCSSstylethatcanbeusedwithlistsisthelist-style-imagewhichallowsustoplaceanimageofourchoiceagainstthelistitem.

Toillustratethis,createanewHTMLwebpagecalledlistimages.html

<p>HTML5enablesyouto:</p>

<ul>

<li>EasierAudioandVisionsupport</li>

<li>SimplierandcleanerHTMLcode</li>

<li>Betterformsandtablesstyles</li>

</ul>

<br/>

Animagecanbeaddedbyusingthestyle:


ul

{

list-style-image:url(lightbulb.png);

}

</style>

Codefile:07_Lists_and_Menus/files/listsimages.html

AllCSSListProperties

Property

list-style Setsallthepropertiesforalistinonedeclaration

list-style-image Specifiesanimageasthelist-itemmarker

list-style-position Specifiesifthelist-itemmarkersshouldappearinsideoroutsidethecontentflow

list-style-type Specifiesthetypeoflist-itemmarker

CreateamenuusinganUnorderedListThisisanexampleofamenuusingCSSandanunorderedlist.

Unorderedlistsareusuallylistswithiconsbutinamenuweusethestylelist-style-type:none;todisableanyicon.

Wecanusethefeaturesofanunorderedlistwithdifferentcolorsinthevariouslinkstatestogiveoureffects.

Createanewwebpagecalledindex_menu.htmlandcopythefollowingunorderedlistintothebody.

<divclass=“menu”>

<ul>

<li><ahref=“index.html”>Home</a></li>

<li><ahref=“about.html”>About</a></li>

<li><ahref=“location.html”>Location</a></li>

<li><ahref=“contact.html”>ContactUs</a></li>

<li><ahref=“shop.html”>Shop</a></li>

</ul>

</div>

Nowviewthisinthewebpage.

Nowweaddthestylestoformatthemenuasfollows:


.menuul{

margin:0;

padding:0;

width:185px;

list-style-type:none;

}

.menuullia{

text-decoration:none;

color:white;

padding:10.5px11px;

background-color:#005555;

display:block;

}

.menuullia:visited{

color:white;

}

.menuullia:hover,.menuulli.current{

color:white;

background-color:#5FD367;

}

</style>

Codefile:07_Lists_and_Menus/files/index_menu.html

ExampleofamenuinawebpageTodemonstratethisinawebpagethereisanexamplelayoutin06-Navigationinthelayoutfolderwhichwecanuse.

In07_Lists_and_Menusinthelayoutfolder:

[1]Downloadtheindex.htmlpageandviewitinabrowser.Thispageisabasiclayoutwithblankimagesandnostylesapplied.

Codefile:07_Lists_and_Menus/files/layout/index.html

[2]Downloadtheimagesintheimagesfolderandplacethemallinafoldercalledimages.

[3]Downloadthestyles.csspage.

[4]Nowaddthelinktothestyles.csspagetotheindex.htmlpage.

Viewthispageinthebrowserandyoushouldseethatithasbeenformattedbythestyles.

Youshouldseethatthenavigationisnotstyledaswehavenotaddedinthestylesforthatyet.

Codefile:07_Lists_and_Menus/files/layout/index2.html

[5]Usethestylesfromthepreviousexerciseandputtheminthemenu.cssstylesheetthenaddthisstylesheettotheindex.htmlpage.

Codefile:07_Lists_and_Menus/files/layout/index3.html

[6]Viewthepageinthebrowser.

[7]Nowwecancopytheindex.htmltocreatefilescalledabout.html,contact.html,location.htmlandshop.htmlandwhenweclickonthenavigation,thepagesshouldworkcorrectly.

Notetheuseofclass=”current”todefinewhichmenuitemishighlighted.

Thisisshowninthefolder07_Lists_and_Menuswithinthelayout_multifolder.

CSSMouseoverButtonsThismethodgivesasimplehorizontalmenuwithsubmenus.ItuseslistsandCSStoconfigurethelists.

Thehtmlforthemenuisasfollows:

<ulid=“menu”>

<li><ahref=”#”>Home</a></li>

<li><ahref=”#”>AboutUs</a>

<ul>

<li><ahref=”#”>TheTeam</a></li>

<li><ahref=”#”>History</a></li>

<li><ahref=”#”>Vision</a></li>

</ul>

</li>

<li><ahref=”#”>Products</a>

<ul>

<li><ahref=”#”>CozyCouch</a></li>

<li><ahref=”#”>GreatTable</a></li>

<li><ahref=”#”>SmallChair</a></li>

<li><ahref=”#”>ShinyShelf</a></li>

<li><ahref=”#”>InvisibleNothing</a></li>

</ul>

</li>

<li><ahref=”#”>Contact</a>

<ul>

<li><ahref=”#”>Online</a></li>

<li><ahref=”#”>RightHere</a></li>

<li><ahref=”#”>SomewhereElse</a></li>

</ul>

</li>

</ul>

TheCSSforthisis

ul{

font-family:Arial,Verdana;

font-size:14px;margin:0;

padding:0;

list-style:none;

}

ulli{

display:block;

position:relative;

float:left;

}

liul{

display:none;

}

ullia{

display:block;


color:#ffffff;

border-top:1pxsolid#ffffff;


background:#2C5463;

margin-left:1px;

white-space:nowrap;

}

ullia:hover{

background:#617F8A;

}

li:hoverul{

display:block;

position:absolute;

}

li:hoverli{

float:none;

font-size:11px;

}

li:hovera{

background:#617F8A;

}

li:hoverlia:hover{

background:#95A9B1;

}

Codefile:07_Lists_and_Menus/files/cssmenu.html

Theadvantagewiththismethodisthatitrequiresnocleverprogramming.

Exercise

[1]Createanewwebpageandinthebodyofthewebpagecopytheabovelist.Savethewebpageascssmenu.htmlinthefolder07_Lists_and_Menus.

[2]Intheheadofthewebpage,createastylesectionandaddtheabovecsscodeintoit.

[3]Whenyoudisplaythewebpageinyourbrowseryoushouldseeahorizontalmenurepresentingthebuttonswhichiscreatedusinghtmllists.

SummaryThischapterillustratesvariousmethodsthatcanbeusedtocreatedropdownmenulists.Usinglistsandcsstocreatemenusisveryflexibleandisthemethodthatyouwillcomeacrossoverandoveragain.Modifyingandaddingnewmenuitemsisverystraightforwardasitisjustacaseofeditingthetext.

8Graphics


*Graphicformatsfortheweb.*BasicprinciplesofPhotoshop.*Creatingrolloverimages.*Backgroundimages.*Savingimagestotheweb.

Thischapterlooksatgraphicsforwebpages.NodiscussionofgraphicscanreallybedonewithoutlookingatPhotoshopwhichisthemostpopularintheindustry.However,Itrytoconcentrateonfeaturesthatareneededforwebpages,andthereareotherimageeditingprogramsthatareavailablewhichyoucanuse.

Oneisanonlineeditorathttp://pixlr.com/whichhasmanyofthefeaturesofPhotoshopandisfree.ItisbesttouseFireFoxratherthanIE.

Anotherapplicationcanbedownloadedfromhttp://www.gimp.orgwhichisalsofree.

Thetypeoffeaturesthatyouneedtolookforingraphiceditorsare:

-Creategraphicsindifferentformats

-Usetoolstocreateline,brushandfilleffects

-Uselayerstohideandshowpartsofimages

-Saveimagesinformatssuitableforwebpages.

Graphiceditorsusuallyconsistsof:

-Amaindrawingarea

-Atoolbox

-Asetoflayers

http://pixlr.com/

http://www.gimp.org

GraphicformatsusedonthewebThereareanumberofimagetypesthatyouwillseeonwebpages,eachhaveprosandconswhichwewilllookat.

*gif*jpg*png*bmp*tiff

gifformatProsofGIF:

•Cansupporttransparency•Candosmallanimationeffects•‘Lossless’quality–theycontainthesameamountofqualityastheoriginal,exceptofcourseitnowonlyhas256colors•Greatforimageswithlimitedcolors,orwithflatregionsofcolor

ConsofGIF:

•Onlysupports256colors•It’stheoldestformatintheweb,havingexistedsince1989.Ithasn’tbeenupdatedsince,andsometimes,thefilesizeislargerthanPNG.

jpgformatProsofJPEG:

•24-bitcolor,withupto16millioncolors•Richcolors,greatforphotographsthatneedsfineattentiontocolordetail•Mostusedandmostwidelyacceptedimageformat•CompatibleinmostOS(Mac,PC,Linux)

ConsofJPEG:

•Theytendtodiscardalotofdata•Aftercompression,JPEGtendstocreateartefacts•Cannotbeanimated•Doesnotsupporttransparency

pngformatProsofPNG

•Lossless,soitdoesnotlosequalityanddetailafterimagecompression•InalotwaysbetterthenGIF.Tostart,PNGoftencreatessmallerfilesizesthanGIF•SupportstransparencybetterthanGIF

ConsofPNG:

•Notgoodforlargeimagesbecausetheytendtogenerateaverylargefile,sometimescreatinglargerfilesthanJPEG.•UnlikeGIFhowever,itcannotbeanimated.•NotallwebbrowserscansupportPNG.

bmpformatProsofBMP:

•WorkswellwithmostWindowsprogramsandOS,youcanuseitasWindowswallpaper

ConsofBMP:

•Doesnotscaleorcompresswell•Again,veryhugeimagefilesmakingitnotwebfriendly•Norealadvantageoverotherimageformats

tiffformatProsofTIFF:

•Veryflexibleformat,itsupportsseveraltypesofcompressionlikeJPEG,LZW,ZIPornocompressionatall.•Highqualityimageformat,allcoloranddatainformationarestored•TIFFformatcannowbesavedwithlayers

ConsofTIFF:

•Verylargefilesize–longtransfertime,hugediskspaceconsumption,andslowloadingtime.

PhotoshopbasicprinciplesThePhotoshopdisplayconsistsof:

·Lefthandsideisthetoolbar.

·Righthandsideisthelayers.

TwoimportanttoolbarelementsarethePointericon,andtheMoveicon.

Pointericon:

Moveicon:

Whenyoucreateanewobject,thatobjectwillbeselected.Todeselectit,youclickonthePointericon.

Toselectsomethinginthetoolbar,clickonthetoolbarobject,rightclickonyourmouseanditwilldisplayotheroptions.

Photoshopuseslayerswhereeachlayerisaseparatedrawingarea.Soyoucancreateonelayerwithoneshapeandthencreateanotherlayerwithanothershapeandplaceoneontopofanother.Layerscanbehidden,ormergedwithotherlayers.

TodisplaythelayerpanelselectWndows->Layers

Tocreateaneffect,doubleclickonthelayerwhichwilldisplayasetoflayerstyles.

Tickaboxtousethatstyleandclickingonthestylenamewillthendisplayasetofoptionsforthatparticularstyle.

Rememberthatstandardscreensizesarenowaround1280pxand800pxsothosesizesgiveanindicationofthesizeofyourimagesontheweb.

TASK1-CreatingshapesinPhotoshop[1]InPhotoshop,createanewpage,say,400pixelsby400pixelsand72pixelsperinch.

NOTE:Makesurethatyouhaveselectedpixelsasthesizeandchoosetransparencyforthebackgroundcontentsasshowninthescreenshot.

[2]CreateanewlayerbyclickingonthemenuLayer->New

[3]Selectthelayer,selectashapeanddrawitonthepage.NotethatPhotoshopworksinaseriesoflayersabitlikeworkingwithtransparencypaperandplacingimagesoneontopoftheother.

[4]Createanothernewlayerandcreateanothershapeonthelayer.

TASK2-UsingtextinPhotoshop[1]InPhotoshop,createanewpage,say400pixelsby300pixels,72pixelsperinchforwebpagework

NOTE:Makesurethatyouhaveselectedpixelsasthesizeandchoosetransparencyforthebackgroundcontentsasshownintheimageabove.

[2]Clickonthetextelement

[3]Entersometextandnotethatitcreatesanewlayer.Someexampletextmightbesomethinglike:

Gibbs’Plumbers

[4]Forwebwork,youwantacrisptextimageandnottoosmall

[5]MakethetextareasonablesizesothatitfitsthewidthoftheareaandsetittoBlackcolor.Youshouldalsochooseafontthatisthickratherthanoneofthethinnerfontsorotherwiseyoumaynotseetheeffectsthatwewillapplylateron.

[6]Doubleclickonthelayerorclickonfxatthebottomofthelayerpaneltoaddastylelayer.Clickonthe“BevelandEmboss”checkbox.OpentheBevelandEmboss

propertiesbyclickingonthecheckbox,andthenadjustthe“Depth”entry.Youwillalsowanttoselectthe“DropShadow”properties.

[7]Trythesameprocesswithpixlr.com

Codefile:08_Graphics/files/gibbs_plumbers.psd

TASK3-SavingforawebpageInPhotoshop,thedefaultfiletypeispsd.Thisformatcannotbeusedonwebpagesandsowehavetoexporttoadifferentformat.

Ifyouwanttocreateanimageforaweb,clickonFile->ExportAs,oryoucanselectFile->QuickExportAspng.OryoucandoFile->Saveforweb(legacy)whichopensupawindowofdifferentoptimisedimages.EarlierversionsofPhotoshopwillhaveslightlydifferentmenutogettotheSaveforweb.

Chooseeitherjpgorpngandselectasuitableimage.

Notethefilesizeoftheimagewhenyousaveit.Itshouldbeassmallaspossiblesothatthewebpagecanloadquickly.

Ifyouusejpgformatyoucanreducethequalityoftheimageandhencereducethefilesizeoftheimage.Onawebpage,reducingtheimagequalitydoesnotmaketoomuchvisibledifference.

Afilesizeoflessthe20kbytesto40kbytesiswhatyoushouldbeaimingfor.

Thisisexplainedinmoredetailfurtheronthischapterinthesectionabout“Preparingandsavingimagesfortheweb”.

TASK4-TocreateabuttonwithPhotoshop[1]Createanewimage,100pixelsby25pixelswithawhiteortransparentbackground.

[2]Selectasuitablebasecolorforyourbutton.Say#bed4d2

[3]Selecttheroundedcornershapeanddrawabuttoninthepagearea.

[4]Notethatifyoutrytofillthebuttonshape,ortrytofilltheshapewithcolor,itwillnotallowit.

[5]IntheLayerswindowdoubleclickonthebuttonshape.

[6]Selectasuitablebevel,suchasDropShadowandifyouwish,selectasuitablegradientcolor.

[7]Savethepageasapsd

[8]Usethetextlayertocreateabuttonwiththetext‘Register’

[9]Saveasawebimage-jpgorpng

[10]Createanewwebpageandplaceyourimageontothewebpage.

Notethatitisusualtocreateanewfolderwhereyouplaceallyourimages.Thisisoftencalled‘graphics’or‘images’

Codefile:08_Graphics/files/button_register.psd

TASK5-UsingLayersPhotoshopuseslayerstorepresentimages.

Imagesandshapescanbecreatedonlayersandindividuallymanipulated.

Theseparatelayerscanthenbehidden,modified,ormergedtogethertogiveparticulareffects.

Thiscanbeillustratedusingthefile:

layers_exercies.psd

Codefile:08_Graphics/files/layers_exercises.psd

[1]OpentheabovefileinPhotoshop.

[2]Shiftthelayersupanddownthelayerstack.

[3]Turntheeyeiconsonandoff-theeyeiconsareontheleftsidesofthelayers.Whenyoucan’tseetheeyeicon,youcan’tseethelayer.

[4]ExperimentwithopacityatthetopoftheLayerspanel.

[5]SelecttheErasertool,anderasepartsofthelayers.

[6]Ifyouwanttostartover,gotoEdit>Revert.

Usingtheeyeicon,selecttwolayersanddeselectallotherlayers.Inthedropdownlistforblendingoptions,selectMultiplyandseewhathappens.Selectotherblendingoptions

andseewhathappens.

Doubleclickonthelayertodisplaythelayerstyles,andselectsomeoptions.Theselectedoptions,modifythatparticularlayerandarenon-destructive,thatisyoucanjustundothelayerstylestoreverttotheoriginalimage.

CheckingthesizeofimagesKnowingthedetailsofanimageonapageisveryusefulwhenyoutryingtocreateanotherimagetofitthesamearea.

Tocheckthesizeofimagesonawebpage:

[1]RightclickontheimageandthenselectProperties.TheDetailstabwilldisplaytheimagesizeinpixelsandthesizeofthefileitself.

[2]Ifyouwanttodownloadthefile,thenrightclickonitandclickon“saveimageas…”or“savepictureas…”

CreatingrolloverimagesRolloverimageshavebeenusedforyearstoaddinteractiontoawebpage,particularlywithbuttons.Therearevariouswaystocreaterolloverimages,andwewilllookatseveralofthose.

UsingDreamweavertocreatearolloverimageDreamweaverallowsyoutocreaterolloverimageswhichautomaticallycreatesJavaScriptinyourwebpage.

InDreamweaver:

Insert->HTML->RolloverImage

Imagename: Anyname

Originalimage: Entertheurloftheoriginalimage

Rolloverimage: Entertheurloftherolloverimage

Preloadrolloverimage:

TicktheboxmeansthattheJavaScriptthatiscreatedwillincludepreloadingoftheimagessothatitgivesnodelaywhentheimageisdisplayed.

Alternativetext: alttextinthebuttons

Whenclicked,GotoURL: ThedestinationURL

CreatetwobuttonsusingPhotoshop[1]InPhotoshop,createanewfile70pxby30pxwithatransparentbackground.

[2]Usetheroundedrectangletooltocreateabuttoneffectthatfitstheentireimagearea.

[3]Inthelayer,doubleclickonthesquareimagetodisplaythecolorpallet.

[4]Chooseasuitablecolorsuchasalightgrey.

[5]DoubleclickontheshapetodisplaytheLayerStyle.

[6]CheckBevelandEmbossandcheckContour.

[7]SelecttheTexttoolandtypeintheword“home”usingasuitablesizedfontandstyle.

[8]SavethisasaPhotoshopfile.

[9]SelectSaveforweb&DevicesandsavethisasButton_Original.png

[10]GobackintotheStylesLayerandselectBevelandEmbossandchangetheangleto-30degrees

[11]SelectSaveforweb&DevicesandsavethisasButton_Rollover.png

Codefile:08_Graphics/files/Button_Original.png

Codefile:08_Graphics/files/Button_Rollover.png

Codefile:08_Graphics/files/Button_Rollover.psd

Codefile:08_Graphics/files/button_rollover.html

NowthatyouhavethetwobuttonsyoucangointoDreamweaverandcreatearolloverbuttoneffectbyselectingtheOriginalimageandRolloverimage.

IfyoulookatthecodethatthishasbeencreatedyouwillfindquiteaconsiderableamountofJavaScript.Thisisonetechniquewhichgivestheeffectbutitisprobablyalittledated.ThefollowingmethodusesCSSgivethesameresultandinsomewaysismoreconcise.

TASK6-CreatingarolloverusingCSSThismethodusesonlyCSSstyleswhichhassomeadvantagestotheabovemethodthatusesJavaScript.ItissimplertoimplementandthewebpagedoesnothavetodownloadanyJavaScriptcode.

Thebuttonthatwearegoingtouseisbuy_now.pngwhichifyoulookatitconsistsofthe“over”and“normal”imageononefile.

TheCSSworksbyshiftingtheimagehorizontallyandhencewehavetoknowtheimagestylewhichis110pxby35px.

Inawebpageyouwillneedthefollowingstyle:


a.rollover{

display:block;

width:110px;

height:35px;


background:url(“buy_now.png”);

}

a.rollover:hover{

background-position:-110px0;

}

</style></style>

Andinthebodyyouwillneedtheclass“rollover”

<ahref=”#”class=“rollover”title=“BuyNow”></a>

Codefile:08_Graphics/files/buy_now.html

Codefile:08_Graphics/files/Buy_Now.psd

Codefile:08_Graphics/files/buy_now.png

ExerciseinBackgroundImagesTheCSSbackground-imagepropertyallowsyoutoaddabackgroundimagetoanyHTMLelementwhichincludesapageusingthe<body>tag.

Thiscanbeanentirepage,oritcanbeapartofpage.Bydefault,abackgroundimagewillrepeattofilltheentireelement.

TASK7-Backgroundbodyimage[1]CreateanewHTML5webpagecalledbackground01.html

[2]Findtheexampleimageflowers.gifinthecoursematerialforthisChapter.

[3]IntheheadoftheHTMLpage,createastyleasfollows:


body{

background-image:url(“flowers.gif”);

color:black;

padding:20px;

font-family:Baskerville,“PalatinoLinotype”,Palatino,“CenturySchoolbookL”,“TimesNewRoman”,serif;

}

</style>

[4]Inthemainbodyofthewebpage,copythebodytextfromthetextfilegrasses.txtfromthecoursematerialforthisChapter.

[5]Formatthetextwith<h1>tagforthemaintitle,<h2>tagforthesecondarytitlesand<p>foreachoftheparagraphs.

[6]Viewtheresultingwebpageinyourbrowseroruploadtothewebserverandtestitonyourwebserver.

Codefile:08_Graphics/files/background01.html

TASK8-CreatingabackgroundimageInthisexercisewewillcreateanimagewhichisthinstripandwhichisrepeatedinahorizontaldirection.Backgroundimagescanbemadetorepeatonlyinonedirectionornottorepeatatall.

[1]InPhotoshop,startanewimagewidthof5pixelsandheightof100pixels.Itshouldhaveawhitebackground.

[2]Selectthegradienttoolwhichshouldgofromtransparenttoasolidcolorsuchasblue.Dragthegradienttooldowntheimagesothatyouhavewhiteatthetopandthesolidcoloratthebottom.Insteadofagradient,youcouldputapatternbydoubleclickingonthelayerandselectingPatternOverlay.Youshouldbeabletoselectdifferentpatternsfromthepatternbox.Youmayalsowanttosettheopacityoftheimagetosomethinglike70%.

[3]Savetheimageasawebpngfilesavingitasvert.png

[4]Copythewebpagebackground01.htmltoanewwebpagecalledbackground02.html

Changethestyletothefollowing:


body{

background-image:url(“vert.png”);

background-repeat:repeat-x;

background-color:#3399cc;

color:black;

padding:20px;}

</style>

[5]Inthisexample,Ihavesetthepagebackgroundtothesamesolidcolorasthegradientcolor.ThenIhavesettherepeatdirectiontothehorizontaldirectiononly.Displaytheresultinthebrowser.

TASK9-BackgroundpositionWhenanimageisnotbeingrepeated,youcanusethebackgroundpositionpropertytospecifywhereinthebrowserwindowtheimagewillbeplaced.

[1]Findtheexampleimagehtml5_logo.jpgfromthecoursematerialforthischapter.

[2]Copybackground02.htmlpagetoanewwebpagecalledbackground03.html

[3]Replacethestylesheetwiththefollowing:


body{

background-image:url(“html5_logo.jpg”);

background-repeat:no-repeat;

background-position:centertop;

color:#665544;

padding:20px;}

</style>

[4]Displaytheresultsinyourbrowser.

Thepositionofthebackgroundinthiscaseisdefinedbybackground-position,whentheimageisnotbeingrepeated.

Experimentwithbackground-positiontosetthepositionasappropriate.Notealso,thatyoucansetthepositionas%so:

background-position:centertop;

isthesameas:

background-position:50%50%;

PreparingandsavingimagesforthewebUsingimagesonawebpageisessentiallyanoptimisingprocess.Differentdisplayshavemanyfactorswhichchangetheappearanceoftheimage:contrast,depthofcolors,viewingangleandsoon.Wecanapplyfiltersandmakeadjustmentstoanimagesothatitlooksreasonablethesameondifferentdevices.

TheseexercisesusePhotoshopbutyoucandothemjustaswellinothereditorssuchashttp://pixlr.comwhichseemstoworkbestinFirefox.

[1]BringanimageintoPhotoshopLoadanimageintoPhotoshopwhichshouldbeonethathasbeentakenfromacamera.

[2]SetMonitorRGBCertaincolorprofiles,likeCMYKaremadetoworkbetterinprint,whileRGBworksbestfortheweb.

OpenuptheviewmenuandclickonProofColorstoturnontheproofcolorsfunction.

NowselectView->ProofSetup->MonitorRGB

Youwillneedtodothiseachtimeyoucreateanewfile.

[3]CroptheimageCroptheimageusingcroptooltoremoveunwantedpartsoftheimage.Dragthecroptoolaroundtheareathatyouwanttokeep.

[4]Re-sizetheimageSelectingImage->Imagesizeshowssizeofimage

Photosforthewebmustbeofreasonablesizesothatviewersareabletoseeyourartwork,butthefilesizemustnotbelargeastheywilltakelongertodownload.

Wecanconsiderthe“size”ofyourphototobemeasuredintermsofdimensions,resolutionsandfilesize:

-Dimensions,usuallyexpressedinpixels,forexample500pixelsx400pixels.

-Resolution,expressedinppi(pixelsperinch).Weareaimingforaresolutionof72ppibecausecomputerscreensdonotnormallyhavehigherresolution.

-Filesize,usuallyexpressedinkilobytes(KB).Thesizeisdependsonthedimensions,resolution,detailandcolorstheimage.

Generallywewantaphototobeviewedonacomputerscreenwithoutscrolling.Soagoodmaximumsizewouldbe800pxwideby600pxhigh.

Ifyouarecreatingimagesforotherdevicessuchastabletsorphonesyouobviouslyhavetotakeintoaccounttheirtargetsizes.Quiteoftenwithsmallerdevices,onewaytodealwiththemistocreatecroppedversionsofthelargersizeimage,ratherthantryingtoshrinkthewholepicture.

Withmobilephones,sizeisgoingtobeevenmoreimportantasphonesdonothaveashighdataratesasadesktopPC.

[5]Createthere-sizedimageIntheImageSizeboxasshownabove,first,makesurethatthe“ConstrainProportions”and“ResampleImage”boxesarechecked.UsuallyselectBicubicorBicubicSharperastherenderingengineforshrinkingtheimages.BicubicSharperisagoodchooseforsharpeningtheimage.Makesurethat“Resolution”isat72pixels/inchifnotalreadyset.

Last,settheimagedimensionsandasthe“ConstrainProportions”boxischecked,Photoshopautomaticallychoosesthecorrespondingheight.

PressOKtoresizetheimage.

[6]Filteringtheimage

Thefollowingfourpointsmayormaynotberequireddependingontheimage.Theseapplyfiltersandadjustmentstotheimagetomodifycontrastandlevels.

[a]ClickonMoonsymbolonlayersandselectcurves-itcreatesalayerandyoucanadjustthecontrast.NormallyyouadjustittolooklikeanS-curve.

[b]ClickonPhotoFilter…andaddawarmingfilterorotherfiltertotheimage.

[c]Clickonlevels,whichallowyoutomakesomeadjustmentstothelevels.

[d]ClickonBrightness/Contrastwhichallowsyoutomakesomeadjustmentstothebrightnessandcontrast.

[7]SharpenyourimageWhenyouoptimiseafileforawebpage,itusuallybecomesmuchsmallerthantheoriginalandinthecompressionprocessyoumayfindsomeblurring.

YoucansharpentheimageusingaPhotoshopfilter.

Fromthetoolbar,selectFilter,thenSharpen,thenUnsharpMask

ThisdisplaystheUnsharpMaskwindow.

Set“Amount”to200%,“Radius”to0.2pixels,and“Threshold”to0levels.

YouwilloftenwanttoapplytheUnsharpMaskmorethanonce,eachtimesharpeningtheimageuntilitlookscorrect.Youmayapplyittwice,threeorevenfourtimes,butmakesurethatitdoesnotbecometoojaggyastheresultdoesnotlookgood.

[8]AlternativemethodforsharpeningAswithallmethodsinPhotoshop,thereisanotherwaytosharpenanimagebutisamoreadvancedtechniquewhichuseslayermasking.Thismethodcanbemoreselectiveratherthanthegeneralapproachdescribedabovebutismoretimeconsuming.

FirstduplicatethelayerandthenapplyanUnsharpMasktothelayerandsharpentheimage.

Nowcreatealayermaskusingthemarquetool,andusingthepaintbrushtoolmaskoutareasthatshowover-sharpening.Usingthepaintbrushtoolatreducedopacity,reducethesharpeningeffectonselectedareas.Orsetthepaintbrushopacityto100%toremovethesharpeningeffectcompletelyfromselectedareas.Youcancontinuetofinetunetheimagetogivethedesiredeffectandgivethebestquality.

[9]SavethefileSelectFile->SaveforWebwhichwilldisplayasetofscreenimagesatdifferentconfigurations:

ForlaterversionsofPhotoshop,thiscomesundertheFile->Exportsubmenu.

TheSaveforWeballowsyoutomakemanyconfigurationchangeswhichchangethefilesizeoftheimage.Asyoumakethechangesyoucanmonitorhowitaffectsthefilesize.

InthisexamplewewillselectJPEGformatasthefiletype.Youcannowselectthe“Quality”oftheimagewhichisanumberupto100.NoticethatifyouselectPNGfiletypeyouwillnothavethatconfigurationoptionbecauseyoucannotchangethequalityofaPNGfiletype.

AsyouchangetheQualityvalue,thefilesizereducesbuttheimagequalityreducesaswell.Thisisimportantassmallerfilesizeswillbequickertodownloadontothedevice.Theresolutionandthecolorrenditionofdifferentdevicesusuallymeanthatanyreductioninqualitywillnotbenoticed.

Iusuallytryforaqualityof60upwards.Mostimagesshouldnotbemuchmorethan40Kbytesinfilesizeunlessitisabigimage.Youalsohavetotakeintoaccounthowmanyimagesareonthewebpageasthetotaldownloadsizewillbegreaterthemoreimagesyouhave.

Theotherfactoryouwillwanttotakeintoaccountiswhatdevicetheimagewillbedisplayedon.Ifitisamobilephonedevicethenyouwillcertainlyneedanimageoflowfilesizeasthebandwidthformobilephoneswillbeless.

TheSaveforWebwindowhasthefacilitytoshow4versionsoftheimagewhichallowsyoutopreviewyourselection.

Onceyouhavefinalisedtheimage,clickon“Save”tosavetheimagetoyourcomputer.

[10]AddyourimagetoawebpageYoucannowaddtheimagestooneofyourwebpagestotesttheresultsinabrowser.Youmaywanttotestyourimagesondifferentdevices,desktopcomputer,tabletandsmartphone.

SummaryThischapterhaslookedatcreatingimages,buttonsandbackgroundsusingPhotoshop.Ifyoulookingtomakeacareerinwebdevelopment,youwillfindthatPhotoshopisthestandardingraphicdesign.ItisalwaysworthtryingtodoacourseonPhotoshopifyoucan.

9Layouts


*Layoutconcepts.*Goodandbaddesignpractices.*Awebsiteproject.

Websitedesignrequiresacertainmindsettounderstandwhatavisitorwillfindattractiveandhencewillkeepthemonyoursite.Thisincludesconceptssuchascolorharmony,attractivepositioningofimagesandcontent,goodnavigationandsiteorganisation.Thischapterlooksattheseideas.

PageSizes·Pagesareusuallyaimedat960to1000pixelswhendesigningfordesktopcomputers.

·Recenttrendsaretoresponsivewebdesignwhichuselayoutsthatadjusttobrowsersizeanddeviceandwhereelementsaremodifiedtooptimisefortheparticulardevice.

·Afixedwidthlayout-elementscanbeaccuratelycontrolledbutcangetlargegapsparticularlyaroundtheedgesofthewebpageanditwillnotworkwellondevicesthatarenotabletodisplaythedefinedwidth.

·Aliquidlayout-pagesfillthesizeasthebrowserchangessizeandisgoodfordesktopdisplaysbutonlyreallyworksifusedwithresponsivetechniques.

Mobiledevicespresentparticularproblemsindesign:-thesizeoftheimageinpixelheightandwidthneedstobeappropriateforthedevicesize.-thephysicalsizeofimagesinbytesneedstobekeptaslowaspossibleasmobiledownloadspeedsarenotasgoodasfixedlines.-menuscanbeanissueparticularlywithdropdowntypesontouchscreens.

Generallayoutsconcepts

TraditionalAspects:

Therearemanyconceptstolayoutbutwecanconsiderthefollowing:

·Agridlayoutsystem–positioningitemsonawebpagecanbedifficultifyouhavenoinbuiltstructureonyourpage.However,thereareanumberofgridsystemstylesheetsthatyoucandownloadfromtheinternetsuchhttp://960.gs/.Thesegridsystemsmakeplacementoftextandimagesmucheasier.Responsivedesignframeworkshaveagridsystembuiltin.

·Astandardcolorscheme–theideawithdefiningacolorschemeistogiveharmonythroughoutthedesign.Thecolorsthatyouselectcangiveacertainimpressionsuchaswarmorcool.Thereareanumberofwebsiteswhichhaveinteractiveapplicationswhereyoustartwithabasecolorandtheapplicationthenshowsasetofcomplimentarycolors.

Anexampleofacolorwheelisshownhere:

http://paletton.com/

Choosethecolorschemeandthenchoosecoldorwarmandthenclickexport.

·Ahierarchyofinformation-yourpagesneedtobelogicalinthewaythattheyaregroupedusingmenuandsubmenus.Theuserneedstoeasilybeabletoseewheretheyareinthehierarchyofthewebsite.Thiscanbeachievedusingamenusystemwhichhighlightsthecurrentlocation.Itmayalsohavea“breadcrumb”system.Thisbecomesmoreimportantthelargerthewebsite.

Sitedetails:

·Achoiceofcleanandlegiblefonts.

·Stylizedicons.

·CSSbuttonswithorwithoutroundedcorners.

·Subtlegradientsinbuttonsandbackgrounds.

·LinkstoFacebook,Twitter,emailetc.

·Contactformswithborderaroundgroupsofinputboxes.

·Useofroundedcorners.

·Clearstrongphotosandimages.

Anexampleofthiskindofsitewouldbehttp://getflow.com

Colortheory?Wecanthinkofcolortheoryas:

Complementary-thewayweseecolorsinrelationshipwithothers.Contrast-thewayweseehowonecolorcompareswithanother.Vibrancy-definesthebrightnessorloudnessofthecolors.

HowtoselectcolorschemesTherearevariousapproachestogettingalistofsuitablecolors.Websitessuchashttp://paletton.com/lookatthefollowing:

Triadic-thisiswherewehavethreecolorsatseparateendsofthespectrumComplementary-weselectarangeofcomplementarycolorsAnalogous-theseareselectionswiththesameareaofthecolorscheme

Foreachwemovetheselectionsandexportourresults.

http://getflow.com

http://paletton.com/

WebDesign-GoodPractice

GoodWebPages·Containscontentthatisusefulandrelevanttothesubjectanddoesnotduplicateor

copymaterialfromothersources.

·Havechanginganduptodateinformationintheformofblogsornewsitems.

·Providescontentandmaterialaimedatthesubjectaudienceofthewebsite.

·Includescontactinformation,linkstosocialmediaandwaysforthevisitortointeractwiththesiteowner.

·Haveapageaboutthecompanyorindividualwhoownsthesite.

·Havepagesthatarewellorganizedandeasytousewithgoodnavigationtohelpthevisitor.

·Usesimages,photosandiconstocomplimentthetext.

·Usesfontsthatareofagoodsizeandcontrast.

·Haveallpagesthatareconsistentintheirdesignanduseofstylesandlayouts.

BadWebPages·Usesfontcolorsandbackgroundswhichrenderthemillegible.

·Havelinkstopagesthatareoutofdateordon’texist.

·Havetoomuchortoolittlecontactonapage.

·Overusetheplacementofsearchkeywordsinthetext.

·Haveconfusinghierarchyofmenuswhichhidethestructureofthesite.

·Donothaveaclearpurposeforthesite.

·Havetitlesandheadingthataremisleading.

·Containoutofdateinformation

·Havenocontactinformation.

·Breakcopyrightlaws.

ResponsiveDesignIfyougoback10years,mostwebsiteswereviewedonthesimilarsizeddevices.Nowadaysthedevicesaredifferentsizesandorientation.

Responsivedesignisthemethodtotrytoovercometheproblemofdifferentdevicesizeswithouthavingtocreateawebsiteforeachdevice.Responsivewebpagesautomaticallyadjusttosuittheparticularwidthofthedeviceusingfluidlayouts,resizableimagesandJavaScript.TwitterBootstrapforexamplehastheabilitytoresizeimageswithintheelementbytheadditionofaspecialclasstotheimage.Imageresolutionisimportanttohelpwithdownloadtimesinmobilecommunications.

WelookatResponsiveDesigninalaterchapterinmoredetail.

Howdowefindalayoutforoursite?Wehavecreatedlayoutsfromscratchinourpreviousexercises,butquiteoftenthisisjustnotpracticalandwefindatemplateontheinternet,eitherpurchasingitordownloadingitfromafreewebsite.Wethenmodifythetemplateforourownpurposes.

Whenyoulookattemplatesthathavebeendevelopedcorrectly,youwillseethattheCSScanbeverycomplex.Itisnotalwaysrealisticforyoutotrytodevelopsomethingfromscratchparticularlywhenitcomestounderstandingtheslightdifferencesinthewaythatparticularbrowsersrenderdifferentstyles.

Therearenowmanysetsof“frameworks”thatyoucandownloadparticularlyforResponsiveWebLayoutswhichyoucanbaseyousiteon,modifyingitandaddingadditionalstylesforyouownparticularpurposes.

Bycarefullyconsideringthewayyousetupyoursite,youshouldbeabletoaddadditionalstyleswithoutalteringthosestylesthathavealreadybeendefined.

Soforexample,youcouldhaveawebpagethatusesastylesheetgiventoyouinadownload.Youcanthensetupanotherstylesheetcalledadditional.css.Youplacethisstylesheetunderneaththefirstoneandthenyouaddyournewstylesoroverridingstylestoadditional.css.Theadvantageisthatifthedownloadedtemplatestyleschangeyoucanupdatethosefileswithoutoverwritingadditional.css.

SomeFreeTemplateSitesIfyouarelookingforCSSlayoutstobaseyouwebsiteon,therearemanysitesthatallowyoutodownloadthecodeforfree.IfyousearchonGoogleforsomethinglike‘csstemplates’itshouldreturnquiteafewthatyoucanlookat.

Herearesomethatgiveagoodselection.

http://www.free-css.com/

Thishasfreelayoutsbutsomearealittleoldsoyoumayhavetomakesurethattheyworkwithmodernbrowsers.

Asanexercise,gotothefreetemplatelistandfind“simplecompany”templatewhichisaresponsivedesignlayoutbasedonTwitterBootstrap.Downloadit,thenextractthezipfileandlookattheindex.htmlfile.

Notethatyoucandoasearchfor“simplecompany”withaResponsivelayout.

http://www.templateworld.com/index.html

Thissitehasagoodrangeoftemplateswhichyoucandownload.

http://www.freehtml5templates.co.uk/

http://www.free-css.com/

http://www.templateworld.com/index.html

http://www.freehtml5templates.co.uk/

ThissiteisallHTML5templates–Thesemayhavealinkbacktotheirsitebutyoucanremoveit.

ResponsiveDesignFrameworks

TwitterBootstrapisaframeworklayoutsystem

http://getbootstrap.com

forversion3

HTMLKickStartisasimplerresponsivedesignframework

http://www.99lime.com/elements/

HTML5Upisanotherframeworktypesystemwhichisalsoaresponsivecsstemplate.

http://html5up.net/

flypixel-Awesumdesignfreebiesbykickassdesignersfromallovertheworld

http://flypixel.com/

http://getbootstrap.com

http://www.99lime.com/elements/

http://html5up.net/

http://flypixel.com/

AWebSiteProjectThissectionlooksathowyoumighttackleworkingtoaspecificationanddesigningawebsitetomeetparticularneeds.

Theoutcomesare:

[1]Createlayout,structureandstylesforawebsiteconsistingofanumberofpagesdependingontherequirements.[2]Usewebsitesoftwaretoolstopreparecontentforawebsite.[3]Publishawebsite.

WebsitespecificationChooseasubjectforawebsite,e.g.asiteabout:

*AonepagejobCV.*Apersonalhomesitewithablog.*Aportfolioofyourworkfromcoursesthatyouhaveattendedwithanindexpage.*Yourdog.*Afavouritefilm.*Aholiday.*Andsoon….

Asanexample,thesitecouldhavethefollowingspecification.However,youcanchangethistofitintoyourrequirementsdependingonthekindofsiteyouaredeveloping.

-Atleast6pages.

-Eachpageshouldhavethesamelayout.

-Thelayoutshouldbeamaximumof750pixelswideandcenteredinthebrowser.The750pixelwideareashouldbedividedintotwocolumnssothattherightcolumncanbeusedasaverticalnavigationbarandtheleftareawillbethemaincontentarea.Youmaywanttochangethislayoutdependingonthetypeofsiteyouareworkingon.

-Theheadershouldhavealogoofsomesort,eitherbuiltfromaPhotoshopimageorusingafontfromGooglewhichwelookatinalaterchapter.Theheadershouldbethesameonallpages.

-Navigationbetweenpagesmayusebuttonswithananimatedmouse-overeffectorconstructedusingaCSSrolloversystem.Everypageshouldhavethesamenavigationsystem.

-Thefootershoulduseasmallerfontthantherestofthepage.

-Defineafontandusethesameforeverything.

-Useasuitablecolorscheme.

Awebsiteconsistingof6pages

GeneralconsiderationsThewebsiteshouldhaveagoodfilestructureinthattheimages,stylesheetsandassociatedfilesshouldbelocatedinrelevantfolderswithsensiblenames.

Eachwebpageandfoldershouldbenamedsothattheymatch‘standardconventions’(nospaces,alllowercaseetc.)

LayoutchoiceYouneedtodecidealayoutusingDIVswhichwillfitintoyourrequirements.Inthisproject,a750pixelwideareahasbeensuggestedbut,youmaymodifythisasyouseefit.Oryoumaywanttolookatdownloadingafreetemplatefromthemanywebsitesthatprovidethese.

UsingWireFramedesignAwireframeisawayoflayingoutwebpagesusingakindofflowdiagram.Itisanapproachthatallowsyoutoseehowpagesarelinkedtogetherandtotestthenavigation.

ThereareanumberofonlinetoolsavailablesuchasLumzy

http://www.lumzy.com/app/

Thisallowsyoutocreatesimplelayoutsandprototypethewebpages.Themoreadvancedprogramsallowyoutohavemultipledevelopersandhaveacertainamountofinteractionsothatyoucandemonstrateyourconceptstoacustomerbeforespendingtimeonthefinalversion.

http://www.lumzy.com/app/

SuggestedPages

[1]index.htmlpageThisisthehomepageorinitialpageofthewebsiteandwilldescribethepurposeofthesite.Thiswillbeeitherindex.html,index.htm,default.html,default.htm.

[2]ProductsorservicespageIfyouaresellingitemsthenyoumayneedtoincorporatebuynowbuttonsfromPayPalwhichcanbeeasilycreatedthroughtheirwebsites.

[3]FAQorCustomerServicesInformationThismaycontaincopyrightdetailsofproductsyoumaybeselling,productreturnspolicy,privacystatements,dataprotectionstatementandsoon.

[4]ContactspageThispageshouldcontainallthewaysinwhichacustomercancontactyou,e.g.emailaddress,telephonenumbersandpostaladdressifrequiredetc.

[5]GallerypageYoumaywantagallerypagewhichcanbeimplementedwithoneofthemanyfreeJavaScriptlibrariesthatcanbedownloadedfromtheweb.

[6]AboutuspageAgeneralpagewhichdescribesyourselforyourcompany.

SitemappageManysiteshaveasitemappagethatisusedtodefinetheURLofeachpageofthesite.Thesitemapcanbecreatedinastandardformatandthensubmittedtosearchengines.

SitenavigationThereshouldbeconsistentnavigationaroundthesite.Thenavigationshouldbeclearastowhichpageyouareonandshouldmatchyourcolorscheme.

SiteoptimisationandsubmissiontosearchenginesIdentifykeywordsthatyouthinkvisitorswillusetogettoyoursite.Createtitles,<h1>tagsandcreatetextthatreflectsthepurposeofthesite.Submittosearchengines,setupGoogleanalyticsandusewebmastertoolstomonitorthewebsite.

ThingstoconsiderItdoesmakeiteasierifyouhaveaclientthatrequiresawebsiteratherthanyoubeingtheclientanddesigner.Havingaclientmeansthattheycantellyouwhattheyrequire.

WheredoIgetmyimagesfrom?Googlehasendlessimageswhichcanbeused,howeveryouhavetobeawareofcopyright–youcansearchGoogleforimageswithnocopyrightbyfirstloadingupGoogleandclickingonImagesbutton.Thendoasearchandintheresultsafurthermenuwillappear.Clickon“Searchtools”andamenubarwillappearwhereoneoftheoptionsistoselectusagerights.Fromthereyoucanfilterbyusagerights.

Thereareothersourcesofimagessuchasflickrandstocksnapwebsites.

Notethatyouneedtocheckthelicenceforthephotostomakesurethattheyarefreetodownload,modifyanduseasyouwantusuallyunderoneofthecreativecommons.orglicences.

Howmanypagesshouldthesitehave?Ifthesitegrowsyouwillneedtoworkouthowtoaccommodatethepagesinamenusystemoryoumaywanttojustkeeptoafewpages?

Whatlayoutshouldthesitehave?Youmaywanttocreateyourownlayoutormodifyanexistingone.

HowdoIresearchothersimilarwebsites?YoucansearchGoogletolookatexamplesofotherpeople’swork.

SummaryThischapterhaslookedassomeissuestodowithdecidingonalayout.Therearemanyexamplesontheinternettobaseyoudesignonandyoucandownloadtemplateswhichyoucanthenmodify.

10AddingFunctionality


*AddingWebFonts,GoogleandAdobe*IntroductiontoJavaScript.*IntroductiontoJQuery.*AddingmoviesandaudiotoWebPages.

Thischapterisamiscellaneousgroupoftopicsthatcanbeusedtoimprovetheappearanceandfunctionalityofwebpages.Itlooksatusingexternalfonts,JavaScriptandJQuery.

WebFontsfromAdobeandGoogleTherearelimitedfontsthatcanbeusedonwebpagesbecausethereisonlyarelativelysmallsetofcorefontsthatareavailableonallcomputers.Therearewaystoaddfontstopages:youcancreatethemasagraphicimageanduseanyfontyouwant.However,themethodisnotpracticalifyouhavetodoitforeveryh1elementonyourwebsite.

OnesolutionthathasbecomepopularistheuseofexternalfontsthataremadeavailableusingCSS.BothAdobeandGooglehaveasetofthesefontsthatyoucanaddtoyourwebpagesfornocost.

GoogleFontsGooglefontscanbefoundathttp://www.google.com/fonts/

Usingthefontsisveryeasy:

·Chooseaparticularfontthatyouwant

·Clickonthe“Quickuse”button

·Copythegivestylesheetandaddinto<head>ofyourwebpage.

·Copythefontfamilydefinitionnameandaddtothestyle.

Forexample:

ThefontCarroisGothicSCgivesastylesheetas:

<linkhref=‘http://fonts.googleapis.com/css?family=Carrois+Gothic+SC’rel=‘stylesheet’type=‘text/css’>

Integrateyourfontsintothestyleswithsomethinglike:

h1{font-family:‘CarroisGothicSC’,sans-serif;

font-size:36px;

}

Codefile:10_Adding_Functionality/files/google_font_example.html

Notethatitmaynotworkinallbrowsersbutitwilldropbacktoadefaultappearanceifthebrowserisnotabletosupportit.

Youshouldbeawarethatanyfontwillincreasethetimetoloadthepage,soyouwouldnotaddtoomanydifferentfontsontothesamewebpage.

Googledocumentation

https://developers.google.com/fonts/docs/getting_started

ThispageprovidesyouwithadescriptionofGooglefontsandhowtousethem.

Inparticular,notethebetafeatures:

https://developers.google.com/fonts/docs/getting_started#Effects

Thesearefonteffectsthatareavailable,buttheydonotworkonallbrowsers.Eachfonthasalistofcompatiblebrowsers.

AdobeEdgeWebFontsAdobehasasimilarsystemwhichislocatedathttps://edgewebfonts.adobe.com/

·Choosethefontthatyouwant.

·CopythegivenJavaScriptfiletothe<head>ofyourwebpage.

·Copythefontfamilydefinitiontothestyle.

Forexample:

Forthe‘asset’fontfamily,theJavaScriptis:

<scriptsrc=”//use.edgefonts.net/asset.js”></script>

Thefontfamilyisthenaddedtothestylesheetlikethefollowing:


h1{

font-family:font-family:asset,serif;

font-size:36px;

}

</style>

Codefile:10_Adding_Functionality/files/adobe_edge_font_example.html

AswithGooglefontstherewillbeapayloadaddedtothewebpage,soyouwouldnotaddtoomanydifferentfonts.

TASK1–Addsomefontstoyourownwebpage.Findawebpagethatyouhavebeenworkingonandaddawebfonttoit.Youmayfindthatitisbettertousethewebfontsformainlogotextorheadingratherthanforparagraphelements.

https://developers.google.com/fonts/docs/getting_started

https://developers.google.com/fonts/docs/getting_started#Effects

IntroductiontoJavaScriptInthisbookwewillnotbeteachingJavaScriptbutitisanimportanttohaveanideaofitspurposebecauseitisusedonmanywebpagesespeciallyinJQuery.

WhatisJavaScript?JavaScriptisaprogramminglanguagewhichrunsonyourPC,tableorsmartphone.Theprogramscriptisdownloadedwithawebpageontoyourcomputer.YoucreateJavaScriptonthewebpageandyoucanhaveseparateJavaScriptfiles.

WhatisJavaScriptusedfor?JavaScriptisusedtogivetheeffectsthatwelikeonmodernwebpagessuchasgalleryslideshows,givingfeedbackonformswhenyouenterdata,controllingHTMLelementsonthewebpageandsoon.

HowdoweuseJavaScript?JavaScriptcodeiswritteninthewebpageitself.WeoftenuseexternalJavaScriptfiles(jsfiles)toaddthescriptstothewebpage.

AsimpleexampleofJavaScript[1]Createanewwebpagecalledjavascript.html

[2]Giveitanappropriate<title>

[3]Underneaththe<title>…</title>taginsidethe<head>…</head>tagsenter:

<scriptlanguage=“javascript”type=“text/javascript”>

alert(“AJavaScriptPop-up”);

</script>

WhenyouputJavaScriptintotheheadofawebpage,youalwayshavetoidentifyitasascriptinthisway.

[4]Inthe<body>…</body>tagsyoucanenteranytextthatyouwant.

[5]Runyourwebpageinthebrowserandyoushouldgetanalertmessageonyourpage.

<!DOCTYPEHTML>

<html>

<head>


<title>AJavaScriptPage</title>

<scriptlanguage=“javascript”type=“text/javascript”>

alert(“AJavaScriptPop-up”);

</script>

</head>

<body>

<h1>AnexampleofJavscript</h1>

</body>

</html>

Codefile:10_Adding_Functionality/files/javascript.html

UsingJQuery

WhatisJQuery?JQueryisbasedonJavaScriptwhichisaclientsideprogramminglanguagethatrunsinthewebbrowser.Inthepast,thishascausedproblemsasdifferentbrowsersimplementbrowserstandardsdifferentlyandhenceyouhadtowriteandtestcodefordifferentbrowsers.

JQueryisaJavaScriptframeworkwhichusesasetofpre-definedfunctionscompatiblewithmodernbrowsers.WhenyouuseJQueryyoucanbeconfidentthatitwillworkonthemajorityofbrowsersthatarebeingusedtoday,andasnewversionsofbrowsersarereleasedthebaseframeworkwillbeupdatedtoensureitworkswiththoseaswell.

ThissectiongivesabriefintroductiontoJQuery

UsesofJQuery*CreatingformstodocalculationsontheclientPC*Validatingdatabeforedataissubmittedtoadatabase*Creatingdisplaysthatgiveabetteruserexperience,forexample,displayingerrormessagesindatavalidation*Usingtheuserinterfacepluginsuchasaccordion,datepicker,progressbarandsoonasshowninhttp://jQueryui.com/andotherwebsitessuchashttp://jquery-plugins.net/*Usingthemanypluginsthathavebeendevelopedbyotherdevelopers*DevelopingAJAXapplications

IncorporatingJQueryTherearetwowaystoincorporateJQueryscriptintoawebpage,thefirstmethodistodownloadtheJavaScriptfilefromtheJQuerywebsiteandincludeinasalinkedfile,andthesecondmethodistouseahostedJavaScriptfilewhichislinkedontoyourwebpage.

Soforexampletoincludejqueryfromanexternalhostedsystem,use:

<scriptsrc=“http://code.jquery.com/jquery-1.8.3.js”></script>

http://jqueryui.com/

AnillustrationofJQueryInthistutorialwewillnotgointothedetailsofJQuery,howeveritispossibletocreateworkingexamplesveryeasilyfromtheJQueryuserinterfacewebsite.

Thesite


includesanumberofcommonUserInterfaceswhichyoucanincorporateintoyourownwebsitewithminimumeffortandverylittleprogramming.Infactyoudon’tactuallyneedtounderstandJQuerytobeabletousetheseinterfaces.

Youshouldbynowknowenoughaboutthestructureofawebpage,andbeabletoreadexamplewebpagesandthenplacethatcodeintoyourownwebpages.TheseJQueryexamplesrequireyoutodothat.

UIAccordioninterfaceAsanexample,wewillusetheAccordioninterfacewhichisillustratedbelow.Justcopyandsaveasanhtmlpagecalledaccordion.html.Thisexamplecomesfromhttp://jqueryui.com/accordion/whichlistsallthevariousoptionsavailable.

Clickheaderstoexpand/collapsecontentthatisbrokenintologicalsections,muchliketabs.Optionally,togglesectionsopen/closedonmouseover.

TheunderlyingHTMLmark-upisaseriesofheaders(H3tags)andcontentdivssothecontentisusablewithoutJavaScript.

<!doctypehtml>

<htmllang=“en”>

<head>

<metacharset=“utf-8”/>

<title>JQueryUIAccordion-Defaultfunctionality</title>

<linkrel=“stylesheet”href=“http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css”/>


<scriptsrc=“http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script>

<script>

$(function(){

$(“#accordion”).accordion();

});

</script>

</head>

<body>

<divid=“accordion”>

<h3>Section1</h3>


http://jqueryui.com/accordion/

<div>

<p>

Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.Namanibh.Donecsuscipiteros.Nammi.Proinviverraleoutodio.Curabiturmalesuada.Vestibulumaveliteuantescelerisquevulputate.</p>

</div>

<h3>Section2</h3>

<div>

<p>

Sednonurna.Donecetante.Phaselluseuligula.Vestibulumsitametpurus.Vivamushendrerit,dolorataliquetlaoreet,mauristurpisporttitorvelit,faucibusinterdumtellusliberoacjusto.Vivamusnonquam.Insuscipitfaucibusurna.</p>

</div>

<h3>Section3</h3>

<div>

<p>

Namenimrisus,molestieet,portaac,aliquamac,risus.Quisquelobortis.

Phaselluspellentesquepurusinmassa.Aeneaninpede.Phasellusaclibero

actelluspellentesquesemper.Sedacfelis.Sedcommodo,magnaquislaciniaornare,quamantealiquamnisi,euiaculisleopurusvenenatisdui.</p>

<ul>

<li>Listitemone</li>

<li>Listitemtwo</li>

<li>Listitemthree</li>

</ul>

</div>

<h3>Section4</h3>

<div>

<p>Crasdictum.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Aeneanlacinmaurisvelest.</p>

<p>

Suspendisseeunisl.Nullamutlibero.Integerdignissimconsequatlectus.

Classaptenttacitisociosquadlitoratorquentperconubianostra,perinceptoshimenaeos.</p>

</div>

</div>

</body>

</html>

Codefile:10_Adding_Functionality/files/accordion.html

MenuInterfacejqueryuiincludesamenusystemasdescribedathttp://api.jqueryui.com/menu/

Copythefollowingtextintoanhtmlpagecalledmenu.html

<!doctypehtml>

<htmllang=“en”>

<head>


<title>menuexample</title>

<linkrel=“stylesheet”href=“http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css”>

<style>

.ui-menu{

width:200px;

}

</style>


<scriptsrc=“http://code.jquery.com/ui/1.10.2/jquery-ui.js”></script>

</head>

<body>

<ulid=“menu”>

<li><ahref=”#”>Item1</a></li>


<li><ahref=”#”>Item3</a>

<ul>

<li><ahref=”#”>Item3-1</a></li>





</ul>

</li>



</ul>

<script>

$(“#menu”).menu();

</script>

</body>

</html>

http://api.jqueryui.com/menu/

Codefile:10_Adding_Functionality/files/menu.html

DatePickerOnthewebsitehttp://jqueryui.com/datepicker/thereisanexampleoncreatingadatepicker.Createawebpageandcreatethedatepicker,thenmodifythescripttoaddinthedateFormattogiveaUKformatratherthanthedefaultUSformat.

YouwillneedtolookuptheAPIdocumentationathttp://api.jqueryui.com/datepicker/andlookatthedateFormatmethodtoseehowtodoit.

http://jqueryui.com/datepicker/

http://api.jqueryui.com/datepicker/

AddingmoviestoawebpagesInHTML5theprocessofaddingmoviestowebpageshasbecomeveryeasy.

PreviousversionsofHTMLrequiredpluginssuchasflashbutHTML5introducesthevideotag.

Usethefollowingsyntax:

<videowidth=“320”height=“180”controls>

<sourcesrc=“movie.mp4”type=“video/mp4”>

<sourcesrc=“movie.ogg”type=“video/ogg”>

<sourcesrc=“movie.webm”type=“video/webm”>

Yourbrowserdoesnotsupportthevideotag.

</video>

Thevideotaghasawidthandheightwhichyoushouldalwaystrytodefine,otherwiseyourpagemaychangeitsappearanceifthevideoisofadifferentsizethanyouexpected.

Thecontrolsattributewilladdinthevideocontrolsforyou.

Theotherattributeisloopwhichcausesthevideotoloopcontinuously.

Currently,theformatsthataresupportedarebyHTML5mp4,oggandwebm.

Notethatnotallbrowserssupportallformatssonormallyyouwouldprovidemultipleversionsofthevideointhedifferentformats.

Thefullhtml5pageis:

<!DOCTYPEHTML><html><head>

<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”><metahttp-equiv=“X-UA-Compatible”content=“IE=Edge”/>

<title>Movieexample</title>

</head>

<body>

<videowidth=“320”height=“180”controls><sourcesrc=“movie.mp4”type=“video/mp4”><sourcesrc=“movie.ogg”type=“video/ogg”>Yourbrowserdoesnotsupportthevideotag.</video>

</body></html>

Codefile:10_Adding_Functionality/files/movie.html

NoteforittoworkinIE9youhavetoput

<metahttp-equiv=“X-UA-Compatible”content=“IE=Edge”/>

Intheheadofthewebpage.

AddingaudiotoawebpagesInHTML5theprocessofaddingaudiotowebpageshasbecomeveryeasy.

PreviousversionsofHTMLrequiredpluginssuchasflashbutHTML5introducestheaudiotag.

Usethefollowingsyntax:

<audiocontrols>

<sourcesrc=“mp3_03.mp3”type=“audio/mpeg”>

<sourcesrc=“mp3_03.mp3”type=“audio/ogg”>

Yourbrowserdoesnotsupporttheaudioelement.

</audio>

Thecontrolsattributeaddsintheaudiocontrolsforyou.

Currently,theformatsthataresupportedarebyHTML5mp3,wavandogg.

Notethatnotallbrowserssupportallformatssonormallyyouwouldprovidemultipleversionsoftheaudiointhedifferentformats.

Thefullhtml5pageis:

<!DOCTYPEHTML>

<html>

<head>


<metahttp-equiv=“X-UA-Compatible”content=“IE=Edge”/>

<title>Audioexample</title>

</head>

<body>

<audiocontrols>

<sourcesrc=“mp3_03.mp3”type=“audio/mpeg”>

<sourcesrc=“mp3_03.mp3”type=“audio/ogg”>

Yourbrowserdoesnotsupporttheaudioelement.

</audio>

</body>

</html>

Codefile:10_Adding_Functionality/files/audio.html

SummaryThischapterintroducedmethodstoaddfunctionalitytoyourwebpagebylookingatexternalfontsystemsandJQuery.Theseaddanextratouchtoyoursitewhichmakeitlookmuchmoreprofessional.Youdon’thavetobeaprogrammertouseJQueryasdevelopershavecreatedapplicationsthatcanbeaddedtoyourwebsitebycuttingandpasting.

11.htaccessFiles


*Whatcanbedonewithan.htaccessfile.*Exampleof.htaccessfiles.*Passwordprotectwitha.htpasswdfile.*Pagestatuscodes.

ThischapterisnotactuallyaboutHTMLoranythingtodowithHTMLpagesbutisaboutaspecialfilethatisusedonApachewebservers.Itisaveryusefulfileandprovidesmanyfeaturessuchasredirectingpagesfromonelocationtoanotherordefiningacustom404errorpage.Thegreatthingaboutitisthatitisatextfileandcanbeeasilycreated.

Thefileis.htaccess

NOTEthefullstop(.)atthefrontofthefilename.

NOTEthat.htaccessfilesonlyworkonLinuxtypewebservers,notonWindowswebservers.

Oneuseofan.htaccessfileisthatitcanbeusedfor301redirectswhichtellawebbrowserthatthepagehasadifferentfilenameorfoldername-itisusedinsituationswhereyoumoveapageandyouwantGoogletocorrectlyunderstandthemove.

AsanApacheserverconfigurationfile,.htaccessisverypowerfulbuteventheslightestsyntaxerrorlikeamissingbracketcanresultinyourwebsitenotdisplayingcorrectlyoratall.

Since.htaccessisaconfigurationfile,makesureyourFTPclientisconfiguredtoshowhiddenfiles.Thisisusuallyanoptionintheprogram’spreferences/options.

Whenyoucreatethe.htaccessfile,youwillneedtouploadittoyourwebserver.Oftenthefileislocatedattherootofthewebserver,buttheremaybesituationswhereyouonlywantittoeffectaparticularfolderinwhichcaseitwillgointothatfolder.

Thingsthatcanbedonewithan.htaccessfile·PermanentlyredirectortemporarilyredirectoneURLtoanother-usefulfor

informingsearchenginesaboutwhichfilestoredirectto

·Preventbrowsersdisplayingalistoffoldersandfilesonyourwebsite.

·Passwordprotectafolderofawebsite.

·Createacustom404errorpage.

Tocreatean.htaccessfile[1]Createanewfilecalled.htaccessonyourlocalPCusingatexteditor.Notethatan.htaccessfilehasadotatthefirstcharacter.

[2]ForaWindowsPCyoumaynotbeabletocreateafilewith.htaccess,socreateafilecalled.htaccesswiththeintentionofuploadingittotheserverandthenchangingthefilenameontheserver.

Examplesof.htaccessfiles

301ispermanentredirect

#Redirectoldfilepathtonewfilepath

Redirect301/oldpage.htmlhttp://www.yoursite.com/newpage.html

302istemporaryredirect

#Redirectoldfilepathtonewfilepath-notnormallyused

Redirect302/oldpage.htmlhttp://www.yoursite.com/newpage.html

Definingacustom404errorpage

#Custom404errorpage

ErrorDocument404/errordocs/error404.htm

Stopusersdisplayingthedirectorylistingofawebsite

#Stopdirectorylistings

IndexIgnore*

Stopusersdisplayingthedetailsofan.htaccessfile

#Stopdisplayingofhtaccessfile

http://www.yoursite.com/newpage.html

http://www.yoursite.com/newpage.html

<Files.htaccess>orderallow,denydenyfromall</Files>

Toprotectyouradminareayoucancreatean.htaccess/.htpasswdfile.Onefeaturethatisquitehandyistheabilitytopasswordprotectanareaofawebsite.Thiscanbedoneusing.htaccess/.htpasswdfiles.Thesystemusing“BasicAuthentication”andprovidessomeprotectiontoyourfolder.

Createan.htaccessfile

Gotohttp://www.htaccesstools.com/htaccess-authentication/

Inthefirstboxentersomeoptionaltextwhichgetsdisplayedintheloginbox

Inthesecondboxyouneedtoenterthefilepathnametoasecondfilehtpasswdfile.Thehtpasswdfileiswherethelistofusers/passwordsistobelocated.

Clickonthebutton,copythetextandplaceitintoatextfile.Namethisfile.htaccessanduploadittothefolderthatyouwanttoprotect.Inthiscasethiswouldbethe/admin/folder.

Anexampleofthisis:

AuthTypeBasic

AuthName“ProtectedArea”

AuthUserFile/admin/.htpasswd

Requirevalid-user

Createthe.htpasswdusername/passwordfile

Gotohttp://www.htaccesstools.com/htpasswd-generator/

Inthefirstboxentertheusername.

Inthesecondboxenterthepassword.

Clickthebutton,copythetextandplaceitintoatextfile.Namethisfile.htpasswdanduploadittoasuitablelocationonyourserver.Thiscanbeanywhereonyourserver,butusuallyinafolderthatisoutsidethewebspace.Thelocationisthesamelocationaswasenteredin(1)above.

Thefolderasdefinedin(1)shouldnowbeprotectedbytheusername/passwordasdefinedin(2)

http://www.htaccesstools.com/htaccess-authentication/

http://www.htaccesstools.com/htpasswd-generator/

paul:$apr1$t/B1YqZj$S6wiKCAcJu.4.eoohNpEF.

PageStatusCodesYoumaybewonderingwhat404pagesareandwhatarepagestatuscodes.

WhenyoumakeaHTTPrequesttoawebserverforawebpage,theresponsefromtheserverwillbeoneofthepagesstatuscodes.Normallythestatuswillbe200whichmeansthattherequestwassuccessfulbuttherearemanyerrorcodes.

Thecodesaredividedupinto:

1xxInformational2xxSuccess3xxRedirection4xxClientError5xxServerError

Thefollowingisabriefdescriptionofmanyofthepageerrorcodesalthoughtheonlyonesyouarelikelytoseeare404(pagenotfound)and500(internalservererror).

Code Meaning Description

100 Continue

Confirmstheclientaboutthearrivalofthefirstpartoftherequestandinformstocontinuewiththerestoftherequestorignoreiftherequesthasbeenfulfilled

101 SwitchingProtocols

InformstheclientabouttheserverswitchingtheprotocolstothatspecifiedintheUpgrademessageheaderfieldduringthecurrentconnection.

200 OK Standardresponseforsuccessfulrequests

201 Created Requestfulfilledandnewresourcecreated

202 Accepted Requestaccepted,butnotyetprocessed

203 Non-AuthoritativeInformation

Returnedmetainformationwasnotthedefinitivesetfromtheoriginserver.

204 NoContent Requestsucceededwithoutrequiringthereturnofanentity-body

205 ResetContent Requestsucceededbutrequireresettingofthedocumentviewthatcausedtherequest

206 PartialContent PartialGETrequestwassuccessful

300 MultipleChoices Requestedresourcehasmultiplechoicesatdifferentlocations.

301 MovedPermanently Resourcepermanentlymovedtoadifferent

URL.

302 FoundRequestedresourcewasfoundunderadifferentURLbuttheclientshouldcontinuetousetheoriginalURL.

303 SeeOtherRequestedresponseisatadifferentURLandcanbeaccessedonlythroughaGETcommand.

304 NotModified Resourcenotmodifiedsincethelastrequest.

305 UseProxyRequestedresourceshouldbeaccessedthroughtheproxyspecifiedinthelocationfield.

306 NoLongerUsed Reservedforfutureuse

307 TemporaryRedirect ResourcehasbeenmovedtemporarilytoadifferentURL.

400 BadRequest Syntaxoftherequestnotunderstoodbytheserver.

401 NotAuthorized Requestrequiresuserauthentication

402 PaymentRequired Reservedforfutureuse.

403 Forbidden Serverrefusestofulfiltherequest.

404 NotFound Documentorfilerequestedbytheclientwasnotfound.

405 MethodNotAllowed MethodspecifiedintheRequest-Linewasnotallowedforthespecifiedresource.

406 NotAcceptableResourcerequestedgeneratesresponseentitiesthathascontentcharacteristicsnotspecifiedintheacceptheaders.

407 ProxyAuthenticationRequired

Requestrequirestheauthenticationwiththeproxy.

408 RequestTimeout Clientfailstosendarequestinthetimeallowedbytheserver.

409 Conflict Requestwasunsuccessfulduetoaconflictinthestateoftheresource.

410 Gone Resourcerequestedisnolongeravailablewithnoforwardingaddress

411 LengthRequiredServerdoesn’taccepttherequestwithoutavalidContent-Lengthheaderfield.

412 PreconditionFailed PreconditionspecifiedintheRequest-Headerfieldreturnsfalse.

413 RequestEntityTooLarge

Requestunsuccessfulastherequestentityislargerthanthatallowedbytheserver

414 RequestURLTooLongRequestunsuccessfulastheURLspecifiedislongerthantheone,theserveriswillingtoprocess.

415 UnsupportedMediaType

Requestunsuccessfulastheentityoftherequestisinaformatnotsupportedbytherequestedresource

416 RequestedRangeNotSatisfiable

RequestincludedaRangerequest-headerfieldwithoutanyrange-specifiervalue

417 ExpectationFailed ExpectationgivenintheExpectrequest-headerwasnotfulfilledbytheserver.

422 Un-processableEntity Requestwell-formedbutunabletoprocessbecauseofsemanticerrors

423 Locked Resourceaccessedwaslocked

424 FailedDependency Requestfailedbecauseofthefailureofapreviousrequest

426 UpgradeRequired ClientshouldswitchtoTransportLayerSecurity

500 InternalServerErrorRequestunsuccessfulbecauseofanunexpectedconditionencounteredbytheserver.

501 NotImplementedRequestunsuccessfulastheservercouldnotsupportthefunctionalityneededtofulfilltherequest.

502 BadGatewayServerreceivedaninvalidresponsefromtheupstreamserverwhiletryingtofulfilltherequest.

503 ServiceUnavailable Requestunsuccessfultotheserverbeingdownoroverloaded.

504 GatewayTimeout Upstreamserverfailedtosendarequestinthetimeallowedbytheserver.

505 HTTPVersionNotSupported

ServerdoesnotsupporttheHTTPversionspecifiedintherequest.

SummaryThischaptergivesanoverviewofthehtaccessfilethatisusedonLinuxtypewebservers.Thistypeoffileallowsyoutodoallkindsoffunctionsthatareusefulwithwebsites,suchasredirectingpages,definingaprotectedareaandsoon.

12SiteSetUp


*Domainnamesandwebspace.*Pagesetup.*SearchEngineOptimisation.*Testingtools.*StructuredDataMark-upandMicrodata

DomainNamesandWebSpaceThissectionlooksatwhatyouwillneedtoconsiderwhenyoupurchaseadomainnameandwebspaceforyourupandcomingwebsite.

Thereareessentiallytwoissues:

1.Domainnameforyoursite.2.TheWebspaceforyoursite.

DomainNameGotoadomainnamelistingsitetoidentifyadomainnamethathasnotbeentakenandisavailabletoregister.Thereareanumberofthesesitessuchaswww.who.is

Youcanusethesesitestoresearchanavailabledomainname.

Enterinyoursuggesteddomainnamee.g.Alfiethedog.com

TryotherTLD(TopLevelDomains)ofsay:

.uk

.eu

.biz

.com

.org

.net

.edu

etc.

ThelistofTLDsisexpandingallthetime.

ConsiderationsforTLD•Whattypeofsiteitis.•Whattypeofserviceitis(.co.ukforUKsitesifitisspecificallyonlyaUKservice.)

AlldomainsareavailableworldwidebutthereisoftenaconceptoflocalisationwithsomeTLD.SoifyouareaplumberinTrowbridge,youwouldwantadomainof.co.ukor.com.ukorsimilarratherthan.org

SomeTLDsarerestrictede.g..eduor.ac.uk

RecentlytherehavebeenareleaseofmanymoreTLDse.g.

.wales

.london

.shop

http://www.who.is

Atthemomenttheseareoftenmoreexpensivethatthenstandardones.

Domainnamesusuallycostabout£10ayear.Ifyoudon’tpayeachyear,thenamebecomesinaccessibletoyouandyoursitestopsworking.Thedomainnameisthenmadeavailableafterafewmonthstoanyonewhowantstoregisterit.

WebSpaceandWebServersItmaybepreferabletopurchasethedomainnamefromthewebhostingcompanyatthesametimeaspurchasingthewebspace.HostingcompaniesmanagealltherequiredconfigurationfortheDomainNametoensurethatitisavailableovertheinternet.

Hostingcompaniesoftendoaspecialofferofgivingyouafreedomainnamewhenyoubuythewebspacealthoughthismayrestrictyouinstayingwiththathostingcompany.

Serverscomeinessentiallytwoflavours:

-Linux(Unixtype)

-Windows

Thereareothertypesbutthesetwotypesaccountforover80%oftheworld’swebservers.

Linuxisopensourceandthereareanumberofimplementationsofthisbutessentiallywecanconsiderthemtobeall‘Linux’based.Asthesoftwareisopensource,thewebhostingisusuallycheaperthanWindowsservers.

LinuxserverswillusuallycomewithPHPscriptinglanguageandMySQLdatabasesasstandardandtheywilloftenhavealargeamountofdiscspaceavailable.Youwillgetacontrolpaneltoadministeryourwebsiteanduploadingoffileswillbywithftp.

LinuxtypeserversmaybeabetterchooseifyouintendtouseWordPress/Joomla

ftp(filetransferprotocol)isamethodtoconnecttoaremoteserverandishowyouuploadanddownloadfilestoyourwebspace.YouwillneedaprogramonyourcomputertodothissuchasFileZillaorDreamweaver.

WindowsserversareobviouslybasedontheWindowsServeroperatingsystemandusuallyhavedotnetprogramminglanguage.Theysometimes,butnotalways,willhavePHPscriptinglanguageandmayhavemySQLaswell.However,MicrosofttendstosupporttheirownversionofdatabasescalledSQLServerwhichcanbeanextracost.

Windowsserverswillalsohaveftpaccessandyouwillneedanftpprogramforthat.

Therearemanyhostingcompaniessoyouwillhavequiteachoice.YoushouldlookforBasicWebHostingratherthanbusinesswebhostingwhichisusuallymoreexpensive.

Thingstoconsiderwhenlookingforwebhosting

Sizeofdiskspace–Thisdefinesthenumberoffilesandimagesyoucanupload.Inpracticeeventhecheapestwebsiteswillprovideplentyofspace.

Bandwidth–Thiswilldefinethenumberofdifferentusersthatcanaccessyoursiteatthesametime.Mosthostingcompaniesnowseemtohaveunlimitedbandwidth.

Backups–Providessecurityforyoufilesincaseyoudeletesomethingortheserverfails.Thismaybeavailableatanextracostsoifyouhaveacheaphostingpackageyoumayhavetomakesureyourfilesarestoreonyourlocalcomputer.

Emailaccounts-Mosthostingaccountswillallowyoutouseyourdomainnameforemailalthoughtheremaybesomelimitonthesizeoftheinbox.However,youcanusuallyredirectthemailtoanotheraccount.

Serversidelanguagesanddatabases–ThiswouldbeadecisionbetweenusinglanguageslikePHP/MySQLanddotnet/SQLserver.UsuallyaPHP/MySQLbasedhostwouldbepreferableforsmallerwebsites.

AfterpurchaseofwebspaceYouwillgetaccesstothewebspaceyouhavepurchasedandwillbegivenftphost,usernameandpassword.

Itmaytakeafewhoursforyoursitetoappearworldwideasthenameserversareupdatedaroundtheworld.

NotesonPageSetUpThissectionlooksatsomeofthepageelementsthatyouneedtobeawareoftoprovidegoodcontenttosearchengines.

Pagedetails

Makesurethatyouusethepage<title>tagsThepagetitletagisimportantandappearsinthesearchresults.Thereisnoparticularrulefornumberofwordsbutitisgenerallyacceptedthatitshouldbearound5to10words.Youcanusekeywordsinthetitlebutdon’toverdoitorotherwiseitwillbeconsideredasspamcontent.

MakesurethepageMetadescriptiontagisusedmetadescription.Googlecandisplaythetitlemetataginthesearchresultssometimes.Thedescriptionshouldbeasummaryofthepagecontentsandisusuallylongerthatthetitle,uptoaparagraphinlength.

<metaname=”description”value=”……………………………………..”>

Notethatthekeywordmetataghasnorealusenowadays.

Headingsandothertags

·Use<h1><h2>etc.tagsinthecorrectordertodefinethepagestructure.

·MakesurethatthepageisasHTMLcompliantaspossible.

·hreflinktextshouldbekeywordrelatedbutnotexcessivethatitlookslikespam.

·Imagesshouldhavetextinthealttags.

·Trytocreatelinksto‘good’qualitywebsites-notspamywebsites.

·Makeyourwebpagestoloadasfastaspossible.

·Don’tduplicatetitletagsonotherpages.

·Don’tduplicatecontentondifferentpages.

·Webpagefilenameshouldbeshortandrelevanttothecontentofthepage

·Domainnamesdonothavetobelongtomatchthesitecontent.

HaveasitemaplinkedfromyourmainhomepagewhichshouldmakesurethatGoogleindexesthepagewhenyouaddnewpages.YoucanalsorequestGoogletore-indexalthoughyouhavenorealcontrolonthat.

SiteNavigation

Makesurethatthereisgoodhierarchyandstructuretoyoursitenavigation:

·Atthetoplevelisyourhomepage.Thiswillhavethemainnavigationmenuandwillbethemostpopularofallpages,andhencehastobeoptimizedforthemost

generalandcompetitivephrases.

·Thesecondlevelcomesfromthemainnavigationmenuwillbeyourtop-levelproductsorservicepageswhichareoftenoptimisedforcompetitivekeywordsintheircategory.

·Anythirdlevelwillbethemorespecificproductorservicepagesandcanbeoptimizedforthenamesoftheproductsorservices.

·Anyfourthlevelwillbeextracontentsuchasblogposts,articles,videos,podcasts,etc.Theyhelpestablishthequalityofyourwebsiteprovidingthatyourarticlesareoriginalandrelevanttoyourwebsiteofcourse.

PageContentGooglewantssitestohave‘good’content.ThesituationthatGooglewantstoachieveisthatthesearchresultsshouldreturnsitesthatarerelevant,goodqualityandauthoritative.Ifyoucreateawebsitethatnoonehasaninterestinlikebellybuttontoday.comthenyouwon’tgetmanyvisitstothatsitenonotmatterwhatoptimisationyoudo.

Thereusedtobeallkindsof‘tricks’thatyoucoulddowhichwhere“blackhat”or“greyhat”methodsbutGooglehascomedownonthosenowsincethePenguinupdateafewyearsbacke.g.puttinghiddentextfortextthatisnotrelevanttothepage.Googleareconstantlymodifyingthesystemsothatpageswhicharedeliberatelyusingspammymethodsarepenalised.

GoogleWebmasteraccountsTheGoogleWebmasterisamustforallwebdevelopers.Itallowsyoulookatstats,404pagenotfounderrors,duplicatetitlesandsoon.

Therobots.txtfilerobots.txtfileisusedtotellasearchenginespecificthings,usuallywhichfilesarenottobeindexedandwilllooksimilartothefollowing:

Anexamplerobots.txtfileis:

Sitemap:http://www.wiltshire.ac.uk/sitemap.xml

User-agent:*Disallow:/dbhelp/Disallow:/download/Disallow:/error/Disallow:/include/Disallow:/induction/

Thefileislocatedintherootofyourwebserver.

GoogleadvertsGoogle,andothersearchenginesallowyoutocreateadvertstoadvertiseproductsonyourwebsite.

YouradvertappearsonGooglesearchresultswhensomeoneusesparticularsearchwords.Whensomeoneclicksontheadvertyouthenarechargedforthatclickthrough.Theamountyouarechargeddependsonyourbidandothercompetitorsbidsforsearchkeywords.

Soyouhavetojudgeifrunningacampaignwillresultinimprovedprofits.Thereisnopointinhavingaclickthroughpricethatendsupinyouspendingmorethanthecostoftheproductthatyouaretryingtosell.

Forexample:

Sayeachclickisaveraging£0.20perclick.

Andyouneed200clickstogetonepurchase.

Soeachpurchasecostsyou£40.

SearchEngineOptimisation(SEO)Thereareessentiallytwotypesofsearchsystems:

1IndexedtypessuchasGoogleandBing.2Humandirectorypoweredtypes.

SEOistheprocesswhereyoumakemodificationstoyourwebpagessothatGoogleandothersearchengineswillreturnyourpageasfarupthetopofthesearchresultsaspossible.AsGoogleisthemostwildlyusedsearchengine,manyoftheconceptsareassociatedwithGoogle.

SEOalsoinvolveshavinglinksfromgoodqualitywebsitespointingbacktoyourwebpagesthatarerelevanttoyourcontent.

WecansplitSEOintotwoprocesses:

On-PageTechniquesThereiswhereyouenteryourkeywordsinthetextofthewebpage.

Off-PageTechniquesThisiswhereyougetrelevantlinkstoyoursitefromotherwebsites.

SEOsitetasks[1]Ifyouhaveanideaforawebsite,searchthedomainwebsitesandseeifyoucanidentifyasuitabledomainnameforyourproject.

[2]UsingtheGoogletoolsandothertools,decideonasetofkeywordsandphraseswhichyouthinkpeoplewillsearchontogetyourwebsite.

[3]Modifyyourwebpagetitlestoimprovetheirkeywordplacementbutdon’toverdothekeywordsoritmayappearspammy.

[4]CheckthatallpageshaveaMETAdescriptionandmodifythemasappropriate.

[5]Addinsomeinternallinks-linkfromonepagetoanotheronyoursitetoensurepagescanbefound.Checkthatyournavigationhierarchy.

[6]Lookatyourwebpagefilenamesandmodifythemtoreflectthecontent.

[5]Checkthatyouhavealttagsforyourimages.

[6]CheckyourWebmasterToolsaccount.

[7]Uselinkanchorswithinthewebpagestogostraighttospecificlocationsofthewebsite.

[8]Changeyourcontentregularlyusingarticlesandblogs.

[9]Addin<h1>headlines.

[10]Reviewyourresultsbylookingatsomeformofpagestatistics.

[11]SetupsocialmediasuchasTwitter,FacebookandGoogle+asminimumandputlinksonyourwebsiteforvisitortoeasilygetto.

[12]Regularlydoupdatestoyoursocialmediaandtrytoengagecommunicationswithyourvisitors.

GoogleAnalyticsGoogleanalyticshttp://www.google.co.uk/analytics/isareallygoodresourceformonitoringyourtraffic.YouhavetoputJavaScriptcodeontoeachpageofyourwebsiteandyouneedaGoogleAccountofcourse.

GoogleAnalyticsdoeschangeoccasionally,theyaddinnewfeaturesandmovethingsaroundsoitcanbedifficultwriteaguide.However,therearesomefunctionsthatyoumaywanttodo.

TocreateanewView(Profile)OneoftheissueswithGoogleAnalyticsistheterminologythatituses,anditcanbedifficulttoknowwhatyouhavetodoeventhoughyouknowwhatitisyouwant.

Thefirstthingyouneedtodowhenyoucreateyouraccountistocreatea“View”ofyourdata.Aviewisgoingtobeasetofdatathatisdisplayedingraphsandtables.NormallyyoucreateaViewwhichdisplaysallthesitedata,butyoucancreatemanyviews,eachonebeingafilterofallthedata.Soyoucouldcreateaviewofjustonesubfolder.

[1]Tocreateaview,logintoyourGoogleaccountandclickonAdmin.

[2]Youwillbepresentedwithadropdownlistofallyouraccounts.

Therearethreepartstoanaccount.ThereistheAccountitselfandthenthereisthePropertyandthentheView(orProfile).

TheAccountdefinestheoverallaccount,thePropertydefinesthewebsiteandgetsthetackingcode,andthereistheView(orProfile)andwithanyfilters.

[3]Selecttheaccountthatyouwantandtheninthelistofviews,select“Createnewview”.

[4]Ifyouacceptthedetailsastheyare,theviewwilldisplayalldata.However,youcanapplyfilterstothisviewbyclickingon“Filters”.

NowifyougobacktotheGoogleAnalyticsHomescreenitwilllistthatnewviewwhichyoucanclickonandlookatthedata.

FilterdatabysubfolderOnefeaturethatyoumaywanttoworkwithistheabilitytoseetrafficthatisgoingtoaparticularsubfolder.Thisisfairlyeasytodoonanad-hocbasis.Sosayyouhaveafoldercalled/phpregister/

LogintoyourGoogleaccountandgotohttp://www.google.co.uk/analytics/

Gotothesitethatyouwanttolookatandselect:

Behaviour->Content->SiteContent->AllPages

http://www.google.co.uk/analytics/

http://www.google.co.uk/analytics/

Inthesearchboxputin/phpregister/forasubfoldername.

Thisdisplaysthedataforthatsubfolderassumingthatthereisasubfolderonyourwebsitecalledphpregisterofcourse.

ToseeGooglesearchenginewordsBehaviour->SiteSearch->SearchTerms

TodisplayrealtimeClickon“RealTime”andthenOverview.

Todisplay%ofuseshowingwhichlinksarebeingusedBehaviour->In-pageanalytics

ToolsforAnalysingandOptimisingPagesThesetoolsareallfreebutyouwillneedtocreatealoginformosttofullywork.

[1]GoogleAnalyticshttp://www.google.co.uk/analytics/Mostimportanttoolofall–itisusedtomonitoryoursitetrafficusinggraphsandlistsandyoucanuseittomeasurethesuccessofparticularpartsofyourwebsite.RequiresaGoogleaccountandneedsJavaScriptcodetobeaddedtoverywebpage.

[2]GoogleWebmasterToolshttps://www.google.com/webmasters/Anotherimportanttoolwhichoffersaloadofusefulinformation.Itenablesyoutodiagnosesiteproblemssuchaspagenotfound,andmonitorGooglesearchindexingforyoursite.RequiresaGoogleaccountandusuallyusedwithGoogleAnalytics.

[3]xmlsitemapgeneratortoolhttp://www.web-site-map.com/xml_sitemap.phpThisisafreesitemapgeneratortoolwhichcancreateanXMLsitemapforsitesofupto3500page.Axmlsitemapforyouwebsiteisusefulforsearchenginestofindnewcontent,althoughitmaynotprovideagreatimprovementinindexing.

[4]Brokenlinkcheckerhttp://www.brokenlinkcheck.com/link-checker.phpThisisafreebrokenlinkcheckerwhichiscapableofcheckingwebsiteswithupto3000pages.

[5]GoogleKeywordPlannerToolhttps://adwords.google.co.uk/KeywordPlannerThistoolneedsaGoogleaccounttouseproperly,butyoucanuseitwithoutaGoogleaccount.Itenablesyoutoresearchkeywordsbyenteringthemwithreferencetoparticularcategories.

ItisreallyintendedasatooltobeusedtowiththeGoogleAdWordssystembutisveryusefulasawaytogetkeywordphraseideasandseehowpopulartheyare.

[6]Collectionoftoolshttp://www.searchenginegenie.com/seo-tools.htmThisisagreatcollectionofdifferenttoolsavailablefordifferentsearchengines.

[7]ScreamingFroghttp://www.screamingfrog.co.uk/seo-spider/Thisisaprogramthatyoudownloadontoyourcomputer.ThereportshowsyouTitletags,URLs,MetaDescriptions,Canonicaltags,etc.plus,ittellsyouaboutpagesthatmayhave404errors,redirects,andotherthings.Requiresyoutodownloadaprogramandinstallitonyourlocalcomputer.Thefreeversionislimitsthenumberofwebpagesitcanspider.

[8]RexSwain’sHTTPHeaderViewerhttp://www.rexswain.com/httpview.htmlThisshowswhatdataissentbackfromawebserverforaparticularpage.Itidentifiestheheadersandisgoodforseeingwhatsortofredirectanypagemayhave.ForSEOpurposeswewanttosee301redirectsratherthan302soranyotherkind.ItwillalsoshowiftherearemultipleredirectsforanyURL.Requiresnologinaccount.

[9]GoogleKeywordsToolhttps://adwords.google.com/Usethisforkeywordresearch.UseittolearnaboutthetypesofphrasesyourtargetaudiencesuseatGooglewhenthey’relookingforwhatyouofferonyourwebsite.

RequiresaGoogleaccount.

[10]NoFollowAvailableontheGoogleChromewebstore-searchfor“NoFollow”ThisoutlinesalllinksonapagethathavetheNofollowattributeonthemandwillpopupawindowifthepageyou’relookingathastheNoindextagonit.ThisisusefulasyoumaynothavemeantthepagetohaveaNoindextagwhichwillstopsearchenginesindexingit.InstallsintoGoogleChromeasanaddin.

[11]SEOforChromeAvailableontheGoogleChromewebstoresearchfor“SEO”AnotherSEOplugforGoogleChromewhichdisplaysvariousinformationaboutapage.

[12]AwesomeScreenshot(combinedwithEvernote)AvailableontheGoogleChromewebstore-searchfor“AwesomeScreenshot”Usetoquicklymarkupawebpage-arrowsandwords,drawcirclesarounditems,etc.RequiresGoogleChrometousethisasithastobeinstalledasanaddin.

[13]WebDeveloperToolBarhttp://chrispederick.com/work/web-developer/Thisisanextensionwhichisavailablefordifferentbrowsersandwheninstalledprovidesmanytoolsforwebdevelopment.

[14]GoogleChromeDeveloperTools(DevTools)ThisisbuiltintoGoogleChromeandyoucanaccessitbydisplayingawebpage,rightclickonthepage,andthenselect‘InspectElement’.

Itisveryextensiveandisfullydescribedat

https://developers.google.com/chrome-developer-tools/

ItincludestoolsforinspectingCSSandpageelements,networktraffic,debuggingJavaScript,emulatingdifferentsizedbrowsersandsoonwhichareaccessedbypressingF12

[15]OtherChromeExtensionshttps://chrome.google.com/webstore/category/extensions

[16]Themoztoolbarhttp://www.moz.comThiswebsitehasanumberoffreetoolsoneofwhichisatoolbarforGoogleChrome.ItisareallygoodtoolbarthatdisplaysPageAuthorityandDomainAuthority.

[17]Thewebcoewebsitehttps://www.webceo.com/Youneedtosignupforthissitebuthassomeverygoodutilitiesthatlookatcomparingyoursitetoothersimilaronesandsendsomenicegraphsatregularintervals.

https://developers.google.com/chrome-developer-tools/

https://chrome.google.com/webstore/category/extensions

http://www.moz.com

OtherfacilitiesfortestingwebpagesMostwebbrowsersareequippedwithinbuiltfacilitiestohelpwebdevelopment.

Internetexplorer,GoogleChromeandFirefox,PressF12keywilltakeyoutoasetoftoolsusefulforwebpagedevelopment.

GoogleChromeisparticularlygoodforthisandhasmanyfeatureswhichgivesadviceonhowtoimproveyourwebsite.

Thesite:

https://developers.google.com/speed/pagespeed/

providesinformationwhichmatchesthedescriptionswhenyoudoa“PageSpeed”test.

Alsonotethewebsite:

https://varvy.com/

isagoodresourceformodernSEOconceptswhicharelinkedcloselywithGoogleprinciplesofgoodwebsitedesign.

Thereisalsoapdf:

http://static.googleusercontent.com/media/www.google.co.uk/en/uk/webmasters/docs/search-engine-optimization-starter-guide.pdf

whichisaGoogledocumentdescribingtheirideasofwebdesign.

https://developers.google.com/speed/pagespeed/

https://varvy.com/

http://static.googleusercontent.com/media/www.google.co.uk/en/uk/webmasters/docs/search-engine-optimization-starter-guide.pdf

Structureddatamark-upStructureddatamark-upisawaythatawebdesignercanaddinformationtoawebpagethatprovidesmoreinformationtoasearchengine.

Soforexample,youcouldhaveanh1tagforyouheadingwhichmaybe:

<h1>eSeller</h1>

However,thisdoesnotgiveanyinformationtoasearchengineastowhateSelleris.Itmaybereferringtoacompanynameoritmightbeasoftwareproduct.Structuredatacanclassifyandaddinformationwhichcanthenbeunderstoodbythesearchengines.

Thereareafewdifferentwaystoimplementmark-updata.Thefollowingtwomethodsarethemostcommon:

1Microdata–thisisHTML5whichusesHTMLtagsandattributes

2JSON-LD–usesJavaScript

GoogleprefersMicrodata.

AnintroductiontoMicrodataMicrodataconsistsof3elements:itemscope,itemtypeanditemprop.

Useitemscopetoidentifythatthecontentitemasfollows:

<divitemscope>PHPTutorialseBook</div>

Theitemtypeisusedasanattributetodefinethetype.

<divitemscopeitemtype=”http://schema.org/Book”>PHPTutorialsBook</div>

http://schema.org/Bookindicatesthatthisitemisabook

Wecanthenusetheitemproptoaddpropertiessuchasname.

<divitemscopeitemtype=“http://schema.org/Book”>

<divitemprop=“name”><strong>PHPTutorials:ProgrammingwithMySQLandPHP</strong></div>

</div>

http://schema.org/Book

http://schema.org/Book

Acompletelistoftheentirehierarchyschemaisavailableat

http://schema.org/docs/full.html

Amorecompleteexamplewouldlooklikethis:

<divitemscopeitemtype=“http://schema.org/Book”>

<aitemprop=“url”href=“http://www.paulvgibbs.com/#ebooks”><divitemprop=“name”><strong>PHPTutorials:ProgrammingwithMySQLandPHP</strong></div>

</a>

<divitemprop=“description”>ThisbookwaswrittenfromasetofcoursesIteachinaFurtherEducationcollege.Itcontainsofanumberofcodesamplesandexampleswhichyoucandownloadfromthissite.

Itprovidesanintroductiontowebprogramming,howtodisplaydatafromadatabaseandupdatedatatothedatabase.Itexplainsissuesthatyouencounterinrealworldsituationsandprovidesthebasiccodefromwhichyoucanthenusetofurtherdevelop.</div>

<divitemprop=“author”itemscopeitemtype=“http://schema.org/Person”>

Writtenby:<spanitemprop=“name”>PaulGibbs</span></div>

<div>Edition:<spanitemprop=“bookEdition”>V2</span></div>

<div>Availablein<linkitemprop=“bookFormat”href=“http://schema.org/Ebook”>Ebook<linkitemprop=“bookFormat”href=“http://schema.org/Paperback”>Paperback</div>

</div>

ToolforcreatingMicrodataAddingthestructuredatatoawebpageisnotstraightforwardanditneedstobedonemanuallytoeachwebpage.Youdonothavetoupdateallyouwebpagesanditdoesnotinitselfimproveyoursearchenginerankingsbutitdoesgivepreciseinformationtothesearchengineandsoshoulddisplaymorerelevantcontenttotheuser.

TheaboveisaverysimpleSchemaandinpracticetheydobecomeverycomplicatedsothebestwayistouseanapplication.Onsuchapplicationisat:

http://schema-creator.org/

Googlewebmastersalsohasahelperprogramat:

https://www.google.com/webmasters/markup-helper/

TestingyourMicrodataYoucantestandvalidateyourMicrodatahere:

http://schema.org/docs/full.html

http://schema-creator.org/

https://www.google.com/webmasters/markup-helper/

https://developers.google.com/structured-data/testing-tool/

https://developers.google.com/structured-data/testing-tool/

SummaryThischapterdescribestherequirementsforagoodwebpagesothatitmeetstherequirementsofmodernsearchengines.Thereisnopointinhavingawebsiteifthesitecannotbefound.SEO(SearchEngineOptimisation)isaveryextensiveconceptbutGoogledoesgivebasicguidelinesforcreatingpagesthatmeettheirrequirements.

13Forms


*Formstructureandelements.*ExampleHTMLForm.*Validationandformatting.

Formsareusedonthewebtoallowuserstoinputdataandthenhavethatdataprocessedinsomeway.Forexample,aformcouldbeforcollectingcommentsfromauser.

Theprocessingcanonlybedoneusingascriptwhichrunsontheserver,whichmightbeaPHPscriptthatstoresthedatainadatabase,oritmightsendanemailtosomeone.

WearenotcoveringPHPinthisbooksowecan’treallydoagreatdealwiththedata.However,wecancreateanemailformthatsendsthedatabyemailandshowtheprincipleofforms,andwecanlookatvalidationandlayouts.

BasicFormStructureThebasicstructureofaformis:

<formaction=”….”method=”…”>

FORMELEMENTSHERE

</form>

Actioniswherethedataistobesentto.UsuallythisisaURLofaPHPscript.

MethodistheeitherpostorgetwhichdefineshowthedataistobesenttotheURLspecifiedinAction.

Withgettheformdataisappendedasname/valuepairsintheURLstringandwilllooksomethinglikethefollowing:

http://www.servername.com/processpage.php?person=fred&age=35

Intheaboveexample:

NameValuepersonfredage35

Thegetmethodthatusesappendedname/valuepairsislimitedtoaround3000charactersandalsoappearsinthewebbrowseraddressbarwhichmeansthedataisnotreallysecure.

Ontheotherhandthepostmethodembedsthedatainthehttprequestforthepageandhencethedataisnotdisplayedontheaddressbar.Also,thereisnolimitationforthedatalength.

Soaformconsistsofthe<form>…</form>elementsandthenanumberofinputdataboxes,checkboxes,radiobuttons,dropdownlistsandasubmitbutton.Thepersonenterintheirdataintotheform,clicksonthesubmitbuttonwhichthensendsthedatatoascriptontheserverwhereitisactioned.

DreamweaverandFormsWhenworkingwithDreamweaverwecaninsertFormelementsusingthemenusystem.Ifweselect:

Insert->Form

thenwecanselecttheelementfromthelist.

FormelementsFormelementsconsistofaformelementtypewhichdefinesthetypeoftheinputfield.Thiswillbe“text”,“checkbox”andsoon.Thentherewillbenamewhichdefinesthenameofthedatafield.Optionallytherewillbeavaluewhichisthedefaultvalueoftheinputbox.

Themainformelementsareasfollows:

[1]Text

<inputtype=“text”name=“username”/>

[2]Password

<inputtype=“password”name=“userpassword”/>

[3]Hidden

<inputtype=“hidden”name=“recid”/>

[4]Textarea

<textareaname=“comments”cols=“20”rows=“3”></textarea>

[5]Checkbox

<inputtype=“checkbox”name=“employed”value=“1”/>

Checkboxesarenotdependentonothercheckboxessoifthereareanumberofcheckboxesyoucancheckasmanyasyouwant.

[6]RadioButton

Areyouinemployment

<inputname=“employed”type=“radio”value=“Yes”/>

<inputname=“employed”type=“radio”value=“No”/>

Radiobuttonsaredependentoneachotherwhichisdifferenttoacheckbox.IntheaboveexampleyoucanonlyselectYesorNoandnotboth.Notethatthenameisthesameineachradiobuttontoshowthattheyaregrouped.

[7]DropdownList

<selectname=“types”size=“3”>

<optionname=“fulltime”>Fulltime</option>

<optionname=“parttime”>Parttime</option>

<optionname=“he”>HE</option>

</select>

[8]Emailinputbox(HTML5)

<inputname=“email”type=“email”>

ThisisanHTML5inputboxwhichvalidatestheemailaddressthathasbeenentered.ThereareanumberofotherHTML5specificinputboxesandwewilllookatafewmorefurtheron.

[9]SubmitButton

<inputtype=“submit”name=“Submit”value=“submit”/>

[10]ResetButton

<inputtype=“reset”name=“reset”value=“Reset”/>

[11]ImageButton

<inputtype=“image”src=“image.jpg”width=“100”height=“25”/>

FormControls[1]Toillustratetheformcontrols,createanewwebpagecalledform.html

[2]Inthebodyofthepageenter:

<formaction=””method=“post”>

</form>

[3]Insidethe<form>…</form>addinaradiobutton:

<p>Gender</p><p><inputname=“gender”type=“radio”value=“Male”/><inputname=“gender”type=“radio”value=“Female”/></p>

Notethatwithradiobuttonsyoucanonlyselectoneitemandthisiscontrolledbyusingthesamename.Intheaboveexamplethenameitusesis“gender”.

[4]Displaythepageinthebrowsertoseetheeffectofaradiobutton.

[5]Addinadropdownlist:

<p>Age</p><p><selectname=“age”><optionvalue=“0”>Makeaselection</option><optionvalue=“1”>Under18</option><optionvalue=“2”>18to25</option><optionvalue=“3”>26Upwards</option></select></p>

[6]Displaythepageinthebrowsertoseetheeffectofthedropdownlist.

[7]Addinasubmitbutton.

<inputtype=“submit”name=“submit”value=“submit”/>

Codefile:13_Forms/files/form.html

Youmightwanttoaddonanyotherformelementsandseehowtheywork.

ExampleHTMLemailformCreateanewHTML5webpagecalledmail.html

ThepurposeofthisformistopostdatatoaPHPpagethathasalreadybeencreatedonaremoteserver.Theusergoestothemail.htmlform,entersvariousdetailsandwhentheypressthesubmitbutton,thedataispostedtothePHPpage.ThePHPpagethenprocessesthedataandinthiscasesendsanemailtoyou.

Withinthe<body>ofthewebpagecreateaformsectiononthepagesimilartothefollowing:

<formaction=”….”method=“post”>

</form>

NotethattheactionistheurlwherethePHPscriptislocated.IhaveincludeaPHPscriptthatcanbeusedinthisexamplebutyouwillneedawebserverthathasPHPandwhichsendsemails.

[1]Addinatextboxforthename,useanameofname


Name:<br>

<inputtype=“text”name=“name”value=“yourname”><br></form>

[2]Addinatextboxfortheemailaddress,useanameoftoaddress


Name:<br>

<inputtype=“text”name=“name”value=“yourname”><br>

Toaddress:<br>

<inputtype=“text”name=“toaddress”value=“youremail”><br></form>

[3]Addinatextareaforthecomments,useanameofcomment:


Name:<br>


Toaddress:<br>

<inputtype=“text”name=“toaddress”value=“youremail”><br>

Comment:<br>

<inputtype=“text”name=“comment”value=“yourcomment”size=“50”><br><br></form>

[4]Addinasubmitbutton,useavalueofSendandanameofsubmit


Name:<br>


Toaddress:<br>


Comment:<br>

<inputtype=“text”name=“comment”value=“yourcomment”size=“50”><br><br>

<inputtype=“submit”value=“Send”name=“submit”></form>

[5]AddintheResetbutton


Name:<br>


Toaddress:<br>


Comment:<br>


<inputtype=“submit”value=“Send”name=“submit”>

<inputtype=“reset”value=“Reset”></form>

[6]Addahiddenfieldwithanameoffromaddress


Name:<br>


Toaddress:<br>


Comment:<br>



<inputtype=“reset”value=“Reset”>

<inputtype=“hidden”name=“fromaddress”value=“[email protected]”><br>

</form>

Yourpageshouldlooksimilartothefollowing:

<!DOCTYPEhtml>

<html>

<body>

<h3>[email protected]:</h3>


Name:<br>


Toaddress:<br>


Comment:<br>



<inputtype=“reset”value=“Reset”>

<inputtype=“hidden”name=“fromaddress”value=“[email protected]”><br>

</form>

</body>

</html>

Codefile:13_Forms/files/mail.html

Notethatthehiddenfieldhasbeenaddedtodefinethe“from”address.CHANGETHISENTRYTOASUITABLEFROMEMAILADDRESS.

Displaythepageinyourbrowser,fillintheformandsubmitthedetails.

Thefollowingphpfileisasimpleemailprocessingscriptthatcanbeusedwiththisexample.Youwillneedtouploadittoawebservertoallowanemailtobesent.

<?php

//––––––––—

if(isset($_POST[“name”]))

{

$name=$_POST[“name”];

}

else

{

echo(“Fillinyourname”);

exit();

}

//––––––––—

if(isset($_POST[“toaddress”]))

{

$toaddress=$_POST[“toaddress”];

}

else

{

echo(“Fillinthetoaddress”);

exit();

}

//––––––––—

if(isset($_POST[“fromaddress”]))

{

$fromaddress=$_POST[“fromaddress”];

}

else

{

echo(“Thereisnofromemailaddress”);

exit();

}

//––––––––—

if(isset($_POST[“comment”]))

{

$comment=$_POST[“comment”];

}

else

{

echo(“Enteryourcomment”);

exit();

}

//––––––––—

if(isset($_POST[“submit”]))

{

$submit=$_POST[“submit”];

if($submit==“Send”)

{

//Sendemail

$result=“Yourname:”.$name.“Yourcomments:“.$comment;

$headers.=“From:”.$fromaddress.“\r\n”;

//$headers=“From:[email protected]\r\n”;

mail($toaddress,“Comments”,$result,$headers);

echo(“TOADDRESS:$toaddress<br/>”);

echo(“FROMADDRESS:$fromaddress<br/>”);

}

}

?>

Codefile:13_Forms/files/processform.php

IssueswithemailformsAllinputboxesmustbevalidatedtocheckthatsensibledataisbeingsubmitted.ThisisoftendonewithJavaScriptontheclientcode,andPHPontheserver.Itisimportanttohaveserversidevalidationaswellasclientsidevalidation.

FormsmayneedaCAPTCHAscriptaddedtomakesurethattheformisbeingsubmittedbyarealperson.ACAPTCHAscriptisoftenadisplaywithatextboxwhereyouenterinsomecharacterstoprovethatyouareahumanratherthansomesortofautomatedscript.

Mostformsneedserversidecodeforthemtobeofanyvalue.YoucancreateformswhichjustdocalculationsinJavaScript.However,youmaywantdatatobestoredinadatabaseoryoumaywanttosendanemailandthatcanonlybedonewithcodingontheserverusingPHPorsomeotherprogramminglanguagesuchasdotnet.

ClientsideformvalidationisanextensivesubjectbuttherearemanysystemsaroundnowsuchasJQuerythatmakeformvalidationeasierforaWebDevelopertoworkwith.

FormsinHTML5HTML5hasaddedanumberofnewformfields.However,thesupportofthenewfieldsisquitepatchyondifferentbrowsers,andsoitmaybeafewyearsbeforeweareabletousethemtoanyextant.

WehaveshownthatstandardHTMLhasformfieldsfortext,radiobuttons,checkboxes,dropdownlists,passwordandhiddenfields.

HTML5hasextendedthesetoincludethefollowing:

·email-entryofanemailaddress.

·url–entryofaURL.

·number–numberentrywithrange.

·tel–telephonenumber

·date–calendardatepicker

andsoon.

Usingtheseinputtypesmakesformvalidationmucheasier.

Ondevicessuchassmartphonesandtablets,thesefieldsaredisplayedtoalloweasierinputforthesmallscreen.

Theaboveinputtypesareusedasfollows:

<inputtype=”date”name=”date”/>

whichwouldbehowyouusethedateinputfield.

HTML5alsoaddsinsomevalidationmethodsbuiltintothetextboxthemselves.

HTML5andformvalidationHTML5includesanumberofextraattributesthatcanbeusedtovalidateformentryontheclientbowser.Notallbrowsessupportallthefeaturesandalso,validationshouldalsobedoneontheserveraswellusingaprogramminglanguagelikePHPordotnet.

TASK1-TherequiredattributeCreateanHTML5formcalledform01.htmlwiththefollowingfieldsandvalues.

Thefollowinghasaninputboxoftype“text”,aninputboxoftype“email”andaninputtypeboxoftype“date”.

TheemailtypeanddatetypearetwoofthenewHTML5inputtypes.

<!doctypehtml>

<html>

<head>



</head>

<body>

<formmethod=“post”action=””>

<fieldset>

<legend>ContactDetails</legend>

<p>

<labelfor=“Name”>Name:</label>

<inputtype=“text”name=“Name”required/>

</p>

<p>

<labelfor=“Email”>Email:</label>

<inputtype=“email”name=“Email”required/>

</p>

<p>

<labelfor=“StartDate”>StartDate:</label>

<inputtype=“date”name=“startdate”required/>

</p>

<p>

<inputtype=“submit”name=“Submit”/>

</p>

</fieldset>

</form>

</body>

</html>

Codefile:13_Forms/form_required.html

Whenthisisruninthebrowser,andyoupresssubmit,noticetheaffect.Therewillbedifferencesinthebehaviourwithdifferentbrowsers.

TASK2-Inputtypeof“number”TheHTML5numberinputtypehasmax,minandvalueentrieswhichcanbeusedtovalidate.

Addthefollowingontotheformandseewhathappens:

<p>

<labelfor=“age”>YourAge</label>

<inputtype=“number”name=“age”min=“18”max=“99”value=“21”>

</p>

Codefile:13_Forms/files/form_required_number.html

form_with_styles.htmlisthesameformbutwithstylesaddedintothedocument.

Codefile:13_Forms/files/form_with_styles.html

FormattingFormsinHTML5HTML5hasthefieldset,legendandlabelelementsspecificallyforlayingoutforms.

Labelsareawayofimprovingusabilitytoawebpage.Thelabelisoftenusedtocreatethenameforthe<input>elementsimilartothefollowing:

<labelfor=“name”>YourName</label><inputtype=“text”name=“name”value=“yourname”>

Thelabelelementdoesnotinitselfdisplayanythingspecialfortheuser.

Thelabelcanbeboundtoanelementbyusingthe“for”attribute,orbyplacingtheelementinsidethe<label>element.

Thefieldsetprovidesawaytobreakupaformintosectionsandlegendisusedtotitleafieldset.

CreateanewHTML5webpagecalledform_format.htmlandinthebodyofthepageeithercopythefollowingorcreatetheelementsbytypingtheminmanually:

<formname=“form01”method=“post”>

<fieldset>

<legend>Departments</legend>

<p>

<labelID=“lblModerator”class=“title”>Moderator</label>

<inputtype=“text”ID=“txtModerator”/>

</p>

<p>

<labelID=“lblDept_Title”class=“title”>DeptTitle</label>

<inputtype=“text”ID=“txtDept_Title”/>

</p>

<p>

<labelID=“lblDept_Order”class=“title”>DeptOrder</label>

<inputtype=“text”ID=“txtDept_Order”/>

</p>

<p>

<inputtype=“submit”ID=“cmdSubmit”value=“Create”class=“submit”/>

</p>

</fieldset>

</form>

Addinthefollowingstylestothetopofthepage:


body{


}

fieldset{

width:500px;

}

fieldsetp{

margin:10px;

padding-bottom:10px;

width:460px;

clear:both;

}

.title{

float:left;

width:100px;

text-align:right;

padding-right:10px;

}

.submit{

text-align:left;

margin:10px;

}

legend{

font-size:20px;

}

</style>

Testthewebpageoutindifferentbrowsersandnotethedifferenceindisplays.YoumayfindthatIEdisplaysalittledifferenttoChrome

Codefile:13_Forms/files/form_format.html

TASK3-Createaform

Youhavetocreateawebformthatistocalculatethecostsofsmallrunprinting.Yourjobistocreatethefrontendsideoftheformwhichwillpostthedatatoaserverandawebprogrammerwillthenprogramthecodetodothecalculations.Youhavetomakethewebformtolookasgoodaspossiblewithstylesasappropriate.

Thefollowingarethefieldsthatneedtobecreatedonthewebformcalledprintcalc.html:

Field Description

PaperSize AradiobuttonofeitherA4orA3

Numberofcopies Anumberfieldwhichmustbeintherange1to99

Format AdropdownlistofeitherSinglesidedorDoublesided

PrintingInks Aradiobuttonofeithercolororblackandwhite

Papertype Adropdownlistofeither90gms,110gmsor130gms

Turnaround Adropdownlistofeitherstandardor1day

Shipping AdropdownlistofeitherSecondclassorfirstclass

Thisiswhatthefinaldisplaywilllooklike:

Codefile:13_Forms/files/printcalc.html

SummaryThischapterhaslookedatformsandformelements.Theuseofformsisveryextensiveandyouseethemonmanywebsitestocollectinformationandsubmitdatatotheownerofthewebsite.Thepitfallofformsisthatthedatahastobeproperlyvalidatedbeforeitgetssenttothescriptthatwillprocessitandthedataalsohastobevalidatedontheserveraswell.HTML5hasintroducedmanynewfeaturesthatmakevalidationmucheasierbutthefeaturesarenotsupportedonallbrowsers.

14HTML5Design


*TheHTML5Layout.*HTML5example.

HTML5hasintroducedextramark-uptagstodefinethestructureofawebpage.

UpuntilnowwehaveusedDIVstodefinethepagestructure;however,itcanbedifficulttounderstandwhattheseDIVsrefertowithinthepagelayoutunlessyoulookattheclassname.

So:

<divid=“footer”>

</div>

wouldbeusedasafooter.

HTML5hasintroducedanumberofschematicMark-uptagswhichexpressesthemeaningandpurposemoreclearlytothedeveloper.Theseelementshavenamessuchas<header>,<footer>andsoon.SomeofthesemanticHTML5elementsare:

<header>…..</header><footer>…..</footer><section>…..</section><article>…..</article><aside>…..</aside><nav>…..</nav><figure>….</figure><figcaption>….</figcaption>

YoudonothavetousetheseinanHTML5webpage;youcanstilluseDIVsforthestructureasbeforeifyouwant.

YoustillhavetoapplystylestotheseelementsinthesamewayasyoudowithDIVsbut

youwouldhavesomethinglike:

footer{padding:5px;text-align:center;font-weight:bold;}

Headers<header>andfooter<footer>The<header>and<footer>elementsareusedatthetoporbottomofeachwebpagebutcanalsobeusedasheaderandfooterofindividual<article>and<section>elements.Forexample,inablog,ablogpostcouldbeanarticleelementandeachblogpostcouldhaveitsownheaderandfooterelement.

Navigation<nav>The<nav>elementisusedforthemajornavigationelementsofawebpage.

Article<article>The<article>elementisusedtodefinecontentthatcanbeconsideredasstandaloneinformationsuchasacommentorablogpostoranitemforsell.

Aside<aside>The<aside>elementcanbeplacedinsideanarticleelementinwhichcaseitshouldhavecontentthatrelatestothearticlebutisnotanessentialpartofthearticle.Itcanalsobeusedoutsideofanarticleelement,inwhichcaseitshouldcontaincontentthatisrelatedtotheentirewebpage.

Section<section>The<section>elementisagroupingofdifferentsectionsofawebpage,sotheremaybesectionsofnews,products,comments,blogsandsoon.

Headinggroups<hgroup>The<hgroup>elementisusedtogrouptogetherheadings<h1>to<h6>anditspurposeiswhenyouhaveaheadingandthenasubheading.

Figures<figure>and<figcaption>The<figure>elementisforcontentofimages,videosandsoon.Thefigurecaption<figcaption>isatextdescriptionoftheimage.

Sectionelements<div>The<div>elementisusedwherethereisnoHTML5schematicmark-upthatcouldbeusedinitsplace.Soforexample,youmighthaveaDIVelementthatisawrapperfortheentirewebcontent.

ThehtmlshivcodeForinternetexplorerbrowsersthatarebelowIE9,weneedtoaddinabitofJavaScriptcodesothattheycorrectlyrecognisetheHTML5schematicmark-upelements.Weadd

inthefollowingcodetothe<head>ofthewebpage:

<!—[ifltIE9]><scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]—>

ExerciseinHTML5LayoutThisisanexampleofcreatinganHTML5layoutwhichincorporatesanumberofHTML5schematicelements

TASK1-CreateanewHTML5webpageFirstcreateanewHTML5webpageindex.htmlandenterthetitle:

<title>AntiqueTractors-TheOldeTractorStore</title>

TASK2-AddinbasicstructureInthe<body>ofthewebpageaddinthebasicpagestructure:

<divclass=“wrapper”><header><h1>TheOldeTractorStore</h1></header>

<sectionclass=“products”><article></article><article></article></section>

<aside></aside>

<footer>©TheOldeTractorStore</footer></div>

Codefile:14_HTML5_Design/files/index_01.html

ThisusestheHTML5markupofheader,footer,section,article,nav,aside,hgroup,figureandfigcaption.

TASK3–AddthefirststylesIntheheadofthedocumentcreatethestylestartandendtag.


</style>

Wehavetomakealltheschematicmark-upstylesasdisplay:block.Blocklevelelementsarethosethatstartonanewlineandwillbethebasicbuildingstructureofthelayout.WehavetodefinetheseasblocklevelbecauseolderbrowsersthatdonotrecognisetheHTML5elementswilltreatthemasinlineelements.

Wethencreatethebodystylewhichcontainsabackgroundimage.

header,section,footer,aside,nav,article,figure,figcaption{display:block;}body{color:#514F4F;background-color:#f9f8f6;background-image:url(“images/lgren033.jpg”);background-position:center;font-family:Arial,Verdana;line-height:1.3em;margin:0px;}

Codefile:14_HTML5_Design/files/index02.html

TASK4-ThewrapperandheaderstylesThenextstylesaddinthewrapperwhichdefinesthewidthofthecontentandaddsintheheaderimage.

.wrapper{width:960px;margin:10pxauto10pxauto;border:2pxsolid#000000;background-color:#ffffff;}header{height:160px;background-image:url(“images/tractorheader.jpg”);}


TASK5-Theh1tags

h1{

text-indent:-9999px;width:960px;height:130px;margin:0px;}

Inthisexample,theh1taghasbeensetwithatext-indexof-9999px.Thisissothatthetextitselfisshiftedoffthescreentotheleft,butwillstillbeavailablefortextscreenreaders.Theheaderimagetractorheader.jpgdisplaysthesametext.

Codeitle:14_HTML5_Design/files/index04.html

TASK6-AddinalltextTomakethingseasierforthisexercise,wewillcopyinallthetextintothebody.

Tomakeiteasier,thefollowingtextcontainsallthebodytextforthisexercise.Copythistextandoverwriteallthetextinthebody.

Sonowwehaveapagewhichiscompleteexceptforthestyles.

<divclass=“wrapper”>

<header>

<h1>TheOldeTractorStore</h1>

<nav>

<ul>

<li><ahref=””class=“current”>HOME</a></li>

<li><ahref=””>SPARES</a></li>

<li><ahref=””>FAIRS</a></li>

<li><ahref=””>ABOUT</a></li>

<li><ahref=””>CONTACT</a></li>

</ul>

</nav>

</header>

<sectionclass=“products”>

<article>

<figure>

<imgsrc=“images/masseyferg_290.jpg”alt=“Tractor”/>

<figcaption>1979MasseyFerguson575</figcaption>

</figure>

<hgroup>

<h2>1979MasseyFerguson575</h2>

<h3>£4,500PlusVAT</h3>

</hgroup>

<p>1979MasseyFerguson2wdTractorwithmuti-power,comeswithMFloader(notfitted),done5555hours,

withPUHand2doublespoolvalves,overallinresonableconditionforitsage.</p>

</article>

<article>

<figure>

<imgsrc=“images/ford_290.jpg”alt=“Tractor”/>

<figcaption>FordsonMajor6Cylinder,90HP</figcaption>

</figure>

<hgroup>

<h2>FordsonMajor6Cylinder,90HP</h2>

<h3>£2,650PlusVAT</h3>

</hgroup>

<p>ThishashadaFord6cylinderfittedandrepaintedawhileago.Starts,runsanddriveswell,veryusefultorunagrainblower,orotherstationeryP.T.O.application.</p>

</article>

</section>

<aside>

<sectionclass=“spares-list”>

<h2>SparesNeeded</h2>

<ahref=””>StarterMotor-PerkinsEngine</a>

<ahref=””>Radiator-DavidBrown</a>

<ahref=””>McCormickCX100FilterKit</a>

<ahref=””>CaseIHClutchKit</a>

</section>

<sectionclass=“contact-us”>

<h2>Contact</h2>

<p>TheOldeTractorStore<br/>

TheWarehouse<br/>

Chippenham<br/>

WiltshireSN152JP</p>

</section>

</aside>

<footer>

©TheOldeTractorStore

</footer>

</div>


TASK7-NavigationstylesThenavigationstylesfollowthestandardunorderedlist<ul>configuredasahorizontal

list.

Thestylesforthenavigationlistshouldbeaddedasfollows:

nav,footer{

clear:both;

color:#ffffff;

background-color:#42573C;

height:30px;}

navul{

margin:0px;

padding:5px0px5px30px;}

navli{

display:inline;

margin-right:40px;}

navlia{

font-weight:bold;

color:#ffffff;}

navlia:hover,navlia.current{

color:#FB9294;}


TASK8-Thesectionandarticleschematicmark-uptagsInthisdesign,thesectiontagisintendedtocontainalltheinformationabouttheproductswhichinthiscasearetractors.

Eachproductiscontainedwithinanarticle.

<sectionclass=“products”>

<article>

</article>

<article>

</article>

</section>

Addinthestylesforthesectionandarticleelements:

section.products{

float:left;

width:669px;

border-right:1pxsolid#eeeeee;}

article{

clear:both;

overflow:auto;

width:100%;}


TASK9-ThefigureandhgroupstylesEacharticleinthisexamplecontainsa<figure>and<hgroup>elementwhichlooklikethefollowing:

<article><figure><figcaption></figcaption></figure><hgroup></hgroup></article>

Thestylesforthiscannowbeadded:

hgroup{

margin-top:40px;}

figure{

float:left;

width:290px;

height:220px;

padding:5px;

margin:20px;

border:1pxsolid#eeeeee;}

figcaption{

font-size:90%;

text-align:left;}


TASK10-theasidestylesAddinthefollowingstylesfortheasideelement:

aside{

width:240px;

float:left;


asidesectiona{

display:block;

padding:10px;

border-bottom:1pxsolid#eeeeee;}

asidesectiona:hover{

color:#985d6a;

background-color:#efefef;}

asideh2{


color:#de6581;}


TASK11-Addinthefinalgroupofstylestofinishoffthelinks,htagsandfooter

a{

color:#de6581;

text-decoration:none;}

h1,h2,h3{

font-weight:normal;}

h2{

line-height:1.2em;


padding:0px;}

h3{


color:#de6581;}

footer{

font-size:80%;



TASK12-AddinhtmlshvJavaScriptcodeFinally,toensurethatbrowsersbelowInternetExplorer9workcorrectlyweaddinthefollowingcodeintotheheadofthewebpage.

<!—[ifltIE9]>

<scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]—>

SummaryThisChapterhaslookedathowtoworkwithHTML5layoutelements.Theseprovideawaytodefinethepagelayoutusingnamedelementswhichmoreclearlyrepresentthestructureofapage.HTML5isthestandardthatweshoulduseforallourpagesfromnowonandprovidenewelementsandattributesparticularlyformultimediaandgraphics.

15ResponsiveWebDesign(RWD)


*DescriptionofRWD.*Mediaqueries*AnexampleRWDframework.

Responsivewebdesign(RWD)isthe‘inthing’atthemoment.

IfwegobackafewyearsweonlyhadonewaytodisplaywebpageswhichwasusingaVDU.ThesewerebasedontheoldstyleTelevision(TV)setswhichusedcathoderaytubes(CRT).Thesewerephysicallyverylargeandheavy.

Withonlyonetypeofdevicetodisplayourwebpageson,itwasquiteacceptabletodesignwebpagesthatfittedtoafixedwidthofsay960px.

GraduallynewtechnologycameinwhichusedLCDandLEDdisplays.Thesedisplaysbecameverypopularveryquicklybecausetheyareverythinandlightandtheyusemuchlesspower.Itwasn’tlongbeforethisnewdisplaytechnologywasincorporatedinmobiledevices,phonesandtabletswhichchangedthewayweinteractwiththeinternet.

Sothisintroduceddevicesthatdisplayatdifferentresolutionandondifferentsizes.

Sohowdowecopewiththesedifferentsizeddevices?Therearereallytwowaystodothis:

[1]Createmultiplewebsitesatdifferentresolutionandsizeandhaveascriptwhichredirectstodifferentsitesafterdetectingthedevicetype.

[2]CreateonesitebutdifferentCSSdependingonthescreensize.

Clearlythesecondmethodispreferredasyouarenotduplicatingthecontentwhichwouldbecomedifficulttomaintain.

TheimportanceofmobiledesignGoogleandothersearchengineshavereallytakenonboardtheideaofcreatingwebpagesformobiledevices.InfactGooglewillpreferwebsitesthataremobilefriendlyandwillratethemhigherinthesearchresults.

Googlehasatoolthatintheirwebmasterspagesthatallowyoutotestifthesitepassesformobileusehttps://www.google.com/webmasters/tools/mobile-friendly/

whichisfromtheGooglesitehttps://developers.google.com/webmasters/mobile-sites/

https://www.google.com/webmasters/tools/mobile-friendly/

https://developers.google.com/webmasters/mobile-sites/

MediaQueriesSohowdowedevelopawebsitethatwillworkinmultipledevices?

Theanswerisreallythe@mediaquerywhichisusedinstylesheetstoselectdifferentstylesdependingonthedevice.The@mediaquerycanchangestylesbasedonthecharacteristicsofthedevice,suchasthedisplaytype,widthheight,orientationandresolution.

The@mediaquerycanbeusedtocontroloutputforprinterfriendlyoutputasfollows:

@mediaprint{/*printstyles*/}

Inaddition,andmoreimportantlyforresponselayouts,wecanhavespecificstylesbasedontheviewportsize.Intheexamplebelowwecanseethatwecanusedifferentimagesbasedonthescreensize.

@mediascreen{

#firstimage{

background-image:url(/graphics/firstimage980.jpg);

height:100px;

}

}

@mediascreenand(max-width:980px){

#firstimage{


height:100px;

max-width:980px;

}

}


#firstimage{


height:95px;

max-width:650px;

}

}


#firstimage{


height:80px;

max-width:480px;

}

}


#firstimage{


height:60px;

max-width:320px;

}

}


#firstimage{


height:50px;

max-width:240px;

}

}

Asanexampletoshowhowthe@mediaquerycanchangethestylesfordifferentviewports:

<!doctypehtml>

<html>

<head>


<title>Responsiveexample</title>


@media(min-width:500px)and(max-width:600px){

h1{

color:fuchsia;

}

}

</style>

</head>

<body>

<h1>Thisdemonstratesthewaythatstylescanchangeasthesizeofthepagechanges.</h1>

</body>

</html>

Codefile:15_Responsive_Design/files/responsive/responsive.html

Sofirstdisplaythepageinyourbrowserandthenchangethesizeofthebrowser.Asyoureducethesizedownto600px,thecolorofthe<h1>tagwillchange.Thenasyoureducethesizefurtherdowntounder500px,thecolorofthe</h1>tagchangesback.

AResponsiveWebDesignFrameworkexampleInthisexercisewearegoingtocreateawebsiteusingtheResponsiveWebDesignFrameworkHTML-KickStartwhichcanbedownloadfrom:

http://www.99lime.com/

Wewillusethisframeworkasitdescribedas‘lightweight’andisnotasextensiveasothers.Thereareothersimilarframeworkswhichareavailable,inparticular,Twitterbootstrapwhichislocatedathttp://getbootstrap.com/

Anotheroneiscalledhttp://foundation.zurb.com/

Alloftheseframeworksareallopensourceandfreetouse.

Googlealsohasawebtemplatesystemathttps://developers.google.com/web/starter-kit/?hl=en

NOTE:ifyouareusingInternetExplorer,inthe“CompatibilityViewSetting”,makesurethat“DisplayinternetsitesinCompatibilityView”isunticked.

MicrosoftcreatedthecompatibilityviewforInternetExplorer8togivewebdesignerstimetoconverttheirpagesoverfromthenon-standardtechniquesusedinIE7andIE6,toamorewebstandardcompliantversion.IttellsthebrowsertorenderthepageasifitwereIEversion7ratherthanIEversion8.

WearegoingtocreateanotherversionoftheArchibald’swebsitewhichwedidinanearlierchapter.Youwillfindthatthisversionwilllookbetteranditwillbeeasiertomaintainbecauseitusesagridsystem.

TASK1-DownloadtheHTML-KickStartframeworkCopytheHTML-KickStart-master.zipfileontoyourlocalcomputerdrive,unzipitandthencopythewebfilestoanappropriatelocation.

Tomakeitabiteasier,Ihavelocatedthiszipfileinthefilesfolderwiththedownloadsforthebook.

Codefile:15_Responsive_Design/files/responsive/HTML-KickStart-master.zip

TASK2-Copythefileblank.htmlandcallitindex.htmlMakeacopytheblank.htmlfileandrenameitindex.html

Removeallthecodebetweenthe<body>andthe</body>tagsaswearegoingtostartagain.

Codefile:15_Responsive_Design/files/responsive/index.html

http://www.99lime.com/

http://getbootstrap.com/

http://foundation.zurb.com/

https://developers.google.com/web/starter-kit/?hl=en

TASK3-PagetitleChangethepagetitle<title>….</title>toArchibald’sShop

Codefile:15_Responsive_Design/files/responsive/index_task3.html

TASK4-AddinthebasicgridstructuresAlloftheseframeworksworkontheprincipleofagridwhichisbasedonupto12columns.

Thefollowingisenteredinsidethe<body>…</body>tags.

Thetextforthisislocatedinafile:

grid_structure.txtinthedownloadssothatyoudonothavetoenterthetextbyhand.

<divclass=“grid”>

<divid=“logo”class=“col_12”>

Logoortext

</div>

<divid=“header”class=“col_12”>

Headermenu

</div>

<divid=“slideshow”class=“col_12”>

Images

</div>

<divid=“blocks”class=“col_12”>

<divclass=“col_4visiblecolumn”>

Column1text

</div>


Column2text

</div>


Column3text

</div>

</div>

<divid=“description”class=“col_12”>

<divclass=“col_6”>

Description

</div>

<divclass=“col_6”>

Image

</div>

</div>

<divid=“openinghrs”class=“col_12”>


</div>


SomeText

</div>


</div>

</div>

<divid=“refs”class=“col_12”>

Footer

</div>

</div>


TASK5-Addintextforlogoforheadermenu

Thelogotextis:

<h1>Archibald’sShop</h1>

ThetextfortheheadermenuisthesameaswhatwedidfortheoriginalArchibald’sexercise:

<ahref=””>Home</a>|<ahref=””>OpeningHours</a>|<ahref=””>Location</a>|<ahref=””>Prices</a>|<ahref=””>ContactUs</a>


TASK6-AddinstylesIntheheaderofthewebpagecreatethestylestagasfollows:


</style>


TASK7-Addintheheaderstyle

#header{


color:#FFF;

padding-top:10px;


padding-left:20px;

font-size:150%;

}


TASK8-Addinlinkstyles

#headera:link{

color:#fff;


}

#headera:visited{

color:#fff;


}

#headera:hover{

color:#ff0000;

}


TASK9-AddinLogostyles

#logo{


width:100%;

margin-left:0;

margin-bottom:0px;

}

#logoh1{

font-family:‘FredokaOne’,cursive;

color:#FFFFFF;

font-size:300%;

padding-left:100px;

}


TASK10-AddintheslideshowFortheslideshowweusetheimagesimage03.jpg,image03.jpgandimage05.jpg

Entertheslideshowcodeintotheslideshowdiv:

<!—Slideshow—>

<ulclass=“slideshow”>

<li><imgsrc=“image03.jpg”/></li>



</ul>


TASK11-Addthetexttothethreecolumnblocks

COLUMN1:

<h1>Barbers</h1>

<p>Weareawell-establishedIlfracombeBarbers,occupyingthesmallcornershoponNorthFieldRoadoppositethewell-knowntouristattractionoftheTunnelsBeaches.</p>

COLUMN2:

<h1>Alterations</h1>

<p>AskaboutClothesAlterationsandRepairssuchasadjustinghemsontrouseranddresses.</p>

COLUMN3:

<h1>Silkflowers</h1>

<p>WealsosellhighqualityhandmadesilkflowerheadbandswhichareidealforWeddingsandfestivals.</p>


TASK12-AddinsomestylesfortheThreeblocks

#blocksh1{

font-size:170%;

color:red;

text-align:center;

}


TASK13-Addintextandimageforthedescriptionblock

<h1>WelcometoArchibald’sBarberinIlfracombeDevon</h1>

<p>Youdon’tneedanappointmentandweareopenlateonThursdayeveningtoaccommodatebusyschedules.</p>

<p>Tryourprofessionalhairdressertoday.</p>


TASK14–AddintheimagewhichispartofthedescriptionDIVAddintheImagesfromeStudy–theseimagesshouldalreadybeinthedownloadzipfile.

Fortheshopimagewearegoingtousetwoimageswhichwilldisplaydependingonthesizeofthebrowser.

Wehavetwoimagesshop02.jpgandshop03.jpg.

SointhewebpagewherethewordImageislocated,enterthefollowingpicturetag.

<picture>

<!—[ifIE9]><videostyle=“display:none;”><![endif]—>

<sourcesrcset=“shop02.jpg”media=”(min-width:1024px)”>

<sourcesrcset=“shop03.jpg”media=”(min-width:480px)”>

<!—[ifIE9]></video><![endif]—>

<imgsrcset=“shop03.jpg”alt=“Shop”>

</picture>

NOTE:Themediatagisdefiningwhatsizebrowserwillbedisplayed.

NOTE:ThepicturetagisnotavailableinIEandsowhenthisisdisplayedinIE,noimagewillappear.Toovercomethisweusethepicturefill.jsscriptwhichenablessupportforthepictureelementandassociatedfeaturesinbrowsersthatdonotyetsupportthem.

<script>//oldiescriptdocument.createElement(“picture”);</script><scriptsrc=“js/picturefill.js”async=“true”></script>

Placetheabovescriptintothe<head>ofthewebpagepointingtotheJavaScriptinthejsfolder.Thisshouldmakethe<picture>elementworkinIEandinanyotherbrowserthatdoesnotsupportthepictureelement.


TASK15-Stylesfordescription

#descriptionh1{

font-size:170%;

color:red;

text-align:center;

}

#descriptionp{

font-size:110%;

}


TASK16–AddintextforOpeningHours

<h1>ComeVisitUs</h1><p><strong>OpeningHours</strong></p>

<p>MondayClosedAllDay<br/>Tuesday8.00amto5.30pm<br/>Wednesday8.00amto5.30pm<br/>Thursday11.00amto6.30pm<br/>Friday11.00amto6.30pm<br/>SaturdayClosedallday<br/>SundayClosedallday</p>


TASK17–AddinStylesforOpeningHours

#openinghrsh1{

font-size:170%;

color:red;

text-align:center;

}


TASK18-Addintextforfooter

©YourNameHere2016


TASK19-Addinstylesforrefsatthebottomofthepage

#refs{

background-color:black;

color:white;

margin-top:20px;

margin-bottom:20px;


padding-top:20px;

text-align:center;

}


TASK20-FinishoffthepageThisisthebasicsitelayoutandyoucanfinishitoffbyaddinginaGooglemaptoidentifythelocationandyoumaywanttoaddinothertext.

SummaryThischapterhaslookedatResponsiveWebDesignconceptsandasimpleframeworkwhichcanbeusedtobaseyourwebpageson.Websiteshavehadtobecomemoresophisticatedinthewaytheyapproachtheproblemsofmultipledevicesanddifferentscreensizes.TherearenowmanywelldocumentedtechniquesforthisandasHTML5becomesmoreestablished,wewillprobablyseemuchmoreuseofdifferentmediasuchasvideoaswellasgraphics.

Documents

HTML Beginners – Basics of Web Designdl.booktolearn.com/ebooks2/computer/webdesign/b01hflaaj2_html... · many exercises and examples which can be downloaded from the web site. It