Content of the lesson:

Title of the Page <title>

The first tag you can try is the <title> tag. This tag is being written inside the head part and it should contain a title for the whole page. Its usage has two consequences:

• The information written in this tag will be displayed in the browser panel title.
• It is very important for fulltext search engines like google because title is essential when adding page to the database. If you write a proper information about your page inside title, users will be able to find your page via google. In case you let the default "untitled page" title, noone will find your page - it is unbelievable how many pages have this title which is automatically generated.

Information about the <title> tag are summarized here:

• Clear, short, descriptive and plain text.
• Every page must have a title in head part.
• Usually displayed in the panel title area in browser.
• Very important for search engines like Google or Yahoo.
• For users important when they want to create a bookmark or to browse their history.

More information about the <title> tag can be found here: http://www.jakpsatweb.cz/titulek.html.

Headlines <h1-h6>

Another important tags are the headlines for creating headlines of 6 levels (but you should not use more than 3 levels generally). The level is very important for search engines because it can create a tree of headlines and sort the terms because of their importance. The <h1> tag should contain the most important information in the page.

This code will make the following result in a browser (the size and color of font depends on your settings via CSS styles).

Information about headlines is summarized here:

• (X)HTML offers up to 6 levels of headlines.
• Element <hn> where n is number from 1 to 6 is a headline.
• The higher level and importance, the lower number.
• Formatting (size, font, color) is done by CSS styles.
• It is suitable to create a named link inside headlines (<h1><a name=“jméno_nadpisu”>nadpis</a></h1>
  and links like <a href=“# jméno_nadpisu”>odkaz</a> ) or id – hypertext.

More information about the <h1-h6> tags can be found here: http://www.jakpsatweb.cz/html/bloky.html#hn and there is also an interesting discussion about this topic: http://diskuse.jakpsatweb.cz/?action=vthread&forum=13&topic=101680.

Paragraphs <p>

One of the most used tags for creating a simple paragraph. The most of web content is a plain text divided to paragraphs so you should mark every paragraph using the <p> tag. You can define the empty space before and after the paragraph.

The following list summarizes information about the <p> tag.

• <p>paragraph content</p>
• Formatting using the CSS styles (line-height, space around, ...)
• Using <p>&nbsp;</p> to create a space inside a text is not valid.

More information about the <p> tag can be found here: http://www.jakpsatweb.cz/html/bloky.html#p.

Links <a>

A hypertext or a link is one of the most important tags of HTML. A link is a plain text which redirects you to any website or file after clicking on it. The basic attributes (parameters) are:

• href - contains the URL address where the user will be redirected. This is the most important attribute of a link.
• target - this attribute can have many values, but the "_blank" value is usually used. It defines the target where the link should be opened - "_blank" means opening inside a new browser panel or window. If not set the link is opened in the same panel as the current page.

http://www.gjszlin.cz/gztgm/ - this link will be opened into the current window.

http://www.gjszlin.cz/gztgm/ - this link will be opened into a new window (panel).

More information about the <a> tag can be found here: http://www.jakpsatweb.cz/html/odkazy.html.

Enumerations, Lists <ol>,<ul>

The <ol> tag creates an ordered list which contains as many items as needed. The items (beginning with numbers) are added inside using the <li> tag. You can also use an unordered list which is displayed only with bullets by using the <ul> tag. These tags are often used for creating a menu.

The important facts about the <ol> tag are summarized here:

• Clear, short, descriptive and plain text.
• By inserting a child <ol> element you can create multilevel lists.
• Used for creating menus or lists.
• Lists using another bullet type (for example an external image) can be edited using CSS styles (the list-style-image property).

More information about the <ol> and <ul> tags can be found here: http://www.jakpsatweb.cz/html/seznamy.html.

Images <img>

This is an important tag for displaying any image in your page. Images are inserted using the <img> tag which has a compulsory parameter (attribute) src which defines the path to the image. The size could be set, otherwise the browser will find the resolution out and set it automatically.

The image will be displayed like the following one. Border is created using CSS styles.

Important facts about the <img> tag are summarized here:

• It is necessary to define the position and the size of any image.
• The dimensions can be set using height and width attributes (parameters) or using CSS styles.
• Inserting an image can be simplified by modern HTMl editors which automatically write resolution of the image to the code.

More information about using the <img> tag can be found here: http://www.jakpsatweb.cz/obrazky.html .

Line Element <span>

Element <span> is similar to the <div> element but it does not make any indent of the text. It is used to apply CSS styles on a part of text.

Important facts about the <span> tag:

• <span>text with another properties</span>
• span element can be formatted using CSS styles (color, font, size, ...)
• it does not make any indent of the text

More information about the <span> tag can be found here: http://www.jakpsatweb.cz/div-span.html.

Highlighting Text <strong, em>

We use this tag to make a text highlighted (a text which is important). In general, the text is drawn in bold but you can change its properties using CSS styles.

More information about the <strong> tag can be found on this page: http://www.jakpsatweb.cz/html/text.html#strong.

You can use the <em> tag similarly to draw a text in italics.

Individual Task

Try to read information from the W3C website about tags written in this lesson for HTML4, (X)HTML 1.0 Transitional and (X)HTML 1.0 Strict standards.

Try to use all these elements in a new HTML document.

Questions

1. Characterize the html tag <title>.
2. Characterize the html tag <h1-h6>.
3. Characterize the html tag <p>.
4. Characterize the html tag <a>.
5. Characterize the html tag <img>.
6. Characterize the html tag <ol>, <li>.
7. Characterize the html tag <span>.
8. Characterize the html tags <strong> and <em>.