Understanding Xhtml A practical introduction to XHTML

[Coach 0]

A lot have been said about the convenience of using XHTML instead of the well known HTML for the development of web pages and often it is not used since it is believed itâs too complicated to learn the new language and that it wouldnât be worth the time and effort.

 

It seems to me that the observation mentioned above is mistaken and I believe that it is worth to try to demonstrate that it is all the opposite, but not so much with the theoretical argumentation but rather with a practical approach covering diverse aspects of the process of developing web pages.

 

First things first: What is XHTML?

 

[quote name='http://forums.xisto.com/no_longer_exists/ 1.0 (this specification) is the first document type in the XHTML family. It is a reformulation of the three HTML 4 document types as applications of XML 1.0. It is intended to be used as a language for content that is both XML-conforming and, if some simple guidelines are followed, operates in HTML 4 conforming user agents. Developers who migrate their content to XHTML 1.0 will realize the following benefits:

    * XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.

    * XHTML documents can be written to operate as well or better than they did before in existing HTML 4-conforming user agents as well as in new, XHTML 1.0 conforming user agents.

    * XHTML documents can utilize applications (e.g. scripts and applets) that rely upon either the HTML Document Object Model or the XML Document Object Model [DOM].

    * As the XHTML family evolves, documents conforming to XHTML 1.0 will be more likely to interoperate within and among various XHTML environments.

 

The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility.

 

[quote name='http://forums.xisto.com/no_longer_exists/ 1.0  is the first step toward a modular and extensible web based on XML (Extensible Markup Language). It provides the bridge for web designers to enter the web of the future, while still being able to maintain compatibility with today's HTML 4 browsers. It is the reformulation of HTML 4 as an application of XML. It looks very much like HTML 4, with a few notable exceptions, so if you're familiar with HTML 4, XHTML will be easy to learn and use. XHTML 1.0 was released on January 26th as a Recommendation by the W3C.

 

What is HTML 4?

 

HTML 4 is an SGML (Standard Generalized Markup Language) application conforming to International Standard ISO 8879, and is widely regarded as the standard publishing language of the World Wide Web.

 

SGML is a language for describing markup languages, particularly those used in electronic document exchange, document management, and document publishing. HTML is an example of a language defined in SGML.

 

SGML has been around since the middle 1980's and has remained quite stable. Much of this stability stems from the fact that the language is both feature-rich and flexible. This flexibility, however, comes at a price, and that price is a level of complexity that has inhibited its adoption in a diversity of environments, including the World Wide Web.

 

HTML, as originally conceived, was to be a language for the exchange of scientific and other technical documents, suitable for use by non-document specialists. HTML addressed the problem of SGML complexity by specifying a small set of structural and semantic tags suitable for authoring relatively simple documents. In addition to simplifying the document structure, HTML added support for hypertext. Multimedia capabilities were added later.

 

In a remarkably short space of time, HTML became wildly popular and rapidly outgrew its original purpose. Since HTML's inception, there has been rapid invention of new elements for use within HTML (as a standard) and for adapting HTML to vertical, highly specialized, markets. This plethora of new elements has led to interoperability problems for documents across different platforms.

 

Main differences between HTML and XHTML:

The Most Important Differences:

    * XHTML elements must be properly nested

    * XHTML documents must be well-formed

    * Tag names must be in lowercase

    * All XHTML elements must be closed

 

Elements Must Be Properly Nested

 

In HTML some elements can be improperly nested within each other like this:

<b><i>This text is bold and italic</b></i>

 

In XHTML all elements must be properly nested within each other like this:

<b><i>This text is bold and italic</i></b>

 

Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  <li>Milk</li>

</ul>

 

This is correct:

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

 

Documents Must Be Well-formed

All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

<html>

<head> ... </head>

<body> ... </body>

</html>

 

Tag Names Must Be In Lower Case

 

This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags.

This is wrong:

<BODY>

<P>This is a paragraph</P>

</BODY>

 

This is correct:

<body>

<p>This is a paragraph</p>

</body>

 

All XHTML Elements Must Be Closed

 

Non-empty elements must have an end tag.

This is wrong:

<p>This is a paragraph

<p>This is another paragraph

 

This is correct:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

 

Empty Elements Must Also Be Closed

 

Empty elements must either have an end tag or the start tag must end with />.

This is wrong:

This is a break<br>

Here comes a horizontal rule:<hr>

Here's an image <img src="happy.gif" alt="Happy face">

 

This is correct:

This is a break<br />

Here comes a horizontal rule:<hr />

Here's an image <img src="happy.gif" alt="Happy face" />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.

 

At this point the first part, in short time the second part: Keep learning and practicing XHTML!

[Coach 0]

Here the second part intended to keep on helping to the best comprehension of the XHTML.

 

Let's start by specifying the advantages that XHTML offers in contrast with HTML

 

 

Benefits of XHTML:

 

Once you have used XHTML for a short time, it is no more difficult to use than HTML ever was, and in ways is easier since it is built on a more simplified set of standards. Writing code is a more streamlined experience, as gone are the days of browser hacks and display tricks. Editing your existing code is also a nicer experience as it is infinitely cleaner and more self-explanatory. Browsers can also interpret and display a clean XHTML page quicker than one with errors that the browser may have to handle.

 

A well-written XHTML page is more accessible than an old style HTML page, and is guaranteed to work in any standards-compliant browser (which the latest round have finally become) due to the insistence on rules and sticking to accepted W3C specifications. As mentioned above, XHTML allows greater access to configurations other than a computer and browser. This interoperability is another aspect of XHTML's greater accessibility.

 

The first thing you need to know about changing over to XHTML as the new standard is that there really isn't much new to learn. No new tags or attributes have been added into your repertoire, like HTML 4 (although a few have been deprecated); this is just a move towards good, valid and efficient coding. XHTML documents stress logical structure and simplicity, and use CSS for nearly all presentational concerns. It just means you have to change the way you write code. Even if you always wrote great code before, there're a few new practices you need to add in.

What's even more quality about it though, is that a page written entirely in XHTML will still work fine in the current generation of browsers, so you shouldn't have any problems migrating your site across.

Now, letâs take a look to the complete XHTML document structure, which is conformed by three main parts:

1) The DOCTYPE,

2) The HEAD, and

