PODPORA ELEKTRONICKÝCH FOREM VÝUKY

Save this PDF as:
 WORD  PNG  TXT  JPG

Rozměr: px
Začít zobrazení ze stránky:

Download "PODPORA ELEKTRONICKÝCH FOREM VÝUKY"

Transkript

1 I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/ Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín

2 I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í Programové vybavení Programové vybavení_4.ročník_a Autorem tohoto výukového materiálu je Mgr. Hynek Kohout SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín

3 Tvorba WWW stránek HTML

4 Úvod Barvy Jednotky Tagy Práce s textem Seznamy Obrázky Odkazy Tabulky Formuláře Rámce Rámce

5 Úvod - historie HTML První definici jazyka HTML vytvořil v roce 1991 Tim Berners-Lee jako součást projektu WWW, který měl umožnit vědcům zabývajícím se fyzikou vysokých energií komunikaci a sdílení výsledků výzkumů po celém světě. Ne náhodou proto celý projekt vznikal v CERNu (Centre Européenne de Rechere Nucléaire, Evropské centrum jaderného výzkumu), který leží na švýcarsko-francouzských hranicích nedaleko Ženevy. Verze HTML z tohoto období je známá pod označením HTML 0.9. Umožňovala text rozčlenit do několika logických úrovní, použít několik druhů zvýraznění textu, zařadit do textu odkazy a obrázky.

6 Úvod - historie HTML Evropská organizace pro jaderný výzkum je mezinárodní organizace se sídlem v Ženevě. Je známa též pod zkratkou CERN (z franc. Conseil Européen pour la recherche nucléaire). CERN, Evropská laboratoř pro fyziku částic, je nejrozsáhlejší výzkumné centrum částicové fyziky na světě. Byla založena v roce 1954 a od té doby se tato laboratoř, která byla prvním takovým evropským společným dílem, stala zářným příkladem úspěšné mezinárodní spolupráce. Z původních 12 signatářů dohody o založení CERN vzrostl počet členských zemí na 20. Laboratoř leží na francouzsko-švýcarské hranici západně od Ženevy na úpatí pohoří Jura. Se zařízením CERN pracuje okolo 6500 vědců, což je polovina všech částicových fyziků na světě. Vědci reprezentují 500 univerzit či jiných odborných pracovišť a více než 80 národností.

7 Úvod - historie HTML Urychlovače částic Podrobnější informace naleznete v článku Urychlovaččástic. Urychlením získajíčástice velmi vysoké energie. Jejich následné střílení do terčů nebo vzájemné srážky pomáhají fyzikům rozluštit tajemství sil působící mezi částicemi. Existují urychlovače dvou typů, lineární a kruhové. V CERN se můžeme setkat s oběma. Urychlovače používají silné elektrické pole, jehož prostřednictvím nahustí energii do svazku částic. Magnetické pole svazek přesně zaostřuje a slouží i k udrženíčástic na kruhové dráze. Lineární urychlovače předávají energii svazku při jeho postupném pohybu po celé délce. Platí tedy, že čím delší zařízení, tím vyšší konečná energie. V kruhových urychlovačích částice létají znovu a znovu kolem dokola a hromadí tak energii s každým oběhem kruhu. Jak ale rychlost částic roste, většina má tendenci vyletět ven z kruhu podobně jako auto projíždějící ostrou zatáčku na silnici. To je důvod, proč je LEP tak velký. Byl navržen tak, aby zakřivení kruhu bylo tak mírné, jak je to jen možné.

8 Úvod - historie HTML Verze HTML: Verze 0.9 : Byla vydána v roce 1991, nepodporuje grafický režim (vytvořil Tim Berners-Lee) Verze 2.0 : Stav jazyka v roce Standard vydala komunita IETF. Přidává k původní verzi interaktivní formuláře a podporu grafiky. Verze 3.2 : Byla vydána 14.ledna Přídává k jazyku tabulky, zarovnání textu a elementy style, pro ovlivnění vzhledu stránky. Verze 4.0 : Byla vydána 18.prosince Verze upravuje tabulky, formuláře a nově standardizuje rámy. Verze 4.01 : Byla vydána 24.prosince Podle původních předpokladů se mělo jednat o poslední verzi, pro které by se přešlo na XHTML. Verze 5 : 7. března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML.

9 Úvod Vytvoření HTML souboru 1. v libovolném textovém editoru 2. v editoru webovských stránek HomeSite, PSPad, EasyPad, UltraEdit, jedit Front Page KVALITA HTML KÓDU?

