spse:pm3:html-uvod [wiki Avrio.cz]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
~~NOCACHE~~
~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1024x768~~
======Úvod HTML ======

=====HTML soubor =====
  * Textový soubor s příponou htm či html.
  * Obsahuje běžný text, který je doplněn tagy.
  * Tagy = značky (výrazy) jazyka HTML.
  * HTML soubor lze vytvořit v obyčejném textovém editoru, který ukládá neformátovaný text, např. v poznámkovém bloku.
  * Aby se vytvořený soubor otevíral v Internetovém prohlížeči, musí mít příponu htm či html.
  * Zařídíme to tak, že příponu souboru změníme - přejmenujeme.

=====HTML jazyk =====

  * Jazyk obsahující značky – tagy.
  * Tagy se uzavírají do lomených závorek, např.: <code html> <p> text odstavce </p></code>
  * Tagy říkají prohlížeči (Exploreru,Mozille, Opeře ...), jak má dané texty či objekty zobrazovat - interpretovat.
  * Většina tagů je párových, tzn. vyskytují se před textem i na jeho konci.

===== Tagy =====

  * Párové
    * Např.: **<b>** je začátek tučného textu, **</b>** je konec tučného textu.
    * První tag něco začíná a druhý to končí.
    * Lomítko znamená, že jde o uzavírací tag.
  * Nepárové
    * Např.: **<img>** je tag pro vložení obrázku. 
    * Jsou méně časté.

====Ukázka párového tagu ====
<code html>
<p>            text         </p> 
 ^               ^            ^
 |               |            |
začátek tagu   text    konec tagu

</code>

====Ukázka nepárového tagu ====
<code html>
<img src=“cesta\obrazek.jpg“>
       ^                ^
       |                |
Tag s parametry obrazový soubor
</code>

====Párové tagy – další příklady ====
  * <code html>
<html> </html>
<head> </head>
</code>

  * %%<html>%%  je začátek html souboru
  * %%</html>%% je konec html souboru
  * <head>  je začátek hlavičky
  * </head> je její konec

  * <code html> <body>; </body> </code>
  * <body> je začátek těla stránky
  * </body> je konec těla stránky

====Nepárové tagy – další příklady ====
  * **<img>** je tag pro obrázek ale nic jako </img> neexistuje
  * ** <br>**  je tag pro řádkový zlom ale nic jako </br> neexistuje

=====Struktura www stránky =====
  * Doctype (typ dokumentu)
  * Head (hlavička)
  * Body (tělo stránky)

====Doctype ====
Tyto údaje např. řeknou prohlížeči:
  * v jaké verzi HTML je stránka napsána.
  * jaký je typ DTD (Document Type Definition).
  * DTD je jinými slovy návod pro prohlížeč zpracovávající dokument
---->
===Doctype – ukázka ===
<code html>
<!DOCTYPE html>
</code>

[[https://www.w3.org/QA/2002/04/valid-dtd-list.html|Starší verze HTML]]
<----
====Head ====
  * Hlavička je uzavřena do tagů
  * <code html><head>... </head> </code>
  * Je v ní spousta užitečných informací.
  * Žádná z nich se ale nezobrazí přímo ve výsledné stránce
  * Přesto mají informace uvedené v hlavičce velký vliv zejména pro vyhledávání stránky.

---->
Hlavička obsahuje zpravidla dvě základní informace:

  * Název stránky. Je vložen mezi tagy:
  * <code html><title>...</title></code>
  * Název stránky se zobrazí v horní liště prohlížeče.

  * Informace o kódování. Ta je uvozena tagem:
  * <code html><meta ..../></code>
<----
---->
===Head - ukázka ===
<code html>
<head>
<title>Toto je moje stránka</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<meta name="description" content="Něco o mně - moje stránky" /> 
</head>
</code>
<----
====Body ====
  * Tady je konečně všechno to, co se na naší stránce zobrazí.
  * Tělo je vloženo mezi párové tagy:
  * <code html><body>...</body></code>

=====Ukázka HTML kódu www stránky =====
<code html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="Něco o mně - moje stránky" />
<title>Toto je moje stránka</title>
</head>
<body>
<h1>Úvod</h1>
<p>Na těchto stránkách najdete všechno,
co o mně chcete vědět.</p>
</body>
</html>
</code>
==== Ukázka téže stránky v prohlížeči ====

{{:spse:pm3:pasted:20200922-200959.png}}
====== Shrnutí ======

  * **<html>** začíná dokument
  * **</html>** končí dokument
  * **<head>** a** </head>** začíná a končí hlavičku, která se sice nezobrazuje na stránce, ale obsahuje některé důležité údaje, například:
    * **<title>** a **</title>** - titulek vymezující název dokumentu
  * **<body>** a **</body>**, (co je mezi <body> a </body>, se bude zobrazovat.)
    * **<body>** je tag, kterým začíná vlastní tělo dokumentu
    * (angl. body = tělo).


<notes>
=== Zdroje ===
https://www.dumy.cz/material/49715-zaklady-tvorby-www-stranky-v-html-kodu-uvod
</notes>