Úvod do tvorby www stránok Html dokumenty.
HTML ( Hyper Text Markup Language ) je jazyk, ktorý je základom pre vytváranie webových stránok. Základom tohto jazyka sú značky, čo je text vo špicatých zátvorkách < >. Príkazom v špicatých zátvorkách hovoríme tagy. Internetový prehliadač má za úlohu vyhodnotiť a spracovať text v zátvorkách. Text mimo tieto zátvorky je zobrazený na obrazovke.
Základné rozvrhnutie HTML dokumentov Prvý riadok <!DOCTYPE ...> určuje používanú verziu HTML Celý dokument okrem prvého riadku je vpísaný medzi tagy <HTML> hlava (HEAD), obsahuje titulok stránky (TITLE - názov stránky), meta informácia (META – typ jazyka, pomocné informácie pre vyhľadávač, kľúčové slová) a niektoré ďalšie prvky telo (BODY) obsahuje obsah stránok , ktorý potom vidíme vo vyhľadávači ( to znamená všetky príkazy pre tvorbu objektov, textov a odkazov .... )
Osnova html dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>titulok stránky</TITLE> </HEAD> <BODY> </BODY> </HTML>
Osnovu a všetky príkazy v <> píšeme do otvoreného dokumentu v programe NotePad. Výsledok vždy ukladáme pod typom súboru html. Ak chceme stránku „prerobiť“, musíme si ju otvoriť znovu v programe NotePad.
Telo html dokumentu BODY
Komentáre Umožňujú vytvoriť komentár v zdrojovom texte stránky. Komentár je pre začiatočníkov veľmi dôležitý. Text ktorý chceme aby sa stal komentárom uzavrieme do <!-- tagu začiatočného a tagu --> koncového. Napr. <!-- Zaciatok mojej stránky -- >
Element <br /> Element <br />(break, zalomenie) funguje tak, že povie prehliadaču aby pokračoval na novom riadku, skoro ako enter vo Worde. Napr. Vitajte <br /> na Mojej stránke.
Nadpisy Nadpisy rozdeľujeme na viac úrovní od najväčšieho nadpisu <h1> až po najmenší <h6>. Napr. <h1>Úroveň jedna je najväčší a najdôležitejší nadpis stránky</h1> <h2>Úroveň dva je menší a vhodný pre dôležité podnadpísy</h2> <h3>Úroveň tri je ešte menšia a vhodné pre podnadpisy</h3> <h4>Úroveň štyri je ako normálny text ale je zvýraznený</h4> <h5>Úroveň päť je menšia ako normálna a je tiež zvýraznená</h5> <h6>Úroveň šesť je najmenšia oproti ostatným nadpisom</h6>
Element <p> Jeden z najdôležitejších odstavcových elementov používaný pre odsadenie textu na stránke. Tento element ignoruje všetky medzery a „od enterované“ riadky, toto neplatí pre vynechanie riadku v podobe elementu <br />. Napr. <p>Normálny text</p>
Element <pre> Element <pre> je kontajnerový element, ktorý na rozdiel od elementu <p> ponecháva medzery a riadky. To znamená, že ako si napíšete text či obrázok v zdrojovom kóde taký sa vám zobrazí aj na stránke. Napr. <pre> yyyy yyyy ccccccccc ooooooooo nnn nnn yyyy yyyy cccc cccc ooo ooo nnn nnnn yyyyyyyy cccc ooo ooo nnn nn nn yyyyyy cooo ooo nnn nn nn yyyy cccc ooo ooo nnn nn nn yyyy cccc ooo ooo nnn nnn nn yyyy cccc cccc ooo ooo nnnnnn nn yyyy ccccccccc ooooooooo nnnnn nn </pre>
Elementy fyzických štýlov Elementy fyzických štýlov fungujú rovnako ako v hociktorom textovom editor ako napríklad MS Word. Písmo môžeme naformátovať na normálny, tučný, kurzívu, horný, dolný index a podčiarknutý text. Do tela dokumentu(body) napíšeme otvárací tag elementu, ktorí chceme použiť, text a uzavierací tag elementu.
Tučné písmo (bold) <b> Kurzíva (italic) <i> Zväčši písmo <big> Zmenši písmo <small> Podčiarknuté (underlined) <u>
Zoznamy a číslovania na stránke Zoznamy vytvoríme dvoma elementmi, z ktorých jeden definuje typ zoznamu a druhý označuje položky v zozname. Text v položke môžu byť slová, vety a iné tagy. Každá položka sa zobrazuje na novom riadku prehliadača. Typy zoznamov rozdeľujeme na dva druhy: zoznam z odrážkami(bulleted) zoznam pomocou číslovania(numbered)
Zoznam s odrážkami Tvoríme ho tagom <ul>. Jednotlivé položky zoznamu zasa tagom <li>. napr. <ul> <li>Položka 1</li> <li>Položka 2</li> <li>Položka 3</li> </ul> Výsledok: Položka 1 Položka 2 Položka 3
Zoznam s číslovaním Tvoríme ho tagom <ol>. Jednotlivé položky zoznamu zasa tagom <li>. napr. <ol> <li>Položka 1</li> <li>Položka 2</li> <li>Položka 3</li> </ol> Výsledok: Položka 1 Položka 2 Položka 3
Ako každé zoznamy môžu mať aj internetové zoznamy v podobe tagov svoje podzoznamy. Vytvárame ich jednoducho vložením ďalšieho zoznamu do hlavného. Dôležité je dobre si premyslieť úpravu.
Príklad podzoznamu: <ol> <li>Položka 1</li> <li>Položka 2 <ul> <li>Položka 2.1</li> <li> Položka 2.2</li> <li> Položka 2.3</li> </ul> </li> <li> Položka 3</li> </ol> Výsledok: Položka 1 Položka 2 Položka 2.1 Položka 2.2 Položka 2.3 Položka 3
Atribúty číselných zoznamov Atribút start nastavuje od akého čísla sa má zoznam začať číslovať. napr. <ol start="10"> Atribút type nám mení štýl číslovania zo základného na rôzne iné. <ol type="A">
Atribút odrážkových zoznamov Odrážkový zoznam má jediný atribút a to type. Dané písmená udávajú typ odrážky. napr. <ul type="A">A,B,C,... <ul type="a">a,b,c,... <ul type="I">I,II,III,IV,...
Obrázok na stránke Do webovej stránky nevkladáme obrázky priamo ale pomocou adresy URL, ktorá ukazuje umiestnenie, kde je grafický súbor uložený. Tento element zobrazí obrázok presne na mieste kde je uvedený v HTML kóde. Má dva povinné atribúty prvý je src (source), čiže umiestnenie obrázku. Druhý atribút je alt (alternative), ktorý vypíše hodnotu ak sa obrázok nedá zobraziť. napr. <img src="7.jpg” alt=“obrazok”>
Vytváranie hypertextových odkazov Hypertextové odkazy sú odkazy na stránky, obrázky alebo dokumenty . Hypertextové odkazy vytvárame elementom <a>. Nikdy nevkladajte jeden odkaz do druhého! Povinným atribútom elementu <a> je href, ktorý má hodnotu URL, čiže adresa dokumentu, ktorý chceme použiť. Musíme ju uzavrieť do úvodzoviek (""). napr. <a href="http://www.ycon.org">YcoN – tvorba stránok</a>
Odkazy ako obrázok Do elementu <a> môžeme uzavrieť ľubovoľný text ale aj obrázok. Keď uzavrieme obrázok do elementu <a> vznikne okolo obrázka modrý rámik. Tieto zmeny sa dejú preto aby návštevník vedel že sa jedná o odkaz. Jednoduchý obrázok pripojíme následovne: <a href="7.jpg" ><img src="7.jpg"></a>
Odkaz v novom okne Hypertextový odkaz môžeme otvoriť aj v novom okne prehliadača. Túto maličkosť dosiahneme atribútom target (cieľ), do ktorého vpíšeme hodnotu _blank = v čistom okne. napr. <a href="www.ycon.org" target="_blank">YcoN – tvorba stránok</a>
Farby Farby na stánku môžeme zadávať dvoma spôsobmi a to textom alebo hexadecimálnym číslom. Snow GhostWhite WhiteSmoke Gainsboro FloralWhite OldLace Linen AntiqueWhite PapayaWhip BlanchedAlmond Bisque PeachPuff NavajoWhite Moccasin Cornsilk Ivory LemonChiffon Seashell Honeydew MintCream Azure AliceBlue lavender LavenderBlush MistyRose White Black DarkSlateGray LightSlateGray Grey LightGray MidnightBlue CornflowerBlue DarkSlateBlue SlateBlue MediumSlateBlue LightSlateBlue NavyBlue DimGrey SlateGrey MediumBlue RoyalBlue Blue DodgerBlue DeepSkyBlue SkyBlue LightSkyBlue SteelBlue
LightSteelBlue LightBlue PowderBlue PaleTurquoise DarkTurquoise MediumTurquoise Turquoise Cyan LightCyan CadetBlue MediumAquamarine Aquamarine DarkGreen DarkOliveGreen DarkSeaGreen SeaGreen MediumSeaGreen LightSeaGreen PaleGreen SpringGreen LawnGreen Green Chartreuse MedSpringGreen GreenYellow LimeGreen YellowGreen ForestGreen OliveDrab DarkKhaki PaleGoldenrod LtGoldenrodYello LightYellow Yellow Gold LightGoldenrod Goldenrod DarkGoldenrod RosyBrown IndianRed SaddleBrown Sienna Peru Burlywood Beige Wheat SandyBrown Tan Chocolate Firebrick Brown DarkSalmon Salmon LightSalmon Orange DarkOrange Coral LightCoral Tomato OrangeRed Red HotPink DeepPink Pink MediumVioletRed VioletRed Magenta Violet Plum LightPink PaleVioletRed Maroon Orchid MediumOrchid DarkOrchid DarkViolet BlueViolet Purple MediumPurple Thistle
Farba pozadia Atribút bgcolor používame vtedy, ak chceme nejakému elementu nastaviť farbu pozadia. Má tvar: bgcolor=“farba” Tento atribút môžeme použiť napríklad v tele stránky: <body bgcolor="farba"> Napr. <body bgcolor="PapayaWhip">
Farba písma Atribút color sa väcšinou požíva pre nastavenie farby písma, ako napríklad v elemente <font>. V tomto prípade by to vyzeralo nasledovne: <font color="red">text cervenou farbou</font>
Tabuľky <table> Tabuľkový element združuje skupinu ostatných elementov, ktoré definujú jednotlivé riadky a v nich samostatné bunky (cells). Tabuľky sa skladajú z riadkov a stĺpcov, ktoré tvoria bunky. Bunky tabuliek môžu obsahovať prakticky akýkoľvek iný element, napr. hyperlinky alebo obrázky.
Tabuľky majú takýto formát: <table> <tr> <td>Bunka 1-1</td><td> Bunka 1-2</td><td> Bunka 1-3</td> </tr> <tr> <td> Bunka 2-1</td><td> Bunka 2-2</td><td> Bunka 2-3</td> </tr> <tr> <td> Bunka 3-1</td><td> Bunka 3-2</td><td> Bunka 3-3</td> </tr> </table>
Definícia riadku - element <tr> - table row, riadok tabuľky Definícia buniek - element <td> - table data, dáta tabuľky. Do tabuliek sa niekedy vkladá aj záhlavie a to elementom <caption>, kde sa zadáva názov tabuľky. Napr. <table> <caption>Prvá tabuľka</caption> <tr> ...
Border – orámovanie tabuľky Napr. <table border ="1"> nastaví orámovanie na 1. Ak chceme tabuľku bez orámovania, nastavíme hodnotu border na 0.
Riadky tabuliek Dva najpoužívanejšie atribúty elementu riadok <tr> sú align a valign. Prvý atribút nastavuje zarovnanie buniek v riadku vodorovnom smere, druhý zasa v horizontálnom smere. Povolené hodnoty atribútu align sú: center(na stred), left (k lavému okraju) a right (k pravému okraju). Atribút valign akceptuje varianty top (k hornému okraju), bottom (k dolnému okraju) a center (na stred).
Bunky tabuliek Element <td> má mimo iných aj atribúty align a valign tak isto ako element <tr>. Atribút align v elementu <td> je vlastne nadbytočný, pretože rovnaký účel plní už atribút align v elemente <tr>. Valign hovorí, ako sa majú dáta v bunke vertikálne zarovnať. Možné hodnoty sú: top (k hornému okraju), bottom (k dolnému okraju) a center (na stred).
Napr.: <table border="1"> <caption>Prieskum dievčat a chlapcov v škole v 1. triedach.</caption> <tr align="center"> <td>Rok prieskumu</td> <td>Chlapci</td> <td>Dievčatá</td> </tr> <tr align="right"> <td>2004</td> <td>100%</td> <td>0%</td> </tr> <tr align="right"> <td>2005</td> <td>85%</td> <td>15%</td> </tr> <tr align="right"> <td>2006</td> <td>90%</td> <td>10%</td> </tr> </table>
Zlučovanie buniek Na zlučovanie buniek nám funguje atribút colspan (column span, presahovanie stĺpca) a rowspan (row span, presahovanie riadku). Do hodnoty atribútu zapisujem číslo ktoré nám určí cez koľko riadkov alevo stĺpcov bude bunka presahovať. Bunky cez ktoré sa bude presahovať sa vymažú.
Rozvrh hodín: <table border="1"> <caption>Rozvrh hodín na pondelok a utorok</caption> <tr align="center"> <td>-</td> <td>1. hod</td> <td>2. hod </td> <td>3. hod </td> <td>4. hod</td> <td>5. hod </td> </tr> <tr align="center"> <td>Po</td> <td rowspan="2">TEV</td> <td colspan="2">UCT</td> <td>MAT</td> <td>NEJ</td> </tr> <tr align="center"> <td>Ut</td> <td colspan="3">MAT</td> <td>IVT</td> </tr> </table>
Farba buniek a riadkov Každý z doposiaľ uvedených elementov má povolený atribút bgcolor, ktorý práve definuje farbu pozadia. Ako hodnotu atribútu bgcolor zadávajte meno farby alebo hexadecimálne číslo.
<table border="1"> <tr align="center" bgcolor="silver"> <td>-</td> <td>1. hod</td> <td>2. hod</td> <td>3. hod</td> <td>4. hod</td> <td>5. hod </td> </tr> <tr align="center"> <td bgcolor="#999999">Po</td> <td rowspan="2">TEV</td> <td colspan="2">UCT</td> <td>MAT</td> <td>NEJ</td> </tr> <tr align="center"> <td bgcolor="#999999">Ut</td> <td colspan="3">MAT</td> <td>IVT</td> </tr> </table>
Prehľad ostatných atribútov tabuliek Width – nastavuje šírku tabuliek. Height – nastavuje výšku tabuliek. Border – určuje šírku okrajov tabuľky. Hodnoty sú celé čísla v pixeloch. Align – zarovnanie tabuľky Cellspacing – nastavuje ako ďaleko od vonkajšieho okraju tabuľky majú začať jednotlivé bunky. Hodnotou je číslo v pixeloch. Cellpadding - nastavuje šírku medzery medzi obsahom bunky a ich okrajom. Hodnotou je číslo v pixeloch.
Koniec... ...teoretickej časti.