Ch. 2 HTML5, CIS 110 13F

WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 2
Key Concepts

Copyright © Terry Felke-Morris

Wednesday, October 23, 13

1

HTML ELEMENTS
 containers

<p>Fourscore and 20 years ago...</p>
 empty elements

<hr>
<img src=”../images/anna.png”>



4

WHAT IS HTML5 ?
Newest draft version of HTML/XHTML
Intended to be backwards compatible
Adds many new elements



7

DOCUMENT TYPE DEFINITION

Document Type Deﬁnition

(DTD)
doctype statement
identiﬁes the version of HTML contained

in your document.
placed at the top of a web page
document



8

EXAMPLE HTML5 WEB PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title Goes Here</title>
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>



11

HEAD & BODY SECTIONS
Head Section

describes the document
<head>
…head section info goes here
</head>

Body Section

Contains the content
<body>
…body section info goes here
</body>



12

TITLE ELEMENT
META ELEMENT



13

THE HEADING ELEMENT

<h1>Heading Level 1</h1>



14

PARAGRAPH ELEMENT
Paragraph element

<p> …paragraph goes here… </p>
 Conﬁgures a blank line above and below

the paragraph

=> block display elements
vs.
=> inline display elements



15

LINE BREAK ELEMENT
Line Break element
 empty element
 XHTML syntax: <br />
 HTML syntax: <br>

…text goes here <br>
This starts on a new line….
 Causes the next element or text to display on a

new line



16

BLOCKQUOTE ELEMENT
Blockquote element
Indents a block of text for special

emphasis

<blockquote>
…text goes here…
</blockquote>



17

PHRASE ELEMENTS
 Indicate the context and meaning of the

text



18

HTML LISTS
Unordered List
Ordered List
Description List
formerly called a deﬁnition list



19

UNORDERED LIST EXAMPLE
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>



21

ORDERED LIST EXAMPLE
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>



23

DESCRIPTION LIST EXAMPLE
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>



25

SPECIAL CHARACTERS
 Display special characters such as

quotes, copyright symbol, etc.

Character
©

<
>
&



Code
©
<
>

&

 

27

DIV ELEMENT
Conﬁgures a structural block or “division”

on a web page with empty space above
and below.
Can contain other block display elements

(including div elements)
<div>Home Services Contact</div>



28

ANCHOR ELEMENT
 hyperlink

<a href="contact.html">Contact Us</a>
^ landing page
^anchor text



29

ABSOLUTE & RELATIVE HYPERLINKS
Absolute link
 Link to other websites

<a href="http://yahoo.com">Yahoo</a>
Relative link
 Link to pages on your own site

<a href="index.htm">Home</a>



30

WRITING VALID HTML
Check your code for syntax

errors
Valid code 
displays the same in all
browsers
W3C HTML Validation Tool
 http://validator.w3.org



34

WRITING VALID HTML
Hands On Practice, 2.8, p. 43
 http://validator.w3.org



34

Ch. 2 Assessment:
Learning Outcomes - Know the following



35

Ch. 2 HTML5, CIS 110 13F

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Ch. 2 HTML5, CIS 110 13F (20)

More from mh-108 (7)

Recently uploaded (20)

Ch. 2 HTML5, CIS 110 13F