Tvorba webových stránek

Rozměr: px

Začít zobrazení ze stránky:

Download "Tvorba webových stránek"

Vendula Urbanová
před 8 lety
Počet zobrazení:

1 Tvorba webových stránek 1

2 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

HTML soubor je obyčejný text obalený značkami = tagy.

3 Tagy = značky Tagy určují, jak bude text vypadat (jakou bude mít formu). Všechny tagy jsou uzavřeny v <ostrých závorkách>. Co není v ostrých závorkách, je text, který se bude zobrazovat. Typy: párové / nepárové Symbolicky zapsáno: <tag> text </tag> a zase text <tag> a zase text... Příklad: <b>tučný text</b> = Tučný text 3/17

Co není v ostrých závorkách, je text, který se bude zobrazovat.

4 Ukázka kódu Kód: <b>tučný text</b>, <i>text kurzívou</i>, <u>podtržený</u> Výsledek: Tučný text, text kurzívou, podtržený 4/17

5 Obecná syntaxe HTML Nezáleží na velikosti písem, <body> je totéž co <BODY> 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

Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. Konec řádku ve zdroji se chápe jako mezera.

6 Šablona dokumentu <html> //začátek dokumentu <head> //začátek hlavičky, nezobrazuje se, ale obsahuje důležité informace <title> //vymezuje název dokumentu... </title> </head> //konec hlavičky <body> //tělo dokumentu bude se zobrazovat!!... </body> </html> //konec dokumentu 6/17

7 Text <b> tučné písmo </b> <i> kurzíva </i> <u> podtržení textu </u> horní <sup> index </sup> tučné písmo kurzíva podtržení textu horní index dolní <sub> index </sub> dolní index <strike> přeškrtnutý text </strike> přeškrtnutý text <br> zalomení textu (enter) mezera 7/17

index dolní <sub> index </sub> dolní index <strike> přeškrtnutý

8 Text - <font> <font> udává typ, barvu a velikost </font> 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) <font face="times New Roman" size="5" color="blue"> velké modré písmo Times</font> velké modré písmo Times 8/17

green, blue, silver, lime, yellow, black, ) size="" velikost písma (číslo od 1 do 7) <font

9 Odstavce - Bloky <p> odstavec </p> 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ř. <p align="center">zarovnání na střed</p> zarovnání na střed 9/17

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

10 Odstavce - Nadpisy <h1>velikost h1</h1> <h2>velikost h2</h2> <h3>velikost h3</h3> <h4>velikost h4</h4> <h5>velikost h5</h5> <h6>velikost h6</h6> <h7>velikost h7</h7> velikost h1 velikost h2 velikost h3 velikost h4 velikost h5 velikost h6 velikost h7 10/17

<h6>velikost h6</h6> <h7>velikost h7</h7> velikost h1 velikost

11 Obrázky <img src="zdroj/obrazku.jpg" width="200px" height="200px" alt="alt. popis" title="popisek"> 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

width=" " šířka obrázku v px height=" " výška obrázku v px alt=" " alternativní popis, pokud se obrázek

12 Odkazy <a href=" Atributy: href=" " cíl odkazu target="_blank" otevře se v novém okně, cílový rám 12/17

13 Seznamy - odrážky <ul> <li> odrážka </li> <li> odrážka </li> </ul> odrážka odrážka Atributy: type="disc" puntík type= "circle" kolečko type= "square" čtvereček 13/17

14 Seznamy - číslovaný seznam <ol> <li> položka </li> <li> položka </li> </ol> 1. 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

15 Tabulky <table> //začátek tabulky Výsledek: <tr> //začátek řádku A B <td>a</td> //buňka C D <td>b</td> //buňka </tr> <tr> //konec řádku <td>c</td> <td>d</td> </tr> </table> //konec tabulky 15/17

16 Tabulky Atributy <table>: border="1" šířka orámování (číslo v px) bordercolor="black" barva orámování Atributy <tr> / <td>: bgcolor="blue" výplň řádku / buňky align="center" vodorovné zarovnání (left, center, right) valign="top" svislé zarovnání (top, middle, bottom) Atributy <td>: rowspan="3" svislé sloučení tří buněk colspan="2" vodorovné sloučení dvou buněk 16/17

zarovnání (left, center, right) valign="top" svislé zarovnání (top, middle, bottom)

17 Zdrojové informace /17

Podobné dokumenty

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu