Jaroslav Berédi HTML. základy

Transkript

1 HTML základy

2 Čo je to vlastne HTML? HTML (HyperText Markup Language) - značkový jazyk určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači

3 V akom programe môžem vytvoriť stránku? Na vytvorenie webovej stránky vôbec nepotrebujeme zložitý program. Webovú stránku môžeme vytvoriť aj v windowsovom programe Notepad (Poznámkový blok). Môžeme využiť aj niektoré zložitejšie programy, ktoré nám umožňujú nejaké funkcie (napr. Hľadá chyby v kóde, hneď vizuálny vzhľad tej stránky atď.) Niektoré z programov: Dreamweaver Front Page PsPad Notepad ++

4 Ako píšeme v HTML? Na tvorenie (písanie) webových stránok používame tagy (príkazy). Tagy môžu byť: Párové otvorený a uzavretý tag (<b> TEXT </b>) Nepárové (<hr>)

5 Obsah tagu (príkazu) Takmer každý príkaz v HTML je určený bližšie. Na to aby sme tag určili bližšie používame atribúty a ich hodnoty. Po každom atribúte nasleduje znak rovnosti = a úvodzovky, do ktorých sa píše hodnota. Príklad <font color= yellow size= 12 > font je príkaz color a size sú atribúty yellow a 12 sú hodnoty atribútov. Existujú číselné hodnoty a slovné.

6 Základ HTML Základ HTML stránky tvoria tagy: <html> <head> <title> </title> </head> <body> </body> </html>

7 <html> </html> <head> </head> <title> </title> <body> </body> Označuje začiatok a koniec HTML dokumentu Označuje začiatok a koniec záhlavia HTML dokumentu Označuje začiatok a koniec názvu HTML dokumentu Označuje začiatok a koniec tela HTML dokumentu

8 Skúška Otvorte Notepad a vpíšte takto: <html> <head> <title>moja webová stránka</title> <body> Toto je moja webová stránka </body> </html>

9 Stlačte CTRL + S na uloženie dokumentu. Názov dokumentu dajte index.html Typ dokumentu dajte Všetky súbory ( All files ) Dolu pri tlačidle Uložiť (Save) je kódovanie ( Encoding ), tam vyberte UTF-8 Skúste otvoriť ten uložený dokument

10 Prečo index.html? Názov domovej (HOME) stránky dávame vždy index.html, preto že prehliadač nevie ktorú stránku má otvoriť prvú, tak vždy otvorí index.html. Znamená vždy keď chcete svoju stránku odosielať na web tak domovú (začiatočnú) stránku nazvete index.html.

11 Ešte niečo na úvod Pred príkazom <html> sa ešte určuje tzv. doctype, čo je definícia dokumentu. V starších verziách tohto jazyka sa uvádzal dlhý rad o tom, aký je to dokument. V HTML 5 sa používa iba jednoducho <!doctype html>

12 Tágy meta, link, script a style Všetky tieto tágy sa píšu do záhlavia dokumentu, čiže do príkazu <head>. Sú to príkazy, ktoré určujú niektoré pravidlá dokumentu, či odkaz na štýly alebo scripty. <meta> - tento tág sa najčastejšie používa na určenie typu kódovania, čiže aby prehliadač vedel prečítať ten jazyk, v ktorom ste písali. Napr. pre slovenčinu sa používa UTF-8, ktorý podporuje interpunkčné znamienka. <meta charset= utf-8 > - v starších verziách nájdete dlhší tág pre určenie kódovania, ale podľa nových noriem HTML 5 stačí toto.

13 Tágy meta, link, script a style Tiež v <meta> môžete zadať autora, opis, kľúčové slová a mnohé iné. <meta name= author content= Meno a priezvisko > <meta name= keywords content= Kľúčové slová (napr. web, internet, auto) > - vždy sa oddeľujú čiarkou.

