Jak dělat webové stránky 1. - začínáme

Tento nový seriál o tvorbě webových stránek je v první řadě určen úplným začátečníkům.

Nejprve se dozvíme, jak webová stránka funguje a jak ji můžeme vytvořit. Dále se budeme seznamovat s technologiemi, které jsou určeny pro její vytvoření. A nakonec se dozvíme, jak svoje dílo publikovat a zviditelnit. Pokud jste připraveni, můžeme začít hned teď.

Jak vypadá internet?

Co je to internet? Je to spousta počítačů s obrovskou celkovou kapacitou, které jsou navzájem propojeny v jedinou síť. Ve vybraných počítačích je uloženo vše, co můžete na internetu objevit, především webové stránky. Takovému počítači říkáme webový server, nebo jen server. Další součástí jsou klientské počítače (počítač návštěvníka), které jsou zastoupeny prohlížeči. Tyto počítače se k internetu připojují prostřednictvím pevné linky nebo i jiným způsobem. Webový server odpovídá na jejich požadavky, posílá jim webové stránky. Jednoduše řečeno, živě.cz je server, ke kterému jste se připojili klientským počítačem, a komunikace probíhá prostřednictvím vašeho prohlížeče.

V současné době se internet stal součástí života běžného člověka a určitě nebude na škodu naučit se dělat kvalitní webové prezentace, jak po stránce technologické, tak i po stránce funkční. Když tvoříte webové stránky, jejich vytvoření, ačkoli se to nezdá je až druhořadé (i když v pracovním postupu je na prvním místě), prvořadé je, aby na vaše stránky přišli potencionální zákazníci (nebo jen návštěvníci). K čemu by byla sebelepší prezentace, kdyby jejím jediným návštěvníkem byl sám autor?

Webové stránky

Pokud chcete zobrazit nějakou stránku, zadáte v prohlížeči její adresu: URL - Uniform Resource Locator, unikátní adresa, např. , server na tento požadavek odpoví, díky URL nalezne žádaný soubor a ten pošle zpět prohlížeči. Prohlížeč nakonec soubor převede na webovou stránku, kterou vidíme my.

Co budeme potřebovat

