Unit 4 – Creating A Web Site Instructor: Brent Presley

ASSIGNED READING Chapter 4, Page

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 Section 1 Title 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 tag. Inside the opening tag, you include an href (hypertext reference) attribute that designates where the browser should jump to. Your Link Text Here 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 list-style-type to none –Line-height:200% –To display inline, need to set display:inline –Center the header –Shade in the header in navy

Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 7

Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 8

Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 9

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. Your link text here 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: Top of Page without ever defining id="top“

UPDATE CSS ON UNIT 4 Add links to all nav bar items – Computer Basics - Add a title to one – PowerPoint At bottom of page, create a link to go to the top of the page – Top of Page

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.

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)

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 Web Principles

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 Home Page 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. or

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. Home Page

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 or If you leave this off ( the browser assumes this a relative file path which (probably) doesn’t exist. MSTC

CREATING AN LINK –The final kind of link frequently used in web pages is an link. – links don’t link to other web pages. Instead, they automatically open a new message with recipient (To:) already filled in. –To designate a link as an link, start the href text with mailto:. Then, follow that with the appropriate address. –You can also designate a subject for the by adding ?subject="type%20text%20here" after the address (inside the quotes). %20 is the hex code for a space. Your link will not validate if it has spaces in it. –In order for links to work, the user must have an program installed on their computer. Online (Hotmail, Yahoo, Gmail, etc) don’t work like this.

CREATING AN LINK –Though used less frequently, you can also designate the text for the body of the After the subject (inside the quotes), add &body=your text here <a ?subject=Question%20About%20Links &body=I%20have%20a%20question%20about%20 %20links."> Me

LINK –One concern about adding 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 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 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 accounts to do this

LINK – links are slowly falling out of favor. In order for an link to work, the user’s computer must include a configured program (e.g. Outlook or Windows Mail). Many users today only use online programs (e.g. Gmail, Microsoft Live, etc.). links CANNOT be displayed using online 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 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:

USING IMAGES AS LINKS Images can also be used as links Simply place the tag inside an tag 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

USING IMAGES AS LINKS –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 –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 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)

CREATING A HOVER LINK 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

CREATING A HOVER LINK Attach the hover links to the nav bar