HTML vznikol ako potreba zápisu odborných textov, navzájom pomedzi sebou poprepájaných a odkazujúcich sa.

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "HTML vznikol ako potreba zápisu odborných textov, navzájom pomedzi sebou poprepájaných a odkazujúcich sa."

Τερψιχόρη Ζέρβας
7 χρόνια πριν
Προβολές:

1 HTML Čo je HTML HTML jazyk pre popis webových stránok, skratka je odvodená z Hyper Text Markup Language. Je to teda značkovací jazyk, obsahuje teda zdrojový text, ako aj inštrukcie na jeho spracovanie. Html dokument = webová stránka. Prípony sú zvyčajne.html a.htm. HTML vznikol ako potreba zápisu odborných textov, navzájom pomedzi sebou poprepájaných a odkazujúcich sa. Slovník pojmov Tag Značka kľúčové slovo v špicatých zátvorkách (napr. <html>), začiatočný tag môže obsahovať atribúty, koncový tag má po < lomku (napr. </html>). HTML Element (v ďalšom texte len element) Je všetko od začiatočného tagu po koncový tag. Medzi značkami je teda obsah elementu. Príklad: <p>toto je text v odstavci</p> Element má zvyčajne oba tagy, ale sú aj elementy, ktoré nie sú párové a teda nepotrebujú koncový tag. Toto ale neplatí v XHTML (o ňom však teraz nie je reč). HTML má stromovú hierarchiu, teda existuje v ňom práve jeden koreňový element (<html>), jednotlivé elementy musia byť vnorené v nejakom (minimálne koreňovom) elemente a kríženie elementov nie je prípustné. Príklad neprípustného kríženia: <p>toto je obyčajný text <b>a toto bude tučným textom</p></b> HTML obsahuje aj tzv. prázdne elementy, ktoré nemôžu mať žiaden obsah (text alebo iný element) napríklad <br>, <img>, <link>. Elementy delíme na inline a blokové (block) po inline elemente sa ďalší obsah zobrazí na tom istom riadku, blokový element dáva za svojím obsahom enter, teda ďalší obsah bude na novom riadku. Platí zásada, že v inline elementoch nesmú byť blokové. Atribút Pridaná informácia elementu. Skladá sa s názvu atribútu a jeho hodnoty. Hodnota by mala byť v úvodzovkách alebo apostrofoch (ak neobsahuje divné znaky iné ako ASCII písmená a čísla, tak to prehliadače i validátor zvládnu), príklad použitia atribútov rows a cols počet riadkov a stĺpcov v textaree: <textarea rows="8" cols="20">toto je text v textaree</textarea> Ak má tag viac atribútov, môžu sa uviesť v ľubovoľnom poradí. Základná množina atribútov, ktoré môže obsahovať každý element, sú: - id veľmi dôležité hlavne pri použití scriptu a DOM, - class a style definovanie vzhľadu elementu pomocou css štýlov,

2 - title text do bublinky nad elementom. Znaková sada (kódovanie, kódová stránka) Html dokument je textový súbor a je samozrejme napísaný v nejakej znakovej sade. Pre rôzne skupiny jazykov sú definované rôzne sady a znaky, ktoré existujú v jednej, nemusia byť v inej. Znaková sada sa definuje v elemente <meta> ako jedna z hodnôt atribútu content. Pre slovenské stránky odporúčame použiť Windows-1250, prípadne všeobecnejšie UFT-8. Pozor, nestačí len do dokumentu zapísať <meta> element, treba aj celý dokument v tomto kódovaní uložiť. Príklady: <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> Viac o znakových sadách napríklad na: Symboly a ich zápis - entity Keď treba zapísať znaky vyhradené pre HTML (povedzme <, >, /, ) alebo znaky, ktoré sa nenachádzajú v znakovej sade (matematické symboly, grécke písmená, rôzne šípky, technické značky a pod.), dá sa na to použiť entita. Príklady niektorých entít: Σ Σ < < pevná medzera " " Editovanie html dokumentu - používame buď WYSIWYG editor alebo skôr obyčajný textový editor (plugin do Eclipse, PSPad...), - pri HTML tagoch nezáleží na veľkosti písma, ale odporúčanie je používať malé písmená (v súčasnosti vyžadované v XHTML a HTML5), - HTML dokument má stromovú štruktúru, pre prehľadnosť ju treba zachovávať vhodným odsadzovaním, buď tabulátormi, alebo lepšie dvoma medzerami. - hodnoty atribútov treba písať v úvodzovkách alebo apostrofoch, je jedno, v čom to bude, ale pre prehľadnosť je lepšie rozhodnúť sa pre jeden formát v celom dokumente. - treba sa rozhodnúť pre konkrétny DTD, v súčasnosti je dobré používať strict, keďže sa bavíme o HTML, tak budeme používať HTML 4.01 (prípadne XHTML 1.0). Podľa toho budeme aj používať povolené html elementy a ukončovať ich tagmi. Viac o DTD nižšie. HTML DOCTYPE (DTD document type definition) Popisuje, aký typ html je v dokumente. Je to informácia pre prehliadač, aby vedel, ako ho má parsovať (analyzovať obsah) a zobraziť. Príklady striktných doctype, ktoré by sme pre nové stránky mali používať (treba zachovať malé a veľké písmená; verzia html, url, kde sa špecifikácia nachádza): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd">

3 <!DOCTYPE html> Posledný doctype je oficiálny doctype pre HTML5. Samozrejme existujú aj iné ako striktné doctype: - prechodné (transitional), v nich sú povolené deprecated (vývojom odmietnuté) elementy a nie sú povolené rámové elementy frameset, frame a noframe, - rámové (frameset), navyše povoľujú rámové elementy. V prípade XHTML navyše treba zabezpečiť, aby všetky elementy boli validné xml elementy (nezabudnúť ich ukončovať). Validácia HTML dokumentu Validácia je overenie, či výsledný HTML dokument naozaj zodpovedá štandardu, či sú použité tagy obsiahnuté v použitom DTD, či elementy majú vyplnené povinné atribúty a podobne. Validátorov je viac, azda najvyššou autoritou je validátor priamo od W3C: Módy zobrazovania V nových prehliadačoch (IE 8+, FF, Chrome...) sú 3 základné módy štandardný (ide podľa W3C štandardov), takmer štandardný (ide podľa W3C, ale má výnimky) a quirks (snaha o spätnú kompatibilitu pre stránky dizajnované pre staršie prehliadače). Tieto módy zobrazovania sa použijú na základe (ne)uvedeného doctype, avšak konkrétne použitie je veľmi závislé od prehliadača a jeho verzie.

4 Základné skupiny elementov Nasledujúca linka je zoznam všetkých html elementov prípustných v HTML 4. Tieto elementy si preberieme po logických skupinách, aj to nie všetky, len tie najdôležitejšie. Čo budeme používať Pre naše potreby webových aplikácií na základe AJAX-u budeme primárne využívať len menšiu časť z uvedených elementov. Okrem základu HTML dokumentu ide o elementy formulárové a tabuľkové, ďalej iframe, button, a, div, span a img. Štruktúra (doctype, html, head, body) Základ HTML dokumentu pozostáva z doctype a elementov html, head a body. Na nasledujúcom príklade je vidieť, že v HTML existujú párové (obsahujúce začiatočný i koncový tag, napr html, head, body...) a nepárové elementy (obsahujú len začiatočný tag, nie sú ale ukončené meta, link). Dokonca niektoré tagy sú voliteľné, napríklad html dokument bude validný aj bez elementov html, body a head. Ak element obsahuje aj nejaké linky na štýly, elementy style alebo script, ich miesto je v elemente head. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>titulok</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="theme.css"> <style type="text/css">... </style> <script type="text/javascript">... </script> </head> <body>... </body> </html> V príklade je vidieť stromovú hierarchiu html dokumentov a z toho vyplývajúce použitie odsadenia dvoma medzerami. Hodnoty atribútov sú uvedené v úvodzovkách, jednotne pre celý dokument. Popis elementov: - html koreňový element HTML dokumentu. Zaujímavý je azda atribút lang, ktorý špecifikuje jazyk, v ktorom je napísaný obsah dokumentu. - head hlavičkový dokument. Elementy v ňom pripájajú iné súbory (zväčša štýlové a scriptové), štýl a script sa dá uviesť aj priamo v rovnomenných elementoch.

