Kapitola 2: Stanovenie štruktúry dokumentu

Kapitola 2: Stanovenie štruktúry dokumentu

Každá spoločnost potrebuje k pre správne fungovanie nejaké pravídlá,nejakú tu infrastruktúru. Všetci sme predsa odsúhlasili že červené svetlo znamená stáť a zelené svetlo znamená voľno. keby sme to nereśpektovali tak by vznikol chaos.Jazyk HTML je rovnaky. Pri tvorbe vašej stránky musíte dodržiavať základnu struktúru,aby ich mohly webové prehliadače správne prečítať. To znamená že dokument musí obsahovať určité značky,obsahujúce hlavné časti a jaký typ kódovania sa používa

V tejto kapitole sa naučíte:

  • Stanovenie štruktúry dokumentu HTML stránky
  • Definicie typu dokumentu
  • Vytvorenie hlavičky a tela dokumentu HTML
  • Nastavenie názvu a kľúčových slov pre stránku vhodne pre vyhľadávače
  • Vytvorenie odstavcov a zalomenie riadkov
  • Prezeranie webovej stránky vo svojom prehliadači
  • Vytváranie,ukládanie a prezeranie zmien
  • Zverejňovanie súborov na serveru pomocou freehostingu

Definicia typu dokumentu

Pri písani HTML alebo XHTML máte na výber z troch základných definícii typu dokumentu:
Predchodová (Transitional)-Tento typ dokumentu je založený na štandardnom kódovaní HTML, ale je spätne kompatibilné zo starími zásadami HTML. V naších tutoriálov budeme používať tento typ.
Striktnu (Strict)-Tento typ dokumentu nepripúšta žiadne zavrhnuté značky. Použitie striktného typu je výhodou v XHTML, zahrňujúci jeho schopnosť pripojit sa k databázi. Je to užitočne pri zvážení predpokladu,že HTML bude ćasom postupne v ústrani a definitivnim standardom bude XHTML.
S podporou rámov (Frameset)-Tento typ umožnuje použiť na webovej stránke rámy. O rámach sa budeme zaujímat v 15 kapitole nášho tutoriálu. Rámy sú dosť nešikovné a obvykle existuju lepšie spôsoby,než rámy ktoré nahradia v tom čo dokážu.

Rám:

Rámy rozdeľujú okno prehliadača na niekoľko samostatných panelov pomocou mriežok. V každom panelu sa zobrazi ný dokument HTML. Napríklad že staticky navigačny panel by sa mohol zobrazovať v ľavom panely a pravý panel by zobrazoval informácie. Ešte pred CSS musela byť každá stránka formatovana individuálne,boli rámy veľmi obľúbené, pretože spoločne prvky sa mohly na každej stránke opakovať,bez toho aby sa sa vkládala do kódu HTML každá stránka samostatne. Kaskádové styly zjednodušili použitie konzistentneho formátovania súvisiacich stránok, a preto už dnes nesu rámy moc ubľúbené.

Pre určenie toho,ktoré z týchto troch standardov použijeme môžeme použiť značku

DOCTYPE

Hoc HTML nerozlišuje malé a veľke písmena,značka DOCTYPE musí byt napísana veľkými písmenamy. Dá sa povedať že značka DOCTYPE je ako keby podpis zmluvy. Je nepovinnou značkou, ale jej použitím slubujete,že váš kód bude odpovedať určitým zásadam. Ked webový prehliadač naraí na správnu zapísana značku DOCTYPE,spustí stánku v śtandardnom režime. Keď na ňu nenarazí,tak prehliadač predpokladá niećo nepredvidateĺneho a zobrazi str=anku v neštandardnom režime.
Rozdiel medzi standardným a nestandardným režimom pochádza z minulosti, kde mali prehliadače problémy zo standardizáciou. Použitim značky DOCTYPE slubujete webovému prehliadaču že na stránke je len ćistý kód.


 

Vytvorenie štruktúry v HTML dokumentu

Takže index.html sme si už vytvorili v návode s PSPadom

Teraz si vytvoríme úplne základný syntax HTML dokumentu. Tento základ sa bude skladať z veľmi dôležitých tágov a to je

DOCTYPE

 

<html>

 

<head>

 

<body>

Celý váš kód HTML-okrem DOCTYPE by mal byť umiestnený medzi párovou značkou <HTML> (spomente si na kapitolu 1 tam som to vysvetľoval)
Značky <html> a </html> slúžia ako obal okolo všetkých ostatních značiek v dokumentu.

 

Váš dokument by mal mať dve časti: hlavičku a telo. Hlavičku označuje párová značka <head>. Táto časť obsahuje názov stránky,čo je text zobrazený v záhlaviu stránky v prehliadači a na tlačítku v nástrojovej lište Microsoft Windows. Obsahuje taktiež aj informácie o dokumentu,ktorá sa nezobrazuje,ako napríklad META-ZNAČKY (budem o nich písať v tejto kapitole) Používa sa taktiež pre vloženie kodu pre kaskadove styly a spúštanie scriptov.

TELO dokumentu obsahuje všetky informácie,ktoré vidíte keď si stránku cez prehliadač prehliadate. Používa sa na to značka <body>

Značky <html>, <head>, <body> su v HTML nepovinné,ale v XHTML sú povinné. v XHTML musíte naviac vložit do značky <html> parameter ktorý odkazuje na skutočnosť že XHTML je vytvorený v XML. (kapitola 1)

Uvodzovacia značka <html> by v XHTML mala vyzerať takto:

<html xlmns="http://www.w3.org/1999/xhtml">

 


Takže ideme vytvarať štruktúru.

1. Otvoríme si náš vytvorený index.html vytvorili sme si ho TU v PSPad

2. Ak to máte otvorené napíšte na prvý riadok nasledujúci kód DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Kapitola 2: Stanovenie štruktúry dokumentu

3. Enterom prejdeme na novy riadok a tam napíśeme toto:

<html>
<head>

Kapitola 2: Stanovenie štruktúry dokumentu

4. Stlačíme pár krat ENTER (3x stačí) a napíšeme toto:

</head>
<body>

Kapitola 2: Stanovenie štruktúry dokumentu

5. Stlačíme zase par krat ENTER (3x stačí) a napíšeme toto:

</body>
</html>

Kapitola 2: Stanovenie štruktúry dokumentu

6. Uložíme (ctrl+s)

Tak a teraz mame vytvorenú šabĺonu pre tvorbu všetkych HTML dokumentov. Môžte si to uložiť aj pod iný názov pre podstránky ktoré budeme vytvarať.
Ušetríme tim čas ktory by sme potrebovaly pri vytvoreni vždy novej štruktúry.


Vytváranie odstavcov a písanie na nový riadok

Do časti <body> sa píše text ktorý sa zobrazí na webovej stránke,teda v prehliadači. Každý odstavec by mal byť uzavretý v párovej znaćke ktorá znači jeho typ.
Najzakladnejšim typom odstavcov je odstavec v tele dokumentu značený značkou

<p>

a

</p>

 Ukážka:

Kapitola 2: Stanovenie štruktúry dokumentu

V prehliadači to momentálne vyzerá takto:

Kapitola 2: Stanovenie štruktúry dokumentu

Vidíte že diakritika nám v stránke nejak blbne. Na začiatku som to neuvádzal aby ste videly ako to dopadne bez správneho kódovania jazyka.

Takže teraz vložíme hneď pod značku <head> následovne:

<META http-equiv="Content-Type" content="text/html; charset=utf-8">

Kapitola 2: Stanovenie štruktúry dokumentu

Uložíme a výsledok je:

Kapitola 2: Stanovenie štruktúry dokumentu

 

 

Písanie na nový riadok. V prehliadači stlačíme ENTER,ale nebude to fungovať. Preto je potrebná značka

<br/>

Je nepárova a používa sa na konci každého riadku vo vnútri odstavcu.

Ukážka:

Kapitola 2: Stanovenie štruktúry dokumentu

V prehliadači:

Kapitola 2: Stanovenie štruktúry dokumentu


Takže už vieme ako tieto dve značky fungujú. Ak to máte môžme ísť ďalej.
Ak by ste vytvárali nejakú firemnú stránku a chceli donej vložit svoju adresu,tak môžme ju napísať takto(Vymislená adresa):

<p>Našu hlavnú adresu nájdete na adrese:<br />
 Manhattan 102<br />
 New York<br />
 075 01</p>

Výsledok v prehliadači:

Kapitola 2: Stanovenie štruktúry dokumentu

