The future of learning is just a few clicks away.
Already a user?
Osnove HTML

Osnove HTML: Prvi Koraki za Ustvarjanje Spletnih Strani

Osnove HTML spoznajte na način, ki ga razumejo čisto vsi in tako vstopite v svet programijanja in...
Čas branja: 7 minutes

Uvod v HTML

Če ste kdaj poskušali ustvariti spletno stran brez poznavanja HTML-ja, je to podobno, kot bi poskušali zgraditi LEGO grad brez navodil – vse kocke imate, ampak nič ne stoji pokonci! 😊

HTML (Hypertext Markup Language) je označevalni jezik, ki omogoča ustvarjanje strukturiranih spletnih strani. Z HTML-jem lahko dodajate naslove, odstavke, slike, povezave in tabele ter s tem oblikujete vsebino vaših spletnih strani. Uporaba pravilnih oznak in atributov, kot so `src` in `href`, je ključna za delovanje in optimizacijo spletnih strani.

Ključne informacije - Osnove html:

  • HTML je označevalni jezik za ustvarjanje strukturiranih spletnih strani z naslovi, odstavki, slikami in povezavami.

  • Uporaba oznak (tagov) v HTML omogoča strukturiranje in definiranje vsebine spletne strani za brskalnike.

  • Atributi, kot so `src`, `href` in `alt`, dodajajo dodatne informacije in funkcionalnosti elementom HTML.

  • Slogi CSS se uporabljajo za oblikovanje videza spletnih strani, vključno z barvami, pisavami in postavitvami.

  • Seznami in tabele omogočajo organizirano predstavitev podatkov in informacij na spletnih straneh.
  •  

Kaj je Hypertext Markup Language (HTML)?

HTML (Hypertext Markup Language) je označevalni jezik, ki se uporablja za ustvarjanje spletnih strani. Datoteke v HTML imajo običajno končnice .html ali .htm in vsebujejo ukaze, ki jih spletni brskalniki interpretirajo za prikaz vsebine. Je temeljni gradnik spleta in omogoča spletnim razvijalcem, da strukturirajo vsebino na svojih spletnih straneh. S pomočjo HTML lahko razvijalci dodajajo naslove, odstavke, slike, povezave in tabele v svoje dokumente, kar omogoča bogato in interaktivno uporabniško izkušnjo. HTML je sestavljen iz elementov, ki so predstavljeni z oznakami (tagi), kot so < html>, < head>, < body>, < p>, < a>, < img> in številne druge. Te oznake določajo različne dele vsebine in njihovo funkcijo. Pomaga opisati vsebino spletne strani in se lahko uporablja za oblikovanje besedila, dodajanje slik in ustvarjanje tabel. Na primer, oznaka < p> se uporablja za ustvarjanje odstavkov, medtem ko oznaka < a> ustvarja povezave. HTML je ključni jezik, ki ga morate obvladati, če želite ustvarjati in vzdrževati spletne strani.

Osnove HTML

Pomen HTML pri ustvarjanju spletnih strani

HTML je ključni del spleta, saj se uporablja za določanje strukture in vsebine spletne strani. Brez HTML bi bile spletne strani zgolj neformatirana besedila brez slik, povezav ali strukturiranih podatkov. Spletni razvijalci uporabljajo HTML za ustvarjanje strukturiranih dokumentov, ki jih brskalniki lahko interpretirajo in prikazujejo uporabnikom. HTML omogoča ustvarjanje hierarhije vsebine z uporabo naslovov (h1-h6), odstavkov in drugih strukturnih elementov. Poleg tega omogoča vključevanje multimedijskih vsebin, kot so slike in videoposnetki, ter interaktivnih elementov, kot so obrazci in gumbi. S pomočjo HTML lahko razvijalci ustvarjajo dostopne in optimizirane spletne strani, ki so prijazne do uporabnikov in iskalnikov. HTML tudi omogoča integracijo z drugimi spletnimi tehnologijami, kot sta CSS (Cascading Style Sheets) in JavaScript, kar še dodatno povečuje njegovo moč in uporabnost pri ustvarjanju sodobnih spletnih strani.

HTML dokumenti

Osnovna struktura HTML dokumenta

