100 likes | 196 Views
ZÁKLADY TVORBY WEBOVÝCH STRÁNOK Základy HTML. Úvod.
E N D
ZÁKLADY TVORBY WEBOVÝCH STRÁNOK Základy HTML
Úvod • Webová stránka je dokument (súbor) umiestnený na webovom serveri. Užívateľ prostredníctvom webového klienta (prehliadača) požiada o zaslanie tohto dokumentu (tým, že zadá v prehliadači jeho adresu). Webový server pošle dokument prehliadaču, ktorý ho zobrazí užívateľovi. • Obsah dokumentu (webovej stránky) by mal byť štrukturovaný pomocou HTML (Hypertext Markup Language - Hypertextový značkovací jazyk). Štrukturovať obsah webovej stránky znamená vyznačiť pomocou príslušných značiek jazyka HTML to, či časť obsahu je nadpisom, odstavcom textu, hypertextovým odkazom a pod.
Úvod • To ako sa má takto štrukturovaný obsah v prehliadači sformátovať (napr. či bude nadpis zelený alebo modrý, akým veľkým písmom a pod.), definuje autor dokumentu pomocou CSS (Cascading Style Sheets - Kaskádové štýly). • Vytvoriť webové stránky teda zjednodušene povedané znamená vytvoriť obsah dokumentu, vyznačiť jeho štruktúru pomocou prvkov HTML, upraviť formátovanie týchto prvkov pomocou CSS a umiestniť webové stránky na webový server.
ZOBRAZÍ SA: Ahoj svet! Úvod do HTML • HTML (Hypertext Markup Language - Hypertextový značkovací jazyk) je značkovací jazyk pomocou ktorého sa označuje a vytvára štruktúra dokumentu - webovej stránky. • Kód najjednoduchšieho, dobre štrukturovaného a validného HTML dokumentu (webovej stránky) môže vyzerať takto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <title>Ahoj svet!</title> </head> <body> <p>Ahoj svet!</p> </body> </html>
Značky a prvky HTML • Základnú štruktúru dokumentu vytvárame pomocou značiek (angl. tag) jazyka HTML, ktoré obklopujú obsah dokumentu a určujú jeho význam z hľadiska štruktúry dokumentu. • Napr. uzatvorením textu Ahoj, svet! medzi značky <p> a </p> určíme, že sa jedná o odstavec textu. (Názov značky p je z angl. paragraph - odstavec.) • Otváracia značka <p>, uzatváracia značka </p> a obsah medzi nimi spolu tvoria prvok HTML (angl. element). Niektoré prvky nemajú povolený žiaden obsah (tzv. prázdne prvky), napr. prvok pre prechod na nový riadok <br />. • Nasledujúca tabuľka ukazuje základné prvky jazyka HTML: Ahoj, svet <p> </p>
Internet a tvorba www stránok Lekcia 2: Základy HTML a CSS A nezabudni vrátiť knihy. Základnú štruktúru dokumentu vytvárame pomocou značiek (angl. tag) jazyka HTML. • mlieko • chlieb • maslo • Kanada • Švédsko • USA • Slovensko
Zoznam.sk Riadok 1, bunka 1 Riadok 1, bunka 2 Riadok 2, bunka 1 Riadok 2, bunka 2
Úlohy • Čo je HTML značka? • Čo je prvok HTML? • Aké základné prvky HTML poznáte? • Aké ďalšie prvky HTML poznáte? • Aký je rozdiel medzi prvkom a značkou HTML? • Aký je rozdiel medzi párovými a nepárovými značkami? • Vytvorte HTML dokument a použite v ňom všetky základné prvky HTML, o ktorých sme sa učili. Obsah dokumentu si vymyslite tak, aby tématicky súvisel.