HyperText Markup Language

HTML eli HyperText Markup Language on sivunkuvauskieli joka on alun perin suunniteltu säätelemään vain sivun rakennetta, niin että se pysyy koossa ja että olennaisimmat elementit, kuten otsikot ja leipäteksti erottuvat toisistaan. Ulkoasun muotoiluja sillä ei juurikaan ole saanut aikaan.

Html-tageja ei ole esitetty aakkosjärjestyksessä, vaan sipulinkuorimistapaan uloimmasta sisimpään, suurimmasta pienimpään, selityksineen. Tagin kuvauksessa on esitetty vain alkumerkki, loppumerkki on sama kauttaviivan kanssa tyyliin </body>. Aivan kaikilla tageilla ei ole loppumerkkiä, mikä on mainittu käytön kuvauksessa.

Joskus loppumerkki näkyy perus-html:ssäkin merkityn myös paikkoihin jonne se ei kuulu, kuten metatekstin tai link href -rivin eli tyyliohjetiedoston hakupolun loppuun eli loppumerkittömän tagin sisään muodossa ... xxx" />. Myös loppumerkittömiin <br>- ja <hr>-tageihin on usein sisällytetty välilyönti ja sama loppumerkin osa. Se ei vaikuta toimintoon, mutta ei ole tarpeellinen. Se on XHTML:n ominaisuus, joka ei sisälly perus-html:ään. Seuraavassa eri sivunkuvauskieliä eri tarkoituksiin englanninkielisen Wikipedian sivuilla jatkolinkkeineen.

Sivujen koodin näkee hiiren oikean näppäimen pikavalikon valinnalla Näytä lähdekoodi ja monikehyksisen sivuston index-tiedoston koodin valikosta View (Näytä) kohdasta Source (Lähdekoodi).

Merkintätapa on tuttu, jos on käyttänyt joskus tekstinkäsittelyyn merkkipohjaista WordPerfectiä. Html-määrityksiä ei käsitellä kovin yksityiskohtaisesti, vaan tähän on sisällytetty vain kaikkein tavallisimmat määritykset. Koska oppimateriaalin painopiste on ulkoasun suunnittelussa on tarkoituksena tehdä hienosäätöiset muotoilut CSS-perusmuotoilutyyleillä.

Ainakin uudemmilta koneilta löytyy myös etsimällä tiedosto htmlref.chm, joka sisältää englanninkielisinä mm. Html-elementtien ja CSS-attribuuttien täydelliset kuvaukset ja linkkejä JavaScript-ohjeisiin. Myös linkkisivulla on runsaasti linkkejä koodiohjeisiin.

Koodi ei ole itseisarvo, vaan keino sisällön ja muodon yhdistämiseen. Pelkkä perustyökalu, siinä missä erilaiset lapiotkin erilaisiin kaivuutehtäviin. Ei siis kannata pohtia koodille kunhan-nyt-jotakin-sisältöä vaan sisällölle tarkoituksenmukainen koodi.

SELAIMELLE JA PALVELINKONEELLE TIEDOKSI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Jokaisen sivun alkuun isoilla kirjaimilla yhdelle riville ennen html-tagia selaimelle tiedoksi, että kysymyksessä on HTML 4.0 -merkkaus.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

Jokaisen sivun alkuun selaimelle tiedoksi, että kysymyksessä ovat html-merkkaus, CSS-tyylit ja ISO-8859-1 -merkkistandardi. Kirjoitetaan pienillä kirjaimilla kumpikin erikseen yhdelle riville.

<link href="www.css" rel="stylesheet" type="text/css" title="WWW-tyylit" media="all">

Jokaisen sivun alkuun selaimelle tiedoksi CSS-tyyliohjeet sisältävän tiedoston nimi ja hakupolku. Kirjoitetaan pienillä kirjaimilla kaikki yhdelle riville.

index.htm index.html default.htm default.html

Sivuston alkusivun/-sivujen tiedostonimi. On samantekevää mitä niistä käyttää, mutta molemmat indexit ovat yleisempiä ja defaultia näkee aniharvoin.

Sitä ei tarvitse kirjoittaa protokollaosoitteeseen, vaan palvelinkone tunnistaa sen ja osaa avata oikean tiedoston. Tällöin osoitteen on päätyttävä kauttaviivaan, että palvelinkone ei pitäisi viimeistä hakemistonimeä tiedostona, eikä löytäisi sitä. Kannattaa kuitenkin ottaa selvää, mitkä niistä on annettu palvelinkoneelle oletusarvoiksi. Jos palvelinkone ei tunnista esimerkiksi htm-päätettä, on joko kirjoitettava päätteeksi .html tai lisättävä index.htm protokollaosoitteeseen.

