REEM ALMOTIRI Information Technology Department Majmaah University

Lecture 4

Contents: Links Images

Links HTML Hyperlinks (Links) : A hyperlink (or link) is a word,group of words,or image that you can click on to jump to a new document or a new section within the current document. Links are specified in HTML using the tag.

Types of links : 1.Internal link to a place in the same page. 2.Local link to another page in the same site. 3.Global link to another page in the different site.

HTML Link Syntax : Link text The href attribute(hypertext reference) specifies the destination of a link. Link text can be a text or image.

Links Examples : Link to a site links between my own pages Linking to a Specific Part of a Page link Unordered list of links

Link to a site Link to a site Visit W3Schools.com! Example Note: If you set the target attribute to "_blank", the link will open in a new browser window The title attribute is used to type a short description of the link

links between my own pages index about us Example about us A link to page 1

links between my own pages "../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../". Alternatively, you can always type the complete address for the file (URL).

Linking to a Specific Part of a Page Link to Learn HTML Link to Learn CSS Learn HTML Text text text text Learn CSS Text text text text Example

link Send an to computer department Example

Unordered list of links w3schools google Yahoo Example

HTML Images The Tag and the Src Attribute In HTML, images are defined with the tag. The tag is empty tag, which means that it contains attributes only, and 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.

The images which can be displayed in web page is JPG – JPEG – gif – png Syntax for defining an image:

The Alt Attribute The alt attribute specifies an alternate text for an image, if image cannot be displayed. Height and width Attributes The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default.

Align Attribute Values Top – Bottom – Middle – Right – Left. Border Attribute Get a border to the image. Vspace Attribute Define the space at the top and bottom of the image. Hspace Attribute Define the space at the left and right of the image.

images Examples: Insert images Insert images from different locations Aligning Images Vertically Aligning Images Horizontally Make a hyperlink of an image

Insert images An image: Example

Insert images from different locations An image from another folder: An image from W3Schools: Example

Aligning Images Vertically This is some text. This is some text. Example

Aligning Images Horizontally A paragraph with an image. The image will float to the left of this text. A paragraph with an image. The image will float to the right of this text. Example

Make a hyperlink of an image Create a link of an image with border around it : Example