Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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