Yhdellä sivulla tapahtuvassa sivustossa index.htm(l) on sivuston alkusivu ja monikehyksisessä tiedosto, jossa määritellään kehysten määrä, sijainti, alkusivujen sisällöt, mitat ja nimet.

ELEMENTTI KÄYTTÖ

<html>

HyperTextMarkupLanguage on laiteympäristöstä ja käyttöjärjestelmistä riippumaton hypertekstin merkkauskieli, jota selainohjelmat pystyvät tulkitsemaan ja näyttämään sivuille sijoitetut elementit koodissa määritellyllä tavalla.

HTML ei ole ohjelmointia, sillä ei pysty tekemään kovin hienosäätöisiä muotoilua, sillä saadaan aikaan ensisijaisesti asemointipohja ja elementtien karkea sijoittelu, kuin talopaketti kantavine rakenteineen. Sitä voisi verrata myös muuttoon: yhdet pahvilaatikot kuuluvat olohuoneeseen, toiset keittiöön tai makuuhuoneeseen, ja vasta myöhemmin päätetään tavaroille oikeat paikat.

Jos haluaa tallentaa kirjoittamansa Word-tiedoston html-muotoon, on teksti ensin muotoiltava oikeaoppisesti tekstinkäsittelyohjelman tyyleillä, jolloin sivu säilyttää muotonsa myös selaimessa. Jos teksti on kirjoitettu huolimattomasti sarkaimilla ja välilyönneillä ja muotoiltu kohta kohdalta erikseen, teksti pysyy kyllä taulukon sisällä, mutta on paikoitellen niin kirjava ja sekaisin, että ei enää näytä vakuuttavalta.

HTML-merkintä jokaisen sivun alussa kertoo selaimelle, että sitä seuraava teksti on HTML-merkkausta. Se kirjoitetaan jokaisen sivun alkuun ja sen loppumerkki sivun viimeiseksi. Kaikki tagit kirjoitetaan pienillä kirjaimilla. Jos koko sivun kieli on jotakin muuta kuin suomea, se merkitään HTML-tagiin, esimerkiksi englanninkieliselle sivulle <html lang="en">. Ks. eurooppalaiset maatunnukset.

Syntaksi on aina sama: elementti attribuutti="arvo". Esimerkiksi <td valign="top">, <font size="2">, <table cellpadding="5">. Arvo kirjoitetaan sitaatteihin ilman mittayksikköä. Sitaatit ovat tärkeät: jos molemmat puuttuvat se ei haittaa, mutta jos toinen puuttuu, ei määritys toimi.

Tagit on kirjoitettava sisäkkäin kuin sipulinkuoret suurimmasta pienimpään, ei ristikkäin. Esimerkiksi <p><font size="2"><strong><em> tekstiä </em></strong></font></p>. Siis alussa ulkoa sisään ja lopussa sisältä ulos kuin kerroksittain.

Yksipalstaisen sivun perusrakenne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
	HTML 4.0 Transitional//EN">
<html>
<head>
<!-- Linkkiviittaukset, meta-tekstit ja JavaScriptit -->
<title>Sivun otsikko</title>
</head>

<body>

<div>
<table>

<tr><td><p>Tekstiä ja/tai kuvaa</p></td></tr>
<tr><td><p>Tekstiä ja/tai kuvaa</p></td></tr>
<tr><td><p>Tekstiä ja/tai kuvaa</p></td></tr>

</table>
</div>

</body>
</html>

<head>

Sisältää sivun tai sivuston otsikon, linkkiviittaukset, esimerkiksi CSS-tyyliohjetiedostoon, meta-tekstit ja JavaScriptien ensimmäisen osan, joiden jälkeen tulee head-osan loppumerkki.

<title>

Sivun tai sivuston nimi. Index-tiedoston head-osan alkuun kirjoitetaan sivustoa kokonaisuudessaan kuvaava otsikko ja muille sivuille kunkin sivun sisältöä kuvaava otsikko. Tämä on se tieto, jonka hakukoneet antavat haetun sivun tai sivuston otsikoksi. Myös loppumerkki on.

Title on myös tekstilinkin selitystekstielementti, kuvassa ja kuvalinkissä se on alt = alternative. Alt-teksti on kuitenkin merkittävä jokaiseen kuvaan, on siinä linkki tai ei.

<meta>

Meta-teksti tarkoittaa tekstiä tekstistä eli tiedostojen alkuun head-osaan kirjoitettavia tietoja sivustosta, kuten protokollaosoite, kuvaus, tekijä, copyright, sijainti, mahdollinen editori, käytetty merkistö ja koodit ja hakusanoja. Katso vaikka tämän sivun koodia valikosta View kohdasta Source eli "sorsakoodi". Ei loppumerkkiä.

