Chapter 1: XHTML

next chapter

Before we start with Ruby on Rails web programming we have to start from basic stuff: XHTML the mark-up language.

A very good quick HTML tutorial can be found at w3schools.com. Try HTML Examples - the fastest way to try-it-yourself!.

  1. HTML: Text with Tags

    First thing to do is to open a text editor. Text editor does not mean word processor. Microsoft Word is absolutely a wrong choice! It will leave nasty formatting information which will spoil your HTML code. Notepad is definitely much better for the purpose. You can have another favourite choice, but ensure that's a tool for software developers, not for office workers.

    Now, let's create this simple text and save it as hello.html: 

    hello.html
Hello, world!

    This is close to the simplest stuff that web browser is capable to display, but it's not yet HTML. Let's have a second try: 

    hello.html
<h1>My First Example</h1>
<p>Hello, <em>world!</em></p>

    That's better! This is some code with tags.

    The tags are used to mark up portions of the text. The tags may be either opening <tags> or closing </tags>. Everything that goes in between is marked. For example, in the above code the word world is marked using a <em> tag. It says the word is emphasized. The <h1> tag marks a header, and the <p> tags forms a paragraph of text.

    Tags may be nested. This means that a tag may lie enirely within another tag. For example, <em> tag is nested in the <p> tag.

    Sometimes using a tag is not enough. For example, if we want to mark some portion of text as an Intenet link, we also have to supply the target address, or the URL. 

    hello.html
<h1>My First Example</h1>
<p>Hello, <em>world!</em></p>
<p>This page is an exercise at a Ruby on Rails course at
<a href="http://kingston.ac.uk">Kingston University</a>.</p>

    The text "Kingston University" is marked as a link, using a <a> tag. Within this, the href is an attribute. The value of the attribute, given after the equals sign, provides the additional information we need.

    Some tags do not mark any text. They just stand for themselves. This is the situation with <img> tag. It inserts images into the page. Try this: 

    hello.html
<h1>My First Example</h1>
<p>Hello, <em>world!</em></p>
<p>This page is an exercise at a Ruby on Rails course at
<a href="http://kingston.ac.uk">Kingston University</a>.</p>
<p><img src="http://rubyonrails.org/images/rails.png" alt="Rails Logo" /></p>

    Notice that the <img />tag ends with "/>". This is to mark a tag that is both the opening and the closing one. The src attribute specifies the source image file, and alt defines the text available on the page in case the image file is not present.

  2. HTML and XHTML

    There is not much difference between HTML and XHTML. Both are equally well supported by browsers. XHTML is more precise and imposes more discipline and therefore XHTML code tends to be better formed. This may pay off when you create really complex stuff, and especially when you use CSS stylesheets, which will be introduced next week and which we will heavily use all the time later.

    This is why we will use XHTML.

    The structure of the code in both HTML and XHTML is similar, tags the same... In fact, every valid code in XHTML is in the same moment valid in HTML.

    XHTML is HTML with some more strict rules. These rules are:

    • Every opening tag has to match a closing tag. Tags like <img /> that have no closing match must end with '/>'.
    • Tags must be properly nested. If you opened them using <p><em>, you have to close with <em><p>, so the <em>..</em> is exactly inside <p>..</p>, without any overlap.
    • Values of attributes must always be in quotation marks.
    • All tag names, attributes and predefined values must be typed in lowercase.
    • XHTML imposes the use of special tags html, head, title and body, as well as DOCTYPE directive - see the next section for the details.

    All these rules may, but do not have to be postponed in HTML code. The last one is actually strongly recommended for HTML files.

  3. XHTML Page Template

    The code we have created in the end of the Section 1 keeps all the XHTML special rules but the last one.

    The DOCTYPE directive obligatory for XHTML (and strongly recommended for HTML) defines the exact format in which the file is coded. We consider here two formats:

    Strict XHTML:
    imposes further limitations, which - as you can guess - are quite strict. Generally, the format considers some of the former HTML stuff to be deprecated. As the most precise, this format is strongly recommended for new projects.
    Transitional XHTML:
    Offers a more relaxed approach, recommended when you already have existing code or experience that is not always compliant with the strict mode.

    Here is a standard template for XHTML 1.0 Strict:

    XHTML 1.0 Strict template