5 - meta popisuje dokument. Môže ich byť viacero, obsahujú informácie ako popis obsahu, kľúčové slová, autor, kódovanie, - body obsahuje vykresľovaný obsah dokumentu. Základné elementy (h1 h6, p, a, img, br, komentár) Nadpisy sa definujú elementami h1 až h6 (h7 a viac už neexistuje). Odstavec textu elementom p. Zalomenie riadku prázdnym elementom br. Odkaz na iný dokument (alebo konkrétnu časť dokumentu) elementom a, zvyčajne treba vyplniť atribút href (kam sa odkazuje), prípadne name (ak existuje iný element a, ktorý na tento ukazuje). Príklady: <a href=" na stránky konzorcia W3C</a> <a href="#podtitulok1-3">link na podtitulok 1-3</a> <p>...nejaký text<br> pokračovanie textu na ďalšom riadku...</p> <h2><a name="podtitulok1-3">1-3</a> Podtitulok</h2> Obrázok img (povinné atribúty src a alt, je to prázdny a nepárový element): <img src="obrazok.gif" alt="alternatívny text obrázku"> Komentár nie je HTML element, vyzerá rovnako ako v xml: <! - toto je komentár --> Tabuľky (table, caption, colgroup, col, thead, tbody, tr, th, td) Element table definuje tabuľku, caption je titulok tabuľky, colgroup a col elementy definujú vlastnosti stĺpcov (zarovnanie, šírku), thead a tfoot hlavičkový a pätičkový riadok tabuľky, až za nimi nasleduje tbody (vlastné dáta tabuľky). Všetky tri elementy obsahujú riadky tr a tie v thead obsahujú bunky th. Riadky v tfoot a tbody obsahujú ako bunky elementy td. <table border="1"> <col width="200px;"> <col width="100px;"> <caption>zárobok</caption> <thead> <th>mesiac</th> <th>zarobené</th> </thead> <tfoot> <td>spolu</td> <td>200</td> </tfoot> <tbody> <td>január</td> <td>80</td>

6 <td>február</td> <td>120</td> </tbody> </table> Obrázková mapa (map, area) V spojení s img vytvárajú obrázkovú mapu. Zoznamy (ul, ol, li, dl, dt, dd) Kombinácia ul a li vytvorí neusporiadaný zoznam (napríklad cez odrážky). Kombinácia ol a li zase usporiadaný zoznam (očíslovaný). Formát odrážok a čísel sa dá upraviť (atribút type na ul a ol). Neusporiadaný zoznam <ul type="square"> <li>jablko</li> <li>banán</li> <li>citrón</li> </ul> Usporiadaný zoznam <ol type="a"> <li>jablko</li> <li>banán</li> <li>citrón</li> </ol> Kombinácia dl, dt a dd vytvorí definičný zoznam, teda dvojice kľúč hodnota. Rámy (frameset, frame, noframes, iframe) Budeme používať len iframe (len tie nám DTD dovolí použiť). Slúži na vytvorenie okna prehliadača priamo v stránke. To toho okna sa teda cez tento element dá naloadovať úplne iný html dokument. Tiež sa skryté iframe používa pre komunikáciu so servrom na pozadí zobrazenej stránky (aby nepreblikávala, resp. aby sa neprekresľovala celá). Formuláre (form, input, textarea, select, option) Slúžia na zozbieranie a odovzdanie údajov na server. Element form obsahuje input elementy, ktorých vzhľad a funkčnosť sa definuje atribútom type. Takto získame: - buttony: type button obyčajný button, reset nastaví všetky elementy formy na pôvodnú hodnotu, submit potvrdzujúci button, ktorý odošle údaje na server, konkrétne s nimi zavolá url definované v atribúte action elementu form, - type checkbox zaškrtávacie pole, type radio - radiobutton, - textové pole: text obyčajný textfield, password textfield, v ktorom sa miesto znakov objavia len krúžky, - file na uploadovanie súboru na server (zobrazí sa aj tlačidlo na výber tohto súboru), - hidden skrytý input, zvyčajne použitý pre účely autorizácie requestu, - image definuje obrázok ako submit button. Okrem toho ešte existujú elementy:

7 - textarea (ako input text, ale viacriadkový, povoľuje zalomenie riadkov enterom) - select (s detskými elementmi option). Tento vizuálne vyzerá ako list box - viacriadkový, alebo ako combobox, ak vidno len jeden riadok. Pri formulároch je dôležité, aby každý element vo form elemente mal vyplnený atribút name, na základe ktorého sa vytvárajú dvojice kľúč hodnota, zasielané na server. Odpoveď servra za dá poslať aj do iného okna, vyplnením atribútu target na elemente form. <form action="zaeviduj_udaje.php" method="post" target="resultframe"> Používateľ: <input type="text" name="user" /> <input type="submit" value="submit" /> <input type="reset" value="vymaž políčka" /> </form> Viac o formulároch v samostatnej prednáške. Neutrálne elementy (div, span) Všetky elementy majú v prehliadačoch nejaký preddefinovaný vzhľad a formátovanie, takže v priebehu vývoja HTML vznikla potreba elementov nijako neformátovaných. Vznikli dva div a span. Rozdiel medzi nimi je v tom, že div je blokový element, teda elementy uvedené za ním budú v novom riadku. Span je inline element, takže text a elementy uvedené za ním pokračujú v tom istom riadku. Button Element button sa podobá na formulárový element input type="submit", ale s formulármi nemá nič spoločné a dá sa použiť hlavne mimo neho. Dôležitý rozdiel oproti inputu je ten, že do button-u sa dá vložiť obsah (obrázok, text...), ale do inputu nie. Používa sa v spojení so scriptom na zvýšenie interaktivity webovej stránky. Formátovanie (b, big, em, i, small, strong, sub, sup, ins, del) Párové elementy. Formátovanie bežných i odborných textov. Element b zobrazí text tučne, i kurzívou, em a strong je zvýraznenie (zatiaľ kurzívou, tučným písmom), big a small zväčšia (zmenšia) text oproti okolitému, sup je horný a sub dolný index. Elementy ins a del sa zvyčajne používajú spolu a zdôrazňujú nejakú zmenu, aktualizáciu stránky (del pôvodný, neaktuálny text, ins nový text). Počítačový výstup (code, kbd, samp, tt, var, pre) Párové elementy. Dôležité azda v odborných textoch, avšak nevýznamné pre webové aplikácie. Zvýrazňujú časti textu, aby vyzeral ako zobrazenie programového fragmentu. Skratky, citáty, definície (abbr, acronym, address, bdo, blockquote, q, cite, dfn) Párové elementy. Dôležité azda v odborných textoch, avšak nevýznamné pre webové aplikácie. Zvýrazňujú časti textu, napr. cite, q, blockquote je citácia, abbr a acronym skratky... Štýlové elementy a atribúty - sú deprecated (center, font, basefont, s, strike, u) Nepoužívať deprecated. Párové elementy. Nahrádzané použitím atribútu style. Takisto sú deprecated atribúty align, bgcolor a color.

Σχετικά έγγραφα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο