……..

……..

……..

……..

……..

……..

Velikost se řídí číslicí 1 – 6. Zvyšováním čísla se nadpis zmenšuje.

nadpis první úrovně nadpis druhé úrovně nadpis třetí úrovně

Práce s textem - odstavec Zobrazení textového bloku s odřádkováním.

….. ….. …..

Zabránění automatickému odřádkování .

Zobrazení formátovaného textu Zobrazení včetně mezer, odřádkování a odsazení. Text uzavřený mezi

 a 

se zobrazí na stránce přesně tak, jak je napsán v kódu stránky

 ….. ….. ….. 

Práce s textem – kontejnery, atributy Kontejnery <SPAN> …. řádkový element – tag nezpůsobí odřádkování

….

blokový element – tag s odřádkováním

Atributy

používá se u CCS

<SPAN STYLE="color:red">STYLE <SPAN align="center">text zarovnaný vpravo Příklady: align="left" ... zarovná text vlevo (přednastavená hodnota) align="right" ... zarovná text vpravo align="center"... zarovná text na střed color:blue

Práce s textem – odsazení textu

…………..

Odstavec s větším levým a pravým odsazením. Velikost odsazení 40 pixelů. Jednotlivé tagy lze vnořovat. Poznámka : vodorovná čára v textu Délka čáry

---

Šířka čáry

---

Barva čáry

---

Stín noshade Příklad: hr width="50%" size="50" color="red" align="center" noshade

Seznamy Číslovaný seznam