<!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>
    <title>Here goes the title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  </head>
  <body>
  </body>
</html>

    And this is a template for the transitional XHTML:

    XHTML 1.0 Transitional template
<!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>
    <title>Here goes the title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  </head>
  <body>
  </body>
</html>

    Notice that DOCTYPE directive is not yet XHTML (technically, it's another language called SGML).

    The <html> tag just below encompasses entire code. It is obligatory to specify the document <title> within its <head>. The <meta> tag defines the coding method (for example windows-1252 character set for texts in English, or windows-1250 for Polish); it is not mandatory but highly recommended. The <body> tag is where you will actually put your code.

    So, let's have a try and rewrite our first example in Strict XHTML:

    XHTML 1.0 Strict template
<!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>
    <title>My first example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  </head>
  <body>
    <h1>My First Example</h1>
    <p>Hello, <em>world!</em></p>
    <p>This page is an exercise at a Ruby on Rails course at
    <a href="http://kingston.ac.uk">Kingston University</a>.</p>
    <p><img src="http://rubyonrails.org/images/rails.png" alt="Rails Logo" /></p>
  </body>
</html>

    Well, as a matter of fact, nothing changed...

  4. Standards and Quirks

    If XHTML Strict has changed nothing, so why to use it?

    The important fact is that web browsers work in two modes.

    • Standard Mode is only imposed when the document is well formed - it has DOCTYPE and all other mandatory stuff.
    • Quirks Mode is started for not-so-well formed documents.

    The Standard Mode should theoretically impose the same look and behaviour on all modern browsers, and ensure full availability of the newest goodies available in XHTML and CSS. In practice it is not as good, but still is good enough to be our strong and definite recommendation.

    The Quirks Mode is in fact backwards compatibility mode. Many of the new facilities simply will not work. The browser thinks that document without all that modern stuffing has to be written long time ago and emulates an older version of itself. In these distant times hardly anything worked as supposed and web designers had to resort to bizarre quirks to achieve desired results - this is where the name comes from.

  5. What to Avoid

    Firstly, avoid getting into Quirks Mode

    Secondly, avoid defining graphical layout and design. In modern HTML/XHTML the graphical form of the page is defined in its stylesheet. Separation of the content (XHTML) and the form (CSS) pays back when you:

    • create a series of pages that share the same graphical schema,
    • need to change the graphics for a number of pages at once,
    • substantially change the content leaving graphical look and feel intact,
    • think about "skinning".

    Last but not least, never leave any piece of text outside of any tag. Of course most probably your text would be still within <html> and <body> tasks, but this is not enough. It must appear inside other tag nested within the <body>. It may be, for example, <p>..</p>. Otherwise the text will be very difficult to address from a CSS stylesheet.

  6. Quick Reference

    General formatting

    <p>..</p>
    Marks a paragraph of text.
    <h1>..</h1>, <h2>..</h2>, <h3>..</h3>
    Headers of various levels (up to h6).
    <a href="url">..</a>
    Marks an internet link. The href may be a reference to an external address (http://) or a relative reference to a file located on the same server.
    <em>..</em>
    Marks text as emphasised.
    <strong>..</strong>
    Marks text as strongly emphasised.
    <img src="source-path" alt="alternative-text" width="number" height="number" border="number" />
    Inserts an image. Attributes specify the source of the image file (either externally or internally), text to be displayed in case the image file is not present, the image size size and border width. border="0" is a usual way to remove any framing.
    <br />
    Inserts a new line. A similar effect may be obtained with <p>..</p>, but <br /> usually produce smaller space between the lines.
    <pre>..</pre>
    Marks the text that is pre-formatted. Most of the HTML code samples in this page are presented using this tag.

    Table creation

    <table>..</table>
    Delimits a definition of a table.
    <tr>..</tr>
    Delimits a single raw within a table.
    <td>..</td>
    Delimits a single cell of a table.
    <td colspan="number">..</td>
    Delimits a single cell of a table spanning over a specified number of columns.
    HTML for a table with two raws and three columns
<table>
	<tr>
		<td>first cell in the first row</td>
		<td>second cell in the first row</td>
		<td>third cell in the first row</td>
	</tr>
	<tr>
		<td>first cell in the second row</td>
		<td>second cell in the second row</td>
		<td>third cell in the second row</td>
	</tr>
</table>

    Lists

    <ul>..</ul>
    Delimits an unordered list of items.
    <ol>..</ol>
    Delimits an ordered list of items.
    <li>..</li>
    Delimits a single item of either ordered or unordered list.
     
    <dl>..</dl>
    Delimits a list of defined terms, like this one.
    <dt>..</dt>
    Delimits a defined term in a dl list.
    <dd>..</dd>
    Delimits a definition (explanation) in a dl list.
    HTML for various types of lists:
<p>Unordered list</p>
<ul>
	<li>This item will not have any number</li>
	<li>This item nether</li>
</ul>

<p>Ordered list</p>
<ol>
	<li>Item number one</li>
	<li>Item number two</li>
	<li>Item number three</li>
</ol>

<p>Definition list</p>
<dl>
	<dt>Ordered List</dt>
		<dd>A list with numbers on the left side of items</dd>
	<dt>Unordered List</dt>
		<dd>A list with bullets on the left side of items</dd>
	<dt>Definition List</dt>
		<dd>A list with defined term and a definition</dd>
</dl>

    Forms

    <form>..</form>
    Delimits a web form.
    <input id="id_field" type="..." />
    Specifies an input field. The type attribute specifies what it is. Some example types are: "text", "password", "checkbox", "button" and "submit".
    <label for="id_field">..</label>
    Marks a text as a label for an input field. The for attribute specifies that field.
    A sample HTML form:
<form action="/user/register" method="post">
  <p>
    <label for="user_screen_name">Screen name</label>:
    <input id="user_screen_name" type="text" />
  </p>
  <p>
    <label for="user_password">Password</label>:
    <input id="user_password" type="password" />
  </p>
  <p>
    <input id="user_submit" type="submit" />
  </p>
</form>
    Exercise 1.1

    Using HTML definition list, make a web page describing all the modules you learn in this term. Each module should have specified its name and a short description

    Exercise 1.2

    Using HTML tables, make a web page to show your weekly timetable (Monday to Friday)

    Exercise 1.3

    Prepare a web page about yourself. Concentrate on your professional life: list your experience, specify what you expect from the university, what was your motivation to come here, what special things would you like to learn. Also, what is your attitude to web development, programming, databases and other areas that you are likely to learn at the uni.

    Don't write an essay, concentrate rather on providing precise, brief information. Use HTML tables and/or lists to achieve this goal.

    You can also publish your photo (or other relevant image(s) on your page.

  7. Validators

    Validator is a special tool that verifies your code, checking if it is fully compliant with the standard. If it is not, it displays a list of errors and warnings.

    An official validator for HTML and XHTML is available on-line at http://validator.w3.org. You can either upload a local file or provide a URL address. In the latter case your file must be previously uploaded to a web server.

    If you upload your XHTML file to a web server you may benefit from automatic validation facility. Just paste and copy the following code: 

    Validator HTML snippet:
<p>
    <a href="http://validator.w3.org/check?uri=referer">
    	<img style="border:0;width:88px;height:31px"
		src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Strict" /></a>
	<a href="http://jigsaw.w3.org/css-validator/check?uri=referer">
		<img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" /></a>
</p>

    This code validates not only HTML/XHTML, but also CSS which we will use next week. The two icons you can see at the bottom of this file are generated by the code shown above. Click on either to check wether this file is valid XHTML / CSS.

    Exercise 1.4

    Validate the code you created in Exercise 1.3. Correct errors until it passes as valid XHTML (either strict or transitional). Add the validation icons as those below.

Valid XHTML 1.0 Strict Valid CSS!

Copyright (C) 2009-2011 by Jaroslaw Francik