!DOCTYPE - označenie verzie HTML, ako prvý príkaz súboru pred HTML, napr. <!doctype html public "-//w3c//dtd html 4.01 transitional//en">

Size: px

Start display at page:

Download "!DOCTYPE - označenie verzie HTML, ako prvý príkaz súboru pred HTML, napr. <!doctype html public "-//w3c//dtd html 4.01 transitional//en">"

Mercy Bates
6 years ago
Views:

1 1.1 Stručne o HTML Charakteristiky Prenositeľnosť je jednou zo základných myšlienok architektúry webu. Má zabezpečovať správne zobrazenie stránky v prípade rôzneho grafického rozlíšenia, rôznej rýchlosti pripojenia, rôznej veľkosti displeja atď. Preto sa neodporúča používanie atribútov a elementov na riadenie grafického vzhľadu stránky, malo by to byť špecifikované všetko iba pomocou štýlov. Podpora viacerých jazykov je založená na dokumente RFC 2070 (Request for Comments). V mnohých elementoch je prípustné používať nové atribúty LANG= (jazyk dokumentu napr. en, sk)a DIR: (smer čítania textu ltr - zľava doprava, rtl opačne). HTML4 využíva 32bitové kódovanie ISO (je kompatibilné s Unicode 2.0) na rozdiel od 8bitového kódovania ISO , používaného v predchádzajúcich verziách. HTML4 podporuje dosiahnuteľnosť stránok aj pre postihnutých. Do tejto kategórie patrí najmä možnosť vytvorenia textových popisov obrázkov, možnosť priradiť vstupným poliam návestie (vo formulári) a ďalšie. Vyspelejšia podpora tabuliek kontrola štruktúry a zobrazenia tabuľky, členenie na záhlavie, telo a pätu, zobrazovanie záhlavia na pokračovaní tabuľky, možnosť určiť šírku stĺpcov a iné. Podpora vložených dokumentov je realizovaná pomocou univerzálnej značky OBJECT, ktorá môže slúžiť na vkladanie zvuku, videa, obrázkov, matematických výrazov, rôznych aplikácií (aplety) a ďalších objektov. Kaskádové štýly boli používané už v predchádzajúcich verziách. Podporujú oddelenie prezentačných vlastností od štruktúry dokumentu. Podpora skriptov sa teraz stala štandardnou súčasťou HTML. Môžu sa využiť napr. na kontrolu vstupných údajov formulárov na strane klienta, čím sa ušetrí komunikácia so serverom. Podporovaná je tlač viacerých súvisiacich dokumentov. Umožňuje ju štandardný spôsob definovania vzťahov medzi dokumentami. Spätná kompatibilita na HTML3.2 spravidla v HTML4 dochádza k rozšíreniu verzie HTML3.2. Niektoré elementy treba vynechať - ISINDEX, DIR a MENU, značky pre riadenie písma a zarovnania (FONT, BASEFONT, STRIKE, S, U a CENTER) nahradiť použitím štýlu. Namiesto DIR a MENU je možné použiť nečíslovaný zoznam UL. Významná zmena je, že značka APPLET je nahradená elementom OBJECT (aj keď funguje aj APPLET) Rozšírenia!DOCTYPE - označenie verzie HTML, ako prvý príkaz súboru pred HTML, napr. <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> HTML 4.0 definuje tri DTD (definícia typu dokumentu): Transitional (DTD obsahuje všetky elementy a atribúty HTML okrem tých, ktoré rozdeľujú okno na rámce), Strict (neobsahuje žiadne elementy a atribúty na definíciu vizuálneho vzhľadu dokumentu, napr. elementy font, center a atribúty ako align a color) a Frameset (stránky s rozdelením okna do rámcov pomocou elementu frameset). Ak stránka obsahuje DOCTYPE, je možné kontrolovať jej syntaktickú správnosť pomocou špeciálneho programu - parseru. Ak nie je parser nainštalovaný lokálne, možno využiť validačnú službu W3C HTML Validation Service na resp. Web-site Garage na SGML (Standard Generalized Markup Language) je ISO štandard 8879 z roku 1996 a slúži na definíciu značkovacích jazykov. Pomocou SGML je definovaný i jazyk HTML. Element LINK slúži na definíciu súvisiacich dokumentov, napr. štýlu <LINK rel= stylesheet type= text/css href= moj_styl.css > LINK sa umiestňuje do sekcie HEAD dokumentu a môže ich tam byť ľubovoľný počet. Väčšina prehliadačov má slabú alebo žiadnu podporu elementu LINK, takže autor stránky sa nemôže spoliehať, že prehliadač automaticky sprístupní odkazy používateľovi. Element LINK využíva dva atribúty REL a REV, ktoré určujú reláciu medzi daným a odkazovaným dokumentom. REL definuje vzťah z danej stránky na odkazovaný dokument, REV v opačnom smere pozri pr1.txt. Obidva atribúty môžu nadobúdať jednu z hodnôt Alternate, StyleSheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help a Bookmark. <LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright Notice">

