Postup pro začátečníky

Jak vytvořit HTML soubor (webovou stránku) ve Windows

Toto je podrobný text opatřený komentáři vzniklý pro rozvedení stručného textu v návodu jak si udělat stránku. Popisuji jen jeden z mnoha způsobů, jak se dá stránka vytvořit.

Cílem bude naučit vás pracovat s jedním souborem ve dvou programech zároveň.

1.Vytvořte si na disku novou složku, 

například C:/pokus a přejděte do ní. (Složkám se říká také adresáře.)

Pokud to neumíte: přepněte se na plochu. Dvojklik na Tento počítač. Objeví se seznam disků. Dvojklik na C: . Objeví se obsah disku, to žluté jsou složky, to ostatní jsou soubory.

Jsme na disku C a uděláme si novou složku jménem "pokus", ve které si budeme hrát. Pak ji můžeme kdykoliv smazat.

Teď uděláme novou složku. Je víc způsobů, nejsnadnější je z nabídky Soubor > Nový > Složka. Nebo tak něco. V anglických Windows File > New (object) > Folder.

Vytvoření nové složky

Objeví se nová složka, která modře čeká na přejmenování. Zadejte třeba "pokus" a potvrďte Entrem. 

Tak teď existuje nová složka, stačí do ní přejít dvojklikem. Objeví se bílé prázdné okénko -- složka je samozřejmě prázdná. Je dobré mít novou složku na pokusy se stránkami, protože se tak na disku nenadělá moc bordelu.

2. Vytvořte nový textový soubor

 (třeba pravým tlačítkem - Nový objekt)

Jak je otevřená ta nová složka, tak se tam třeba klikne pravým tlačítkem (jsou i jiné způsoby) a zadá se Nový objekt > textový dokument nebo tak něco.

Vytvoření nového textového dokumentu

Vytvoří se soubor, který nahodí nějaké divné jméno (nový soubor) a čeká na přejmenování (má zamodřené jméno). 

3. Přejmenujte jej na jméno stranka.html

 (potvrďte změnu přípony), změní se ikona u souboru

Jak je ten text zamodřený, tak se může rovnou psát jméno souboru. Napiště "stranka.html". Potvrdit Entrem.

Přejmenování souboru

Co když se nedá psát? Někdy se cosi stane a pak to nejde. Pak stačí kliknout na ten soubor pravým tlačítkem (opět jsou různé způsoby) a zvolit Přejmenovat. Pak se zadá nový název. Zkuste stranka.html .

To "stranka" je volitelné, název si můžete zvolit. To "html" musí být vždy "html". Důležité je, abyste původní příponu .txt přepsali na .html.

Protože by se měla měnit přípona souboru (z txt na html), Windows by se měly ozvat, že jako bacha. Prostě by se měl objevit dialog potvrzující změnu druhu (=přípony) souboru. Potvrďte Ano. 

Dialog potvrzení přejmenování souboru

Soubor by teď měl mít trochu jinou ikonku (nejčastěji takové modré éčko).

Jak vypadá soubor na disku

To modré éčko znamená, že se bude otevírat příště v prohlížeči. (Místo modrého éčka tam může být jiná barevná ikonka. Podle toho, jaký máte hlavní prohlížeč, to může být zatočená liška, červené óčko nebo divný čtyřbarevný disk).

Komplikace při přejmenování (pokud nenastala, přeskočte)

Může nastat jiné úskalí. Poznáte to podle toho, že se po přejmenování ten potvrzovací dialog neobjeví a soubor nezmění ikonku.

Postup pro Windows 7 a XP:

Chybné přejmenování se projeví na vzhledu ikony

Pak musíte dát v tom okně Zobrazit > Možnosti složky nebo Nástroje > Možnosti složky. Na druhé záložce (kartě), která se jmenuje Zobrazit, je pak spousta detailních nastavení.

Skrýt příponu souboru známých typů