3) The BODY.

 

So a XHTML minimal document example is:

 

 

 

1: <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

2: <html xmlns="http://forums.xisto.com/no_longer_exists//;

3: <head>

3: <title>Minimal document</title>

5: </head>

6: <body>

7: <p>

8: <a href="http://forums.xisto.com/no_longer_exists/

  validate</a>

9: </p>

10:</body>

11:</html>

The numbers and colons are not part of the HTML file, but serve to associate the following comments with the lines above:

1. Specifies the document type.

2. Declares this to be an HTML document and declares an XML namespace.

3. The head contains items that are about the document.

4. The title used in the browser title bar, hotlists, listings, etc.

5. Closes the head.

6. body contains the document's displayable content.

7. Begins a paragraph.

8. An anchor, to the W3C validator.

9. Closes the paragraph.

10. Closes the body.

11. Closes the html.

 

At this time, let's take a deep look inside of the three main components of the XHTML document structure:

 

DTD TAG: DOCTYPE

 

<!DOCTYPE ... >

 

The DOCTYPE tag is used to declare the DTD (Document Type Definition) for an XHTML document.

 

On a broader scale, XHTML, like HTML, is a subset of the SGML (Standardized Generalized Markup Language). SGML, and its various family members, use DTDs to define the context of the language. The W3C has defined a DTD to be:

 

      "...a collection of declarations that, as a collection, defines the legal

      structure, elements, and attributes that are available for use in a

      document that complies to the DTD."

 

Specifically, the XHTML DTD precisely defines the grammar, rules, and syntax that will apply to a document that has been created using XHTML. To repeat this in a different way, to be valid XHTML, the XHTML code that creates the XHTML document must obey all of the grammar, rules, and syntax in the XHTML DTD.

 

This tag is mandatory and must appear at the top (on the first line) of all XHTML code. If the DOCTYPE DTD tag is not present, then it is not XHTML code.

 

The exclamation mark (!) is required. This is the only tag in an XHTML document that is not closed. Obey the case and syntax.

 

Currently, there are three types of DTDs that apply to XHTML: Frameset, Strict, and Transitional. You must obey the syntax.

 

Frameset

 

This is declared when you have partitioned the HTML document into two or more frames (with or without using Cascading Style Sheets).

 

Syntax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://forums.xisto.com/no_longer_exists/;

 

Strict

 

This is declared when you use Cascading Style Sheets (CSS) to enhance the appearance and style of your HTML document. In general, you should only use this type of DTD if you are certain that your viewer has access to modern browsers that recognize CSS.

 

Syntax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/;

 

Transitional

 

This is declared when you are simply using HTML to create the appearance of the web page, rather than using Cascading Style Sheets (CSS). This type of DTD would ensure the widest viewing audience to your XHTML document.

 

Syntax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;

 

The basic XHTML document is composed of DOCTYPE, html, head, title, and body tags. Note that all tags in XHTML are closed except for the DOCTYPE.

 

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" "http://forums.xisto.com/no_longer_exists/;

<html>

<head>

<title>DevGuru</title>

</head>

<body>

DevGuru is great!

<br />

<img src="/images/xhtmlvalid.gif" />

</body>

</html>

TAG: head

 

<head> ... </head>

 

The head tag is the HTML document header. It serves as a container for other tags that control the contents and appearance of the main body of the document.

 

A well-formed XHTML document must contain properly nested and closed html, head, title, and body tags. The head tag is inserted immediately after the html tag, but before the body or frameset tags.

 

The head element can contain any of the following HTML tags in any order:

 

base set base URL

linkset document link

metadocument keywords

script  script code

style  set style sheet rules

title  name of document

 

The separate closing tag is mandatory.

 

Attributes and Events

 

dir    lang 

 

profile

The profile attribute is a list of one or more (comma separated) URL addresses of the meta data profiles.

 

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;

<html xmlns="http://forums.xisto.com/no_longer_exists//; xml:lang="en" lang="en">

<head>

<title>DevGuru XHTML head Tag Example</title>

<base href="http://www.devguru.com/; />

<link rel="stylesheet" type="text/css" href="include/StylesDefinitions.css" />

</head>

<body>

...

</body>

</html>

TAG: body

 

<body> ... </body>

 

The body tag is used to signify the start and stop of the contents of your HTML document. A well-formed XHTML document must contain properly nested and closed html, head, title, and body tags.

 

If you are using frames, then you use the frameset tag in place of the body tag.

 

The separate closing tag is mandatory.

 

Attributes and Events

 

class    dir    id    lang    onclick    ondblclick    onkeydown    onkeypress    onkeyup    onmousedown    onmousemove    onmouseout    onmouseover    onmouseup    style    title

 

This example demonstrates the code structure for creating an XHTML document.

 

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;

<html xmlns="http://forums.xisto.com/no_longer_exists//; xml:lang="en" lang="en">

<head>

<title>DevGuru XHTML body Example</title>

</head>

<body>

... place document contents between the body tags

</body>

</html>

At this point the SECOND part, soon the next part: Keep learning and practicing XHTML!

[Coach 0]

Here the third part to help the understanding of XHTML.

 

This time we will cover essential aspects of website building. It is well known that the main function of a website is to provide users with media rich resources that consist of text, pictures, video, sound and other graphical content. In fact all the information that a site offers is on several web pages that need to be linked, because without links a website is useless. More important than this is the fact that WEB and INTERNET turned out to be what them are today thanks to the links.

 

In consequence, there are two fundamental types of links: within and outside the website; the first-mentioned links to pages on your own site and the later links to other websites on the WEB. In any case the basic syntax of the XHTML anchor element, like HTML, is:

TAG: a

<a> ... </a>

 

The <a> tag is called the anchor tag and it is most commonly used with the href attribute to create a hypertext link (usually referred to as just a link). By simply clicking on the link with a mouse or using a keyboard command, you can travel from one page to another page on the same web site or a different one. By default, the new page is normally displayed in the same window or frame, unless you specify otherwise using the target attribute.

 

Note that links cannot be nested. An <a>...</a> element cannot contain other a elements.

 

You can insert characters, images, line breaks (<br /> or <br />), and text between the opening and closing a tags. It is recommended that you should not insert Cascading Style Sheets code or any other HTML tags between the opening and closing tags. Rather, place all such tags outside of the a element.

 

The separate closing tag is mandatory.

Attributes and Events

 

accesskey    class    dir    id    lang    onblur    onclick    ondblclick    onfocus    onkeydown    onkeypress    onkeyup    onmousedown    onmousemove    onmouseout    onmouseover    onmouseup    tabindex    title

 

charset

The charset attribute is used to specify the character encoding used on the page that is the target of the link. Character encoding defines how a sequence of bytes is to be converted into characters for display.

 

coords

The coords attribute is currently not supported by most browsers. It is used to define an area of influence around the a tag.

 

href

The href attribute is used to specify the target URL address for a link.

 

hreflang

The hreflang attribute can only be used when the href attribute is also being used. It specifies the language of the page that is the target of the link.

 

name

