Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k 7.4. 2009 Středisko komunikačních a informačních systému Univerzita obrany Brno 2009 2008 Středisko komunikačních a informačních systémů, Univerzita obrany 1
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
Ú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. 1.1. Ú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. 1.2. 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
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
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
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
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
<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
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 1.10. 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 1.11. Použití hypertextového odkazu na email. <a href="mailto:tomislav.kunes@unob.cz">tomislav Kunes</a> Tomislav Kunes Příklad 1.12. Ukázka vložení obrázku na stránku. 9
<img src="strom.gif" alt="strom"> Příklad 1.13. 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 1500 110 Únor 1450 108 Březen 1400 115 Příklad 1.14. 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
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. 2.2. 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
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 H2. 2.3. 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
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ů. 2.6. 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
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
Měsíc Počet studentů Počet zaměstnanců Leden 1500 110 Únor 1450 108 Březen 1400 115 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: http://www.elka.cz/easypad/index.php3. 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
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 2004010101. 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 http://www.slunecnice.cz/sw/topstyle/lite. 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 www.bradsoft.com. Kliknete myší na daný hypertextový odkaz www.bradsoft.com 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
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 http://www.jakpsatweb.cz Tvorba webu http://www.tvorba-webu.cz Jak na web http://www.jaknaweb.com HTML v příkladech http://www.kit.tul.cz World Wibe Web Consortium http://www.w3.org Wikipedia - HTML http://en.wikipedia.org/wiki/html 5. Seznam literatury WEMPE, Faithe; HTML a CSS Krok za krokem. Brno: Computer Press a.s., 2007. ISBN 978-80-251-1505-3, 324s. GRUSOVÁ, Lucie; CSS pro úplné začátečníky. Brno: Computer Press a.s., 2003 ISBN 80-7226-680-2, 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., 2007. ISBN 978-80-86815-64-0, 560s 17