2 <LINK REV=Made TITLE="HTML 4.0 "> Element BODY akceptuje okrem iných aj atribúty onload=skript onunload=skript na deklaráciu skriptov spúšťaných pri načítaní či odstránení dokumentu do/z okna Štruktúrovanie textu SPAN - označenie časti textu v rámci odseku (na rozdiel od DIV, ktorý označuje blok - odsek) pr1.htm (pr1e.htm): Volám sa <SPAN class="small-caps">janko Hraško</SPAN> ACRONYM vysvetlenie textu (skratky) pri nájazde kurzora myšou Internet a <ACRONYM title="world Wide Web">WWW</ACRONYM> patria spolu Q zaradzovanie krátkych citácií, namiesto BLOCKQUOTE INS a DEL - označenie časti textu, ktorý oproti poslednej verzii pribudol (ubudol) s časom v tvare RRRR-MM-DDThh:mm:ss-xx:00 (posledných 5 znakov je časové pásmo posun od Greenwicha), v texte sa podčiarkne, napr. <INS DATETIME=" T20:50:33-01:00">toto zase novy</ins> Tabuľky THEAD, TFOOT, TBODY - záhlavie, telo, päta môže mať viac riadkov (blokov) v rámci týchto párových značiek, tiež funguje značka COLGROUP pre definíciu stĺpca (skupiny SPAN=n) pr2.htm. Pre každý z týchto elementov (až po bunku TD) je možné (aj vhodné) zostaviť vhodný spôsob prezentácie (v štýle). COL definovanie implicitných vlastností stĺpca <COL =CENTER LEFT RIGHT ID=string SPAN=n STYLE=string V=BASELINE BOTTOM CENTER TOP WIDTH=string event=skript> AXIS, AXES pomenovanie jednej, resp. skupiny buniek pre databázové aplikácie <TABLE BORDER=1> <CAPTION>Common Usenet Abbreviations</CAPTION> <THEAD> <TH>Abbreviation</TH> </THEAD> <TFOOT> <TH>Abbreviation</TH> </TFOOT> <TBODY> <TD>AFAIK</TD> <TD>IMHO</TD> <TD>OTOH</TD> </TBODY> <TH>Long Form</TH> <TH>Long Form</TH> <TD>As Far As I Know</TD> <TD>In My Humble Opinion</TD> <TD>On The Other Hand</TD>

