Microsoft Office SharePoint Server 2007

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

Download "Microsoft Office SharePoint Server 2007"

Transkript

1 Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k Středisko komunikačních a informačních systému Univerzita obrany Brno Středisko komunikačních a informačních systémů, Univerzita obrany 1

2 OBSAH Úvod 1. Základy HTML 1.1. Úvod do HTML 1.2. Vysvětlení pojmu tag 1.3. Rejstřík základních HTML tagů 1.4. Ukázkové příklady 1.5. Základní symboly 2 Základy CSS 2.1. Úvod do CSS 2.2. Základní výhoda CSS stylů 2.3. Základní vlastností CSS 2.4. Příklady 3. Webové editory 4. Odkazy 5. Seznam literatury 2

3 ÚVOD V příručce se probírají základy práce s jazykem a HTML a CSS styly. HTML je jazyk určený pro tvorbu obsahu, kdežto vzhled obsahu neboli formu budeme dotvářet CSS styly. V textu se okrajově zmíníme i o jazyku XHTML, který je rozšířením jazyka HTML o novější technologii XML. 1. ZÁKLADY HTML Hyper Text Markup Language, dále jenom HTML, je jazyk určený pro vytváření obsahu stránek v systému World Wide Web (WWW), tj. stránek, které publikujeme např. na Internetu. Jazyk HTML řeší sice částečně i vzhled textu, ale to je důsledek historického vývoje, kdy ještě CSS styly nebyly a jazyk HTML sloužil i pro tvorbu vzhledu. Dnes se doporučuje důsledně oddělovat tvorbu obsahu a vzhledu stránky. Proto i dva jazyky, HTML a CSS styly Úvod do HMTL Webovou stránku si můžeme představit jako textový soubor bez jakéhokoliv formátování, vytvořený např. pomocí Poznámkového bloku. Obsah souboru tvoří samotný text, který chceme sdělit a dále informace o struktuře obsahu: nadpisy, podnadpisy, odstavce, odrážky, odkazy na jiné stránky, na obrázky na dokumenty. Jak ale prohlížeč pozná strukturu dokumentu? To mu sdělíme právě pomocí HTML jazyka Vysvětlení pojmu tag V HTML se používají speciální značky tzv. tagy. Tagy rozdělujeme na párové a nepárové. Tagy jsou obecně tvořeny znaky < a > mezi nimiž je název tagu (takto: <tag>). U párových tagů, platí, že ke každému počátečnímu tagu musí existovat tag ukončovací, ten se liší od počátečního tím, že před názvem tagu obsahuje lomítko ( / ). Nepárový tag nemá tag ukončovací. Vše ostatní, co není mezi těmito znaky, se zobrazuje jako výsledný text na stránce. Párové tagy určují, co text uvnitř je (např. jestli se jedná o nadpis, odstavec, tabulku či hypertextový odkaz). Nepárové popisují často nějakou činnost nebo poskytují nějakou informaci. Příklad 1.1. Párový tag: <b>text zobrazeny na strance je tučný</b> Nepárový tag: <br> přesun na nový řádek 3

4 Jeden tag může být uvnitř druhého tagu, tj. tagy můžeme vnořovat, ale nesmí se křížit. Příklad 1.2. špatně: <i><b>text zobrazeny na strance bude tučně a kurzivou</i></b> dobře: <i><b>text zobrazeny na strance bude tučně a kurzivou</b></i> Nyní si povíme něco málo o elementech. Elementem nazýváme celou sekvenci počínaje počátečním tagem a konče tagem ukončovacím. Existují tři základní druhy elementů: blokové, inline a nahrazované. Podle významu, který textu přiřazuji, je můžeme rozdělit ještě na elementy pro strukturování dokumentu, textové elementy, elementy pro tvorbu odkazů, elementy pro tvorbu tabulek elementy pro tvorbu seznamů a podobně. Blokové elementy - jsou elementy, které tvoří nějaký blok. Zjednodušeně to znamená, že po takovém elementu je text dokumentu zalomen, odřádkován. Blokovými elementy jsou například h1 pro nadpis nebo p pro odstavec. Inline elementy - jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení. Obvykle plní funkci zvýraznění nějaké části textu. Je to například a pro hypertextový odkaz. Nahrazované elementy - ty jsou nahrazeny nějakým obsahem, pro začlenění dokumentu jsou důležité jejich rozměry. Například img pro obrázek. Elementy mohou mít atributy a ty nějakou hodnotu. Atributy se píší do počátečního tagu, atributů může být více (oddělují se mezerou), ale nemusí být žádný. Každý atribut musí mít svou hodnotu. Hodnota atributu nemusí být v HTML v uvozovkách, ovšem XHTML je přísnější, tam musí být zapsán v uvozovkách. Doporučujeme uvozovky používat. <element atribut="hodnota _atributu">text zobrazovaný na stránce.</element> V této části si řekneme a ukážeme konkrétní příklad struktury dokumentu HTML. Při psaní kódu v HTML nebo v XHTML, máte na výběr tři základní definice typu dokumentu (Transitional - Přechodová, Strict - Striktní, Framset S podporou rámů). Použitím značky DOCTYPE zaručujete webovému prohlížeči, že na stránce bude jen čistý kód HTML. Značka se vždy píše s vykřičníkem a je umístěna na začátek dokumentu před značkou <html>. Pokud používáte přechodovou verzi HTML 4.01, je syntaxe této značky následující: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 4

5 Příklad 1.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>untitled Page</title> </head> <body> </body> </html> Celý váš kód HTML kromě DOCTYPE by měl být umístěn mezi párovou značkou <html>. Nezapomeňte, že párový tag musí mít odpovídající ukončovací tag, který je stejný jako otevírací tag, ale obsahuje lomítko </html>. Váš dokument by měl podle příkladu 1.3. obsahovat ještě dvě části: hlavičku a tělo. Hlavičku dokumentu definujeme párovou značkou <head>. Tato část obsahuje ještě název stránky, který se píše do párového tagu <title>. Tento text se zobrazuje v záhlaví okna prohlížeče a na tlačítku na nástrojové liště Microsoft Windows. Hlavička obsahuje také informace tzv. metadata o dokumentu (jazyk, klíčová slova pro vyhledávače, jméno autora atd.), která se pomocí párového tagu <meta>.. Do hlavičky můžete vložit řádky kódu pro spuštění skriptů. O této problematice se zde nezmiňujeme. Nejdůležitější částí dokumentu HTML je samotné tělo dokumentu umístěné v párovém tagu <body> </body>, ve kterém budete v editoru programu Microsoft Office SharePoint Server 2007 vytvářet a upravovat webové stránky Univerzity obrany. Tělo obsahuje všechny informace, které vidíte, když si stránku prohlížíte ve webovém prohlížeči. Pokud si zobrazíte zdrojový kód stránky v prohlížeči, můžete vidět všechen text a tagy, které dokument obsahuje. V další části se seznámíme s některými základními tagy, které se používají při tvorbě webové stránky. Jednotlivé značky (tagy) si ukážeme na jednotlivých ukázkových příkladech. Poznámka: V editoru programu Microsoft Office SharePoint Server 2007 se všechny tagy zapisují velkými písmeny. 5

6 1.3. Rejstřík základních HTML tagů Tag Význam tagu html head body title meta začíná a končí celá stránka HTML hlavička stránky, která se v prohlížeči nezobrazuje tělo stránky, obsahuje veškerý zobrazený obsah stránky titulek stránky, je obsažen v hlavičce stránky informace o dokumentu (nepárový tag) <-- --> poznámka, všechno co je obsaženo v poznámce se nezobrazuje b i u sub sup a p br div, span font hr h1 h2 li ol ul img table tr td písmo tučné písmo kurzivou podtržení textu dolní index v textu horní index v textu odkaz, hypertextový odkaz odstavec textu řádkový zlom neutrální obalovací značka ohraničující část textu písmo, nastavování písma vodorovná čára nadpis 1. úroveň (24px) nadpis 2. úroveň (18px) položka seznamu číslovaný seznam odrážkový seznam obrázek (nepárový tag) tabulka řádek tabulky buňka tabulky 6

7 1.4. Ukázkové příklady V této kapitole si ukážeme na ukázkových příkladech, jak vypadá zdrojový kód, který obsahuje text a tagy, a jak se zobrazuje daný kód na webovém prohlížeči. V příkladech je v částí A napsán zdrojový kód a v části B je vyobrazen upravený text, obrázek, tabulka či odkaz ve webovém prohlížeči. Příklad 1.4. Ukázka textového odstavce. <p>univerzita obrany poskytuje akreditované vzdělání v bakalářských, magisterských a doktorských studijních programech,které jsou vojenského, vojensko-manažerského, ekonomického, technického a zdravotnického zaměření.</p> Univerzita obrany poskytuje akreditované vzdělání v bakalářských, magisterských a doktorských studijních programech, které jsou vojenského, vojensko-manažerského, ekonomického, technického a zdravotnického zaměření. Příklad 1.5. Úprava textu v odstavci s řádkovým zlomem v odstavci. <p> <h1>zaměření školy</h1><b>univerzita obrany</b> poskytuje akreditované vzdělání v bakalářských, magisterských a doktorských studijních programech, které jsou vojenského, vojensko-manažerského, ekonomického, technického a zdravotnického zaměření. <br /><i><b>vzdělávání</b></i> na UO se dále uskutečňuje v programech celoživotního vzdělávání v rámci kariérových účelových a jiných odborných kurzů postgraduálního charakteru.</p> Zaměření školy Univerzita obrany poskytuje akreditované vzdělání v bakalářských, magisterských a doktorských studijních programech, které jsou vojenského, vojensko-manažerského, ekonomického, technického a zdravotnického zaměření. Vzdělávání na UO se dále uskutečňuje v programech celoživotního vzdělávání v rámci kariérových účelových a jiných odborných kurzů postgraduálního charakteru. Příklad 1.6. Ukázka odrážkového seznamu. <p><u>univerzitu obrany tvoří tři fakulty:</u> 7

8 <ul> <li>fakulta ekonomiky a managementu</li> <li>fakulta vojenských technologií</li> <li>fakulta vojenského zdravotnictví</li> </ul> </p> Univerzitu obrany tvoří tři fakulty: Fakulta ekonomiky a managementu Fakulta vojenských technologií Fakulta vojenského zdravotnictví Příklad 1.7. Ukázka číslovaného seznamu. <div><b>univerzita obrany má ještě tři vysokoškolské ústavy:</b> <ol> <li>ústav strategických studií</li> <li>ústav operačně-taktických studií</li> <li>ústav ochrany proti zbraním hromadného ničení</li> </ol> </div> Univerzita obrany má ještě tři vysokoškolské ústavy: 1. Ústav strategických studií 2. Ústav operačně-taktických studií 3. Ústav ochrany proti zbraním hromadného ničení Příklad 1.8. Kombinace odrážkového a číslovaného seznamu. <p>ukázková struktura UO: <ul><li>fakulta ekonomiky a managementu</li> <ol><li>katedra ekonomie</li> <li>katedra ekonometrie</li> <li>katedra logistiky</li></ol> <li>fakulta vojenských technologií</li> <ol><li>katedra zbraní a munice</li></ol> <li>fakulta vojenského zdravotnictví</li></ul></p> 8

