Úvod do HTML a tvorby webových stránek
Přístup k souborům webových stránek index.html Internet požadavek požadavek soubor soubor klient server: www.seznam.cz HTTP protokol (RFC 2616) http://www.seznam.cz/index.html
použití HTML dokumenty a publikace na webu dokumentace k programům, nápovědy apd. (nejen na webu) reklama uživatelské rozhraní pro internetové aplikace
charakteristika HTML dokumentu jazyk HTML je založen na jazyce SGML (Standard Generalized Markup Language), tedy obecném značkovacím jazyce dokument je čistý text, do kterého jsou vloženy formátovací značky jazyka HTML zobrazení HTML dokumentu se může v jednotlivých prohlížečích lišit HTML se dále vyvíjí (předposlední verze 4.01) a vyvíjí se jeho různá rozšíření (CSS, XHTML, DHTML …)
HTML 5 V roce 2008 se začalo uvažovat o nové verzi HTML. Agónie XHTML už byla tou dobou zřejmá i pravověrným. Myslím, že v roce 2010 se můžeme těšit na novou verzi HTML. Psát v ní stránky ale budeme moci až poté, co vymizí všechny prohlížeče, které ji nebudou podporovat. V praxi půjde hlavně o prohlížeče Internet Explorer 7 a 8, protože Firefoxy, Opery a další prohlížeče se umějí aktualizovat rychleji. HTML ve verzi 5 obsahuje některé nové tagy. Konečně tagy pro prvky stránky, jako je hlavička nebo patička, či třeba tagy pro video nebo vektorovou grafiku. V roce 2010 skutečně začaly prohlížeče celkem solidně HTML 5 podporovat (nebo o tom aspoň vydávat tiskové zprávy). Teď už bude stačit počkat asi čtyři nebo pět let, až zmizí prohlížeče, které HTML 5 nepodporují, a budeme moci HTML 5 směle používat!
SGML značky a HTML specifikace formát SGML značek (tagů) párové - nepárové: <jméno atribut=“hodnota” atribut_bez_hodnoty ...> <jméno atribut=“hodnota” ...>text uvnitř tagu</JMÉNO> značky se mohou vnořovat jazyk HTML určuje jména značek, jména atributů, přípustné hodnoty, párovost značek a zanořování specifikace HTML je definována v DTD souboru (existují tři typy: transitional, strict a frameset) není case-sensitive
HTML dokument Základní struktura HTML souboru <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title> titulek </title> </head> <body> tělo </body> </html>
hlavička dokumentu (uvnitř <HEAD>) <TITLE>název dokumentu</TITLE> <META> - (meta)informace o dokumentu <BASEFONT> - nastavení výchozího fontu pro celý dokument <SCRIPT> - skripty v Java scriptu, nebo Visual Basic scriptu <STYLE> - třídy CSS stylů
<META> - informace o dokumentu tagy <META> doplňují informace o dokumentu (které využívá nejen prohlížeč, ale i nástroje indexující obsah webu) <META name=“Author” content=“Jan Novák”> <META name=“keywords” content=“škola,učit,html”> <META http-equiv=“refresh” content=“3,http://www.seznam.cz/”> <META http-equiv=“Content-Type” content=“text/html; charset=Windows-1250”> <META http-equiv=“expires” content=“Sun, 15 Jan 1998 17:38:00 GMT”>
Tělo dokumentu – parametry <BODY> pomocí atributů tagu <BODY> lze nastavit barvy písma a pozadí a některé další základní parametry zobrazení dokumentu background – URL obrázku na pozadí bgcolor – barva pozadí text – brava textu link – barva hypertextových odkazů alink – (active link) barva aktivního hypertextového odkazu vlink – (visited link) barva navštíveného hypertext. odkazu barva se zadává jako jméno barvy (např. „blue“), nebo ve formátu #RRGGBB, kde RR, GG a BB jsou hexadecimální hodnoty jasové složky daného barevného kanálu (např. #0000FF)
Tělo dokumentu – zobrazení textu obyčejný text v dokumentu (kromě značek) se zobrazí každá sekvence bílých znaků je prohlížečem chápána jako jeden oddělovač slov (jedna mezera) do bílých znaků se počítá i zalomení řádku, a proto bude prohlížeč zalamovat řádky podle potřeby, nebo tam kde se v textu nachází tag <BR> (brake) HTML nabízí širokou škálu tagů, které umožňují další formátování textu (nadpisy, odstavce, změna fontu …) text mimo tělo dokumentu (pokud není uzavřen do některého speciálního tagu – např. <TITLE>) bude také zobrazen
HTML – nastavení fontu textu globální nastavení fontu pro celý dokument - <BASEFONT> (v hlavičce dokumetu) lokální: <FONT ...>text jiným fontem</FONT> atributy (společné pro oba tagy): face – název fontu (např. Arial) size – velikost fontu, číslo od 1 (nejmenší) do 7 (největší), skutečná velikost je závislá na prohlížeči a jeho nastavení color – barva písma (zadává se stejně jako barvy u prametrů <BODY>)
HTML – jednoduché formátování další tagy sloužící k nastavení vzhledu textu: <B> - tučné písmo <I> - kurzíva <U> - podtržené písmo <S> - přeškrtnuté písmo <BIG> - písmo zvětšené o 1 stupeň <SMALL> - písmo zmenšené o 1 stupeň <SUB> - dolní index <SUP> - horní index <CITE> - citace (obvykle se zobrazuje kurzívou) <CODE> - ukázka zdrojového kódu <SPAN> - neformátuje text, ale uzavírá jej do logické obálky pro využití ve skriptech, nebo kaskádových stylech
HTML – blokové formátování následující tagy zarovnávají text do bloku (dojde k zalomení řádku před a za textem): <h1>…<h6> - nadpisy různé důležitosti (a velikosti) <p> - odstavec textu (paragraf) <div> - oddělení části textu (např. kapitoly apd.), často se používá ve spolupráci s kaskádovými styly <pre> - text v tomto tagu bude zobrazen neproporcionálním písmem a budou zachovány bílé znaky (včetně zalomení řádků a tabulátorů) <hr /> - vodorovná dělící čára <br /> - konec řádku (přechod na nový řádek)
HTML – hypertextové odkazy umožňují skoky v rámci jednoho dokumentu i přechod na dokument, který se nachází na úplně jiném serveru základní interakce s uživatelem (čtenářem dokumentu) přispěly k rychlému rozvoji webu odkaz nemusí být jen text, ale i např. obrázek <a name=“kapitola1”></a> <a href=“#kapitola1”>První kapitola</a> <a href=“http://www.mff.cuni.cz”>Matfyz</a>
HTML – obrázky obrázky se vkládají tagem <img /> src – URL obrázku alt – alternativní textové vyjádření height – výška a šířka obrázku, pokud se liší width – od skutečné velikosti, obrázek je roztažen/zmenšen hspace – mezera nalevo a napravo od obrázku vspace – mezera pod a nad obrázkem loop – počet opakování animace (např. u GIFu) usemap – nastavení obrázkové mapy (viz. dále) prohlížeč si stáhne soubor s obrázkem a zobrazí jej v dokumentu
HTML – obrázkové mapy obrázkové mapy umožňují definovat na obrázku několik oblastí, které se chovají jako odkazy <MAP name=“název mapy”> - vytváří mapu pro obrázek (název mapy se uvádí v atributu usemap u tagu <IMG>) <AREA> - vytváří jednu oblast v mapě href – URL odkazu alt – alternativní textový popis shape – tvar oblasti coords – koordináty pro vytvoření oblasti
HTML – seznamy seznamy jsou číslované (nebo odrážkami uvozené) části textu: <ul> - (unordered list) nečíslovaný seznam type = disc | circle | square <ol> - (ordered list) číslovaný seznam type = 1 | a | A | i | I <li> - (list item) položka seznamu dalším typem seznamů jsou např. seznamy definic: <DL> - (definition list) seznam definic <DT> - definovaný termín <DD> - definice termínu
HTML – tabulky <table> - ohraničuje tabulku <tr> - (table row) jeden řádek tabulky <th> - (table heading) políčko v hlavičce tabulky <td> - (table data) políčko v tabulce <table border=“0”> <TR> <TH>Jméno</TH> <TH>Učí</TH> </TR> <TD>Novák</TD> <TD>Mat, Fyz</TD> </TABLE> Jméno Učí Novák Mat, Fyz
HTML – tabulky <TABLE> - atributy: align – zarovnání: left | center | right border – šířka okrajů v pixelech background – URL obrázku na pozadí bgcolor – barva pozadí cellpadding – odsazení mezi okrajem a obsahem buňky cellspacing – odsazení mezi buňkami width – šířka tabulky height – výška tabulky
HTML – tabulky <TR>, <TD>, <TH> - společné atributy align – zarovnání obsahu buňky: left | center | right valign – vertikální zarovnání obsahu: top | middle | bottom bgcolor – barva pozadí buňek <TD>, <TH> - společné atributy colspan – buňka zasahuje přes více sloupců rowspan – buňka zasahuje přes více řádků nowrap – bez-hodnotový atribut, který zakazuje zalamování textu v buňce
HTML – formuláře rozšířená interakce s uživatelem (uživatel může do formuláře vyplnit řadu dat a odeslat je ke zpracování na server) <FORM> - ohraničuje formulář action – URL souboru, ve kterém je skript (PHP, ASP…) pro zpracování dat method – způsob přenosu dat (GET, POST, …) GET – pasivní přenos dat (data jsou přidána do URL) POST – aktivní přenos (v rámci protokolu HTTP)
HTML – formuláře všechny formulářové objekty mají atributy name (název proměnné) a value (hodnota proměnné) <INPUT type=“…”> - základní formulářové objekty text - jednořádkový textový vstup password - textový vstup se skrytým textem radio - přepínací (rádiové) tlačítko checkbox - zaškrtávací políčko submit - odesílací tlačítko reset - resetovací tlačítko file - výběr souboru k odeslání na server hidden - skrytý prvek (uživatel jej nemůže měnit)
HTML – formuláře <SELECT> a <OPTION> - výběr z možností <SELECT name=“vyber”> <OPTION value=“1”>jeden <OPTION value=“2”>dva <OPTION value=“3”>tři </SELECT> <TEXTAREA> - víceřádkový textový vstup
HTML – rámce rozdělí okno prohlížeče na více částí a do každé části se načte jiná HTML stránka použití rámců může zmenšit objem přenášených dat i velikost stránek samotných zjednodušují návrh stránek tříští webovou strukturu a komplikují práci vyhledávačům v současné době se od používání rámců upouští
HTML – rámce <FRAMESET> - vytváří rozdělení (buď horizontální nebo vertikální) cols – nastavi horizontalni deleni (na sloupce) rows – nastavi vertikalni deleni (na radky) [ * | 100 | 10% | 5* ] <FRAME> - nastavuje rám (obsah, parametry) src – URL HTML souboru, který se má načíst name – jméno rámu <FRAMESET cols=“10%,*”> <FRAME src=“stranka1.html”> <FRAMESET rows=“2*,9*”> <FRAME src=“stranka2.html”> <FRAME src=“stranka3.html”> </FRAMESET> 1. (10%) 2. (2 / 11) 3. (9 / 11)
HTML – rámce tagy <FRAMESET> a <FRAME> se normálně umístují do části <HEAD> alternativou je použití plovoucího rámu <IFRAME> přímo na stránce src – URL webové stránky, která se má načíst do rámu name – název rámce height – šířka rámce width – výška rámce border – šířka okraje framespacing – mezera mezi okrajem rámce a dokumentem uvnitř vspace – mezera nad a pod rámcem hspace – mezera vlevo a vpravo od rámce
HTML – další entity komentáře: <!-- komentar --> speciální symboly: &nbps; - pevná mezera (která se skutečně zobrazí jako text) < - menší než “<” > - větší než “>” & - ampersand “&” © - copyright “©” " - uvozovky nahoře
Kde hledat další informace www.w3c.org - World Wide Web Consortium kompletní referenci obsahuje i aplikace DreamWeaver internet obecně
Zásady tvorby www stránek malé stránky – 100kB včetně obrázků na 1 dokument (myslete na uživatele s vytáčeným připojením, nebo GPRS) pokud je třeba, aby uživatel stahoval větší objem dat, je slušností uvést jeho velikost (např. v textu odkazu) stránky je rozumné otestovat na více prohlížečích (ideálně i na PDA, mobilním telefonu, nebo jen v textovém prohlížeči) k nastavení fontů, barev, pozadí, okrajů apd. je vhodnější použít kaskádové styly
Doporučené zásady pro tvorbu www stránek: názvy všech souborů a složek malými písmeny bez diakritiky a mezer všechny soubory www stránek (*.html, *.css…) ukládám do jedné složky všechny soubory s obrázky ukládám do podsložky této složky např. obr, img…(dopředu upravím velikost obrázků na cca 100 kB) všechny ostatní soubory (např. *.doc, *.xls, *.ppt, *.avi…) ukládám do jiné podsložky této složky např. ostatni hlavní soubor stránek pojmenuji index.html všechny tagy píši malými písmeny při tvorbě nového souboru nejdřív uložím soubor, pak vkládám obrázky a tvořím odkazy (kontroluji relativní cestu)