Teraz je rad na vás:

1. Otvorte si v notepad++ svoj index.html
2. V okne notepadu medzi značky <body> a </body> napíšte toto(Ak tvorite vlastnu stránku tak mozte pisat aj svoj vlastny text):

<p>Vítajte na stránke o meste New York. Dúfame že sa vám naša stránka bude páčiť</p>
<br />
<p>Základné údaje<br />
 Rozloha: 827km2<br />
 Jazyk: angličtina<br />
 Mena: americký dolár<br />
 Počet obyvateľov: 15mil.<br /></p>
<p>U nás nájdete všetké potrebné informácie o meste New York.</p>

 4. Zmeny uložte,kliknite pravým tlačitkom na index.html a otvorte ho vo svojom prehliadači abyste videli výsledok:

Kapitola 2: Stanovenie štruktúry dokumentu

Výsledok:

Kapitola 2: Stanovenie štruktúry dokumentu


Nastavenie názvu stránky a kľúčových slov pre stránku vhodne pre vyhľadávače

Možno ste si aj sami všimli že sa v titulku okna vášho prehliadača zobrazí celá cesta k súboru (C:\Users\…) Ak si prehliadate nejakú stránku,tak najčastejšie sa miesto toho zobrazí názov stránky. Aj u nás máme nazov stránky,hore v okienku. Tento text určuje značka

<title>  </title>

ktorá je vložená do časti <head> teda hlavička stránky.

Príklad:
1. Otvorte si svoj index.html

2. Nájdite značku <head> a hneď pod ňu napíšte nasledujúcu značku

<title>New York FAN</title>

Kapitola 2: Stanovenie štruktúry dokumentu

Výsledok PRED a PO pridaní značky:

Kapitola 2: Stanovenie štruktúry dokumentu

PO pridaní značky

Kapitola 2: Stanovenie štruktúry dokumentu


Ďalšia značka,ktorú môžte vložiť do hlavičky stránky je

<meta>

Používa sa na určenie kľučových slov týkajucich sa vašej stránky. Pokiaľ ludia prehliadavaju internet pomocou vyhľadávača,napr GOOGLE tak tieto kľučové slová pomáhajú sa presadiť v prehliadači v čo najvyššej priečke a tak sa na vašu stránku dostane čo najviac ľudí. Pri indexovani tzv. botov-vyhľadávačov sa netreba spoliehať len na názov stránky,ale taktiež aj na kľučové slová nájdené v oblasti značky<meta> . Je nepárová a obsahuje parametre NAME a CONTENT. Zapisuje sa takto:

<meta name="keywords" content="vase, slova, pre, stranku" />

Dajme tomu že naša fan stránka o New Yorku bude užitočná ľudom,ktorý chcú vedieť viac o tomto meste len než čo vidia vo filmoch atď… Pamiatky NY,Manhattan,Jedlo v NY,žltý TAXI,Brookly,Socha slobody,Hamburger, WTC…
Hlavná stránka možno neobsahuje všetke tieto slová,ale vy chcete aby ľudia vyhladávali tieto slová v prehliadači a tak sa dostali na vašu stránku. Pre to je potrebný táto značka a zapišeme ju zas do hlavičky stránky takto:

 

 

1. Otvoríme si index.html

2. Pod <head> vložíme nasledujúcu značku

<meta name="keywords" content="Pamiatky NY, Manhattan, Jedlo v NY, žltý TAXI, Brookly, Socha slobody, Hamburger, WTC" />

Kapitola 2: Stanovenie štruktúry dokumentu

Stačí už len uložiť. Tento proces slúži pre vyhľadávače aby mohly nájsť vašu stránku. Na vašej stránke sa nič co je v <head> neukáže.


Tak a sme na konci našej druhej kapitoly. Dúfame že budete z nami pokračovať ďalej v 3 kapitole-FORMÁTOVANIE TEXTU POMOCOU ZNAČIEK kde sa naučime aj nasledujúce:

  • Vytvárať nadpisy
  • Používať tučné písmo a kurzivu
  • Použivať horní a dolní index
  • Používať iné typi pismen(code,samp,kbd,tt)
  • Formátovanie blkovanej citáce

 

Materiál k dnešnému tutoriálu si môžte stiahnuť kliknutím na kapitola2

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *