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

Prezentace na téma: "Html Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Ditta Kukaňová."— Transkript prezentace:

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

2 Název školy Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Adresa školySokolovská 1638, 568 02 Svitavy IČO62033026 Operační programOP Vzdělávání pro konkurenceschopnost Registrační číslo CZ.1.07/1.1.28/01.0050 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

3 html

4 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

5 Normy HTML  1990 - vznik jazyka HTML - jen několik základních značek  1994 - HTML 2.0 - základní tagy + formuláře  1995 - HTML 3.2 - barvy, tabulky a pozadí stránek  1997 - HTML 4.01 - 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  2000 - 2010 - vývoj CSS, problémy se striktní syntaxí XHTML, vývoj prohlížečů

6 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 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...

7 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ů

8 Struktura kódu

9 Struktura obsahu

10 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čů

11 Základní tagy

12 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

13 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

14 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"}

15 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;}

16 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=“http://www.seznam.cz” href=“index2.html” href=“obrazek.jpg” href=“soubor.zip” ? ? ? ?

17 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.

18 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

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

20 ú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.

21 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.

22 úkol Vytvořte tabulku, ve které bude zobrazen váš týdenní školní rozvrh

23 Tvorba zkušební stránky struktura

24 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

25 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

26

27

28 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

29

30

31 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 012345678910 Po Út St Čt Pá

32 Zdroje Klipart MS Office 2013