Označevalni jeziki in struktura spletne strani

Predstavitev podatkov in informacij na spletu 

Z označevanjem dokumentov določimo, kako naj bodo oblikovani določeni podatki ali deli besedila. Izraz izhaja iz označevanja rokopisov, kjer so pregledovalci besedila ob robu strani zapisali spremembe, ki jih je bilo treba narediti. (Anželj idr., 2015) 

Če si pri zapisovanju besedila kdaj uporabil(-a) več barv ali markerjev in si tem barvam pripisal(-a) pomen (npr. z rumenim markerjem so označeni pomembni deli besedila, definicije so zapisane z rdečo itd.), si že označil(-a) dokument. Tako si besedilu dodal(-a) dodatno plast informacij, v tem primeru vizualne namige glede vloge oziroma namena delov besedila (Anželj idr., 2015).  

Nekateri izmed označevalnih jezikov (ang. markup languages) so na primer jeziki za označevanje hiperteksta (HTML), razširljiv označevalni jezik (XML) in razširljiv jezik za označevanje hiperteksta (XHTML). Vsi ti označevalni jeziki so nastali zaradi določenih potreb, povezanih s predstavitvijo oblike in strukture besedila (Anželj idr., 2015). 

Izvor označevalnih jezikov

Izvor besedne zveze »označevalni jezik« izhaja iz postopka stavljenja besedila (ang. typesetting) pred tiskom v tiskarni, pri čemer je urednik dele besedila ob robu označil z navodili oziroma pripombami glede oblikovanja in kasneje tudi glede pomena določene vsebine. Ta vidik pomenskega označevanja delov besedila pa je postal bistven pri uporabi označevalnih jezikov (Anželj idr., 2015). 

Razmerja med označevalnimi jeziki 

HTML (ang. Hypertext Markup Language) je označevalni jezik, ki ga uporabljamo za izdelavo spletnih strani. Z njim opišemo gradiva, ki jih želimo objaviti na spletu, in sicer lahko spreminjamo tip pisave, velikost in stil, vključujemo lahko slike, povezave, sezname itd. (Načrtovanje in razvoj spletnih aplikacij (NSA), b. d.). Na primer, v označevalnem jeziku HTML lahko zavijemo besedno zvezo “Hello world!” z elementom <strong> za krepko pisavo (Agence Web Tremplin Numérique, 2021). 

<strong>Hello world!</strong> 

Ko to besedilo obdela pregledovalnik HTML, kot je spletni brskalnik, bo prikazano kot: 

Živjo svet! 

Primer HTML kode spletne strani – http://zaversnik.fmf.uni-lj.si/gradiva/html/index.php:

Povezave, osnovno strukturo in osnovno oblikovanje dokumentov izvedemo tako, da med besedilo, ki predstavlja vsebino dokumenta, vrinemo posebne značke. Ker je zapis v obliki HTML elementov, podrobneje elementi, ki so zapisani v lomljenih oklepajih (npr. <p> ), lahko HTML izdelamo v vsakem urejevalniku besedil (npr. beležnica, Notepad++, Sublime Text, itd.). HTML elementi so običajno zapisani iz začetne in končne značke npr. <p> in </p>, kjer je <p> začetna in </p> končna značka (Načrtovanje in razvoj spletnih aplikacij (NSA), b. d.). 

Tako HTML, kot tudi XML (ang. eXtensible Markup Language) izvirata iz označevalnega jezika, imenovanega SGML (ang. Standard Generalized Markup Language). SGML je zapleten niz pravil, ki definirajo strukturo dokumentov. XML je podmnožica SGML, ki počne isto stvar, pri čemer uporablja manj pravil. Ker je XML manj zapletena izpeljanka SGML, ga lažje izvajamo v velikih omrežjih, kot je internet. Osnovna vloga XML je definirati podatke (Anželj idr., 2015). 

Spletni brskalniki uporabljajo kombiniran mehanizem za razčlenjevanje in predstavitev, ki dopušča pomanjkljivo označevanje. Brskalniki pomanjkljivo označevanje prezrejo, ali pa skušajo uganiti, kje bi se morale nahajati manjkajoče značke HTML. Če brskalnik naleti na značko ali lastnost značke, ki je ne prepozna, potem to značko ali element enostavno prezre oziroma ne prikaže (Anželj idr., 2015). 

