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

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

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

Transkript

1 SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE 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

2 A. Základní struktura HTML dokumentu Zkratkou HTML rozumíme Hypertext Markup Language hypertextový jazyk se značkami. Jazyk se skládá s příkazů, kterým se říká značky obr Na začátku každého dokumentu musí být umístěna značka <HTML>, závorku < získáme Alt+60, závorku > obrdžíme po dvojhmatualt Na konci dokumentu je třeba značky </HTML>. Značkami oznamujeme internetovému prohlížeči, že jde o zdrojový kód v jazyce HTML. 2. Blok textu označený značkami <HEAD> a </HEAD> slouží k popisu obsahu vytvářené stránky. Text uvnitř značek by se neměl na výsledném dokumentu zobrazit. 3. značky <BODY> a </BODY> ohraničují vlastní tělo HTML dokumentu. Tato část bývá největším úsekem HTML dokumentu. 4. Uvnitř značek <HEAD> a </HEAD> bývají ještě značky <TITLE> a </TITLE>, mezi nimiž je umístěn text, která je zobrazován na horní liště prohlížeče. B. Nadpisy Obrázek 2 na následující stránce nám ukáže nastavení nejpoužívanějších velikostí textu v nadpisech dokumentů HTML. V běžné praxi používáme asi šesti uvedených velikostí. Programový kód určuje velikosti písma jednotlivých řáků, které mají představovat nadpisy. Tyto řádky je třeba ohraničit značkou <H číslo > zleva a </H číslo > zprava. Povšimněme dvou řádků, které jsou v HTML kódu zapsány bez <H číslo > ohraničení. 2

3 Obr. 2 Výsledný efekt je patrný z vyobrazení přes prohlížeč, které nám poskytuje následující obrázek Obr.3 Zajímavou vlastností textu v internetovém prohlížeči ( narozdíl od bežných textových editorů pracujících pod MS Windows ) je, že text máme na daném řádku zobrazen celý i ve zúženém okně. V našem případě jsme použili jako prohlížeče Internet Explorer 5. Modifikovaný vzhled 3

4 naší stránky je zřejmý z obrázku 4 (vlevo) a obrázku 5 (vpravo). Zužuje-li se okno prohlížeče, HTML text se přelévá tak, aby byl daný nadpis zobrazen celý. Právě na tuto vlastnost HTML textu, která úzce souvisí s vnějšími parametry - např. zvolenou rozlišovací schopností monitorů či s nastavením velikosti písma, které zobrazuje prohlížeč, si musí budoucí tvůrce webových stránek zvyknout a zohlednit ji také i v celkovém designu. Nám zobrazovaný dokument řádkuje nezávisle na zdrojovém textu. řádkuje v závislosti na rozlišení monitoru (např. 800x600 pixelů) a v závislosti na velikosti písma, které si uživatel volí přímo na svém prohlížeči pomocí rutiny :Zobrazit Písma. Nastavení rozlišení monitoru a nastavení velikosti písma zobrazovaného prohlížečem vidíme na obrázku 6. Obr.6 4

5 C. Atributy V úvodu skripta bylo sděleno, že v jazyce HTML používáme značky, tagy, z nichž má každá určitou funkci. Příkaz však může obsahovat také několik atributů upřesňujících parametrů, které se vztahují k upravení výsledné funkce určitého příkazu. Atribut ALIGN nám v ukázce na obrázku 7 umožní zarovnání písma zvolené velikosti vlevo, vpravo, na střed a do bloku. V posledním textovém řádku Obr. 7 <H5 ALIGN ="JUSTIFY">Pátým řádkem je ukázka bloku textu, který představuje jeden velmi dlouhý řádek v textovém editoru "Poznámkový blok", a který bude atributem JUSTIFY zarovnáván k oběma okrajům internetového prohlížeče při zachování zvolené velikosti písma. V našem případě byla zvolena velikost 5.</H5> je dlouhý text, který interpret webového kódu přepíše do prohlížeče jako souvislý text zarovnaný vždy do bloku. Vzhled různě zarovnaných fragmentů textu je na ploše Internet Exploreru v. 5 na obrázku 8. Obr. 8 5

6 Atribut ALIGN použijeme v případě, když chceme určitý objekt ( Nadpis, text, obrázek ) Zarovnat jinak, než vlevo. Shrnutí použití atributu ALIGN : <H3 ALIGN ="CENTER">-nadpis s písmem o velikosti 3 zarovnaný na střed </H3> Hodnota atributu Atribut Ukončovací příkaz ( tag, značka ) Zahajovací příkaz ( tag, značka ) D. Formátování textu Obrázek č.9 je ukázkou výpisu pro základní formáty textu v programovacím jazyce HTML. Obr. 9 Přestože jsme se snažili v programu na obrázku 9 psát každý z příkazů na zvláštní řádek, bude řádky i mezery každý internetový prohlížeč ignorovat. Lze si to snadno ověřit na již existujícím jednoduchém HTML programu, kde úmyslně ponecháme mezeru mezi znaky v proslulém Einsteinově vztahu pro energii a hmotnost. Mezera se neprojeví. Obrázek 10 na následující straně nám ukáže výsledek naší práce ve stále stejné podobě. 6

7 Obr. 10 Jestliže napíšeme slovo JAN na jednu řádku a slovo MARKÉTA na druhou řádku, internetový prohlížeč je ve shodě se zkušeností z programu na obrázku 9 zobrazí do jednoho řádku viz obr. 10 nahoře. K vytvoření odstavců, řádků a mezer slouží další příkazy. S nimi nás seznámí vyobrazení programu HTML na obrázku 11 v další kapitole. E. Strukturování textu Obr. 11 Text umístěný mezi příkazy <P>.. </P> tvoří jeden odstavec. Výsledek své práce můžeme spatřit opět v internetovém prohlížeči, jehož šířku můžeme vhodně měnit, viz 7

8 obr. 12 (vlevo ) a obr. 13 ( vpravo ). Text se nám stále zachovává v podobě odstavce. Nyní použijeme dalšího příkazu. Je to příkaz <BR>, který ukončí aktuální řádek a přeskočí na řádek nový. Příkazu <BR> lze použít i několikrát za sebou. Dosáhneme tak v textu uživatelem požadovaných několikařádkových mezer. Velikost vynechaných řádků řídí počet příkazů <BR>. Následující program v jazyce HTML si klade za cíl funkci příkazu <BR> ozřejmit na jednoduchém příkladě, který je vyobrazen na obr. 14, kde si zopakujeme výpis základních formátů textů. S použitím <BR> však již nebudou umístěny v jednom řádku, jak je tomu v případě programu na obr. 9, či zobrazení na prohlížeči viz obr. 10, ale každý formát bude mít určen svůj vlatní řádek. Obr.14 8

9 Zmodifikovaný program se zobrazí v prohlížeči v souladu s obrázkem 15. Úvodní řádek je oproti obr.10 nezměněn, avšak následující text je oddělen dvěma mezerami. Pokračující hesla mají každé svůj řádek Obr.15 Další možnost jak zlepšit vzhled testu na své webové stránce je oddělit jednotlivé partie čarou. K tomu nám slouží příkaz <HR>, který vytvoří vodorovnou čáru. Vlastnosti takové čáry lze modifikovat pomocí atributů. Atribut SIZE mění tloušťku čáry a atribut NOSHADE (Shade=stín) vytvoří jednoduchou čáru bez stínování. Obr.16 9

10 Internet Explorer zobrazí program z obr. 16 čáry k rozdělení stránky na požadované části. F. Řezy písma, odstavce, řádky a čáry Obr. 17 Odstavec ohraničený <P> </P> může být doplněn atributem ALIGN Text v příslušném odstavci může být zarovnán vlevo, vpravo, na střed nebo do bloku. Praktické použití a výsledný vzhled nalezneme na obr. 18 a obr. 19. Obr

11 Vzhled programu z obr. 18 v internetovém prohlížeči. Obr. 19 V minulé kapitole jsme se seznámili s možností vytvořit vodorovnou čáru. Používali jsme k tomu příkazu <HR>, který je možno doplnit atributy. Známe již použití atributu SIZE, který nastavuje tloušťku čáry a atributu NOSHADE, který odstranil stínování viz obr. 16 a 17. Následující obrázky nám ukážou možnost měnit také délku čáry a to pomocí atributu WIDTH, jehož zadáváme obvykle v procentech viz obr. 20. Atribut ALIGN zajistí zarovnání čáry vlevo, (LEFT) vpravo, (RIGHT) nebo na střed (CENTER). Jiné hodnoty atributu ALIGN nejsou přípustné. Barvu čáry nastavíme atributem COLOR. Nabývá hodnot BLACK, BLUE, GRAY, GREEN, RED, WHITE a YELLOW. Obr

12 Zarovnání několika odstavců najednou příkaz DIV Odstavec dokážeme zarovnat pomocí atributu ALIGN u příkazu <P>. Bude-li však naše WWW stránka obsahovat deset odstavců, bylo by neobratné a hlavně pracné zarovnávat množství odstavců jednotlivě. Potřebný blok odstavců ohraničíme v našem textu příkazem <DIV ALIGN= typ zarovnání >..</DIV>. Více nám situaci ozřejmí obr. 21 a obr. 22. Obr. 21 Obr. 22 Pokud bychom u každého z odstavců využili atribut ALIGN zvlášť, šlo by o pracnější postup zejména při velkém množství odstavců. Vzhled programu v prohlížeči je totožný s obr. 22. Příkaz PRE přesný vzhled v dokumentu Naším úkolem je zapsat do WWW stránek přehled sportovních výkonů. Do tabulky ve zdrojovém textu zapíšeme potřebné údaje viz obr. 23 Obr

13 Načteme-li tento program internetovým prohlížečem, nebudeme spokojeni obr. 24. Internetový prohlížeč ignoruje všechny mezery a to je jeho vlastnost. Obr. 24 Chceme-li, aby rozvržení textu odpovídalo zápisu v HTML souboru, použijeme součinnou dvojici příkazů <PRE> a </PRE>. Na obrázku 25 vidíme poopravený zdrojový text. Obr. 25 Prohlížeč zobrazí zapsaná data k naší větší spokojenosti viz následující obrázek obr. 26 Obr