HTML dokumenti se začnejo z < !DOCTYPE html>, kar brskalniku pove, da gre za dokument v jeziku HTML5. HTML dokumenti so obdani z oznakami < html>, ki predstavljajo korenski element dokumenta. Znotraj tega elementa sta dva glavna dela: < head> in < body>. Oznaka < head> vsebuje metapodatke o dokumentu, kot so naslov (< title>), povezave do slogovnih listov (< link>) in skript (< script>), ter druge pomembne informacije, kot so meta oznake (< meta>). Na primer, oznaka < meta charset=”UTF-8”> določa kodiranje znakov za dokument. Oznaka < body> vsebuje dejansko vsebino spletne strani, kot so besedilo, slike, tabele, seznami in drugi elementi. Na primer, odstavek se ustvari z oznako < p>, slike z oznako < img>, povezave z oznako < a>, tabele z oznakami < table>, < tr>, < td> in tako naprej. Osnovna struktura HTML dokumenta je ključna za pravilno delovanje in prikaz vsebine na spletnih straneh.

Oznaki head in body

Oznaka < head> vsebuje metapodatke o dokumentu, kot so naslov (< title>), povezave do zunanjih slogovnih listov ali skript (< link> in < script>), ter druge informacije, kot so meta oznake (< meta>), ki določajo opis (description), avtorja (author) in ključne besede (keywords) spletne strani. Na primer, < meta name=”description” content=”Osnove HTML za ustvarjanje spletnih strani”> določa opis spletne strani. Oznaka < body> vsebuje vsebino spletne strani, ki je vidna uporabnikom, kot so naslovi, odstavki, slike, povezave, tabele in seznami. Vsebina znotraj oznake < body> je tista, ki jo brskalniki prikažejo na zaslonu uporabnika. Na primer, < h1>Naslov< /h1> ustvari naslov, < p>Odstavek besedila< /p> ustvari odstavek, < img src=”slika.jpg” alt=”Opis slike”> vstavi sliko, < a href=”[Povezava](https://primer.com)”>https://primer.com”>Povezava< /a>) ustvari povezavo, < table>< tr>< td>Podatki< /td>< /tr>< /table>ustvari tabelo in< ul>< li>Element seznama< /li>< /ul>ustvari seznam. Kombinacija oznak< head>in< body>` omogoča pravilno delovanje in prikaz HTML dokumenta na spletni strani.

Oblikovanje vsebine

Naslovi HTML (h1-h6) in njihova uporaba

Naslovi HTML (h1-h6) se uporabljajo za določanje naslovov in podnaslovov na spletni strani. Naslovi so razvrščeni od h1 (najpomembnejši) do h6 (najmanj pomemben), kar omogoča hierarhično strukturiranje vsebine. Na primer, < h1>Glavni Naslov< /h1> predstavlja glavni naslov strani, medtem ko < h2>Podnaslov< /h2> predstavlja podnaslov. Uporaba naslovi (h1-h6) je pomembna za dostopnost, saj bralniki zaslona in iskalniki uporabljajo te oznake za razumevanje strukture in pomembnosti vsebine. Naslovi tudi pomagajo izboljšati optimizacijo za iskalnike (SEO) s tem, da omogočajo iskalnikom lažje razumevanje ključnih delov vsebine. Naslovi prispevajo k boljši uporabniški izkušnji, saj omogočajo lažje branje in navigacijo po vsebini spletne strani.

Ustvarjanje odstavkov in prelomov vrstic

Odstavki so ustvarjeni z oznako < p>, ki obdaja besedilo in ga postavi v ločen blok. Na primer, < p>To je odstavek besedila.< /p> ustvari odstavek. Odstavki pomagajo pri organizaciji besedila in omogočajo lažje branje. Prelomi vrstic so ustvarjeni z oznako < br>, ki vstavi novo vrstico brez potrebe po ustvarjanju novega odstavka. Na primer, “To je prva vrstica.< br>To je druga vrstica.” ustvari dve vrstici besedila. Uporaba odstavkov in prelomov vrstic omogoča boljšo strukturo in berljivost vsebine na spletni strani.

Oblikovanje besedila z oznakami HTML (b, i, strong itd.)

Oznake HTML, kot so < b>, < i>, < strong>, < em>, se uporabljajo za oblikovanje besedila na spletni strani. Oznaka < b> naredi besedilo krepko, npr. < b>krepko besedilo< /b>. Oznaka < i> naredi besedilo poševno, npr. < i>poševno besedilo< /i>. Oznaka < strong> označuje močan poudarek in ima podobno funkcijo kot < b>, vendar ima semantično večji pomen, npr. < strong>pomembno besedilo< /strong>. Oznaka < em> označuje poudarek in ima podobno funkcijo kot < i>, npr. < em>poudarjeno besedilo< /em>. Te oznake pomagajo izboljšati berljivost in pomen besedila ter omogočajo boljšo dostopnost in optimizacijo za iskalnike (SEO). Uporaba pravilnih oznak za oblikovanje besedila je pomembna za učinkovito komunikacijo in predstavitev vsebine na spletni strani.

Slike in povezave

Dodajanje slik v HTML dokumente z oznako < img>

Slike se v HTML dokumente dodajajo z oznako < img> in atributom src, ki določa pot do slike. Na primer, oznaka < img src=”slika.jpg” alt=”Opis slike”> vstavi sliko z datoteke slika.jpg. Atribut alt se uporablja za zagotavljanje alternativnega besedila za dostopnost, kar je pomembno za uporabnike, ki uporabljajo bralnike zaslona ali če se slika ne naloži. Alternativno besedilo opisuje vsebino slike, kar pomaga iskalnikom razumeti in indeksirati slike. Na primer, < img src=”slika.jpg” alt=”Zalazak sonca nad oceanom”> bo prikazal sliko z opisom “Zalazak sonca nad oceanom”. Uporaba atributa alt je ključna za spletno dostopnost in SEO, saj omogoča iskalnikom in uporabnikom boljše razumevanje vsebine slike. Poleg atributa src, lahko oznaka < img> vsebuje tudi druge atribute, kot so width in height, ki določata velikost slike, ter title, ki prikazuje namig ob premiku miške nad sliko. Slike so pomemben del spletnih strani, saj omogočajo vizualno predstavitev vsebine in izboljšajo uporabniško izkušnjo.

Ustvarjanje povezav z oznako < a>

Povezave so ustvarjene z oznako < a> in atributom href, ki določa URL cilja povezave. Na primer, oznaka < a href=”[https://primer.com”](https://primer.com%22)Obiščite> našo spletno stran< /a> ustvari povezavo do spletne strani [https://primer.com](https://primer.com%60) z besedilom “Obiščite našo spletno stran”. Atribut href je bistven za delovanje povezave, saj določa, kam bo uporabnik preusmerjen ob kliku. Poleg atributa href, lahko oznaka < a> vsebuje tudi atribut title, ki prikaže namig ali dodatne informacije o povezavi ob premiku miške nad njo. Na primer, < a href=”[https://primer.com](https://primer.com)“ title=”Obiščite našo glavno stran”>Glavna stran< /a> bo prikazal namig “Obiščite našo glavno stran”. Povezave so ključni del navigacije po spletnih straneh, saj omogočajo prehode med različnimi stranmi in viri. Uporaba atributa target=”_blank” omogoča odpiranje povezav v novem zavihku, kar lahko izboljša uporabniško izkušnjo. Na primer, < a href=”[https://primer.com](https://primer.com)“ target=”_blank”>Obiščite našo spletno stran< /a> bo odprl povezavo v novem zavihku brskalnika.

Razumevanje sidrišč in hiperpovezav

Sidrišča se uporabljajo za povezavo na določene dele spletne strani. To omogoča uporabnikom hitro navigacijo do specifičnih sekcij na isti strani. Sidrišča so ustvarjena z atributom id v ciljni oznaki in z uporabo # v povezavi. Na primer, oznaka < h2 id=”uvod”>Uvod< /h2> ustvari sidrišče, do katerega lahko dostopate s povezavo < a href=”#uvod”>Pojdi na uvod< /a>. Hiperpovezave se uporabljajo za povezovanje z zunanjimi spletnimi stranmi ali viri. Povezave do zunanjih virov izboljšajo uporabniško izkušnjo, saj omogočajo dostop do dodatnih informacij in virov. Na primer, < a href=”[https://primer.com”](https://primer.com%22)Obiščite> našo spletno stran< /a> povezuje na zunanjo spletno stran. Uporaba sidrišč in hiperpovezav omogoča učinkovito navigacijo in dostop do različnih delov vsebine, kar izboljša uporabniško izkušnjo.

Tabele in seznami

Ustvarjanje tabel z oznakami HTML (table, tr, td)

Tabele se ustvarjajo z oznakami < table>, < tr> in < td>. Oznaka < table> predstavlja tabelo, < tr> predstavlja vrstico v tabeli, < td> pa celico v tabeli. Na primer, osnovna tabela je lahko ustvarjena tako: < table>< tr>< td>Celica 1< /td>< td>Celica 2< /td>< /tr>< tr>< td>Celica 3< /td>< td>Celica 4< /td>< /tr>< /table>. Tabele so uporabne za prikazovanje podatkov v strukturirani obliki, kar omogoča enostavno branje in analizo podatkov. Dodatne oznake, kot so < th> za glave stolpcev in atributi colspan in rowspan za združevanje celic, še dodatno izboljšajo uporabnost tabel. Na primer, < th>Naslov< /th> ustvari celico glave, ki je običajno krepko besedilo in centrirano. Združevanje celic se doseže z atributom colspan, npr. < td colspan=”2”>Združena celica< /td>. Tabele so ključne za prikazovanje kompleksnih podatkov na spletnih straneh in omogočajo jasen in strukturiran prikaz informacij.

Ustvarjanje seznamov (ul, ol, li) in njihova uporaba

Neurejeni seznami so ustvarjeni z oznakama < ul> in < li>, kjer < ul> predstavlja neurejeni seznam, < li> pa posamezen element seznama. Na primer, < ul>< li>Prvi element< /li>< li>Drugi element< /li>< /ul> ustvari neurejeni seznam z dvema elementoma. Urejeni seznami so ustvarjeni z oznakama < ol> in < li>, kjer < ol> predstavlja urejeni seznam, < li> pa posamezen element seznama. Na primer, < ol>< li>Prvi korak< /li>< li>Drugi korak< /li>< /ol> ustvari urejeni seznam z dvema korakoma. Seznami so uporabni za prikazovanje zbirk predmetov, korakov v procesu ali drugih strukturiranih informacij. Seznami omogočajo jasen in organiziran prikaz informacij, kar izboljša berljivost in uporabniško izkušnjo. Poleg osnovnih oznak seznama, lahko seznami vključujejo tudi ugnezdene sezname, kjer se seznam nahaja znotraj drugega seznama, kar omogoča še boljšo organizacijo informacij. Na primer, < ul>< li>Element z ugnezdenim seznamom< ul>< li>Ugnezdeni element< /li>< /ul>< /li>< /ul> ustvari seznam z ugnezdenim seznamom.

Barve

Dodajanje barv v HTML dokumente s CSS

Barve se v HTML dokumente dodajajo s slogi CSS (Cascading Style Sheets). Slogi CSS se lahko uporabljajo za posamezne elemente ali globalno za celoten dokument. Na primer, za določitev barve besedila lahko uporabimo lastnost color, npr. < p style=”color: blue;”>Modro besedilo< /p>. Za določitev ozadja lahko uporabimo lastnost background-color, npr. < div style=”background-color: yellow;”>Rumeno ozadje< /div>. CSS omogoča tudi uporabo raznih barvnih formatov, kot so barvne kode HEX, RGB in HSL. Na primer, color: #FF5733; določa barvo besedila z HEX kodo, color: rgb(255, 87, 51); uporablja RGB format, in color: hsl(9, 100%, 60%); uporablja HSL format. CSS omogoča natančno oblikovanje in prilagajanje videza spletnih strani, kar vključuje ne le barve, ampak tudi pisave, velikosti, robove, obrobe in druge stilne lastnosti. Slogi CSS lahko vključimo v HTML dokument na več načinov: znotraj oznake < style> v < head>, kot inline slogi v posameznih oznakah HTML ali z zunanjimi slogovnimi listi preko oznake < link>.

en_USEnglish