1 SIPVZ Tvorba www stránek RNDr. Jana Reslová SPŠE a VOŠ Pardubice V čem vytvářet HTML stránky... 2 Editor 1stPage... 4 Instalace...4 Prostředí editor...
SIPVZ – Tvorba www stránek RNDr. Jana Reslová SPŠE a VOŠ Pardubice V čem vytvářet HTML stránky ....................................................................................................................................................................... 2 Editor 1stPage.................................................................................................................................................................................................... 4 Instalace .......................................................................................................................................................................................................................4 Prostředí editoru 1stPage.............................................................................................................................................................................................4 Úprava prostředí 1stPage.............................................................................................................................................................................................5
Základy HTML ................................................................................................................................................................................................. 7 Základní části textu......................................................................................................................................................................................................7 Obrázky ........................................................................................................................................................................................................................7 Odkazy ..........................................................................................................................................................................................................................8 Tabulky.........................................................................................................................................................................................................................8
Styly css ............................................................................................................................................................................................................ 10 Definice stylu společná pro více dokumentů.............................................................................................................................................................11 Definice stylu přímo v dokumentu ............................................................................................................................................................................11
Příprava obrázků pro internet....................................................................................................................................................................... 12 Velikost obrázku.........................................................................................................................................................................................................12 Příprava obrázků pro internet – program IrfanView verze 3.92..............................................................................................................................13 Příprava obrázků – program IrfanView verze 3.85 ..................................................................................................................................................17
Jak zkontrolovat bezchybnost........................................................................................................................................................................ 20 Kontrola HTML kódu................................................................................................................................................................................................20
Umístění souborů na internet......................................................................................................................................................................... 21 Přenos souborů na internet .......................................................................................................................................................................................21 FTP Transfer programu 1stPage ..............................................................................................................................................................................21
SIPVZ – Publikování na www
1/22
RNDr. Jana Reslová
V čem vytvářet HTML stránky Wysiwyg editory (FrontPage, Macromedia DreamViewer, apod.) umožňují psát stránky bez znalosti html kódu, stránky se vytvářejí a formátují podobně jako dokumenty ve Wordu (wysiwyg = what you see is what you get = co vidíš, to dostaneš). Program sám generuje výsledný html kód. kvalitní wysiwyg editory jsou komerční produkty, cena programu FrontPage je něco přes jeden tisíc korun, cena Macromedia Dreamweaver přesahuje deset tisíc korun. výhodou je, že stránky vytvoříte poměrně snadno. při práci s těmito programy je třeba dodržovat určité zásady a postupy, aby vygenerový kód nebyl chaotický a byl úsporný, aby stránky byly formátovány pomocí stylů. Je třeba se vyvarovat jednoduchých postupů přílišného formátování pomocí tlačítek. Máte-li k dispozici pro svoji tvorbu program Microsoft FrontPage, či uvažujete o jeho zakoupení, prohlédněte si články o tvorbě www pomocí Microsoft FrontPage.
HTML editory (HomeSite, 1stPage, GoldenHTML, apod.) umožňují přímo zapisovat a editovat html kód stránek, přičemž barevně odlišují html značky od vlastního textu stránky. HTML tagy není nutné přesně znát, je možné je vkládat pomocí tlačítek panelů nástrojů editoru, či pomocí jeho menu. Při vytváření hlml kódu stránky umožňují editory průběžně zobrazovat její výslednou podobu v náhledovém okně. veškerý potřebný software (editor pro tvorbu html, editor stylů, grafický editor pro přípravu obrázků) je free (zdarma). hlml kód vytváříte přesně podle svých představ. musíte se naučit rozumět html kódu Chcete-li se naučit základy html a dozvědět se, jak vytvářet co nejefektivnější stránky, či prostě nemáte k dispozici program Microsoft FrontPage, přihlašte se na kurz Publikování na www - s HTML editorem 1stPage. Chcete-li se podívat, co se naučíte v tomto kurzu, přečtěte si další kapitoly o tvorbě www pomocí 1stPage.
Zvolíte-li tvorbu www stránek prostřednictvím free software, budete potřebovat: HTML editor 1stPage editor stylů Top Style Lite editor obrázků IrfanView internetové prohlížeče Microsoft Internet Explorer a Mozila Všechen potřebný software najdete na CD, které obdržíte k našemu kurzu.
SIPVZ – Publikování na www
2/22
RNDr. Jana Reslová
Co to je HTML HTML stránky obsahují text doplněný html značkami, tzv. tagy:
HTML stránky jsou uloženy jako soubory s příponou htm nebo html. Je vhodné zvolit jednu z těchto možností a tu pak používat pro všechny stránky. Hlavní stránku, která má být zobrazena po zadání internetové adresy uložíme jako soubor index.htm (nebo index.html). Obrázky jsou uloženy samostatně jako soubory jpg, gif nebo png. Stránky, které je zobrazují, obsahují pouze html značku s přesným určením místa a názvu souboru s obrázkem. Další soubory (pdf, zip, xls, apod.) jsou rovněž uloženy samostatně, stránky obsahují odkaz s přesným určením místa a názvu těchto souborů. Některé typy souborů mohou být po kliknutí na odkaz otevřeny přímo internetovým prohlížečem, jiné jsou určeny ke „stažení“ (uložení na disk).
SIPVZ – Publikování na www
3/22
RNDr. Jana Reslová
Editor 1stPage Instalace Soubory k instalaci 1stPage spolu s dalšími materiály jsou na CD, které obdržíte na našem kurzu nebo na internetových stránkách sipvz.spse.cz. Editor 1stPage verze 2000 můžete instalovat ze samorozbalovacího archivního souboru 1st_page.exe, který obsahuje jak českou, tak anglickou verzi programu. Součástí této instalace je i nástroj pro FTP přenos souborů na internetový server. Nejnovější verzi programu 1stPage najdete na stránkách http://www.evrsoft.com.. K dispozici je i čeština, kterou najdete na internetových stránkách timer.wz.cz Čeština bohužel funguje pouze na některých operačních systémech. Prostředí editoru 1stPage Zobrazení kódu
Nový soubor, otevřít, uložit, uložit všechny soubory
Zobrazení náhledu
Panely nástrojů
Zavření souboru
Zapnutí trvalého náhledu
Otevření souboru – 2x kliknout
SIPVZ – Publikování na www
Výběr složky
Přepínání mezi otevřenými stránkami
4/22
RNDr. Jana Reslová
Úprava prostředí 1stPage Pokud není správně zobrazen text v okně Edit (písmena s diakritikou), nastavíme písmo pomocí menu Options – Editing Preferences
Vybereme East Europe
SIPVZ – Publikování na www
5/22
RNDr. Jana Reslová
Úprava panelů nástrojů Pokud si zavřeme některý z panelů nástrojů, klikneme pravým tlačítkem myši na kterémkoliv panelu a zapneme zobrazení požadovaného panelu. Pokud některý panel vytáhneme myší na plochu, stane se z něj samostatný plovoucí panel, můžeme jej myší přetáhnout zpět mezi ostatní panely, pořadí jejich záložek upravíme pomocí Organize palete. Další tlačítka lze na panely přidávat pomocí Customize. Není-li na panelech například tlačítko pro odstavec (Paragraph), přidáme jej např. na panel Standard následujícím způsobem:
1) Označíme požadovaný panel 2) Vybereme tlačítko a myší jej přetáhneme na zvolené místo na ukázce panelu
3) Stiskneme Save
SIPVZ – Publikování na www
6/22
RNDr. Jana Reslová
Základy HTML O vytváření HTML kódu již byla napsána řada učebnic, mnohé najdete na internetu (např. na stránkách www.kosek.cz, nebo www.jakpsatweb.cz). Na CD, které obdržíte k našemu kurzu, najdete cvičení s odkazy na vybrané kapitoly rozsáhlé elektronické učebnice Jak psát web, která je se souhlasem autora součástí CD. V následující tabulce jsou uvedeny základní html značky (tzv. tagy), které potřebujete k vytvoření svých prvních internetových stránek. Další spolu s popisem jejich významu a jejich parametrů najdete ve zmíněných učebnicích. Základní části textu HTML tag
...
Význam Hlavní nadpis
Panel nástrojů 1stPage Standard
...
Podnadpis
Standard
...
Odstavec
nutno přidat na některý panel
Nedělitelná mezera
Standard
<
Znak menší (např. x<0)
>
...
Znak větší (např. y>x) Zvýrazněné písmo (obvykle tučné) Zvýrazněné písmo (obvykle kurzíva) Tučné písmo (bold)
menu Insert - Special Character Symbols menu Insert - Special Character Symbols Fonts
...
Kurzíva (italic)
Fonts
<sup>...
Horní index
Fonts
<sub>...
Dolní index
Fonts
Konec řádku
Standard
Obrázek
Standard
<strong>... <em>...
Tlačítko 1stPage
Fonts Fonts
Obrázky
Obrázek
přetažením souboru s obrázkem z levého panelu do okna Edit
Na CD, které obdržíte k tomuto kurzu, najdete cvičení s odkazy na vybrané kapitoly elektronické učebnice Jak psát web, kde jsou podrobně popsány výše jmenované tagy.
SIPVZ – Publikování na www
8/22
RNDr. Jana Reslová
Dialogová okna vložení odkazu po stisknutí tlačítka
Dialogové okno vložení obrázku po stisknutí tlačítka
:
: Relativní adresa URL se vytvoří po kliknutí na tlačítko a označení souboru. Odkaz může být na stránku v jiné složce – pak zde bude uvedena cesta do této složky.
Výběr obrázku Text, který je zobrazován při ukázání myší na obrázek a který se zobrazuje v místě obrázku, dokud se celý obrázek nenačte do stránky.
Text, který se bude zobrazovat u odkazu po nastavení ukazatele myši nad odkaz. Obdobně jako parametr alt u obrázku.
Stisknutím tlačítka Recalculate se zapíše šířka a výška obrázku. Zarovnání obrázku vzhledem k textu odstavce.
SIPVZ – Publikování na www
9/22
Odkaz bude otevřen v novém okně. Obvykle používáme u odkazů na "cizí" internetové stránky.
RNDr. Jana Reslová
Styly css Pomocí stylů definujeme vzhled jednotlivých prvků html stránky. V obsahu dokumentu pak necháváme HTML tagy bez atributů pro formátování (align, bgcolor, apod.), nepoužíváme formátovací tagy (font, apod.). Přehled css stylů najdete v učebnicích na internetu (např. www.jakpsatweb.cz nebo www.kosek.cz). Styly můžete vytvářet pomocí programu Top Style Lite. Pokud není součástí instalace vašeho html editoru (instalace 1stPage jej neobsahuje), najdete jej např. na www.bradsoft.com nebo na CD, které obdržíte k tomuto kurzu.
V panelu vlastností volíme nastavení stylu – vybíráme některou z možností, nemusíme d á ř
SIPVZ – Publikování na www
10/22
RNDr. Jana Reslová
Definice stylu společná pro více dokumentů Definici stylu uložíme do samostatného souboru (např. main.css). Tuto definici pak použijeme pro všechny stránky. Výhodou tohoto řešení je jednotný vzhled všech stránek a snadná úprava vzhledu, kterou provedeme v jediném souboru s definicí stylu (main.css). V dokumentech html v části head zapíšeme připojení souboru se styly (v programu 1stPage přetáhneme soubor main.css z levého panelu, kde se nám zobrazují soubory z vybrané složky, do okna editoru html do části head):
Obsah souboru main.css může například vypadat takto: body {background-color: #FFFFCC;} h1,h2 { font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: Maroon; } h2 {font-size: larger; font-style: italic;} p { font-family: "Times New Roman", Times, serif; font-size: 12pt; text-align: justify; } a {color: Purple; text-decoration: none; } a:hover { text-decoration: underline; }
HTML tagy: body ....... h1 .......... h1,h2 ....... p ........... a ........... a:hover .... a:visited ...
tělo stránky (nastavujeme pozadí, okraje) hlavní nadpis (písmo, barvy, tučné, kurzíva, zarovnání textu) společný zápis vlastností pro h1 a h2 odstavec (písmo, barvy, zarovnání textu) odkaz (barva, tučné, kurzíva, podtržení) při přetí myší přes odkaz (změna barvy, podtržení) již navštívený odkaz (jiná barva)
barva pozadí barva písma druh písma velikost písma tučné písmo kurzíva podtržené písmo zarovnání textu
Definice stylu přímo v dokumentu Definici stylu přímo v dokumentu používáme zpravidla pouze na určitých stránkách po připojení stylů ze souboru. Provedeme tak změnu obecně platného stylu definovaného v souboru pouze pro tuto určitou stránku (např. barvu pozadí, velikost či zarovnání nadpisu). V části head zapíšeme např.: <style type="text/css">
SIPVZ – Publikování na www
11/22
RNDr. Jana Reslová
Příprava obrázků pro internet Pro internet můžete použít obrázky ve formátu jpeg, gif nebo png. Soubory s obrázky jsou uloženy samostatně, internetové stránky pak obsahují html značku s přesným umístěním a názvem souboru s obrázkem. Formát Vlastnosti Použití Plné barvy (16 miliónů), kvalitu obrázku lze nastavit mírou komprese. Fotografie, malby – velký počet barev a plynulé přechody mezi nimi. JPG Pouze 256 základních barev, bezztrátová komprese. Kresby, grafy, nápisy, mapy – menší počet barev, ostré hrany. GIF Animované obrázky. Obrázky s průhledným pozadím. Animované obrázky. Náhrada GIFu (pouze neumožňuje animované obrázky). Kresby, grafy, nápisy, mapy – menší počet barev, ostré hrany. PNG Plné barvy, lze nastavit. Obrázky s průhledným pozadím. Podporují jej moderní internetové prohlížeče. Velikost obrázku Obrázky připravíme v takových rozměrech, v jaké velikosti je chceme mít na internetové stránce. Rozměry by neměly přesáhnout 600pix. Takto velké obrázky obvykle neumísťujeme na stránky přímo, ale připravíme jejich zmenšené kopie (100-200pix) jako náhledy, které na stránce fungují jako odkazy, po kliknutí na malý náhled obrázku se zobrazí velký obrázek. Obrázky doplňující text stránky mohou mít rozměry 200-400pix. Velikost souboru Velikost souboru v kB je přímo úměrná velikosti rozměrů obrázku. U běžných obrázků by neměla přesáhnout 20kB. Dále je velikost souboru závislá na množství barev a míře komprese.
SIPVZ – Publikování na www
12/22
RNDr. Jana Reslová
Příprava obrázků pro internet – program IrfanView verze 3.92 K přípravě obrázků pro internetové stránky (změna velikosti, přejmenování, apod.) můžete použít jakýkoliv grafický editor. Free prohlížeč obrázků IrfanView verze 3.92 můžete nainstalovat ze souboru iview392.exe. Po nainstalování zkopírujte soubor cestina.dll do složky Languages (obvykle C:\ProgramFiles\IrfanView\Languages). Po spuštění programu IrfanView v menu Options – Change language vyberete češtinu. Nastavení zobrazení obrázku – menu View – Display options – Fit only big images to window [česky Zobrazit – Možnosti zobrazení – Přizpůsobit pouze velké obrázky oknu] Přejmenování obrázku – menu File – Rename File (F2) [česky Soubor – Přejmenovat soubor] Dávkové přejmenování obrázků – menu File – Batch Conversion/Rename (B) [česky Soubor – Dávková konverze/přejmenování]
Vpravo označíme soubory, které chceme přejmenovat a stiskneme tlačítko Přidat. Chceme-li přejmenovat všechny, nemusíme je označovat, stiskneme Přidat vše.
Zaškrtneme Dávkové přejmenování a stiskneme tlačítko Nastavit. V zobrazeném okně zaškrtneme Přejmenovat vstupní soubory a zadáme jméno. Stiskneme OK. Stiskneme Spustit.
SIPVZ – Publikování na www
13/22
RNDr. Jana Reslová
Zmenšení velikosti obrázku – menu Image – Resize/Resample (Ctrl R) [česky Obrázek – Změnit velikost/rozlišení] Dávkové zmenšení velikosti obrázků – menu File – Batch Conversion/Rename (B) [česky Soubor – Dávková konverze/přejmenování]
Vybereme soubory a stiskneme Přidat nebo Přidat vše. Stiskneme Použít současnou složku jako výstupní. Zaškrtneme Dávkovou konverzi, zaškrtneme Pužít pokročilé možnosti a stiskneme Nastavit pokročilé možnosti. V zobrazeném okně zaškrtneme Změnit velikost a zadáme požadovaný rozměr. Zaškrtneme Zachovat poměr stran a Přepsat existující soubory. Stiskneme Spustit.
Zde je možné nastavit míru komprese (kvalitu).
SIPVZ – Publikování na www
14/22
RNDr. Jana Reslová
Vytvoření náhledů (malých obrázků - obvykle lze na ně na stránkách kliknout a zobrazit větší obrázek): Původní obrázky zkopírujeme pod novými názvy (např. n_foto01.jpg, n_foto02.jpg, atd.) a zmenšíme jejich velikost (např. šířka 150 pix). Dávkové zkopírování s novými názvy – menu File – Batch Conversion/Rename (B) [česky Soubor – Dávková konverze/přejmenování]
Vybereme soubory a stiskneme Přidat nebo Přidat vše. Stiskneme Použít současnou složku jako výstupní. Zaškrtneme Dávkovou konverzi s přejmenováním výsledných souborů, nastavíme vzor jména, zaškrtneme Použít pokročilé možnosti a stiskneme Nastavit pokročilé možnosti. V zobrazeném okně zaškrtneme Změnit velikost a zadáme požadovaný rozměr. Zaškrtneme Zachovat poměr stran. Stiskneme Spustit.
SIPVZ – Publikování na www
15/22
RNDr. Jana Reslová
Vytvoření výřezu obrázku – obrázek zobrazíme ve 100% velikosti [menu Zobrazit – Původní velikost (Ctrl+H)], myší označíme požadovanou část obrázku a provedeme menu Edit – Crop selection (Ctrl+Y) [česky Úpravy – Vystřihnout výběr (Ctrl+Y)] Zobrazení všech obrázků ze zvolené složky – menu File – Thumbnails (klávesa T) [ česky Soubor – Miniatury] – otevře se nové okno Zvětšení rozměrů miniatur – menu Options – Set thumbnail options [česky Nastavení – Nastavit možnosti miniatur] Obnovení miniatur (např. po dávkovém přejmenování obrázků) – menu View – Refresh (F5) [česky Zobrazit – Obnovit (F5)]
SIPVZ – Publikování na www
16/22
RNDr. Jana Reslová
Příprava obrázků – program IrfanView verze 3.85 K přípravě obrázků pro internetové stránky (změna velikosti, přejmenování, apod.) můžete použít jakýkoliv grafický editor. Návod k používání progranu IrfanView 3.85: Zobrazení náhledů všech obrázků ze zvolené složky – menu File – Thumbnails (T) Přejmenování obrázku – menu File – Rename File (F2) Dávkové přejmenování obrázků – menu File – Batch Conversion/Rename (B)
Vpravo označíme soubory, které chceme přejmenovat a stiskneme tlačítko Add. Chceme-li přejmenovat všechny, nemusíme je označovat, stiskneme Add all
Zaškrtneme Batch rename a stiskneme tlačítko Set rename options. V zobrazeném okně zaškrtneme Rename input files a zadáme název.
SIPVZ – Publikování na www
17/22
RNDr. Jana Reslová
Zmenšení velikosti obrázku – menu Image – Resize/Resample (Ctrl R) Dávkové zmenšení velikosti obrázků – menu File – Batch Conversion/Rename (B) Zaškrtneme Resize, nastavíme požadovanou velikost, např. výšku 400 pixelů, zaškrtneme Preserve aspect ratio (zachovat poměr výšky a šířky) Zaškrtneme Overwrite existing files (přepsat původní soubory) a stiskneme OK
Vybereme soubory a stiskneme Add nebo Add all. Stiskneme Use this directory as ouput. Zaškrtneme Batch conversion a stiskneme Set advanced options V zobrazeném okně nastavíme požadovanou změnu velikosti.
SIPVZ – Publikování na www
18/22
RNDr. Jana Reslová
Vytvoření náhledů (malých obrázků). Obvykle lze na ně na stránkách kliknout a zobrazit větší obrázek. Původní obrázky zkopírujeme pod novými názvy (např. n_foto01.jpg, n_foto02.jpg, atd.) a zmenšíme jejich velikost (např. šířka 150 pix). Dávkové zkopírování s novými názvy – menu File – Batch Conversion/Rename
Vybereme soubory a stiskneme Add nebo Add all. Stiskneme Use this directory as ouput. Zaškrtneme Batch rename a stiskneme Set rename options. V zobrazeném okně zadáme název, zaškrtneme Copy input files to output directory.
Pak pomocí dávkového zpracování zmenšíme velikost souborů n_foto01.jpg, n_foto02.jpg, atd.
SIPVZ – Publikování na www
19/22
RNDr. Jana Reslová
Jak zkontrolovat bezchybnost Kontrola HTML kódu Vytvořené stránky zkontrolujeme prostřednictvím validátoru World Wide Web Consortia. Na internetové stránce http://validator.w3.org zadáme postupně všechny svoje stránky.
Pokud máme dokument HTML 4.0 a dostaneme takovouto odpověď, je náš html kód správný.
Pomocí tlačítka Procházet vybereme html soubor na svém počítači, který chceme zkontrolovat a stisknete Check. Takto postupně zkontrolujeme všechny soubory.
SIPVZ – Publikování na www
20/22
RNDr. Jana Reslová
Umístění souborů na internet Závěrečné práce absolventů našich kurzů umístíme na naše internetové stránky http://sipvz.spse.cz . Pro svoje potřeby si můžete zřídit prostor na některé internetovém serveru, přehled freehostingových serverů, které tuto službu poskytují zdarma, najdete na http://www.webhosingy.cz . Přenos souborů na internet Soubory je možné kopírovat na internet prostřednictvím některých internetových stránek nebo pomocí FTP. Pro FTP přenos potřebujeme program, který tuto službu umožňuje (např. Windows Comander). HTML editor 1stPage rovněž tuto službu poskytuje, je však potřeba doplnit soubor transfer.exe. FTP Transfer programu 1stPage Pokud jste k instalaci 1stPage použili soubor 1st_ page.exe z našich internetových stránek nebo z CD k našemu kurzu, který již FTP Transfer obsahuje, nemusíte tedy již nic instalovat. Pokud jste použili jinou instalaci, najdete doplňující nástroj programu 1stPage pro FTP přenos souborů na http://www.evrsoft.com/1stpage/modules/ Stažený soubor transfer.exe umístíme do složky s programem 1stPage (obvykle C:\Program Files\1stPage2000\ nebo např. C:\Prac\1stPage200\). V editoru 1stPage jej spustíme pomocí menu Tools - 1st Transfer FTP
Klikneme pravým tlačítkem myši do prázdného pravého okna a z menu zvolíme Create Server
SIPVZ – Publikování na www
21/22
RNDr. Jana Reslová
Vybereme složky a soubory. Šipkou nebo přetažením myší zahájíme přenos souborů.
