html5 html programming crash -...

HTML5LearnHTML5DevelopmentFromScratch!

HTMLPROGRAMMINGCRASH

COURSEUpAndRunningWithHTMLProgramming

HTML+CSSSTEPBYSTEPHTML+CSSInA

Day:LearnTheBasics,AndWriteKillerCodes!FREEPROMOSFromAZElitePublishingClickHereToReceiveWeeklyFreeandDiscountedKindleBooksInYourInbox

http://azelitepublishing.gr8.com/

Publishedby:AzElitePublishingInc.http://azelitepublishing.gr8.com/

ISBN:973-332-00389-3

ManufacturedinCanadaPublishedsimultaneouslyinCanada1093830234Nopartofthispublicationmaybreproducedortransmittedinanyformbyanymeans,electronic,mechanical,photocopying,recording,orotherwise,withoutthepriorwrittenpermissionof

thepublisher.Forinformationongettingpermissionforreprintsandexperts,[email protected]:Theinformationinthisbookisdistributiononas“AsIs”Basis,withoutwarranty.Whileeveryprecautionhasbeentakeninthepreparationofthisbook,neithertheauthornorpublishershallhaveanyliabilitytoanypersonorentitywithrespecttoanyloseordamagecausedorallegedtobecauseddirectlyorindirectlybytheinstructionscontainedinthisbookorbythecomputersoftwareandhardwareproductsdescribedinit.

ISBN:973-332-00389-3

HTML5LearnHTML5DevelopmentFromScratch!DISCLAIMERIntroductionToHTML5WhatYouShould

KnowAboutHTML5WhyYouShouldLearnHTML5WhomIsThisBookFor?Chapter1:TheEssentialsOfHTML5DrawingWithCanvasElementDraggingAnd

DroppingNewWebFormControlsEditingWebPagesOnTheGoHandlingBrowserHistoryInterdocumentMessagingSuperbAudioAnd

VideoSupportWebStorageNewElementsSummaryChapter2:TheCanvasElementTheSpecificationsTheCanvasAPIStyling

SettingUpLineStylesCastingShadowsDrawingRectanglesDrawingComplexShapesDrawingTextDrawingImagesUsingTransformations

GettingStartedWithCanvasSummaryChapter3:DraggingAndDroppingDragAndDropDragAndDropAPITheDraggableAttributeTheOnDragEnter

AttributeTheOnDragOverAttributeTheOnDropAttributeTheOnDragStartAttributeTheOnDragEndAttributeStartingADragAnd

DropExampleStylingTargetAndDraggableElementsSummaryChapter4:WebFormControlsIntroductionToWebFormControlsWebFormsExampleCreateADefault

ControlURLControlExampleSummaryChapter5:InlineEditingGettingToKnowInlineEditingcontenteditabledesignmode

spellcheckSummaryChapter6:WorkingWithBrowserHistoryTheHistoryAPIwindow.history.lengthwindow.history.back()window.history.forward()window.history.go([delta])

window.history.pushState(data,title[,url])window.history.replaceState(data,title[,url])window.onpopstatepop-history.htmlExampleAddABackButtonAddAForwardButton

AddAGoButtonSummaryNewElementsInHTML5WhereToGoFromHere

HTMLPROGRAMMINGCRASHCOURSEUpAndRunningWithHTMLProgramming

DISCLAIMERIntroductionToCourseChapter1:AnIntroductionToHTMLWhatIsHTML?UtilityOfHTMLTexts

Chapter2:HTMLTagsTypesOfHTMLTagsPurpose-BasedTagsBasicCodesForPageStructureTheHeadTagTitleTagsBodyTags

HTMLElementsUsingHTMLHeaderElementsUsingFrameElementsUsingFormElementsUsingTextFormattingElementsSummaryQuestions

Chapter3:FormattingSummaryQuestionsChapter4:AddingParagraphsLineBreaksChapter5:AttributesSimpleAttributesFragmentAttributes

DynamicAttributesSummaryQuestionsChapter6:CreatingHTMLFramesColsRowsBorderFrameborder

FramespacingSrcNameFrameborderMarginwidthMarginheightNoresizeScrollingLongdesc

Chapter7:CSSCSSTransitionsCSSAnimationsDetectingWhenATransitionIsCompleteSummaryChapter8:MakingTheHelloWorldAppWithHTMLTexts

Conclusion

HTML+CSSSTEPBYSTEPHTML+CSSInADay:LearnTheBasics,AndWriteKillerCodes!

DISCLAIMERIntroductionToCourseChapter1:IntroductionToHTMLAndCSSHTMLElements,TagsAndAttributes

QuestionsChapter2:HowToUseHTMLToMakeYourOwnWebPageHowToSetupOurOwnHTMLDocumentHelloWorldNestedElementsBlock-LevelElements

Self-ClosingTagsErrorsAndSolutionsApplyingWhatYouHaveLearnedSummaryQuestionsChapter3:MoreOnHTMLSemantics

HowToIdentifyDivisionsAndSpansCommentsHowtoUtilizeText-BasedElementsHowtoBuildStructureUsingHTMLSummaryQuestions

Chapter4:CascadeStyleSheetsSelectorsReferencingCSSWithinHTMLSummaryQuestionsChapter5:MoreOnCSSProperties

HowToCombineSelectorsWorkingWithSpecificityInCombinedSelectorsHowToKeepSpecificityWeightsLowLengthsSummary

Chapter6:TheBoxModelIntroductionToTheBoxModelApplyingTheBoxModelSummaryQuestionsChapter7:HowToPositionContent

FloatsTypesOfFloatsSummaryChapter8:TypographyAddingColorToYourTextFontPropertiesFontSize

AdjustTheLineHeightSummaryConclusionDescription

$1000BLUEPRINT5ProvenStepsTo

MakeYourFirst$1,000AsAFreelancer,EvenIfYouHaveNeverMadeADollarOnlineBefore!IntroductionFearOfBeingPaidFearOfFacingThe

CompetitionFearOfClosingDoorsOnACareerAsCoder/ProgrammerFreelancingYourExpertiseSuccessfulFreelancingStep#1SelectingPlatformsWritingYourProfile

SampleProfileTakingExamsStep#2FindingClients—BiddingOnProjectsStep#3CreatingWorkSamplesStep#4Reviews—BuildingAPortfolioAndRepeatClients

Step#5ManagingTimeAndResourcesCompilingWords

photocopying,orotherwisewithoutthepriorwrittenpermissionofthecopyrightholder.TheAuthorhasstrivedineverywaytobeasaccurateandcompleteaspossibleinthecreationofthisbook,notwithstandingthefactthat

hedoesnotwarrantorrepresentatanytimethatthecontentswithinthebookareaccurateduetotherapidlychangingnatureofthesubject.Whileallattemptshavebeenmadetoverifyeachandeverypieceofinformationprovided

inthispublication,theAuthorassumesnoresponsibilityforanyerrors,omissions,orcontraryinterpretationofthesubjectmatterherein.

IntroductionToHTML5HTML5isahottopicfordevelopers,noquestionsasked.HTML5istheheirofHTML4.01,whichwasreleasedwaybackin1999.HTML5worksinconjunction

withCSS3andisstillindevelopment.Eversinceitwasreleased,ithasbeenundercontinuousdevelopment.TheWorldWideWebConsortium(W3C),acommunityofmemberorganizationsandfulltimestaffthatdevelopstandardsfortheWorldWide

Web,continuestoaddimpressivefeaturesanditseemshighlyunlikelythatthedevelopmentofthelatesthypertextmarkuplanguagewouldcometoanendanytimesoon–whichisagoodthinginsomeways.HTML5isbasedonthefollowingpre-setstandards:

▪ThenewfeaturesofHTML5mustbebasedonHTML,DOM,CSS,andJavaScript▪Therequirementforexternalplug-ins,suchasFlash,mustbereduced▪Ascomparedtopreviousversions,errorhandlingshouldbemadeeasier

▪Moremarkupshouldreplacescripting▪Itshouldbedevice-independent▪Thedevelopmentshouldbevisibletothepublic

WhatYouShouldKnowAboutHTML5ItisvitalthatyoukeepinmindthatHTML5isbuiltuponthesuccessofHTML4.01–whichwasundeniablythebestversioneverreleased.InordertobeabletouseHTML5,youdonotneedtooverlookthebasicsof

HTML’spreviousversion.Youarenotlearningacompletelynewlanguagehere;infact,ifyouhavenoknowledgeofHTML4.01,thenitisessentialthatyoufirststudythatbeforemovingontoHTML5.StartingoffwithHTML5wouldbelikerunningbefore

youevenlearnedtowalk–whichwouldbeimpossible.TherearemanybasicsofHTML5thatarecontainedinthepreviousversion.Withthatsaid;ifyouwishtomasterHTML5,youmustgobackandlearnformerversionsofHTML.Onemajoradvantageof

HTML5isthatitworksrightoutofthebox.Itissupportedbyallmajorbrowserscurrentlyavailable.Also,ifyouareapartofadesignbusiness,oneofthegravestmistakesyoucanmakeisstickingtoHTML4.01becauseeveryonewillmoveforward,leavingyoubehind.

ThereisnodoubtwhatsoeverthatHTML5hascomeheretostay.Ithasbeencreatedtomanagetheincreasinglyadvancednecessitiesoftoday;andbecauseitisinacontinuousdevelopmentphase,itwillintroducenewfeaturesthatareboundtoimpresseventhemost

demandingofdevelopers.

WhyYouShouldLearnHTML5HTML5isapowerfulwebmarkuplanguagethatenableswebdesignerstobuildrich,webbasedapplicationsthatcanrunonanydeviceusingabrowserthathasHTML5support;asmentionedpreviously,allmajor

browserssupportHTML5.Currently,nativeappsthathavebeenwrittenforGoogle’sAndroidorApple’siOSoperatingsystemsleadthemobiledevelopmentfield.However,HTML5offersmanyadvantagesoverthesenativeapplications.Tobeginwith,HTML5isan

openandweb-basedstandardthatiscapableofrunninginanywebbrowser.ThismeansthatdevelopersarenolongerboundtotheclosednativeappecosystemsofAppleandGoogle.ThisallowswebdeveloperstofreelypromotetheirHTML5appsontheweb.

Secondly,HTML5possessopenwebstandardsthatenabledevelopersandbusinessestoeffectivelycontrolmonetization,distributions,andtheoverallfunctionalityoftheirapplications–regardlessofwhetherdesktopormobile.Itistruethatnativeappscome

withanintegrateddirectpaymentsystemthatallowsone-clickpayments;nonetheless,developershavetopayamajorportion(almost30percent)ofthetransactiontothegatekeepers(i.e.AppStoreandGooglePlay).Inaperiodofbetween3to5

years,HTML5wouldbecomethestandardprogramminglanguagefortheweb.NotonlyHTML5wouldallowcreationofhighlyinteractivecontent,butwiththeever-increasingfeaturesofHTML5,websiteswouldbeabletoofferfunctionalityandfeaturesthatequalorexceed

thatofnativeapps.

WhomIsThisBookFor?ThisbookisforpeoplewhohaveathoroughunderstandingofthebasicsofHTML4.01,andwishtoenhancetheirdevelopmentskillbyassimilatingwhatHTML5offers.Itishighlyrecommendedthat

youlearnpriorversionsofHTMLasaprerequisitetostudyingHTML5.ThebookwillstartoffbydiscussingtheessentialsofHTML5.Here,thereaderwillbeabletogetaglimpseofwhat’snewinthelatestversionofthismarkuplanguage.Thefollowing

chapterswouldthenbuildonanddiscussHTML5’sfeaturesingreaterdetail.AbriefChapterSummaryfollowsattheendofeachchaptertohighlightafewkeypoints.Itisrecommendedthatyoufollowthestepbystepexamplesasyouproceedthroughthebook.

Itishopedthataftercompletingthisbook,thereaderwillhaveafairunderstandingofthebasicsofHTML5.Goodluck!

Chapter1:TheEssentialsOfHTML5Inthischapter,youwilllearnaboutessentialsofHTML5,including:

•Drawingwithcanvaselement

•Dragginganddropping•Newwebformcontrols•Editingwebpagesonthego•Handlingbrowserhistory•Interdocumentmessaging•Superbaudioandvideosupport•Webstorage•Newelements

HTML5hasbrokenthebarrierthatstoodbetween

scriptingandHTML.Ithasturnedouttobeextremelyscript-intensive.Itoffersanumberofnewelementsaswellasattributes;however,themajorimprovementinHTML5arerelatedtothefeaturesthatcanonlybeaccessedthroughscripting.HTML5reliesheavilyon

scripting,regardlessofwhetheritisaboutdragginganddroppingofitems,drawinginacanvasorawholelotofotherthings.Thisscriptingmeans,formostpeople,moreuseofJavaScript.Withthatsaid,inordertomakeHTML5work,youmustusescripting.

Thisisactuallyaverygoodthingbecauseasaresultofthesenewcapabilities,anincreasingnumberofinternetbrowsermanufacturerswouldhavetoimplementsupportforthenewcapabilities.ItisoftenseenthatthecapabilitiesofJavaScriptvaryfromonebrowsertoanother,

andtheheavyrelianceofHTML5onscriptingwouldhelpmakeallnewfeaturesuniformacrossdifferentbrowsers.LetusnowtakeaquickglanceofthecapabilitiesofHTML5,manyofwhichwewilldiscussindetailinthisbook.

DrawingWithCanvasElementTheCanvaselementfeaturehasbeenanticipatedforalongtime.Justasitsnamesuggests,thiselementcanbeusedtodrawupon,includingdrawingsomereallycomplexfiguressuchascircles,arcs,curves,andrectangles.Italso

allowsyoutoinsertimagesandcolorthefigures.ThepowerfulCanvascontrolcaneffectivelyincorporatedynamicgraphicsintowebpages,anddisplaygraphicsthatchangetheirresponsedependingontheuser’sactions.ThisparticularfeatureofHTML5relies

heavilyonJavaScript,justlikethemajorityofelementsofHTML5.Sobasically,youdoallyourdrawinginJavaScript.Forthemajorityoffigures,youwouldusearelativelysimplefunctionofJavaScript,suchasstroke(),lineTo(),orfill().

DraggingAndDroppingAnotherlong-awaitedfeatureofHTML5isthedraganddropcapability.BeforethereleaseofHTM5,dragginganddroppingofitemswerecarriedoutbasedonadhocJavaScript–whichneededtobewritteninadifferent

manneraltogetherfordifferentbrowsers.WiththeadventofthelatestversionofHTML,draganddropfeaturewillbecomeuniformacrossthebrowsers.ThoseofyouwhohavewrittenthedraganddropcodeinJavaScriptwouldunderstandwhatahugehelp

thiswouldbe.Therewillnolongerbetheneedoftestingyourcodeonindividualbrowserstoseewhetheritisexecutingcorrectlyoneachofthem.ThemajorityofvisualelementsinHTML5possessadraggableattribute.Ifthisattributeissettotrue,users

caneasilydraganddropthespecificelementaslongastheyimplementitinJavaScript.

NewWebFormControlsAnumberofnewwebformcontrolsareapartofHTML5,andtheseextendthenumberofcontrolsthatarealreadyavailableinHTML4,suchasoptionbuttons,checkboxes,etc.Justasanexample,

developerscannowuseacolorpicker,adatetimecontrol,anemailfieldaswellasatelephonenumbercontrol.ThesecontrolsaddalotofpowertoHTML.Forinstance,thecolorcontrolshowsacolorpickerfromwhichausercanchooseany

colorheorshelikes.Theactualimplementationofeachofthesecontrolsdependsonbrowsermanufacturers;however,manyofthelatestcontrolsarealreadybeingincorporated.

EditingWebPagesOnTheGoHTML5hasmadewebpagesmoreinteractive,andhasalsoempowereduserstoedittextwithinawebpage.

HandlingBrowserHistoryHTML5alsoprovidesanenhancedcontrolofthebrowserhistory.Wewilllookatthisinmoredetaillateroninthisbook.

InterdocumentMessagingHTML5enablesyoutosendmessagesbetweennumerouspartsofadocument.Thisincludeseventhosepartsthatareactuallycomefromvaryingdocuments.Forexample,youmaywanttodisplayawebpageinanother

webpageusingan<iframe>.WithHTML5,youcannowsendtextmessagestothecontaineddocument.

SuperbAudioAndVideoSupportAmajoradvancementinHTML5istheenhancedsupportforaudioandvideo.Thebrandnew<video>elementiscapableofdisplayingvideos,whilethe<audio>elementcanseamlesslyplayaudio–allof

thiscanhappenwithouttheneedofexternalpluginssuchasQuickTimeorFlash!

WebStorageHTML/JavaScriptauthorsmissedoutontheabilitytostoredatabetweenpageaccessesinthepast.Thismeansthatwheneveryoure-openaparticularwebpagethatcontainsJavaScript,allofyourJavaScriptvariableswererestoredtotheiroriginal

values.ThishasbeenfixedforgoodinHTML5,andnowthereisanoptiontosavedatawithinthebrowseralongwithsavingitinthebrowser’ssessionwithaparticularserver.

NewElementsHTML5wouldbenogoodwithoutthenewelementsthatitboastsrightoutofthebox.Wewilldiscussthefollowingnewelementsinthelastchapterofthisbook:

✓<article>

✓<aside>

✓<audio>✓<canvas>✓<command>✓<datalist>✓<details>✓<embed>✓<figcaption>✓<figure>✓<footer>✓<header>✓<hgroup>✓<keygen>

ThefollowingelementshavebeendroppedoutandarenolongerpresentinHTML5:

☒<acronym>

☒<applet>☒<basefont>☒<big>☒<center>☒<dir>☒<font>

☒<frame>

SummaryInthischapter,wediscussedthebasicsofthecapabilitiesofferedbyHTML5,includingthefollowing:DrawingwithCanvasDraggingandDroppingNewWebFormControls

EditingWebPagesOnTheGoInterdocumentMessagingSuperbAudioandVideoSupportWebStorageNewElementsYoulearntaboutthenewelementsthathavebeen

addedto,andtheelementsthathavebeenremovedfrom,HTML5.

Chapter2:TheCanvasElementInthischapter,youwilllearnaboutthecanvaselement:

•TheCanvasAPI•GettingstartedwiththeCanvaselement

HTML5’sCanvaselementisextremelypopularandisutilizedtoillustrategraphics.ItcanbecreatedeasilyinHTML5inthefollowingway:<canvasheight-”yyy”width=xxx”></canvas>

TheabovecodeisallthatisneededtocreatetheCanvaselement.Thequestionthatnowcomestomind:howdoyoudrawgraphicswithinthiscanvas?Theansweris:byusingJavaScript,aswewillseeinthischapter.TheCanvaselementis

capableofdrawinglines,arcs,images,complexshapes,text,andmuchmore.

TheSpecificationsHerearethespecificationsofthiselement:Element:<canvas>StartTagRequired:YesEndTagRequired:YesNecessaryAttributes:Height&WidthSupportingBrowsers:Firefox,Chrome,Safari,

OperaDuetothefactthatJavaScriptisnecessaryinorderforthiselementtowork,letuslookatanoverviewofthatisalreadyavailableatourdisposalbeforewejumpintothedetails.

TheCanvasAPIAspecialapplicationprogramminginterface(API)hasbeencreatedbyW3Cforthisnewcanvaselement.Itspecifiesthenamesofallbuilt-infunctionsandhowtheycanbeused.YoucangettheCanvasAPIatthefollowinglink:http://dev.w3.org/html5/canvas-

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

api/canvas-2d-api.html.However,tomakeiteasyforyoutoassimilateusefuldata,wewilllistthemostimportantfunctionsbelow.IntheW3CAPIspecifications,theattributesoftheelementaswellasthesupportedfunctionsofJavaScriptareavailable.Therefore,youhavetoset