14 Tágy meta, link, script a style <link> - tento tág sa používa pre odkaz na iný dokument, ktorý sa viaže na HTML dokument. Napríklad na CSS (kaskádové) štýly. <link href= styles.css rel= stylesheet type= text/css media= screen > <script> - tento tág sa používa na písanie, či odkaz scriptov. <style> - príkaz style sa používa na písanie interného štýlu. <style type= text/css > CSS Príkazy </style>

15 Parametre tágu <BODY> Keď chceme mať na pozadí stránky fotku, použijeme atribút background. Keď píšeme cestu k fotke v hodnote atribútu, vždy po názve tej fotky píšeme typ súboru. Príklad: <body background= pozadie.jpg > Keď chceme aby nám pozadie bola iba nejaká farba, použijeme atribút bgcolor. Príklad <body bgcolor= red > alebo <body bgcolor= #00FFFF Kódy farieb nájdete na internete alebo v niektorom grafickom programe.

16 Parametre tágu <BODY> Pre určenie farby textu v celom dokumente, do <body> pridáme atribút text. Príklad <body text= #FFFFFF > Farbu všetkých odkazov na stránke určíme tak, že pridáme do <body> atribút link. Príklad <body link= #FFFFFF >

17 Parametre tágu <BODY> Farbu navštívených odkazov určíme pomocou atribútu vlink. Príklad <body vlink= #FFFFFF > Pre nastavenie farby aktívnych odkazov, používame atribút alink Príklad <body alink= #FFFFFF >

18 Odseky Odsek sa určuje príkazom <p> (paragraph): <p>text v odseku</p> - text bude napísaný v novom riadku, čiže nemusíme používať príkaz <br>, ktorý určuje nový riadok. Pre text môžeme používať aj tag <pre>, ktorý zanecháva medzery a nové riadky v texte, ako je to napísané v zdrojovom kóde.

19 Tagy na odseky môžeme doplniť atribútmi. <p>tag zanecháva prázdny riadok. <pre> tag zanecháva všetky medzery a nové riadky. Najčastejší atribút je align, ktorý určuje zarovnanie textu. Príklad Doľava <pre align= left > Doprava <pre align= right > Na stred <pre align= center >

20 Nadpisy Jestvuje šesť typov nadpisov. Delia sa podľa veľkosti písma: <h1>najväčší NADPIS</h1> <h2>menší</h2> <h3>menší</h3> <h4>menší</h4> <h5>menší</h5> <h6>najmenší</h6>

21 Typy písma: <b> TUČNÉ PÍSMO </b> <i> KURZÍVA </i> <u> PODČIARKNUTÉ PÍSMO </u> <strike> PREČIARKNUTÉ PÍSMO </strike> <small> MALÉ PÍSMO </small> <big> VEĽKÉ PÍSMO </big> <sub> DOLNÝ INDEX </sub> <sup> HORNÝ INDEX </sup> <tt> P Í S M O S P E V N O U Š Í R K O U </tt>

22 Tág <font> a jeho atribúty Do tágu <font> možno pridať niekoľko atribútov. <font face= Arial > - Typ písma <font color= black > - Farba písma <font size= 5 > - Veľkosť písma Tág <font> je párový tág. Príklad <font face= Verdana color= blue size= 3 > Vitajte! </font>

23 Zoznamy Položky zoznamu určujeme tágom <li> Názov zoznamu <lh> Zoznamy môžu byť: Číslované Nečíslované

24 Číslované zoznamy Začiatok číslovaného zoznamu určuje tág <ol> Položky zoznamu určuje tág <li> Tág <li> má v číslovanom zozname nasledovné atribúty: <li type= A > Zoznam s veľkými písmenami </li> <li type= a > Zoznam s malými písmenami </li> <li type= 1 > Zoznam s arabskými číslami </li> <li type= I > Zoznam s rímskymi číslami </li>

25 Nečíslované zoznamy Začiatok nečíslovaného zoznamu určuje tág <ul> Položky určuje tág <li> Atribúty, ktorými možno doplniť tág <li> sú: <li type= disc >Zoznamy poznačené plným krúžkom </li> <li type= circle >Zoznamy poznačené prázdnym krúžkom </li> <li type= square >Zoznamy poznačené štvorcom </li>

