PPS - cvičení 5: vlastní domovská stránka

Na přání správců sítě připomínáme, že studenti nesmí na síti porušovat autorská práva, zejména zveřejňováním nahrávek a autorských děl autorů, kteří je normálně prodávají (přesněji: na síti smějí být jen ty nahrávky, u kterých na to má zveřejňovatel písemný souhlas autora). Podrobněji viz http://net.fsid.cvut.cz/info/blacklist/. Upozorňujeme, že této činnosti se dopouští i některé programy pro sdílení těchto dat, zinstalované mnohdy v domnění, že jde pouze o program k jejich vyhledávání a stahování (například tzv. torentoví klienti, jako bittorent, atd.).

Úkol: Vytvořit vlastní html stránku

  1. Stránku nazvěte index.htm a umístěte do nové složky public_html, kterou vytvoříte v kořenovém adresáři vašeho prostoru na serveru fsh.fsid.cvut.cz.
  2. Úsek stránky a nebo celá stránka bude rozvržena a naformátována buďto:
    • pomocí tagů div s využitím stylů CSS, nebo
    • tabulkou (bez okrajů), nebo
    • pomocí nového standardu html5.
  3. V úseku stránky budou vedle sebe dva stejně vysoké bloky s různými barvami pozadí :
  4. Dále bude stránka obsahovat:
    • nadpis tučným písmem s větším fontem,
    • alespoň dva funkční odkazy:
      • alespoň jeden odkaz na soubor ve stejném adresáři (ke stažení a podobně),
      • alespoň jeden odkaz na stránku na jiném serveru.
    • alespoň jeden seznam alespoň o třech položkách (číslovaný nebo nečíslovaný),
    • alespoň jednu vyplněnou tabulku s okrajem s rozměrem alespoň 2 x 2,
    • barevné písmo nebo pozadí.
  5. stránku otevřte v textovém editoru. Zkontrolujte, zda obsahuje všechny povinné značky (tags; zejména <html>, <head> a <body>) a potřebné meta-tagy. Pokud obsahuje další značky, ujistěte se, zda rozumíte jejich významu a zda jsou pro funkci potřebné. Pokud jsou zbytečné, odstraňte je.
  6. stránku předveďte ve webovém prohlížeči tak, že bude plně funkční, když se na ní přistoupí z internetu přes vaší webovou adresu http://users.fs.cvut.cz/~vaseuzivatelskejmeno
    • detailnější informace viz níže.
    • k prohlížení v učebně doporučujeme Mozilla Firefox

Stručné ukázky jako návody

  1. Velmi stručně o dnešním využití HTML (nečíslovaný seznam)
  2. Online nástroje pro studium HTML (tabulka)
  3. Jednoduché rozložení stránky pomocí tagu div (lokálně definované styly CSS)

Pokud byste měli zájem o dynamické html stránky, můžete si v letním semestru zapsat volitelný předmět 2375002 Programování pro web (v návodu na 1. cvičení je zde popis použití stylů).

Online html editory: quackit.com | html.am | "color" | "best".   V učebnách FS můžete použít - v prostředí MS Windows program PSpad, v prostředí Linux gedit. Pspad je možné použít i pro editaci stránek z domácího pořítače, umožňuje připojení pomocí protokolu ftps.

Umístění domovské stránky

Základní umístění domovské stránky studenta je na serveru FSH (z Internetu přístupný jako fsh.fs.cvut.cz pomocí protokolu ftps). Místo pro stránku zde získáte snadno - vytvoříte si ve svém domovském adresáři (který je namapován jako N:) adresář se jménem public_html (jméno nutno dodržet - pozor na překlepy, všechna písmena malá!; v MS Windows lze použít pravé tlačítko myši, adresáře se zde jmenují "složka"). Do tohoto adresáře umístíte soubor se jménem index.htm . Vhodným přeeditováním si následně vytvoříte domovské stránky, které by měl http deamon na serveru zpřístupnit veřejně. Například uživatel s přihlašovacím jménem NovakJ70 by měl domovský adresář //fsh.fs.cvut.cz/novakj70 namapován jako N: a pokud by vytvořil výše zmíněný adresář a soubor, byla by jeho domovská stránka přístupná jako http://users.fs.cvut.cz/~novakj70 . Stránka ovšem zabírá místo ve vašem adresáři - po dobu výuky předmětu PPS to musíte přetrpět, ale jinak je to další důvod k jejímu přemístění jinam.