The name attribute is a string of characters that is used to label an element with a name. The name must be unique to that document and cannot be reused. The name can be the target of a link.

 

rel

The rel attribute is currently not fully supported by most browsers. It is a space-separated list of one or more values that specify the relationship from the source page to the target for a link. Some of the proposed values are, appendix, bookmark, chapter, contents, copyright, glossery, help, index, next, prev, section, stylesheets, and subsection.

 

rev

The rev attribute is currently not fully supported by most browsers. It is a space-separated list of one or more values that specify the relationship from the target page to the source for a link. Perhaps the most useful value is relation.

 

shape

The shape attribute is currently not supported by most browsers. It is used to define an area of influence around the a tag.

 

target - not allowed in Strict XHTML

The target attribute specifies the name of the frame or window in which the target page should appear when a link is clicked. The four reserved names are _blank, _parent, _self, and _top.

 

type

The type attribute specifies the content type of the target page of a link. It has a MIME encoding type value.

 

This example demonstrates the code for creating a link. The target attribute is used to open the linked document in a new window.

 

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;

<html xmlns="http://forums.xisto.com/no_longer_exists//; xml:lang="en" lang="en">

<head>

<title>DevGuru XHTML a Tag Example</title>

</head>

<body>

<a href="http://www.devguru.com/; target="_blank"> DevGuru</a>

</body>

</html>

Some details of the href attribute:

 

The above example shows an External Link, in this case the URL used is: http://www.devguru.com/

 

Other way, an Internal Link point to a page within the same website that is under the same domain name, in this case the URL be at variance. Letâs say that is on a page located at: http://forums.xisto.com/no_longer_exists/, then you can use the following URL: <a href=âpage2.htmlâ> to point to the page located at: http://forums.xisto.com/no_longer_exists/.

 

You can also use <a href=â/index.htmlâ> to point to the page located at: http://forums.xisto.com/no_longer_exists/ and <a href=â../index.htmlâ> to point to the same page.

 

At this point the THIRD part, soon the next part: Keep learning and practicing XHTML!

[ihope1405241495 0]

30,000 reputation points for Coach!

 

there are two fundamental types of links: within and outside the website; the first-mentioned links to pages on your own site and the later links to other websites on the WEB.

Hmm, I like to call these relative and absolute.

 

*thinks of something else to say*

 

Uh...

[Coach 0]

Always the aim of any website is to communicate something, to achieve such an intention itâs necessary to grab the surferâs attention, provokes its interest on the topic and to draw him into the website content. For it is necessary to have a good content and to carry out a suitable presentation using essential elements like: text, diagrams, graphics, and photography images.

 

This fourth part of understanding XHTML will show how to manage text in order to build better websites.

 

READABLE TEXT

When all the text in the page streams from top to bottom, without any interruption, the contents ends up boring and nobody would want to read it. Paragraphs and line breaks come to help get more readable text. Paragraph is a block element that contain reasonable portion of text and Line Break states that text would start on a new line.

 

The <p> tag

Definition and Usage

The <p> tag defines a paragraph.

 

Differences Between HTML and XHTML

All "presentation attributes" of the p element were deprecated in HTML 4.01.

All "presentation attributes" of the p element are not supported in XHTML 1.0 Strict DTD.

 

Example

Source Output

<p>This is some text in a very short paragraph</p>

This is some text in a very short paragraph.

 

EMPHASIZING SOME TEXT

Occasionally it is needed to highlight text putting more emphasis in some words within the same paragraph:

 

The <em> and <strong> tags

Definition and Usage

The following elements are all phrase elements. They are not deprecated, but it is possible to achieve a much richer effect using style sheets.

 

<em>Renders as emphasized text

<strong> Renders as strong emphasized text

Example

Source  Output

<em>Emphasized text</em><br />

Emphasized text

<strong>Strong text</strong><br />

Strong text

FONT STYLE ELEMENTS

XHTML have others elements to style the text on the website:

 

The <tt> <i> <b> <big> <small> tags

Definition and Usage

The following elements are all font style elements. They are not deprecated, but it is possible to achieve richer effects using style sheets.

<tt> Renders as teletype or mono spaced text

<i> Renders as italic text

<b> Renders as bold text

<big> Renders as bigger text

<small> Renders as smaller text

 

Differences Between HTML and XHTML

NONE

XHTML have elements like headers, blockquote, big, small and others that make good effects on fonts and text, but it is better to use them from the Styling Sheet perspective to achieve best results. For this reason, Iâll soon make another post titled âStyling XHTMLâ to help understand the complementary action between XHTML and CSS.

 

