Inf Webová stránka, princip HTML a CSS. Výukový materiál Číslo projektu: CZ.1.07/1.5.00/34.0608 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím.

Prezentace na téma: "Inf Webová stránka, princip HTML a CSS. Výukový materiál Číslo projektu: CZ.1.07/1.5.00/34.0608 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím."— Transkript prezentace:

1 Inf Webová stránka, princip HTML a CSS

2 Výukový materiál Číslo projektu: CZ.1.07/1.5.00/34.0608 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Číslo materiálu: 07_02_32_INOVACE_17

3 Předmět: INF Ročník: 3. Jméno autora: Jan Mlčůch Škola: SPŠ Hranice Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jan Mlčůch Financováno z ESF a státního rozpočtu ČR. Anotace: Žák se seznámí se složením jedné webové stránky a jejím (X)HTML kódem. Dále s tagy pro tvorbu (X)HTML kódu a strukturou webové stránky. Klíčová slova: webová stránka, (X)HTML, tag Webová stránka

4 Složení (jedné) webové stránky  webová stránka a její (X)HTML kód je dokument ve formátu HTML (HyperText Markup Language) nebo v modernější podobě XHTML (eXtensible HTML)  HTML může obsahovat jen prostý text  nejsou v něm žádné obrázky a ani formátování textu  obsahuje ale pokyny (značky, tagy) pro prohlížeč, jak stránku zobrazit a kde na ní má zobrazit jaký objekt

5 (X)HTML  (X)HTML – značkovací jazyk  všechny příkazy pro formátování stránky jsou v jazyku HTML zaznamenány pomocí značek, tzv. tagů  značky vždy říkají, kde určitá vlastnost začíná a kde končí  dávají se do ostrých závorek <>  v koncové značce je lomítko Zápis v (X)HTML Znát značky HTML je důležité Zobrazení v prohlížeči Znát značky HTML je důležité

6 (X)HTML  značky se mohou vkládat jedna do druhé  vždy ta, které je blíže textu má větší vliv  např.: Styl nadpis 1 má značku  Přehled značek jazyka HTML  celý text se zobrazí stylem Nadpis 1 a navíc slovo jazyka bude kurzívou Přehled značek jazyka HTML

7 (X)HTML – struktura stránky  po založení webu je potřeba připravit potřebné značky pro vymezení základní části webové stránky: Titulek stránky, objeví se v záhlaví okna <link rel="stylesheet" type="text/css„ href="styly.css"...

8 (X)HTML – struktura stránky  celá webová stránka začíná a končí tagem  stránka je rozdělena do dvou oblastí, do hlavičky, která popisuje obsah stránky, a do oblasti těla stránky, kde je uveden vlastní kód stránky  v hlavičce jsou nejdříve tzv. metadata, která popisují obsah stránky  vždy musí tag charset určující znakovou sadu stránky (podle něj prohlížeče použijí správné kódování češtiny)  keywords obsahuje klíčová slova charakterizující stránku  metadat je mnoho a jejich používání umožňuje vyhledávačům snadnou orientaci v obsahu

9 (X)HTML – struktura stránky  tag obsahuje titulek stránky, který se objeví v záhlaví okna prohlížeče jako název otevřeného dokumentu  tag specifikuje cestu nečtení CSS stylů z vnějšího souboru se styly, ten se většinou jmenuje styly.css a je umístěn ve stejné složce jako uvedená stránka

10 Použité zdroje Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jan Mlčůch Financováno z ESF a státního rozpočtu ČR. ROUBAL, Pavel. Informatika a výpočetní technika pro střední školy : Teoretická učebnice. 1. vyd. Brno : CP Books, a. s., c2007. 102 s. ISBN 80-251-0761-2. Veškeré použité obrázky (kliparty) pocházejí z obsahu webu www.microsoft.office.com.