Niitä kannattaa sijoittaa sivuston kaikille sivuille, koska hakukoneet kuitenkin hakevat yksittäisiä sivuja, vaikka sivusto olisikin monikehyksinen.

Sivuston löytymisen kannalta tärkeimpiä metatekstejä ovat sivuston title ja description. Keywordsin hakukoneet useimmiten sivuuttavat tänä päivänä sujuvasti, koska niissä on tapahtunut paljon huijauksia, kun sivulla ei ollutkaan luvattuja asioita. Hakukoneita voi kyllä vieläkin yrittää huijata, jos antaa sivustolle muualta tunnetun, mutta myös sivuston sisältöön sopivan nimen.

Katso syntaksia ja muita meta-tekstejä tarkemmin vaikka tämän sivun koodin alusta.

<body>

Koko sivua koskevat määritykset, kuten linkkivärit, taustaväri, taustakuva, tekstiväri, jos niitä ei ole määritelty tyyliohjetiedostossa. Html-koodissa väriarvot merkitään vain heksadesimaalilukuina. Tähän merkitään myös ne JavaScript-toiminnot, joiden kuuluu tapahtua samalla kun sivu avataan.

Sivua avattaessa käynnistyvä ääni merkitään myös tähän kohtaan. Esimerkiksi

<bgsound="caribbean.mid" loop="2" 
volume="-300" balance="0">,

jossa loop = toistojen määrä, volume = äänen voimakkuus kokonaislukuna -10 000 - 0, balance = stereoäänen säätö -10 000 - 10 000. Volyymin ja balanssin oletusarvo on 0 ja loop="infinite" toistaa niin kauan kuin sivu on auki.

<table>

Table = taulukko.

Html:llä tehdyn sivun välttämätön perusrakenne, jonka sisällä kaikki tapahtuu. Sivun voisi tehdä myös CSS-tyyliohjeilla ja diveillä ilman taulukkoa, mutta silloin tekstien leveyksiä on hankalampi arvoida prosentteina ja pikselimitat taas aiheuttavat hankaluuksia eri resoluutioilla. Lienee myös aika paljon makuasia käyttääkö taulukkoa vai ei, koska molempia puolustetaan tai vastustetaan juupas-eipäs -tyyliin yhtä intohimoisesti. Ylivoimaisesti suurin osa verkkosivuista on kuitenkin tehty taulukkoon.

Taulukon voi jakaa palstoihin (cols) ja riveihin (rows), html-tageilla sille voi määritellä solunsisäisen marginaalin (cellpadding), solujenvälisen marginaalin (cellspacing), taustavärin (bgcolor) tai -kuvan (background) ja reunaviivan (border). Taulukolle annetaan leveys prosentteina tai pikseleinä. Uloimmassa taulukossa ei kuitenkaan kannata käyttää arvoa 100%, ellei se sisällä useampia rinnakkaisia soluja, koska silloin sisältö lähtee heti näytön reunasta ja tekstiriveistä tulee luettavuutta haittaavasti liian pitkiä.

Taulukkoa ei tehdä pelkästään pieniä ja yksinkertaisia elementtejä, kuten otsikoita tai kuvia ja kuvatekstejä varten. Niitä voi sijoittaa päätaulukossa soluun, kappaleeseen ja diviin. Erilliseen taulukon sisäiseen taulukkoon solun ja divin sisään sijoitetaan esimerkiksi toisia taulukoita, hakemistoja tai luetteloita, jotka vaativat useampia ja eri kokoisia sarakkeita kuin mitä päätaulukossa on. Jos taulukoita on sisäkkäin monta, kannattaa jokaisen taulukon alkuun ja loppuun kirjoittaa  kunkin taulukon tarkoitus ja niiden alku ja loppu. Siten ne ovat myöhemmin päivitettäessä helpommin hallittavissa.

HTML:llä määritelty taulukon reunaviiva on käyttökelpoinen ainoastaan tekovaiheen tarpeellisena apuvälineenä. Kun reunaviivan paksuudeksi annetaan arvo 0, se ei enää näy lopputuloksessa. Jos haluaa tehdä koko taulukolle tai joillekin soluille reunaviivan se kannattaa tehdä mieluummin CSS:llä.

Seuraavassa esimerkki siitä, miten kaksipalstaisen taulukon solut asettuvat jos siihen sisältyy yksi solu, joka kattaa (colspan) kaksi palstaa (columns = cols), toinen solu, joka kattaa (rowspan) kaksi riviä (rows), kaksi palstanlevyistä solua ja miltä tekovaiheen oletusarvoiset reunaviivat näyttävät.

