Vsebina
HTML (Hypertext Markup Language) je zaporedje ukazov, ki povejo kako naj sepredstavitvena 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 HTMLin 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 Obstajata dve vrsti značk:
Opis 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čav programu TextPad dodati v datoteko htmlchar.tcl, ki se nahajana poddirektoriju Samples (na mestu kjer je nameščen TextPad). Na voljo imamo šest nivojev naslovov (headings)h1 doh6. Drugi nivo, ki je uporabljen zgorajdosežemo z: <H2>Naslov</H2>Naslov lahko centriramo z dodatkom: <H2 align=center>Naslov</H2> Običajne odstavke (paragraphs), katerih širina se prilagaja trenutni velikosti okna,dosežemo z: <P>Znački<P> lahko z dodatkomaligndoloč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> Na 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). Neoš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:
Če želimo, da je besedilo prikazano tako, kot smoga natipkali (razlomi vrstic, večkratni presledki,...),moramo uporabiti značko<PRE> (predefined text): <PRE> Danes je lepo vreme</PRE>Rezultat je Danes je lepo vremeTak izpis je npr. uporaben pri izpisih programov.Zaradi poravnavanja po stolpcih se v tem primeruuporabi neproporcionalni font. Sidra (anchors) so značke, s pomočjo katerih zahtevamo skok na nek drug dokumentin 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 nahajana 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 nadrugem računalniku: <A HREF="URL#Oznaka">Opisno pojasnilo </A> V 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 prikazovalnikinaj 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 pomenitaW inHš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: Če želima na predstavitveno stran vključiti možnost pošiljanje pošteizbrani osebi, to storimo z dodatkommailto 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šteizbranemu naslovniku. Tabele so zelo močno orodje v HTML. Kot smo omenili jezik sam ne omogočanatanč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
Za opis barv se uporablja sistem RGB (--).Barvo podamo z mešanico teh treh barv, pri čemer je količina vsake od teh treh barvpodana 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 inodgovarjajočih imen:
Uporaba barv:
Kot smo omenili se dodatni presledki med besedami ignorirajo.Morebitne potrebne dodatne presledke med besedami zahtevamo zukazom (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 potrebein jih prikazovalnik ne prikaže) zapišemo med znaki<!-- (začetek komentarja)in--> (konec komentarja). Velikost črk spreminjamo z dodatkomsize 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> Z okviri razdelimo okno na več delov.
Dodatni naslovi | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||