Transcript a href - Faculty Web Hosting

1
Credits:© 2011-14 Pearson Education
Copyright (c) 2009 Prentice-Hall. All rights reserved.
Jozef Goetz, 2015
expanded by J. Goetz, 2015
Learning Outcomes

In this chapter, you will learn about:

Code relative hyperlinks to Web pages in folders within a Web site

Configure a hyperlink to a named anchor internal to a Web page

Configure images with CSS sprites

Configure three-column page layouts using CSS

Configure CSS for both screen and print display

Configure CSS for mobile display

Utilize CSS3 media queries to target mobile devices
Jozef Goetz, 2015
2
Creating Links
URL
Opening Tag
Jozef Goetz, 2015
Text that will
be highlighted
Closing Tag
3
HTML/XHTML <a> tag



The anchor tag
Used to specify a hypertext reference (href) to a web page
you want to display.
The text between the <a> and </a> is displayed on the
web page

href Attribute

used to indicate the document to link to
Syntax:
<a href=“URL”>text</a>
Absolute link
<a href=“http:// yahoo.com”>Yahoo</a>


indicates the protocol http:// being used
Relative link
4
<a href=“index.htm”>Home</a>

Jozef Goetz, 2015
4
More on Relative Linking


Absolute URLs include a full path - both
the domain name + the file name
 Domain name – the computer's unique
name on the Internet or
 The root directory on the same Web
server
Relative URLs – include only a file name
within the current directory.

Refer to files within the current directory
(position) on the same Web server
5
Jozef Goetz, 2015

URL refers to the same domain name
5
Anatomy of a URL



URL - Uniform Resource Locator
URLs are global addresses of documents and other
resources on the Web
Parts of URLs

there are three parts:



protocol - the way the page is accessed
host name ( = Web server name + domain name)
– the system on which the page is stored
directory & filename - location of the page on the
host system
protocol
host name
directory and filename
http://www.w3.org/TR/html4/intro/intro.html
6
Jozef Goetz, 2015
6
More on Relative Linking




7
Relative pathnames point to files based on their
locations relative to the current file (position.)
To specify relative pathnames

link to Web pages within your site

use UNIX-style pathnames regardless of the system

directory names are separated with a forward slash
(/)

use two dots (..) to refer to the (parent) directory
above the current directory
From the groomer directory:
<a href="contact.htm">Contact</a>
<a href="products/collars.htm">Collars</a>
<= Relative links
from the home
page: index.htm
//now from the collars.htm level

<a href="../index.htm">Home</a>

<a href="../services/bathing.htm">Dog Bathing</a>
7
Jozef Goetz, 2015
HOP 7.1
Linking Local Pages Using Relative and
Absolute Pathnames

Examples of Relative pathnames:






href=“index.html”
href=“resumes/jaden.html”
href=“jobs/software/javaprogrammer.html”
href=“../news/company.html”
href=“../../products/widget.html”
href=“../../../officers.html”
8
Jozef Goetz, 2015
8
Linking Local Pages Using Relative and
Absolute Pathnames

Absolute pathnames point to files
based on their absolute location on the
file system (root) or to other websites

begin with a forward slash (/)

Absolute pathnames:



Jozef Goetz, 2015
href=“/index.html”
href=“/resumes/jaden.html”
href=“/d/jobs/software/javaprogrammer.html
9
9
Linking Local Pages Using Relative and
Absolute Pathnames
 Which should you use?

Relative pathnames:
use to link between your documents
 can move the site from one server to
another and the links will still work -
portable


easier to maintain
Absolute pathnames

10
Jozef Goetz, 2015
easier on complicated sites but they are
not portable
10
Links to Other Documents on the Web

Linking to remote documents


these are documents that are not on the
system which you are currently
working
use the URL of the remote site
http://the.url.com/of/the/remote/page.html
11
Jozef Goetz, 2015
11
More on Relative Linking
12
Relative links from the Home
page: index.html
<a href="contact.html">Contact</a>
<a href="rooms/canyon.html">Canyon</a>
Relative links from the Canyon
page: rooms/canyon.html
<a href="../index.html">Home</a>
<a href="../events/weekend.html">Weekend</a>
Jozef Goetz, 2015
12
HOP 7.1 – starter Casita/Example
Jozef Goetz, 2015
13
HOP 7.1 – Casita solution
14
test all links from
the Juniper Room Page
Jozef Goetz, 2015
Linking to Specific Places
Within Documents

