Internet 02 - Tvorba statických www stránek za pomoci HTML tagů
|
|
|
- Marcela Vacková
- před 8 lety
- Počet zobrazení:
Transkript
1 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 písmo, u tohoto textu proveď odkaz na jiný server, jiný text naopak zarovnej na střed stránky apod. Tagy se v HTML dokumentu uzavírají do znaků <>, kde < značí začátek tagu a > konec tagu. Například pokyn pro tučné písmo vypadá takto: <B>. Pokyn pro vložení obrázku by vypadal např. takto <IMG SRC= obr1.gif ALIGN= left >. Jak již bylo uvedeno v úvodu kapitoly o tvorbě internetových stránek, jazyk HTML je složen z mnoha značek, tzv. tagů. Jedná se o speciální značky, které se při zobrazení internetové stránky v prohlížeči nezobrazují. Slouží výhradně prohlížeči, aby věděl, jak má internetovou stránku poskládat. Například že určitý text má být zarovnán, jiná část textu že má být tučným písmem apod. Obecně rozdělujeme tagy na dvě velké skupiny - párové a samostatné. Párový tag Párové tagy jsou zapotřebí vždy dva. První tag aktivuje určitý formát, který je aktivní do té doby, dokud nenalezne druhý, uzavírací tag. Příklad použití párového tagu: Toto je příklad použití <B> párového tagu </B> v HTML dokumentu. Zobrazený text by vypadal takto: Toto je příklad použití párového tagu v HTML dokumentu. Samostatný tag Samostatný tag nepotřebuje žádný druhý tag, který by ho uzavíral. Samostatný tag může být např. tag pro vytvoření vodorovné čáry nebo tag pro ukončení odstavce. Příklad použití samostatného tagu: Toto je příklad použití samostatného tagu <P> pro ukončení odstavce. Zobrazený text by vypadal takto: Toto je příklad použití samostatného tagu pro ukončení odstavce. Jak nejlépe psát HTML dokument Pro psaní HTML dokumentu ve Windows doporučuji používat Poznámkový blok (NotePad) či jemu podobný ekvivalent. Abyste viděli, jak v daném okamžiku vypadá naprogramovaná stránka, doporučuji mít současně s poznámkovým blokem otevřený prohlížeč. V textovém editoru (v našem případě v poznámkovém bloku) uložte soubor, se kterým budete pracovat, pod konkrétním jménem s příponou HTML nebo HTM. Ve spuštěném prohlížeči načtěte tento soubor. Následná práce při tvorbě HTML dokumentu bude o to snazší, jestliže budete mít možnost zkontrolovat účinnost zadaného tagu. Stačí, když po napsání tagu soubor uložíte. Poté se přepnete do prohlížeče a tam zvolíte znovunačtení stránky (Reload). 1 Kostra dokumentu Každý HTML dokument by měl mít určitou strukturu. Jedná se zejména o defi nici hlavičky dokumentu a o defi nici samotné stránky. Defi nice celé struktury je pevně daná a nelze ji měnit.
2 HTML HTML je párový tag, který ohraničuje celý dokument. Dává prohlížeči vědět, kde začíná a kde končí HTML dokument. Každá stránka by měla obsahovat na začátku <HTML> a na úplném konci </HTML>. HEAD Každý HTML dokument se skládá ze dvou částí - hlavičky HEAD a těla dokumentu BODY. Párovým tagem <HEAD> je určen začátek a tagem </HEAD> konec hlavičky. V hlavičce bývá obvykle zahrnut titulek WWW stránky. TITLE Mezi párovým tagem TITLE je uveden titulek hlavičky. Titulkem se rozumí text, který bude v okně prohlížeče napsán v modrém pruhu. Titulek by měl co nejlépe vystihovat obsah stránky, protože právě titulek bude případně zařazen do bookmarku (seznamu adres) v prohlížeči návštěvníka stránky. Zároveň by neměl být příliš dlouhý. Pokud tag TITLE nevyužijete, prohlížeč dosadí do modrého pruhu okna adresu stránky. <TITLE> Computer Media </TITLE> BODY Body je opět párový tag. Mezi tagy BODY se nachází samotné tělo stránky, tedy vše, co budeme v následujících kapitolách probírat. Uvozující tag <BODY. > se používá hned po hlavičce a zakončovací tag </BODY> se zpravidla píše na konci dokumentu před tagem </HTML>. <BODY [atribut= hodnota ] [atribut= hodnota ]... > Tag BODY obsahuje několik atributů, které významně ovlivňují vzhled stránky. V jednom tagu BODY můžete za sebou použít i několik atributů současně. BACKGROUND= adresa_obrázku Defi nuje adresu obrázku, který bude použit jako pozadí stránky. To znamená, že pozadí může být tvořeno konkrétním obrázkem. Prohlížeč jej poskládá vedle sebe tak, aby byla zaplněna celá plocha stránky. Adresa musí být uvedena v uvozovkách. <BODY BACKGROUND= /obr/moje/podkl.gif > BGCOLOR= barva Defi nuje barvu, jež bude použita jako pozadí stránky (pokud není předchozím atributem pro pozadí zvolen obrázek). Barvu můžete zadat buď číselně, znáte-li číselnou kombinaci konkrétní barvy (#000000), nebo přímo anglickým názvem barvy (blue, white, red ) <BODY BGCOLOR= black > TEXT= barva Defi nuje barvu textu, která bude aplikována na celou stránku. Při nastavení barvy textu platí stejná pravidla jako při nastavení barvy pozadí. <BODY TEXT= black > LINK= barva Defi nuje barvu hypertextového odkazu. Jestliže tento atribut nepoužijete, standardní barva hypertextového odkazu bude modrá. 2
3 VLINK= barva Defi nuje barvu již navštíveného hypertextového odkazu. ALINK= barva Defi nuje barvu tzv. aktivního hypertextového odkazu, tj. odkazu, na který jste právě klepli myší. Příklad jednoduchého dokumentu s použitím BODY <HTML> <HEAD> <TITLE> Pokusy s HTML </TITLE> </HEAD> <BODY BGCOLOR= blue TEXT= black LINK= red > Toto je text, který bude vidět ve stránce... obsah dokumentu.. </BODY> </HTML> Takto napsaná stránka by obsahovala pouze jedinou větu Toto je text, který bude vidět na stránce. Stránka by měla modré pozadí, text by byl vidět černě a stránka by nesla název Pokusy s HTML. Základní formátování odstavce V následujících odstavcích se naučíte, jak provádět základní operace s textem, jako je tučné písmo, kurzíva, podtržení nebo zalomení řádku. Zalomení řádku - <BR> Vše, co napíšete mezi tag BODY, se zobrazí na stránce jako text. Běžný (holý) text není třeba uzavírat mezi žádné tagy stačí jej prostě napsat. Pozor, v HTML však neplatí úplně všechna pravidla editace textu tak jako v běžném textovém editoru. Například klávesa ENTER zde nerozdělí odstavce. Pokud bychom např. psali v HTML dokumentu větu, která by byla uprostřed zalomena klávesou ENTER, prohlížeč by ji nezalomil, ale umístil na jeden řádek. Pro zalomení řádku je potřeba použít samostatný tag BR. Toto je text, <BR> který je zalomený speciálním tagem BR. Toto je text, který je zalomený speciálním tagem BR. Zalomení odstavce - <P> Kromě zalomení řádku disponuje jazyk HTML možností zalomení odstavce. Jedná se o funkci podobnou zalomení řádku, ale s tím, že u zalomení odstavce bude vynechán jeden řádek. Pro zalomení odstavce se používá samostatný tag <P>. 3
4 Toto je pro změnu text, u kterého je použito zarovnání odstavce. <P> Musím uznat, že nám to pěkně jde. Aby také ne, s učebnicí od firmy Computer Media je učení jedna radost. Tak honem s chutí do toho a půl je hotovo. Toto je pro změnu text, u kterého je použito zarovnání odstavce. Musím uznat, že nám to pěkně jde. Aby také ne, s učebnicí od firmy Computer Media je učení jedna radost. Tak honem s chutí do toho a půl je hotovo. Tag <P> může mít i atribut ALIGN. Ten určuje, na jakou stranu bude text zarovnán. Atribut je nepovinný a zapisuje se za znak P. Například zápis <P ALIGN= right > způsobí, že následující odstavec bude zarovnán na pravou stranu stránky (kromě right můžete pochopitelně dosadit i center nebo left). Nutno podotknout, že atribut ALIGN není v případě tagu <P> příliš používán. Centrování odstavce - <CENTER> Každý odstavec je možné centrovat pomocí párového tagu CENTER. Uvedené tagy byly základním vstupem pro psaní HTML dokumentu. Jak je vidět, <CENTER> programovat své WWW stránky </CENTER> nebude zase tak obtížné. Stačí číst dál. Uvedené tagy byly základním vstupem pro psaní HTML dokumentu. Jak je vidět, programovat své WWW stránky nebude zase tak obtížné. Stačí číst dál. Formátování textu Dokázat zformátovat text je jedním ze základních předpokladů tvorby solidních internetových stránek. Možnosti formátování textu jsou v podstatě téměř obdobné jako u klasického textového editoru. V oblasti formátování textu se u HTML většinou používají párové tagy. To znamená, že první tag určitou funkci (nebo nastavení) aktivuje a druhý ji uzavře. Nezapomínejte proto aktivní tagy ukončovat je to jedna z nejčastějších chyb začínajících autorů WWW stránek. Přitom otevřený párový tag se může promítnout až v úplně jiné části stránky, kde je ve zdrojovém textu jen obtížně vyhledatelný. Druh písma Podobně jako ve Wordu máme i v HTML jazyce možnost použít základní řezy písma tučné, kurzívu a podtržené. Je zde k dispozici i tzv. velké písmo, malé písmo, dolní a horní indexy a blikající text. 4
5 Formátování TAG Ukázka Tučné <B>.. </B> Tučné Kurzíva <I>.. </I> Kurzíva Podtržené <U>.. </U> Podtržené Přeškrtnuté <S>.. </S> Přeškrtnuté S pevnou šířkou <TT>.. </TT> S pevnou šířkou Velké <BIG>.. </BIG> Velké Malé <SMALL>.. </SMALL> Malé Dolní index <SUB>.. </SUB> index Dolní Horní index <SUP>.. </SUP> Horní index Blikající text <BLINK>.. </BLINK> Blikající text Jednotlivé tagy je možné kombinovat, takže může vzniknout např. tučná kurzíva nebo tučná podtržená kurzíva apod. Jednotlivé tagy lze do sebe libovolně vnořit. Velikost, barva a typ písma - <FONT> K nastavení velikosti, typu a barvy písma slouží párový tag FONT. Uvedený tag má několik atributů, které konkrétně určují, co přesně lze u písma modifi kovat. obecně: <FONT [ATRIBUT= hodnota ] [ATRIBUT= hodnota ].. > konkrétně: <FONT SIZE=4 COLOR= red ]> SIZE=5 Atribut SIZE určuje velikost písma. Velikost se může pohybovat v rozmezí 1 7, kde 1 je nejmenší a 7 největší písmo. Standardní hodnota je 3. <FONT SIZE=6> COLOR= barva Pro změnu barvy písma je určen atribut COLOR. Barvu lze opět zadat buď číselně, nebo názvem barvy v anglickém jazyce. <FONT COLOR= blue > FACE= font Jistě jste si všimli, že prohlížeč všechny texty zobrazuje fontem Times New Roman. Ne vždy je jeho použití žádoucí. Atribut FACE umožňuje nastavit pro písmo na stránce libovolný font, který je v počítači k dispozici. <FONT FACE= Arial > Pozor, použití atributu FACE může být nespolehlivé. Musíte počítat s tím, že ne všichni uživatelé mají k dispozici takový font, jaký atributem FACE nastavíte. Pokud totiž návštěvník stránky uvedený font k dispozici nemá, bude stránka zobrazena se standardním fontem Times New Roman. Totéž platí, pokud návštěvník neprohlíží stránky pod Windows. Nezapomeňte, že stránku mohou navštívit i uživatelé z Unixu, OS/2, Macintoshe atd.!!! Příklad použití tagu <FONT> <FONT SIZE=6 FACE= Arial Black COLOR= blue > Tento text je napsán zmodifikovaným fontem! </FONT> Tento text je napsán zmodifikovaným fontem! 5
6 Jak je vidět na příkladu, text uvozený mezi tagy FONT je nadefinován velikostí 6 a písmem Arial Black. Jeho zabarvení je modré. Nadpisy - <H1>.. <H6> Abyste nemuseli u každého nadpisu používat poměrně zdlouhavý zápis tagem FONT, existují velmi jednoduché tagy pro nadefinování velikosti nadpisů celkem v šesti úrovních. <H1>.. </H1> až <H6>.. </H6> Nadpisy se defi nují tagem H s číslem, kde číslo udává velikost písma. Nejmenší velikost má číslo 6, a naopak největší velikosti dosáhnete při použití čísla 1. <H1> Nadpis první úrovně </H1> <H2> Nadpis druhé úrovně </H2> <H3> Nadpis třetí úrovně </H3> <H4> Nadpis čtvrté úrovně </H4> <H5> Nadpis páté úrovně </H5> <H6> Nadpis šesté úrovně </H6> Oddělovací čára - <HR> HTML jazyk disponuje pro vizuální oddělení částí stránky vodorovnou čarou. Čáru lze jednoduše zadat prostřednictvím samostatného tagu <HR> - provede tenkou stínovanou vodorovnou čáru přes celou šířku stránky. Tag HR má ještě čtyři parametry, které dovolují nadefinovat konkrétnější vlastnosti čáry. Jedná se o nastavení délky, šířky, zarovnání a stínovaní čáry. SIZE=6 Atribut SIZE defi nuje tloušťku čáry. Hodnota se může pohybovat v rozmezí <HR SIZE=5> NOSHADE Zabezpečí, že čára nebude stínovaná. ALIGN= left Určí stranu, na kterou bude čára zarovnána. Jako parametr atributu je možné zadat left, center a right. WIDTH=120 Styly nadpisů v HTML Atribut WIDTH umožňuje měnit velikost čáry. Můžete zadat číselnou hodnotu v bodech, nebo v procentech. Pokud zadáte číselnou hodnotu v procentech, je třeba za číslem uvést i znak procent. <HR WIDTH=320> <HR WIDTH=50%> 6
7 Tvorba seznamů Jazyk HTML umožňuje pro snazší tvorbu stránky automaticky generovat seznamy s odrážkami a řazené číselné seznamy. Seznam s odrážkami - <UL> Jedná se o seznam, ve kterém je každá položka oddělena určitým znakem (čtverečkem, tečkou, kolečkem). Prostřednictvím párového tagu UL a jeho atributu TYPE zadáte typ odrážení. Každá položka seznamu je uvozena tagem LI. <UL TYPE= hodnota > <LI> první položka </LI> <LI> druhá položka </LI> <LI> třetí položka </LI>.. </UL> Atribut TYPE může mít tři hodnoty: TYPE=disc První položka s atributem TYPE=disc Druhá položka s atributem TYPE=disc TYPE=circle První položka s atributem TYPE=disc Druhá položka s atributem TYPE=disc TYPE=square První položka s atributem TYPE=disc Druhá položka s atributem TYPE=disc <UL TYPE= square > <LI> První položka </LI> <LI> Druhá položka </LI> <LI> Třetí položka </LI> </UL> První položka Druhá položka Třetí položka I v tomto případě platí, že do sebe můžete tagy UL vnořovat. Pokud vnoříte do tagu UL další tag UL, vznikne odrážený víceúrovňový seznam. Číslovaný seznam Číslovaný seznam dosadí na pozici odrážky číslo a automaticky zachovává číselnou řadu. To znamená, že pokud mezi již existující číslovanou řadu vložíte další tag, číslovaný seznam se automaticky správně přečísluje. Princip tvorby číslovaného seznamu je podobný jako u seznamu s odrážkami. Používá se zde tag OL. Číslovaný seznam má o něco víc možností než seznam odrážený. <OL [atribut= hodnota ].. [Atribut= hodnota ] > 7
8 Tag OL nabízí celkem čtyři atributy: TYPE= hodnota Atribut TYPE umožňuje nadefi novat, jakými znaky bude číslování seznamu provedeno. K dispozici je pět možností: a malými písmeny arabské abecedy A velkými písmeny arabské abecedy i římskými číslicemi malými písmeny I římskými číslicemi velkými písmeny 1 arabskými číslicemi (toto je implicitní hodnota) START= počáteční_hodnota Atribut START dokáže nastavit, od které počáteční hodnoty začne seznam číslovat. CONTINUE Atribut CONTINUE dovolí pokračovat v číslování v návaznosti na předchozí číslovaný seznam zůstane zachována číselná řada (posloupnost). Tato varianta se používá v případě, že seznam je potřeba z nějakého důvodu přerušit (např. obrázkem s textem apod.). ALIGN= zarovnání Atribut ALIGN defi nuje zarovnání položek seznamu jedním ze čtyř možností zarovnání. Může nabývat hodnot left, right, center a justify. Atributy se u číslovaných i odrážených seznamů nemusí vůbec používat. V takovém případě stačí uvést pouze uvozovací a uzavírací tag. Seznam bude vytvořen s implicitními (předdefi novanými) hodnotami. Příklad použití vidíte zde: <OL TYPE=1 START=5 ALIGN= left > <LI> Měsíc květen <LI> Měsíc červen <UL> <LI> první týden <LI> druhý týden </UL> <LI> Měsíc červenec <LI> Měsíc srpen <OL TYPE=A> <LI> první týden <LI> druhý týden </OL> </OL> Na tomto příkladu je použit číslovaný seznam. Je defi nováno, aby začínal číslem 5 a aby používal standardní arabské číslice. Do tohoto seznamu je vnořen nejprve seznam s odrážkami (<UL>) a poté další číslovaný seznam. Ten je nakonfi gurován tak, aby číslice byly zobrazeny velkými písmeny arabské abecedy. Jak je vidět, u položek seznamu není bezpodmínečně nutné používat uzavírací tagy </LI>. Tvorba tabulek <TABLE> Tabulky jsou velmi silným nástrojem jazyka HTML. Pomocí tabulek je možné dosáhnout zajímavých efektů. Tabulky jako takové nabízejí spoustu možností. 8
9 <TABLE [ATRIBUT=hodnota].. [ATRIBUT=hodnota]> <TR> <TD> datová_buňka </TD> <TD> datová_buňka </TD> </TR> <TR> <TD> datová_buňka </TD> <TD> datová_buňka </TD> </TR> </TABLE> BORDER=hodnota Atribut BORDER umožňuje nastavit tloušťku rámečku, která bude použita v tabulce. Pokud bude hodnota BORDER rovna nule, bude tabulka bez obrysového rámečku. WIDTH= hodnota Atribut WIDTH defi nuje šířku tabulky. Můžete zadat šířku v procentech vzhledem k šířce okna prohlížeče (WIDTH=60%), nebo přesné číselné hodnoty (WIDTH=400). BGCOLOR= barva Defi nuje barvu pozadí tabulky. Pokud tento atribut nevyužijete, bude použita tabulka s průhledným pozadím, tj. pozadím stránky. CELLSPACING= hodnota Určuje vzdálenost mezi jednotlivými buňkami v tabulce. Číselná hodnota je uváděna v bodech. CELLPADDING= hodnota Defi nuje vzdálenost textu od okraje buňky. Standardně je nastaven 1 bod. Tento atribut se v praxi příliš často nevyskytuje. Příklad použití atributů tagu TABLE s atributy <TABLE BORDER=3 WIDTH=300 CELLSPACING=5 BGCOLOR=blue>.... </TABLE> Vytvoří tabulku, která bude mít šířku 300 bodů, vzdálenost mezi buňkami 5 bodů, barva pozadí tabulky bude modrá s tloušťkou rámečku tři body. Tagy pro definici řádků a buněk v tabulce Tagem TABLE jste prohlížeči sdělili, že chcete mít na stránce tabulku, a určili její velikost a některé parametry. Nyní je třeba určit, jaké budou v tabulce buňky, naplnit je daty a defi novat řádky v tabulce. Všechny uvedené operace lze aplikovat prostřednictvím následujících tagů. <TR> Tag TR zahajuje nový řádek v tabulce. Celý obsah jednoho řádku by měl být uzavřen mezi tímto párovým tagem. <TD> Párový tag TD zahajuje datovou buňku. Každý obsah buňky by měl být uzavřen mezi tímto tagem. Všechny datové buňky daného řádku tabulky by pak měly být uzavřeny mezi předchozím párovým tagem TR. <TH> Zahajuje hlavičku řádku nebo sloupce tak, že zvýrazní text v hlavičce nebo sloupci. Jeho použití je obdobné jako u tagu TD. Příklad použití tagů pro defi nici řádků a buněk v tabulce: 9
10 <TABLE WIDTH=300 BORDER=3 CELLSPACING=5 > <TR> <TH>Sloupec A</TH> <TH>Sloupec B</TH> </TR> <TR> <TD>Leden</TD> <TD>12500 Kč</TD> </TR> <TR> <TD>Únor</TD> <TD>18200 Kč</TD> </TR> <TR> <TD>Březen</TD> <TD>13650 Kč</TD> </TR> </TABLE> Defi nice tabulky se na první pohled může zdát nepřehledná, ale po pozornějším prozkoumání jistě naleznete logickou podstatu zápisu. Uvedený příklad je jedním z nejjednodušších zápisů definice tabulky. Na některých stránkách se můžete setkat s opravdu velmi spletitými a propracovanými tabulkami jednotlivé tabulky obsahují obrázky, několik tabulek je do sebe vnořeno apod. Možností je skutečně mnoho. Atributy tagů <TR> <TD> <TH> v tabulce Tagy <TR> <TD> a <TH> mají několik atributů. Jedná se o atributy pro zarovnání a sloučení několika buněk do jedné buňky. ALIGN=zarovnání Defi nuje vodorovné zarovnání textu v jedné konkrétní buňce. Hodnota za atributem ALIGN může být left, right, center, justify a char. VALIGN=zarovnání Podobně jako u ALIGN také VALIGN defi nuje zarovnání, ale ve svislém směru. V tomto případě může nabývat hodnot top, middle, bottom a baseline. Atributy ALIGN a VALIGN je možné použít u všech tří tagů <TR> <TD> a <TH>. Následující dva atributy je možné použít pouze u tagu <TD> a <TH>. ROWSPAN=hodnota Atribut ROWSPAN sloučí více buněk do jedné buňky a zabere jejich místo. Atribut se používá pro sloučení buněk na řádku. 10 COLSPAN=hodnota Atribut COLSPAN sloučí více buněk do jedné buňky a zabere jejich místo. Atribut se používá pro sloučení buněk ve sloupci. Příklad použití tagů <TR> <TD> <TH> s atributy: <TABLE WIDTH=300 BORDER=3 CELLSPACING=5 > <TR> <TH COLSPAN=2> Tabulka výdělků </TH> </TR> <TR> <TH>Sloupec A</TH> <TH>Sloupec B</TH> </TR> <TR> <TD>Leden</TD> <TD ALIGN=right>12500 Kč</TD> </TR> <TR> <TD>Únor</TD> <TD ALIGN=right>18200 Kč</TD> </TR> <TR> <TD>Březen</TD> <TD ALIGN=right>13650 Kč</TD> </TR> </TABLE> Tabulky mohou obsahovat i obrázky a odkazy na jiné stránky nebo servery. V tabulkách je možné používat typy písma defi novaného standardními metodami jazyka HTML, do jedné tabulky lze vnořit další tabulku, nezávislou na tabulce vnější. Tabulka je mocným prostředkem jazyka HTML, a ač se to
11 na první pohled nezdá, často řeší jinak obtížně proveditelné požadavky na realizaci určitého kroku. Vytvoření hyperlinku <A> (odkazu na jinou stránku) V kapitole o internetu je popsána síla hypertextu jako funkce umožňující snadné přepínání z jedné stránky na jinou pouhým klepnutím myši. Tak je možné mezi sebou prakticky libovolně provázat jakékoliv stránky na jakýchkoliv serverech na světě. Aby bylo možné hypertext používat, musí stránka obsahovat tzv. linky (někdy hyperlinky nebo odkazy). Jedná se o místa, na která když uživatel klepne, bude přepnut na jinou stránku nebo server. Taková místa prohlížeč odliší jinou (většinou modrou) barvou a podtrhne čarou. Pokud na link nastavíte kurzor myši, tvar myši se většinou změní na ruku. Na co je možné vytvořit link? Na jinou stránku nejběžnější případ, kdy klepnutím na link získáte detailnější informace většinou z jiné než aktuální stránky. Na jinou pozici téže stránky odkáže uživatele na jinou pozici téže stránky. Používá se zejména u dlouhých stránek, kdy v horní části stránky je seznam kapitol stránky klepnutím na odkaz přepne na požadované místo. Na obrázek často bývá použit odkaz na obrázek, ale zdaleka výjimečné nejsou ani případy, kdy sám obrázek je odkazem na jinou stránku nebo další obrázek. Na soubor aby bylo možné prostřednictvím WWW stáhnout soubor, musí existovat možnost odkazu na něj. V tomto okamžiku není důležité, o jaký typ souboru se jedná, takže odkaz může být proveden např. na zvuk WAV, animaci nebo spustitelný program apod. Obecně: <a [ATRIBUT= adresa ]> Příklad: <a href= > Odkaz na server Seznam </a> Nejpoužívanější atribut tagu A je nepochybně HREF. Atribut HREF defi nuje cestu k souboru, respektive adresu, která se stane odkazem. Adresu je nutné uzavřít do uvozovek. Pozor, existuje několik možností jak psát odkazy na adresu. Prostřednictvím atributu HREF můžete adresu zadat absolutně, nebo relativně. <a href= > - absolutně zadaná adresa. Ať již tento zápis umístíte na jakoukoliv stránku, vždy se bude odkazovat na přesně zadanou adresu. <a href= aktual.html > - relativně zadaná adresa. Pokud bude tento odkaz použit z adresáře na serveru, ve kterém se nachází i stránka odkazovaná, je vše v pořádku a odkaz bude fungovat. Pokud však tento odkaz použijete z jiného adresáře než adresáře s odkazovanou stránkou, pak fungovat nebude. Výhodou je, že když změníte strukturu adresářů, nemusíte měnit všechny odkazy. Příklad použití hypertextového linku:.. Budete-li chtít aktuální informace o našem produktu, není nic jednoduššího, než se podívat na naši <a href= > stránku novinek </a>, kde naleznete vše potřebné... 11
12 Všimněte si, že odkaz nevystupuje v textu jako adresa, ale jako text, který je nadefi nován mezi uvozujícím a uzavírajícím tagem <A>. Na příkladu se jednalo o text stránku novinek, ale délka textu mezi tagy může být prakticky libovolná. Hyperlink na jinou část téhož dokumentu HTML jazyk umožňuje vyrobit odkaz (link) na tentýž dokument, na kterém se link nachází, na jeho jinou část (např. o několik obrazovek hlouběji do stránky). Tento způsob se s oblibou používá u delších stránek, kde jsou její jednotlivé části provázány. Aby bylo možné vytvořit odkaz na konkrétní místo téhož dokumentu, musíte si toto místo označit. U standardních odkazů nebylo označení nutné, ale zde by prohlížeč nevěděl, podle čeho se má orientovat. Příklad adresace části dokumentu: <a name= aktualizace > Zde je aktualizace.. </a> Text, na který se později budete odkazovat, musíte označit tagem A s atributem NAME (viz příklad). Do uvozovek napište název, pod nímž budete odkazování provádět, a mezi párové tagy umístěte část textu, na kterém má prohlížeč při odkazování zastavit. Pokud si na stránce přejete na adresovanou část textu odkázat, proveďte to následovně: <a href= #aktualizace > Tento odkaz přepne na odstavec AKTUALIZACE </a> Všimněte si, že nyní jsme již použili standardní atribut HREF, ale text v uvozovkách má před sebou znak #. Ten je pro adresování v rámci jedné stránky bezpodmínečně nutný. Několik pravidel pro tvorbu linků Odkazujete-li se na soubor nebo na adresu, která v sobě soubor zahrnuje, dbejte na velikost písma. Adresa není totéž co U odkazů na soubory rozlišujte HTM a HTML. Obecně se nedoporučuje používat odkazy typu: Klikněte ZDE, Klepněte SEM apod. Zkuste místo toho vymyslet výstižnější názvy pro linky, např. Informace o projektu XY. Vložení obrázku <IMG> Obrázky a grafi ka vůbec jsou na WWW stránkách příjemným zpestřením. Dnes je grafi cká podoba stránek reprezentujících určitou organizaci nevyhnutelná. Na druhé straně však spousta stránek doslova hýří grafi kou a mohutnými obrázky, což rozhodně není dobře. Pokud totiž stránka obsahuje velké množství obrázků, podstatně to zvyšuje délku jejího načítání. Při tvorbě stránek proto volte kompromis mezi grafi ckým cítěním a užitečností stránky s přihlédnutím k možné délce načítání. Do stránky můžete zakomponovat tyto typy grafi ckých formátů: GIF a JPG (méně často se používá PNG). Formát JPG umožňuje poměrně velkou kompresi, takže stejný obrázek by ve formátu JPG byl např. oproti GIF menší. Na druhé straně však GIF umí tzv. průhledné pozadí, tedy možnost mít v obrázku nevyplněná místa, která na stránce propouští pozadí. GIF také umožňuje postupné zaostřování 12
13 obrázku, to znamená, že obrázek se nejprve zobrazí v nepříliš vysoké kvalitě a postupně se zaostřuje. Jestliže v okamžiku částečného zaostření zjistíte, že je obrázek nevyhovující, lze pozastavit jeho načítání ušetříte čas. Obrázek do dokumentu vložíte samostatným tagem IMG. <IMG [ATRIBUT= hodnota].. [ATRIBUT= hodnota]> Tag IMG má celou řadu atributů, kterými lze výrazně ovlivnit zobrazení a umístění obrázku na stránce. Jedná se o následující: SRC= umístění_obrázku Nezbytně nutný atribut SRC určuje cestu k obrázku. Cestou může být běžná adresa nebo relativní odkaz na soubor. <IMG SRC= obr.gif > ALT= text Někteří uživatelé mají ve svém prohlížeči záměrně zakázáno zobrazování obrázků. Jiní uživatelé mají k dispozici příliš pomalou linku, a proto obrázky nenačítají. Ať už obrázky nenačtou z jakéhokoliv důvodu, existuje možnost nadefi novat text, který je alternativou obrázku a zobrazí se v místě, kde měl být původně obrázek umístěn. Defi nici takového textu je možné provést prostřednictvím tagu ALT. <IMG ALT= Obrázek sluníčka SRC= obr.gif > ALIGN= zarovnání Atribut ALIGN je důležitý v okamžiku, kdy se nespokojíte pouze se zarovnáním obrázku na řádek, bez možnosti obtékání textem. Pomocí atributu ALIGN je možné nadefi novat způsob zarovnání obrázku. <IMG SRC= obr.gif ALIGN= left > Atribut ALIGN může nabývat následujících hodnot: bottom spodní hrana obrázku je zarovnána na spodní řádek textu, obrázek není obtékán top horní hrana obrázku je zarovnána na horní řádek textu, obrázek není obtékán middle střed obrázku je zarovnán podle textu, obrázek není obtékán left obrázek je zarovnán na levý okraj stránky a je obtékán textem right - obrázek je zarovnán na pravý okraj stránky a je obtékán textem. WIDTH=šířka Další z atributů tagu IMG je WIDTH šířka. Atribut dokáže změnit šířku obrázku na základě zadané hodnoty. Pokud atribut vynecháte, obrázek bude mít standardní 100% velikost. HEIGHT=výška Podobně jako předchozí atribut, HEIGHT defi nuje výšku obrázku. Může obrázek zvětšit, nebo zmenšit. Oba atributy (WIDTH, HEIGHT) nedoporučuji příliš používat obrázek by měl být připraven v takové podobě a takové velikosti, v jaké bude na stránce prezentován. VSPACE a HSPACE 13
![. [ATRIBUT= hodnota]> Tag IMG má celou řadu atributů, kterými lze výrazně ovlivnit zobrazení a umístění obrázku na stránce.](/docs-images/49/18364095/images/page_13.jpg "Jedná se o následující: SRC= umístění_obrázku Nezbytně nutný atribut SRC určuje cestu k obrázku. Cestou může být běžná adresa nebo relativní odkaz na soubor. <IMG SRC= obr.")
14 Mezera mezi obrázkem a obtékajícím textem. Mezeru lze zvlášť nastavit horizontálně (HSPACE) i vertikálně (VSPACE). Má-li být u obou stran stejná, je vhodné použít následující atribut. BORDER=hodnota Defi nuje šířku rámečku okolo obrázku. Standardně je obrázek bez rámečku. Obrázek jako odkaz I obrázek může být odkazem (link) na jiný obrázek nebo stránku. Často se používá obrázek jako odkaz na stejný obrázek ve větším rozlišení, tzv. náhled není potřeba načítat kvalitnější obrázek přímo, ale až pokud to bude třeba. Linky ve formě obrázků se používají často také na stránkách, kde v rámci pěkné grafi cké úpravy tvoří odkazy grafi cká tlačítka. Odkaz (link) pomocí obrázku lze jednoduše vyrobit tak, že zkombinujete tag pro vytvoření linku s tagem pro vložení obrázku. <a HREF= <IMG SRC= obr.gif ALIGN= left > </a> Tag A defi nuje, na kterou stránku nebo adresu budete po klepnutí přepnuti. Tag IMG vloží mezi párový tag A obrázek a tím se stává odkazem. Jak dál? Jazyk HTML se průběžně rozvíjí a obsahuje stále nové a dokonalejší prvky a vylepšení. Účelem tohoto textu bylo seznámení s naprostými základy jazyka HTML a objasnění stěžejních tagů tak, aby uživatel byl schopen po nastudování této kapitoly vytvořit vlastní stránku obsahující obrázky, tabulky a propojení stránek hypertextovými odkazy. Pokud se budete tvorbou HTML stránek zabývat detailněji, jistě se setkáte např. s rámy, formuláři, CSS styly, samostatnou velkou oblastí je skupina programovacích jazyků, jako je např. PHP (což ovšem přesahuje rozsah této publikace a nebude zde uváděna). Další kapitola této knihy se alespoň v základech, náznakem, zabývá skutečným programováním internetových stránek. 14
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
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ď
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 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ý
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í
Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / 2012. Ročník: 3
Název: VY_32_INOVACE_PG4102 Základní HTML značky Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení s nejdůležitějšími
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 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ů
<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í
Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne
Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného
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
Č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
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é
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)
(X)HTML. Internetové publikování
(X)HTML Internetové publikování 1 Prohlížeč Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče Microsoft Internet Explorer Firefox Opera Safari WWW stránka WWW stránka dokument (soubor) s informacemi
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
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
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
9. Editory www stránek II tvorba pomocí tagů a další technologie.
9. Editory www stránek II tvorba pomocí tagů a další technologie. V první části kapitoly je přehled HTML tagů a jejich příklady. V závěrečné části následuje další shrnutí (X)HTML a CSS s ohledem na validitu
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
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ů
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
Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,
Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení
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
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í
Specifikace ASYMBO XML feedu
Specifikace ASYMBO XML feedu Děkujeme, že máte zájem o mobilní e-shop ASYMBO! Aby vše fungovalo, jak má, připravili jsme pro vás detailní specifikaci XML souboru, kterým vzájemně komunikuje Váš e-shop
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
Word 2013. podrobný průvodce. Tomáš Šimek
Word 2013 podrobný průvodce Tomáš Šimek Přehled funkcí a vlastností nejnovější verze textového editoru Word Jak psát na počítači správně, úpravy a formátování textu a stránky Zpracování dalších objektů
Obsah. 1.1 Úvod do práce s autorským nástrojem ProAuthor 4
Obsah 1 Úvod do práce s autorským nástrojem ProAuthor 4 1.1 Úvod do práce s autorským nástrojem ProAuthor 4 2 Založení kurzu 7 2.1 Jak začít 8 2.2 Vyplnění vstupních informací o kurzu 10 2.3 Založení vlastního
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML
HTML Kapesní přehled. Lukáš Honek. w w w. h o n e k. b i z. Pravidla psaní kódu. Abecední přehled tagů, atributů, entit, konstant a událostí
HTML Kapesní přehled Lukáš Honek 2004 Pravidla psaní kódu Abecední přehled tagů, atributů, entit, konstant a událostí HTML versus XHTML Podpora v prohlížečích w w w. h o n e k. b i z HTML Kapesní přehled
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ů
ÚVOD 3 SEZNÁMENÍ SE SYSTÉMEM 4
ÚVOD 3 SEZNÁMENÍ SE SYSTÉMEM 4 JEDNODUCHÉ PŘIHLÁŠENÍ 4 ADMINISTRAČNÍ PROSTŘEDÍ 5 PŘEPÍNÁNÍ JAZYKOVÉ VERZE 5 POLOŽKY HORNÍHO MENU 5 DOPLŇKOVÉ POLOŽKY MENU: 6 STROM SE STRÁNKAMI, RUBRIKAMI A ČLÁNKY 7 TITULNÍ
TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz
6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,
Specifikace reklamních formátů HTML 5 pro nasazení do ibillboard Ad Server Verze 2/2015
Specifikace reklamních formátů HTML 5 pro nasazení do ibillboard Ad Server Verze 2/2015 Stránka 1 z 5 Datová velikost HTML 5 bannerů Záleží na formátu banneru. Dle specifikace SPIR, má každý formát banneru
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,
Standardně máme zapnutý panel nástrojů Formátování a Standardní.
Zapnutí a vypnutí panelů nástrojů Standardně máme zapnutý panel nástrojů Formátování a Standardní. Úkol: Vyzkoušejte si zapnout a vypnout všechny panely nástrojů. Nechte zapnutý panely nástrojů Formátování
OBSAH. Předmluva 13 Poděkování 14. 1. Přehled dnešního vývoje webů 15. 2. Design pro minulost, přítomnost i budoucnost 33
OBSAH Předmluva 13 Poděkování 14 1. Přehled dnešního vývoje webů 15 Definice webdesignu 16 Sedm pravidel webdesignu 19 Tři filozofie webdesignu 20 Filozofie použitelnosti 21 Filozofie multimédií 25 Filozofie
Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
Další servery s elektronickým obsahem
Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele.
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é
Office 2013. podrobný průvodce. Tomáš Šimek
Office 2013 podrobný průvodce Tomáš Šimek Seznámení se společnými postupy při práci s dokumenty Office Popis základních a pokročilejších postupů při práci s Wordem, Excelem, PowerPointem a OneNote Možnosti
1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1
1 Úvod V tomto studijním textu se seznámíme s tvorbou webových stránek a prezentací a se základy syntaxe jazyka HTML. K tomu, abychom byli schopni vytvořit internetovou stránku, nemusíme používat žádný
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
HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy
V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603
Kapitola 5 Tvoříme tabulky
Kapitola 5 Tvoříme tabulky 5 V předchozích kapitolách jsme získali potřebný základ k tomu, abychom mohli úspěšně tvořit části i celé WWW stránky. Pojďme si tedy na chvíli oddechnout. Podíváme se na projekt
Přehled základních html tagů
Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...
Projekt inovace vzdělávání na SOŠ a SOU Horky nad Jizerou. Pokyny pro zpracování ročníkové práce z předmětu FIKTIVNÍ FIRMA. Verze 1.
Projekt inovace vzdělávání na SOŠ a SOU Horky nad Jizerou Pokyny pro zpracování ročníkové práce z předmětu FIKTIVNÍ FIRMA Verze 1.1 Tento projekt byl spolufinancován Evropským sociálním fondem a státním
10. Editor databází dotazy a relace
10. Editor databází dotazy a relace Dotazy Dotazy tvoří velkou samostatnou kapitolu Accessu, která je svým významem téměř stejně důležitá jako oblast návrhu a úpravy tabulek. Svým rozsahem je to ale oblast
Tabulkové processory MS Excel (OpenOffice Calc)
Maturitní téma: Tabulkové processory MS Excel (OpenOffice Calc) Charakteristika tabulkového editoru Tabulkový editor (sprematuritníadsheet) se používá všude tam, kde je třeba zpracovávat data uspořádaná
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
1. Tvorba webových stránek
1. Tvorba webových stránek Multimediální prezentace Zvláště větší komerční firmy kladou při přenosu informací stále více důraz nejen na obsahovou složku, ale i na formu, v jaké je informace předkládána.
Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky
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
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ý
Tvorba internetových stránek
Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting?
III/2 Inovace a zkvalitnění výuky prostřednictvím ICT EU-OVK-VZ-III/2-ZÁ-201
Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Jazyk Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět Cílová skupina (ročník) Úroveň
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
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í
Naučte se víc... Metodická příručka pro školy k aplikaci Microsoft Office PowePoint 2007
Naučte se víc... Metodická příručka pro školy k aplikaci Microsoft Office PowePoint 2007 Autoři: Jiří Chytil & Boris Chytil Metodická příručka pro školy k aplikaci Microsoft Office PowerPoint 2007 Tato
Metodika pro učitele
Metodika pro učitele Tvorba prezentace v aplikaci PowerPoint 2010 PowerPoint je program, který umožňuje navrhnout, kvalitně graficky a esteticky ztvárnit a následně spustit a předvést prezentaci. Celý
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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.
instaluj Naučte se víc...
instaluj Naučte se víc... Metodická příručka pro školy k sadě aplikací Microsoft Office 2007 Autoři: Jiří Chytil & Boris Chytil Metodická příručka pro školy k sadě aplikací Microsoft Office 2007 Tato publikace
Parametrizace, harmonogram
Parametrizace, harmonogram Modul slouží pro parametrizování informačního systému a pro vytváření časového plánu akademického roku na fakultě. Fakulty si v něm zadávají a specifikují potřebné "časové značky"
CSS Kaskádové styly. formátování webových stránek
CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací
X36 WWW Šablony Martin Klíma xklima@fel.cvut.cz Čtryřvrstvá architektura Server Klient Prezentační logika Aplikační Logika Databáze 2 Výhody Jednotlivé vrstvy jsou nezávislé Lze je samostatně spravovat
Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka
1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným
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
118. </div> 119. </div> 120. <div class="box"> 121. <div class="inside-box"> 122. <img src="./img/drogo-and-daenerys.jpg" alt="kresba Droga a
1. 2. 3. 4. 5. 6. sidonia
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.
NSWI096 - INTERNET. Úvod do HTML
NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup
Tlačítkem Poskládej jiný počítač se hra vrátí na úvodní obrazovku a lze zvolit jiný obrázek.
PUZZLE POČÍTAČE Hra Puzzle počítače je psána pomocí příkazů Javascriptu, skriptovacího jazyka PHP a standardních příkazů HTML. Před vlastním spuštěním hry je možné seznámit se s nejznámějšími komponenty
SUM U3 SUM U4 SUM U5 SUM
Číslo soutěžícího 1,1 1,2 1,3 1,4 1,5 SUM U1 2,1 2,2 2,3 2,4 2,5 2, 2,7 2,8 SUM U2 3,1 3,2 3,3 3,4 3,5 3, 3,7 3,8 3,9 3.10 3.11 3.12 3.13 3.14 SUM U3 SUM U4 SUM U5 SUM 7 8 1 1 2 18 8 3 1 0 1 3 2 24 8 2
<link> - definuje vztah k jiným XHTML dokumentům, typicky
Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka
DUM 01 téma: Obecné vlastnosti tabulkového editoru, rozsah, zápis do buňky, klávesové zkratky
DUM 01 téma: Obecné vlastnosti tabulkového editoru, rozsah, zápis do buňky, klávesové zkratky ze sady: 02 tematický okruh sady: Tabulkový editor ze šablony: 07 KANCELÁŘSKÝ SOFTWARE určeno pro: 1-4. ročník
Manuál k aplikaci WANAS
Manuál k aplikaci WANAS OBSAH 1 DŮLEŽITÉ INFORMACE PRO PRÁCI V NOVÉ VERZI APLIKACE WANAS.. 2 2 PROSTOROVÁ DATA... 3 2.1 POPIS HLAVNÍCH FUNKCÍ... 3 2.2 PRÁCE S DEFINIČNÍM BODEM SEGMENTU... 4 2.3 PRÁCE S
Word 2007 Word 2007 egon. Spuštění, vzhled, zobrazení dokumentu
Word 2007 Word 2007 egon Spuštění, vzhled, zobrazení dokumentu Jan Málek 30.4.2010 Word 2007 V roce 2007 přichází firma Microsoft s novou verzí kancelářského balíku MS Office 2007 a tedy i textového editoru
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
1. vydání příručky 2009, Národní památkový ústav, Ing. Martin Lazák
Manažer akcí (pro kastelány) květen 2009 1. vydání příručky 2009, Národní památkový ústav, Ing. Martin Lazák Obsah: 1. ÚVODNÍ INFORMACE...2 1.1. ÚČEL APLIKACE...2 1.1.1. Editor údajů o akcích...2 1.1.2.
v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému)
Historie HTML 1989 v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému) 1991 zveřejnění neformální specifikace jazyka HTML
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
III/2 Inovace a zkvalitnění výuky prostřednictvím ICT EU-OVK-VZ-III/2-ZÁ-202
Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Jazyk Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět Cílová skupina (ročník) Úroveň
Vzdělávání v egoncentru ORP Louny
Zpracováno v rámci projektu č. CZ.1.04/4.1.00/40.00067 Vzdělávání v egoncentru ORP Louny Město Louny Obsah 1. Databáze... 4 2. Třídění pomocí filtrů... 5 3. Ukotvení a uvolnění příček... 6 3.1 Ukotvení
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
Šablonovací systém htmltmpl vypracoval: Michal Vajbar, 2007. Šablonovací systém htmltmpl
Šablonovací systém htmltmpl 1 Představení šablonovacích systémů Každý, kdo se zabývá tvorbou webových aplikací dříve nebo později zjistí, že je vhodné oddělovat obsah aplikace od jejího vzhledu. Pokud
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a
Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE
Pedagogická fakulta, Jeronýmova 10, 371 15 České Budějovice Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE Vedoucí absolventské práce: PaedDr. Petr Pexa Autor: Vojtěch Soukup České Budějovice,
Uživatelská příručka pro dodavatele
Uživatelská příručka pro dodavatele Release 1.x.x B2B CENTRUM a.s. 3.2009 Obsah Úvod... 3 Obecná pravidla formátování... 3 Pravidla pro formátování písma... 3 Poznámky, Důležité, Varování... 4 Začínáme...
Metodický materiál. Cvičné příklady a témata pro soutěž OFFICE - ZŠ. Ing. Zdeněk Matúš, Mgr. Čestmír Glogar, 2015,
KRAJSKÉ ZAŘÍZENÍ PRO DALŠÍ VZDĚLÁVÁNÍ PEDAGOGICKÝCH PRACOVNÍKŮ A INFORMAČNÍ CENTRUM, NOVÝ JIČÍN, příspěvková organizace, IČ: 62330403 ředitelství organizace, Štefánikova 826/7, 741 01 Nový Jičín, 595-538-000,
Program pro flexibilní tvorbu evidencí. VIKLAN - Evidence. Uživatelská příručka. pro seznámení se základními možnostmi programu
Program pro flexibilní tvorbu evidencí VIKLAN - Evidence Uživatelská příručka pro seznámení se základními možnostmi programu Vlastimil Kubínek, Ing. Josef Spilka VIKLAN - Evidence Verse 1.11.8.1 Copyright
Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz
Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Internet
Robot bude XML stahovat každý den v brzkých ranních hodinách. Při nedostupnosti souboru nebo dlouhém načítání souboru nebude aktualizace provedena.
XML export kurzů na Evzdelavani.cz Jak XML import funguje? XML export kurzů vám umožní automatickou synchronizaci informací o nabízených kurzech (název, popis, lektor, termín, místo a další důležité informace)
T Y P O G R A F I E. Tvorba textových dokumentů
T Y P O G R A F I E Tvorba textových dokumentů Počítačová typografie nauka o tom, jak má tiskovina vypadat typus = znak, grafó = píši současné programové vybavení a možnost kvalitního tisku každý může
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
7. Nástroje. 7.1 Pravopis. 7.2 Jazyk. Kapitola 7: Nástroje 47. Kontrola pravopisu
Kapitola 7: Nástroje 47 7. Nástroje Kontrola pravopisu 7.1 Pravopis V prezentaci Encian přichystejme dvě záměrné pravopisné chyby na prvním snímku. Slovo Váš nahradíme slovem Vaš a slovo přehledným nahradíme
Buňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.
Tabulky Tabulky bývaly ve světě webdesignu mocným hráčem. V dobách, kdy podpora CSS v prohlížečích byla mrzká, se pomocí tabulek řešilo rozmístění jednotlivých prvků na stránce tzv. tabulkový layout, který