Html

Requirements: Basic html knowledge in the range of subject Computer Support for Study (web).

Each tag is in form <type param1="value" param2="value" param3="...   >

Most of tags are in couples, as brackets, for example <head> as a left bracket has somewhere later </head> as the closing one. It means beginning of something, the second with a slash end of something. Text between both is influenced with a tag function.

Some of them are only single, mostly object including (pictures, images).

Many tags are without parameters, i.e. <br>, <html>, or mostly without parameters, like <hr> or <h1>.

Styles in html

Typical example of style use is the next:

<HTML>
 <HEAD>
 <TITLE>The page title</TITLE>
<LINK href="http://iat.fs.cvut.cz/stranky.css" rel="stylesheet" type="text/css">
<STYLE TYPE="text/css">
 @import url("http://iat.fs.cvut.cz/zakladni.css")
 H1 { color: blue }
 </STYLE>
</HEAD>
<BODY>
<H1>The heading is nice blue</H1>
<P STYLE="color: green">The
   eco-paragraph is a green.</P>
 </BODY>
</HTML>

Style definition and use:

Local declaration in the page header - the violet example, is between <head> a </head>. It begins with a <STYLE TYPE="text/css"> and </STYLE> tags, each line in a form like

name-of-tag { property : value; property : value; ... }

Name of tag is for example h1, h2, p, a, td, body and so on.

If you need to set style for parts of a text, which are not labeled by this tags, or you need to distinguish two styles marked by the same tag, you have to use the "DIV" or the "SPAN" tag ("div" will separate marked text as new paragraph, while the "span" tag will add no formats - it can be used even inside of a word). This tags have a "class" property, which can be add by a dot ( "." ) sign to the tag name; for example, a new class "emphasize" with yellow background can be defined by the declaration:

span.emphasize { background-color : yellow }

We can mark part of the text (somewhere in the document body) using the span tag with the new class:

<span class="emphasize">Text selected to be marked</span>

The styles are very often used for a text document unification. For this purpose, they are saved to a separated files (default and most common extension is .css). We can connect this style definition by the @import directive, which will insert the style definitions from this file to the actual position in out web page (as being written completely here, the same as the "include" directive in many of the programming languages), but the most common method to join a stylesheet is the next solution:

<LINK href="http://iat.fs.cvut.cz/super.css" rel="stylesheet" type="text/css">

The css files are usually placed in the same directory as .html files, so the "href" property can contain only the name of the css file (not complete link).

in-line definition

Inside a suitable tag we can add a "style=" parameter, and the style definition as a parameter. The first example could be a hyperlink, which is without underlining (sometimes it will look better without confusing underlining):

<a style="text-decoration:none" href="http://www.w3schools.com/css/css_text.asp">W3 School</a>

(this example is used in the next text three lines bellow)

If you need to change only part of the text, for example the background of a part of the word, we can use the "span" tag again:

<span style="background-color : yellow">emphasized text</span> will be translated as: ... emphasized text

More examples can be found for example on the W3 School.

Some trivial files for the next individual work : 1a example, 1b example and the appropriate stylesheet (use the right button of your mouse, the Save as (in the Czech windows, "uložit soubor jako") ).

Task: download all three files to your local directory and connect the "css" file to the both html files. Try the behavior when you change the css file (use the Reload function of your browser, either F5 or Ctrl+R).

Second task: Try to emphasize selected words by use the "span" tag and decorate one (any) word by line above the text (text-decoration: overline).

Just for an information - citation from the Computer support for study subject:

Locally defined styles

Examples:

A line above the text:

<p style="text-decoration : overline;">
A line above this text.
</p>

Not underlined link:

<a href="#styly" style="text-decoration : none;">
Not underlined link</a>

Different text color:

Standard text, <span style="color : red">red text</span>, standard text.

- but it could be solved easier by <font color="red">.

Text highlighting:

Some text, <span style="background-color: yellow">highlighted text</span>.<br>

Text decoration:

Over this text is a line.

This link is not underlined.

Some text, red text, standard text, highlighted text.

 

Table borders

Except for basic styles, you have to use the "style=..." parameter, for example:

<td align="right" STYLE="font-size:90%; border-left: 1px dashed #333333; border-bottom: 2px dotted #990099;">

These parameters can be set in the <tr>, but their use in the <td> tags are more common. This table cell will have a dashed dark-grey (shade #333333) left border and a violet two pixel dotted bottom border:

This is the cell

Except border-top you can use:

The parameters order have to be:

thickness    style    color

If you remember some of this parameters, you can find the others using Google. Some of them are border-width-left, border-color, margin, margin-left, padding-top, ...   (remember to use double-quotation for the words including dash, because dash before word in a search sometimes means "just pages, not containing this phrase").

Absolute positioning for an object

If you need to set absolute position for an object, you can use the style settings like:

style="position: absolute; left: 333px; top: 1px"

The positioning point is the upper left corner. It is possible to move even part of a text, if you use the "div" tag. The rest of the page will runaround.

If you like overlying of the objects (place two on the same position, i.e. to background), there are logical layers in the html structure, so called z-index:

<span style="position: absolute;z-index: 1">

Typical example is a logo on the background (non-repeating); logo has to have lower z-index then the text, because objects with bigger z-index are on the top (in front of the others). For the text, there is problem to keep it transparent; for a picture, transparency can be set (w3schools).

 

Note: the same effects could be done by a Javascript code.

Comment: FavIcon.ico:

If you have the favicon.ico file in the same directory, you can activate it by adding this line just after the <head> tag (inside, before </head>):

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

This should work without type=, and with any picture of the "ico" type, if correctly linked by href=.

Favicon.ico can be created on the http://favicon.htmlkit.com/favicon/ webpage.

links: font examples, bmp to gif conversion.

From Martin Webb: Point here for red text. | Point here to highlight red then change back | Point your mouse here for an alert (use "view source" to study the code).