unit 4 – creating a web site instructor: brent presley

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 Pages 142 – 144 Linking to Another Site Page (Basics) Pages 142 – 144 Absolute vs. Relative Paths Pages 142 – 144 Linking to Another Site Pages 142 – 144 Creating an Email Link Pages Showing Links in a New Window Pages Using Images as Links Pages

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

• 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.

CREATING ON PAGE LINKS

• 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.

IN CLASS UNIT4-WEB SITES

• Download 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

Murach’s JavaScript, C4

© 2009, Mike Murach & Associates, Inc.Slide 7

Attributes of the <a> tag

Attribute Description

href Specifies the URL for a link.

target Specifies where the destination document should be loaded.

name Creates an anchor within a web page.



A relative link to another web page <p>Go view our <a href="../products.html">product list</a>.</p>

An absolute link to another web page <p>Read about the <a href="/services.html">services we provide</a>.</p>

A link to a web page on a different web site <p>Search for our books on <a href="http://www.amazon.com" target="_blank">Amazon.com</a>. </p>



How to create and use an anchor within a page How to create an anchor <h3><a id="contact" name="contact">Contact Us</a></h3>

How to jump to an anchor on the same page <p>For more information <a href="#contact">contact us</a>.</p>

How to jump to an anchor on a different page <p>For more information <a href="info.html#contact">contact us</a>.</p>

ANCHOR TAGS

• 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)

• 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 seem to 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 CSS ON UNIT 4

• Add links to all nav bar items– <li><a href="#computerbasics">Computer Basics</a> -</li>

• Add a title to one– <li><a href="#powerpoint" title="Click to see PowerPoint

topics.">PowerPoint</a></li>

• At bottom of page, create a link to go to the top of the page– <p style="text-align:right"><a href="#top">Top of

Page</a></p>

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.

• • <a href="anotherfile.html">

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, so I won’t cover absolute paths.

• Relative means in relation to the folder this web page (the one with the link) is in.

PATHS

• This website contains a home page (index.htm), the courselist.htm page and two subfolders

• The images subfolder contains only the two images, no web pages

• The information subfolder contains two additional web pages: about.htm and biography.htm

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

PATHS

• To link to a page (or image) in a folder, you must provide the path to that page.– The path includes all the folders

that must be accessed to reach the page

– Folders and file names in a path are separated with a slash ( / )

– The path must start with a visible folder name (one the web page with the link can see)

• <a href="information/about.htm">

PATHS

• In the example to the right, in order to create a link in index.htm to the WebPrin Syllabus.htm file, it will have to access two folders: Courses and then Web Principles

<a href="Courses/Web Principles/WebPrin Syllabus.htm“ title="See Web Principles syllabus"> Web Principles </a>

UNIT 4 LINKS

• Set links to the images details page and the othersites page

• Correct link to css at top

RELATIVE PATHS

• Web pages also can’t see outside the folder they’re in – they can’t see upwards in the folder hierarchy.– In our first example, about.htm

can NOT see index.htm.– To move up the folder hierarchy,

you use a special designation: .. (that’s two periods)

– .. represents my parent folder or up one level in the folder hierarchy

• Note that .. is considered a folder, a relative folder

RELATIVE PATHS

• about.htm can link to index.htm•  <a

href="../index.htm"> Home Page</a>

• Because about.htm is in the information folder, .. represents the folder above it: My Web Site. Index is located in this folder.

RELATIVE PATHS

• If about.htm uses the Airplane1.gif file, the URL (or img src) must first move up to the My Web Site folder then navigate to the images folder, then designate the file name.

<img src="../images/Airplane1.gif“ alt="Picture of an airplane. " >

or

<body style="background-image: url('../images/Airplane1.gif'); background-repeat: repeat-y"; >

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.• Path designation gets easier with practice and often

you can simply copy one path from your HTML to create another.

– E.g. copy the path of one image tag to create another image tag.

RELATIVE PATHS

– You can also link to an ID (or anchor) on another page. Simply add a # and the ID name to the end of the file name.

 <a href="../index.htm#hours"> Home Page</a>

UNIT 4 EXAMPLE

• In othersites– Create link to a web site– Create link to web programming syllabus

LINKING TO ANOTHER SITE

– Many web pages provide references to other websites (on the Internet).

– Creating this kind of link is very similar to the other types of links we’ve discussed so far.

– The only difference is you put in the URL of a website instead of the name of a file on your website.

– 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>

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.– 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.– In order for Email links to work, the user must have an Email

program installed on their computer. Online Email (Hotmail, Yahoo, Gmail, etc) don’t work like this.

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%20about%20Email%20links.">

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.

• The text discusses a number of ways to foil harvesters. My favorite is to include an image of my Email address instead of a link. The user has to type the address into their To: field manually. The nice thing about this is, they can use their on-line Email accounts to do this

EMAIL LINK

– Email links are slowly falling out of favor. • In order for an email link to work, the user’s computer

must include a configured Email program (e.g. Outlook or Windows Mail).

• Many users today only use online Email programs (e.g. Gmail, Microsoft Live, etc.).

• Email links CANNOT be displayed using online Email programs.

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.• I usually create a new, unnamed 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

Opens in a new tab:

<a href="http://www.mstc.edu" target="_blank">

USING IMAGES AS LINKS

• Images can also be used as links

• Simply 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.


• 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;" >


– 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.

– Simply 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

• In imagelinks, link a photo to a website• Remove border using a style• Link to photo from thumbnail

CREATING A HOVER LINK

– Hover links (also called rollovers) change appearance when the mouse touches them

– Some hover links are created using styles and pseudo-classes• 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)

– Define the following in your style (embedded or external)


• a:link {text-decoration: none}• a:visited {text-decoration: none}• a:hover {text-decoration: underline; color:red}•

– The first two styles remove the underlines from all the links (visited and unvisited)

• Be careful doing this—users may not be able to find (recognize) your links.– The last style changes the appearance of the link when the user touches it

with the mouse– These are just examples—you can change the formatting any way you

want.• Try making the hover link a little larger

• When the hover is removed, the link automatically reverts to its original style


• Attach the hover links to the nav bar

unit 4 – creating a web site instructor: brent presley

Documents