Tam je potřeba najít řádek "skrýt přípony souborů známých typů" a zrušit u toho fajfku (chlívek má být prázdný). Pak OK. Načež by to mělo jít přejmenovat na stranka.htm i s varováním a změnou ikonky. 

Postup pro Windows 10: Zobrazení > Přípony názvů souborů zaškrtnout fajfku.

4. Otevřete soubor dvojklikem

HTML soubor na disku

V prohlížeči se zobrazí prázdná stránka.

Po dvojkliku na soubor (klikejte raději na tu jeho ikonku než na jeho text) by se měl spustit prohlížeč a v něm prázdná stránka.

Prázdný html soubor v prohlížeči

Ten program je nečastěji Internet Explorer, ale to není podmínkou. Otevře se takový prohlížeč, který máte nastavený jako hlavní. Prohlížeče jsou například Explorer, Firefox nebo Chrome. Takhle vypadá prázdný soubor v Mozille Firefox:

Prázdný html soubor v prohlížeči Mozilla Firefox

Možné komplikace

Kdyby na souboru nefungoval dvojklik, zkuste ho zamodřit a dát Enter. 

Kdyby se po dvojkliku spustil Poznámkový blok (Notepad), tak se asi nepovedlo to předchozí přejmenování (vraťte se k části, kde popisuju odkrývání přípon).

Pokud se po dvojkliku spustí Microsoft Word, je to průšvih. V tom případě zkuste spustit prohlížeč (většinou takové modré éčko) a do řádku adresy vyťukat c:/pokus/stranka.html (nebo jinou správnou cestu), potvrdit Enterem. Pokud nikde není prohlížeč (modré éčko, Firefox, Opera), počítač je pravděpodobně moc starý nebo moc rozbitý a nikdo na něj prohlížeč nenainstaloval. Musí se doinstalovat.

Ve většině případů se ale po dvojkliku spustí prohlížeč. Zobrazuje bílou stránku, protože tam zatím nikdo nic nenapsal.

5. Otevřete soubor v Poznámkovém bloku

Tohle je nejtěžší krok. Pokud to neumíte, sledujte postup. Cílem je spustit tentýž soubor v textovém editoru. Soubor je zatím prázdný.

Nechte prohlížeč puštěný a vraťte se do složky (měla by být otevřená na liště).

Ve složce najděte ten soubor.html. Ten se dá otevřít v programu Poznámkový blok třeba tímto postupem:

Klikněte na ikonku souboru pravým tlačítkem myši. Sjeďte na volbu Otevřít v programu a z nabídky programů vyberte Poznámkový blok. Klikněte na to normálním (levým) tlačítkem.

Otevírání souboru v Poznámkovém bloku z kontextového menu

Obrázek menu je pouze ilustrační, na vašem počítači se po kliknutí pravým tlačítkem objeví něco jiného. Ale volba "Otevřít v programu" by tam měla být.

Měl by se spustit Poznámkový blok, jednoduchý textový editor. Mělo by tam jít psát. 

Nemáte tam Poznámkový blok?

To je časté ve Windows 7. Ach jo! Potom musíte dát Pravé tlačítko > Otevřít v programu > Zvolit výchozí program. Dole zrušit fajfku u K otevření souborů tohoto typu vždy použít vybraný program a kliknout na malé plusko vedle nadpisu Další programy. Pokud ani tam Poznámkový blok nebude (a to už bych se divil), musíte kliknout tlačítko Procházet. Měli byste se nějak dostat do složky Počítač > Místní disk (C:) > Windows. Tam je soubor notepad.exe. (Příště už ho budete mít v tom rychlém menu.)

Každopádně se mi zdá, že s každou další verzí Windows se snaží jeho autoři co nejvíc lidem znepříjemnit tvorbu stránek.

Další možné komplikace

Máte-li anglické Windows, Poznámkový blok se v nich jmenuje Notepad.

