Izdelava spletnih strani 123

You are here: Home / Izdelava spletnih strani / Izdelava spletnih strani v HTML5

Izdelava spletnih strani v HTML5

by 2 komentarja

V prispevku si bomo ogledali, kako izdelamo spletno stran v HTML5. Znanje, ki ga boste pridobili v vodiču je zelo uporabno tudi za tiste, ki že imate spletno stran in bi jo radi nekoliko uredili, kakor tudi za popolne začetnike in tiste z malo računalniškega znanja. Znanje izdelave spletnih strani v HTML5 vam lahko pride prav tudi, če uporabljate odprtokodne rešitve kot so CMS sistem WordPress, saj slednji omogoča vnos popravkov v HTML. Slednji pa se lahko doda tudi v gradnikih WordPress vmesnika ipd. Izdelovanje osnovnih strani v HTML je preprosto. Znanje programiranja ni potrebno. Dovolj je osnovno znanje uporabe računalniških programov kot so Notepad. ipd.

Osnovna struktura HTML dokumenta

Spodaj vam bomo predstavili osnovno strukturo HTML dokumenta.

<html>
     <head>
          <title>Naslov</title>
     </head>
     <body>
          <p>Vsebina</p>
     </body>
</html>

HTML dokument je sestavljen iz HTML značk (ang. tags). Osnovne značke, ki se nahajajo v zgornji kodi so html, head, title, body ter p. Z značkami definiramo HTML element. Značko odpremo in zaključimo z ogladim oklepajom (< ter >). Nekaterih značk ni potrebno zaključiti. V primeru, da značko želimo zaključiti, pred zaključni oglati oklepaj dodamo še poševnico (/). Imena značk so v angleščini in pogosto že nakazjujejo čemu služijo. Spodaj bomo podrobneje predstavili značke iz zgornje kode.

  • HTML značka <html> – zs HTML značko html povemo, da gre za html dokument. Vso vsebino naše spletne strani moramo zapisati znotraj html značke.
  • HTML značka <head> – HTML značka head prestavlja nevidni del dokumenta ter predstavlja njegovo glavo. Vsebina znotraj head značke se ne izpiše v oknu brskalnika in uporabniku ni vidna.
  • HTML značka <title> – HTML značka title predstavlja naslov strani in se mora obvezno nahajati znotraj značke head. Naslov se ne izpiše v vsebini brskalnika temveč je viden v posameznem zavihku okna brskalnika.
  • HTML značka <body> – HTML značka body predstavlja telo dokumenta. V njem se nahaja vsebina našega dokumenta oz. spletne strani in to je vsebina, ki se uporabniku prikaže v oknu brskalnika.
  • HTLM značka <p> – HTML značka p predstavlja odstavek (ang. paragraph) vsebine.

Za vajo lahko zgornjo kodo prekopirate v Beležko (Notepad) ter jo shranite (File > Save As > pod “Save as type” obvezno izberite “All files” ter pod ime datoteke (File name) zapišite “moja-prva-spletna-stran.html”). Dvokliknite na datoteko in odprla se vam bo stran v privzetem spletnem brskalniku. Čestitamo, ustvarili ste vašo prvo spletno stran. Če imate pri izdelavi strani težave, nas lahko povprašete v komentarjih in vam bomo pomagali.

HTML 5 predloga

V prejšnjem poglavju smo si ogledali, kakšna je osnovna struktura HTML dokumenta, v tem pa bomo predstavili HTML 5 skladno predlogo. Za skladnost slednje, bomo dodali le nekaj novih značk.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Naslov</title>
     </head>
     <body>
          <p>Vsebina</p>
     </body>
</html>

Z oznako DOCTYPE smo deklarirali dokument. Deklaracijo moramo obvezno zapisati pred prvo HTML oznako.

Z metapodatkom <meta> ter atributom “charset” z vrednostjo UTF-8, smo brskalniku povedali, da lahko vsebina vsebuje slovenske znake (šumnike).

HTML elementi

