Dandanes velika količina objav in publikacij izhaja v digitalni obliki, ponavadi v obliki objav na svetovnem spletu. Prav tako se večina publikacij, ki sicer izidejo v papirnati obliki predhodno pripravi na računalniku, v digitalni obliki.
Osnovne standarde za svetovni splet določa konzorcij W3C, posamezni produkti pa jih bolj ali manj dobro podpirajo. Gre zlasti za standarde, ki se tičejo odjemalca (spletnega brskalnika) in prezentacije vsebine v njem, predvsem za standarde za označevanje vsebine (HTML – Hyper Text Markup Language) in oblikovanje (CSS – Cascading Style Sheets). Te standarde dobro podpirajo praktično vsi moderni spletni brskalniki.
Za samo upravljanje vsebin je ponavadi zelo dobrodošel še sistem za upravljanje vsebin (CMS – Content Management System), ki omogoča uredniško urejanje spletnega mesta. Popularni sistemi za upravljanje vsebin so recimo WordPress ali pa MediaWiki, obstaja pa še velika množica drugih. W3C standardi so tipično primerni za uporabo v kateremkoli sistemu za upravljanje vsebin.
S primerno uporabo modernih W3C standardov je priprava vsebin enostavnejša in bolj dosledna, koda je krajša, oblikovanje pa bolj zmogljivo – npr. mogoče je isto vsebino prikazati na računalniku ali telefonu. Pomaga tudi pri boljši vidljivosti strani, saj take strani spletni iskalniki bolje rangirajo.
Eden od osnovnih principov je ločevanje vsebine in oblike. Vsebino označimo s semantičnimi (pomenskimi) oznakami (kot so npr. naslov, odstavek, glava, noga, tabela, slika, opomba, citat, itd.), potem pa v slogovni predlogi (stylesheet) določime parametre vizualnega oblikovanja, kot so razporeditev, barve, tipografije, obrobe, itd.
Označevalni jezik HTML
HTML je standard, ki definira označevanje semantično obogatenega besedila. Najširša uporaba je za spletne strani, uporablja pa ga npr. tudi za elektronske knjige v e-pub formatu. Podpira precej podobno strukturo dokumentov, kot jo imajo moderni urejevalniki besedila npr. LibreOffice ali pa MS Word.
Besedilo označujemo tako, da ga obkrožimo oznako (tag), takole:
<b>Krepko</b>, <em>poudarjeno</em> in <u>podčrtano</u>
To se potem v brskalniku kaže kot:
Krepko, Poudarjeno in podčrtano.
Vsem tagom lahko pripišemo atribut id, ki mora biti unikaten in atribut class, ki vsebuje enega ali več razredov, ki se lahko ponavljajo. To potem uporabimo za sklicevanje na elemente iz CSS. Npr.
<div id="del_1" class="oblika_1"> ... </div> <p class="centering">Centrirano na sredini</p> <p class="boxed centering">Obrobljeno in centrirano</p>
Cel dokument ima gnezdeno strukturo, ki gre za tipično HTML datoteko nekako takole:
<body>
<main>
<article id="a1">
<section>
<div>
<h1 id="n1">Naslov</h1>
<p>Besedilo, kar cel odstavek</p>
</div>
</section>
</article>
</main>
</body>
Najpogostejše in najbolj uporabni HTML tagi so:
Osnovno označevanje: div, span, nav
Kratke: p, a, b, i, q, u, s, em, br, h1-h6, sub, sup
Skupine: body, main, aside, article, section, header, footer
Semantične oznake: pre, blockquote, address
Spiski: ul, ol, li, dl, dl, dt, dd
Tabele: table, tr, th, td, caption
Slike: figure, img, figcaption
HTML5 Doctor – kratek in jedrnat povzetek vseh pomembnih HTML oznak, razvrščenih po skupinah, s kratkimi opisi in primeri uporabe.
MDN HTML Reference – podrobnejša dokumentacija
Oblikovalni jezik CSS
V HTML dokument lahko ključimo oblikovno predlogo (stylesheet). Ta se nahaja v ločeni datoteki, ki jo lahko izsto uporabimo za več HTML dokumentov.
Oblikovna predloga vsebuje zaporedje definicij, od katerih je vsaka sestavljena iz selektorja in ene ali več lastnosti. Selektor določa, na katere HTML elemente se definicija nanaša, lastnosti (properties) pa določajo obliko in/ali obnašanje.
body { background: #eee; font-family: Times New Roman,Times,serif; }
article { background: white; }
p { color:blue; }
h1,h2,h3 {
color:red; text-align: center;
font-family: Helvetica Neue,Helvetica,Arial,sans;
border-bottom: 1px solid gray;
}
#del_1 { border: 1px dashed gray; }
.oblika_1 { font-size: 80%; }
.centering { text-align: center; }
.boxed { padding: 1em; border: 1px solid black; }
/* legenda: selektorji lastnosti */
Pomembne CSS lastnosti: display, position, border, padding, margin
cssreference.io – kratek in jedrnat povzetek CSS lastnosti
MDN CSS Reference – podrobnejša dokumentacija
Pripomočki
Inspect element funkcija v brskalniku je odlična za pregledovanje strukture strani, CSS lastnosti elementov, mrežno aktivnost in še kaj. Običajno je dostopna tako, da z desnim gumbom kliknemo na element na spletni strani in izberemo “Inspect element”.