1 / 34

TECH1001 Lecture 3

TECH1001 Lecture 3. Electronic Publishing and Production 1 Lists,Links and Images. Topics. Lists Links Images. Lists. There are mainly two types of list that can be used and these are identified as:- < ol > an ordered list (specifies numbers) and

macy-cantu
Télécharger la présentation

TECH1001 Lecture 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TECH1001 Lecture 3 Electronic Publishing and Production 1 Lists,Links and Images TECH1001 Lecture3

  2. Topics • Lists • Links • Images TECH1001 Lecture3

  3. Lists There are mainly two types of list that can be used and these are identified as:- • < ol > an ordered list (specifies numbers) and • < ul > an unordered list (specifies bullet points) Let us look at some examples TECH1001 Lecture3

  4. <title > The use of LISTS </title> </head> <body> <h3> An ordered list </h3> <ol> <li> walk to bus stop </li> <li> wait for bus </li> <li> get on bus </li> <li> pay the fare </li> </ol> TECH1001 Lecture3

  5. <h3> An unordered list </h3> <ul> <li> buy apples </li> <li> buy oranges </li> <li> buy pears </li> <li> buy grapes </li> </ul> </body> TECH1001 Lecture3

  6. Links HTML uses a hyperlink to link to another document o on the Web. The Anchor Tag and the href Attribute • HTML uses the <a> (anchor) tag to create a link to another document. • An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. • The syntax of creating an anchor:  <a href="url">Text to be displayed</a> TECH1001 Lecture3

  7. Also numbers or letters can be used in an ordered list, the syntax would be:- <ol type ="1"> this would give a numbered list • Instead of "1" you may use "a" for letters, or "i" for roman numerals. • It is also possible to use different bullet point shapes for an unordered list. • This would have the format:- <ul type = "circle">item 1 instead of circle, square or disc could be used. TECH1001 Lecture3

  8. Another type of list which is sometimes used is called a 'definition list'. A definition list is indented but does not contain a number or bullet point in front of the line. <title> definition list </title> </head> <body> <h3> A definition list </h3> <dl> <dt> Newton </dt> <dd> a unit of force</dd> <dt> kilowatt</dt> <dd> a unit of power</dd> <dt> kilogram </dt> <dd> a unit of mass</dd> </dl> TECH1001 Lecture3

  9. List Tags Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a definition term <dd> Defines a definition description note: dl-definition list; dt-item to be defined, dd-definition TECH1001 Lecture3

  10. ANCHOR TAGS <a> and </a> • These are used when it is required to link html pages together. • For instance; consider two html files in the same directory named document1.html and document2.html. To call document2.html from document1.html the following code would need to be inserted within the main body of document1.html:-    text to describe jump point <a href ="document2.html">document2 </a> closing tag address of where to go hypertext reference opening tag • A similar exercise would then be needed to call document1.html from document2.html. TECH1001 Lecture3

  11. If the two documents are in different directories the path name of the documents would need to be specified in the "address of where to go". If there are more than two documents (say 4 documents) then the links may look like the structure below:-  document1.html document2.html document3.html document4.html TECH1001 Lecture3

  12. External links In order to jump to an external address on the web eg De Monfort University, the syntax would resemble the code below:- <ahref="http://www.dmu.ac.uk">DeMontfortUniversity </a> If you would like to give the user of your web pages the opportunity to communicate by email <a href=mailto:wsmith@dmu.ac.uk>send William Smith an email</a> TECH1001 Lecture3

  13. The hash sign # is used to provide jump points within an html document. An example of which is shown below. The example shows how an unordered list can be used in conjunction with internal jump points. <h1> This is the home Page of Mr William Smith <ul> <li> <a href ="#About me"> About me </a> </li> <li> <a href ="#My Work"> My Work </a> </li> <li> <a href ="#My Interests"> My Interests </a> </li> </ul> <a name ="About me">About me <p><h1> </a> </p> My name is Mr William Smith I live at 3 Cedar Drive, West End, Blackpool. TECH1001 Lecture3

  14. Links continued • The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. • This anchor defines a link to W3Schools: <a href="http://www.w3schools.com/">VisitW3Schools!</a> The line above will look like this in a browser: Visit W3Schools! TECH1001 Lecture3

  15. Links continued The Target Attribute With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> TECH1001 Lecture3

  16. Links continued The Anchor Tag and the Name Attribute The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a> The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. TECH1001 Lecture3

  17. Links continued The line below defines a named anchor: <a name="tips">Useful Tips Section</a> You should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: <a href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a>A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:  <a href="#tips">Jump to the Useful Tips Section</a> TECH1001 Lecture3

  18. Links – useful tips • Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href=http://www.w3schools.com/html/ • Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document. • If a browser cannot find a named anchor that  has been specified, it goes to the top of the document. No error occurs.  TECH1001 Lecture3

  19. Images To add an image the <img> Image tag and the <src> Source tag may be used as shown below within the body of the document:- <body bgcolor="#ffffff"> <! ..changes background colour to white- may not be necessary> <h2 align="center">This is my homepage </h2> <! Puts in a central heading> <img align="left" src="mypic.jpg" /> <! Aligns image on the left> </body> TECH1001 Lecture3

  20. Another example: <img src="fish.gif" height="48“ width="48“ alt="anotherpicture.gif" /> <! This specifies the picture size and will also load an alternative picture "anotherpicture.gif" should the first picture not arrive> TECH1001 Lecture3

  21. To put a border on an image: <body bgcolor="#ffffff"> <! ..changes background colour to white- may not be necessary> <h2 align="center">borders on images </h2> <! Puts in a central heading> <img align="left" src="mypic.jpg" width="200" height="120" /> <img align="right" src="mypic.jpg" width="200" height="120" border ="6" /> </body> TECH1001 Lecture3

  22. The resolution of a graphical image is the number of dots (pixels) which make up the images width and height. This is generally quoted as for example 400 x 200 height). • Generally smaller images, load faster into a web page and they also take up less disk space. The resolution of a television screen is usually 640 x 480 pixels, and for a typical new graphics monitor is 1024 x 768 pixels. • Images can be compressed successfully with little or no detectable changes when viewed. • Popular image manipulation programs include Paint Shop Pro and Photoshop. TECH1001 Lecture3

  23. Making an Image ‘Clickable’ If you require to make an image into a link which leads to another graphic file or document then the format of the html anchor tag would be as shown below:- <ahref="gotothisplace.htm"> b<imgsrc="image.gif" /></a> TECH1001 Lecture3

  24. This would make the image into a link:– <head> <title> making an image clickable </title> </head> <body> <a href="fish.htm"><imgsrc="fish.gif" height="100" width="100" /></a> </body> TECH1001 Lecture3

  25. Another example:- <head> <title> Making an image clickable </title> </head> <body> <a href=http://www.cata.co.uk/pilchard-works/ pilchard-works.htm> <img src=“pilchard.jpg” height=“100” width=“200” />Go to the Pilchard Works</a> </body> TECH1001 Lecture3

  26. Adding a background image This should be done with care as a large background image may take some time to load. Try to ensure that the background image remains in the background and does not overpower the main text making it difficult to read. Generally, where possible, use a feint background image with few colours. Use the following notation to install a background image:- <body background="background.gif"> where background.gif is the filename. TECH1001 Lecture3

  27. Adding a background image cont • Ensure that you use files of the format JPEG (JPG), or GIF as these are the main file formats that are used. • These files are much smaller than using BMP or PCX. Smaller graphic files are much quicker to load and save valuable web space. • Remember you can generate and save your own graphic files by using one of the paint or image manipulation programs that are available. TECH1001 Lecture3

  28. There are plenty of graphics that can be used to enhance your website. Some of these graphics are royalty free and on the Internet for your use. Two examples of such sites have the following URL's http://www.free-clipart.com http://www.clipartsite.com TECH1001 Lecture3

  29. <!..If you require to indent words (or a picture) from the left hand side of the page you can use the 'blockquote' tag as shown in the example below. The example shown produces 3 indents...> <head> <title>Producing indents</title> </head><body bgcolor="white"><font size = "6"> <blockquote>first indent <br />here is some text <blockquote>second indent <br /> here is some more text <blockquote>third indent <br />and here is some more text </blockquote> </blockquote> </blockquote> </font> </body> TECH1001 Lecture3

  30. Positioning Text and Graphics An image <img src ="swan.jpg" align="bottom" width="100" height="50"> in the text </p> > TECH1001 Lecture3

  31. <p> An image <img src ="swan.jpg" align="middle" width="100" height="50"> in the text </p> TECH1001 Lecture3

  32. <p> An image <img src ="swan.jpg" align="top" width="100" height="50"> in the text </p> <p>Note that bottom alignment is the default alignment</p> TECH1001 Lecture3

  33. <p> An image <img src ="swan.jpg" width="100" height="50"> in the text </p> TECH1001 Lecture3

  34. <p> <img src ="swan.jpg“ width="100"height="50"> An image before the text </p> <p> An image after the text <img src ="swan.jpg" width="100" height="50"> </p> TECH1001 Lecture3

More Related