Transcript Creating Websites

Unit 4 – Creating
A Web Site
Instructor: Brent Presley
Instructor’s Notes
Creating a Website
Web Programming
152-150
Creating Website Links
Notes
Activity
Text References







Creating On-Page Links
Linking to Another Site Page (Basics)
Absolute vs. Relative Paths
Linking to Another Site
Creating an Email Link
Showing Links in a New Window
Using Images as Links
Pages
Pages
Pages
Pages
Pages
Pages
Pages
142 – 144
142 – 144
142 – 144
142 – 144
Creating On-Page Links



Before learning how to link multiple pages in a website
together, we’ll learn the basics of links by creating links
to other places on a page
Before you can create a link, you need to designate the
target of that link.
Add an ID attribute to the element you want to link to
<h1 id="Section 1">Section 1 Title</h1>



ID attributes are relatively new. Earlier versions of
HTML used anchor tags. HTML 5 uses id.
To create the actual link, you surround the text (or image)
you want to use as a link with an <a> tag.
Inside the <a> opening tag, you include an href
(hypertext reference) attribute that designates where the
browser should jump to.
<a href="#id">Your Link Text Here</a>

Because we’re jumping to a location on the current page,
the href value must start with a # that is followed by one
of this page’s IDs.
Review index.html
Set <nav li> list-style-type
to none
Line-height:200%
To display inline, need to
set <li> display:inline
Center
Shade
Add IDs to six major
headings
ASSIGNED READING
• Chapter 4, Page 142-144
CREATING ON PAGE LINKS
• Before learning how to link multiple
pages in a website together, we’ll learn
the basics of links by creating links to
other places on a page
• An anchor is a specific place in the
middle of your page
– Using # in front of a link location specifies that
the link is pointing to an anchor on a page
• Anchors are used when you create pages
with a considerable amount of text
• https://en.wikipedia.org/wiki/HTML_eleme
nt
– Table of contents links on this page
CREATING ON PAGE LINKS
• To create an anchor
– Create a link pointing to the anchor
– Create the anchor itself
• An anchor is created with the <a> tag
CREATING ON PAGE LINKS
• Add an ID attribute to the element you want to link to
<h1 id="Section 1">Section 1 Title</h1>
• Then include that #ID within an href property value
<a href = “#Section 1”> Section 1</a>
• ID attributes are relatively new. Earlier versions of HTML
used anchor tags with name= property. HTML 5 uses id.
IN CLASS UNIT4-WEB SITES
• Download unit 4 start file from onedrive
• Review index.html
– Add IDs to six major headings
• Review links.css
–
–
–
–
–
Set <nav li> list-style-type to none
Line-height:200%
To display inline, need to set <li> display:inline
Center the header
Shade in the header in navy
ANCHOR TAG POPUP TITLE
• Normally, the link text is descriptive enough
to let the user know where the link goes. To
provide additional information, you can
include a popup title.
<a href="#id" title="Your popup title here"> Your link
text here </a>
• The popup title will appear when the
page user touches the link with the
mouse pointer (may take a second or
two)
– Similar to a tool tip
ANCHOR TAGS
• Links appear as blue underlined text in the browser
– When a user has visited a link, the link color changes
– These colors are customizable, but most users are used to this color
scheme, so most web pages don’t change the colors
ANCHOR TAGS
• Automatic On-Page Links
– All browsers recognize #top as the
top of the page, even if there is
no id="top" anywhere on the page.
• So, you can create a link to the top of
the page:
<a href="#top">Top of Page</a>
without ever defining id="top“
•
UPDATE YOUR PAGE
• Add links to all nav bar items
• Add a title to one
• At bottom of page, create a link to go to the
top of the page
UNIT 4 LINKS
• Set links to the images details page and the
othersites page so that you can link to them
from index.html
• Set style for links to the details page (footer)
• In imagelinks and othersites, create links to
all other pages
ABSOLUTE VS RELATIVE PATHS
•
•
•
•
•
Most webs have many images and
web pages
To help organize these pages, they
are often placed into folders.
When linking to pages in other
folders, you have to designate the
path to those pages
The path can be designated either
absolutely or relatively. Most
websites use relative paths.
Relative means in relation to the
folder this web page (the one with
the link) is in.
ABSOLUTE PATH
• Absolute path is what you are used to
• Start with http and enter the entire web
address
RELATIVE PATH SYNTAX
• Rules for relative file paths:
1. Starting with "/" returns to the root
directory and starts there
2. Starting with "../" moves one directory
backwards and starts there
3. Starting with "../../" moves two
directories backwards and starts there
(and so on...)
4. To move forward, just start with the
first subdirectory and keep moving
forward
RELATIVE PATHS
PATHS
• Visibility is a key concept in
relative paths
– Web pages can see other
web pages that are in the
same folder they are in
• courselist.htm is visible to
index.htm (and vice versa)
• about.htm is visible to
biography.htm and vice versa
• To reference visible pages
in a link, you simply include
the page name in the link
PATHS
• Web pages can see
folders that are in the
same folder they are in,
but they can NOT see
the files inside
– index.htm can see the
images folder and the
information folder
– index.htm can NOT see
the biography.htm file or
the car.jpg image
RELATIVE PATHS
• Web pages can’t see
outside the folder
they’re in.
– Can’t see upwards in the
folder hierarchy.
– about.htm can NOT see
index.htm.
• To move up the folder
hierarchy, you use a
special designation: ..
(that’s two periods)
RELATIVE PATHS
.. represents my parent
folder or up one level
in the folder hierarchy
Note that .. is
considered a folder, a
relative folder
RELATIVE PATH EXAMPLE
• about.htm can link to
index.htm
• <a href="../index.htm">
Home Page</a>
• Since about.htm is in the
information folder, the ..
represents the folder above
it: My Web Site. Index is
located in this folder.
UNIT 4 LINKS
• correct link to css at top to be a relative path
on all 3 pages in the site
RELATIVE PATHS
• As your website gets
more and more
complex, designating
on-site links and image
locations can get a
little complicated
– Don’t let the complexity
keep you from properly
organizing your website
into folders.
LINKING TO ANOTHER SITE
• Linking to another page in the web is almost
identical to linking to an ID on the current
page.
• Instead of providing the ID name, you
provide the page’s file name.
LINKING TO ANOTHER SITE
• The URL must include http:// or https://
– If you leave this off (www.mstc.edu), the browser
assumes this a relative file path which (probably)
doesn’t exist.
<a href="http://www.mstc.edu" title="MSTC Home Page">MSTC</a>
LINKING TO ANCHOR ON ANOTHER PAGE
• When you link to anchors on external pages,
simply enter
UNIT 4 EXAMPLE
• In othersites
– Create a link to Excel anchor tag in index.html
– Create a link to a bookmark in a different
website (Wikipedia is a good example)
• Look in the address bar to see the proper id
CREATING AN E-MAIL LINK
• The final kind of link frequently used in
web pages is an Email link.
• Email links don’t link to other web
pages. Instead, they automatically
open a new email message with
recipient (To:) already filled in.
• To designate a link as an Email link,
start the href text with mailto:. Then,
follow that with the appropriate Email
address.
CREATING AN E-MAIL LINK
• You can also designate a
subject for the email by adding
?subject="type%20text%20here" after
the email address (inside the
quotes).
– %20 is the hex code for a
space. Your email link will
not validate if it has spaces
in it.
• Why not use just whitespace?
CREATING AN E-MAIL LINK
• Though used less frequently,
you can also designate the text
for the body of the Email
– After the subject (inside the
quotes), add &body=your text
here
<a href="mailto:[email protected]
?subject=Question%20About%20Links
&body=I%20have%20a%20question."> Email Me </a>
EMAIL LINK
• One concern about adding Email links
to your web pages is that the links are
accessible to harvesters.
– Harvesters, are web bots (web
programs) that automatically surf all
over the web. Whenever, they discover
an Email link in a web page’s HTML,
they harvest it, sending it back to their
masters who make a big list and sell it.
– All of this happens without permission
of course—it’s not required—the
Internet is free.
EMAIL LINK
• The text discusses a number of ways
to foil harvesters.
– Include an image of my Email address
instead of a link. The user has to type the
address into their To: field manually.
UNIT 4 EXAMPLE
• In othersites
– Create email link with subject
– Add body to the e-mail link
SHOWING LINKS IN A NEW WINDOW
• Sometimes, when the user clicks a link, you’ll
want the new page to appear in a new window—
a new occurrence of the browser.
• This allows the user to view both pages
simultaneously and switch between them quickly.
• To open a new page in a new window, simply
include the target attribute in the <a> tag
– The target attribute includes the ability to name
each new window.
– This has no effect on the appearance, but does
allow more advanced techniques (JavaScript) to
refer to a spawned window by name.
SHOWING LINKS IN A NEW WINDOW
• Many web design tips suggest you never
create new window links.
– I recommend you open a window
whenever the link transfers to a new
website.
– Other websites won’t have a link back to
yours. By opening a new window, the
user can return to your page by switching
windows/tabs
• Yes, the user could simply click the Back button,
but this allows both sites to remain easily
accessible.
SHOWING LINKS IN A NEW WINDOW
<a href="http://www.mstc.edu" target="_blank">
• Using target="_blank" will instruct the browser to create a new browser
tab or window when the user clicks on the link.
• _self Opens the linked document in the same frame as it was clicked
(this is default)
• _parent Opens the linked document in the parent frame
• _top Opens the linked document in the topmost frame.. Ie the new
page fills the entire window
• framename Opens the linked document in a named frame
– it will search for a tab or window with the context name "framename", or whatever
you make it. if a "framename" tab/window is found, then the url is loaded into it.
– if not found, a new tab/window is created with the context name "framename"
UPDATE PAGE
• Show my page in another window/tab, use
target= "_blank“
• Link to one other page in another
window/tab. Use a different target option
USING IMAGES AS LINKS
• Place the <img> tag inside an <a> tag
<a href="somepage.htm"> <img
src="images/myPicture.jpg" > </a>
• Some browsers put a border around an image link to designate them as
links.
USING IMAGES AS LINKS
• You can remove the border by adding a style
attribute that removes the border.
• If you remove the border, it's a good idea to
add an title attribute that informs the user
that clicking the image will link to a page
• <img src="mypic.jpg" style="border:none;" >
UPDATE PAGE
• In imagelinks, link my photo to my website
• Remove a border using a style, if you have a
border by default
USE IMAGE LINKS TO LINK IMAGE THUMBNAILS
• Many websites also use image links to link image thumbnails
(small, often cropped versions of an image) to the full size
versions of the images.
• Set the href to the file name for the full size image
<a href="images/lrgDog.jpg"><img src="images/smlDog.jpg" ></a>
• The small version of the image allows the page to load quickly. If
they user wants to see the larger image (and is willing to wait for
it to load), they can click the thumbnail.
• Thumbnail links often open in a new window so the user doesn't have to
remember to go back to the original page
UNIT 4 EXAMPLE
• Download an image, then link to a photo
from thumbnail for that image
CREATING A HOVER LINK
• Hover links (also called rollovers) change appearance when
the mouse touches them
• Some hover links are created using styles and pseudoclasses
– Pseudo-classes allow you to define different formatting for different
states of an element
• We’ll need three pseudo-classes of the <a> element to
create our hover links
– a:link (for unvisited links)
– a:visited (for visited links)
– a:hover (for links touched by the mouse)
CREATING A HOVER LINK
• Be careful doing this—users may
not be able to find (recognize) your
links if they do not have a line
underneath them
• Try making the hover link a little
larger
• When the hover is removed, the
link automatically reverts to its
original style
• CREATE A HOVER LINK
• Define the following in your style
(embedded)
•
•
•
•
a:link {text-decoration: none}
a:visited{text-decoration:none}
a:hover{text-decoration: underline; color:red}
now move it to the css file
ASSIGNMENT
• Creating Websites assignment