Tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je informační dokument, který může zobrazit nějaký webový klient (Firefox, Chrome, Opera, Explorer, elinks, ...). O stránku klient většinou žádá a obdrží ji od webového serveru (Apache, IIS, ...), což je program, který běží na nějaké adrese v Internetu. Zdrojový kód webové stránky se zapisuje značkovacím jazykem HTML (HyperText Markup Language).

Struktura HTML dokumentu

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
<html> P ohraničuje   celý   html dokument
<meta> N obsahuje různé informace
<title> P titulek
<head> P hlavička dokumentu
<body> P tělo dokumentu
<p> P odstavec
<h1> P hlavní nadpis
html    P     ohraničuje celý html dokument
p       P     odstavec 
h1      P     nadpis nejvyšší úrovně
br      N     odřádkování
hr      N     vodorovná čára

Odkazy

Jak se dělá odkaz

ÚKOL ZADANÝ 17.10.2023
čas: 30 minut

Příkladu odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na seznamu
Odkaz na pokusný dokument ve stejné složce
Odkaz na dlooouhý dokument ve stejné složce
Odkaz na 1.kapitolu dlouhého dokumentu
Odkaz na 99.kapitolu dlouhého dokumentu
Tento dokument se otevře v novém okně
Tento dokument se otevře v novém okně
Tento obrázek se otevře v okně blabla
Tento obrázek se otevře v okně blabla
Tento obrázek se otevře v okně blabla
Webový formulář
Webový formulář otevřený v novém okně pomocí window.open()

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


Obrázky

Morbi leo mi, eget tristique non, rhoncus non leo. Mauris metus. Integer in sapien. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Pellentesque ipsum. Praesent id justo in neque elementum ultrices. Proin in tellus sit amet nibh dignissim sagittis. Integer imperdiet lectus quis justo. Aliquam id dolor. Etiam dictum tincidunt diam. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nam sed tellus id magna elementum tincidunt. Fusce nibh. Nullam at arcu a est sollicitudin euismod.

Morbi leo mi, eget tristique non, rhoncus non leo. Mauris metus. Integer in sapien. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Pellentesque ipsum. Praesent id justo in neque elementum ultrices. Proin in tellus sit amet nibh dignissim sagittis. Integer imperdiet lectus quis justo. Aliquam id dolor. Etiam dictum tincidunt diam. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nam sed tellus id magna elementum tincidunt. Fusce nibh. Nullam at arcu a est sollicitudin euismod.



stránku spravuje pokusný žák G2