Ohlapna, nenadzorovana narava jezika HTML onemogoča natančno predvidevanje, kako bo spletna stran prikazana. Brskalniki poskušajo na zaslonu upodobiti nekaj, pa čeprav morda izgleda nenavadno, namesto da bi pri preverjanju prikazali sporočila o napaki. Ker je HTML usmerjen k predstavitvi, uporablja značke za oblikovanje in definiranje strukture. Zapletenost oblikovanja HTML lahko oteži iskanje podatkov v dokumentih HTML. HTML prvotno ni bil zasnovan za zagotavljanje natančnega nadzora nad postavitvijo elementov strani. Zato profesionalni oblikovalci spletnih strani uporabljajo preglednice, slogovne predloge in druge tehnike za nadzor umestitve besedila in grafike. Tako ustvarijo oblikovno dodelane spletne strani na račun jasne strukture dokumentov. Pomanjkanje doslednosti v strukturi dokumentov HTML računalniškim programom otežuje iskanje, pridobivanje ali posodabljanje podatkov. XML rešuje to težavo tako, da zahteva pravilno strukturo in sintakso dokumentov (Anželj idr., 2015). 

Ker je jezik XML razširljiv, omogoča uporabnikom ali skupinam uporabnikov, da sami definirajo lastne označevalne jezike, ki temeljijo na jeziku XML. Spodnja tabela vsebuje najpogosteje uporabljane označevalne jezike (tudi tiste, ki temeljijo na jeziku XML) (Anželj idr., 2015). 

Meta označevalni jezik Opis
SGML Standardni splošni označevalni jezik, ki je zelo zapleten in na katerem temelji večina drugih označevalnih jezikov.
XML Razširljiv označevalni jezik, ki je enostavnejši od SGML in hkrati ponuja vse, kar ponuja SGML.

 

Označevalni jezik Opis
ChemML
XML		 Kemijski označevalni jezik podpira širok spekter kemijskih konceptov, na primer molekule, reakcije snovi, spektri, kristalografija, materiali in drugo.
Europass XML
XML		 Europass XML označevalni jezik je namenjen ustvarjanju in prenosu standardiziranega življenjepisa, uporabnega za spremljanje kvalifikacij in mobilnosti povsod v EU.
HTML Izvirni označevalni jezik za izdelavo spletnih strani, ki je nastal iz SGML hkrati z nastankom svetovnega spleta.
KML in GML
XML		 Označevalna jezika za izmenjavo geografskih informacij med različnimi geografskimi informacijskimi sistemi (GIS). Splošnejši je GML, Google Earth pa uporablja KML.
Markdown Preprost označevalni jezik, ki teži k temu, da bi bila tudi izvorna koda čim bolj berljiva oziroma da so značke čim manj vsiljive.
MathML
XML		 Matematični označevalni jezik služi opisu, zajemanju strukture in vsebine matematičnih formul ter integraciji matematičnih formul v spletne strani in druge dokumente.
MusicXML
XML		 Glasbeni označevalni jezik je zasnovan za izmenjavo partitur, zlasti med različnimi programi za zapisovanje glasbe.
SVG
XML		 Scalable Vector Graphics (SVG) je označevalni jezik za ustvarjanje 2D grafike s podporo za interaktivnost in animacijo.
TeX, LaTeX Označevalni jezik za opis kompleksnih tipografij in postavitev strani, ki ga pogosto uporabljamo za matematične, tehnične in akademske publikacije.
Wiki markup Označevalni jezik, ki ga uporablja Wikipedija in WikiMedia.
XHTML
XML		 HTML preoblikovan v sintakso XML, kar pomeni dosledno pravilno strukturo in sintakso dokumentov.

Preden se naučimo podrobnosti razvoja spletnih strani, ki ga sestavljajo HTML, CSS in JavaScript, je pomembno, da razumemo tehnologije, ki preoblikujejo besedilne datoteke v bogate večpredstavnostne spletne strani, ki jih vidimo na zaslonu računalnika, tablice, mobitela ali druge naprave, medtem ko brskamo po svetovnem spletu. Razumeti moramo, da je besedilna datoteka, ki vsebuje značke HTML in stopničaste slogovne predloge CSS, neuporabna brez spletnega brskalnika ter, da spletne strani ne bo videl nihče, razen nas, če ni na spletnem strežniku vključena v svetovni splet (Anželj idr., 2015). 

Omenili smo že, da moramo pri razvoju spletnih strani poznati vsaj tri temeljne tehnologije. Jezik HTML, s pomočjo katerega zgradimo ogrodje oziroma strukturo spletne strani. S pomočjo stopničastih slogovnih predlog CSS oblikujemo predstavitev informacij. Programski jezik JavaScript pa nam omogoča spreminjanje vedenja delov spletne strani, kadar uporabniki komunicirajo s spletno stranjo (Anželj idr., 2015). 

Predstavitev informacij na spletu by Gregor Anželj is licensed under CC BY-NC-SA 4.0

V nadaljevanju si bomo ogledali dva izmed treh osnovnih tehnologij, potrebnih za razvoj spletnih strani – HTML in CSS. Poleg teh osnovnih tehnologij pa spletni razvijalci uporabljajo različna ogrodja (ang. frameworks), na primer Bootstrap, jQuery in podobna, ki jim olajšajo razvoj spletnih strani ali spletnih aplikacij. 

Vsebina na tej spletni strani vzeta po:

Dostopnost