html
HTML Hyper Text Markup Language - hypertextový značkovací jazyk Normalizovaná množina značek (tagů) pro publikování obsahu webových stránek HTML tagy - různé typy značek uzavřených do <> pro strukturování a formátování obsahu Komunikace prohlížeče se serverem
HTML 5 2011 - 2012 - současné završení vývoje HTML, CSS a prohlížečů, plná podpora standardu CSS3 dokumenty - zjednodušení specifikace typu dokumentu <!DOCTYPE html> a kódování <meta charset="UTF-8"> struktura - nové strukturální tagy pro rozlišení částí dokumentu - header, nav, section, article, footer multimédia - nové tagy video, audio, source, canvas (vektorová grafika) formuláře - nové typy tagu input - date, time, number, range, url, search ...
Tagy a atributy Typy tagů stylové (formátovací) - tučné <b>, šikmé <i>, styl <style>, písmo <font> ... strukturální- odstavce <p>, nadpisy <h1>, seznamy <ul>, tabulky <table> ... popisné - <content>, adresa <address>, navigace <menu> ... navigační - odkazy na jiné stránky <a href="adresa_odkazu">Text odkazu</a> multimediální - vložení obrázků <img src="adresa_obrázku">, animace, zvuky, video ... párové x nepárové, bez atributů x s atributy Atributy tagů
Struktura kódu
Struktura obsahu
HTML editory Editory HTML kódu Vizuální editory editory zaměřené především na práci s HTML,CSS, JS a PHP PSPad, Notepad++, Codelobster Vizuální editory možnost tvorby HTML stránky ve vizuálním Visiwig režimu (Adobe DreamWeawer) Univerzální vývojové systémy programátorské a vývojářské systémy (NetBeans, Aptana, Eclipse, MS Visual Studio for Web Online editory Nástroje prohlížečů
Základní tagy
Nadpisy <h1>Nadpis nejvyšší úrovně</h1> <h2>Nadpis kapitoly nebo odstavce</h2> <h3>Podnadpis</h3> ... <h6>Sedmička už nefunguje</h6> Kromě čtenářů si nadpisů všímají i vyhledávače. <h1> by se měl objevit na jedné stránce právě jednou
Odstavce textu a vynucené zalomení řádku <p>Odstavec zalamuje řádky podle šířky prostoru, který má (nejčastěji okna). Na konci odstavce se zalomí řádek.</p> Je-li potřeba uvnitř odstavce zalomit řádek, použije se tag <br>, v normálních textech k tomu ale není důvod: <p>Text odstavce plyne<br> a najednou se zalomí řádek.</p> Pozn. Lorem Ipsum generátor pro generování výplňového textu
Seznamy Odrážkový seznam (puntíky): <ul> <li>první položka</li> <li>druhá položka</li> </ul> Obrázkové odrážky se dělají stejně jako puntíky, ale přidává se styl: <style type="text/css"> ul li {list-style-image: url("obrazek.gif"} </style>
Seznamy Číslovaný seznam: <ol> <li>první položka</li> <li>druhá položka</li> </ol> Jiný typ číslování, třeba a) b) c): <style type="text/css"> ol li {list-style-type: lower-alpha;} </style>
Odkazy (z angl.anchor) <a href=“cíl”>vše co bude odkazem</a> Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí URL Soubor html Obrázek Jakýkoli soubor (určený ke stažení) Odkazem může být text, obrázek, formulářový prvek,… ? href=“http://www.seznam.cz” ? href=“index2.html” ? href=“obrazek.jpg” ? href=“soubor.zip”
Další volitelné parametry tagu 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 definuje 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> definují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>
Další volitelné parametry tagu a Target Cílové okno, iframe, nebo rám, ve kterém se obsah zobrazí. Pokud rámy nepoužíváme můžeme pomocí hodnoty _blank zajistit otevření odkazu v novém okně nebo novém panelu
Obrázky <img> Atributy tagu img: src=“umístění obrázku” Nepárový tag, do stránky se vloží obrázek načtený z jiného souboru. Atributy tagu img: src=“umístění obrázku” alt=“alternativní text” další: width, height, border – nahrazujeme CSS Příklad: <img src="strom.gif" alt="strom">
úkol Vytvořte stránku s hlavním nadpisem: Moje koníčky. Pod nadpis vložte nečíslovaný seznam, ve kterém budou jednotlivé položky seznamu obrázky znázorňující vaše koníčky. Všechny obrázky budou mít šířku 150 px a budou současně odkazy na zvětšeninu téhož obrázku.
Tabulka <table > Tabulka <table > <tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr> <tr> <td>levá spodní</td> <td>pravá spodní</td> </tr> </table> <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> Párový tag buňky tabulky.
úkol Vytvořte tabulku, ve které bude zobrazen váš týdenní školní rozvrh
Tvorba zkušební stránky struktura