praktické př

rozvržení stránky div
rozvržení stránky mřížkou
Folmuláře: v.1 , muj

tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je označení pro soubor dat zobrazovaný uživateli webovým prohlížečem

Struktura HTML dokumentu

Každý HTML dokument se ohraničuje párovou značkou <html> a </html>.
Dále dokument obsahuje hlavičku a tělo. Hlavička obsahuje title (název dokumentu).
Tělo obsahuje vše ostatní, jako jsou, nadpisy, odstavce, obrázky, texty, tabulky...
Nadpisy mají 6 úrovní. Odstavce označujeme párovou značkou <p> a </p>.
Počet odstavců v těle není omezený.

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

značka ne/párová význam
<html>  párová  ohraničuje html dokument
<head>  párová  hlavička dokumentu
<body>  párová  tělo dokumentu
<p>  párová  odstavec
<br>  nepárová  tvrdé odřádkování
<pre>  párová  předformátovaný text

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     ne/párová        význam
 ..............................................................
       <html>      párová     ohraničuje html dokument
       <head>      párová     hlavička dokumentu

Odkazy

Jak se dělá odkaz

odkaz se ozančujeme párovou značkou <a>

do značek napíšeme atribut href (hypertext reference) rovná se a do uvozovek link na určitou stránku, dostaneme funkční odkaz

také máme atribut target, který nám otevře stránku v novém okně, s jménem podle toho co napíšeme za rovnítko v uvozovkách

pokud se chceme odkazovat na kapitolu v dokumentu do odkazu připíšme atribut name a název kapitoly, poté jako odkaz napíšeme název dokumentu křížek a za něj název kapitoly

Příklady odkazů

Odkaz na portál Seznam.cz
Odkaz na článek.cz
Odkaz na poksuný dokument
Odkaz na dlouhý dokument Odkaz na 1. kapitolu dlouhého dokumentku
Odkaz na 99. kapitolu dlouhého dokumentku
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "nya".
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "nya".

Obrázky

jak se vloží obrázek

popíšu slovy

Příklady

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam neque. Aenean placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet lectus quis justo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Fusce consectetuer risus a nunc. Etiam posuere lacus quis dolor. Curabitur bibendum justo non orci. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.


Duis condimentum augue id magna semper rutrum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Aliquam id dolor. Integer tempor. Proin in tellus sit amet nibh dignissim sagittis. Etiam quis quam. Sed ac dolor sit amet purus malesuada congue. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam faucibus mi quis velit. Etiam commodo dui eget wisi. In enim a arcu imperdiet malesuada. Nulla quis diam. In convallis.


Praesent in mauris eu tortor porttitor accumsan. Mauris metus. Mauris dictum facilisis augue. Integer lacinia. Proin mattis lacinia justo. Vivamus ac leo pretium faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Etiam neque.