26 Odkazy Odkazy určujeme tágom <a>. V závislosti čo odkazujeme, atribúty tágu <a> sú: <a href= kontakt.html > pre vytvorený html dokument </a> <a href= > pre existujúcu stránku na internete </a> <a href= obrazok.jpg > pre odkaz na obrázok </a> <a href= audio.au > pre odkaz na audio </a> <a href= mailo:meno@domen.com > pre odkaz na mail </a> <a href= video.mpg > pre odkaz na video </a> <a href= stranka.html target= _target > otvorí odkaz v novej karte

27 Jaroslav Berédi Vkladanie horizontálnej čiary Čiaru vkladáme pomocou nepárového tágu <hr> Pomocou atribútu size určujeme veľkosť (hrúbku) čiary Pomocou atribútu width určujeme dĺžku čiary. Môžeme ju určiť v percentách alebo v pixloch. Pomocou atribútu color určujeme farbu čiari. Príklad <hr size= 3 width= 40% color= red >

28 Jaroslav Berédi Vkladanie obrázka Obrázok vložíme pomocou nepárového tágu <img> Atribúty: <img src= obrazok.jpg > - zdroj obrázka (meno a formát obrázka) <img width= xx > - šírka obrázka (v pixloch) <img height= xx > - výška obrázka (v pixloch) <img vspace= xx > - voľné miesto vôkol obrázka hore a dolu <img hspace= xx > - voľné miesto vôkol obrázka vľavo a vpravo <img title= text > - text, ktorý sa objaví keď dáte kurzor na obrázok <img alt= text > - keď server nedokáže načítať obrázok vypíše tento text

29 Jaroslav Berédi Vkladanie obrázka Tag img má aj atribut align, ktorý ma nasledovné hodnoty: left obrázok je umiestnený vľavo, obtekaný textom sprava right obrázok je umiestnený vpravo, obtekaný textom zľava texttop zarovná horný kraj obrázka s najvyšším písmenom v riadku middle umiestni linku na stred obrázka absmiddle zarovná prostriedok riadku na stred obrázka bottom zarovná spodný okraj obrázka s linkou absbottom zarovná spodný okraj obrázka s najspodnejším písmenom v texte

30 Jaroslav Berédi Tabuľky Základné tágy tabuľky: Párový tág <table> </table>, označuje začiatok a koniec tabuľky Párový tág <tr></tr>, označuje začiatok a koniec riadka Párový tág <td></td>, označuje začiatok a koniec stĺpca Príklad: <table> <tr> <td>miesto</td> <td>čas</td> </tr> </table>

31 Jaroslav Berédi Parametre tágu <table> border= x rámik tabuľky bordercolor= #xxxxx farba rámika bgcolor= #xxxxx farba pozadia celej tabuľky cellspacing= x - medzera medzi bunkami cellpadding= x medzera medzi obsahom bunky a rámikom width= xx% šírka tabuľky v % Align= left/center/right zarovnanie tabuľky

32 Jaroslav Berédi Spoločné parametre tágov <tr> a <td> align= left/center/right zarovnanie obsahu bunky v vodorovnom smere vľavo/vpravo/na stred valign= top/middle/bottom - zarovnanie obsahu bunky v zvislom smere hore/stred/dolu

33 Jaroslav Berédi Ďalšie parametre tágu <td> rowspan= x počet zlúčených buniek v riadku colspan= x - počet zlúčených buniek v stĺpci width= x šírka bunky height= x výška bunky bgcolor= #xxxxx farba pozadia bunky

34 Jaroslav Berédi Komentár Do Vášho html kódu môžete napísať aj nejaký komentár, ktorý sa nezjaví v prehliadači, ale zostane iba v zdrojovom kóde. Používa sa to najčastejšie pre lepší prehľad zdrojového kódu. Tág -

35 Jaroslav Berédi Koniec