Hyperlinks, Images and Tables - De Montfort University

Hyperlinks, Images and Tables PART 1 Overview We will look at What is Hypertext. How hyperlinks are used to navigate to World Wide Web Creating hyperlinks Types of Hyperlinks

Hyperlink Styling Hyperlinks, Images and Tables The, that are connected via Uniform Resource Locators (URL) via hyper test links. World Wide Web is an collection of information of documents and other resources that are identified by Uniform Resource Locators (URLs). Interlinked via hypertext and accessed via internet. So how do we display these resources?

Hyperlinks Images Tables Hypertext and Hyperlinks Hypertext was originally created around 40 years before the world wide web. (https://en.wikipedia.org/wiki/Hypertext) What if you wanted to know more about The Garden of Forking Paths?

Hypertext and Hyperlinks Link: When clicked, were transports us to the topic selected by the user. In this case: (https://en.wikipedia.org/wiki/The_Garden_of_Forking_Paths) Creating the Link The page is written with Hyper Text Mark-up Language.

Links are created through the use of tags. Links are broken into two sections. Link address Text shown to users By using this link we will be redirected to aboutUs.html Absolute and Relative Hyperlinks There are a range of different hyperlinks that can be used.

Each of the links are broken down into two types of hyperlinks. Absolute Hyperlinks Google Relative Hyperlinks About Us Directory Navigation With the use of links we can also navigate through directories within the file structure.

What if we wanted to navigate to a new section of the website? Lets try and access the navigation.html from default.html. By making use of the ../ within the hyperlink. We can go up one level of the file structure. D Selecting Directory So what if we wanted to navigate to another part of the file structure all together?

We have the option to navigate through directories. Lets navigate to the original web forms of the DVDSwapShop. So what does this link do? Selecting Directory This is the file structure of the web application. Relative Hyperlinks So what is a relative hyperlink?

A relative hyperlink is a link within the same web application. This includes the navigation of directories, download links etc As long as they are within the file structure of the web application. Some examples of relative hyperlinks are:- Absolute Hyperlinks

An absolute link references directly to another web application. The link above is absolute. This is not relative to our web application. These are created by using the full URL in the hyperlink. By clicking We can also attach search parameters to the URL to automatically search.

. We will be navigated to their home page. E.g. https://www.google.co.uk/search?q=dmu+blackboard Bookmark Hyperlinks In HTML we also have the use of bookmark hyperlinks. These links allow a user to navigate the page by clicking links that navigate you to different sections. These are better known as anchors.

To create an anchor. Give a set of tags an id. Create a link using the id to know where to link to starting with a # Download Hyperlinks Another type of hyperlink available is a download link. This will create a normal link that when clicked will automatically download the file attached.

E.g. This will navigate to the downloads directory and start the download for download.pdf. Sending Emails Using Hyperlinks we can also send emails. When clicking an email link, it will open the default mail client on the computer such as Outlook, Thunderbird etc. To create this kind of link we use the following text.

What if we wanted to auto fill the subject? What about filling in the body? JavaScript Hyperlinks JavaScript is a client side programming language that is used to create interactive effects inside web browsers. Using this programming language we can perform functions within the browser. We can also have hyperlinks that activate JavaScript code.

This code can be helpful but could also be used for malicious purpose if used irresponsibly. Do what does the following do? JavaScript Hyperlinks This link will create a pop up box on the page that will display the current date and time to the user. This link will display a random number between 1 and 100 every time the link is clicked.

Styling Hyperlinks Styling also applies to links themselves. Hyperlinks have multiple states to indicate what is currently happening on the page. A blue link indicates an unvisited link. CSS = (a:link) Link Purple indicates a visited link. CSS = (a:visited)

Link A link being hovered over. CSS = (a:hover) A currently active link. CSS = (a:active) These help identify what page you are on, where you have been and where your about to click to. All of these can be overwritten using a stylesheet. CSS for Hyperlinks Removes Underlining from link.

Changes link colour to green. Changes visited colour to orange. Changes link hovering to hot pink. Changes active links to golden rod when being clicked. Other Attributes In regards to hyperlink there is also other attributes that are used that cause them to behave differently.

Target=_blank Class=css This is used as reference in the CSS for applying styles to specific parts. ID = id This will open the linked page in a new browser window/tab An identifier that is only to be used once within the style sheet or can

also be used with JavaScript. name=element Specifies the name of the element. Recap We have looked at: What is Hypertext. What are Hyperlinks and how they are used. Different Types of Hyperlinks including:

Absolute Relative Directory Navigation Bookmark Email Javascript

Styling of Hyperlinks Other Attributes that are used. Next Week We are going to look at HTML in regards to: Images Dynamic Tables

Recently Viewed Presentations

  • REFERENCING USING OSCOLA Section 8 Bibliographies You must

    REFERENCING USING OSCOLA Section 8 Bibliographies You must

    No! Two key differences: You leave out page numbers pinpointing a quotation. The surname of the author comes first, and full first names are not used, only initials e.g. in your footnotes an author might be Joe Bloggs, but in...
  • Lecture 1: Course Introduction and Overview

    Lecture 1: Course Introduction and Overview

    What is each member's responsibility? Short progress reports are required Project Signup (1/2) Project Signup: Watch "Group/Section Signup" Link 4-5 members to a group Everyone in group must be able to actually attend same section The sections assigned to you...
  • Women in Archaic Greece - University of North Carolina at ...

    Women in Archaic Greece - University of North Carolina at ...

    Women in Archaic Greece: Maidens Archaic Greece: 8th - 6th centuries BCE Limitations of information: Few words from women usually - but in this period, Sappho Much more information about aristocrats (leisure for art and poetry) Different social strata reflected...


    PURE . SUBSTANCE. All the particles . are the same. Element. Compound. Mixture. Contains different particles. SUBSTANCES. Substance made from only one type of atom
  • Emission Control System Fundamentals - Cengage

    Emission Control System Fundamentals - Cengage

    Emission Control System Fundamentals Chapter 43 Objectives Describe the different types of air pollution caused by motor vehicles Explain the fundamentals of the major emission control systems Label the parts of emission control systems Explain the operation of electronically controlled...
  • Globalization Lecture 2 - Dimensions

    Globalization Lecture 2 - Dimensions

    Times New Roman MS Pゴシック Arial Gill Sans Monotype Sorts Professional 1_Professional Globalization Lecture 2 - Dimensions PowerPoint Presentation Globalization of Politics PowerPoint Presentation PowerPoint Presentation Globalization of Social Relations PowerPoint Presentation Undermining the idea of "Society" Undermining the idea...
  • Literacy will be based on Talk for Writing,

    Literacy will be based on Talk for Writing,

    To create images in the style of Romero Britto, a Brazilian Pop artist. To explore the work of Matisse and Picasso. D.T. To understand healthy eating and the need for a balanced diet. To design, make and taste our own...
  • Discovering conserved DNA

    Discovering conserved DNA

    Variables allow for persistence and control structures A better variable interpolation The variable is allowed to change We can set the variable to the Prosite Pattern Variables can be overwritten The variable is allowed to change We can set the...