9 Ukázková struktura UO: Fakulta ekonomiky a managementu 1. Katedra ekonomie 2. Katedra ekonometrie 3. Katedra logistiky Fakulta vojenských technologií 1. Katedra zbraní a munice Fakulta vojenského zdravotnictví Příklad 1.9. Použití hypertextového odkazu na webovou stránku. <a href="http://www.seznam.cz">portál Seznam</a><br /> <a href="http://www.google.com">google</a><br /> <a href="http://www.unob.cz">univerzita obrany</a> Portál Seznam Google Univerzita obrany Příklad Použití hypertextového odkazu s cestou na dokument. <a title=dokument href="http://oss1/skola/uo/fem/historie/stranky/default.aspx" target=_blank>odkaz na dokument</a> odkaz na dokument Příklad Použití hypertextového odkazu na . <a Kunes</a> Tomislav Kunes Příklad Ukázka vložení obrázku na stránku. 9

10 <img src="strom.gif" alt="strom"> Příklad Vytvoření fiktivní základní tabulky. <table> <tr><td>měsíc</td><td>počet studentů</td><td>počet zaměstnanců</td></tr> <tr><td>leden</td><td>1500</td><td>110</td></tr> <tr><td>únor</td><td>1450</td><td>108</td></tr> <tr><td>březen</td><td>1400</td><td>115</td></tr> </table> Měsíc Počet studentů Počet zaměstnanců Leden Únor Březen Příklad Ukázka textu v poznámce. <--Škola je rovněž centrem celoživotního vzdělávání. Poskytuje i neakreditované nejvyšší resortní vzdělání formou kurzů pro vyšší důstojníky.--> Prohlížeč nic nezobrazí 10

11 1.5. Základní symboly Některé symboly v HTML při zobrazení zlobí. Pokud chceme mít jistotu, že opravdu se nám zobrazí znak, který chceme zobrazit, raději místo klasického symbolu použijeme tzv. znakovou entitu. Ty nejpoužívanější jsou: < pro znak < > pro znak > & pro znak & mezera se zákazem dělení řádku, využijeme ji všude tam, kde nechceme roztrhnout určité spojení např. datum spojovník 2. ZÁKLADY CSS 2.1. Úvod do CSS Starší verze HTML obsahují celou řadu elementů, které nepopisují jenom strukturu a obsah dokumentu, ale i způsob jeho zobrazení. Dnes se tento postup se považuje za metodicky nesprávný. Pomocí HTML bychom měli vytvářet jenom strukturu a obsah stránek. Cascading Style Sheets označované zkratkou CSS a často v řeči nazývané CSS styly představují způsob, jak ovlivňovat vzhled dokumentů při prohlížení prohlížečem. CSS je jazyk pro grafickou úpravu webových stránek Základní výhoda CSS stylů Charakteristickým rysem CSS je jeho schopnost aplikovat jistá pravidla na kompletní sadu prvků v dokumentu. Obecně nezáleží na velikosti písmen, ale program Microsoft Office SharePoint Server 2007 používá určitá strukturovaná pravidla při vytváření webové stránky, kterými se musíte řídit. Jedním z nich je používání velikých písmen. Pokud jste chtěli mít v HTML text všech prvků H2 šedý, museli byste to udělat tak, že byste do všech svých prvků H2 vložili značku <FONT COLOR="gray">Text</FONT>: <H2><FONT COLOR="gray">Text záhlaví H2 je šedé</font></h2> 11

12 Je evidentní, že je to pracný proces, obsahuje-li váš dokument hodně tagů H2. Jak uvidíme CSS umožňuje rychlejší a pohodlnější změny. V CSS stačí na příslušném místě napsat: H2 {COLOR: gray} a efekt změny barvy se projeví na všech nadpisech H Základní vlastností CSS V této části uvedeme stručný přehled některých vybraných vlastností CSS stylů, které se nejvíce využívají při tvorbě webových stránek. Aplikaci si později ukážeme na příkladech. Přehled některých používaných vlastností CSS: Vlastnost FONT FONT-FAMILY FONT-STYLE Příklady hodnot FONT: italic bold 15px Arial Arial; Tahoma; FONT-STYLE: normal; FONT-SIZE FONT-SIZE: 12px; FONT-SIZE: 14pt; FONT-SIZE: 80%; FONT-WEIGHT FONT-WEIGHT: 400; TEXT-DECORATION TEXT-ALIGN COLOR BACKGROUND-COLOR BACKGROUND-POSITION WIDTH HEIGHT FLOAT BORDER-WIDTH BORDER-COLOR BORDER-STYLE TEXT-DECORATION: none; TEXT-ALIGN: center; TEXT-ALIGN: justify; COLOR: blue; BACKGROUND-COLOR: transparent; BACKGROUND-POSITION: top; WIDTH: 100% = WIDTH: auto; WIDTH: 400px; HEIGHT: 70%; HEIGHT: 200px; FLOAT: right; FLOAT: left; FLOAT: none; BORDER-WIDTH: 5px; BORDER-COLOR: green; BORDER.STYLE: solid; BORDER-STYLE: outset; 12

