1. IPUB 100 Lesson 2 Instructor Mark Lamontagne Homework Review

2. IPUB 100 Lesson 2 Instructor Mark Lamontagne Review Create html5 page on blackboard. Write an anchor element for Google. Show me how to make the title element bold. Make the text “My Site Name” a heading. Link an image called car.jpg in the images folder to the index.html page

3. IPUB 100 Lesson 2 Instructor Mark Lamontagne Learning Objectives Intro to HTML 5 HTML5 block-level element layouts (div, article, section, aside) Understanding Metadata Relative vs. Absolute paths Intro to HTML Navigation HTML 5 Typography

4. IPUB 100 Lesson 2 Instructor Mark Lamontagne Introduction to HTML5 One of my favorite changes with the introduction of html5 is the DOCTYPE declaration. This is what it used to look like:

5. IPUB 100 Lesson 2 Instructor Mark Lamontagne HTML5 Rethinks how a Browser should view web pages

6. IPUB 100 Lesson 2 Instructor Mark Lamontagne Containers. As we saw in assignment 1 the words on your web page follow the width of the window In the past the or element was used to define the building blocks of out web page

7. IPUB 100 Lesson 2 Instructor Mark Lamontagne HTML

8. IPUB 100 Lesson 2 Instructor Mark Lamontagne HTML5 focus’ on semantics and leaves the styling to CSS.

9. IPUB 100 Lesson 2 Instructor Mark Lamontagne Defines a header for a document or section Defines a header for a document or section Normally associated with the pages sidebar, however, it could also be used for content apart from the main article ie a pull quote or a box of links relating to an article. Normally associated with the pages sidebar, however, it could also be used for content apart from the main article ie a pull quote or a box of links relating to an article. Defines an article. It represents a self contained composition in a page, application, or site. I can be independently distributable or reusable Defines an article. It represents a self contained composition in a page, application, or site. I can be independently distributable or reusable Represents a generic section of the document or the application. HTML

10. IPUB 100 Lesson 2 Instructor Mark Lamontagne Metadata Meta tags allow you to provide metadata about your HTML pages in the head of your document. This can be very useful for search engines and can assist the "findability" of the information on your website. Findability is also refered to SEO Search Engine Optimization. Placing first on a google search is where we want to be!

11. IPUB 100 Lesson 2 Instructor Mark Lamontagne What is Metadata? Metadata is information about, or that describes your web page. One method is to provide Keywords. Remember to put spaces between your attributes.

12. IPUB 100 Lesson 2 Instructor Mark Lamontagne Description Attribute

13. IPUB 100 Lesson 2 Instructor Mark Lamontagne Revision Date A revision date tells search engines when the page was last revised

14. IPUB 100 Lesson 2 Instructor Mark Lamontagne Refresh Rate The refresh rate allows you to tell the browser how often to refresh the page. The value is in seconds. The refresh can also be used to redirect to a new page. this says in 5 sec redirect visitor to page differentpage.html

15. IPUB 100 Lesson 2 Instructor Mark Lamontagne Relative and Absolute Paths

16. IPUB 100 Lesson 2 Instructor Mark Lamontagne Absolute Paths An absolute URL - points to another web site href=“http://www.example.com/theme.css” Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.jpmlamontagne.com", you will generate two requests to the server. The server will first add a slash to the address, and then create a new request like this: href="http://www.jpmlamontagne.com/"

17. IPUB 100 Lesson 2 Instructor Mark Lamontagne Relative Paths A relative URL - points to a file within a web site (like href=“themes/theme.css") A relative URL - points to a file within a web site in relationship to where you are in a site (like href=”../themes/theme.css")

18. IPUB 100 Lesson 2 Instructor Mark Lamontagne images finch.jpg eagle.jpg css mainstyle.css Iefix.css pages gallery.html form.html From index.html the relative path to finch.jpg would be: “images/finch.jpg” From gallery.html the relative path would be: “../images/finch.jpg” My home page Index.html My home page Index.html

19. IPUB 100 Lesson 2 Instructor Mark Lamontagne Introduction to HTML Navigation When surrounded with an element, almost and visual item can be used as a link. Most often we will see images or text. Creating the functional part of the link is accomplished in html through use of html lists. The design part is done with css.

20. IPUB 100 Lesson 2 Instructor Mark Lamontagne Standard html navigation bar your link

21. IPUB 100 Lesson 2 Instructor Mark Lamontagne Typography

22. IPUB 100 Lesson 2 Instructor Mark Lamontagne Application of a html Element to Text The application of elements to text is really quite simple. Place the opening tag at the start of the text you wish to affect and the closing tag will cease the effect.

23. IPUB 100 Lesson 2 Instructor Mark Lamontagne Lets try a few. Create a new page and lets get some Lorem Ipsum for content. This text is strong This text is emphasized This is computer output This is subscript and superscript this is small text

24. IPUB 100 Lesson 2 Instructor Mark Lamontagne The HTML tag is used for specifying a line break opportunity. The tag can be used on very long words or other long strings of text with no spaces. Without the tag, these long strings of text could either wrap in strange place (making it difficult to read), or not wrap at all

25. IPUB 100 Lesson 2 Instructor Mark Lamontagne Link to a style sheet Place the following between the tags of your web page.

26. IPUB 100 Lesson 2 Instructor Mark Lamontagne Questions thus far?

27. IPUB 100 Lesson 2 Instructor Mark Lamontagne Lets go do some homework!