1 / 21

Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín

Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín. Tvorba webu Jazyk HTML, úvod. Publikování na Internetu. Vytvoření stránek Umístění stránek na webový server. Způsoby vytváření www stránek.

shadi
Télécharger la présentation

Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod

  2. Publikování na Internetu • Vytvoření stránek • Umístění stránek na webový server

  3. Způsoby vytváření www stránek • Přímou editací zdrojového kódu v jazyce html:Home Site, PsPad, Poznámkový blok • + malé soubory = rychlé načítání+ dokonalá kontrola nad kódem- nutná znalost HTML • Metoda WYSIWYG (‘what you see is what you get’)MS FrontPage, NVU, Uložit jako html (např.: v MS Office) • + není nutná znalost HTML- velké soubory – pomalé načítání- častěji se v různých prohlížečích zobrazují odlišně • Vyplněním šablony na serveru (e-stránky, webnode, …)+ není nutná znalost HTML+ hezké stránky- malá kontrola kódu

  4. Základy jazyka HTML • Webová stránka je textový soubor obsahující pokyny pro prohlížeč, co a jak se má v prohlížeči zobrazit. • Pokyny pro zobrazení jsou vloženy pomocí hypertextových značek – tagů <tag> Tagy: • párové<b>tučně</b>počáteční tagkoncový tag • nepárové<hr> Pozn.: • Tagy se nesmí křížit (biib x bibi) • Tagy na stránce určují tzv. elementy • Elementy jsou blokové a řádkové

  5. Základní struktura stránky Je povinná! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> fráze určující prohlížeči (nebo i validátorům) verzi použitého jazyka <html>zde začíná část stránky psaná jazykem html <head> služební informace pro prohlížeč (tagy meta, title a další) </head> <body> zobrazovaná část stránky </body> </html>zde končí část stránky psaná jazykem html

  6. TAGY, ATRIBUTY • Odstavec<p>, řádek <br> • Tagy pro nadpisy h1..h6 • Tagy pro formátování písma:b, i, u, sub, sup, big, small • Vodorovná čára – hr Atributy • dají se použít jen ke svým elementům • upravují vzhled elementů • píší se do úvodního tagu: <tag atribut = "hodnota“>obsah</tag> Př.: <body bgcolor=“navy“ text=“white“> obsah</body> více atributů oddělujeme mezerami

  7. BARVY • Slovně (red, green, navy, …)http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html • RGB v šestnáctkové soustavě #ff00ff • RGB v desítkové soustavě rgb(40,114,110)

  8. Nečíslovaný a číslovaný seznam • Nečíslovaný seznam – odrážky<ul><li></li> . . <li></li> </ul> • Číslovaný seznam<ol type="1, a, A, i, I“ start=“ "> Seznamy do sebe lze zanořovat

  9. Tabulky 1 • Přehledné zobrazení dat • Layout stránek pomocí neviditelných tabulek <table border=“1“> <tr><td>Petr</td><td>Veliký</td><td>Car</td></tr> <tr><td>Václav</td><td>Klaus</td><td>Prezident</td></tr> <tr><td>Harald</td><td>Modrozub</td><td>Dánský král</td></tr> </table>

  10. Tabulky 2 Atributy pro celou tabulku • border • width – absolutně (px) x relativně (%) • bgcolor, bordercolor • cellspacing, cellpadding • align – center, left, right (text obtéká) • Tagcaption – align (center,left, right) – valign (top, bottom)

  11. Tabulky 3 Atributy pro tr, th a td • align (left,center,right) • valign (top, bottom, middle) • bgcolor • width (absolutně, relativně, px,%) • colspan • rowspan

  12. Volání souborů v html Zobrazení grafiky, odkaz na jinou stránku, volání externích skriptů, externích stylů,… • Soubor umístěný společně s volající stránkou voláme relativně[cestou]/jménem:src="kote.gif“ (ve stejné složce) src="obrazky/kote.gif“ (v podsložce obrazky)src="..\kote.gif“ (v nadřízené složce)Pozn.: Před relativním voláním musí být volající stránka uložena!!! • Soubor kdekoliv z internetu voláme absolutně(celé URL)src="http://www.felis.cz/obrazky/kote.gif“ Pozn.: Webové servery rozlišují velikost písmen!Jméno souboru nesmí obsahovat mezery a české znaky

  13. Obrázky Nepárový tag img • img(src, alt, title,width, height, align, hspace, vspace, border) • body, table atribut background - dláždění

  14. Odkazy 1 Odkaz: • Absolutní • Relativní • Na konkrétní místo nějaké stránky Odkaz na: • Webovou stránku • Obrázek • Obecný soubor (doc, zip, xls, ... - Otevřít x Uložit)

  15. Odkazy 2 • Párový tag:<a href=“http://www.seznam.cz“>Jdi na Seznam</a> • Obsahem tagu a může být i obrázek<a href=“http://www.seznam.cz“><img src=“sezn.jpg”></a> • Odkaz na obecný soubor <a href=“soubory/dopis.doc“>text ke stažení zde</a>

  16. Odkazy 3 Atribut target = "_blanc“odkaz se otevře do nového (dalšího) okna prohlížeče Odkaz na jiné místo v dokumentu: • označení místa <a name=“misto”></a> • skok na místo <a href=“#misto”>Běž na místo</a> • skok na místo z jiné stránky: <a href=“http://www.server.cz/stranka.html#misto”>Běž na místo</a> Pozn.: mailto:

  17. index.html index.html Provázání stránek na webu pomocí odkazů • Úvodní stránka se jmenuje index.html • Oba základní způsoby lze kombinovat a větvit Zpět Další

  18. Umístění stránek na Internet • Vlastní server • Webhosting • placený (ignum, O2, ...) • neplacený - freehosting (Sweb, Webpark, WZ, …), reklama

  19. Doporučené zdroje a nástroje • www.jakpsatweb.cz • JPEG Resampler • ColorScheme • Zen Garden • V různých prohlížečích • thimble.webmaker.org/ (Chrome)

  20. Použité zdroje Obrázky v prezentaci použité jsou dílem autora.

More Related