Taulukon leveys on 100 % sitä ympäröivästä solusta, sen palstaleveys 50 % taulukosta, reunaviivan leveys on 1 pikseli, sekä solunsisäisen että solunulkoisen marginaalin leveys 5 pikseliä, taustavärinä on vaalea harmaa heksadesimaalilukuna ja se on tasattu sitä ympäröivän solun vasempaan reunaan.

<tr> <td colspan="2">Asemointitaulukkoesimerkki</td> </tr>
<tr> <td rowspan="2">Tekstiä & kuvaa</td>	<td>Tekstiä & kuvaa</td> </tr>
	<tr> <td>Tekstiä & kuvaa</td> </tr>
<tr> <td>Tekstiä & kuvaa</td>	<td>Tekstiä & kuvaa</td> </tr>

</table>
</div>

<tr>

Table row = taulukon rivi.

Jokaisen uuden solurivin alku- ja loppumerkki.

<td>

Table data = taulukon sisältämä tieto eli yksi yksittäinen solu.

Html-tageilla soluun voi määritellä tasauksen (valign, align) keskelle (middle, center), ylös (top), alas (bottom), vasemmalle (left), oikealle (right) tai molempiin reunoihin (justify). Soluun voi liittää myös fontti-, taustaväri- ja taustakuvamäärityksiä.

Samassa solussa samalla rivillä samanaikaisesti ei voi tasata yhtä elementtiä vasemmalle ja toista oikealle, mutta CSS-tyyliohjeella se onnistuu.

Jos taulukossa on tyhjiä soluja, ne kannattaa täyttää tyhjällä merkillä   ja samoilla kappalemäärityksillä kuin naapurisolussakin on. Muuten kaikki solulle tehdyt määritykset - mm. näkymään tarkoitettu oletusarvoinen reunaviiva border="1" - eivät näy.

<div>

Division = lohko.

Div-tageilla ympäröidään sivua pienempiä kokonaisuuksia lohkoiksi, joihin voi kohdistaa erilaisia toimintoja. Diviksi voi lohkaista kappaleita, taulukon sisäisiä taulukoita, kuvia, kuvatekstejä tms., sen sisään voi upottaa toisia divejä ja siihen voi liittää vierityspalkin.

Tekstinkierrätyksessä jonkin elementin sisältävä div sijoitetaan html-koodissa aina ennen sitä kiertävää tekstikappaletta riippumatta siitä kelluuko se vasemmalle tai oikealle.

Kuvatekstissä kuva sijoitetaan diviin kellumaan jompaankumpaan reunaan ja teksti sen sisälle toiseen diviin kellumaan vasemmalle. Tekstin kelluttaminen ei kuitenkaan ole välttämätöntä kun diviin merkitään myös leveys, jolloin kuva ja teksti pysyvät allekkain ja teksti rivittyy kuvan levyiseksi. Tekstille on myös määriteltävä sopiva etäisyys kuvasta ja kokonaisille diveille voi tehdä oman tyyliohjeen.

Div on ikään kuin käärepaperi paketille, joka sisältää toisia, pienempiä paketteja, ja jolle annetuista määrityksistä riippuu paketin koko, ulkoasu ja sijainti.

<span>

Span = alue.

Sama kuin div, mutta koskee pieniä alueita, kuten yksittäisiä lauseita, sanoja tai kirjaimia kappaleen sisällä. Spanissa toimivat fontti- ja värimääritykset ja padding, mutta eivät margin ja line-height. Loppumerkki on.

<p>

Paragraph = tekstikappale.

P ei ole kappaleiden erotin vaan se rajaa kappaleen alueen, eli loppumerkkikin on oltava. Ennen CSS:ää on oltu myös sitä mieltä, että se ei ole välttämätön, mutta CSS-määritysten toimintaan sen poissaolo vaikuttaa haitallisesti.

Html-tageilla kappaleelle voi määritellä tasauksen (valign, align) keskelle (middle, center), ylös (top), alas (bottom), vasemmalle (left), oikealle (right) tai molempiin reunoihin (justify). Molempien reunojen tasausta ei kannata käyttää, koska suomen kielen sanat ovat siihen tarkoitukseen liian pitkiä ja tekstiin jää ikäviä aukkoja.

Html-oletusarvot ovat kovin karkeita ja mm. kappaleväliksi jää kokonainen yhden rivin tila. Kappaleelle voi tehdä hienosäätöisempiä muotoiluja CSS:llä.

