Transcript Basics of Web Design

Basics of Web Design
Chapter 8
More on Links, Layout, and Mobile
Key Concepts
Learning Outcomes

Code relative hyperlinks to web pages in folders within
a web site

Configure a hyperlink to a named fragment internal to a
web page

Configure images with captions using the HTML5 figure
and figcaption elements

Configure a collection of images to float across a web
page

Configure web pages with new HTML5 section, hgroup,
article, aside, and time elements

Apply techniques to ensure backward compatibility with
older browsers

Configure web pages for printing with CSS
Relative Links

So far, we have been keeping all of our HTML, CSS, and image
files all in the root directory.

This makes relative linking easy

<link rel=“stylesheet” href=“style.css”>

<img src=“david.jpg” alt=“Professor Portait” width=“214” height=“357”>

body { background-image: url(‘ptrbackground.jpg’); }

<a href=“activities.html”>Activities</a>

However, as sites grow bigger, keeping all the files in a single
root directory becomes unmanageable.

As web designers, we organize things in folder: a “css” folder
for stylesheets, an “images” folder for images, a “js” folder for
JavaScript files, and subfolders to organize our HTML files.

That’s good, but what does that do in terms of relative links?
Directory Structure
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Directory Structure
ROOT FOLDER
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Directory Structure
CHILD
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Directory Structure
CHILD
PARENT
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Directory Structure
CHILD
PARENT
GRANDCHILD
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Directory Structure
CHILD
PARENT
GRANDCHILD
GRANDPARENT
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
SAME
reviews.html
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
SAME
reviews.html
CHILD
music/index.html
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
SAME
reviews.html
CHILD
music/index.html
PARENT
../index.html
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
SAME
reviews.html
CHILD
music/index.html
PARENT
../index.html
GRANDCHILD
movies/dvd/reviews.html
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Relative URLs
SAME
reviews.html
CHILD
music/index.html
PARENT
../index.html
GRANDCHILD
movies/dvd/reviews.html
GRANDPARENT
../../reviews.html
examplearts
index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Linking to Fragment
Identifiers

A link to a part of a web page

Also called named fragments, fragment ids

There are two components to creating a link to a
fragment identifier

First, the element that identifies the named fragment of a
Web page. This required the id attribute


<div id=“top”> … </div>
Second, the anchor tag that links to the named fragment
of a Web page. This uses the href attribute.

<a href=“#top”>Back to Top</a>
Skip to Content
HTML5 Structural Elements

We introduced several HTML5 structural elements
earlier this semester: <header>, <nav>, and <footer>

Today, we are going to introduce several additional
HTML5 elements that are useful:


<figure> and <figcaption> elements

<section> element

<article> element

<aside> element

<time> element
Your book introduces an HTML5 element called
<hgroup>, the W3C removed the <hgroup> element from
the HTML5 standard back in 2013 while it was a
Candidate Recommendation.
<figure> Element

The <figure> element is used to specify self-contained
content, like images, illustrations, diagrams, photos,
code listings, etc.

It can also contain a single optional <figcaption>
element.

Usage example


<figure>
<img src=“lighthouseisland.jpg” width=“250”
height=“355” alt=“Lighthouse Island”>
</figure>
CSS is used to configure how the figure and optional
figcaption get displayed.
<figcaption> Elements

The <figcaption> element is used to define a caption for
a <figure> element.

It can be placed as the first or the last child of the
<figure> element>

Usage example

<figure>
<img src=“lighthouseisland.jpg” width=“250”
height=“355” alt=“Lighthouse Island”>
<br>
<figcaption>Island Lighthouse, Built in 1870</figcaption>
</figure>
Floating Images

HTML


<figure>
<img src=“photo1.jpg” alt=“Golden Gate Bridge”
width=“225” height=“168”>
<figcaption>Golden Gate Bridge</figcaption>
</figure>
CSS