Co potřebujeme, abychom mohli začít vytvářet internetové stránky? Nemusíte se obávat žádné složité instalace, která se projeví na vašem rozpočtu. Vystačíte si s programy, které denně používáte.

  • Budete potřebovat editor (program, kterým se vytvářejí webové stránky - vystačíme si i s klasickým Poznámkovým blokem (Windows), protože samotná webová stránka má textový formát (vše, co stránka obsahuje, je možné zapsat textem).
  • Dále budeme potřebovat prohlížeč, abychom zkontrolovali, zda stránka odpovídá naším představám.

Co webové stránky umožňují

V první řadě umožňují zobrazování dokumentů, které obsahují text, obrázky, tabulky a další prvky, srovnatelné s dokumenty napsanými ve Wordu. Dále můžete vnést do stránek interaktivní prvky (takové, které reagují na podněty návštěvníka, na podmínky a čas). V poslední řadě můžete prostřednictvím webu komunikovat s databází nebo ukládat data, ale to už jsou značně pokročilé vlastnosti.

Jak vytvořit první stránku

Soubory webových stránek mají obvykle příponu html (stranka.html), nebo htm (stranka.htm), tuto příponu mají, aby byly odlišeny od jiných souborů. Obě koncovky jsou naprosto shodné a je jen na vás, kterou budete používat. Dobrým zvykem je pracovat vždy jen s jednu (pro lepší orientaci). Existuje více používaných přípon souborů (.php, .asp, ...), které označují dynamicky vytvářené stránky, tedy například výstupy požadovaných dat z databáze. Aby byla data, putující od serveru ke klientovi, co nejmenší (a tudíž rychlost stahování, co nejvyšší), obsahují tyto soubory pouze nejnutnější data, která později prohlížeč interpretuje. Server posílá jen recept, prohlížeč vaří. Tento recept můžete vytvořit třeba v již zmíněném Poznámkovém bloku, říká se mu zdrojový kód. Zdroj říká, co má prohlížeč udělat. Vložit červený text veliký 10 bodů a vedle umístit obrázek. Představte si, že někomu diktujete dopis a zároveň mu říkáte, jak má text formátovat, kam má vložit obrázek atd. Váš diktát je zdrojový kód a ten chudák, co za vás píše, je prohlížeč. Zdrojový kód této stránky si můžete zobrazit, pokud v prohlížeči kliknete na Zobrazit | zdrojový kód. A dostáváme se k zajímavé věci, webová stránka může mít dvě odlišné podoby:

  • Zdrojový kód, který popisuje, jak má stránka vypadat; zobrazujeme ho v editoru, kde ho také můžeme měnit.
  • Samotná webová stránka, kterou zobrazujeme v prohlížeči a jejíž vzhled je nám na první pohled pochopitelný.

Editory webových stránek

Abychom měli ve všem ještě větší nepořádek, existují dva základní typy editorů.

  • WYSIWYG editory, vizuální editory, v nich vytváříte přímo webovou stránku, tak jak bude vypadat v prohlížeči. Odtud jeho název What You See It`s What You Get (Co vidíš to dostaneš). Zástupci těchto editorů jsou třeba Microsoft Frontpage 98, 2000, XP.., Macromedia Dreamweaver nebo třeba s jistými výhradami Microsoft Word. U těchto editorů platí jednoduché pravidlo, vytváření stránek je relativně jednoduché, ale nikdy nemáte zcela pod kontrolou jejich zdrojový kód.
  • Strukturní editory, v nich vytváříte přímo zdrojový kód, což je samozřejmě trochu těžší než přímá editace, ale zase budete mít mnohem širší možnosti a plnou kontrolu nad tím, co vznikne v prohlížeči. Zástupcem je třeba Poznámkový blok (notepad) nebo jiný textový editor. Této skupině vévodí Macromedia HomeSite, dále třeba EasyPad a PSPpad. Těmito programy se to na internetu jen hemží

a většinou mají název typu HTML nějakéoznačení editor.

WYSIWYG editory se už dále zabývat nebudeme. Naopak se budeme velmi podrobně zajímat o vytváření zdrojového kódu. Velmi šikovným editor je PSPad, který je zdarma a česky. Poměrně dobrým editorem je 1st page 2000, který je sice trochu starší, nicméně jeho schopnosti jsou stále aktuální. Bohužel je anglicky a není podporován ve Windows XP.

Volba prohlížeče

Prohlížečů existuje spousta, nejznámějším a nejčastěji používaným prohlížečem je Microsoft Internet Explorer (aktuální verze 6.0), dále např. Opera 7, Mozilla nebo na počítačích Apple prohlížeč Safari. Každý z těchto prohlížečů zobrazuje webové stránky trochu jinak, všechny jsou zdarma. Často může jít jen o nepatrné rozdíly, ale mnohdy některý prohlížeč umí věci, které ten druhý neovládá. V důsledku rozdílu bude návštěvník s takovým prohlížečem značně ochuzen. Proto je dobré se občas podívat, jak vypadají stránky v jiných prohlížečích. Zastoupení Internet Exploreru se pohybuje kolem 90 %. Pokud vám tedy budou fungovat stránky v něm, máte 90 procent návštěvníků jistých. Existuje ještě jedno jednoduché pravidlo, čím počítačově gramotnější návštěvníci, tím méně Microsoftu.

Zdrojový kód

Několikrát jsem se zmínil o zdrojovém kódu a jak ho vytvořit. Ale jak vypadá a proč tu vlastně je? Jedním z prvních úkolů návrhu standardu pro webové stránky bylo zajistit, aby se soubory v kabelech pohybovaly co nejrychleji. Datový objem souborů musel být omezen na minimum. To zajišťuje HTML - HyperText Markup Language, hypertextový značkovací jazyk. Hypertextový znamená, že je možné jeho obsah pomocí odkazů provázat s jinými soubory (a usnadnit pohyb mezi nimi). To, že jde o značkovací jazyk, znamená, že HTML je tvořeno značkami, které udávají, jak má být obsah formátován. Abyste si udělali představu, uvedu příklad:

<b>Tučný text<b>

Za značku považujeme <b> a </b>, které určují, kde začíná tučný text a kde končí. Těmto značkám se říká tagy česky také značky. Jsou mnohem starší než samotný internet, pamatují dobu psacích strojů. Tehdy autor dělal do textu značky, aby tiskař věděl, co má být tučné a co ne. HTML značek je spousta, ale i s málem si vystačíte. Z HTML nemusíte mít vůbec strach, nejde o jazyk programovací, který je mnohem složitější, ale o jazyk značkovací!

Slovo na konec

Doufám, že jste si udělali teoretickou představu o fungování webových stránek. Začátky jsou vždy nejtěžší. V příštích dílech se budeme zajímat o praktickou tvorbu pomocí HTML. Budu rád, když mi v komentářích sdělíte případné nejasnosti nebo váš názor.

Diskuze (131) Další článek: Autocont.cz hacknut?

Témata článku: Software, Internet, Internet Explorer, Programování, Psací stroje, Vybraný počítač, What, Jak, Str, DEL, Chudák, Chudoba, Stráň, Editor, Složité pravidlo, HTML Editor, Webová stránka, Prohlížeč


Určitě si přečtěte

Není jen Flightradar: Našli jsme další aplikace pro sledování letadel, některé ukážou i víc

Není jen Flightradar: Našli jsme další aplikace pro sledování letadel, některé ukážou i víc

** 8 služeb pro sledování leteckého provozu ** Nejznámější je Flightradar24, ale alternativy leckdy prozradí více ** Letadla i v této pohnuté době čile létají a je co pozorovat

Karel Kilián | 14

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4


Aktuální číslo časopisu Computer

Velký test fitness náramků

Levné záložní zdroje

Jak si zabezpečit domov

Nejlepší monitory na trhu