TECH1001 Lecture 3

TECH1001 Lecture3 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

http://www.w3schools.com/tags/tag_ol.asp



http://www.w3schools.com/tags/tag_ul.asp



http://www.w3schools.com/tags/tag_li.asp



http://www.w3schools.com/tags/tag_dl.asp

http://www.w3schools.com/tags/tag_dt.asp



http://www.w3schools.com/tags/tag_dd.asp



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.


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


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:[email protected]>send William Smith an email</a>

http://www.eng.dmu.ac.uk/

http://www.eng.dmu.ac.uk/

mailto:[email protected]


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.


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!

http://www.w3schools.com/


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>


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.


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>


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.

http://www.w3schools.com/html/


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>


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>


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>


• 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.


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>


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>


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>

http://www.cata.co.uk/pilchard-works/%20pilchard-works.htm

http://www.cata.co.uk/pilchard-works/%20pilchard-works.htm


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.


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.


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.comhttp://www.clipartsite.com

http://www.free-clipart.com/

http://www.clipartsite.com/

http://www.clipartsite.com/


<!..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>


Positioning Text and Graphics

>An image

<img src ="swan.jpg"

align="bottom" width="100" height="50">

in the text

</p>


<p>

An image


align="middle" width="100" height="50">

in the text

</p>


<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>


<p>

An image


width="100" height="50">

in the text

</p>


<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>

Documents

TECH1001 Lecture 3