HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag> HTML HyperText Markup Language HTML první verze 1991 Značkovací jazyk pro zápis dokumentů na webu Existuje několik verzí. Poslední je HTML 4.01. HTML se dále nevyvíjí. Základní struktura stránky <HTML> <HEAD> záhlaví stránky </HEAD> <BODY> vlastni zobrazeny text </BODY> </HTML> XML - Extensible Markup Language Univerzální jazyk pro předávání strukturovaných informací. XML definuje jen způsob strukturování dokumentu (syntaktická pravidla). Nedefinuje použitelné značky. Použitelné značky a další pravidla záleží již na konkrétní aplikaci XML. Výhodné pro automatizované zpracování.
XHTML - Extensible HyperText Markup Language Jedná se o aplikaci XML. Na první pohled podobné HTML (použitelné tagy z něj výchází) Novější a modernější. Existuje několik verzí (1.0, 1.1, a druhů Strict, Trasitional, Frameset) Přísnější pravidla pro zápis. Některé základní odlišnosti od HTML: Všechny atributy tagů mají hodnoty v uvozovkách Zákaz křížení tagů ( <b><i> text </i></b> Všechny tagy a atributy jsou malými písmeny (case sensitive) Nepárové tagy končí lomítkem např.: <br /> Párové tagy jsou párové povinně Všechny atributy musejí mít hodnotu Mírně odlišný zápis javascriptů a stylů Dokument má mít XML prolog. Dokument požaduje správný doctype. Příklad základní stránky: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>titulek stránky</title> </head> <body> <p>text...</p> </body> </html>
Kódování češtiny: ASCII tabulka 0-127 popisuje základní znaky 128 255 použitelné pro národní abecedy Nejpoužívanější: iso-8859-2 - ISO norma (Latin 2) pro východo(středo)evropské jazyky. Standard hlavně na UNIXu (Linuxu) windows-1250 - Windows kódování UTF-8 - Univerzální kódování Unicode Validita kódu: Psát kódy podle norem (validní), možno ověřit na internetu http://validator.w3.org/ V praxi: ne každý validní kód správně zobrazí i webový prohlížeč ne každý nevalidní kód zobrazí nesprávně různé prohlížeče různé chování na stejném kódu (i validním)
(X)HTML tagy základní přehled Opravdu velmi stručný přehled některých tagů. Pro další informace doporučuji např.: http://www.jakpsatweb.cz/html/ U mnoha tagů lze použít různé atributy: border, bordercolor, height, width,.. Spoustu atributů na formátování vzhledu a některé tagy je lepší nepoužívat (zastaralé) a nahradit CSS (kaskádovými styly) Základní tagy viz. příklad výše: <html><head><body> Tagy v sekci HEAD: Př.: <meta><title><link><script> <link rel="stylesheet" type="text/css" href="format.css" /> Poznámky: <!-- poznámka --> Formátování textu (nahrazovat CSS): <b> - tučně <i> - kurzíva <u> - podtrženo <sup><sub> - indexy <font> - fonty Formátování odstavců: <span> - oddělení části textu s jiným formátováním <div> - blok textu (zalomuje řádek před i za) <h1> <h6> - nadpis 1. 6. úrovně <p> - odstavec (vytváří před a za mezeru) <br> - odřádkování
<center> - vycentrování <pre> - předformátovaný text <hr> - horizontální čára <ul> - nečíslovaný seznam <li>bod 1</li> </ul> <ol>. </ol> - číslovaný seznam Odkazy: <a href="http://www.mojestranka.cz">odkaz</a> <a href="#zacatek">začátek</a> <h1 id="zacatek">hlavní nadpis stránky</h1> parametry: href, target Tabulky: <table summary="popis tabulky"> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> Pozn. pro slučování buněk slouží atributy colspan a rowspan Obrázky: <img src="obrazky/obrazek.jpg" alt="místo obrázku" /> atributy: src, alt, width, height, border,.
Klikací mapy: <map id= mapa name="mapa"> <area href="prvni.html" shape="rect" coords="80, 80, 130, 130"> <area href="druha.html" shape="rect" coords="20, 20, 50, 50"> </map> <img src="obrazek.gif" alt= usemap="#mapa" width="150" height="150"> Vkládání objektů: jen některé příklady <object type="application/x-shockwave-flash" data="flash.swf" width="100" height="40" > <param name="movie" value="flash.swf" /> </object> <script type="text/javascript"> function podnabidka(id){ if(document.getelementbyid(id).style.display=='block') document.getelementbyid(id).style.display='none'; else document.getelementbyid(id).style.display='block'; } </script> Rámce: <frameset cols="250, *"> <frame name="i1" src="menu.htm"> <frame name="i2" src="main.htm"> <noframes> když to nejede a co se vypisuje v některých vyhledávačích </noframes> </frameset> Atributy frameset: cols, rows, border, Atributy frame: name, src, scrolling, noresize,
<a target="i2" href="002.htm"> - odkaz do rámu Plovoucí rámce: <iframe name="main" src="pg0.php" width="484" frameborder="0" scrolling="no" > alternativní obsah </iframe> Formuláře: <form action="index.php" method="post">. zde jsou jednotlivé prvky formuláře </form> Atributy: action, method, accept-charset, Základní prvky formulářů: <input> - vstupní pole (vypadá různě podle atributů) atributy: type, name, value, disabled, readonly, (size, maxlength) Atribut type (jeho hodnota): - text - password - hidden - radio - checkbox - submit - reset - file <select> - vybírací nabídka <option value="vse">text</option> <option value="vse">text</option> </select> Atributy select: Atributy option: name, multiple, size, disabled value, selected Pozn. <optgroup>
<textarea>.. </textarea> - textové vstupní pole Atributy: name, cols, rows, disabled, readonly, Další prvky formulářů: label, optgroup, button,.
CSS - Cascading Style Sheets - CSS (Cascading Style Sheets) je soubor metod sloužících ke grafické úpravě HTML dokumentu. - Nahrazuje některé HTML tagy a jejich atributy a přináší přehlednější a efektivnější způsob ke stylování dokumentu. - Pro opravdové ovládnutí vzhledu HTML dokumentu je jejich využití prakticky nutností. - Jakékoliv statické formátování je zvládnutelné pomocí CSS - Novější verze (X)HTML vlastní atributy tagu pro stylování nepřipouštějí a počítají tomhle ohledu s využitím CSS. - I CSS patří pod W3C a je možné ověřit validitu vytvářených dokumentů. CSS lze v dokumentu využít několika způsoby: 1) Zápisem atributu style u jednotlivých tagu jednoduchý a rychlý způsob pokud chceme jednotlivé některé části nastavit, ale nepřehledné a u opakujících se použití téhož stylu přímo nevhodné. Jako atribut prakticky jakéhokoliv tagu je možné zapsat style= a v uvozovkách uvést jednotlivé vlastnosti pro CSS. <div style="border: 2px white; width: 180px;" > 2) Stylopisem v hlavičce HTML dokumentu. Styly pro celý dokument jsou uvedeny mezi tagy <head></head>. Uvnitř párového tagu style uvedeme nastavení stylu pro jednotlivé elementy dokumentu. <head> <style type="text/css"> div { border: 2px white; width: 180px } </style> </head>
3) Stylopisem v externím souboru. Jedná se o soubor, kde jsou zapsány všechny styly, které se budou opakovaně využívat v celé webové aplikaci a tento soubor se tagem link připojí k html dokumentu. Tento způsob je asi nejvýhodnější, chceme-li mít všechny styly pro aplikaci pohromadě a v jednotlivých souborech aplikace se pak na ně můžeme jen odkazovat a jinak již používat (X)HTML bez CSS. <head> <link rel="stylesheet" type="text/css" href="format.css"> </head> Všechny tři možnosti lze samozřejmě i kombinovat, ale u složitějších stánek je potřeba si v tom zavést určitý pořádek. Vlastní zápis stylů (u možností 2) a 3)): div { border: 2px white; width: 180px } --nadefinuje styl pro tag div tag div teď bude vždy vypadat tak jak jej nastavíme.mujstyl { text-color: red; text-decoration: underline; } Použití vlastní třídy: <tag class= mujstyl >.. <tag class= prvnistyl druhystyl >.. -- definujeme si vlastní třídu a tu pak budeme používat podle potřeby (přiřazovat ji jednotlivým tagům Pozn.: Místo třídy můžeme definovat i identifikátor - #mujstyl { } Přiřazení je pak přes atribut tagu: id= mujstyl Obecně je jedno co použijete (doporučuji třídy) rozdíly jsou při zpracovávání skriptů
Deklarace pro více elementů současně: html, body { height: 100%; } Kontextová deklarace: td a { font-size: 10pt; } Deklarace s pseudotřídou (hlavně) tag a: a {text-decoration: none; } a:hover {text-decoration: underline} pseudotřídy: visited, hover, link, active Přehled některých nejpoužívanějších CSS vlastností Zápis je vždy vlastnost:hodnota; Vlastnosti: width - šířka height - výška color - barva, název nebo #RRGGBB background-color - barva pozadí background-image - obr. na pozadí url( cesta k obrazku ) background-repeat - opakování pozadí font-family - písma konkrétní názvy font-style - styl font-size - velikost font-weight - tloušťka text-decoration - dekorace textu line-height - výška řádku text-indent - odsazení 1. řádku text-align - zarovnání text vertical-align - vertikální zarovnání margin - vnější okraj (margin-left,..) padding - vnitřní okraj ( )
border - rámečky (spousta možností) atd. opravdu spousta dalších možností a vlastností Přehled např: http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html př.:.nadpis { color: #454A3D; text-align:center; font-weight:bold; font-style:italic; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14pt; text-decoration: none; border-bottom: solid #454A3D 2px; border-top: solid #454A3D 2px; } Využití obrázků a tvorba web návrhu (layout) příště