10 Struktura HTML <html> <head> <title>titulek stránky</title> </head> <body> Úvod html kód </body> </html>

11 Barvy 1. Anglicky red, green, blue.. 2. Hexadecimálně - # <FONT color="#663300>text</font> 3. Barevným modelem RGB červená(r), zelená(g) a modrá(b) RGB CMYK

12 Barvy model RGB Čím větší je součet mohutností, tím světlejší je výsledná barva. R G B barva barva černá černá červená červená zelená zelená modrá modrá žlutá žlutá purpurová purpurová azurová azurová bílá bílá

13 Jednotky Pixely Obrazovkové body. Pixely jsou základní délkovou jednotkou v HTML. Číslo je vždy chápáno jako počet pixelů. Procenta Procenta - číslo a znak procenta bez mezery. Stupně písma Pouze pro účel HTML zadávají se jako číslice od 1 do malé 3 běžné 7 obrovské Uživatel si může zvětšovat a zmenšovat písmo v prohlížeči. Jednotky nepoužívané v HTML pt, cm, in, mm, pc - tyto jednotky jsou pro CCS

14 Tagy Párové Nepárové <B> </B> ; <I> </I>.. <BR>. odřádkování Vlastnosti atributy tagů Zapisují se do uvozovek do těla prvního tagu <Font face= ARIEL">druh písma</font> vlastnost hodnota - druh fontu

15 Práce s textem Zapisuje se do tagu <body>.. </body> <B> - tučné písmo <U> - podtržené písmo <I> - kurzíva Druh písma, velikosti, barva <FONT>.. <FONT> Vlastnosti (atributy) tagu FONT: <Font face= ARIEL">druh písma</font> <Font size= 40">velikost</Font> <Font color= red">barva</font> <Font <SUB></SUB> dolní index <SUP></SUP> horní index <SMALL></SMALL> zmenšení písma o jeden stupeň Poznámka: lze kombinovat : <small><small>maličký text</small></small> <BIG></BIG> zvětšení písma o jeden stupeň <STRIKE></STRIKE> přeškrtnuté písmo <S> </S> <STRONG></STRONG> silné písmo

16 Varianta I. Práce s textem -řádkování Varianta II. Odřádkování(zalomení) textu <HTML> <HEAD> <TITLE> odřádkování</title> </HEAD> <BODY> 1 řádek 2 řádek 3 řádek </BODY> </HTML> Výsledek: 1 řádek 2 řádek 3 řádek. Odřádkování(zalomení) textu <HTML> <HEAD> <TITLE> odřádkování</title> </HEAD> <BODY> 1 řádek <BR> 2 řádek <BR> 3 řádek <BR> </BODY> </HTML> Výsledek: 1 řádek 2 řádek 3 řádek. Větší mezeru mezi textem - speciální znak pro mezeru - &nbsp

17 Práce s textem - nadpisy <H1>.. <H1> <H2>.. <H2> <H3>.. <H3> <H4>.. <H4> <H5>.. <H5> <H6>.. <H6> 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ě

18 Zobrazení textového bloku s odřádkováním. <P> Práce s textem - odstavec </P> Zabránění automatickému odřádkování <NOBR>. Zobrazení formátovaného textu Zobrazení včetně mezer, odřádkování a odsazení. Text uzavřený mezi <PRE> a </PRE> se zobrazí na stránce přesně tak, jak je napsán v kódu stránky <PRE> </PRE>

19 Kontejnery Práce s textem kontejnery, atributy <SPAN>. </SPAN>řádkový element tag nezpůsobí odřádkování <DIV>. </DIV> 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</span> Příklady: align="left"... zarovná text vlevo (přednastavená hodnota) align="right"... zarovná text vpravo align="center"... zarovná text na střed color:blue

20 Práce s textem odsazení textu <BLOCKQUOTE>.. </BLOCKQUOTE> 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 <HR width= 50%"> Šířka čáry <HR size="10"> Barva čáry <HR color="red"> Stín noshade Příklad: hr width="50%" size="50" color="red" align="center" noshade

21 Číslovaný seznam <OL> začátek seznamu <LI> asie jednotlivá položka <LI> afrika jednotlivá položka <LI> amerika jednotlivá položka <OL> konec seznamu Typy číslování <LI TYPE="1"> <LI TYPE="a"> <LI TYPE="A"> <LI TYPE="I"> <LI TYPE="i"> Seznamy

