Praktické příklady

Rozvržení stránky div
Rozvržení stránky mřížkou
Webový formulář můj

2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je soubor dat zobrazovaný určitým webovým prohlížečem(Chrome,InternetExplorer,Bing atd.).
Je součástí nejrozšířenější aplikace WWW = World-Wide-Web, která má za úkol poskytovat informace uživatelům. Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language). Je to text, ve kterém se vyskytují řídící značky = tagy. HTML dokument je tedy takový zdrojový kód webové stránky.

Struktura HTML dokumentu

HTML dokument je rozdělen na dvě části - hlavičku (head), která obsahuje informace pro internetový prohlížeč a tělo (body), které tvoří vlastní obsah webové stránky.
Hlavička dokumentu se nezobrazuje, je většinou krátká a obsahuje např. titulek okna nebo použité kódování. Body (tělo) obsahuje veškerý zobrazovaný obsah stránky. Tělo (body) je rozděleno na jednotlivé odstavce, proloženo nadpisy a podnapisy. Nadpisů může být až 6 úrovní.

Význam některých HTML značek

značka (Ne)Párová význam
<html> P ohraničuje html dokument
<head> P hlavička dokumentu
<body> P tělo dokumentu
<h1> P nadpis nejvyšší úrovně
<p> P odstavec
<br> N tvrdé odřádkování
<hr> N horizontální čára

Pokud potřebujeme uspořádat text do řádků a sloupců, můžeme použít HTML tabulku - viz. výše. Jiný způsob uspořádání textu je tzv. "předformátovaný text" :

 
-----------------------------------------------
značka           význam
-----------------------------------------------            
<html>  párová  ohraničuje html dokument
<head>  párová  hlavička dokumentu
<body>  párová  tělo dokumentu
<br>    nepárová   tvrdé odřádkování
-----------------------------------------------

Odkazy

Jak se dělá odkaz

Odkaz (hyperlink) se vytváří pomocí značky <a>, má povinnou počáteční i koncovou značku. Text odkazu (text, na který bude návštěvník klikat) se nachází uvnitř značek <a>.
Cíl odkazu (adresa) se zapisuje pomocí atributu href. Href obsahuje adresu, podle které prohlížeč pozná, na jakou stránku se má přepnout, když se na odkaz klikne. Pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru.
Atribut name nás odkazuje na určitou kapitolu v dokumentu.
Atribut target otevře soubor v nové kartě.

  • Absolutní adresa - http://www.seznam.cz
  • Relativní adresa (soubor je ve stejném adresáři) - soubor.html
  • Příklady odkazů

    Odkaz na portál seznam.cz
    Odkaz na jeden článek na seznamu.
    Odkaz na pokusný dokument (je ve stejné složce)
    Odkaz na dlouhý dokument (je ve stejné složce)
    Odkaz na 1.kapitolu dlouhého dokumentu(je ve stejné složce)
    Odkaz na 99.kapitolu dlouhého dokumentu(je ve stejné složce)
    Tento dokument se otevře v novém okně nebo v nové kartě
    Tento dokument se otevře v novém okně jménem "sunka"
    Tento dokument se otevře v novém okně nebo v nové kartě
    Tento dokument se otevře v novém okně jménem "sunka"

    Obrázky

    Jak se vloží obrázek

    Tady svými slovy...

    Příklady obrázků

    Mauris metus. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer imperdiet lectus quis justo. Nullam faucibus mi quis velit. Fusce suscipit libero eget elit. Fusce aliquam vestibulum ipsum. Vivamus porttitor turpis ac leo. Nunc dapibus tortor vel mi dapibus sollicitudin. Praesent in mauris eu tortor porttitor accumsan. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. In dapibus augue non sapien. Duis condimentum augue id magna semper rutrum. Nullam faucibus mi quis velit.

    Etiam posuere lacus quis dolor. Fusce consectetuer risus a nunc. Nulla pulvinar eleifend sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Nulla pulvinar eleifend sem. Et harum quidem rerum facilis est et expedita distinctio. Vivamus porttitor turpis ac leo. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Quisque tincidunt scelerisque libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Mauris dictum facilisis augue. Nullam dapibus fermentum ipsum. Etiam bibendum elit eget erat. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. In rutrum. Phasellus et lorem id felis nonummy placerat.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam sed tellus id magna elementum tincidunt. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nam sed tellus id magna elementum tincidunt. Donec quis nibh at felis congue commodo. Fusce suscipit libero eget elit. Duis viverra diam non justo. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Mauris elementum mauris vitae tortor. In convallis. Etiam commodo dui eget wisi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Suspendisse nisl.