<p> </p> -merkinnällä saa aikaan tyhjän rivin ja   -merkinnällä tyhjän merkin. Pelkkää tyhjän merkkiä ilman p-tagia ei kannata käyttää kappaleiden välisen tyhjän tilan tekemiseen, koska niitä tarvittaisi monta riviä, mikä kasvattaisi turhaan tiedoston kokoa. Tyhjän tilan voi tehdä tarvittaessa joko tyhjän merkillä p-tagin kanssa tai tyhjällä solurivillä.

 -merkinnällä sanan sisällä saa aikaan tavutusvihjeen, joka toimii jo kaikilla uusimmilla selainversioilla, ja &zwnj; -merkinnällä sanojen välissä tilaa viemättömän rivitysvihjeen.

Pre = preformatted = valmis, valmisteltu, esivalmisteltu.
Code = koodi.

Esivalmistellulla tekstillä on oletusarvoiset muotoilut, mutta sen sisällä voi käyttää sarkaimia, enteriä ja useampia välilyöntejä peräkkäin ja siihen voi liittää CSS-tyylejä. Se ei rivity automaattisesti. Esimerkkejä ovat mm. tämän sivun koodiesimerkit.

Voi käyttää myös tagia code, joka on muuten kuin pre, paitsi että se rivittyy automaattisesti eivätkä enter, sarkaimet ja yhtä useammat välilyönnit näy ja CSS-tyyleistä toimivat vain fontti- ja rivinvälimääritykset. Molemmilla on loppumerkki ja oletusarvoisena fonttina Courier New.

Blockquote = sitaattilohko, -palikka.

Tarkoitettu alun perin sitaattien sisennystä varten, mutta sopii mihin tahansa sisennystarkoitukseen. Sisentää kappaletta molemmista reunoista yhtä lailla. Oletusarvot tosin ovat kappalemäärityksen tavoin html:lle tyypillisesti kovin karkeat, joten tälle sisennykselle kannattaa tehdä hienosäätöisempi tyyliohje.

<dir>

Directory = hakemisto, luettelo.

Tarkoitettu alun perin luetteloiden sisennykseen, mutta sopii minkä tahansa tekstin sisennykseen. Sisentää vain vasemmasta reunasta.

<font>

Font = fontti.

Kirjasintyypin määritys. Html:ssä esimerkiksi <font face="Arial, Helvetica" size="2" color="#000000">. Ei sisällä lihavointeja ja kursivointeja. Loppumerkki merkitään määritetyn alueen loppuun. Fonttimääritys on kuitenkin parempi sisällyttää CSS:llä vaikka kappalemäärityksiin.

Otsikko

h = headline = otsikko.

Lihavoituja otsikkotyylejä html-tageilla. Pistekokoja esitetään myös arvoilla 1 - 7, joista arvo 2 vastaa CSS:llä määriteltynä 10pt ja html:n arvo 1 on suunnilleen sama kuin CSS:n arvo 7pt. Myös loppumerkki on.

Kissa arvolla 7 ja mirri arvolla 1.

Superscript = yläindeksi, subscript = alaindeksi.

Esimerkiksi m² ja H₂O. Molemmilla on loppumerkki. Indekseille on hyvä määritellä leipätekstifontista riippumatta fontiksi Arial ja pienempi pistekoko ja rivinväli, että ne eivät kasvattaisi leipätekstin rivinväliä. Muutoksista huolimatta toimii vain IE:llä ja Gecko-selaimilla, Operalla rivinväli kasvaa sekä ala- että yläindeksillä.

Yläindeksin saa aikaan myös koodilla ² eli (k)m² ja alaindeksin koodilla ₂, esimerkiksi H₂O. Molemmat toimivat hyvin kaikilla testiselaimilla eivätkä vaikuta leipätekstin rivinväliin.

Italic = kursivoitu, emphasize = korostaa.

Tavanomainen kursivointitagi on aikaisemmin ollut <i>. CSS-opas suosittelee joka paikkaan jälkimmäistä. Kysymys on kuitenkin samasta toiminnosta. Loppumerkki on.

Bold = lihavoitu, strong = vahvennettu.

Tavanomainen lihavointitagi on aikaisemmin ollut <b>. CSS-opas suosittelee joka paikkaan jälkimmäistä. Kysymys on kuitenkin samasta toiminnosta. Loppumerkki on.

<u>

Underline = alleviivaus.

Loppumerkki merkitään määritetyn alueen loppuun. Alleviivausta ei kannata käyttää ollenkaan varsinkaan leipätekstissä, koska se sekoittuu helposti linkkiin.

Unordered list = järjestämätön eli numeroimaton lista.
List item = lista-alkio.

tekee luettelomerkkejä, oletusarvoina disc, circle ja square
CSS:llä hienosäätö onnistuu, luettelomerkiksi voi liittää myös kuvan
jokaisen li-rivin loppuun tulee loppumerkki
ul on sisennys, joka tarvitsee myös loppumerkin