Kdyby se spustil jiný program, zkuste, zda do něj půjde psát a zda to půjde uložit. Pokud ano, je všechno v pohodě. Pokud ne, tak je problém.

Pokud se spustil WordPad, je to špatně. V něm nejde ukládat textové dokumenty (přestože se zdá, že to jde).

Možné alternativy

Jestliže vám přijde takovéhle otevírání zdlouhavé, můžete si třeba na plochu dát ikonu Poznámkového bloku a otevírané soubory na ni přetahovat. Neumíte-li ikonu Poznámkového bloku najít, dá se vytáhnout z menu Start > Programy > Příslušenství.

Další dobrý způsob je spustit si Poznámkový blok (z menu Start > Programy > Příslušenství > Poznámkový blok) a v něm zvolit příkaz Soubor > Otevřít a najít svůj html soubor na disku.

Komu se stránka otevírá ve starším Internet Exloreru, může se do Poznámkového bloku dostat rychle přes příkaz Zobrazit > Zdrojový kód. Jiné prohlížeče (Firefox, Chrome, nový Explorer) naneštěstí k zobrazení zdrojáku nepoužívají Poznámkový blok, takže se pak kód nedá upravovat (to jsem podcenil v předchozí verzi tohoto návodu, která tu byla do září 2010).

6. Do poznámkového bloku napište nějaký text

Podle libosti jej doplňte libovolnými HTML značkami (vizte příklady v základech HTML).

Tak, jaký text napsat? Vcelku libovolný. Třeba stačí úplně obyčejná věta:

Toto je moje první stránka.

Jednoduchý text v Poznámkovém bloku

Úplně napoprvé ještě s HTML neexperimentujte. To až jestli se to vůbec povede.

7. Soubor - uložit

To se dělá v tom Poznámkovém bloku.

Uložení textu v poznámkovém bloku

Stránka je nyní uložena na disku. V jednom programu jsme udělali změny (v tomto Poznámkovém bloku), z druhého programu (prohlížeč) to prohlédneme (v dalším kroku).

8. Přepněte se zpátky do prohlížeče

a zadejte obnovit (F5).

Aktualizace html stránky v prohlížeči

Pokud se neumíte přepnout zpátky do prohlížeče, tak sjeďte myší na obrazovce úplně dolu a hledejte program prohlížeče - podlouhlé tlačítko nejčastěji s modrým éčkem.

Kdyby byl náhodou zavřený, tak se dá znovu otevřít v prohlížeči z disku (krok 4).

V prohlížeči je potřeba dát příkaz aktualizovat (třeba klapkou F5 nebo pravoklik > aktualizovat nebo z menu Zobrazit > Aktualizovat). Prohlížeč se podívá na disk a načte aktuální uloženou verzi. Měl by se objevit ten text.

9. Prohlédněte si změny

Hezké?

Text stránky zobrazený v prohlížeči

Zkuste se vrátit do texťáku a úplně na začátek textu napsat pár písmen. Uložit a v prohlížeči aktualizovat. Mělo by se to objevit.

Pokud se stále nic neobjevuje, ujistěte se, že upravujete a zobrazujete stejný soubor.

10. Případně

se vraťte do texťáku a znovu upravte zdroj. Po uložení a obnovení se změny projeví.

Čili jděte do kroku 6. Nyní můžete přidávat HTML značky a po uložení (krok 7) a obnovení (krok 8) sledovat, co se stane. 

Přidejte html značky:

psaní textu s html tagy v Poznámkovém bloku

Uložte

Uložení textu v poznámkovém bloku

Aktualizujte v prohlížeči

Aktualizace stránky v prohlížeči

A koukejte, co se stalo.

Zobrazení html textu v prohlížeči

oo. Takto můžete experimentovat do nekonečna.

Zatím je ta stránka na vašem disku. Na server ji budete publikovat později.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.