![Page 1: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/1.jpg)
Web FoundationsMONDAY, SEPTEMBER 30, 2013
LECTURE 3 : COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP
![Page 2: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/2.jpg)
FTP Does everybody have FTP working fromhis-or-her home computers or laptops?
![Page 3: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/3.jpg)
Dreamweaver: Built-In Reference
From the Menu Bar: Window > Results > Reference
![Page 4: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/4.jpg)
Dreamweaver: Built-In Reference
![Page 5: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/5.jpg)
Setting Up Your Portfolio
Demo
• index.html file• folders
• labs• images• research• styles• docs• (etc, feel free to experiment
with other folder names)
root
![Page 6: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/6.jpg)
Setting Up Your Portfolio
Demo
labs
![Page 7: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/7.jpg)
Setting Up Your Portfolio
Demo
index.html
![Page 8: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/8.jpg)
Common Tags
Tags Description Example
<p></p> paragraph Creates a paragraph between the opening/closing tags followed by a line of white space
<p>This is the first paragraph line.</p><p>This is the second paragraph line.</p><p>This is the third paragraph line.</p><p>This is the fourth paragraph line.</p>
This is the first paragraph line.
This is the second paragraph line.
This is the third paragraph line.
This is the fourth paragraph line.
W3Schools: <p> tag
![Page 9: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/9.jpg)
Tags Description Example
<br> or <br />
line break The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.
This is the first line.<br>This is the second line.<br>This is the third line.<br>This is the fourth line.
This is the first line.This is the second line.This is the third line.This is the fourth line.
W3Schools: <br> tag
![Page 10: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/10.jpg)
Tags Description Example
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
heading tags Creates bold content of varying sizes, with the <h1> being the largest, and <h6> being the smallest, followed by a line of white space
<h1>This is the first heading line.</h1><h2>This is the second heading line.</h2><h3>This is the third heading line.</h3><h4>This is the fourth heading line.</h4><h5>This is the fifth heading line.</h5><h6>This is the sixth heading line.</h6>
This is the first heading line.This is the second heading line.
This is the third heading line.
This is the fourth heading line.
This is the fifth heading line.
This is the sixth heading line.
W3Schools: <h1> to <h6> tags
![Page 11: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/11.jpg)
Tags Description Example
<ol></ol><li></li>
ordered listlist item
Creates a numbered list, followed by a line of white space. You can also declare its start, order, and the type of list using 1 (default), A, a, I (upper case Roman numeral), I (lower case roman numeral)
<ol> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol><ol reverse> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol><ol start="10" type="I"> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol>
1. Apple2. Banana3. Cantaloupe
3. Apple2. Banana1. Cantaloupe
X. AppleXI. BananaXII. Cantaloupe
W3Schools: <ol> tag
![Page 12: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/12.jpg)
Tags Description Example
<ul></ul><li></li>
unordered listlist item
Creates a bulleted list, followed by a line of white space. You can also declare its type using CSS and the list-style-type property
<ul> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ul>
<ul> <li>Apple</li> <ul> <li> Red Delicious</li> <li> Granny Smith</li> </ul> <li>Banana</li> <li>Cantaloupe</li></ul>
• Apple• Banana• Cantaloupe
• Appleo Red Deliciouso Granny Smith
• Banana• Cantaloupe
W3Schools: <ul> tag
![Page 13: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/13.jpg)
Back before HTML5, if you wanted to design a page into sections you had to use the <div> or "division" tag and creating a separate "id" or "class" for each section you wanted (we'll talk about divs, ids, and classes a bit later)
![Page 14: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/14.jpg)
With HTML5, there are several new tags with this section functionality built in by default. You still need to position and format these sections using CSS, but you don't have to create separate or unique "classes" or "ids" anymore to do it.
![Page 15: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/15.jpg)
Tags Description Example
<header></header>
header section of a web page The <header> tag specifies a header for a document or section. The <header> element should be used as a container for introductory content or set of navigational links. You can have several <header> elements in one document. A <header> tag cannot be placed within a <footer>, <address> or another <header> element.
<!DOCTYPE html><html><body> <header> <h1>Rex Winkus's Portfolio</h1> </header> <h2>Week 1</h2> <p>Isn't it groovy?</p></body></html>
Rex Winkus's Portfolio
Week 1
Isn't it groovy?
W3Schools: <header> tag
![Page 16: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/16.jpg)
Tags Description Example
<nav></nav>
navigation section of a web page The <nav> tag defines a set of navigation links. Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.
<!DOCTYPE html><html><body><nav><a href="http://www.microsoft.com">Microsoft</a> |<a href="http://www.google.com">Google</a> |<a href="http://www.yahoo.com">Yahoo</a> |</nav></body></html>
Microsoft | Google | Yahoo
W3Schools: <nav> tag
![Page 17: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/17.jpg)
Tags Description Example
<main></main>
main section of a web page The <main> tag defines an element to be used for the identification of the main content area of a document.
<!DOCTYPE html> <html><head> <title>Using Main</title> </head> <body> <header><h1>My Page</h1></header> <nav> <a href="index.html">Home</a> | <a href="page2.html">Page 2</a></nav> <main> <h2>My Article</h2> <p>Some Information</p> <p>Some More Information</p> </main> </body> </html>
My Page
Home | Page 2
My Article
Some Information
Some More Information
![Page 18: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/18.jpg)
Tags Description Example
<main></main>
main section of a web page The <main> tag defines an element to be used for the identification of the main content area of a document.
<!DOCTYPE html> <html><head> <title>Using Main</title> </head> <body> <header><h1>My Page</h1></header> <nav> <a href="index.html">Home</a> | <a href="page2.html">Page 2</a></nav> <main> <h2>My Article</h2> <p>Some Information</p> <p>Some More Information</p> </main> </body> </html>
My Page
Home | Page 2
My Article
Some Information
Some More Information
![Page 19: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/19.jpg)
Tags Description Example
<footer></footer>
footer section of a web page A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
<html><head> <title>Using A Footer</title> </head> <body> <header><h1>My Page</h1></header> <main> <h2>My Article</h2> <p>Some Information</p></main> <footer><p>© Rex Winkus 2013 <a href="mailto:[email protected]">Email Me</a><p></footer> </body> </html>
My Page
My Article
Some Information
© Rex Winkus 2013 Email Me
W3Schools <footer> tag
![Page 20: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/20.jpg)
Tags Description Example<article></article>
article section of a web page The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
<html><head> <title>Using Article</title> </head> <body> <header><h1>My Page</h1></header> <main> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article></main> </body> </html>
My Page
My First Article
Some Information
My Second Article
Some Content
W3Schools <article> tag
![Page 21: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/21.jpg)
Tags Description Example<section></section>
Defines a section of a web page The <section> tag defines sections in a document, such as chapters, headers, footers, or sections
<body> <header><h1>My Page</h1></header> <main> <section><h1>Articles</h1> <ul> <li>My First Article</li> <li>My Second Article</li> </ul> </section> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article></main> </body>
My Page
Articles• My First Article• My Second Article
My First Article
Some Information
My Second Article
Some Content
W3Schools <section> tag
![Page 22: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/22.jpg)
Tags Description Example<aside></aside>
Defines an aside section of a web page The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.
<body> <header><h1>My Page</h1></header> <main> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article> <aside><h3>An Interesting Fact…</h3> <p>Some Interesting Information</p> </aside></main> </body>
My Page
My First Article
Some Information
My Second Article
Some Content
An Interesting Fact…
Some Interesting Information
W3Schools <aside> tag
![Page 23: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/23.jpg)
Tags Description Example<div></div>
A division section of a web page The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
<body> <header><h1>My Page</h1></header> <main><article><h2>My First Article</h2> <p>Some Information</p></article><article><<h2>My Second Article</h2> <p>Some Content</p></article><div style="color:red"><h3>An Interesting Fact…</h3> <p>Some Interesting Information</p></div></main> </body>
My Page
My First Article
Some Information
My Second Article
Some Content
An Interesting Fact…
Some Interesting Information
W3Schools <div> tag
![Page 24: Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649e7a5503460f94b7a2a9/html5/thumbnails/24.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Putting It All Together</title></head><body>
<header><h1>My Page</h1></header><nav>
<a href="index.html">Home</a></nav><main>
<article><h2>My Article</h2><p>Some Content</p>
</article><aside>
<p>More information</p></aside>
</main> <footer><p>© Rex Winkus 2013 <a href="mailto:[email protected]">Email Me</a><p></footer></body></html>