Projekt
Príma (I.O)
Sekunda (II.O)
Tercia (III.O)
Kvarta (IV.O)
Kvinta (V.O)
I.ABP
II.ABP
III.ABP
HTML a CSS
HTML je skratka pre Hyper Text Markup Language (= Hypertextový značkový jazyk). Ide o značkový jazyk určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači (Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Apple Safari, ...). Keď si zobrazíte zdrojový kód tejto stránky, budete vidieť text (zdrojový kód HTML súboru), ktorý prehliadač spracuje a podá pre človeka (lepšie) čitateľným spôsobom.
Dokument v jazyku HTML sa zapisuje do súboru s príponou html a môže obsahovať text, obrázky, zvuk a video. Súbor, ktorý sa má zobraziť ako prvý, treba nazvať index.html. Názov súboru nesmie obsahovať diakritiku, zakázané (napr. medzera) a špeciálne (napr. zavináč) znaky.
Obsah HTML súboru tvoria značky (tagy), ktoré definujú štruktúru dokumentu (nie vzhľad). HTML značky budeme zapisovať malými písmenami a podľa tohto modelu:
Názvy HTML značiek sú určené a my si môžeme vybrať podľa potreby. Zatiaľ si vystačíme s týmito základnými značkami:
- <!-- --> (komentár),
- !doctype (v jednom dokumente len jeden krát),
- html (v jednom dokumente len jeden krát),
- head (v jednom dokumente len jeden krát),
- title (v jednom dokumente len jeden krát),
- body (v jednom dokumente len jeden krát),
- p (paragraph = odsek),
- br (Line break = zlom riadku),
- hr (Horizontal rule = vodorovná čiara),
- strong (zvýraznenie dôležitého textu tučným písmom),
- b (zvýraznenie textu tučným písmom),
- em (Emphasized text = zvýraznenie dôležitého textu kurzívou),
- i (Italics = zvýraznenie textu kurzívou),
- s (Strike = prečiarknutie textu),
- u (Underline = podčiarknutie textu),
- ol (Ordered list = číslovaný zoznam),
- ul (Unordered list = nečíslovaný zoznam).
- li (List = položka zoznamu ol alebo ul),
- a (anchor = odkaz, hyperlink, záložka),
- img (Image = obrázok),
HTML súbor musí obsahovať minimálne tieto značky, a to len raz:
Všetko, čo chceme zobraziť v prehliadači, píšeme medzi značky <body> a </body>:
Niektoré zo značiek sú párové (a) a niektoré nepárové (img). Každá HTML značka má určité atribúty resp. vlastnosti (červenou: src = source) a každý atribút resp. vlastnosť má určitú hodnotu (fialovou: obrazok.jpg):
Otázky: Aký je rozdiel medzi párovou a nepárovou HTML značkou? Aké sú pravidlá pri zapisovaní atribútov a ich hodnoty?
Odpovede: Zobraziť / Skryť Párová značka je vždy v páre, čiže sa skladá z dvoch častí. Nepárová značka sa skladá len z jednej časti. Pri zapisovaní atribútov a ich hodnoty platí, že atribút a hodnota sú oddelené znamienkom rovná sa (=) a hodnota je uvádzaná v úvodzovkách.
Kód HTML (čiže HTML značky) budeme písať v programe NotePad++, pretože výborne zvýrazní, odlíši a kontroluje celý zápis:
Úloha: Skúste v programe Notepad++ napísať vlastný HTML súbor, v ktorom dáte jasnú štruktúru nejakému textu z internetu. Použite aj obrázok.
Videonávod ukazuje, ako nezabudneme uzatvoriť zátvorky a párové značky v HTML (červená = ľavé tlačidlo myši; modrá = pravé tlačidlo myši):
CSS je skratka pre Cascading Style Sheets (= Kaskádové štýly). Ide o jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov (HTML súborov). (Zdroj: wikipedia.sk) My budeme CSS zapisovať priamo do HTML značiek za atríbút style. Teda keď spomenieme CSS, vždy budeme hovoriť o hodnote atribútu style. Hodnota (číže CSS zápis) sa skladá z atribútu a hodnoty, pričom môžeme definovať viacero atribútov naraz. Atribút a hodnota sú oddelené dvojbodkou (:) a jednotlivé atribúty sú oddelené bodkočiarkou (;) takto:
Názvy CSS atribútov sú určené a my budeme používať tieto:
- font (písmo - hodnoty sú rez, veľkosť a rodina písma: bold italic 15px Arial),
- color (farba - hodnota je názov farby),
- text-align (zarovnanie textu - hodnota je jedna z left, right, center, justify),
- background (pozadie - hodnota je názov farby),
- border (ohraničenie - hodnoty sú hrúbka, vzhľad a farba: 1px solid black),
- margin (vonkajší okraj - hodnota je veľkosť jedného alebo všetkých štyroch okrajov v px, teda napr. 20px),
- padding (vnútorný okraj - hodnota je veľkosť jedného alebo všetkých štyroch okrajov v px, teda napr. 20px),
Názvy farieb, ktoré budeme používať: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Úloha: Textu z predchádzajúcej úlohy skúste vhodne upraviť vzhľad pomocou CSS.
Kvíz: Myslíte si, že sa v tejto téme vyznáte? Pomôže vám to overiť kvíz o HTML a CSS.
Dalo by sa niečo vylepšiť? Mohlo by sa niečo povedať jednoduchšie / zrozumiteľnejšie? Niečo som zabudol? Prečítajte si pravidlá komentovania a doplňte ma v komentároch: