ZISTITE ČO JE TO HTML5 A CSS3 !

 Prečo je dobré vedieť čo je to HTML? Jednoducho preto že je základom každej webovej stránky. Je to kostra textu na webe. Keď napríklad chceme mať na stránke text: „toto je môj prvý text na webe“, treba napísať takto: <p>toto je môj prvý text na webe</p>. Teda text sme vložili medzi dva elementy. Element <p> je párový to znamená že na konci musí byť napísaný s lomítkom tak ako je uvedené hore. Nadpis sa vytvorí elementom h1. Ak chceme nadpis menší tak h2 až po najmenší h6. Aby nám toto fungovalo tak toto treba napísať do textového editoru ako napríklad poznámkový blok vo windowse, alebo do editoru notepad. Ešte treba doplniť štruktúru dokumentu. Teda celé to musí vyzerať nasledovne: obr. 001.

obr. 001

Dôležité teraz je uložiť dokument s príponou html. Postup je teda nasledovný:

  1. Klikneme na súbor → uložiť ako.
  2. V zozname uložiť vo formáte vyberieme všetky súbory.
  3. Názov súboru musí mať príponu html napríklad subor.html.
  4. Skontrolujeme položku kódovanie aby bolo nastavené na utf-8.

  5. Uložiť.

 

Výsledok je viditeľný na obrázku 001. b. Ďalšie elementy ako je element <p> sú elementy zmeny vzhľadu písma. Sú nasledovné:

  • <strong> == tučné  písmo
  • <em> == šikmé písmo
  • <ins> == podčiarknutý text
  • <del> == prečiarknutý text

Ako v prvom príklade si vytvoríme kostru dokumentu a vyskúšame si všetky nové elementy na stránke.

obr. 001. b.

Vidíme teda že nám to pekne funguje. Takže html je dobré ta tvorbu textu na webe. Poznáme základné elementy teda vieme vytvoriť text, tučné písmo a podčiarknutý alebo prečiarknutý text. Ako sa teda spraví aby bol text napríklad červený? No jednoducho použijeme kaskádové štýly teda CSS. Najprv ale treba doplniť našu kostru dokumentu o nasledovný riadok:

<link rel=“stylesheet“ href=“styl.css“ type=“text/css“  />

Potom v našom adresári v ktorom je uložený dokument html teda napríklad subor.html vytvoríme subor s názvom styl.css. Samozrejme názov je ľubovoľní len musí mať príponu .css. Rovnaký názov musí byť aj v časti href (v definícii štýlu, teda v našom novom riadku v štruktúre dokumentu). Poďme teraz zmeniť farbu nášho textu na červeno. V CSS je základom selektor. Názvom selektoru je niektorý element z jazyka HTML. Tento štýl naformátuje všetko v rámci uvedeného elementu. Napríklad štýl p { color: red; } spôsobí zmenu farby textu v elementoch <p> a </p> na červenú.

Takže týmto spôsobom sme text vykreslili na červeno. Ak chceme inú farbu tak jednoducho napíšeme jej anglický názov. Napríklad blue, green… . Ak potrebujeme inú farbu tak ju môžeme napísať v hexadecimálnom tvare, napríklad: #9123AF. Vysvetlime si ďalej ako zarovnáme text, a ako vytvoríme rámik okolo napríklad textu. Pre zarovnanie  textu použijeme atribút: text-align: , a pre rámik okolo odstavca: border-style: solid; . Zarovnanie môže byť:

Left (vľavo)

Right (vpravo)

Center (na stred)

Justify (do bloku)

Naprogramujme si teraz stránku na ktorej bude nadpis veľkosti h3 s farbou v hexadecimálnej hodnote #B533D9, a s rámikom okolo.

Možno Vás napadlo ako pridať na stránku obrázok? Je to jednoduché. Stačí napísať nasledovné:

<img src=“NazovObrazku.FormatObazku“>

V našom prípade je to obrázok.jpg, ktorý vložíme do adresára so súbormi subor.html a styl.css. Poďme teraz dokončiť našu prvú webovú stránku. Vieme vytvoriť text, nadpis, rámik a vložiť obrázok. Spojme teda naše vedomosti a ideme na to!

Náš HTML kód a CSS štýl môžu vyzerať nasledovne: 

 A tu je náš výsledok!