Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!
@  Ritesh : (27 March 2014 - 10:46 AM) :(
@  Ritesh : (27 March 2014 - 10:46 AM) He Is Busy With His Patients.
@  yordan : (26 March 2014 - 08:12 PM) Ahsani, Where Are You?

Photo
- - - - -

Understanding Xhtml A practical introduction to XHTML


8 replies to this topic

#1 Coach

Coach

    Member [ Level 1 ]

  • Members
  • 49 posts

Posted 19 May 2005 - 04:20 AM

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://www.w3.org/TR/xhtml1/']XHTML 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]

[quote name='http://www.wdvl.com/Authoring/Languages/XML/XHTML/']XHTML 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.[/quote]

What is HTML 4?

[quote name='http://www.w3.org/TR/xhtml1/#xhtml']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.[/quote]

Main differences between HTML and XHTML:
[quote name='http://www.w3schools.com/xhtml/xhtml_html.asp']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:
[quote]<b><i>This text is bold and italic</b></i>[/quote]

In XHTML all elements must be properly nested within each other like this:
[quote]<b><i>This text is bold and italic</i></b>[/quote]

Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:
[quote]<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>[/quote]

This is correct:
[quote]<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>[/quote]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:
[quote]<html>
<head> ... </head>
<body> ... </body>
</html>[/quote]

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:
[quote]<BODY>
<P>This is a paragraph</P>
</BODY>[/quote]

This is correct:
[quote]<body>
<p>This is a paragraph</p>
</body>[/quote]

All XHTML Elements Must Be Closed

Non-empty elements must have an end tag.
This is wrong:
[quote]<p>This is a paragraph
<p>This is another paragraph[/quote]

This is correct:
[quote]<p>This is a paragraph</p>
<p>This is another paragraph</p>[/quote]

Empty Elements Must Also Be Closed

Empty elements must either have an end tag or the start tag must end with />.
This is wrong:
[quote]This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">[/quote]

This is correct:
[quote]This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />[/quote]
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 />. [/quote]

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

#2 Coach

Coach

    Member [ Level 1 ]

  • Members
  • 49 posts

Posted 19 May 2005 - 09:27 PM

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

[quote name='http://www.yourhtmlsource.com/accessibility/xhtmlexplained.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.[/quote]
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:

[quote name='http://www.wdvl.com/Authoring/Languages/XML/XHTML/exs.html'][quote]1: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
3: <title>Minimal document</title>
5: </head>
6: <body>
7: <p>
8: <a href="http://validator.w3....check/referer">
  validate</a>
9: </p>
10:</body>
11:</html>[/quote]
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.[/quote]
At this time, let's take a deep look inside of the three main components of the XHTML document structure:

DTD TAG: DOCTYPE
[quote name='http://www.devguru.com/Technologies/xhtml/quickref/xhtml_doctype.html']<!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://www.w3.org/TR...-frameset.dtd">

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://www.w3.org/TR...l1-strict.dtd">

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://www.w3.org/TR...nsitional.dtd">

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://www.w3.org/TR...nsitional.dtd">
<html>
<head>
<title>DevGuru</title>
</head>
<body>
DevGuru is great!
<br />
<img src="/images/xhtmlvalid.gif" />
</body>
</html>[/quote]
TAG: head
[quote name='http://www.devguru.com/Technologies/xhtml/quickref/xhtml_head.html']<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://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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>
[/quote]
TAG: body
[quote name='http://www.devguru.com/Technologies/xhtml/quickref/xhtml_body.html']<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://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DevGuru XHTML body Example</title>
</head>

<body>
... place document contents between the body tags
</body>
</html>[/quote]
At this point the SECOND part, soon the next part: Keep learning and practicing XHTML! :)

#3 Coach

Coach

    Member [ Level 1 ]

  • Members
  • 49 posts

Posted 21 May 2005 - 04:29 AM

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
[quote name='http://www.devguru.com/Technologies/xhtml/quickref/xhtml_a.html']<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://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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>
[/quote]
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://www.astahost.com/dir/page1.html, then you can use the following URL: <a href=”page2.html”> to point to the page located at: http://www.astahost.com/dir/page2.html.

You can also use <a href=”/index.html”> to point to the page located at: http://www.astahost.com/index.html 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! :)

#4 ihope

ihope

    Newbie [ Level 2 ]

  • Members
  • 22 posts

Posted 23 May 2005 - 02:06 PM

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

#5 Coach

Coach

    Member [ Level 1 ]

  • Members
  • 49 posts

Posted 23 May 2005 - 10:02 PM

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
[quote name='http://www.w3schools.com/tags/tag_p.asp']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.[/quote]

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
[quote name='http://www.w3schools.com/tags/tag_phrase_elements.asp']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[/quote]
FONT STYLE ELEMENTS
XHTML have others elements to style the text on the website:

The <tt> <i> <b> <big> <small> tags
[quote]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[/quote]
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! :)

#6 chiiyo

chiiyo

    Premium Member

  • Members
  • 218 posts
  • Location:Singapore
  • myCENTs:92.74

Posted 25 May 2005 - 02:49 AM

Actually, ihope, absolute and relative links mean differently from outside links and "inside" links. Absolute links typically mean a URL that is complete, like "Http://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.

#7 Coach

Coach

    Member [ Level 1 ]

  • Members
  • 49 posts

Posted 26 May 2005 - 05:48 PM

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
[quote name='http://www.yourhtmlsource.com/images/fileformats.html#PNG']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.[/quote]

How to Get Images on WebPages

The basic element to insert images on WebPages is the
The <img> tag
[quote name='http://webpageworkshop.co.uk/main/html_element_img']This 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.
[quote]
<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">
[/quote]
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
[quote]<img src="/images/png256_example.jpg"
    alt="An example of how the img element works"
    width="320"
    height="240"

>[/quote][/quote]

At this point the fifth part, soon the sixth and last part.
Keep learning and practicing XHTML! :D

#8 Maybe Skate Team

Maybe Skate Team

    Member [ Level 2 ]

  • Members
  • 65 posts
  • Location:Dirty Jersey Shore

Posted 27 May 2005 - 09:24 AM

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!

#9 Guest_iGuest-Tay_*

Guest_iGuest-Tay_*
  • Guests

Posted 19 July 2008 - 10:47 AM

XHTML syntax question
Understanding Xhtml

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



Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users