PODPORA ELEKTRONICKÝCH FOREM VÝUKY

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

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

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

12. Základy HTML a formuláře v HTML

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

Více

Návrh a tvorba WWW stránek 1/8. Formuláře

Návrh a tvorba WWW stránek 1/8. Formuláře Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou

Více

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se.

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)

Více

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky Sémantická - pomocí HTML Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu,

Více

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí!

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! Formuláře Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve

Více

Atribut Význam Hodnoty

Atribut Význam Hodnoty Formuláře Tag Význam Párový Výskyt form formulář ano input vstupní pole ne select výběrové pole ano option volba ne textarea velké vstupní pole ano label popis pole ano

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

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši

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

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

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313 Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 13 VY 32 INOVACE 0101 0313 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor

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 HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

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

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

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

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585 Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

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

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

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného

Více

Tvorba internetových stránek

Tvorba internetových stránek Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting?

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

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

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

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

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 webu. Základní HTML tagy. Martin Urza

Tvorba webu. Základní HTML tagy. Martin Urza Tvorba webu Základní HTML tagy Martin Urza Cvičení V průběhu přednášky budou postupně probírány jednotlivé základní elementy jazyka HTML a jejich atributy. Nemá smysl tyto věci probírat jen teoreticky

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

4. POČÍTAČOVÉ CVIČENÍ

4. POČÍTAČOVÉ CVIČENÍ 4. POČÍTAČOVÉ CVIČENÍ Cílem dnešního cvičení je vytvořit formuláře obsahující zaškrtávací pole a přepínací tlačítka. Vstupní pole pro zadání hesla

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

Manuál k editoru TinyMCE

Manuál k editoru TinyMCE Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,

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

Obsah. Stručná historie World Wide Webu 7

Obsah. Stručná historie World Wide Webu 7 KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu

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. 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á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

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

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

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

ZŠ ÚnO, Bratří Čapků 1332

ZŠ ÚnO, Bratří Čapků 1332 TS Výuka informatiky I (ovládání textových editorů) Terasoft - možnost instalovat jeden až tři kurzy (cvičení fungují pouze s nainstalovaným vlastním editorem) : o Výuka MS Office Word 2003 o Výuka MS

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

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

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

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

EU-OPVK:VY_32_INOVACE_FIL19 Vojtěch Filip, 2014

EU-OPVK:VY_32_INOVACE_FIL19 Vojtěch Filip, 2014 Číslo projektu CZ.1.07/1.5.00/34.0036 Tématický celek Inovace výuky ICT na BPA Název projektu Inovace a individualizace výuky Název materiálu Microsoft Word styly, tabulky, obrázky Číslo materiálu VY_32_INOVACE_FIL19

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

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Internet

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

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

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

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

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603

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

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

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

M E T O D I K A W I K I

M E T O D I K A W I K I M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po

Více

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako.

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého

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

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

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

K 2 - Základy zpracování textu

K 2 - Základy zpracování textu Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY

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

Grafické rozhraní pro práci s formuláři přes internet Graphic interface for working with forms placed on Internet. Bc.

Grafické rozhraní pro práci s formuláři přes internet Graphic interface for working with forms placed on Internet. Bc. Grafické rozhraní pro práci s formuláři přes internet Graphic interface for working with forms placed on Internet Bc. Marek Kojecký Diplomová práce 2007 ABSTRAKT Práce pojednává o webových aplikacích

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

Textové editory. Ing. Luděk Richter

Textové editory. Ing. Luděk Richter Textové editory Ing. Luděk Richter Střední škola, Havířov-Šumbark, Sýkorova 1/613, příspěvková organizace Tento výukový materiál byl zpracován v rámci akce EU peníze středním školám - OP VK 1.5. Výuková

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

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

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

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

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

Více

v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému)

v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému) Historie HTML 1989 v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému) 1991 zveřejnění neformální specifikace jazyka HTML

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

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

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

Tabulkové processory MS Excel (OpenOffice Calc)

Tabulkové processory MS Excel (OpenOffice Calc) Maturitní téma: Tabulkové processory MS Excel (OpenOffice Calc) Charakteristika tabulkového editoru Tabulkový editor (sprematuritníadsheet) se používá všude tam, kde je třeba zpracovávat data uspořádaná

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

Ú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

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

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

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

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

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

Prezentace. Prezentace. 5. InDesign vzory, znakové styly. Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012. www.isspolygr.cz

Prezentace. Prezentace. 5. InDesign vzory, znakové styly. Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012. www.isspolygr.cz 5. InDesign vzory, znakové styly www.isspolygr.cz Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012 Strana: 1 Škola Ročník 4. ročník (SOŠ, SOU) Název projektu Interaktivní metody zdokonalující proces edukace

Více

III/2 Inovace a zkvalitnění výuky prostřednictvím ICT EU-OVK-VZ-III/2-ZÁ-315

III/2 Inovace a zkvalitnění výuky prostřednictvím ICT EU-OVK-VZ-III/2-ZÁ-315 Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Jazyk Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět Cílová skupina (ročník) Úroveň

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

Formátování buněk EU peníze středním školám Didaktický učební materiál

Formátování buněk EU peníze středním školám Didaktický učební materiál Formátování buněk EU peníze středním školám Didaktický učební materiál Anotace Označení DUMU: VY_32_INOVACE_IT4.07 Předmět: IVT Tematická oblast: Microsoft Office 2007 Autor: Ing. Vladimír Šauer Škola:

Více