14 Text se na WWW stránce zobrazí v takovém rozvržení, jaké bylo použito v HTML souboru. G. Vložení obrázku do WWW stránky Pro vkládání obrázků do WWW stránky se používá příkaz IMG (Image) s atributem SRC (Source). Syntaxe příkazu je zřejmá z obrázku 27. Obr. 27 Pro WWW stránky doporučuji zatím nejrozšířenější formát obrázků a tím jsou JPG a GIF. Výsledek je patrný z následujícího vyobrazení - tak interpretuje příkaz prohlížeč- obr. 28 Obr

15 Obrázek je pro uvedený příkaz např. <IMG SRC="Stonehenge.jpg"> zapotřebí nakopírovat do téže složky jako zdrojový HTML program. Úprava velikosti obrázku Obrázek vložený v našem programu je však zapotřebí zmenšit. Pro splnění tohoto požadavku zavádíme dva nové atributy WIDTH a HEIGHT. WIDTH určuje šířku obrázku a HEIGHT nastavuje výšku obrázku. Rozměry obrázku se zadávají v pixelech bodech. Posazení obrázku na střed, levý či pravý okraj stránky řeší atribut ALIGN. Další je zřejmé z programu HTML na obrázku 29. Obr. 29 Samotný efekt vzhled upraveného obrázku na prohlížeči Internet Explorer je patrný z obr. 30. Umístíme-li na WWW stránkách obrázek, mějme na zřeteli dobu, po kterou se obrázek bude načítat. Není proto vhodné umísťovat na své stránky obrázky velkokapacitní, které se načítají neúměrně dlouhý čas. Publikovaný obrázek na Vašich stránkách bude vždy kompromisem mezi jeho kvalitou a rychlou zobrazitelnoustí na prohlížeči. Obrázek šak nemusí mít vždy tmavé okraje dané jeho vzhledem. Pak se může stát, že nevhodně splývá Obr. 30 s pozadím. Tehdy je třeba obrázek orámovat. Orámování dosáhneme zavedením atributu BORDER. Komentář k obrázku, který se zobrazí po přiložení myši na jeho plochu zapíšeme za atribut ALT do uvozovek. Použití atributů BORDER a ALT je předvedeno na obr. 31 Obr

16 Přiložíme-li nyní na obrázek myš, objeví se zakrátko stručný popisek snímku Eclipse. V případě, že se na našich stránkách z jakéhokoli důvodu požadovaný obrázek nezobrazí, bude se na jeho místě zobrazovat popisek, který zavádíme do atributu ALT. Popisek zapisujeme v uvozovkách. Další jeho výbornou funkcí je zobrazení se při kratším podržení myši na ploše obrázku. Tuto situaci nám zobrazují obrázky z prohlížeče obr. 32 a 33. Zdrojový HTML text pro obr. 33 nalezneme na obr. 34. Všimněme si zde příkazu <BR>, který u obou Obr. 32 obrázků vynecháním řádku lépe odděluje nadpis od od plochy. Obr. 33 H. Hypertextový odkaz Obr. 34 Hypertextový odkaz je slovo, ěkolik slov, věta nebo obrázek, které jsou umístěny na WWW stránce a na které lze kliknout. Po kliknutí se vám obrazí nová stránka. Pomocí hypertextových odkazů lze provázat několik stránek. Na WWW stránkách bývaji hypertextové odkazy zobrazeny většinou modrým a podtrženým písmem. Pokud na tento odkaz najedeme kurzorem, změní se kurzor v ručičkuů. Jakmile se ručička objeví, můžeme kliknout. Po kliknutí bude načtena WWW stránka, na kterou příslušný hypertextový odkaz ukazuje. Pro vytvoření hypertextového odkazu použijeme příkazu <A>, který může obsahovat několik atributů. Zde použijeme atribut HREF. Strategie tvorby takových provázaných stránek je graficky znázorněna na obr. 35 Mesic.htm Saturn.htm Astronaut.htm Raketoplan.htm Hypertext_index.htm Obr. 35 Kometa.htm 16

17 Hlavní dokument je ten, z něhož vedou hypertextové odkazy na další stránky viz obr. 36 Obr. 36 Obr. 37 Obr. 38 Obr.39 Obr. 40 Obr. 41 Na obrázcích vidíme jednotlivé stránky, které jsou provázány hypertextovými odkazy v souladu se schématem na obr. 35. Zde je již zcela funkční model skutečné sestavy vhodné pro publikaci na internetu. 17

