Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING...

Web FoundationsMONDAY, SEPTEMBER 30, 2013

LECTURE 3 : COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP

FTP Does everybody have FTP working fromhis-or-her home computers or laptops?

Dreamweaver: Built-In Reference

From the Menu Bar: Window > Results > Reference

Dreamweaver: Built-In Reference

Setting Up Your Portfolio

Demo

• index.html file• folders

• labs• images• research• styles• docs• (etc, feel free to experiment

with other folder names)

root


Demo

labs


Demo

index.html

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

http://www.w3schools.com/tags/tag_p.asp


<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

http://www.w3schools.com/tags/tag_br.asp




<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

http://www.w3schools.com/tags/tag_hn.asp


<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

http://www.w3schools.com/tags/tag_ol.asp




<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

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://www.w3schools.com/tags/tag_ul.asp



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)

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.


<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

http://www.w3schools.com/tags/tag_header.asp


<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

http://www.w3schools.com/tags/tag_nav.asp




<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


<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

http://www.w3schools.com/tags/tag_footer.asp

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

http://www.w3schools.com/tags/tag_article.asp

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

http://www.w3schools.com/tags/tag_section.asp

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

http://www.w3schools.com/tags/tag_aside.asp

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

http://www.w3schools.com/tags/tag_div.asp

<!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>

Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING...

Documents

Transcript of Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING...