Embed Size (px)
Citation preview
Copyright © Terry Felke-Morris
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH
HTML5
Chapter 2Key Concepts
1Copyright © Terry Felke-Morris
Copyright © Terry Felke-Morris
THE 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>
2
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.2
heading.html
3
Copyright © Terry Felke-Morris
PARAGRAPH ELEMENT
Paragraph element<p> …paragraph goes here… </p>
Groups sentences and sections of text together.
Configures a blank line above and below the paragraph
4
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.3
paragraph.html
5
Copyright © Terry Felke-Morris
LINE BREAK ELEMENT
Line Break element Stand-alone, or void tag
XHTML syntax: <br /> HTML syntax: <br>
…text goes here <br>This starts on a new line….
Causes the next element or text to display on a new line
6
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.4
linebreakxhtml.html
7
Copyright © Terry Felke-Morris
BLOCKQUOTE ELEMENT
Blockquote element Indents a block of text for special
emphasis
<blockquote>
…text goes here…
</blockquote>
8
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.5
blockquote.html
9
Copyright © Terry Felke-Morris
Indicate the context and meaning of the text
PHRASE ELEMENTS
10
Copyright © Terry Felke-Morris
HTML LISTS
Unordered List Ordered List Description List
formerly called a definition list
11
Copyright © Terry Felke-Morris
UNORDERED LIST Displays a bullet, or list marker, before
each entry in the list. <ul>
Contains the unordered list type attribute determines the type of bullet
point default type is disc (but depends on the
browser)
<li>Contains an item in the list
12
Copyright © Terry Felke-Morris
UNORDERED LIST EXAMPLE
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
13
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.6
ulsquare.html
14
Copyright © Terry Felke-Morris
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
15
Copyright © Terry Felke-Morris
ORDERED LIST EXAMPLE
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
16
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.7
ol.html
17
Copyright © Terry Felke-Morris
DESCRIPTION LISTUseful 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/sentenceConfigures 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
18
Copyright © Terry Felke-Morris
DESCRIPTION LIST EXAMPLE
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
19
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.8
description.html
20
