2. HTML - základní struktura

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_02

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - základní struktura

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Pochopení základní struktury HTML souborů

Klíčová slova: html, head, body, title, meta, link, style, script, hlavička dokumentu, tělo dokumentu

Metodické zhodnocení: Žáci pochopí základní strukturu HTML souborů

Ověřeno: 10. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

2.1 HTML - základní struktura (studijní text)

Mezi základní značky vymezující strukturu HTML souboru patří: <HTML>, <HEAD>, <BODY>.

HTML dokument

<HTML>

  • značkami <HTML> a </HTML> se vymezuje celý HTML soubor a jsou nadřízené všem ostatním značkám
  • každý HTML soubor musí tedy začínat a končit těmito značkami
  • HTML dokument se skládá ze dvou částí:
    • hlavičky (záhlaví)
    • těla

Hlavička (záhlaví) dokumentu

<HEAD>

  • značkami <HEAD> a </HEAD> se vymezuje tzv. hlavička, která se v prohlížeči nezobrazuje (netvoří obsah),
  • jsou podřízené značce <HTML> a </HTML>,
  • slouží pro nastavení webové stránky pro webový prohlížeč,
  • obsahuje další podřízené značky: TITLE, LINK, META, STYLE, SCRIPT.

<TITLE>

  • titulek webové stránky (zobrazí se v titulkovém pruhu okna nebo panelu prohlížeče)
<title>Titulek webové stránky</title>

<LINK>

  • slouží pro propojení s jiným souborem, nejčastěji CSS stylem
  • má atributy: rel, type, href
<link rel="stylesheet" type="text/css" href="soubor.css">

<STYLE>

  • slouží pro zapsání CSS stylu
<style>CSS stylopis</style>

<SCRIPT>

  • slouží pro zapsání skriptu jazyka JavaScript
<script>skript jazyka JavaScript</script>

Tělo HTML dokumentu

<BODY>

  • značky <BODY> a </BODY> se vymezuje samotné tělo webové stránky, tudíž veškerý obsah, který se zobrazí v prohlížeči,
  • jsou podřízené značce <HTML> a </HTML>.

Příklad základní struktury HTML souboru

<HTML>
  <HEAD>
    <TITLE>Moje stránky</TITLE>
  </HEAD>
  <BODY>
    <H1>Vítejte</H1>
  </BODY>
</HTML>

2.2 HTML - základní struktura (cvičení)

Úkol

  • Vytvořte nový HTML soubor se základní strukturou.
  • Upravte hlavičku HTML souboru podle následujícího klíče:
    • titulek bude obsahovat text "Moje první webová stránka".
  • Do těla HTML souboru opište následující text:

  • Soubor uložte do složky CV02 ve složce WWW pod názvem index.html.