Html hyperlinks
Download as PPTX, PDF0 likes1,117 views
HTML links allow users to navigate between web pages using hyperlinks. A hyperlink is defined using the <a> tag and contains an href attribute that specifies the URL of the destination page. By default, unvisited links appear as underlined and blue, visited links as underlined and purple, and active links as underlined and red. Images and email addresses can also be used as links. The <hr> tag inserts a horizontal rule and can be customized with attributes like size, width, and color.
Html hyperlinks
- 1. HTML Hyperlinks and HTML Bookmarks Presented by Nobel Mujuji (BSc Hons Information Systems )(WUA)
- 2. Html links Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks. A hyperlink is an element, a text, or an image that you can click on, and jump to another document. HTML Links - Syntax In HTML, links are defined with the <a> tag: Link Syntax: <a href="url">link text</a>
- 3. challenge <html> <body> <p> <a href=“www.facebook.com/Nokur technologies">visit us on facebook</a> </p> </body> </html>
- 4. • The href attribute specifies the destination page/ address (www.facebook.com/Nokur technologies) • The link text is the visible part (visit us on facebook).
- 5. Local Links • The example above used an absolute URL (A full web address). • A local link (link to the same web site) is specified with a relative URL (without http://www....). <a href="html_images.asp">HTML Images</a>
- 6. HTML Links - Colors and Icons HTML Links - Colors and Icons When you move the mouse cursor over a link, two things will normally happen: 1. The mouse arrow will turn into a little hand 2. The color of the link element will change 3. By default, links will appear as this in all browsers: 1. An unvisited link is underlined and blue 2. A visited link is underlined and purple 3. An active link is underlined and red 4. You can change the defaults, using styles:
- 7. The following are some of the things a hyperlink can link to Function Sample Code Web Page or Site <a href="http://www.webaddress.com/folder/page">Hyp erlink Text</a> Local Page <a href="pagename.html">Hyperlink Text</a> Local Page in a Folder level Below <a href="foldername/pagename.html">Hyperlink Text</a> Local Page in a Folder level Above <a href="../pagename.html">Hyperlink Text</a> Open E-mail Program with E-mail address <a href="mailto:yourname@yourname.com">Hyperlink Text</a> Bookmarked Section <a href="#bookmarkname"></a> Bookmarked Section in Another Page <a href="pagelocation.htm#bookmarkname">Hyperlink Text</a>
- 8. html - email links • Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them. • HTML Email Link Code: • <a href="mailto:email@gmail.com?subject=Feedback" >email me</a>
- 9. First web project NB create a folder name it SA Flag project *Save all your pages in this folder as follows(folder should contain 7 pages as follows) 1. Home.html 2. Black.html 3. Yellow.html 4. Blue.html 5. Red.html 6. White.html 7. Green.html
- 10. Home.html <hr size="10" noshade color=blue> <center><h1><font color="red"> WELCOME TO SOUTH AFRICA</H1></FONT></center> <center> <hr size="10" noshade color=green> <a href="green.html"> green page| </a> <a href="red.html"> red page| </a> <a href="yellow.html"> yellow page| </a> <a href="black.html"> black page| </a> <a href="blue.html"> blue page| </a> <a href="white.html"> white page|</a></center>
- 11. Black.html <a href=“home.html"> go to home page| </a> <body bgcolor=“black”>
- 12. Yellow.html <a href=“home.html"> go to home page| </a> <body bgcolor=“yellow”>
- 13. Blue.html <a href=“home.html"> go to home page| </a> <body bgcolor=“blue”>
- 14. Red.html <a href=“home.html"> go to home page| </a> <body bgcolor=“black”>
- 15. White.html <a href=“home.html"> go to home page| </a> <body bgcolor=“white”>
- 16. Green.html <a href=“home.html"> go to home page| </a> <body bgcolor=“green”>
- 17. An Image Link • Here's an image. Its name is sally.gif. I will use it as a link to the HTML Goodies page. • To replace the text above with the sally.gif image, you simply replace the text that would appear on the page with an image command calling for the sally.gif image. Like so: <A HREF="index.html"><IMG SRC="sally.gif"></A>
- 18. The HTML <hr> tag also supports following attributes: Attribute Value Description align left right center Deprecated-Specifies the alignment of the horizontal rule. noshade noshade Deprecated-Removes the usual shading effect that most browsers display. size pixels or % Deprecated-Specifies the height of the horizontal rule. width pixels or % Deprecated-Specifies the width of the horizontal rule.