ipub 100 lesson 2 instructor mark lamontagne homework review
Post on 25-Dec-2015
219 Views
Preview:
TRANSCRIPT
IPUB 100 Lesson 2InstructorMark Lamontagne
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
IPUB 100 Lesson 2InstructorMark Lamontagne
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
IPUB 100 Lesson 2InstructorMark Lamontagne
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>
IPUB 100 Lesson 2InstructorMark Lamontagne
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
IPUB 100 Lesson 2InstructorMark Lamontagne
<div id=“header”></div>
<div id=“sidebar”>
</div><div id=“content”></div>
<div id=“nav”> </div>
HTML
IPUB 100 Lesson 2InstructorMark Lamontagne
<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
IPUB 100 Lesson 2InstructorMark Lamontagne
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!
IPUB 100 Lesson 2InstructorMark Lamontagne
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.
IPUB 100 Lesson 2InstructorMark Lamontagne
Description Attribute<meta name="description" content="Contains information
about New Brunswicks Birds">
IPUB 100 Lesson 2InstructorMark Lamontagne
Revision DateA revision date tells search engines when the page was last
revised
<meta name="revised" content=”Birds of New Brunswick, 10/10/2012">
IPUB 100 Lesson 2InstructorMark Lamontagne
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
IPUB 100 Lesson 2InstructorMark Lamontagne
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/"
IPUB 100 Lesson 2InstructorMark Lamontagne
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")
IPUB 100 Lesson 2InstructorMark Lamontagne
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
IPUB 100 Lesson 2InstructorMark Lamontagne
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.
IPUB 100 Lesson 2InstructorMark Lamontagne
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>
IPUB 100 Lesson 2InstructorMark 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 <strong>text you wish to affect</strong> and the closing tag will cease the effect.
IPUB 100 Lesson 2InstructorMark Lamontagne
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>
IPUB 100 Lesson 2InstructorMark Lamontagne
<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
IPUB 100 Lesson 2InstructorMark Lamontagne
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"/>
top related