someaspectsoftheelementwiththeattributesbeforeyouperformadrawingoperation.LookatthefollowingexamplewherethedrawingstylehasbeensetwiththefillStyleattribute,followedbytheactualdrawingofafilledrectanglewithfillRectfunction.

canvas1.fillStyle=xxxxcanvas1.fillRect(xx,xx,xx,xx;EachandeveryitemintheAPIcomesprefixedwithitsowntypes;forinstance,floatforfloatingpointnumber.Someoftherepresentativetypesthatyouwillseeinthe

specificationsbyW3Careasfollows:▪anyForattributes–Thisimpliesthatanattributecanbeofanykind.▪DOMStrings(MeaningDocumentObjectModelString)–Justaquotedtextstring,forourpurposes.▪float–Floatingpoint

numberLetusnowlookatwhattheCanvasAPIenlistsforfunctionsandattributes.

StylingTwoattributesareusedforsettingupthedrawingstyle,regardlessofwhetherthedrawingactionsaresupposedtofillthefigureornot:▪attributeanyfillStyle;//[defaultisblack]▪attributeanystrokeStyle;//[defaultisblack]

SettingUpLineStylesThefollowingJavaScriptattributecanbeusedtosetthelinestyles:▪attributeDOMStringlineCap;//“butt”,“round”,“square”(default“butt”)▪attributeDOMStringlineJoin;//“miter”,“round”,“bevel”*(default

“miter”)▪attributefloatlineWidth;//(default1)▪attributefloatmiterLimit;//(default10)

CastingShadowsTheCanvasElementiscapableofaddingshadowstographicswiththefollowingattributes:▪attributefloatshadowBlur;//(default0)▪attributeDOMStringshadowColor;//(defaulttransparentblack)▪attributefloat

shadowOffsetX;//(default0)▪attributefloatshadowOffsetY;//(default0)

DrawingRectanglesThefollowingfunctionscanbeusedforrectangles:▪clearRect(floatx,floaty,floatw,floath);▪fillRect(floatx,floaty,floatw,floath);▪strokeRect(floatx,floaty,floatw,floath);

DrawingComplexShapesTheCanvaselementallowsyoutodrawBeziercurves,arcs,andmanymorecomplexshapeswiththefollowingfunctions:▪arc(floatx,floaty,floatradius,floatstartAngle,floatendAngle,boolean

anticlockwise);▪arcTo(floatx1,floaty1,floatx2,floaty2,floatradius);▪beginPath();▪bezierCurveTo(floatcp1x,floatcp1y,floatcp2x,floatcp2y,floatx,floaty);▪clip();▪closePath();▪fill();

▪lineTo(floatx,floaty);▪moveTo(floatx,floaty);▪quadraticCurveTo(floatcpx,floatcpy,floatx,floaty);▪rect(floatx,floaty,floatw,floath);▪stroke();▪booleanisPointInPath(floatx,floaty);

DrawingTextTextcanalsobewrittenwithinaCanvasbyutilizingthefollowingattributesandfunctions:▪attributeDOMStringfont;//(default10pxsans-serif)▪attributeDOMStringtextAlign;//“start”,“end”,“left”,“right”,“center”

(default:“start”)▪attributeDOMStringtextBaseline;//“top”,“hanging”,“middle”,“alphabetic”,“ideographic”,“bottom”(default:“alphabetic”)▪fillText(DOMStringtext,floatx,floaty,optionalfloatmaxWidth);▪TextMetricsmeasureText(DOMStringtext);

▪strokeText(DOMStringtext,floatx,floaty,optionalfloatmaxWidth);

DrawingImagesImagescanbedrawnbythefollowingfunctions:▪drawImage(HTMLImageElementimage,floatdx,floatdy,optionalfloatdw,floatdh);▪drawImage(HTMLImageElementimage,floatsx,floatsy,floatsw,floatsh,floatdx,floatdy,floatdw,floatdh);

▪drawImage(HTMLCanvasElementimage,floatdx,floatdy,optionalfloatdw,floatdh);▪drawImage(HTMLCanvasElementimage,floatsx,floatsy,floatsw,floatsh,floatdx,floatdy,floatdw,floatdh);▪drawImage(HTMLVideoElementimage,floatdx,floatdy,optionalfloatdw,float

dh);▪drawImage(HTMLVideoElementimage,floatsx,floatsy,floatsw,floatsh,floatdx,floatdy,floatdw,floatdh);

UsingTransformationsYoucaneasilyrotate,scale,ortranslategraphicsthroughthefollowingfunctions:▪rotate(floatangle);▪scale(floatx,floaty);▪translate(floatx,floaty);

Thiswasageneraloverview

oftheCanvasAPI.Formoredetails,youcanrefertothelinkprovidedabove.

GettingStartedWithCanvasItisnowtimetogetstartedwiththeCanvaselementandlearnhowyoucancreateone.Togetstarted,followthestepbystepguidelinesgivenbelow:

1. Usingatexteditor,createacanvas.html

file.2. Enterthecodegiven

belowtocreateacanvaselementandtoset-uptheJavaScript.NotethatwewilluseJavaScriptinafunctionthatwehavenamedloader,whichrunsrightafterthe

Canvaselementloadscompletely.

