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í 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ě

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

Příklad zobrazení dvou stránek …