TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.

Prezentace na téma: "TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní."— Transkript prezentace:

1 TAGY A STRUKTURA WEBOVÉ STRÁNKY

2 web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní stránek: HTML, XHTML XML pro zobrazování na různých zařízeních PHP, ASP fungují na serverech, zajišťují dynamické stránky JavaScript, VisualBasicScript fungují na uživatelských počítačích, umožňují jednoduché úkoly a aplikace stránek

3 všechny příkazy HTML (tagy) jsou uzavřené ve špičatých závorkách dělí se na párové a nepárové párové tagy se vyskytují vždy ve dvou formách, vymezují oblast stránky, pro kterou tag platí … … … nepárové se vyskytují samostatně atributy jsou upřesňující nastavení tagů př: text psaný Arialem vel. 5

4 STRUKTURA STRÁNKY obsah hlavičky stránky obsah těla stránky = vlastní stránka

5 HLAVIČKA STRÁNKY tzv. metatagy slouží pro bližší informace o stránce TITULEK STRÁNKY

6 PŘÍKAZ – TYP PÍSMA Atribut tagu VýznamHodnoty colorbarva písmabarva sizevelikost písma1 až 7 (+-1 až 6) facedruh písmajména fontů oddělená čárkami

7 Příklad: tato sekce se ve stránce zobrazí červeným písmem Monotype Corsiva vel. 5 BARVY: anglický název red, pink, navy, … RGB zápisrgb (číslo, číslo, číslo) šestnáctkový zápis#5A12F0

8 ZVÝRAZNĚNÍ TEXTU tučné písmo podtržené písmo kurzíva

9 ATRIBUTY PŘÍKAZU Atribut tagu VýznamHodnoty bgcolorbarva pozadíbarva backgroundobrázek na pozadí adresa obrázku textbarva popředí (textu)barva linkbarva nenavštívených odkazůbarva vlinkbarva navštívených odkazůbarva alinkbarva klikaných odkazůbarva Leftmargin, topmargin, rightmargin, bottommargin levý, horní, pravý, spodní okrajpixely

10 PŘÍKLAD POUŽITÍ žlutá barva pozadí, modrý text, zelené odkazy, olivové navštívené odkazy, červené klikané odkazy

11 BLOKOVÉ PŘÍKAZY TagVýznamPárový <p><p>odstavecnepovinně konec řádkune oddílano,,,,, nadpis 1. až 6. úrovněano

12 ZAROVNÁNÍ BLOKOVÝCH PŘÍKAZŮ - ODSTAVCŮ A NADPISŮ Atribut tagu a nadpisů AtributVýznamHodnoty alignzarovnání left | right | center | justify

13 VODOROVNÁ ČÁRA Atributy tagu AtributVýznamMožné hodnoty widthšířka (horizontálně)délka nebo procento sizetloušťkadélka v pixelech align zarovnání čáry s nastavenou šířkou left, center, right colorbarva noshadečára bude bez stínubez hodnoty

14 ODKAZY – TAG př: Portál Seznam Atributy tagu AtributVýznamHodnota hrefcíl odkazuadresa namejméno záložkylibovolné jméno targetotevření v novém panelujméno rámu

15 OBRÁZKY – TAG Atributy tagu AtributVýznamHodnoty src umístění souboru s obrázkem adresa altalternativní popislibovolný text widthšířkadélka nebo procento heightvýškadélka nebo procento bordertloušťka rámečkudélka alignzarovnání obrázku top, texttop, middle, absmiddle, baseline, bottom, absbottom

16 SEZNAMY – TAGY, číslovaný seznam je uzavřen v a nečíslovaný seznam je uzavřen v a jednotlivé položky seznamu jsou uzavřeny a př: První položka Druhá položka

17 TABULKY – TAG tabulka je uzavřena v a řádky tabulky jsou uzavřeny v a buňky tabulky jsou uzavřeny v a

18 PŘÍKLAD TABULKY horní levá buňka horní pravá dolní levá dolní pravá

19 atribut tagu významhodnoty align horizontální zarovnáníleft, center, right, justify valign vertikální zarovnání top, middle, bottom, baseline width minimální šířka buňkyčíslo nebo procento height minimální výška buňkyčíslo nowrap obsah buňky se nebude zalamovat bez hodnoty background obrázek na pozadíadresa bgcolor barva pozadí barva bordercolor barva rámečku Atributy buněk – tag

20 atribut tagu význammožné hodnoty align zarovnání/obtékání tabulky right – obtékání zprava left – obtékání zleva center – zarovnání na střed cellpaddingvnitřní okraj buněkpočet pixelů cellspacingvnější okraj buněkpočet pixelů borderšířka rámečkupočet pixelů width, heightšířka a výška tabulkyčíslo nebo procento background, bgcolor, bordercolorbarva Atributy tabulky – tag

21 SLOUČENÍ BUNĚK Sloučení buněk na řádku – atribut tagu colspan=počet spojených buněk Sloučení buněk ve sloupci – atribut tagu rowspan=počet spojených buněk

22 Tabulka přes polovinu šířky stránky NADPIS TABULKY, výška řádku 100 px vložený obrázek o výšce 350 px Odkaz na stránky školy Odkaz na jinou stránku Nějaký text modře, výška řádku min. 140 px Nějaký text červeně

23 ROZDĚLENÍ STRÁNKY a Frame = rám, umožňuje zobrazit v jedné stránce obsah dvou nebo více stránek pod sebou nebo vedle sebe Tag se uvádí místo Atribut tagu VýznamHodnoty cols rozdělení stránky do sloupcových rámů čárkami oddělené délky, procenta nebo * rows rozdělení do řádkových rámů čárkami oddělené délky, procenta nebo * border šířka rámečku mezi stránkami číslo frameborderzobrazit rámeček0, 1

24 Příklad zobrazení dvou stránek …