22 Seznamy Nečíslovaný seznam <UL> <LI> asie <LI> afrika <LI> amerika </UL> Typy číslování <LI TYPE= disc"> <LI TYPE= circle"> <LI TYPE= square">

23 Seznamy

24 Datová velikost souboru s obrázkem Obrázky Obrázky musejí být co nejmenší používají se kompresní formáty GIF, JPG, PNG. 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 Orientační velikosti webových prvků!!!!! Obrázky < 100 kb!!!

25 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

26 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

27 K vložení obrázku na stránku slouží tag <IMG>. U něj je možné zadat více atributů Umístění obrázku Obrázky <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. <IMG SRC= asie.jpg > obrázek je umístěn ve stejném adresáři jako WWW stránka <IMG SRC=../asie.jpg > obrázek je umístěn o adresář nad umístěním www stránky <IMG SRC="C:/kontinent/asie.jpg > obrázek je umístěn na disku C <IMG SRC="http://www.mujweb.cz/kontinent/asie.jpg > obrázek je na udaném www umístění v síti Internet

28 obrázky Zarovnání <ALIGN> - zarovnání <IMG ALIGN="left"> obrázek se umístí doleva a textem je obtékán z pravé strany <IMG ALIGN="right"> obrázek se umístí doprava a textem je obtékán z levé strany <IMG ALIGN="center"> obrázek je vycentrován vzhledem k okolnímu textu <IMG ALIGN="bottom"> zarovná spodní okraj obrázku se základnou textového řádku <IMG ALIGN="middle"> zarovná spodní okraj obrázku se základnou textového řádku <IMG ALIGN="top"> zarovná horní okraj obrázku se základnou textového řádku

29 Obrázky Výška a šířka obrázku <HEIGHT> - 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: <img src= asie.gif" width= 150" height="100" > Volný prostor kolem obrázku <HSPACE> <VSPACE> zadává se v pixelex nebo v % velikosti obrázku pokud nejsou rozměry zadány zobrazí se v originální velikosti

30 Obrázky Rámeček kolem obrázku <BORDER> rámeček <img src= evropa.jpg alt="strom border="0"> <img src= evropa.jpg alt="strom border= 1"> <img src= evropa.jpg alt="strom border= 2"> Popisek obrázku <ALT> zobrazuje se při přejetí kurzorem myši jako bublinková nápověda

31 <A> </A> vše mezi značkami bude sloužit jako odkaz - reaguje na kliknutí Např. <a href= start.html">moje stránka</a> <a href="http://www.atlas.cz">atlas</a> Odkazy <a href="http://www.atlas.cz"> <img src= evropa.jpg > </a> Do odkazů není možné vkládat: 1. Odkazy 2. Tabulky 3. Formuláře

32 Odkazy Odkazy na téže stránce přesuny na odkazy v rámci jedné stránky <a name= nazev_zalozky">start</a> <a name= evropa"></a> Start <a href="#nazev_zalozky">text odkazu</a> <a href="#evropa">text odkazu</a> xxxxx xxxxx xxxxx

33 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. <TABLE> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR></TR> <TABLE> <TR> uvozujeřádky tabulky <TD> uvozuje jednotlivé buňky tabulky

34 Tabulky Příklad: <TABLE border="1"> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE> border vlastnost border určuje šířku okraje tabulky v pixelech

35 Tabulky Rozměry tabulky je možné zadávat v délkových jednotkách nebo % tj. procento velikosti okna prohlížeče <TABLE width= 50% > <TABLE height= 300 > <TH> hlavička tabulky, používá se stejně jako tag <TD>, vkládá se do jednotlivýchřádků. <TABLE border="1"> <TR> <TH>kontinenty A</TH> <TH>kontinenty B </TH> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

36 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. <CAPTION>nadpis tabulky</caption> <TABLE border="1"> <CAPTION>Nadpis tabulky</caption> <TR> <TH>kontinenty A</TH> <TH>kontinenty B </TH> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

37 Tabulky Rámeček tabulky border šířka rámečku, standartně je nastavena na nulu <TABLE border= 7"> bordecolor barva rámečku <TABLE bordercolor="green"> bordercolordark barva vnějšího rámečku <TABLE bordercolorlight="green"> bordercolordark barva vnitřního rámečku <TABLE bordercolorlight="green"> <TABLE border="5" bordercolordark="green" bordercolorlight="yellow">

