rychlokurs HTML

Základy

HTML dokument je tvořen v zásadě dvěma základními prvky - zobrazovaným textem a příkazy. Zobrazovaný text je jednoduše text, který chceme zobrazit. :) Např. "Ahoj, Franto, máš pěkný nohy."

Naproti tomu příkazy jsou řídícími prvky dokumentu a určují, jak se bude text či jiné mediální části (obrázky, animace, zvuky, atd.) chovat.

Příkazy mají zpravidla tento formát:

    <příkaz>Libovolný text</příkaz>
Text, který chceme nějakým způsobem upravit, je nejprve označem uvozovacím příkazem a na konci bývá ukončen příkazem stejným, který však obsahuje navíc zpětné lomítko - jeho párovým ukončovacím druhem. Různé příkazy mají i další různé podvolby, kterým se odborně říká atributy. Ty slouží k bližšímu určení chování daného příkazu. Neuděláte chybu, uzavřete-li hodnotu atributu do uvozovek, ačkoliv nejsou povinné.

Struktura HTML dokumentu vypadá následovně:

    <html>
    <head>
      <title>Název dokumentu</title>
      <meta name="description" content="Průvodce HaTMatiLkou">
      <meta name="keywords" content="průvodce, HTML, internet, WWW">
    </head>
    <body>
      Hlavní tělo dokumentu
    </body>
    </html>


<html> typ dokumentu

Příkaz je umístěn na začátku a konci HTML kódu a slouží k určení typu dokumentu.


<head> hlavička

Příkaz <head> obsahuje veškeré informace o dokumentu, jako jsou <title>, <base> nebo <meta>. Neobsahuje žádný text, který je součástí dokumentu (srovnej: příkaz <body>). Příkaz <head> následuje příkaz <html> a předchází <body>.


<title> název

Tento příkaz obsahuje kompletní jednořádkový název dokumentu (objevuje se v okně browseru nahoře) a měl by být umístěn mezi <head>.


<meta>

Příkaz slouží k poskytování informací o dokumentu, které nejsou definovány jinými prvky. Takovéto informace mohou využívat servery k identifikaci a katalogizaci. Většina prohledavačů využívá příkazu <title>, ale čím dál víc se jich rovněž soustřeďuje na description (popis) a keywords (klíčová slova).

Existuje rovněž další zajímavé využití příkazu <meta>. S použitím atributů Http-equiv a Content můžete přinutit HTML stránku po určené časové době k automatickému "skoku" na jinou stránku či soubor. Pokud chcete nasměrovat návštěvníky ze staré stránky na novou, lze to udělat automaticky použitím příkazu <meta>. Podobně můžete nahrát při vyvolání dokumentu zvukový soubor.

Příkaz <meta> musí být umístěn mezi příkazy <head>. Atributy příkazu <meta> jsou následující:

Http-equiv= refresh
Řekne prohlížeči, aby se přesunul na dokument nebo soubor, určený atributem Content.

Content= "číslo; url=URL"
Určuje časovou prodlevu v sekundách a adresu souboru, na který se má prohlížeč přesunout.

Příklad:

    <head>
    <meta http-equiv="refresh" content="10; url=soubor.html">
    </head>

Name= description, keywords
Řekne prohlížeči, jestli atribut Content obsahuje popis dokumentu (description) nebo seznam klíčových slov (keywords).

Content= text nebo čárkami oddělený seznam
Podle hodnoty atributu Name poskytuje atribut Content popis dokumentu nebo seznam klíčových slov, oddělených čárkami.

Příklad:

    <meta name="description" content="Učebnice HTML jazyka.">
    <meta name="keywords" content="ucebnice, HTML, internet, WWW, jazyk">


<body>

Příkaz <body> obsahuje všechny informace, které jsou součástí dokumentu. <body> by měl být umístěn přímo za uzavíracím tagem </head>. Uzavírací příkaz </body> by měl být umístěn na konci celého dokumentu před příkazem </html.

Bgcolor= #hexakód barvy
Text= #hexakód barvy
Link= #hexakód barvy
Vlink= #hexakód barvy
Alink= #hexakód barvy
Tímto přinutíte prohlížeč zobrazovat text, odkazy a pozadí v určitých barvách. Atribut Text řídí standardní barvu textu, Link udává barvu nenavštívených odkazů, Vlink řídí navštívené odkazy a Alink řídí aktivní odkazy. Barvy jsou určovány v hexadecimálním kódu RGB - pokud nejsou zadány slovně (několik základních barev: red, green, lighgreen, gray, atd.).

Příklad:

    <body bgcolor=black text="#000000" link="#FF0000" vlink="#0000FF" alink="#00FF00">

Background= URL
Místo toho, abyste udali barvu pozadí, můžete na pozadí promítnout obrázek (tapetu).

Příklad:

    <body background="grafika/tapeta.jpg">

Bgproperties= fixed
Jen pro MS Internet Explorer. Při použití tohoto příkazu je grafické pozadí statické a neposouvá se s posunem stránky.

Leftmargin= číslo
Topmargin= číslo
Jen pro MS Internet Explorer. Tyto atributy umožňují nastavení levého a/nebo horního okraje, hodnota je zadána v bodech.


<br> odřádkování

Tento příkaz způsobí odřádkování v textu, t.j. text za ním se vykreslí na další řádek.

Příklad:

    ahoj<br>hola

Výsledek:

ahoj
hola


<p> odstavec

Příkaz pro odstavec odřádkuje a vynechá jeden řádek, než začne vykreslovat text umístěný za ním. Konec odstavce může, ale nemusí být uzavřený párovým druhem </p>.

Příklad:

    ...a žili šťastně až do smrti.<p>A to byl konec a pohádky zvonec.

Výsledek:

...a žili šťastně až do smrti.

A to byl konec a pohádky zvonec.


-pa-