IPUB 100 Lesson 2 Instructor Mark Lamontagne Homework Review

IPUB 100 Lesson 2InstructorMark Lamontagne

Homework Review


ReviewCreate 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 ObjectivesIntro 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


Introduction to HTML5One 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>


HTML5 Rethinks how a Browser should view web pages


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


<div id=“header”></div>

<div id=“sidebar”>

</div><div id=“content”></div>

<div id=“nav”> </div>

HTML


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


<header id=“header”></header>

Defines a header for a document or section

<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

<nav id=“mainnav” role=“navigation”> </nav>

<section id=“more content”></section>Represents a generic section of the

document or the application.

HTML


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


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.


Description Attribute<meta name="description" content="Contains information

about New Brunswicks Birds">


Revision DateA revision date tells search engines when the page was last

revised

<meta name="revised" content=”Birds of New Brunswick, 10/10/2012">


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


Relative and Absolute Paths


Absolute Paths<img src=“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/"


Relative PathsA 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")


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 pageIndex.html


Introduction to HTML NavigationWhen 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.


Standard html navigation bar<nav>

<ul>

<li><a href=“#”>your link</a></li>



<ul>

</nav>


Typography


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> and the closing tag will cease the effect.


Lets try a few.Create a new page and lets get some Lorem Ipsum 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>


<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


Link to a style sheetPlace the following between the <head> </head> tags of

your web page.

<link rel="stylesheet" type="text/css" href=”path to your css"/>


Questions thus far?


Lets go do some homework!

Documents

IPUB 100 Lesson 2 Instructor Mark Lamontagne Homework Review