[go: up one dir, main page]
Scribd
Upload
14 views35 pages

Chapter 2

Uploaded by

awham2809
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views35 pages

Chapter 2

Uploaded by

awham2809
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 35

CHAPTER 2

KEY CONCEPTS

Copyright © Terry Felke-Morris http://terrymorris.net 1


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 http://terrymorris.net 2


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


(http://w3c.org) sets the standards for HTML
and its related languages.

Copyright © Terry Felke-Morris http://terrymorris.net 3


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 http://terrymorris.net 4


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 http://www.w3.org/html/logo/

Copyright © Terry Felke-Morris http://terrymorris.net 5


Document Type
Definition
Document Type Definition (DTD)
◦ doctype statement
◦ identifies the version of HTML contained in your
document.
◦ placed at the top of a web page document

Copyright © Terry Felke-Morris http://terrymorris.net 6


DTD Examples

XHTML 1.0 Transitional DTD


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

HTML5 DTD
<!DOCTYPE html>

Copyright © Terry Felke-Morris http://terrymorris.net 7


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 http://terrymorris.net 8


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 http://terrymorris.net 9


Title Element
Meta Element

Copyright © Terry Felke-Morris http://terrymorris.net 10


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>

Copyright © Terry Felke-Morris http://terrymorris.net 11


Paragraph Element
Paragraph element
<p> …paragraph goes here… </p>
◦ Groups sentences and sections of text together.

◦ Block Display – Configures empty space above and


below

Copyright © Terry Felke-Morris http://terrymorris.net 12


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

Copyright © Terry Felke-Morris http://terrymorris.net 13


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

Copyright © Terry Felke-Morris http://terrymorris.net 14


Phrase Elements
Indicate the context and meaning of the text

Copyright © Terry Felke-Morris http://terrymorris.net 15


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 http://terrymorris.net 16


HTML Lists

Unordered List
Ordered List
Description List
formerly called a definition list

Copyright © Terry Felke-Morris http://terrymorris.net 17


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 http://terrymorris.net 18


Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

Copyright © Terry Felke-Morris http://terrymorris.net 19


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 http://terrymorris.net 20


Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

Copyright © Terry Felke-Morris http://terrymorris.net 21


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 http://terrymorris.net 22


Description List
Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

Copyright © Terry Felke-Morris http://terrymorris.net 23


Checkpoint

1. Describe the features of a heading


element and how it configures the
text.
2. Describe the difference between
ordered lists and unordered lists.
3. Describe the purpose of the
blockquote tag.

Copyright © Terry Felke-Morris http://terrymorris.net 24


Special Characters
Display special characters such as quotes,
copyright symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
&nbsp;

Copyright © Terry Felke-Morris http://terrymorris.net 25


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>

Copyright © Terry Felke-Morris http://terrymorris.net 26


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 http://terrymorris.net 27
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 http://terrymorris.net 28


Anchor Element
 Specifies a hyperlink reference (href) to a file
 Text between the <a> and </a> is displayed on
the web page.

<a href="contact.html">Contact Us</a>

 href Attribute
 Indicates the file name or URL

Copyright © Terry Felke-Morris http://terrymorris.net 29


Absolute & Relative
Hyperlinks
Absolute link
◦ Link to a different website

<a href="http://yahoo.com">Yahoo</a>

Relative link
◦ Link to pages on your own site

<a href="index.htm">Home</a>
Copyright © Terry Felke-Morris http://terrymorris.net 30
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=“mailto:me@gmail.com”>me@gmail.com</a>

Copyright © Terry Felke-Morris http://terrymorris.net 31


Hyperlinks
Hands-On Practice

32
Checkpoint

1. Describe the purpose of special


characters.

2. Describe when to use an absolute link.


Is the http protocol used in the href
value?

3. Describe when to use a relative link. Is


the http protocol used in the href
value?
Copyright © Terry Felke-Morris http://terrymorris.net 33
Writing Valid HTML
Check your code for syntax errors
◦ Benefit:
◦ Valid code 
more consistent browser display

W3C HTML Validation Tool


◦ http://validator.w3.org

Copyright © Terry Felke-Morris http://terrymorris.net 34


Summary

This chapter introduced you to HTML.


You will use these skills over and over again as you
create web pages.

Copyright © Terry Felke-Morris http://terrymorris.net 35

You might also like