Html Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Ditta Kukaňová

Název školy Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Adresa školySokolovská 1638, Svitavy IČO Operační programOP Vzdělávání pro konkurenceschopnost Registrační číslo CZ.1.07/1.1.28/ Označení vzdělávacího materiálu 1.IT - K_INOVACE_1.IT.39 Tematická oblast Název vzdělávacího materiáluHtml Druh učebního materiáluVýukový materiál Anotace Výuka tématu html, vysvětlení pojmu, norem, základní editory, tagy pro nadpisy, odstavce, odkazy, obrázky, tabulky, tvorba vlastní stránky Klíčová slova html, vysvětlení pojmu, norem, základní editory, tagy pro nadpisy, odstavce, odkazy, obrázky, tabulky, tvorba vlastní stránky Ročník3. Typická věková skupina17–18 let Speciální vzdělávací potřebyŽádné AutorDitta Kukaňová Zhotovenoříjen 2014 Celková velikost521 kB

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

Normy HTML  vznik jazyka HTML - jen několik základních značek  HTML základní tagy + formuláře  HTML barvy, tabulky a pozadí stránek  HTML oddělení obsahu a vzhledu - div, span, css, typy dokumentů  Frameset - pro dokumenty, které používají rámce  Transitional - zajišťuje kompatibilitu starších kódů  Strict - používá jen strukturální prvky  vývoj CSS, problémy se striktní syntaxí XHTML, vývoj prohlížečů

HTML 5  současné završení vývoje HTML, CSS a prohlížečů, plná podpora standardu CSS3  dokumenty - zjednodušení specifikace typu dokumentu a kódování  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é, šikmé, styl, písmo... strukturální- odstavce, nadpisy, seznamy, tabulky... popisné -, adresa, navigace... navigační - odkazy na jiné stránky Text odkazu multimediální - vložení obrázků, 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  editory zaměřené především na práci s HTML,CSS, JS a PHP PSPad, Notepad++, Codelobster PSPad, Notepad++Codelobster  Vizuální editory  možnost tvorby HTML stránky ve vizuálním Visiwig režimu ( Adobe DreamWeawer)Visiwig  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  Nadpis nejvyšší úrovně Nadpis kapitoly nebo odstavce Podnadpis... Sedmička už nefunguje  Kromě čtenářů si nadpisů všímají i vyhledávače.  by se měl objevit na jedné stránce právě jednou

Odstavce textu a vynucené zalomení řádku Odstavec zalamuje řádky podle šířky prostoru, který má (nejčastěji okna). Na konci odstavce se zalomí řádek.  Je-li potřeba uvnitř odstavce zalomit řádek, použije se tag, v normálních textech k tomu ale není důvod: Text odstavce plyne a najednou se zalomí řádek.  Pozn. Lorem Ipsum generátor pro generování výplňového textu

Seznamy  Odrážkový seznam (puntíky): první položka druhá položka  Obrázkové odrážky se dělají stejně jako puntíky, ale přidává se styl: ul li {list-style-image: url("obrazek.gif"}

Seznamy  Číslovaný seznam: první položka druhá položka  Jiný typ číslování, třeba a) b) c): ol li {list-style-type: lower-alpha;}

Odkazy (z angl.anchor) vše co bude odkazem  href 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=“ href=“index2.html” href=“obrazek.jpg” href=“soubor.zip” ? ? ? ?

Další volitelné parametry tagu a  Name  Jméno záložky. Tag 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 definující záložku neobsahuje atribut href, ale name. Obsah tagu může být prázdný. Příklad: Text příkladu Po kliknutí na tento odkaz odroluje stránka na záložku příkladu.

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  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:

ú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 Obsah buňky Další buňka levá spodní pravá spodní Párový tag, který začíná tabulku. Párový tag, který začíná a končí řádek tabulky. (tr znamená table row, čili řádek). 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

Moje zkušební stránka Menu  Úvod  Moje koníčky Moje koníčky  Mé oblíbené vědy Mé oblíbené vědy  Moje škola Moje škola  Můj rozvrh hodin Můj rozvrh hodin Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor augue, placerat ut nibh non, consequat posuere nunc. Mauris eu mi a felis aliquam imperdiet ac eu turpis. Donec vitae lectus lorem. Aenean eros est, fermentum at sodales at, lacinia pellentesque sapien. Donec sagittis ac risus quis molestie. Nullam euismod commodo neque, nec posuere tellus accumsan a. Praesent sed nisi fringilla ipsum ultrices mattis iaculis fermentum odio. Vestibulum aliquam eros nec arcu fringilla vestibulum. Nam a rhoncus orci. Phasellus cursus scelerisque orci, quis pulvinar erat interdum a. Duis dignissim posuere euismod. Duis elementum varius blandit. Fusce a dignissim orci. Phasellus cursus euismod dictum. Fusce vestibulum elit a dictum egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sollicitudin augue eget malesuada placerat. Ut ornare ut ligula vitae posuere. Vestibulum a quam vitae elit iaculis imperdiet nec eget dolor. Úvod © 2014, Gymnázium Svitavy

Moje zkušební stránka Menu  Úvod Úvod  Moje koníčky  Mé oblíbené vědy Mé oblíbené vědy  Moje škola Moje škola  Můj rozvrh hodin Můj rozvrh hodin Moje koníčky © 2014, Gymnázium Svitavy

Moje zkušební stránka Menu  Úvod Úvod  Moje koníčky Moje koníčky  Mé oblíbené vědy  Moje škola Moje škola  Můj rozvrh hodin Můj rozvrh hodin Mé oblíbené vědy © 2014, Gymnázium Svitavy

Moje zkušební stránka Menu  Úvod Úvod  Moje koníčky Moje koníčky  Mé oblíbené vědy Mé oblíbené vědy  Moje škola Moje škola  Můj rozvrh hodin Můj rozvrh hodin © 2014, Gymnázium Svitavy Po Út St Čt Pá

Zdroje Klipart MS Office 2013