1 / 27

Homework Review

Homework Review. 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. Learning Objectives.

lefty
Download Presentation

Homework Review

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Homework Review

  2. 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. 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. Introduction to HTML5 • One of my favorite changes with the introduction of html5 is the DOCTYPE declaration. • <!DOCTYPE html> • This is what it used to look like: • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

  5. HTML5 Rethinks how a Browser should view web pages

  6. Containers. • As we saw in assignment 1 the words on your web page follow the width of the window • In the past the <div></div> or <span></span> element was used to define the building blocks of out web page

  7. HTML <div id=“header”> </div> <div id=“nav”> </div> <div id=“sidebar”> </div> <div id=“content”> </div>

  8. HTML5 focus’ on semantics and leaves the styling to CSS.

  9. HTML <header id=“header”> </header> Defines a header for a document or section <nav id=“mainnav” role=“navigation”> </nav> <aside id=“sidebar”> </aside> 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. <article id=“content”> </article> Defines an article. It represents a self contained composition in a page, application, or site. I can be independently distributable or reusable <section id=“more content”></section> Represents a generic section of the document or the application.

  10. 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. What is Metadata? • Metadata is information about, or that describes your web page. • One method is to provide Keywords. • <meta name="keywords" content=”birds, new brunswick, authors name,"> • Remember to put spaces between your attributes.

  12. Description Attribute • <meta name="description" content="Contains information about New Brunswicks Birds">

  13. Revision Date • A revision date tells search engines when the page was last revised • <meta name="revised" content=”Birds of New Brunswick, 10/10/2012">

  14. Refresh Rate • The refresh rate allows you to tell the browser how often to refresh the page. The value is in seconds. • <meta http-equiv="refresh" content="10"> • The refresh can also be used to redirect to a new page. • <meta http-equiv="refresh" content="5;url=/pages/differentpage.html" /> • this says in 5 sec redirect visitor to page differentpage.html

  15. Relative and Absolute Paths

  16. Absolute Paths • <imgsrc=“http://www.jpmlamontagne.com/images/cool-image.jpg”> • 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. 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. My home page Index.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”

  19. Introduction to HTML Navigation • When surrounded with an <a> </a> 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. Standard html navigation bar • <nav> <ul> <li><a href=“#”>your link</a></li> <li><a href=“#”>your link</a></li> <li><a href=“#”>your link</a></li> <ul> </nav>

  21. Typography

  22. 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 <strong>text you wish to affect</strong> andthe closing tag will cease the effect.

  23. Lets try a few. • Create a new page and lets get some LoremIpsum for content. • <p><strong>This text is strong</strong></p> • <p><em>This text is emphasized</em></p> • <p><code>This is computer output</code></p> • <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> • <small>this is small text</small>

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

  25. Link to a style sheet • Place the following between the <head> </head> tags of your web page. • <link rel="stylesheet" type="text/css" href=”path to your css"/>

  26. Questions thus far?

  27. Lets go do some homework!

More Related