Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key...
-
Upload
maliyah-kempton -
Category
Documents
-
view
222 -
download
2
Transcript of Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key...
![Page 1: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/1.jpg)
Copyright © Terry Felke-Morris
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH
HTML5
Chapter 2Key Concepts
1Copyright © Terry Felke-Morris
![Page 2: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/2.jpg)
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
![Page 3: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/3.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.2
heading.html
3
![Page 4: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/4.jpg)
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
![Page 5: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/5.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.3
paragraph.html
5
![Page 6: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/6.jpg)
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
![Page 7: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/7.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.4
linebreakxhtml.html
7
![Page 8: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/8.jpg)
Copyright © Terry Felke-Morris
BLOCKQUOTE ELEMENT
Blockquote element Indents a block of text for special
emphasis
<blockquote>
…text goes here…
</blockquote>
8
![Page 9: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/9.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.5
blockquote.html
9
![Page 10: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/10.jpg)
Copyright © Terry Felke-Morris
Indicate the context and meaning of the text
PHRASE ELEMENTS
10
![Page 11: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/11.jpg)
Copyright © Terry Felke-Morris
HTML LISTS
Unordered List Ordered List Description List
formerly called a definition list
11
![Page 12: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/12.jpg)
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
![Page 13: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/13.jpg)
Copyright © Terry Felke-Morris
UNORDERED LIST EXAMPLE
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
13
![Page 14: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/14.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.6
ulsquare.html
14
![Page 15: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/15.jpg)
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
![Page 16: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/16.jpg)
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
![Page 17: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/17.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.7
ol.html
17
![Page 18: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/18.jpg)
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
![Page 19: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/19.jpg)
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
![Page 20: Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.](https://reader034.fdocuments.us/reader034/viewer/2022051110/5518d108550346b31f8b5cbb/html5/thumbnails/20.jpg)
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 2.8
description.html
20