gymn zium obchodn akademie a jazykov kola s pr vem st tn jazykov zkou ky hodon n
Download
Skip this Video
Download Presentation
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín

Loading in 2 Seconds...

play fullscreen
1 / 21

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


  • 72 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín' - shadi


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)
slide21

Použité zdroje

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

ad