Wednesday, July 05, 2006

Ordered List

Translations

If we want to list a few items on the page, and the ordering of the items is important, we can use tag „<ol>“ to surround the whole list, and the tag „<li>“ to surround individual items. For example:

<p>Seasons:</p>
<ol>
<li>Spring</li>
<li>Summer</li>
<li>Autumn</li>
<li>Winter</li>
</ol>

Seasons:

  1. Spring
  2. Summer
  3. Autumn
  4. Winter

By default the items are marked by numbers, starting from 1. But we can choose a few other numbering systems: armenian, cjk-ideographic, georgian, lower-greek, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-latin, upper-latin, lower-roman, upper-roman.

The season list marked with uppercase Roman numbers will look like this:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seasons</title>
<style type="text/css">
ol.seasons {
 list-style-type: upper-roman;
}
</style>
</head>
<body>

<p>Seasons:</p>
<ol class="seasons">
<li>Spring</li>
<li>Summer</li>
<li>Autumn</li>
<li>Winter</li>
</ol>

</body>
</html>

Seasons:

  1. Spring
  2. Summer
  3. Autumn
  4. Winter

posted by Viliam Búr at 10:10 PM 0 comments

Tuesday, July 04, 2006

Style (2)

Translations

We can specify graphic styles to the XHTML tags. But sometimes it happens that we want to specify a style only a part of paragraph, or maybe for a few paragraphs, but there is no corresponding tag in the text. In such situation, we can use tags „<div>“ and „<span>“. These tags mean nothing per se – if we add them to the text, nothing changes – but we can attach styles to them. We can use them to specify a style for a part of page without corresponding XHTML tag. The „<div>“ tag can contain a few paragraphs; the „<span>“ tag can contain a few words inside of one paragraph.

Example:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Miscellaneous styles</title>
<style type="text/css">
div.text_in_frame {
 border: 1px solid red;
}
span.blue_words {
 color: blue;
 
}
</style>
</head>
<body>

<p>The following text is in a frame.</p>
<div class="text_in_frame">
<p>I like
 <span class="blue_words">rivers, sea, ocean</span>.</p>
<p>Whenever I see a word related to
 <span class="blue_words">water</span>,
 I must write it using a blue color.</p>
</div>
<p>This text was a piece of art.</p>

</body>
</html>

The following text is in a frame.

I like rivers, sea, ocean.

Whenever I see a word related to water, I must write it using a blue color.

This text was a piece of art.

posted by Viliam Búr at 11:37 PM 0 comments

Monday, July 03, 2006

Style

Translations

In the XHTML page header we can specify the properties of page items using the stylesheet language CSS. The style is the set of properties. For example if we want to display all paragraphs (all texts between „<p>“ marks) using green color and italic letters, we can write:

p {
 color: green;
 font-style: italic;
}

And the paragraph will just look like this:

<p>This is a green and italic paragraph,
 just like any other paragraph on this page.</p>

But sometimes we do not want to make all paragraphs green, only selected ones. In such situation we will mark the selected paragraphs with some name, for example „forest_letters“. In style we specify that only „forest_letters“ styled paragraphs should be displayed using green color. (In the style name there can be no accented letters, spaces, etc.)

p.forest_letters {
 color: green;
}

We will mark the selected paragraphs using the attribute „class“:

<p>This is a normal paragraph.</p>
<p class="forest_letters">This is a green paragraph .</p>
<p>Another normal paragraph.</p>
<p class="forest_letters">Another green paragraph .</p>

We can also specify that all paragraphs should have some property, only the selected ones will have it different. For example all paragraphs will use italic font, only the „forest_letters“ paragraphs will have green color and normal font:

p {
 font-style: italic;
}
p. forest_letters  {
 color: green;
 font-style: normal;
}

An example:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Colored paragraphs</title>
<style type="text/css">
p {
 font-style: italic;
}
p. forest_letters  {
 color: green;
 font-style: normal;
}
</style>
</head>
<body>

