xhtml syntax

references

          xhtml reference

          xhtml special characters

XHTML coding

  • Use comments to document your code. Comments explain things to the programmers who will have to modify your code later. It really helps the development process when a programmer who has to maintain an existing program has a clear description of intent from the person who wrote the original code, especially for complicated constructs.
    The tag used is: <!-- this is a comment -->
    The comment is not displayed by the browser; it is available only when viewing the source code.

  • Leave blank lines between sections to make it easier to read.

  • Use tabs to indent code and make constructs more identifiable.

  • For example:







Formatting text on the page

For the basic layout we use a few standard tags.

Note that this applies to beginners and is used for simple tasks that we want to develop quickly, without too much hassle. Later, almost all of the layout will be taken over by stylesheets that are used to define spacing, fonts, colors, etc.

Also note that these lessons use xhtml norms, as much as possible. xhtml is not yet compulsory but it is highly recommended.
For example, in HTML the tag to perform a line break is: <BR>. In xhtml we use: <br />. The slash "/" is used because there is no end tag for a <br /> and in xhtml every tag should have an end.

And, all xhtml tags are written in lower case.


Spacing and special characters

  • xhtml does not recognize the <Enter> as a line break - new line. To display a new line we must use the <br /> tag.

  • Insert a <br /> to end a line and for each blank line in the text - to leave 2 blank lines between paragraphs, use: <br /><br /><br /> at the end of the first paragraph.

  • When starting a new paragraph you can use the: <p> tag at the beginning of the paragraph - that will execute a new line before strating the paragraph.

  • Also, note that xhtml does not recognize more than one space character in code. One space between words is normal but, if you wanted to display: "two             words" by inserting 5 or 6 spaces between the words, the browser would display: "two words" .

    To insert spaces you use the special character: &nbsp; (non-breakable space).
    Each &nbsp; represents a fraction of the space character. You have to use several of them to display a considerable space, so experiment. Here your html editor can be really helpful.

  • Speaking of special characters, what if you wanted to display a character that's not on the keyboard, an accented French or Spanish character, for example.

    Here you have to go to the table of special characters, available on the Web at: xhtml special characters.

    The French character é is &eacute; the Spanish ñ would be &ntilde; and the Greek Σ would be &Sigma;

headings

  • There are 6 heading sizes - they are written as <h1> to <h6> - <h1> is the biggest heading and <h6> is the smallest - to identify a heading, the words are between the h tags, as in:

    <h1>THIS IS A LARGE HEADING </h1>

    <h3>THIS IS A MEDIUM HEADING </h3>

  • A heading is automatically treated as a paragraph, with a line break before and after.


Bold et Italic

  • To highlight text, use bold characters like this or italic characters.

  • To bold, the tag used is: <b> and </b> before and after the selection
    However, xhtml recommends using <strong> instead of <b>.

  • For italic the tags are: <i> and </i>.
    That tag is replaced in xhtml by <em> (em for emphasis).

draw a horizontal line

  • The <hr /> tag draws a horizontal line on the page. hr is for Horizontal Rule;
    there is no end tag for the hr, so we add a / to the tag.

  • The thickness of the line can be increased by specifying: size=... inside the tag.

  • The position and width of the line can be specified with: align=... and width=....

  • For example <hr size="2", width="400", align="left" /> will give you this:




  • The size and width parameters are in pixels.



color and size of text

  • The <font> .... </font> tag is used to specify color or size of text.

  • This text is in color #FF9900 and size 5

  • To get that I had to write:

    <font color="#FF9900" size="5">This text is in color #FF9900 and size 5</font>

  • The size parameter is 1 to 7, with 1 being the smallest.


  • Color is specified by a 6-digit hexadecimal number between 000000 (black) and FFFFFF (white). The number breaks down as: 2 digits between 00 and FF for red, 2 digits between 00 and FF for green and 2 digits between 00 and FF for blue. That's called the RGB code and gives you approximately 16 million colors. You can get the codes for color from a color chart. There is probably one included with your html editor.





final reminder

This lesson is not meant to be used to create any webpage that you will ever need. Far from it. But if you need a simple page, a quick and dirty result, these techniques may be suitable.

The technique you have to learn to do websites is called CSS for Cascading Style Sheets. We'll get to it soon.


Top

Previous             Next