Archive

Posts Tagged ‘(X)HTML’

HTML And XHTML Doctypes

June 23rd, 2008 No comments

In order to validate any page of HTML or XHTML you will need a doctype. This is a string of text that sits at the top of the document and tells the browser exactly what markup standard has been used to create the page.

XHTML Strict

This doctype is used in an XHTML document when you are not using any framset or depreciated tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional

This doctype is used if your XHTML document contains depreciated tags like <b>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset

Use this XHTML doctype if your document contains either frameset tags or depreciated tags, or both.
&ltl!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML Strict

Use this HTML doctype if your document contains no depreciated tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional

Also called loose, this doctype is to be used if your HTML document contains depreciated tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML Frameset

This doctype is used in a HTML document that contains frameset tags or depreciated tags or both.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Without these doctypes in place the browser will default to what is called “quirks mode” where certain CSS styles are looked at a little differently. If you are finding trouble with your stylesheet then try adding a doctype that fits your markup.

Alternatively, if you find that you want your page to validate and adding the doctype tag actually destroys the page then you can add what is called a "broken doctype". This is the same as any normal doctype, but with the URL pointing to the DTD missing. Here are two examples.

XHTML Strict Broken Doctype

This doctype is used in an XHTML document when you are not using any framset or depreciated tags, but still want the page to display in quirks mode and validate properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

HTML Strict Broken Doctype

This doctype is used in an HTML document when you are not using any framset or depreciated tags, but still want the page to display in quirks mode and validate properly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Categories: (X)HTML Tags: , , ,

Convert HTML To ASCII With PHP

April 26th, 2008 2 comments

The reverse of turning ASCII text into HTML is to convert HTML into ASCII. And to this end here is a little function that does this.

function html2ascii($s){
 // convert links
 $s = preg_replace('/<a\s+.*?href="?([^\" >]*)"?[^>]*>(.*?)<\/a>/i','$2 ($1)',$s);
 
 // convert p, br and hr tags
 $s = preg_replace('@<(b|h)r[^>]*>@i',"\n",$s);
 $s = preg_replace('@<p[^>]*>@i',"\n\n",$s);
 $s = preg_replace('@<div[^>]*>(.*)</div>@i',"\n".'$1'."\n",$s);
 
 // convert bold and italic tags
 $s = preg_replace('@<b[^>]*>(.*?)</b>@i','*$1*',$s);
 $s = preg_replace('@<strong[^>]*>(.*?)</strong>@i','*$1*',$s);
 $s = preg_replace('@<i[^>]*>(.*?)</i>@i','_$1_',$s);
 $s = preg_replace('@<em[^>]*>(.*?)</em>@i','_$1_',$s);
 
 // decode any entities
 $s = strtr($s,array_flip(get_html_translation_table(HTML_ENTITIES)));
 
 // decode numbered entities
 $s = preg_replace('/&#(\d+);/e','chr(str_replace(";","",str_replace("&#","","$0")))',$s);
 
 // strip any remaining HTML tags
 $s = strip_tags($s);
 
 // return the string
 return $s;
}

To use this function just pass it a string. Here is an example of it at work.

$htmlString = '<p>This is some <strong>XHTML</strong> markup that <em>will</em> be<br />turned <a href="http://www.talkincode.com/" title="Talk in code">into</a> an ascii string</p>';
 
echo html2ascii($htmlString);

Produces the following output.

This is some *XHTML* markup that _will_ be
turned into (http://www.talkincode.com/) an ascii string

Categories: PHP Strings Tags: , , , ,

External JavaScript Include In HTML

December 26th, 2007 No comments

To include a JavaScript file into a HTML page you can use the script tag with the src parameter pointing towards the source code file. However, there is a subtle difference between the script tag in HTML and XHTML. This is because the language attribute is not supported in XHTML, so if you just copy the code from HTML to XHTML the page won’t validate. The solution here is to just leave it out.

For HTML.
<script language="JavaScript" type="text/javascript" src="scripts/javascript.js"></script>

For XHTML
<script type="text/javascript" src="scripts/javascript.js"></script>

The type attribute is the mime type of the script, which is always text/javascript. Although there is come discussion about what the mime type is supposed to be, best results are usually obtained by just sticking with text/javascript.

Categories: (X)HTML Tags: , , , ,

Linking An RSS Feed to a HTML Document

December 20th, 2007 No comments

Adding a hyper link for an RSS or Atom feed on your web page works, but that’s not all you can do. By adding a link to the head section of the page you can allow your users an alternative method of picking up your feed.

To add an RSS feed use this.

<link rel="alternate" type="application/rss+xml" href="http://www.example.com/rssfeed.xml" />

To add an Atom feed use this.

<link rel="alternate" type="application/atom+xml" href="http://www.example.com/JustBlog/wp-atom.php" />

These are both XHTML examples. To do this in HTML just remove the slash on the right hand side like this.

<link rel="alternate" type="application/rss+xml" href="http://www.example.com/rssfeed.xml" />
<link rel="alternate" type="application/atom+xml" href="http://www.example.com/JustBlog/wp-atom.php" />

You can add more than one link attribute to a page with no ill effects. Most modern browsers will give you a list of feeds to select from.

Categories: (X)HTML Tags: , , , , ,