1

Fundamentals of Web designing

Ministry of Higher EducationBamyan University

Computer Science Department

Presented by : Mustafa Kamel MohammadiEmail : bamian.cs@gmail.com

Working with Links and Images

2

learning objective In this chapter you will learn

How to work with text in HTML Define paragraphs and headings Define different types of lists

3

What are links? Hyperlinks, or simply links, connect HTML pages to other resources on the Web. Links causes to connect you pages with

Other pages in other website Pages within your site Some area in your page

4

How to create links? To create a link we almost need three components

The web address or URL that we want to browse to it through the link Some text to label the link for being more understandable for users <a> </a> tag to wrap all those above with an href attribute.

<a href=“ http://www.google.com”>

This links you to google website

</a>

5

Link options You can link to a variety of online resources:

Other HTML pages (either on your Web site or on another Web site) Different locations on the same HTML page Resources that aren’t even HTML pages at all, such as e-mail addresses, pictures, and text files

6

URL types Absolute URL

An absolute URL uses a complete URL to connect browsers to a Web page or online resource for example, (http:// www.website.com/directory/page.html).

Relative links A relative link uses a kind of shorthand to specify the URL for the resource where you’re already

pointing You create relative links between resources in the same domain Because both resources are in the same domain, you can omit domain information from the URL If you use relative links on your site, your links still work if you change either

Servers Domain names

Ex: ( contact.html), (images/new.jpg),…. Use ../(two periods and a slash) before the filename to indicate that the browser should

move up one level in the directory structure. Ex: <a href=”../docs/home.html>Documentation home</a>

7

Common mistakes Even one incorrect letter in your URL can lead to a broken link. Broken links lead to an error page (often the HTTP error 404 File or directory not found). To avoid this error, be careful with these mistakes

Check capitalization Check extension Check file name Copy and paste URL if possible

8

Opening links in a new window Set the “target” attribute of <a></a> tag with the value _blank

Ex:

<a href=“ http://google.in” target=“_blank”>See google.in

</a>

9

Linking to a location in the same webpage In order to do this you must

Spot the location you want to go by assigning ID attribute Set link to point at the spotted location by setting the href attribute of link to the value of ID

Ex: <h2 id=“top” > Welcome to this page</h2>

The pound sign (#) indicates that you’re pointing to a spot on the same page ,not on another page.

<a href=“#top” >go to top of page </a>

10

Linking to non-HTML resources Non-Web files have unique URLs just like HTML pages. Any file on a Web server (regardless of its type) can be linked with its URL.

Ex:

<p><a href=”software.zip”>Software</a></p><p><a href=”doc.pdf”>Documentation</a></p>

11

Email address links A link to an e-mail address can automatically open a new e-mail, addressed to exactly

the right person.Ex:

<p>Send us your<a href=”mailto:comments@mysite.com”>comments</a></p>

12

Adding images on your page The image (<img />) element is an empty element(sometimes called a single-ton tag)that

you place on the page where you want your image to go.Ex:

<img src=“new.jpg” />

The “src” attribute in <img/> tag is the same as link attribute in <a> tag.

13

Adding alternative text ,width and height for images Alternative text is shown to user when the image is not loaded yet due to some

problems, like slower connection, lower graphic processor capability,…

Ex:

<img src=“flower.jpg” alt=“this is a flower” width=“60” height=“100” border=“5”/>

14

Image alignment “align” attribute of <img/> tag control how your image appears relative to the text

around it. Possible values are:

Top Bottom Middle Left Right

<p><img src="new.jpg" align=“top" />this is the text on the top of image

</p>

15

Image spacing You can specify the amount of space between your image and the texts around that by

the following attribtes: Hspace : horizontal spacing for left and right Vspace : vertical spacing for top and bottom

16

Image links You can use images as links by replacing <img/> tag with the text in an <a> tag

Ex:

<p><a href=”http://www.w3.org”><img src=”w3.jpg” alt=”Visit the W3C Web Site” height=”48” width=”315” border=”0” /></a></p>

17

18

References• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister• “HTML 5 designing rich internet applications” by Mathew Dawid• “HTML in ten simple steps” by Robert G. fuller