3. XPXPXPXPXPDisplaying an HTML File
• As you continue modifying the HTML code, you should
occasionally view it with your Web browser to verify that you
have not introduced any errors
• You may want to view the results using different browsers to
check for compatibility
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 3
4. XPXPXPXPXP
• Article
• Aside
• Footer
• Header
• Nav
• Section
• Blockquote
• Lists – description, un/ ordered lists
• Character sets
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 4
5. XPXPXPXPXPWhite Space and HTML
• HTML file documents are composed of text characters and
white space
• White space is the blank space, tabs, and line breaks within the
file
• HTML treats each occurrence of white space as a single blank
space
• You can use white space to make your document more
readable
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 5
6. Jigsaw: each group will
become the “experts” on
the assigned HTML
element
Groups will then report back to the group and
teach the important concepts to other students.
6
8. XPXPXPXPXPHTML Headings
• Important in HTML documents
• Defined with <h1> to <h6> tags
– <h1> defines the most important heading.
– <h6> defines the least important heading.
• Don't use headings to make text BIG or bold.
• Search engines use headings to index the structure and content
of web pages.
• use headings to show the document structure.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 8
9. XPXPXPXPXPHTML Paragraphs <p>
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 9
10. XPXPXPXPXPHTML Horizontal Line <hr>
• HTML Lines
• The <hr> tag creates a horizontal line in an HTML page.
• The hr element can be used to separate content:
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 10
11. XPXPXPXPXPHTML Line Breaks <br>
• Use the <br> tag if you want a line break (a new line) without
starting a new paragraph:
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 11
The <br> element is an empty HTML element. It has no end tag.
12. XPXPXPXPXPHTML Preformatted Text <pre>
• displayed in a fixed-width font (usually Courier)
• preserves both spaces and line breaks.
• Use the <pre> element when displaying text with unusual
formatting, or some sort of computer code.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 12
13. XPXPXPXPXPHTML Text Formatting
• To apply bold or italic text
• HTML uses tags like <b> and <i> for formatting output, like text.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 13
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that the user
understands as "important". Today, all major browsers render strong as bold and em
as italics. However, if a browser one day wants to make a text highlighted with the
strong feature, it might be cursive for example and not bold!
14. XPXPXPXPXP
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 14
Tag Description How It Looks
<b> Defines bold text This text is bold
<em> Defines emphasized text This text is emphasized
<i>
Defines a part of text in an
alternate voice or mood
This text is italic
<small> Defines smaller text This text is small
<strong> Defines important text This text is strong
<sub> Defines subscripted text
This is subscript and superscript
<sup> Defines superscripted text
<ins> Defines inserted text
This is inserted and deleted
<del> Defines deleted text
<mark>
Defines marked/highlighted
text
HTML Text Formatting Tags
15. XPXPXPXPXPHTML Links <a>
• Hyperlink: (link) a word, group of words, or
image that you can click on to jump to another
document; when you move the cursor over a link in a Web
page, the arrow will turn into a little hand.
• href attribute: indicates the link's
destination.
• links will appear as follows in all browsers:
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red
15
16. XPXPXPXPXPHTML Link Syntax
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 16
Tip:
The "Link text" doesn't have to be text. It can be an image or any other HTML element.
17. XPXPXPXPXPHTML Hyperlink Attributes
• Target attribute specifies where to open the linked
document
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 17
“_blank” - will open the linked document in a new browser window or a new tab
18. XPXPXPXPXPHTML Links - The id Attribute
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 18
The id attribute can be used to create a bookmark inside an HTML document.
Tip:
Bookmarks are not
displayed in any special
way. They are invisible to
the reader.
19. XPXPXPXPXPHTML Images <img>
• The <img> tag is empty - contains attributes only, and has no
closing tag.
• To display an image on a page, you need to use the src
attribute.
• Src = "source“ The value of the src attribute is the URL of the
image you want to display
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 19
20. XPXPXPXPXPHTML Layouts
• Multiple columns are created by using <div> or <table>
elements.
• CSS are used to position elements, or to create backgrounds or
colorful look for the pages.
• div element: a block level element used for grouping HTML
elements. <div>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 20
23. XPXPXPXPXPHTML Blocks
• HTML elements can be grouped together with <div> and
<span>.
• block level elements: normally start (and end) with a new line
when displayed in a browser.
– Examples: <h1>, <p>, <ul>, <table>
• inline elements: normally displayed without starting a new
line.
– Examples: <b>, <td>, <a>, <img>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 23
24. XPXPXPXPXPHTML <div>
• a block level element that can be used as a container for
grouping other HTML elements; browser display a line break
before and after
• When used password1
• with CSS, the <div> element can be used to set style attributes
to large blocks of content.
• common use of the <div> element, document layout.
• It replaces the "old way" of defining layout using tables. Using
<table> elements for layout is not the correct use of <table>.
The purpose of the <table> element is to display tabular data.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 24
25. XPXPXPXPXPHTML <span>
• The HTML <span> element is an inline element that can be
used as a container for text.
• The <span> element has no special meaning.
• When used together with CSS, the <span> element can be used
to set style attributes to parts of the text.
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 25
26. XPXPXPXPXPHTML Colors
• Colors are displayed combining RED, GREEN, and BLUE light.
• Color Values
– CSS colors are defined using a hexadecimal (hex) notation for the combination of
Red, Green, and Blue color values (RGB).
– The lowest value that can be given to one of the light sources is 0 (hex 00).
– The highest value is 255 (hex FF).
– Hex values are written as 3 double digit numbers, starting with a # sign.
26
29. XPXPXPXPXP
Marking Structural Elements
in HTML5
• To mark the page header, use the header element
• To mark the page footer, use the footer element
• To mark a main section of page content, use the section
element
• To mark a sidebar, use the aside element
• To mark an article, use the article element
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 29
33. XPXPXPXPXP
Working with
Grouping Elements
• Grouping elements are elements that contain content that is
viewed as a distinct block within the Web page
• Heading elements are block-level elements that contain the
text of main headings on the Web page
– <hn>content<hn>
– n is an integer between 1 and 6
• <h1> is the largest heading
• <h6> is the smallest heading
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 33
34. XPXPXPXPXPMarking Grouping Content
• To mark a heading, enter
<hn>content</hn>
where n is an integer from 1 to 6 and content is the text of heading
• To mark a paragraph, enter
<p>content</p>
• To mark a block quote, enter
<blockquote>content</blockquote>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 34
37. XPXPXPXPXPMarking a Block Quote
• The syntax for making an extended quote is
– <blockquote>content</blockquote>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 37
38. XPXPXPXPXPMarking an Address
• <address>content</address>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 38
39. XPXPXPXPXPMarking a List
• HTML supports three kinds of lists: ordered, unordered, and
description
• You use an ordered list for items that must appear in a
numerical order
• You use an unordered list for items that do not need to occur
in any special order
• One list can contain another list. This is called a nested list
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 39
40. XPXPXPXPXPDescription Lists
• The description list contains a list of terms, each followed by
the term’s description
• Web browsers typically display the definition description below
the definition term and slightly indented:
Basic Stick
Easiest stick to learn
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 40
41. XPXPXPXPXPApplying an External Style Sheet
• Style sheets are written in the Cascading Style Sheet (CSS) language
• To apply an external style sheet to a Web page, you create a link within
the document head to the style sheet file using the link element
<link href=”file” rel=”stylesheet” type=”text/css” />
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 41
42. XPXPXPXPXPLinking to a JavaScript File
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 42
44. XPXPXPXPXP
Using the Generic Elements
div and span
• HTML supports two such generic elements: div and span
– The div element is used to mark general grouping content
– The span element is used to mark general text-level content
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 44
47. XPXPXPXPXPFigures and Figure Captions
• In books and magazines, figures and figure captions are often placed
within boxes that stand aside from the main content of an article
• HTML5 introduced this type of object to Web page markup with the
figure and figcaption elements
<figure>
content
<figcaption>caption</figcaption>
</figure>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 47
48. XPXPXPXPXP
Working with Character Sets
and Special Characters
• Character sets come in a wide variety of sizes, based on the
number of symbols required for communication in the chosen
Language
– ASCII (American Standard Code for Information Interchange)
– Latin-1
– ISO 8859-1
– Unicode
– UTF-8
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 48
49. XPXPXPXPXP
Working with Character Sets
and Special Characters
• Character encoding associates each symbol from a character
set with a numeric value called the numeric character
reference
• Another way to insert a special symbol is to use a character
entity reference, in which a short memorable name is used in
place of the numeric character reference
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 49
50. XPXPXPXPXP
Working with Character Sets
and Special Characters
• To insert a symbol based on the encoding number, use the entity
&#code;
where code is the encoding number.
• To insert a symbol based on a character entity reference, use the entity
char;
where char is the name assigned to the character.
• To insert a nonbreaking space, use the following entity:
• To insert the < symbol, use the following entity:
<
• To insert the > symbol, use the following entity:
>
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 50
53. XPXPXPXPXPESSENTIAL QUESTION ANSWERED:
What are the structural elements
in HTML5 and how are they
used??
Tags, elements, containers,
New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 53