Listaelementtejä ei kannata missään nimessä keskittää. Luettelomerkki on listaelementin alun merkki, mikä edellyttää että ne kaikki ovat samassa linjassa. Luettelomerkin listaa selkeyttävä funktio katoaa, jos niitä joutuu etsimään joka riviltä eri kohdasta. Se ei ole kaunista, ei loogista eikä tarkoituksenmukaista.

Ordered list = järjestetty eli numeroitu lista.
List item = lista-alkio.

tekee numerollisia luettelomerkkejä
CSS:llä hienosäätö onnistuu
jokaisen li-rivin loppuun tulee loppumerkki
ol on sisennys, joka tarvitsee myös loppumerkin

Listaelementtejä ei kannata missään nimessä keskittää. Järjestysnumero on listaelementin alun merkki, mikä edellyttää että ne kaikki ovat samassa linjassa. Numeron listaa selkeyttävä funktio katoaa, jos niitä joutuu etsimään joka riviltä eri kohdasta. Se ei ole kaunista, ei loogista eikä tarkoituksenmukaista.

<br>

Break = katko, keskeytys, tauko.

Pakotettu rivinvaihto kappaleen sisällä. Ei loppumerkkiä. Merkintää ei saa käyttää rivitykseen, vaan ainoastaan silloin kun rivinvaihtoa tarvitaan esimerkiksi otsikon tai vaakaviivan jälkeen ja runoissa ja luetteloissa.

<nobr>

No break = ei katkoa, keskeytystä, taukoa.

Estää tagin alku- ja loppumerkin välisen alueen jakautumisen näytöllä kahdelle riville. Tätä on syytä käyttää esimerkiksi lukusarjoissa, kuten puhelinnumeroissa tai osoitteissa. Esimerkiksi puhelinnumeroiden pilkkoontumisen voi estää myös välilyönnit korvaavilla tyhjillä merkeillä   eli sitovilla välilyönneillä.

Image source = kuvan lähde, jossa src viittaa upotetun elementin hakupolkuun hakemistossa ja on välttämätön. Ei loppumerkkiä.

Kuvan hakupolussa käytetään kauttaviivoja. Esimerkiksi <img src="kuvat/dot.gif" alt="takaisin" hspace="10" border="0" align="center" valign="middle">. Kuvan hakupolun syntaksi on sama kuin sivustonsisäisten linkkien hakupoluissa.

<img src="kuva.jpg">
<img src="hakemisto/kuva.jpg">
<img src="hakemisto/hakemisto/kuva.jpg
<img src="../kuva.jpg">
<img src="../hakemisto/kuva.jpg">
<img src="../../hakemisto/kuva.jpg">

Kuvan ympärille voi jättää tilaa vaakasuunnassa (hspace) tai pystysuunnassa (vspace), jolloin arvoksi annetaan pikselimitta ilman mittayksikköä. Samankokoinen tila syntyy yhtä lailla elementin ylä- ja alapuolelle, vasemmalle ja oikealle.

Jos kuva on linkkinä, voi tagiin merkitä myös määrityksen border="0", joka poistaa linkin tuoman reunaviivan kuvasta. Linkki erottuu ilman sitäkin, koska linkin kohdalla hiiren kursori muuttuu aina kädeksi. Reunaviivan voi myös antaa olla ikään kuin kehyksenä, määritellä sille paksuuden ja CSS:llä värin tai kuvan väreihin sopivat omat linkkivärit.

CSS-tyyliohjeella kuvalle voi tehdä komeammatkin kehykset passe-partout'n kanssa, mutta kolmiulotteinen vaikutelma toimii täysin oikein vain Internet Explorerilla ja muilla Trident-selaimilla ja toiseksi parhaiten Operalla, joka vaatisi myös hiukan tummemmat värit vastatakseen IE:n määrityksiä. Katso ohje IE:n, Gecko-selainten tai Operan tyyliohjetiedostosta.

<a>

Anchor = ankkuri.

A href = hypertext reference = hypertekstiviittaus, linkkiviittaus.

Linkkiviittauksen alku. Esimerkiksi

<a href="http://www.lopola.fi/" target="_blank" 
title="Lopola">Lopolan tila</a>

Target = kohde, tapa, jolla sivu tai sivusto näkyy. Voi olla _self (sama kehys), _top (korvaa edellisen), _blank (uusi ikkuna), parent (linkki sivunsisäisestä kehyksestä sitä ympäröivään sivuun) tai sivustonsisäisillä, monikehyksisen sivuston linkeillä nimi, joka kehysten sijainnille on annettu: esimerkiksi left, right, top, bottom, rtop, ltop, rbottom, lbottom ja saman sivun sisällä _self. Jos targetia ei määritellä, oletusarvoina ovat _top ja _self.

