Free Download PDF Books, Introduction To HTML and CSS

Introduction To HTML and CSS

CSS HTML HTML CSS HTML CSS ReadOnline

Summary of Contents

  • Page 1

    http://freepdf-books.com

  • Page 2

    IntroductionToHTML&CSS:LearnToCodeWebsitesLikeAProByDannyAjiniOfClimbNewHeightsLLC.actionURI(http://www.climbnewheights.com/):ClimbNewHeights.comhttp://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 3

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 4

    TableOfContents 7,Chapter1:StartHere 11,Chapter2:UnderstandingHTML 14,Chapter3:UnderstandingCSS 16,Chapter4:WhereToWriteYourCode 20,Chapter5:Browsers 28,Chapter6:HTMLStructure 32,Chapter7:CSSStructure 37,Chapter8:CommonHTMLElements&TheirRules 42,Chapter9:CommonCSSStylesAndTheirRules 48,Chapte...

  • Page 5

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 6

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 7

    Chapter1:StartHere!Iknowwhatyou’rethinking,“Oh,anintroduction…SKIP!”However,I’dadviseyounottoskipthisintroductionbecauseI’mnotgoingtobabbleonaboutmyqualificationsorsomeheartfeltstoryabouthowmyHTML/CSSbookcuredadyingmanofhisailments.Rather,Ijustwishtogivethisbookalittlebitofcontext.Asw...

  • Page 8

    BriefIntroToWebsiteDesignHistoryDisclaimer:Thisbriefhistoryisonlybasedonmyownobservations.Sincethisisn’tessentialtothebookIwon’twasteanytimelookingupdates,gatheringreferencesorfactchecking.You’llsimplyhavetotakethisatfacevalue.Theadventoftheinternetbroughtaboutveryuglywebsites.Originallyweb...

  • Page 9

    WhatIHopeToAccomplishWithThisE-bookItismyhopethatsomeonewhoisunfamiliarwithHTML/CSScanpickupthise-bookanduseittogetasolidunderstandingofcodingawebsitewithHTML&CSS.IwanttocoverallthebasesofHTML/CSSwithoutgoingoverboard.PleasenotethatthissubjectisveryvastandIwillbecoveringafewofthethingsthatare...

  • Page 10

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 11

    Chapter2:UnderstandingHTMLSotheysaythatthedifferencebetweenamasterandanoviceisthatthemasterknowsthetricksofthetrade.It’sthetiny,subtlethingsthatthemasterknowsthatgiveshimtheedgeoverthenovice.Youmaynotknowthis,butanyonewhohaseverusedacomputer(evenonewithoutinternet)hasprobablyusedandmanipulatedH...

  • Page 12

    youcouldcreateinMicrosoftWord.AndmuchlikeMicrosoftwordelements,eachHTMLelementcomespresetwithstyles.Forexampleifyouweretotakeawordandlinkittoawebsite,itbecomesblueandunderlined.Ifyouweretobegintyping,thewordswouldbeginintheupperleftportionofthedocumentusingaTimesNewRomanfontandutilizinga12pointfo...

  • Page 13

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 14

    Chapter3:UnderstandingCSSSoasImentionedaboveCSSstandsforCascadingStyleSheets.It’swhatyouwillbeusingasabeginningwebsitedesigner/developertogiveyourwebsitessomeflavor.It’sthetoolthatyouwillusetotransformapagewhichresemblestheugliestofWorddocumentsintoabeautifulandinteractiveworkofart!AsImention...

  • Page 15

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 16

    Chapter4:WheretoWriteYourCodeBeforewegoanyfurtheronourjourneywehavetodiscusswhatyouwillbeusingtocodethewebsitesthatyoudesign.IpersonallyuseDreamweavertodoallofmycoding.It’snotwhatIpersonallyrecommend.ImostlyuseitbecauseitcamewithAdobeCreativeSuite,somethingthatIpersonallyusebecauseit’srequire...

  • Page 17

    FreeCodeEditorsAlthoughmemorizingcodewillmakeyouanexceptionalwebsitedeveloperthepurposeofthisbookisn’ttodeteryoufromgettingyourfeetwetwithHTML/CSS.ThereforeI’llgiveyouafewoptionsthatyoucanuseifyoudon’thavetheoptiontouseapaidprogram.Ofcoursebythetimeyoureadthise-booktheremaybemoreoptionssodo...

  • Page 18

    WhatIsTheDealWithCodeEditors???Ifyou’recompletelynewtocode.Thenyoumaybeaskingyourself,“howisthecodeeditorthatIuseimportantinanyway?”Basically,thecodeeditorthatyouusecanmakeyourlifeeasier.AndyouyourselfcanmakeyourownlifeeasierbypayingattentiontothetipsthatI’llgiveyouinthechapterabout“sem...

  • Page 19

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 20

    Chapter5:BrowsersIknowyou’reeagertostartlearningaboutwebsitebuildinghowever,thetopicofbrowsersisoneofthemostimportantpiecestothepuzzle.Aninternetbrowserissimplytheportalthatyouchoosetohelpyouviewtheabominationwhichhascometobeknownastheinternet.Andjustastheprogramyouchoosetowriteyourcodecanhelpy...

  • Page 21

    WhyDoBrowsersMatter?Ifyouaregoingtobecodingwebsitesit’simportanttohavemultiplebrowserstotestyourwebsitesin.Noteverybrowserdisplaysthesamefontinthesamewayandsomebrowsershaveslightlydifferentprotocolsfordisplayingcertainobjects.JustasImentionedbeforeabouthowMicrosoftWordhascertainstylesthattheyap...

  • Page 22

    WhatBrowsersToDownloadThebrowsersthatIpersonallyrecommendtodownloadare:InternetExplorerFirefoxChromeIfyouareaWindowsuserandareconcernedaboutnothavingSafari,don’tbe.GoogleChromeisusinganopensourcewebbrowsingsystemcalled“WebKit”whichiswhatSafariuses.KeepthatwordWebKitinthebackofyourheadbecaus...

  • Page 23

    AdvantagesToCertainInternetBrowsersIpersonallycrackopenGoogleChromewheneverIamgoingtobeginaheavysessionofcoding.Figure5.1–Irightclickedonthebrokenimageandgotoinspectelementtoseewhat’swrong.ThisisbecauseGoogleChromehasmoreintuitiveanduserfriendlycodediagnosticcapability.Intheimageaboveyou’ll...

  • Page 24

    OnceIclick“InspectElement”thenthisextremelyhelpful“DeveloperTools”windowpopsup.Thered“x”withthenumberinthecorner,letsmeknowwhenfileswhichthedocumentsaysaresupposedtoaccompanythisfilearemissing.Icanseethattheimageswhicharen’tshowinguparearesultofabrokenpath.AfewthingsthatIwanttoquick...

  • Page 25

    Inallhonesty,whenItriedtoinitializethe3Dviewonmyowncomputerawindowpoppeduplettingmeknowthat3DviewhasfailedandtocheckthetroubleshootingpageonFirefox’swebsite.Isuspectit’sbecauseofmygraphiccard.However,hereisapictureofwhattheFirefox3Dviewlookslike.Figure5.3–The3DviewoptioninFirefoxissupercool...

  • Page 26

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 27

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 28

    Chapter6:HTMLStructureBeforeyoubegintogetacquaintedwithHTMLyouneedtoknowabitaboutthestructureofHTMLelements.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 29

    BeginningAndEndingHTMLTagsAnyelementthatcanbewrappedaroundsomethinghasabeginningtagandanendingtag.Thebeginningtagwillbeencapsulatedwithusing“lessthan”and“greaterthan”symbols(<>)theendingtagwillbeencapsulatedwiththesamesymbolswiththeadditionofaforwardslash(</>).Examples:<bod...

  • Page 30

    SelfContainedHTMLTagsElementsthatareselfcontainedendthemselvesusingaforwardslashlocatedrightbeforetheending“>”symbol.Belowisa“break”tag.Thebreaktagisusedtocauseasentencetogotothenextline,orfreeupsomespaceinyourdocument.ThebreaktagcanbeusedjustliketheenterkeydoeswhentypinginaMicrosoftWo...

  • Page 31

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 32

    Chapter7:CSSStructureCSScanbealittlebitmorecomplicatedbecausetherearemanyCSSdeclarationsthatyoucanmakeandeachdeclarationhasit’sownsetofrules.However,thereisafewthingsthatneverchangewhenitcomestoCSSsoI’llsharethemwithyounowsothatyoucanhaveabetterunderstandingbeforewestartjumpingheadfirstintoth...

  • Page 33

    TargetingAnHTMLElementInordertobegintowriteaCSSdeclarationaboutanyelement,youmustfirsttelltheCSSdocumentwhichelementtotarget.BroadExampleIfyouwantedtotargeteveryinstanceofaparticularHTMLelementyouwouldbeginyourCSSdeclarationwiththenameofthatelement.Examples:body(TargetsthebodyoftheHTMLdocumentand...

  • Page 34

    GivinganHTMLelementanIDisalmostidenticaltogivinganHTMLelementaclass.Except,insteadoftyping“class=‘classname’”yousimplytype“id=‘idname’”.TargetingtheelementwithCSSisalmostidenticalaswell.Except,insteadofputtingaperiodbeforetheidnameyouuseahashmark(#).NestedCSSTargetingTotargeteleme...

  • Page 35

    separatingeachindividualHTMLelementwithacomma.I’malsotargetingtwodifferenttypesofinputs(type=”text”aswellastype=”date”)usingbrackets.Andyoumaynotfullygraspthisyet.However,I’mtargetingEVERYinputwiththetypeequalto“text”EXCEPToneswheretheclassis“s”.AndI’mdoingthisusing“:not(e...

  • Page 36

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 37

    Chapter8:CommonHTMLElements&TheirRulesDivsAdivisessentiallyanHTMLelementwhichisusedtoholdotherobjects.Ibelievethatdivisshortfordivision.Divsareimportantforlayingoutwebsites.Sincetheworddivisnotverydescriptive,HTML5hasspawnednewkindsofdivswithdifferentnames.Thesenew“div-like”elementsarecal...

  • Page 38

    Quicknote:yourcodewillstillbevalidifyouleavethealtattributeblank.However,thisisn’tthebestpractice.Essentiallyitisthealtattributeitselfthatmakestheimagevalidandnotthetextinside.Paragraphs,Spans&BlockquotesAparagraphisexactlythat…aparagraph.Iwillnotethatsomepeopleuseunorthodoxpracticessucha...

  • Page 39

    <li>ListItem2GoesHere</li><li>ListItem3GoesHere</li><li>ListItem4GoesHere</li></ol>OLmeansorderedlistwhileLImeanslistitem.LinksLinksmaketheinternetgoaround.Linksareinline-elements.Tousealinkusethefollowingformat.<ahref=”path”>Text,image,orwhatev...

  • Page 40

    essentiallygivesthetextareaawidthandheighthoweveryoucanlatermanipulatethesedimensionswithCSSifyouwish.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 41

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 42

    Chapter9:CommonCSSStylesAndTheirRulesIwillgointoafewdifferentCSStechniquesingreaterdetaillaterinthebooksofornowI’lljustlistacoupleoftheimportantCSSdeclarationsandtheirrules.ColorThecolorattributealwaysdenotesthecolorofthetext.Tousethecolorattributesimplyusethefollowingformat.Blackisdefaultwheni...

  • Page 43

    BordersTheremaycomeatimewhenyouwanttogivesomethingaborder.Youcanspecifyall4bordersatonceoryoucanspecifyoneborderatatime.(Theremaybealternativewaystospecifytheborderhowever,we’lljustusethebasicsfornow.)border:1pxsolid#ffffff;Tospecifyaborder,beginwiththeborderwidthinpixels,followedbythestyle(opt...

  • Page 44

    Youroptionshereincludeblock,inline,inline-block,aswellasnone.“Display:none;”isforwhenyoudon’twanttodisplayanobjectatall.OverflowTheremightcomeatimewhenyouhaveadivwhichyouhavespecifiedawidthorheightfor,andyouhaveplacedanobjectinsideofthedivwhichextendspasttheboundariesofitscontainingelement....

  • Page 45

    ThingsToRememberTherearehonestlytoomanyCSSdeclarationstomentionhere.You’llhavetolearnmoreasyougoalong.SomeothergreatCSSdeclarationsincludeborder-radiuswhichgivesyouroundedcornersaswellassomeoftheCSS3transitionsandanimationswhicharealittlemoreadvanced.Somethingstorememberare:Youcan’thavemoreth...

  • Page 46

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 47

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 48

    Chapter10:GettingStartedOk,nowthatwe’vegottenafewofthelesserboringfactsoutofthewaywecanbegintogetourhandsdirtyabit.Anyonecanreadabookaboutcodingawebsitehowever,it’snotuntilyou’vetakenthatknowledgeandbegantoapplyitthatyourjourneyactuallybegins.http://cncmanual.com/ |||||||||||||||||||||||...

  • Page 49

    TheMockupIbegineachwebsitethatIbuildwithamockup.AmockupisessentiallyaPhotoshopdocumentofwhatthehomepageofyourwebsiteisgoingtolooklike.Figure10.1–BelowisamockupIcreatedforafriend’swebsite.AsyoucanseeinFigure10.1thisisanexampleofamockup.It’sawebsitedesignthatIwasmessingaroundwithforafriendwho...

  • Page 50

    SettingUpYourWebsiteFolderI’mgoingtobehonesthere.Whenitcomestobuildingawebsite,theskyisthelimit.Youdon’thavetoformatthefolderthatholdsyourwebsiteEXACTLYasIsay.Youdon’thavetoformatyourcodethewaythatyouseeinmyexamples.However,ifyoukeepyourHTMLdocumentscleanandeasytounderstand.Ifyoukeepyourfol...

  • Page 51

    SettingUpYourHTML&CSSDocumentsOnceyou’rereadytobegin,openupyourcodeeditorofyourchoiceandcreatetwodocuments.Thefirstonewillbenamedindex.htmlandthesecondonewillbenamedstyle.css.WhenitcomestoHTML,the“index”usuallydenotesthe“homepage”andwhenyouuploadHTMLtoaservertheserverwillservetheind...

  • Page 52

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 53

    <!DOCTYPEhtml><htmllang=“en”><head><metacharset=“utf-8”><title>HereIsWhereYouPutTheTitleOfYourWebsite</title><!—[ifltIE9]><scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]—></head>&l...

  • Page 54

    <metacharset=“utf-8”><title>HereIsWhereYouPutTheTitleOfYourWebsite</title><linkhref=“css/style.css”rel=“stylesheet”type=“text/css”/><!—[ifltIE9]><scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]—...

  • Page 55

    BackgroundsIwasn’tsureinitiallyhowtostructurethise-book.However,I’verealizedthatthebestwaytogoaboutteachingmyknowledgeofHTML/CSSwastogothroughsomeofthemostusefulpropertiesanddroptinymorselsofwisdomalongtheway.IknowImentionedthatyoushouldstarteachwebsiteoffwithamockup.However,inthiscasesinceyo...

  • Page 56

    TiledBackgroundsOneofthemostpopularbackgroundoptionsisyourstandardtiledbackground.OneofmyfavoritewebsitesforgettingcoolbackgroundsformyprojectsisactionURI(http://www.subtletextures.com/):www.subtletepatterns.com,gothereanddownloadabackgroundofyourchoiceandsaveitinyourimagesfolder.Ichoosetheveryfi...

  • Page 57

    Ofcourseyoushouldchange“images”tothetitleofyourimagesfolderifyouchosetonameyourfolderdifferently,aswellaschangethenameofyouractualimagefiletomatchthefileyouhavechosen.Aboveistheresultofmytiledbackground.AsImentionedbeforewithHTMLelementsallhavingdefaultstylesappliedtothem,CSSstyleshavedefault...

  • Page 58

    <scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>BecausetheJavascriptfileaboveisnotrelativetoyourwebsiteandislocatedonit’sownurl,youwillneedtodeclarethepathbeginningwiththeurl.Simplyput,thepathwillneedtobedenotedbeginningwith“http://www.example.com/the-...

  • Page 59

    GradientFun!Ok,asImentionedabove,backgroundimagesaretiledunlessyouspecifyotherwise.Figure10.3–Belowaretwogradientexamples.Ontheleftisagradienttiledonthey-axisandontherightisagradienttiledonthex-axis.Youcanmakealineargradientinoneoftwoways.Iusedonlyasimpleblacktowhitegradienttoillustratemypoint....

  • Page 60

    Idecidedtouseblackandblueformine.Saveyourimageinyourimagesfolderandbesuretorememberthenameandtheextension.Gotoyourstylesheetandtype:body{background-image:url(../images/gradient.png);background-repeat:repeat-x;}Obviouslyreplace“gradient.png”withyourfilenameandextension.Thisistheresult…Figure...

  • Page 61

    Wedeclaredabackgroundimageandtoldittotileonthex-axis.Itdid,howeverthedefaultforthebackgroundisstillwhiteandthereforethereiswhiteshowingbelowwheretheimagewastiled.Inordertofixthiswe’llhavetoalsospecifyabackgroundcoloralongwiththebackgroundimagesothegradientwilllookfluid.Let’suseourPhotoshopeye...

  • Page 62

    Andourgradientisnowfixed!Usingtheabovelogicwecancreatealefttorightgradientbyfollowingthesamesteps.Exceptinthiscaseweuseanimagethatis1pixeltalland“X”pixelswide.Andinsteadofsaying“background-repeat:repeat-x;”wechangeitto“background-repeat:repeat-y”.Notonlydowehavecontroloverhowthebackgr...

  • Page 63

    body{background-image:url(../images/gradientexample.png);background-repeat:repeat-y;background-color:#00aeef;background-position:right;}Ifyou’reworriedaboutmemorizingeachCSSdeclaration,don’t.EachofthesethingscanbeGoogledatalaterdateifyouforget.Themostimportantthingisthatyouunderstandtheunderl...

  • Page 64

    RadialGradients&Image-lessGradientsThefollowinggradientoptionshaveonlybeenavailablerecently.HTML5andCSS3havebroughtalongmany,extremelycoolfeaturesthatwereonceonlyavailableusingJavascriptorextremelyimage-heavysolutions.However,nowwehavetheabilitytocreateradialgradientsandimage-lessgradientsusi...

  • Page 65

    Non-repeatingBackgroundImagesAboveI’vementionedafewtechniquesforcreatingbackgroundeffects.However,theremaycomeatimewhenyouwantanelementtohavejustonepictureasit’sbackground.Youmaywantthepicturetobefeaturedinthebottomrightcorner.Oryoumaywantaheadingtohaveabackgroundimagejusttotheleftofthetext.I...

  • Page 66

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 67

    Chapter11:PreparingImagesForTheInternetSohopefullyifyou’rereadingthisbookyouhavealittlebitofknowledgeofgraphicdesign.Andhopefullyyouhavesometypeofimageeditingsoftware.I’llbeusingPhotoshoptoshowyouhowtoprepareimagesfortheinternet.Thisisextremelyhandytoknowandisnormallysomethingthatyouwouldlear...

  • Page 68

    72DPIIfyou’reagraphicdesignerorcomefromaprintbackgroundthanyoumaybefamiliarwithimageresolution.Typically,whenworkingwithimagesthatarebeingpreparedforprintthestandardresolutionis300dpi.However,whenitcomestotheinternetmostimagesare72dpi.Insomerareinstancesyoumayencounterpictureswithresolutionswhi...

  • Page 69

    MostCommonImageExtensionsThemostcommonimageextensionsthatyouwilldealwithwhenitcomestocreating(pixelbased)imagesforthewebare.jpg,.gifand.png.Ofcourseyoualsohave.svg’swhichare“ScalableVectorGraphics”howeverwewon’tbedealingwiththoseforthetimebeing.Eachoftheseextensionshavetheiradvantagesandd...

  • Page 70

    Itookthissameimageabove(itis1920x1080pixelsthisisverylargeforinternetpictures)andusingthe“SaveForWebAndDevices”menuinPhotoshopfiguredouthowlongthissameimagewouldtaketoloadusingthemostcommonfileextensions.Figure11.2–Belowyoucanseeapreviewoftheloadtimeonthepuppypictureusingvariousimageextensi...

  • Page 71

    Asyoucansee,whentryingtosavetheaboveimageasa.jpgat100%imagequalitytheimagewilltakemorethantwicetheamountoftimeitwouldhavetakenthe.gifand.pngtoload.Nottomentionthefactthatthe.gifandthe.pngwillhavetransparency.Alsonottomentionthefactthatififyoudidtrytosavetheaboveimageasa.jpgandyoutriedtolowerthequ...

  • Page 72

    ofacoloredbackground.WhenIlookedcloserInoticedthatthereweretinypixelsaroundtheedgeofthetransparentimagewhichweren’tquiteright.Inordertoillustratetheproblem,I’llcreateawebpagewitharedbackground,savetheimageaboveasa.pngaswellasa.gifandplacetheimageonthepagetoshowyoutheissueIwashaving.Figure11.5...

  • Page 73

    canseetheimagenowdoesn’thavethosepeskypixelsthereanymore!Butwhatcausedthis?Inallhonesty,thiswasaproblemwhicheffectedmeforawhilewhenIfirststartedwebdesign.AndevenwhenIaskedmyteacheratthetimeheseemedtobeofnohelp.WhatI’vefoundisthatthiseffectiscausedbecauseofwhatisknownas“anti-aliased”pixels...

  • Page 74

    TinyPNGisgreatforwhenyouhavea.jpgqualityimagethatyoustillwanttohavesuperiortransparency.Thecarintheabovewebsiteisfullytransparent,includingtheshadowthecariscastingaswellasthelightrayscomingfrombehindthecar.Savingatransparentimagelikethiswillcausetheimagetotakealongtimetoload.However,withimagecomp...

  • Page 75

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 76

    Chapter12:ManipulatingPlacementOfHTMLObjectsKnowinghowtoplaceobjectswhereyouwantthemisextremelyimportantwhenitcomestodesigningawebsitethewayyouwantittolook.Inordertodothishowever,youmustfirstknowalittlebitabouthowHTMLobjectsbehave.HTMLobjectsareeitherconsideredtobe“inline”or“block”levelel...

  • Page 77

    Inlinevs.BlockLevelElementsInordertoillustratethedifferencebetweenaninlineelementandablocklevelelementI’llbecreatingdifferentHTMLelementsonablankpageandtheninspectingthemusingGoogleChrome’selementinspectoption.Figure12.1–Iclicked“inspectelement”ontheHeading1tagatthetopofthepagetoshowyou...

  • Page 78

    Theverylastlineofthedocumentincludes3“span”tags.Aspanisatypebasedelementwhichholdslesssignificance/importancethanaparagraphwhichcouldbeconsideredthespan’solderbrother.AsyoucanseeasIinspectedthespanelement,theelementitselftakesuponlyasmuchspaceasitneedsto.Thisisthesamewithallinlineelements.T...

  • Page 79

    Inline-blockElementsInline-blockelementsareinlineelementsthathaveawidthandaheight,ratherthanonlytakingupasmuchspaceasnecessary.Thisissomethingthatisencounteredrarelybutisstillgreattoknowandanothertoolinyourarsenal.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| ...

  • Page 80

    “Floating”ElementsBeforewegettoodeepintothisI’llshowyoubasicallyhowpeoplenormallysetupwebsites.IwilldosobytakingamockupwhichI’vealreadydoneandusingayellowoutlinstoshowthedifferentdividingboxeswhichIusedtocreatethelayout.Inmodernwebsitedevelopmentpeopleusewhatisknownasa“div”toseparatea...

  • Page 81

    AsyoucanseetheimageontherightistheexactsamecodewiththeCSSremoved.SothistellsusisthatwithCSSweareabletolayoutobjectsthewaywewantthem.Ifyouwanttwoblocklevelelementstositsidebysidethentheyneedto:1. Eachelementneedstohaveaspecifiedwidth.Blocklevelelementsusuallytakeupasmuchroomastheycanhorizontallyso...

  • Page 82

    “Clearing”ElementsFloatsandclearsgohandinhand.Let’ssaythatyouhavetwofloatingobjectsinsideofacontainerobject.UsingCSSyouhavespecifiedaredbackgroundforthecontainerelementandthetwofloatingobjectsdon’thaveanykindofbackground.Thecontainerobjectiswrappedaroundbothobjectssowhatwillthebackgroundo...

  • Page 83

    Asyoucanseethecontainerisnotwrappingaroundthetwodiv’swhichareinsideofit.ThereasonforthisisbecausetheHTMLdocumentdoesn’treallyseefloatingobjectsasiftheywerethere.It’salittlehardtoexplainsolet’sputablocklevelelementafterourtwofloatingdivsandseewhathappens.Figure12.4–It’sbeginningtolooka...

  • Page 84

    Theclearpropertyhasafewdifferentoptions.Youcaneitherclearobjectstotheleft,totheright,orboth.Now,letmegivethatH1tagaclassofclear.AndthenIcanuseCSStospecifythatanyelementwithaclassofclearshouldclear“both”.AboveistheHTMLaswellastheCSSthat’sinvolved.Andbelowistheresult.Asyoucansee,floatsandclea...

  • Page 85

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 86

    Chapter13:MarginsAndPaddingMarginsandpaddingarebothextremelypowerfultools.Bothofwhichdoalmostthesamethingwithafewminordifferences.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 87

    MarginsAmarginworkstobasicallyserveasabarrier,pushingobjectsawayfromotherobjects.Ifyousetamarginof10pixelstoanobjectthatmeansthatnootherHTMLelementcangetwithin10pixelsofthatelement.Whilemarginsdon’taddtotheactualsizeoftheelement,theydosortofaddsizetothecoverageoftheelement.Forexample,ifyouweret...

  • Page 88

    PaddingPaddingisalmostidenticaltomargins,exceptpaddingworksinsidetheelement.Ifyouweretospecifya10pixelpaddingtoanelement,theelementwouldgrow10pixelsoneachside.Also,noelementwouldbeabletogetwithin10pixelsoftheedgeoftheelement.Intheaboveexampleyoucanseethatthetextinsideeachdivactuallytouchestheedge...

  • Page 89

    Youcangoalittlefurtherandsimplifyit.Youcangoevenfurthertosimplifyit.Andofcourseyouhavethefurthestsimplification.NegativeMarginsTheremaycomeatimewhenyouwanttopositionanobjectandyoufindnobetteralternative.Thisiswhenyoucanusenegativemargins.BeforeIevenmentionhoworwhyyouwouldwanttousethemI’llsaytha...

  • Page 90

    I’veusedanegativemargininthepastwhendealingwithcodethatI’musinginmywebsitethatIhaven’twritten.AndforsomereasonIcan’tgetaparticularobjecttobewhereIwantittobeusingconventionalmeans.That’swhenI’llbegintostartmessingwithanegativemargininordertopushanobjecttogowhereIwantittogo.CenteringObj...

  • Page 91

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 92

    Chapter14:OtherTypesOfPositioningTechniquesInallhonesty,Itrytousefloatstolayoutmostofmywebsites.However,therearesomeexceptionsthatpopupfromtimetotime.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 93

    RelativePositioningThistypeofpositioningisrelativetotheobject’soriginalposition.Basicallyafteryou’velaidoutsomeobjectsonthepage.Youmayfindthataparticularobjectisnotexactlywhereitneedstobe.Usingrelativepositioning,yousimplyspecifythatthepositionofthatelementis“position:relative;”andthenyou...

  • Page 94

    AbsolutePositioningAbsolutepositioningisabsolute,howeveritisbasedonanyparentelements.Forinstanceifyouwanttopositionanobject“absolutely”andthatobjectwasinsideofadiv.Thepositionyouspecifywillberelativetothatdiv.IftheobjectisnotwrappedinotherelementsitwillberelativetotheHTMLpageitself.Absolutely...

  • Page 95

    FixedPositioningFixedpositioningisrelativetothebrowserwindowitself.Inotherwordswhenyouopenyourwebbrowser,dependingonyourscreensize,ifthebrowserisminimizedorfullscreen,etc.Asyouscrollafixedpositionelementwon’tmove.I’veusedthisinthepastfortimeswhenIwantedthebackgroundofthepagetobeafixedimageand...

  • Page 96

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 97

    Chapter15:Fonts,Fonts,Fonts!Alright,soifyouhaveabackgroundingraphicdesignyouwouldknowthataseriffontisonewithtinypointythingsatthetipsoftheletter.Seriffontsaregreatforprintbecausetheserifsseemtoblendthewordstogetherandaresaidtomakeiteasierforthereader.However,ontheinternet,whereeverythingismadeupo...

  • Page 98

    HowDeclaringFontsWorksSo,keepinmindthatTimesNewRoman(orequivalent)isthedefaultfontunlessspecifiedotherwise.ThismeansthatunlessyouwanttouseTimesNewRomanyou’lldefinitelyneedtospecifywhichfontyou’dliketouse.Fontsgetspecifiedbyfamily.TospecifywhichfontsyouwanttouseyoustartoffwiththeCSSdeclaration...

  • Page 99

    OtherFontMethodsObviously,noteveryonewillwanttouse“normal”fontsfortheirwebdesignprojects.Somepeoplewillwanttousespecialfontsbecauseitfitsinwiththeirdesign,orcompanybranding,etc.Thereareafewotheroptionsforcreatingwebsitesusingspecialfonts.OfwhichI’llbecoveringtheonethatIusemostoften.GoogleFo...

  • Page 100

    Asyoucanseeaboveonceyou’vechosenthefont,youcanchoosethefontweightsyouwishtouse.ThenGoogleupdatesthePageLoadTooltoletyouknowhowmuchthefontswilleffectpageloadtime.Onceyou’redone,scrolldowntosee…I’mprettysureI’vementionedthisbutdifferentbrowsersrendertheEXACTsamefontDIFFERENTLY.Thisisimpor...

  • Page 101

    Aboveyou’llseeOpenSans,renderedinGoogleChrome,FirefoxaswellasInternetExplorer.Asyoucanseeeachfontappearsslightlydifferent.EachlineoftextisadifferentlengtheventhougheachlinecontainstheEXACTsamecharacters.Andthefunniestthing…GoogleChromeisn’tthebestatdisplayingit’sownfont.InternetExplorer,t...

  • Page 102

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 103

    Chapter16:SemanticCodeSemanticcodeisbasicallytheactofmakingsurethatthecodethatyouwriteiseasilyunderstandabletoanyonewhowantstoworkwithit.Inthepast(somepeopleincludingmyselfstillusethistoday),peoplewouldlayouttheirwebsitesusingdivsandgivethedivsclassesaccordingtotheirfunction.Thedivswouldbenamedhe...

  • Page 104

    WritingSemanticCodeWhencodingwebsites,Irecommendthatyoualwayskeeptheconceptofsemanticcodeinthebackofyourmind.Youneverknowwhenawebsitethatyouhaveworkedoninthepastmayneedtobeworkedonbysomeoneelse.Inordertomakesurethatyourwebsitesareeasilyunderstandablemakesureto:Uselogicalnameswhengivingclassesandi...

  • Page 105

    TheCSScommentsarehighlightedintheabovepicture.IthinkCSScommentsaregreatwhenyouhaveaspecificsectionofyourwebsitethatalargechunkofCSSstylescorrespondto.YoucanplaceaCSScommentatthebeginningandendofthechunkofcodetoletothersknowwhatthestylesweremeantfor.http://cncmanual.com/ |||||||||||||||||||||||...

  • Page 106

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 107

    Chapter17:UsingColorInmostcaseswhenyouneedtospecifyacolor,youwillbeusingahexadecimalsystem.Youcanseetheformatforspecifyingthesecolorsbelow.Hexadecimalcolors,arebasedoffof6numbers/lettersasthenamesuggests.Thecharactersusedinhexadecimalcolorsrangefroma-zand0-9.Smallernumbersindicatedarkercolorswhil...

  • Page 108

    HexadecimalColorUsageOneofthemostcommonusesofthishexadecimalcolorcodeiswhenyouarespecifyingafontcolor.YoucandothisbyusingtheCSSdeclaration(color:#000000;)where#000000isthecolorofyourchoice.Otherusesforspecifyingcolorcancomeinhandywhenspecifyingbackgroundcolor(background-color:#000000).Aswellaswhe...

  • Page 109

    RGBColorCodeSometimes,youwillneedtospecifycolorusingaRGBcolorsystem.Theseinstancesoccurmuchlessfrequentlythanthehexadecimalsystem.InstanceswhereyouwouldusethishappenmostlywithnewCSS3declarationssuchaswhenspecifyingopacity,youneedtousetheRGBacodefollowedbytheopacityusingadecimalsystem.Orwhenspecif...

  • Page 110

    Opacity:RGBAColorCodeWithHTML5andCSS3wenowhaveoptionsfordeclaringopacity.RGBAisessentiallythesamedeclarationasRBGhoweverthereisonemoreobjectthatgetsdeclaredandthat’stheopacity.Theopacitylevelgoesfrom0.0–0.1.0.0being0percentand1.0being100percent.Theformatlookslikethis.http://cncmanual.com/ ...

  • Page 111

    SpecifyingColorByNameRecently,youhavebeenabletospecifycolorsbyname.However,thisisfairlynewtoCSS3andIhaven’tgottenusedtousingit,norhaveIusedit.Correction,Iuseitonlywhenspecifyingacoloras“transparent”(AKAno-color).Checkitoutandgetcomfortablewithitifyouwish!AsImentionedearlier,there’smoretha...

  • Page 112

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 113

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 114

    Chapter18:CSSSpritesThemoreimagesyouuseaswellasthesizeoftheimagesmakesforaslowloadingwebsite.Inordertocombatthisphenomena,somepeopleutilizeaconceptknownasCSSsprites.ACSSspriteiswhenyouhavemultipleimagesinoneimage.Soratherthanloadingabunchoftinyimagesthebrowserhastoload1slightlylargerimagewhichres...

  • Page 115

    UsingCSSSpritesTouseaCSSspriteyouneedtospecifyhowtallandwidetheimagewillbethenyoumustspecifythebackgroundimageplusthecoordinates(fromtheleftaswellastopoftheimage).a.social{height:65px;width:65px;display:block;float:left;margin:05px10px0;}Asyoucanseeabove,IgavethelinkswhichwillbemysocialmediaCSSsp...

  • Page 116

    }AboveisthehoverstatefortheblackFacebookiconaswellasthewhiteFacebookicon.Imadethegraphicsothatbothwhiteandblacksocialmediaiconswouldhavearedhoverstate,whichiswhybothoftheseusethesamebackgroundimageandCSSspritecoordinates.Asyoucanseeabove,theredhoverstateis0pixelsfromtheleftand130pixelsfromthetop....

  • Page 117

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 118

    Chapter19:ElementStatesInteractiveelementssuchaslinksandinputs(searchbars,textboxes,etc)havewhatareknownasdifferent“states”.Becauseofthis,youareabletostylethe“state”ofeachelementusingCSS.BeforeIconfuseyouanyfurtherthestatesI’mreferringtoare:ActiveHoverFocusVisitedFigure19.1–Whenyouwri...

  • Page 119

    ActiveActivereferstoanactivelink.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 120

    HoverHoverreferstoalinkorobjectthatisbeinghoveredoverwiththecursor.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 121

    FocusFocusreferstoaninputelementwhichiscurrentlyactive.Forexamplewhenyou’refillingoutaformandyouhitthetabbutton.Thenextformfieldtogettheblinkingcursorinitisthefieldthathas“focus”.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://...

  • Page 122

    VisitedVisitedreferstoalinkthatyoupreviouslyvisited.StylingElementStatesInordertostyletheseelementstatesyousimplyneedtotargettheHTMLelementusingeitheraclass,idorothertechniquefollowedbyacolonandtheelementstate.AnexampleofthiswouldbefromtheCSSspritechapterwhereIspecifiedtheportionoftheimagetodispl...

  • Page 123

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 124

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 125

    Chapter20:HandyThingsToConsiderThereareafewCSSstyleswhichmakeitintoeverystylesheetthatIwriteforanumberofreasons.We’llgooverthosenow.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 126

    HandyInternetExplorerStyleWhenyouwrapanimagewithalink,FirefoxandGoogleChromedon’thaveanissuewiththis.However,forsomereason,olderversionsofInternetExplorerabsolutelyLOVEtoplaceanuglyblueborderaroundallimageswrappedinlinks.Figure20.1–OlderversionsofInternetExplorerusedtoplaceanuglyblueborderaro...

  • Page 127

    GlobalResetsSoasImentionedearlier,eachHTMLelementhasadefaultstyleattachedtoit.Differentbrowsershaveabitofleewaywhendecidinghoweachelementshouldbedisplayed.ForthisreasonmanypeoplelinktoaCSSstylesheetknownasa“reset”.Thisstylesheetbasicallystyleseachelementinawaywhichisuniformacrossallmodernbrow...

  • Page 128

    DefaultLinkHoverStylesWhenyoubegintogetfancywithyourlinkstyling.Don’tforgettostylethe“hover”state.Oftentimesyou’llfinishmakingalinklooklikeasupercoolbuttonandthenyou’llgototestitoutandsay…”ohcrap,whenIhoveroverthisbuttonthetextturnsblueandget’sanunderline”.Tocombatthismakesureyo...

  • Page 129

    DefaultFontBydefault,thefontwillbeTimesNewRoman(orMacequivalent).Togetaroundthisyoucanspecifythedefaultfontofyourchoiceatthetopofyourstylesheetbytargetingthe“body”withthefont-familyofyourchoice.body{font-family:Arial,Helvetica,Sans-serif;}http://cncmanual.com/ |||||||||||||||||||||||||||||...

  • Page 130

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 131

    Chapter21:Flash,Javascript&CSSAnimationsInthepast,theonlywaytoutilizesimpleandevensomecomplexanimationswastouseeitherFlashorJavascript.However,withtheadventofCSS3,nowanimationscanbedoneusingCSSalone!ThisisgreatnewsbecauseAppleproductshateflashandsomebrowsers(especiallyInternetExplorer)tendtob...

  • Page 132

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 133

    Chapter22:Validation&TroubleshootingTherecomesatimeineverywebdesignerslifewhentheyhaveabsolutelynoideawhytheircodeisn’tworking.LuckilyIhaveafewdifferentsolutionsforyou.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-boo...

  • Page 134

    DeveloperToolsOneofthefirstthingsthatIdowhenfacedwithproblemistousedevelopertoolsinthebrowserthatI’mviewingthewebsitein.Prettymucheverymodernbrowserisequippedwithdevelopertoolstohelpyoufigureoutyourcode.GoogleChromehappenstobemyfavoritebecauseyouareabletoedittheHTMLandCSSdirectlyinthedevelopert...

  • Page 135

    W3CValidatorThesecondwaytodiagnoseyourHTML/CSSistovalidateit.W3CstandsforWorldWideWebConsortiumandallHTMLhasstandards.Whenyouarehavingaparticularlydifficulttimewithyourcodeithelpstovalidatethecodeandseeifitthrowsanyerrors.Sometimesyourcodeisn’tbehavingproperlybecauseitisinvalid.Simplygotoaction...

  • Page 136

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 137

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 138

    Chapter23:MinifiedHTML/CSSUpuntilthispoint,I’vegivenyouatonofinformationonwritingcodeaswellastheabilitytoinspectotherpeoplescodeusingwebbrowserdevelopertools.Ifeltthatitmaybenecessarytoincludealittletid-bitonminifiedHTML/CSS.AsImentionedearlier,theformattingofyourHTML/CSSismostlyforyouandotherd...

  • Page 139

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 140

    Chapter24:GridSystemsIwantedtobrieflytouchongridsystemsbecausewhenIfirststartedoutIusedtolovethisgridsystemknownasthe960gridsystem.Myveryfirstwebsiteswereall1,000pixelswideandIusedtohavetousemybestjudgmenttocomeupwithwidthsforitemsinmylayouts.ForexampleifIwasdoingatwocolumnlayout,Iwouldprobablyus...

  • Page 141

    WhyGridSystems?ThereasonwhyI’mmentioninggridsystemsisfor2reasons:1. Gridsystemsmakeiteasierforthewebsitedesignerforanumberofreasons.TheynormallycomewithaPhotoshopdocumentbasedonthedimensionsofthegridsothatyoucanlayoutwebsiteswitheaseandnothavetoworryasmuchaboutthedimensionsbecausethey’realrea...

  • Page 142

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 143

    Chapter25:ResponsiveWebDesignOnceyouhaveasolidgraspongeneralwebsitedesign,responsivewebsitedesignwillbeeasyforyoutopickup.Irecommendmessingaroundwithjustpageswhichdon’trespondtothewidthofthebrowserwindowbeforeyoutrytoincorporateanyresponsivewebdesigntechniquesinyourarsenalhowever.But,Iwantyouto...

  • Page 144

    TheViewportOnedifferencebetweenstaticandresponsivewebsitedesignisthefactthatwithresponsivedesignyouneedtodesignatethatthewidthofthescreenshouldbethewidthofthewebsite.Youdothisbyaddingadeclarationtotheheadofthedocument.Alsointhisdeclarationyoucanspecifyiftheusercanzoominaswellashowmuchtheycanzoom....

  • Page 145

    SpecifyingWidthsInstaticwebsitedesign,whenwecreatea2columnlayout,wethinkofhowwidewewantourcolumnstobeinpixelsandcreatethem.However,whenitcomestoresponsivedesign,staticwidthsdon’tcutit.Whenyouwantthewidthsofobjectstochangewiththewidthofthebrowserwindowit’simperativetodesignatewidthsinpercentag...

  • Page 146

    ResponsiveImagesThewidthofyourimagesisalsoimportantbecauseasthescreengetssmalleryourimagesobviouslycan’tbefullresolutionorelseyourenduserwillhavetoscrollontheirphonetoseetheentirepicture.Toalleviatethisyouneedtospecifyawidthormaximumwidthof100%orless.Theheightcanbeautoregulatingbysimplyspecifyi...

  • Page 147

    ResponsiveTypeObviouslywhenyourscreeniswideallHeading1elementscanbelarge,howeverwhenyouviewthesamewebsiteonasmallerscreenthatheadingwillmostlikelytakeuptheentirescreen.Sincethisisn’tthemostaestheticwaytobuildawebsite,somepeopleliketospecifytheirfontsizesinem’sratherthanpixels.Iforonedon’tli...

  • Page 148

    ResponsiveNavigationObviouslywhenyourscreenreachesapointbelow1,000pixelsyoucan’thaveawidenavigationbaranymore.Atsomepointthewidthofthebrowserwillbetoonarrowtosupportyournavigationbar.However,don’tfearbecausethereareavarietyofresponsivenavigationsolutionstochoosefrom.AllyouhavetodoisGoogleit!h...

  • Page 149

    BreakPoints&MediaQueriesThesenexttwotopicsgohandinhand.Iwillalsomentionthatifyou’regoingtobedoingresponsivewebdesignyouNEEDtodownloadaresolutionplugin.Thatis,apluginthattellsyouthewidthofthebrowserwindowatanygiventime.Thereasonforthisiswhenyou’redealingwitharesponsivewebsite,asyoumaketheb...

  • Page 150

    willbegintotakeeffectandtheCSSstylesthatpertaintowiderscreensfallback.IfyouencounteraparticularlydifficultCSSstylethatdoesn’ttakeeffectandyou’vetriedeverythinganddoneyour“developertools”research,thanyoucanadd“!important”justbeforethesemi-colonoftheCSSstyledeclaration.“!important”g...

  • Page 151

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 152

    Chapter26:TheFaviconTheicingonthecaketoyourwebsiteisthefavicon.Thatisthelittle16x16pixelimagethatisassociatedwithyourwebsiteandgetssavedwiththetitleofyourwebsitewhensomeoneaddsyoursitetotheirfavorites.Tocreateafavicon,simplycreatea16x16pixeldocumentinPhotoshoportheimageeditingsoftwareofyourchoice...

  • Page 153

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 154

    http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-books.com

  • Page 155

    Conclusion&NextStepsIhopeyou’veenjoyedmye-book.IsincerelyhopethatI’vegivenyouasolidfoundationofknowledgetobuildupon.Goingforward,therearesomeamazingresourcesonlineforlearningaboutHTML,CSSaswellasJavascript.Oneofmyfavoritewebsites,whereIlearnedamajorityofmycodingknowledgewasawebsitecallact...

Free CSS Books, CSS Book Pdf, CSS Pdf Books, CSS Pdf Books Download, CSS Pdf Books Free Download, Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download,