18 I. Jednoduchá tabulka Umíme již vytvořit základní strukturu WWW stránky, formátovat text, vkládat obrázky a vzájemně propojovat stránky pomocí hypertextových odkazů. V této kapitole se budeme věnovat tvorbě tabulky. Každá tabulka musí začínat příkazem <TABLE> a končit příkazem </TABLE>. Každý řádek tabulky je ohraničen příkazy<tr> a </TR>. Obsah každé buňky v tabulce je ohraničen příkazy <TD> a </TD>. Každý z uvedených příkazů může obsahovat několik atributů. V ukázkovém programu bylo použito u příkazu TABLE atributu BORDER, který udává tloušťku ohraničení tabulky ( my máme zadáno <TABLE BORDER=1> Struktura HTML tabulky <TABLE BORDER=1> 4. <TR> <TD>První buňka v prvním řádku</td> <TD>Druhá buňka v prvním řádku</td> 1. </TR> 2. <TR> <TD>První buňka v druhém řádku</td> <TD>Druhá buňka v druhém řádku</td> </TR> </TABLE> Každá tabulka začíná příkazem <TABLE> a končí </TABLE> 2. Řádek tabulky žačíná <TR> a končí </TR> 3. Buňka tabulky začíná<td> a končí</td> 4. Atribut BORDER udává, jak tlustá má být čára ohraničující tabulku. Obr. 42 Obr

19 Barevná tabulka U příkazů <TR> a <TD> připíšeme nový atribut BGCOLOR. Tento atribut nastavuje pozadí. Ihned za atributem následuje barva pozadí. Barvu píšeme v agličtině (BLUE, RED, YELLOW atd). Atribut BGCOLOR můžeme vložit do příkazu <TR>,<TD> nebo <TABLE>. Umístíme-li tento atribut do příkazu TABLE, změníme pozadí celé tabulky všechny buňky v tabulce budou mít stejnou barvu. Umístíme-li atribut do příkazu TR, změníme barvu pouze v jednom řádku. Aplikujeme-li tentýž atribut do příkazu TD, nastavíme konkrétní barvu pouze u jediné buňky. Aplikace daných atributů do řádků i jednotlivých buněk předvádí tabulka, jejíž zdrojový HTML program je na obr. 44. Obr. 44 Výsledný obraz tabulky nevystihne černobílá laserová tiskárna :o), ale pro ilustraci lze alespoň v odstínech šedi postřehnout, že prohlížeč barevnou změnu zaznamenal obr. 45. Obr

20 Složitější tabulka Rozměry tabulky se dají měnit. Změnit můžeme i její umístění na stránce. Text uvnitř buněk lze zarovnávat. O těchto problémech pojednává následující kapitola. Obrázek 46 ukáže celkový zdrojový kód HTML tabulky. Zde nyní budeme konetovat jednotlivé kroky postupně. <TABLE BORDER=1 WIDTH="500" ALIGN="LEFT">Atribut WIDTH nastaví šířku tabulky na 500 pixelů (obrazových bodů). Atribut ALIGN zarovná celou tabulku na levou (popř. pravou) část stránky. <TR BGCOLOR="BLUE" ALIGN="CENTER"> Obsah buněk v prvním řádku bude zarovnán na střed. <TD HEIGH="50">První buňka v prvním řádku</td> Atribut HEIGH nastaví výšku prvního řádku na 50 pixelů. <TD BGCOLOR="RED" HEIGHT="100">První buňka v druhém řádku</td> Výška druhého řádku je 100 pixelů. <TD BGCOLOR="YELLOW" ALIGN="RIGHT">Druhá buňka v druhém řádku</td> Obsah buňky zarovnán vlevo. Obr. 46 Obr.47 20

21 J. Obrázek na pozadí Pro vložení obrázku na pozadí stránky se používá atribut BACKGROUND.Naším cílem bude, aby se na pozadí stránky neustále zobrazoval malý obrázek např. logo firmy. Obrázek je malý, a proto se na stránce bude neustále opakovat jako dlaždičky. Obr. 48 Klíčový povel k tvorbě pozadí je v příkazovém řádku <BODY BACKGROUND="STRUKTURA.JPG">, kde v aktuálním adresáři je uložen soubor STRUKTURA.JPG. Obr

22 Efektní je také použití atributu BGPROPERTIES, který se projeví pouze tehdy, jestliže na pozadí použijeme atribut BACKGROUND. Atribut BGPROPERTIES musí nabývat hodnoty FIXED. Abychom vliv atributu snadno pochopili je třeba, mít na stránce dlouhý text, po kterém při četbě rolujeme. Při prohlížení pozadí stojí za rolujícím textem. Za textový zdroj byl použit seznam římských císařů. Výpis programu je z důvodu rozsáhlosti seznamu uveden na pěti obrázcích Obr. 50 až 54. Obr.50 Obr. 51 Obr

23 Obr. 53 Obr. 54 Klíčový příkaz je <BODY BACKGROUND="STRUKTURA.JPG" BGPROPERTIES="FIXED"> V jeho důsledku se pozadí zastaví a text se pohybuje reakcí na myš, či na rolovací šipky nad ním. Barevné pozadí a barevný text Mezi často používané atributy příkazu <BODY> jsou BGCOLOR a TEXT. Atribut BGCOLOR udává barvu pozadí a atribut text barvu textu na WWW stránce. Užití obr. 55. Obr

