Pri Codebrainer-ju se veliko sprašujemo o tem, kateri so najbolj popularni ukazi, ki jih morate vedeti, ko se začnete učiti osnove HTML (preberi si več o tem kaj je HTML). To je naš kratek seznam osnovnih HTML značk oz. tag-ov , ki jih pogosto uporabljamo. Poleg tega imajo vsi tagi kratek opis in primer, tako da lahko takoj vidite, kaj omogočajo. Lahko si ogledate tudi primer v živo na povezavi pod seznamom.
Katere so najbolj uporabljene značke, če želite osvojiti osnove HTML?
Analizirali smo najbolj priljubljena spletna mesta, da bi ugotovili, katere so najbolj uporabljane HTML značke. Ni presenečenje, da je značka za povezavo najbolj uporabljana HTML značka. Pravzaprav predstavlja skoraj 25% vseh oznak na spletu.
Seznam osnovnih HTML značk:
- <a> za povezavo
- <b> za krepka besedila
- <strong> za krepko besedilo s poudarki
- <body> glavni HTML del oz. element
- <br> za prelom (vrstice)
- <div> za del, slop HTML-ja (ali angleško division)
- <h1> za naslove v tekstu
- <i> za poševno besedilo
- <img> za slike v dokumentu
- <ol> za oštevilčen seznam, <ul> za neoštevilčen seznam
- <p> za odstavek
- <span> za oblikovanje besedila
<a></a> ali HTML značka za povezavo
To je značka oz. tag, s pomočjo katere lahko vzpostavite povezavo do spletne strani, do vaše strani, spletne strani v družabnih omrežjih, izdelka znotraj spletne trgovine, ...v bistvu je temelj interneta.
Glavni atribut te HTML značke je atribut href (referenca hiperteksta oz. Hypertext Reference), kjer dodate naslov spletne strani, na katero želite narediti povezavo.
Drugi atribut je target, uporabimo ga zato, da se povezave odprejo v novem zavihku ali oknu, tako da uporabniki ne izgubijo osredotočenosti na trenutno stran.
Primer:
Tako naredimo povezavi do naše strani: CodeBrainer
Tako naredimo povezavo do naše strani ob tem, da se odpre v novem oknu: <a href=”https://www.codebrainer.com” target=”_blank”> CodeBrainer </a>
Primer2: (povezava se odpre v novem oknu)
Tako naredimo povezavo do naše strani ob tem, da se odpre v novem oknu: CodeBrainer
Tako naredimo povezavo do naše strani ob tem, da se odpre v novem oknu: <a href="https://www.codebrainer.com" target="_blank">CodeBrainer</a>
<b></b> - poudarjeno besedilo
Če imate veliko besedila, morate poudariti določene besede, da lahko bralcu sporočite, kaj je pomembno. To storite s krepkim delom besedila.
Primer:
CodeBrainer ima veliko dobrih tečajev.
CodeBrainer ima veliko <b> dobrih </b> tečajev.
<body></body> - vsebina HTML dokumenta
Body značka označuje del HTML dokumenta, ki je viden uporabniku. Body je pravzaprav sestavni del vseh dokumentov HTML. Vendar HTML značka sama ni vidna, ampak samo označuje/združi vidno vsebino strani.
<br> - nova vrstica
<br> značka kljub temu, da ni vidna paše v osnove HTML... Z br značko brskalniku sporočimo, kje želimo dodati nekaj prelomov vrstic ali praznih vrstic v besedilu. Z uporabo prelomov v besedilu, le-ta bolje “diha”, to pomeni, daje besedilo lažje brati in razumeti.
Primer: (uporabite to besedilo v html-ju in bo videti drugače)
CodeBrainer vas bo naučil pisati HTML dokument-e.
Če boste imeli težave s pomnjenjem HTML značk, preberite naš članek osnove HTML.
In uporabite nekaj primerov od tam.
Lp CodeBrainer
CodeBrainer vas bo naučil pisati HTML dokument-e. <br> <br> Če boste imeli težave s pomnjenjem HTML značk, preberite naš članek osnove HTML. <br> In uporabite nekaj primerov od tam. <br> <br> Lp CodeBrainer
<div></div> - za skupino elementov
div je element, ki se večinoma uporablja za združevanje elementov in deluje kot predloga za nove kontrole. Značka div oz. div tag je HTML element, ki ga boste uporabili za ločitev enega dela dokumenta HTML od drugih delov. Recimo, da imate na svoji spletni strani seznam izdelkov, za vsak izdelek boste uporabili ločen div.
<head></head> - glava dokumenta
Head oz. glava je najbolj pomemben del HTML dokumenta. Še več, tu imate meta podatke (metadata), to so podatki o stilu dokumenta, katere JavaScript knjižnice uporablja dokument (preberi se več: Kaj je JavaScript), naslov in CSS datoteke (preberi se več: Kaj je CSS). V head značko dodamo tudi uporabniku nevidne opise za iskalnike, kartice za deljenje družbenih omrežjih.
HTML značke za naslov <h1></h1>, <h2></h2> … <h6></h6>
Naslovi oz. heading-i (stopnje 1-6, Npr.: h3 je podnaslov znotraj podnaslova h2). Oznake h1, h2, ... se uporabljajo za ustvarjanje naslovov. Zakaj potrebujemo naslove? Kako lahko besedilo oblikujemo tako, da je videti kot H značka oz. H tag? Naslovi se na primer uporabljajo tako, da iskalniki (npr. google) in drugi robotki, ki obiščejo našo stran razumejo pomembne dele naše spletne strani.
Primer:
Osnove HTML
V tem članku bomo razložili naš seznam najbolj uporabnih HTML značk.
Prva značka je
Krepko označimo besed zato, da bi postale pomembnejše.
<i></i> - nagnjeno besedilo
<i> je značka, ki vam v obsežnem besedilu omogoča izpostaviti posamezne dele besedila. S to značko določimo poševni način pisanja (Italic).
Primer:
CodeBrainer ima veliko dobrih tečajev.
<img> - značka za sliko
Za prikaz slik uporabljamo HTML značko img. Slike se lahko nahajajo znotraj datotek za vašo spletno stran ali kjerkoli na spletu Poleg tega je najpomembnejši atribut src (vir), ki določi povezavo do slike (struktura podobna kot povezava na posamezno spletno stran)...
Primer: (prikazano bo jabolko in besedilo)
To je jabolko 
To je jabolko <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/1200px-Red_Apple.jpg" width = "100">
<li></li> značka za element seznama
Točka v seznamu. HTML značka, ki se uporablja za prikaz oštevilčenega (<ol>) ali neoštevilčenega (<ul>) seznama. Lahko imate neomejeno točk v seznamu, če želite.
Primer:
- To je prva točka v seznamu.
<ul>
<li>To je prva točka v seznamu.</li>
</ul>
<ul></ul> - seznam s pikam (bullet-i)
Neoštevilčen seznam samo pomeni, da bo vsak točka na seznamu imela svojo piko.
Primer:
Živali: <br>
<ul>
<li>Riba</li>
<li>Medved</li>
<li>Pes</li>
</ul>
<ol></ol> - seznam s številkami
Oštevilčen seznam. Elemente vključujemo si točko seznama <li>, kjer se elementi samodejno oštevilčijo. To je koristno, če dodate veliko točk v seznam, za katere želite, da so razporejene po vrstnem redu.
Primer:
- Prva točka
- Druga točka
- Tretja točka
<ol>
<li>Prva točka</li>
<li>Druga točka</li>
<li>Tretja točka</li>
</ol>
<p></p> - značka za odstavek
Značka za odstavek razvrsti besedilo v odstavek. Tako je njen namen ločiti del besedila ali odstavka. Na ta način naredite besedilo bolj berljivo in organizirano.
Primer:
To je članek osnove HTML, to bo v prihodnosti vaš plonk listek kjer boste lahko pogledali in ga preprosto uporabili.
Prva značka o kateri bomo govorili je značka za krepko besedilo. Poudarja besede ali stavke...
<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>
<span></span> - značka za oblikovanje besedila
Span tag oz. span značka združuje besedilo, za katero želimo imeti drugačen slog. Dober primer bi bil, če bi želeli imeti en del stavka obarvan z rdečo barvo.
Primer:
To je opozorilo: ta plonk listek bi morali imeti vedno pri sebi :D
To je <span style = "color: red;"> opozorilo: </span> ta plonk listek bi morali imeti vedno pri sebi :D
<strong></strong> - poudarjeno besedilo in poudarek
Besedilo je poudarjeno - ponavadi se pojavi kot krepko/poudarjeno besedilo. Ima pa dodaten pomen, da mora biti to besedilo poudarjeno, kar upoštevajo tudi iskalniki (npr. Google).
Primer:
CodeBrainer ima veliko dobrih tečajev.
CodeBrainer ima veliko <strong>dobrih</strong> tečajev.
Osnove HTML - uporabne HTML značke z primeri
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. Pri ¸CodeBrainer-ju vam želimo veliko veselja pri programiranju.
Odprite urejevalnik in preizkusite sami