Yhtä intohimoista kisaa kuin taulukon tarpeellisuudesta on käyty myös targetista. Jotkut väittävät, että _blank-targetin ainoana tavoitteena on vain pakottaa kävijä väkisin pysymään linkkisivulla ja että _top on ainoa oikea. Jotkut vastustavat jopa sivunsisäisiä linkkejä ja pop-up -ikkunoita, eli kaiken pitäisi tapahtua yhdessä tasossa, yhdessä ikkunassa yhdellä sivulla kerrallaan, mikä ei enää ole hypermediaa.

Oletetaan myös, että kohta on 10 ulkoista linkkiä kellumassa taustalla ja kuluttamassa koneen resursseja. Kuitenkin on helpompaa ja nopeampaa klikata ylimääräisiä ikkunoita kiinni, kuin monien sivujen tai sivustojen jälkeen palata selaimen takaisin-painikkeella samojen sivujen tai sivustojen kautta takaisin lähtöpisteeseen. Tai tulla vahingossa sulkeneeksi koko ikkunan, jolloin ei enää välttämättä muista mistä lähti. On myös muistettava mikä on linkkien tarkoitus: onko se umpimähkäinen huvisurffailu vai asiaan liittyvien lisätietojen saaminen?

Tässä ulkoisten linkkien target on _blank eli sivustot avautuvat uuteen välilehteen tai erilliseen selainikkunaan kellumaan edellisen päälle, niin että edellinen ikkuna jää alle avoimeksi, ja paluu takaisin on nopeampi. Jos target on _top, avautuu linkki samaan selainikkunaan korvaten edellisen. Verkossa valtaosa linkeistä on osoitettu erilliseen ikkunaan, mikä helpottaa myös navigointia, kun alkuperäiset ikkunat eivät katoa alta pois. Huomaa, että _top tarkoittaa linkin sisältävän sivuston korvausta, mutta top kehykselle annettua nimeä.

Toisen tekijän tekemää sivua tai sivustoa ei saa koskaan ohjata oman sivustonsa kehyksien sisään. Se olisi tekijänoikeusrikkomus. Ulkoisten linkkien ainoa mahdollinen target on joko _top tai _blank.

Monikehyksisen sivuston sivustonsisäisten linkkien target taas viittaa niihin nimiin, jotka sivuille on annettu index-tiedostossa niiden sijainnin perusteella. Nimet voi päättää itse muillakin perusteilla, kunhan muistaa ja tunnistaa ne helposti eikä käytä ääkkösiä. Tässä sivustossa ainoa sivustonsisäisen linkkisivun paikka on _top, koska tämä uusi versio toimii yhdessä kehyksessä.

Kun linkki johtaa saman sivuston toisen sivun tiettyyn kohtaan kirjoitetaan osoitteeseen sekä tiedostonimi että nimi, esimerkiksi mitat.htm#color.

Sivunsisäisille linkeille annetaan nimi a name tai id-tagilla, eikä osoitteeseen kirjoiteta sivun tiedostonimeä, vaan ainoastaan #nimi.

Title = otsikko, on tekstilinkin selitetekstin ja alt = alternative = vaihtoehtoinen, kuvalinkin selitetekstin merkintä. Seliteteksteissä toimii myös rivitys enterillä, mutta kaikki selaimet eivät näytä sitä, jolloin teksti näkyy yhtenä pitkänä rivinä. Title toimii kaikissa teksteissä, ei ainoastaan linkkitekstissä.

Jos linkitettävä sivu on samassa hakemistossa, hakupoluksi kirjoitetaan vain tiedostonimi. Jos se on jossakin muussa hakemistossa juurihakemiston ala- tai yläpuolella, hakupolkuun kirjoitetaan myös hakemistonimi ja merkintä ../, jos ollaan yhtä kerrosta alempana. Linkin syntaksi on seuraavien esimerkkien mukainen:

<a href="file.htm">linkki</a>
<a href="hak/file.htm">linkki</a>
<a href="hak/hak/file.htm">linkki</a>
<a href="../file.htm">linkki</a>
<a href="../hak/file.htm">linkki</a>
<a href="../../hak/file.htm">linkki</a>

Tiedostonimen perään lisätään vielä target ja title-teksti. Linkkitekstin tilalla voi olla myös kuva. Sama koskee myös sivulle sijoitettujen kuvien hakupolkuja. Absoluuttinen hakupolku eli koko http-protokollaosoite kirjoitetaan vain ulkoisille linkeille.

Area href = area hypertext reference = kuva-alueen hypertekstiviittaus, hotspot.

Linkkinimityksenä on käytetty myös karttalinkkiä, joka tarkoittaa linkkialueen koordinaattien 'kartoitusta' eli määritystä kuvassa. Määrityksellä ei ole loppumerkkiä.

