html5 and css3 illustrated unit b: getting started with html

24
HTML5 and CSS3 Illustrated HTML5 and CSS3 Illustrated Unit B: Unit B: Getting Started with HTML Getting Started with HTML

Upload: vanessa-oliver

Post on 17-Dec-2015

243 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

HTML5 and CSS3 IllustratedHTML5 and CSS3 Illustrated

Unit B: Unit B: Getting Started with HTMLGetting Started with HTML

Page 2: HTML5 and CSS3 Illustrated Unit B: Getting 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

Page 3: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 4: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 5: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 6: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 7: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 8: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 9: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 10: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 11: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 12: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 13: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 14: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 15: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 16: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 17: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 18: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 19: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 20: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 21: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 22: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 23: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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

Page 24: HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

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