Basic Webpage Design Mark-up html document with images

Basic Webpage Design

Mark-up html document with images

Objectives

• To know how to mark-up the images in html.

• To identify the diffirent attributes of <img> tag.

• To know how to link the html pages using text

and images.

• To identify the different attributes of achor (<a>)

tag.

HTML Images

With HTML you can display images in a document.

HTML Images

THE IMAGE TAG AND THE SRC ATTRIBUTE In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attriburtes 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.

HTML Images

The syntax of defining an image:

<img src=”url”>

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www. jppalma09.com" has the URL:

http://www.jppalma09.com/images/boat.gif

HTML Images

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

THE ALT ATTRIBUTE

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat">

HTML Images

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.

It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

HTML Images

EXAMPLE 01. Insert images

HTML Images

EXAMPLE 01. Insert images

<html> <head> <title> insert images </title> </head> <body> An image: <img src="feuea.jpg" width="100 height="100"> </body> </html>

HTML Images

EXAMPLE 02. Insert images from another folder or another server

HTML Images

<html> <head> <title> Insert images from another folder or another server </title> </head> <body> An image from another folder: <img src="../images/assets/feuea.jpg" width="100" height="100"> </body> </html>


HTML Images

EXAMPLE 03. Align an image within a text

HTML Images

<html> <head> <title> align an image with a text </title> </head> <body> An image <img src ="feuea.jpg" align="bottom" width="50" height="50"> in the text An image <img src ="feuea.jpg" align="middle" width="50" height="50"> in the text An image <img src ="feuea.jpg" align="top" width="50" height="50">


in the text Note that bottom alignment is the default alignment An image <img src ="feuea.jpg" width="50" height="50"> in the text <img src ="feuea.jpg" width="50" height="50"> An image before the text An image after the text <img src ="feuea.jpg" width="50" height="50"> </body></html>

HTML Images

EXAMPLE 04. Let the image float to the left/right of a paragraph

HTML Images

<html> <head> <title> let the image float to the left/right of a paragraph </title> </head> <body> <img src ="feuea.jpg" align="left" width="60" height="60"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. <img src ="feuea.jpg" align ="right" width="60" height="60"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </body> </html>


HTML Images

EXAMPLE 05.Adjust images to different sizes

HTML Images

<html> <head> <title> adjust images to different sizes </title> </head> <body> <img src="feuea.jpg" width="20" height="20"> <img src="feuea.jpg" width="45" height="45"> 

EXAMPLE 02. Insert images from another folder or another server <img src="feuea.jpg" width="20%" height="20%"> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </body> </html>

HTML Images

EXAMPLE 06. Display an alternate text for an image (if the browser can’t load images)

HTML Images


<html> <head> <title>display an alternate text for an image </title> </head> <body> <img src="feuea.jpg" alt="Go Left" width="100" height="100"> Text-only browsers will only display the text in the "alt" attribute, which is "Go Left". Note that if you hold the mouse pointer over the image it will display the text. </body> </html>

HTML Images

EXAMPLE 07. Make a hyperlink of an image

<html> <head> <title> make a hyperlink of an image </title> </head> <body> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="feuea.jpg" width="100" height="100"> </a> </body></html>

Anchor Tag - <A>

<A>

Also called the anchor tag, identifies a link or a location within a document. You commonly use this tag to create a hyperlink, using the HREF=attribute. You can also use the <A> tag to identify sections within a document, using the NAME=attribute.

Ex:<A HREF="http://www.raycomm.com> Visit RayComm </A>

Anchor Tag - <A>

Attribute Information

COORDS="x1, y1, x2, y2"Identifies the coordinates that define a clickable area. Measure coordinates, in pixels, from the top-left corner of the image.

<A SHAPE="RECT" COORDS="20, 8, 46, 30" HREF="food.html">

Anchor Tag - <A>


HREF="URL"Specifies the relative or absolute location of a file to which you want to provide a hyperlink. <A HREF="details.html">More Info</A> SHAPE="{RECT, CIRLCLE, POLY, DEFAULT}"Specifies the type of shape used to represent the clickable area. SHAPE=RECT indicates that the shape is rectangular. SHAPE=CIRCLE specifies that the shape is a circle. SHAPE=POLY indicates that the shape is a polygon represented by three or more points. <A SHAPE="RECT" COORDS="20, 8, 46, 30" HREF="food.html">

Anchor Tag - <A>


STYLE="..."Specifies style sheet commands that apply to the contents within the <A> tags. <A STYLE="background:red" HREF="page2.html">Page 2 </A> TABINDEX="n"Indicates where the element appears in the tabbing order of the document. <A HREF="food.html TABINDEX="4">Food</A>

Anchor Tag - <A>Attribute InformationTARGET="..."Indicates the name of a specific frame into which you load the linked document. You establish frame names within the <FRAME> tag. The value of this attribute can be any single word. <A HREF="food.html TARGET="pages">Go to Page 2</A> TITLE="..."Specifies text assigned to the tag that you can use for the context-sensitive help within the document. Browsers may use this to show tool tips over the hyperlink. <A HREF="food.html TITLE="Go to the next page">Food</A> Other AttributesThis tag also accepts the TYPE, LANG, DIR, HREFLANG, onFocus, onBlur, onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes. See the Element-Independent Attributes section of this refrence for definitions and examples.

Summary

• Summary of the chapter or topic

Documents

Basic Webpage Design Mark-up html document with images