Poznámka - česká klávesnice. V učebnách se klávesnice přepíná současným stiskem levého Shiftu a klávesy Ctrl. Pokud nemůžete klávesnici přepnout, zkuste podržet levý Alt a na numerické klávesnici "vyklepat" kód znaku. Vlnovka (tilda, ~) má kód 126, zavináč (@) má kód 64. Při editaci html kódu můžete ještě potřebovat menšítko (<) pod kódem 60, většítko (>) jako 62 a ampersand (&) jako 38, ale lépe je použít schránku (clipboard, Ctrl+C a Ctrl+V) a přenést si tyto znaky z tohoto textu, či z jiného místa html kódu.

Na Internetu je řada serverů, které nabízejí bezplatně svůj diskový prostor - zpravidla si pak k vašim stránkám připojí svou reklamu buď vložením reklamního proužku přímo do stránky, vyvoláním samostatného okna s reklamou, nebo s použitím rámů (frameset). Poslední varianta je nežádoucí, protože při přechodu na jinou stránku může rámec s reklamou v prohlížeči zůstat (nutno zkontrolovat a ošetřit, například pojmenováním okna). Osobně jsem vyzkoušel vytvořit stránku na serveru webzdarma (pod názvem zpp.wz.cz) - služba funguje výborně včetně php, sql a mailu (i odesílání z php), problém je často s editací pomocí integrovaného webového rozhraní, je lépe použít pspad.

Pokud si požádáte o konto na některém z obdobných free-web serverů, zpravidla vyplníte on-line dotazník a bude vám přiděleno uživatelské jméno, heslo, a také jméno serveru a způsob, jakým na něm máte umístit své stránky (zpravidla adresa ftp serveru, popřípadě jméno adresáře). Informace si někde uložte, mohou se později hodit. Zdůrazňuji, že tvorba domovských stránek mimo školní server není předmětem výuky v tomto předmětu.

Jazyk HTML

Stránky na www serverech jsou psány zpravidla v "hyper text mark-up language" (hyper=obsahuje odkazy na jiné stejně formátované texty, mark-up=značkovací jazyk). Ten byl vytvořen tak, aby jej bylo možné psát jako holý text, například v poznámkovém bloku, nebo v textových editorech v terminálovém prostředí serverů, například populární vi v Linuxu. Stránky obsahují tzv. "tag", které buď poskytují informaci pro celý zbytek stránky, nebo častěji obklopují úsek textu jako závorky. Samotné tagy jsou uzavřeny mezi ostré závorky (znaky "menší než" a "větší než", < a >), aby se odlišily od ostatního textu. Pokud jsou dva (počáteční a uzavírací), obsahují stejné slovo, ale druhý začíná znakem "/" (lomítko), viz příklady dále. Tagy i jejich parametry lze psát malými i velkými písmeny, jak uznáte za vhodné (tzv. validátor W3C zbytečně požaduje malá písmena a všechny tagy ukončené, prohlížeče nikoli).

Celý soubor ve formátu HTML musí být uzavřen do takovýchto závorek se slovem html. Takový soubor zpravidla obsahuje hlavičku, označenou tagem "head", a za ní tělo stránky, označené "body". V hlavičce bývá název stránky, označený "title";. Nejkratší rozumná stránka může mít tedy tvar:

<html>
<head><title>Pokusná stránka</title></head>
<body>Na stránce se pracuje
</body></html>

Některé html příkazy (tag) mohou mít parametry. Například u příkazu "body" by člověk čekal zadání barvy pozadí stránky nebo barvy textu. To se provede vložením parametru, který následuje rovnítko a hodnota (podle normy jazyka má být v úvozovkách, ale zpravidla neškodí jejich vynechání).

