SyX.cz - Tvorba www a webových aplikací
15.10.2011 22:45 | Autor: SyX
V předchozím článku jsme si řekli, co je to vlastně HTML a k čemu se používá. Nyní si ukážeme, jak vytvořit svou první jednoduchou stránku, tedy pouze s textem jako ukázku.
Jelikož obyčejný Notepad (textový editor ve Windows) by byl trochu nepřehledný, stáhněte si pro začátek nějaký textový editor se zvýrazněním syntaxe (Vašeho zápisu). Doporučuji velmi rozšířený a používaný PSPad Editor, který je zdarma. Můžete si ho stáhnout zde: [download:pspad].
Předpokládám tedy, že máte PSPad již stažený a nainstalovaný. Po jeho spuštění vyberte v menu Soubor -> Nový. Pokud v následujícím výběru vyberete HTML, načte se Vám šablona základního HTML. To je ale teď nevhodné, vytvoříme si náš HTML dokument úplně od nuly. Vyberte tedy TXT. Nyní máte vidět prázdný textový dokument, tedy pokud jste to dělali tak, jak jsem psal.
Při psaní zdrojového kódu záleží i na tom, v jakém kódování zdroj píšete, protože pokud jej píšete třeba v iso-8859-2 a zobrazuje se ve win-1250, nebude fungovat diakritika apod...
Kódování (znakových sad) je spousty. Doporučuji však používat UTF-8. Já osobně jsem si na to zvykl a nedělá mi problémy ve windows ani v linuxu. V horním menu Formát vyberte tedy UTF-8.
Tak, teď můžeme začít psát.
Jako první by v HTML dokumentu mělo být uvedeno DTD (Document Type Definition). To určuje prohlížeči jak má daný dokument zobrazit. Jsou různé doctype a popravdě je zbytečné se zde rozepisovat. Ideální je následující jednoduchý zápis, který by měl ve všech prohlížečích fungovat stejně.
Hned za ním následuje tag html, který znázorňuje začátek HTML dokumentu. Tag html je párový, takže je třeba jej zase uzavřít, ale to níže. Tento tag dříve neměl žádné atributy, avšak nyní u něj uvádějte atribut lang (není však nutné), který prohlížeči i vyhledávačům prozradí jazyk dokumentu. Já jej také používám. Zápis by měl vypadat nějak takto:
Uvnitř dokumentu, tedy mezi tagy html a jeho ukončením, jsou dále tagy head a body. HEAD je hlavička dokumentu, v něm se pak uvádí např. kódování (znaková sada) dokumentu, titulek stránky, načítání potřebných CSS souborů či JavaScriptu ale také i informace pro roboty (např. Google, Seznam). V tagu BODY je pak celý obsah stránky, který se zobrazuje uživateli. Oba tagy jsou také párové a musí být tedy ukončeny.
Holá kostra našeho soubory by teď měla vypadat zhruba takto:
Všimněte si, že jsou všechny tagy ukončeny. Ukončování tagů nikdy nesmíte křížit. Myslím to tak, že pokud zde otevíráme tag BODY uvnitř tagu HTML, musíme ho uvnitř tohoto tagu i ukončit.
Co můžeme tedy psát do hlavičky stránky (head)?
Nám prozatím stačí, když si nastavíme kódování, a to tedy UTF-8, to nastavíme následujícím zápisem:
1
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
Nyní by však měl stačit zápis ve stylu:
Oba zápisy jsou správně, ten druhý však starší prohlížeče nemusí znát a může to dělat problémy. Při pokusech jsem však nenarazil na prohlížeč, který by to nezvládl, používám tedy pouze ten druhý zápis, je kratší a přehlednější. Pokud narazíte na prohlížeč, který znakovou sadu nerozpozná, budu rád když mi dáte vědět.
Dále by v hlavičce měl být uveden titulek stránky. To je to, co se Vám zobrazí v nadpisu okna prohlížeče (nebo panelu). Titulek je párový tag a měl by být uváděn vždy, jeho zápis je jednoduchý.
V hlavičce jsou další tagy, ale ty teď není třeba rozepisovat. Pár základních však uvedu. Je to převážně pro vyhledávače.
1
2
3
<meta name="description" content="Popis našeho prvního pokusu. Je to vážně první pokus" />
<meta name="keywords" content="klíčová slova,pokus,testovací" />
<meta name="author" content="Autor s.r.o." />
Toť zatím vše ohledně hlavičky dokumentu. Přejdeme k tagu body, ve kterém je už úplně vše co se Vám vlastně zobrazuje v prohlížeči. Prozatím si uděláme jen nadpis stránky a trochu textu v odstavci.
Nadpisů je několik úrovní a mělo by se zachovat jejich řazení, nemůžeme tedy přeskakovat 1, 3, 2, ale brát je popořadě 1, 2, 3. Všechny jsou párové a musí být tedy i ukončeny. Nám teď stačí jen jeden nadpis a to nadpis první úrovně.
Dále si napíšeme text do odstavce.
Toť prozatím vše. Celý Váš dokument by měl tedy vypadat zhruba takto:
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>První pokus</title>
</head>
<body>
<h1>Nadpis stránky</h1>
<p>Nějaký text který zde bude napsaný</p>
</body>
</html>
Všimněte si, že mám v kódu mezery od kraje dokumentu. To je pro přehlednost. Pokud otevřu nějaký tag, který dále musí být ukončen, pokračuju na dalším řádku o 4 mezery dále. Tím mám přehledně vidět, kde všechny tagy začínají a kde končí. Můžete však mít klidně celý dokument na jednom řádku. Pokud dodržíte správně ukončování tagů apod., zobrazí se stránka správně. Je to pak ale zbytečně nepřehledné. Každý si časem psaní zvykne na svůj styl zápisu tak, aby se v kódu později vyznal a měl v něm přehled.
Tak tedy, náš první pokus je hotový. V editoru vyberte v menu Soubor -> Uložit jako... a vyberte, kam si soubor chcete uložit. Název nechám na Vás, avšak koncovku zadejte .html (např. pokus.html).
Nyní, když si soubor najdete, můžete na něj dvakrát kliknout a zobrazí se Vám Váš první HTML dokument.
Doufám, že se Vám zobrazil správně?
GSm69i <a href="http://wqppvqqjthrb.com/">wqppvqqjthrb</a>, [url=http://oqoqrupzekel.com/]oqoqrupzekel[/url], [link=http://hsrsqqjfsfxv.com/]hsrsqqjfsfxv[/link], http://dczbjlrmnmbg.com/
Chcete mít vlastní web? Vytvořím Vám Vaši vlastní www stránku či webovou aplikaci dle Vašich představ. Časově přívětivě, cenově dostupně.
KontaktJste firma nebo živnostník pracující v oblasti tvorby www? Nebráním se žádné spolupráci jak s grafickými studii, tak ani s jinými firmami či živnostníky. Pracuji externě ze svého domova, ale osobní setkání není problém.
podtržený text, ale tečkovaný
˜ PsYcHo, 22.1.2012 21:43
Jak změnit barvu pozadí? (testovací téma)
˜ Neregistrovaný, 19.12.2011 11:49
Jak změnit barvu pozadí? (testovací téma)
˜ SyX, 17.12.2011 17:10
První pokus
˜ Neregistrovaný, 28.1.2012 9:22
První pokus
˜ SyX, 17.12.2011 15:11
