Unit B: Getting Started With HTML

HTML5 and CSS3 IllustratedUnit B:Getting Started with HTML

ObjectivesAssess the history of HTMLCompare HTML and XHTMLCreate an HTML documentSet up the document head and bodyAdd Web page textHTML 5 and CSS 3 - Illustrated Complete2

Objectives (continued)Preview your Web pageImplement one-sided tagsValidate your HTML codeHTML 5 and CSS 3 - Illustrated Complete3

Assessing the History of HTMLThe World Wide Web Consortium(W3C) is responsible for maintainingHTML standardsHTML is constantly undertransformationW3C incorporates new features inHTML while keeping the languageconsistentHTML 5 and CSS 3 - Illustrated Complete4

Assessing the History of HTML(continued)HTML 4 codified HTML as a semanticlanguageCascading Style Sheets (CSS) is apresentational language: how topresent HTMLDeprecated features: can still be usedbut their use is not recommendedHTML 5 and CSS 3 - Illustrated Complete5

Comparing HTML and XHTMLXHTML makes HTML comply with therules of XMLFlexibility is an important part of HTMLXML and XHTML do not tolerateerrorsXHTML and HTML exist in parallelHTML 5 and CSS 3 - Illustrated Complete6

Comparing HTML and XHTML(continued)Differences Between HTML andXHTMLHTML 5 and CSS 3 - Illustrated Complete7

Creating an HTML DocumentHTML document consists of text to bedisplayed and tagsCreate document by hand-coding in atext editor or by using suitableprogramMost tags occur in pairs, but one-sidedtags are used by themselvesHTML 5 and CSS 3 - Illustrated Complete8

Creating an HTML Document(continued)Start document with !DOCTYPEhtml declarationAdd html and /html tags to definebeginning and end of Web pageFor clarity of structure, press [ENTER]twice between any two opening andclosing tagsHTML 5 and CSS 3 - Illustrated Complete9

Creating an HTML Document(continued)Basic structure of a Web pageHTML 5 and CSS 3 - Illustrated Complete10

Setting Up the DocumentHead and BodyHTML document divided into headand body sections Head: contains elements that are notpart of the main Web page Body: elements that are visible in themain window of a Web browserHead and body tags are nested withinhtml tagsHTML 5 and CSS 3 - Illustrated Complete11

Setting Up the DocumentHead and Body (continued)For clarity of structure, nestedelements are: On new lines Indented by two spaces relative to parentelementTo add head section: Add head and /head tags in newlines within the html tagsHTML 5 and CSS 3 - Illustrated Complete12

Setting Up the DocumentHead and Body (continued)To add body portion, add body and /body tags in new lines within thehtml tagsAdd meta charset “utf-8”/ to specifycharacter encodingHTML attributes specify details aboutthe element propertiesHTML 5 and CSS 3 - Illustrated Complete13

Setting Up the DocumentHead and Body (continued)Completed Web page structureHTML 5 and CSS 3 - Illustrated Complete14

Adding Web Page TextType the text for the Web pageAdd HTML tags to specify the elementtype for each text item title and /title : text that appears inthe Web browser’s title bar h1 and /h1 : highest level heading p and /p : paragraph of textHTML 5 and CSS 3 - Illustrated Complete15

Adding Web Page Text(continued)HTML comments add information notshown in the Web browser Comments defined by !-- -- HTML 5 and CSS 3 - Illustrated Complete16

Adding Web Page Text(continued)Title, h1, and p elements enteredHTML 5 and CSS 3 - Illustrated Complete17

Previewing Your Web PageTo preview a Web page open it in oneor more user agents Allows page writer to research problemsand correct them before publishing thepageUse file manager to open Web page inone or more browsersNote differences in the way the pageis displayed in different browsersHTML 5 and CSS 3 - Illustrated Complete18

Implementing One-Sided TagsSome HTML elements, such as linebreaks, require a single tag Represent a specific occurrence of anitem or behaviorOne sided tag are of the form tag/ br/ : line breakHTML 5 and CSS 3 - Illustrated Complete19

Implementing One-Sided Tags(continued)HTML document containing linebreaksHTML 5 and CSS 3 - Illustrated Complete20

Implementing One-Sided Tags(continued)Web page displaying line breaksHTML 5 and CSS 3 - Illustrated Complete21

Validating Your HTML CodeCode validation: automated processfor comparing your code againstHTML5 coding standards Useful for identifying the source of aspecific problemYou can use online tools to validateyour codeHTML 5 and CSS 3 - Illustrated Complete22

SummaryHTML is a coding language which hasstandards but is constantly undertransformationAn HTML document is a textdocument which defines a structure ofthe text to be displayedThe structure of the text to bedisplayed is defined by the use of tagsHTML 5 and CSS 3 - Illustrated Complete23

Summary (continued)Tags can include attributes whichspecify their propertiesTwo-sided tags enclose the text thatthey relate toOne-sided tags are for specificoccurrencesProblems in a Web page can beidentified by rendering it in a Webbrowser or by validating the codeHTML 5 and CSS 3 - Illustrated Complete24

Unit B: Getting Started with HTML . Objectives Assess the history of HTML Compare HTML and XHTML Create an HTML document Set up the document head and body Add Web page text HTML 5 and CSS 3 - Illustrated Complete 2 . Objectives (continued) Preview your Web page Implement one-sided tags