38 Tabulky Pozadí tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek BGCOLOR barva pozadí stránky <TABLE bgcolor="# FF00FF"> BACKGROUND obrázek na pozadí s cestou k souboru <TABLE background= c:\chata.jpg > <TABLE border="5" background="c:\chata.jpg"> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE> Vlastnost bgcolor má vyšší prioritu nad vlastností background!

39 Tabulky Zarovnání tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek ALIGN vodorovné zarovnánní obsahu tabulky Hodnoty: LEFT RIGHT CENTER A B C VALIGN svislé zarovnání obsahu tabulky Hodnoty: BOTTOM?????????????????????

40 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. <TABLE border="1" > <TR> <TD colspan="2"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

41 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. <TABLE border="1" > <TR> <TD colspan="3"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD rowspan="4">název</td> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

42 Tabulky Nastavení prokladu CELLPADDING velikost místa mezi obsahem buňky a jejím ohraničením CELLSPACING nastavuje rozestup mezi buňkami. Oba tyto atributy se umísťují do tagu TABLE a nelze je nastavovat pro jednotlivé buňky <TABLE border="1" valign="bottom "cellpadding="40" width=50%> <TR> <TD colspan="3"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD rowspan="4">název</td> <TR align="center"> <TD> asie </TD> <TD> afrika</td> </TR> <TR align="center"> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR align="center"> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

43 Tabulky Kombinace obou vlastností CELLPADDING, CELLSPACING <TABLE border="1" bordercolor= green valign="bottom "cellpadding="40" cellspacing="40" width=50%>

44 Tabulky Příklad tabulka v tabulce Vytvořte následující tabulku s vnořenými tabulkami...

45 Tabulky Řešení tabulka v tabulce <TABLE BORDER="1" CELLPADDING="5"> <TR> <TD VALIGN="top">X</TD> <TD> <TABLE BORDER="2"> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> </TD> </TR> <TR> <TD> <TABLE BORDER="5"> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </TD> <TD VALIGN="bottom" ALIGN="right">Y</TD> </TR> </TABLE>

46 Formuláře <FORM>.. </FORM> 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 <form action="skript.php" method="post" target="_blank"> </form>

47 Formuláře Text <input type="text" value="text"> Maxlength.nejvyšší počet zadaných znaků Radio <input type="radio" value="1" name="jedna"> Checkbox <input type="checkbox"> Textarea <textarea cols="40" rows="3">text</textarea> 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

48 Formuláře Select <select > <option>první</option> <option>druhá</option> <option>třetí</option> </select> 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.

49 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. <BUTTON TYPE="SUBMIT BUTTON RESET" NAME="jméno" VALUE="hodnota">co je na tlačítku</button> Submit Odešle formulář. Reset Vymaže obsah formuláře

50 Formuláře Image Obrázek jako tlačítko <INPUT TYPE="IMAGE" ALIGN="zarovnání" ALT= bublina" SRC="zdroj obrázku"> 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 <legend>název skupiny prvků</legend> vkládá se přímo za <fieldset >

51 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ý <input> 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.

52 Formuláře

53 Odeslání formuláře 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 <form method="post" enctype="text/plain"> Váš mail: <input name="mail_odesilatele" size="20"><br> Předmět: <input name="subject" size="20"><br> Zpráva: <textarea name="body" rows="4" cols="30"></textarea><br> <input type="submit" value="odeslat"> </form> 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

54 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

55 Rámce COLS určuje počet sloupců rozdělení rámce <FRAMESET cols= 60%,40%,*"> <FRAME src="strana1.htm"> <FRAME src="strana2.htm"> <FRAME src="strana3.htm"> </FRAMESET> ROWS určuje počet řádků rozdělení rámce <FRAMESET rows= 60%,40%,*"> <FRAME src="strana1.htm"> <FRAME src="strana2.htm"> <FRAME src="strana3.htm"> </FRAMESET>

56 Rámce Příklad: html1 html2 Html3 html1 html2 html3 Poznámka: U tohoto příkladu dodržte rozložení barev na jednotlivých stránkách

57 Rámce <FRAMESET cols= 30%,*"> <FRAMESET rows= 60%,*"> <FRAME src="stranka1.htm"> <FRAME src="stranka2.htm"> </FRAMESET> <FRAME src="stranka3.htm > </FRAMESET>

