Understanding HTML: Creating Text Links for Navigation and Image Links for Interactive Media Elements in Web Pages
- 1. HTML Introduction HTML (Text link and Image link)
- 2. Previous Lecture ➢ Front End Developer (HTML, CSS, JavaScript) ➢ Text Editor (Sublime Text) ➢ Basic HTML Structure ➢ Basic HTML Tags and formatting ➢ HTML Elements and Attributes ➢ HTML List
- 3. Overview ➢ HTML Comment ➢ Text and Document Link ➢ Email and Phone link ➢ Image Element and Attribute ➢ Image Link
- 4. HTML Comment ➢ Comment is a piece of code which is ignored by any web browser. ➢ Comments help you and others understand your code and increases code readability ➢ It is a good practice to add comments into your HTML code, especially in complex documents <!-- This is valid comment --> < !-- This is not valid comment --> <!-- This is a multiline comment and it can span through as many as lines you like. --> <p>This is <comment>not</comment> Internet Explorer 6.</p>
- 5. HTML Link ➢ A webpage can contain various links that take you directly to other pages and even specific parts of a given page ➢ Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. ➢ There are three different kinds of links you can have on your website: • Links to anchors on the current page (Internal). • Links to other pages within the current site (Local) • Links to pages outside the current site (Global). ➢ A link is specified by anchor tag <a></a>. ➢ The href attribute specifies the destination address ➢ (http://www.google.com) <a href="http://www.google.com" >Go to Google</a>
- 6. Global Link ➢ Provide the full URL for the document, including the protocol (http://), the domain name, and the path name. ➢ You need to use an absolute URL when pointing to a document is not on your own server. <a href=“http://www.google.com">Google</a> <a href="http://www. http://www.w3.org/html/">W3 HTML</a> ➢ Use of Base Path • When you link HTML documents related to the same website, it is not required to give a complete URL for every link. • You can get rid of it if you use <base> tag in your HTML document header. <head> <base href="http://www.w3.org"> </head> <body> <a href="/html/">HTMLTutorial</a> </body>
- 7. Local Link ➢ A local link (link to the same web site) is specified with a relative URL ➢ It doesn’t require the protocol or domain name just the path name. (without http://www). <a href=“English/news.html">News</a> ➢ You can going back to main page(index.html) <a href=“../index.html">Main</a>
- 8. Setting Link ➢ The target Attribute • The target attribute specifies where to open the linked document. <a href="/../index.htm" target="_blank">Opens in New</a> <a href="/../index.htm" target="_self">Opens in the same page</a> ➢ Link Colors • You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag. <body alink="#54A250" link="#040404" vlink="#F40633"> <p>Click following link</p> <a href="../index.htm" target="_blank" >HTMLLink</a> </body>
- 9. Internal Link(Bookmark) ➢ HTML bookmarks are used to allow readers to jump to specific parts of a Web page. ➢ This is a two step process. • First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows: • Second step is to create a hyperlink to link the document and place where you want to reach: <h1>HTML Text Links <a name="top"></a></h1> <a href=“#top">Go to the Top</a> • Or, add a link to the bookmark from another page: <a href=“English/news.html#top">Go to the news Top</a>
- 10. Mail link Mail Links: ➢ Using the mailto protocol in a link, you can link to an email address. ➢ When the user clicks on a mailto link, the browser opens a new mail message preaddressed to that address in a designated mail program. ➢ You can specify a default email subject and email body alongwith your email address. <a href= "mailto:[email protected]">Send Email</a> <a href="mailto:[email protected]?subject=Operations&body=The Operations have been done successfully ">Send Eamil </a>
- 11. Phone link Call Links: ➢ If the smartphones people are using to access your website, they can also use to make phone calls ➢ The syntax uses the tel: scheme and is very simple <a href="tel:+9647701234567">Call us free at (+964)-07701234567 </a> Message Links: ➢ They can also use to send message <a href="sms:+9647701234567">New SMS Message</a>
- 12. HTML Image ➢ Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. ➢ As a designer – and especially a web designer – it’s important to know the difference between the different image formats and how to use them in each situation. ➢ Gif, jpg and PNG files are all three used for the websites. ➢ Lossless means that the image is made smaller, but at no detriment to the quality. ➢ Lossy means the image is made (even) smaller, but at a detriment to the quality.
- 13. Insert Image ➢ You can insert any image in your web page by using <img> tag that is empty tag ➢ it contains attributes only as well as Image name is always case sensitive. ➢ The src attribute specifies the URL (on Another Server) or location ( in Another Folder) of the image ➢ The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed. ➢ Because of slow connection or an error in the src attribute <img src="/html/images/flower.jpg" alt=“Flower Image" /> <img src="/html/images/flower.jpg"/> <img src="http://www.echoecho.com/rainbow.gif" />
- 14. Width and Height or Style ➢ You can change the size of an image using the width and height attributes. ➢ In general, it is not advisable to reduce image size using these settings. This will slow the loading of your webpage. ➢ You should reduce the size in a graphics program, rather than reducing the size on the webpage using the width and height attributes. ➢ You can specify width and height of the image in terms of either pixels or percentage of its actual size. <img src="/html/images/flower.jpg" alt=“Flower Image" width="150" height="100"/> <img src="/html/images/flower.jpg" alt=“Flower Image" width=“50%" height=“50%"/> ➢ I suggest you use the style attribute. It prevents styles sheets from changing the original size of images: <img src=“flower.jpg" alt=“flower" style="width:128px ; height:128px ;">
- 15. Image Border and Alignment ➢ By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. <img src="/html/images/flower.jpg" alt=“Flower Image" border="3"/> ➢ You can easily add space over, under, left and right your images with the Vspace and Hspace attribute. <img src="rainbow.gif" Hspace="30" Vspace="10"> ➢ By default image will align at the left side of the page, but you can use align attribute to set it in the center or right. <img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>
- 16. Using an Image as a Link ➢ If you want to make an image work as a link, the method is exactly the same as with texts. ➢ You simply place the <a href> and the </a> tags on each side of the image <a href=“google.com” target="_self"> <img src="/images/flower.jpg" alt=“google" border="0"/> </a> ➢ The image can float to the right or to the left of a text <img src="smiley.gif" alt="Smileyface" style="float:right;width:42px;height: 42px;"> <img src="smiley.gif" alt="Smileyface" style="float:left;width:42px;height:42 px;">
- 17. Image Mapping ➢ It is possible to make one image link to several pages, depending on where the image is clicked. ➢ You simply specify which areas of the image should link to where ➢ Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags. <img src=“/images/html.gif” alt="HTML Map" border="0" usemap="#html"/> <map name="html"> <area shape="rect" coords="5,5,40,40" href=“flower1.html" /> <area shape="circle" coords="80,80,20" href=“flower2.html" /> </map>