figure { float: left; width: 230px; padding-bottom: 10px;
background-color: #EAEAEA; }
figcaption { text-align: center; font-style: italic;
font-family: Georgia, serif; }
<section> Element

The <section> element is used to define sections in a
document, such as chapters, headers, footers, or any
other sections of the document.

Usage example

<section>
<h2>W3C</h2>
<p>The World Wide Web Consoritum, or W3C, is a…</p>
</section>
<article> Element

The <article> element is used to specify independent,
self-contained content.

The content should make sense on it’s own and it should
be possible to distribute the content independently of
the rest of the site.

Potential sources for the <article> element include:

Forum post

Blog post

News story

comment
<aside> Element

The <aside> element is used to define some content aside
from the content it is placed in.

The content in an aside should relate to the surrounding
content.

Usage example

<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, FL.</p>
</aside>
<time> Element

The <time> element is used to define human-readable
dates/times.

The element should also be used to encode dates/times
in a machine-readable way so that user agents can offer
to add scheduled events to the user’s calendar and
search engines can produce smarter results.

The encoding of dates/times should be done with the
datetime attribute.

Usage examples

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14
20:00">Valentine’s Day</time>.</p>
datetime Attribute

The datetime attribute should be used to represent a
machine-readable date/time of the <time> element.

The syntax for the datetime attribute is:

<time datetime=“YYYY-MM-DDThh:mm:ss:TZD”>

<time <datetime=“PTDHMS”>
datetime Attribute

YYYY - year (e.g. 2011)

MM - month (e.g. 01 for January)

DD - day of the month (e.g. 08)

T or a space - a separator (required if time is also specified)

hh - hour (e.g. 22 for 10.00pm)

mm - minutes (e.g. 55)

ss - seconds (e.g. 03)

TZD - Time Zone Designator (Z denotes Zulu, also known as
Greenwich Mean Time)

P - a prefix for "Period"

D - a prefix for "Days"

H - a prefix for "Hours"

M - a prefix for "Minutes"

S - a prefix for "Seconds"
datetime Attribute

DATES:

<time datetime="1914"> <!-- means the year 1914 -->

<time datetime="1914-12"> <!-- means December 1914 -->

<time datetime="1914-12-20"> <!-- means 20 December 1914 -->

<time datetime="12-20"> <!-- means 20 December any year -->

<time datetime="1914-W15"> <!-- means week 15 of year 1914 -->
datetime Attribute

DATES AND TIMES:

<time datetime="1914-12-20T08:00">
<!-- means 20 December 1914 at 8am -->

<time datetime="1914-12-20 08:00">
<!-- also means 20 December 1914 at 8am -->

<time datetime="1914-12-20 08:30:45">
<!-- with minutes and seconds -->

<time datetime="1914-12-20 08:30:45.687">
<!-- with minutes, seconds, and milliseconds -->
datetime Attribute

TIMES:

<time datetime="08:00"> <!-- means 8am -->

<time datetime="08:00-03:00">
<!-- means 8am in Rio de Janeiro (UTC-3 hours) -->

<time datetime="08:00+03:00">
<!-- means 8am in Madagascar (UTC+3 hours) -->

DURATIONS:

<time datetime="P2D"> <!-- means a duration of 2 days -->

<time datetime="PT15H10M">
<!-- means a duration of 15 hours and 10 minutes -->
HTML5 Compatibility with
Older Browsers

CSS


header, hgroup, nav, footer, section, article, figure, figcaption,
aside { display: block; }
Use HTML5 Shim (aka HTML5 Shiv)

<!--[if lt IE 9]>
<script src="
http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
CSS Styling for Print

Create an external style sheet with the configurations for
browser display (what we have been doing to date).

Create a second external style sheet with the
configurations for printing.

Connect both of the external style sheets to the web page
using two <link> elements and the media attribute

<link rel="stylesheet" href="lighthouse.css" media="screen">

<link rel="stylesheet" href="lighthouseprint.css" media="print">
Print Styling Best Practices

Hide non-essential content


Configure font size and color for printing


nav { display: none; }
Use pt font sizes and use dark text color
Control page breaks

.newpage { page-break-before: always; }
page-break-before Property

The page-break-before property is used to specify
whether a page break should occur BEFORE a specified
element.

The property cannot be used on an empty div or on
absolutely positioned elements.

Use values of auto (default), always, or avoid.

auto lets the browser determine page breaks

always means to always insert a page break before the
element

avoid means to avoid a page break before the element, if
possible
page-break-after Property

The page-break-after property is used to specify
whether a page break should occur AFTER a specified
element.

The property cannot be used on an empty div or on
absolutely positioned elements.

Use values of auto (default), always, or avoid.

auto lets the browser determine page breaks

always means to always insert a page break after the
element

avoid means to avoid a page break after the element, if
possible
page-break-inside Property

The page-break-inside property is used to specify
whether a page break is allowed inside a specified
element.

The property cannot be used on absolutely positioned
elements.

Use values of auto (default), always, or avoid.

auto lets the browser determine page breaks

avoid means to avoid page break inside the element, if
possible
Summary

You coded relative hyperlinks to web pages in folders
within a website.

You coded a hyperlink to a named fragment internal to a
web page.

You configured images with captions using the HTML5 figure
and figcaption elements.

You configured a collection of images to float across a web
page.

You configured web pages with new HTML5 section, article,
aside, and time elements.

You applied techniques to ensure backward compatibility
with older browsers.

You configured web pages for printing with CSS.
Coding Examples
Questions?
Homework