handsyoutubemp3mp4

AdvancedHTML5andCSS3Specialist:CIWWebandMobileDesignSeriesStudentGuideCCL02-CDHTCS-CK-1405version1.
0rd042214AdvancedHTML5andCSS3SpecialistStudentGuideChiefExecutiveOfficerBarryFingerhutVicePresident,Operations&DevelopmentToddHopkinsSeniorContentDeveloperKennethA.
KozakisManagingEditorSusanM.
LaneEditorSarahSkodakProjectManager/PublisherTinaStrongCustomerServiceCertificationPartners,LLC1230W.
WashingtonSt.
,Ste.
201Tempe,AZ85281(602)275-7700Copyright2014,Allrightsreserved.
AdvancedHTML5andCSS3SpecialistDeveloperPatrickT.
LaneContributorsJamesStanger,Ph.
D.
,SadieHebert,JasonHebertandSusanM.
LaneEditorSusanM.
LaneProjectManager/PublisherTinaStrongTrademarksCertificationPartnersisatrademarkofCertificationPartners,LLC.
Allproductnamesandservicesidentifiedthroughoutthisbookaretrademarksorregisteredtrademarksoftheirrespectivecompanies.
Theyareusedthroughoutthisbookineditorialfashiononly.
Nosuchuse,ortheuseofanytradename,isintendedtoconveyendorsementorotheraffiliationwiththebook.
Copyrightsofanyscreencapturesinthisbookarethepropertyofthesoftware'smanufacturer.
DisclaimerCertificationPartners,LLC,makesagenuineattempttoensuretheaccuracyandqualityofthecontentdescribedherein;however,CertificationPartnersmakesnowarranty,expressorimplied,withrespecttothequality,reliability,accuracy,orfreedomfromerrorofthisdocumentortheproductsitdescribes.
CertificationPartnersmakesnorepresentationorwarrantywithrespecttothecontentshereofandspecificallydisclaimsanyimpliedwarrantiesoffitnessforanyparticularpurpose.
CertificationPartnersdisclaimsallliabilityforanydirect,indirect,incidentalorconsequential,specialorexemplarydamagesresultingfromtheuseoftheinformationinthisdocumentorfromtheuseofanyproductsdescribedinthisdocument.
MentionofanyproductororganizationdoesnotconstituteanendorsementbyCertificationPartnersofthatproductorcorporation.
Datausedinexamplesandlabsisintendedtobefictionalevenifactualdataisusedoraccessed.
Anyresemblanceto,oruseofrealpersonsororganizationsshouldbetreatedasentirelycoincidental.
CertificationPartnersmakeseveryefforttoensuretheaccuracyofURLsreferencedinallitsmaterial,butcannotguaranteethatallURLswillbeavailablethroughoutthelifeofacourse.
Whenthiscoursewaspublished,allURLswerecheckedforaccuracyandcompleteness.
However,duetotheever-changingnatureoftheInternet,someURLsmaynolongerbeavailableormayhavebeenredirected.
CopyrightInformationThistrainingmanualiscopyrightedandallrightsarereservedbyCertificationPartners,LLC.
Nopartofthispublicationmaybereproduced,transmitted,storedinaretrievalsystem,modified,ortranslatedintoanylanguageorcomputerlanguage,inanyformorbyanymeans,electronic,mechanical,magnetic,optical,chemical,manualorotherwisewithoutwrittenpermissionofCertificationPartners,1230W.
WashingtonStreet,Suite201,Tempe,AZ85281.
Copyright2014byCertificationPartners,LLCAllRightsReservedISBN:0-7423-3250-0iv2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0v2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0TableofContentsCourseDescription.
ixCoursewarexCourseObjectives.
xivClassroomSetupxivSystemRequirementsxivConventionsandGraphicsUsedinThisBook.
xviLesson1:HTML5Essentials1-1Pre-AssessmentQuestions1-2IntroductiontoHTML5andCSS3.
1-3MigrationtoMobileDevices.
1-3TheWebDevelopmentTrifecta.
1-5TheEvolutionofHTML5.
1-6HTML5StructureElements.
1-9ValidatingHTML5Code.
1-10TheElement1-15TheElement1-19HTML5APIs1-21CaseStudy.
1-24Lesson1Review1-26Lesson2:UsingCascadingStyleSheets(CSS)Technology2-1Pre-AssessmentQuestions2-2CascadingStyleSheets(CSS)2-3StyleGuides.
2-3CSSandHTML.
2-5CSSTermsandSyntax.
2-6ApplyingCSSStyles2-9PageLayoutwithCSS2-14CSSPositioningSchemes2-21TheCSSBoxModel2-22CaseStudy.
2-25Lesson2Review2-27Lesson3:IntroductiontoCSSVersion3(CSS3)3-1Pre-AssessmentQuestions3-2IntroductiontoCSS3.
3-3CSS3SelectorsandProperties.
3-3CSS3BackgroundProperties.
3-8CSS3BorderProperties.
3-14CSS3FontProperties3-18CSS3TextEffects.
3-20CaseStudy.
3-24Lesson3Review3-26Lesson4:UsingAdvancedCSS3Techniques.
4-1Pre-AssessmentQuestions4-2IntroductiontoAdvancedCSS3Techniques4-3CSS32Dand3DTransformations.
4-3CSS3Transitions4-8CSS3Animations4-11CSS3UserInterfaces.
4-15CreatingMenusandButtonswithCSS3.
4-17CaseStudy.
4-21Lesson4Review4-23Lesson5:IntroductiontoJavaScript.
5-1Pre-AssessmentQuestions5-2HTML5andJavaScript.
5-3IntroductiontoScripting5-4vi2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0JavaScriptCharacteristics.
5-4JavaScriptvs.
OtherLanguages5-6EmbeddingJavaScriptintoHTML5Documents.
5-8JavaScriptandCommonProgrammingConcepts.
5-10Objects,PropertiesandMethods5-10Variables.
5-14ExpressionsandOperators5-17CaseStudy.
5-23Lesson5Review5-25Lesson6:JavaScriptEvents,FunctionsandMethods.
6-1Pre-AssessmentQuestions6-2UserEventsandJavaScriptEventHandlers.
6-3IntroductiontoJavaScriptFunctions6-4DefiningaFunction.
6-5CallingaFunction.
6-9MethodsasFunctions6-19ErrorsInJavaScript.
6-22CaseStudy.
6-26Lesson6Review6-27Lesson7:UsingHTML5APIs7-1Pre-AssessmentQuestions7-2IntroductiontoHTML5APIs7-3DocumentObjectModel(DOM)7-3CommonHTML5APIs7-4TheCanvasAPI7-4TheOfflineAppCacheAPI.
7-10TheGeolocationAPI7-13TheDrag-and–DropAPI.
7-16TheFileAPI.
7-20TheHistoryAPI7-22RetrievingDatawithXMLHttpRequest.
7-24ManipulatingDatawithjQuery7-24CaseStudy.
7-28Lesson7Review7-30Lesson8:DevelopingHTML5Forms.
8-1Pre-AssessmentQuestions8-2IntroductiontoHTML5Forms8-3Cross-BrowserCompatibleHTML5Forms8-3HTML5FormInputTypes.
8-4NewFormElementsinHTML58-9HTML5GlobalAttributesforFormElements8-13CaseStudy.
8-21Lesson8Review8-23Lesson9:Completing,SubmittingandValidatingUserInputForms.
9-1Pre-AssessmentQuestions9-2ImprovingFormswithHTML59-3HTML5AttributesfortheElement9-3HTML5AttributesfortheElement.
9-5SubmittingFormswiththeElement9-8ConceptsandTechniquesforValidatingUserInput.
9-11ValidatingUserInputwithHTML5Attributes9-13ValidatingUserInputwithJavaScript9-20CaseStudy.
9-22Lesson9Review9-24Lesson10:DesigningforMobileDevices10-1Pre-AssessmentQuestions10-2IntroductiontoMobileDesign.
10-3MobileWebSitesvs.
MobileApps10-3vii2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0DesigningWebSitesforMobileDevices10-6PageLayoutforMobileDevices.
10-8NavigationandHyperlinksforMobileDevices.
10-10ImagesandMobileDesign.
10-13ValidatingandTestingMobileWebPages10-14ResponsiveWebDesign.
10-17CaseStudy.
10-25Lesson10Review10-28AppendixesAppendixes-1Glossary.
Glossary-1IndexIndex-1ListofLabsLab1-1:StructuringandvalidatingaWebpage.
1-12Lab1-2:EmbeddingvideowiththeHTML5element1-18Lab1-3:EmbeddingaudiowiththeHTML5element.
1-20Lab2-1:FormattingtextwithCSS2-11Lab2-2:Layingoutapage'sstructureusingCSS2-18Lab2-3:PositioningimagesrelativetotextusingCSS.
2-20Lab2-4:ModifyingelementsusingCSSmargins,bordersandpadding2-23Lab3-1:UsingCSS3selectors3-5Lab3-2:AddingCSS3backgroundsandtransparency.
3-12Lab3-3:CreatingbuttonsandshadowswiththeCSS3borderproperties.
3-16Lab3-4:UsingCSS3fontsandtexteffects.
3-21Lab4-1:Creating2Dand3DtransformationswithCSS3.
4-5Lab4-2:UsingCSS3transitions4-9Lab4-3:CreatingCSS3animations4-13Lab4-4:UsingtheCSS3resizeproperty4-16Lab4-5:CreatingaCSSmenu.
4-18Lab5-1:UsingtheJavaScriptalert()method.
5-13Lab5-2:UsingtheJavaScriptprompt()method5-19Lab5-3:UsingtheJavaScriptdocument.
write()method.
5-21Lab6-1:Creatingauser-definedfunctioninJavaScript.
6-7Lab6-2:Usingfunctions,argumentsandreturnvaluesinJavaScript.
6-12Lab6-3:CallingafunctionfromwithinanotherfunctioninJavaScript.
6-15Lab7-1:UsingtheHTML5CanvasAPI.
7-7Lab7-2:CreatinganofflineWebapplicationwithHTML57-11Lab7-3:UsingtheGeolocationAPItoobtaingeographicalinformation7-14Lab7-4:Addingdrag-and–dropelementstoaWebpagewithHTML5.
7-18Lab7-5:UsingtheHTML5FileAPI7-20Lab8-1:UsingnewHTML5inputtypes8-7Lab8-2:UsingtheHTML5element.
8-10Lab8-3:Usingtheandelements8-15Lab8-4:Usingtheelementwiththeplaceholderattribute.
8-18Lab9-1:UsingtheHTML5autocompleteattributewith9-4Lab9-2:UsingtheHTML5autofocusattributewith9-7Lab9-3:Usingtheelementtosubmitforms.
9-10Lab9-4:UsingtheHTML5requiredattribute9-14Lab9-5:UsingtheHTML5patternattribute.
9-17Lab9-6:UsingthepatternattributewithHTMLinputtypes.
9-19Lab10-1:Modifyingasiteformobileusers10-15ListofTablesTable1-1:HTML5family(Webdevelopmenttrifecta)technologies1-6Table1-2:HTML5structureelements1-10Table1-3:HTML5elementsandattributes.
1-17Table1-4:HTML5-compliantbrowsersupportforHTML5audioformats1-20viii2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Table1-5:Additionalandattributes.
1-20Table2-1:CSSsyntaxterms.
2-7Table2-2:CSSdeclarationsvs.
rules2-8Table2-3:CSSvaluesforaligningimagestotext2-17Table2-4:CSSpositioningschemes.
2-21Table2-5:CSSBoxModel.
2-22Table2-6:CSSBoxModelproperties2-23Table3-1:CommonCSS3selectors.
3-4Table3-2:CSS3properties3-7Table3-3:ValuesforCSS3background-sizeproperty.
3-10Table3-4:OptionalCSS3fontproperties3-19Table3-5:CSS3texteffectproperties.
3-20Table4-1:CSS32Dand3Dtransformproperties.
4-3Table4-2:CSS32Dtransformmethods4-4Table4-3:CSS33Dtransformmethods4-4Table4-4:CSS3transitionproperties4-8Table4-5:CSS3@keyframesandanimationproperties.
4-12Table4-6:CSS3userinterfaceproperties4-15Table5-1:JavaScriptvariabledatatypes5-16Table5-2:JavaScriptliteraltypes5-17Table5-3:JavaScriptexpressiontypesandoperators5-17Table6-1:JavaScriptusereventexamples.
6-3Table6-2:JavaScripteventhandlers6-3Table7-1:Canvasrectangleproperties.
7-6Table7-2:Commoncanvasdrawingmethodsandproperties7-6Table7-3:GeolocationAPImethods.
7-13Table7-4:HistoryAPImethods.
7-23Table7-5:HistoryAPIobjects7-23Table7-6:jQuerycodecomponents7-25Table7-7:jQueryexamples.
7-25Table7-8:jQueryselectors.
7-25Table7-9:jQuerymethodstoretrieveandchangecontent7-27Table7-10:jQuerymethodstoaddHTMLcontent.
7-27Table7-11:jQuerymethodstoremoveelementsandcontent7-27Table8-1:HTML5inputtypes.
8-6Table8-2:CommonHTML5formelements.
8-9Table8-3:AttributesforHTML5element8-12Table8-4:AttributesforHTML5element.
8-13Table8-5:CommonHTML5globalattributesforformelements8-13Table9-1:HTML5attributesforelement9-3Table9-2:HTML5attributesforelement.
9-6Table9-3:HTMLelementtypeattributevalues9-9Table9-4:HTML5patternattributeexamples.
9-16Table10-1:MobileWebsitesvs.
mobileapps.
10-5Table10-2:Responsivedesignvs.
mobiledesign10-18Table10-3:CSS3mediaqueryfeatures.
10-22ix2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CourseDescriptionAdvancedHTML5AndCSS3SpecialististhefirstcourseintheCIWWebAndMobileDesignseries.
ThiscourseteachestheessentialsofHTML5,CascadingStyleSheets(CSS)andJavaScript.
Thesetechnologies,sometimesknownasthe"HTML5Family"orthe"Webdevelopmenttrifecta,"canbeusedtogethertocreateWebpagesthateasilyadapttodisplayonsmartphones,tablets,gamingdevicesandsmartTVs,aswellastotraditionaldesktopcomputers.
ThiscoursebuildsuponyourmanualcodingskillstoteachyouhowtodevelopWebdocumentsusingnewelements,attributesandselectorsintroducedinHTML5(HypertextMarkupLanguageversion5)andCSS3(CascadingStyleSheetsversion3).
YouwillcreateWebpagesusingtheHTML5structureelements,embedvideoandaudio,anddevelopcross-browseruser-inputforms.
YouwilluseCSS3topositionandformatcontent,andtocreateeffectssuchastransformations,transitionsandanimation.
YouwillalsolearnbasicJavaScriptcoding,anduseHTML5APIs(applicationprogramminginterfaces)toextendthefunctionalityofWebpageswithmodernfeaturessuchasgeolocation,drag-and-drop,canvasandofflineWebapplications.
Inaddition,youwilllearntechniquesforcodevalidationandtesting,formcreation,inlineformfieldvalidation,andmobiledesignforbrowsersandapps,includingResponsiveWebDesign(RWD).
AllCIWcoursesofferCaseStudiesaboutreal-worldskillsapplicationsandjob-relatedtopics.
Guided,step-by-steplabsprovideopportunitiestopracticenewskills.
YoucanchallengeyourselfandreviewyourskillsaftereachlessonintheLessonSummaryandLessonReviewsections.
AdditionalskillreinforcementisprovidedinActivities,OptionalLabs,LessonQuizzesandaCourseAssessmentthatareavailablefromyourinstructor(forILTtraining)orfromCIWOnline(forself-study).
Thiscoursebookincludessupplementalonlinematerialcontainingthelabfilesusedinthecourse.
Topracticetheskillspresentedinthecourseortoperformanylabsthatwerenotcompleted,refertotheClassroom/SystemSetupsectionforinformationaboutsystemrequirementsandusingthelabfiles.
TheCIWAdvancedHTML5AndCSS3Specialistcoursepreparesyoutotakethehigh-stakesCIWAdvancedHTML5AndCSS3Specialistcertificationexam.
SeriesAdvancedHTML5AndCSS3SpecialististhefirstcourseintheCIWWebAndMobileDesignseriesofcourses,whichconsistsofsevencourses:AdvancedHTML5andCSS3SpecialistUserInterfaceDesignSpecialistMultimediaSpecialistSocialMediaStrategySpecialistMobileApplicationsSpecialistE-CommerceSpecialistDataAnalystPrerequisitesTheAdvancedHTML5AndCSS3SpecialistcoursewareteachesintermediateandadvancedHTML5andCSS3codingskills,aswellasintroductoryJavaScript.
Beforetakingthiscourse,youshouldcompletetheCIWSiteDevelopmentAssociatecoursefromtheCIWWebFoundationsseries,orhaveequivalentbasicHTMLandCSScodingknowledge.
x2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CertificationTheCIWAdvancedHTML5AndCSS3Specialistcoursepreparesyoutotakethehigh-stakesCIWAdvancedHTML5AndCSS3Specialistcertificationexam(1D0-620).
ThosewhopasstheCIWAdvancedHTML5AndCSS3SpecialistexamearntheCIWAdvancedHTML5AndCSS3Specialistcertification,whichisrecognizedthroughouttheindustryasvalidatingessentialHTML5andCSS3developmentskillsfortheworkplace.
Candidateswhopassallsevenhigh-stakesexamsintheCIWWebAndMobileDesignserieswillalsobeawardedCIWWebAndMobileDesignProfessionalcertificationstatus.
ForinformationabouttakingthisoranyotherCIWexam,visitwww.
CIWcertified.
com.
TargetaudienceIndividualspreparingtoenterorcontinueintheworkforcefieldsofWebsitedevelopmentanddesigncanbenefitfromtheCIWAdvancedHTML5AndCSS3Specialistcourseand/orcertification:HighschoolstudentsCollegestudentsTechnical/tradeschoolstudentsProfessionalsworkinginWebsitedevelopmentanddesignfieldsforanyindustrycanbenefitfromtheCIWAdvancedHTML5AndCSS3Specialistcourseand/orcertification:WebandgraphicdesignersWebmarketingprofessionalsMobileapplicationdevelopersCreativedirectorsAdvertisingprofessionalsEntrepreneursStudentCoursewareThiscoursebookwasdevelopedforinstructor-ledand/orself-studytraining.
Alongwithcomprehensiveinstructionaltextandobjectiveschecklists,thiscoursebookprovideseasy-to-followhands-onlabsandaglossaryofcourse-specificterms.
ItalsoprovidesInternetaddressesneededtocompletesomelabs,althoughduetotheconstantlychangingnatureoftheInternet,someaddressesmaynolongerbevalid.
Thestudentcoursebookisorganizedinthefollowingmanner:xi2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0StudentCoursebookTableofcontents(includinglistsoflabs,figuresandtables)LessonsLessonobjectivesPre-assessmentquestionsNarrativetext(includingexamobjectivecallouts,tablesandfigures,warningsandtechnotes)OnlineResourcescalloutsLabs(includingexamobjectivecallouts,tablesandfigures,warningsandtechnotes)CaseStudyLessonsummaryLessonreviewquestionsAppendixesGlossaryIndexCIWOnlineOnlineResourcesPre-assessmenttestLessonresourcesMovieClipsCIWOnlineExercisesCIWCourseMasteryLabfilesFlashcardsCIWPracticeExamsSupplementalFilesAnswers*AppendixesHandouts*LiveLabs***NotincludedinAcademicStudentmaterials.
**LiveLabsareavailableinSelf-Studyproducts.
Whenyoureturntoyourhomeoroffice,youwillfindthiscoursebooktobeavaluableresourceforreviewinglabsandapplyingtheskillsyouhavelearned.
Eachlessonconcludeswithquestionsthatreviewthematerial.
Lessonreviewquestionsareprovidedasastudyresourceonlyandinnowayguaranteeapassingscoreonthehigh-stakesCIWAdvancedHTML5AndCSS3Specialistcertificationexam.
CoursebookversionsTheCIWAdvancedHTML5AndCSS3Specialistcoursewareisdesignedforvariouslearningenvironments:academic,learningcenter/corporateandself-study.
Coursebooksareavailableinbothinstructorandstudentversions.
Studentversionsareavailablefortheacademicandlearningcenter/corporateenvironments,aswellasself-study.
Checkyourbooktoverifywhichversionyouhave.
Instructor(Academic,LearningCenter/Corporate)Examplesyllabifor10-weekand16-weekinstructionperiodsareincludedwiththeinstructorsupplementalfilesavailableonCIWOnline.
Learningcenterscanteachthisseriesatanacceleratedpace;consulttheimplementationtablethatcanbefoundonCIWOnline.
TheinstructorversionofthisbookincludesInstructorNotesinthemargin,whichprovideadditionaltipsandcommentaryfortheinstructortosupplementcoursenarrative.
MargincalloutsalsodirectinstructorstomaterialthatrelatesdirectlytospecifiedCIWAdvancedHTML5AndCSS3Specialistexamobjectives.
TheinstructorbookandsupplementalfilescontainallanswerstoOptionalLabs,LessonQuizzesandtheCourseAssessment.
xii2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0ThesupplementalfilesalsoincludehandoutversionsofallOptionalLabs,LessonQuizzesandtheCourseAssessment,whichtheinstructorcanprintandassignduringclassorashomework.
ThesupplementalfilesalsoincludeanappendixlistingtheCIWAdvancedHTML5AndCSS3Specialistcertificationexamobjectivesandlocationsofcorrespondingmaterialinthecoursebook.
LessonQuizzesandCourseAssessmentsareprovidedasstudyandcourse-gradingresourcesonly;successonthesematerialsinnowayguaranteesapassingscoreontheCIWAdvancedHTML5AndCSS3Specialistcertificationexam.
Student(Academic,LearningCenter/Corporate,Self-Study)ThestudentbookandsupplementalfilesincludePre-AssessmentandLessonReviewquestionsforeachlesson.
However,thestudentbookdoesnotprovideanswerstothesequestions.
ThestudentbookalsodoesnotincludeanyActivities,OptionalLabs,QuizzesortheCourseAssessment.
Studentscanobtaintheseelementsandanswersfromtheinstructor(forILTtraining)orfromCIWOnline(forlearningcenter/corporateorself-studytraining).
Thestudentsupplementalmaterialsincludeappendixesandfilesusedtoperformmanyofthelabsinthecoursebook.
ThesupplementalfilesalsoincludeanappendixlistingtheCIWAdvancedHTML5AndCSS3Specialistcertificationexamobjectivesandlocationsofcorrespondingmaterialinthecoursebook.
LessonQuizzesandCourseAssessmentsareprovidedasstudyandcourse-gradingresourcesonly;successonthesematerialsinnowayguaranteesapassingscoreontheCIWAdvancedHTML5AndCSS3Specialistcertificationexam.
OnlineresourcesYoucanvisitCIWOnlineathttp://education.
certification-partners.
com/ciw/toaccesssupplementalcoursematerialsandtogethelpinpreparingfortheCIWWebAndMobileDesignseriescertificationexams.
CIWOnlineprovidesavarietyofonlinetoolsyoucanusetosupplementtheOfficialCIWCourseware.
CIWcoursewaresupplementalfilesThiscoursebookincludessupplementalmaterialthatcanbeaccessedfromCIWOnline.
Onlinematerialsareprovidedforbothinstructorsandstudents,andincludesomeelementsrequiredtocompletethecourseworkandotheroptionalelementsthatareprovidedforyourinterestorfurtherstudy.
Studentmaterialsinclude:LabfilesusedtocompletethecourselabsAnswerstostudentexercisesandquizzes(LearningCenter/CorporateandSelf-Studyonly)Appendixeswithrelatedinformation(includingtheCIWAdvancedHTML5AndCSS3SpecialistObjectivesandLocationsAppendix).
Instructormaterialsinclude:CoursesyllabiandimplementationtablesAnswerstostudentsexercisesandquizzesAppendixeswithrelatedinformation(includingtheCIWAdvancedHTML5AndCSS3SpecialistObjectivesandLocationsAppendix).
SeetheCIWSupplementalFilessectionunderClassroom/SystemSetupforinformationaboutaccessingthesefiles.
xiii2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CIWMoviesTheCIWAdvancedHTML5AndCSS3Specialistcourseoffersmovieclipsthatprovidesupplementaryinstructioninamultimediaformat,andenhancethecoursebooknarrativeandlabs.
However,moviecontentdoesnotcomprehensivelyaddressCIWAdvancedHTML5AndCSS3Specialistcertificationexamobjectivesandisnotintendedtoreplacecoursebookcontent.
Instructorsinaclassroomenvironmentarestronglyencouragedtopresentmoviestotheentireclassusingacomputerscreenprojector.
Grouppresentationsenableinstructorstopresentanddiscussmoviecontentwhenappropriate.
Controllingthepresentationofmoviesalsominimizesdistractionsfromcoursematerialandessentiallectureorlabtime.
Studentsarestronglyencouragedtowatchthemovieclipsontheirowniftheyareunabletoviewtheminaclass.
EachstudentisprovidedaccesstoCIWOnlinetoviewthemovies.
CIWOnlineExercisesTheseinteractiveactivitiesareinstructionalsupplementstotheofficialprintandonlinebooks,designedtoofferablended-learningapproach.
MappeddirectlytotheOfficialCIWCourseware,theCIWOnlineExercisesenableyoutoreviewimportantconceptsfromtheCIWAdvancedHTML5AndCSS3SpecialistcourseandmeasureyourproficiencyoncontentrelevanttotheCIWAdvancedHTML5AndCSS3Specialistcertificationexams.
CIWOnlineExerciseschallengeyouwithawiderangeofactivitiesthatallprovideimmediatefeedback,including:Glossaryflashcards.
Matchingexercises.
Fill-in-the-blankexercises.
Crosswordpuzzles.
True/falsequestions.
CIWCourseMasteryCIWCourseMasteryquestionsaredesignedtoassessyourknowledgeoftheconcepts,skillsandbestpracticesofWebtechnologytaughtintheOfficialCIWCourseware.
TheCIWCourseMasteryquestionsassesslessonknowledge,reinforceclassroomlearningandenhanceinstruction.
Thisonlinereviewprogramcontainsmultiple-choicequestionsthatcoverCIWAdvancedHTML5AndCSS3Specialistcoursewarecontentlessonbylesson.
TheCourseMasteryprogramisbasedonauniquemethodthatmaximizesknowledgeretention.
CIWCertificationPracticeExamsAfteryouhavemasteredtheCIWAdvancedHTML5AndCSS3Specialistcoursematerial,youarereadytoprepareforthehigh-stakesCIWAdvancedHTML5AndCSS3Specialistcertificationexam.
TheonlineCIWCertificationPracticeExamsprogramhelpsyoubuildconfidencewithyourknowledgeoftheCIWexamobjectives.
Thisprogramprovidesyouwith:Timedpracticeexamsthatsimulatethehigh-stakestestingenvironmentandhelppredictactualperformanceonCIWcertificationexams.
AfeedbackreviewmodethatallowsyoutocheckanswerswhiletakingthepracticeexamandgainvaluablefeedbackthatrelateseachquestiontoaCIWexamobjectiveandalessonintheOfficialCIWCourseware.
ExamresultsthatreportonyourmasteryofeachCIWexamobjective.
Personalizedperformancereportsandstudyplanstotrackindividualprogressandviewoverallclasstrends.
xiv2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CourseObjectivesAftercompletingthiscourse,youwillbeableto:ImplementHTML5codingsolutionsusingHTML5elements,attributesandvalues.
ApplyCSS3functionalitytoWebdocumentsusingvariousproperties,selectorsandtechniques.
IntegratebasicJavaScriptcodingintoaWebpagetocreateHTML5APIs.
ConsiderHTML5andCSS3techniquestoapplytobothtraditionalandmobiledeliveryplatforms,includingmobileapps.
TransformtraditionalWebpagesintomobileWebpages.
Classroom/SystemSetupIfyouaretakingthiscourseinaninstructor-ledclassroom,thenyourinstructorhasprobablysetuptheclassroomcomputersbasedonthesystemrequirementslistedinthefollowingsections.
Mostsoftwareconfigurationsonyourcomputerareidenticaltothoseonyourinstructor'scomputer.
However,yourinstructormayuseadditionalsoftwaretodemonstratenetworkinteractionorrelatedtechnologies.
Toimplementthiscourseasaself-studystudent,youwillneedtosetupyourcomputerbasedonthehardware,softwareandconnectivityrequirementslistedinthefollowingsections.
However,youmaywanttouseadditionalsoftwaretofurtherexplorenetworkinteractionorrelatedtechnologies.
SystemRequirementsThissectionliststhehardware,softwareandconnectivityrequirementstoimplementthiscourse.
HardwareEachstudentandinstructorneedsaccesstoanindividualcomputerworkstation.
ThefollowingtablesummarizesthehardwarerequirementsforallcoursesintheCIWprogram.
Note:TheCIWhardwarerequirementsaresimilartotheminimumsystemrequirementsforMicrosoftWindows8.
1implementation.
HardwareSpecificationsMinimumRequirementsProcessor1GHz32-bit(x86)or64-bit(x64)processorHarddisk16GBavailableharddiskspace(32-bit)or20GBavailableharddiskspace(64-bit)forWindows8installation.
16GBofadditionalspacemustbeavailableforcourseapplicationsandfiles.
RAM1GBRAM(32-bit)or2GBRAM(64-bit)Networkinterfacecard(NIC)Wireless,10/100Ethernet,orGigabitEthernetSoundcard/speakersRequiredVideoadapterMicrosoftDirectX9graphicsdevicewithWDDMdriverNetworkconnectivityEnoughwirelessnodes,hubsorswitchestoallowclassroomcomputerstocommunicateandaccesstheInternet.
Monitor1024x768screenresolutionusingaVGA,DVIorHDMIconnectorWebcamera(Webcam)AnytypeofWebcamera.
SomemonitorsincludeaninternalWebcam.
USBWebcamsareagoodchoice.
xv2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0SoftwareTherecommendedsoftwareconfigurationsforcomputersusedtocompletethelabsinthisbookareasfollows.
Tobeinstalledbeforebeginningthecourse:MicrosoftWindows8.
1orhigher(typicalinstallation)WindowsInternetExplorer11orhigher(typicalinstallation)Firefox27orhigher(typicalinstallation)GoogleChrome34orhigher(typicalinstallation)ConnectivityInternetconnectivityisrequiredforthiscourse.
YouwillexperienceoptimalperformancewithadedicatedInternetconnection(e.
g.
,acable/DSLmodemoraT1line).
CIWsupplementalfilesEachcoursebookincludessupplementalmaterialsthatarereferencedandusedthroughoutthecourse.
Thesesupplementalmaterialsareprovidedonlineathttp://education.
certification-partners.
com/ciw/.
Youwillneedtocreateadirectoryforallsupplementalmaterialsforthecourse.
ThedefaultlocationisC:\CIW\[Course_Title].
Toviewordownloadthematerials,gotoCIWOnline,clickthelinkforeachfileandsavetothisdirectory.
YoucanthencreateashortcuttothisdirectoryonyourDesktop.
Asyouconductthecourselabs,youcanusethisshortcuttoquicklyaccessyourlabfiles.
xvi2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0ConventionsandGraphicsUsedinThisBookThefollowingconventionsareusedinthiscoursebook.
TermsTechnologytermsdefinedinthemarginsareindicatedinboldtypethefirsttimetheyappearinthetext.
However,noteverywordinboldtypeisatermrequiringdefinition.
LabTextTextthatyouenterduringalabappearsinitalicboldtype.
Namesofcomponentsthatyouaccessorchangeinalabappearinboldtype.
NotationsNotationsorcommentsregardingscreenshots,labsorothertextareindicatedinitalictype.
ProgramCodeorCommandsTextusedinblocksofprogramcodeoroperatingsystemcommandsappearsintheLucidaSansTypewriterfont.
Codekeywordsusedinsentencesappearinitalictype.
Thefollowinggraphicsareusedinthiscoursebook.
TechNotespointoutexceptionsorspecialcircumstancesthatyoumayfindwhenworkingwithaparticularprocedure.
TechNotesthatoccurwithinalabaredisplayedwithoutthegraphic.
TechTipsofferspecial-interestinformationaboutthecurrentsubject.
Warningsalertyouaboutcautionstoobserveoractionstoavoid.
Thisgraphicsignalsthestartofalaborotherhands-onactivity.
EachlessonsummaryincludesanApplicationProject.
Thisprojectisdesignedtoprovokeinterestandapplytheskillstaughtinthelessontoyourdailyactivities.
Eachlessonconcludeswithasummaryoftheskillsandobjectivestaughtinthatlesson.
YoucanusetheSkillsReviewchecklisttoevaluatewhatyouhavelearned.
Thisgraphicindicatesalineofcodethatiscompletedonthefollowingline.
1Lesson1:HTML5EssentialsObjectivesBytheendofthislesson,youwillbeableto:1.
1:ConsiderHTML5developmentskillsyoucanapplytobothtraditionalandnon-traditionaldeliveryplatforms,includingmobileapps.
1.
2:IdentifytheWebdevelopmenttrifectaandexplainitssignificance.
1.
3:ExplaintheevolutionofHTMLanditsrelevancetomoderndesigntechniques.
1.
4:CreateanddeployHTML5structuretags.
1.
5:PerformHTML5codevalidation,whichincludesexplainingthepracticalvalueofcodevalidationandlistingthestepstovalidateHTML5code.
1.
6:Explaintheimportanceofuniversalmarkupcreation.
1.
7:ApplytheHTML5elementappropriately.
1.
8:UsetheHTML5element.
1.
9:DefinecommonelementsofHTML5applicationprogramminginterfaces(APIs).
1-2AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Pre-AssessmentQuestions1.
Theterms"HTML5family"and"Webdevelopmenttrifecta"aresometimesusedtorefertowhichcombinationofWebtechnologiesa.
HTML5,CSS3andJavaScriptb.
HTML5,XMLandCSS3c.
HTML5,JavaScriptandFlashd.
HTML5,FlashandXML2.
WhichHTML5structureelementwasdesignedtoencloseWebsitecontentsuchascompanyservices,blogs,imagesandvideosa.
b.
c.
d.
3.
WhichelementintroducedinHTML5savesmobiledeviceresourcesbyavoidingtheuseofplug-instoplayMP4filesLesson1:HTML5Essentials1-32014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0IntroductiontoHTML5andCSS3TheskillsofWebpageandappcreationhavebecomevitaltomanycareers.
Ifyouworkinanofficeorwithacomputer,thenyouarelikelytoneedskillswithWeb-basedapptechnologiesforvariousjob-relatedtasks.
IfyouwanttoworkasaWebdeveloper,appdeveloperorsitedesigner,withresponsibilityfortheWebresourcesofanentirecompanyororganization,thenyouneedtomasterthemostcurrentstandardlanguagesforWebauthoring:HypertextMarkupLanguageversion5(HTML5)andCascadingStyleSheetsversion3(CSS3).
Whateverjobroleyoupursue,thiscoursewillteachyouhowtocreateWebpagesandappsusingthelatestHTML5andCSS3techniques.
Youwilluseatext-editorandwritecodemanuallyforalldevelopmentinthiscourse.
Graphicaluserinterface(GUI)software,suchasAdobeDreamweaver,isnotusedhere,althoughitcanbehelpfulforsomeon-the-jobtasksafteryoulearntheunderlyingcode.
MasteringcodeandthecodingprocessenablesyoutounderstandwhathappensbehindtheGUIofaWebeditor.
Thisknowledgeisinvaluable,becauseitenablesyoutotroubleshootcodeissueswhentheGUIWebeditorfails.
CIWOnlineResources–MovieClipsVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtowatchamovieclipaboutthistopic.
Lesson1:WebDevelopmentwithHTML5MigrationtoMobileDevicesConsiderthatmobilecomputingnowmeansmorethanjustbeingabletochecke-mailandWebpagesonthemovefromamobiledevice.
Today,usersalsomovefromonemobileenvironmenttoanother,usingavarietyofWeb-enableddevicesfromvariouscompaniesthatusedifferentcomputingplatforms.
Theprincipleofresponsivedesignisessentialfortoday'suserinterface(UI)designers.
Theterm"responsivedesign"describestheabilitytocreatepagesthatrespondtouserscreensizeandthatworkinmultipleenvironments.
Youwilllearnaboutresponsivedesigntechniqueslaterinthiscourse.
UsersnolongerviewWebpagesonlythroughstandardWebbrowsers.
Yoursmartphone,tablet,smartTVandgamingconsoleareallcapableofreadingWeb-basedmarkuplanguages(Figure1-1).
OBJECTIVE1.
1:HTML5deliveryplatforms1-4AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Figure1-1:ManydevicesreadmarkuplanguagesAsadesigner,itisyourresponsibilitytoensurethatyourpagesrenderasyouraudienceexpects,regardlessofthedeviceusedtoaccessthem.
Therefore,yourcodemustworkinmanydifferentenvironmentswithoutrequiringadifferentsolutionforeachone.
HTML5andCSS3allowmostdevicestoproperlyrenderthecode,regardlessofthesizeofthedevice'sscreen.
ConsidertheHTML5andCSS3technologiesasanattempttodevelopa"onesizefitsall"pagedevelopmentsolutionforalldevices.
However,thisapproachdoesnotworkinallsituations.
Youmustdeterminewhenitmakessense,andwhenitdoesnot.
AppdevelopmentTheterm"app"hasbecomewidelyusedtodescriberelativelysmallapplicationsdevelopedexclusivelyformobiledevices.
Smartphonesandtabletscreatedahugemarketforapps.
ManyorganizationsnowhaveanappfordownloadinGooglePlay,theWindowsStoreandtheAppleAppStore(Figure1-2).
Figure1-2:PopularAppStores(GooglePlayisatrademarkofGoogleInc.
)MostorganizationsalsohaveWebpagesfortraditionalandmobilebrowserstoaccess.
ThetraditionalWebpage,mobileWebpageandmobileappforeBayareallshownbelowforcomparison(Figure1-3).
Lesson1:HTML5Essentials1-52014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Figure1-3:TraditionalWebsite,mobileWebsiteandappforeBayHTML5andCSS3arecapableofcreatingbothappsandWebpages.
Thiscoursewillteachyoutheskillsrequiredtocreatebothtypes.
TheWebDevelopmentTrifectaThefutureofWebdesignandappdevelopmentwillberuledbythreetechnologies:HTML5,CascadingStyleSheets(CSS)andJavaScript(seeFigure1-4).
Usedtogether,thesetechnologiescreateWebpagesthateasilyadapttosmartphones,tablets,gamingdevicesandsmartTVs,aswellastotraditionalcomputers.
Figure1-4:WebdevelopmenttrifectaOBJECTIVE1.
2:Webdevelopmenttrifecta1-6AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Appleco-founderSteveJobsprovidedagreatargumentforusingthesetechnologiesinhisfamous"ThoughtsonFlash"blog(AdobeFlashprovidesmultimediasuchasvideo,animation,interactivegamesandaudio):"…westronglybelievethatallstandardspertainingtothewebshouldbeopen.
RatherthanuseFlash,ApplehasadoptedHTML5,CSSandJavaScript—allopenstandards.
Apple'smobiledevicesallshipwithhighperformance,lowpowerimplementationsoftheseopenstandards.
HTML5,thenewwebstandardthathasbeenadoptedbyApple,Googleandmanyothers,letswebdeveloperscreateadvancedgraphics,typography,animationsandtransitionswithoutrelyingonthirdpartybrowserplug-ins(likeFlash).
HTML5iscompletelyopenandcontrolledbyastandardscommittee,ofwhichAppleisamember.
"HTML5,CSSandJavaScriptasagrouparesometimescalledthe"HTML5family"orthe"Webdevelopmenttrifecta.
"Table1-1explainsthefunctionsofeachtechnology.
Table1-1:HTML5family(Webdevelopmenttrifecta)technologiesTechnologyDescriptionHTML5MarkuplanguageusedforstructuringanddescribingWebpagecontentCascadingStyleSheets(CSS)Stylesheetlanguagethatprovidestheformattingand"look"ofaWebpageordocumentwritteninamarkuplanguageJavaScriptScriptinglanguagethatprovidesdynamic,interactivecapabilitiestoWebpagesThiscourseteachesHTML5andCSS.
JavaScriptwillbeintroducedtoshowinteractiveHTML5elements,butJavaScriptisfairlycomplexandiscoveredindetailinitsownseparateCIWcourse.
CIWOnlineResources–OnlineExerciseVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtocompleteaninteractiveexercisethatwillreinforcewhatyouhavelearnedaboutthistopic.
Exercise1-1:TheWebdevelopmenttrifectaTheEvolutionofHTML5Asyoushouldalreadyknow,HTMLlinksonedocumenttoanotherviapointerscalledhyperlinks.
Ahyperlinkisasetofinstructionsembeddedwithinafilethatcallsanotherlocationinthefileoraseparatefilewhenthelinkisclicked.
TheglobalsetoflinkeddocumentsacrosstheexistingInternetframeworkgrewintowhatisknownastheWorldWideWeb.
HypertextMarkupLanguage(HTML)WebpagesarecreatedusingHypertextMarkupLanguage(HTML).
HTMListhemarkuplanguagethatdefinespagestructure,hyperlinks,graphicsandmoretoenablepagestorenderinWebbrowsersandotherdevices.
TheW3CregulatesthedevelopmentofHTMLandCSSstandards(Figure1-5).
Figure1-5:W3CLogoNOTE:YoucanperformsomeindependentresearchintotheHTML5specificationandHTML5examplesinOptionalLab1-1:ResearchingHTML5.
NOTE:SearchforandvisitsitesthatuseHTML5,CSSandJavaScript.
Twoexamplesare:http://sitepoint.
comandhttp://20thingsilearned.
comNOTE:IfyouareinterestedinlearningJavaScriptcoding,considertakingtheCIWJavaScriptSpecialistcourse.
OBJECTIVE1.
3:HTMLevolutionhyperlinksEmbeddedinstructionswithinafilethatlinkittoanotherpointinthefileortoaseparatefile.
HypertextMarkupLanguage(HTML)ThetraditionalauthoringlanguageusedtodevelopWebpagesformanyapplications.
NOTE:VisittheW3Catwww.
w3.
orgtolearnmoreaboutthevariousHTMLandCSSversions.
Lesson1:HTML5Essentials1-72014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0HTML3.
2andHTML4recommendationsHTML3.
2and4areolderbutfunctionalHTMLstandards.
SomeWebpagesandHTMLeditorsstillcontainthisoldercode.
HTML4containedmanyimprovementsoverHTML3.
2,mostnotablytheadditionofCascadingStyleSheets(CSS)forformatting.
TheHTML4.
01Recommendationwasreleasedin1999andbroughtsomeminormodifications.
YoucanreadtheHTML4andHTML4.
01specificationsatwww.
w3.
org/TR/html4andwww.
w3.
org/TR/html401respectively.
HTML4.
01flavorsAsWebpagesweredevelopedinHTML4.
01,theyhadthreedistinctvariants,or"flavors.
"TheHTML4.
01flavorsensuredthatyoucouldusethespecificationandstillremainbackward-compatiblewitholderWebbrowsers.
Followingisashortdescriptionofeachflavor.
HTML4.
01TransitionalalloweddeveloperstoinsertformattingusingeitherCSSortraditionallayoutinstructions.
HTML4.
01Strictrequiredtheseparationofpresentationandcontent.
Deprecatedtagsweredisallowedandgeneratedvalidationerrors.
HTML4.
01FramesetrequiredforpagesthatusedHTMLframes,whichplacedWebpagesinsideeachothertocreateseparatepanesinthebrowserwindow.
YouspecifytheflavorofHTMLbyusingadocumenttype()declaration.
SomeolderWebsitesstillcontaincodecreatedwithHTML4.
01.
XHTMLExtensibleHTML(XHTML)isaversionofHTMLthatincorporatesthestrictsyntaxrulesofExtensibleMarkupLanguage(XML)withtheexistingsetofHTML4.
01tagstocreateWebdocuments.
LikeHTML4.
01,XHTMLhasthreeflavors:Transitional,StrictandFrameset.
XHTMLintroducedsyntaxrulesthatmustbefollowedinorderforadocumenttovalidate,includingthefollowing:TheXHTMLDOCTYPEstatementisrequired.
Documentstructuretagsarerequired.
Thedocumentmusthaveonerootelement.
Allelementsandattributesmustbetypedinlowercaseletters.
Eachelementmustbeproperlyclosed,eitherwithaseparateclosingtagorwithaclosingbackslash(\),asappropriate.
Allelementsmustbeproperlynested.
Attributevaluesmustbeenclosedinquotationmarks.
TheW3CRecommendationforXHTMLwaspublishedin2000.
ThegoalforXHTMListoprovideabridgeofbackward-andforward-compatibilityforHTMLdocumentstoeasilyadapttoXMLtechnologiesinfutureuse.
ManydevelopersupgradedtheirWebpagecodefromHTMLtoXHTMLbyapplyingthestrictersyntaxtoexistingcode.
1-8AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0In2005,theW3CbeganworkonHTML5toadvanceregularHTML,andin2009itacknowledgedthatHTML5wouldbetheonlynext-generationversionofHTML,althoughitwouldincludebothXMLandnon-XMLserializations.
ManysitesstilluseXHTML.
Inthiscourse,however,youwillcreatepagesusingHTML5.
HTML5HTMLversion5(HTML5)isthelatestversionofHTMLunderdevelopmentbytheW3C.
ThiscoursewillfocusontheHTML5specification.
Atthetimeofthiswriting,HTML5wasaW3Cworkingdraft.
TheW3ChascreatedanHTML5logo,showninFigure1-6,tomarketthetechnology.
Figure1-6:HTML5logofromtheW3CHTML5providesmoderndesigntechniquesfortheInternetwhilerequiringfewerplug-ins.
Forexample,HTML5:StandardizeshowvideoandaudioarepresentedonaWebpage.
Introducestheelement,whichisdesignedtoeliminatetheneedtoinstallthird-partyplug-ins(suchasthoseforAdobeFlashorMicrosoftSilverlight).
Addstheelement,whichallowspagestoseamlesslyaddaudiofilesforeventssuchaspodcasts.
Establisheswaystoenabledrag-and-dropcapabilityforWebpageswithoutusingthird-partyadd-ons.
Givesdevelopersmorenativetoolstouseonapage,suchasdownloadprogressindicators,imagecaptioningoptionsandformvalidation.
Providesdeveloperswithanativeoptionforofflinestorage,andenablesapplicationstorunasexpectedevenwithoutnetworkconnectivity.
AllowsdeveloperstoretrievethegeographicallocationinformationforaWebsitevisitor.
Thistechnologyiscalledgeolocation.
Examplesincludeusingtheglobalpositioningsystem(GPS)ofamobiledevicetodeterminethedevice'slocation,whichallowsWebservicestobeprovidedbasedontheclient'slocation.
YouwilllearnmoreaboutHTML5throughoutthiscourse.
ToviewtheHTML5specifications,goto:http://dev.
w3.
org/html5/spec/Overview.
htmlCIWOnlineResources–OnlineExerciseVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtocompleteaninteractiveexercisethatwillreinforcewhatyouhavelearnedaboutthistopic.
Exercise1-2:TheevolutionofHTML5NOTE:ResearchHTML5-compatiblebrowsersandbesureyouhaveatleastoneinstalled.
ThensearchforandvisitHTML5WebsitesandolderHTML4.
01sites.
WhatarethesimilaritiesanddifferencesbetweenthesitesofflinestorageTheabilityforWebbrowsersandonlineservicestodownloadandaccesscontentandserviceswithoutbeingconnectedtotheInternet.
Lesson1:HTML5Essentials1-92014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CascadingStyleSheets(CSS)CascadingStyleSheets(CSS)technologydetermineshowtodisplayHTMLelementsinyourWebpages.
CSScommandscontainformattinginstructionsthatcandefinethefont,coloranddisplayofphraseelementsusedonaparticularmarkuppage.
Ifallpagesonyoursitearelinkedtothesameexternalstylesheet,thenonesimplechangetothestylesheetwillchangeallassociatedelementsacrossthesite.
Thus,ifyouwanttochangesomeformattingsite-wide(forexample,increasethesizeofadocumentheading),youneednotchangeeverypagemanually.
Youneedonlychangealineinthestylesheetfile,thenallyourheadingswillchangetheirappearancetoconformtothestylesheet.
Thistechnologycansaveagreatdealofdevelopmentandmaintenancetime,aswellasmakeamoreconsistent,accessibleinterface.
AdditionalWebpageelementsWebpagescanincorporatemorethanjustHTMLandCSS.
Youcanuseotherlanguagestoenhanceapage,suchasJavaScript,JScriptandVBScript.
YoucanalsoenhanceWebpagesbyinsertingspecializedcontentcreatedwithprogramsandtechnologiessuchasJava(www.
java.
com),ActiveX(www.
microsoft.
com),MicrosoftSilverlight(www.
microsoft.
com/silverlight/)andAdobeFlash(www.
adobe.
com/products/flash/).
Youwilllearnaboutallthesetechnologiesthroughoutthiscourse.
HTML5StructureElementsHTML5withCSSprovidesaneffectiveandsimplewaytostructureWebpages.
ThedevelopersofHTML5createdspecificelementstodefinethedocumentstructure.
Theseelementsinclude,,,,,and,showninFigure1-7.
headermainnavsectionasidearticlearticleasidesectionmainfooterFigure1-7:HTML5structuralelementsforWebpageAsthefigureillustrates,adevelopercanstructuretheWebpagewithbasicelementsthatareeasilyinterpretedandnativetoanyHTML5-compliantbrowser,regardlessofwhetherthebrowserisonamobiledevice,laptoportablet.
Table1-2describestheHTML5pagestructureelements.
NOTE:YoushouldalreadybefamiliarwithHTMLandCSS.
Thissectionprovidesonlyarefresher.
NOTE:ConsidertheimpactofsmartphonesonWebdesign.
WhatarethedifferencesbetweenviewingaWebpageonadesktopcomputerversusonasmartphoneHowwouldthatimpactaWebdesignerOBJECTIVE1.
4:HTML5structuretags1-10AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Table1-2:HTML5structureelementsHTML5StructureElementDescriptionExampleContentDefinesthetopoftheWebpage,similartotheheaderinaword-processingdocumentAlsocanbecontainedinarticle,aside,nav,mainandsectionelementstoprovideaheaderinthoseareasGeneraltopicdescriptionforthecontentbelowitCompanylogoNewsheadlinesDefinesthemaincontentofthedocumentbodyCannotbethechildoftheheader,nav,article,asideorfooterelementsContentisdirectlyrelatedtothesubjectofthedocumentDefinesanareafornavigationlinksAhypertextmenutoaccessvariouspagesoftheWebsiteDefinesportionsorareasofadocumentasnecessaryCangroupotherelementtypesAgroupofarticlesorimagesAnyportionoftheWebpagedocumentDefinessitecontentaccompanyingthemaincontentCompanyservices,newsarticles,blogs,images,videos,tweets,socialnetworkingpostsDefinescontentthatisasidefromoradditionaltothemainarticlecontent,Notjustforsidebars,itcanbeusedforanycontentAdvertisements,newsfeeds,highlightedresourcelinksDefinesthebottomoftheWebpage,similartothefooterinaword-processingdocumentAlsocanbecontainedinarticle,aside,nav,mainandsectionelementstoprovideafooterinthoseareasSitecopyright,owner,contactinformationTheseHTML5basicstructureelementsmayormaynotrenderinolderbrowsersthatdonotsupportHTML5,suchasInternetExplorerversionspriortoIE9.
ThisshouldnothinderyouruseofHTML5structuretags,butyoushouldbeawareofit.
CIWOnlineResources–OnlineExerciseVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtocompleteaninteractiveexercisethatwillreinforcewhatyouhavelearnedaboutthistopic.
Exercise1-3:HTML5structureelementsValidatingHTML5CodeCodevalidationistheprocessofcheckingyourcodetoverifythatitcomplieswiththesyntaxrulesforyourchosenstandard.
Afteryouhavecheckedyourcodeandcorrectedanydiscrepancies,acodevalidatorconfirmsthatyourcodeiscompliant,andthus"validated.
"Validatingyourmarkupcodeisworthwhilebecausevalidatedcodeismostlikelytobeinterpretedaccuratelybythemajorityofuseragents.
Asaresult,youhaveabetterchanceofyourpagesrenderingasyouexpectandtoalargeraudience.
OBJECTIVE1.
5:HTML5codevalidationLesson1:HTML5Essentials1-112014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0MakesureyouadoptasingleW3Cstandard(e.
g.
,HTML5orXHTML)andapplyitconsistentlysothatwhenyouvalidateyourmarkupcode,thecodewillmatchtheDTD(standardsyntaxrules)thatyouspecify.
UsingacodevalidatorYoucanvalidateyourmarkupcodeautomaticallywithonlinetools.
Severalcodevalidatorsexist,butthemostauthoritativeistheW3CMarkupValidationService(http://validator.
w3.
org).
Usingthisservice,youcanuploadlocalHTMLfilesforvalidation,orprovidetheURLofaWebpagetovalidateit.
Notethatcodevalidatorscheckyourfile'scodeforstandardcompliance,andsomewillspecifyproblemsordirectyoutoproblemlocations.
However,validatorsdonotcorrectthecodeforyou—youmustcorrectyourcodemanually.
Remembertovalidateyourcodeagainafteraroundofcorrections,asmanytimesasnecessaryuntilyourcodevalidatesasfullycompliant.
Inthiscourse,youwillusetheW3Cvalidationservice(Figure1-8)tovalidateyourHTML5code.
However,itisimportanttonotethatthisvalidatorreadsthedeclarationonanHTMLpageandvalidatesaccordingtothespecifiedDTD.
So,ifyourdocumentreferencesanolderHTML4.
01StrictDTD,forexample,thenthevalidatorwillvalidateyourcodeaccordingtotheHTML4.
01Strictspecifications.
Figure1-8:W3CMarkupValidationServiceFollowingaresometipstoconsiderwhenvalidatingyourmarkupcode:Donotbediscouragedwhenyouseemultipleproblemsreportedforapage.
Sometimesonesmallflawcancausetheremainingcodeonthepagetofailvalidation,eveniftheremainingcodeisactuallyvalid.
Whenerrorsarereported,searchthroughthecodecarefullytofindthetrueproblem.
Sometimeswhenavalidationprogramfindsaproblem,itdoesnotreportthecorrectcauseoritmaynotreportthecauseclearly.
Makesurethatyouarevalidatingthecorrectfile.
ThefirsttaginanHTMLdocument;itinformstheinterpreter(usuallyabrowser)whichversionofHTMLtheWebpageiswrittenin.
NOTE:Youwillpracticevalidatingmarkupcodelaterinthecourse.
1-12AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0UniversalmarkupcreationGoodWebpagecodinggenerallyinvolvesensuringthatthecontentisrenderedappropriatelyregardlessofthebrowserusedtorenderit.
Toensurethistypeofconsistent,oruniversal,rendering,Webpagedeveloperscanapplycertainpracticestotheircodingthatresultinuniversalmarkup:FollowW3Cstandardscarefully.
Chooseonestandardversionofanygivenlanguageyouuse,andapplythatstandardconsistentlythroughoutyourdocument,pagesorsite.
Creatinguniversalmarkupcodeisimportantforseveralreasons:Yourpageswillbeensuredtorenderinfutureversionsofmostbrowsers.
Yourpageswillbemorescalable.
Thismeansthatasyouaddmoresophisticatedcontent,makepagessearchableorusethecontentinwaysyouhavenotyetimagined,youcanstillusemarkupyoucreatedwithouthavingtorevisethecodeextensively.
Yourpageswillbemoreaccessibletoallusers,includingthosewithdisabilities.
Youwillbeabletomoreeasilymakeyourpagescompliantsothatyoursiteisavailabletothewidestpossibleaudienceanddoesnotpresentaliabilitytoyourorganization.
ConsistentandproperuseofasingleHTMLstandard—suchasHTML5,forexample—canhelpyourpagesrankhigherinasearchengineresultspage.
Inthefollowinglab,youwillenhanceasimpleWebpagewithHTML5structureelements.
SupposeyouhavebeenassignedtocreateanHTML5-compliantWebpagethatwilldescribethemissionofHabitatForHumanity.
ThisHTMLfileshouldbenamedindex.
htmlandshouldvalidateasHTML5.
WhatstepswouldyoutaketocreatethispageLab1-1:StructuringandvalidatingaWebpageInthislab,youwilladdstructureelementstoaWebsite,thenvalidateitasHTML5.
YoucanuseanyWebbrowser.
Infact,youareencouragedtoviewcodeinmultiplebrowserstoensurethatyouarecreatingpagesthatrenderwellinvariousenvironments.
1.
Ifnecessary,configureyouroperatingsystemsothatyoucanreadthefullextensionsofallfilenames.
ThiswillallowyoutofindyourHTMLfilesmoreeasily.
a.
InWindows8,openStartbypointingtotheupper-rightcornerofthescreen,movingthemousepointerdown,andselectingStart.
Ifyouareusingatouchscreen,swipeinfromtherightedgeofthescreenandselectStart.
b.
SelectControlPanel|AppearanceAndPersonalization.
IntheFolderOptionssection,selectShowHiddenFilesAndFolders.
EnsurethattheViewtabisselectedandchoosetheShowHiddenFiles,FoldersAndDrivesradiobutton.
c.
DeselecttheHideExtensionsForKnownFileTypescheckbox,thenclickOKtoclosetheFolderOptionsdialogbox.
ClosetheControlPanel.
2.
CopytheLesson01folderfromyourstudentlabfilestoyourDesktop.
NOTE:Youmaythinkuniversalmarkupisunnecessary.
Forexample,inacompany'sintranet,whereallemployeesusethesamebrowser,Webdesignerscoulduseproprietarylanguageextensionsandtechnologywithoutmuchworry.
Butsupposethecompany'sbrowserchoicechanges.
AndwhatifthepagesareviewedinmobiledevicesCreatinguniversalmarkupisalwaysgoodcodingpractice.
OBJECTIVE1.
6:UniversalmarkupcreationOBJECTIVE1.
4:HTML5structuretags1.
5:HTML5codevalidationLesson1:HTML5Essentials1-132014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
03.
OpentheLab1-1folderandright-clicktheindex.
htmfile.
SelectOpenWithandchooseNotepad.
Note:IfNotepaddoesnotappearwhenyouselectOpenWith,thenselectChooseDefaultProgram.
ClickthedownarrownexttoOtherProgramsthendouble-clickNotepad.
4.
Intheindex.
htmlfile,insertthefollowingstructureelements(showninbold)exactlyaswritten.
Besuretocloseyourtagsproperly.
…Simple,decent,affordablehousingLearnmoreVolunteerAdvocateDonateOurMissionHabitatforHumanitybelievesthateveryman,womanandchildshouldhaveadecent,safeandaffordableplacetolive.
Webuildandrepairhousesallovertheworldusingvolunteerlaboranddonations.
Ourpartnerfamiliespurchasethesehousesthroughno-profit,no-interestmortgageloansorinnovativefinancingmethods.
WhyWeBuildTherearenearly2billionpeoplearoundtheworldwholiveinslumhousingandmorethan100millionarehomeless.
Familieslefthomelessbynaturaldisasters,warandcivilunrestoftenfacedirehousingsituationsastheystruggletorebuildtheirlives.
Weprovideshelterandhousingassistancetohelpthesefamiliesrecover.
AdvocacyinActionVolunteerAmyMileslendshervoiceinsupportofHabitat'sadvocacyeffortsandGlobalVillagetrips.
Usetheaudiocontrolsbelowtohearherstories.
1-14AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0BuildYourCommunityStarttodaytobecometheleadersofHabitattomorrow!
LearnAboutHabitat|WhereWeBuild|SupportHabitat|StoriesandMultimedia©2014HabitatforHumanity®International.
Allrightsreserved.
"HabitatforHumanity®"isaregisteredservicemarkownedbyHabitatforHumanityInternational.
Habitat®isaservicemarkofHabitatforHumanityInternational.
5.
Onceyouhaveinsertedthestructureelements,saveyourchanges.
6.
Now,openindex.
htminaWebbrowserbyright-clickingthefile,selectingOpenWith,andchoosinganHTML5-compliantbrowser.
ItshouldresembleFigure1-9.
Figure1-9:Fileindex.
htminFirefoxwithstructureelementsTechNote:Ifyouviewedthepageinabrowserbeforeaddingstructureelements,youwillnoticethatthepage'sappearancedoesnotchange.
TheHTML5structureelementsaddcontextinformationtothefile,ratherthanvisualformatting.
7.
Asyoucansee,youhavecreatedabasicWebpagestructurethatwillvalidateasHTML5,aslongasyouhaveenteredthecodecorrectly.
Toverifythis,visithttp://validator.
w3.
org.
YouwillseetheW3CMarkupValidationServiceWebpage,asshowninFigure1-10.
NOTE:ThislabdoesnotaddformattingorstylestotheWebpage.
WebpageformattingiscompletedwithanexternalCSSfile.
Thislabprovidesthepositionofeachdocumentstructureelementonthepage.
YouwilllearnmoreaboutCSSinthenextlesson.
NOTE:ThelookandfeeloftheW3CMarkupValidationServiceWebsitemaychangeovertime.
However,thefunctionalitywillremainsimilar.
Ifchangesoccur,makesureyoutakethenecessarystepstovalidateyourpagestoaconsistentstandard.
Lesson1:HTML5Essentials1-152014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Figure1-10:W3CMarkupValidationServiceWebpage8.
ClicktheValidateByFileUploadlink.
TotherightoftheFiletextbox,clicktheBrowsebutton.
Navigatetotheindex.
htmfileyouhavecreatedandselectitbydouble-clicking.
9.
ClicktheCheckbutton.
10.
Ifyourcodedoesnotvalidate,makeappropriatechanges.
WarningsareOKanddonotmeanyoumadeanerror.
InFigure1-11,thewarningstatesthattheW3CvalidatorcheckedthedocumentwithanexperimentalHTML5conformancechecker.
Figure1-11:SuccessfulHTML5validationwithonewarning11.
Afteryourcodevalidates,leaveyourWebbrowserandtexteditoropen.
Inthislab,youcreatedandvalidatedanHTML5document.
TheElementHTML5hasintroducedtheelementtoprovidedeveloperswithastandardmethodtoembedvideointotheirWebpages(seeFigure1-12).
Priortotheelement,end-usersneededbrowserplug-ins(suchasAdobeFlash,MicrosoftSilverlightorAppleQuickTime)inordertoviewvideo.
Notallbrowsersordevicessupporttheseplug-ins,soastandardizedwaytoincludevideowasneeded.
OBJECTIVE1.
7:HTML5element1-16AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Figure1-12:PageusingHTML5elementEmbeddingvideoinanHTML5documentisstraightforward.
Seethefollowingcode:YourbrowserdoesnotsupporttheHTML5videoelement.
Table1-3describestheelementsandattributesusedinthisexamplecode.
NOTE:Plug-insarenolongerrequiredtoembedvideointoWebpages.
Inpreviousyears,entirecourseswerededicatedtoteachingdevelopershowtocreatecontentforproprietaryplug-inssuchasFlash,becauseplug-inswerenecessaryforvideostoappearandplayonaWebpage.
Lesson1:HTML5Essentials1-172014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Table1-3:HTML5elementsandattributesHTML5ElementorAttributeDescriptionelementDefinesavideotoembedintheWebpagewidthandheightattributesSpecifiesthewidthandheight(inpixels)ofthevideowindowIfnotspecified,thevideosizewillbedeterminedbythesourcevideofilewhenitloads,whichcouldchangetheWebpagelayoutconsiderablycontrolsattributeAddsvideocontrolssuchasthePlay,Pause,RewindandVolumecontrolsThesevideocontrolsarenativetoHTML5posterattributeIdentifiesanimagetobedisplayeduntilthePlaybuttonisclickedorwhilethevideoisdownloadingIftheposterattributeisnotspecified,thefirstframeofthevideoisdisplayedinsteadelementDefinesthemediaresourceMultiplesourcescanbelisted,suchasdifferenttypesofvideoformats,tosupportavarietyofdevicesandbrowserssrcattributeIdentifiesthelocationandfilenameofthemediaresourcetypeattributeIdentifiestheformat,orMIMEtype,ofthevideoTheelementsupportsthreeformats:MP4,WebMandOggTextTextenclosedintheelementwillappearonthepageifthebrowserordevicecannotsupportanyofthevideoformatsavailableMultiplesourcescanbeidentifiedwiththeelementtoensurevariousvideoformatsaresupported.
TheHTML5specificationdoesnotrequireavideocodectobesupportedbyalluseragents,butitdoessupportthefollowingformats:MPEG-4(MP4)—generallyusestheH.
264videocodec,whichisnativetomostbrowsersthatsupportHTML5.
Thiscodecusesfarlessprocessorandbatterypowerbecauseitdoesnotrequireaplug-in.
YouTuberecentlyreformattedmostvideosawayfromFlash(whichrequiresaplug-in)toMP4.
WebM—generallyusestheVP8codec,whichisanopenvideocompressionformatownedbyGoogle.
Ogg—usestheTheoraformatforHTML5video,whichisafreevideocompressionformatthatcanbedistributedwithoutlicensingfeesToensureallbrowsersanddevicescanaccessyourvideo,youshouldformatyourvideofilestoallthreeoftheseformatsandidentifythemintheelement.
Ifthatisnotpossible,thenchooseone(suchastheMP4format)asthedefaultformat.
Inthefollowinglab,youwilladdvideotoaWebpageusingtheHTML5element.
Supposeyoursupervisorasksyoutoprovideastep-by-stepinstructionalvideoinyourcompanyWebsitethatcustomerscanaccessfromanywhere.
Thevideomustbeabletoplayonallsmartphones,tablets,desktopcomputersandgamingconsolesthathaveanHTML5-compliantbrowser.
Noplug-inscanberequiredtoviewit.
MPEG-4(MP4)Astreaming,digitalmultimediaformatusedtostorevideo,audio,subtitlesandstillimages.
H.
264AvideocodecsupportedbyHTML5-compliantbrowsersthatdoesnotrequireaplug-in;useslessbatteryandprocessingresources.
WebMAnopen-sourcemediafileformatdesignedfortheWeb.
WebMaudiostreamsarecompressedwiththeVorbisaudiocodec.
WebMvideostreamsarecompressedwiththeVP8videocodec.
OggAnopen-sourceaudioandvideoformatusedforstreamingdigitalmultimedia.
UsestheTheoracodecforcompression.
NOTE:HTML5allowsvideoandaudiotobeviewedwithoutplug-ins.
ThisisanimportantstepfortheInternet'sevolutionandthepopulation'smigrationtomobiledevices.
1-18AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Lab1-2:EmbeddingvideowiththeHTML5elementInthislab,youwilladdanMP4videotoyourHabitatForHumanityWebpage.
Thevideocannotrequireabrowserplug-in,soyoumustusetheHTML5element.
1.
WindowsExplorer:OpentheLab_1-2folderinyourstudentlabfiles.
2.
Editor:Openindex.
htm.
3.
Intheindex.
htmlfile,inserttheelementexactlyaswritteninboldbelow:…WhyWeBuildTherearenearly2billionpeoplearoundtheworldwholiveinslumhousingandmorethan100millionarehomeless.
Familieslefthomelessbynaturaldisasters,warandcivilunrestoftenfacedirehousingsituationsastheystruggletorebuildtheirlives.
Weprovideshelterandhousingassistancetohelpthesefamiliesrecover.
YourbrowserdoesnotsupporttheHTML5videoelement.
…4.
Afteryouhaveinsertedthiscode,saveyourchanges.
5.
Refreshindex.
htminyourWebbrowserbyselectingtheF5key,orbyright-clickingtheWebpageandselectingRefresh(dependingonyourbrowserorwhetheryouhaveatouchscreen).
ThepageshouldresembleFigure1-13.
Figure1-13:VideoaddedtoHabitatsiteOBJECTIVE1.
7:HTML5elementLesson1:HTML5Essentials1-192014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
06.
ValidateyourWebpagecodeathttp://validator.
w3.
org.
7.
Afteryourcodevalidates,saveandclosethefile.
Inthislab,youaddedavideotoyourHTML5pageusingtheelement.
TheElementSimilartotheelement,HTML5hasintroducedtheelementtoprovidedeveloperswithastandardmethodtoembedaudiointoWebpages(seeFigure1-14).
Priortotheelement,end-usersneededbrowserplug-insorseparateapplications(suchasWindowsMediaCenter,AppleiTunes,AppleQuickTime,AdobeFlashandMicrosoftSilverlight)tolistentoaudioinWebpages.
Notallbrowsersordevicessupportedtheseplug-ins,soastandardizedwaytoincludeaudiowasneeded.
Figure1-14:PageusingtheHTML5elementEmbeddingaudioinanHTML5documentrequiresthefollowingcode:YourbrowserdoesnotsupporttheHTML5audioelement.
Aswiththeelement,thecontrolsattributeidentifiesthedefaultaudiocontrols:Play,Pause,Volume,etc.
Anytextenclosedwithintheelementwillappearinbrowsersthatdonotsupportit.
Liketheelement,theelementallowsyoutoidentifymultiplesourceswiththeelementtoensurevariousaudioformatsaresupported.
TheHTML5specificationdoesnotrequireaspecificaudiocodectobesupported,butitdoessupportthreeaudioformats:MP3WAVOggOBJECTIVE1.
8:HTML5elementNOTE:Itisnotnecessarytoincludethreefileformatsofeachaudiofileyouprovide.
Chooseafileformatthatismorepopular,suchasMP3orWAV.
TheOggformathasbeenslowtogainpopularity.
1-20AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0NotallHTML5-compliantbrowserssupportalloftheseaudioformats.
Table1-4liststheHTML5audioformatsandshowswhichHTML5-compliantbrowserssupporteachformat.
(Informationiscurrentatthetimeofthiswriting.
)Table1-4:HTML5-compliantbrowsersupportforHTML5audioformatsAudioFormat/CodecSupportedbyBrowserChromeIE10SafariFirefoxandOperaMP3YesYesYesNoOggYesNoNoYesWAVYesNoYesYesInadditiontothecontrolsattribute,severalotherattributesarecommontoboththeelementandtheelement.
Table1-5describestwowidelyusedattributes.
Table1-5:AdditionalandattributesHTML5andAttributeDescriptionloop="loop"Specifiesthattheaudioorvideofilewillplayoverandoveragainwithoutstoppingautoplay="autoplay"SpecifiesthatthevideowillautomaticallyplayimmediatelyuponloadingInthefollowinglab,youwilladdaudiotoaWebpageusingtheHTML5element.
SupposeyoursupervisorasksyoutoembedanaudiotourintoyourcompanyWebsite.
TheaudiomustbeabletoplayonanydevicewithanHTML5browser,withoutrequiringanyplug-ins.
Lab1-3:EmbeddingaudiowiththeHTML5elementInthislab,youwilladdanMP3audiofiletoyourHabitatForHumanityWebpageusingtheHTML5element.
1.
WindowsExplorer:OpentheLab_1-3folderinyourstudentlabfiles.
2.
Editor:Openindex.
htm.
3.
Intheindex.
htmlfile,inserttheelementexactlyaswritteninboldbelow:…AdvocacyinActionVolunteerAmyMileslendshervoiceinsupportofHabitat'sadvocacyeffortsandGlobalVillagetrips.
Usetheaudiocontrolsbelowtohearherstories.
YourbrowserdoesnotsupporttheHTML5audioelement.
…OBJECTIVE1.
8:HTML5elementLesson1:HTML5Essentials1-212014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
04.
Afteryouhaveinsertedthiscode,saveyourchanges.
5.
RefreshyourWebbrowser.
YourpageshouldnowresembleFigure1-15.
Figure1-15:AudiofileaddedtoHabitatpage6.
ValidateyourWebpagecodeathttp://validator.
w3.
org.
7.
Afteryourcodevalidates,leaveyourWebbrowserandtexteditoropen.
Inthislab,youaddedanaudiofiletoyourHTML5pageusingtheelement.
CIWOnlineResources–OnlineExerciseVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtocompleteaninteractiveexercisethatwillreinforcewhatyouhavelearnedaboutthistopic.
Exercise1-4:HTML5-compliantbrowsersupportforvideoandaudioformatsHTML5APIsThefutureofWebdevelopmentwillprobablyfocusonHTML5APIs.
Anapplicationprogramminginterface(API)isasourcecodespecificationthatenablescomponentsofanapplicationorprogramtoworktogethertoproducethedesiredfunctionality.
HTML5APIsprovideanopenenvironmentfordevelopingWebapplicationsthatdoesnotrelyonproprietarybrowserplug-ins.
HTML5APIsconsistofthetrifectatechnologies:HTML5,CSSandJavaScript.
ThesetechnologiesareusedtogethertoprovideWebpagesthatcaneasilyadapttosmartphones,tablets,gamingdevicesandsmartTVs,aswellastotraditionaldesktopcomputers.
HTML5APIsarealsousedtocreateappsformobiledevices,notjustWebpages.
Forexample,themobileappsforPandoraandLinkedInuseHTML5APIs(Figure1-16).
ManyOBJECTIVE1.
9:HTML5APIsNOTE:YoucanreviewtermsandlanguagesdiscussedinthislessoninActivity1-1:IdentifyingHTML5-relatedterms.
1-22AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0expectmassadoptionofHTML5APIsinthenextfewyearsasmobiledevicescontinuetoproliferate.
Figure1-16:LinkedInmobileappdevelopedwithHTML5SomefunctionsoftheHTML5APIsinclude:Media(audioandvideo).
Documentediting.
Cross-documentmessaging.
MIMEtypeandprotocolhandlerregistration.
Webstorage.
ForacompletelistofHTML5APIsfromoneoftheW3Cmembers,visithttp://platform.
html5.
org/.
YoushouldbookmarkthisWebpage.
PopularAPIsSomepopularAPIsincludeOfflineAppCache,Geolocation,CanvasandDrag-and-Drop.
YouwillstudytheseAPIsindetaillaterinthecourse.
TogiveyouanideawhatAPIscando,considertheCanvasAPI.
CanvasprovidesaplaceonaWebpage(a"canvas")wheredeveloperscandisplaygraphics,animation,videoandgames"onthefly"(dynamically)withouttheneedforaplug-in.
Byitself,canvasisasimplepixel-baseddrawingAPIthatproducesabitmapimage.
YoucandrawobjectsonacanvasusingJavaScript.
Youcanalsouseitformoreadvancedtasksthatincludeinteractivity,suchasvideogames,simulations,videoeditingorimageconfigurations(seeFigure1-17).
Lesson1:HTML5Essentials1-232014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0Figure1-17:PageusingtheCanvasAPIPreviously,end-usershadtoinstallplug-inssuchasAdobeFlashPlayerorMicrosoftSilverlighttoviewthesetypesoffiles.
Movingforward,anyuserwhohasanHTML5-compliantbrowserwillbeabletoexperiencemultimediawithoutaplug-in.
APIcompatibilityCanvasandotherAPIsusefewerresourcesthanaplug-indoes(suchasbatterypowerandCPUmemory).
Thisisespeciallyimportantwithregardtomobiledevices,suchassmartphonesandtablets,whichrelyuponbatterypower.
However,olderbrowsersdonotfullysupportAPIs.
Therefore,youshouldalwaysprovidealternativecontentorcontrols.
TheolderbrowserswillignoreAPIelements(suchastags)andwillrenderthecontentthatisbetweenthem.
Seethefollowingexample:YourbrowserdoesnotsupporttheCanvaselement.
Usingtheprecedingcode,anolderbrowserwilldisplaythetext,"YourbrowserdoesnotsupporttheCanvaselement.
"AllcompatiblebrowserswilldisplaytheCanvaselementstyledwithasolid1-pixelblackborder.
CIWOnlineResources–CourseMasteryVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtotaketheCourseMasteryreviewofthislessonorlessonsegment.
CourseMasteryLesson1NOTE:MostoftheHTML5APIswerecreatedtoavoidplug-ins.
NotethatAppledoesnotsupportFlashPlayerinanyofitsmobiledevicesduetotheCPUandbatterydemandsoftheplug-in.
1-24AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CaseStudyGoogleThisMicrosoftcreatedtheWindowsPhone8operatingsystemforsmartphones.
Thecompanyisalsocreatingappsasquicklyaspossibletosupportthephone,andtocompetewithAppleandGoogle.
OneoftheappsunderdevelopmentisaYouTubeapp,whichallowsuserstoaccessYouTubevideosfromtheirWindowsPhone8devices(eventhoughYouTubeisownedbyGoogle).
MicrosoftdevelopedtheappanduploadedittotheWindowsStore.
WindowsPhone8usersweresurprisedtobedeniedaccesstoYouTubefromtheirphoneswhenusingthisapp.
GoogledisabledallusagefromtheMicrosoftapp.
WhywouldGoogleblockaccessWouldn'tGoogleencouragemoretraffictoitssite,evenifitwasfromacompetitor'soperatingsystemSurprisingly,GoogleblockedtheMicrosoftappbecauseitwasnotdevelopedinHTML5.
AGooglespokesmansaid,"We'recommittedtoprovidingusersandcreatorswithagreatandconsistentYouTubeexperienceacrossdevices,andwe'vebeenworkingwithMicrosofttobuildafullyfeaturedYouTubeForWindowsPhoneapp,basedonHTML5.
"Althoughtherearecertainlypoliticsinvolved(AppleandAndroidYouTubeappsarenotdevelopedinHTML5),thishighlightstheimportanceofHTML5asamobileappdevelopmenttool.
***Considerthisscenarioandanswerthefollowingquestions:WhatspecificadvantagesdidGoogle'srepresentativeciteasthereasonforrequiringanHTML5appFromwhatyouhavelearnedsofar,whatdisadvantagesdoyouthinkusersoftheMicrosoftappwouldhavesufferedwiththeappthatwasdevelopedwithoutHTML5WhichHTML5elementsmightthisappuseLesson1:HTML5Essentials1-252014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0LessonSummaryApplicationprojectHTML5implementationsarespreadingquicklyasorganizationsandusersadoptmobiledevicesforworkandplay.
ThinkoffiveWebsitesthatyouvisitfrequently.
AretheyHTML5sitesTofindout,viewthesourcecodeofthepageandviewtheDOCTYPEdeclaration.
IstheDOCTYPEdeclarationwrittensimplyasfollowsIfso,thenyouarelookingatanHTML5page.
NotethattheDOCTYPEdeclarationisnotrequiredforHTML5,butitisgoodpracticetoincludeitforolderHTMLstandardstotellthebrowserwhichversionofHTMLtoexpect.
ItisalmostalwayswritteninuppercaselettersbyWebdevelopersbecauseolderversionsofHTMLrequirethiscase-specificity.
SkillsreviewInthislesson,youlearnedabouttheflexibilityofHTML5forbothtraditionalandmobiledeviceenvironments.
YouwereintroducedtotheWebdevelopmenttrifecta,whichconsistsofHTML5,CSS,andJavaScript.
YoureviewedpreviousversionsofHTML,suchasHTML4.
01,andyoulearnedtheimportanceofvalidatingHTML5code,astepthatshouldbeincludedwithallWebdevelopment.
YoualsolearnedabouttheHTML5structureelements,thevideoandaudioelements,andthecanvasAPI.
Nowthatyouhavecompletedthislesson,youshouldbeableto:1.
1:ConsiderHTML5developmentskillsyoucanapplytobothtraditionalandnon-traditionaldeliveryplatforms,includingmobileapps.
1.
2:IdentifytheWebdevelopmenttrifectaandexplainitssignificance.
1.
3:ExplaintheevolutionofHTMLanditsrelevancetomoderndesigntechniques.
1.
4:CreateanddeployHTML5structuretags.
1.
5:PerformHTML5codevalidation,whichincludesexplainingthepracticalvalueofcodevalidationandlistingthestepstovalidateHTML5code.
1.
6:Explaintheimportanceofuniversalmarkupcreation.
1.
7:ApplytheHTML5elementappropriately.
1.
8:UsetheHTML5element.
1.
9:DefinecommonelementsofHTML5applicationprogramminginterfaces(APIs).
1-26AdvancedHTML5andCSS3Specialist2014CertificationPartners,LLC.
—AllRightsReserved.
Version1.
0CIWPracticeExamsVisitCIWOnlineathttp://education.
Certification-Partners.
com/CIWtotakethePracticeExamsassessmentcoveringtheobjectivesinthislesson.
Objective1.
01ReviewObjective1.
06ReviewObjective1.
02ReviewObjective1.
07ReviewObjective1.
03ReviewObjective1.
08ReviewObjective1.
04ReviewObjective1.
09ReviewObjective1.
05ReviewNotethatsomeobjectivesmaybeonlypartiallycoveredinthislesson.
Lesson1Review1.
WhatarethreereasonstojustifytheuseofHTML52.
WhatistheprimarybenefitoftheHTML5element3.
Howcananexternalstylesheetsavedevelopmentandmaintenancetime,aswellasmakeamoreconsistent,accessibleinterface4.
HowistheHTML5structureelementusedinaWebpage5.
WhyshouldyoualwaysvalidateyourcodebeforepublishingyourWebpages