Scribd
Upload
12 views

CH01 - HTML5

This chapter introduces HTML and discusses: 1) HTML is a markup language used to define the structure and layout of web pages. Elements like <h1> are used to identify headings, paragraphs, and other sections. 2) Web page code contains both visible text and hidden HTML tags. The browser interprets the tags to display the structured page. 3) Cascading Style Sheets (CSS) allow designers to control formatting and styles separately from HTML content. CSS rules modify properties like text colors and spacing.

Uploaded by

Ploy Nich
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

CH01 - HTML5

This chapter introduces HTML and discusses: 1) HTML is a markup language used to define the structure and layout of web pages. Elements like <h1> are used to identify headings, paragraphs, and other sections. 2) Web page code contains both visible text and hidden HTML tags. The browser interprets the tags to display the structured page. 3) Cascading Style Sheets (CSS) allow designers to control formatting and styles separately from HTML content. CSS rules modify properties like text colors and spacing.

Uploaded by

Ploy Nich
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Objectives

• Create web pages with HTML
Principles of Web Design
Principles of Web Design • Add style with CSS
Add style with CSS
6th Edition • Describe the history of HTML
• Work with HTML5
• Use good coding practices
Use good coding practices

Chapter 1 –
p HTML5
2

Creating Web Pages with HTML


Creating Web Pages with HTML
• HTML is a markup language that lets you 
Creating Web Pages with HTML y p g
identify common sections of a web page
• Markup elements define each section
• This <h1> element defines text as a first‐level 
Thi h1 l d fi fi l l
heading:
<h1>What is HTML?</h1>

3 4
HTML Syntax
HTML Syntax
• Web page code is a mixture of the text the user 
sees in the browser surrounded by a variety of 
markup elements
• An element
An element is a pair of HTML tags containing 
is a pair of HTML tags containing
content
• An HTML tag includes an opening bracket (<), an 
A HTML t i l d i b k t (<)
element name such as h1, and a closing bracket 
• The end tag has a slash ( / ) preceding the 
element.
5 6

HTML Syntax
HTML Syntax HTML Syntax
HTML Syntax
• Some HTML elements contain only a single 
g
tag. These are known as void elements
• Void elements insert something onto the 
page such as a new line using the <br>
page, such as a new line using the <br> 
element

7 8
HTML Syntax
HTML Syntax Structure of a Basic Web Page
Structure of a Basic Web Page
• Some HTML elements support attributes that  • The HTML file contains content text and HTML 
y p
let you provide more information about an  markupp
element • The HTML markup does not appear in the 
• Here is an attribute (shown in bold) added to 
Here is an attribute (shown in bold) added to browser
an <h1> element: • The browser interprets the code and displays 
<h1 id="maintitle">Main Title of the the results
Document</h1>

9 10

Structure of a Basic Web Page


Structure of a Basic Web Page
• The document type, or doctype
h d d f h
for short, 
specifies the rules for the document language
• The <html> tag is the root element
• The two main sections are the <head> and 
The two main sections are the <head> and
<body> elements
• The head section is the container for all of the 
The head section is the container for all of the
descriptive information about the document
• The <body> section includes the content that 
the user sees in the browser window
11 12
HTML in the Browser
HTML in the Browser
• The browser interprets the HTML markup 
p y g
elements and displays the results, hiding the 
actual markup from the user
• Each browser interprets HTML in its own way, 
Each browser interprets HTML in its own way
based on its rendering engine
• It is essential that you test your work in 
different web browsers
different web browsers

13 14

Adding Style with CSS


Adding Style with CSS
• Web designers use Cascading Style Sheets (CSS) 
to add presentation information to web pages
• With CSS you can display information for different 
devices
• With style sheets, the presentation properties are 
separate from the content
t f th t t
• CSS lets you control the presentation 
characteristics of an entire web site with a single 
style sheet
y
15 16
Adding Style with CSS
Adding Style with CSS
• The next two figures show CSS style rules and 
the result in the browser
• The style rules in Figure 1‐9 specify that the 
body text for the page will be Arial the h1 will
body text for the page will be Arial, the h1 will 
have a bottom border, and the paragraph will 
h
have a 30‐pixel left margin
ll f
• Figure 1
Figure 1‐10
10 shows the results in the browser
shows the results in the browser

17 18

CSS Syntax
CSS Syntax
• Style rules express style characteristics for an 
HTML element
• For example, the following style rule sets all 
<p> elements to blue text:
<p> elements to blue text:
P {color: blue;}
• Style rules contain a selector and a 
declaration
• You will learn more about CSS in Chapter 4
19 20
Organizing Information with Hypertext
Organizing Information with Hypertext
• The World Wide Web links information on 
p g yp
related topics using hypertext Understanding the History of HTML
• You determine which terms to create as 
hypertext links and where users end up when
hypertext links and where users end up when 
they click a link
• The different types of linked content and 
media continually evolve
media continually evolve