58 Rámce Vlastnosti tagu FRAME : SRC..zdroj stránky NAME jméno rámce Jméno rámce je důležité s ohledem na směrování odkazů do konkrétního rámu. Příklad: <A HREF="stranka2.htm" target= menu"> 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

59 Rámce Adresování <A HREF="stranka2.htm" target= _blank"> stránka se načte do nového okna <A HREF="stranka2.htm" target= _self"> stránka se načte do stejného rámu <A HREF="stranka2.htm" target= _top > stránka se načte do okna prohlížeče <A HREF="stranka2.htm" _parent"> stránka se načte do nadřazeného rámu Inframe? použití

60 Multimédia <EMBED>. </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?

61 Příklady Příklad č.1

62 Příklady Příklad č.1 - řešení

63 Příklady Příklad č.2

64 Příklady Příklad č.3 záložky na téže stránce

65 Příklady Příklad č.4

66 Příklady Příklad č.5

67 Příklady Příklad č.6

68 Příklady Příklad č.7

69 Příklady Příklad č.8

70 Příklady Příklad č.9 layout pomocí tabulek

71 Příklady Příklad č.10

72 Příklady Příklad č.11

73 Použitá literatura a informační zdroje

74 Použitá literatura a informační zdroje příklady www stránek příklady www stránek

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

Více

Tvorba webových stránek

Tvorba webových stránek 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ý

Více

Zá klady HTML. Tag HTML Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014 Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku! Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

Více

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Název školy: Číslo a název projektu: Číslo a název šablony klíčové

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

03 - Základy editace dynamických stránek

03 - Základy editace dynamických stránek Dynamické WWW stránky V předchozí kapitole byly popsány tagy jazyka HTML, kterým se říká statické. Jinými slovy, lze jimi vytvořit plnohodnotnou a kvalitní statickou stránku. To znamená, že stránka sice

Více

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Základy HTML, URL, HTTP, druhy skriptování, formuláře Základy HTML, URL, HTTP, druhy skriptování, formuláře Skriptování na straně klienta a serveru Skriptování na straně klienta se provádí pomocí programovacího jazyka JavaScript, který je vkládán do HTML

Více

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1 1 Úvod V tomto studijním textu se seznámíme s tvorbou webových stránek a prezentací a se základy syntaxe jazyka HTML. K tomu, abychom byli schopni vytvořit internetovou stránku, nemusíme používat žádný

Více

9. Editory www stránek II tvorba pomocí tagů a další technologie.

9. Editory www stránek II tvorba pomocí tagů a další technologie. 9. Editory www stránek II tvorba pomocí tagů a další technologie. V první části kapitoly je přehled HTML tagů a jejich příklady. V závěrečné části následuje další shrnutí (X)HTML a CSS s ohledem na validitu

Více

Jdeme tvořit webové stránky!

Jdeme tvořit webové stránky! Jdeme tvořit webové stránky! Díky prezentaci jsme se již dozvěděli, že na tvorbu základních webových stránek v podstatě nepotřebujeme žádné speciální programy a stačí nám obyčejný poznámkový blok, který

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

Nápověda k redakčnímu systému InstantWeb.cz

Nápověda k redakčnímu systému InstantWeb.cz Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu,

Více

WEBOVÉ STRÁNKY www.krestanskevanoce.cz

WEBOVÉ STRÁNKY www.krestanskevanoce.cz WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ

WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ Zpracováno na základě podkladů poskytnutých organizátory akce Lange Nacht der Kirchen, Rakousko. Domovská stránka Noci kostelů je založena na databázi, která vedle běžných

Více

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

Více

HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger

HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger HTML HyperText Markup Language 25.9.2013 Josef Steinberger HTML historie, verze Hypertext Jazyk popisující strukturu dokumentu SGML/XML Aplikace Verze: HTML 1 1990+ TBL, CERN HTML 2.0 1995 as RFC 1866

Více

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE 765 02. Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář

Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE 765 02. Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE 765 02 Jazyk HTML Pomocný text pro výuku výpočetní techniky PaedDr. Pavel Kovář 2009 S O Š O T R O K O V I C E A. Základní struktura HTML dokumentu Zkratkou

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o

Více

1. Začínáme s FrontPage 2003 11

1. Začínáme s FrontPage 2003 11 Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou

Více

Tvorba webu. Tabulkový layout a linky. Martin Urza

Tvorba webu. Tabulkový layout a linky. Martin Urza Tvorba webu Tabulkový layout a linky Martin Urza Layout (rozvržení) stránky Layout HTML dokumentu znamená rozložení prvků na stránce. S anglickým výrazem (layout) se nejspíš setkáte častěji než s českými

