chapter 2 html basics key concepts copyright © 2013 terry ann morris, ed.d 1
TRANSCRIPT
Chapter 2HTML 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 SectionContains 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 unlessyou are building a list, then the list item tags
are always inside the list tagsOR 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 tagCalled 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 pageIn 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 emphasisSemantically 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 listtype attribute determines numbering scheme of listdefault 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> tagContains the definition list
The dt Element (block)<dt> tagContains a term or name
The dd Element (block)<dd> tagContains a definition or descriptionIndents 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 pageUse 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 elementInline display elementSpecifies a hyperlink reference (href) to a fileText 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 linkLink to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative linkLink to pages on your own siteRelative 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 errorsBenefit:
○ Valid code more consistent browser display
W3C HTML Validation Toolhttp://validator.w3.org
Additional HTML5 Validation Toolhttp://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.