12. Základy HTML a formuláře v HTML

Transkript

1 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura html 5) jednotlivé tagy a. práce s textem b. odstavce c. seznamy d. obrázky e. tabulky 6) romuláře

2 1. Co je to HTML a historie HTML Web vznikl roku 1989 ve výzkumném středisku CERN v Ženevě (tedy k výzkumným účelům). Tim Berners Lee přišel na to jak vzájemně provázat pomocí odkazů více dokumentů na různých počítačích a potom vytvořili první prohlížeč pomocí kterého se mohli dokumenty snadno prohlížet a přecházet od jednomu dokumentu k druhému. HTML kód je kombinací normálního textu a značek. HTML - Hyper Text Markup Language. Jazyk, jímž se zapisují internetové stránky. Verze HTML - Jazyk HTML se vyvíjel a vyvíjí. V současnosti je aktuální verze 4.0, ale stále se ještě vyskytuje většina stránek psaná podle specifikace HTML 3.2. Kód - Zápis HTML jazyka, někdy se tomu také říká zdroj stránky. Prohlížeč - Program, umožňující zobrazovat a procházet internetové stránky. 2. termíny v HTML a. Tag Základní prvek HTML jazyka, zapisovaný do ostrých závorek. <> b. Značka Interpretace tagu v HTML zápisu. Takto rozeznávám značku úvodní a koncovou (s tím lomítkem). c. Element Prvek stránky představený tagem. Jde o tag samotný i jeho obsah (to, co je mezi úvodní a koncovou značkou). d. Atribut Parametr tagu, zapisovaný ještě uvnitř ostrých závorek Nastavuje elementu nějaké vlastnosti. Hodnota atributu -To, co je za rovnítkem v uvozovkách. Pokud hodnota neobsahuje mezeru, jsou uvozovky nepovinné. e. Entita Některé znaky jsou chápány jako součást jazyka HTML, a tak by se normálně nezobrazily ( <, >,, &, ). Pro tento účel vznikly entity, které se vzápětí rozšířily o mnoho dalších znaků. Znak entita Nezlomitelná mezera < < > > & & " "

3 3. specifikace Dnes se o standarty HTML stará konsorcium W3C < které doporučuje nové standarty HTML a tagy které by se měli a které neměli používat. Jazyk HTML se neustále vyvíjí, standardní verze HTML: 3.2, 4, 4.1, a XHTML 1.0, XHTML 2 a další časem přibudou. XHTML - To X na začátku znamená extensible, rozšiřitelný (ve skutečnost jde o zúžení a osekání). Jaké jsou rozdíly XHML oproti HTML: Tagy a atributy jsou malými písmeny Nepárové tagy končí lomítkem Párové tagy jsou párové povinně Všechny atributy musejí mít hodnotu Interní javascript a styly se zapisují jiným způsobem Dokument má mít XML prolog. Dokument požaduje správný doctype. Všechny atributy mají hodnoty v uvozovkách Zákaz křížení tagů Doctype pro XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" " 4. struktura html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> // říká, v jaké verzi html je daná stránka tvořena <html> // začátek html dokumentu <head> // hlavička html dokumentu <title> popis stranky</title> </head> <body> //tělo stránky co se zobrazuje na stránce zde pišeme tagy např. <p>, <h 1,2,3,4,5,6>, <b>, <u>... </body> </html>

4 5. jednotlivé tag - rozdělení na párové (<html> </html>) a nepárové (<a href />) a. práce s textem b Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se <strong>, což je logické zvýraznění realizované tučným písmem. i Kurzíva (z angl. "italic"). Bývá zaměňován za <em>, což je logické zvýraznění realizované kurzívou. u Podtržení (a angl. "underline"). Doporučuji nepoužívat. Z následujících důvodů: Podtržený text se plete s odkazy Typograficky není podtržení nic hezkého Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. sub Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít vícekrát za sebou. sup Horní index (angl. "superscript"). small Zmenšení písma o jeden stupeň. big Zvětšení písma o jeden stupeň. strike Přeškrtnuté písmo.