HTML element je definiran s HTML značko. Poglejmo si nekaj najpogosteje uporabljenihHTML elementov.

  • Komentar – komentar v več vrsticah znotraj kode lahko zapišemo tako, da ga začnemo z oznako <!– ter zaključimo z oznako –>. Komentar se ne bo izpisal v oknu brskalnika in uporabniku na strani ne bo viden. Vendar pozor. Do komentarja bo uporabnik še vedno lahko dostopal, če si bo ogledal kodo strani.
  • Naslovi in podnaslovi – naslove oz. podnaslove zapišemo s HTML elementom <h1>Naslov 1</h1>. Poznamo 6 HTML elementov za naslove. Torej zadnji HTML naslov ima HTML značko <h6>.
  • Odstavek – HTML značko za odstavek smo že omenil, a jo bomo še enkrat, saj je pomembna. Torej HTML element za odstavek je <p></p>.
  • Nova vrstica – v novo vrstico prestopimo s HTML elementom <br />.
  • Vodoravna črta – vodoravno črto zapišemo s HTML elementom <hr>.
  • Koda – kodo zapišemo znotraj HTML elementa <code></code>.
  • Nadpisano besedilo – besedilo lahko nadpišemo s HTML elementom <sup></sup>.
  • Podpisano besedilo – besedilo lahko podpišemo s HTML elementom <sub></sub>.
  • Slika – sliko dodamo s HTML elementom <img src=”https://potdoslike” alt=”besedilo” />.
  • Povezava – povezavo dodamo s HTML elementom <a href=”https://povezava”>besedilo</a>.
  • Oštevilčen seznam – s HTML značko <ol> (ang. ordered list) napovemo oštevilčen seznam, s HTML značko <li> pa posamezni element seznama. Primer:
<ol>
     <li>Prvi element seznama</li>
     <li>Drugi element seznama</li>
</ol>
  • Neoštevilčen seznam – s HTML značko <ul> (ang. unordered list) napovemo neoštevilčen seznam, z značko <li> pa posamezni element neoštevilčenega seznama. Primer.
<ul>
     <li>Prvi element neoštevilčenega seznama</li>
     <li>Drugi element neoštevilčenega seznama</li>
</ul>
  • Tabela – TAbelo označimo s HTML značko <table>, vrstico s <tr> (ang. table row), naslov ima oznako <th> (ang. table heading), podatek v celici pa <td> (ang. table data).
  • Obrazec – obrazec ima HTML značko <form>. Slednji lahko vsebuje še atributa action – definira naslov za pošiljanje podatkov ter method (get ali post) – definira način pošiljanja.
  • Vnosno polje – vnosno polje označimo s HTML značko <input>. Kot atribut “type” mu lahko določimo vrednost text, password, checkbox, submit, radio.
  • Izbirni seznam – izbirni seznam označimo s HTML značko <select>. Vrednosti določimo s HTML značko <option>. Primer:
<select name="seznam">
     <option value="vrednost-1">Vrednost 1</option>
     <option value="vrednost-2">Vrednost 2</option>
</select>
  • Besedilo (kontrolni element) – besedilo označimo s HTML značko <textarea>. Primer:
<textarea name="ime" rows="3" cols="6">
Besedilo
</textarea>
  • Element <div> – HTML element div poveže več elementov v skupino oziroma blok in je v osnovi neviden.
  • Element <span> – Služi označevanju in oblikovanju besedila.

Obliko in velikost besedila določimo s CSS o katerem bomo več napisali v ločenem vodiču, a vseeno obstaja nekaj HTML elementov, s katerimi lahko deloma oblikujemo sam izgled.

  • Poševno besedilo – Besedilo lahko zapišemo poševno s HTML elementom <i></i>.
  • Poudarjeno besedilo – Besedilo lahko poudarimo s HTML elementom <strong></strong>.
  • Poudarjeno besedilo – besedilo lahko poudarimo tudi s HTML elemetom <em></em>.

Priporočamo vam, si vse HTML elemente dobro ogledate ter naučeno utrdite tako, da izdelate enostavno spletno stran. Seveda obstaja še več HTML elementov.

V vodiču so bile predstavljene le grobe osnove. Če imate kakšno vprašanje o izdelavi spletnih strani s HTML 5, ga lahko zastavite v komentarjih in vam bomo pomagali.

Izdelava spletnih strani v HTML 5
Srečno pri izdelavi spletnih strani v HTML 5!

Reader Interactions

Comments

Dodaj odgovor