24 Barevné řešení pozadí a textu není v možnostech tiskárny :o). Levý a horní okraj WWW stránky Obr. 56 Někdy se nám mohou hodit atributy LEFTMARGIN a TOPMARGIN. LEFTMARGIN je atribut, který nastavuje vzdálenost textu od levého okraje. Atribut TOPMARGIN vzdálenost textu od horního okraje WWW stránky. Jejich hodnoty se zadávají v pixelech- obrazových bodech. V příkladu na obr. 57 je použita hodnota 30 pixelů. Hodnoty lze v individuálních pokusech s atributem měnit. Klíčový řádek na obr.57 zní: <BODY BGCOLOR="AQUA" TEXT="BLUE" LEFTMARGIN="30" TOPMARGIN="30"> Obr

25 Měníme-li hodnoty TOPMARGIN a LEFTMARGIN, text se prohlížeči po stisku klávesy F5 (znovunačtení) umísťuje na nové pozice v souladu s hodnotami u atributů TOPMARGIN a LEFTMARGIN. H. Tvorba stránky s použitím tabulkových příkazů Příkazy pro tvorbu tabulek se často používají k formátování a rozvržení textu na WWW stránce. Na stránkách, které budou v kapitole H. tvořeny, uplatníme dvě efektní techniky. a) hypertextový odkaz se mění na černý text v případě, že se nacházíme na příslušné stránce. b) V horní a levé částo stránky umístíme pruhy s příkazy. Na obrázku 58 na další najdeme zdrojový HTML kód. 1.) <BODY LINK="RED" ALINK= RED VLINK="RED">Atributy za příkazem BODY =>jsou LINK, VLINK a ALINK. Nastavují barvy hypertextových odkazů. Standartně se hypertextové odkazy zobrazují v modré barvě a po kliknutí se mění ve fialovou. Uvedenými atributy lze barevné nastavení měnit. LINK nastavuje barvu odkazů, které ještě nebyly vybrány na které jěště nebylo kliknuto. Atribut ALINK nastavuje barvu odkazů, na které právě klikáme. Atribut VLINK udává barvu odkazů, na které již bylo kliknuto. Barva všech hypartextových odkazů zůstává v našem programu vždy červená. 2.) <TABLE WIDTH="100%" BGCOLOR="AQUA"> Tato tabulka má pouze jeden řádek o jedné buňce. Atribut WIDTH nastavuje šířku tabulky. Ta je 100%. Tabulka se tedy roztáhne po celé stránce. Atribut BGCOLOR nastaví barvu pozadí na AQUA = světle modrou barvu. 3.) <TR ALIGN="CENTER"> Příkaz TR definuje první a jediný <TD><FONT SIZE="+3"> Webová stránka firmy M.O.C.</FONT></TD> řádek v tabulce. Příkaz TD definuje </TR> </TABLE> první a jedinou buňku v prvním řádku Atribut ALIGN je nastaven na hodnotu CENTER, což způsobí zarovnání celého obsahu řádku na střed. Příkaz FONT se používá pro změnu velikosti a barvy písma, jehož velikost SIZE byla nastavena na ) <TABLE WIDTH="100%" HEIGHT="100%"> Ze začíná druhá tabulka, která obsahuje jeden řádek o dvou buňkách. V levé buňce budou hypertextové odkazy a v pravé buňce bude text. Atribut WIDTH nastavuje šířku tabulky 100% roztáhne se po celé stránce zleva doprava. Atribut HEIGHT nastavuje výšku tabulky (100%) roztáhne se odshora dolů. 5.) <TR VALIGN="TOP"> Zde začíná první a jediný řádek druhé tabulky. U příkatu TR nalezneme atribut VALIGN, který je nastaven na hodnotu TOP. Atribut VALIGN slouží k zarovnání textu nahoru k horníhu okraji buňky. 6.) <TD WIDTH="150" BGCOLOR="AQUA" ALIGN%"CENTER"> Zde začíná první buňka v prvním řádku. Atribut WIDTH nastavuje šířku celé buňky na 150 pixelů. Jde ošířku levého světle modrého pruhu. Atribut BGCOLOR dává pruhu barvu. Vzpomeňme si na základní pravidla hypertextového odkazu. Záměrně si připomeňme již použitý hypertextový odkaz <A HREF="Mesic.htm">Měsíc</A> Nyní bude hypertextový odkaz použit znovu. Mesic.htm je stránka, na kterou se po kliknutí máme přepojit a Měsíc 25

26 je slovo, na které je na výchozí stránce hypertext vázán. Na stránce naší firmy mají hypertextové odkazy tento tvar: Úvod <BR><BR> <A HREF="24.htm">Naše nabídka</a><br><br> <A HREF="25.htm">Kontakty</A><BR><BR> </TD> Druhá buňka prvního řádku je pravou čístí naší WWW stránky. <TD ALIGN="CENTER"> <BR><BR> <H2> Vítejte na firemní stránce s obchodní značkou M.O.C....!</H2> Na levé straně naleznete odkazy, na které stačí pouze kliknout... </TD> Obsah této buňky je pomocí atributu ALIGN zarovnán na střed. Celkový vzhled HTML kódu je na obrázku 58: Obr. 58 Aby bylo možné realizovat hypertextové odkazy, zkopírujeme dohotovený dokument na dvě kopie - 24.htm a 25.htm. Na obrázcích 59 a 60 si povšimneme změn odkazů a aktualizace stručných textů na jednotlivých stránkách, které usnadní orientaci pro pozdější editaci těchto stránek na provozní podobu. 26

