Scribd
Upload
101 views52 pages

Chapter 2

Uploaded by

Bam Booc
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
101 views52 pages

Chapter 2

Uploaded by

Bam Booc
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/ 52

Web Development & Design Foundations with H

TM L 5
Ninth Edition

Chapter 2
HTML Basics

Slides in this presentation contain


hyperlinks. JAWS users should be able to
get a list of links by using INSERT+F7

Copyright © 2019, 2017, 2015 Pearson Education, Inc. All Rights Reserved
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


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


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 4


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


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 6


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 7


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 8


Title Element
Meta Element

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


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 10


Hands-on practice 2.2
(Page 34)
chapter2/heading.html

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


Hands-on practice 2.3
(Page 36)

chapter2/paragraph.html

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


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 14


Hands-on practice 2.4
(page 37)
chapter2/linebreak.html

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


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 16


Hands-on practice 2.5
(page 38)
chapter2/blockquote.html

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


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 18


HTML5 Structural Elements (1 of 2)

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


HTML5 Structural Elements (2 of 2)

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


Hands-on practice 2.10
(page 49)
chapter2/structure.html

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


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 displayed in
text 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> small text Legal disclaimers and notices (“fine print”) displayed in 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> sup
text Displays a superscript as small text above the baseline

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


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 23


HTML Lists

Unordered List
Ordered List
Description List
formerly called a definition list

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


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 25


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

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


Hands-on practice 2.7
(Page 43)
chapter2/ul.html

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


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 28


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 29


Hands-on practice 2.6
(Pages 41-2)
chapter2/ol.html

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


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 31


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 32


Hands-on practice 2.8
(Pages 44-45)
chapter2/description.html

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


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 34


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 35
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 36


Hands-on practice 2.10
(page 49)
chapter2/structure.html

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


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


Hands-on Practice 2.9
( pages 46-47)
chapter2/design.html

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


HTML5 Structural Elements (1 of 2)

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


HTML5 Structural Elements (2 of 2)

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


Hands-on Practice 2.10 (page
49)
chapter2/structure.html

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


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 43


Hands-on Practice 2.11
(pages 50-51)
chapter2/casita.html

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


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 45


Hands-on practice 2.12
(page 52)
chapter2/anchor.html

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


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 47


Hyperlinks
Hands-On Practice

48
Hands-on practice 2.13
(pages 53-56)
chapter2/2.13/index.html
chapter2/2.13/services.html
chapter2/2.13/contact.html

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


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:[email protected]”>[email protected]</a>

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


Hands-on Practice 2.14 (Page
57)
chapter2/2.14/contact.html

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


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 52

You might also like