1. IS1824: Introduction to Internet Multimedia Lecture 6: Links and images in HTML Rob Gleasure R.Gleasure@ucc.ie http://girtab.ucc.ie/rgleasure/index.html

2. IS1824 Today’s lecture  Links Introducing hypertext into your webpages Anchoring sections of pages  Images and Colours Including images on WebPages Colours and the HTML hexadecimal system

3. HTML Links HTML uses a hyperlink to link to another document on the Web  this is a VERY important function! Links are built from 2 components 1. The a tag (which stands for anchor ) 2. The href attribute This follows this syntax Text to be displayed

4. HTML Links Let’s try out the following HTML Some regular text. Go to BIS homepage. Some more regular text Now save your page, open it in a browser, and try clicking on “Go to BIS homepage”.

5. The Target attribute  As well as linking to other webpages, you can also choose where the page will be opened.  Try adding this, reloading it, and clicking the link Some regular text. Go to BIS homepage. Some more regular text HTML Links

6. As well as linking to other webpages, you can also link to specific parts of webpages (even the current one). We can create an anchor on our page as follows: Text to be displayed And we can then link to it by adding: Jump to label anchor Or in a different page: Jump to label anchor HTML Links

7. Try copying and pasting this into the page, reloading it, and clicking the ‘Return to top of page’ link Diploma information Diploma in Applied Business Computing Go to BIS homepage. About DABC The Diploma in Applied Business Computing is a targeted initiative which has been developed by Business Information Systems, UCC. The goal is to help address the problem of individuals from marginalized areas of society being underrepresented in IT courses run by third- level institutions. The Diploma is specifically aimed at the long term unemployed. This programme also helps to redress the issue of individuals who, for a variety of reasons, have been denied access to value-added activities in one of the most vibrant sectors of the employment market. The diploma has, and continues to, ensure access for these students to the programme. The site for the Diploma is situated off-campus in Farrenferris, in the north side of Cork. This site was chosen as central to the areas considered to be in need of further social inclusion into third level institutes; in effect bringing the programme to those it is aimed at, in order to increase social inclusion. The Diploma is a joint initiative between the Business Information Systems Group, CIT, the Centre for Adult and Continuing Education at UCC, and the Cork City Partnership. A steering group with representatives from these bodies, and others who work with those from socially disadvantaged regions, direct and monitor the programme. Return to of page HTML Links

8. Images in HTML The Image Tag and the Src Attribute In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: 

9. Images in HTML The url points to the location where the image is stored Go to bis.ucc.ie and right-click on the UCC crest in the top right corner. Click on save image as (exact wording may vary from browser to browser), navigate to wherever you are saving the WebPages you make in class, and save the image as ucc_logo.gif. Now open a blank notepad file and save it as image.html (make sure this is in the same folder as you saved ucc_logo.gif)

10. Images in HTML Copy the following text into image.html and open it in a browser Here is some text. Here is some more text The browser puts the image where the image tag occurs in the document. For example, if you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

11. Images in HTML The Alt attribute The alt attribute is used to define an "alternate text" for an image (you write in something to display if it doesn’t work for some reason). e.g. It’s highly recommended that you always include the alt attribute when including images

12. A note on Colours Colours can be described in 2 basic ways in HTML and CSS 1. Keywords can be used, e.g. ‘red’, ‘green’, ‘yellow’ W3C list only 17 valid colour names: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. This greatly limits the variety of colour you can use but is a quick and easy way to trial different colour schemes

13. A note on Colours 2. Hexadecimals can be used for the combination of red, green and blue These hexadecimals may be written as 3 pairs of two-digit numbers, starting with a # sign  The lowest value (darkest) two-digit number is 0 (in HEX: 00). The highest value (lightest) is 255 (in HEX: FF).  red = #FF0000, blue is #0000FF They may sometimes also be written in the format rgb(00, 00, 00), where the actual number 0-250 is written as an integer  red = rgb(255,0,0), blue is rgb(0,0,255)

14. A note on Colours (continued) Varying the Red, Green, and Blue values from 0 to 255, gives > 16 million different colours (256 x 256 x 256). e.g. From http://www.w3schools.com/Html/html_colors.asphttp://www.w3schools.com/Html/html_colors.asp

15.  Make a webpage called first.html  Add the UCC logo after the heading of your first.html  Make another page called second.html  Add a heading to each page stating the name of the page, e.g. ‘This page is the first page’, ‘This page is the second page’  Add links from first.html to second.html with the text ‘go to second page’ and from second.html to first.html with the text ‘go to first page’  On a new line, add a second link on first.html which opens http://www.ucc.ie in a new window, with the text in the link as ‘visit UCC’ http://www.ucc.ie  Add an anchor near the top of second.html called “top”. Exercise…

16.  Add the following text to second.html Lorem ipsum dolor sit amet, neque velit suspendisse nunc mattis, eu duis vel viverra tortor, a massa feugiat, felis volutpat ut ultrices sit ante tincidunt. Amet fermentum, etiam lacus neque nonummy est mauris, urna nunc sagittis tempus suscipit tincidunt vitae, volutpat maecenas eros nulla, dui in. Per volutpat, nec vestibulum feugiat, est sagittis senectus suscipit nunc tellus porttitor, nibh habitasse nam mauris nec eget quam, bibendum id. Et eros cursus pede justo, tempus donec condimentum lacus ut pede fermentum, donec magnis leo metus mauris nulla convallis, eros consectetuer nibh urna id. Sed risus nulla, ut ante, gravida vestibulum ligula purus, ac sociosqu dui ullamcorper ipsum quam velit. Malesuada sed phasellus felis nulla, urna urna aenean lacus lorem scelerisque, erat et fusce, viverra non qui vehicula. Nunc massa montes, lectus nullam dapibus curabitur, turpis amet fringilla erat tempus ornare. Mattis fringilla ligula aenean mi faucibus, sodales felis massa enim vivamus consectetuer. Massa erat morbi a, etiam mollis, urna posuere laoreet consectetuer sodales, in sapien arcu facilisis arcu nibh, dui sit justo. Integer nostra porta tincidunt, ut lorem non libero, dolore assumenda est dolor. Magnis nostra, ac metus augue orci suscipit mauris. Nam accumsan, risus sit nibh sit lorem sollicitudin, a wisi tempus sociis mi ipsum est. Pellentesque netus, est id. Velit libero, senectus metus ultrices justo suscipit. Sunt amet volutpat lacinia imperdiet facilisis quisque. Sed tincidunt, adipiscing blandit.  Add a link at the bottom of second.html which contains the text “click here to return to the top of the page”  Make this link redirect back to the “top” anchor in second.html, before the recently added text Exercise…

17. Want to read more? The colours of HTML and hexadecimal references  http://www.w3schools.com/Html/html_colors.asp http://www.w3schools.com/Html/html_colors.asp Really useful rgb-to-hexadecimal convertor  http://www.drpeterjones.com/colorcalc/ http://www.drpeterjones.com/colorcalc/ Using the Lorem ipsum placeholder text  http://www.newbiewebsitedesign.com/what-is-lorem-ipsum-why- should-you-use-it http://www.newbiewebsitedesign.com/what-is-lorem-ipsum-why- should-you-use-it