Tvorba webových stránek 1

HTML  Hyper Text Markup Language = hypertextový značkovací jazyk  Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy  HTML soubor je obyčejný text obalený značkami = tagy.  Programy pro tvorbu: 1) textové editory 2) HTML editory  Soubor s koncovkou *.htm nebo *.html

2/17

Tagy = značky  Tagy určují, jak bude text vypadat (jakou bude mít formu).  Všechny tagy jsou uzavřeny v .

 Co není v ostrých závorkách, je text, který se bude zobrazovat.  Typy: párové / nepárové

Symbolicky zapsáno: text a zase text a zase text...

Příklad: Tučný text = Tučný text

3/17

Ukázka kódu Kód: Tučný text, text kurzívou, podtržený

Výsledek: Tučný text, text kurzívou, podtržený

4/17

Obecná syntaxe HTML  Nezáleží na velikosti písem, je totéž co  V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a česká diakritika.  Tagy, které prohlížeč nezná, jako by nebyly.  Na začátku tagu nesmí být mezera, třeba < br> je špatně.  Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera.  Konec řádku ve zdroji se chápe jako mezera.  Speciální znaky typu © se do zdroje zadávají jako posloupnost znaků &něco; například © , pevná mezera je  

 Poznámka se do zdroje vkládá mezi značky

5/17

Šablona dokumentu

//začátek dokumentu



//začátek hlavičky, nezobrazuje se, ale obsahuje důležité informace





//konec hlavičky

//tělo dokumentu – bude se zobrazovat!! ...



//konec dokumentu

6/17

Text tučné písmo

tučné písmo

kurzíva

kurzíva

podtržení textu

podtržení textu

horní <sup> index

horníindex

dolní <sub> index

dolníindex

<strike> přeškrtnutý text přeškrtnutý text


zalomení textu (enter)

 

mezera

7/17

Text - udává typ, barvu a velikost

Atributy: face="" typ písma (Arial, Courier New, Verdana, Garamond, Times New Roman,…) color="" barva písma (red, green, blue, silver, lime, yellow, black,…) size="" velikost písma (číslo od 1 do 7) velké modré písmo Times

velké modré písmo Times 8/17

Odstavce - Bloky odstavec

odstavec

Atribut align: align="left" zarovnání vlevo align="right" zarovnání vpravo

align="center" zarovnání na střed align="justify" zarovnání do bloku

Např.

zarovnání na střed

zarovnání na střed 9/17

Odstavce - Nadpisy

velikost h1

velikost h1

velikost h2

velikost h2

velikost h3

velikost h3

velikost h4

velikost h4

velikost h5

velikost h5

velikost h6

velikost h6

velikost h7

velikost h7

10/17

Obrázky

Atributy: src=" " zdrojová cesta k souboru, udává se absolutně nebo relativně width=" " šířka obrázku v px height=" " výška obrázku v px alt=" " alternativní popis, pokud se obrázek nezobrazí title=" " popisek, který se zobrazí po najetí myši na obrázek align=" " umístění obrázku vůči textu (left - vlevo, right - vpravo)

11/17

Odkazy seznam.cz

Atributy: href=" " cíl odkazu target="_blank" – otevře se v novém okně, cílový rám

12/17

Seznamy - odrážky

• odrážka


 odrážka


• odrážka


 odrážka

Atributy: type="disc" – puntík  type= "circle" – kolečko  type= "square" – čtvereček 

13/17

Seznamy - číslovaný seznam

1. položka


1. položka


2. položka


2. položka

Atributy: type="A" - Velká písmena type="a" - malá písmena type="I" - Římské velké type="i" - Římské malé

14/17

Tabulky

//začátek tabulky //začátek řádku



//buňka



//buňka

Výsledek:

A B C D





//konec řádku

A	B
C	D

//konec tabulky

15/17

Tabulky Atributy : border="1" – šířka orámování (číslo v px)

bordercolor="black" – barva orámování Atributy /

: bgcolor="blue" – výplň řádku / buňky align="center" – vodorovné zarovnání (left, center, right) valign="top" – svislé zarovnání (top, middle, bottom) Atributy

: rowspan="3" – svislé sloučení tří buněk colspan="2" – vodorovné sloučení dvou buněk 16/17 Zdrojové informace  www.jakpsatweb.cz  http://www.w3schools.com  http://www.tvorba-webu.cz/html/  http://validator.w3.org/ 17/17 × Report "Tvorba webových stránek" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close