Kaj je HTML?

HTML (Hypertext Markup Language) je zaporedje ukazov, ki povejo kako naj se predstavitvena stran prikaže. Ukazi se imenujejo tudi značke (tags). Značke se vedno nahajajo med znakoma < in >, kot npr. Spletni pregledovalniki (browsers) so programi, ki berejo ukaze v jeziku HTML in glede na to prikazujejo vsebino. Vsako ročno oblikovanje strani (npr. večkratni presledki, prazne vrstice,...) se ignorira. Na primer, če odtipkamo

Danes     je        
						lepo
	                              vreme.

V tem primeru bo prikazovalnik spletne strani izpisal:
Danes je lepo vreme.

Datoteke v HTML imajo Datoteke v HTML imajo podaljšek .htm ali .html

Značke v HTML

Obstajata dve vrsti značk:

Samostojne značke npr: <link> Te se uporabljajo za naslavljanje elementov ter dokumentov.
začetne in končne značke npr: <p> in </p> Te se uporabljajo za vnašanje konteksta.

Samostojne značke ne rabijo zaključka, saj v njih ne vnašamo konteksta kot je tekst in podobno. Taki primeri so: nova vrstica, nov odstavek, naslavljanje dokumentov kot so CSS, JS...
Končna značka se od začetne značke loči le po dodatnem znaku / pred imenom značke. Vse kar se nahaja v notranjosti značke se podreja oblikovanju, ki ga zahteva značka. taki primeri so značke p, ul, h1, div a...

Splošna oblika HTML

Opis predstavitvene strani v jeziku HTML je naslednji:

		<!DOCTYPE html>
		<HTML>
		    <HEAD>
		    "Glava predstavitvene strani"
		      <meta charset="UTF-8" />
		      <TITLE>Naslov, ki se pojavi v okviru okna</TITLE>
		      <link rel="stylesheet" type="text/css" href="css.css" />
		    </HEAD>
		    <BODY>
		    "Vsebina predstavitvene strani"
		    </BODY>
	   	</HTML>

Obrazložitev:

<!DOCTYPE html> je začetna vrstica pri vsakem HTML dokumentu.Lahko se tudi izpisti saj ni kritična. Sporoči tistemu programu, ki bere besedilo, da je to HTML dokument.

<HTML> in </HTML> To sta znački za odpiranje in zapiranje dokumenta HTML. ta značka je obvezna, saj sporoča programu kje se dokument začne ter kje se konča.

<HEAD> in </HEAD> Sta odpiralni in zapiralni znački glave. V glavi se ponavadi nahajajo vsi podatki, ki niso kontekstualno povezani z HTML dokumentom, kot so povezave z drugimi dokumenti.

JS, CSS ipd...) ter drugi "meta" tagi oziroma značke. te sporočajo različne stvari v našem primeru sporoča "meta tag" način oziroma pisanja z šumniki (spletni brskalnik jih bo vključil) ostale "meta tage" se uporablja pretežno za optimizacijo pri spletnih iskalnikih.

več o "meta tagih" si preberi na naslednji povezavi: w3schools: Meta tags

Pisava v HTML:

v tem predelu bomo obdelelai različne značke s katerimi definiramo pisavo v html.
za Vse značke ki se uporabljajo za pisavo glej naslednjo povezavo:

Naslovi:

naslove definiramo z značkami od <h1> do <h6> dane značke potrebujejo poleg odpiralne tudi zapiralno značko

<h1> Moj prvi naslov </h1>

<h2> Moj drugi naslov </h2>

izpis:

Moj prvi naslov (heding h1)

Moj drugi naslov (heding h2)

Kot ste opazili se naslovi manjšajo (največji je h1 najmanjši pa h6).

Odstavki:

značka <p> je najpogosteje uporabljena značka v Dokumentu HTML. definira enostaven odstavek z normalnim besedilom.

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque non sapiente quod rerum tenetur eaque aspernatur unde nam tempora animi officiis, autem, libero, vel ipsa pariatur. Eaque deserunt cumque culpa. </p>

Izpis:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis nulla a distinctio sit, laborum. Doloribus voluptates totam culpa maxime provident vel asperiores quod fugiat, ab! Cum consectetur dicta, laudantium eum?

Ostale značke za izpis:

Ostale značke niso tako pomembne vendar so pogosto v uporabi. vse naslednje značke so zaprtega tipa

br je značka ki prisili text da preide v novo vrstico
strong značka za odebelitev teskta
iznačka za poševn text
em značka za
smallznačka za majhen text
markznačka za označen text
del značka za prečrtan text
subznačka za podpisan text
superznačka za nadpisan text

ostale značke za pisavo, njihov pomen ter uporabo si poglejte na w3schools: HTML formating

Seznami

Seznami se v HTML uporabljajo za različne načine, nekateri so očitni kot so izpis seznama. S pomočjo CSS pa lahko sezname preoblikujemo v Navigacijske odseke strani, galerije in podobno...
Poznamo 2 osnovna tipa seznamov ul "unorderd list" in ol "orderd list." li list item pa je značka ki definira vsak posamezni element v seznamu.
To je tudi gnezdena značka, saj je li vedno pod ul oz. element li je otrok elementa ul.

HTML koda:

 
	<ul>
		<li> mitja </li>
		<li> jure </li>
		<li> maša </li>
	</ul>

Izpis:

mitja
jure
maša

Vstavljenje elementov

Sidra:

sidra (ang:ancor) je element v HTML, ki omogoča vnašanje drugih vsebin oziroma sidriranje v dokument html. Lahko se nanaša na spletno stran, dokument, datoteko, ali pa neko točko v samem HTML zapisu.
element sidre zelo pogosto uporabljamo v HTML, služi kot osnoven element interaktivnosti med uporabnikom ter avtorjem.

sidra ima značko a
primer take sidre je link oziroma povezava.

koda:

<a href="https://www.google.si/" > LINK </a>

izpis
LINK

Obrazložitev:
(href="") je okrajšana angleška beseda "hyperreferance" in pomeni pot do določenega elementa, katerega želimo povezati ali vsidrati v sidro. Nato sledi konec značke, besedilo sidre ter zaključna značka za sidro.

V "hyperreferance" lahko vključimo katerokoli spletno stran, ki je dostopna na internetu(v poti do dokumenta mora biti navedena celotna pot spletne strani.) Lahko pa tudi dodamo tiste dokumente, ki so dostopni na našem sistemu oziroma tiste, katere bomo kasneje poslali na strežnik. Zasidramo lahko dokumente, glasbo, ter ostale dokumente, pri tem pa moramo upoštevati da se bodo dokumenti ki smo jih zasidrali naložili na računalnik ter se ne bodo prikazali.

Določanje poti do elementa

Pot do elementov določamo v Href atributu. pot lahko navedemo iz spletne strani ali lokalno oziroma na strežniku.
pot do spletne strani navedemo tako da v narekovajih vnesemo celoten naslov spletne strani primer: href="https://www.google.si/"
lokalno pot pa določimo tako da navedemo pot do določenega dokumenta. če je dokument v isti mapi kot HTML dokument, potem potrebujemo navesti samo polno ime dokumenta primer:
href="img/smejko.png"

Lahko tudi navedemo pot do datoteke ki je v določeni mapi, za mapo uporavbimo znak /
primer: href="img/smejko.png" br s tem povemo da se datoteka smejko.png nahaja v mapi img.
podobno se lahko pomikamo tudi iz osnovnega naslova, kjer se nahaja HTML to storimo z znakom ../

Prikaz slik

Slike lahko prikažemo z img značko. ta značka se obnaša podobno kot sidra, kar pomeni da moramo tudi tu vnesti pot do te slike.
Pomembno je da v src atribut ustavimo pravo pot do slike ter pravo končnico slike ( v tem primeru je to png)
Atribut src se obnaša podobno kot atribut href.
Atribut alt (Alternative) pomeni alternativen opis dane slike. ta pride v poštev ko brskalnik ne mora dostopati do slike, saj se v tem primeru izpise teskst "slika smejkota", dani atribut ima tudi možnost pomoči obrazložitve slike spletnim brskalnikom ter daje pomoč osebami z posebnimi potrebami.
Obstajajo tudi drugi atributi za značko img glej W3 Schools: značka img

<img href="img/smejko.png alt="slika smejkota" > smejko </img>

izpis:
Slika smejkota

Naslavljanje kontaktnih podatkov

V jeziku HTML obstajajo različni načini predstavitve kontaktnih podatkov. Pogledali si bomo le dva najosnovnejša primera, to sta Naslavljanje e-pošte ter telefonske številke.

Naslavljanje e-pošte:

To storimo tako, da v sidri nastavimo atribut href v posebni obliki
primer:

<a href="mailto:example@gmail.com" > e-mail </a>

Rezultat:

e-mail

Klik na dani primer bo sprožil vas primarni program za posiljanje e-poste.

Naslavljanje telefonske številke

To storimo zelo podobno kot pri naslavljanju e-pošte. tudi pri tem primeru moramo slediti pravilom v href atriutu.

<a href="tel:031456789" > Tel:031456789</a>

Prikaz:

Tel:031456789

Tudi v tem primeru bo nas spletni brskalnih poskusil pognati našo primarno aplikacijo za klicanje. Ta oblika je zelo primerna za mobilne uporabnike, za uporabnike namiznih računalnikov pa je priporočljivo napisati tudi telefonsko številko kot tekst v značko a. saj ti ponavadi nimajo nastavljenega takšnega programa.

Tabele v HTML

Včasih so tabele bile močno za postavitev podatkov na spletni strani, vendar je ta uporaba zastarela. Danes je uporaba tabel namenjena predvsem njihovem prvotnem namenu. Oblika zapia tabel je podobna obliki zapisa seznama.

. za razumevanje tabel so pomembne naslednje značke

table značka označuje konec in začetek tabele
tr (table row) označuje začetek in konec stolpca tabele
td (table data) označuje začetek in konec podatkov v tabeli
th (table heading) označuje glavo tabele, uporabljamo jo za označevanje delov stolpca

 
	<table>
		<tr>
		    <td>Marko</td>
		    <td>Lepi</td> 
		    <td>50</td>
		 </tr>
		 <tr>
		    <td>Eva</td>
		    <td>Jankovic</td> 
		    <td>94</td>
		 </tr>
		 <tr>
		   <td>Jure</td>
		   <td>Matkovič</td>
		   <td>20</td>
		 </tr>
	</table>

Rezutat:

Marko	Lepi	50
Eva	Jankovic	94
Jure	Matkovič	20

to je le osnovna postavitev tabel. več infomrmacij o tabelah dobite na naslednji povezavi: W3 Schools: Tables.

Osnove HTML

Kazalo vsebine:

Prejšnja stran