chapter2-lwrev
Download
Report
Transcript chapter2-lwrev
Chapter 2
HTML Basics
Key Concepts
Copyright © 2013
Terry Ann Morris, Ed.D
1
Learning Outcomes
Describe the anatomy of a web page
Format the body of a web page with block-level elements
including headings, paragraphs, lists, and blockquotes
Configure the text on a web page with inline elements
Configure text with phrase elements
Configure special entity characters, line breaks, and
horizontal rules
Configure a web page using new HTML5 header, nav, and
footer elements
Use the anchor element to link from page to page
Configure absolute, relative, and e-mail hyperlinks
Test a web page for valid HTML syntax
Page 19 corrected,
Hands-On Practice 1.1:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
<p>Hello World</p>
</body>
</html>
3
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>
HTML
<title> and <meta> tags
title and meta tags
are coded
between the
opening and
closing head tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
<p>Hello World</p>
</body>
</html>
Body element
Everything you
see in the browser
window has to be
in between the
body opening and
closing tags
So, for this page
all you will see is
Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
<p>Hello World</p>
</body>
</html>
Semantic Tagging
HTML tags are used to tag content
according to the purpose of the content
HTML tags are not used to tag content so
that it looks a certain way
Web Designers call this Semantic
Tagging
CSS will be used for all presentation
how the content looks or is formatted
7
display Property
All HTML elements are either Inline or Block display
elements
Inline and Block define how an element is displayed in
relation to other adjacent content
Display = inline
○ An inline element only takes up as much width as necessary,
and does not force line breaks; displayed next to adjacent
content.
Display = block
○ A block element is an element that takes up the full width
available, and has a line break before and after it; displayed on
separate line from adjacent content.
8
Nesting elements
Is is common practice to code elements
nested inside each other as long as the
interior nested elements are inline
elements
Example: <p><strong>this is bold text</strong></p>
Never include block elements inside other
block elements unless
you are building a list, then the list item tags
are always inside the list tags
OR the outer element is a div tag
9
The Heading Element (block)
<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>
The Paragraph Element (block)
<p> tag
Paragraph element
<p> …paragraph goes here… </p>
Groups sentences and sections of text together.
Configures empty space above and below the
paragraph
The Line Break Element (block)
<br> tag
Line Break element
Stand-alone tag
Called a void element in HTML5
…text goes here <br>
This starts on a new line….
Causes the next element or text to display on a
new line
The Horizontal Rule Element (block)
<hr> tag
Horizontal Rule element
void element
<hr >
Configures a horizontal line on the page
In HTML5, it should be used to indicate a
thematic break at the paragraph level
The Blockquote Element (block)
<blockquote>
Blockquote element
Indents a block of text for special emphasis
Semantically appropriate for long quotations
<blockquote>
…text goes here…
</blockquote>
Phrase Elements (inline)
Indicate the context and meaning of the text
Display inline with the text
Common Phrase Elements
<b></b>
Text is displayed in bold font
<strong></strong>
Text has strong importance and is displayed in bold
<i></i>
Text is displayed in italic font
<em></em>
Text has emphasis and is displayed in italic font
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
An inline element is not allowed to have a
block element nested inside of it!
16
HTML List Basics
Unordered List
Description List (XHTML Definition List)
Ordered List
Unordered List (block)
Displays information with bullet points
Unordered List Element (block)
<ul>
Contains the unordered list
List Item Element (block)
<li>
Contains an item in the list
Unordered List Example
<h1>My Favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Read</li>
</ul>
Ordered List
Conveys information in an ordered fashion
Ordered List Element (block)
<ol>
Contains the ordered list
type attribute determines numbering scheme of list
default is numerals
List Item Element (block)
<li>
Contains an item in the list
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Description List
Formerly called a definition list in XHTML and HTML 4.0
Uses:
Display a list of terms and descriptions
Display a list of FAQ and answers
The Description List element (block)
<dl> tag
Contains the definition list
The dt Element (block)
<dt> tag
Contains a term or name
The dd Element (block)
<dd> tag
Contains a definition or description
Indents the text
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
Special Entity Characters (inline)
Display special characters such as quotes,
copyright symbol, etc.
Character
©
<
>
&
Code
©
<
>
&
The div element (block)
<div>
Purpose:
Configure a specially formatted division or area of
a web page
Use for page organization, for example to
indicate left, center, or right columns
Block display with line break (empty space)
above and below the div
div element is unique because it can contain
other block display nested inside it
25
HTML5 Structural Elements
Header Element (block)
<header></header>
Contains the web page
document’s headings
Nav Element (block)
<nav></nav>
Contains web page
document’s main navigation
Footer Element (block)
<footer></footer>
Contains the web page
document’s footer
26
HTML5 Structural
Elements
Example file,
chapter 2\structure.html:
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<div> main content goes here </div>
<footer> document footer information goes here </footer>
</body>
27
The Anchor Element (inline)
<a>
The anchor element
Inline display 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
Web page document, photo, pdf, etc.
28
More on Hyperlinks
Absolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative link
Link to pages on your own site
Relative to the current page
<a href="index.html">Home</a>
29
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="http://yahoo.com" target="_blank">Yahoo!</a>
30
Email Hyperlinks
Automatically launch the default mail program
configured for the browser
If no browser default is configured,
a dialog box is displayed
<a href="mailto:[email protected]">[email protected]</a>
31
Writing Valid HTML
Check your code for syntax errors
Benefit:
○ Valid code
more consistent browser display
W3C HTML Validation Tool
http://validator.w3.org
Additional HTML5 Validation Tool
http://html5.validator.nu
Summary
This chapter provided an introduction to HTML.
HTML elements used for inline and block display
formatting were introduced.
You will use these skills over and over again as
you create web pages.