27 Obr. 59 Obr

28 Výsledný vzhled provázaných stránek nám ukážou obrázky 61,62 a a 63. Obr. 61 Obr. 62 Obr

29 I. Rámy Rámy nebo tzv. rámce ( anglicky FRAMES). Jde o zvláštní skupinu příkazů, které rozdělí okno prohlížeče na několik částí, z nichž se každá chová jako samostatná internetová stránka. Použití si můžeme popsat na příkladu. Okno prohlížeče je rozděleno na dvě části. Levá je úzká a jsou na ní umístěny hypertextové odkazy nabídky. Klikneme-li na některý z odkazů v levé části, zobrazí se požadovaný obsah na pravé straně. První pomocná stránka Obr. 64 <FRAMESET COLS="150,*"> Příkazy pro vytváření rámů jsou ohraničeny příkazy FRAMSET </FRAMESET> Atributem COLS internetovému prohlížeči říkáme, že vytvoříme dva rámy-dva sloupce. První sloupec rám bude mít šířku 150 pixelů. Druhý sloupec zaplní zbylou šířku stránky. (proto hvězdička). <FRAME NAME="menu" SRC="menu.htm"> Popisujeme jednotlivé rámy. Poněvadž jsme atributem COLS stanovili, že chceme dva rámy, proto zde nalézáme také dva příkazy FRAME. Jméno prvního rámce jsme stanovili na menu. Atributem SRC říkáme, že se má v tomto rámu zobrazit HTML stránka menu.htm. <FRAME NAME="hlavni" SRC="uvod.htm"> Druhým příkazem FRAME popisujeme druhý rámec (pravý sloupec) atributem NAME jsme stanovili jméno tohoto rámce jako hlavni. Atributem SRC říkáme, že se zde má zobrazit stránka uvod.htm. Kód z obrázku 64 uložíme pod názvem index.htm. Máme tak pomocnou stránku, která se nám zatím v internetovém prohlížeči nijak nezobrazí. Internetovému prohlížeči pouze oznamuje, jak má stránku rozdělit. a které HTML stránky budou v jednotlivých rámech zobrazeny. Soubory menu.htm a uvod.htm Obrázky 65 a 66 nám ukazují zdrojové kódy HTML programů, které budou vsazeny do definovaných rámů. V menu nabízíme hypertextové odkazy kapitola 1, kapitola 2, kapitola 3 a kapitola 4 v podobě HTML souborů 01.htm, 02.htm, 03.htm a 04.htm. Tyto soubory je třeba ještě dotvořit viz obrázky

30 Obr. 65 Obr. 66 Obr. 67 Obr. 68 Obr. 69 Obr

31 Výsledek naší práce je zřejmý z obrázku 71. Přeji si aby Vám toto skriptum přineslo radost a zájem o tvorbu internetových stránek. Skriptum je přirozeně kompilátem řady již dříve publikovaných rutin, pouze shrnuje do stručného celku základy problematiky tvorby statických webových stránek. V Otrokovicích, únor 2001 Text neprošel jazykovou úpravou určeno jako pomůcka pro výuku IVT, jen pro vnitřní potřebu školy. Gymnázium, Otrokovice, Spojenců OTROKOVICE :

32 Obsah A. Základní struktura HTML dokumentu... 2 B. Nadpisy... 2 C. Atributy... 5 D. Formátování textu... 6 E. Strukturování textu... 7 F. Řezy písma, odstavce, řádky a čáry G. Vložení obrázku do WWW stránky Doplněno a revidováno pro potřeby SOŠ Otrokovice pk- 32

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

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

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

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

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

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

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

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

6. Formátování: Formátování odstavce

6. Formátování: Formátování odstavce 6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy

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

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

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

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

Dokument a jeho části oddíly, záhlaví, zápatí

Dokument a jeho části oddíly, záhlaví, zápatí Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání

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

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

KAPITOLA 4 ZPRACOVÁNÍ TEXTU

KAPITOLA 4 ZPRACOVÁNÍ TEXTU KAPITOLA 4 ZPRACOVÁNÍ TEXTU TABULÁTORY Jsou to značky (zarážky), ke kterým se zarovná text. Můžeme je nastavit kliknutím na pravítku nebo v dialogovém okně, které vyvoláme kliknutím na tlačítko Tabulátory

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

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

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš Formátování Formátováním rozumíme změnu vlastností daného objektu, dle našich představ a možností programu MS Excel. Formátovat můžeme texty v buňkách, můžeme formátovat buňky, listy i celý sešit a měnit

Více

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje ROZLOŽENÍ STRÁNKY, NÁVRH Ve Wordu tedy můžeme nastavovat vlastnosti písma, vlastnosti odstavce a také vlastnosti stránky. Přesuneme se na záložku ROZLOŽENÍ STRÁNKY, kde tyto najdeme v levé části. Další

Více

Práce se styly 1. Styl

