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

FTP Does everybody have FTP working from his-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

Setting Up Your Portfolio Demo labs

Setting Up Your Portfolio Demo index.html

Common Tags TagsDescriptionExample paragraphCreates a paragraph between the opening/closing tags followed by a line of white space This is the first paragraph line. This is the second paragraph line. This is the third paragraph line. This is the fourth paragraph line. 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: tag

TagsDescriptionExample or line breakThe tag inserts a single line break. The tag is an empty tag which means that it has no end tag. This is the first line. This is the second line. This is the third line. 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: tag

TagsDescriptionExample heading tagsCreates bold content of varying sizes, with the being the largest, and being the smallest, followed by a line of white space 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. 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: to tags

TagsDescriptionExample ordered list list 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) Apple Banana Cantaloupe Apple Banana Cantaloupe Apple Banana Cantaloupe 1.Apple 2.Banana 3.Cantaloupe 3. Apple 2. Banana 1. Cantaloupe X. Apple XI. Banana XII. Cantaloupe W3Schools: tag

TagsDescriptionExample unordered list list 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 propertylist-style- type Apple Banana Cantaloupe Apple Red Delicious Granny Smith Banana Cantaloupe Apple Banana Cantaloupe Apple o Red Delicious o Granny Smith Banana Cantaloupe W3Schools: tag

Back before HTML5, if you wanted to design a page into sections you had to use the 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.

TagsDescriptionExample header section of a web pageThe tag specifies a header for a document or section. The element should be used as a container for introductory content or set of navigational links. You can have several elements in one document. A tag cannot be placed within a, or another element. Rex Winkus's Portfolio Week 1 Isn't it groovy? Rex Winkus's Portfolio Week 1 Isn't it groovy? W3Schools: tag

TagsDescriptionExample navigation section of a web pageThe tag defines a set of navigation links. Not all links of a document must be in a element. The element is intended only for major block of navigation links. Microsoft | Google | Yahoo | Microsoft | Google | Yahoo W3Schools: tag

TagsDescriptionExample main section of a web pageThe tag defines an element to be used for the identification of the main content area of a document. Using Main My Page Home | Page 2 My Article Some Information Some More Information My Page Home | Page 2 My Article Some Information Some More Information

TagsDescriptionExample main section of a web pageThe tag defines an element to be used for the identification of the main content area of a document. Using Main My Page Home | Page 2 My Article Some Information Some More Information My Page Home | Page 2 My Article Some Information Some More Information

TagsDescriptionExample footer section of a web pageA footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. Using A Footer My Page My Article Some Information © Rex Winkus Me My Page My Article Some Information © Rex Winkus Me W3Schools tag

TagsDescriptionExample article section of a web pageThe 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. Using Article My Page My First Article Some Information My Second Article Some Content My Page My First Article Some Information My Second Article Some Content W3Schools tag

TagsDescriptionExample Defines a section of a web pageThe tag defines sections in a document, such as chapters, headers, footers, or sections My Page Articles My First Article My Second Article My First Article Some Information My Second Article Some Content My Page Articles My First Article My Second Article My First Article Some Information My Second Article Some Content W3Schools tag

TagsDescriptionExample Defines an aside section of a web pageThe tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content. My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information W3Schools tag

TagsDescriptionExample A division section of a web pageThe tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS. My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information W3Schools tag

Putting It All Together My Page Home My Article Some Content More information © Rex Winkus Me