<html>
<head><title>Pokusná stránka</title></head>
<body bgcolor="#FFF5C1" text="#800000">Na stránce se pracuje

</body></html>

Čísla u barev jsou v hexu, vždy dva hexa znaky pro červenou, zelenou i modrou složku. Podrobněji viz další návod

Za zmínku stojí, že v html jazyku není při zobrazování činěn rozdíl mezi mezerou a přechodem na nový řádek - obojí je zobrazováno jako mezera. Pokud chceme, aby text obsahoval odřádkování, musíme vložit značku <BR> (break). V tomto textu je používáno odřádkování s vynecháním půlřádku, tedy odstavec (značka <p>). Tato značka jako jedna z mála změnila od původní definice jazyka význam - zpočátku znamenala konec odstavce, dnes jeho začátek. Ovšem dodnes z tohoto důvodu není třeba psát uzavírací značku </p>. Tento text je ale vytvořen programem Frontpag Express, který předpokládám obdobné značky (</p>) dělá. Musím konstatovat, že tento program zadání některých parametrů neumožňuje (například i na této stránce použitá barva pozadí jednotlivé buňky v tabulce) a je třeba je doplnit přímo do html kódu.

Z výše zmíněného vyplývá, že pokud napíšeme znaky < a >, tak se nemohou zobrazit. Místo nich proto musíme zapsat kódy znaků. V html se tak děje pomocí znaku &. Místo výše zmíněných ostrých závorek proto píšeme &lt; a &gt; (ampersand, pak zkratka slov less then/greater then a zakončovací středník), místo znaku & pak &amp; . Seznam znaků uvádí například stránky W3C, úplnější je zde.

Další vysvětlení je na  zvláštní stránce.

V roce 2014 se u testů bez varování objevily další prvky html, proto jsme zde doplnili návod na formuláře a rámy.

Omezení jazyka html

Nelze nastavit ani používat tabulátory. Místo tabulátorů je nutno používat tabulku. Aby se to kompenzovalo, je možné do jednotlivé buňky tabulky umístit opět tabulku (až 3-násobné vnoření dle standardu html 1.2, ale viděl jsem stránky se šestinásobným). Tabulka se používá i pro rozvržení textu do sloupců. Ve všech těchto případech je tabulka bez okrajů, proto pokud chceme tabulku s okraji (méně časté), musíme je zadat.

Více mezer je zobrazeno jako jedna mezera. Pokud má být v textu více mezer, musíme použít nedělitelné mezery (v html editorech se vytvoří obdobně, jako ve Wordu - držíme klávesy Ctrl a Shift a mačkáme mezeru). Za mezeru se přitom považuje i konec řádku ve zdrojovém textu.

Zadávání pevných rozměrů tabulek a podobně, jak to dělají některé verze MS Office, je nežádoucí. Je-li to třeba, je vhodné zadávat šířku v procentech. HTML text se má přizpůsobit při zobrazení dle možností prohlížeče.

Základní požadavky na html stránky

 

Vkládání obrázků

Obrázky se typicky vkládají ve třech základních formátech, jpeg, gif a png. Jsou pakované, liší se ale způsobem pakování a počtem přenášených barev. Starší gif v základní formě přenáší 256 barev (definovaných tabulkou palety, která je součástí souboru). Pakování zde spočívá v tom, že pokud je více stejných bodů za sebou, zaznamenají se společně. Tento typ záznamů je tedy vhodný pro okopírované výřezy oken z Windows, grafy, různá schemata a podobně. Vzhledem k menšímu počtu barev se hodí i pro velmi malé fotografie (do velikosti několika kilobyte, cca 100x100 pixelů). Gif lze také použít tam, kde se mají obrázky pohybovat (sekvence nesmí překročit několik málo snímků).