13 LIST-STYLE-TYPE LIST-STYLE-POSITION LIST-STYLE-TYPE: circle; LIST-STYLE-TYPE: disc; LIST-STYLE-POSITION: inside; Některé vlastnosti, o kterých se nyní budu zmiňovat v tomto odstavci, lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky, tabulky nebo odstavce. Jedná se o vlastnost MARGIN a PADDING. MARGIN určuje šířku vnějšího okraje prvku a vlastnost PADDING určuje šířku vnitřního okraje prvku. Obě vlastnosti se zadávají v procentech nebo pomocí pixelů Příklady V této části si ukážeme na ukázkových příkladech, jak vypadá zdrojový kód, který obsahuje text, tagy a CSS styly, a jak vypadá daný kód na webovém prohlížeči. V příkladech je v částí A napsán zdrojový kód s CSS styly a v části B je vyobrazen upravený text, obrázek, tabulka či odkaz ve webovém prohlížeči. V bodě A je opět zdrojový text a v bodě B ukázka vzhledu v prohlížeči. Příklad 2.0. Úprava textu v odstavci pomocí stylů. <P style="color: blue; FONT-FAMILY: Tahoma; FONT-SIZE: 12px; TEXT-ALIGN: justify;">uo udržuje zahraniční styky s pedagogickými a armádními institucemi vyspělých států světa, spolupráci rozvíjí zejména s vojenskými školami členských států Severoatlantické aliance.</p> UO udržuje zahraniční styky s pedagogickými a armádními institucemi vyspělých států světa, spolupráci rozvíjí zejména s vojenskými školami členských států Severoatlantické aliance. Příklad 2.1. Vložení obrázku do textu <IMG style="float: left; WIDTH: 100px; HEIGHT: 50px;" src="vojenske_auto.jpg" alt=auto vojenské budoucnosti > 13

14 Příklad 2.2. Vložení hypertextového odkazu do textu <A href="http://www.unob.cz"><span style="font-size: 12pt; FONT-FAMILY: Tahoma; COLOR: Blue; FONT-WEIGHT: 800; BACKGROUND-COLOR: #ffcc00">univerzita obrany</span></a> Univerzita obrany Příklad 2.3. Hypertextový odkaz obrázku na webovou stránku v kódu. <A title=obrazek href="http://www.akcie.cz" target=_blank><img style=" height: 150px; width: 220px; BORDER-COLOR: red; BORDER-RIGHT: 3px solid; BORDER-TOP: 5px solid; BORDER-LEFT: 3px solid; BORDER-BOTTOM: 10px solid" alt=ekonomie src="http://oss1/skola/uo/sitecollectionimages/pr.gif"></a>. Příklad 2.4. Ukázka úpravy tabulky s využitím některých vlastností CSS. <P>Tabulka ukázková <TABLE border="2" style="font-size: 12pt; FONT-FAMILY: Arial; bordercolor:red"> <TR style="background-color: Gray; color:aqua"><td>měsíc</td><td>počet studentů</td><td>počet zaměstnanců</td></tr> <TR><TD>Leden</TD><TD>1500</TD><TD>110</TD></TR> <TR><TD>Únor</TD><TD>1450</TD><TD>108</TD></TR> <TR><TD>Březen</TD><TD>1400</TD><TD>115</TD></TR> </TABLE></P> Vzhled tabulky v prohlížeči 14

15 Měsíc Počet studentů Počet zaměstnanců Leden Únor Březen Příklad 2.5. Ukázka v kódu úprava textu s obrázkem. <P style="color: blue; FONT-FAMILY: Tahoma; FONT-SIZE: 10pt; TEXT-ALIGN: justify"><img style="border-color: red; BORDER-RIGHT: 4px solid; BORDER- TOP: 2px solid; FLOAT: left; BORDER-LEFT: 4px solid; BORDER-BOTTOM: 2px solid; WIDTH: 120px; HEIGHT: 80px" alt="bystrc" src=http://oss1/skola/uo/sitecollectionimages/dsc_0032.jpg border="3">univerzita obrany poskytuje akreditované vzdělání v bakalářských, magisterských a doktorských studijních programech, které jsou vojenského, vojensko-manažerského, ekonomického, technického a zdravotnického zaměření. Vzdělávání na UO se dále uskutečňuje v programech celoživotního vzdělávání v rámci kariérových účelových a jiných odborných kurzů postgraduálního charakteru. Univerzita obrany má své nezastupitelné místo v systému českých vysokých škol a poskytuje vzdělání srovnatelné se vzděláním získaným na civilních vysokých školách v České republice.</p> 3. Webové editory Na trhu je celá řada webových editorů, které lze volně stáhnou z internetu a začít s nimi pracovat. Doporučujeme vyzkoušet a pracovat s webový editory TopStyle Life, EasyPad, které jsou pro začátečníky přehledné. Jak instalovat EasyPad: Editor EasyPad je možné stáhnout volně z internetu z webové stránky na adrese: Na stránce najdete v sekci Downland verzi 3.5 STANDART, na kterou kliknete myší. Zobrazí se Vám na nové stránce informace o stažení softwaru příslušná věta: Pokud se nespustí automatické stahování souboru ep35.exe, klikněte na tento odkaz. Klinete tedy myší na daný odkaz a zobrazí se nové okno a v tomto okně zmáčknete myší tlačítko Uložit. Otevře se nové okno, kde vyberete, kam daný soubor chcete uložit v PC. Po vybrání místa uložení stisknete tlačítko Uložit a soubor se uloží na příslušné místo, které jste vybrali. Uložený soubor si najdete ve vašem PC a kliknete na něj dvakrát myší. Poté se objeví nové okno s informací, zda opravdu chcete spustit tento software, vyberte myší 15

