13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací jazyk) je značkovací jazyk sloužící k vytváření jednoduchých www stránek. Používá tagy, což jsou defnované značky, pomocí kterých určuje strukturu a vzhled dokumentu. HTML je standard defnovaný organizací W3C, jako náhrada za něj (respektve jako jeho implementace v XML) vzniklo XHTML. Základní členění dokumentu Klasický HTML soubor může vypadat takto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> obsah hlavičky </head> <body> obsah těla </body> </html> html Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Pokud ale chcete mít soubory v souladu s normou W3C, <html> tag používejte. Tag html nemá žádné atributy. head Hlavička dokumentu, která se nezobrazuje. Obsahuje nepovinně další tagy (ttle, meta, link, style, script aj.). Pokud v hlavičce použijete prostý text, v některých prohlížečích se zobrazí na začátku stránky!! Tag head nemá žádné atributy. body Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky. Všechny níže zmíněné atributy tagu body (vyjma obecných) jsou zastaralé a nahrazují se využitm CSS vlastnost nastavených pro tag body (doporučené CSS vlastnost uvádím v pravém sloupci tabulky). Atributy tagu <body> Význam Hodnoty CSS náhrada pro body bgcolor barva pozadí barva background-color background obrázek pozadí URL obrázku background-image 1/5
text barva popředí (textu) barva background-color link vlink bgpropertes barva nenavštvených odkazů barva navštvených odkazů posouvání obrázkového pozadí barva barva scroll fxed a:link {color: } a:visited {color: } backgroundatachment scroll rolování těla yes no overfow lefmargin levý okraj px margin-lef topmargin horní okraj px margin-top rightmargin pravý okraj px margin-right botommargin spodní okraj px margin-botom marginwidth levý a pravý px margin marginheight horní a spodní px margin + obecné atributy (htp://www.jakpsatweb.cz/html/obecne-atributy.html) <!-- poznámka --> Všechno, co je v HTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. <!-- je tedy začátek poznámky, --> její konec. Poznámkám se také říká "komentáře". Pomocí poznámek určitého tvaru se dá dosáhnout nestandardního chování Internet Exploreru. Říká se tomu conditonal comments, podmíněné komentáře.!doctype Specifkace DTD. Píše se úplně na začátek souboru, ještě před značku <html>. Není nutné to dělat, ale podle standardu značkovacích jazyků SGML a XML je vhodné strukturovanou formou říci, že tento dokument je HTML dokument; navíc se udává verze HTML, které to odpovídá. Význam to bude mít v budoucnu, až se budou dokumenty zpracovávat více automatcky. Syntaxe je poněkud podivná. Omezím se na pár příkladů: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <!doctype html> Na místě řetězce "strict" se někdy užívají řetězce "draf" nebo "fnal". Pokud nemáte syntaxi souboru zkontrolovanou parserem podle příslušného DTD, raději do <!doctype> nepište vůbec nic než html (viz poslední příklad). Hlavní funkcí!doctype je dnes přepínání zobrazovacích modů CSS. Jinak řečeno podle doctype se určuje, ve kterém prohlížeči se budou jak počítat šířky a velikost písma. Je to velmi pošahaná a nepříjemná situace, která vznikla historickým vývojem. O přepínání módů prohlížečů. 2/5
Odkazy, tabulky, seznamy, obrázky Odkazy <a> Odkaz (z angl.anchor). Vše, co je mezi značkami <a> a </a> bude sloužit jako odkaz (tzn. bude klikatelné). Např. <a href="index.html">hlavní stránka</a> se zobrazí jako klikatelný nápis Hlavní stránka. Uvnitř elementu se může objevit skoro cokoliv (např. obrázek, který tak bude celý sloužit jako odkaz). Uvnitř odkazu nesmí být : další odkaz (tag <a>), formulář (tag <form>), tabulka (tag <table>) uvnitř odkazu nefunguje jako odkaz a podobně se mohou chovat i jiné složité tagy. Href Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknut. Href se zapisuje jako URL. Příklad: <a href="htp://www.seznam.cz">portál Seznam</a> Name Jméno záložky. Tag <a> může sloužit kromě odkazu i jako záložka. Záložka je dobrá k tomu, že defnuje místo v dokumentu, na které může mířit odkaz (jiný tag a s href="#jmenozalozky"). Po kliknut na takový odkaz se stránka odroluje na pozici záložky. Tag <a> defnující záložku neobsahuje atribut href, ale name. Obsah tagu <a name=něco> může být prázdný. Příklad: <a name=priklad></a> Text příkladu <a href="#priklad">po kliknut na tento odkaz odroluje stránka na záložku příkladu.</a> Tabulky Zkusím vložit tabulku s dvěma řádky a dvěma sloupci (a nějakým obsahem). Obsah buňky Další buňka levá spodní pravá spodní Ta má tento kód: <table > <tr> <td>obsah buňky</td> <td>další buňka</td> </tr> <tr> <td>levá spodní</td> <td>pravá spodní</td> </tr> </table> Co znamenají jednotlivé tagy: 3/5
<table> Párový tag, který začíná tabulku. <tr> Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). <td> Tag buňky tabulky. Seznamy Tagy používané v seznamech: li položka seznamu ol číslovaný seznam ul odrážkový seznam dir zvláštní druh seznamu menu typ seznamu dl seznam defnic dt defnovaný termín dd defnice termínu Více na htp://www.jakpsatweb.cz/html/seznamy.html Obrázky Tag IMG V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totž umístění obrázku. Například zápis <img src="nejaky_obrazek.gif"> do stránky vloží obrázek, který se jmenuje nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například <img src="adresar/jiny_obrazek.gif"> Dá se použít i absolutní adresa, třeba <img src="htp://www.seznam.cz/logo.gif">. Kromě src se zadávají další atributy obrázku. Např. kód: <img border="3" src="kote.gif" alt="koťátko" align="right" width="60" height="60"> vloží do stránky obrázek kotěte zarovnaný doprava s popiskem "koťátko". HTML editory Dříve se na vytváření webových stránek používal obyčejný poznámkový blok, ale od toho se již dávno opustlo, protože práci s html dokumentem nijak nezpříjemňoval, a tak se mezi html kódéry prodral inteligentní textový sofware. Tyto textové editory nejsou holé, jako je poznámkový blok, ale disponují mnoha funkcemi, které práci s html zjednoduší (např. formátování html značek, rychlá validace, náhled v prohlížeči). Navíc v těchto specializovaných vývojářských programech je celý kód přehledný, tagy jsou obarveny jinou barvou než čistý text. Navíc některé inteligentní programy sami doplňují párové html tagy a některé dokonce nabízí WYSIVYG editor (který však není doporučován). Pro práci s html se tedy vyplat si stáhnout nějaký specializovaný html editor. 4/5
Příklad sofwaru vhodného pro editaci html: PSPad (vřelé doporučení, nejlepší pro Win) Bluefsh jedit gedit Fraise 5/5