Práce se styly 1. Styl Práce se styly 1. Styl Styl se používá, pokud chceme, aby dokument měl jednotný vzhled odstavců. Můžeme si nadefinovat styly pro různé úrovně nadpisů, jednotlivé popisy, charakteristiky a další odstavce.

Více

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ Formátování textu Text formátujeme (určujeme jeho vlastnosti) na pásu karet DOMŮ. U textu můžeme formátovat font, velikost písma, řez, barvu písma, barvu

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

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

Více

1. Nastavení dokumentu

1. Nastavení dokumentu Obsah as a asta 2. Okno / více dokumentů otevírání, zavírání, vytváření nového, přepínání, ukládání 3. Barevný režim dokumentu 4. Zobrazení, vlastní pohledy 5. Objekty vkládání 1. Nastavení dokumentu Uprostřed

Více

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 4. Tvorba základní HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 25. 9. 2012 Webové Strana: 1/9 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

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

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

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

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz PŘÍRUČKA KE KURZU: ZÁKLADY PRÁCE NA PC MS WORD 2003 Gabriela Janská Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz Obsah: 1. Písmo, velikost písma, tučně, kurzíva, podtrhnout

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

Formátování pomocí stylů

Formátování pomocí stylů Styly a šablony Styly, šablony a témata Formátování dokumentu pomocí standardních nástrojů (přímé formátování) (Podokno úloh Zobrazit formátování): textu jsou přiřazeny parametry (font, velikost, barva,

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

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ákladní vzorce a funkce v tabulkovém procesoru

Základní vzorce a funkce v tabulkovém procesoru Základní vzorce a funkce v tabulkovém procesoru Na tabulkovém programu je asi nejzajímavější práce se vzorci a funkcemi. Když jednou nastavíte, jak se mají dané údaje zpracovávat (některé buňky sečíst,

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

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 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ů... 3 3 Základy programu PowerPoint...

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

Nástrojová lišta v editačním poli

Nástrojová lišta v editačním poli Nástrojová lišta v editačním poli Název projektu PŘEJÍT NA konkrétní sekci webu ZOBRAZIT zobrazí a) pracovní verzi webu (tj. nepublikovanou) b) publikovanou verzi webu a) Odstranit odstraní zobrazenou

Více

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

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

Základní škola Hluk výukové texty MS Word 2007

Základní škola Hluk výukové texty MS Word 2007 MS Word je textový editor (program pro tvorbu a editaci textových dokumentů). Ve verzi 2007 došlo k zásadní změně v grafickém prostředí a tedy i ovládání programu. Základní ovládací prvky aplikace: RÁM

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

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

MS OFFICE POWER POINT 2010

MS OFFICE POWER POINT 2010 MS OFFICE POWER POINT 2010 Program Power Point patří do rodiny programů Microsoft Office a slouží ke tvorbě prezentací. Prezentace je tvořena snímky, které jsou postupně zobrazovány a to buď po nějaké

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

VKLÁDÁNÍ OBJEKTŮ - tabulka

VKLÁDÁNÍ OBJEKTŮ - tabulka VKLÁDÁNÍ OBJEKTŮ - tabulka Autor: Mgr. Dana Kaprálová Datum (období) tvorby: srpen 2013 Ročník: šestý Vzdělávací oblast: Informatika a výpočetní technika 1 Anotace: Žák se orientuje v prostředí aplikace

Více

MS PowerPoint ZÁKLADY

MS PowerPoint ZÁKLADY MS PowerPoint ZÁKLADY UKÁZKA ŠKOLÍCÍCH MATERIÁLŮ Centrum služeb pro podnikání s.r.o. 2014, I. Verze, TP OBSAH 1. Úvod do PowerPointu... 1 2. Otevření PowerPointu... 1 3. Pracovní prostředí PowerPointu...

Více

3 Formuláře a sestavy Příklad 1 Access 2007

3 Formuláře a sestavy Příklad 1 Access 2007 TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete

Více

Úvod do problematiky ÚPRAVY TABULKY

Úvod do problematiky ÚPRAVY TABULKY Úvod do problematiky ÚPRAVY TABULKY Zaměříme se na úpravy, které určují finální grafickou úpravu tabulky (tzv. formátování.). Měnit můžeme celou řadu vlastností a ty nejdůležitější jsou popsány v dalším

Více

FORMÁTOVÁNÍ 2. Autor: Mgr. Dana Kaprálová. Datum (období) tvorby: září, říjen 2013. Ročník: sedmý. Vzdělávací oblast: Informatika a výpočetní technika

FORMÁTOVÁNÍ 2. Autor: Mgr. Dana Kaprálová. Datum (období) tvorby: září, říjen 2013. Ročník: sedmý. Vzdělávací oblast: Informatika a výpočetní technika Autor: Mgr. Dana Kaprálová FORMÁTOVÁNÍ 2 Datum (období) tvorby: září, říjen 2013 Ročník: sedmý Vzdělávací oblast: Informatika a výpočetní technika 1 Anotace: Žáci se seznámí se základní obsluhou tabulkového

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

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY]

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY] Aplikované úlohy Solid Edge SPŠSE a VOŠ Liberec Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY] 1 CÍL KAPITOLY Cílem této kapitoly je naučit se tvořit odkazy ke strojním součástem, plochám, dílům, sestavám, a práci

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

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

