1 / 14

IDT Links in HTML

Learn how to understand and apply design principles to create professional and functional web pages. Explore different types of links, link attributes, and anchor tags. Enhance your web page appearance and usability with hotspots and color in links. Take a quiz to test your knowledge.

bgriffeth
Download Presentation

IDT Links in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UNDERSTAND AND APPLY DESIGN PRINCIPLES TO CREATE PROFESSIONAL APPEARING AND FUNCTIONING WEB PAGES IDT Links in HTML What you need to know….

  2. Hyperlinks or links • Millions of linked web pages make up the World Wide Web • Used to connect a web page to another web page on the same server or to a server located anywhere in the world. • Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.

  3. Types of Links • Linking within a web page • Used with large web pages • Moves from top to bottom of page or a specific section • Linking to another web page • Connects one web page to another web page on the same site (forward/back) • Linking to another web site • Links site to another site • Linking to email • Starts new email message to address in link

  4. What can be linked • Text • Images/Graphics/Pictures • Autoshapes • Buttons

  5. The code… • <a href="url">Link text</a> • The start tag contains attributes about the link. • The element content (Link text) defines the part to be displayed on a web site • Note: The element content doesn't have to be a text. You can link from an image or any other HTML element.

  6. <A HREF="http://www.htmlgoodies.com">Click Here For HTML Goodies</A>Here's What's Happening • A stands for Anchor • begins link to another page • HREF stands for Hypertext REFerence • short way to say to browser-- "This is where the link is going to go." • http://www.htmlgoodies.com • FULL ADDRESS of link • Notice equal sign in front of it and is enclosed in quotes--Why? Because it's an attribute of the Anchor tag, a command inside of a command • Where it reads "Click Here For HTML Goodies“ • text you want to appear on the page • /A ends the entire link command. • Here's what will appear on the page using the command above... Click Here For HTML Goodies

  7. Anchors • An anchor--used to define a hyperlink destination inside a document • Example idea for anchors: • To create "table of contents" at the beginning of a large document • Back to Top links for a long web page

  8. Color in Links • <BODY LINK=“color” VLINK=“color” ALINK=“color”> • link - standard link - to a page the visitor hasn't been to yet. (standard color blue - #0000FF). • vlink - visited link - to a page the visitor has been to before. (standard color purple - #800080). • alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

  9. Link Attributes • Target attribute: defines where the linked document opens • By default, links will open in the current window or frame • Predefined targets are: • _blank loads the page into a new browser window • _self loads the page into the current window • _parent loads the page into the frame that is superior to the frame the hyperlink is in • _top cancels all frames, and loads in full browser window. • Sample Text: <a href=http://www.w3schools.com/ target="_blank">Visit W3Schools!</a>

  10. Link Attributes • name Attribute • defines a named anchor inside a HTML document • Named anchor • <a name="label">Any content</a> • Link to a named anchor • <a href="#label">Any content</a> • # defines a link to a named anchor inside a HTML document

  11. Home page • The home page--main page of a web site • MUST be saved as index.html inside a folder created for website • Visitors to a web site normally see this page first • On a home page it is important to identify the purpose of your web site

  12. Home Page Characteristics • Clearly state what web site is about • Keep it Simple • Appearance of page should GRABthe user to want to stay on your site • No distractions from the meaning of the site • Free of spelling/grammar errors • Design navigation clear for user

  13. Hotspot • A hotspot is an area of text or an image in which the mouse pointer changes when it is moved over the area. • When the pointer changes this tells the user that there is a link • Text links are generally underlined and in a different color font than the rest of the web page (normally blue)

  14. How much do you know… • Now that you are finished, visit http://www.echoecho.com/html.htm • Click on the HTML LINKS section • Read through each section skipping these: • ADVANCED TEXT LINKS • IMAGE MAPPING • Links in Framesets • Take the Quiz at the end of the Tutorial & RECORD YOUR SCORE ON THE WORKSHEET

More Related