jazyk html
Download
Skip this Video
Download Presentation
Jazyk HTML

Loading in 2 Seconds...

play fullscreen
1 / 36

Jazyk HTML - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

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>

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 ' Jazyk HTML' - adem


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
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” />

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

slide17
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
ad