Embed Size (px)
DESCRIPTION
ZÁKLADY TVORBY WEBOVÝCH STRÁNOK Základy HTML. Úvod. - PowerPoint PPT Presentation
Citation preview
ZÁKLADY TVORBY WEBOVÝCH STRÁNOK
Základy HTMLZá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.
Ú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>
ZOBRAZÍ SA:
Ahoj svet!
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:
<p></p>
Ahoj, svet
Prvky Prvky Popis Popis Značka Značka Použitie Použitie h1, h2, h1, h2, h3, h4, h3, h4, h5, h6 h5, h6
Nadpisy úrovne 1 Nadpisy úrovne 1 (najdôležitejší) až 6 (najdôležitejší) až 6 (najmenej dôležitý) (najmenej dôležitý)
<h1></h1> <h1></h1> <h2></h2><h2></h2> atď. atď.
<h1>Internet a tvorba www stránok</h1> <h1>Internet a tvorba www stránok</h1> <h2>Lekcia 2: Základy HTML a CSS</h2> <h2>Lekcia 2: Základy HTML a CSS</h2>
p p Odstavec textu.Odstavec textu. <p></p><p></p> <p><p>HTML (Hypertext Markup Language - HTML (Hypertext Markup Language - Hypertextový značkovací jazyk) je značkovací Hypertextový značkovací jazyk) je značkovací jazyk pomocou ktorého sa označuje a vytvára jazyk pomocou ktorého sa označuje a vytvára štruktúra dokumentu - webovej stránky. štruktúra dokumentu - webovej stránky. </p></p>
brbr Odsadenie na nový Odsadenie na nový riadok.riadok.
<br /><br /> <p>Ján Novák<br /> <p>Ján Novák<br /> Horná 45<br />Horná 45<br />Košice</p>Košice</p>
ememstrongstrong
Dôraz.Dôraz.Silný dôraz.Silný dôraz.
<em></em><em></em><strong></strong><strong></strong>
<p>A nezabudni <em>vrátiť knihy</em>.</p><p>A nezabudni <em>vrátiť knihy</em>.</p><p>Základnú štruktúru dokumentu vytvárame <p>Základnú štruktúru dokumentu vytvárame pomocou <strong>značiek</strong> (angl. tag) pomocou <strong>značiek</strong> (angl. tag) jazyka HTML.</p>jazyka HTML.</p>
ul, ol, liul, ol, li Nečíslovaný zoznam - Nečíslovaný zoznam - ul, ul, Číslovaný zoznam - Číslovaný zoznam - ol, ol, Položka zoznamu - li.Položka zoznamu - li.
<ul></ul> <ul></ul> <ol></ol><ol></ol><li></li><li></li>
<ul> <ul> <li>mlieko</li> <li>mlieko</li> <li>chlieb</li> <li>chlieb</li> <li>maslo</li> <li>maslo</li> </ul> </ul>
<ol> <ol> <li>Kanada</li> <li>Kanada</li> <li>Švédsko</li> <li>Švédsko</li> <li>USA</li> <li>USA</li> <li>Slovensko</li> <li>Slovensko</li> </ol></ol>
A nezabudni vrátiť knihy.Základnú štruktúru dokumentu vytvárame pomocou značiek (angl. tag) jazyka HTML.
•mlieko
•chlieb
•maslo
1. Kanada
2. Švédsko
3. USA
4. Slovensko
Lekcia 2: Základy HTML a CSS
Internet a tvorba www stránok
Prvky Prvky Popis Popis Značka Značka Použitie Použitie
aa Hypertextový odkaz.Hypertextový odkaz. <a href=""></a> <a href=""></a> <a href="http://www.zoznam.sk/"> <a href="http://www.zoznam.sk/"> Zoznam.sk</a> Zoznam.sk</a>
imgimg Obrázok.Obrázok. <img src="" <img src="" width="" width="" height="" height="" alt="" />alt="" />
<img <img src="src="http://nieco.sk/http://nieco.sk/dovolenka.jpg" dovolenka.jpg" width="150" height="100" width="150" height="100" alt="Dovolenka" />alt="Dovolenka" /> (kde v uvodzovkách môže byť absolutný (kde v uvodzovkách môže byť absolutný odkaz – ako je to v príklade alebo relativný v odkaz – ako je to v príklade alebo relativný v tvare tvare ""upload/dovolenka.jpgupload/dovolenka.jpg"" ) )(witdth – širka v px; height – výška v px; alt – (witdth – širka v px; height – výška v px; alt – alternatívny názov – zobrazí sa po prechode alternatívny názov – zobrazí sa po prechode myši na odkaz)myši na odkaz)
table, table, tr, tdtr, td
Tabuľka - table, Tabuľka - table, Riadok tabuľky - tr, Riadok tabuľky - tr, Bunka tabuľky - td.Bunka tabuľky - td.
<table></table> <table></table> <tr></tr> <tr></tr> <td></td> <td></td>
<table> <table> <tr> <tr> <td>Riadok 1, bunka 1</td> <td>Riadok 1, bunka 1</td> <td>Riadok 1, bunka 2</td> <td>Riadok 1, bunka 2</td> </tr> </tr> <tr> <tr> <td>Riadok 2, bunka 1</td> <td>Riadok 2, bunka 1</td> <td>Riadok 2, bunka 2</td> <td>Riadok 2, bunka 2</td> </tr> </tr> </table> </table>
divdiv
spanspan
Významovo neutrálny Významovo neutrálny blokový prvok.blokový prvok.Významovo neutrálny Významovo neutrálny riadkový prvok.riadkový prvok.
<div></div><div></div>
<span></span><span></span>
V kombinácii s CSS sa používa na vytvorenie V kombinácii s CSS sa používa na vytvorenie layoutu stránok.layoutu stránok.V kombinácii s CSS sa môže použiť napr. na V kombinácii s CSS sa môže použiť napr. na dosiahnutie typografických efektov v texte.dosiahnutie typografických efektov v texte.
Riadok 1, bunka 1 Riadok 1, bunka 2Riadok 2, bunka 1 Riadok 2, bunka 2
Zoznam.sk
Ú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.
Nabudúce o CSS, čiže kaskádových štýloch.