<img src="kuvat/cover.jpg" 
	usemap="#cover" border="0">
<map name="cover">
   <area href="site.htm" target="_top" 
   coords="181,175,21" shape="circle" 
   alt="Sivuston tietoja, 
   Kurssin sisältö ja tavoitteet">
</map>

Esimerkissä linkkialue on pyöreä, circle. Koordinaatit etsitään lopullisesta kuvasta kuvankäsittelyohjelmassa, jossa mittayksiköksi on valittu pikseli. Ympyränmuotoisella alueella arvoiksi tulevat sen keskipisteen etäisyys koko kuvan vasemmasta ja yläreunasta (x,y) ja kolmanneksi ympyrän halkaisija pikseleinä.

Square = suorakaiteen muotoinen linkkialue. Koordinaatit etsitään alueen vasemmasta yläkulmasta ja oikeasta alakulmasta (x1,y1,x2,y2).

Poly = monikulmion muotoinen linkkialue. Koordinaatit etsitään monikulmion jokaisesta kärjestä (x1,y1, x2,y2, x3,y3 ...).

A name = ankkurinimi.

Linkkiviittauksen nimi. Jotta kohteeseen sivun sisällä voitaisi viitata, on sille annettava nimi. Esimerkiksi linkki <a href="typo.htm#jako" target="_top" title="kappalejako">rivitys</a> johtaisi tämän sivuston Typografia-sivun kohtaan Kappalejako, rivitys, tasaus, jos kyseiseen kohtaan olisi merkitty ankkuriksi <a name="jako">Kappalejako, rivitys, tasaus</a>.

Jos samaan ankkuriin liittyy sekä href että name, sijoitetaan molemmat saman ankkurin sisään ja niiden yhteiseksi loppumerkiksi tulee yksi </a>. Esimerkiksi <a href="typo.htm#kpl" target="_top" title="kappalejako" name="sil">silmäiltävyys</a>, jolloin toinen linkki jostakin muualta ohjautuisi vuorostaan juuri tähän kohtaan.

Name-attribuutiksi voi keksiä itse jonkin lyhyen ja selkeän, kulloistakin kohdetta kuvaavan yksiselitteisen ilmaisun. Ääkkösiä ei saa käyttää. Nimi ei saa alkaa numerolla eikä olla pelkkä numero, mutta se voi sisältää numeroita. Sama name saa olla kullakin sivulla vain yhden kerran.

Name on vanhempi tapa eikä toimi kaikilla selaimilla oikein, id on uudempi. Kaikki tämän sivuston nimet on merkitty id-tagilla.

<id>

Id = identification = tunniste.

Sama kuin name, mutta ilman loppumerkkiä. Mm. JavaScriptien, solujen, kuvien, linkkien, classien, divien ja sivunsisäisten linkkien yhteydessä. Se sijoitetaan jonkin html-tagin sisään: esimerkiksi table, tr, td tai p. Ääkkösiä ei saa käyttää. Nimi ei saa alkaa numerolla eikä olla pelkkä numero, mutta se voi sisältää numeroita. Sama id saa olla kullakin sivulla vain yhden kerran. Vertaa CSS:n id.

Id on uudempi tapa, name on vanhempi. Kaikki tämän sivuston nimet on merkitty id-tagilla. Huomaa, että tämä id on eri asia kuin CSS:llä tehty tyyliohje-id, joita sivulla voi olla useampiakin.

<hr>

Horizontal line = vaakaviiva.

Oletusarvoinen ohut linja, jolle voi määritellä värin ja pituuden. Ei loppumerkkiä. Pop-up -ikkunoiden lopussa on hr-viiva, mutta isojen sivujen alussa ja lopussa olevat vaakaviivat on tehty CSS:n reunaviivamäärityksillä.

Näillä sivuilla on pop-uppien viivalle pelkästään Operaa varten määritelty vaaleampi väri, jolloin se näyttää myös ohuemmalta. Muuten viiva olisi ollut Operalla aivan liian paksu ja musta verrattuna muihin selaimiin.

Frameset = kehysjoukko.

Index-tiedostossa monikehyksisen sivuston rakenteen määrityksessä ilmoitettava kehysjoukko. Loppumerkki on.

Frame source = kehyksen sisältö.

Index-tiedostossa monikehyksisen sivuston rakenteen määrityksessä ilmoitetaan kuhunkin kehykseen sijoitettava alkusivujen rakenteen mukainen html-tiedosto. Kehys siis ei ole varsinainen sivu, vaan sivun paikka. Ei loppumerkkiä.

Iframe = inline frame = sisäinen kehys.