Jazyk html
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Jazyk HTML PowerPoint PPT Presentation


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

Jazyk HTML. Zdrojový kód. Elementy <n ázev parametry >obsah</n ázev > př. <b> důležité </b> <n ázev parametry /> př. <img src=“xx.jpg” width=“300” />. Parametry př. < td colspan= “3”>Leden</td> Hodnoty př. <img src=“xx.jpg” width=“300” /> <body bgcolor=“red”></body>

Download Presentation

Jazyk HTML

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


Jazyk html

Jazyk HTML


Zdrojov k d

Zdrojový kód

  • Elementy

    <název parametry>obsah</název>

    př. <b>důležité</b>

    <název parametry />

    př. <img src=“xx.jpg” width=“300” />


Jazyk html

  • Parametry

    př. <td colspan=“3”>Leden</td>

  • Hodnoty

    př. <img src=“xx.jpg” width=“300” />

    <body bgcolor=“red”></body>

    <a href=“http://www.seznam.cz”>

    </a>


Rodi e a potomci

Rodiče a potomci

  • Př.

    <p>...<b>...</b>...</p> SPRÁVNĚ

    <p>...<b>...</p></b> ŠPATNĚ


N vrh webu

Návrh webu

  • Proč stránky tvořím?

  • Pro koho?

  • Kolik stránek budu potřebovat? Jaká bude struktura?

  • Vymyslet systém pojmenování


Z kladn sti str nky

Základní části stránky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ..... označení typu dokumentu a verze HTML

<html>..... začátek textu ve formátu HTML

<head>..... začátek hlavičky

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<meta name="generator" content="PSPad editor, www.pspad.com">

<title>titulek</title>..... popis zobrazovaný v titulku okna

</head>..... konec hlavičky

<body>..... začátek zobrazovaného obsahu stránky

obsah stránky

</body>..... konec zobrazovaného obsahu stránky

</html>..... konec textu ve formátu HTML


Tag html

Tag HTML

  • Označuje začátek a konec dat tvořících webovou stránku

    <html>

    ..... dokument HTML

    </html>


Tag head

Tag HEAD

  • Vymezuje hlavičku webové stránky, která obsahuje informace o obsahu stránky

    <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250">..... meta informace

    <meta name="generator" content="PSPad editor, www.pspad.com">..... meta informace

    <title>titulek</title> >..... popis zobrazovaný v titulku okna

    </head>


Tag body

Tag BODY

  • Obsahuje vše, co se objeví uvnitř okna prohlížeče

    <body>

    obsah stránky

    </body>


Koment e

Komentáře

  • Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich nedozvíme

    <!--text komentáře -->


Nadpisy

Nadpisy

  • V HTML jsou definovány nadpisy různých úrovní, může jich být 6

    <h1>text nadpisu</h1>


Odstavce

Odstavce

  • Prohlížeče ignorují všechny mezery a znaky konce odstavce, které jsou ve zdrojovém kódu stránky, proto je nutné přesně označit, kde mají odstavce být

    <p>textodstavce</p>


Od dkov n

Odřádkování

  • Text v odstavci se automaticky zalamuje podle velikosti okna. Když je třeba, aby text začínal na novém řádku, použijeme

    <br />


Form tov n textu

Formátování textu

  • Tučné písmo

    <b>text</b>

  • Kurzíva

    <i>text</i>

  • Podtržené písmo

    <u>text</u>

  • Neproporcionální písmo

    <tt>text</tt>


Form tov n textu1

Formátování textu

  • Přeškrtnutí

    <strike>text</strike>

  • Zvětšení a zmenšení písma o 1 bod

    <big>text</big>

    <small>text</small>


Form tov n textu2

Formátování textu

  • Horní index

    <sup>text</sup>

  • Dolní index

    <sub>text</sub>


Jazyk html

URL

  • URL (Uniform Resource Locator) – jednoznačné umístění zdroje

    http://www.stranky.cz/abc/xxx.html

    Protokol

    https://www.stranky.cz

    ftp://ftp.stranky.cz/pub/prog.exe

    mailto:[email protected]

    file:///c|/cesta/soubor.html


Absolutn adresa url

Absolutní adresa URL

  • Obsahuje kompletní cestu k souboru, včetně protokolu, názvu serveru, cesty a názvu souboru

  • Používá se vždy, když odkazuji na soubor z jiného serveru nebo když adresa používá jiný protokol než http.