16 tlačítko Spustit a software se začne instalovat. Postupujte následně podle pokynů, které se budou zobrazovat na monitoru. Zobrazí se uvítací okno instalace EasyPadu. Kliknete v okně na tlačítko Další, objeví se okno Informace a stisknete tlačítko Další a pokračujete v instalaci. Zobrazí se další nové okno, kde musíte vybrat cílový adresář, kam uložíte daný software. Vyberte příslušné místo na vašem PC a klikněte na tlačítko Další, aby jste mohli pokračovat v instalaci. Nyní se zobrazí okno o tom, že instalace je připravena a můžete kliknutím na tlačítko Instalovat dokončit instalaci EasyPadu. Po instalování se zobrazí samotné okno EasyPadu. Registrace EasyPadu: Než začnete s editorem pracovat, musíte se zaregistrovat. Registraci provedete následujícím způsobem: V panelu nabídka najeďte myší na Nápovědu a klikněte. Zobrazí se nabídka, ze které vyberete Registrovat. Po kliknutí se na monitoru objeví nové okno Registrace a musíte zadat Uživatele. Do pole Uživatel napište svoje jméno a příjmení a do pole Registrační číslo zadejte následující registrační číslo Potom vše potvrďte myší a zobrazí se informace, že EasyPad je zaregistrovaný. Jak instalovat TopStyle Lite Editor TopStyle Lite ve verzi 3.1 můžete stáhnout zcela zdarma na uvedené adrese Instalace tohoto produktu bude podobná jako je uvedené výše v textu o instalaci EasyPadu, ale pro začátečníky ji zde popíšeme. Po otevření odkazu na uvedené adrese klikněte myší na tlačítko Stáhnout zdarma. Otevře se nová stránka s příslušnou informační větou: Stahování TopStyle Lite 3.1 začne automaticky, pokud ne, klikněte na některý z následujících odkazů: stáhnout z Kliknete myší na daný hypertextový odkaz a zobrazí se nové okno s informací o stažení souboru. Vyberete, kam daný soubor chcete uložit v PC. Po vybrání místa uložení stisknete tlačítko Uložit a soubor se uloží na příslušné místo, které jste vybrali. Uložený soubor si najdete ve vašem PC a kliknete na něj dvakrát myší. Poté se objeví nové okno s informací, zda opravdu chcete spustit tento software, vyberte myší tlačítko Spustit a software se začne instalovat. Poté se objeví nové okno s informací, zda opravdu chcete spustit tento software, vyberte myší tlačítko Spustit a software se začne instalovat. Postupujte následně podle pokynů, které se budou zobrazovat na monitoru. Zobrazí se uvítací okno Welcome instalace TopStyle Lite. Kliknete v okně na tlačítko Next a objeví se okno s licenčními podmínkami. Kliknete myší na tlačítko Yes a pokračujete dál v instalaci. 16

17 Dále se zobrazí se další nové okno Choose Deestination Location, kde musíte vybrat cílový adresář, kam uložíte daný software pokud již není adresář vybrán sám. Jinak vyberte příslušné místo na vašem PC a klikněte na tlačítko Next, aby jste mohli pokračovat v instalaci. Nyní se zobrazí okno Start Installation, že instalace je připravena a můžete kliknutím na tlačítko Next a začne se software instalovat. Po instalaci se ještě zobrazí kontrolní okno Installation Complete, klinete na tlačítko Finish a na tlačítko OK. Po samotné instalaci se zobrazí pracovní prostředí editoru TopStyle Lite a můžete začít s editorem pracovat. Přejeme Vám hodně štěstí při práci. 4. Odkazy Jak psát web Tvorba webu Jak na web HTML v příkladech World Wibe Web Consortium Wikipedia - HTML 5. Seznam literatury WEMPE, Faithe; HTML a CSS Krok za krokem. Brno: Computer Press a.s., ISBN , 324s. GRUSOVÁ, Lucie; CSS pro úplné začátečníky. Brno: Computer Press a.s., 2003 ISBN , 130s. STANÍČEK, Petr; Kompletní průvodce CSS. Praha: Computer Press a.s., 2003, 192s. MEYER, Eric A.; Eric Meyer o CSS Kompletní původce. Brno: Zoner Software s.r.o., ISBN , 560s 17

HTML Hypertext Markup Language

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

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

HTML - Úvod. Zpracoval: Petr Lasák

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

Více

Přehled základních html tagů

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

Více

Základy HTML. Autor: Palito

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

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

Více

Tvorba webových stránek

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

Více

22. Tvorba webových stránek

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

Více

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Č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

Více

Blokový model v CSS:

Blokový model v CSS: Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a

Více

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

Více

Tvorba webových stránek

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

Více

Vývoj Internetových Aplikací

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

Více

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

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

Více

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

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

Více

O CSS podrobněji. Box model Document flow Layout

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

Více

WWW a HTML. Základní pojmy. Ivo Peterka

WWW a HTML. Základní pojmy. Ivo Peterka WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,

Více

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

Více

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

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

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

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

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

Více

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

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

Více

NSWI096 - INTERNET. Úvod do HTML

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

Více

TVORBA WEBOVÝCH STRÁNEK

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

Více

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

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová (X)HTML-TAGY Mgr. Petr Slívko VOŠ a SŠT Česká Třebová Tagy Popis Značka tagu začíná levou ostrou závorkou. Za ní následuje jméno tagu, před kterým nesmí být mezera. Mohou následovat atributy. Před

Více

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

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

Více

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

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

Více

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

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

Více

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

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

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

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

Více

Tvorba stránek v HTML ve Wordu

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

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

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

Více

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

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

Více

Internetové technologie, cvičení č. 5

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

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok

Více

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

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

Více

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

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

Více

Mgr. Stěpan Stěpanov, 2013

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

Více

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

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

Více

Inovace výuky prostřednictvím šablon pro SŠ

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

Více

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

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

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE

Více

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

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í

Více

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

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

Více

Kaskádové styly (CSS) Cascading Style Sheets

Kaskádové styly (CSS) Cascading Style Sheets CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...

Více

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11 Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................

Více

absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.

absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru. Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org Potřebný software Html editor PSPad, který

Více