Více

Manuál Redakční systém

Manuál Redakční systém Manuál Redakční systém SA.07 Obsah Úvod... ) Struktura webu... ) Aktuality... 0 ) Kalendář akcí... ) Soubory ke stažení... 6 5) Fotogalerie... 8 Redakční systém umožňuje kompletní správu vašich internetových

Více

Administrace webu Postup při práci

Administrace webu Postup při práci Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

Více

Tvorba webových stránek

Tvorba webových stránek Metodický list číslo 1 webových stránek v netriviální kvalitě a pochopení Požadavky: Znalost základů práce s MS Windows 95 nebo podobným prostředím. 1. téma: Základy HTTP Základy fungování počítačových

Více

Internet 2 css, skriptování, dynamické prvky

Internet 2 css, skriptování, dynamické prvky Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní

Více

align horizontální zarovnání left, center, right, justify (= do bloku) width minimální šířka buňky počet pixelů, procento šíky tabulky

align horizontální zarovnání left, center, right, justify (= do bloku) width minimální šířka buňky počet pixelů, procento šíky tabulky Dvojí použití tabulek Na internetových stránkách se tabulky používají ve dvou případech: 1. Jestliže je potřeba udělat klasickou tabulku. 2. Jako pomůcka pro úpravu stránek, když je něco potřeba někam

Více

Výukový materiál KA č.4 Spolupráce se ZŠ

Výukový materiál KA č.4 Spolupráce se ZŠ Výukový materiál KA č.4 Spolupráce se ZŠ Modul: Téma workshopu: Výpočetní technika Co je to internet? Jak si udělat vlastní www stránku? Vypracovala: Ing. Lenka Hellová Termín workshopu: 30. říjen 2012

Více

Internet cvičení. ZS 2009/10, Cvičení 3.,8.12.2009. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz

Internet cvičení. ZS 2009/10, Cvičení 3.,8.12.2009. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz Internet cvičení ZS 2009/10, Cvičení 3.,8.12.2009 Tomáš Pop DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz CHARLES UNIVERSITY PRAGUE Faculty of Mathematics and Physics Java Script obecně Moc

Více

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Uvádí

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

ZEBU webdesign s.r.o. Technologická 372/2 +420 597 305 937 70800 Ostrava Pustkovec info@zebu.cz

ZEBU webdesign s.r.o. Technologická 372/2 +420 597 305 937 70800 Ostrava Pustkovec info@zebu.cz DIČ: CZ24704091 Strana: 1 / 18 Obsah 1. Úvod... 3 2. Přihlášení... 4 2.1. Zapomenuté heslo... 4 3. Redakční systém... 5 3.1. Sekce Stránky... 5 3.1.1. Přidání přesměrování... 6 3.1.2. Přidání překladu...

Více

Internetové technologie, cvičení č. 5

Internetové technologie, cvičení č. 5 Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a

Více

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4 MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY...

Více

Začátek formuláře. odeslat. Konec formuláře

Začátek formuláře. odeslat. Konec formuláře Přehled formulářových tagů vymezení oblasti formuláře vstupní políčko, odesílací políčko, zaškrtávátka, přepínače, prostě mnoho věcí. Co to přesně bude, určuje type výběr, taková

Více

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 1 Obsah 1. Přihlášení 2. Výpis sekcí 3. Vytvoření nové sekce 4. Editace sekce 4.1. Výběr sekce k editaci 5. Editace hlavičky

Více

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Microsoft Office Excel 2003

Microsoft Office Excel 2003 Microsoft Office Excel 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2014 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu Excel... 4

Více

Úvod do email systému

Úvod do email systému Úvod do email systému Základní informace Toto emailové prostředí je rozloženo do tří hlavních částí - rámců. Levý rámec zobrazuje aktuálně přihlášené složky. V pravé části strany se realizuje veškerá činnost

Více

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03a 1. Úvod do značkovacích jazyků HTML a XHTML 2. Struktura webové stránky, popis částí

Více

Tvorba internetových stránek. Jazyk HTML

Tvorba internetových stránek. Jazyk HTML Tvorba internetových stránek Jazyk HTML Stránky www nejpoužívanější služba internetu: WWW World wide web služba poskytuje (zpřístupňuje) hypertextové dokumenty (= internetové stránky) dokumenty jsou přenášeny

Více