1. asie
2. afrika
3. amerika
   Typy číslování
   5. 
      
      začátek seznamu jednotlivá položka jednotlivá položka jednotlivá položka konec seznamu
      
      Seznamy Nečíslovaný seznam
      
      
      asie afrika amerika
      
      Typy číslování
   8. 
      
      Seznamy
      
      Obrázky Datová velikost souboru s obrázkem Obrázky musejí být co nejmenší – používají se kompresní formáty GIF, JPG, PNG. Orientační velikosti webových prvků Tlačítko 2 kB - 5 kB pozadí stránky 2 kB - 10 kB reklamní banner 8 kB - 25 kB Fotografie 20 kB - 90 kB zmenšenina fotky 5 kB - 10 kB ilustrační obrázek 10 kB - 40 kB obrázkový nadpis 3 kB - 8 kB
      
      !!!!! Obrázky < 100 kB !!!
      
      Obrázky - formáty obrazových souborů Formát JPG - ztrátově, komprimovaný formát - nastavuje se stupeň komprese – čím větší stupeň komprese, tím …… „menší soubor a horší kvalita obrázku “
      
      Formáty obrazových souborů Formát GIF - ztrátově, komprimovaný formát -umožňuje vytvořit průhledné části obrazu – transparent gif - obsahuje maximálně 256 barev
      
      Obrázky K vložení obrázku na stránku slouží tag . U něj je možné zadat více atributů Umístění obrázku <SRC> - zdroj, umístění Pokud není obrázek ve stejném adresáři jako www stránka, je třeba dodržet stejné umístění v adresářovém stromu a v popisu zdroje obrázku.
      
      obrázek je umístěn ve stejném adresáři jako WWW stránka
      
      obrázek je umístěn o adresář nad umístěním www stránky obrázek je na udaném www umístění v síti Internet
      
      obrázky
      
      Zarovnání - zarovnání
      
      obrázek se umístí doleva a textem je obtékán z pravé strany obrázek se umístí doprava a textem je obtékán z levé strany obrázek je vycentrován vzhledem k okolnímu textu zarovná spodní okraj obrázku se základnou textového řádku zarovná spodní okraj obrázku se základnou textového řádku zarovná horní okraj obrázku se základnou textového řádku
      
      Obrázky Výška a šířka obrázku - výška obrázku <WIDTH> - šířka obrázku zadává se v pixelex nebo v % velikosti okna prohlížeče pokud nejsou rozměry zadány zobrazí se v originální velikosti Příklad: Volný prostor kolem obrázku zadává se v pixelex nebo v % velikosti obrázku pokud nejsou rozměry zadány zobrazí se v originální velikosti
      
      Obrázky Rámeček kolem obrázku rámeček
      
      Popisek obrázku zobrazuje se při přejetí kurzorem myši jako bublinková nápověda
      
      Odkazy …… vše mezi značkami bude sloužit jako odkaz - reaguje na kliknutí Např. Moje stránka Atlas
      
      Do odkazů není možné vkládat: 1. Odkazy 2. Tabulky 3. Formuláře
      
      Odkazy Odkazy na téže stránce
      
      přesuny na odkazy v rámci jedné stránky start
      
      text odkazu text odkazu
      
      Start
      
      xxxxx
      
      xxxxx
      
      xxxxx
      
      Tabulky
      
      Tabulka patří mezi velmi důležité prvky na stránce. Umožňuje zobrazit přehledně skupiny dat a dále je použitelná pro řízení vzhledu organizace stránky. Při tomto použití je možné přizpůsobovat vzhled stránky změně rozlišení. Html stránku je možné si představit jako velkou tabulku s různými rozložením buněk , které tvoří její strukturu.
      
      
      
      
      
      
      
      

      ....	....	....	....
      ....	....	....	....
      ....	....	....	....

      
      
      uvozuje řádky tabulky
      
      

      uvozuje jednotlivé buňky tabulky Tabulky Příklad: asie afrika amerika oceanie antarktida australie border vlastnost border určuje šířku okraje tabulky v pixelech Tabulky Rozměry tabulky je možné zadávat v délkových jednotkách nebo % tj. procento velikosti okna prohlížeče kontinenty A kontinenty B asie afrika amerika oceanie antarktida australie hlavička tabulky, používá se stejně jako tag , vkládá se do jednotlivých řádků. Tabulky Popisek tabulky zobrazuje se jako prostý text nad tabulkou v jejím středu. Jiné zarovnání popisku je možné zadáním vlastnosti ALIGN. nadpis tabulky Nadpis tabulky kontinenty A kontinenty B asie afrika amerika oceanie antarktida australie Tabulky Rámeček tabulky šířka rámečku, standartně je nastavena na nulu border bordecolor barva rámečku bordercolordark barva vnějšího rámečku bordercolordark barva vnitřního rámečku Tabulky Pozadí tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek BGCOLOR barva pozadí stránky BACKGROUND obrázek na pozadí s cestou k souboru asie afrika amerika oceanie antarktida australie Vlastnost bgcolor má vyšší prioritu nad vlastností background! Tabulky Zarovnání tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek ALIGN Hodnoty: LEFT RIGHT CENTER vodorovné zarovnánní obsahu tabulky A B VALIGN Hodnoty: BOTTOM ?????? ?????? ?????? C svislé zarovnání obsahu tabulky ? ? ? Tabulky Slučování buněk buňky v tabulce je možné slučovat přes řádky a sloupce COLSPAN nastavení šířky buňky ve sloupcích. Hodnota 1, zobrazí se buňka přes jeden sloupec, hodnota 2, zobrazí se buňka přes dva sloupce. Kontinenty asie afrika amerika oceanie antarktida australie Tabulky Slučování buněk buňky v tabulce je možné slučovat přes řádky a sloupce ROWNSPAN nastavení šířky buňky v řádcích Hodnota 1, zobrazí se buňka přes jeden řádek; hodnota 2, zobrazí se buňka přes dva řádky. Kontinenty název asie afrika amerika oceanie antarktida australie Tabulky CELLPADDING CELLSPACING Nastavení prokladu velikost místa mezi obsahem buňky a jejím ohraničením nastavuje rozestup mezi buňkami. Oba tyto atributy se umísťují do tagu TABLE a nelze je nastavovat pro jednotlivé buňky Kontinenty název asie afrika amerika oceanie antarktida australie Tabulky Kombinace obou vlastností – CELLPADDING, CELLSPACING Tabulky Příklad – tabulka v tabulce Vytvořte následující tabulku s vnořenými tabulkami..................................... Tabulky Řešení – tabulka v tabulce X A B C D 1 2 3 4 Y Formuláře ……….. Formuláře v HTML pouze předávají zadané údaje skriptům, které vykonají akci. Využití – zadávání libovolných údajů ze strany uživatele – ankety, dotazníky…. action - obsahuje URL skriptu, kam je formulář poslán a zpracován method – určuje způsob odeslání dat. Existují dvě varianty GET nebo POST. Základní Metodu GET není nutné zadávat - data jsou odeslána přímo v URL Metoda POST se neposílá v URL, ale jako samostatný objekt. target - určitě znáte z tvorby hypertextových odkazů; určuje cílový rám, ve kterém bude operace probíhat. _blank pošle výsledek do nového okna ………….. ………….. ………….. Formuláře Text Maxlength……………….nejvyšší počet zadaných znaků Radio Checkbox Textarea text Wrap Zalamování řádků. wrap="soft" - řádky se smějí zalomit jen v místě mezery wrap="hard" - řádky se zalamují v mezerách a ve slovech, které se nevejdou na řádek wrap="off" - řádek se nezalamuje Formuláře Select <select …………> první druhá třetí Size Určuje kolik řádků pod sebou se zobrazí, pokud nastavíte méně řádků než počet option tak se objeví rolovací lišta. Multiple Pokud chcete uživateli nabídnout více možností najednou, uvádí se bez hodnoty. Selected Předem vybere položku ze seznamu, uvádí se bez hodnoty. Formuláře II Formuláře Password Vlastnosti jsou stejné jaku u type=text akorát se místo textu zobrazí hvězdičky. Hidden Používá se pokud chcete odeslat již předem připravenou hodnotu, toto pole se nezobrazuje. Button Tlačítko používa se ve spojení s JavaScriptem. co je na tlačítku Submit Odešle formulář. Reset Vymaže obsah formuláře Formuláře Image Obrázek jako tlačítko Zarovnání: TOP,MIDDLE, BOTTOM, LEFT, RIGHT Fieldset Seskupí skupinu prvků do pole, okolo skupiny se zobrazuje rámeček, čáru můžete přerušit tagem legend, který se zobrazí jako nadpis. Legend Název skupiny prvků vkládá se přímo za Formuláře Parametry formulářových prvků Name Name určuje jméno pole, které se posílá s ostatními daty formuláře. Každý musí nutně mít nastavený parametr NAME, který obsahuje jméno daného políčka. Toto je nezbytně nutné, pokud má být formulář korektně odeslán. Přes toto jméno pak script přistupuje k jednotlivým datům. Z toho vyplývá i to, že v rámci jednoho formuláře musí být každé jméno unikátní. Povinný u TEXTAREA,SELECT, INPUT – nepovinné u RESET a SUBMIT. Value Value určuje počáteční hodnotu vstupního pole (text zobrazený v textovém poli nebo na tlačítku...). Align Zarovnání Disabled Disabled uvádí se bez hodnoty, disabled způsobí, že vstupní pole nepůjde změnit. Formuláře Formuláře Odeslání formuláře 1. Odeslání přes poštovní program uživatele počítače - nespolehlivé !!!!! Action="mailto:..." HTML už v sobě obsahuje způsob, kterým se má vyplněný formulář odeslat na mail adresa@prijemce Váš mail: Předmět: Zpráva: 2. Odeslání přes server Action se namíří na nějakou aktivní stránku (např. ASP nebo PHP skript), která udělá dvě věci: Bez znalosti PHP / služba http://www.mailform.cz http://www.blueboard.czz Rámce Nejednoduší způsob jak organizovat www stránku. Použití pro jednoduchý web. V dnešní době jsou rámce málo používané. Výhody: • jednoduchá správa stránek Nevýhody: problémy s tiskem • adresa je stále stejná a nemění se při odkazování • vyhledávací roboti vyhledávají konkrétní stránku a nemusí vždy zobrazit celou konstrukci stánky, ale pouze obsah konkrétního rámce. html3 html1 html2 html1 html2 html3 Rámce COLS určuje počet sloupců rozdělení rámce ROWS určuje počet řádků rozdělení rámce Rámce Příklad: html1 html2 html1 html2 Html3 html3 Poznámka: U tohoto příkladu dodržte rozložení barev na jednotlivých stránkách Rámce SCROLLING……………možnost zobrazení posuvníků……..yes/no/auto NORESIZE ……………..povolení změny velikosti rámu ……..yes/no MARGINHEIGHT………vertikální prázdný okraj……………….px MARGINWIDTH………..horizontální prázdný okraj……………px BORDERCOLOR………barva rámečku………………………..red, green…. Vlastnosti tagu SETFRAME : COLS………………………počet sloupců ROWS……………………...počet řádků FRAMEBORDER …………okraj rámce…………….…..……..1/2/…………px Rámce Adresování stránka se načte do nového okna stránka se načte do stejného rámu stránka se načte do okna prohlížeče stránka se načte do nadřazeného rámu Inframe ? použití Multimédia <EMBED>…………. SRC………………………………..zdroj zvuku nebo videa ? ? ? ? ? ? ? ? Vyhledejte a vypište seznam vlastností tohoto atributu na konkrétním příkladu přehrávání zvuku nebo videa na HTML stránce ? Příklady Příklad č.1 Příklady Příklad č.1 - řešení Příklady Příklad č.2 Příklady Příklad č.3 záložky na téže stránce Příklady Příklad č.4 Příklady Příklad č.5 Příklady Příklad č.6 Příklady Příklad č.7 Příklady Příklad č.8 Příklady Příklad č.9 layout pomocí tabulek Příklady Příklad č.10 Příklady Příklad č.11 Použitá literatura a informační zdroje http://www.kosek.cz/clanky/cw/html.html http://www.tvorime-web.wz.cz/html_historie.html www.fa.vutbr.cz/stud/pago/images/postava1.jpg http://public.web.cern.ch/public/ http://cs.wikipedia.org/wiki/CERN http://www.jsi.cz/grafika/zaklady_grafiky/formaty.htm www.interval.cz http://www.owebu.cz/html/vypis.php?clanek=493 http://tvorba-webu.zdarek.com/html/formulare.php http://www.builder.cz/art/html/html_form.html http://webtvorba.howto.cz/html-tutorial-8-formulare/ Použitá literatura a informační zdroje http://www.softnov.cz/ příklady www stránek http://www.kii.vslib.cz/~satrapa příklady www stránek http://www.kosek.cz http://web.quick.cz/reinhard/cz/Tabulky.html × Report "PODPORA ELEKTRONICKÝCH FOREM VÝUKY" 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