Anchors are special places that
you can link to inside documents.
Softfruits.html
Soft Fruits
Please choose a subtopic:
Softfruits.html
• Strawberries
Blackberries
• Cane Fruits
Blackberries grow on canes
• Blackberries
• Raspberries
Blueberries
• Loganberries
Blueberries grow on bushes in
colder climates
• Bush Fruits:
•Blueberries
•Huckleberries
Jozef Goetz, 2015
Strawberries
Strawberries are an herbaceous
plant
15
HTML Linking to Fragment Id (Identifier)
<a name=“top” id=“top”></a>
This line has
<a href="#top">Back To Top</a>
Clicking here takes you to the top of the page
(no need for an anchor named "top"
16
Jozef Goetz, 2015
Copyright (c) 2006 Prentice-Hall. All
rights reserved.
16
16
HTML/XHTML Internal Links
using the <a> tag


A link to a part of a web page
Also called bookmarks, named fragments, named anchors
2 components:
1. Establish target – named fragment:

identifies a bookmark or


named fragment of a web page.
This requires two attributes: the id attribute (for HTML/XHTML) and the
name (for Netscape 4) attribute.
<a name=“top” id=“top”></a>
or instead of “a” can be h1 or <div id=“content”>
2. Reference target - anchor tag (pointer) :
links to the bookmark or named fragment of a web page.

This uses the href attribute
<a href=“#top”>Back to Top</a>
Jozef Goetz, 2015
17 or:
<a href=“#content”>Skip to content</a>
17
Linking to Specific Places
Within Documents – Internal Links

Creating anchors and linking to them



creating an anchor is similar to creating a link
the <a> tag is used
the attribute “name” (or “id” ) is used
instead of “href”
 the “name” (or “id” ) attribute takes a
key word to uniquely identify the
anchor on the page
 anchors require text between the
opening and closing tags
18
Jozef Goetz, 2015
18
Effects of Within-Page Linking
19
This line has
<a href="#duck">Can a duck fly if it's wet?</a>
Clicking here takes you to the "duck" line
This line has
<a name="duck">Can a duck fly if it’s wet?</a>
19
Jozef Goetz, 2015
Copyright (c) 2006 Prentice-Hall. All
rights reserved.
19
Creating and Linking to Within-Page Targets
1. The <a> tag's name attribute



Creates a target at the location of the anchor tag
Commonly used on longer Web pages
Syntax:
<a name="specific choice">link text</a>

Example anchors


<a name=“education”>Education</a>
<a name=“dinner”>Dinner</a>
2. The pound (#) symbol in an href attribute
References one of the named anchor tags
Value after the pound sign must be identical to name of an
anchor



Syntax:
20
Jozef Goetz, 2015
<a href=“#specific choice">link text</a>
20
20
Linking to Specific Places
on another Documents/Website
1. Linking to anchors in the

21
same page
use the hash mark (#) and the anchor name only
<a href=“#dinner”>What’s for dinner?</a>
2.Linking to anchors on another page


use the same form as you would to link to the page
add a hash mark (#) and the name of the anchor at the end
<a href=“filename.html#education”>Education</a>
3. Linking to anchors on another website by
appending a hash mark (#) and name value
<a21href=“URL/filename.html#name”>What’s for dinner?</a>
Jozef Goetz, 2015
HOP 7.2 start: starter1.html output: favorites.html 22
22
Jozef Goetz, 2015
Opening a Link
in a New Browser Window

23
The target attribute can be used on the
anchor tag to open a link in a
browser window.
new
<a href="http://yahoo.com"
target="_blank">Yahoo!</a>
23
Jozef Goetz, 2015
=>HOP 7.3 p.
HOP 7.3
Jozef Goetz, 2015
24
Remainder: Email Links using the <a> tag

An e-mail link will automatically
launch the default mail program
configured for the browser:
<a
href=“mailto:[email protected]”>[email protected]
</a>
25
Jozef Goetz, 2015
25
Links in HTML/XHTML 2.0

In HTML/XHTML 1.x, href attributes are
confined to anchor tags




26
Example, to make a header with a link requires:
<a href="http://webdesign.about.com/"><h2>Web Design
at About</h2></a>
In HTML/XHTML 2.0, any tag can
include an href attribute
Example, to make a header with a link:


<h2 href="http://webdesign.about.com/">Web Design at
About</h2>
No anchor tag necessary
26
Jozef Goetz, 2015
Copyright (c) 2006 Prentice-Hall. All
rights reserved.
26
HTML5 Block Anchor

27
Configure block display elements (e.g. h1, div or
paragraph) within a hyperlink
<a href="http://www.w3.org/TR/html-markup">
<h1>HTML5 Reference</h1>
<p>Bookmark this site for a handy HTML5 reference.</p>
</a>
27
Jozef Goetz, 2015
Telephone & Text Message Hyperlinks
28
Telephone Scheme
<a href="tel:888-555-5555">Call 888-555-5555</a>

Many mobile browsers will initiate a phone call when the
hyperlink is clicked.
SMS Scheme
<a href="sms:888-555-5555">Text 888-555-5555</a>

Many mobile browsers will initiate a text message to
the phone number when the hyperlink is clicked.
Jozef Goetz, 2015
28

Sprite


CSS Sprites HOP 7.4
29
an image file that contains multiple small
graphics
+’s: saves download time b/c



Reduced bandwidth
Reduced the # of http request by the browser
Quick display of individual images in the sprite
29
Jozef Goetz, 2015
CSS Sprites HOP 7.4 ed7
Jozef Goetz, 2015
30
Checkpoint 7.1 p.659
1. Describe a reason to organize the files (images,
media, file function - Web page or scripts, Web
site sections – products, services etc in a Web site
using folder and subfolders.


Increase productivity when a project team is
developing a large Web site,
easier to find different files types
State a reason to use an unordered list to configure
navigation links.

Jozef Goetz, 2015
A menu is a list of links, so it is semantically
correct to configure using an unordered list. This
technique is popular among Web developers
31
Checkpoint 7.1 visit p.659
2. Which attribute configures a hyperlink to
open the file in a new browser window or
tab?
 The target attribute
3. State an advantage of using CSS sprites in a
website



Jozef Goetz, 2015
Reduced bandwidth
Reduced the # of http request by the browser
Quick display of individual images in the sprite
32
Three Column Page Layout

Often a web page layout will consist of a header across (logo) the
top of the page with three columns below:




navigation - left column => float:left
HOP 7.5
aside or sidebar – right column => float:right and
content – center column => occupies the room after the
left and right columns float
If you are thinking about this layout as a series of boxes —you’re
thinking along the right lines for configuring pages using CSS!
Jozef Goetz, 2015
33
Three Column
Layout


container sets default
background color, text color,
and an minimum width
Left column navigation




margin: 0 200px 0 160px;
Footer – clears the float

Jozef Goetz, 2015
float: right;
width:200px;
Main - Center column – uses the
remaining screen room available
room after the floating columns
display


float: left;
width:150px;
Right column content


34
clear:both;
34
Three Column Page Layout
35
HOP 7.5
in wildflowers3
folder
landmarks on t
web page for
assistive techno
reader;
goal: increase
accessibility
jump to main
Jozef Goetz, 2015
Three Column Page Layout
36
HOP 7.5
in wildflowers3
folder
Jozef Goetz, 2015
CSS Styling for Print



37
Create an external style sheet with
the configurations for browser display.
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>
tags.
<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" />
<link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />
Jozef Goetz, 2015
Print Styling Best Practices HOP 7.6

38
Hide non-essential content like navigation
Example:
nav { display: none; }

Configure font size and color for printing


Use pt font sizes, use dark text color e.g. #000000, background #FFFFFF
Control page breaks p.311

page-break-before or page-break-after a designed element:
Example:
.newpage { page-break-before: always; }

Print URLs for hyperlinks

Property content alone with the :after and :before pseudo elements to generate
content
Example:
#aside a:after { content: " (" attr(href) ") "; } /*attr(x) returns the value of the
HTML attribute */
Jozef Goetz, 2015
38
CSS Styling for Print HOP 7.6
index.html
39
wildflowerprint.css
display in black
the URL for a hyperlink
wildflower.css
no in wildflowerprint.css
^ display in bla
the URL for a
starters: wildflower.css, index.html output: wildflowerprint.css and index.html
Jozef Goetz, 2015
7.5 Designing CSS Styling for the Mobile
Web

40
Three Approaches to Mobile Web p.315:
1.
Develop a new mobile site with a .mobi TLD.
Visit http://jcp.com to see in practice
2.
Create a separate Web site hosted within your
current domain targeted for mobile users. e.g.
see next page www.m.whitehouse.gov
3. Use CSS to create a style sheet to configure
your current Web site for display on mobile devices
and desktop display
<link href="mobile.css" rel="stylesheet"
type="text/css" media="handheld" />
- the attribute handheld is not well supported
Jozef Goetz, 2015
Mobile Web Limitations

Small Screen Size

Low bandwidth, slow connection

Large images are not displayed

Limited fonts

Limited color

Awkward controls



Single column
Mostly text displayed
Hyperlinks displayed under the header

Lack of Flash support

Limited processor and memory

Cost per kilobyte
Jozef Goetz, 2015
www.m.whitehouse.gov
41
Mobile Web Design Best Practices

42
Recommended by the W3C


http://www.w3.org/TR/mobile-bp
http://www.w3.org/2007/02/mwbp_flip_cards.html

Optimize Layout, Navigation, Graphics, and Text for Mobile Use

Design for One Web – (p.226) it refers to a single
resource (the same web page) that is configured for optimal
display on multiple types of devices.

Responsive Web Design – (p.226) coding techniques (fluid
layouts, flexible images and media queries) for
configuring a web page to display well at various screen
resolutions and various display sizes – see a gallery of
sites at http://mediaqueri.es/
Jozef Goetz, 2015
Design Best Practice for Mobile Web p.316

One column design

Avoid floats, tables, frames

Descriptive page title

Descriptive heading tags

Optimize images

Descriptive alt text for images

Eliminate unneeded images

Navigation in lists

Provide “Skip to Content” hyperlink

Provide “Back to Top” hyperlink
Jozef Goetz, 2015
43
Resolution:
•from 320x240 BlackBerry Pearl
•480x800 Android HTC Desire, Windows HTC
Pro,
•640x690 iPhone4
•640x1136 iPhone5
•1920x1080 iPhone6
•720x1280 Samsung Galaxy SIII
•2560x1440 Samsung Galaxy S6 edge
•2560x1440 Samsung Note
Optimize Layout for Mobile Use

Single column design

Limit scrolling to one direction

Use heading elements

Use lists

Avoid using tables

Provide labels for form controls

Avoid using pixel units in style sheets

Avoid absolute positioning in style sheets
Hide content that is not essential for mobile use.
 Goetz, 2015
Jozef
44
Optimize Navigation for Mobile Use




Provide minimal navigation near the
top of the page
Provide consistent navigation
Avoid hyperlinks that open files in
new windows or pop-up windows
Try to balance both the number of
hyperlinks on a page and the number
of levels needed to access information
Jozef Goetz, 2015
45
Optimize Graphics for Mobile Use

Avoid displaying images that are wider
than the screen width

Configure alternate, small optimized
background images

Some mobile browsers will downsize all
images, so avoid using images that
contain text

Avoid the use of large graphic images

Specify the size of images

Provide alternate text for graphics and
other non-text elements.
Jozef Goetz, 2015
46
Optimize Text for Mobile Use




Configure good contrast between
text and background colors
Use common font typefaces
Configure font size with em units
or percentages
Use a short, descriptive page title
Jozef Goetz, 2015
47
Viewport Meta Tag


48
Default action for most mobile devices
is to zoom out and scale the web page
Viewport Meta Tag (without using CSS)
 Created as an Apple extension to
configure display on mobile devices
Android –
no viewport
Configures width and initial scale of
browser viewport, see p.318
<meta name="viewport" content="width=devicewidth, initial-scale=1.0"> see a screenshot =>

where: width=device-width = actual width of the device screen
initial-scale=1.0 for 100%
Jozef Goetz, 2015
48
1. CSS3 Media Queries using a Link Element
49
1. Media Query using a link

Is made up of a media type (such as screen)


and logical expression that determines the
capability of the mobile device, such as screen
resolution and orientation (portrait or landscape)
Directs the browser to styles configured
specifically for those capabilities
Example:
<link href="lighthousemobile.css" rel="stylesheet"
media="only screen and (max-width: 480px)">

<link href="lighthousetablet.css" rel="stylesheet"
media="only screen and (min-width: 768px)“ and (maxwidth: 1024px)">
Jozef Goetz, 2015
49
2. CSS3 Media Queries using an @media Rule
50
2. Media Query


using an @media Rule p.320 - 321
Determines the capability of the mobile
device, such as screen resolution using an
@media rule and orientation (portrait or
landscape)
Directs the browser to CSS styles
configured specifically for those
capabilities
syntax: @media [media type] [logical expression]
@media only screen and (max-width: 480px) {
header {background-image: url( mobile.gif)}} //smartphone
@media only all and (max-width: 768px) { } //smartphone
@media only all and (min-width: 769px) and (max-width: 1024px) { }
50
Jozef Goetz, 2015
HOP 7.7 - Media Queries
51
<=exclusiv
tablet
<=exclusive
smartphone
desktop
as tablet
Jozef Goetz, 2015
test desktop,
tablet and smartphone
Flexible Images


52
Edit HTML:
remove height and width attributes
CSS:
img { max-width: 100%;
height: auto; }
Responsive Web design with fluid layout,
media queries and flexible images
Jozef Goetz, 2015
52
HOP 7.8 - flexible
Jozef Goetz, 2015
desktop
tablet
53
smartphone
HOP 7.8 - flexible
media query =>
<=exclusively
tablet
<=fluid layout
media query =>
desktop
flexible images
Jozef Goetz, 2015
<=exclusively
smartphone
54
Testing Mobile Display Options

Test with a mobile device

Emulators:




55
Opera Mobile Emulator
Mobilizer
Opera Mini Simulator
iPhone Emulator

Test with a Desktop Browser

Install an iOS or Android SDK
Jozef Goetz, 2015
55
CSS Flexible Box Layout Module

Referred to as “flexbox”, a new emerging technique

GREAT way to easily configure multi-column page layout




56
elements contained within a flex container can be configured either
horizontally or vertically in a flexible manner with flexible sizing
Flexbox is not yet well-supported by browsers.
Check http://caniuse.com/flexbox for the current level of
browser support.
Common Properties used with flexbox see p.329-330:
display
flex-direction
flex-wrap
justify-content
Jozef Goetz, 2015
flex
order
56



Using Flexible Box Layout
Configure a flexible container “flex container”
Configure the direction of the flex
Example:
#demo { display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row; } // configures a horizontal direction


Adjust the proportion of the “flex item”
elements in the container
Example:
nav { -webkit-flex: 1; flex: 1; } // take 1 portion of the whole space
main { -webkit-flex: 7; flex:7; } // take 7 portions of the whole space
aside { -webkit-flex:2; flex: 2 } // take 2 portions of the whole space
Jozef Goetz, 2015
57
57
HOP 7.9 - flexbox
Jozef Goetz, 2015
desktop
tablet
58
smartphone
HOP 7.9 flexbox
59
flex la
conta
horizo
media
query
media query
flexible
images
display after the other flex items=>
multiline =>
3 column layout
Jozef Goetz, 2015
<=
sm
Checkpoint
1.
2.
3.
60
Describe a design consideration when configuring a
web page for mobile display.
True of False. The media="handheld" attribute
reliably targets mobile devices.
CSS media queries are used instead.
Test your mobile website using
http://www.opera.com/developer/mobile-emulator.
Check other emulators/simulators on page 327
Jozef Goetz, 2015
60
CSS Debugging Tips

Manually check syntax errors
Use W3C CSS Validator to check syntax errors
 http://jigsaw.w3.org/css-validator/

Configure temporary background colors

Configure temporary borders

Use CSS comments to find the unexpected

61
/* the browser ignores this code */


Don’t expect your pages to look exactly the same in all
browsers!
Be patient!
Jozef Goetz, 2015
61
Summary


62
This chapter introduced you to a variety
of topics related to
 absolute and relative hyperlinks,
 sprites,
 three and multiple column layout
and
 designing for the mobile web.
Midterm
62
Jozef Goetz, 2015
Pr. Ch7 Pacific Trails Resort– Configure the website
to display on desktop, tablet and mobile devices
Jozef Goetz, 2015
63
Pr. Ch7 JavaJam– Configure the website to
display on mobile devices and tablets
Jozef Goetz, 2015
64
Pr. Ch7 Prime Properties – Configure the
website to display on mobile devices
Jozef Goetz, 2015
65