5 font Nastavení barvy, velikosti a fontu písma. Atributy tagu <font> Atribut tagu <font> Význam Hodnoty Nahradit stylem color barva písma barva color size velikost, stupeň písma 1 až (+-1 až 6)) font-size face font, druh písma jména fontů oddělená čárkami font-family Příklad: <font color size Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po kravskou velikost 7. Běžné písmo je stupeň číslo 3. strong Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl: tagem <b> říkám, že je něco tučným písmem tagem <strong> říkám, že je něco důležité, zvýrazněné Někomu to připadá jako totéž, já tam ale rozdíl vidím. em Zvýraznění (emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro zvýrazňování (a pro tento účel jen zřídka používaný). h1 až h6 Nadpisy (angl. heading) jsou vlastně zvláštním druhem odstavců (tag <p>). Je rozlišováno šest stupňů nadpisů.

6 b. Odstavce span Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> p Odstavec (angl. paragraph). Základní formátovací tag. Značka <p> se nachází na začátku každého odstavce. Původně šlo o tag nepárový, ale postupně se začala používat i značka </p>, která tag ukončila. Novější specifikace vyžadují ukončovací tag. div Div se nejčastěji překládá jako oddíl. Zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Nezřídka se celá stránka vyskytuje uvnitř jednoho elementu <div>. pre Předformátovaný text. Tento tag umožňuje rychlé publikování textových souborů, které už jsou formátované pomocí mezer a konců řádek. Uvnitř tagu <pre> totiž neplatí základní pravidlo HTML syntaxe, které konec řádku bere jako mezeru a skupinu mezer chápe jako mezeru jednu. Takže případné násobné mezery a konce řádků se v prohlížeči zobrazí stejně jako ve zdroji. c. Seznamy li Položka seznamu (z angl. list item). Pro správné zobrazení musí být uvnitř seznamu -- to znamená uvnitř elementu <ol>, <ul>, <dir> nebo <menu>. Zobrazuje se vždy na novém řádku za číslem (pokud jde o <ol>) nebo za odrážkou (v ostatních případech). Mezi jednotlivými položkami nejsou zvětšené vertikální mezery. Původně se jednalo o tag nepárový, současné specifikace vyžadují i koncové </li>. Atributy tagu <li> Atribut Význam Hodnoty Význam hodnot druh odrážky disc circle square puntík kolečko čtvereček type druh číslování 1 A a I i normální číslování velké písmenkování malé písmenkování římské číslice malé římské číslice start změna čísla číslo číslo položky (převedeno podle typu číslování) ol Číslovaný seznam (ordered list). Uvnitř se smějí vyskytovat pouze elementy <li> (číslované řádky). (V zanořeném tagu <li> se ale pak mohou objevovat

7 další tagy.) Čísla k položkám samozřejmě přidá prohlížeč, o to není třeba se starat. Například takto v HTML kódu vypadá číslovaný seznam se dvěma položkami: <ol> <li>první položka</li> <li>druhá položka</li> </ol> <ol> má atributy type a start, které mají stejný význam, jako u <li>, případné nastavení téhož u jednotlivých <li> má ale větší prioritu. Zanořením dalšího tagu <ol> do elementu <li> se dá udělat víceúrovňové číslování s větším levým odsazením. Před a po celém seznamu se udělá vertikální mezera velikosti jednoho řádku. V tomto se seznamy podobají odstavcům (<p>). Levé odsazení se zobrazuje zpravidla ve velikosti 40 pixelů, čímž se seznamy podobají tagu <blockquote>. ul Nečíslovaný seznam (unordered list). Uvnitř mohou být pouze elementy <li>. Před položkami se jako odrážka zobrazí puntík, lze to ale změnit atributem type (hodnoty stejné jako u <li>). Víceúrovňové odrážky se dají dělat zanořováním dalšího <ul> do <li>. Druhá úroveň zobrazuje přednastaveně kolečko, třetí čtvereček. Seznamy s obrázkovou odrážkou lze udělat pomocí CSS stylů a vlastosti liststyle-image. Příklad: <ul style="list-style-image: URL('puntik.gif')"> <li>položka s obrázkovou odrážkou</li> </ul> d. Obrázky (img) Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Src Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. (Jiné typy souborů se musejí vkládat jako objekty pomocí plužiny). Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem. Alt Zástupný text. Zobrazuje se ve stránce v oblasti nenačteného obrázku. Width, height - Šířka (width) a výška (height) obrázku Border - Tloušťka rámečku. Align - Zarovnání obrázku s okolím.

8 e. Tabulky (table) Tabulka. Uzavírá celou strukturu tabulky, obsahuje další elementy; zejména řádky tabulky. Tr - Řádek tabulky. td Buňka tabulky. Musí být umístěna v řádku <tr>. <td> je párový tag, ale pokud se neuzavře, tak si s tím prohlížeče poradí. Kromě obecných atributů má tyto: col Sloupec. Umožňuje nastavit nějakou vlastnost všem buňkám v jednom sloupci 6. formuláře je část stránky, která se běžnému uživateli jeví podobně jako dialogové okno - slouží k získávání informací od uživatele - získané informace jsou následně odeslány na server ke zpracování - ke zpracování údajů z formuláře se používají CGI-skripty - takže musíme vytvořit stránku s formulářem a ještě skript, který zaslaná data správně zpracuje - formulář může obsahovat různá vstupní pole, tlačítka a přepínače - formulářů může být na jedné stránce víc, ale nesmí být do sebe vnořeny Formulář se vkládá do stránky pomocí elementu FORM, který má atributy: ACTION...určuje URL CGI skriptu, který bude obsah zpracovávat METHOD...určuje metodu odeslání dat (GET nebo POST) ENCTYPE...určuje způsob kódování obsahu formuláře (standardně: application/x-www-form-urldecode a není důvod ho měnit) <form action="vyhodnoceni.php" method="get"> ELEMENTY FORMULÁŘE INPUT...vstupní pole SELECT...pro vytváření seznamů TEXTAREA...vstupní pole pro víceřádkový text 1. element INPUT = vstup Jednotlivé atributy elementu INPUT: (mohou být v libovolném pořadí, většina je nepovinná) TYPE...druh vstupního elementu (pokud není uvedeno, je bráno jako TEXT) NAME...každý element INPUT musí mít určeno své jedinečné jméno Data jsou pak odeslána serveru ve formátu: Jméno1=hodnota1&Jméno2=hodnota2&... VALUE...přednastavená hodnota vstupního data type = TEXT - krátký text SIZE...velikost okénka = počet znaků (přednastaveno nataveno na 20) MAXLENGTH - maximální délka zadávaného textu, může být delší než SIZE

9 Jméno: <input type="text" name="jmeno" size="12" value="tvoje jméno"> Příjmení: <input type="text" name="prijmeni" size="20" value="a teď příjmení"> Jméno: Příjmení: type = PASSWORD - heslo Místo znaků zobrazovány **** Heslo: <input type="password" name="heslo" size="8"> Heslo: type = RADIO - přepínací tlačítka Nabídnete seznam, je odeslána pouze jedna vybraná hodnota, NAME je stejné! CHECKED...předvybraná možnost Tvoje oblíbená barva: <input type="radio" name="barva" value="yellow"> žlutá <input type="radio" name="barva" value="blue" CHECKED> modrá <input type="radio" name="barva" value="red"> červená <input type="radio" name="barva" value="green"> zelená žlutá modrá červená zelená type = CHECKBOX - zaškrtávací pole Nabídnete seznam, jsou odeslány všechny vybrané hodnoty NAME volíme jako typ "pole", vybrané hodnoty naplňují pole automaticky od indexu 0 Př.: Dáš si k jídlu: <input type="checkbox" name="jidlo[]" value="gulas"> bramborový guláš <input type="checkbox" name="jidlo[]" value="svickova"> svíčkovou s knedlíkem <input type="checkbox" name="jidlo[]" value="veprozelo"> vepřová pečeně se zelím <input type="checkbox" name="jidlo[]" value="smazak"> smažený sýr s hranolky <input type="checkbox" name="jidlo[]" value="file"> filé s bramborovou kaší bramborový guláš svíčkovou s knedlíkem vepřová pečeně se zelím smažený sýr s hranolky filé s bramborovou kaší type = RESET - vynulování Všechna pole formuláře se nastaví na původní hodnoty, neposílá se serveru <input type="reset" name="znovu" value="vše zadat znovu"> type = FILE - odeslání souboru Chceme umožnit uživateli odeslání souboru spolu se zbytkem formuláře ACCEPT...můžeme určit MIME typy souborů, které je přípustné vybrat Př.: Připoj obrázek s tvojí originální podobou: <input type="file" name="foto" accept="image/*,text/plain">

10 type = HIDDEN - skrytá pole Budeme např. chtít zachovat hodnotu nějaké proměnné i pro příští zobrazení stránky. Př.: Máme 2 čísla, která budeme při každém dalším zobrazení této stránky: nejdříve zvětšovat o 1: cislo1++ a cislo2++ a pak si vypisovat jejich hodnotu. Do prvku HIDDEN uložíme pouze hodnotu čísla2: <input type="hidden" name="cislo2" value="$cislo2"> Z tohoto skriptu se pak vždy odešle také proměnná cislo2 s příslušnou aktuální hodnotou. V důsledku toho se cislo2 bude při každém dalším zobrazení zvětšovat, kdežto cislo1 bude mezi jednotlivými zobrazeními zapomenuto a vynulováno. cislo1=1 cislo2=1 type = SUBMIT - odeslání formuláře serveru Můžeme použít i více tlačítek s různou hodnotou, posílá se jen to zatržené <input type="submit" name="potvrzení" value="dodat ihned"> <input type="submit" name="potvrzení" value="dodat zítra"> type = IMAGE - odesílací tlačítko s obrázkem Odeslání formuláře, jen místo textu je obrázek, funguje jako klikací mapa Jméno je odesláno se souřadnicemi x a y, kde došlo ke kliknutí (Obr.x a Obr.y) SRC...URL obrázku ALIGN...zarovnání obrázku s okolím (TOP, MIDDLE, BOTTOM, LEFT, RIGHT) <input type="image" name="obr" src="mapa.gif" align="right"> 2. element SELECT = seznam Jednotlivé atributy elementu SELECT: MULTIPLE...pokud je zadán, může být ze seznamu vybráno více položek SIZE...počet najednou zobrazených řádek seznamu OPTION...element pro jednotlivou položku SELECTED...předvybrané položky Vyber si měsíc: <select name="mesic" size="3"> <option value="jan"> leden <option value="feb"> únor <option value="mar"> březen <option value="apr" SELECTED> duben <option value="may"> květen <option value="jun"> červen </select> 3. element TEXTAREA = víceřádkový text Jednotlivé atributy elementu TEXTAREA: ROWS...počet řádek vstupního pole COLS...počet sloupců/znaků vstupního pole Ukončovací tag nesmí být vynechán!!!

11 <textarea name="komentar" rows="5" cols="40"> Zde nám prosím napište připomínky k našemu programu </textarea> Nezapomeňte nakonec formulář ukončit: </form>