Web Technologies and Programming Lecture 07

Web Technologies and ProgrammingLecture 07 2Modeling web applicationsHTML Links and navigation3What is HTML?Basic Structure of HTML pageBody tag attributesText formatting tagsLists4Summary of Previous LectureOutlineHow to link between pages of your site (internal links)How to link to other sites (external)How to structure the folders on your web siteInternal document referencesLink attributesOther Type of links51. HTML linksHTML links are hyperlinks.A hyperlink is a text or an image you can click on, and jump to another document.61. HTML linksHTML Links - SyntaxIn HTML, links are defined with the  tag:link textThe href attribute specifies the destination address .The link text is the visible part 71. HTML linksHTML Links – ExampleVisit our HTML tutorial81. HTML linksThe crux of HTML is its capability to reference countless other pieces of information easily on the internetA hyperlink is a text or an image you can click on, and jump to another document.In HTML, links are defined with the  tag91. HTML links - ColorsWhen you move the mouse over a link, two things will normally happen:The mouse arrow will turn into a little handThe color of the link element will change101. HTML linksBy default, links will appear as follows in all browsers:An unvisited link is underlined and blueA visited link is underlined and purpleAn active link is underlined and red111. HTML linksFor visited linkFor active linkFor color of link121. HTML linksExamplea:link {color:green; background-color:transparent; text-decoration:none}a:visited {color:pink; background-color:transparent; text-decoration:none}a:hover {color:red; background-color:transparent; text-decoration:underline}a:active color:yellow; background-color:transparent; text-decoration:underline}131. HTML linksWhen you link to another page in your own web site, the link is known as an internal linkWhen you link to a different site, it is known as an external linkSome other form of links are also discuss in this lecture.141.1 Internal linksAnything between the opening tag and the closing tag becomes part of the link that users can click in a browserA Local link uses a page name (including sub-directories if needed) as the target. It is “local” to the current server.151.1 Internal linksHref href attribute specifies the URL of the page the link goes to.If the href attribute is not present, the tag is not a hyperlink.161.1 Internal linksHref URL used in Href can beThe URL of the link. Possible values:An absolute URL (external) points to another web site (like href="")A relative URL (local) – points to a file within a web site (like href="default.html")171.1 Internal linksHref URL used in Href can beLink to an element with a specified id within the page (like href="#top")A script (like href="javascript:alert('Hello');")181.1 Internal linksTo link another page, href attribute of opening tag of is usedthe value of the href attribute is the name of the file you are linking toFor example: Click here 191.1 Internal linksThe A stands for Anchor. The anchor tag tells the browser to anchor or to attach to something else. Every Anchor tag must have a closing or end tag () to signal the end of the anchor. HREF stands for Hypertext REFerence. It means that “this is where the link is going to.201.1 Internal links211.1 Internal links221.1 Internal links231.2 External linksTo link the page of another website, again the href attribute of opening tag of is used the value of the href attribute is the full web address for the page you want to link to rather than just the filename Click here 241.2 External links 252. Directory StructuresA directory is simply another name for a folder on a web siteThe root directory (or root folder) is the main directory that holds the whole of your web siteA subdirectory is a directory that is within another directoryA parent directory is a directory that contains another directory2627Entertainment index.html Videos videos.html Films englishfilms.html urdufilms.html Songs audio.html video.html2. Directory Structures2.1 Referencing a web pageSame Directory: When you want to link to, or include, a resource from the same directory, you can just use the name of that fileSubdirectory: sub-directory//file-nameParent directory: ../file-name28....29Entertainment index.html Videos videos.html Films englishfilms.html urdufilms.html Songs audio.html video.html2.1 Referencing a web page3. Internal document referencesAlso be called page jump, u can make this jump with two simple stepsStep 1Assign a name to the link you want to referenceE.g. 303. Internal document referencesStep 2add a link in anyplace in your page to let the user move to your bookmark point from itE.g.  Add the text to be displayed and clicked by the user313. Internal document references323. Internal document references334. Referencing another page at specific locationReferring other pages also involves 2 stepsStep 1: Assign a name to the linke.g. Step 2: Link to that page .344. Referencing another page at specific location354. Referencing another page at specific location365. More attribute for target:The target attribute specifies where to open the linked document.This example will open the linked document in a new browser window or in a new tab:.375. More attribute for target:Other values of target are:38_blankOpens the linked document in a new window or tab_selfOpens the linked document in the same frame as it was clicked (this is default)_parentOpens the linked document in the parent frame_topOpens the linked document in the full body of the windowframenameOpens the linked document in a named frame5. More attribute for accesskey: To access the link..tabindex:Which index shall be selected .title:Show title of link.395. More attribute for 40Other type of linksDownload LinkThe download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.This attribute is only used if the href attribute is set. There are no restrictions on allowed values41Other type of linksDownload LinkThis link is not supported in Internet explorer and Safari browserE.g.It can also be written as42Other type of linksMailto:Is used to send emailE.g.Jon Doe43Other type of linksMailto Example:44SummaryUse the HTML  element to define a linkUse the HTML href attribute to define the link addressUse the HTML target attribute to define where to open the linked documentUse the HTML  element (inside ) to use an image as a link45SummaryInternal linksExternal linksDirectory StructureInternal document referenceSome attributes of Other types of links46THANK YOU