21 22

The History of HTML


The History of HTML The History of HTML
The History of HTML
• As a web designer, you will encounter all types 
bd i ill ll • Tim Berners‐Lee first proposed HTML at the 
i fi d h
of HTML coding practices   European Laboratory for Particle Physics 
• Understanding the evolution of HTML will  (CERN) in 1989 
py g
help you understand various web design  • Berners‐Lee joined the ideas of the browser, a 
j ,
methods markup language (HTML), and a 
• To be a successful web designer, you need to 
To be a successful web designer you need to p
communications protocol that allowed 
understand the past, present, and future  hypertext linking
directions of HTML coding standards and
directions of HTML, coding standards, and  • Not only could people read documents, they 
Not only could people read documents they
common practices could easily create them using HTML

23 24
The History of HTML
The History of HTML A Need for Standards
A Need for Standards
• HTML is an application of the Standard  • The World Wide Web Consortium (W3C) was 
p g g (
Generalized Markup Language (SGML), a  ) founded in 1994 MIT
standard system for specifying document  • The World Wide Web Consortium sets 
structure 
structure standards for HTML and other markup
standards for HTML and other markup 
• Berners‐Lee joined the ideas of the user  languages 
interface (browser), a markup language 
f (b ) k l • Jointly developed standards, rather than ones 
(HTML), and a communications protocol  dictated by one vendor, benefit everyone
dictated by one vendor, benefit everyone 
(http:) that allowed hypertext linking

25 26

A Need for Standards


A Need for Standards XML and XHTML A New Direction
XML and XHTML – A New Direction
• In 1997, the W3C released XML, the 
p g g
Extensible Markup Language
• XML is essential to creating applications for 
the web
the web
• XML lets developers define their own markup 
language
• XML has a stricter syntax than HTML
XML has a stricter syntax than HTML

27 28
XML Syntax Rules
XML Syntax Rules Sample XML
Sample XML
• Documents must be well‐formed <poem>
< >
<title>An Ode to the Web</title>
• All tags must nest properly and not overlap
All tags must nest properly and not overlap < t
<stanza>
>
• Use all lowercase for element names <line>So many web sites</line>
<li >S littl
<line>So little ti
time</line>
</li >
• Always use closing tags
<line>And all I want to do</line>
• Empty elements are signified by a closing slash
Empty elements are signified by a closing slash <li >I critique
<line>Is iti th
their
i
• Attribute values must be contained in  design!</line>
</stanza>
quotation marks
</poem>

29 30

XML and XHTML A New Direction


XML and XHTML – A New Direction Problems with XHTML
Problems with XHTML
• XML syntax provides a solution to the problem 
id l i h bl • Relaxed syntax rules still must be applied 
of widely varying HTML coding standards g y
because of legacy code
• The W3C combined XML and HTML to create  • Newer versions of XHTML moved too far away 
XHTML  from existing web development
from existing web development
• XHTML follows the rules of XML
• XHTML was not well received by the 
• Web developers readily adopted XHTML and 
Web developers readily adopted XHTML and development community
CSS to standardize coding
• Many web sites benefited from leaner 
standardized code
31 32
A Proposal for HTML5
A Proposal for HTML5
• The Web Hypertext Application Technology 
g p( )p p
Working Group (WHATWG) proposed HTML5 Working with HTML5
• HTML5:
– Supports standards‐based coding
S t t d d b d di
– Compatible with HTML and XHTML 
– Compatible with CSS
– Supports new page layout elements
Supports new page layout elements
– Application and media compatible

33 34

Working with HTML5


Working with HTML5 Working with HTML5
Working with HTML5
• HTML5 attempts to address shortcomings of 
dd h i f • HTML5 looks almost exactly like previous versions 
HTML of HTML 
– Logical sectioning elements • The HTML5 <!DOCTYPE> statement is less 
– Rich media complicated than in previous versions of HTML
complicated than in previous versions of HTML
– Support for applications • The <meta> element specifies the document 
• Removes old features:
Removes old features: content type and character set. Many pages leave 
t tt d h t t M l
– All display elements have been removed in favor  out this critical piece of information that tells the 
of CSS
of CSS  b
browser how to correctly interpret your HTML 
h l i
– Framesets are gone code
35 36
Working with HTML5
Working with HTML5
HTML5 offers two syntaxes:
ff
– An HTML‐compatible syntax
– An XML‐compatible syntax
• HTML
HTML‐compatible
compatible syntax
syntax
– More relaxed syntax
– Code shortcuts allowed
Code shortcuts allowed
• XML‐compatible syntax
– Consistent with XHTML
– Uses XML syntax rules

37 38

