Cvičení - Tvorba WWW stránek

Teoretický základ (co je HTML, HTTP, hyperlink)

WWW stránky jsou psány v jazyce HTML. Při zobrazování stránek komunikuje prohlížeč klienta s www serverem pomocí HTTP protokolu.
Příklad klientského prohlížeče - Netscape Navigator, MS Internet Explorer
Příklad www serveru - Apache, Internet Information Server
HTML stránky jsou obvykle soubory s příponou .html, .htm, .php, .asp
Obrázky na www stránkách mají přípony .gif, .jpg, .png
Adresa URL: protokol, jméno stroje, cesta k souboru, soubor - http://home.zcu.cz/~pesicka/zps/

Co HTML jazyk umožnuje:

Hyperlink (odkaz) - odkaz z dané stránky na jinou, resp. na jiný informační zdroj, který se může nacházet na stejném serveru anebo také na opačném konci planety.

Ruční tvorba www stránek

WWW stránka je vlastně obyčejná stránka textu, doplněná určitými značkami. Značky moho být buď párové nebo nepárové. Značky jsou uvozeny znaky <>, párová značka má tvar <znacka> ... </znacka>.

Celý dokument se skládá z hlavičky a těla dokumentu.
Celý dokument je uvozen značkami <HTML> ... </HTML>.
Sekce hlavičky je označena <HEAD> ... </HEAD> a obsahuje např. titulek www stránky.
Sekce těla dokumentu je ohraničena <BODY>... </BODY> a obsahuje text stránky.

Výuka jazyka HTML - výborná příručka popisující základní elementy HTML (bohužel pouze pro HTML verze 3.2)

Stručný přehled základních značek:

zdrojový kódvýsledek
normální text s libovolným počtem    mezer  a
libovolnými konci

řádků
 normální text s libovolným počtem mezer a libovolnými konci řádků
<B>tučné písmo</B> tučné písmo
<I>kurzíva</I> kurzíva
<H1>Nadpis 1. úrovně</H1>

Nadpis 1. úrovně
<H2>Nadpis 2. úrovně</H2>

Nadpis 2. úrovně
tvrdé zalomení<BR>řádky tvrdé zalomení
řádky
<P>odstavec 1</P><P>odstavec 2</P>

odstavec 1

odstavec 2
oddělovací<hr>čára oddělovací
čára
odkaz na stránku na jiném serveru (absolutní URL)
studuji na <A HREF="http://www.zcu.cz">Západočeské Univerzitě v Plzni</A>.		 studuji na Západočeské Univerzitě v Plzni.
odkaz na stránku ve stejném adresáři (relativní URL)
a také doporučuji prostudovat <A HREF="popis.html">další informace</A>		 a také doporučují prostudovat další informace
odkaz v rámci jedné stránky
<A HREF="#nejaky_retezec">odkaz</A> (místo ze kterého chceme skočit) vytvoříme jako nornální značku a jako url uvedeme znak # následovaný jménem kotvy
...
kotvu (místo kam chceme skočit) označíme opět pomocí značky A, ale s atributem NAME <A NAME="nejaky_retezec"></A> jež obsahuje jmeno kotvy.		 odkaz (místo ze kterého chceme skočit) vytvoříme jako nornální značku a jako url uvedeme znak # následovaný jménem kotvy
...
kotvu (místo kam chceme skočit) označíme opět pomocí značky A, ale s atributem NAME jež obsahuje jmeno kotvy.
odkaz na e-mail
Muzete poslat mail <A HREF="mailto:pepa.vomacka@email.cz">Pepovi Vomackovi</A>		 Muzete poslat mail Pepovi Vomackovi
vložení obrázku
a takto <IMG SRC="images/printer.png" ALT="Tiskárna"> vypadá ikonka tiskárny v Linuxu		 a takto print vypadá ikonka tiskárny v Linuxu
nečíslovaný seznam
        <UL>
        	<LI>jedna položka</LI>
        	<LI>další položka</LI>
        </UL>
  • jedna položka
  • další položka
číslovaný seznam (jako číslovaný,ale <OL> místo <UL>)
        <OL>
        	<LI>jedna položka</LI>
        	<LI>další položka</LI>
        </OL>
  1. jedna položka
  2. další položka
