Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář
|
|
|
- Filip Vávra
- před 8 lety
- Počet zobrazení:
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 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
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
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
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ý
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
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é
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML
Čtvrtek 11. dubna 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
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
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
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
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é
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
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
Práce v programu Word 2003
Práce v programu Word 2003 Prostředí programu WORD 2003 Program WORD 2003 slouží k psaní textů, do kterých je možné vkládat různé obrázky, tabulky a grafy. Vytvořené texty se ukládají, jako dokumenty s
Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
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ů
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES
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ý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
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í
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í
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
Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra
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),
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
Prvně si řekněme, co vlastně odstavec v programu Word je a pár slov o jeho editaci:
FORMÁTOVÁNÍ ODSTAVCE Pro formátování odstavce, použijeme opět záložku DOMŮ a zaměříme se na skupinu ikon pro formátování celých odstavců. To se nevěnuje formátování samotného písma, ale celého odstavce.
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
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
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
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
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ů
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
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
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ý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
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,
Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
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
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
WORD 2007 grafický manuál
TLAČÍTKO OFFICE dříve známo jako nabídka Soubor umožňuje práci se souborem (otevřít nový nebo existující, uložit, vytisknou, odeslat, zavřít program, ) Mimo jiné zobrazuje názvy posledních otevřených dokumentů
Prezentace (Presentation) - ECDL / ICDL Sylabus 6.0
Prezentace (Presentation) - ECDL / ICDL Sylabus 6.0 Upozornění: Oficiální verze ECDL / ICDL Sylabu verze 6.0 je publikovaná na webových stránkách ECDL Foundation - www.ecdl.org a lokalizovaná verze na
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)
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ší
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...
Základy CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
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.
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í
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,
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
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
František Hudek. duben Informační a komunikační technologie MS Excel Úvod do Excelu II. Základy práce s listy a buňkami.
VY_32_INOVACE_FH02 Jméno autora výukového materiálu Datum (období), ve kterém byl VM vytvořen Ročník, pro který je VM určen Vzdělávací oblast, obor, okruh, téma Anotace František Hudek duben 2012 8. ročník
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_03_IVT_MSOFFICE_02_Excel
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_03_IVT_MSOFFICE_02_Excel Ing. Pavel BOHANES
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...
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.
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é
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
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...
Inovace výuky prostřednictvím šablon pro SŠ
Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748
František Hudek. duben Informační a komunikační technologie MS Excel Úvod do Excelu III
VY_32_INOVACE_FH03 Jméno autora výukového materiálu Datum (období), ve kterém byl VM vytvořen Ročník, pro který je VM určen Vzdělávací oblast, obor, okruh, téma Anotace František Hudek duben 2012 8. ročník
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.
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!
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
9. Tagy tvorba www stránky pomocí tagů
9. Tagy tvorba www stránky pomocí tagů Tagy Jak bylo uvedeno v předchozím odstavci, 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ď
Ú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
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
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
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
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
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
MS Word. verze Přehled programů pro úpravu textu
MS Word verze 2013 Přehled programů pro úpravu textu Pro úpravu textu slouží textový editor Jednoduché (zdarma, součást operačního systému MS Windows): Poznámkový blok, WordPad Komplexní: MS Word, Writer
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,
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
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......................................
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
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]](/thumbs/19/373280.jpg "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
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ý
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
Změna velikosti písmen
Změna velikosti písmen U aplikace Word můžeme změnit velikost písmen v textu bez toho, aniž bychom museli daný text přepisovat ručně. Postup je následující: 1) Vyberte text, u kterého chcete změnit psaní
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í
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
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
František Hudek. duben ročník
VY_32_INOVACE_FH12_WIN Jméno autora výukového materiálu Datum (období), ve kterém byl VM vytvořen Ročník, pro který je VM určen Vzdělávací oblast, obor, okruh, téma Anotace František Hudek duben 2013 6.
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
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á
MODERNÍ WEB SNADNO A RYCHLE
SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES
Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu
Tvorba WWW stránek (čtvrtá hodina) Mgr. Petr Jakubec Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu 12 Čtvrtá hodina 1 / 12 1 Tvorba statických WWW stránek za využití prostředků
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...
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
Gymnázium Vysoké Mýto nám. Vaňorného 163, 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
VY_32_INOVACE_In 6.,7.10. Tvorba tabulky
Tvorba tabulky VY_32_INOVACE_In 6.,7.10 Anotace: Žák se seznámí se základními pravidly tvorby tabulky a používá je při jejich tvorbě. Po seznámení s tvorbou tabulek z prezentace, dále procvičuje prakticky
Formátování obsahu adminweb
Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky
Vzorce. Suma. Tvorba vzorce napsáním. Tvorba vzorců průvodcem
Vzorce Vzorce v Excelu lze zadávat dvěma způsoby. Buď známe přesný zápis vzorce a přímo ho do buňky napíšeme, nebo použijeme takzvaného průvodce při tvorbě vzorce (zejména u složitějších funkcí). Tvorba
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
Registrační číslo projektu: Škola adresa: Šablona: Ověření ve výuce Pořadové číslo hodiny: Třída: Předmět: Název: MS Excel II Anotace:
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 Na Brněnce 1, Ivančice, okres Brno-venkov
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
HTML. HTML- HyperTextMarkUpLanguage (nadtextový značkový jazyk) TAGY
HTML HTML- HyperTextMarkUpLanguage (nadtextový značkový jazyk) HTML dokument (súbor) - textový súbor - prípony (.html,.htm) - obsahuje značky tagy, ktoré v prehliadačoch zabezpečia správne zobrazenie obsahu
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á
Gymnázium Vysoké Mýto nám. Vaňorného 163, 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