prípade Imagemap coords=zoznam_suradnic súradnice pre daný tvar shape tabindex poradie navigácie medzi objektami formulára pomocou TAB Príklad na využitie klávesovej skratky (ako alternatíva ku

3 </TABLE> Rozšírenia značky A charset=znakova_sada kódová stránka použitá pri načítaní stránky accesskey=znak skratkový kláves pre rýchly prístup k odkazu (spolu s Alt) shape=tvar tvar citlivej plochy v prípade Imagemap coords=zoznam_suradnic súradnice pre daný tvar shape tabindex poradie navigácie medzi objektami formulára pomocou TAB Príklad na využitie klávesovej skratky (ako alternatíva ku kliknutiu myšou) pr3.htm (pr3e.htm) Odkaz cez kláv. skratku <A href="t_iso.htm" ACCESSKEY=I>Iso</A> (ALT+I).<BR> Odkaz cez kláv. skratku <A href="t_iso.htm" accesskey=w>win</a> (ALT+W).<BR> Obrázok <A HREF="flower2.jpg">kvet</A> Vkladanie objektov OBJECT najmä aktívne súbory programy v Jave či ActiveX, namiesto značky APPLET, ale aj napr. obrázky pr4.htm. IE má s apletom cez OBJECT problémy, ostatné prehliadače nie. <OBJECT DECLARE ID=kvet CLASSID="java:HelloWorldApplet.class" CODETYPE="application/java" WIDTH=200 HEIGHT=100"> </OBJECT> <OBJECT DATA="flower2.jpg" TYPE="image/jpg" WIDTH=300 HEIGHT=200 ALT="Vianoce" TITLE="Vianoce07"> </OBJECT> Formuláre INPUT má doplnené parametre TYPE=file (vstup je meno súboru s cestou, automaticky sa doplní tlačidlo dialóg na nájdenie súboru), READONLY (neaktívne), ALT= retazec, USEMAP= url (imagemapa), tabindex=cislo (preskakovanie prvkov tabelátorom) a celý rad skriptov spúšťaných pri rôznych udalostiach (onfocus, onblur, onselect, onchange) a ďalšie. BUTTON name=meno value=hodnota type=typ(button submit reset) disabled tabindex=cislo onfocus=skript onblur=skript SELECT size=cislo (počet implicitne zobrazených riadkov) OPTION selected (implicitný výber), disabled, value (vybraná hodnota) LABEL popisovač vstupných prvkov (textových) FIELDSET zlučuje niekoľko vstupných prvkov do skupiny ohraničenej čiarou (groupbox) LEGEND nadpis skupiny, príklad pr5.htm (pr5e.htm): <FORM> <FIELDSET>

<LEGEND align="top">osobne udaje</legend> <LABEL for="meno">krstne meno:</label> <INPUT type="text" id="meno"><br> <INPUT type="radio" NAME="POL" value="muz">muz<br> <INPUT type="reset"

4 <LEGEND align="top">osobne udaje</legend> <LABEL for="meno">krstne meno:</label> <INPUT type="text" id="meno"><br> <INPUT type="radio" NAME="POL" value="muz">muz<br> <INPUT type="reset" value="vymazat"><br> </FIELDSET> </FORM> OPTGROUP - hierarchické členenie zoznamu (SELECT) vo forme menu pr6.htm DISABLED - vyradenie vstupných prvkov, aktivácia iba skriptom, platí pre všetky prvky formulára READONLY - element sa nedá meniť, ale možno ho aktivovať, len v TEXTAREA a INPUT (s typmi TEXT a PASSWORD) <P>Which Web browser do you use most often?<br> <SELECT NAME=browser> <OPTGROUP LABEL="Firefox"> <OPTION LABEL="2.x">Firefox 2.x or higher</option> <OPTION LABEL="1.x">Firefox 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="MS IE"> <OPTION LABEL="7.x">MS IE 7.x or higher </OPTION> <OPTION LABEL="6.x">MS IE 6.x</OPTION> <OPTION LABEL="5.x">MS IE 5.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="9.x">Opera 9.x or higher</option> <OPTION LABEL="8.x">Opera 8.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P> Príkaz Script SCRIPT type=typ language=jazyk src=url, pričom TYPE udáva jazyk skriptu namiesto doterajšieho LANGUAGE, SRC udáva zdrojový súbor skriptu jednotný jazyk skriptu (Javascript, VBScript, Tcl) pre všetky skripty stránky pomocou značky META: <META http-equiv= Content-Script-Type content=jazyk_skriptu> NOSCRIPT pre prehliadače bez podpory skriptov, náhradný postup Zoznam udalostí ošetrovaných skriptom onload pri načítaní celého okna onunload - pri ukončení okna onclick pri kliku nad elementom ondblclick pri dvojkliku onmousedown pri uvoľnení ľavého tlačidla myši onmouseup pri stlačení myši onmouseover ak je kurzor nad elementom onmousemove pri pohybe myši

5 onmouseout ak je kurzor mimo elementu onfocus pri výbere elementu TAB (LABEL, INPUT, SELECT, TEXTAREA, BUTTON) onblur komplement onfocus onkeypress pri stlačení klávesu onkeydown, onkeyup pri pridržaní, uvoľnení klávesu onsubmit pri odoslaní onreset pri resete onselect pri výbere textu (INPUT, TEXTAREA) onchange pri zmene textu (INPUT, SELECT, TEXTAREA) Literatúra a zdroje [1] Hlavenka J., Sedlář R., Holčík T., Šebesta M., Botík R.: Vytváříme WWW stránky a spravujeme moderní web site. Computer press Brno, ISBN , 393 str. [2] Kosek, J.: HTML 4.0. Computerworld 40/97 [3] [4] Kosek J.: PHP Tvorba interaktivních internetových aplikací. Grada Praha 1999, ISBN , 490 str. [5] Kosek J.: Informace ke kurzu IZI Internet a hypertext 1999, OTÁZKA: Čo patrí medzi najvýznamnejšie charakteristiky jazyka HTML 4? ODPOVEĎ: prenositeľnosť - nedoporučuje sa používanie atribútov a elementov na riadenie grafického vzhľadu stránky, malo by to byť špecifikované iba pomocou štýlov podpora viacerých jazykov - atribúty LANG= (jazyk dokumentu napr. en, sk) a DIR: (smer čítania textu ltr ), 32bitové kódovanie ISO (je kompatibilné s Unicode 2.0) vyspelejšia podpora tabuliek - záhlavie, telo, päta, zobrazovanie záhlavia na pokračovaní tabuľky podpora vložených dokumentov - značka OBJECT - vkladanie zvuku, videa, obrázkov, matematických výrazov, rôznych aplikácií a ďalších objektov štýly - oddelenie prezentačných vlastností od štruktúry dokumentu podpora skriptov tlač viacerých súvisiacich dokumentov spätná kompatibilita na HTML3.2 značka APPLET je nahradená OBJECT, treba vynechať ISINDEX, DIR a MENU, značky pre riadenie písma a zarovnania (FONT, BASEFONT, STRIKE, S, U a CENTER) nahradiť použitím štýlu

6 6 Príloha Stručné zhrnutie HTML Štruktúra dokumentu <!DOCTYPE Html public -//w3c//dtd HTML 4.01//en > <HTML> <HEAD> <TITLE>...názov stránky... </TITLE> </HEAD> <BODY>... vlastný text dokumentu... </BODY> </HTML> Záhlavie dokumentu <TITLE>...</TITLE> titulok (názov) dokumentu <BASE HREF= URL > základné URL dokumentu <ISINDEX> kľúčové slová pre vyhľadávanie <META> metainformácie o dokumente HTTP-EQUIV ekvivalent hlavičky-http expires dátum a čas expirácie content-type, language typ a znak. stránka, jazyk NAME meno pre indexovanie (Yahoo) description, keywords popis, kľúčové slová robots ošetrenie činnosti robota autor, generator autor, editor stránky CONTENT hodnota metainformácie <LINK> väzby na ďalšie dokumenty <STYLE>...</STYLE> budúce verzie, použitie štýlov <SCRIPT>...</SCRIPT> budúce verzie, skripty <BGSOUND> zvuk na pozadí (Src, Title, Loop) Parametre značky <BODY> BGCOLOR farba pozadia ( # ččzzmm alebo názov farby) TEXT farba textu ( # ččzzmm, názov farby) LINK farba ešte nenavštíveného odkazu ALINK farba vybraného (aktuál.) odkazu VLINK farba už navštíveného odkazu BACKGROUND meno obrázka, použitého ako pozadie LEFTMARGIN odsadenie stránky zľava TOPMARGIN odsadenie stránky zhora BGPROPERTIES = FIXED fix pri rolovaní Logické štýly písma <EM>...</EM> zvýraznenie <STRONG>...</STRONG> silné zvýraznenie <DFN>...</DFN> definícia <CODE>,.<SAMP> kód, výstup programu <KBD>...</KBD> vstup z klávesnice <VAR>...</VAR> premenná, argument programu <CITE>...</CITE> citácia (odkaz na iné zdroje) Fyzické štýly písma <TT>...</TT> neproporcionálne písmo <I>...</I> kurzíva <B>...</B> tučné <U>...</U> podčiarknuté <STRIKE>...</STRIKE> preškrtnuté <BIG>...</BIG> veľké <SMALL>...</SMALL> malé <SUB>...</SUB> dolný index <SUP>...</SUP> horný index <FONT>...</FONT> veľkosť a/alebo farba písma COLOR farba ( # ččzzmm, názov ) SIZE 1-7 absolútna veľkosť; +n (-n) relatívne zväčšenie (zmenšenie) FACE názov použitého písma <BASEFONT SIZE=n> základná veľkosť písma (n=1..7) Formátovanie textu <P> odstavec zarovnanie (Left, Right, Center, Justify) <BR> prechod na nový riadok CLEAR vynechanie miesta keď skončia obrázky (Left, Right, All, None) <HR> horizontálna čiara zarovnanie (Left, Right, Center) NOSHADE čiara bez 3D- tieňovaného efektu SIZE výška v pixeloch WIDTH dĺžka v pixeloch či v percentách <MARQUE> rolovanie textu (IE) BEHAVIOR chovanie Alternate, Scroll, Slide DIRECTION smer Down, Left, Right, Up HEIGHT, WIDTH priestor rolovania Členenie dokumentu <Hn>...</Hn> nadpis úrovne n (1-6) zarovnanie (Left, Right, Center) <DIV>...</DIV> súvisiaca časť dokumentu zarovnanie (Left, Right, Center) <blockquote> dlhšia citácia <address>...</address> adresa autora dokumentu <PRE>...</PRE> predformátovaný text WIDTH dĺžka najdlhšieho riadku <PRE> <MULTICOL COLS= 2 > dva stĺpce stránky (len NN) <SPACER> prázdne miesto (len NN) TYPE Horizontal, Vertical, Block Size, Width, Height, Align ďalšie parametre Zoznamy <UL>...</UL> zoznam s odrážkami TYPE tvar odrážok (Disc, Square, Circle) COMPACT zhustený tvar zoznamu <OL>...</OL> číslovaný zoznam TYPE číslovanie: 1-arabské číslice, a-malé, A-veľké písmená, i-malé, I-veľké rímske číslice Start začiatočná hodnota odrážky COMPACT zhustený tvar zoznamu <LI> položka zoznamu TYPE rovnaké ako u <UL>.alebo<OL> VALUE hodnota číslice v odrážke pre položku číslovaného zoznamu <DL>...</DL> zoznam definícii COMPACT zhustený tvar zoznamu <DT> definovaný pojem <DD> text definície <DIR> a <MENU> podobné ako <UL> Odkazy <A HREF= URL > odkaz na určité URL NAME= #návestie návestie v akt. dokumente; odkaz pripojením #návestie za URL TARGET okno otvorenia - frameset TITLE alt. názov odkazu hint - myš REL, REV odkaz dopredu, späť <OBJECT> vloženie iných objektov Java DATA názov vloženého súboru URL

7 7 STANDBY <PARAM> NAME, VALUE hlásenie pri aktivácii objektu parameter objektu názov a hodnota parametra Obrázky <IMG SRC= URL > zaradenie obrázku do textu zarovnanie (Top, Middle, Bottom, Left, Right, atd) ALT text pre znakové prehliadače width šírka HEIGHT výška BORDER šírka rámčeka HSPACE, VSPACE horizont., vertikálne odsadenie DYNSRC videoklip animovaný GIF CONTROLS zobrazí ovládacie tlačidla LOOP, START počet, podmienka prehrávania ISMAP klikacia mapa na serveri USEMAP= meno meno klikacej mapy <MAP NAME= meno > vytvorenie klikacej mapy <AREA> definícia citlivej oblasti mapy SHAPE tvar oblasti (Rect, Circle, Poly) COORDS súradnice geometrického útvar HREF URL odkazu NOREF citlivá plocha nie je odkazom ALT text pre znakové prehliadače Tabuľka <TABLE>...</TABLE> tabuľka zarovnanie tabuľky na stránke (Left, Right, Center) BGCOLOR farba pozadia tabuľky BORDER hrúbka rámčeka BORDERCOLOR farba rámčeka CELLPADDING medzera okraj - obsah bunky CELLSPACING medzera medzi bunkami COLS počet stĺpcov tabuľky FRAME viditeľnosť rámčeka (Void, Above, Below, Hsides, Vsides, Lhs, Rhs) WIDTH šírka tabuľky <CAPTION>...</CAPTION> nadpis tabuľky zarovnanie nadpisu tabuľky riadok tabuľky <TH> hlavička tabuľky <TD> bunka tabuľky vodorovné zarovnanie (LEFT, RIGHT, CENTER) V zvislé zarovnanie (TOP, MIDDLE, BOTTOM) ROWSPAN bunka cez daný počet riadkov COLSPAN bunka cez daný počet stĺpcov NOWRAP text bunky sa nezalamuje WIDTH šírka bunky HEIGHT výška bunky <COLGROUP> formátovanie celého stlpca IE SPAN na koľko stĺpcov to platí Názvy farieb aqua jasná tmavozelená navy tmavo modrá black čierna olive olivová blue modrá purple purpurová fuchsia anilínová červeň red červená gray sivá silver strieborná green zelená teal tmavá modrozelená lime citrónovo zelená white biela maroon gaštanová yellow žltá Zápis vybraných znakov v HTML &nbsp nedeliteľná medzera &shy rozdeliteľný spojovník &lt < &plusmn ± &gt > &sup1 ¹ &amp & &sup2 ² &quot &sup3 ³ &copy &acute &iexcl &micro µ &cent &para &pound &middot &yen &cedil &brvbar &orm º &sect &raquo» &uml &frac14 ¼ &ordf ª &frac12 ½ &laquo «&frac34 ¾ &not &iquest &reg &times &macr &divide &deg &curren všeob. mena Komentáre    <COMMENT> len IE Rámce <FRAMESET> rozdelenie okna na rámce v HEAD COLS, ROWS počet a veľkosť stĺpcov, riadkov v % hl. okna, pixeloch, relatívne FRAMEBORDER ohraničenie rámca (1, 0 yes, no) BORDERCOLOR farba okraja rámca FRAMESPACING nevyplnené miesto medzi rámcami <FRAME> naplnenie rámca FRAMEBORDER ohraničenie rámca (1, 0 yes, no) MARGINHEIGHT okraj nad a pod rámcom v pixeloch MARGINWIDTH okraj vľavo a vpravo od rámca v pix. NAME názov rámca pri vyvolaní odkazom SCROLLING povolenie rolovania (yes, no) NORESIZE zákaz zmeny veľkosti rámca myšou FRAMESPACING voľné miesto okolo rámca (pix) - IE BORDERCOLOR farba okraja rámca NN SRC súbor umiestnený do rámca <IFRAME> plávajúci rám hocikde v BODY - IE zarovnanie rámca BORDER, BORDERCOLOR šírka a farba okraja HEIGHT, WIDTH výška a šírka rámca v pixeloch

8 8

Name Related Elements Type Default Depr. DTD Comment

Legend: Deprecated, Loose DTD, Frameset DTD Name Related Elements Type Default Depr. DTD Comment abbr TD, TH %Text; accept-charset FORM %Charsets; accept FORM, INPUT %ContentTypes; abbreviation for header