<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Název stránky</TITLE> </HEAD> <BODY> tělo stránky </BODY> </HTML>
První řádek určuje verzi HTML a měl by se uvádět, často ho však autoři
stránek vynechávají.
Tag <HTML></HTML> určuje počátek a konec vlastních dat stránky. Tento tag je povinný, ale většina prohlížečů dokáže stránku zobrazit, i když chybí.
<HEAD></HEAD> je hlavička stránky, která obsahuje několik tagů,
které určují vlastnosti stránky (jejich popis naleznete později). Můžete se
všimnout, že něž jsem tag ukončil, vložil jsem mezi něj další tag - <TITLE>
<TITLE> </TITLE>. Do tohoto tagu se zapisuje titulek stránky.
Neměl by být příliš dlouhý (max. 64 znaků) a je vhodné zapsat ho pouze v ASCII
kódování (pro zahraniční vyhledávače).
Tag <BODY></BODY> určuje tělo dokumentu, právě tam budete zapisovat obsah stránky.
HTML nerozlišuje mezi malými a velkými písmeny, proto zápis <HTML> je ekvivalentní se zápisem: <hTmL>, <HTMl>, <HTmL> a podobně. Osobně v příkladech zapisuji tagy velkými písmeny, ve svých stránkách však používám malá písmena, zdá s mi to být rychlejší při psaní v poznámkovém bloku.
Pokud však zapisujete odkaz, tam si již na velikost písmen dejte pozor, mohlo by se stát, že takový odkaz nebude funkční (Unix, Linux).
Spousta lidí používá FrontPage a jemu podobné editory, ve kterých nasmolí text, který pak pomocí různých prvků upravují (několik mezer, mnoho <BR>,...). Není to nic špatného (v dnešní době určitě nemusí všichni vědět všechno a prohlížeč kód upraví), ale vždy je přehlednější text zarovnaný do odstavců.
K oddělení jednotlivých odstavců slouží tag <P></P>. Pokud se podíváte do zdrojového kódu této stránky, naleznete jednotlivé odstavce oddělené právě tímto tagem. Každý si jistě všimne, jak se oddělení projeví:
Někdy vám může dělat problém, že je text (u <P> tagu) zarovnán podle velikosti okna prohlížeče, tzv. nemůžete přesně určit, jak bude text zarovnán, tzv. kdy se text začne vypisovat na nový řádek. Pokud tedy potřebujete určit, kdy se má text vypsat na nový řádek (zalomit), vložte na konec předešlého řádku tag <BR>, viz. příklad:
<P>Ahoj, jmenuji se Jan Sova a právě čtete mou příručku. S pozdravem Jan Sova</P>
Ve skutečnosti vypíše:
Ahoj,jmenuji se Jan Sova a právě čtete mou příručku.S pozdravem Jan Sova.
To není příliš přehledné a lepší by bylo, kdyby se zobrazilo:
Ahoj, jmenuji se Jan Sova a právě čtete mou příručku. S pozdravem Jan Sova
Toho docílíme pomocí již zmiňovaného tagu pro zalomení textu <BR>:
<P>Ahoj,<BR> jmenuji se Jan Sova a právě čtete mou příručku.<BR> S pozdravem Jan Sova</P>
Tag se nebojte používat, bez něj to občas moc dobře nejde. Pokud musíte do stránky vložit zdrojový kód programu, použijte tag <PRE></PRE>. Je to tag, který se používá pro formátované písmo. Později si ukážeme některé další způsoby, jak do stránky vložit zdrojový kód.
Tag <Hn></Hn>, kde n je celé číslo z intervalu <1, 6> (jednoduše řečeno n může nabývat celých hodnot od 1 do 6). Nadpisy se dělí podle úrovně a velikosti, kterou právě určuje "n". Největší je nadpis první úrovně (<H1></H1>) a nejmenší je nadpis šesté úrovně(<H6></H6>). Šest úrovní nadpisů je myslím dost pro každý dokument. Pravdou však je, že:
Pokud chci dokument trochu rozdělit, aby se jednotlivé části nepletly, použiji tag <HR>, který zobrazí horizontální čáru přes celou šířku okna prohlížeče.
Pokud vám nevyhovuje základní vzhled čáry, můžete si nastavit některé jeji vlastnosti:
WIDTH="10%" určuje délku čáry, můžete ji zadat v procentech nebo v pixelech SIZE="1" tloušťka čáry v pixelech <HR WIDTH="100%" SIZE="1">
Při psaní HTML dokumentů určitě budete občas potřebovat text různě odlišit, podtrhnout, zvětšit, zapsat kurzívou a podobně. Pokud chcete změnit styl písma po určitý text, prostě jej uzavřete mezi příslušný tag (jejich seznam naleznete v referenci).
<P><B>Jan Sova</B> - student SPŠ v Kutné Hoře.</P>
Výstup:
Jan Sova - student SPŠ v Kutné Hoře.
Pokud potřebujete změnit fonty, barvu textu, ...(podobný popis naleznete v referenci), použijte tag <FONT></FONT>, pomocí kterého můžete text různě měnit.
<FONT COLOR="BLACK" FACE="Arial">text</FONT>
Odkaz je zvýrazněná část textu, ve které se skrývá adresa dalších WWW stránek (URL). Po kliknutí na odkaz prohlížeč otevře okno (nebo načte do již stávajícího) s novou adresou. V HTML lze odkaz zapsat takto:
<A HREF="http://www.odkaz.cz">text odkazu</A>
Kromě textu můžeme odkazovat i obrázkem. Toho jednoduše docílíme vložením obrázku mezi tagy <A>...</A>
<A HREF="http://www.odkaz.cz"><IMG SRC="obrazek.gif BORDER="0"></A>
Atribut BORDER="0" u obrázku <IMG> použijete tehdy, pokud nechcete, aby byl okolo odkazujícího obrázku rámeček.
Někdy potřebujeme, aby odkaz odkazoval do nějaké části dokumentu. K tomu slouží tag <A NAME="neco">. Stačí jen tento tag umístit doprostřed dokumentu a k odkazu připsat :
<A HREF="mojestranky.html#001">druhá část</A> ... ... <A NAME="001"> druhá část
Pokud potřebujete vytvořit odkaz, který by zajišťoval stažení nějakého souboru, do URL uvedete přesnou adresu, kde se soubor nachází.
<A HREF="http://www.odkaz.cz/soubor.zip">soubor.zip</A>
Bez seznamů si nedovedu představit život (znám člověka, jehož nejoblíbenější činností je právě psaní různých seznamů), protože bych různé dokumenty jen těžko nějak ztrukturoval. Používám je hlavně ve svých učebnicích, kde mi většinou poslouží jako dobrý obsah. V HTML naleznete tři druhy seznamů: nečíslované, číslované a definiční.
Celý seznam "zabalte" do tagu <UL> a jednotlivé položky seznamu začněte tagem <LI>. Pokud si to stejně jako já neumíte dost dobře představit, prohlédněte si příklad:
Programovací jazyky <UL> <LI>Pascal <LI>C/C++ <LI>Java <LI>JavaScript/VBscript <LI>Delphi </UL>
Výstup:
Programovací jazyky:
|
Pod jednou položkou může být i více odstavců, jen je oddělte tagem <P>.
Řekl bych, že jsou mnohem méně používané, ale dokáží vytvořit dokonalý obsah dokumentu. Od nečíslovaného seznamu se liší jedním tagem: tag <UL> je nahrazen tagem <OL>.
Mám rád <OL> <LI>holky <LI>atomy <LI>vdolky <LI>svou klávesnici </OL>
Výstup:
Mám rád
|
Definiční seznam se od předchozích liší a lze ho použít např. pro vytvoření "definičního" slovníku. Pokud chcete takový seznam vytvořit, začněte a skončete tagem <DL></DL>. Před termín, který chcete definovat zapište tag <DT>. Mezi termín a jeho definici zapište element <DD>. Jako příklad vám ukáži slovník (část) slavných fyziků:
<DL> <DT>Thales z Milétu <DD>Řecký filozof, matematika a astronom, první známý evropský vědec. <DT>Vivani, Vincenzo <DD>Italský matematik a fyzik, žák Galileiho, dokázal atm. tlak. <DT>Weber <DD>Americký fyzik, zabýval se otázkou gravitačních vln. </DL>
Výstup:
|
Jak jsem již řekl, normální text je zarovnáván podle velikosti okna prohlížeče a je obvykle zobrazen proporcionálním písmem. Také nesmí obsahovat více jak jednu mezeru (tedy smí, ale je lepší, pokud tomu tak není). Tento způsob je určitě nevhodný po výpis zdrojových kódů programů. Jak jsem se již zmínil, k tomuto účelu lze použít element PRE. Jednoduchý program v Pascalu, bychom potom mohli zapsat:
<PRE>
<B>Program</B> Ahoj;
<B>Uses</B> CRT;
<B>Begin</B>
<B>WriteLn</B>('Ahoj');
<B>End.</B>
</PRE>
Výstup:
Program Ahoj;
Uses CRT;
Begin
WriteLn('Ahoj');
End.
Aby byl kód programu lépe čitelný, zajistil jsem zvýrazněné zobrazení klíčových slov. Všechny výpisy HTML kódů na těchto stránkách jsou zformátovány stejně jako výpis programu Ahoj.
Komentáře tu jsou pro vkládání poznámek do zdrojových kódů stránek. Poznámky jsou prohlížeči ignorovány a nijak neovlivňují zobrazení stránky. Obecný zápis komntáře je:
<!-- komentář -->
Jako komentář můžete napsat cokoliv, výjímku tvoří trojice znaků "-->" pro ukončení.
Komentáře do stránky vkládejte vždy, kdy potřebujete zajistit zpřehlednění kódu, můžete obalit kusy kódu, které nechcete zobrazit, atd.