Keep learning and practicing XHTML!

[chiiyo 0]

Actually, ihope, absolute and relative links mean differently from outside links and "inside" links. Absolute links typically mean a URL that is complete, like blahblah.com/blahblah/  whereas relative URLS are like "/pictures/image.jpg" where it depends on where the current page resides to get the file. Most of the time people do use absolute links to link to outside sites, and relative links to link to files within the site, but that doesn't mean that you can't use absolute links for inside linking.

[Coach 0]

This is the fifth part, this time to understand how to manage images in XHTML.

 

It is clear the vital importance of images on web design, in consequence the election of the most appropriated image format to use on building your website, so it result in a small and fast-loading graphic, is essential too.

 

To identify which format to use, always it is convenient to considerate of both the image’s quality and the file size. The three formats more used on the net are:

- Graphics Interchange Format (GIF)

- Joint Photographic Experts Group (JPEG)

- Portable Network Graphics (PNG)

 

GIF format is used when you wish to display a graphic made of very few colours such as logos and are also used to create short animated files.

 

JPEG format is generally the format used for photographs. They are used when you wish to display two much colours, but they are not suited for images with blocks of the same colour.

 

PNG format can contain as many colours as a JPG, but when using the same number of colours as a GIF they generally produce smaller file sizes.

 

You can find more information about this topic on:

 

Image File Formats

GIF — Graphics Interchange Format

Compuserve’s 8-bit GIF format has long been the most popular on the Internet, mainly because of its small size. It is ideal for small navigational icons and simple diagrams and illustrations where accuracy is required, or graphics with large blocks of a single colour. The format is loss-less, meaning it does not get blurry or messy. GIFs use a simple technique called LZW compression to reduce the filesizes of images by finding repeated patterns of pixels, but this compression never degrades the image quality.

 

GIF files can be saved with a maximum of 256 colours. This makes it a poor format for photographic images. Because this can sometimes be tight, GIFs have the option to dither, and will mix pixels of two different available colours to create a suggestion of another colour.

 

GIFs can be animated, which is another reason they became so successful. Most animated banner ads are GIFs. You will need an animation program to make your own animations.

 

GIFs allow single-bit transparency, which means when you are creating your image, you can specify one colour to be transparent. This allows the background colours of the web page to show through the image.

 

GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added. This usually means a larger overall filesize, but it means that a version of the image gets placed onto the viewer’s screen much quicker, and so is beneficial in many situations, as it gives the impression of a speedier download.

 

GIFs (variously pronounced “gif” or “jif”) are a very good format for most of the graphics you’ll be using on your site, though PNGs below are better in many regards. Experimentation is the key to success.

 

JPEG — Joint Photographic Experts Group

 

The 16-bit JPEG format (usually written without the E), was designed with photographs in mind. It is capable of displaying millions of colours at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.

 

JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.

 

Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency; but as I said, they really are only for photos. Simple graphics with large blocks of colour should not be saved as JPGs because the edges get all smudgy.

 

The » JPEG (“jay-peg”) format is likely to be replaced at some point in the future by the updated JPEG2000 format.

 

PNG — Portable Network Graphics

 

PNG is a format » invented specifically for the web in response to a licensing scheme introduced which meant the creators of any software that supported the GIF format had to pay five thousand dollars for the privilege (this tax has since expired). While they were at it however, the creators of PNG (“ping”) went ahead and created a format superior to GIF in almost every way.

 

One version of the format, PNG-8, is similar to the GIF format. It can be saved with a maximum of 256 colours and supports 1-bit transparency. Filesizes when saved in a capable image editor like FireWorks will be noticeably smaller than the GIF counterpart, as PNGs save their colour data more efficiently.

 

PNG-24 is another flavour of PNG, with 24-bit colour support, allowing ranges of colour akin to a high colour JPG. PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format. This means that filesizes can be rather big against a comparable JPG.

 

PNG’s main draw are alpha-channels. Instead of the rudimentary transparency options in other formats (where a pixel is either transparent or opaque), an alpha channel can specify the opacity of any pixel from 0–255, where 0 is fully transparent and 255 is fully opaque. This allows you to create a graphic that can be placed on top of any background colour and will retain a translucent effect, with the background showing through the pixels that are not opaque.

 

The problem with this — and there had to be one — is that IE6 doesn’t support alpha-channels. Once a new version of IE comes out with this vital support, you should see the effect springing up on trendy designers’ sites across the web.

