Make Money at Top Bucks
Topbucks can help you make fat cash on your website!

LinuxReviws.org --get your your Linux knowledge
> Linux Reviews > Web Design Tips and Info >

What you need to know about markup languages before you can create a website

Web pages are created using something called a markup language. Two standard languages are used when web servers communicate with your browser and explains what should be displayed: HTML and XHTML. HTML is a older and very loosely defined markup, XHTML is todays standard and is slightly more restrictive.


  1. HTML and XHTML
  2. Try to make your own web-page now
  3. Common mistakes


1. HTML and XHTML

XHTML markup is not programming, but there are some very strict rules that must be obied. The words used by the English language is defined by dictionaries. There is a given set of valid XHTML tags, or words, allowed. Valid tags are defined by the World Wide Web Consortium (W3C).

You may have experienced that some web-sites are displayed incorrectly in some browsers. Some websites only work as expected in one of the many browsers available. This is purely caused by bad, or invalid, markup used to create the page. Also, some web-browsers have their own, non-standard set of tags that are only displayed correctly in this particular browser. Avoid using such tags at all costs, it will make your content unavailable to a significant part of your user-base.

You should make a real effort to ensure your pages are made up of valid markup language. Browsers do correct small errors, but such pages have a high risk of being shown incorrectly in some browsers.

The file-type extensions .html, .htm and .xhtml imply that the file in question is a web document. Your page will be saved in HTML or XHTML no matter what editor you use to create it.

Many editors and programs out there generate invalid html code. Test the various editors on the market and verify that they create valid code before choosing one. A tool that is incapable of saving files correctly is worthless no matter how much eye-candy the graphical user interface has.

1.1. Verifying your page is valid

Your editor does not necessarily create a valid and correct page because it calls the file .html, not all programs follow the specifications. W3C ha a tool called the validator, you can use this tool to verify if the program you used to create your page or site generated valid code or not.

You should simply refuse to pay for a website that does not validate. A good way to check if a website creator is to validate his previous achievements.

1.2. A basic web page

This is a complete xhtml 1.1 strict web-page.

  
  
  <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
   <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title>Web Design and Implementation guide</title>
  </head>
  <body bgcolor="#f0f0f0" text="#000000">
   <p>Hello world! This page is valid xhtml 1.1 strict.</p>
  </body>
  </html>
  
  
  
  

The page code starts by making it clear what kind of document is being read. Look at the document specification given by DOCTYPE: It is specified as http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd . This is a document you can open and view all the valid tags in this specification. All web-pages should start by declaring what specification it is made according to. Sadly, many of the nets pages omit doing this and thus end up using a mixture that really looks ugly.

The next order of business is to give the document a header section. The point of the header is to give some brief information about the following document, kind of like the index of a book or dictionary. Note the title field, the title is used for a number of purposes:

  • It is shown in the browser windows title bar
  • It is used when visitors bookmark your pages
  • It is recognized by search engines
  • It's the standard way of briefly explaining what the page is all about

<body> is where you place the rest of the pages content. Elements that make up your page go here. You may add tables <table> ... </table>, <p>paragraphps</p>, lists and much more on your page.

1.3. All tags MUST be closed

You must close all tags! Repeat this until you are sure you will remember it: Always close tags after opening them. Get used to the idea that all elements have a beginning and a end. Write both the beginning and the end of elements before creating the content that goes in between, doing so prevents you from making the mistake of leaving tags open.

The <html xmlns=....> tag starting the document after the document type is given must be closed at the end of the document with a </html> tag.

Tags are closed with a / followed by the same tag. A paragraph <p> is closed by a </p>.

A list is started by a <ul>, list elements can be started with a <li>. The list elements must be placed in between the list tags.

A list could be made like this:

  <ul>
   <li>List item 1</li>
   <li>List item 2</li> 
   <li>List item 3</li>
  </ul>

1.4. Headers are very important

Header tags are used to define headlines and can be placed in a systematic order using <hN> where N is the header level, numbered from 1 as in first to 6. You could start your document with a <h1>first header</h1> , then two <h2>sub-headers</h2> with a few <p>paragrahps</p> each, then have another <h1>first header</h1> and say something about a completely different subject.

2. Try to make your own web-page now

Try to make your own web-page with a header, a paragrahp and a list. You can use any plain text-editor. Windows users can use notepad, Linux users can use gedit, kate, emacs, vi, nano, pico or any other editor for that matter.

Try to preview your page by saving your document and opening that file in a browser. Upload the file to the validator when you think you have a complete, working page.

Markup is not programming. It is just marking sections of text as specifict objects.

Writing markup sounds like it is stupidly simple, yet the most of the world wide web is made up of non-valid documents...

3. Common mistakes

3.1. Frames and iframes

Use tables og div areas, do not use frames. Though this has been known to man for years, people still use frames. Make sure you don't.

Please check out what Jakob Nielson had to say about frames here:


GNU Copyleft xiando Corp.


- Next: Web Site Creation for Beginners: Choosing editor or CMS system
- Previous: How To make Your First Web Page

Meet new people