Osnove HTMLVsebina
Kaj je HTML?HTML (Hypertext Markup Language) je zaporedje ukazov, ki povejo kako naj se predstavitvena stran prikaže. Ukazi se imenujejo tudi značke (tags). Značke se vedno nahajajo med znakoma < in >, kot npr. <TAG>
Spletni pregledovalniki (browsers) so programi, ki berejo ukaze v jeziku HTML
in glede na to prikazujejo vsebino. Vsako ročno oblikovanje strani
(npr. večkratni presledki, prazne vrstice,...) se ignorira.
Na primer, če odtipkamo
Danes
je
lepo
vreme.
bo prikazovalnik prikazal naslednjo vsebino: Danes je lepo vreme.
Datoteke v HTML imajo podaljšek .htm ali .html Značke v HTMLObstajata dve vrsti značk:
Splošna oblika opisa predstavitvene straniOpis predstavitvene strani v jeziku HTML je naslednji: <HTML>
<HEAD>
<TITLE>Naslov, ki se pojavi v okviru okna</TITLE>
</HEAD>
<BODY>
Vsebina predstavitvene strani
</BODY>
</HTML>
Med znački <HEAD> in </HEAD> napišemo informacije o dokumentu, ki sledi.
Te informacije se na sami predstavitveni strani ne izpišejo.
V zgornjem primeru je uporabljena samo značka <TITLE>,
ki podaja vsebino, ki se izpiše v zgornjem okviru okna.
Za oblikovanje predstavitvenih strani v slovenščimi (pisanje šumnikov)
si pomagamo z
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">Če v glavi uporabimo to značko, lahko uporabljamo č,š in ž kar s tipkovnice. Še bolj splošna rešitev za pisanje šumnikov pa je uporaba kode znakov v obliki &#n;kjer je n
Mali č torej zapišemo kot č V primeru pisanja šumnikov s kodami je koristno v glavi dokumenta navesti <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">Tako pisanje šumnikov je nekoliko nerodno zato se jih splača v programu TextPad dodati v datoteko htmlchar.tcl, ki se nahaja na poddirektoriju Samples (na mestu kjer je nameščen TextPad). NasloviNa voljo imamo šest nivojev naslovov (headings) h1 do h6. Drugi nivo, ki je uporabljen zgoraj dosežemo z: <H2>Naslov</H2>Naslov lahko centriramo z dodatkom: <H2 align=center>Naslov</H2> Odstavki in nove vrsticeObičajne odstavke (paragraphs), katerih širina se prilagaja trenutni velikosti okna, dosežemo z: <P>Znački <P> lahko z dodatkom align določimo način poravnavanja - left, right, center. Primer: <P align=right> Ta del besedila bo <br> desno poravnan. </P>Rezultat:
Ta del besedila bo
Skok v novo vrstico zahtevamo z značko <BR> Oblike izpisaNa voljo je več različnih stilov.
Debeli izpis (bold) zahtevamo z: <B> Besedilo </B> Poševni izpis (italic) zahtevamo z:: <I> Besedilo </I> Podčrtan izpis (underline) zahtevamo z: <U> Besedilo </U> Neproporcionalni izpis (typewriter) zahtevamo z: <TT> Besedilo </TT> zahtevamo z: <BLINK> Besedilo </BLINK> Stile lahko gnezdimo (debelo in poševno hkrati). SeznamiNeoštevilčene sezname (unnumbered lists) dobimo z <UL>
<LI> Prva točka
<LI> Druga točka
<LI> Tretja točka
</UL>
Rezultat:
Sezname lahko gnezdimo, npr. <OL>
<LI> Prva točka
<UL>
<LI> Prva pika prve točke
<LI> Druga pika prve točke
<LI> Tretja pika prve točke
</UL>
<LI> Druga točka
<LI> Tretja točka
</OL>
Rezultat:
Ročno oblikovano besediloČe želimo, da je besedilo prikazano tako, kot smo ga natipkali (razlomi vrstic, večkratni presledki,...), moramo uporabiti značko <PRE> (predefined text): <PRE>
Danes
je
lepo
vreme
</PRE>
Rezultat je
Danes
je
lepo
vreme
Tak izpis je npr. uporaben pri izpisih programov.
Zaradi poravnavanja po stolpcih se v tem primeru
uporabi neproporcionalni font.
Sidra
Sidra (anchors) so značke, s pomočjo katerih zahtevamo skok na nek drug dokument
in prikaz le tega. Uporabljamo lahko relativni naslov
(če se dokument nahaja na istem računalniku, morda le na drugem direktoriju)
ali pa absolutni naslov (URL - Uniform Resource Locator), če se dokument nahaja
na drugem računalniku. <A HREF="poddirektorij/vaja.htm"> Opisno pojasnilo </A>Primer klica z absolutnim naslovom <A HREF="http://www.fdv.uni-lj.si/"> Fakulteta za družbene vede </A> Poljubnemu mestu v dokumentu lahko damo ime <A NAME="Oznaka"> </A> ki ga uporabimo za skakanje znotraj istega dokumenta z značko <A HREF="#Oznaka"> Opisno pojasnilo </A>Podobno lahko skočimo na izbrano mesto v dokumentu, ki se nahaja na drugem računalniku: <A HREF="URL#Oznaka"> Opisno pojasnilo </A> Vključevanje slikV dokument vključimo slike z: <IMG SRC="Naslov in ime datoteke">Pravila za opis kje se slika nahaja so enaka kot pri sidrih (relativni ali absolutni naslovi). Vsi prikazovalniki naj bi prepozali in prikazovali vsaj formata GIF in JPG. Npr. <center> <IMG SRC="tiger.gif"> </center>Ustvari naslednji rezultat: 
Sliko lahko raztegnemo v horizontalni / navpični smeri z: <IMG SRC="Naslov in ime datoteke" WIDTH=W HEIGHT=H>Kjer pomenita W in H širino in višino slike v pikah (pixels). Lahko pa navedemo tudi relativno velikost v odstotkih glede na velikost okna, tako da številki dodamo znak %. Sliko lahko uporabimo tudi kot sidro. Primer uporabe: Pritisni na tigra: <a href="http://www.fdv.uni-lj.si"><img src="tiger.gif" width=40></a>Rezultat: Pritisni na tigra:
Pošiljanje pošteČe želima na predstavitveno stran vključiti možnost pošiljanje pošte izbrani osebi, to storimo z dodatkom mailto v sidru
Zapis
e-pošta: <A HREF="mailto:x.y@uni-lj.si"> x.y@uni-lj.si </A>ustvari naslednji rezultat: e-pošta: x.y@uni-lj.si S klikom na označeno mesto se prestavimo v program za pošiljanje pošte izbranemu naslovniku. Tabele
Tabele so zelo močno orodje v HTML. Kot smo omenili jezik sam ne omogoča
natančnega oblikovanja strani, zato ponavadi za ta namen uporabimo tabele
(in nekaj zvijač). Oblika dokumenta, ki ga trenutno pregledujete,
je npr. določena z uporabo tabel.
V besedilo vključimo tabelo z uporabo značke <TABLE>.
Primer opisa tabele: <table> <tr> <td> a </td> <td> b </td> <td> c </td> <tr> <td> aaa </td> <td> bbb </td> <td> ccc </td> </table>in odgovarjajoči izgled
Značka <TABLE> ima lahko še več dodatkov. Omenimo le najpomembnejše:
<table border=2 cellpadding=6> <tr> <td> a </td> <td> b </td> <td> c </td> <tr> <td> aaa </td> <td> bbb </td> <td> ccc </td> </table>in odgovarjajoči izgled
Tudi znački <TD> in <TR> imata lahko več dodatkov, npr.:
<table border=2 cellpadding=6> <tr align=center> <td> a </td> <td colspan=2> b </td> <tr> <td rowspan=2> aaa </td> <td> bbb </td> <td> ccc </td> <tr> <td> bbbb </td> <td> cccc </td> </table>in odgovarjajoči izgled
Barve v HTMLZa opis barv se uporablja sistem RGB (Red-Green-Blue). Barvo podamo z mešanico teh treh barv, pri čemer je količina vsake od teh treh barv podana s šestnajstiškim številom od 0 do FF (0 do 255). Nekaj primerov:
Poleg zapisa v RGB lahko nekatere osnovne barve pokličemo kar po imenu (npr. red, orange, lightyellow,...). Nekaj primerov barv in odgovarjajočih imen:
Uporaba barv:
DodatkiKot smo omenili se dodatni presledki med besedami ignorirajo. Morebitne potrebne dodatne presledke med besedami zahtevamo z ukazom (non-breakable space). Izpis vodoravne črte zahtevamo z: <HR>V tem primeru dobimo črto čez celo širino trenutnega objekta (okna ali celice v tabeli). Dodamo lahko še debelino črte in širino (v pikah ali %). Zahteva <HR size=10 width=40%>ustvari izpis Del besedila centriramo z značko <CENTER>. Zapis <CENTER> To bo na sredini </CENTER>npr. povzroči izpis oblike Indekse in potence dobimo z značkama <SUB> in <SUP>. Npr. zapis x<SUP>2</SUP>povzroči izpis oblike x2 Komentar (pojasnila, ki jih potrebujemo za svoje potrebe in jih prikazovalnik ne prikaže) zapišemo med znaki <!-- (začetek komentarja) in --> (konec komentarja). Velikost črk spreminjamo z dodatkom size k znački <FONT>. Velikosti so od 1 do 7. Npr.
<FONT SIZE=1>Napisano z velikostjo 1.</FONT>
<FONT SIZE=3>Napisano z velikostjo 3.</FONT>
<FONT SIZE=7>Napisano z velikostjo 7.</FONT> OkviriZ okviri razdelimo okno na več delov.
Dodatni naslovi | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||