XHTML — Getting started

10 Mar, 2010 | Tutorials | No Comments

By request from my littlebrother I will try and write some articles about how to get started with XHTML and CSS. Please feel free to criticise and I will try to improve as I go along.

XHTML stands for Extensible HyperText Markup Language and is often refered to as just HTML. Its a markup language developed by W3C and is used to tag content on a website in order to structure it. XHTML is not a kind of code as many think but is used strictly to mark content with so called “tags”. A tag is a attribute that surrounds an element. Always remember to close your tags. A close tag looks exactly like the start except for an “/” placed after the first “<”. For example: opening tag <a> and close tag </a>.

Lets look at an empty XHTML-document

The Doctype.

This declares what kind of document it is. In this case we have an “XHTML 1.0 transitional”. XHTML 1.0 is the current standard on the webb but if you want to be cut edge you should check out the new XHTML 5.0 which can come to replace the standard. “transitional” is one of two possibilities the other one being “strict”. The difference between these is that transitional isn’t as picky about how you structure your code. If you’re not looking to show off better stick with transitional.

The <html> –tag

This tag should always be in the beginning and the end of the html-doc. This is the tag that declares that we’re in an html-document and the browser should treat the code inside as such.

The <head> –tag

this tag contains everything in your html-doc that doesnt show in the browser. Here you put links to javascripts, CSS etc. This is also where you place meta-tags which we will talk about later. The <title> that you see in the image is what will turn up at the top of the browser next to the browser-logo. Change “untitled document” to whatever you want it to say.

The <body> –tag

Inside the body tag you place everything you want the visitor to see. this is where all your content will be placed.

(our html with a little content in it)

Now we know what all the basic tags mean. How do you put content in your html?

More tags and content

There are alot of different tags to use in html, lets begin with the simpler ones.

The <p> –tag

this tag is used to contain larger amounts of text. the p stands for paragraph and that itself says what it does. As you can see in the image above I’ve put some text inside an <p> tag and ended with </p>.

The <h1> –tag

This is a tag for Headlines. If you’ve worked in Microsoft Word you know that there are different kinds of headlines. The same goes for html. We have h1, h2, h3, h4 and h5. This way you can structure your content with subheadlines just as you would in Word. In my image above I’m using the <h1> –tag to surround my name and ended it with the </h1> tag.

the <img> –tag

this is used to insert images in your webpage. a typical <img/> tag contains a set of inner attributes. Here’s an example: <img src=“images/test.png” alt=“test” />. The <img/> tag is one of few that is ended within itself. It’s because its not supposed to wrap around any other content but contains the content in itself. the “src” means source and is the URL to where your image is stored, the “alt” means alternative and is a text that shows instead of the image if it cant be loaded. If you dont want a text showing just leave the quotation marks empty.

Lets try and create a simple XHTML page.

Start by creating a new folder, name it whatever you like. Inside it create a new txt-document and name it “mysite”.

Now paste this into the txt:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
<title>Untitled document</title>
</head>

<body>
</body>
</html>

Now play around with the different headline-tags and the p tag. If you want to place images, create a folder next to the txt, place your image inside the folder and link the image as I shown in the example. If you named your folder “images” then your URL will be src=“images/nameofimage.png” just change the name of the image and the file-ending depending on if your image is a PNG or JPG.

After you’re satisfied and you’ve made sure you’ve closed all tags properly try draggin your txt into your browser. If you’ve done it correctly your txt should appear as a bunch of text and images with different spacing and size (depending on what headlines you’ve used).

To be continued..