Imate izdelano spletno stran ali spletno trgovino, ki zahteva znanje za urejanje HTML modulov? Naj vas to ne preseneti. Veliko spletnih strani uporablja HTML module kot dodatke, saj z njimi lahko dosežemo lepo in dinamično spletno stran, katere z osnovnimi funkcijami spletnih platform morda ne bi mogli doseči. Že res, da morda HTML-ja ne poznate, vendar zato smo vam spodaj pripravili nekaj nasvetov, ki naj vam bodo v pomoč pri urejanju HTML modulov.
Značke
Značke načeloma ne potrebujejo zaključka, vendar ga priporočamo saj s tem povemo do kam naj seže učinek željene značke. To vam najlažje lahko razložimo na primeru.
1. Samostojne značke:
- <br> pomeni BREAK in s to značko lahko dosežete prelom besedila v novo vrstico.
- Danes je lep sončni dan.<br>Želim se igrati zunaj. > Rezultat:
Danes je lep sončni dan.
Želim se igrati zunaj.
2. Začetne in končne značke
– Poudarjeno: <b>Bold</b> > Rezultat: Poudarjeno
– Poševno: <i>Italic</i> > Rezultat: Poševno
Če bi želeli združiti zgornja dva primera, bi to lahko storili tako:
Danes je lep sončni dan.<br><b>Želim se igrati zunaj.</b>
Danes je lep sončni dan.
Želim se igrati zunaj.
Urejanje besedila
Poleg zgoraj navedenih značk, lahko za oblikovanje besedila uporabite tudi druge značke, s katerimi lahko dosečete poljuben efekt.
1. Oblikovanje črk:
Poudarjeno (Bold): <b>Bold</b>
Poševno (Italic) <i>Italic</i>
Podčrtano (Underline) <u>Underline</u>
Tiskano (Typewriter) <tt>Typewriter</tt>
Prečrtano(Prečrtano)<strike>Prečrtano</strike>
2. Poravnava besedila
Besedilo lahko poravnavamo na levo ali desno stran oz. sredino. To lahko dosežemo z lastostjo ALIGN.
<p align="right">To je testno besedilo.</p> <p align="left">To je testno besedilo.</p> <p align="center">To je testno besedilo.</p>
Povezave (URL)
Če želite doseči, da nek določen element delujet kot povezava, mu boste morali dodati element “href”. Gre pravzaprav za t.i. hyperreference oz. hiper povezavo. Tu vstavimo pot do naslova, ki ga želimo prikazati. Lahko gre za spletni naslov spletne strani (npr. https://touchstudio.si) ali pa ime datoteke z relativno potjo (imedatoteke.html).
1. Absolutni naslov:
Torej, absolutni naslov pomeni, da prikličemo cilj, ne vezano na to, kje se nahajamo. Če bi želeli prikazati povezavo na https://touchstudio.si bi to lahko dosegli tako:
- <a href=”https://touchstudio.si“> https://touchstudio.si </a>
- REZULTAT: https://touchstudio.si
Če bi ime povezave želeli spremeniti, bi zamenjali zeleno besedilo:
- <a href=”https://touchstudio.si“> https://touchstudio.si </a>
- <a href=”https://touchstudio.si“> POLJUBNO BESEDILO </a>
- REZULTAT: POLJUBNO BESEDILO
2. Relativni naslov
Relativne naslove uporabljamo predvsem za priklic določenih datotek (npr: slike ali pa tudi datoteke za prenos). Edina stvar na katero morate biti pozorni je izhodiščna točka. Torej:
- če sta izhodiščna datoteka in klicana datoteka v ISTI mapi je dovolj, da navedete le ime datoteke:
<a href=”imeslike.jpg”> Klikni za sliko</a> - če je klicana datoteka v podmapi (vezano na izhodniščno datoteko!), je poleg imena datoteke potrebno navesti tudi ime podmape in ju ločiti s poševnico:
<a href=”imepodmape/imeslike.jpg“> Klikni za sliko</a> - če je klicana datoteka v mapi, ki je višje, glede na izhodiščno datoteko moramo poleg imena datoteke dodati še “..”, prva pika predstavlja izhodišče, vsaka nadaljna eno mapo višje po drevesu direktorijev:
<a href=”../imeslike.jpg“> Klikni za sliko</a>
3. E-poštna povezava
Seveda je kot povezavo mogoče uporabiti tudi klic za pošiljanje elektronske pošte. S klikom na tovrstno povezavo bo odprl naš privzeti e-poštni odjemalec (npr. Outlook).
- <a href=”mailto:ime@imedomene.si“> POŠLJI ELEKTRONSKO SPOROČILO </a>
- REZULTAT: POŠLJI ELEKTRONSKO BESEDILO
Slike
V spletnih straneh najpogosteje uporabljamo slike formata .jpg in .png. Pri izbiri slik bodite pozorni na njihovo kvalitetno in še pomembneje njihovo optimizacijo.
- Prikazovanje slike: <img src=”logo.png“>
- Določanje velikosto: <img src=”logo.png” height=”50px” width=”20px“>
- Slika kot povezava: <a href=”https://www.imezeljenepovezave.si“> <img src=”logo.png” height=”50px” width=”20px“></a>