2. Ročník - Tvorba webových stránek

Základy

Co je web

=web, míněno jako pavučina, =hypertextový dokument s příponou HTML (podobně jako MW dokumnety s příponou DOC), je přenášen do prohlížeče zadáním jeho URL tj. http://

Struktura HTML dokumentu

Dokument je ohraničen html(značkovací jazyk pro tvorbu webu). Začíná se s typem dokumnetu nebo-li doctype, pak následuje metadata. Pro většinu html dokumentů se píše utf-8, který zahrnuje data všech symbolů a znak. Rozděluje se na hlavičku(head) a tělo(body). Hlavičkou se začíná s nadpisy a ůvod. Tělo je obsah stránky.

Význam HTML značek

<html> párová ohraničuje html dokument
<head> párová hlavička dokumentu
<body> párová tělo dokumentu

značka	(Ne)párová	význam
<html>	P	ohraničuje html dokument
<head>	P	hlavička dokumentu
<body>	P	tělo dokumentu
<p>	P	odstavec
<br>	N	tvrdé odřádkování

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

Odkazy

Jak se dělá odkaz

Odkaz je zkrácená stránka, která po kliknutí vás přesune na danou stránku v prohlížeči. Tagem <a href> a url stránky

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden odkaz na seznamu

Odkaz na pokusný 1. dokument (ve stejné složce)
Odkaz na dlouhý 2. dokument
Odkaz na 1.kapitola dlouhý dokument
Odkaz na pokus.css
Odkaz na Index.css

Tento dokument1 se otevře v novém okně nebo kartě
Tento dokument2 se otevře v novém okně nebo kartě

Obrázky

Jak se vloží obrázek

Vložíme obrázek tagem <img> s attributem src s url obrázku nebo jménem. Lze použít png. jpg. gif. Pomocí break jdou dát obrázky pod sebe.

Příklady

Praesent id justo in neque elementum ultrices. Quisque tincidunt scelerisque libero.In enim a arcu imperdiet malesuada.

Curabitur sagittis hendrerit ante. Mauris tincidunt sem sed arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora

Vivamus luctus egestas leo. Integer pellentesque quam vel velit. Praesent dapibus. Mauris tincidunt sem sed arcu. Suspendisse nisl.