Fundamentals of Web Technologies. Agenda: HTML Links 5/22/2017. HTML Links - Hyperlinks HTML Lists

Transcription

1 ITU 07204: Fundamentals of Web Technologies Lecture 6: HTML Links & Lists Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: HTML Links - Hyperlinks HTML Lists 2 HTML Links A hyperlink (or a link) is a text or an image you can click on, and take you to another web page or file In HTML, links are defined with the anchor <a> tag followed by the href attribute. <a href= path > link text </a> Anchor is an inline element and therefore more than one link can be specified in a paragraph 3 1

2 HTML Links: Absolute Path A path specified in the href attribute can either be absolute or relative An absolute URL contains all the information necessary to locate a resource In web, an absolute path is similar to a URL i.e specifies protocol, domain, path and file name You must use absolute URLs when referring to links on different Web servers 4 HTML Links: Relative Path Relative URL is any URL that does not explicitly specify protocol and/or domain name A local link (link to the same Website) is specified with a relative URL i.e. without protocol, domain name, path and file name Relative URLs can take different forms, depending on the location of the required file 5 HTML Links: Relative Path if you want to create a link in your home page to a file about.html in the same directory as your home page, you would use; <a href= about.html > About FCIM </a> 6 2

3 HTML Links: Relative Path If the file you want to link to is in a subdirectory, say the subdirectory is called profile, you need to enter only the directory information and the name of the file; <a href= profile/about.html > About FCIM </a> 7 HTML Links: Relative Path If the file you want to link to is in a higher (say two levels higher) directory than the referring page, use.., which means to go two levels up a directory; <a href=../index.html > Home </a> 8 When you move a mouse over a link, two things will happen; The mouse arrow will turn into a little hand The color of the link element will change When a Web page is loaded, by default; An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red 9 3

4 The default attributes can be changed by defining styles to the associated pseudo classes A pseudo class is a predefined class that is used to define a special state of an element For example, it can be used to style a link to be underlined when a user hovers a mouse on it 10 There are four pseudo classes associated with <a> tag; link visited hover active 11 There are four pseudo classes associated with <a> tag; link specifies state of a link when a Web page is loaded by a Web browser. visited specifies state of a link that has already been visited hover specifies states of a link when a user moves a mouse on top of the link. active specifies states of a clicked link. 12 4

5 Pseudo class comes without a style, so it is up to a developer to define the style; <style> a:link{color:white; text-decoration:none} a:visited{color:red; text-decoration:none} a:hover{color:black; text-decoration:underline} a:active{color:yellow; text-decoration:none} </style> 13 Unlike other classes, pseudo classes are used implicitly i.e. without using the class attribute <style> a:hover{color:black; text-decoration:underline} </style> <a href= about.html > About Us </a> The above link will be underlined when a cursor is hovered/moved on top of the link 14 When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited a:active MUST come after a:hover 15 5

6 HTML Links: Target Attribute The target attribute specifies where the linked HTML document should be opened. The target attribute has four common values; _blank _parent _self _top 16 HTML Links: Target Attribute _blank specifies that a linked document to be opened on a new tab The parent page will be left opened <a href= about.html targer= _blank > About Us </a> 17 HTML Links: Target Attribute _parent specifies that a linked document to be opened on the same tab The parent page will be closed _self specifies that a linked document to be opened on a new tab The parent page will be closed _top specifies that a linked document to be opened on the same tab The parent page will be closed 18 6

7 HTML Lists: Unordered List HTML allows developers to create unordered lists and/or ordered lists An unordered list is a collection of related items that have no special order or sequence This is why the items of unordered lists are represented using bullets This list is created by using HTML <ul> tag. 19 HTML Lists: Unordered List Each list item starts with the <li> tag <ul> <li> Faculty A </li> <li> Faculty B </li> <li> Faculty C </li> </ul> By default, each list items will be marked with small circles bullets 20 HTML Lists: Unordered List A bullet type can be changed to disc (which is the default type), square, circle or none None means no bullets will be displayed To change bullets type, use type attribute <ul type= square > <li> Faculty A </li> <li> Faculty B </li> <li> Faculty C </li> </ul> 21 7

8 If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used This list is created by using HTML <ol> tag <ol> <li> Faculty A </li> <li> Faculty B </li> <li> Faculty C </li> </ol> 22 Like in the unordered list, each list item starts with the <li> tag The numbering starts at one and incremented by one for each successive ordered list element tagged with <li> With type attribute, numbers can be changed to letters or roman numbers 23 Here is a list of different number formats the ordered list can be displayed; 24 8

9 You can use start attribute to specify the starting point of numbering you need <ol type= i start= 2 > <li> Faculty A </li> <li> Faculty B </li> <li> Faculty C </li> </ol> Here the first list item will be displayed with roman 2 i.e ii 25 You can use start attribute for <ol> tag to specify the starting point of numbering you need 26 9