Grafika jpeg (v DOSu používají obrázky zkratku jpg) je zaznamenána jako významné body, mezi kterými se zbytek dopočte, podle koeficientů vypočtených kosinovou transformací. Výsledný obrázek proto trpí jistou ztrátou dat; při jeho generování se zadává, jaká ztráta je přípustná. Například obrázek, kde jsou body v průměru ze 75% správné, vypadá ještě velmi dobře. U obrázků v html dokumentu můžeme šířku a výšku zadat a prohlížeč si je přizpůsobí; u tohoto typu kódování je jisté zvětšení či zmenšení bez viditelných deformací (např. gif při zvětšení o 10% zkazí některé čáry). Jpeg je určen pro fotografie, jeho použití pro schemata či dokonce sejmuté úseky textu se projevuje rozmazáním okrajů písmen (i když stejně velká fotografie o stejné kvalitě vypadá naprosto ostře).

Formát png používá bezztrátovou kompresi metodou Huffmanových stromů (stejná, jako je základní metoda programu zip, "deflate"). Hodí se tedy na větší grafy, mapy, schemata a pak tam, kde potřebujeme zachovat obrázek nezměněný a obsahuje více, jak cca 232 barev (v gifu barevná mapa nenastavuje všechny barvy, prvních přesně 16 a posledních nejčastěji 8 zachovává předdefinovaných).

Několik poznámek

Pokud máte textový soubor, který je připraven ke zobrazení na textové obrazovce (například sloupečky čísel, uspořádané pomocí mezer), můžete jej umístit přímo do textu pomocí tagu <pre> a ukončovacího</pre>. Text mezi těmito tagy se zobrazí neproporcionálním fontem (všechna písmena stejně široká) a pokud je více mezer pohromadě, zobrazí se všechny. Taktéž se zobrazí přechody na nový řádek. Mezi těmito značkami předformátovaného textu se mohou vyskytnout jiné tagy, které se samozřejmě provedou, nikoli zobrazí.

Další informace

Základní návod pro naše studenty je na zvláštní stránce, která také upřesňuje, které značky (tagy) se mají studenti naučit.

Řada návodů na tvorbu html dokumentů je na internetu, zkuste se zeptat serveru google.com. Nejlepší metoda pro začátečníky je hledat hezké stránky a dívat se na jejich zdrojový kód, což každý prohlížeč umožňuje (u MS Internet Exploreru zkuste pravé tlačítko na zobrazovanou stránku a volbu "Zobrazit zdrojový kód").

Stránky se mohou podle svého obsahu, či podle použitého prohlížeče dynamicky měnit. Typicky je to umožněno použitím Javascriptu. Krátký návod napsal například pan Václav Bunc v rámci své diplomové práce. Spoustu skriptů lze také najít v různých archivech, například na adrese java.Tatoušek.cz, odkaz "Archiv skriptů" (nespouštět žádnou ukázku skriptu z kategorie "žertíky", pokud se ještě chystáte něco dělat). Řadu dobrých návodů naleznete na stránkách ing. Jiřího Koska. Při zkoušení skriptů je třeba dodat, že počítače v učebnách zdaleka neumožňují spouštět vše, co lze napsat. Ještě reklama - javascriptem generovaná menu (a od prosince do ledna i padající vločky) jsou na stránce Ústavu.

Pokud byste měli zájem o dynamické html stránky, můžete si v letním semestru zapsat volitelný předmět 2375002 Programování pro web. Zpravidla v něm bývá více času na individuálnější práci se studenty (rozsah je 2+2, kz, váha 4 kredity, známka je za vytvořenou webovou stránku s dynamickými prvky - zadání úlohy si student volí sám podle svých potřeb, musí ale splnit požadavky uvedené na stránce předmětu).

Poznámka. Jak ukazuje následující obrázek, styly nemusí být vždy v odděleném .css souboru.


Obr. 1: Příklad použití definice stylu (HTML 4.0) - změna barev posuvníků (scrollbars). Klikněte na obrázek pro ukázku. Nefunguje ve všech prohlížečích.

Poznámka 2 - pokud máte rádi podobná vylepšeníčka, nezapomeňte změnit ikonku stránky (v MS Internet Exploreru funguje jen pro stránky, které si čtenář stránek přidá mezi oblíbené ). Postup: přidejte na stránku úsek kódu podobný jako:

<LINK REL="SHORTCUT ICON"
       HREF="logo.ico">

(nejlépe mezi <head> a </head>; Obrázek musí být ve formátu .ico, viz např. zde).