39 40
Choosing the Correct Syntax
Choosing the Correct Syntax Choosing the Correct Doctype
Choosing the Correct Doctype
• It is a best practice to code using syntax that  • Always use a doctype statement
y
follows the stricter syntax rules, which are  • Using a doctype forces the browser to display 
Using a doctype forces the browser to display
based on XML rules in standards mode
• The code you create for web content can have 
The code you create for web content can have • The standard doctype statement for HTML5:
Th d dd f HTML5
multiple purposes and potentially be used in a  <!DOCTYPE html>
variety of display and application 
f l l
environments

41 42

Choosing the Correct MIME type


Choosing the Correct MIME type Creating Syntactically Correct Code
Creating Syntactically Correct Code
• Multipurpose Internet Mail Extensions (MIME)  
li il i ( ) • Documents must be well‐formed
defines content types for the web • All tags must nest properly and not overlap
All tags must nest properly and not overlap
• Determines the type of document
• Use all lowercase for element names
• Declared in a <meta> element in the <head> 
Declared in a <meta> element in the <head>
section • Always use closing tags
• Also contains a character set identifier
Also contains a character set identifier • Empty elements are marked with a closing
Empty elements are marked with a closing 
• Your <meta> element should look like this: slash
<meta http-equiv="Content-Type" • Attribute values must be contained in 
content="text/html; charset=utf-8"> quotation marks
43 44
HTML5 Element Categories
HTML5 Element Categories New Elements in HTML5
New Elements in HTML5
• Metadata content
M t d t t t • HTML5 has a number of new elements; see 
• Flow content Table 1‐2 in the text
• Sectioning root
• Sectioning content
• All elements are supported by all modern 
• Heading content browsers
• Phrasing content
• Embedded content
• Interactive content
• Transparent

45 46

Attributes in HTML5
Attributes in HTML5 Obsolete Elements in HTML5
Obsolete Elements in HTML5
• Elements can contain attributes that set  • Many elements have been removed in HTML5, 
p p
properties y gp
mostly involving presentation effects
• Earlier versions of HTML had more attributes • Framesets are no longer available
• HTML5 has less attributes because of CSS
HTML5 h l ib b f CSS
• Global attributes can be applied to any 
pp y
element

47 48
Using HTML5 Elements for Page 
Structure
• Most web pages contain common characteristics:
– Header
– Navigation
– Articles
– Figures
– Footers
– Sidebars
• Until recently, most web pages were marked up 
with <div> elements and id or class names
49 50

Using HTML5 Elements for Page  Using HTML5 Elements for Page 
Structure Structure
• The HTML5 elements for page layout include:
h l f l i l d • HTML5 offers a new set of elements for 
– <header> Contains the page header content g
describing document structure
– <nav> Contains the navigation elements for the page
– <article> Contains the primary page content
• HTML5 replaces the use of <div> with named 
– <section> Defines sections or groupings of page  elements to structure the page
elements to structure the page
content • The <article> element can be used instead of 
– <aside> Contains additional content such as a quote 
d dd l h the <div> element, for example:
or sidebar
– <figure> Contains images for the article content
<fig re> Contains images for the article content <article>This is the main content of
– <footer> Contains page footer content the web page</article>

51 52
Interactive Capabilities in HTML5
Interactive Capabilities in HTML5
• Audio and video
• Drawing canvas
Drawing canvas
• Background application processing
• Local data storage

53 54

Using Good Coding Practices


Using Good Coding Practices
• Creating code that ensures the greatest 
Use Good Coding Practices p p
standards‐compliance, presentation, and 
usefulness of your content
– Stick to the standards
Stick to the standards
– Use semantic markup
– Validate your code

55 56
Stick to the Standards
Stick to the Standards Use Semantic Markup
Use Semantic Markup
• Stick to the W3C standards • Semantic markup identifies the intended use 
i k id ifi h i d d
• Separate content from presentation
Separate content from presentation of document sections
• Accurately describes each piece of content
• Plan to be accessible to different devices
• Until recently, this logical use of the HTML 
Until recently this logical use of the HTML
• Standardized design is more accessible elements was largely ignored
• Document elements match the meaning and 
Document elements match the meaning and
usage of the document sections: <p> for 
paragraph, <h1> for top‐level heading, and so 
h <h1> f t l l h di d
on

57 58

Validate Your Code


Validate Your Code
• V
Valid code conforms to the usage rules of the W3C
lid d f h l f h W3C
• The lack of valid code is a major problem
• Valid code enhances browser compatibility, 
accessibility, and exchange of data
• The most common mistakes include:
h k l d
– No doctype declaration
– Mi i
Missing closing tags
l i
– Missing alt attributes in <img> elements
– Incorrect tag nesting
Incorrect tag nesting
– Unquoted attributes

59 60
Summary
• Make sure to check for support of new HTML5 
elements
• Use Cascading Style Sheets
• Code to the stricter HTML5 standard
C d h i HTML5 d d
• Use good coding practices
g gp
• Use semantic markup

61

You might also like