XHTML 1.1 Tutorial

Images and Styles

Tag Purpose
<img /> Defines an image
The <img> is used to insert a graphic or image directly into the flow of text and other images. No line breaks are inserted before or after the image. You can use attributes and style sheets to organize an appearance and presentation of images as you need. Note that this element must properly closed.
For example, <img src="picture.jpg" alt="picture description" />
<map> Defines an image map
The <map> is used to create a client-side image map which is a mouse-sensitive regions. It is used as a container for the code that creates and implements the image map. You could also use any of the onmouse attributes to capture a mouse event (such as 'onmouseover') and execute a JavaScript code.
<area /> Defines an area inside an image map
The <area> must be contained inside the <map>. When you click on a region in the map, an attribute contained in the <area> can direct an action to occur.
<style> Defines a style definition
The <style> is used to create document-level style sheet rules. The style rules will apply to the entire HTML page. The <style> must appear inside the <head>. The code, contained between the opening and closing style tags, is not XHTML or HTML, but is CSS (Cascading Style Sheets). To apply a CSS to a whole website, you must define a separate CSS file. Click to learn more about CSS from W3C website.
<div> Defines a section in a document
The <div> is used to define a block-line portion of an XHTML document as a <div> and to apply any of the core attributes of this tag against the contents of that element. The behavior of this tag is block-line, because this tag causes a line break (the equivalent of a br tag) to occur both before and after the div element.
<span> Defines a section in a document
The <span> is used to define an inline portion of a document as a span element and to apply any of the core attributes of this tag against the contents of that element. The behavior of this tag is inline because the effects occur in the normal flow of the text and images (without the tag inserting any additional linefeeds or carriage returns).


Congratulation!! You reach the end of tutorial, you can test your knowledge click here!

Previous

This tutorial is final project for INFSCI 2000, Fall 2004
Copyright 2004 School of Information Science, University of Pittsburgh