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

Friday, June 30, 2006

Character Encoding

Translations

Sometimes it happens that a web page is displayed correctly on the author's computer, but when visitors see it on the Internet, the text is illegible. This usually happens with languages other than English. Instead of accented letters there appear small squares, question marks, or completely different letters. This is because the author did not specify encoding of the page (or s/he specified it incorrectly). This mistake is rather common, because author usually will not notice it him/herself – someone else must report it.

What is the encoding? Simply said, from technical point of view all data in computer are stored as numbers (and all numbers are stored as ones and zeroes – but this is not important now). So also letters and other characters written in text editor are remembered by computer as numbers; for example „A“ is 65, „B“ is 66,... and the text file is saved on disk as a sequence of numbers, then it is loaded from the disk as a sequence of numbers; and it is also sent across the Internet as a sequence of numbers.

The problem is: which character is which number? For historical causes, there are a few standards. Each of them takes some set of characters and assigns them numbers. The 8-bit standards try to use only numbers from 0 to 255 – of course this cannot include all possible letters, so each standard includes only for a few languages. English MS Windows by default saves text files with encoding „windows-1252“. (If you try to save a TXT file in different language, you may lose some letters after saving.) Linux typically uses ISO standard „ISO-8859-1“.

There is also a Unicode standard, which tries to include all characters from all alphabets; one of its encodings is „UTF-8“. If you save a text file in UTF-8 encoding, it can be written in any language. So I strongly recommend using this encoding, if you use languages other than English.

The important part is that the web browser of the visitor of your pages should know, which encoding uses the page. Today's web browser usually understand a lot of encodings, and visitor can select the correct encoding in menu. But if you specify the encoding in the page, visitor does not have to select anything, because it will be selected automatically. So if you use encoding „windows-1252“, write in the header of page:

<meta equiv="Content-Type" content="text/html; charset=windows-1252"/>

If you want to save your page in encoding UTF-8, in program Notepad select in menu „File | Save as...“ and in the botom row select „Encoding: UTF-8“. Do this when first saving the file, the program will remember it later. And in the header of page write:

<meta equiv="Content-Type" content="text/html; charset=UTF-8"/>

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

Thursday, June 29, 2006

Welcome to the „WWW Examples“!

Translations

This blog will be about creating web pages and other related topics. Examples and explanations for the beginners, but also useful tips for experienced.

It should enable a total beginner to create a web page compliant with internet standards; which is something than many commercially made webs fail to do. However, I think that also a webmaster with a few years of experience may sometimes find here a clever hack or a useful tool – though obviously not in each article.

I will often use the „mysterious“ words like HTML, XHTML, CSS, JavaScript, PHP, and a few others. If anything is unclear, just ask in the discussion below the article. I will try to publish new articles regularly, if possible one article per day; but I cannot promise that.

Enough talking. Let's quickly make out first web page. Create a text file containing the following text, and then save it as for example „test.html“. And open it in an internet browser:

<!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" lang="en" lang="en">
<head>
<meta equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>My first web page</title>
<style type="text/css">
h1 {
 color: blue;
}
</style>
</head>
<body>

<h1>My first web page</h1>
<p>I have created this web page in a few seconds.</p>

</body>
</html>

If everything succeeded, this is how your page could look like:

My first web page

I have created this web page in a few seconds.

Next time we will talk about the meaning of all those symbols.

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