documentsn.com

6th EditionWeb Developmentand DesignFoundationswith HTML5[TerryFelke-Morris,AnnEd.D.JProfessorHarper CollegeInternational Edition contributionsbyPiyali nMexicoCityIndianapolisDubaiNew YorkLondonSao PauloSydneyMadridSan FranciscoMilanHong KongMunichSeoulUpperSaddle RiverParisMontrealSingaporeTaipeiTorontoTokyo

ContentsCHAPTER11,,* Uniform Resource IdentifiersDomain Names33Introduction to the Internet and WorldURIs and URLs33Wide WebDomain Names3421IL1 The Internet and the WebThe Internet22Birth of the WebExtensible Markup231,2 Web Standards and24HTML5—the Newest Version ofAccessibility1!1„3Reliabilityandonthe WebInformation25the WebEthical Use of Information on the Web1.4 Network Overview313238(FTP)38393939Chapter Summary31Key Terms31Protocol37Social NetworkingRSS37372931Hands-On ExerciseWeb ResearchFocuson4040Review Questions(HTTP)Transmission Control Protocol/Internet Protocol(TCP/IP)WikisWeb 2.0'L(§ Internet ProtocolsHypertext Transfer27Blogs38PodcastsModelE-mail Protocols26291.5 The Client/ServerFile Transfer Protocol„f Popular Uses of the WebMobile Access2626on37E-Commerce25Universal Design for the WebHTML2425and the LawMarkup Language36(XHTML)Web Standards and AccessibilityInformationExtensible Hypertext23W3C ets and Extranets36(HTML)23Who Runs the Internet?Markup LanguageHypertext Markup Language22The First Graphical Browserof3636(SGML)22Growth of the InternetConvergence.11 Markup LanguagesStandard GeneralizedBirth of the InternetAccessibilitysi22andWeb404142Design4211

12ContentsWeb ResearchCHAPTER ZFocusHTML Basics434444CHAPTERXHTML44HTML545*'Vd DocumentType Definitiong Example XHTML; u/SWeb3,'Head, Title, Meta,%Jhand?fi!P 464647BodyOverview of Cascading Style SheetsAdvantages of Cascading StyleConfiguring Cascading StyleThe colorThe48Configure BackgroundBody SectionYour First Weband49Page552/12 Unordered ListTypeHTML5TheType57Style5861RelativeE-MailBlock Anchor1161177073Hyperlinks74The "Cascade"125CSS Validation1277475Chapter Summary7878Review QuestionsChapter SummaryKeyTermsHands-On ExercisesReview Questions 130Apply Your Knowledge 131Web Research7981130130Hands-On Exercises78Apply Your Knowledge118118Center HTML Elements with CSS702Llf§ HTML ValidationKey TermsLink Element68Hyperlinksand114Using External Style SheetsHyperlinksAccessibility110114Span Element6566HyperlinksThe id SelectorThe Contextual Selector63Anchor ElementAbsolute62108108114The Class SelectorSpecial CharactersElement105CSS Class, id, and ContextualSelectors61Description Listl.lii DivElementMore CSS Font PropertiesHTML5 and Ordered ListsStyle105Configuring Text with CSS60103103The font-family Property60Attribute102103AttributeElementand Unordered ListsOrdered ListStyle100102Embedded CSS with the5559Attributeand Text Color102CSS Color SyntaxThePhrase Elements100Inline CSS with the Style Attribute53Blockquote ElementThe539999Web PagesWeb-Safe Colors53in HTML5Sl y Line Break ElementonFocuson133135WebWebsite Case9898100Hexadecimal Color ValuesHeadingsOptionsPropertyUsing Color52SUi Paragraph ElementAlignmentSheetsThe background-color Property48More HeadingSheetsCSS Selectors and Declarations48Accessibility.82The Head SectionVL"} Heading Element2.1 PageExample HTML5 Web PageElements81Website Case Study2Ji HTML OverviewHTML81Web DesignonDesignStudy135136123

Contents4CHAPTERThe CSS3 opacityPropertyCSS3 RGBA Color191CSS3 Gradients4 1 Configuring Lines andBordersThe Horizontal Rule ElementThe border and paddingTypesofGraphicsKey TermsPropertiesHands-On Exercises156Photographic Experts Group (JPEG)Images 1574*3 ImageGraphic (PNG) 160Design for Your Target Audiencefor the WebHTML5 Visual ElementsHTML5 Figure PropertyMore About ImagesImage SlicingCSSSprites4J174Alignment: AlignVisual217Unityto ProvideAccessibility176Text inUsing Images177and Visual Elements178179Design217and218Right ThingWebHyperlinksReadingLevelUse of ColorColorsAccessibilityMultiple Background ImagesCSS3 Rounded Corners181183PropertyThe CSS3 text-shadow219Property220220Weight220220Spelling and Grammar180221221221and Color221Colors and Your Target Audience2225-7 Use of Graphics and Multimedia186187File Size and218220Font Color ContrastChoosingto Do220Use Common FontsFont Size and179The CSS3 box-shadowIs theOrganize Your ContentThe CSS3 background-sizeCSS3171217Elements to CreateWriting for theThe CSS3 background-originProperty 180Property169AccessibilityCSS3 background-clipPropertyRelated ItemsProximity: GroupAccessible Design Can Benefit Search EngineListing 218CSS3 Visual EffectsThe217Increased Accessibility?4*7 Sources and Guidelines forGraphics 176AccessibilityAttentionWho Benefits from Universal176Guidelines for217Design217DesignDesign172175Sources of Graphics168Property172The Favorites IconVisualContrast: Add Visual Excitement and Draw169PropertyThe background-attachmentImage Maps167Background ImageThe background-position216Repetition: Repeat Visual Elements Throughout167The background-repeat215216OrganizationPrinciples of214215OrganizationOrganizationRandom167The background-image4-6Hierarchical1664« i Background ImagesaWebsite Organization164ElementBrowser Display of163164ElementHTML5 Meter ElementHTML5CHAPTER160Image199158158159Image Hyperlinks44FormatWeb Research196198Focus on Web Design199Website Case Study 200JointNew WebP195Apply Your Knowledge156Graphic Interchange Format (GIF) ImagesPortable Network195195Review Questions150189192Chapter Summary15015013Image DimensionsMatterAntialiased/Aliased Text in Media223223223

14ContentsUse OnlyMultimediaNecessaryProvide Alternate Text5»8 Navigation DesignEase ofNavigationNavigationBarsBreadcrumb4 g224Two225SL HyperlinksConfigureVertical226Wireframes and Page Layoutfor the Mobile Web226Load Time227608228i»fWhite SpaceCll230Screen Resolution5.11 Web DesignChecklist230231234Review Questions234Web ResearchFocusHgroupWebsite Case Study237267268268Element268Section Element271271271271HTML5 and Today's Browsers1.1 TheKey Terms6Page LayoutHands-On Exercises241Web al FlowPropertiesFocus243244Layout2467More on links. Layout, and Mobile5 .l Another LookMoreon299301246TheBlock Anchor247HyperlinksFragment Identifiers246PositioningatRelative LinkingRelativeAbsolute279onCSS PositioningPositioning276279Web Design 280Website Case Study 280242CHAPTERA Look Ahead: CSS6„5275Apply Your KnowledgeThe Box Model in Action6.2275275Review QuestionsBox Model273238Chapter SummaryCHAPTER268268ElementNav ElementTime Element237Web Designon266HTML5 Structural ElementsAside Element235266Debugging TechniquesArticle ElementHands-On Exercises259263CSS ResourcesFooterChapter SummaryKey Terms 234259260Header ElementBest PracticesUnordered Listanwith an Unordered ListCSS Web Resources230ScrollingwithNavigation257257Practice with CSS Two-ColumnCSS229Avoid HorizontalBrowsers6.1 229Unordered ListanInteractivity with Pseudo-Layout228Above the FoldCSSinList Markers with CSSClasses2275.1 More Design Considerations255255256NavigationHorizontalPage Layout Design TechniquesDesign253PropertyColumns with Left NavigationNavigation2255«f Page Layout Design252252Two Columns with Top Header and Left225225Site Search FeatureFloatatLfi CSS Two-Column Page Layout224225MapCSS: ClearingThe overflowfor NavigationDynamic Navigation250The clear Property224Skip Repetitive NavigationSite5,4 CSS Float224NavigationUsing Graphics223224TargetAttribute297298298302Telephone and Text Message Hyperlinks302

Contents"1,2 CSS Sprites302'M CSS Styling for PrintPrintStyling Best7.5 CSS StylingWebForms311Practices312for the Mobile316MoreMeta Tagon Web332§ .4 Select333334Option8351FieldsetRows, Cells,Buttons and the Button391391and352Table Header Element%J StylingRows and Columns354The354rowspan Attributef.8Privacy3563588.6 CSS3 Structural Pseudo-ClassesTable SectionsChapter Summary3653659.9 HTML5 Form361E-mail AddressURL365Apply Your KnowledgeHands-On Exercises366368403Website Case arch FieldInputInputSlider Form Control406408Spinner Form ControlColor-well Form ControlHTML5 and405406Calendar Form Control369Focus on Web Design400405InputTelephone399ProcessingDatalist Form ControlReview QuestionsWeb Research362398Processingand Style a Form with CSS354an Accessible TableTable with CSSKey Terms392a FormTransitional392Legend ElementsTable Structure352The colspan Attributef ."j ConfigureandFormsThe accesskey Attribute3528-4 Configure391The tabindex Attribute352Table Data Elementa390Label ElementTable Row Element§„s Style389Elementf„6 Accessibility and350350386386389Button ElementHeadersflj SpanListImage ButtonCaptionsTableText BoxElementTable Overview385386Select Element349Table384Textarea Element9»§ ImageTable Element8.2f „3 Scrolling333Website Case Study383Password Box329Design381Hidden Input Control328380381Radio Button328Hands-On ExercisesWeb Research8. 1378380Check Box326Apply Your KnowledgeTables379Reset Button328Review QuestionsCHAPTERForm ControlsSubmit Button321Chapter SummaryFocus378Text Box320Media QueriesKey Terms317319Mobile DisplayonForm Element ».2 Input Element Form ControlsCSS Media QueriesTesting3779.1 Overview of FormsMobile Web Design Best PracticesViewport9CHAPTER7„fi Three-Column CSS PageLayout 30515Progressive409410411Enhancement413

16ContentsChapter SummaryKey Terms414Review Questionss„3 XHTML Object andHands-On ExercisesWeb ResearchObject Element414Apply Your KnowledgeFocus1414415417Param Element459Audio on a WebPage460Web Page463Video418Web Design419Website Case Study 420on aWorkingonwith Multimedia on the Web114 Adobe Flash10110.1 SuccessfulFlash ResourcesI431Audio ElementHTML5 Audio432Project Staffing CriteriaConceptualization43311.6 les andCopyright Law: l CSS3 and InteractivityCSS Image Gallery438478478Testing438CSS3 TransformProperty480Launch441CSS3 TransitionProperty482MaintenanceEvaluationllfl.g DomainChoosing11J Java442442AddingName OverviewaRegisteringDomain Nameaall'L,1fiTermsAjaxWeb ResearchAccessibilityInteractivity449Web DesignWeb Multimedia andand456Web Research455CHAPTER496498498Design4995001 2E-Commeree Overview458Hyperlink495Website Case StudyInteractivity495Hands-On Exercises45211.2 Getting Started with Audio anda494Apply Your Knowledge452Plug-ins, Containers,Provide492and Multimedia/Review Questions1 1Video491495Focus on WebCodecs490490Key Terms451Website Case StudyCHAPTER488489ResourcesChapter Summary448Hands-On ExercisesonApplet ResourcesPage448Review QuestionsFocusto a Web11 „111 HTML5 Canvas Element44511J 2KeyAppletAjax ual Host485a11.9 JavaScript442444Web Host Providers10.5 ChoosingJava442Domain Name1@4 Web Hosting11.1Page475HTML5 Video on43650712.1 What Is E-Commerce?Advantages458472473on a WebSource Element433435467469472Video ElementDevelopment ProcessAnalysisWeb Page471Source Element432Project Job Roles465%S HTML5 Audio and Video ElementsLarge-Scale ProjectDevelopment10,2 Theon aHTML5 Embed ElementWeb Development459466Flash AnimationCHAPTERParam Elements459of E-CommerceRisks of E-Commerce509508508486477