Scribd
Upload
35 views37 pages

Chapter 2

Word up

Uploaded by

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

Chapter 2

Word up

Uploaded by

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

Web Development & Design Foundations

with HTML5
Tenth Edition

Chapter 2
HTML Basics

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-1
Learning Outcomes
In this chapter, you will learn how to ...
• 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, lists, and blockquotes
• Configure text with phrase elements
• Configure a web page using structural elements
including header, nav, main, and footer
• Configure special characters
• Use the anchor element to link from page to page
• Create absolute, relative, and e-mail hyperlinks

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-4
What is HTML5 ?
• Newest version of HTML/XHTML
• Supported by modern browsers
• Adds new elements

Source: W3C http://www.w3.org/html/logo/

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

<!DOCTYPE html>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-8
Figure 2.3 Code displayed in Notepad. Courtesy
of Microsoft Corporation.

Title Element
Meta Element

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2-9
Figure 2.5 Web page displayed by Microsoft
Edge. Courtesy of Microsoft Corporation.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 14
Table 2.1 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;
text usually displayed in italics
<i> italicized text Text that has no extra importance but is styled in italics by
usage and convention
<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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 16
HTML Lists
Unordered List
Ordered List
Description List

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 18
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 22
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 23
Special Characters
• Display special characters such as quotes, copyright
symbol, etc.

Character Code
© &copy;

< &lt;

> &gt;

& &amp;

&nbsp;
Also see Table 2.3
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 24
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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 25
Figure 2.20 Wireframe for Casita Sedona

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 26
HTML5 Structural Elements (1 of 3)
header Element
<header></header>
Contains the web page
document’s headings
nav Element
<nav></nav>
Contains web page
document’s main navigation

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 27
HTML5 Structural Elements (2 of 3)
main Element
<main></main>
Contains the web page
document’s main content
footer Element
<footer></footer>
Contains the web page
document’s footer

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 28
Figure 2.21 Casita Sedona web page

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 29
HTML5 Structural Elements (3 of 3)
<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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 30
Figure 2.22 The blog page.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 31
A Element (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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 32
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="https://google.com" target="_blank">Search


Google</a>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 33
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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 34
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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 35
Hyperlinks
• Hands-On Practice

Figure 2.24 Site map

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 36
Summary
This chapter introduced you to HTML.
You will use these skills over and over again as you
create web pages.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 2 - 37

You might also like