2 - Základní zdrojový kód www stránek

3. října 2010 v 22:43 | JMCBF |  HTML

Základní zdrojový kód www stránek


                Jak prozrazuje nadpis, už se vrháme po hlavě do praxe - do samotného psaní internetových stránek. Podstatné je si uvědomit, že práci nám hodně usnadní následující klávesové zkratky (týká se pouze operačního systému MS Windows):
                              
Ctrl + c
Kopírovat
Ctrl + v
Vložit
Ctrl + s
Uložit
TAB
Odsazení
F5
Aktualizovat
F12
Uložit jako…





Abychom se ale již nadále nezdržovali teorií, spusťte si program a hurá do psaní vašich prvních internetových stránek v HTML.


                Úplně na začátek je dobré uvědomit si, jak funguje zdrojový kód, takže vás budu navigovat postupně a postupně vás seznamovat s vlastnostmi jednotlivých tagů (značek). Ve vašem editoru si teda otevřete nový soubor (v případě PSPadu dejte nový->nový soubor->HTML, bude zde již něco napsané, toho si však nevšímejte a celé to smažte).
                Náš první krok při psaní internetových stránek jen vypíše obyčejný text: "Ahoj, světe." Pokud jste již programovali např. v C nebo v Javě, tak tenhle krok jistě znáte, avšak spíše si myslím, že k podobným jazykům se dostanete až časem. Jelikož nechci psát příručku, která říká, co je třeba napsat, ale chci, abyste také pochopili, proč to tak napsat, tak uděláme na začátek jednoduchou věc. Uložte soubor ve formátu Html a nazvěte jej např. muj-první-soubor.html. Ničeho se nebojte, to, že máte prázdný dokument, ještě nic neznamená. Je nutné, abyste v názvech dokumentů nepoužívali interpunkci (čárky, háčky,…) a mezery (tzv. prázdné znaky). Místo mezer se doporučují dělat pomlčky či podtržítka (kdo by nevěděl, tak podtržítko se udělá Shift + pomlčka).

                Inu, teď si soubor spusťte. Že se vám ukázala pouze prázdná stránka? Bílé pozadí a bez textu? No a co jste čekali, vždyť jste zatím nic nenapsali, takže hurá do toho. Napište do svého dokumentu: "Ahoj, světe." Pokuste se být i gramaticky přesní a piště to s čárkou. Nyní si soubor opět uložte a v prohlížeči stiskněte tlačítko aktualizovat nebo zmáčkněte nám známou zkratku F5. Ukázal se váš text na obrazovce? Skvěle! Pokud ne, inu, tak to zkoušejte znovu, nic snazšího než napsat text neexistuje, ne v počítačovém světě.

                Nyní již umíme vypsat prostý text na obrazovku, myslím si, že se mnou určitě souhlasíte. Nyní si musíme vysvětlit, co je to tag. Tag je značka, která se zapisuje do hranatých závorek - < a >. Podle toho, co do závorek napíše, takové bude mít text tagem označkovaný specifické vlastnosti. Hned na začátku si tagy rozdělíme do dvou skupin - tagy párové a tagy nepárové. Nepárovými se pro nynějšek nebudeme zabývat a vysvětlíme si, jak přesně fungují párové tagy. Pro zatím nezjišťujte, co znamená co, jen se snažte pochopit strukturu.




<font>Textíček</font> text

                Zde vidíme klasický příklad tagu. První věc, kterou z tohoto zápisu vyvodíme je ta, že text, na který se stahuje tag, je textíček. Na text se už tag nevztahuje. Značka </font> totiž ukončuje působnost tagu <font>. Ovlivněn je tedy každý text, který je mezi těmito dvěma tagy, ale žádný jiný nepodléhá tagu.
                Tím jsme si doufám dostatečně vysvětlili, jak to funguje. Ještě pro přehlednost zopakuji, co je důležité si vzít pro nadcházející práci. Párové tagy začínají značkou a končí značkou. První značka je ve tvaru <tag> a druhá ve tvaru </tag>. Jejich vlastnosti se vztahují na text, který je umístěn mezi nimi.

                Jako první si řekneme, že dokument bude HTML dokument, tudíž musíme celý text uzavřít do tagu <html>. Náš zdrojový kód bude tedy vypadat takto:

      Ahoj, světe.

-          Vřele doporučuji vždy odsazovat text pomocí tabulátoru, zdrojový kód je poté o dost přehlednější.

To ovšem nestačí, tag <html> má dvě hlavní součásti. První z nich, kterou hned využijeme, je tag <body>. Ihned si ho tedy napíšeme do našeho zdrojového kódu. Text musí být napsán v tagu <body>. Abychom se tím nezdržovali poté, napíšeme si do kódu na stejné úrovni i tag <head>.

      <head>
     
      </head>
      <body>
            Ahoj, světe.
      </body>

                Již tedy víme, že v tagu <body> máme text. Obecně můžeme říci, že v tagu <body> bude vždy všechno, co chceme, aby se nám na stránce zobrazilo. V tagu <head> tohle platit nebude, vlastně nic, co napíšeme do <head> se nám na stránce nezobrazí (s výjimkou jednoho tagu, ale i u něj se text nezobrazí přímo na textové části dokumentu).
 

Buď první, kdo ohodnotí tento článek.

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama