What’s the difference between HTML and XHTML?

Filed under: HTML / XHTML

The next generation of HTML (HyperText Markup Language) is XHTML (Extensible HyperText Markup Language). XHTML 1.0 is a reformulation of HTML 4.0 as an XML application, so it’s pretty much standard for software where syndication is used. XHTML was created to replace HTML. It’s stricter and cleaner than HTML and is endorsed by W3C as the recommended markup language for the internet. It’s almost identical to HTML with a few exceptions outlined below.

The main differences of HTML and XHTML are:

  1. Every element must be closed in HTML, this includes (but is not limited to) <br>, <hr>, <img> and <meta>. These tags are closed in XHTML by using a forward slash, so <br> becomes <br /> and <img> becomes <img />.
  2. All XHTML tags must be lowercase, tags such as <TITLE> would not pass XHTML validation.
  3. XHTML elements must be properly nested. An example of improperly nested elements is

    <strong><em>Improperly nested elements</strong></em>

    4. An example of properly nested elements is

    <strong><em>Properly nested elements</em></strong>

  4. Valid XHTML documents must also be well formed. This means that all XHTML documents must have:

    <html>
    <head>...</head>
    <body>...</body>
    </html>

Visit W3school.org for a tutorial on XHTML.

Use a custom error document

Filed under: htaccess

Web servers have a default error document that it serves in cases of requests for pages that don’t exist. One can create a custom error document and tell the web server to use the custom error document instead of its default error document.

Steps to take to use a custom error document

  1. Create a custom error document. To view Zann-Marketing.com’s custom error document, click here.
  2. Add this line of code in your .htaccess file (preferably near the beginning) and your web server will use the custom error document when it can’t find the page requested.

    ErrorDocument 404 /your_error_document.html

Vertically centering text using CSS 2

Filed under: CSS Stylesheets

Vertically centering one line of text can be achieved using one of 2 methods outlined in this article.

To vertically center a number of lines of text using CSS will (unfortunately) not work with the methods outlined in the above mentioned article. To vertically center more than one line of text (with no restriction as the how many lines of text you want to center), use the method outlined below.

Please note that this method currently does NOT work with Internet Explorer. This is because this browser is not able to render “display: table” and “display: table-cell”.

<div style="display: table; width: 25em; height: 25em; position: relative; border:1px solid #CECECE">
<div style="position: relative; top: 50%; display: table-cell; vertical-align: middle">
<div style=" position: relative; top: -50%; border:1px solid #00ff00">
Display any text of any height<br />
or any content, and<br />
everything will be<br />
vertically centered.<br />
</div>
</div>
</div>

Display any text of any height
or any content, and
everything will be
vertically centered.

We’re still trying to find a solution for vertically aligning more than one line of text that will work in IE and is flexible enough to accomodate varying number of lines. Any and all suggestions are welcome!

Horizontally centering block elements in CSS

Filed under: CSS Stylesheets

Quick tip: How does one horizontally center block elements using CSS? Try using:

margin: 0 auto;

Your browser will automatically set the left and right margins to center your block element, such as a div.

Example:

<div style="width:25em; height:5em; margin:0 auto; border:1px solid #CECECE">
Block element horizontally centered within its parent element.
</div>

Block element horizontally centered within its parent element.

Vertically centering text using CSS

Filed under: CSS Stylesheets

As many people have discovered, there is no CSS definition for vertically centering text in a block element such as a div. One can achieve this in HTML and XHTML, by using a table and the attribute “valign=middle” to vertically center text, however when you want to achieve the same thing in CSS, that’s when it gets quite tricky.

There are a couple work arounds for this problem. Both these work arounds only work for ONE line of text, the solution for multiple lines of text will be posted soon.

  1. Use vertical-align and an invisible image
  2. Use line-height

1. Use vertical-align and an invisible image

Horizontal centering with CSS has been around for a while and can be easily achieved by using “text-align:center”. The closest definition for vertical alignment in CSS is “vertical-align” which may be top, middle or bottom.

vertical-align:top
vertical-align:middle
vertical-align:bottom

The problem with vertical-align is that it’s an inline style, so it won’t vertically center your text in a div when used by itself. For example:

<div style="width:25em; height:10em; border:1px solid #CECECE; vertical-align:middle">
This text should be vertically centered, but it's not.
</div>

This text should be vertically centered, but it’s not.

To use “vertical-align:middle” to center your text, you will need to put an image of the same height as your block element next to the text you want vertically centered. For example:

<div style="width:25em; height:10em; border:1px solid #CECECE">
<img src="/sg/t.gif" alt="" style="width:1px; height:10em; vertical-align:middle" />This text is vertically centered.
</div>*

This text is vertically centered.

* t.gif is a transparent gif of 1 x 1 pixel.

2. Use line-height

To use line-height to vertically center text, specify the line-height to be the same height as the block element. For example:

<div style="border:1px solid #CECECE; width:25em; height:10em; line-height:10em">
One line of vertically centered text.
</div>

One line of vertically centered text.

DirectoryIndex

Filed under: htaccess

The DirectoryIndex directive sets the URL to be returned when the index of a directory is requested by a visitor, that is, when a visitor specifies a / at the end of the directory name.

http://www.zann-marketing.com/

When there is a request for the index of a directory, the server usually returns the URL index.html. By using DirectoryIndex, one can specify a different URL to be returned when the index of a directory is requested, eg index_2.html.

Example:

DirectoryIndex index_2.html

In the above example, when the index of the directory is requested, the server will return the URL index_2.html, instead of index.html.

One can specify more than one URL for the DirectoryIndex and the server will return the first URL it finds. For example:

DirectoryIndex index.html home.html start.html

In the example above, the server will try to return index.html first, and if index.html isn’t found, then it will try to return home.html, and if that fails, it will try to return start.html.

Previous Entries