html5 and css3 illustrated unit b: getting started with html
TRANSCRIPT
HTML5 and CSS3 IllustratedHTML5 and CSS3 Illustrated
Unit B: Unit B: Getting Started with HTMLGetting Started with HTML
ObjectivesObjectives
Assess the history of HTMLAssess the history of HTML
Compare HTML and XHTMLCompare HTML and XHTML
Create an HTML documentCreate an HTML document
Set up the document head and bodySet up the document head and body
Add Web page textAdd Web page text
HTML 5 and CSS 3 - Illustrated Complete 2
Objectives (continued)Objectives (continued)
Preview your Web pagePreview your Web page
Implement one-sided tagsImplement one-sided tags
Validate your HTML codeValidate your HTML code
HTML 5 and CSS 3 - Illustrated Complete 3
Assessing the History of HTMLAssessing the History of HTML
The The World Wide Web Consortium World Wide Web Consortium (W3C)(W3C) is responsible for maintaining is responsible for maintaining HTML standards HTML standards
HTML is constantly under HTML is constantly under transformationtransformation
W3C incorporates new features in W3C incorporates new features in HTML while keeping the language HTML while keeping the language consistentconsistent
HTML 5 and CSS 3 - Illustrated Complete 4
Assessing the History of HTML Assessing the History of HTML (continued)(continued)
HTML 4 codified HTML as a HTML 4 codified HTML as a semantic semantic languagelanguage
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) is a is a presentational language: how to presentational language: how to present HTMLpresent HTML
Deprecated featuresDeprecated features: can still be used : can still be used but their use is not recommendedbut their use is not recommended
HTML 5 and CSS 3 - Illustrated Complete 5
Comparing HTML and XHTMLComparing HTML and XHTML
XHTML makes HTML comply with the XHTML makes HTML comply with the rules of XMLrules of XML
Flexibility is an important part of HTMLFlexibility is an important part of HTML
XML and XHTML do not tolerate errorsXML and XHTML do not tolerate errors
XHTML and HTML exist in parallelXHTML and HTML exist in parallel
HTML 5 and CSS 3 - Illustrated Complete 6
Comparing HTML and XHTML Comparing HTML and XHTML (continued)(continued)
Differences Between HTML and Differences Between HTML and XHTMLXHTML
HTML 5 and CSS 3 - Illustrated Complete 7
Creating an HTML DocumentCreating an HTML Document
HTML document consists of text to be HTML document consists of text to be displayed and tagsdisplayed and tags
Create document by hand-coding in a Create document by hand-coding in a text editor or by using suitable text editor or by using suitable programprogram
Most tags occur in pairs, but one-sided Most tags occur in pairs, but one-sided tags are used by themselvestags are used by themselves
HTML 5 and CSS 3 - Illustrated Complete 8
Creating an HTML Document Creating an HTML Document (continued)(continued)
Start document with <!DOCTYPE Start document with <!DOCTYPE html> declarationhtml> declaration
Add <html> and </html> tags to define Add <html> and </html> tags to define beginning and end of Web pagebeginning and end of Web page
For clarity of structure, press [ENTER] For clarity of structure, press [ENTER] twice between any two opening and twice between any two opening and closing tagsclosing tags
HTML 5 and CSS 3 - Illustrated Complete 9
Creating an HTML Document Creating an HTML Document (continued)(continued)
Basic structure of a Web pageBasic structure of a Web page
HTML 5 and CSS 3 - Illustrated Complete 10
Setting Up the Document Setting Up the Document Head and BodyHead and Body
HTML document divided into head HTML document divided into head and body sectionsand body sections HeadHead: contains elements that are not : contains elements that are not
part of the main Web pagepart of the main Web page BodyBody: elements that are visible in the : elements that are visible in the
main window of a Web browsermain window of a Web browser
Head and body tags are nested within Head and body tags are nested within html tagshtml tags
HTML 5 and CSS 3 - Illustrated Complete 11
Setting Up the Document Setting Up the Document Head and Body (continued)Head and Body (continued)
For clarity of structure, nested For clarity of structure, nested elements are:elements are: On new linesOn new lines Indented by two spaces relative to parent Indented by two spaces relative to parent
elementelement
To add head section:To add head section: Add <head> and </head> tags in new Add <head> and </head> tags in new
lines within the html tagslines within the html tags
HTML 5 and CSS 3 - Illustrated Complete 12
Setting Up the Document Setting Up the Document Head and Body (continued)Head and Body (continued)
To add body portion, add <body> and To add body portion, add <body> and </body> tags in new lines within the </body> tags in new lines within the html tagshtml tags
Add <meta charset=“utf-8”/> to specify Add <meta charset=“utf-8”/> to specify character encodingcharacter encoding
HTML attributes specify details about HTML attributes specify details about the element propertiesthe element properties
HTML 5 and CSS 3 - Illustrated Complete 13
Setting Up the Document Setting Up the Document Head and Body (continued)Head and Body (continued)
Completed Web page structureCompleted Web page structure
HTML 5 and CSS 3 - Illustrated Complete 14
Adding Web Page TextAdding Web Page Text
Type the text for the Web pageType the text for the Web page
Add HTML tags to specify the element Add HTML tags to specify the element type for each text itemtype for each text item <title> and </title>: text that appears in <title> and </title>: text that appears in
the Web browser’s title barthe Web browser’s title bar <h1> and </h1>: highest level heading<h1> and </h1>: highest level heading <p> and </p>: paragraph of text<p> and </p>: paragraph of text
HTML 5 and CSS 3 - Illustrated Complete 15
Adding Web Page Text Adding Web Page Text (continued)(continued)
HTML comments add information not HTML comments add information not shown in the Web browsershown in the Web browser Comments defined by <!-- … -->Comments defined by <!-- … -->
HTML 5 and CSS 3 - Illustrated Complete 16
Adding Web Page Text Adding Web Page Text (continued)(continued)
HTML 5 and CSS 3 - Illustrated Complete 17
Title, h1, and p elements enteredTitle, h1, and p elements entered
Previewing Your Web PagePreviewing Your Web Page
To preview a Web page open it in one To preview a Web page open it in one or more user agentsor more user agents Allows page writer to research problems Allows page writer to research problems
and correct them before publishing the and correct them before publishing the pagepage
Use file manager to open Web page in Use file manager to open Web page in one or more browsersone or more browsers
Note differences in the way the page Note differences in the way the page is displayed in different browsersis displayed in different browsers
HTML 5 and CSS 3 - Illustrated Complete 18
Implementing One-Sided TagsImplementing One-Sided Tags
Some HTML elements, such as line Some HTML elements, such as line breaks, require a single tagbreaks, require a single tag Represent a specific occurrence of an Represent a specific occurrence of an
item or behavioritem or behavior
One sided tag are of the form <tag/>One sided tag are of the form <tag/>
<br/>: line break<br/>: line break
HTML 5 and CSS 3 - Illustrated Complete 19
Implementing One-Sided Tags Implementing One-Sided Tags (continued)(continued)
HTML 5 and CSS 3 - Illustrated Complete 20
HTML document containing line HTML document containing line breaksbreaks
Implementing One-Sided Tags Implementing One-Sided Tags (continued)(continued)
HTML 5 and CSS 3 - Illustrated Complete 21
Web page displaying line breaksWeb page displaying line breaks
Validating Your HTML CodeValidating Your HTML Code
Code validation: automated process Code validation: automated process for comparing your code against for comparing your code against HTML5 coding standardsHTML5 coding standards Useful for identifying the source of a Useful for identifying the source of a
specific problemspecific problem
You can use online tools to validate You can use online tools to validate your codeyour code
HTML 5 and CSS 3 - Illustrated Complete 22
SummarySummary
HTML is a coding language which has HTML is a coding language which has standards but is constantly under standards but is constantly under transformationtransformation
An HTML document is a text An HTML document is a text document which defines a structure of document which defines a structure of the text to be displayedthe text to be displayed
The structure of the text to be The structure of the text to be displayed is defined by the use of tagsdisplayed is defined by the use of tags
HTML 5 and CSS 3 - Illustrated Complete 23
Summary (continued)Summary (continued)
Tags can include attributes which Tags can include attributes which specify their propertiesspecify their properties
Two-sided tags enclose the text that Two-sided tags enclose the text that they relate tothey relate to
One-sided tags are for specific One-sided tags are for specific occurrences occurrences
Problems in a Web page can be Problems in a Web page can be identified by rendering it in a Web identified by rendering it in a Web browser or by validating the codebrowser or by validating the code
HTML 5 and CSS 3 - Illustrated Complete 24