tabulky ... element <TR> ohraničuje řádek, <TD> sloupec 
        <TABLE BORDER="1">
        	<TR>
        		<TH>1.sloupec</TH>
        		<TH>2. sloupec</TH>
        	</TR>
        	<TR>
        		<TD>1. radek 1. sloupec</TD>
        		<TD>1. radek 2. sloupec</TD>
        	</TR>
        	<TR>
        		<TD>1. radek 1. sloupec</TD>
        		<TD>1. radek 2. sloupec</TD>
        	</TR>
        	<TR>
        		<TD>3. radek 1. sloupec</TD>
       			<TD>3. radek 2. sloupec</TD>
       		   </TR>
        </TABLE>
1. sloupec 2. sloupec
1. radek 1. sloupec 1. radek 2. sloupec
1. radek 1. sloupec 1. radek 2. sloupec
3. radek 1. sloupec 3. radek 2. sloupec

První "ručně" psaná stránka

Spusťte program notepad (Start->Run->notepad) a překopírujte myší následující jednoduchou stránku. Tuto stránku dále uložte na disk jako H:\public\1pokus1.htm
Pomocí Netscape Navigatoru si prohlédněte danou stránku a zkuste v ní provést nějaké úpravy dle výše uvedených základních elementů HTML, změněnou stránku znovu uložte, a zvolte Reload na vašem prohlížeči, tak aby se vám změněná stránka zobrazila na obrazovce.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
    <TITLE>Title</TITLE>
  </HEAD>

  <BODY>
  
    tělo dokumentu.....
  
  </BODY>
</HTML>

První řádka (<!DOCTYPE HTML ....) říká, že toto je HTML dokument ve verzi 4.01 Transitional. Pozor! tato řádka jako jediná je Case-Sensitive - záleží na velikosti písmen.
Dále již následuje HTML dokument uzavřený do značek <HTML> a </HTML>. Každý html dokument obsahuje povinně hlavičku a tělo dokumentu. Hlavička (označená značkami <HEAD> a </HEAD>) obsahuje popis tohoto dokumentu - například povinný titulek této stránky (značka TITLE) a dále volitelně například značku META, pomocí jejichž atributů můžeme specifikovat další údaje, například:

Validace (kontrola syntaxe) jazyka HTML

Validní HTML dokument splňuje požadavky na syntaxi jazyka HTML - obsahuje pouze povolené značky s povolenými atributy a to ve správném pořadí, neobsahuje křížící se značky, obsahuje počáteční i koncové značky, ...

I když většina prohlížečů zobrazí i nevalidní stránky (HTML kód), pouze u validních HTML stránek máte jistotu, že budou zobrazeny všemi prohlížeči a to i v budoucnosti.

K validaci HTML (a XHTML) můžete použít buď klasický program (který je nutno nahrát a nainstalovat), nebo webový validátor na stránkách konsorcia W3C který je k dispozici na adrese http://validator.w3.org.

Příklad HTML kódu s odkazem na validátor (nezapomeňte stáhnout a uložit obrázek valid-html401.png).

<A HREF="http://validator.w3.org/check/referer">
  <IMG SRC="valid-html401.png" BORDER="0" ALT="Valid HTML 4.01!">
</A>
Valid HTML 4.01!

Pozn.: ještě samozřejmě musíme stáhnout a uložit obrázek do stejného adresáře jako je HTML stránka, případně můžeme použít ikonku zobrazovanou přímo z w3c (SRC="http://www.w3.org/Icons/valid-html401")

Publikování HTML v prostředí ZČU/Orion

Každý uživatel sítě WEBnet může velmi snadno publikovat svá data prostřednitvím WWW. Jedinou podmínkou je nakopírování těchto dat do adresáře public ve vašem domovském adresáři (v OrioNT je to H:\public, v Orion Linuxu je to ~/../public). Tento adresář je poté přístupný na adrese http://home.zcu.cz/~VASE_UZIVATELSKE_JMENO/.

Další dokumentaci o WWW v síti WEBnet lze nalézt na adrese http://home.zcu.cz/www/

Použití editoru stránek

Použití Netscape Composeru pro tvorbu www stránek - základní text pro vytváření stránek.

Pro vytváření stránek použijeme adresář H:\public\