| The JMBG is your source for software, source code, services, web design/hosting and more! |
HTML and XHTML are the basic building blocks for web pages. It is a way of formatting text and controlling placement of items on a web page. HTML stands for Hyper Text Markup Language. The X in XHTML stands for EXtensible. Anybody can create a HTML or XHTML document using a standard plain text editor like notepad or kwrite. The extention should be .html, but could also be .htm.
XHTML is HTML, it's just neater, cleaner, and a more standardised way to write web pages. XHTML was originally developed to replace HTML, however over time with updated standards the two have become pretty much identical in every way. This site is written in XHTML.
In html and xhtml the 'document' is made up of elements. An element is broken down into a start tag, an end tag, and whats in between is called 'content'. For example: <h1>Hello!</h1> shows the useage of the header 1 element where <h1> is the start tag and </h1> is the end tag and finally Hello! is the content.
Lets take a look at a very basic web page written in HTML:
<html> <head> <title>This is a web page!</title> </head> <body> <h1>Hello!</h1> </body> </html>
The above example is a very simple web page. The web page will have "This is a web page!" as the title in the menu bar on the browser, and will have nothing but a "Hello!" written on the page in big bolded text. The <html> tag signifies the start of the html document. The </html> signifies the end of the html document. Contained within the <head> start and the </head> end tags is the title with the content. The <body> section is the actual web page itself.
The above example is not actually complete and would not validate. A valid HTML document will have a doctype specified before the <html> tag, and meta tags in the head section to define the character set. The example below will show you a simple web page that is valid & complete.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>This is a web page!</title> </head> <body> <h1>Hello!</h1> </body> </html>
This example will display exactly the same as the previous example. We now have a fully qualified valid HTML document. The <!DOCTYPE doesn't have or need an end tag as its both a start and end tag. Tags that do not require and end tag should always end with />. The <!DOCTYPE we have added specifies the type of HTML document this is, there are three different doctypes. The <meta tag that we added specifies the character encoding of the document, there are many different values besides ISO-8859-1 but we have used this as it is the most widely used and accepted. The <meta tag that we have used does not require an end tag and also ends with />.
Lets take a look at a very basic web page written in XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>This is a web page!</title> </head> <body> <h1>Hello!</h1> </body> </html>
The above example is not terribly different from the previous example of a valid HTML document. The only differences are the doctype has changed slightly to reflect that it is a XHTML strict document type instead of HTML strict, and the XML-namespace attribute has been added to the <html> tag. The XML-namespace is required to be present in an XHTML document but is not terribly important. Nevertheless it should be included. The document type says it all so to speak.
Attributes are very common in both HTML and XHTML documents. Attributes can apply to many elements that exist, althought it is always best to use styles whenever possible. For example:
<img src="some_picture.jpg" alt="alternate text" />
This example of the <img tag shows attributes. The attributes used here are src and alt and attributes should always be in lower case as shown. Attributes always are coupled with values. Attributes should always appear in this format; attribute="value". Values, can be in upper or lower case and it does not matter unless they are predefined. In which case they should also appear in lower case. For example: checked="checked" should not be; checked="CHECKED".
Elements should always be lower case. For example <HTML> is wrong and should be <html>. There should always be a start and an end tag for every element. There are only a few exceptions to this rule as not all tags require content of somekind and thus do not need an end tag. For example: The line break tag; <br />