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 tag. To know how to link the html pages using text and images. To identify the different attributes of achor ( ) 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 tag. The 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: 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:

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:

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 insert images An image:

HTML Images EXAMPLE 02. Insert images from another folder or another server

HTML Images Insert images from another folder or another server An image from another folder: <img src="../images/assets/feuea.jpg" width="100" height="100"> EXAMPLE 02. Insert images from another folder or another server

HTML Images EXAMPLE 03. Align an image within a text

HTML Images align an image with a text 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"> EXAMPLE 02. Insert images from another folder or another server 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">

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

HTML Images let the image float to the left/right of a paragraph <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. 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. EXAMPLE 02. Insert images from another folder or another server

HTML Images EXAMPLE 05.Adjust images to different sizes

HTML Images adjust images to different sizes <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.

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

HTML Images EXAMPLE 02. Insert images from another folder or another server display an alternate text for an image 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.

HTML Images EXAMPLE 07. Make a hyperlink of an image make a hyperlink of an image You can also use an image as a link:

Anchor Tag - 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 tag to identify sections within a document, using the NAME=attribute. Ex: Visit RayComm

Anchor Tag - 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.

Anchor Tag - Attribute Information HREF="URL" Specifies the relative or absolute location of a file to which you want to provide a hyperlink. More Info 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.

Anchor Tag - Attribute Information STYLE="..." Specifies style sheet commands that apply to the contents within the tags. Page 2 TABINDEX="n" Indicates where the element appears in the tabbing order of the document. Food

Anchor Tag - Attribute Information TARGET="..." Indicates the name of a specific frame into which you load the linked document. You establish frame names within the tag. The value of this attribute can be any single word. Go to Page 2 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. Food Other Attributes This 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