Module 3

HTML Basics
Learning Objectives (1 of 2)

3.1 Describe HTML, XHTML, and HTML5

3.2 Identify the markup language in a web page document
3.3 Use the html, head, body, title, and meta elements to
code a template for a web page
3.4 Configure the body of a web page with headings,
paragraphs, line breaks, divs, lists, and blockquotes
3.5 Configure text with phrase elements
3.6 Configure a web page using new HTML5 header, nav,
main, and footer elements
Learning Objectives (2 of 2)

3.7 Configure special characters

3.8 Use the anchor element to link from page to page
3.9 Create absolute, relative, and e-mail hyperlinks
3.10 Code, save, and display a web page document
3.11 Test a web page document for valid syntax
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.
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.
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/

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
DTD Examples
Example HTML5 Web Page
Head & Body Sections
Head Section
Contains information that describes the web page document

Body Section
Contains text and elements that display in the web page document
Title Element Meta Element
Heading Element
Paragraph Element

Paragraph element

• Groups sentences and sections of text together.

• Block Display – Configures empty space above and
below
Line Break Element

Line Break element

• Stand-alone, or void tag

• Causes the next element or text to display on a new line

Blockquote Element

Blockquote element
• Indents a block of text for special emphasis

• Block Display – Configures empty space above and

below
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
text in 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
Proper Nesting

Code:

Browser display:
HTML Lists

• Unordered List
• Ordered List
• Description List formerly called a definition list
Unordered List

Displays a bullet, or list marker, before each entry in the

list.

Contains the unordered list

Contains an item in the list

Unordered List Example
Ordered List

Displays a numbering or lettering system to itemize the

information contained in the list

Contains the ordered list

• type attribute determines numbering scheme of list,
default is numerals

Contains an item in the list

Ordered List Example
Description List
Useful to display a list of terms and descriptions or a list of FAQ and
answers
•
Contains the description list
•
Contains a term/phrase/sentence
Configures empty space above and below the text
•
Contains a description of the term/phrase/sentence
‒ Indents the text
‒ Configures empty space above and below the text
Description List Example
Special Characters

• Display special characters such as quotes, copyright

symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
& &nbsp;
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
HTML5 Structural Elements (1 of 2)
HTML5 Structural Elements (2 of 2)
Anchor Element

• Specifies a hyperlink reference (href) to a file

• Text between the is displayed on the web

page.

• href Attribute
– Indicates the file name or URL
Absolute & Relative Hyperlinks

Absolute link
• Link to a different website

Relative link
• Link to pages on your own site
E-Mail Hyperlink

Automatically launch the default mail program configured

for the browser
If no browser default is configured, a message is displayed
 Site Map
• A site map represents the structure, or organization, of
pages in a website in a visual manner
• Each page in the website is represented by a box on the
site map
• The figure below displays the site map for a website that
contains a Home page and two content pages: a Services
page and a Contact page
 Site Map
• The Home page is at the top of the site map
• The second level in a site map shows the other main pages of the
website
• In this very small three-page website, the other two pages
(Services and Contact) are included on the second level
• The main navigation of a website usually includes hyperlinks to
the pages shown on the first two levels of the site map
Site Map – Example
• Let's practice and create three pages in the website shown in the
figure above: home page (index.html) with two content pages:
services page (services.html) and contact page (contact.html)
 Site Map – Example
• 1. Create a Folder: You will organize your own web design
work by creating a new folder for each website and storing
your files for that website in the new folder. Call the folder
‘Trillium’
• 2. Create the Home Page. Use the Trillium Media Design web
page.
a. The navigation hyperlinks will be located within the nav
element. You will edit the code within the nav element to
configure three hyperlinks:
• The text “Home” will hyperlink to index.html
• The text “Services” will hyperlink to services.html
• The text “Contact” will hyperlink to contact.html
 Site Map – Example
Write the code within the nav element as follows:
<nav>
<b><a href="index.html">Home</a> &nbsp;
<a href="services.html">Services</a> &nbsp;
<a href="contact.html">Contact</a>
</b>
</nav>
b. Save the index.html file in your Trillium folder. Test your
page in a browser
Site Map – Example
• 3. Create the Services Page: It is common practice to create a new web
page based on an existing page. You will use the index.html file as a starting
point for the new services page, shown in the figure below
 Site Map – Example
• Open your index.html file in a text editor and save the file as
services.html. Edit the code as follows:
a. In order to create a consistent header, navigation, and
footer for the web pages in this website, do not change the
code within the header, nav, or footer elements
b. Position your cursor in the body section and delete the code
and text between the opening and closing main tags. Code the
main page content (heading 2 and description list) for the
services page between the main tags
c. Save the services.html file in your Trillium folder. Test
your page in a browser.
Site Map – Example
• 4. Create the Contact Page. Use the index.html file as a starting point
for the new Contact page shown below. Open your index.html file in
a text editor and save the file as contact.html.
 Site Map - Example
• Edit the code as follows:
a. In order to create a consistent header, navigation, and footer for the
web pages in this website, do not change the code within the header,
nav, or footer elements
b. Position your cursor in the body section and delete the code and text
between the opening and closing main tags. Code the main page
content (heading 2 and description list) for the contact page between the
main tags
c. Save the contact.html file in your Trillium folder. Test your page in a
browser. Test your page by clicking each link. When you click the
“Home” hyperlink, the index.html page should display. When you click
the “Services” hyperlink, the services.html page should display. When
you click the “Contact” hyperlink, the contact.html page will display.
Writing Valid HTML

Check your code for syntax errors

• Benefit:
– Valid code → more consistent browser display
W3C HTML Validation Tool
• http://validator.w3.org
Summary

• This chapter introduced you to HTML.

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