Jak si vytvořit stránku Co je potřeba - Co není potřeba - Dva kroky - Soubory - HTML editory - Ťukání zdroje - Postup pro začátečníky - Zlatá střední cesta Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (ve Windows Notepad - Poznámkový blok). Potřebujete webový prohlížeč. Na novějších strojích je vždycky -- Internet Explorer (modré éčko), případně Mozilla (dráček), Firefox (červená panda) nebo Opera (červené Óčko), vše to je zdarma. Hodí se připojení na internet. Kdo nemá připojení na internet, musí se alespoň jednou dostat na chvíli k Internetu a mít tam možnost kopírovat z něčeho, na čem si hotové stránky přinese (třeba z diskety nebo fleshky). Musíte mít o čem psát. Nepouštějte se do toho, pokud neumíte kopírovat soubory nebo nevíte, co je adresář (složka). Co není potřeba Není třeba mít připojení na Internet. Obejdete se i bez drahých nebo složitých programů. Nemusíte umět programovat. Pro základní pokusy nemusíte nic platit (platí se, až když chcete vlastní doménu) Dva kroky 1. napsání stránky = vytvoření souboru html (nebo více propojených souborů) 2. vystavení takového souboru na internet (zkopírování na server ) V tomto textu se budu zabývat krokem prvním, vytvářením souborů stránek. Napřed na vlastním disku.
Transcript
Jak si vytvořit stránkuCo je potřeba - Co není potřeba - Dva kroky - Soubory - HTML editory - Ťukání zdroje - Postup pro začátečníky - Zlatá střední cesta
Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor
(ve Windows Notepad - Poznámkový blok). Potřebujete webový prohlížeč. Na novějších strojích je vždycky -- Internet Explorer
(modré éčko), případně Mozilla (dráček), Firefox (červená panda) nebo Opera (červené Óčko), vše to je zdarma.
Hodí se připojení na internet. Kdo nemá připojení na internet, musí se alespoň jednou dostat na chvíli k Internetu a mít tam možnost kopírovat z něčeho, na čem si hotové stránky přinese (třeba z diskety nebo fleshky).
Musíte mít o čem psát. Nepouštějte se do toho, pokud neumíte kopírovat soubory nebo nevíte, co je adresář
(složka).
Co není potřeba Není třeba mít připojení na Internet. Obejdete se i bez drahých nebo složitých programů. Nemusíte umět programovat. Pro základní pokusy nemusíte nic platit (platí se, až když chcete vlastní doménu)
Dva kroky1. napsání stránky = vytvoření souboru html (nebo více propojených souborů) 2. vystavení takového souboru na internet (zkopírování na server)
V tomto textu se budu zabývat krokem prvním, vytvářením souborů stránek. Napřed na vlastním disku.
SouboryInternetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o značky jazyka HTML (tagy). Soubor s příponou .html má na disku ikonku, která ukazuje, že jde o stránku. Například může vypadat takto:
Stránka se dá otevřít dvěma způsoby:1. buďto se na ni podívat jako na stránku (v prohlížeči), pak se nedá upravovat. 2. nebo otevřít jako text (třeba v Poznámkovém bloku), tomu se říká zdroj nebo kód
nebo zdrojový kód, ten se dá upravovat. Tak se stránky vytvářejí, jako kód.
Soubory HTML můžete vytvořit1. buď v nějakém HTML editoru (dobré pro začátečníky), 2. nebo můžete napsat rovnou zdroj v HTML jazyce (to je pracnější, ale jistější,
zábavnější a není to až tak těžké).
HTML editory - programyHTML editory jsou programy speciálně určené pro tvorbu stránek. Pro začátečníky jsou použitelné zejména wysiwyg editory, ve kterých píšete rovnou text a kódem html se nezabýváte.
Ve wysiwyg editoru se normálně napíše text, vloží se obrázky a uloží se to na disk do souboru s příponou html. To je vše. Editor všechny html značky (tagy) doplní sám.
Z wysiwyg editorů znám Dreamweaver, FrontPage 2000 (verze 2002 a 2003 jsou česky), NVU a pár dalších, ale ne moc dobrých programů. Wysiwyg editory mají samozřejmě své nevýhody, hlavní je sporná kvalita vytvořeného kódu. To je ale pro začátek jedno. Více v textu o editorech .
Výrobci wysiwyg editorů říkají: S naším programem můžete tvořit stránky bez znalosti jazyka HTML!
Já říkám: V HTML jazyce můžete tvořit stránky bez nutnosti používat nějaký komplikovaný program.
Kromě wysiwyg editorů tedy existují i editory strukturní, ve kterých píšete přímo kód, ale ten program s tím hodně pomáhá (napovídá, doplňuje apod.). Strukturní editory: HomeSite, PSPad, EasyPad, UltraEdit, jEdit apod., v nouzi i Poznámkový blok. Prostě normální textové editory. Ale to už jsem u druhé možnosti dělání stránek, u ťukání zdroje.
Na psaní stránky nelze používat Word.
Ťukání zdrojeKdo chce být pánem situace, napíše si zdroj od začátku sám v textovém editoru. Musí se naučit základy jazyka HTML, čemuž se stejně časem nelze vyhnout, protože složitější věci se ve wysiwyg editorech dělají špatně. Nyní ukázka zdrojového kódu HTML:
<html><head><title>Má první stránka</title></head> <body> Moje první html stránka. A nějaké další texty.</body></html>
Když si vezmete třeba Poznámkový blok (Notepad), vyťukáte tam předchozí textík (nebo zkopírujete) a uložíte jej někam na disk jako soubor třeba pod jménem priklad1.html, máte hotovou první internetovou stránku . Příklad si můžete zobrazit v prohlížeči.
Postup pro začátečníkyJak vytvořit HTML soubor ve Windows (jeden z mnoha způsobů). (Komu by něco nešlo, ať pak zkusí ještě podrobnější návod.)
1. Vytvořte si na disku novou složku (adresář), například C:\pokus a přejděte do ní 2. Vytvořte nový textový soubor (třeba pravým tlačítkem > Nový objekt) 3. Přejmenujte jej na jméno stranka.html (potvrďte změnu přípony), změní se ikona u
souboru 4. Otevřete dvojklikem. V prohlížeči se zobrazí prázdná stránka. 5. Zadejte Zobrazit - Zdroj. Spustí se textový editor, zatím prázdný. 6. Sem napište nějaký text, podle libosti jej doplňte libovolnými HTML značkami (vizte
příklady v základech HTML). 7. Soubor - uložit. 8. Přepněte se zpátky do prohlížeče a zadejte obnovit (F5). 9. Prohlédněte si změny 10. Případně se vraťte do texťáku a znovu upravte zdroj. Po uložení a obnovení se změny
projeví.
oooooooooooooooo. Takto můžete experimentovat do nekonečna.
Zatím je ta stránka na vašem disku. Kopírovat na server ji budete později.
V názvech souborů určených pro web nikdy nepoužívejte diakritiku ani mezery! Doporučuji všechny názvy zadávat malými písmeny (ať to potom nespletete).
Zlatá střední cestaZajímavý způsob, jak se naučit HTML a dělat dobré stránky:
tvořit soubory v nějakém wysiwyg editoru, prohlížet si zdrojové kódy, které ten program generuje, případně je trochu pozměnit a sledovat, co se stane.
Například já jsem to tak zpočátku dělal.
Základy HTMLZobrazení zdrojového kódu - Nultý příklad na HTML - Tagy = značky - 1. příklad, struktura - Párové tagy - 2. příklad, změna vzhledu - 3. příklad, pozadí a odkazy - Obrázky, čáry, zarovnání - Další studium
Tento text pouze naznačuje základy HTML. Zatím hodně zjednodušuji. Pro důkladnější studium jsem napsal podrobnou referenci HTML s přehledem tagů.
Pokud používáte nějaký grafický (wysiwyg) editor jako třeba FrontPage, nemusíte se o HTML starat. Ale jen do chvíle, než nastanou problémy. Takže lepší je naučit se rovnou HTML.
Zobrazení zdrojového kóduKaž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 zdrojový kód prohlédnout nebo upravit, zadejte z menu prohlížeče příkaz Zobrazit > Zdrojový kód (případně View > Source, může se to jmenovat i jinak). Otevře se nějaký program a v něm bude zdrojový kód. Ten program je nejčastěji Poznámkový blok (Notepad), ale může to být i jiný program. Zkuste si zobrazit zdroj, třeba teď hned.
Dva pohledy na jeden soubor
Jak vidíte, jeden soubor lze otevřít ve dvou různých typech programů:
v prohlížeči -- to je zobrazování v editoru -- to je úprava
V praxi vypadá práce se stránkami právě tak, že si otevřu jeden soubor ve dvou programech -- v prohlížeči a v editoru.
Přepisováním zdroje se mění stránka.Pokud se vám zdrojový kód stránky otevřel do Poznámkového bloku, můžete přepisováním zdrojáku tu stránku měnit. Musíte ale mít samozřejmě tu stránku u sebe na disku.
Pokud nevíte, jak na disku vytvořit stránku, přečtěte si postup pro začátečníky.
Značky v ostrých závorkách určují smysl a vzhled dokumentu a říká se jim tagy.
Tip: ostré závorky se na české klávesnici dělají pomocí pravého altu stisknutého s těmi klapkami <, >. nad ním (nebo např. zavináč je pravý alt + V, s pravým altem se dá udělat celá řada dalších klikyháků), zkuste si to.
Tagy = značkyHTML soubor je obyčejný text obalený značkami, které se nazývají tagy.
Tagy určují, jak bude text vypadat, tedy jakou bude mít formu. Všechny tagy jsou uzavřeny v <ostrých závorkách>.
Co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky zapsáno:
<tag> text </tag> a zase text a <tag> a zase text
První příklad -- struktura HTML<html> <head> <title>Má první stránka</title> </head>
<body> Moje první html stránka. A nějaké další texty. </body></html>
Tento příklad si můžete zobrazit v prohlížeči. Ty barvičky jsou jen pro lepší pochopení, nehrají žádnou roli. Co znamenají jednotlivé tagy:
<head> a </head> začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například
<title> a </title>, vymezující název dokumentu (může se lišit od jména souboru)
<body> Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).
Tímto příkladem jsem popsal základní strukturu dokumentu. Výše uvedené tagy by měl obsahovat každý html soubor.
Jestli si chcete hrát s HTML stránkou, je dobrý nápad zkopírovat si výše uvedený kód do nějakého souboru k sobě na disk a provádět experimenty.
Párové tagyJak je zřejmé z příkladu, vyskytují se tagy ve párech <něco> a </něco>, kde ten první tag něco začíná a druhý něco končí. To lomítko znamená, že jde o uzavírací tag. Příklady párových tagů:
<head> je začátek hlavičky a </head> je její konec <body> je začátek těla stránky a </body> je konec těla stránky <b> je začátek tučného textu a </b> je konec tučného textu
a tak dále.
Kromě takto párových tagů se vyskytují ještě tagy nepárové, které uzavírací tag nemají, ty ale nejsou časté. Příklady nepárových tagů:
<img> je tag pro obrázek a nic jako </img> v HTML neexistuje <br> je tag pro řádkový zlom, ale nic jako </br> neexistuje
Některé nepárové tagy probírám níže.
Druhý příklad - změna vzhledu<html><head> <title>Má druhá stránka</title></head><body> <h1>Nadpis</h1> <p>Odstavec s <b>tučným textem</b>, s <i>kurzivou</i>. <span style="color: red;">Červený text.</span></p> <h2>Nadpis druhé úrovně</h2> <p>Odstavec s <i><b>tučnou kurzivou. </b></i><br> Text po zalomení řádku patří do téhož odstavce.</p></body></html>
Také tento příklad si můžete zobrazit v prohlížeči. Už je to dost složité, ale od toho máte mozek.
V příkladu jistě vidíte strukturu, která je společná s prvním příkladem. Vyskytují se tu ale nové tagy:
<h1>, </h1> vymezení nadpisu první úrovně.
<h3>, </h2> nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy až <h6>). Vykreslují se různě velké podle důležitosti.
<p>, </p> vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru.
<b>, </b> text mezi těmito tagy bude tučný.
<i>, </i> kurzíva
<span>, </span> dvojice tagů vymezující nějak odlišný text.
<span style="color: red">, </span> V tomto případě má obalený kus textu červenou barvu písma. Jde o první příklad tagu, který má tak zvaný atribut. Atributem je "style" a má hodnotu "color: red" (angl. barva: červená). Pomocí tohoto atributu style= se dá detailně nadefinovat vzhled textu, obaleného libovolným tagem. V praxi má většina tagů nějaký atribut, zatím jsem se tomu vyhýbal.
<br> zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje!
Nyní už umíte všechny tagy nezbytné pro práci s textem.
Třetí příklad - pozadí a odkazyV tomto příkladu se pokusím nastínit dvě nesouvisející věci, už poněkud těžší
<html><head><title>Třetí příklad, barva pozadí a odkazy</title></head>
<body style="background-color: green; color: yellow;"><h1>Pozadí a odkazy</h1><p>Obyčejný text.</p><p>Odkaz na <a href="http://www.seznam.cz">Seznam</a>. </p><p><a href="priklad2.htm">Odkaz na příklad 2.</a></p></body></html>
Zobrazte si příklad v prohlížeči a zkuste funkčnost odkazů. Máme tady nový tag <a> a nějaké další atributy.
<a href="adresa">text odkazu </a> text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutí na něj se prohlížeč přepne na adresu, která je zadaná atributem HREF.
atribut tagu "a" se rovná cestě k odkazovanému souboru. Používá se zde buď relativní, nebo absolutní adresa.
absolutní adresa používá se ve formě http://www.atakdále.cz. V příkladu je takto použita adresa Seznamu.
relativní cesta pokud se chci odkázat na jiný svůj soubor, je zbytečné vypisovat tam to http:// a celou cestu. Nejlepší je, když je odkazovaný soubor ve stejném adresáři jako ten aktuální. Pak se na něj dá ukázat relativně. Stačí zapsat jenom jméno souboru a prohlížeč to pochopí. (V příkladu je takto odkázaný druhý soubor priklad2.htm.) Jestliže je ten cílový soubor v jiném blízkém adresáři, stačí napsat href="adresář/soubor.htm". Pro nadřazený adresář se používají konvenční dvě tečky. Odkazy podrobněji rozebírám jinde. Příklady relativní cesty.
<body style="background-color: green; color: yellow;"> způsob, jak stanovit barvy celého těla dokumentu.
style atribut tagu <body>, který určuje vzhled celého dokumentu. V tomto případě nastavuje barvu pozadí stránky (background-color) na zelenou a barvu textu (color) na žlutou. Atribut style už jsem použil v předchozím příkladu. V zásadě se již jedná o použití kaskádových stylů = CSS. Kaskádové styly jsou základní prostředek na úpravu vzhledu stránek. Atributem style se dá měnit vzhled. Napsal jsem přehled zápisů style.
Obecná syntaxe HTMLHTML má několik málo zásad, které je dobré zmínit.
Nezáleží na velikosti písem, <body> je totéž co <BODY> V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a
čeština. Tagy, které prohlížeč nezná, jako by nebyly. Na začátku tagu nesmí být mezera, třeba < br> je špatně. Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. Konec řádku ve zdroji se chápe jako mezera. Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř
Obrázky, čáry, zarovnáníObrázek se do dokumentu vloží nepárovým tagem
<img src="obrázek.gif">
Src (jako source = zdroj) se opět může zadávat relativně nebo absolutně. Napřed je třeba mít obrázek připravený jako soubor. Aby se obrázek zobrazil ve všech prohlížečích, musí to být soubor typu gif nebo jpg. Tag <img> má spoustu dalších atributů, které nyní opomíjím, podrobně vše v kapitole o obrázcích.
Horizontální čára se dá vložit tagem <hr>. Má to nějaké atributy, které nastavují šířku, zarovnání a barvu.
Zarovnání odstavce na středVětšina objektů (odstavce, tabulky, obrázky) na stránce se může zarovnat vlevo, na střed
nebo vpravo. Dělá se to obecným atributem style a vlastností text-align, která má hodnoty left, center nebo right. Například tento odstavec je deklarován zápisem
<p style="text-align: center;" >a je zarovnaný na střed.
Další studiumKousky užitečných zdrojových kódů si můžete zkopírovat z HTML taháku. Napsal jsem také přehled HTML tagů, což je vlastně vcelku obsáhlá reference jazyka a přehled zápisů atributu style. Až budete tápat nad nějakým tagem nebo zápisem, tak tam mrkněte.
Jak stránky dostat na serverPokud máte na disku vytvořené stránky -- soubory typu html -- stojíte před problémem, jak je dostat na server a zpřístupnit je tím světu. Podle mých zkušeností je to úkol těžký, takže to při počátečním neúspěchu nevzdávejte.
Kam publikovat - Freehostingové servery - Prostě zkopírovat - FTP - FTP klient - Grafické rozhraní - Přímo u serveru nebo na síti - Pokud chcete doménu - Zařazení do katalogů
Kam kopírovatLogika říká, že ony soubory stačí nějakým způsobem někam zkopírovat. Hlavní problém je kam, na jaký server. Podle toho, kolik máte peněz:
můžete hostovat zdarma nebo si někde objednat placený hosting (většinou i s doménou druhého řádu)
Zadarmo Jsou dva způsoby, jak publikovat na webu zadarmo.
1. Buďto využijete služeb veřejných serverů -- freehostingů. První byl Geocities (u nás MujWeb). Nyní takových serverů existují desítky. Mám odzkoušené servery www.sweb.cz, www.webpark.cz a www.volny.cz, www.webzdarma.cz a další. Někde se musíte smířit s tím, že vám tam možná budou skákat cizí reklamy.
2. Nebo máte nějakého známého nebo firmu, který má server a nechá vás na něm publikovat, případně využít serveru školy nebo zaměstnavatele (to bych třeba já nedělal, vzhledem k tomu, jak často školy a zaměstnavatele měním: pořád bych musel měnit adresu).
Nejčastěji se uplatňuje první varianta, publikování na freewebu (bezplatném hostingu). V takové situaci je nevýhoda, že máte ne zcela hezkou adresu a na stránkách mohou být reklamy poskytovatele.
Za penízePokud můžete obětovat pár korun, doporučuji najít si nějaký placený hosting. Chcete-li mít doménu druhé úrovně, musíte tuto možnost zvolit vždy. Zpočátku vám bude stačit několik málo mega prostoru a statické stránky, to se dá sehnat za pár stovek ročně. Doména na rok stojí dalších pár stovek. Poskytovatelé hostingu vždy umožňují kopírování pomocí FTP (viz níže), což je dobře.
FreeHostingové (freewebové) serveryJak založit webový prostor zdarma na bezplatném hostingu:
Vlezte na hlavní stránku freehostingu. Na portálech je to odkaz typu "www zdarma. Seznam českých freehostingů.
Najděte nějaký odkaz na registraci (někdy se to dělá dohromady s mailem) Zadejte údaje, zvolte uživatelské jméno a heslo. Některé hostingy (například sweb)
vyžadují odeslání kontrolní esemesky. Zapamatujte si pečlivě všechny parametry (nejlépe je zapsat si to nebo vytisknout). V
to patří: o uživatelské jméno (aneb login) o adresa stránek (http://něco, obvykle obsahuje uživatelské jméno) o heslo o adresa ftp serveru o jméno startovního souboru (většinou index.html, případně se to zkusí).
Zkuste tam poslat stránky (návod níže) a podívat se na to.
Freehostingy nabízejí dva zásadně odlišné způsoby aktualizace (publikování) stránek:
1. aktualizace pomocí FTP, 2. aktualizace pomocí grafického webového rozhraní.
Na některých serverech nabízejí oboje, na jiných jenom jeden způsob. Já doporučuji používat spíše aktualizaci přes FTP, protože grafické rozhraní je pro správu většího počtu stránek těžkopádné. Oba způsoby popisuji níže.
Jak to tam nakopírovatZpůsob kopírování souborů záleží na tom, kam to bude. Nejčastěji se to dělá přes FTP, ale pro úplnost zmiňuji i jiné možnosti.
1. vzdáleně pomocí FTP (to jde skoro vždy) 2. grafickým rozhraním (jen na některých freewebech) 3. přímo nakopírovat na server (lze jen na lokální síti nebo v jiných speciálních
případech)
Pokud nejste připojeni k Internetu, všechny soubory se nahrají na disketu a odnesou se na počítač, který má připojení na Internet (jste-li připojení, tato fáze odpadá).
Většinou budete muset použít FTP, to je přenos souborů po síti Internetu.
adresa aktualizační stránky, login a heslo zadané při zřizování konta
Přímo u serveru navštívit s disketou majitele serveru
operační systém (cokoli, co umí kopírovat soubory)
jména kořenového a mého adresáře, práva
FTPPři používání FTP pro nahrávání souborů na server vždy potřebujete znát
FTP adresu na svůj server (většinou ftp.domena.cz, např. ftp.volny.cz) login (uživatelské jméno) heslo a někdy navíc cestu (jméno složky)
To všechno by vám měl sdělit správce serveru nebo byste si to měli zjistit při registraci.
Protokol "File Transfer Protocol" (zkratka FTP) se používá na kopírování stránek na vzdálený server (nebo pro stahování, to je teď jedno). FTP příkazy se dají ťukat ručně (Start > Spustit > FTP), to ale není nic pro smrtelníky. Častěji se musí použít program, který se nazývá FTP klient.
FTP klientTěžko říct, které programy máte. Stačí, pokud se naučíte pracovat s FTP alespoň v jednom programu, který FTP umí.
Obyčejný prohlížeč, Total Commander, Editory
Je ještě spousta dalších FTP klientů, např. jsem viděl BuletProof nebo CuteFTP.
Obyčejný prohlížečMáte-li novější prohlížeč (třeba Internet Explorer 5, 6 a 7), můžete jej použít jako FTP klienta. Postup:
1. Do řádku adresy vyťukejte ftp://jmenoserveru.cz (třeba ftp://volny.cz) Mohou nastat tři případy:
1. Stránka nenalezena -- asi to ťukáte špatně, dál to nepůjde (zkuste varianty) 2. Přístup odepřen (Acces denied) nebo žádost o heslo (za chvíli vyřešíme
přihlášením) 3. Nebo tam naběhnou data, která ale nepatří vašemu webu, nevadí, po přihlášení
to bude dobré. 2. Zvolte Soubor > Přihlásit se, naběhne dialog 3. Zadejte uživatelské jméno a heslo. (Nezkoušejte anonymní přihlášení.) Měl by se
objevit adresář (buďto prázdný, nebo s vašimi soubory)
(Pokud to nefunguje: Zkuste za ftp://server.cz přidat cestu (jméno složky stejné jako login). Nebo zkuste ftp://ftp.server.cz, nebo zkuste napsat ftp://[email protected]/cesta/. To s tím zavináčem je uživatelsky rychlejší zápis FTP adresy. Zkontrolujte si cestu, server, jméno, heslo. Pozor přitom na malá / velká písmena. Bacha, u některých poskytovatelů se server s FTP jmenuje jinak než server s HTTP. Zkuste v Nástroje > Možnosti > Upřesnit zapnout "zobrazovat FTP", popřípadě tam zapnout "pasivní režim FTP". Obecně platí, že FTP v prohlížeči je velmi nespolehlivé a někdy nefunguje z důvodů spíše magických než objektivních. Chyba může být také na vaší lokální síti, pokud se připojujete přes proxy server, který nepovoluje nebo filtruje FTP nebo sídlí na divné IP, zeptejte se správce.)
Jakmile se objeví výpis složky, mohou se hotové stránky z lokálního disku prostě přetáhnout na web (nebo normálně zkopírovat; pokud to neumíte, měli byste si napřed osvojit základy práce se soubory na lokálním disku). Přenos bude chvíli trvat.
Opačným směrem to přetahovat nejde, ale dá se kliknout na vzdálený soubor pravým tlačítkem a zvolit Uložit do složky (tu si vyberete na svém disku).
FTP přes Total ComanderTotal Commander je klasický souborový manažer (takové dva modré panely). Umí krásně pracovat s FTP. V nabídce má Příkazy > FTP > nové připojení a FTP > připojit se. Do aktivního panelu si po zadání adresy, hesla a jména načte obsah adresáře na vzdáleném serveru. Dá se s tím potom normálně pracovat jako by to byl místní disk, snad jen že je to pomalejší a některé věci jsou chráněné. Optimální volba, pokud publikujete často a chcete to dělat jednoduše.
Editory s FTPMnohé HTML editory (například FP 2000, HomeSite, Dreamweaver) v sobě mají FTP klienta nenápadně zabudován. Umožňují "snadné" odesílání stránek na server.
Například majitele programu FrontPage odkazuji na správu webu ve FrontPage 2000.
Grafické rozhraní freewebuNěkteré freewebové servery obsahují grafické rozhraní na aktualizaci souborů. Například Mujweb nebo Sweb to mají (a v bezplatném programu nemají FTP, takže je to tam jediná možnost).
Grafická rozhraní se ovládají intuitivně a snadno, nemá smysl psát k tomu nápovědu. Problémem je jistá těžkopádnost, pokud posílám na server najednou více stránek, nebo když to chci dělat častěji. Do grafického rozhraní freewebu se dostanete většinou hned po přihlášení.
Přímo u serveru nebo na sítiPokud musíte web aktualizovat přímo u serveru, navštivte majitele serveru s webem zabaleným na disketě nebo na cédéčku. Zeptejte se ho, jaká je cesta k adresáři (neboli složce) se stránkami. V té složce jsou podsložky, každá obsahuje jeden komplex stránek -- site. Pokud svoji složku nemáte, nechte si ji vytvořit. Poproste správce, ať vám tu složku namapuje -- přidělí adresu. Pak tam prostě ty svoje stránky zkopírujte. Na správce serveru se vyplatí být slušný, trpělivý, nosit mu drobné dárky a zdravit jej uctivě.
V poslední době takto aktualizuje stránky už málokdo. V praxi se i při přímém kopírování do adresáře používá ftp, webdav, samba, scp přes ssh nebo něco takového.
Ve škole / v práciNejčastěji (na Unixu) stačí udělat si na svém virtuálním disku (nejčastěji H:) adresář PUBLIC a do něj soubory zkopírovat. Pak se zeptat správce serveru (nebo někoho hodnějšího), jak by se měl jmenovat startovní soubor a jestli je to všechno. Pak by ty stránky měly mít adresu www.jmeno_skoly.cz/~uzivatelske_jmeno/
Pokud máte v práci nějakou pofidérní windowsovskou síť, doporučuji nedávat si na tamní server seriózní stránky. Nejde ani tak o bezpečnost jako spíše o tu spoustu přemlouvání správce, aby to nastavil a rozběhal (přidělává mu to práci a je to pro síť velmi nebezpečné). Také to zvyšuje přenos firemního připojení.
Pokud chcete doménuKdybyste chtěli mít doménu druhé úrovně www.něco.cz nebo www.něco.com (a jiné), musíte si zaplatit. Poplatek je asi 600 Kč ročně plus dalších šest stovek za inicializaci (v doméně CZ, COM je asi za polovinu). Nejjednodušší je objednat si to u provozovatele hostingu, on to zařídí. Můžete si sice doménu registrovat přímo u registrátora, ale potom potřebujete mít vlastní DNS server. Na provoz domény druhé úrovně stejně potřebujete mít hosting, aby to fungovalo, což si také musíte zaplatit. Více v textech o hostingu a o doménách.
Lacinější varianta je nechat si udělat subdoménu, tedy doménu třetí úrovně. Například moje-jmeno.cizi-domena.cz Když se domluvíte s majitelem nějaké domény druhé úrovně (v tomto příkladu cizi-domena.cz), tak on s tím obvykle nemá žádné další náklady. Jenom to tam někde u sebe nastaví.
Zařazení do katalogůAby se o vašich stránkách dozvěděli jiní uživatelé Internetu, je dobré zařadit je do katalogů a vyhledávačů. Dělá se to na stránkách katalogů (www.seznam.cz , www.atlas.cz , www.centrum.cz, jinam to nemá cenu). Vleze se do sekce, kde se klikne na přidej odkaz a postupuje se podle návodu.
Vyhledávací roboti jako třeba Google by na stránky měli přijít sami ve chvíli, kde někde najdou odkaz mířící na novou stránku.
Soubory na webuPřípona htm nebo html? - Jména souborů - Adresáře (neboli složky) - Relativní a absolutní odkazy - Kontrola odkazů, přesouvání souborů - Domácí kopie - Startovní soubor - Stručné shrnutí
Přípona htm nebo html?Přípona užívaných souborů je skoro lhostejná, ale doporučuju používat příponu html. Html je standard, ale když přišel strýček Bill s Windows 3.11, potřeboval trojpísmennou příponu, tak vymysleli htm a od té doby se dá používat oboje.
Kvůli chybějícímu "l" na konci adresy někdy napíšu špatný odkaz. Také můžete zkusit, když budete mít při brouzdání špatnou adresu, změnit htm na html nebo naopak, mohl to splést autor.
Udělejte si sami pro sebe nějakou konvenci, ať to nepletete.
Svoje HTML soubory byste měli pojmenovat podle následujících zásad:
Nepoužívejte češtinu ve jménech souborů a adresářů. Jestli to někde funguje, neznamená to, že to bude fungovat všude. Název stránky kočička.html je nešťastný. Lepší je kocicka.html
Nepoužívejte mezery. Musíte-li odkázat na soubor s mezerou, musíte v adrese mezeru nahradit řetězcem "%20". Například soubor hezke odkazy.html se odkazují jakohezke%20odkazy.html.Je to ale děsná otrava. Proto všude, kde chcete ve jménu souboru naznačit mezeru, dejte mínusko, např. hezke-odkazy.html (dříve jsem doporučoval podtržítko, ale Google to pak nepochopí jako dvě slova).
V názvu souboru se nesmí používat znaky / \ * : ? # < >. Doporučuji zadávat všechna jména souborů malými písmeny. To je jenom
doporučení. Ale hodí se to. Adresa k souboru je totiž case-senzitivní, což znamená, že záleží na velikosti písmen (podle standardu, v praxi na linuxovských serverech, kterých je většina), takže se můžete zadáním špatné velikosti písmenka snadno splést. Máte-li nějakou svou konvenci (např. jenom malá písmena), tak se nespletete.
Používejte taková jména, u nichž poznáte, co soubor obsahuje. Soubory se jmény typu sdsfo24x.html nejsou to pravé. Na druhou stranu jsou pochopitelná jména souborů typu kapitola1.html (2, 3 atd.) třeba u stránek seriálů, které se už nebudou měnit.
Adresáře (neboli složky)Soubory webu si můžete ukládat do adresářů, jak jste zvyklí u normálních souborů. Všechny soubory byste měli mít na serveru v jednom adresáři a v jeho podadresářích. Je pak vlastně jedno, kolik si uděláte vnořených podadresářů a jak to budete dělat. Jde o to, abyste v tom měli přehled. Mám jen několik málo doporučení:
1. Pro jména adresářů platí totéž, co pro jména souborů: bez mezer, háčků atd., nejlépe malými písmeny. Obzvlášť zdůrazňuji srozumitelnost -- jméno adresáře je nyní vlastně součást adresy.
2. Nedělejte příliš složitě zanořené struktury. Napsat relativní odkaz v hustém stromu není úplná sranda.
3. Není chybou nechat všechny soubory ve stejném adresáři. Problém pak občas nastává pouze při použití FTP -- adresáře s mnoha položkami se pomalu načítají. A hlavně jde o to, abyste se v tom po čase vyznali.
4. Je zvykem dávat obrázky do speciálního adresáře, já ho mám třeba nazvaný "images", to občas usnadní práci, třeba kopírování na server nebo analýzu logování.
5. Soubory, které už nebudete měnit, si dejte do samostatného adresáře. Usnadní vám to aktualizaci, správu a nahrávání webu na server. V mých webech se ten adresář například jmenuje "archiv".
Relativní a absolutní odkazyAbsolutní adresa je taková, že když ji vyťukáte do prohlížeče, tak se vám stránka zobrazí. Říká se tomu URL. Relativní adresa je taková, která neobsahuje takové to http://www.blabla.cz/, ale rovnou obsahuje jméno souboru, umístěného ve stejném adresáři (složce) nebo jméno adresáře a pak /jméno souboru. Z toho plyne, že relativní adresa závisí na tom, odkud je použita.
Například tento soubor má absolutní adresu http://www.jakpsatweb.cz/soubory.htm. Z hlavní stránky www.jakpsatweb.cz na něj vede relativní odkaz zapsaný jako <a href="soubory.htm">.
Pokud prohlížeč narazí na relativní odkaz, tak ví, že před něj má přidat cestu k aktuální stránce (čímž si jej převede na absolutní).
Je dobrým zvykem dávat do HTML stránek odkazy relativní v rámci jednoho webu (webem myslím to, co se anglicky jmenuje site -- množina souvisejících souborů). K čemu je to dobré: můžete množinu několika stránek přenést někam třeba na disketě a všechny odkazy budou fungovat. Změníte server a nedá vám to žádnou práci. Kdybyste tam všude psali http://mujserver.cz/..., tak se při změně serveru zblázníte. Relativní odkazy budou fungovat i těm, co si to postahují na disk. Jednoduše řečeno jsou relativní odkazy stabilnější.
Absolutní odkazy je nutné použít všude jinde -- totiž vždy, kdy se odkazovaná stránka nachází na jiném serveru.
Jinak pojatý výklad absolutní a relativní adresace naleznete u popisu odkazů v HTML.
Kontrola odkazůExistují programy, které dokáží zkontrolovat, jestli nemáte na svých stránkách odkaz na neexistující stránku (FrontPage, HomeSite, Xenu). To se hodí, zejména pokud často přejmenováváte nebo přesouváte soubory (prostě měníte URL).
Přesouvání a přejmenování souborůKdyž soubor přesunete nebo přejmenujete měníte mu URL, tedy adresu. Proto byste tedy měli zároveň změnit adresu všech odkazů, které na přesunutý soubor odkazují. U starších zavedených stránek to může být tvrdá dřina a navíc se při přejmenování často nasekají chyby. Jak to řešit:
Nepřesouvejte a nepřejmenovávejte soubory zbytečně. Na starém místě raději nechejte nějaký čas kopii, ať to nehlásí chybu 404 nenalezeno. Prevence: neodkazujte stránky příliš hustě, nedělejte pavučinu, ale strom. Potom to
stačí změnit na dvou třech stránkách, ne na sedmi. Kdo používá FrontPage, Dreamweaver, HomeSite nebo jiné moderní editory, má
usnadněnou správu vlastních souborů, protože tyto programy umí (v rámci aktuálního webu) při přejmenovávání souborů změnit všechny odkazy mířící na přesouvaný soubor.
Dost drastický způsob je změna všech vlastních odkazů na změněný soubor pomocí programu, který umí prohledávat adresář a měnit v něm jeden řetězec na druhý. Pokud vím, umí to UltraEdit, HomeSite, či PSPad, nebo si můžete napsat jednoduchý skript v Perlu, Sedu nebo Vimu.
To je řešení odkazů z vlastních stránek. Jestliže ale na přesouvanou stránku odkazuje někdo cizí, musí se mu napsat a požádat, aby změnil odkaz.
Je potřeba si uvědomit, že i po opravě všech odkazů nemusí čtenář stránku nalézt. Je to tím, že stránka, ve které kliknul na odkaz, se může načíst z klientovy cache paměti, takže neopravená.
Další problém pro přesunuté stránky představují vyhledávače. Některé z nich nekontrolují příliš často, kam se která stránka poděla, takže to potom čtenářům bude hlásit 404 nenalezeno.
Profíci tyto s problémy přesouváním souborů umějí řešit po přejmenování/přesunutí souboru ještě přesměrováním na straně serveru. Při požadavku na staré URL server odpoví (HTTP protokolem), že zdroj byl přesunut, a rovnou napoví správnou adresu, na kterou prohlížeč automaticky přejde. Takové přesměrování se nastavuje na serveru (obvykle jej musí nastavit
správce, ale dá se to udělat i v souborem .htaccess příkazem Redirect nebo složitěji přes mod_rewrite), ale není to fakt nic pro začátečníky. Zopakuji tedy doporučení:
Nepřesouvejte a nepřejmenovávejte soubory zbytečně.
Domácí kopiePokud budete mít aktuální verzi stránek jenom na Internetu, budete mít problémy minimálně se zálohováním. Je výhodné mít doma nebo v práci na svém počítači kopii stránek a to ať už jste nebo nejste připojeni. (Je to ideální volba, pokud připojeni z domova nejste, tak jsem to dělal dva roky.)
Veškeré změny je třeba provádět jen na té domácí kopii a aktualizaci vždycky provést zkopírováním změněných souborů na server (klasicky FTPéčkem, ale i jinak). Tuto praxi navíc podporují programy Dreamweaver, FrontPage, EasyBlog a další.
Startovní souborKaždý server má nastavené jméno startovního souboru. Na většině serverů se to dá nastavit (dokonce i pro ten který adresář), ale málokdy se to mění. To znamená, že si od správce vašeho serveru musíte zjistit, jak se ten startovní soubor má jmenovat. Nejčastěji se používá název index.html. Takto pojmenujte soubor se svou hlavní stránkou.
Já jsem dlouho náhodou používal default.htm (tak je to zvykem na serveru IIS), ale viděl jsem používat i jména welcome.html, index.htm, welcome.asp. Teoreticky si tak lze představit asi tucet různých jmen. (Pokud si nejste jisti, jak se startovní soubor má jmenovat, tak prostě zkuste index.html, skoro jistě bude fungovat.)
K čemu to konkrétně je: když vede odkaz ne na soubor, ale na adresář (adresa končí lomítkem), podívá se server, jestli v tom adresáři je startovní soubor. Pokud jej najde, zobrazí jej. Pokud jej nenajde, zobrazí seznam souborů složky (nebo chybu 403 Forbidden, záleží na nastavení serveru).
Například na adrese http://bulharsko.evropou.cz se zobrazuje ve skutečnosti zobrazuje soubor http://bulharsko.evropou.cz/index.html
Odkazem vedoucím do adresáře je každá adresa, která končí lomítkem, takže třeba i každá adresa domény (tam se to lomítko nemusí dávat, ale chápe se to tak, jakoby tam bylo).
Stručné shrnutíPoužívejte příponu html. Mezi svými soubory používejte relativní odkazy. V názvech souborů nepoužívejte mezery a znaky s diakritikou a není-li to nutné, pak ani velká písmena. Zbytečně soubory nepřesouvejte, případně občas zkontrolujte odkazy nějakým programem. Soubory si dejte do různých samostatných adresářů. Startovní soubor pojmenujte podle konvence na serveru, nejčastěji index.html.
Zásada č. 1 - Psychologie čtenáře - Zatím tu nic není - Aktuální informace - Jednoduchá správa - Bludiště odkazů - Mateřskej jazyk - Nepiste cesky - Nadpisy - Záložky - Stylovat, stylovat! - Text odkazů
Zásada č. 1Stručně.
Psychologie čtenářeNěkolik překvapivých skutečností o uživatelích webu:
Moc nečtou. Ignorují dlouhé texty bez nadpisů a obrázků. Pokud je stránka během několika sekund nezaujme, jdou zpět nebo zavírají prohlížeč. Vnímají stránky podobně jako billboardy kolem silnice. Někteří stránkou nerolují. Nad odkazem se před kliknutím velmi zamýšlejí, zda to stojí za to.
Samozřejmě zjednodušuji, ale snad je jasné, co chci říci. Autor webu musí mít tyto smutné psychologické aspekty neustále na zřeteli a přizpůsobovat jim svoji práci.
Zatím tu nic neníMnozí autoři webů se občas rozhodnou, že udělají skvělou stránku s maximem informací. Pak na to ale jdou ze špatné strany, když si napřed na své hlavní stránce udělají bombastický odkaz na prázdnou stránku, na kterou napíšou "Brzo tu bude spousta informací", "Stránka je ve výstavbě" nebo dokonce "Zatím tu nic není". My zkušenější víme, že mezi záměrem a realizací je velká propast a že ono "zatím" může být dlouhé i několik let. Takže je dobré
napřed stránky udělat a teprve potom na ně odkazovat.
Většinou se na takovou stránku už nikdy nepodívám, protože tam stále zatím nic není. Příkladů znáte jistě bezpočet.
Aktuální informaceJe zábavné na Internetu narazit na "aktuální" stránky, na kterých jsou informace tři roky staré. Proto když zakládám stránku, na níž mají být aktuální informace, raději si dvakrát rozmyslím, zda ji budu stíhat aktualizovat. Ale i při běžném psaní textů je dobré vyvarovat se termínů "včera", "příští měsíc" a podobně, ovšemže pokud se na téže stránce neuvádí datum. To je mimochodem nejlepší způsob, jak čtenáře nezmást. Většina editorů nabízí vložení data automaticky, některé ho i aktualizují při ukládádání.
Jednoduchá správaPokud každá drobná změna obsahu stránek vyžaduje hodinovou práci, něco není v pořádku. Stránky je prostě potřeba udělat tak jednoduše, aby šly snadno měnit. Pro začátek se raději
vyhýbejte složitým věcem, kterým moc nerozumíte a které by při pravidelné rutině jenom zdržovaly. Mám na mysli třeba obrázkové nadpisy, tabulkovou úpravu nebo rámový design.
Bludiště odkazůVyplatí se dát stránkám jasnou stromovou strukturu a použít při tom co nejméně úrovní, aby se dalo rychle dostat na konkrétní stránku. Znám weby, kde musím kliknout až šestkrát, než se dostanu na stránku, kterou hledám. A šest kliknutí, to je víc než minuta.
Na svých vlastních stránkách se vyzná každý. Autorovi připadá navigace zbytečná, protože on "ví", na jakou stránku se jak dostat. Pozor, nikdo jiný to "neví"!
Také není dobré spoléhat na to, že čtenář přichází na stránky skrze tu hlavní, a proto by měl na každé stránce být na hlavní stránku odkaz. Dnes se říká, že díky vyhledávačům uživatelé přicházejí na web "okýnkem od záchodu". A úplně nejlepší je udělat stránku se seznamem a s odkazy na všechny ostatní (mapa serveru). Viz správu souborů.
Mateřskej jazykObčas mě svědí prsty, když na web napíšu něco příliš spisovně. Ale myslím si, že na na síť spisovná čeština patří, protože síť je médium používající text. Pro hovorovou češtinu písemná norma neexistuje. Než se snažit vyjadřovat se lidově a tvořit při tom svéhlavé normy, to raději budu za suchara. Takže zásadně doporučuji spisovnou normu.
Editory, které umějí dělat pravopisnou kontrolu českého textu, je FrontPage 2000 a 2002. Word to sice umí také, ale zároveň zmrší HTML kód. PSPad je strukturní editor, který to umí také, jiné editory pod windows pravopisnou kontrolu češtiny (pokud vím) zatím neumějí.
Nepiste ceskyPište česky! Dnes už všechny prohlížeče zvládají překódování, takže je možnost všechny texty psát s diakritikou. Pak už jenom stačí napsat do hlavičky souboru jeden meta tag, v němž se uvede použité kódování a je hotovo (mnoho editorů to dělá automaticky). Ono zamrzí, když některé stránky musím louskat domýšleje si háčky s čárkami. Více v textu o češtině.
NadpisyPoužíváním nadpisů se stránky velmi zpřehlední. Dají se používat v šesti úrovních a v HTML se deklarují pomocí tagů <h1> až <h6>. Většina editorů tvorbu nadpisů podporuje. Kdo dělá nadpisy jinak, totiž pomocí normálních odstavců tak, že je zvětší, ztuční a zarovná na střed, ten se z toho za chvilku zblázní a stejně na to někdy zapomene. Navíc naučíte-li se používat CSS, můžete velmi snadno nadeklarovat všechny nadpisy třeba zelené a pak to kdykoliv snadno změnit.
ZáložkyU dlouhých textů je dobré používat záložky (také se tomu říká kotvy, bookmarky). Jsou to takové odkazy, co stránku jenom někam odrolují. V HTML se to dělá pomocí atributu name v tagu <a> a editory s tím také umějí pracovat.
Moje hlavní zásada spočívá v nepoužívání přímých formátů. Například se varuji nadeklarovat velikost nebo font písma přímo ve stránce. Raději používám externí CSS. Hlavní důvody jsou ty, že se to pak snadno mění, mám jednotný styl na více stránkách, zdrojový kód je přehledný a dobře se to zaindexuje v prohledávačích.
Text odkazůUrčitě to znáte ze spousty stránek: klikněte zde. Nelíbí se mi to.
Vždycky se lze vyhnout dvěma pochybným slovům:
zde kliknout
Proč je to špatně?
1. Některé vyhledávače (např. Google, Jyxo) si velmi všímají textu odkazů a zaznamenávají si jej do databáze.
2. Hodně lidí si stránky tiskne. Tam je fráze "klikněte" vyloženě trapná. 3. Čtenář se podle textu odkazů orientuje v překvapivě velké míře. Občas pouze hledá
jinak barevné texty a všechno ostatní přechází. Slova "zde" nebo "klikněte" mu nenapoví, takže vlastně zdržují.
Jak si tedy pomoci? Vtip spočívá v tom, že ty odkazy vždycky někam míří, takže je možné jako odkazu použít některého konkrétního slova. Pár příkladů:
Špatně Správně
Pro aktualizovanou verzi klikněte zde Aktualizovaná verze
Zde najdete příklad Podívejte se na příklad
Abyste se přesvědčili, klikněte na odkaz! Přesvědčete se!
A tak podobně.
Editory HTML stránekprogramy pro tvorbu webů
Strukturní nebo wysiwyg? - Micro$oftí sbírka - Mozilla Editor - Dreamweaver - Home Site - OpenOffice - Adobe Go Live - A další
Tento text vznikal v roce 1998; i přes četné úpravy je místy neaktuální.
Strukturní nebo wysiwyg?Mezi autory webů jsou oblíbené dva základní typy editorů -- strukturní a wysiwyg.
Strukturními editory se upravuje přímo výsledný kód, je třeba znát jazyk HTML. Wysiwyg editory zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a
kód generuje automaticky, žádná znalost jazyka není potřeba.
Strukturní editoryAč jsou poněkud těžkopádné, ten, kdo umí HTML, s nimi dokáže opravdová kouzla. Program vypadá jako obyčejný texťák, ale umožňuje trochu sofistikovanější zadávání tagů. Zástupci takových editorů jsou například HomeSite, UltraEdit, české EasyPad a PSPad. Já jsem dlouho používal nejjednodušší strukturní editor -- Poznámkový blok, neboli Notepad (ten samozřejmě žádné zadávání tagů nepodporuje). Nyní je mým favoritem PSPad.
Ačkoli v minulých letech zdálo, že lidé z pohodlnosti přejdou od strukturních editorů k wysiwyg editorům, nestalo se tak. Strukturní editory význam neztrácejí. Používají je ale zejména profesionální tvůrci dynamických a jinak specifických stránek, kde je třeba mít naprostou kontrolu nad vytvářeným kódem.
Obrázek ukazuje stránku otevřenou ve strukturním editoru (HomeSite 5).
Wysiwyg editoryWysiwyg je anglická zkratka která znamená "What you see is what you get", tedy "co vidíš, to dostaneš". Práce s nimi je velmi pohodlná. Nezapírám, že jsem si je oblíbil. Nevýhodou je,
že neukazují úplně přesně to, co z toho vyleze a že občas dělají zmatek v kódu. Zástupci jsou všechny verze Microsoft FrontPage, Dreamweaver, Adobe GoLive nebo NVU.
Všechny slušné wysiwyg editory dnes nabízejí možnost přímé úpravy kódu, akorát jej potom zkontrolují. K velké zlosti mnohých autorů ten kód při ukládání i trochu mění, ale to už je prostě daň.
Obrázek ukazuje stránku otevřenou ve wysiwyg editoru (FrontPage 2000).
Když jsem tuto stránku před sedmi lety psal (aktualizováno 2005), domníval jsem se, že se brzo objeví spousta skvělých wysiwyg editorů, které budou volně ke stažení. Ale zmýlil jsem se. Z bezplatných produktů se dá trochu použít akorát editor příslušející k Mozille nebo NVU, ale ani to není ono (znáte-li nějaké další, dejte mi prosím vědět), výsledný kód je příšerný. Doporučuji vyzkoušet (a případně koupit) MS FrontPage nebo Macromedia Dreamweaver.
Různých www editorů existují tisíce. Další text stránky pojednává o těch editorech, s nimiž jsem se setkal. Může vás to nudit, případně to přeskočte.
Microsoftí sbírkaEditory od Microsoftu se snaží vyvolat zdání, kdovíjak jsou super a co všechno umějí. Nejlepších výsledků v nich dosáhnete, když budete psát čistý html text a nebudete do stránek z menu vkládat žádné microsoftí hanebnosti.
FrontPage 2000 byl můj oblíbený editor -- napsal jsem k němu velmi podrobnou nápovědu. Jedná se pravděpodobně o nejrozšířenější editor stránek. Umožňuje psát stránky bez znalosti kódu nebo, pokud to umíte, můžete kód měnit. Ovládání programu je velmi podobné klasickým texťákům. Jde o jediný wysiwyg editor pro Windows, který zvládá pravopisnou kontrolu češtiny a kódování ISO-8859-2.
FrontPage 2002 je maličko zdokonalená verze. Je důležité, že je v češtině.
FrontPage 2003 je trochu více zdokonalená verze. Podstatné je, že o hodně méně mrví výsledný html kód. Dokonce se ve FrontPage 2003 dá psát validně. Je také v češtině. Ovládá se podstatně hůř než verze 2000, inu pokrok.
Také existoval FrontPage Editor 98.
FrontPage Express je osekaná verze FP Editoru, která bývala dodávána s novými instalacemi Micro$oftího Exploreru 4 a 5. Vyskytuje se velmi málo a je nepoužitelný. Ani nevím, jestli se dá někde stáhnout.
Word 97 na tvorbu stránek používali snad jen flegmatici, ale dá se to a je to jednoduché.
Notepad neboli Poznámkový blok najdete ve všech Windowsech. (Je to nejjednodušší a dostatečně spolehlivý editor.)
Mozilla EditorDocela hezký wysiwyg editor je dodáván i s prohlížečem Mozilla (Netscape 6). Český text se v něm nastaví View > Character coding > Customize a přidat (add) nějaké Central european kódování. Potom se musí navolit. K mé velké lítosti většinu věcí zadává zastaralými html tagy a neumí pracovat se styly.
Vedle toho existuje program NVU. Vyvíjí se rychle, ale stále si nemyslím, že by byl moc použitelný.
Macromedia DreamweaverVcelku špičkový wysiwyg program, na kterém jsem nenašel žádnou chybu, ale nestíhám jej moc testovat.
Dreamweaver má spoustu skvělých funkcí, například umí začistit HTML vzniklé ve Wordu. Trošku hůře se s ním pracuje na menších monitorech. Také jsem si ještě nezvykl na systém oken a obecnou logiku. To už je prý v nejnovějších verzích změněno. Doporučuji jej.
Už verze 3 byla velmi dobrá, teď už existuje verze 2004 MX. Wysiwyg režim má MX poněkud oslabený na úkor kontroly nad kódem, což je asi dobře. Pozor, nepodařilo se mi jej odinstalovat.
Firma Macromedia nabízí i další programy pro práci s webem. Asi nejzajímavější se mi zdá Macromedia Contribute, což je program pro sekretářku, aby mohla upravovat firemní stránky bez jakýchkoliv znalostí.
HomeSiteNa HomeSite je velmi oblíbený strukturní HTML editor. Kdo umí dobře HTML, dosahuje s HomeSite velmi podstatné efektivity. Kdo umí HTML hůře, tomu program chytře napovídá.
Upravovaná stránka má v HomeSite dvě základní zobrazení "edit" a "browse". V editačním zobrazení se píše normálně html kód. Při přepnutí do prohlížecího (browse) zobrazení je stránka vidět přesně tak, jak bude vypadat v prohlížeči. Přepínání je přitom velice rychlé -- klávesou F12 (takže F12 mačkám už i v jiných programech -- marně :-). Pomocí nabídky lze rychle prohlížet stránku i v jiných prohlížečích.
Velmi mocná je v HomeSite funkce Extended Replace -- dokáže nahradit jeden řetězec jiným ve všech souborech v daném adresáři včetně podadresářů. (Podobnou funkci obsahuje i
programy PSPad nebo UltraEdit.) Kdo někdo něco měnil v celém webu, dá mi za pravdu, že to je velmi užitečná funkce. HomeSite 5 má problém s hledáním českých znaků.
HomeSite umí spoustu dalších věcí, např. barvit HTML kód, validovat dokument nebo převádět html do xhtml. Uživatel si může nastavit svoje oblíbená tlačítka a vkládat jimi svoje vlastní kódové sekvence.
Z této oslavné ódy je doufám zřejmé, že jsem si HomeSite oblíbil. Z drobných nevýhod bych zmínil ne-podporu kódování iso-8859-2 (takže š ž a ť vkládám přes alt).
HomeSite + (nebo MX) je hybrid mezi HomeSite a DreamVeawerem, není to moc dobrý program, mohu-li soudit.
PSPadPSPad je strukturní editor, zdarma, má překvapivě vysokou kvalitu. Původní český software. Hlavní přednosti (podle mě):
umí stránky ukládat v různých českých kódováních včetně iso-8859-2 a UTF-8; úžasné je pokročilé vyhledávání a nahrazování ve více souborech -- umí přitom hledat
i české znaky; rychlý náhled stránky klávesou F10; slovník na kontrolu pravopisu češtiny.
PSPad má spoustu dalších pokročilých funkcí, které jsem si nikdy nestihnul proklikat. Rozhodně doporučuji.
OpenOfficeVýborný balík programů v anglické verzi míval jeden velký problém -- češtinu. Už je to dávno, co jsem to testoval (asi v roce 2001), ale ať se jsem se snažit jakkoliv, š, ř, ž (a jiné) jsem na stránky pomocí tohoto programu prostě nedostal. Podle různých ohlasů už je čeština v OpenOffice v pořádku (aktualizováno 2005).
Adobe Go LiveNa první pohled vypadá tento program dobře. Když jsem ho testoval já, neuměl jsem nastavit češtinu. Prostě mi to na místa českých znaků vkládalo nesprávné entity. Takže jsem testování příliš brzo ukončil a o programu nic moc nevím.
M. Jelínek mi poradil: Čeština se nastavuje jako všechno ostatní v GoLivu: Edit->Preferences, pak se musí zapnout v "Modules" položka "Encodings" a po restartu aplikace v "Encodings" vybrat jazyk, jaký je potřeba. Takže nějaký Central European (buď windows-1250 nebo iso-8859-2).
A dalšíPoslední dobou mám pocit, že se s HTML editory roztrhnul pytel. Nestíhám to sledovat. Jako editor stránek se dají použít skoro všechny pokročilé textové editory.
Výborný univerzální editor pro Windows je UltraEdit. Dobré jsou české editory Golden HTML editor nebo EasyPad, Od firmy 602 se dá jako wysiwyg editor použít 602Pro PC Suite Musím ještě zmínit velmi efektivní práci s klasickými unixovskými editory, např. Vim
Oblíbený programátorský editor je Jedit, napsaný v Javě (více informací o Jedit).
Různé prohlížečeV čem je problém - Proč se prohlížeče liší - Současné prohlížeče - Standard, nebo optimalizace? - Rozlišení obrazovky - Konkrétně co který prohlížeč podporuje
V čem je problém?Začínající Internetoví autoři nejsou psychicky připraveni na smutnou pravdu:
Stejná stránka se v různých prohlížečích může zobrazit odlišně.
Jako autor stránek na webu nevím, jaký prohlížeč bude můj čtenář používat. Můžu to jenom tušit. Proto nemá cenu specializovat se na jeden typ prohlížeče a stránky ladit jen pro něj. Obvykle je potřeba, aby stránky vypadaly stejně ve všech hlavních prohlížečích.
Svoje stránky byste vždy měli vyzkoušet alespoň na těchto prohlížečích:
Internet Explorer 6 Firefox Opera 9
Tolik ve stručnosti, níže proberu nejčastější prohlížeče a jejich specifika podrobněji. Ale napřed krátký historický úvod.
Proč se prohlížeče lišíInternet se zpočátku vyvíjel neuvěřitelně rychle. Podobně dynamicky se přetvářel jazyk HTML, tak aby umožňoval zařazovat do stránek nové a nové věci.
Starší prohlížeče neumožňovaly stejné zobrazení stránek jako prohlížeče moderní, protože v době vzniku starších prohlížečů se prostě nevědělo, jak se budou stránky psát za pár let. Něco samozřejmě zůstalo stejné, ale staré prohlížeče neumějí zobrazovat nové styly, skripty a jiné vychytávky.
Kromě oficiální verze jazyka HTML existovaly různé hybridní formy HTML a rozšíření HTML. Výrobci prohlížečů (zejména Microsoft) se snažili do svých prohlížečů zabudovat podporu nestandardních věcí, které byly teprve v návrhu nebo které si sami vymysleli. Čili interpretace jazyka HTML je závislá na prohlížeči, který používá čtenář (klient).
V poslední době se to trochu uklidnilo. Microsoft do Internet Exploreru 6 (který je nyní na podzm 2007 stále dominantní) zapracoval podporu některých důležitých standardů. Konkurenční prohlížeče Mozilla a Opera jsou na tom ohledně standardů ještě lépe.
Současné prohlížečeV roce 2006 lze potkat tyto prohlížeče:
Typ, verze Rozšířenost Vlastnosti
Internet Explorer6 a 7
60 % všech uživatelů Windows, na Linuxu není
Dobrý prohlížeč, který je v současnosti de facto standardem. Verze 5, 5.5, 6 a 7 se liší pouze v detailech.
Mozilla, FireFox a další klony Mozilly
35% uživatelů Windows, spousta linuxáků
Velmi dobrý program označovaný obecně jako Mozilla nebo Gecko. Patří pod to i FireFox. Má budoucnost.
Opera 9 5% uživatelů Velmi dobrý prohlížeč se zajímavým ovládáním.
Konqueror 30% linuxáků Dobrý prohlížeč s podporou lecčeho
Safari asi 90% mac-uživatelů Nejlepší prohlížeč platformy Mac
Prohlížeče mobilních zařízení Velmi různá podpora HTML, spíše špatná podpora CSS stylů.
Následují podrobnosti o důležitějších prohlížečích. Začátečníkům to doporučuji přeskočit.
Internet Explorer (zkratka IE nebo také MSIE)Protože nejrozšířenějším prohlížečem je Internet Explorer, hodně lidí stránky ladí pro něj a v ostatních prohlížečích jenom trochu kontrolují, jestli to funguje. Dá se to tak dělat.
Dobrá verze Internet Exploreru je číslo 6. Pětky se také dají skousnout. Liší se pouze v detailech (zejména interpretace blokových CSS vlastností, rozšíření CSS a JavaScriptu). Čtvrtá verze IE se dnes prakticky nevyskytuje (méně než promile v roce 2005). Sedmá verze byla vydána v říjnu 2006 a ještě u nás není moc rozšířená.
Do jednoho počítače se dá pro testovací účely nainstalovat více verzí Internet Exploreru. Dlouho se to ale nevědělo (Microsoft říkal, že se ty verze navzájem nesnesou). Ale existují balíčky umožňující instalaci verzí 5.0 a 5.5 vedle dříve nainstalovaného IE 6.0. Více informací o instalaci tří verzí Exploreru najednou. Na zkoušku si můžete nainstalovat také MSIE 7.0. Výhoda je, že se dá odinstalovat.
Internet Explorer 6 je docela dobrá verze. Má ho asi 70 % lidí. Verzi 5.0 má asi 2 % a verzi 5.5 asi 2 % uživatelů.
Mozilla, Firefox, GeckoNejlepší dnešní prohlížeč (2007). Podporuje CSS ve verzi 2, DOM2 a Javascript lépe než Microsoft Explorer. Drží se standardů. Umí dobře zobrazovat XML. Blokové elementy vykresluje trochu jinak než Internet Explorer (správně). Zdrojáky a instalačky pro všechny
platformy lze najít na www.mozilla.org. Uživatelé si mohou svou Mozillu přizpůsobit pomocí jazyka XUL.
Existují různé distribuce Mozilly, nejpopulárnější se jmenuje FireFox. Firefox existuje i v češtině. (Projekt CZilla si klade za cíl lokalizovat do češtiny všechny produkty z Mozilla.org). Ke stažení je Firefox třeba na české stránce Firefoxu. Pokud někde potkáte Netscape 6 nebo 7, je to také klon Mozilly.
Mozilla se dá spustit jak na Windows, tak na Linuxu i na Macu. Vykreslovací jádro prohlížeče Mozilla se jmenuje Gecko (čte se to gecko, géčko nebo geko).
Opera 8Opera je velmi dobrý prohlížeč, stáhněte si na www.operasoftware.com. Verze 8 je skvělá, zkoušel jsem už i devítku. Má velmi dobré ovládání (gesta myší jsou fantastická), je rychlá. Stránky zobrazuje hodně podobně jako Explorer, ale umí i standardní vykreslování. Některé věci v Opeře fungují trochu hůře. Od verze 8.5 je Opera zdarma a bez reklamních bannerů.
Netscape (NN)Nejhorším prohlížečem minulosti je Netscape 4. Dnes jej používají pouze nepřátelští webmasteři a kritici, když chtějí dokázat, že máte špatně udělané stránky. Chybuje a padá. Lze na něj zcela zanevřít (psáno 2004) a nebrat jej v úvahu.
Co je Netscape 6, 7 a 8: Je to klon Mozilly. Netscape pátou verzi prohlížeče nechal vyvíjet nezávislou skupinou jako open-source. Tak vznikla Mozilla. Vývojovou verzi Mozilly přejal Netscape a udělal z ní prohlížeč Netscape 6. Jádrem je vykreslovací program Gecko. Netscape 6 a 4 jsou ke stažení na www.netscape.com, kde jsou též archivní starší verze (např. verze 3, která vůbec nepodporuje styly).
Když se dnes mezi českými webmastery mluví o Netscape, myslí se tím verze 4. Verzi 6 a 7 se říká Mozilla, protože to je Mozilla. V anglosaském světě v tom mají trochu větší zmatek a jako Netscape označují i šestou a sedmou verzi.
Prohlížeče pro Mac Nejlepší prohlížeč na Macu je Safari, jde o nativní systémový prohlížeč. Existuje Internet Explorer 5 pro Mac, který ale s IE na Windows nemá moc
společného. Existují portace Mozilly jako třeba FireFox. Camino je postaven na jádru Mozilla.
Alternativní prohlížeče Linuxový Konqueror je fajn, má vykreslovací jádro příbuzné k macovskému Safari.
Je vyvíjen pro prostředí KDE. Textové prohlížeče Links a Lynx jsou velmi oblíbené mezi uživateli Unixů a Linuxů.
Links je český a relativně nový, Lynx je starý nečeský. Některé programy tvářící se jako autonomní prohlížeče (třeba MyIE, Avant Browser)
ve skutečnosti používají vykreslovací jádro z Internet Exploreru nebo z Mozilly (Gecko). Některé z nich jsou opravdu zajímavé, například Avant Browser má taby a gesta myší.
Občas se objevují trojkové verze Exploreru a Netscapu, zejména jako relikty na počítačích z let 1995 a 1996. Moderní věci (styly apod.) nepodporují (nebo špatně). Webmaster by se zbláznil, kdyby měl myslet i na tyto prohlížeče. Za uspokojivý výsledek se tedy považuje, pokud jsou v nich stránky alespoň čitelné.
Standard, nebo optimalizace?Kdo dělá internetové stránky, dostane se velmi brzy před dilema:
Mám dělat chudé, "standardní" stránky, které se dobře zobrazí ve všech prohlížečích, nebo mám stránky odladit pro jeden druh prohlížeče (optimalizovat) a pak se jenom
modlit, aby se to jinde zobrazilo správně?
Většina amatérů volí druhý postup.
Někteří dokonce píší "tyto stránky jsou optimalizovány pro ten a ten prohlížeč". (Uživatelé ostatních nechť si trhnou nohou, já za nic nemohu.) Nepište to tam, je to pakárna. Kdo má správný prohlížeč, je v pohodě, kdo má špatný, ten si kvůli vám nebude stahovat jiný. Ani nepůjde kupovat nový monitor.
Metoda jednoduchostiPokud by bylo na výběr jen mezi těmito dvěma přístupy, bylo by dobré držet se jednoduchých, standardních postupů a žádné šílenosti do stránek nezařazovat. To vůbec není špatná cesta! Existují ale i jiné metody.
Metoda pokusu a opravyAutor udělá krásné stránky optimalizované pro jeden prohlížeč a pak si to zkouší zobrazovat v jiných. Najde-li chybu, nějak ji opraví. To je slušná metoda, leč příliš pracná.
Metoda znalosti verzí HTML a CSSAutor, který ví, co může a nemůže použít, je na tom nejlépe. Pokud vytvoří na stránce něco, co by se ve starších prohlížečích zobrazilo špatně, udělá to tak, aby se v nich zobrazilo alespoň něco. Nejlépe je využít přitom CSS styly. Je to těžké na znalosti, ale jediné všeobecné.
Rozlišení obrazovkyKdyž dělám důkladněji upravené stránky, často brečím nad tím, že nevím, jaké rozlišení bude můj čtenář používat. Mám dělat pro rozlišení 1024 bodů na řádek nebo jenom 800? Nebo méně? Možnosti řešení:
1. Nedělat důkladně graficky upravené stránky nebo je dělat tak šikovně, aby na šířce nezáleželo (udělat je "gumové" aneb "s plovoucí šířkou"). Dá se to (hodně pomáhají styly).
2. Uzavřít celou stránku do stylovaných divů s pevnou šířkou (nejčastěji 760 bodů). Všechno ostatní potom odehrávat uvnitř tohoto oddílu s nastavenou šířkou. V poslední době je toto řešení kritizováno majiteli mobilních počítačů s malým displejem, ale já ho doporučuji, protože je dobře předvídatelné.
3. Nějakým skriptem si zjistit, jaké rozlišení klient používá a přepnout jej na danou stránku. Chce to mít více verzí stránky a umět skriptovat. Špatně se to aktualizuje, neb je třeba měnit více stránek najednou. Nebo pomocí skriptů a stylů po načtení stránky
šířku stránky upravit podle velikosti okna. Já osobně tuto metodu nedoporučuji, protože vede k mnoha chybám.
Konkrétně co který prohlížeč podporujeMám zkušenosti s mnoha prohlížeči, v tabulce zmiňuji pouze ty, které se běžně vyskytují. Když jsem tuto tabulku v roce 97 psal poprvé, byly v ní zcela jiné sloupce a hemžilo se to hodnotami NE. Jak je vidět, časy se hodně zlepšily (aktualizováno 2004).
Typ Internet Explorer 5, 5.5, 6 a 7
Mozilla (Netscape 6 a 7, Firefox
atd.)Opera
JavaScript Ano Ano Ano
VBScript Ano Ne Ne
DOM nestandardní standardní oba
DHTML Po svém Po svém Po svém
CSS styly Ano Ano Ano
CSS 2 něco málo skoro kompletně většinu věcí
CSS pozicování Ano Ano Ano
Grafické filtry Ano Ne Ne
Tagy <div> a <span> Ano Ano Ano
Tabulky dle HTML 4 Ano Ano Ano
Java applety Po nainstalování Po nainstalování Volitelně při instalaci
Flash Volitelně při instalaci Po nainstalování Po nainstalování
