Tvorba webových stránek

Úvod

Co je to webová stránka

Webová stránka je informační dokument, který se zobrazuje v aplikaci zvané webový klient (Firefox, Chrome, Opera, Explorer, ...). Dokument je psaný ve značkovacím jazyce HTML a kromě textu a obrázků obsahuje také odkazy na jiné dokumenty. Webový klient tento dokument získá od webového serveru (apache, iis, ...), který trvale běží na nějaké adrese v Internetu.

Struktura webové stránky

Celý html dokument je uzavřen do párového tagu <html>. Skládá se z hlavičky a těla. V hlavičce jsou uvedeny různé informace o stránce, např. kdo stránku vytvořil, jeké používá kódování českých znaků, jaká jsou na stránce klíčová slova pro internetové vyhledávače apod.

Tělo určuje obsah dokumentu, který je rozdělen do odstavců textu a ty jsou nadepsány nadpisy. Nadpisy mají různé úrovně, nadpis nejvyšší úrovně se zpravidla na stránce vyskytuje jen jednou na začátku. Úrovní nadpisů může být až šest.

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

značkaP/N význam
<head> P ohraničuje hlavičku stránky
<p> P odstavec
<h1> P hlavní nadpis 
head   P   ohraničuje hlavičku stránky
p      P   odstavec       (paragraph)
h1     P   hlavní nadpis  (heading)
br     N   odřádkování    (break)
hr     N   vodorovná čára (horizontal row)
a      P   odkaz (anchor)

Odkazy

Jak se dělá odkaz

ÚKOL - 23.10.2023
čas: 30 minut

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na serveru sport.cz
Odkaz na pokusný dokument, který je ve stejném adresáři.
Odkaz na pokusný dlooouhý dokument
Odkaz na začátek tohoto dokumentu
Odkaz na první kapitolu dlooouhého dokumentu
Odkaz na poslední kapitolu dlooouhého dokumentu
Tento dokument se otevře v novém okně/záložce
Tento dokument se otevře v novém okně/záložce
Tento obrázek se otevře v okně s názvem ZOO
Tento obrázek se otevře v okně s názvem ZOO
Tento obrázek se otevře v okně s názvem ZOO
Webový formulář
Webový formulář otevřený v novém okně

Rozvržení webové stránky 1. (pomocí bloků div)
Rozvržení webové stránky 2. (webovou mřížkou)
RWD (Responsive web Design)

Obrázky

Fusce wisi. Nunc auctor. Mauris tincidunt sem sed arcu. Nam quis nulla. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Quisque porta. Curabitur sagittis hendrerit ante. Maecenas libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tellus. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.

Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Quisque porta. Mauris dictum facilisis augue. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? In rutrum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Integer vulputate sem a nibh rutrum consequat. Curabitur bibendum justo non orci. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Nunc auctor. Integer vulputate sem a nibh rutrum consequat.



Stránku spravuje Pokusný Žák FK2