CZ.1.07/1.5.00/34.0632

CZ.1.07/1.5.00/34.0632 Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Inovace a zkvalitnění výuky prostřednictvím ICT Název: Téma: Autor: Číslo: Anotace: Excel Formát buňky Ing. Silvana Žárská

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

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování (nejen pro editaci STI v systému SINPRO, aktualizováno: 25. 6. 2015) v 2.0 Obsah TABULKY Úprava tabulek...

Více

Nápověda ke cvičení 8

Nápověda ke cvičení 8 Nápověda ke cvičení 8 Word přechod na další stránku: napíšeme text Motoristické časopisy vložíme 3x Enter pak klávesová zkratka CTRL+Enter Stejným způsobem přejdeme i na třetí stránku. PowerPoint vložit

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

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

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

1. Základní okno programu

1. Základní okno programu 1. Základní okno programu Po spuštění PowerPointu se zobrazí základní okno programu, které je podobné základnímu oknu ve Wordu či Excelu. 1 2 3 4 5 6 7 8 9 10 1. záhlaví = titulní lišta obsahuje název

Více

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM WordPress manuál A3 WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM WordPress manuál Ing. Karel Rejthar 16. 6. 2015-1 - OBSAH WordPress manuál......................................

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

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

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

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku: Co je HTML HTML HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu

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

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

Bible Quote 6.5 Okno programu

Bible Quote 6.5 Okno programu Bible Quote 6.5 Program Bible Quote patří mezi mnohé volně šiřitelé biblické programy, ale má jistá specifika. Ve verzi 6,5 se jedná o beta verzi, která je již zřejmě konečná. (Bohužel díky velmi nesnadnému

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

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

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

8. Formátování. Úprava vzhledu tabulky

8. Formátování. Úprava vzhledu tabulky 8. Formátování Úprava vzhledu tabulky Výšku řádku nastavíme tak, že kurzorem najedeme na rozhraní mezi políčky s čísly řádků. Kurzor se změní na křížek s dvojšipkou. Stiskneme levé tlačítko a tahem myší

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

Excel 2007 praktická práce

Excel 2007 praktická práce Excel 2007 praktická práce 1 Excel OP LZZ Tento kurz je financován prostřednictvím výzvy č. 40 Operačního programu Lidské zdroje a zaměstnanost z prostředků Evropského sociálního fondu. 2 Excel Cíl kurzu

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

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

PRÁCE S TEXTOVÝM EDITOREM 6.4 TEXTOVÉ POLE

PRÁCE S TEXTOVÝM EDITOREM 6.4 TEXTOVÉ POLE 6.4 TEXTOVÉ POLE Při tvorbě dokumentů je někdy třeba vkládat texty do rámců, kterým říkáme Textová pole. Tato textová pole, ale nemusí mít vždy pravidelný tvar (obdélník). Pomocí textových polí můžeme

Více

Nový způsob práce s průběžnou klasifikací lze nastavit pouze tehdy, je-li průběžná klasifikace v evidenčním pololetí a školním roce prázdná.

Nový způsob práce s průběžnou klasifikací lze nastavit pouze tehdy, je-li průběžná klasifikace v evidenčním pololetí a školním roce prázdná. Průběžná klasifikace Nová verze modulu Klasifikace žáků přináší novinky především v práci s průběžnou klasifikací. Pro zadání průběžné klasifikace ve třídě doposud existovaly 3 funkce Průběžná klasifikace,

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

FFUK Uživatelský manuál pro administraci webu Obsah

FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa

Více

Výukový materiál zpracován v rámci projektu EU peníze školám

Výukový materiál zpracován v rámci projektu EU peníze školám Výukový materiál zpracován v rámci projektu EU peníze školám Název školy: Střední zdravotnická škola a Obchodní akademie, Rumburk, příspěvková organizace Registrační číslo projektu: CZ.1.07/1.5.00/34.0649

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

Výukový materiál zpracovaný v rámci projektu

Výukový materiál zpracovaný v rámci projektu Výukový materiál zpracovaný v rámci projektu Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace

Více

Administrace webových stránek

Administrace webových stránek Administrace webových stránek Obsah Kontakt technické podpory... 2 Přihlášení... 2 Změna textového obsahu... 3 Nahrávání/mazání obrázků... 5 Vložení obrázku do textu... 6 Nastavení pozice obrázku vůč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

ZSF web a intranet manuál

ZSF web a intranet manuál ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,

Více

MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:

MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru: MS Word základy Úvod do MS Word. Vytvoření zástupce programu na ploše. Start Programy PK na Microsoft Word Odeslat Plocha Vytvořit zástupce Otevření dokumentu a popis prostředí: Spuštění programu Start

Více

PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE

PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE CMS Aladin CMS Aladin je modulární a otevřený publikační systém pro jednoduchou a uživatelsky přívětivou správu webových stránek. PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE VERZE 3.0 ZÁŘÍ 2012 Obsah CMS

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

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

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