Uvod v HTML: Temelj spletnega sveta
HTML (HyperText Markup Language) je temelj jezika spleta. Omogoča strukturiranje vsebine na spletnem mestu - od besedil in slik, do povezav in tabel. Brez HTML-ja splet, kot ga poznamo, preprosto ne bi obstajal.
HTML se je pojavil v začetku 90-ih let pod vodstvom Tima Bernersa-Leeja. Znanje HTML-ja odpira vrata v svet spletnega razvoja. Tudi če uporabljate CMS sisteme kot WordPress, osnovno poznavanje HTML-ja omogoča prilagajanje spletne strani po meri. Prav tako izboljša razumevanje SEO optimizacije in uporabniške izkušnje.
Učenje osnove HTML kode je prvi korak v svet spletnega ustvarjanja! S pravilnim razumevanjem struktur in oznak lahko začnete graditi profesionalne spletne strani in poglobite svoje znanje v sodobne tehnologije.
Gradniki HTML: Oznake (Tags) in Elementi
HTML kodo pišemo z značkami (ang. tag). Oznake so gradniki HTML-ja. Vse značke pišemo med levo kazalko (ang. caret) < in desno kazalko >.
HTML element je navadno sestavljen iz začetne oznake, vsebine in končne oznake. Elementi, ki nastopajo v paru, imajo začetno in končno oznako. Pri teh elementih velja, da se končna oznaka od začetne razlikuje po dodatni poševnici /. Primer: <p>To je odstavek.</p>.
Nekatere značke lahko uporabimo tudi tako, da objemajo del besedila. Prazni elementi, imenovani tudi elementi brez vsebine, nimajo zaključne oznake. Samostojne značke ne rabijo zaključka.
Pomni: Prazni elementi nimajo končne oznake. Primeri praznih značk so <br> (prelom vrstice) in <img> (slika).
Atributi HTML elementov
Večina oznak pozna dodatna pojasnila oziroma lastnosti, ki jih imenujemo atributi. Z atributi predpišemo dodatne lastnosti elementa.
Atribute zapisujemo v začetni oznaki elementa. Vrednost atributa običajno zapišemo med narekovaje. Čeprav so v nekaterih primerih možne tudi vrednosti brez narekovajev, je zaradi preglednosti in manjše možnosti za napake priporočljivo, da narekovaje vedno uporabljamo. Primer: <a href="stran.html">Povezava</a>.
Struktura HTML dokumenta
Vsak HTML dokument začnemo ter zaključimo z značkama <html> ter </html>. Spletna stran je sestavljena iz različnih elementov, na primer naslovov, odstavkov, slik, seznamov, tabel in povezav. Glavni sekciji HTML dokumenta sta glava (<head>) in telo (<body>).
Glava (`<head>`)
Glava oz. <head> je pomemben del HTML dokumenta. Znotraj glave dokumenta z značko <title> določimo naslov strani, ki bo prikazan v spletnem brskalniku oziroma na zavihku. Tu se nahajajo tudi meta podatki (metadata), to so podatki o stilu dokumenta, katere JavaScript knjižnice uporablja dokument, naslov in CSS datoteke. V glavi opišemo dokument, določimo obliko posameznih elementov in vključimo lahko pomožne datoteke. Vsebine, ki jih določimo v glavi, prikazovalnik ne prikaže v svojem oknu.
Telo (`<body>`)
Značka <body> označuje del HTML dokumenta, ki je viden uporabniku. To je sekcija, ki vsebuje dejansko vsebino strani, ki nam jo bo prikazal spletni brskalnik. <body> je pravzaprav sestavni del vseh dokumentov HTML.
Najbolj uporabne HTML značke
Analizirali smo najbolj priljubljena spletna mesta, da bi ugotovili, katere so najbolj uporabljene HTML značke. V tem članku bomo razložili naš seznam najbolj uporabnih HTML značk, ki jih boste pri svojih projektih veliko uporabljali. Poleg tega imajo vsi tagi kratek opis, tako da lahko takoj vidite, kaj omogočajo.
Naslovi (Headings): Od h1 do h6
Na voljo imamo šest nivojev naslovov (headings) h1 do h6. Oznake h1, h2, ... se uporabljajo za ustvarjanje naslovov. Npr.: h3 je podnaslov znotraj podnaslova h2.
Zakaj potrebujemo naslove? Naslovi se na primer uporabljajo tako, da iskalniki (npr. Google) prepoznajo vsebino in glede na to prikazujejo vsebino.
Primeri:
- <h1>Napisano z velikostjo 1.</h1>
- <h3>Napisano z velikostjo 3.</h3>
Odstavki (`<p>`)
Značka za odstavek <p> (paragraph) razvrsti besedilo v odstavek. Tako je njen namen ločiti del besedila ali odstavka. Brskalnik med odstavki običajno naredi prazno vrstico.
Primer:
<p>To je članek osnove HTML, to bo v prihodnosti vaš plonk listek, kjer boste lahko pogledali in ga preprosto uporabili.</p><p>Prva značka o kateri bomo govorili je značka za krepko besedilo. Poudarja besede ali stavke...</p>
Prelomi vrstic (`<br>`)
Z značko <br> (break) brskalniku sporočimo, kje želimo dodati prelom vrstice ali prazno vrstico v besedilu. <br> je samostojna značka in ne potrebuje zaključne oznake.
Primeri:
Prva vrstica besedila.<br>Druga vrstica po prehodu.Prva vrstica besedila.<br />Druga vrstica po prehodu.
Poudarjanje in oblikovanje besedila
Če imate veliko besedila, morate poudariti določene besede, da lahko bralcu sporočite, kaj je pomembno.
Krepko besedilo (`<strong>`, `<b>`)
Za krepko besedilo uporabljamo značko <b>. Za poudarjanje besed, ki imajo dodaten pomen in jih upoštevajo tudi iskalniki (npr. Google), pa uporabljamo značko <strong>.
Poševno besedilo (`<em>`, `<i>`)
Značka <i> omogoča izpostaviti posamezne dele besedila s poševnim načinom pisanja (italic). Za poudarjeno besedilo z dodatnim semantičnim pomenom uporabljamo značko <em> (emphasis).
Vrstični elementi (`<span>`)
Značka <span> (span tag) združuje besedilo, za katero želimo imeti drugačen slog. Gre za vrstični element, s katerim označimo npr. del besedila, ki ga želimo stilizirati.
Povezave (`<a>`)
Ni presenečenje, da je značka za povezavo <a> (anchor) najbolj uporabljena HTML značka. Glavni atribut te HTML značke je atribut href (referenca hiperteksta), s katerim določimo spletni naslov (URL) povezave (relativni ali absolutni naslovi). Sliko lahko uporabimo tudi kot sidro.
Slike (`<img>`)
Za prikaz slik uporabljamo HTML značko <img>. Ta značka je samostojna in ne potrebuje zaključne oznake.
- Z atributom src navedemo URL pot do slike.
- Z atributom alt pa navedemo opis slike, ki ga bodo uporabili spletni brskalniki, ki ne morejo prikazovati slik (npr. bralniki zaslona), in je pomemben tudi za SEO.
Seznami (`<ul>`, `<ol>`, `<li>`)
V spletno stran lahko vstavimo tudi oštevilčene sezname <ol> (ordered list) in neoštevilčene sezname <ul> (unordered list). Točke v seznamu označujemo z značko <li> (list item).
Primeri:
<ul> <li>Točka v neoštevilčenem seznamu.</li></ul><ol> <li>To je prva točka v oštevilčenem seznamu.</li> <li>Druga točka se samodejno oštevilči.</li></ol>
Tabele (`<table>`)
Tabele so zelo močno orodje v HTML za prikaz podatkov v tabelarični obliki. Osnovne značke za tabele so <table> (sama tabela), <tr> (vrstica tabele), <td> (celica tabele) in <th> (celica glave tabele).
Bločni elementi (`<div>`)
Bločni element <div> (division) je HTML element, ki ga boste uporabili za ločitev enega dela dokumenta HTML od drugih delov. Z bločnimi elementi določimo postavitev strani (npr. postavitev spletnih strani). <div> je element, ki se večinoma uporablja za združevanje elementov in deluje kot predloga za nove kontrole.
Načela dobrega pisanja HTML kode
HTML kodo lahko zapišemo na različne načine, vendar vsi načini niso enako pregledni. Brskalnik pri običajnem prikazu več zaporednih presledkov, tabulatorjev in praznih vrstic navadno ne pokaže tako, kot so zapisani v izvorni kodi.
Preglednost je še večja, če upoštevamo tudi strukturo dokumenta in gnezdene elemente zamikamo v desno. Za dobro preglednost kode navadno upoštevamo tri osnovna načela: elemente zapisujemo v smiselne vrstice, gnezdene dele zamikamo in v urejevalniku uporabljamo označevanje sintakse.
Napisano kodo lahko preverimo na različne načine. Mnogi sodobni urejevalniki kode (npr. TextPad, Notepad, PFE) in razvojna okolja imajo osnovno preverjanje že vgrajeno. Obstaja pa tudi več spletnih orodij za preverjanje HTML. Validator nas lahko opozori na napake v oznakah, nepravilno gnezdenje elementov, manjkajoče atribute in druge težave v dokumentu.
3 zakoni pisanja berljive kode
Uporabni nasveti in primeri
CodeBrainer vas bo naučil pisati HTML dokumente. Pri CodeBrainer-ju vam želimo veliko veselja pri programiranju. Poskusite: Predlagamo, da v svoji HTML datoteki poskusite tudi sami uporabiti HTML značke, ki smo jih obdelali v tem poglavju.
Če boste imeli težave s pomnjenjem HTML značk, preberite naš članek osnove HTML in uporabite nekaj primerov od tam. Prikazali smo vam seznam najbolj uporabnih osnovnih HTML značk, ki jih boste pri svojih projektih veliko uporabljali. Za vse smo vam pripravili tudi primere, ki vam bodo v podporo pri začetnih korakih spletnega programiranja. Vsi primeri skupaj so vam na voljo preko spodnje povezave.
Se sprašujete, ali je programiranje res primerno za vas? Rešite preprost kviz in najdite programerja v sebi!