1. Povezave Uvod v HTML - 2. del Del besedila lahko naredimo aktivnega. To pomeni, da se bo uporabniku, če bo kliknil nanj, odprla neka druga datoteka ali pa drug del istega dokumenta. Ta druga datoteka je lahko spletna stran, slika, različne vrste dokumentov (DOC, XLS, PDF, ZIP...) ali pa celo program, ki ga lahko poženemo na strežniku. Aktivno besedilo je običajno obarvano modro in podčrtano, ko pa povezavo obiščemo, se obarva vijolično (te oblikovne lastnosti lahko spremenimo s stili). Besedilo naredimo aktivno z uporabo elementa a. Z lastnostjo href mu določimo ime ciljne datoteke, ki naj se odpre, ko uporabnik klikne na povezavo. Določitev cilja a) Relativni (odvisni) način sklicevanja Ime ciljne datoteke lahko določimo na več načinov. Če je v isti mapi kot spletna stran, kjer imamo povezavo, je dovolj, da napišemo samo njeno ime. Kadar pa je v kateri od podmap, moramo pred imenom napisati pot, kako pridemo do nje iz trenutne mape. Za ločila med imeni map uporabljamo znak /. Za prehod v mapo na višjem nivoju uporabimo.. (dve piki). Naloga 1: V svoji mapi HTML ustvari mapo Podmapa. Nato v tej mapi ustvari še mapo Podpodmapa. Premakni datoteko primer2.htm v mapo Podmapa, v mapo Podpodmapa pa datoteko primer3.htm. Ustvari datoteko povezave.htm (vstavi oznako html, glavo in telo) in jo shrani v mapo HTML. Na istem nivoju kot je mapa HTML naredi še mapo Slike in vanjo kopiraj sliko piknik, ki se nahaja v mapi Delo/Slike. Sklic na datoteko <a href="primer1.htm">v isti mapi</a>. Sklic na datoteko <a href="podmapa/primer2.htm">v podmapi</a>. Sklic na datoteko <a href="podmapa/podpodmapa/primer3.htm">dva nivoja nižje</a>. Sklic na datoteko <a href="../slike/piknik.jpg">v sosednji mapi</a>. b) Absolutni način sklicevanja Če je ciljna datoteka na strežniku, lahko uporabimo tudi absolutni način sklicevanja. Absolutno ime datoteke se začne s http://, sledi ime strežnika, nato pa polno ime datoteke (skupaj z relativno potjo glede na korensko mapo strežnika). Kadar je ciljna datoteka na istem strežniku, lahko http:// in ime strežnika spustimo (potem se bo takšno ime vedno začelo z znakom /), če pa je ime datoteke na strežniku prijavljeno kot privzeto, lahko spustimo tudi ime. Takšna imena so običajno default.htm, index.html, index.php... Datoteka <a href="http://www.streznik.com/test.html">v korenski mapi</a> strežnika. Datoteka <a href="http://www.streznik.com/podmapa/test.html">v podmapi</a> strežnika. Privzeta datoteka <a href="http://www.streznik.com">v korenski mapi</a> strežnika. Privzeta datoteka <a href="http://www.streznik.com/podmapa">v podmapi</a> strežnika. Datoteka <a href="/test.html">v korenski mapi</a> na tem strežniku. Datoteka <a href="/podmapa/test.html">v podmapi</a> na tem strežniku. Privzeta datoteka <a href="/">v korenski mapi</a> na tem strežniku. Privzeta datoteka <a href="/podmapa">v podmapi</a> na tem strežniku. Datoteka na računalniku: <a href="file:///c:/html/primer2.htm">2</a> Pogosto naletimo tudi na povezave, ki nam ob kliku nanje odprejo poštni program. Tako povezavo naredimo takole: Pošlji <a href="mailto:tretja.si@guest.arnes.si">sporočilo</a>. 1
2. Tabele Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic. Tabelo opišemo z elementom table. Element ali značka <TABLE> ima lahko še več dodatkov. Omenimo le najpomembnejše: BORDER se nanaša na debelino robov tabele v pikah (debelina 0 pomeni, da tabela nima roba). FRAME določimo, katere dele zunanjega roba želimo imeti (void (nobenega), above (zgornjega), below (spodnjega), hsides (zgornjega in spodnjega), vsides (levega in desnega), lhs (levega), rhs (desnega), box (vse štiri) in border (vse štiri). RULES določimo, med katerimi celicami želimo imeti robove (none (nikjer), groups (med skupinami), rows (med vrsticami), cols (med stolpci), all (med vsemi celicami). CELLSPACING se nanaša na prostor med celicami (v pikah). CELLPADDING se nanaša na prostor znotraj celic v pikah (prostor med mejami celic in vsebino znotraj celic). WIDTH se nanaša na širino tabele v pikah ali procentih <table border=2 cellpadding=6> <td> a </td> <td> b </td> <td> c </td> <td> aaa </td> <td> bbb </td> <td> ccc </td> Naslov tabele Tabeli lahko dodamo tudi naslov (caption). Tega določimo z značko <CAPTION>. Če ga definiramo, moramo to storiti takoj za značko <TABLE>. <html> <head> <title>tabela</title> </head> <body> <table border=1 cellpadding=2 cellspacing="5"> <caption><h3> Koliko vode potrebujejo rože? </h3></caption> Za opis navadnih celic uporabljamo element td (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element th (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi tr (table row). 2
Tudi elementa <TD> in <TR> imata lahko več dodatkov, npr.: ALIGN (left, center, right, justify) - vodoravno poravnavanje celice. VALIGN (top (navzgor), bottom (navzdol), middle (sredinsko), baseline (na osnovno črto)- navpično poravnavanje celice. COLSPAN = n trenutna celica naj se raztega čez n stolpcev. ROWSPAN = n trenutna celica naj se raztega čez n vrstic. <table border=2 cellpadding=6> <tr align=center> <td> a </td> <td colspan=2> b </td> <td rowspan=2> aaa </td> <td> bbb </td> <td> ccc </td> <td> bbbb </td> <td> cccc </td> Naloga 2: Ustvari datoteko tabela.htm in jo shrani v mapo HTML: <table> /* začetek tabele /* prva vrstica tabele <td> </td> /* navadna celica v prvi vrstici tabele <th> dohodki </th> /* naslovna celica v prvi vrstici tabele <th> izdatki </th> /* naslovna celica v prvi vrstici tabele /* konec prve vrstice /* druga vrstica tabele <th> 2005 </th> /* naslovna celica v drugi vrstici tabele <td> 1.200</td> /* navadna celica v drugi vrstici tabele <td> 950</td> /* navadna celica v drugi vrstici tabele /* konec druge vrstice. <th> 2006 </th>. <td> 1.500</td>. <td> 1.700</td> <th> 2007 </th> <td> 1.400</td> <td> 1.000</td> 3
3. Seznami Sezname v HTML uporabimo, kadar želimo po vrsti našteti več stvari. Obstaja več vrst seznamov, ki jih uporabljamo za naštevanje, številčenje ali opisovanje. Neoštevilčeni seznam Za naštevanje uporabimo element ul (unordered list), znotraj katerega naštejemo elemente li (list item), ki predstavljajo posamezne točke seznama. Naloga 3: Ustvari datoteko nastevanje.htm: <ul> /* neoštevilčeni seznam <li> analiza </li> /* analiza <li> algebra </li> /* algebra <li> računalništvo </li>. <li> topologija </li>. <li> verjetnost </li>. </ul> Oštevilčeni seznam Za številčenje uporabimo element ol (ordered list), znotraj katerega naštejemo elemente li (list item), ki predstavljajo posamezne točke seznama. Naloga 4: Ustvari datoteko stevilcenje.htm: <ol> /* oštevilčeni seznam <li> analiza </li> /* 1. analiza <li> algebra </li> /* 2. analiza <li> računalništvo </li>. <li> topologija </li>. <li> verjetnost </li>. </ol> Opisni seznam Opisovanje je malo bolj zapleteno kot naštevanje in številčenje. Uporabimo element dl opisni seznam (definition list), znotraj katerega naštejemo elemente dt (definition term) in dd (definition description). Prvi predstavljajo pojme, ki jih opisujemo, drugi pa njihove opise. 4
Naloga 5: Ustvari datoteko opisovanje.htm: <dl> <dt> ANA </dt> <dd> analiza </dd> <dt> ALG </dt> <dd> algebra </dd> <dt> RAC </dt> <dd> računalništvo </dd> /* opisni seznam <dt> TOP </dt>. <dd> topologija </dd>. <dt> VER </dt>. <dd> verjetnost </dd> </dl> /* konec opisnega seznama Gnezdenje seznamov Omenjene vrste seznamov lahko tudi gnezdimo. To pomeni, da lahko naredimo seznam znotraj drugega seznama (kot točko ali njen del). Pri tem moramo paziti, da značke zaključujemo v obratnem vrstnem redu, kot jih odpiramo. Naloga 6: Ustvari datoteko gnezdenje.htm: <dl> <dt> <b>sestavine:</b> </dt> <dd> <ul> <li> 100g moke </li> <li> 10g sladkorja </li> <li> skodelica vode </li> <li> 2 jajci </li> <li> sol, poper </li> </ul> </dd> <dt> <b>postopek:</b> </dt> <dd> <ol> <li> zmešaj suhe sestavine </li> <li> dolij vodo </li> <li> mešaj 10 minut </li> <li> daj v pečico za eno uro pri 300 stopinjah </li> </ol> </dd> <dt> <b>opombe:</b> </dt> <dd> Recept lahko izboljšaš tako, da dodaš rozine. </dd> </dl> 5