Web Development & Design
Foundations with HTML5
CHAPTER 2
HTML BASICS
Copyright © Terry Felke-Morris [Link] 38
Copyright © Terry Felke-Morris
Learning Outcomes
In this chapter, you will learn how to ...
Describe HTML, XHTML, and HTML5
Identify the markup language in a web page document
Use the html, head, body, title, and meta elements to code a
template for a web page
Configure the body of a web page with headings, paragraphs,
line breaks, divs, lists, and blockquotes
Configure text with phrase elements
Configure a web page using new HTML5 header, nav, main,
and footer elements
Configure special characters
Use the anchor element to link from page to page
Create absolute, relative, and e-mail hyperlinks
Code, save, and display a web page document
Test a web page document for valid syntax
Copyright © Terry Felke-Morris [Link] 39
What is HTML?
HTML:
The set of markup symbols or codes placed
in a file intended for display on a Web
browser page.
The World Wide Web Consortium
([Link] sets the standards for HTML
and its related languages.
Copyright © Terry Felke-Morris [Link] 40
HTML Elements
Each markup code represents an HTML element.
Each element has a purpose.
Most elements are coded as a pair of tags:
an opening tag and a closing tag.
Tags are enclosed in angle brackets, "<" and ">"
symbols.
Copyright © Terry Felke-Morris [Link] 41
What is HTML5 ?
Newest version of HTML/XHTML
Supported by modern browsers
Intended to be backwards compatible
Adds new elements
Adds new functionality
◦ Edit form data
◦ Native video and audio
◦ And more!
Source: W3C [Link]
Copyright © Terry Felke-Morris [Link] 42
Example HTML5 Web Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>
Copyright © Terry Felke-Morris [Link] 43
Head & Body Sections
Head Section
Contains information that describes the web page document
<head>
…head section info goes here
</head>
Body Section
Contains text and elements that display in the web page document
<body>
…body section info goes here
</body>
Copyright © Terry Felke-Morris [Link] 44
Title Element
Meta Element
Copyright © Terry Felke-Morris [Link] 45
Heading Element
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Demo
Copyright © Terry Felke-Morris [Link] 46
Paragraph Element
Paragraph element
<p> …paragraph goes here… </p>
◦ Groups sentences and sections of text together.
◦ Block Display – Configures empty space above and
below
Demo
Copyright © Terry Felke-Morris [Link] 47
Line Break Element
Line Break element
◦ Stand-alone, or void tag
…text goes here <br>
This starts on a new line….
◦ Causes the next element or text to display on a new line
Demo
Copyright © Terry Felke-Morris [Link] 48
Blockquote Element
Blockquote element
◦ Indents a block of text for special emphasis
<blockquote>
…text goes here…
</blockquote>
◦ Block Display – Configures empty space above and below
Demo
Copyright © Terry Felke-Morris [Link] 49
Phrase Elements
Indicate the context and meaning of the text
Element Example Usage
<b> bold text Text that has no extra importance but is styled in bold font by
usage and convention
<em> emphasized Causes text to be emphasized in relation to other text; usually
text
displayed in italics
<i> italicized text Text that has no extra importance but is styled in italics by
usage and convention
<mark> mark text Text that is highlighted in order to be easily referenced
(HTML5 only)
small text Legal disclaimers and notices (“fine print”) displayed in small
<small>
font-size
<strong> strong text Strong importance; causes text to stand out from surrounding
text; usually displayed in bold
<sub> sub text Displays a subscript as small text below the baseline
sup text
<sup> Displays a superscript as small text above the baseline
Copyright © Terry Felke-Morris [Link] 50
Proper Nesting
CODE:
<p><i>Call for a free quote for your web development needs:
<strong>888.555.5555 </strong></i></p>
BROWSER DISPLAY:
Call for a free quote for your web development needs: 888.555.5555
Copyright © Terry Felke-Morris [Link] 51
HTML Lists
Unordered List
Ordered List
Description List
formerly called a definition list
Copyright © Terry Felke-Morris [Link] 52
Unordered List
Displays a bullet, or list marker,
before each entry in the list.
<ul>
Contains the unordered list
<li>
Contains an item in the list
Copyright © Terry Felke-Morris [Link] 53
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
Demo
Copyright © Terry Felke-Morris [Link] 54
Ordered List
Displays a numbering or lettering system to itemize
the information contained in the list
<ol>
Contains the ordered list
◦ type attribute determines numbering scheme of
list, default is numerals
<li>
Contains an item in the list
Copyright © Terry Felke-Morris [Link] 55
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Demo
Copyright © Terry Felke-Morris [Link] 56
Description List
Useful to display a list of terms and descriptions or a list
of FAQ and answers
◦ <dl>
Contains the description list
◦ <dt>
Contains a term/phrase/sentence
Configures empty space above and below the text
◦ <dd>
Contains a description of the term/phrase/sentence
◦ Indents the text
◦ Configures empty space above and below the text
Copyright © Terry Felke-Morris [Link] 57
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
Demo
Copyright © Terry Felke-Morris [Link] 58
Special Characters
Display special characters such as quotes,
copyright symbol, etc.
Character Code
© ©
< <
> >
& &
Copyright © Terry Felke-Morris [Link] 59
Div Element
Configures a structural block area or “division” on a
web page with empty space above and below.
Can contain other block display elements, including
other div elements
<div>Home Services Contact</div>
Demo
Copyright © Terry Felke-Morris [Link] 60
HTML5 Structural Elements
header Element
<header></header>
Contains the web page
document’s headings
nav Element
<nav></nav>
Contains web page
document’s main navigation
main Element
<main></main>
Contains the web page
document’s main content
footer Element
<footer></footer>
Contains the web page
document’s footer
Copyright © Terry Felke-Morris [Link] 61
HTML5
Structural
Elements
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<main> main content goes here </main>
<footer> document footer information goes here </footer>
</body>
Copyright © Terry Felke-Morris [Link] 62
Anchor Element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on
the web page.
<a href="[Link]">Contact Us</a>
href Attribute
Indicates the file name or URL
Demo
Copyright © Terry Felke-Morris [Link] 63
Absolute & Relative Hyperlinks
Absolute link
◦ Link to a different website
<a href="[Link]
Relative link
◦ Link to pages on your own site
<a href="[Link]">Home</a>
Copyright © Terry Felke-Morris [Link] 64
Opening a Link
in a New Browser Window
The target attribute on the anchor element opens a
link in a new browser window or new browser tab.
<a href="[Link] target="_blank">Yahoo!</a>
7
Copyright © Terry Felke-Morris [Link]
Telephone & Text Message
Hyperlinks
Telephone Scheme
<a href="[Link] 888-555-5555</a>
Many mobile browsers will initiate a phone call when the hyperlink is
clicked.
SMS Scheme
<a href="[Link] 888-555-5555</a>
Many mobile browsers will initiate a text message to the phone number
when the hyperlink is clicked.
9
Copyright © Terry Felke-Morris [Link]
E-Mail Hyperlink
Automatically launch the default mail
program configured for the browser
If no browser default is configured,
a message is displayed
<a href=“[Link]
Copyright © Terry Felke-Morris [Link] 65
More on
Relative Linking
Relative links from the Home page:
[Link]
<a href="[Link]">Contact</a>
<a href="rooms/[Link]">Canyon</a>
Relative links from the Canyon page:
rooms/[Link]
<a href="../[Link]">Home</a>
<a href="../events/[Link]">Weekend</a>
4
Copyright © Terry Felke-Morris [Link]
HTML Linking to Fragment Identifiers
A link to a part of a web page
Also called named fragments, fragment ids
Two components:
1. The element that identifies the named fragment of a
web page. This requires the id attribute.
<div id=“top”> ….. </div>
2. The anchor tag that links to the named fragment of a
web page. This uses the href attribute.
<a href=“#top”>Back to Top</a>
Note the use of the # in the anchor tag!
5
Copyright © Terry Felke-Morris [Link]
HTML Linking to Fragment Identifiers
Writing Valid HTML
Check your code for syntax errors
◦Benefit:
◦Valid code
more consistent browser display
W3C HTML Validation Tool
◦[Link]
Put <!DOCTYPE html> as first line in html file (HTML5)
Copyright © Terry Felke-Morris [Link] 66