Stručný návod k HTML editoru v CMS Portia 4

Stručný návod k HTML editoru v CMS Portia 4 Stručný návod k HTML editoru v CMS Portia 4 2 03/2015 Představení HTML editor je jednoduchý textový editor pro webové stránky. Nabízí většinu hlavních funkcí jako mají velké editory typu Word pro použití

Více

Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6.

Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Úprava stránek Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Média 1. Popis ikon editoru použitých v šabloně krátký popis detaily

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ Střední průmyslová škola a Střední odborné učiliště, Trutnov, Školní 101, tel.: +420 499 813 071, fax: +420 499 814 729, e-mail: skola@spssoutu.cz, URL: http://www.spssoutu.cz Osnova kurzu OBSLUHA PC ZÁKLADNÍ

Více

Práce s administračním systémem internetových stránek Podaných rukou

Práce s administračním systémem internetových stránek Podaných rukou Práce s administračním systémem internetových stránek Podaných rukou 2011 Ing. Jakub Matas Přihlášení a uživatelský účet Přihlášení Přihlášení do aplikace lze dvěma způsoby: 1. Pomocí panelu ve vrchní

Více

HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI. Autor: Petr Kříž

HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI. Autor: Petr Kříž HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI Autor: Petr Kříž 1.kapitola - Úvod Když někdo řekne internetová stránka, téměř každému se vybaví prezentace firmy, osobní stránka aj. možnosti, které zaručují

Více

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... 9 Slovo úvodem Editaci článků provádějte v prohlížeči MOZILLA FIREFOX!

Více

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017. Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou

Více

Tabulkový procesor Microsoft Excel

Tabulkový procesor Microsoft Excel Tabulkový procesor Microsoft Excel Úvod Tabulkový procesor Microsoft Excel spolu s Microsoft Word, Access, Outlook, PowerPoint a FrontPage tvoří programový balíku Microsoft Office. Tabulkový procesor Microsoft

Více

Programování webových stránek

Programování webových stránek Gymnázium J. K. Tyla Programování webových stránek Seminární práce z IVT Autor: Roman Lamberský Třída: 2.B Hradec Králové 2012 Prohlášení: Prohlašuji, že jsem tuto seminární práci vypracoval samostatně

Více

Manuál pro interní potřebu Základní školy Uhlířské Janovice

Manuál pro interní potřebu Základní školy Uhlířské Janovice ZÁKLADNÍ ŠKOLA UHLÍŘSKÉ JANOVICE Manuál pro interní potřebu Základní školy Uhlířské Janovice Hana Blažková Uhlířské Janovice 2007 Úvod Začátkem roku 2007 zprovoznila naše škola nové webové stránky. Základem

Více

(X)HTML a CSS. VOŠ a SŠT Česká Třebová

(X)HTML a CSS. VOŠ a SŠT Česká Třebová (X)HTML a CSS Mgr. Petr Slívko VOŠ a SŠT Česká Třebová STRUKTURA WEBU Webová prezentace (anglicky website) je několik webových stránek provázaných hypertextovými odkazy. Tomu, které stránky web obsahuje

Více

Základy WWW publikování

Základy WWW publikování Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz

Více

Microsoft Office PowerPoint 2003

Microsoft Office PowerPoint 2003 Microsoft Office PowerPoint 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 4 3 Základy programu PowerPoint...

Více

Webová stránka. Matěj Klenka

Webová stránka. Matěj Klenka Webová stránka Matěj Klenka Osobní webová stránka Toto je dokumentace k mé webové stránce This is a documentation to my web page Já, Matěj Klenka, prohlašuji, že má webová stránka byla vytvořena mnou a

Více

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide. ESCAPE OF VIRUSES Hra Escape of viruses je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra se spouští tlačítkem Start game. Úkolem hráče je eliminovat viry na hrací ploše kliknutím kurzoru

Více

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

Více

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Fungování internetu je celosvětový systém navzájem propojených počítačových sítí ve kterých

Více

Úvod. Program ZK EANPRINT. Základní vlastnosti programu. Co program vyžaduje. Určení programu. Jak program spustit. Uživatelská dokumentace programu

Úvod. Program ZK EANPRINT. Základní vlastnosti programu. Co program vyžaduje. Určení programu. Jak program spustit. Uživatelská dokumentace programu sq Program ZK EANPRINT verze 1.20 Uživatelská dokumentace programu Úvod Základní vlastnosti programu Jednoduchost ovládání - umožňuje obsluhu i málo zkušeným uživatelům bez nutnosti většího zaškolování.

