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

2. FTP Does everybody have FTP working from his-or-her home computers or laptops?

3. Dreamweaver: Built-In Reference From the Menu Bar: Window > Results > Reference

4. Dreamweaver: Built-In Reference

5. Setting Up Your Portfolio Demo index.html file folders labs images research styles docs (etc, feel free to experiment with other folder names) root

6. Setting Up Your Portfolio Demo labs

7. Setting Up Your Portfolio Demo index.html

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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)

14. 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.

15. 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

16. 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

17. 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

18. 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

19. 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 2013 Email Me My Page My Article Some Information © Rex Winkus 2013 Email Me W3Schools tag

20. 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

21. 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

22. 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

23. 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

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