Vytváříme webové stránky – Úvod a první webová stránka (část 1.)

Úvod

Vážení čtenáři,

rád bych zde začal psát seriál o vytváření webových stránek. Vím, že podobných článků ohledně HTML, PHP, apod. je velká spousta, ovšem já bych chtěl pojmout tento seriál trochu jinak.

[ad code=1 align=center]

Především by mohly články sloužit jako dostačující, srozumitelný, stručný, ale zároveň výstižný návod pro to, aby se podle ní dokázal stát i úplný začátečník středně pokročilým. Ale také by mohly posloužit i zkušenému programátorovi, pokud by například hledal nějakou funkci.

Tento seriál by měl postupně obsahovat články zaměřující se na:

  • Základy HTML
  • Kaskádové styly
  • Úvod do JavaScriptu
  • PHP
  • jQuery
  • AJAX

Postupně by mohl obsahovat i některá další rozšíření, frameworky či nejmodernější postupy. Během psaní seriálu se i web nadále vyvíjí a během psaní se taktéž budu sám další technologie učit, abych je pak také mohl zařadit v odpovídajícím rozsahu.

Také bych rád podotknul, že při psaní podobných článků je mou oblibou vnucovat čtenářům mnou ověřené postupy, programy a podobně. Upozorňuji na to včas a doufám, že Vás to při čtení článků nebude nijak omezovat.

Tolik pár slov k úvodu, nyní se pustíme do práce.

Naše první webová stránka

1. Otevřete si Poznámkový blok a zkopírujte do něj následující kód:

Pokud byste ho chtěli opisovat, tak znak < napíšete nejsnáze pomocí CTRL+ALT+ čárka,

znak > pak CTRL+ALT+ tečka. Na Linuxu je to pravý ALT + čárka nebo tečka.

<html>

<head>
<title>Titulek</title>
</head>

<body>
Nějaký text.
</body>

</html>

2. Soubor -> Uložit jako..
3. Vyberte typ souboru Všechny soubory
3. Napište stranka.html a uložte na disk
4. Otevřete soubor, spustí se prohlížeč

Gratuluji, vytvořili jste Vaši první webovou stránku.

Pouštíme se do prvních úprav

Nyní bychom však nechtěli mít napsané jen „Nějaký text.“, ale napsat si tam také něco vlastního, upravit právě vytvořený soubor.

1. Otevřete složku se souborem

2. Klikněte na soubor pravým tlačítkem myši

3. Zvolte nabídku Otevřít v programu -> Poznámkový blok

4. Změňte „Nějaký text.“ na cokoli dle vlastního uvážení a soubor uložte

5. Spusťte si stránku znovu v prohlížeči. Pokud jí máte již otevřenou, aktualizujte jí

(klávesová zkratka CTRL+R či CTRL+F5)

Obdobným způsobem můžete také zkusit změnit „Titulek“ na něco svého.

Pokud budete chtít zalomit řádek, použijte příkaz (TAG): <br />

První řádek<br />Druhý řádek

Pokud budete chtít napsat text tučně, kurzívou nebo jej podtrhnout,

samozřejmě to můžete udělat i v HTML. Také lze vložit 7 úrovní nadpisů (h1-h7)

<b>Tučný text</b><br /><b>Nakloněný text</b><br /><b>Podtržený text</b><br />
<h1>Napis úrovně 1</h1><h3>Napis úrovně 3</h3>

Párové a nepárové

Možná jste si již všimli, že příkazům v HTML říkám TAGy. Ale dále jste si také mohli všimnout, že tu jsou dva druhy tagů: Takové které mají začátek a konec, vyberou určitou oblast a tu naformátují (b,u,i,h1,..). Těm budeme říkat párové. A pak jsou tu ty druhé, nepárové (například br nebo hr). Na obecnou syntaxi obou typů jste si již asi zvykli:

<parovytag>Něco</parovytag><neparovytag />

Stejně, jako je domluva, že by se tagy měly psát malými písemeny a dle syntxe výše, je také domluva, že se nebudou párové tagy křížit, takhle: <b><i>Něco</b></i> (fungovat to samozřejmě bude, ale je to nestandardní). Jinak o standardech HTML rozhoduje konzorcium W3C. Snažím se příklady psát tak, aby co nejvíce odpovídaly standardu xHTML 1.1 (xHTML proto, že je to kód HTML, který je psán stylem dodržující obecný zápis XML).

Konec první části

To by pro mohlo stačit. Příště se naučíme formátovat text a míchat barvy.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.