Více

KAPITOLA 8 TABULKOVÝ PROCESOR

KAPITOLA 8 TABULKOVÝ PROCESOR KAPITOLA 8 TABULKOVÝ PROCESOR FORMÁT BUNĚK Parametry formátu buněk a tabulky můžeme nastavit pomocí celkem šesti karet v nabídce Domů/Buňky FORMÁT BUNĚK - OKNO FORMÁT BUNĚK Karta Číslo - nastavuje formát

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

Více

Práce s webovými stránkami pro zaměstnance, zjištění návštěvnosti webu PRO-BIO Svaz ekologických zemědělců

Práce s webovými stránkami pro zaměstnance, zjištění návštěvnosti webu PRO-BIO Svaz ekologických zemědělců Práce s webovými stránkami pro zaměstnance, zjištění návštěvnosti webu PRO-BIO Svaz ekologických zemědělců TOTO VZDĚLÁVÁNÍ JE FINANCOVÁNO Z PROSTŘEDKŮ ESF PROSTŘEDNICTVÍM OPERAČNÍHO PROGRAMU LIDSKÉ ZDROJE

Více

ADMINISTRAČNÍ ROZHRANÍ - MANUÁL

ADMINISTRAČNÍ ROZHRANÍ - MANUÁL ADMINISTRAČNÍ ROZHRANÍ - MANUÁL OBSAH ÚVODNÍ STRÁNKA... 2 PRODUKTY... 3 Nový produkt, upravit produkt... 3 Listování produkty... 4 KATEGORIE... 6 Nová kategorie, upravit kategorii... 6 Listování kategoriemi...

Více

HTML. PIA 2012/2013 Téma 1. P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita

HTML. PIA 2012/2013 Téma 1. P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita HTML PIA 2012/2013 Téma 1 P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita HyperText Markup Language... a document structuring language hypertext SGML/XML aplikace http://www.w3.org/markup/ 2 Verze:

Více

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

Když vložíte do hlavičky dokumentu stylopis (anglicky stylesheet), můžete ovlivnit i barvu odkazů. Jak se to píše:

Když vložíte do hlavičky dokumentu stylopis (anglicky stylesheet), můžete ovlivnit i barvu odkazů. Jak se to píše: Odkazy Barvy odkazů se v HTML definují jako atribut tagu body. Link znamená barvu nenavštíveného odkazu, vlink navštíveného a alink znanená aktivní odkaz.

Více

Webový editor MARKET INOVATOR verze 1.0.0.0

Webový editor MARKET INOVATOR verze 1.0.0.0 Webový editor MARKET INOVATOR verze 1.0.0.0 Uživatelská příručka Úprava hotových webových prezentací 1.krok stáhnout web ze serveru Chceme-li provádět úpravy na webových stránkách, které jsou na internetovém

Více

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

TABULKY U STÁTNÍCH ZKOUŠEK

TABULKY U STÁTNÍCH ZKOUŠEK TABULKY U STÁTNÍCH ZKOUŠEK Obsah Co říká norma:... 2 Nadpis... 2 Měrná jednotka... 2 Hlavička tabulky...2 Sloupce... 2 Řádky... 3 Součty... 3 Obecná poznámka... 3 Zvláštní poznámky...3 Značky v tabulce...

Více

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

Více

(X)HTML. Internetové publikování

(X)HTML. Internetové publikování (X)HTML Internetové publikování 1 Prohlížeč Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče Microsoft Internet Explorer Firefox Opera Safari WWW stránka WWW stránka dokument (soubor) s informacemi

Více

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Kartografická webová aplikace Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Datum vzniku dokumentu: 3. 11. 2011 Datum poslední aktualizace: 10. 12. 2011 Cíl

Více

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Grafika pro web Funkce grafiky na webu Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Funkce grafiky na webu Sekundární grafická informace Dekorace Zvýraznění Šipky Oddělovače Funkce

Více

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní

Více

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language XHTML a tvorba webu 1. Historie a základní struktura HTML HyperText Markup Language - HTML 0.9 první verze 1991 - Značkovací jazyk pro zápis dokumentů na webu - Vkládání do textu obrázků, hypertextových

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Nové přístupy tvorby web site Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Osnova Úvod Web site - jasný cíl Technologie - dynamický web Forma - vyšší interaktivita Obsah - stálá aktualizace

Více