<!DOCTYPEhtml><html><head><title>CanvasExample</title><scripttype=”text/javascript”>functionloader(){..

.</script></head><bodyonload=”loader()”><h1>CanvasExample</h1><canvasid=”canvas”width=”600” height=”500”></canvas></body></html>

3. AddJavaScriptgiven

belowtocreateanobjectthatcorrespondstotheCanvas.ThisobjectwillbeusedtoaccesstheCanvaselement.

<!DOCTYPEhtml><html><head>

<title>CanvasExample</title><scripttype=”text/javascript”>functionloader(){varcanvas=document.getElementById(‘canvas’);varcanvas1=canvas.getContext(‘2d’);...</script></head>

<bodyonload=”loader()”><h1>CanvasExample</h1><canvasid=”canvas”width=”600” height=”500”></canvas></body></html>

4. Savethecanvas.htmlfile.Ensurethatthiscodehasbeensavedin

textformat.IfyouareusingWordPad,thedefaultformatisRTFwhichdoesnotworkwithwebbrowsers.

OnceyouhavecreatedaCanvasandimplementedtheassociatedJavaScript,youcanusetheappropriatefunctionsfordrawing

rectangles,complexshapes,images,andmanyotherthings.

SummaryTheCanvaselementiscapableofdrawinglines,arcs,images,complexshapes,text,andmuchmore.Aspecialapplicationprogramminginterface(API)hasbeencreatedbyW3Cforthisnewcanvaselement.Itspecifiesthenamesofall

built-infunctionsandhowtheycanbeused.Twoattributesareusedforsettingupthedrawingstyle,regardlessofwhetherthedrawingactionsaresupposedtofillthefigureornot.

Chapter3:DraggingAndDroppingInthischapter,youwilllearnabout:

•Draganddrop•Startingadraganddropexample

•Stylingtargetanddraggableelements

DraganddropoperationsaresupportedinHTML5.Youcaneasilymovetextandelementsaroundthewindowofthebrowserusingamouse,oranytypeofpointingdevicethatyoumayhave.

Thisfunctionalityisextremelyusefulandcanbeusedforavarietyofpurposes.Forinstance,itcanallowuserstodraganddropitemsintoashoppingcart,orallowthemtocustomizethingsontheirhomepage.

DragAndDropThedraganddropfunctionalityrequiresthefollowingelementattributes:▪draggable▪ondragenter▪ondragover▪ondrop▪ondragstart▪ondragend

ThefollowingbrowserssupportdragginganddroppingelementofHTML5:Firefox,Safari,Chrome,Opera.JustlikeotherelementsofHTML5,thisoneisalsodependentonJavaScript.Yousimplyconnectan‘on’attribute(suchasondragstart)

toafunctionofJavaScriptwhichwouldthentakeplaceassoonastheuserstartstodraganelement:ondragstart=“returnstart(event)”;

DragAndDropAPIYoucanlearnallaboutthedraganddropspecifications

athttp://dev.w3.org/html5/spec/dnd.htmlHowever,thepurposeofthisbookistogetyouacquaintedwiththemostimportantaspectsofHTML5.FromthepointofviewofHTML,thefollowingattributessupportdrag-and-drop:

http://dev.w3.org/html5/spec/dnd.html

▪draggable▪ondragenter▪ondragover▪ondrop▪ondragstart▪ondragend

TheDraggableAttributeYoucaneasilycreatea

draggableelementbysettingitsattributetotrueinthefollowingmanner:<divid=”draggable3”draggable=”true”></div>Thiscodeinformsthewebbrowserthataparticularelementcanbedragged.

However,youalsoneedtoconnectthemtoaJavaScriptfunctiontomakeitfullywork.

TheOnDragEnterAttributeDragentereventstakeplacewheneverauserdragsadraggableelement.Thiscan

beconnectedtoaJavaScripthandlerfunctioninthefollowingway:<divid=”target1”ondragenter=”returnenter(event)”...Notethattheeventoccursin

droptargetsandnotinthedraggableelements.

TheOnDragOverAttributeThiseventoccurswithinadroptargetwheneverauserdragsadraggableelementoverit.ThiseventisconnectedtoaJavaScript

handlerinthefollowingmanner:<divid=”target1”ondragenter=”returnenter(event)”ondragover=”returnover(event)”...

Theeventoccursindroptargets.

TheOnDropAttributeDropeventsoccurinthedroptargetwhenusersdropanelementontothespecifiedtarget.Thiseventis

connectedtoaJavaScriptfunctionhandlersinthefollowingway:<divid=”target1” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”>Thiseventtendstooccurin

droptargets.Donotforgetthatitisondrop,andnotondragdrop.

TheOnDragStartAttributeThiseventtakesplacewithindraggableelementswheneverauserstartstodragthem.Thiseventcanbeconnected

toJavaScriptfunctionhandlersinthefollowingway:<divid=”draggable1”draggable=”true” ondragstart=”returnstart(event)” ...Theondragstarteventoccurs

onlyindraggableelements.

TheOnDragEndAttributeWheneverusersstopdraggingdraggableelements,thiseventoccurs.YoucanconnectthiseventtotheJavaScriptfunctionhandlerslikethis:

<divid=”draggable1”draggable=”true” ondragstart=”returnstart(event)” ondragend=”returnend(event)”>1...

StartingADragAndDropExampleThefollowingstepbystepguidelineswillhelpyoutoputthedraganddropelementtowork.

1. Createafilecalleddraganddrop.htmlusinganytexteditor.

2. Inputthefollowing

codetoconstructthreetargetsonwhichthedraggableelementscanbedropped.Noteherethatthe<div>elementsarebeingusedfortargetsandthatthedraganddropeventswillbeconnectedto

JavaScriptfunctions.

<!DOCTYPEHTML><html><head><title>DragandDropExample</title></head><body><h1>DragandDropExample</h1><divid=”target1”

ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”></div><divid=”target2” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”></div><divid=”target3” ondragenter=”returnenter(event)” ondragover=”returnover(event)”

ondrop=”returndrop(event)”></div></body></html>

3. Nowaddthecodebelowtocreatethreedraggable<div>elements.

<!DOCTYPEHTML><html><head>

<title>DragandDropExample</title></head><body><h1>DragandDropExample</h1><divid=”target1” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”><divid=”draggable1”draggable=”true” ondragstart=”returnstart(event)”

ondragend=”returnend(event)”>1</div><divid=”draggable2”draggable=”true” ondragstart=”returnstart(event)” ondragend=”returnend(event)”>2</div><divid=”draggable3”draggable=”true” ondragstart=”returnstart(event)” ondragend=”returnend(event)”>3</div></div>

<divid=”target2” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”></div><divid=”target3” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”></div></body></html>

4. Savethefile,ensuringthatyousaveitintextformat.

Nowthatwehavestartedourexamplecontainingthreetargetsandthesamenumberofdraggableelements–allofthesearecurrentlyinvisible.Wewillnowstylethemnext.

StylingTargetAndDraggableElementsWewillnowmakevisiblethe<div>elementsfordraggablesandtargets.Thetargetswouldbestyledincyan,andthedraggablesinorange.Followthestepsbelowtodothat:

1. Openthefile

draganddrop.htmlusingyourfavoritetexteditor.

2. Addthecodegivenbelowtostylethetargetanddraggable<div>elements.


<title>DragandDropExample</title><styletype=”text/css”>#target1,#target2,#target3{float:left;width:250px;height:250px;padding:10px;margin:10px;}#draggable1,#draggable2,#draggable3{width:75px;height:70px;padding:5px;

margin:5px;}#target1{background-color:cyan;}#target2{background-color:cyan;}#target3{background-color:cyan;}#draggable1{background-color:orange;}#draggable2{background-color:orange;}#draggable3{background-color:orange;}</style></head>

<body><h1>DragandDropExample</h1><divid=”target1” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”><divid=”draggable1”draggable=”true” ondragstart=”returnstart(event)” ondragend=”returnend(event)”>1</div><divid=”draggable2”draggable=”true”

ondragstart=”returnstart(event)” ondragend=”returnend(event)”>2</div><divid=”draggable3”draggable=”true” ondragstart=”returnstart(event)” ondragend=”returnend(event)”>3</div></div><divid=”target2” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”>

</div><divid=”target3” ondragenter=”returnenter(event)” ondragover=”returnover(event)” ondrop=”returndrop(event)”></div></body></html>

3. Savethefile.Nowyouwillbeabletosee

draggablesaswellastargets.

SummaryThedraganddropfunctionalityrequiresthefollowingelementattributes:draggableondragenterondragoverondropondragstart

ondragendThefollowingbrowserssupportdragginganddroppingelementofHTML5:Firefox,Safari,Chrome,Opera.Thetargetanddraggableelementscanbestyledeasily.

Chapter4:WebFormControlsInthischapter,youwilllearnaboutwebformcontrols,including:

•Introductiontowebformcontrols•Webformsexample•Createadefaultcontrol

HTMLhasalwaysofferedsupportforformcontrolsthroughtheuseof<input>element.Thisincludestextboxes:<inputname=”text”type=”text”>

Andradiobuttons:<inputname=”radio”type=”radio”>Suchcontrolscanbecreatedusingthe<input>elementalongwiththetypeofattributesettothetypeofcontrolyouwishtohave(radiobuttons,checkboxes,textfields).Youwillhaveto

setthenameattributetothenameofcontrolbecauseyouwillneedtoreferenceitinthecode.HTML5increasesthevarietyofformcontrolsthatareavailabletothedeveloper.Ithasaddednumerouscontrols,includingnumericrangecontrolanddate-timepicker.

Thefocusofthislessonwouldbetolearnaboutwhat’snewinHTML5webformcontrols.

IntroductionToWebFormControlsAspreviouslymentioned,awebformcontrolcanbecreatedusing<input>element.Element:<input>RequiredAttributes:Youstatethewebformcontrolthatyouneedalongwithits

typeattribute.SupportedBrowsers:OperaThefollowingwebcontrolsareofferedbyHTML5:Type

button

checkbox

color

date

datetime

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

search

submit

tel

text

time

url

week

WebFormsExampleWewillnowusethenewHTML5controls.Followthestepsbelowtogetstarted:

1. Usingatexteditor,createwebform.html.

2. TocreateanHTMLtablethatwillholdthewebformcontrols,

enterthefollowingcode.Also,youwillbeaddingaSubmitbutton.

<!DOCTYPEhtml><html><head><title>WebFormExample</title></head>

<body><h1>WebFormExample</h1><formmethod=”post”action=”webforms.php”><tableborder=”1”cellpadding=”5”>...<inputtype=”submit”value=”Submit”></form></body></html>

3. Savewebform.html,ensuringthatyousaveitinatextformat.

Nowthatyouhavecreatedthepage,itistimetoaddafewwebformcontrols.

CreateADefaultControlIfadeveloperdoesnotspecifythetypeofcontrol,atextfieldiscreatedbydefault,asshownbelow.

1. Openwebform.htmlusingyourfavoritetexteditor.

2. Addthecodegiven

below,andmakesurethatyoudonotspecifyanyattribute.Payattentiontotheautofocusattribute;thiswillmakeablinkingcursorappearinthetextboxassoonasthepageloads.Also,theplaceholder

attributewillenableyoutosetplaceholdertext.Thefollowingcodewillnotworkinanybrowserasofyet.

<!DOCTYPEhtml><html><head><title>WebFormExample</title></head>

<body><h1>WebFormExample</h1><formmethod=”post”action=”webforms.php”><tableborder=”1”cellpadding=”5”><tr><td>Default</td><td><inputname=”name” placeholder=”Enteryournickname”autofocus></td></tr>...<inputtype=”submit”value=”Submit”>

</form></body></html>3. Savethefileintext

format.

URLControlExampleWhileyoucannowcreateasmanycontrolsasyouwant,

hereisanexamplethatwillshowyouhowtocreateaURLcontrol:

1. Openwebform.htmlandaddthecodebelowtocreateaURLfield:

<!DOCTYPEhtml><html><head><title>WebFormExample

</title></head><body><h1>WebFormExample</h1><formmethod=”post”action=”webforms.php”><tableborder=”1”cellpadding=”5”><tr><td>Default</td><td><inputname=”name” placeholder=”Enteryournickname”autofocus></td></tr><tr><td>URL</td><td><inputname=”url”

type=”url”></td></tr>...<inputtype=”submit”value=”Submit”></form></body></html>

2. Savethefileintextformat.

Theabovecodewillmakethe

browserformattextenteredbyyouintoaproperURL.Itwillshowanerrorifitcannotdoit.Youcancreateotherwebformcontrolsinasimilarmanner.

SummaryHTML5increasesthevarietyofformcontrolsthatareavailabletothedeveloper.Awebformcontrolcanbecreatedusing<input>element.Ifadeveloperdoesnotspecifythetypeofcontrol,a

textfieldiscreatedbydefault.

Chapter5:InlineEditingInthischapter,youwilllearnaboutinlineediting,including:

•Gettingtoknowinlineediting

HTML5allowsyoutomakeelementswhosecontentcanbeeasilyeditedbyusers;infact,thewholedocumentcanbeeditedwithmuchease.Bythis,wedonotrefertotextfields.Youcanmakeallkindsofelementseditable,including<div>elements.Inthissection,wewill

attempttocreateaneditable<div>elementwhichwouldallowausertoeditit.Assoonasauserwillclickit,atext-insertioncaretwillappear,allowingtheusertoentertext.

GettingToKnowInlineEditingThefollowingthreeattributescanbeusedwithinlineediting:•designmode–makesspecificHTMLelementseditable•contenteditable–makestheentiredocumenteditable

•spellcheck–enablesspellchecking

contenteditableSupportedby:InternetExplorer,Chrome,Opera,Safari,FirefoxThecontenteditableattributecanbeusedinHTML5tomakecertainelementseditable.Therearethree

settingsforthisattribute:•True–makescontentofelementeditable•False-makescontentofelementnoteditable•Inherit-makesattributethesameastheparentoftheelement

Inordertoallowausertoeditthe<div>element,wewillsetcontenteditabletotrue.

ExampleInthisexample,wewillworkwiththecontenteditableattributetogetherwitha<div>elementtoenableuserstoentertextinthe<div>element.

1. Createafilecallededit-div.htmlinatexteditorofyourchoice.

2. Enterthiscodeinto

thefile:<!DOCTYPEhtml><html><head><title>Editable<div>Element</title></head><body><h1>Editable<div>Element</h1>..

.</body></html>

3. Tocreatea<div>

element,andtosetitscontenteditableattributetotrue,enterthefollowingcode:

<!DOCTYPEhtml>

<html><head><title>Editable<div>Element</title></head><body><h1>Editable<div>Element</h1><divid=”div”style=’border:solidblack;height:300px;width:400px’ contenteditable=”true”></div></body>

</html>

4. Savethefileastext

andopentheHTMLdocumenttoseethecodeinaction.

designmodeSupportedby:InternetExplorer,Chrome,Opera,

Safari,FirefoxThisisanattributeofanentiredocumentandmakesthewholedocumenteditable.Therearetwosettingsofthisattribute:•On–turnsonthedesignmode,therebyallowingeditingofthewholedocument•Off–turnsoffthe

designmode,therebypreventingeditingofthewholedocument

Ifyouwanttomakeyourdocumenteditable,youwillhavetosetthedesignmodeattributeto‘on’.

ExampleTomakethewholedocumenteditable,wewilladdthedesignmodeattributewitha<iframe>floatingframe.Therefore,insteadofmakingjustthe<div>elementeditable,wewillmaketheentirepagecontainedinthe<frame>editable.

Here’showyoucangetstarted:

1. Createanedit-frame.htmlpageusingatexteditorofyourchoice.

2. Tocreatethe<iframe>andthisexample,enterthecodegivenbelow:

<!DOCTYPEhtml><html>

<head><title>Editable<iframe></title></head><bodyonload=”loader()”><h1>Editable<iframe></h1><iframeid=”content”style=’border:solidblack;height:300px;width:400px’ src=”about:blank”></iframe></body></html>

3. Toturnonthe

designmodeattribute,enteraddthistothefile:

<!DOCTYPEhtml><html><head><title>Editable<iframe></title><scripttype=”text/javascript”>

variframe;functionloader(){iframe=document.getElementById(“content”);iframe.contentDocument.designMode=“on”;}..window.addEventListener(“loader”,onload,false);</script></head>

<bodyonload=”loader()”><h1>Editable<iframe></h1><iframeid=”content”style=’border:solidblack;height:300px;width:400px’ src=”about:blank”></iframe></body></html>Savethefileintextformat.Inthisexample,wecreatedan

<!DOCTYPEhtml><html><head><title>Editable<iframe></title><scripttype=”text/javascript”>variframe;functionloader(){iframe=

document.getElementById(“content”);iframe.contentDocument.designMode=“on”;}functionshowSource(){varcontent=iframe.contentDocument.body.innerHTML;content.replace(/</g,‘<’);content.replace(/>/g,‘>’);alert(content);}

functioncreateLink(){varurl=prompt(“EnterURL:”,“http://”);if(url)iframe.contentDocument.execCommand(“createlink”,false,url);}window.addEventListener(“loader”,onload,false);</script></head><bodyonload=”loader()”>

<h1>Editable<iframe></h1><div><inputtype=”button”value=”Bold”onclick= “iframe.contentDocument.execCommand(‘bold’,false,null);”><inputtype=”button”value=”Italic” onclick=”iframe.contentDocument.execCommand(‘italic’,false,null);”><inputtype=”button”value=”Underline” onclick=”iframe.contentDocument.execCommand(‘underline’,false,null);”><inputtype=”button”value=”AddLink” onclick=”createLink();”><inputtype=”button”value=”DisplaySource”

onclick=”showSource();”></div><br><iframeid=”content”style=’border:solidblack;height:300px;width:400px’ src=”about:blank”></iframe></body></html>3. Savethefile,making

surethatitisnotinanyformatotherthan

text.Thisexampleworksinthesamewayasthepreviousone(edit-div.html)withtheonlyexceptionbeingtheuser’sabilitytoeditthewholedocumentcontainedinthe<iframe>.

spellcheck

Supportedby:FirefoxWheneditingthecontentofaspecificelement,suchas<div>element,thewebbrowsercanallowyoutospellcheckyourcontent.Therearetwovaluesofthespellcheckattribute:•True–turnsonspellchecking•False–turnsoff

spellcheckingExampleAsofnow,onlyFirefoxsupportsthespellcheckingattributeofHTML5.IfFirefox,itisonbydefault.YouwillseethatanymisspelledwordsareautomaticallyunderlinedinFirefox,andcanbecorrected

byright-clickingthewordandchoosingthecorrectwordfromthedrop-downlist.

SummaryHTML5allowsyoutomakeelementswhosecontentcanbeeasilyeditedbyusers.Thefollowingthreeattributescanbeusedwithinlineediting:• designmode–makesspecificHTMLelementseditable

• contenteditable–makestheentiredocumenteditable• spellcheck–enablesspellchecking

Chapter6:WorkingWithBrowserHistoryInthischapter,youwilllearnaboutworkingwithbrowserhistory,including:

•TheHistoryAPI

•Pop.history.htmlexample

HTML5givesyougreatercontrolonthehistoryofthebrowser.ThisisachievedthroughtheHTMLhistoryofobject.Wewillcreateanexamplecalledpop-history.htmlinwhichtheuser

canclickontheBackbuttontomoveonepageback.TheusercanalsoclickontheForwardbuttontomoveonepageforward.Whoalsohavetheabilitytoenteraspecificintegerinatextfield,clickGo,andthepagecanmoveaheadbythevalueoftheinteger.Onthe

otherhand,anegativenumberwouldmovethepagebackwards.Togetthepushingandpoppingofdatatowork,youneedtouseabrowserthatsupportsthisfunction.Unfortunately,currentlytherearenobrowsersthatsupportthis.Nonetheless,itis

importantthatyouunderstandhowthisworkssoyougetreadywellbeforethebrowsersdo.

TheHistoryAPIThehistoryoptionisacomponentofthewindowobjectinwebbrowsers.Therefore,thiscanbereferredtoaswindow.historyobject.Herearethefunctionsandattributesthatcanbeusedtoassimilatewindow.historysupportwithinHTML5:

•window.history.length;•window.history.go();•window.history.back();•window.history.forward();•window.history.pushState();•window.history.replaceState();•window.onpopstate

Letuslookattheseingreater

detail:

window.history.lengthThisisanattributethatprovidesthenumberofentriesinabrowser’ssessionhistory.

window.history.back()Thisfunctionmovesonestep

backinthebrowser’shistory.Itreturnsthewebbrowsertothepreviouswebpage.Ifnopreviouspageisavailable,thefunctionwilldonothing.

window.history.forward()Thisfunctionmovesonestepforwardinthewebbrowser’s

history.ThismeansthatifyoumovedtoPageXfromPageY,andreturnedtoPageY.ThisfunctioncanbeexecutedtomoveforwardtoPageX.Ifnonextpageexistsinthehistory,thisfunctionwilldonothing.

window.history.go([delta])Thisfunctionallowsyoutomovebackwardorforwardbyanynumberyoudesire.Notethatthedeltaargumentismentionedinbrackets;therefore,itisoptional.Ifnodeltaisprovided,thebrowserwillsimplyreloadthepagecurrentlybeingshown.

Thefunctionwoulddonothingifthedeltaisoutoftherangeofhistory.

window.history.pushState(data,title[,url])Thisisthefunctionthatenablesyoutopushdataintothehistoryofthebrowser.Dataistheargumentinthe

objectthatstoresyourdata;titleisnamewhichyouwanttousetoreferenceyourdata,whereas,theurlisthatargumentthatenablesyoutolinkdatawithacertainpagesothatitcanbepoppedwhenthepagereloads.

window.history.replaceState(data,title[,url])Thisfunctionreplacesacurrententryinhistoryifyougiveitthedata,title,andURL.

window.onpopstateThiseventtakesplacewhen

statehistoryispoppedinordertobecomeaccessible.

pop-history.htmlExampleLetusgetstartedwiththeexample.Followthestepsgivenbelow:

1. Justlikealways,createanHTMLfileusingatexteditorandnameitpop-history.html

2. Enterthecodegivenbelow:

<!DOCTYPEhtml><html><head><title>PagetoPageHistory</title></head><body><h1>PagetoPageHistory</h1>...

</body></html>

3. Tocreate<div>

elementswhichwillbeusedtodisplaytheresultsinthisexample,addthefollowingcode:


<head><title>PagetoPageHistory</title></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><br><divid=”length”></div><br><divid=”state”></div><br></body>

</html>

4. Savethefileintextformat.

Nowthatwehavecreatedthebasefile,letusnowgetittodosomethinginteresting.

AddABackButtonYoucan,usingthe

window.history.back()function,enableausertonavigatebackwardsinthebrowser’shistory.Toaddthisbutton,followtheinstructionsgivenbelow:

1. Openpop-history.html2. Addthesubsequent

codetocreateabutton:

<!DOCTYPEhtml>

<html><head><title>PagetoPageHistory</title></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”>...

<br><divid=”length”></div><br><divid=”state”></div><br></body></html>

3. InordertomaketheBackbuttonactive,youhavetoconnectit

tothefunctioncalledwindow.history.back().Here’showyoucandothat:

<!DOCTYPEhtml><html><head><title>PagetoPageHistory</title><scripttype=”text/javascript”>

functionback(){window.history.back();}</script></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”><br><divid=”length”></div><br>

<divid=”state”></div><br></body></html>

4. Savethefileinplaintextformat.

NowtheBackbuttonwillappearinthedocumentandausercanclickittonavigatebackwards(onepage)inthe

history.

AddAForwardButtonJustthewayyoucreatedabackbuttontoenableausertomovebackonepageinthebrowserhistory,youcanalsocreateaforwardbutton.Here’show:

1. Openpop-history.html

usingyourfavoritetexteditor

2. TocreateaForwardbutton,addthiscode:

<!DOCTYPEhtml><html><head><title>PagetoPageHistory</title></head><bodyonload=”loader()”>

<h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”><inputtype=”button”value=”Forward” onclick=”forward();”><br>...<br><divid=”length”></div><br><divid=”state”></div><br>

</body></html>

3. Toactivatethe

Forwardbutton,youwillhavetoconnectittothewindow.history.forward()function.


<head><title>PagetoPageHistory</title><scripttype=”text/javascript”>functionback(){window.history.back();}functionforward(){window.history.forward();}

</script></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”><br><inputtype=”button”value=”Forward” onclick=”forward();”><br><divid=”length”></div><br><divid=”state”></div>

<br></body></html>

4. Savethefileintext

format.Nowtheuserwillbeabletonavigateonepageforwardinthehistory.

AddAGoButtonYoucanevenletusersenterthenumberofpagesthattheywishtonavigateto,eitherbackwardsorforwards.ThismeansthattheywillhavetoenteranintegerintextfieldandclicktheGobutton,whichwouldutilizethewindow.history.go()function

toachievethis.HereishowyoucanaddaGobutton:

1. Openpop-history.htmlinatexteditor.

2. AddthecodegivenbelowtocreateanewGobuttonalongwithatextfield.

<!DOCTYPEhtml><html><head>

<title>PagetoPageHistory</title></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”><inputtype=”button”value=”Forward” onclick=”forward();”><br>Pagestomoveby:<inputid=”amount” type=”text”>

<inputtype=”button”value=”Go”onclick=”go();”><br>...<br><divid=”length”></div><br><divid=”state”></div><br></body></html>

3.Justlikebefore,youwillhavetoactivetheGobuttonbyconnectingittothefunctioncalledwindow.history.go().<!DOCTYPEhtml><html><head><title>PagetoPageHistory</title>

<scripttype=”text/javascript”>functionback(){window.history.back();}functionforward(){window.history.forward();}functiongo(){varamount=document.getElementById(“amount”).value;

window.history.go(amount);}</script></head><bodyonload=”loader()”><h1>PagetoPageHistory</h1><inputtype=”button”value=”Back” onclick=”back();”><br><inputtype=”button”value=”Forward” onclick=”forward();”><br><divid=”length”></div>

<br><divid=”state”></div><br>Pagestomoveby:<inputid=”amount” type=”text”><inputtype=”button”value=”Go”onclick=”go();”><br></body></html>

4. Savethepop-history.htmlfilein

plaintextformat.NowtheuserwillbeabletoenteracertainnumberinthetextfieldandclicktheGobuttontonavigateforwardsorbackwards.Anumberwithaminussignwouldnavigatebackwards,whereasapositivenumberwouldmovethepageforward.(e.g.-2for

twopagesbackwardsand2fortwopagesforwards)

SummaryHTML5givesyougreatercontrolonthehistoryofthebrowserthroughtheHTMLhistoryofobject.Thehistoryoptionisacomponentofthewindowobjectinwebbrowsersandcanbereferredtoaswindow.historyobject.

NewElementsInHTML5HTML5comesequippedwithanumberofnewelements.Theyareasfollows:

•<article>

•<aside>•<audio>•<canvas>•<command>•<datalist>•<details>•<embed>•<figcaption>•<figure>•<footer>•<header>•<hgroup>•<keygen>

Tolearnmoreabouttheseelements,youcanvisitthefollowingpageatW3C’swebsite:www.w3.org/TR/html5/spec.html#auto-toc-8Also,youshouldnotethatthefollowingelementshavebeenremovedinthelatestversionofhyper-textmarkup

http://www.w3.org/TR/html5/spec.html#auto-toc-8

language:

•<acronym>•<applet>•<basefont>•<big>•<center>•<dir>•<font>•<frame>

WhereToGoFromHereThepurposeofthisbookwastogetyoustartedwiththebasicsofHTML5,andperhapsinstillaninterestforthisverypowerfulscriptinglanguage.Ourprimaryfocus

wastoshedsomelightonwhatcanbedoneinHTML5;andasyoumayhaveseenandunderstood,HTMListhelanguageoftheWeb.Whileitcanbeintimidatingformanytolearnanewlanguage,whenitcomestoHTML,therearemany

reasonswhyyoushouldreallyconsiderlearningHTML.Beforewediscusswhy,let’slookatwhatyoucandowithHTML.ThewebismadeupofHTML.Period.Thismeansthatyourpossibilitiesare

endlesswhenitcomestowebdesign.WhileyoumayalsowishtolearnJavaScriptandCSStoenhanceyourwebpages,thecoreremainstobeHTML!Also,withsomanyWYSIWYGwebpageeditorsoutthere,manywonderwhy

theyneedtolearncodinginthefirstplace.However,thisisthewrongapproach.Therearemanyinstanceswhereyouwillhavetomanuallyovercomeerrorsbygoingthroughthecode–soitalwayshelpstohaveathoroughunderstandingofthislanguage.

IfyouwishtobuilduponyourfoundationofHTML,youmaywishtotakeonsomeadvancedcoursesthatwillunleashandhelpyouunderstandthepowerofHTMLwhichcanbeextremelyusefulinyourcareerorhobby!

Goodluck!

ThankYouFor

ReadingThisBook.YourFirst$1000BonusReportClickHereForInstantAccess

http://yourfirst1000.gr8.com/

IntroductionToCourse“Thefirst90%ofthecodeaccountsforthefirst90%ofthedevelopmenttime.Theremaining10%ofthecodeaccountsfortheother90%ofthedevelopmenttime.”–Tom

CargillHiandwelcome.ThisbookisforanyoneinterestedinlearninghowtouseHTML.IpresumethatanyonewhohasdownloadedthisbookhasnoideaofwhatHTMLis,how,whyorwhentouseit.Everythinghasbeen

laidoutforyousothatyoucanfamiliarizeyourselfwiththebasics.Then,youwilllearntoapplywhatyouhavelearnedbymakingaHelloWorldappandawebpageusingtheHTMLtext.IhaveattachedcolorfulscreenshotsandimagestoillustratewhatI

havewritten.IhopeyouenjoyreadingthisbookasmuchasIenjoyedwritingitforyou.Thankyou,fordownloadingthisbookinadvance.

Chapter1:AnIntroductionToHTML“Acomputerletsyoumakemoremistakesfasterthananyotherinventioninhuman

history,withthepossibleexceptionsofhandgunsandtequila.”–MitchRatcliffe

WhatIsHTML?HTMListheabbreviatedforHyperTextMarkupLanguage.Thistextisusedtodevelopwebpages.HTMLelementsandtagsareusedbydeveloperssothatthewebbrowsercanreadthewebpageandinterpretthecontent

ofthewebpagethewayitismeanttobeinterpreted.HTMLtextsareusedbywebpagedevelopersandappdevelopersforcodingandprogrammingpurposes.

UtilityOfHTMLTextsTounderstandthisyoufirstneedtolookatthecomponentsoftheweb.TheWebBrowserInternetExplorerandGoogleChromeareexamplesofweb

browsers.ToaccessawebsiteorwebpageyouhavetouseaWebBrowser.WebPagesWhenyoutypethenameofadomaininthewebsiteaddressbaryourwebbrowseristoldtoopenthatspecificpage.So,

ifyouweretotypeinwww.Yahoo.comyourwebbrowserwouldtakeyoutotheYahoohomepage.

Theaddressbar

TheWorldWideWebisquitecomplex.Itmightnotseemthatwaytosomeonewhohasnothingtodowithwebdevelopmentbecausealltheyneedtodoistotypeinthedomain,hit “ Enter ”andthen,reviewthewebpagefromanothercountryorcontinent.

HostingServersOnceawebdeveloperhasmadeawebsiteahostingserverhastobeusedsothatthewebpagecanbeaccessedbyanyoneusingtheinternet.Versions

Withtechnologicaladvancementsitisimportanttorevise,alterand/orupdatethewaytheHTMLfunctions.Differentsoftware,likeAndroidortheiOS,isupdatedonayearlybases.Thisisdonetoremovebugsandfixanyerrorsinthepreviousversionofthesame

software.Similarly,theHTMLhasbeenupdatedtocorrectpreviousversionsofthemarkuplanguage.ThelatestversionoftheHTMLisHTML5whichwasmadetocorrectsyntaxerrorsincurrentwebdocuments.Thisversionalsointroducesapplicationprogramming

interfacesforapplicationsthatruninwebbrowsers.

Chapter2:HTMLTags“Controllingcomplexityistheessenceofcomputer

programming”.BrianKernighan

Variousimagesaredepictedonawebpagewiththeaidof

HTMLtexts.Thesetextsalsoenablewebsitedeveloperstocreatestructureddocuments.Theycancreatedifferentheadings,paragraphs,linksandothercontenttoo.ThepurposeofHTMLtextsisonlytodepictcontentandinformationdisplayedona

webpage.HowthewebpageispresentedandbehavesiscontrolledbyCascadingStyleSheets(whichareusuallyreferredtoasCSStransitions).Wewilltalkabouttheselater.Forawebbrowsertointerpretthecontent,one

needstowriteanHTMLtextinaparticularway.Thinkofitthisway:ifyouwantedtoexplainsomething(inwritingform),itwon ’ tmakesenseforyoutowriteoneword,wouldit?Youhavetowritemanywordstoformasentence.Thiswaythepersonreadingthesentence

understandsthetextandyoucangetyourpointacross.Now,comparethiswithhowHTMLTextsfunction.TherearedifferenttagsinHTMLtexts.Tagsareusedtosetheaders,paragraphs,linebreaksandsuchlike.So,whenmakingawebpageyouneedtohaveanideaofhow

youwouldwantthewebpagetolook.ItwouldbeeasierforyoutosettheHTMLtags,then.XMLsyntaxisusedforthistags.

TypesOfHTMLTagsTherearetwotypesoftags: pairedtags and unpairedtags .Pairedtagsareplacedbetweentagsandcompaniontags.Here ’ sanexample<i>ThistextisinItalics</i>.

<i>istheopeningtagwhile</i>istheclosingtag.Youcantellwhichtagiswhichbecauseoftheirpositions.UnpairedtagsdonothavecompaniontagsandthisiswhytheyarealsoreferredtoasStand-Alonetags.<hr>isanexampleofsuchatag.Asyoucanseethereareno

openingorclosingtags.

Purpose-BasedTagsEverytaghasitsownpurposeandthereareprimarilythreetypesoftagswheretheseareconcerned.

1.FormattingTags:thesetagsareusedsothatwebpagedeveloperscanmanage

fontsortounderlinethetextandsuchlike.So,the<b>tagcanbeusedtomakeaword,sentenceortheentiretextbold.2.PageStructureTags:thesedonotaffecttheformatofthepageassuchbutthey

enableonetohandlethestructureofthepage.Thehead,titleanddescriptionareexamplesofthesetags.3.ControlTags:Scriptandformtagsarepartofthesetags.

Image tags areusedtoembed

imagesinastructureddocumentforawebpage.The <img> tagisusedtorefertoaparticularimage.ThetextinsidetheenclosedbracketsistheHTMLtag.

BasicCodesForPageStructureCertaincodesareusedtocreatethePageStructure.TheseHTMLcodesdeterminewheretheHeader,Title,Bodyandothercontentsgo.Bearinmindthatonceyouaredonedevelopingthewebpage,youcannotsee

thecodesunlessyouaccessittomakecertainchanges.So,ifyouweretovisitwww.Google.comyouwon ’ tbeabletoseetheHTMLcodes,forexample.Here ’ saplainandsimpleHTMLtemplate:

<metahttp-equiv="Content-Type"content="text/html;charset=windows-

1252"><html><head><title>Pagetitlehere</title><METANAME="DESCRIPTION"CONTENT="HTMLpagestructurewithsamplecode"><METANAME="KEYWORDS"CONTENT="HTMLpage,structureofapage,BasicHTMLpage,Metatags"></head><body>Ourbodycontenthere

</body></html>Asisvisible,thepagestructureiskeptbetweentheHTMLtags.Theheadgoesbetweenthe <head> and </head> tagswhilethebodygoesbetweenthe <body> and </body> tag.The

tagswithouttheobliquelines(/)aretheopeningtagswhilethepartwiththeobliquelinesaretheendtags.Anythingthatawebdeveloperwouldwantreadersorvisitorstoreadisinsertedwithinthebodytag.

TheHeadTagAnytextyouusetomaketheHeadwiththeHeadTagswillnotbevisibleonthebrowser.Webdevelopersalsoinsertmetatagsheresothatanyonelookingforcontentthatthewebpageofferscanfindthewebpagewithease.

TitleTagsTheseappearinthetop-leftsideofthewindow.Importantkeywordsshouldbedisplayedheresoreadersgetanideaofwhatthewebpageisallabout.ThoughJavaScriptisnotrelevanttothissection,youshouldknowthatanyJavaScriptcodeinsertedin

thetagisloadedandcanbeseenonthewebpage.

BodyTagsThisiswherethe ‘ mainbody ’goes.Anycontentyouwantyourreaderstoreadwillbemadevisiblehere.Insertortypeanycontentyouwouldliketobedisplayedhere.Thepageisthen,closedwiththe </html> tag.

HTMLElementsDifferenttagsareusedtocreateHTMLelementsjustlikedifferentwordsarecombinedtoformasentence.ThisishowHTMLelementsareusuallydepicted:<tagattribute1="value1"

attribute2="value2">content</tag>.

IftheHTMLisempty(asitis

incaseofalinebreaktag),thisiswhatitwouldlooklike:<tagattribute1="value1"attribute2="value2">.

TagsareusedtonamethespecificHTMLelement.So,ifyouwanttocreateaheaderinadocument,thishowitwilllook:<h2>Headinglevel2</h2>.

HTMLelementsstartwiththeuseofthestartingtagandendwiththeuseoftheendingtag.Thefirsttagislikethefirstletterofasentencewhiletheendingtagislikethefullstopofthesameelement.Oncethelasttagisaddedyourelementiscomplete.Thisisonlythecasewhere

thereisothercontent.WhereStand-alonetagsareconcernedtherearenostartingorendingtags.Also,oneHTMLelementcanbeusedwithinanotherHTMLelement.ThesearecalledNestedHTMLElementsbecauseoneelementisliterallyplaced

withinanother.Here’sanexample:

<!DOCTYPEhtml><html><head><title>NestedElementsExample</title></head><body><h1>Thisis<i>italic</i>heading</h1><p>Thisis<u>underlined</u>paragraph</p>

</body></html>Youwillgetthefollowingresult:ThisisitalicheadingThisisunderlinedparagraphThetitleandheaderwerenestedwithinthebodyoftheHTMLtemplate.Thecontentwasitalicizedandunderlined

onthesametemplate.Bydoingthiswebdeveloperscangetmoreworkdoneinashortertimeperiod.HTMLcodesandelementsareprettymuchthesamething.Programmersoftenusethetermsinterchangeably.

UsingHTMLHeaderElementsTherearedifferentelementsfortheheader,body,frame,table,textformats,etc.InthissectionyouwillreadaboutHeaderelementssothatyoucanimplementthesewhendevelopingyourownwebsite.<head>:thisistheopening

tagforanHTMLdocument.Youcanplaceothertagsinthistag.<title>...</title>:thistagwouldenableyoutonameyourdocumentanditisgenerallypreferredthatthetitlebe64characterslong(maximum).<basehref="url">:thebase

URLofthedocumentcanbespecifiedwiththiselement.YoucanalsodereferenceURLs.<basehref="url"target="...">:inadditiontothefunctionsofthepreviouselement,thiselementcanalsobeusedsothatyoucanspecifythebasetargetframe

thatalinkorlinkswoulddefaultto.<meta … >-enablesyoutoembedinformationintotheHTMLdocumentasifithasbeenembeddedbytheserver.<metahttp-equiv="refresh"content="N">:reloadsthepageafterNseconds.<metahttp-equiv="refresh"

content="N"url="http://www.example.com>:anotherpagewouldberefreshedafterNseconds.<metahttp-equiv="expires"content="Tue,Sept201411:21:00GMT">:allowsyoutosetanexpirydateforcontentonthewebpage.Itwillthen,reloadafterthis

date.<metahttp-equiv="keywords"content="keyword1,keyword2,...">:specifieskeywordsthatcanbeutilizedbyasearchengine.<metahttp-equiv="description"content="Ashortdescription

ofthesite">:youcanbrieflydescribethepage.Thisisalsousedbythesearchengine.<styletype="text/css"href="URL"/>:theelementenablesyoutospecifytheCSSfilethatyouwouldusetodevelopthewebpage.<scripttype="text/scripttype"href="URL"/>:thisallows

youtospecifyJavaScriptthatyoucanuseonyourwebpage.<noscript>...</noscript>:somebrowsersarenotabletosupportinlinescriptsandthiselementenablesyoutoenclosematerialthatyouwanttobedisplayedonsuchbrowsers.

</head>:thisistheclosingtagfortheheaderelement.UsingBodyElements<body>...</body>:thisisusedtoenclosethebodyofthestructureddocument.<hn>...</hn>:youcanmanipulatethesizeoftheheadingbytyping1,6oranynumberbetweentwoinplace

ofn.<basefontsize="n">:allowsyoutoset(whatyouwanttobe)thedefaultfontpropertiesforyouwebpage.<isindexattributes>:yourservermustbecapableofsupportingthiselement.Thiselementwilldisplayatextbox.Thetextboxisusedto

indicatethatasearchableindexexistsonthewebpage.<imgsrc="URL"attributes>:youcanplaceaninlineimageonyourdocument.<mapattributes>...</map>:thisenablesyoutospecifycollectionsofhotspotsonanimagemap.Youcanalsousethe<area>tagtospecifythe

hotspotsonthismap.<areaattributes>...</area>:thiswillenabletodefinethesizeandshapeofthesehotspotsonthemap.<marqueeattributes>...</marquee>:enablesyoutoplacescrollingtextonyourwebpage.<appletattributes>...

</applet>:ifyouareusingabrowserthatcannotsupportJava,youcantypetextbetweenthetwotagssothatitcanbedisplayedbythebrowser.<embedattributes>...</embed>:youcanembedavideoorsoundfileintotheHTMLdocument.These

wouldthen,beshownonyourwebpagebythebrowser.<ahref="...">...</a>:youcanusethistodisplayalinkforanotherwebsite/anchor.However,usingtheNAMEattributewouldenableyoutochangethetextorgraphicintoananchor.

<olattributes>...</ol>:textwrittenbetweenthesetagsandmarkedwith<li>willbedisplayedasanumberedlist.<ulattributes>...</ul>:ifyouweretomarktextbetweenthetagswith<li>,youcouldcreatealistwithbulletpoints.

UsingFrameElements<framesetattributes>...</frameset>-Youcanusethesetagssodefineasetofframesthatyouwouldliketouseforyourpage.The<frame>and<noframes>tagsareinsertedhere.While

the<frameset>tagisusedwithinthe<body>tag,itisalsopossibleforyoutoinsertthe<body>tagwithin<noframes>tagssothatthesecanbedisplayedbybrowsersthatarenotcapableofsupportingframes.<frameattributes/>-singleframeswithintheframeset

canbedefinebythisattribute.<iframeattributes>...</iframe>-Thiscanbeusedinordertodefinefloatingframes.Youneednotinsertthisintheframeset.<noframes>...</noframes>-Thisisplacedwithinthe<frameset>.Materialplaced

withinthetwotagsareshownonbrowsersthatarenotcapableofsupportingframe.Thetagsareusedprimarilyforolderbrowsersthatcannotdisplayframes.InsertingTableElements<tableattributes>...</table>-Thisattributeenablesyoutoinsertatablewithany

numberofrows.<captionattributes>...</caption>-enablesyoutocaptionthetable.<trattributes>...</tr>-youcanusethistospecifyatablerow.Theattributecanalsobeusedinordertoenclosethetableheadingand/ortabledata.

<thattributes>...</th>-canbeusedtospecifythetableheading.<tdattributes>...</td>-canbeusedtospecifythetabledatacell.<colgroupattributes/>-canbeusedinordertospecifythepropertiesofvariouscolumns.Itisusuallyinserted

rightafterthe<table>tag.<colattributes/>-thisismostlyusedwith<colgroup>tagtospecifythepropertiesofoneparticularcolumn.itoverridesattributesthathavebeenspecifiedinthe<colgroup>.Thistagcomesrightbeforethe<colattributes/>.

<tbody>...</tbody>-thesetagsareusedtoenclosethebodyofatable.Youneednotusethetagsunlessyoudecidetoinsertthe<thead>or<tfoot>tags.Thetagsareusedsoyoucansotherowsareseparatedfromtheheaderand/orfooterofthetable.<tfoot>...</tfoot>-thesetags

areusedtoenclosetablerowsthatyouintendonusingasthefooter.Thetagisoptionalandwillcomeafter<tbody>.<thead>...</thead>-thisisusedtoenclosetablerowsthatwillbeusedfortheheader.Itistobeinsertedpriortotheopening<tbody>element.

UsingFormElements<fromattributes>...</from>-Theelementsisusedtospecifyformsthatareusedinordertosenduserinputtoaserver.ThisisdoneinNAME/VALUEpairs.<inputattributes/>-Thisattributecanbeusedtomanagethecontrolorinput

areaforaform.ItisthisformwhichtheNAME/VALUEpairisreturnedtotheserver.thiscouldbeCheckbox,text,Raidobox,reset,submit,password,hiddenandimage.<selectattributes>...</select>-Youcanusethistoinsertadropdownlistofvariousitemsthataredefinedbythe

<option>tags.Thetagsarethen,insertintheopeningandclosing<select>tag.<optionvalue="..."/>-Thiswouldenableyoutospecifyanitemthatbeseeninthedropdownlistandtheattributeisplacedinsidetheopeningandclosing<select>tags.Textfollowingthe

<option>tagisapparenttotheuser.<textareaattributes>...</textarea>-Amulti-linedtextentryboxcanbecreatedandanytextbetweenthetagscanbeusedasthedefaulttextstringthatarevisiblewhenthepageisloaded.<buttonattributes>...

</button>-YoucaninsertpushbuttonsonaformthatissimiartopushbuttonsseenonWindowsandotherapplications.

UsingTextFormattingElements<address>.....</address>-Thisisusedtoenclosethesignaturefileofthewriterofthepage.<acronym>.....</acronym>-Thisisusedtoindicatethatthereisanacronyminthetext.

<b>...</b>-Textwithinthesetagsareboldfaced.<big>...</big>-Thetext ’ ssizeisincreasedanditismadetolookbigger.<blink>.....</blink>-Textenclosedinthetagswillblinkcontinually.<blockquote>.....</blockquote>-Thisisusedso

toencloselongquotes.Theleftandrightmarginswillbeindented.<br>-Insertsalinebreak.<center>.....</center>-Enclosedelementsareplacedinthemiddleofthedocument.<cite>.....</cite>-Thiscanbeusedtoenclosecitations.

Examplesthetitleofabook,articleorpaper.<code>.....</code>-Thesampleofthecodecanbeenclosebyplacingitbetweenthesetagsandthesizeofthetextisreduced,too.<comment>.....</comment>-Commentscanbeenclosed.Anytextinsidethetagswill

notbereadifitdoesnotcontainHTMLcode.<del>.....</del>-Thisisusedtomarkthedocumenttextthatwasdeletedinpreviousversion.<dfn>.....</dfn>-Thisisusedtoencloseadefinition.So,anytextplacedinsidethetagsisformattedsoitcan

looklikeadefinition.<div>...</div>-Thealignmentoftheenclosedtextcanbespecifiedwiththiselement.Itcanalsobeusedsoyoucandividethedocumentintosectionsthathavebeenaligneddifferently.<em>...</em>-Emphasisislaidonthetext.

<fontattributes>...</font>Thefontpropertiesaresetforthetextwithinthesetags.<fieldsetattributes>...</fieldset>-Youcangroupformfieldsthatarerelatedtoeachothersotheformiseasiertouseandread.<hrattributes/>-Thisisusedtomakeahorizontalline.

<i>...</i>-Thisisusedtoitalicizethetext.<ins>...</ins>-Thiscanbeusedifyouwouldliketomarkcertainpartsofadocumentthatwereaddedtothedocument'slastversion.<label>...</label>-Youcanlabelatag.<kbd>...</kbd>-Thisis

usedtospecifytextthatneedstobeenteredatthekeyboard.Thetextisreducedsoitcanappeartobeboldandfixed-width.<pattributes>...</p>-Designatestheenclosedtextasaplainparagraph.<q>...</q>-functionsthesamewayasthe

<blockquote>tag.However,thisappliestoquotessectionthatdon'trequiretheinsertionofparagraphbreaks.<pre>.....</pre>-Thetextcanbedisplayedinfixed-widthtypeandyouwon ’ thavetocollapsespaces.<s>.....</s>-Usingtheelementwouldresultintext

withalinerunningthroughit.The<strike>tagfunctionsthesameway.samp>...</samp>-Thesampleoutputfromanyformorprogramcanbeindicatedwiththiselement.Also,thetextisreducedsoitcanappearinsmallfont.<small>...</small>-The

sizedoftheenclosedtextisreducedsothatitisasizesmaller.<spacerattributes>...</spacer>-BlocksofspacescanbeinsertintotheHTMLdocuments.<strong>...</strong>-Thiscanbeusedforstrongeremphasisonthetext.

<sub>...</sub>-Condensesthetextinsertedinbetweeninsubscript.<sup>...</sup>-Condensesthetextinsuperscript.<tt>...</tt>-Textstypedbetweenthesetagsareformattedintypewriterfont.<u>...</u>-Thisisusedtounderlinethetext.

<var>...</var>-Variablescanbespecifiedandthetextiscondensedinsmallfixed-widthtype.<wbr>-TextenclosedbyNOBRtagscanbewrappedifandwhenneedbe.Refertothislinkformoretags:http://htmldog.com/reference/htmltags/

http://htmldog.com/reference/htmltags/

SummaryReadabouttagsandelements.Thischapterenlistsvarioustagsthatareusedfordifferentpurposes.GothroughthesesoyouarecapableofmakingyourownHTMLtemplate.

Questions1. Whataretagsandwhy

aretheyimportanttoHTML?

2. Whatareelements?3. Makeyourown

HTMLtemplate.

Chapter3:Formatting

“It'sokaytofigureoutmurdermysteries,butyoushouldn'tneedtofigureoutcode.Youshouldbeabletoreadit.”-SteveMcConnell

Whenmakingastructureddocumentwebdevelopers

alsohavetoinsertHTMLelements,tagsandcodestoitalicize,underlineormakecertainpartsofthedocumentbold.Inordertoitalicizeanypartofthetextyouneedtotypeitbetween<i>(whichisthestartingtag)and</i>(theendingtag).

Lookatthefollowingexample:

<!DOCTYPEhtml><html><head><title>ItalicTextExample</title></head><body><p>Thefollowingwordusesa<i>italicized</i>typeface.</p>

</body></html>Onceyoudothisyouwouldgetthisresult:Thefollowingwordusesaitalicizedtypeface.Youcouldusethistoitalicizeapartofthetext.Let ’ suseourownexample

now.

<!DOCTYPEhtml><html><head><title>ItalicTextExample</title></head><body><p>Thefollowingwordusesa<i>italicized</i>typeface.</p></body></html>

Here ’ showthiswouldlook:

Mybirthdayisonthe25thofNovember,yes.So,anytextthatneedstobeitalicizedshouldgobetweenthe<i>and</i>tags.Now,ifyouwouldliketomakeaspecificpartofthetextbold,youwouldenterit

between<b>(thestartingtag)and</b>(theclosing/endingtag).Here ’ stheHTMLtemplatetoshowyouhowthisworks:

<!DOCTYPEhtml><html><head><title>BoldTextExample</title>

</head><body><p>Thefollowingwordusesa<b>bold</b>typeface.</p></body></html>Theresultwouldlooklikethis:Thefollowingwordusesaboldtypeface.Similarly,youcanalso

controlthesizeofthetext.Ifyouwanttogoforlargertextstypeyourtextbetweenthe<big>and</big>tagsandchangethe<title>toLargerTextExample.Ontheotherhandifyouwanttoreducethesizeofyourtext,typeyourtextbetweenthe<small>and</small>tags

andchangethe<title>toSmallTextExample.YoucanalsouseHTMLtextsinordertogroupvariouselementstogether.Forthisyouneedtousethe< div >and< span >elements.Here ’ sanexample:

<!DOCTYPEhtml>

<html><head><title>DivTagExample</title></head><body><divid="menu"align="middle"><ahref="/index.htm">HOME</a>|<ahref="/about/contact_us.htm">CONTACT</a>|<ahref="/about/index.htm">ABOUT</a></div><divid="content"align="left"bgcolor="white">

<h5>ContentArticles</h5><p>Actualcontentgoeshere.....</p></div></body></html>IfyouweretousetheHTMLelementsabove,thiswouldbetheresult:HOME|CONTACT|

ABOUTContentArticlesActualcontentgoeshere.....Youcouldalsousethe<span>elementtogroupinlineelementstogether.Inlineelementsareelementsthatdonotbeginfromanewline.Here ’ stheHTMLtextthatwouldenableyouto

groupinlineelementstogether:

<!DOCTYPEhtml><html><head><title>SpanTagExample</title></head><body><p>Thisistheexampleof<spanstyle="color:green">spantag</span>andthe<spanstyle="color:red">divtag</span>alongwithCSS</p>

</body></html>

Thiswillproducethefollowingresult: ThisistheexampleofspantagandthedivtagalongwithCSS.AscanbeseenfromtheHTMLtext,youcandeterminethecolorofthe

text,too.MostlythetagsareusedwithCSSstylesheets.ReadthefollowingwebsiteifyouwanttoknowmoreaboutHTMLformatting:http://www.tutorialspoint.com/html/html_formatting.htm

http://www.tutorialspoint.com/html/html_formatting.htm

SummaryHTMLformattingisimportant.Itenableswebpagedeveloperstoformatapageinacertainway.Thischapterteachesyouhowtousedifferentcodestomakestructureddocumentsboldorhowtoitalicizecertainpartsofthetext,too.

Questions1. Whatareinline

elements?2. Howdoyouintroduce

inlineelementsinyourcode?

Chapter4:AddingParagraphs“Goodcodeisitsownbestdocumentation.Asyou'reabouttoaddacomment,askyourself,"HowcanIimprovethecodesothatthiscomment

isn'tneeded?"

SteveMcConnell

AddingparagraphstotheHTMLtextisn ’ tasdifficultasonewouldthinkittobe.Themaintagtousehereisasfollows:<p>.ThePiswrappedinbracketssothatthebrowsercaninterpretthecontentofthe

webpage.Here ’ sanexampleofhowtheaforementionedtagisusedtocreateparagraphs:

<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>

LineBreaksInsomeinstancesyoumightwanttoseparatethecontentoraddinanewparagraph.Forthisyouneedtousethe<br>tag.Here ’ showthiswouldlook:

<p>Thisis<br>apara<br>graphwithlinebreaks</p>

Chapter5:Attributes“Fromaprogrammer'spoint

ofview,theuserisaperipheralthattypeswhenyouissueareadrequest.”-

PeterWilliams

Youmightwanttocustomizehowyourtagsfunctionso

thatyoucandisplayyourwebpage.Thiscouldbebecauseyouwanttohavemorecontroloverthewayyoudisplaycontentonyourwebpageorbecauseyouwanttomakeanapp,too.Theattributeisusedtomodifytheelementbyassigningavaluetoit.Thiswaythewebpage

developercanmanipulatetheelementtochangeit.Onecanmakeattributesinsidetagswithstarttags.Thisisdonetocreatevarioussection,identifiersortopresentinformationinacertainway.Sometagsareusedsimplytobreakalineandsuchtagsaremostlyempty.Theseare

emptytagsthataresimilartothestarttagandtheydonotutilizeendtags.Here ’ sanexampleofa linebreaktag :<br>.

Thereare3typesofattributes:simpleattributes,fragmentattributesanddynamicattributes.

SimpleAttributesSimpleattributeshavethefollowingsyntax: attr="value".Thesecanbeseeninthestarttag.Youcanuse string constantsorexpressionlanguagetosetthisattribute.Here ’ sanexampleofhowstringconstantscanbeusedfor

simpleattributes:<stringname="hello_world">Helloworld!</string>ThisspecificattributewasusedtodeterminethenameoftheHelloWorldapp.Consequentially,theapp ’ snameappearedtobeasfollows: “ HelloWorld! ”Jsp.attributeelementscanbe

usedfortheseattributestoo.ThisenablesyoutochangethevaluesofvariousattributesinsidetheXMLbodyratherthandoingsoviatheXMLattributes.

FragmentAttributesAtaghandlerusesfragmentsinordertocustomizecontentonthewebpage.Forthisyouneedtodeclarethe Fragment anddefinethevaluesfortheseattributes.Also,whenusingthe jsp:attribute elementrememberthatnoscripting

elementscanbeincluded.Thesecanonlyincludestatictexts,customandstandardtags.Thismeansyoucannotincludecomments,directives,declarations,scriptletsorexpressions.Thesewillnotshowonthewebbrowser.

DynamicAttributesThesearenotspecifiedintags.Thenamesoftheseattributesmightnotbeknownwhenthewebpageisstillbeingdeveloped.Here ’ sanexampleofatagthatdescribesmorethanoneattribute:

<colored:coloredcolor1="red"color2="yellow"color3="blue"/>Youcanreadaboutmoreattributeshere:http://www.tutorialspoint.com/html/html_attributes_reference.htm

http://www.tutorialspoint.com/html/html_attributes_reference.htm

SummaryAttributescanbeusedtocustomizedifferenttags.Thischapterteachesyouaboutthe3basictypesofattributesandwhenthesecanbeusedtogiveeffectstotags.

Questions1. Whatareattributes?2. Whatdothesehaveto

dowithelements?3. Whyisitbeneficialfor

aprogrammertousetheJsp.attributeelement?

Chapter6:CreatingHTMLFrames“Alwayscodeasiftheguywhoendsupmaintainingyourcodewillbeaviolent

psychopathwhoknowswhereyoulive.”-MartinGolding

Somewebdevelopersdividethebrowserintodifferentframes.ThismakesiteasierforthemtoloadseparateHTMLdocumentsatthesametime.LoadingHTMLdocumentscanbetime-consumingandinefficient.

So,awindowisdividedintovariousframesmuchlikedividingasheetofpaperintocolumnsandrows.Mostpeoplearediscouragedfromusingframesbecause:

1. Frametechnologyisnotsupportedbyallbrowsers.

2. Differentscreen

resolutionsareusedondifferentcomputers.Thismeansthatthewebpagewouldappeartobedifferentoneverycomputer.

3. Somedevicesaren’tbigenoughtobedividedintorowsandcolumns.

However,itisimportantto

knowthebasicsabouttheseevenifyouchoosenottousethem.Whenmakingtheframereplacethe<body>tagwiththe<frameset>tag.Thistellsthecomputerhowtodividethescreen.The rows and cols attributes

willbeusedwiththe<frameset>tag,too.The rows attributesdescribesthenumberofhorizontalframesthatwillbeusedwhilethe cols attributewilldescribethenumberofverticalframestobeintroduced.Thefollowingwillbeusedtomake3horizontalframes:

<!DOCTYPEhtml><html><head><title>HTMLFrames</title></head><framesetrows="10%,80%,10%"><framename="top"src="/html/top_frame.htm"/><framename="main"src="/html/main_frame.htm"/><framename="bottom"src="/html/bottom_frame.htm"/>

<noframes><body>Yourbrowserdoesnotsupportframes.</body></noframes></frameset></html>Thisiswhatthebrowserwouldlike:

Now,let ’ screateverticalrowscolumnsinstead:

<!DOCTYPEhtml><html><head><title>HTMLFrames</title></head><framesetcols="25%,50%,25%"><framename="left"src="/html/top_frame.htm"/><framename="center"src="/html/main_frame.htm"/><framename="right"src="/html/bottom_frame.htm"/><noframes>

<body>Yourbrowserdoesnotsupportframes.</body></noframes></frameset></html>Allyouneedtodoistoreplacethe rows attributewith cols instead.Here ’ s

howthebrowserwilllooknow:

Let ’ slookattheutilityofvarious<frameset>tag

attributes:

ColsThisenablesyoutomanagethenumberandsizeofthecolumnsintheframeset.Thiscanbedonebyusingabsolutevalues.Thiscanbedonebysettingcolsto100,500,100.Youcanalsocontrolthewidthofthecolumnbyspecifyingthepercentageof

thebrowserwindowyouwouldliketouseforeachcolumn.Thiscanbedonebysettingthevaluesto20%,60%,20%.Ifyouwouldpreferusingrelativewidths,insteadofpercentages,thiscanbedonetoo.Forthisyoucansetthecolsto"3*,2*,1*"

or “ 4*,3*,1* ” .

RowsYoucansetthisattributethesamewayyouweretaughttomanagethecolsattribute(above).Theonlydifferenceisthatwhilethecolsattributeenablesyoutohandlethesizeandnumberofcolumns,thisattributeenablesyoutocontrolthesizeandnumber

ofrowsinstead.

BorderThisattributespecifiesthewidthoftheborder.Ifyousetittozero,therewouldbenoborder.

FrameborderYoucanusethisattributetodecideifthereshouldbe3dimensionalboardersbetweentheframes.Youcansetittozero(0)fornobordersorto1ifyouwouldliketoinsertsuchborders.

FramespacingAdjustingthisattributesenablesyoutodecidethespaceyouwouldliketoputbetweentheframesintheframeset.Settingthisvalueto5meansyouwanttheframestobe5pixelsapartfromeachother.Nowlet’sconsiderthe

attributesforthe<frame>tag:

SrcThisattributeisusedinordertoinsertthefilenametobeloadedandmadevisibleontheframe.Intheexamplegivenabove,theURLsrc="/html/top_frame.htm"wasusedtonamethefirstrowandcolumnTopFrame.

NameThisallowsyoutodeterminetheframethatadocumentshouldshowin.

FrameborderThisallowsyoutodeterminewhetherthebordersofacertainframeshouldshow.However,thevalueoftheframeborderinthe<frameset>tagswillbeoverridden.Setit0ifyouifyoudon’twanttheborderstoshoworto1ifyouwant

borderstoshow.

MarginwidthThisattributecanbeusedtospecifyhowmuchspaceyouwouldliketoseebetweentheleftandrightsidesofaframe’sborders.

MarginheightYoucanusethisattributetodecidehowmuchspaceyouwouldliketoseebetweenthetopandbottomofyourframe’sborders.Inotherwordsyoucancontroltheframe’slength.

NoresizeThenoresizeattributepreventsusersfromchangingthevaluesoftheattributesshownabove.

ScrollingThisattributecanbeusedtodisplayscrollbarsonthewebpage.

LongdescWiththisattributeyoucanuselinksthatwouldtakeuserstoanotherpage.Somebrowsersdon’tsupportframesandinsuchinstancesinsertthe<body>elementwithinthe<noframes>elementinstead.Youcanalsoplacethe

navigationbarsinoneframeandmainpagesinanother.Here ’ sanexample:

<!DOCTYPEhtml><html><head><title>HTMLTargetFrames</title></head><framesetcols="200,*"><framesrc="/html/menu.htm"name="menu_page"/>

<framesrc="/html/main.htm"name="main_page"/><noframes><body>Yourbrowserdoesnotsupportframes.</body></noframes></frameset></html>Whatthisdoesisthisit

creates2columnsandtwoframes.Thenavigationmenubarwillbeplacedinthefirstframethatis200pixelswide.The menu.htm filewasinsertedtoimplementthis.Hereisthecontentforthisfile:

<!DOCTYPEhtml>

<html><bodybgcolor="#4a7d49"><ahref="http://www.google.com"target="main_page">Yahoo</a><br/><br/><ahref="http://www.microsoft.com"target="main_page">Microsoft</a><br/><br/><ahref="http://news.bbc.co.uk"target="main_page">Al-Jazeera</a></body></html>

Theremainingspacewillbefilledbythesecondcolumnduetotheinsertingofthe main.htm file.Here ’ sthecontentforthemain.htmfile:

<!DOCTYPEhtml><html><bodybgcolor="#b5dcb3"><h3>Thisismainpage.</h3>

<p>Sonowclickanylinkandseetheresult.</p></body></html>Loadthetest.htmfile.Whenyoudosoyouwouldseethecontentsofthemenu.htmfileintheleftcolumnand “ Thisisthemainpage ”intherightone.

Chapter7:CSS“Computerscienceeducationcannotmakeanybodyan

expertprogrammeranymorethanstudyingbrushesandpigmentcanmakesomebodyanexpertpainter.”-EricS.

Raymond

WhileHTMLtextsareusedtodepictinformationthatcanbeinterpretedbythewebbrowser,CascadeStyleSheetsareusedinordertostylewebpagesandinterfacesandtodescribehowthewebpagemustbepresented,too.Thinkofitasyouwouldofa

designerwhodesignsclothesanddecideswhatclotheshismodelsshouldwearorhowtheymustlookwhenthey ’ rewalkingontherampatafashionshow.ThepurposeoftheCSSwastocreateastylesheetlanguagethatwouldbeusedsolelytofunctiontheweb

page.Separatingawebpage ’ scontentfromitspresentationisadvantageoustowebpagedeveloperswhocanusethestylesheettomakethecontentaccessible.Furthermore,oneneednotuseHTMLtablesforthewebpagelayout.Initially,webpagedevelopers

whohadtospecifythecoloroftheheaderonawebpage,wouldhavetousethefollowingHTMLelement:<h1><fontcolor="red">Chapter1.</font></h1>.Designingawebpageusingsuchelementswasverytimeconsuming,expensiveand

inefficient.Theusageofstylesheetsmadeiteasiertomaintainwebpagesandtokeepthepresentationconsistent.Sincestylesheetsarestoredinthewebbrowser ’ scachetheycanbeusedagainandagainandthere ’ snoneedtoreloadit.Hence,datatransferbecomes

isfasterandmoreefficient,too.Now,thesamecanbedonebyusingthefollowingstyleproperty:<h1style="color:red">Chapter1.</h1>.

IntegratingCSSwithHTMLalsoenableswebpage

developerstouseGIFs,JPEGandPNGfilestoembedanimationstoo.

CSSTransitionsThisisrelevanttoanyonelookingtodesignanapp,too.WhattheCascadeStyleSheetdoesisthatitallowsyoutomanipulateanimations.Consequentially,itwouldbealoteasierforyoutochangethesizeoftheanimation.Also,ratherthandoingso

immediately,youcanreviewhowtheseanimationswouldlookbyreviewingtheseintheirintermediatestates,too.Youcandeterminewhentheanimationwouldstart,howlongtheCSStransitionwilllastandhowitwouldrun,too.Allyouneedtodoistoadjustthedelay,durationand

timingproperties.Webpagedevelopersassignvaluestodifferentproperties.Asyoulearntodothisyouwouldseethatbysetting,changingorassigningdifferentvaluestothesepropertiesyouareactuallydescribingthebehaviorofthe

webpage.So,bychangingthevalueofthe Transition-durationyouaredescribinghowlongitshouldtakeforthetransitiontotakeplace.Youmightbewonderinghowthisappliestosomeonewhoisn ’ tinterestedinmakingwebpages.Yousee,style

sheetsaren ’ tonlyusedtodescribethebehaviorofthewebpage-thesecanalsobeusedtomakevideogames,cartoonsandsuchlike.Thinkaboutit:youcanonlyplayavideogameifyoucanplaywithcharactersandobjectsonascreen.Thestylesheetisusedtodescribethese

animationstobringthesecharactersandobjectsto ‘ life ’ .Seeingashowyouwouldbelearningtomakesuchcertaingamesinotherchapters,itisimportantthatyouknowofthebasicsofCSSandCSStransitions.

CSSAnimationsThereareonlysomepropertiesthatareanimatableandcanbemanipulatedbythestylesheetandthischapterwillonlydiscussthosepropertiesthatareapplicabletothegameyouwilllearntomake.Herearesomeofthe

propertiesyoucancontrolwithCSS:Transition-property:thename(s)ofthepropertyorpropertiesthatneedtobetransitionedarespecified.Hereareexamplesofsuchcontent:borderstyle,borderwidth,background-color,heightandwidth.

However,assoonaschangesaremadetotheseproperties,allotherpropertieswillchangeinstantaneously,too.Transition-duration:youcanspecifytheamountoftimeinwhichyouwouldlikeforonepropertytotransition.Ifyouwouldliketoapply

differentdurationstoeachpropertythiscanbedone,too.Transition-timing-function:thisallowsyoutospecifyafunctionsoyoucancontrolhowtheintermediatevaluesforthesepropertiesneedtobecomputed.Inotherwords,

thiscontrolstherateatwhichthetransitionneedstotakeplace.Youcanmanipulatethetransitionbyusingthecubic-bezieroption.YouneedtoassignavaluetotheXandYaxis.Ease,linearandstep-endareexamplesoftimingfunctions.Transition-delay:this

propertyenablesyoutodeterminehowlongonewouldhavetowaitforthetransitiontotakeplace.

DetectingWhenATransitionIsCompleteOncethetransitioniscomplete,standard-compliantbrowserstheeventistransitionend andthiswillofferacoupleofproperties:propertyName:thisisastring

thatwilltellyouthenameofthecompletedproperty.elapsedTime:thiswilltellyouhowmanysecondshavepassedsincethetransition.Thetransition-delay propertyhasnothingtodowiththis.

SummaryThoughCSSisnotthemaintopicinthisbook,itisimportantforyoutoknowthatitisusedwithandinHTMLdocuments.TheCSSstylesheetcanalsobeusedtomaketheJavaScriptrunmoresmoothlyandthisissomethingHTMLtexts

cannotdo.HTMLandCSSaredependentoneachother.ThemarkuplanguageisusedtobuildwebpageswhileCSSstylesheetsareusedtodescribehowthewebpagewouldbehave.Also,withoutthemarkuplanguageitis

impossibleforanyonetomakeawebpage.

Chapter8:MakingTheHelloWorldAppWithHTMLTexts“Talkischeap.Showmethe

code.”-LinusTorvalds

MakingtheHelloWorldAppwillhelpyouseehowtheHTMLtextscanbeusedtomakecertainapps.BeforeyouresumeyouneedtoknowaboutJavaScript.YouhavetouseJavaScriptwithHTMLandthatis

preciselywhatyouwilldohere.

1. LaunchNotepadtomakeyourHTMLfile.

2. Typethefollowingintothedocument:


<title>JavaScriptHelloWorld</title></head><body><h1>JavaScriptHelloWorldExample</h1></body></html>

3. Savethefilebythefollowingname:test.html.ClickonAllFilesonthedropdown

menuinfrontof“Saveastype”.

ByfollowingthesestepsyouhavesimplycreatedaframeworkfortheHello

Worldapp,usingtheHTMLtemplate.Youdon ’ thavetobeanexperttodosobecausethesestepsarequiteeasytofollow.OncethispartisdoneyouwilladdtheJavaScriptprogrambytypingthefollowinginfrontofthe<h1>

tag:

<script><alert(“HelloWorld!”)<script>Ifyouweretoinsertthisintothewebbrowseryouwouldseethis:

JavaScripthasabsolutelynothingtowithJavaitself.YouareonlyusingtheHTMLtexttoinsertJavaScriptintothestructured

document.

ConclusionThisbookcoverstheessentialsonHTMLandthebasicsyouneedtoknowaboutit.Ihopeyouenjoyedreadingandlearninghowtocodefromscratch.Thankyou,fordownloading

thebookonceagain!

IntroductionToCourse“Programmingisusuallytaughtbyexamples.”-

NiklausWirth

TheHTMLmarkuplanguageisusedtomakewebpages.

TechnologicaldevelopmentshaveledtothecreationofCascadeStyleSheetswhichhaveenabledwebpagedeveloperstohandlethebehaviorofthepageinadifferentmanner.Thisbookhasbeenwrittentoexplaintheutilityofthe

markuplanguageandstylesheetstoeveryonewhohasnoclueastowhatHTMLorCSSis.Bythetimeyouaredonereadingityouwillbemorefamiliarandconfidentaboutusingthetwoprograms,together,tomakeyourownwebpage.

Don’tgetintimidatedbytechnicaljargonandtheuseofcomplicatedtermsbecausethisbookwillclarifyyourbasicconcepts.Youwillalsocomeacrossvariouslinksandexampleshere.Clickontheseifyouwishtogathermoreinformationonatopicthatyoumightbeinterestedin.

I’dliketothankyoufordownloadingthisbookinadvanceandhopethatthisguidebenefitsyouincreatingyourveryownwebpage.Goodluck!

Chapter1:IntroductionToHTMLAndCSS“Walkingonwaterand

developingsoftwarefroma

specificationareeasyifbotharefrozen.”-EdwardBerard

Inthischapter,youwilllearnaboutHTMLandCSS,including:

•HTML•Elements,Tags,andAttributes

Whencreatingawebsiteyouhavetokeeptwothingsinmind:itscontentsanditspresentation.HTMLismarkuplanguagethatwascreatedsothatprogrammerscouldhandleparagraphs,headers,linebreaksandthelike,tomakeawebpage.Themarkuplanguagewascreated

beforethecascadestylesheets.ThelatestHTMLversionistheHTML5whichhasintroducednewfeaturestothemarkuplanguage.Thismakesthemarkuplanguagefarmoreflexible,user-friendlyandadaptablethanitwasinitially.Cascadestylesheets(CSS)

werecreatedtohandlethepresentationofawebpage.Itisapresentationlanguagethatdetermineshowthecontentofawebpagewillappear.So,thetwoareseparatefromandindependentofoneanother.Oneenablesprogrammerstohandlethecontentwhilethe

otherallowsthemtodeterminehowitwillappear.

HTMLTounderstandhowHTMLandCSSfunctiontogetheryoumustgetanideaofwhatthe2areandhowtheyfunction.Let’sstartwith3terms:elements,tagsandattributes.

Elements,TagsAndAttributesTheseweremadetodefinethestructureofawebpage.So,itallowsyoutodecidewhereyouwanttoplacetheheader,whentodividetheparagraphandhowtousemorethanoneheadersinastructuredHTMLdocument.

Anglebrackets(<>)areusedaroundtheelements.Theseenablethewebbrowsertointerpretandthen,implementwhattheprogrammerwantsittodo.Theelementisinsidetheanglebracket.Yousee,theworldwidewebneedstointerpretcodestoimplementthem.Different

codesareusedbyvariousprogrammersandhowtheseareinterpretediswhataffectsthecontentonthewebpage.Hereareafewexamples:<p><i>Theelementsandtheangle

bracketsform,whatareknownas,tags.Thereareopeningtagsandclosingtags.Thetextisinsertedbetweenthetwoandeverythinginsertedbetweenthetwoisthen,changedtolookacertainway.So,let’ssayyouwanttoitalicizethefollowingstatement:“MynameisJoe”.

Thisishowyouwillgoaboutitalicizingit:<i>MynameisJoe</i>Themarkuplanguagewillenabletheinternettointerpretthisstatementsasfollows:MynameisJoe

<i>istheopeningtagand</i>istheclosingtag.Also,suchtagsarereferredtoasanchortexts.Anopeningtagandaclosingoneformsananchoredtext.Attributesareusedsomoreinformationcanbeprovided

aboutanelement.Herearecommonattributes:id-thisisusedtoidentifyelementsclass-thisisutilizedtoclassifyelementssrc-programmersusethistospecifyasourceforcontentthatcanbeembeddedintothedocument.

Href-thisattributeisusedtolinkuserstoanotherwebsite.Youwillfindthattheseareusuallyinsertedinsidetheopeningtagsandareconstitutedoftheattribute’sname,value,theequalto(=)signandanattributevalue.Here’sanexample:<a

href="http://google.com/">Google</a>Thiscanbeusedtohyperlinktheword“Google”.So,anyonewhovisitsthewebsitecanclickonGoogleandgotothewebpage.Let’sbreakthisdownnow:<a-theelement

href="http://google.com/">-theattribute</a>-thetag

Questions1. Whatisthedifference

betweenatagandanelement?

2. WhatisthedifferencebetweenHTMLandCSS ?

Chapter2:HowToUseHTMLToMakeYourOwnWeb

Page“Truthcanonlybefoundinoneplace:thecode.”-Robert

C.Martin

Inthischapter,youwilllearnabouthowtouseHTMLtomakeyourownwebpage,including:

•HowtosetupourownHTMLdocument

•Nestedelements•Block-levelelements•Self-closingtags•Errorsandsolutions•Applyingwhatyouhavelearned

HowToSetupOurOwnHTMLDocumentYou’velearnedthebasicsofHTML.ThissectionwillteachyouhowtomakeyourownHTMLdocument.Firstofall,openupatexteditor.SinceIusethe

Windows7platform,IwillutilizeNotepad.MacuserscangoforTextWranglerorsuchlike.Note:DonotuseMicrosoftWordorothertexteditors.

1234

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>Hello

567891011

World</title></head><body><h1>HelloWorld</h1><p>Thisyourfirstwebpage.</p></body></html>

TheHelloWorldappwillhelpyoulearnhowyoucanapplythebasicsofHTMLtocreateyourveryfirstHTML

document.<!DOCTYPEhtml>informsthewebbrowser(thiscanbeInternetExplorer,Safari,MozillaFirefoxand/orGoogleChrome)aboutwhatversionoftheHTMLmarkuplanguageyouwillbeutilizing.Thisisalwaysinsertedintheveryfirstlineofadocument.The <html>is

usedtotellthebrowser“thisiswhere

mytextstarts”.

Whenprogrammerswanttoinsertaheader,theinsertthe<head>openingtag.Nousercanseethetagitself.Youmightseethedocument’stitleorheadinginstead.The<h>HelloWorld</h1>anchortextisusedtogivetheHTML

documenttheHelloWorldheader.The <metacharset="utf-8"> tagisusedtotellthewebbrowserhowthecharactersshouldbeencodedorread.The<p>Thisyourfirstwebpage.</p>anchortextisusedtosignifythebeginningofanewparagraph.

Here’swhatyouwillsee:

HelloWorldThisisyourfirstwebpage.

NestedElementsElementscanbeembeddedwithinoneanothertoorganizeanHTMLdocumentandtomakeitmoreeligible.The<head>and<body>elementswerenestedintothedocument.Theseelementsareindented

intotheelements.

Block-LevelElementsThesearealsoreferredtoasinlineelementsandtheytendtofillupthespaceoftheparentelementthuscreatingablock.Thisiswhythesearereferredtoas“blocks”too.Theseappearinthe<body>element.Allblock-levelelementswillbeginonnew

lines.Gothroughthefollowingwebsitetolearnmoreaboutblock-levelelements:https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements.YouneedtoknowaboutthesetounderstandtheBoxModel.

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

Self-ClosingTagsThesetagsdonothaveclosingtags.Ifyoulookatthepreviousexample,the<meta>taghadnoclosingtag.Theseareknownasself-closingtags.

ErrorsAndSolutionsAttheendoftheday,allprogrammersarehumansandso,weareboundtomakemistakeinourcodes.Whileitisgoodpracticetogothroughtheseandtofindthemonyourown,youneednotworrybecausebuilt-invalidatorswillhelpyou

detectandfixmistakes.

ApplyingWhatYouHaveLearnedYouwill,now,learntoapplywhatyouhavelearned,tomakeawebpageofyourown.Followtheseinstructionstodoso:

1.Openupthetext

1.<!DOCTYPEhtml>2.<htmllang="en">3.<head>

editorandcreateafileentitledindex.html.SavethisinafolderonyourdesktopentitledHTMLandCSS.2.Savethisdocumentstructureintothefile:

4.</head>5.<body>6.</body>7.</html>

3.Next,addthefollowingintothehead,metaandtitleelements:

1.<head>

2.<metacharset="utf-8">3.<title>MyPage</title>4.</head>

4.Now,let’smakethingsalittlemoreinterestingbyaddinginafewmoreelements:

1.<body>2.<h1>MyPage</h1>3.<p>ThisismyfirstattempttomakeawebpageusingCSSandHTML.Iamsoexcitedaboutdoingthisonmyown!</p>4.</body>

5.Savethefileandgolookforitinthefile

entitledHTMLandCSS.Dragthistoanywebbrowser.

Trydoingthisexerciseonyourowntogetagraspofhowtogoaboutdoingthisonyourown.Youcanincludeanytextbetweenthetagsshownabove.

SummaryThischapterfamiliarizesyouwiththeprocessofmakingyourownwebpagebyusingbasicHTMLtoolslikeelements,tagsandyouhavelearnedhowtomaketheHelloWorldappbyutilizingthesetools,too.

Questions1.Whatarenestedelements?2.Whatareanchoredtags?

Chapter3:MoreOnHTML“Redundantcommentsarejustplacestocollectliesandmisinformation.”-RobertC.

Martin

Inthischapter,youwilllearnaboutmoreonHTML,including:

•Semantics•Howtoidentifydivisionsandspans•Comments•Howtoutilizetext-basedelements•HowtobuildstructuringbuildHTML

ThepreviouschapterwasmerelyanoverviewofhowHTMLandCSSworkindependentlyandtogether.Thischapterfocusesentirelyonthemarkuplanguage.

SemanticsTheseareusedtoenablevariousbrowsers,machines,searchenginesandscreenreaderstoread,comprehendandunderstandwhatiswrittenonthewebpage.ThevalueofthecontentonthewebpageisdescribedbyHTMLsemantics.

HowToIdentifyDivisionsAndSpansWespokeaboutthe<div>and<span>elementsinthepreviouschapter.Theseareimportantbecausetheyallowprogrammerstoapplycertainstylestothecontentonthewebpage.<div>isusedtohandlethe

webpage’sdesignandlayoutandtoidentifybiggergroupingsofcontent.<span>elements,ontheotherhand,areusedtoidentifysmallergroupingsofcontainedcontent.Thesearefoundwithintheblocksofelementsthemselves.Youwillcomeacrossthesefrequently.

Thepointhereistogoforvaluesthatrefertothecontentandnottheappearanceofsuchelements.

1.2.<divclass="networking">3.<p>Youcanaddmeon...</p>4.<p>Youwill

alsofindmeon...</p>5.</div>6.7.8.<p>Iwillsoon<spanclass="tooltip">writingHTML</span>loginandaddyoutoo.</p>

CommentsYoucanaddcommentstoyourHTMLandCSStexts.Theseareaddedbyprogrammerstokeepatrackofwhattheyareorweredoingortotakenotes.YoucanaddacommentbythiswayonHTML:

.Thefollowing

syntaxwasacommentintheprevious

example: .

HowtoUtilizeText-BasedElements

Openupanywebsiteandyouwillcomeacrossheaders,paragraphs,subheadsandtextsthathavebeenmadeboldortextthatwasitalicizedandsuchlike.Whatyouseeistheproductoftext-basedelementsthatplayanimportantroleinmakingsuchcontentappearacertainway.Headingsareusedtobreakupyourcontentandtomakethetexteligible,organizedandtomakeiteasierforsearchenginestodeterminethecontentonthewebpage.Youcanalsousethesetoestablishhierarchyinthedocument.

Youcanvisitthefollowingwebsitetoseehowdifferentheadingsmightappearonawebpage:

http://learn.shayhowe.com/html-css/getting-to-know-html/.Youcanalsodividethetextintoparagraphsbyusingthe<p>element.Here’sanexample:<p>Hi.MynameisJoeandIaman

engineerwhohasrecentlyshiftedto

http://learn.shayhowe.com/html-css/getting-to-know-html/

CanadafromtheUS</p>

<p>Iwouldliketotalktoyouabout

theimportanceofbeingoptimistic</p>

Thiswillappearastwoseparateparagraphsonyourwebbrowser.Manybeginnersdonotunderstandthedifferencebetweenthe<b>elementand

the<strong>element.Thelatterisusedtoattractimportancetoyourtext.Youcangoforthe<b>elementbutyouneedtodecideupontheimportanceofyourtextbeforeyoucandoso.The<b>elementhasnosemanticvalueassuch.Youcanusebothelements,too.Lookatthisexample:<p><strong>Caution:</strong>Donottouch.</p><p>Thisis<b>not</b>thetimeorplaceto<b>talk</b>.</p>

Thisexampleutilizesbothelements.Here’stheresult:

Caution:Donottouch.

Thisisnotthetimeorplacetotalk.

Justastherearetwoelementstomakeyourtextbold,therearetwoelementsthatcanbeusedtoitalicizecertainpartsofyourtexttoo:the<em>andthe<i>elements.The<em>elementcanbeusedtostressoncertainpartsofyour

text.The<i>elementcanbeusedtostressonastatement,certainwordsinastatementortostressonthetone.Here’showyoucanusetheseelements:<p>Iwould<em>love</em>todance!</p><p>Myname<i>is</i>Joe.</

Thiswouldappearasfollows:

Iwouldlovetodance!

MynameisJoe.

HowtoBuildStructureUsingHTML

PriortoHTML5divisionswereusedtodivideandorganizetheHTMLtextbutthesehadnosemanticvalue.HTML5(thelatestversionofthemarkuplanguage)camewithnewelementsthatdidhavesemanticvalue.<header> ,<article> , <section> and <aside>areexamplesofsuchelements.YoucanusethesemorethanonceonthesameHTMLdocument.Theheaderelementisusedtointroduce

orincludeaheaderinadocument.

Beforeyougoon,youshouldlearn

aboutthedifferencebetweentheheader

andheadelements.Thesemanticvalues

fortheseelementsdiffer.The<header>

elementwillalwaysfallinthe<body>

element.The<head>data,ontheother

hand,comesinthe<html>elementand

itcanlinkyoutootherwebpagesor

websites.Usethisanchorelementto

createaheader:<header>...</header>Anotherbasic,butimportance,element

isthe<footer>element.Thiscanbe

usedtoidentifytheendingofyourweb

page,anarticle,sectionorsuchlike.

Here’sthefooterelement:<footer>...</footer>

Youcanusethenavigationelementto

linkpeopletootherwebpagesorto

otherwebsites.Usethe<a>anchor

elementtowrapone-offlinks.Ifyou

wouldliketonavigateuserstoother

partsofthesamewebpageorto

anotherwebpage,usethefollowing

element:<nav>...</nav>

Insomeinstancesyoumightwantusers

torefertoanarticlewithindependent

contentthatcanbeusedanddistributed

byothers,too.Todothisusethe

followingcode:<article>...</article>.

Youwanttotidyupyourwebpageso

it’seligibleandlooksmoreorganized.

Introducingsectionsbyusingthe

<section>elementwouldbeagood

idea.Thiswayyoucangroupthe

contentsdependingupontheir

importanceandhierarchy.Usethe

followinganchorelementforthis

purpose:<section>...</section>.

Beginnersoftengetconfusedaboutusingthe<div>,<article>and<section>elements.Ifitisdifficultforyoutodecideuponanelement,lookatyourcontent.Rememberthatthe<article>and<section>elementsareusedtobringsomestructure.Ifyouwanttogroupthe

contentsforstylingpurposes,usethe<div>element.

SummaryBythetimeyouaredonereadingthischapteryoushouldknowaboutvariouselementsthatcanbeusedinyourHTMLdocument.Usetheseelementstobringsomestructureinyourdocumentandtomakeitmoreeligible,user-friendlyandattractive.

Questions1.Whataretext-basedelements?2.Giveexamplesoftext-basedelements.3.WhataresemanticsinHTML?

Chapter4:CascadeStyleSheets“Ifyou'veneverprogrammedacomputer,youshould.

There'snothinglikeitinthewholeworld.Whenyou

programacomputer,itdoesexactlywhatyoutellitto

do.”-CoryDoctorow

Inthischapter,youwilllearnaboutcascadestylesheets,including:

•Selectors•ReferencingCSSwithinHTML

So,inthefirstchapteryoulearnedthatCSSstylesheetsareusedtochange,modifyanddeterminehowyoucontentwillbepresented.Thischapterwillshedsomelightonthefollowingterms:selectors,propertiesandvalues.Thesearebasictermsthatyouneedtoknowabout

stylesheets.Note:donotconfuseCSSwithHTML.Elements,tagsandattributesarespecifictothemarkuplanguagewhileselectors,propertiesandvaluesarespecifictothepresentationlanguage.Theyworkdifferently,havedifferentpurposesandboth

contributetothecreationofthewebpageindifferentways.

SelectorsSelectorsareusedtostyleCSSusingHTMLelements.ProgrammersusestylesheetstotargetandstylevariouselementsintheHTMLdocument.Forexample,CSScanbeusedtochangethecolor,sizeorthepositionofthetextinthedocument.

Theseareusuallyusedtotargetattributevaluesorelementsthatcontroltheheaderand/orparagraphs.Theseareusuallyfollowedbycurlybrackets:{}.Here’sanexampleofhowthiswouldwork:

p{color:...;height:...;}Inthisexample,thecolorandheightoftheparagraphcanbemodifiedandstyleddifferently.Oncethestyleis

determined,youneedtodecidethevaluestoo.Incaseof“color”thiscanbeorange,red,greenetc.Let’stakethesameexample:p{color:red;height:16px;}

pistheselectorwhilecolorandheightarethepropertiesandorangeand16pxarethevaluesoftheproperties.Thereare3kindsofselectors:type,classandIDselectors.Typeselectorstargetelementsaccordingtheirtypes.Bywayofexample,if

youwanttotargetdivisionelements,youwillusethedivtypeselectorforallsuchelementslikethis:1div{...}

Here’sthecorrespondingHTML:

<div>...</div><div>...</div>Then,thereareclassselectorsthattargetanattributebasedonitsclass.Youcanselectagroupofelementsinsteadoftargetingonetypeofselector.Thesameattributevaluescanbeusedformorethanone

element.Here’sanexample:

1.<Divclass=“nice”>…</div>2.<pclass=“nice”>…</p>

IDselectorsaremuchmorespecificthantheaforementionedselectorsand

theseselecttheIDoftheattribute.Youcanusetheseonceperstageandthehashsign(#)isusedtodenotethem.Here’showyoucanselectanelementusingtheIDselector:

1.#johndoe{…}

Here’sthecorrespondingHTMLforthis:

1.<divid="shayhowe">...</div>

Gothroughvarioustutorials,booksandexamplesonCSS

andHTMLandyouwillfindthatthesearesomeofthemostcommontypesofselectorsyouwillcomeacross.However,therearemanyothersoutthere,too.

ReferencingCSSWithinHTMLTogiveeffecttoCSSyoumustrefertotheCSSfilewithinyourHTMLfile.Whenyouuseonestylesheetforawebsite,youcanapplythesamestyleeverywhereonthesamesite.Onceyoumakecertainchanges,these

changeswillbeappliedthroughoutthesite.Thiscanbedonebymakinganexternalstylesheet.YoualsohavetheoptionofreferringtotheCSSinaninternalstylesheetandinternalstylesbutnotmanyprogrammersgoforinternalstylesheets.

Rememberhowyouweretaughttousethetexteditorabove?Well,you’llbeusingthesameeditoragain.Thiswillhavethe.cssextension.The.cssextensionnotifiesthatyouhavesavedacssfile.Savethehtmlandcssfileinthesamelocationandfilessoyoucanfindandclickon

themwheneveryoufeeltheneedtodoso.Takethisexampletoseehowthiscanbedone:

123

<head><linkrel="stylesheet"href="main.css"></head>

What’shappeninghereisthat

youaredefiningtherelationshipbetweenthetwolanguagesbyusingtherelattribute.The‘stylesheet’valueallowsyoutospecifythekindofrelationshipthetwowillhaveinyourdocumentandthemain.cssfilewillbesavedinthesamefileastheHTMLfile.Thisis

referredtoastherootdirectory.Thehrefattributeindicateswherethesubfolderfortheattributeisstored.Inthiscasethepathiscorrelatedwiththemain.cssfilewiththesubdirectory‘stylesheet’.

SummaryThischapterteachesyouhowtousestylesheetstomakeawebpage.Ifyouwillhavenoticed,selectorsareusedtocontrolthepresentationandNOTthecontentofthewebpage.ThatispreciselywhattheCSSismeanttodo.

Questions1.Whatareselectors?2.WhymustyouuseCSSreferences?

Chapter5:MoreOnCSS“Sometimesabstractionandencapsulationareatodds

withperformance—althoughnotnearlyasoftenasmanydevelopersbelieve—butitisalwaysagoodpracticefirsttomakeyourcoderight,and

thenmakeitfast.”-BrianGoetz

Inthischapter,youwilllearnaboutmoreonCSS,including:

•Properties•Howtocombineselectors•Workingwithspecificityweightslow

•Lengths

Thedefaultstyleforallwebbrowsersdiffer.Thismeansthatyouwouldhavetousedifferentstyleheadings,paragraphsandsuchlike,differentlyonGoogleChromeandInternet

Explorer.TheadvantageofCSSisthatitenablesyoutoensurethatthereiscross-browsercompatibility.Inotherwords,itisbecauseofstylesheetsthatyoucanseethesamewebpageondifferentbrowsers.WhatCSSdoesisthatittakescommonHTMLelementsandunifiespredefinedstylessoforcross-browsercompatibility.Check

outthefollowingwebsitetoreadmoreaboutCSSresets:http://meyerweb.com/eric/tools/css/reset/Youcanusestylesheetstochangethebackgroundcolorofcertainpartsofthetext,too.Supposeyouwanttochangethevalueofthecolorandfont-size-inthiscaseyouwilldothefollowing:p{

http://meyerweb.com/eric/tools/css/reset/

background:orange;font-size:16px;}p{background:green;}Usingthisyouwillhavechangedthecolorofthebackgroundofparagraphsonthetopandthen,youwillhavedonethesamefor

paragraphsthataresituatedatthebottomofthestylesheet.So,theparagraphsituatedatthetopoftheHTMLdocumentwillappeartobeorangeincolorwhilethebackgroundoftheparagraphthatappearsbelowthisparagraphwillbegreenincolor.

PropertiesYoucanalsoapplythecascadetopropertieswithinindividualselectors.Let’sconsiderthisexample:p{background:orange;background:green;}Ifyouchangethevalueofthe

backgroundtogreenafterorange,theparagraph’sbackgroundwillbegreenincolor.Youwillfindthatthestylescascadefromtoptobottom.Insomeinstancesthespecificityofyourselectorswillbreak.Everyselectorhasaspecificityweight.Theweightandplacementoftheselectorswilldeterminethestyleofthecascade.

Wespokeabouttype,classandIDselectorsinpreviouschapters.Typeselectorsarethelowestinspecificityweightandonetypeselectorhasavalueof0-0-1.Oneclassselectorhasaweightof0-1-0whileoneIDselector,beingtheheaviestofthe3,hasaspecificityweightof1-0-0.Whenusingselectors,alwaysgivepreferencetothosethathavegreater

specificityweightsthantherest.Aselectorwithahighspecificityweightwillalwaysappearregardlessofwhetherotherselectorsshow.Let’ssayyouwanttostylizethefollowingHTMLcontent:<pid="food">...</p>Here’showyouwillgoaboutthis:

#food{background:orange;}p{background:green;}Youcanseeatypeselector(p)andanIDselectorhere.TheIDselectorisheavierthanthetypeselector.Hence,

theparagraphwillappeartobeorangeinsteadofgreen.Ifyourstylesheetdoesn’tseemrightandifthestylesaren’tbeingappliedproperly,chancesarethatselectorsarebreakingyourcascadebecauseduetothespecificityweights.

HowToCombineSelectorsIfyouhavereadthepreviouschapterscarefully,youwillhavelearnedaboutselectors,specificityweightsandhowthesecanaffectthecascade.Now,let’slookathowtocombinevariousselectorsby

usingthefollowingHTMLcontentasanexample:

<divclass="fries"><p>...</p><p>...</p><pclass="red">...</p></div>

Now,let’ssupposethatyouwanttochangetheparagraphelementswithintheclass

attributethathasavalueof‘fries’sothatitisgreenincolor.Atthesametime,youalsowanttosetthebackgroundcoloroftheclassattributewithavalueofred,soitappearstobeyellow.Here’showyouwillstylethecontent:.friesp{background:green;}

.friesp.red{background:red;}Combinedselectorsshouldbereadfromlefttoright.Theselectorthatissituatedtotherightiscalledthekeyselector.Intheexamplegivenabove,pisthekeyselector.Thekeyselectoris

prequalifiedwiththeclassselector,fries.Hence,thecombinedselectorwillonlytargettheparagraphelementswithintheclasselementthathasaclassattributevalueoffires.Inthesecondselector,redappearstotherightandso,thiswillbethekeyselector.Whatthismeansisthatselectorsthatcomebeforeredareallpre-qualifiers.

WorkingWithSpecificityInCombinedSelectorsWhenyouuseselectors,theirspecificityweightsarecombined,too.Youcanfigureoutthetotalbyaddingtheindividualspecificity

weightsofvariousselectors.Considertheexamplesabove:.friesp{background:green;}.friesp.red{background:red;}Thefirstselectorhasaclassandtypeselector.Thepoint

valueoftheclassselectoris0-1-0whiletheweightofthetypeselectoris0-0-1.Addtheirweightandyou’dgetatotalspecificityweightof0-1-1forthatselector.Inthesecondselectoryoucansee2classselectorsandonetypeselector.Ifyouadduptheirspecificityweightsyou’llgetavalueof0-2-1.Thesecondselectorhasahigherspecificityweightthan

thesecondoneandso,thiswilltakepreferenceoverthefirstselector.Alwaysbewaryofthespecificityweightsbecausethosewithhigherweightsarelikelytobreakthecascade.

HowToKeepSpecificityWeightsLowTheproblemofbreaksinthecascadecanbefixedbyusingsimilarstylesforeveryelement.Thiswayyoucouldreducethespecificityweight

oftheselectors,too.Youcaninsertmultipleclassattributevaluesthougheachvaluemustbeseparated.Allyouneedtodoisinsertaspacebetweenthevalues.Thebenefitofthisisthatyoucanuseonestyleonallelementsofthesamesort.Atthesametimeyoucanalsousedifferentstylesforcertainelementsthatbelongtothesamecategory,too.

Thisbitcanbeconfusingbutifyouareinterestedinreadinguponthis,clickonthefollowinglink:http://learn.shayhowe.com/html-css/getting-to-know-css/#combining-selectors.Thelinkwillalsoteachyouhowtousedifferentcolorstostylizeyourtextandso,Iwouldadviseyoutogothroughthecontentsonthewebpage.Sincethisbookis

http://learn.shayhowe.com/html-css/getting-to-know-css/#combining-selectors

meanttobeaguideforbeginners,Iwillnotaddressthetopichere.

LengthsTherearetwotypeoflengthswhereCSSstylesheetsareconcerned:absoluteandrelative.Theformerlengthismeasuredincentimeters,millimeters,inchesandsuchlike.However,themostpopularchoice,amongstprogrammers,isthepixel.Thepixelisgreatfor

beginners.p{font-size:14px;}

Relativelengths,asthenamesuggests,dependononeanotherandthesearemuchmoredifficulttocontrolforbeginners.Percentagesandemvaluesareusedforrelativelengths.So,ifyou

wanttosetthewidthofanyelementto50%,youneedtoknowofthewidthoftheparentvalue.Oncethisisidentified,youcanadjustthewidthaccordingly..col{width:50%;}Youcanusepercentagestoadjusttheheightandwidthof

anelement.Utilizingpercentageswillalsoenableyoutoalterthelayoutofyourwebpage.Incaseofemunitsyouneedtoconsiderthefontsizefirst.

SummaryThischapterteachesyouaboutspecificityweightsofvariousselectorsandhowthesecanaffectthecascadeitself.Alwaysremembertogoforlowerspecificityweightstopreventthecascadefrombreaking.Italsotouchesuponabsoluteandrelativelengthsthatprogrammersuseintheir

HTMLdocuments.

Chapter6:TheBoxModel“Thetroublewithcomputersisyou*play*withthem.Theyaresowonderful.Youhavetheseswitches-ifit'saneven

numberyoudothis,ifit'sanoddnumberyoudothat-andprettysoonyoucandomoreandmoreelaboratethingsifyouarecleverenough,ononemachine.”-RichardP.

Feynman

Inthischapter,youwilllearnabouttheboxmodel,including:

•Introductiontotheboxmodel•Applyingtheboxmodel

IntroductionToTheBoxModelAccordingtotheconceptoftheboxmodel,allelementsonawebpagearerectangularboxes.However,thesizeoftheboxisdeterminedbypropertiesthatcanbe

controlledbyprogrammers.Thecoreofthisrectangularboxisdefinedbytheheightandthewidthofanyelementwhichcanbeadjustedinthedisplayproperty,byitscontentsandbyspecifyingthewidthandheightproperties.Thedimensionsofthebox

canbemodifiedbychangingandadjustingthepaddingandborderelements.Youcanalsoadjusttheborderbyspecifyingthemargin.Itisimportantthatyoudeclarethevaluesfirstorelsetheywillreturntotheirdefaultvalues.

TheBoxModel

ApplyingTheBoxModelYouneedtoadjustandplayaroundwiththeboxmodeltocorrectthedisplaysothatthewebpagecanbepresentedinacertainway.Thepropertiesmentionedabovewillhelpyouwiththis.Youcancalculatethewidth

ofvariouselementsbyusingthisformula:margin-right+border-right+padding-right+width+padding-left+border-left+margin-left.Youcanalsocalculatetheheight:margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom.

Insomeinstancesthewidthpropertyvaluemaybelessthantheboxitself.Tocorrectthisyouneedtoadjustthepadding,marginsandbordersofthatbox.Thisisbecausethewidthdoesn’tjustincludethewidthpropertyvalueitselfbutitalsoincludesthesepropertyvalues.

Thepresetvalueoftheelementisdependentonthedisplayvalue.Thedefaultvalueforanyblock-levelelementis100%.Block-levelelementstakeupany(horizontal)spaceavailabletothem.Sinceinlineelementstendnottohaveaspecificsize,widthandheight

propertieswillonlyberelevantincaseofnon-inlineelements.So,youcanusethispropertyifyouwanttosetaspecificwidthforsuchanelement:div{width:100px;}

Theheightofanyelementisdependentuponthecontent.Elementstendtoexpandanddecrease(vertically)toadjusttheircontents.Usetheheightpropertyforyournon-inlineelement.Themarginpropertywillenableyoutoadjusttheamountofspacethat

surroundsanelement.Youcandefinethemarginsofanelementtodecidehowyouwouldliketopositiontheelementonapage.Visitthefollowingwebsitetolearnmoreabouttheboxmodel:http://learn.shayhowe.com/html-css/opening-the-box-model/.

http://learn.shayhowe.com/html-css/opening-the-box-model/

Youcanuserealexamplestomakeandadjustyourownboxmodel.

SummaryThischaptercoversthebasicsoftheboxmodel.Everyelementhasaboxmodelandyoucanchangethemodelbyplayingaroundwithaforementionedproperties.

Questions1.Whatistheboxmodel?2.Howcanyouadjusttheboxmodel?

Chapter7:HowToPositionContent“Howyoulookatitisprettymuchhowyou'llseeit”-

RasheedOgunlaru

Inthischapter,youwilllearnabouthowtopositioncontent,including:

•Floats•Typeoffloats

CSSallowsyoutobringstructureandtocreateaflow

inyourcontent.Youcanpositionthecontentindifferentways.Thischapterexploreshowyoucanpositionthecontent.

FloatsThefloatpropertycanbeusedtopositioncontentontheHTMLdocument.Thegoodthingaboutthispropertyisthatitisquiteversatile.Youcanutilizethispropertybyremovinganelementonapageandrepositioningithorizontally

(totheleftorright)andtherestofthecontentswill“float”andrearrangethemselveswithit.Youcanuseitonmorethanoneelementsimultaneously,too.Withthispropertyyoucanadjust,fix,modifyorcreatethelayoutofyourwebpage.Lookatthisexampleandtry

usingitinanHTMLdocumenttofamiliarizeyourselfwithfloats:img{float:left;}

Tryplayingaroundwithfloatsonthefollowingwebsite:

http://codepen.io/shayhowe/pen/utfmw

http://codepen.io/shayhowe/pen/utfmw

TypesOfFloatsTherearetwotypesoffloats:clearingandcontainingfloats.Clearingfloatsareusedtopreventthefloatpropertyfromwrappingfloatedelementsandtocleartheminstead.Thereare3valuesforclearingfloats:right,leftandboth.Youcan

clearthefloatsontherightortheleftwiththefirsttwovalues.However,ifyouwouldliketoclearfloatsonbothsidesgofor“both”instead.div{clear:left;}

Containingfloatsworkprettymuchthesamewaythatclearingfloatsdobuttheadvantageofthefloatisthatitensuresthestylesaren’tchangedoraffected.Thefloatsarecontainedintheparentelement.Theelementsinsidetheparentelementarecontainedandelements

outsidetheparentelementareleftunaffected.Ifyouwanttoreadmoreaboutthese,clickonthefollowinglink:http://css-tricks.com/all-about-floats/.

http://css-tricks.com/all-about-floats/

SummaryThischaptergivesyouabriefintroductiontocertainpropertiesthatwillhelpyoupositionthecontentonyourHTMLdocument.Thefloatpropertyisoneofthemostusefulpropertiesforrepositioningcontentonawebpage.

Chapter8:TypographyLegacycode.Thephrase

strikesdisgustintheheartsofprogrammers.Itconjures

imagesofsloggingthroughamurkyswampoftangledundergrowthwithleachesbeneathandstingingfliesabove.Itconjuresodorsof

murk,slime,stagnancy,andoffal.Althoughourfirstjoyofprogrammingmayhavebeenintense,themiseryofdealingwithlegacycodeisoftensufficienttoextinguishthatflame.”-MichaelC.Feathers

Inthischapter,youwilllearnabouthowtopositioncontent,including:

•Floats

•Typeoffloats

TypographyhasenabledprogrammerstoembedvariousfontsinHTMLdocumentsandavarietyoftypefacesareattheirdisposal,too.TypefacesgivetheHTMLtextacertainlookandfeel.Fonts,ontheotherhand,

allowsyourcomputertoaccessthattypeface.

AddingColorToYourTextWhenmakingyourHTMLdocumentconsiderthetypefaceyouwouldliketoutilizeandthecoloryouwantyourtexttobein.Youmerelyneedtousethecolorpropertytoplayaroundwithcolorsforyourtext.

html{color:#555;}

FontPropertiesYoucanchangefontpropertiestoedityourwebpageandtoimproveitslookandfeel.Youmustfirstdeclarethefont.Forthisyoushouldusethefont-familyproperty.Youcanusemorethanonefontnamebutyoumustseparatethesewith

commas.Thefirstdeclaredfontthatstartsfromtheleftisyourprimaryfontchoice.Incasetheprimaryfontchoicecannotbeimplemented,thealternativechoicewillbeimplementedinstead.body{font-family:"CourierNew",TimesNewRoman,Arial,Aharoni;

}

Inthisexample,CourierNew,istheprimaryfontchoice.However,ifthiscannotbeusedorifitisunavailableTimesNewRomanisthenextoption.

FontSizeThisenablesyoutocontrolandmanagethesizeofthetext.Youcanuseemunits,pixels,points,font-sizesandpercentagestomodifythefontsize.Youcanalsomodifythefontstylesothatcertainpartsofthetextisitalicized.You

needtousethefont-stylepropertyforthisandthereare4valuesthatthispropertywillaccept: italic , normal , oblique ,and inherit .Theitalicvaluewillitalicizethetextwhilenormalwillreturnittowhatitwasbeforeitwasitalicized.Youmust

usethespecialclasswhenchangingthefontsize:.special{font-style:italic;}

Youcanalsochangethetypefacebymakingcertainpartsofthetextbold.Forthisyoumustusethefont-weight

property.Fivevaluescanbeusedforthispurpose:bold,normal,bolder,inheritandlighter..daring{font-weight:lighter;}

Programmersutilizethe

followingnumericvaluestoincreasetheweightofatypeface:100,200,300,400,500,600,700,800and900.100isthelowestandthinnestofallnumericalvalueswhile900isthebiggestandso,yourtextwouldappeartobeverythickifyougoforthisvalue.

.daring{font-weight:900;}

AdjustTheLineHeightTheterm“lineheight”referstotheamountofspacebetween2lines.Thehigherthevalue,thefurtheraparttwolineswillbe.Thelowerthevalue,thecloserthetwolineswillbe.body{

line-height:24px;}

SummaryFontsizescanbemanipulatedtomodifyorchangeyourtext’slook.Variouspropertiesareusedforthispurpose.Thischapterteachesyouhowtodoso.

ConclusionThankyoufordownloadingandreadingthisbook.There’salotmoreinformationonhowyoucanuseCSSandHTMLtomakeyourownwebpageandIapologizefornotincludingmoreinformationonthese

areas.However,thisbookisonlymeanttoguideandfamiliarizebeginnerswithafew,basicconcepts.Onceyouhavefamiliarizedyourselfwithbasicconceptsyoucangoontomoreadvancedconcepts.Ifyoufeelthatyouarereadytolook

intotheseyoucanbrowsethroughthevariouslinkIhavecopy/pastedafewlinksthatwillbenefityouonyourjourney.

DescriptionAreyousomeonewhowouldliketostarthisorherownwebsite?Ifyes,youneedtolearnaboutHTMLandCSS.Everyprogrammerandwebpagedeveloperusestheselanguagesfortheirwebsites.HTMListhemarkup

languagewhichenableswebpagedeveloperstocontrolthecontentofyourwebsitewhileCSShelpshandlethepresentationandbehaviorofthiscontent.ThisbookwillfamiliarizeyouwithafewbasicconceptsontheHTMLandCSSsoyoucanapplywhatyouhave

learned.Learnhowtousethelanguagestoyouradvantage.Thiscomprehensiveguideconsistsofalltheinformationyouneedasabeginner-andmore!Youwillcomeacrossanumberoflinksinthebook.

Clickonthesetolearnmoreabouttheselanguages.Attemptafeweasyquestionstorevisethesechapters.Bythetimeyouaredonereadingthisbookandbrowsingthroughusefullinksinsidethebook,youwillbepreparedtostartyourownwebsite!

Areyouafraidoftechnicaljargon?Don’tbe!Thisbookexplaineverythinginlaymentermssothatanyonewhoisn’tfamiliarwithcoding,HTML,CSSandprogrammingcanrelatetoit.Goodluck!

IntroductionEveryonewantstotakechargeoftheirlifeandbecomesomeonewhocancalltheshots.Giventhecurrenttrendsintheeconomy,itisonlynaturalthatpeople —studentsandnewprogrammersmostofall

—becomeapprehensiveaboutemploymentopportunities.Thereisnobetterwayoflandingyourselfajob —onethatyoulove,enjoy,andinwhicheveryeffortyouputwilldeliverresultbackatyou—thanbecomingyourown

boss.Thesimplestandmostcost-effectivewayforstudentstodothatisthroughfreelancing.Youcan,andyoumust,becomeyourownboss —andforonesimplereason:“Ifyoudon'tbuildyour

dream,someonewillhireyoutohelpbuildtheirs”

Youmusthavereadthisline999timesbeforeinyourlifewithoutpayinganyattentiontoit.Here ’ stohopingthatthousandthtime ’ sthecharm.Somebodywillhireyoubecausethey ’ dwanttohone

anduseyourskillstobuildtheirbusiness.Whynotspendtimeworkingwithrealclients,understandingtheirrequirements,dealingwiththeirqueries,andhandlingtheprojectonyourown?i.e.doingthesamethingasyouwouldbedoingifhired.Thenagain,manystudents

shyawayfrombuildingtheirowndreams.

FearOfBeingPaidWehaveseenandtalkedwithmanystudents,askingwhytheywouldnotstarttheirownfreelancingact?Mostofthemaresimplyfearfulofnotbeingpaidfortheprobationperiodwherethey ’ dmakemistakesandhonetheirskillsetforthenon-bookish,

practical,clientcenteredmarketplace.Inaphrase,theonlythingthatmostnewstudentsareafraidofstartingtheirownfreelancingact,andlaterafull-fledgedbusiness,isthefearofrisk.Theriskofnotbeingpaidforthemonths

wheretheygraspthemarket,andrealizethespecificmarketnichewheretheycanbecomeanauthority.Theybelievethatjoiningafirmsavesthemthistrouble,asevenduringtheirlearningprocess(readbecomingpartofthecompanyandhoning

skillsnecessaryforthatcompany ’ swork),theygetpaid.

Butthat’saloadofcompilererrors

…andthisreportaimstode-bugthemistakesthatstudentsandnewprogrammersmake

whilewritingthesyntaxfortheirfutureendeavors.

FearOfFacingTheCompetitionThefearofcompetitionisthesecondscourgethatwreakshavocwithnewprogrammers ’andstudents ’abilitytolaunchthemselvesintothemarketasfreelancers.Thebasicpremiseisthatsinceallthelowhangingfruit

hasbeengobbledupbypioneeringfreelancers,andwhohavebuiltastrongportfolioofprojectsandservices,newcomersdonotstandachanceofbeingofferedprojects.Understandthis:we ’ reintheeraoftabletsand

smartphones.Insimplerwords,we ’ reinanerawhere:• People consumecontent off the internet atunprecedentedrates• Work mobility andhence Bring Your OwnDevice policies are

becominganorm• E-commerce andmobile commerce hasoutpacedretailstores(sinceseveralyearsago)▪ Organizations andbusinesses,largeandsmall,are highly dependent onappsforperformingroutinetasksaswell as interacting

withpotentialcustomers

Inaphrase,weliveinanerawherethreethingsarenevergoingtobeenoughtogoaround:▪ Content (Written,Videos,Infographics,etc)

▪ InternetSpeed/Bandwidth

▪AppsandSoftware

Asaresult,thereareneverenoughbiddersorserviceproviderstogoconsumingthewishesofclients —mostofwhomwanttogetthejobdoneatshortnotice.

FearOfClosingDoorsOnACareerAsCoder/ProgrammerThisisperhapsthebiggestfear.Workingasafreelancerisoftenseenbynewprogrammersandstudentsasagoodbyetotheircareers.It

isprimarilyfueledbytheperceptionthatthefirstjobaftergraduation,orfirstjobingeneraldefinesyourfutureprospects.Therewasatimewhenfreelancing,andhomeschooling,wereseenasunacceptablemeansandmeasuresofaperson ’ sabilitytocopewiththe

demandsofthemarketplace.Butnolonger.What ’ sthefirstthingthatemployerslookforinacandidate ’ sresumethesedays?

Experience.Period.

Theylookforinternships,additionalcoursework,and

anythingthatwouldprovethatacandidatehadexperiencewithnon-hypothetical(readbookish,andnormallyobsolete)work.Freelancingbuildsaportfolio.Itshowsthatyouhaveworkedwithrealclientshopingforsolutionsfor

currentproblems.Freelancingexperience,andtheportfolioyougettoshowcase,showsyourabilitytohandlediverseclientsandmanageallaspectsofprojects.Whichemploywouldn ’ twantareadymadecandidatefortheirteam?Thenagain,

whichfreelancerintheirrightstate(exceptforthesakeofexpandingtheircircle)wouldwanttooptforacareerwhentheycouldexpandtheirbusiness?

FreelancingYourExpertiseIfyouhavetheskills,thentheonlydifferencebetweenstartingyourownfreelancingbusinessandbeingemployedatafirmisthe “ risk-free-and-fully-paid ”probationperiod:

•Incaseofbecominganemployee,thisperiodwillteachandhoneskillsneededtocompletethetasksassignedtoyou.

▪ Incaseoffreelancing,this period will make abetter project manager,contractor, andprogrammer, plus a

credible authority in yourcircle with a strongportfolioandconnections.

Freelancing is not likeearning a PhD inmathematics. It’s simple, andifyouhave theprogrammingskills, a profitable job (youdon’t get paid remember?)and an enjoyable journey tobuildingyourbrandname.

SuccessfulFreelancingSinceweareadamantinshowinghowpeople(studentsandnewprogrammers)can:• Easily lend their

coding/programming skill-sets to their freelancingefforts

• Honeprogramming/coding,clienthandling, andotherprojectmanagementskills

▪ Dobothof theabovebetter, and get paid better,andgainall thecredit,and

buildaportfolio

Webelievethatthebestwaytounderstandhowtoworkasafreelanceristocomparehowafirmnormallyworkonline.

Step#1SelectingPlatformsAswithyouremployment,thefirststepistoenterthemarketplaceandsearchthevariousorganizationswhereyoucangetthejob.Withfreelancing,thisstepisaboutfindingtherightfreelancingplatformormarketplace.

Someofthetopandcrediblefreelancingplatformsincludethefollowing:•Elance

•oDesk

•Guru

•PeopleperHour

•RentACoder

•GetACoder

▪ Programmer MeetDesigner

Eachplatformhasitsuniquelayout,navigationpane,anddashboardi.e.auniqueworkenvironmentbutallofthemhaveafewcommonfeaturesthatmakeiteasiertoshiftfromoneplatformtothe

other,butsomeaspectsthatremainsimilaracrossallfreelancingplatformsinclude:•WritingProfiles

•Exams

•TheBiddingProcess

▪QueryHandling

So,thefirststepisselecting

theplatformthatbestfitsyourpersonalityandcreatingthefirstprofile.We ’ llstartwithElance,butthisissothatweavoidtheinitialdilemmathatnewfreelancersface:creatingmultipleprofilesatthestart.Honestly,doingthatisthe

perfectrecipefordisaster.Creatingjustone,oratmaxtwoprofiles,ismorethanenoughtogetyourgiggoing.“Whatifyouwanttoexpandintootherplatforms?Won’tyouhavetostartallover

again?”It ’ sagoodthought,butNO,youwon ’ thavetostart

again.Youcansimplyincludealinktoyourportfolioandreviewsonyourfirstprofiletoshowthatyouhavepriorexperienceinthefield.Theruleofthumbforstartingfreelancingistoremainfocused.Thiseliminatesthede-motivatingproblemof “ notgetting

selected ”frommultiplesources.Here ’ syourroadmapfortheprofile:Sticktoone,dedicateyoureffortstocreatingasharpprofile,commiteffortandtimetoeachbid,andthengiveityouralltomeetandexceedclientexpectations.

So,yourfirststep:VisitElanceNow,andJoin!It ’ sFREE!

https://www.elance.com/

It ’ stimetostartwritingyourprofile.VisitElanceNow!

https://www.elance.com/

WritingYourProfileAswithapplyingforanorganization,itisessentialthatyoupresentagoodupfrontcoverletterandresume.Infreelancing,yourprofileisthecoverletterandyourbiddingmessageistheresumethatyouhavetopresenttoeachclient.

OnceyouhaveregisteredanaccountonElance,whichcanbedonebyusingyourexistingsocialmediaprofilesforFacebookorLinkedIn,it ’ stimetocreateyourbrandimagebywritingtheprofile.Onceregistered,youwillfindthatElancehasanautomatic

Wizardthatwillleadyouthroughalltheareasthatneedtobecompleted.Followit,completing,andsavingaseachstepprogresses.Fornow,theprimefocusisonkeepingyourselfgluedto

Elance.Thismeansthatyoushouldleaveworriesaboutcreatinga

website,ablog,orsocialmediaprofilesforyourbrand.Thingsthatyoushouldworryaboutareincludingaprofessionalimageoralogoforyourprofile.Yourphotoshouldbearepresentationofyouasifyouwereappearingforaninterviewwiththe

prospectiveclient.Addthephotoyou ’ rewillingtoaddtoyouractualresume.KeepyourphotoclosetoyourfaceasduringthebiddingprocessElance,andotherfreelancingsites,willdisplayasmallpicturebesidethebid.Soaphotocroppedclosertoyourfacewillstandout.

Next,completethebasicinformation,andavoidspendingtoomuchtimeonoptionalfieldslikethetagline.Youcanchangeitovertime.Leavehourlyratesempty.Thisareadefinesthe

minimumhourlyratethatyou ’ llbeworkingfor,anditcanreduceyourflexibility.Bynotindicatinganhourlyfixedrateyouhavetheoptionofbiddingabitmoreaggressivelyonsomeprojects.Furthermore,incaseyouareabletocompletetasksfaster,hourlyratescouldkillyour

earnings.CompletetheOverview.Onceyouhavebidonaproject(discussedlater),thebuyerislikelytovisityourprofileforfurtherinformation.Thefirstthingthatisvisibleistheoverview:around150wordsthattalkaboutyourskillsandwhat

youcandeliver.✓Talkaboutbenefitstobuyer

✓Talkaboutyourabilitytodothework

✓Talkaboutpriorexperience/work

✓Addacalltoaction

SampleProfile“ Astrongcommitmenttodeliveringafunctional,well-documented,andeasilyreadablecodeallowsmetothoroughlyunderstandandcommunicateyourprojectspecification,andcreateafunctionalcodewithinyourstipulatedtimeline.

Knowinghowacode ’ sfunctionalityandyour

expectationcanevolveduringthecourseofthebuildingprocess,youwillreceivemultiplerevisions.Mycommitmenttodeliveringprojectsonparwithyoursatisfactionmeansthatyourproject

Mysoleconcernistoemploymy skill set to create uniquecodes for your needs. Mybackgroundin[ADD,A,B,C]

allows me to grasp projectspecifications and easilytranslate them into workingcode. My experience inwriting, testing, anddebugging code in [ADDskills, A, B, C] EITHER 1)My work on [ADDexperience or Course, or thecode that you have to show]earned me [Add anyachievement]OR2)Mygoalis to make sure you ’ re

satisfied with your projectand it ’ s delivered on timeandwithinyourbudget. ”Sothen,jotdownyouruniqueofferings,brainstormsomeideas,andustheaboveprofileto:WriteAProfileOf

YourOwn!Next,chooseyourspecialty,

addthecredentials(education,certifications,licenses,etc).ElanceoffersauniqueoptionofVERIFYINGyourcredentials.Useittoboostyourauthoritytotheclient.

TakingExamsMostfreelancingplatformshaveasetofinternalexamsthattestandmarkyourcompetenceforspecificskills.Examplesincludetestswithmultiplelevels(Level1,2,3,etc)e.g.English(U.S,U.K,etc),BasicArithmetic,Programmingmethods,C++,

Javascript,ActionScript,etc.Passingthesetestsearnsyourprofileabadgethatispublicallydisplayedwheneveryoubid.Take,theexams.Mostofthemarefree!

Here ’ syourchallenge:Selecttheteststhatbestrepresentyourexpertise,passthem,andboostyourcredentialsbyaddingcredibilitytoyourbids.

Step#2FindingClients—BiddingOnProjectsThenextthingyouneedtodoissearchthroughjobpostingstofindonesthatarerelevanttoyourfieldofexpertise.Bidding,asyouwillfind,simplyaclickofamouse.

Whatyouwritemakesallthedifference,especiallywhenyoudonothaveascoreofreviewstograntyouleverageincaseyouhavetowriteashortbid.Keepyourproposalsclientcentered.Talkabouttheprojectdescription,

communicatethatyouunderstanditbytellingwhatyouhaveinmind.Askrelevantquestionswhenyouthinkthatapointneedssomeclarification.Thiswilldisplayyourcommitmenttotheprojectaswellasyourempathytowardsunderstandingtheclient ’ s

needsandexpectations.Provethatyouhaveunderstoodthedescription.DON ’ Tuseagenerictemplateforallyourbids.Showthatyouhaveactuallyreadthedescriptionandspenttimeunderstandingit.Whenyouhavealready

donethat,whynotcommunicateit?Explainthesolutionthatyouhaveinmind,theaspectsthatseemedvague,andtheprocessworkflowthatyouwillemploy —inaphrase,showtheclienthowyouhopeto,andwanttocommityourselftotheproject.

Thisnormallyresultsinadditionalcommunicationfromtheclient,whomightaskforsamplework.Forfirst-timers,thiscanprovetobeadauntingtask.Challengeyourself:Gotothedashboardandsearch

throughtheprojects.Nowcreateatleast10biddingproposals,specifictotheprojectdescriptions.NOTE:Attimesitmighttakeadayortwofortheclienttorespond,sointhemeantime,commityourselftofindinggoodprojectsandbidding10ofthemeveryday.

Spendthesparetimeworkingonyoursamplesorwritingcontent,orsurfingthenetfornewerideas!

Step#3CreatingWorkSamplesClientswanttoifyouhavedonesomethingsimilartowhattheyareaskingfor,beforehiringyou.It ’ sonlynatural.Thereareafewsimplewaysofcreatingyourportfolioevenbeforeyou ’ veworkedwithaclient:

•Contributetoanopensourceproject.Tryselectingonprojectsthatarenewbutgainingpopularity.Itiseasierandlesscomplextoworkonthese.Pickabugoraproblemandfixit.•Re-skinanappor

createyourownappanduploadittoyourblog/websiteoranonlinemarketplace.✓Contributearticles/tutorialsonshortfixes,debuggingissues,orworkingwithcode.

Thisiswherecreatingablog

orasimplewebsiteprovesbeneficial.Itcanactasaportalforyourfreelancingwork.Youcansimplypointtheclientstotheworkyou ’ vedoneonyourwebsite,ortotheworkyouhavecontributedontheprojects.

Samplesareessentialtothesuccessofyourbids.Almostalwaystheclientwillaskforsomesampleoftheworkthatyouhavedone.Hence,beforeyoustartbidding,workonsomeworkingsamplesofyourcode.

Step#4Reviews—BuildingAPortfolioAndRepeatClientsOnceyouhavesharedthesampleswiththeclient,youwouldreceivetheadditionaldetailsfortheproject.Thisisthepointwhereyoumustspendasmuchqueriesand

emails,ortimeonSkypeconversationstounderstandwhattheclientisexpecting.Themoreyoucommunicatewiththeclientearlyon,thebetteritbecomestomoveonwiththeproject.Thesimplest,triedandtested,andprofessionalmethodof

buildingreviews,aportfolio,andrepeatclientsistodeliveryourcodeandexplainyourprogress.Thismeanskeepingyourclientintheloopbyshowingsomefunctionalityoftheworkthatyou ’ vedeliveredsofar,whereyou ’ reheaded,theproblemsthatmayhavearisen.

Bykeepingtheclientconstantlyupdatedontheprogressofyourworkandseekingtheirfeedback,youbuildrelations.Asaresult,andifyoudeliversatisfactorycode,youcangetrepeatandreferralclients,andreceivefeedbacksandreviewswhen

youaskforitattheendoftheproject.Ifyouhaveputintheeffort,andcommunicatedittotheclient,youareonyourwaytoreceivinga5starratingandreviewintheend. “ Onyourway ” ,becauseevenattheendoftheprojectyouhaveto

communicatetotheclientwhattheratingandreviewmeansforyou.It ’ syourjobtoremindthem,becausealotofclientshaveurgentdeadlinesandunlessyouremindthemtoleaveafeedback,theyarelikelytoforget.Here ’ sasamplequeryyoucanuseattheend

ofgoodproject:Hi[Name],

[Commentsabouttheproject]I ’ m glad that you liked thecode.Ifthereisanythingelsethat I can be of help with,especially if there isanypart

oftheworkyou ’ renot100%satisfied with. Just let meknowandI ’ llreworkituntilyou have exactly whatyou ’ relookingfor.

[The Review]If there is nofurtherworktobedone,I ’ dreally appreciate it if youcould leavea5star feedbackfor me on Elance. [Reason]The review would be sohelpful for me in securing

furtherwork. [ReiterateYourCommitment]Ifyoufeelanyaspect of the work that wasdeliveredwasn ’ tupto5starstandard, please don ’ thesitate to letmeknow. I ’ lldoeverythingtobringituptothemark.

It has been a pleasureworkingwithyou.

ThankYou.

Regards,Remember,aslongasyoukeepdeliveringoutstandingworktoyourclientsanddisplayingyourprofessionalismandcommitmenttoqualitythroughouttheproject,theyshouldleaveyouthe5starfeedbackyou ’ veaskedfor.

Hereareafewprimersonyourqueries:• Always explainwhatyouhavedone in theworkthatyou’resending.Lettheclientknowoftheprogressthatyouhavemade so far,what you’re working on

now,andhopetodeliverinthenextupdate.

✓ Nevershyawayfromasking for furtherinformation. New comersoften think that askingmoreinformationabouttheproject from the clientmakes them appear less ofanexpertintheirwork.On

the contrary, clients willappreciate yourcommitment tounderstanding their projectneeds. Then again, howelse will you deliver theright code unless you donotknowwhattheclientisexpectingofyou?

Sowriteyourquerieslike

yourentireprojectdependedonit!

Step#5ManagingTimeAndResourcesBeingafreelancerisliberating,butitalsocomeswithsomeresponsibilities.Realizingthemaheadoftimewillsaveyoualotofstress.Hereareafewprimersthatwillkeepyouontrackwhilemanagingyourtime,

resources,andyourhealth.•Treatyourfreelancingworkasastartup.Understandthatasafreelancer,youareanownerofasmallbusiness.ACEOifyoumay.Thismeansthatyouareresponsibleforeverythingfromleadgenerationand

sales(bidding),customersupport(queryhandling),andallstrategicdirectionsforthebusiness(buildingandexpandingaportfolio,establishingyourself,creatinganddeliveringuniquevalueforcustomers,etc).

•Don’tIsolate

Yourself.Youarenotthesolesurvivorofaneconomicapocalypse,butpartofagrowinggroupofpeople.Connectwiththem.Otherfreelancecodersknowthechallengesthatyouarefacingandwillhappily,andempathically,sharetricksthatcanbe

usedtoyourbattles.

•CreateaHealthyworkSchedule.Takebreaks.Freelancingcantakeatollonyournormalworkday.Youhavetheoptionoftakingbreaksasyouseefit,andsetyourownworkinghours.Noonecanholdyou

responsibleforyourwork.Butthiscanleadintoanunhealthylifestyle.Thebestwayoutistocreateahealthyschedule,andnotbecomecagedinyourhouse.Setbreaktimeswhereyoutakeastrollorgoouttogetsomelunch.Avoidtheurgetoworklate

hoursintothenight.Disturbingyourbodyclock(andcircadianrhythms)isjusttherightrecipetobecomeexhausted.

Berealisticwhencommittingtojobs.Don ’ tsimplyjumpateveryopportunityyoureceivei.e.don ’ tbidoneveryproject

thatcomesyourway.Theinitialenthusiasmcanwearoffifyouhavemanysmallerprojectsthatleavenoroomforbigprojectsandopportunities.Agoodruleofthumbistoleaveaquarterofthemonthfreesothatyoucanleaveyourselfsomewriggleroomforhunting

biggerprojects.

CompilingWordsIthasneverbeeneasierforstudentsandnewprogrammerstobecometheirownboss,ortostarttheirownbusiness.Thenagain,therehasneverbeenagreater

needforfreelancingexpertsinthesoftwareindustry.Thisisprimarilybecauseofthepresenceofestablishedsoftwarehousesandbrandsthatchargeexorbitantsumfortheirservices.Asaresult,SMEsandorganizationsareturningtoflexibleoptionsofferedbyprofessional

freelancers.Freelancingoffersstudentsandnewprogrammerslikeyourselftheabilitytoestablishyourselvesasaprofessional,anexpert,andasabusiness.Theexperienceyougainworkingthroughyourprojectswillnotonly

boostyourabilitytounderstandandhandlebiggerprojects,butalsoincreaseyourindustrystatureasanexpertinyourfield.Sogoahead!• Create your Elanceprofile

•Createagreatprofile

• Commit yourself towriting unique bids on atleast10projectsaday

• Communicateextensively and buildrelations

•Dedicateyoureffortstomeetingcustomerneeds

•Askfor5-startreviews

✓Andrepeat

Allthebest!

ThankYouForReadingThisBook.YourFirst$1000BonusReport

ClickHereForInstantAccess

http://yourfirst1000.gr8.com/

Uploadedby.X0RN.{Zer07}[BЯ]

html5 html programming crash -...

Documents