Uspořádání klient-server. Standardy pro Web

Uspořádání klient-server. Standardy pro Web Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol

Více

Kaskádové styly základy grafiky

Kaskádové styly základy grafiky 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod

Více

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

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

Více

TNPW1 Cvičení

TNPW1 Cvičení 13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS

Více

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

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

Více

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

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

Více

Tvorba internetových stránek

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

Více

Káskádové styly = CSS

Káskádové styly = CSS Návrh a tvorba WWW stránek 1/20 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí

Více

Hlavička dokumentu. mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka</a> </h3> <p> <img alt="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" title="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" class="news-block-img pull-right" src="/thumbs/48/23934103.jpg"> 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 </p> <a href="/23934103-Hlavicka-dokumentu-mezi-head-a-head-obsahuje-informace-vztazene-k-dokumentu-metadata-title-nazev-stranky-povinna-parova-znacka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1368252-Tvorba-webu-kaskadove-styly-css-martin-urza.html">Tvorba webu. Kaskádové styly (CSS) Martin Urza</a> </h3> <p> <img alt="Tvorba webu. Kaskádové styly (CSS) Martin Urza" title="Tvorba webu. Kaskádové styly (CSS) Martin Urza" class="news-block-img pull-right" src="/thumbs/22/1368252.jpg"> Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti). </p> <a href="/1368252-Tvorba-webu-kaskadove-styly-css-martin-urza.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8898475-Referencni-prehled-vlastnosti-css1-cascading-style-sheets-level-1.html">Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)</a> </h3> <p> <img alt="Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)" title="Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)" class="news-block-img pull-right" src="/thumbs/26/8898475.jpg"> Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia </p> <a href="/8898475-Referencni-prehled-vlastnosti-css1-cascading-style-sheets-level-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html">Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!</a> </h3> <p> <img alt="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" title="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" class="news-block-img pull-right" src="/thumbs/24/3816700.jpg"> Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími </p> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10794962-Css-vlastnosti-strucny-prehlad-vlastnosti-pisma-vlastnosti-farby-a-pozadi-font-family-font-style-font-variant-font-weight-font-size.html">CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.</a> </h3> <p> <img alt="CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size." title="CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size." class="news-block-img pull-right" src="/thumbs/27/10794962.jpg"> Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo </p> <a href="/10794962-Css-vlastnosti-strucny-prehlad-vlastnosti-pisma-vlastnosti-farby-a-pozadi-font-family-font-style-font-variant-font-weight-font-size.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4166327-Aplikace-xml-pro-internet.html">APLIKACE XML PRO INTERNET</a> </h3> <p> <img alt="APLIKACE XML PRO INTERNET" title="APLIKACE XML PRO INTERNET" class="news-block-img pull-right" src="/thumbs/24/4166327.jpg"> APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je </p> <a href="/4166327-Aplikace-xml-pro-internet.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/16163005-Tvorba-webovych-stranek.html">TVORBA WEBOVÝCH STRÁNEK</a> </h3> <p> <img alt="TVORBA WEBOVÝCH STRÁNEK" title="TVORBA WEBOVÝCH STRÁNEK" class="news-block-img pull-right" src="/thumbs/33/16163005.jpg"> 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 </p> <a href="/16163005-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html">Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014</a> </h3> <p> <img alt="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" title="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" class="news-block-img pull-right" src="/thumbs/20/595609.jpg"> 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 </p> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1322316-Instalace-programu-ozo-z-www-stranek-ci-odkazu-z-e-mailu.html">Instalace programu OZO. z www stránek či odkazu z e-mailu</a> </h3> <p> <img alt="Instalace programu OZO. z www stránek či odkazu z e-mailu" title="Instalace programu OZO. z www stránek či odkazu z e-mailu" class="news-block-img pull-right" src="/thumbs/22/1322316.jpg"> Instalace programu OZO z www stránek či odkazu z e-mailu První instalaci programu OZO pro rok 2015 si vždy musíte zvolit volbu PLNÁ VERZE PROGRAMU. Upgrade programu OZO 2015 si můžete stahovat až v době, </p> <a href="/1322316-Instalace-programu-ozo-z-www-stranek-ci-odkazu-z-e-mailu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/17497138-Skautis-remote-components-absolventska-prace.html">SkautIS Remote Components absolventská práce</a> </h3> <p> <img alt="SkautIS Remote Components absolventská práce" title="SkautIS Remote Components absolventská práce" class="news-block-img pull-right" src="/thumbs/36/17497138.jpg"> MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1. </p> <a href="/17497138-Skautis-remote-components-absolventska-prace.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/32822142-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html">Úvod do aplikací internetu a přehled možností při tvorbě webu</a> </h3> <p> <img alt="Úvod do aplikací internetu a přehled možností při tvorbě webu" title="Úvod do aplikací internetu a přehled možností při tvorbě webu" class="news-block-img pull-right" src="/thumbs/53/32822142.jpg"> CVT6 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games </p> <a href="/32822142-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5927669-Css-cascading-sytle-sheets-neboli-kaskadove-styly-vznikly-jako-souhrn-metod-pro-upravu-vzhledu-stranek.html">CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.</a> </h3> <p> <img alt="CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek." title="CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek." class="news-block-img pull-right" src="/thumbs/25/5927669.jpg"> Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s </p> <a href="/5927669-Css-cascading-sytle-sheets-neboli-kaskadove-styly-vznikly-jako-souhrn-metod-pro-upravu-vzhledu-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18660672-Css-strucna-reference-kaskadovych-stylu.html">CSS - stručná reference kaskádových stylů</a> </h3> <p> <img alt="CSS - stručná reference kaskádových stylů" title="CSS - stručná reference kaskádových stylů" class="news-block-img pull-right" src="/thumbs/39/18660672.jpg"> 1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height </p> <a href="/18660672-Css-strucna-reference-kaskadovych-stylu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596406-Google-apps-weby-1-verze-2012.html">Google Apps. weby 1. verze 2012</a> </h3> <p> <img alt="Google Apps. weby 1. verze 2012" title="Google Apps. weby 1. verze 2012" class="news-block-img pull-right" src="/thumbs/20/596406.jpg"> Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení </p> <a href="/596406-Google-apps-weby-1-verze-2012.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2532914-Zaklady-www-publikovani.html">Základy WWW publikování</a> </h3> <p> <img alt="Základy WWW publikování" title="Základy WWW publikování" class="news-block-img pull-right" src="/thumbs/24/2532914.jpg"> Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz </p> <a href="/2532914-Zaklady-www-publikovani.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html">Tvorba fotogalerie v HTML str.1</a> </h3> <p> <img alt="Tvorba fotogalerie v HTML str.1" title="Tvorba fotogalerie v HTML str.1" class="news-block-img pull-right" src="/thumbs/20/595703.jpg"> 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é </p> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8008469-Gymnazium-ostrava-hrabuvka-prispevkova-organizace-frantiska-hajdy-34-ostrava-hrabuvka.html">Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka</a> </h3> <p> <img alt="Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka" title="Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka" class="news-block-img pull-right" src="/thumbs/26/8008469.jpg"> Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Power Point Metodický </p> <a href="/8008469-Gymnazium-ostrava-hrabuvka-prispevkova-organizace-frantiska-hajdy-34-ostrava-hrabuvka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html"><link> - definuje vztah k jiným XHTML dokumentům, typicky</a> </h3> <p> <img alt="<link> - definuje vztah k jiným XHTML dokumentům, typicky" title="<link> - definuje vztah k jiným XHTML dokumentům, typicky" class="news-block-img pull-right" src="/thumbs/51/28133790.jpg"> 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 </p> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398341-Nastrojova-lista-v-editacnim-poli.html">Nástrojová lišta v editačním poli</a> </h3> <p> <img alt="Nástrojová lišta v editačním poli" title="Nástrojová lišta v editačním poli" class="news-block-img pull-right" src="/thumbs/22/1398341.jpg"> 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 </p> <a href="/1398341-Nastrojova-lista-v-editacnim-poli.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7922454-Redakcni-system-joomla-prokop-zeleny.html">Redakční systém Joomla. Prokop Zelený</a> </h3> <p> <img alt="Redakční systém Joomla. Prokop Zelený" title="Redakční systém Joomla. Prokop Zelený" class="news-block-img pull-right" src="/thumbs/26/7922454.jpg"> Redakční systém Joomla Prokop Zelený 1 Co jsou to red. systémy? Redakční systémy (anglicky Content Management System - CMS) jsou webové aplikace používané pro snadnou správu obsahu stránek. Hlavním cílem </p> <a href="/7922454-Redakcni-system-joomla-prokop-zeleny.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1485219-Tematicka-oblast-dedicnost-kaskada-css-a-media-stylove-predpisy-pro-ruzne-typy-zobrazovacich-zarizeni.html">Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení</a> </h3> <p> <img alt="Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení" title="Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení" class="news-block-img pull-right" src="/thumbs/22/1485219.jpg"> Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185 </p> <a href="/1485219-Tematicka-oblast-dedicnost-kaskada-css-a-media-stylove-predpisy-pro-ruzne-typy-zobrazovacich-zarizeni.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46404359-Css-kaskadove-styly-formatovani-webovych-stranek.html">CSS Kaskádové styly. formátování webových stránek</a> </h3> <p> <img alt="CSS Kaskádové styly. formátování webových stránek" title="CSS Kaskádové styly. formátování webových stránek" class="news-block-img pull-right" src="/thumbs/61/46404359.jpg"> 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í </p> <a href="/46404359-Css-kaskadove-styly-formatovani-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/27/11018426.jpg"> 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. </p> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33493656-Fiktivni-firma-zaci-ziskaji-zakladni-informace-o-priprave-a-tvorbe-webovych-stranek-na-konci-prezentace-je-ukol-se-kterym-zaci-samostatne-pracuji.html">Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.</a> </h3> <p> <img alt="Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují." title="Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují." class="news-block-img pull-right" src="/thumbs/54/33493656.jpg"> Název a registrační číslo projektu: CZ.1.07/1.5.00/34.0498 Číslo a název oblasti podpory: 1.5 Zlepšení podmínek pro vzdělávání na středních školách Realizace projektu: 02. 07. 2012 01. 07. 2014 Autor: </p> <a href="/33493656-Fiktivni-firma-zaci-ziskaji-zakladni-informace-o-priprave-a-tvorbe-webovych-stranek-na-konci-prezentace-je-ukol-se-kterym-zaci-samostatne-pracuji.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3613269-Podpora-elektronickych-forem-vyuky.html">PODPORA ELEKTRONICKÝCH FOREM VÝUKY</a> </h3> <p> <img alt="PODPORA ELEKTRONICKÝCH FOREM VÝUKY" title="PODPORA ELEKTRONICKÝCH FOREM VÝUKY" class="news-block-img pull-right" src="/thumbs/24/3613269.jpg"> I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a </p> <a href="/3613269-Podpora-elektronickych-forem-vyuky.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5314052-Kaskadove-styly-pismo.html">KASKÁDOVÉ STYLY - PÍSMO</a> </h3> <p> <img alt="KASKÁDOVÉ STYLY - PÍSMO" title="KASKÁDOVÉ STYLY - PÍSMO" class="news-block-img pull-right" src="/thumbs/25/5314052.jpg"> KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum </p> <a href="/5314052-Kaskadove-styly-pismo.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596137-Stredni-prumyslova-skola-ostrov-tvorba-webovych-stranek-petr-pistulka-i2-2012-2013-cc-by-nc-sa3-0-klinovecka-1197-363-01-ostrov.html">Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov</a> </h3> <p> <img alt="Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov" title="Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov" class="news-block-img pull-right" src="/thumbs/20/596137.jpg"> Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil </p> <a href="/596137-Stredni-prumyslova-skola-ostrov-tvorba-webovych-stranek-petr-pistulka-i2-2012-2013-cc-by-nc-sa3-0-klinovecka-1197-363-01-ostrov.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/25/6023545.jpg"> 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. </p> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3163202-Gymnazium-vysoke-myto-nam-vanorneho-163-566-01-vysoke-myto.html">Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto</a> </h3> <p> <img alt="Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto" title="Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto" class="news-block-img pull-right" src="/thumbs/24/3163202.jpg"> 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 </p> <a href="/3163202-Gymnazium-vysoke-myto-nam-vanorneho-163-566-01-vysoke-myto.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398721-Gymnazium-vysoke-myto-nam-vanorneho-163-566-01-vysoke-myto.html">Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto</a> </h3> <p> <img alt="Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto" title="Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto" class="news-block-img pull-right" src="/thumbs/22/1398721.jpg"> 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 </p> <a href="/1398721-Gymnazium-vysoke-myto-nam-vanorneho-163-566-01-vysoke-myto.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398093-Administrace-webu-postup-pri-praci.html">Administrace webu Postup při práci</a> </h3> <p> <img alt="Administrace webu Postup při práci" title="Administrace webu Postup při práci" class="news-block-img pull-right" src="/thumbs/22/1398093.jpg"> 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... </p> <a href="/1398093-Administrace-webu-postup-pri-praci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5927611-Css-1-blokovy-model-kazdy-element-tvori-obdelnik-dva-druhy-obdelniku-blokove-vlozene-zde-je-dlouhy-text-v-kterem-nachazi-vlozene.html">CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...</a> </h3> <p> <img alt="CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené..." title="CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené..." class="news-block-img pull-right" src="/thumbs/25/5927611.jpg"> Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat </p> <a href="/5927611-Css-1-blokovy-model-kazdy-element-tvori-obdelnik-dva-druhy-obdelniku-blokove-vlozene-zde-je-dlouhy-text-v-kterem-nachazi-vlozene.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/12594303-Podrobny-navod-na-instalaci-programu-hiddensms.html">Podrobný návod na instalaci programu HiddenSMS</a> </h3> <p> <img alt="Podrobný návod na instalaci programu HiddenSMS" title="Podrobný návod na instalaci programu HiddenSMS" class="news-block-img pull-right" src="/thumbs/28/12594303.jpg"> Podrobný návod na instalaci programu HiddenSMS Poslední aktualizace: 9. 6. 2009 Samotná instalace programu HiddenSMS se skládá ze dvou kroků: I. PŘIPOJENÍ TELEFONU S POČÍTAČEM - podrobný popis najdete </p> <a href="/12594303-Podrobny-navod-na-instalaci-programu-hiddensms.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/27243834-Word-2007-graficky-manual.html">WORD 2007 grafický manuál</a> </h3> <p> <img alt="WORD 2007 grafický manuál" title="WORD 2007 grafický manuál" class="news-block-img pull-right" src="/thumbs/50/27243834.jpg"> 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ů </p> <a href="/27243834-Word-2007-graficky-manual.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html">1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1</a> </h3> <p> <img alt="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" title="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" class="news-block-img pull-right" src="/thumbs/19/356186.jpg"> 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ý </p> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html">Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku</a> </h3> <p> <img alt="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" title="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" class="news-block-img pull-right" src="/thumbs/20/596686.jpg"> Databázové aplikace pro internetové prostředí 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Projekt: Inovace výuky prostřednictvím ICT Registrační číslo: CZ.1.07/1.5.00/34.250 </p> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1818238-Obsah-1-google-picasa-3-2-pouzivani-programu-picasa-6-2-1-organizovani-fotografii-8-2-2-vyhledavani-8-2-3-uprava-fotografii-9-2.html">OBSAH 1. Google Picasa...3 2. Používání programu Picasa...6 2.1 Organizování fotografií...8 2.2 Vyhledávání...8 2.3 Úprava fotografií...9 2.</a> </h3> <p> <img alt="OBSAH 1. Google Picasa...3 2. Používání programu Picasa...6 2.1 Organizování fotografií...8 2.2 Vyhledávání...8 2.3 Úprava fotografií...9 2." title="OBSAH 1. Google Picasa...3 2. Používání programu Picasa...6 2.1 Organizování fotografií...8 2.2 Vyhledávání...8 2.3 Úprava fotografií...9 2." class="news-block-img pull-right" src="/thumbs/23/1818238.jpg"> Digitální fotoalbum OBSAH 1. Google Picasa...3 2. Používání programu Picasa...6 2.1 Organizování fotografií...8 2.2 Vyhledávání...8 2.3 Úprava fotografií...9 2.4 Tisk fotografií...10 2.5 Webové album...11 </p> <a href="/1818238-Obsah-1-google-picasa-3-2-pouzivani-programu-picasa-6-2-1-organizovani-fotografii-8-2-2-vyhledavani-8-2-3-uprava-fotografii-9-2.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2017 © DocPlayer.cz <a href="/support/privacy-policy/">Ochrana osobních údajů</a> | <a href="/support/terms-of-service/">Podmínky obsluhování</a> | <a href="/support/feedback/">Kontaktní formulář</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/836ca/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":24,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=24&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>