<p>This is a normal paragraph.</p>
<p class="forest_letters">This is a green paragraph.</p>
<p>Another normal paragraph.</p>
<p class="forest_letters">Another green paragraph.</p>

</body>
</html>

This is a normal paragraph.

This is a green paragraph.

Another normal paragraph.

Another green paragraph.

posted by Viliam Búr at 9:35 PM 0 comments

Sunday, July 02, 2006

Heading

Translations

Headings in XHTML are written just like paragraphs, except then instead of marks „<p>“ and „</p>“ they are surrounded by marks „<h1>“ and „</h1>“, or „<h2>“ and „</h2>“,... and so on until „<h6>“ and „</h6>“. The numbers specify headings and subheadings; for example the heading of the chapter is „h1“ and the heading of the section in this chapter is „h2“.

<h1>Domestic animals</h1>

<h2>Dog</h2>

<p>Dog is man's best friend.</p>

<h2>Cat</h2>

<p>Cat catches mice.</p>

It is also possible to specify a page title using the mark „<title>“ in the page header. This title is not displayed in the page text. It appears on the top of the internet browser, or in the browser tab. If you add this page to your list of favourite pages, it will be displayed with this title.

<title>Domestic animals  -- The Animal Encyclopaedia</title>

The page title and the topmost heading are two independent information, though it is often logical to use the same text (both of them describe what the page contains). The page title is displayed only in the browser title, but not in the page. The topmost heading appears only in the page.

Headings of different levels are usually displayed by different font sizes. The topmost heading must always be „h1“ - it is an error to use a mark for subheading just because we want smaller font. The font sizes of the headings and subheadings can be set like this:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Domestic animals  -- The Animal Encyclopaedia</title>
<style type="text/css">
h1 {
 font-size: 18pt;
}
h2 {
 font-size: 14pt;
}
p {
 font-size: 12pt;
}
</style>
</head>
<body>

<h1>Domestic animals</h1>

<h2>Dog</h2>

<p>Dog is man's best friend.</p>

<h2>Cat</h2>

<p>Cat catches mice.</p>

</body>
</html>

The resulting page looks like this. (The web browser window's title will be: „Domestic animals -- The Animal Encyclopaedia“).

Domestic animals

Dog

Dog is man's best friend.

Cat

Cat catches mice.

posted by Viliam Búr at 11:48 PM 0 comments

Saturday, July 01, 2006

Paragraph

Translations

A paragraph is a few lines of text, a few sentences making one whole. It is also probably the most frequently used XHTML language tag. If we add at the beginning and ending of the page a few mandatory tags, we do not need more to create a simple text page.

The beginning of the parahraph is marked by „<p>“, the ending of the paragraph is marked by „</p>“. The text written between these marks will be aligned to one paragraph on the remaining page. The width of the paragraph will be set according to the width of browser window and font size – what one visitor of your page will see as three lines of text, another one can see for example as two or four lines. It is not important where we make a line break when writing; important is only placing of marks „<p>“ and „</p>“.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>A simple text page</title>
</head>
<body>

<p>This is the first paragraph.
This sentence is in the first paragraph, too.
This one too.</p>

<p>It is not
     important,
   where you make a line break. Do not worry about that.
By the way, this is the second paragraph.</p> <p>A third one.</p>

</body>
</html>

Do not forget to specify a correct character encoding in the page header. The resulting page will look like this:

This is the first paragraph. This sentence is in the first paragraph, too. This one too.

It is not important, where you make a line break. Do not worry about that. By the way, this is the second paragraph.

A third one.

Try changing the size of your web browser to smaller and larger, and look how the text in paragraphs will adjust to the size of the window. Cool, isn't it?

Maybe such page looks too simple; it misses colors, pictures, and other nice things. But remember: the text is the fundament of the page (unless you are making a picture gallery, or something like that); the most difficult is to find out what you want to write, and to write it. Pictures and colors can be added later.

posted by Viliam Búr at 4:38 PM 0 comments