Gymn zium obchodn akademie a jazykov kola s pr vem st tn jazykov zkou ky hodon n
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

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


  • 33 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

Publikování na Internetu

  • Vytvoření stránek

  • Umístění stránek na webový server


Zp soby vytv en www str nek

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


Z klady jazyka html

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é


Z kladn struktura str nky

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


Tagy atributy

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


Barvy

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)


Ne slovan a slovan seznam

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


Tabulky 1

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>


Tabulky 2

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)


Tabulky 3

Tabulky 3

Atributy pro tr, th a td

  • align (left,center,right)

  • valign (top, bottom, middle)

  • bgcolor

  • width (absolutně, relativně, px,%)

  • colspan

  • rowspan


Vol n soubor v html

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


Obr zky

Obrázky

Nepárový tag img

  • img(src, alt, title,width, height, align, hspace, vspace, border)

  • body, table atribut background - dláždění


Odkazy 1

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)


Odkazy 2

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>


Odkazy 3

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:


Prov z n str nek na webu pomoc odkaz

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ší


Um st n str nek na internet

Umístění stránek na Internet

  • Vlastní server

  • Webhosting

    • placený (ignum, O2, ...)

    • neplacený - freehosting (Sweb, Webpark, WZ, …), reklama


Doporu en zdroje a n stroje

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)


Gymn zium obchodn akademie a jazykov kola s pr vem st tn jazykov zkou ky hodon n

Použité zdroje

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


  • Login