Relativn adresa url

Relativní adresa URL

  • Popisuje umístění požadovaného souboru s odkazem na umístění souboru, který obsahuje adresu URL samotnou

  • Používá se pro soubory na stejném serveru => jednodušší zápis, funguje, i když stránky přesuneme


Relativn adresa url1

Relativní adresa URL

  • Př. xxx.html ... soubor je ve stejném adresáři jako stránka

    obrazky/deticky.jpg ... soubor je v podadresáři obrazky (aktuálního adresáře)

    ../info/data.html ... soubor je v adresáři na vyšší pozici ve stromové struktuře


Obr zky

Obrázky

  • formát jpg, gif, png

  • velikost a rozlišení

  • rychlost načítání

  • průhlednost

  • animace


Jak z skat obr zky

Jak získat obrázky

  • Koupit nebo stáhnout už připravené

  • Digitalizovat nebo naskenovat fotky

  • Vyfotit digitálním fotoaparátem

  • Nakreslit v grafickém editoru

  • Grafické editory:

    Adobe Photoshop, Gimp, Irfan View, Paint Shop Pro atd.


Vlo en obr zku na str nku

Vložení obrázku na stránku

  • <img src=“xxx.jpg” ... />

  • další parametry:

    alt ... alternativní text

    width ... šířka

    height ... výška


Zarovn v n obr zk

Zarovnávání obrázků

  • vlastnost align, hodnoty left, right, top, middle, bottom

  • Ukončení obtékání textu

    <br clear=“all”>

    další hodnoty left, right


Mezery kolem obr zk

Mezery kolem obrázků

  • Parametry hspace, vspace

  • Zavržené parametry, lépe nastavit pomocí stylů


Horizont ln linka

Horizontální linka

<hr />

  • Atributy:

    • size=“x”.....tloušťka čáry, v pixelech

    • width=“x” .....délka čáry, v pixelech nebo v % šířky okna

    • align ..... zarovnávání

    • noshade ..... čára bez stínu


Odkazy

Odkazy

  • Umožňují přecházet z jedné stránky na druhou, spouštět video nebo hudbu, stahovat soubory pomocí ftp atd.

    <a href=“stranka.html”>název odkazu</a>

  • Jiné formáty souboru:prohlížeč má určený program, jimž se soubor otevírá.


Odkazy1

Odkazy

  • <a href=“soubor.html" title="titulek">text odkazu</a>

  • E-mailová adresa jako odkaz

    <a href=“mailto:[email protected]"> text odkazu</a>

  • <a href=“soubor.html" title=“titulek"><img src=“obrazek.jpg”></a>


Odkazy2

Odkazy

  • vlastnost target

    Př.

    <a href=“stranka.html” target=“okno”>název odkazu</a>

    <a href=“stranka.html” target=“_blank”>název odkazu</a>


Odkazy3

Odkazy

  • Výchozí cíl odkazů na stránce

    <base target=“okno” />

    Pozn. <base href=“www.gop.pilsedu.cz/vt/vt22” />


Z lo ky

Záložky

  • Lze odkazovat na jednotlivé části dokumentu

  • Definice záložky: <a name=“kap1”>Kapitola 1</a>

  • Odkaz na záložku <a href=„#kap1">Kapitola 1 </a>

    Pozn. Je možné odkazovat i na záložky umístěné v jiném dokumentu, např. <a href=“soubor.html#kap1">text odkazu</a>


Seznamy

Seznamy

  • Nečíslovaný seznam

    <ul>

    <li></li>

    <li></li>

    </ul>


Seznamy1

Seznamy

  • Číslovaný seznam

    <ol>

    <li></li>

    <li></li>

    </ol>


Seznamy2

Seznamy

  • Definiční seznamy

    <dl>

    <dt>Pojem</dt>

    <dd>Vysvětlení</dd>

    </dl>


Tabulky

Tabulky

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

Pozn. <th></th>… záhlaví tabulky


Tabulky1

Tabulky

  • Rámeček tabulky BORDER

  • Slučování buněk COLSPAN, ROWSPAN

  • Velikost buněk WIDTH

  • Odsazení textu v buňkách CELLPADDING

  • Vzdálenost mezi buňkami CELLSPACING


  • Login