And what of animation? PNG can be made into multi-image files through the MNG extension of the format, but browser support is patchy for this format. Stick with GIFs for your animations.

 

Where does all this leave the PNG format? It may take a good number of years to find widespread usage, but as it stands at the moment using PNG-8 in place of static GIFs will lower the filesizes of your images. There’s no reason not to adopt them now as the format you create your site icons with.

 

How to Get Images on WebPages

 

The basic element to insert images on WebPages is the

The <img> tag

[quote name='http://forums.xisto.com/no_longer_exists/ element is used to insert an image object into an HTML page. This is generally in the form of a JPEG, GIF or PNG image file.

<img

    align="bottom | left | middle | top | right"**

    alt="alternative text"‡

    border="pixels"**

    class="class name(s)"

    dir="ltr | rtl"

    height="pixels"

    hspace="pixels"**

    id="unique identifier"

    ismap

    lang="language code"

    longdesc="url"

    src="url"‡

    style="style information"

    title="text"

    usemap="url"

    vspace="pixels"**

    width="pixels">

Key:

‡ = Required attribute

** = Transitional only

Explanation of attributes

 

align**: used to specify the horizontal alignment of the element with respect to the page. The default value is "left".

 

alt‡: used to specify the alternative text that should replace the image if the image cannot be displayed. This text should not be a description of the image but rather a replacement text that would be suitable in the context in which the image would have been displayed, eg. an image of a heart in the code "I <img src="heart.gif" alt="love"> you" would have "love" as its alternative text as the word "heart" would make much less sense in context with the text.

 

border**: used to specify the thickness of the border that surrounds the image. This should be a value in pixels. The default for images that are not being used as links is '0', whereas when an image is used as a link a border is generally shown - the value being set by the browser.

 

class: used to state which class(es) the element belongs to. It is possible to indicate more than one class for an element by separating each class name with a space character. This attribute is normally used in combination with a stylesheet in order to associate the elements with particular styles defined within the stylesheet.

 

dir: used to set the direction of the text in combination with the language set in the lang attribute. The available values are "ltr" (left to right) and "rtl" (right to left), with the default value being "ltr".

 

height: this attribute indicates the height, in pixels, that the image should be displayed at. Percentage values are also supported by most browsers, but this method of specifying height is unpredictable at best.

 

hspace**: used to specify the horizontal space between the image and its neighboring text.

 

id: used to specify a unique alphanumeric identifier to the element. This is usually used in combination with stylesheets in order to apply a style to one particular instance of an element. Only one element, regardless of type, can be given a particular id.

 

ismap: used to indicate that the image is a server-side image map. This means that the coordinates of the image that the user clicks on are sent to the server for processing. In this case, the image must be contained within an anchor element, where the URL that the anchor points to is the server-side image map processor.

 

lang: used to indicate the language being used in the text contained within the element. The value of this attribute takes on the form of the ISO standard lanuage abbreviations found in RFC 3066. A list of these codes can be found on the ISO language codes page.

longdesc: this is used to indicate the URL of a document that further explains the content of the image.

 

src‡: this attribute specifies the URL of the source image that should be displayed when using an image element.

 

style: used to specify an inline style to apply to the element. The styles defined here override the styles declared in the header section.

 

title: used to define an advisory text that may be displayed as a tooltip when a mouse is used to hover over the element.

 

usemap: this indicates that the image is used as a client-side image map. The value of this attribute should match the value of the name attribute in the corresponding map element.

 

vspace**: used to specify the vertical space between the image and its neighboring text.

 

width: this attribute indicates the width, in pixels, that the image should be displayed at. Percentage values are also supported by most browsers, but this method of specifying width is unpredictable at best.

Event handlers

 

The following event handlers are defined for this element:

 

* onclick

* ondbclick

* onkeydown

* onkeypress

* onkeyup

* onmousedown

* onmousemove

* onmouseout

* onmouseover

* onmouseup

 

Basic example

<img src="/images/png256_example.jpg"

    alt="An example of how the img element works"

    width="320"

    height="240"

>

 

At this point the fifth part, soon the sixth and last part.

Keep learning and practicing XHTML!

[Maybe Skate Team 0]

I am personally staged to learn XHTML I think it will over-take other basic language soon plus it is "clean" I really appreaciate this guide, helped me learn something in the first 3 paragraphs!

[iGuest 3]

XHTML syntax question

Understanding Xhtml

 

Can anyone offer the correct syntax for inserting a background using the XHTML strict syntax?