Basic Webpage Design Markup 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='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=”url”> The URL points to

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. jppalma 09. com" has the URL: http: //www. jppalma 09. 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 EXAMPLE 02. Insert images from another folder or another server <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 EXAMPLE 02. Insert images from another folder or another server <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 EXAMPLE 02. Insert images from another folder or another server <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 EXAMPLE 02. Insert images from another folder or another server <html> <head> <img src="feuea. jpg" <title> adjust images to width="20%" height="20%"> different sizes </title> </head> <body> You can make a picture larger or smaller changing the values in the "height" and <img src="feuea. jpg" "width" attributes of the width="20" height="20"> img tag. </body> <img src="feuea. jpg" </html> width="45" height="45">

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 <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> 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 Ray. Comm </A>

Anchor Tag - <A> Attribute Information COORDS="x 1, y 1, x 2, y 2" 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> Attribute Information 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> Attribute Information STYLE=". . . " Specifies style sheet commands that apply to the contents within the <A> tags. <A STYLE="background: red" HREF="page 2. 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 Information TARGET=". . . " 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 Attributes This tag also accepts the TYPE, LANG, DIR, HREFLANG, on. Focus, on. Blur, on. Click, on. Dbl. Click, on. Mouse. Down, on. Mouse. Up, on. Mouse. Over, on. Mouse. Move, on. Mouse. Out, on. Key. Press, on. Key. Down, and on. Key. Up attributes. See the Element-Independent Attributes section of this refrence for definitions and examples.

Summary • Summary of the chapter or topic