Informacijske tehnologije (Information technology) – HTML

©primoz.weingerl
4.–6. VAJA: HTML (HYPER TEXT MARKUP
LANGUAGE)

©primoz.weingerl
HTML (Hyper Text Markup Language) je označevalni jezik za
kreiranje spletnih strani.
S HTML jezikom deﬁniramo strukturo in semantiko.

©primoz.weingerl
HTML SINTAKSA
ZAČETEK 
ZNAČKE VSEBINA
<p>To je odstavek</p>
ZAKLJUČEK 
ZNAČKE
ATRIBUT
<a href=“http://ntf.uni-lj.si”>Pojdi na NTF</a>
VREDNOST ATRIBUTA

©primoz.weingerl
World Wide Web  
Consortium (W3C)
Web Hypertext Application  
Technology Working Group 
(WHATWG)

©primoz.weingerl
HTML DOKUMENT
<!DOCTYPE html>
<head>
<html>
<body>
</html>
</head>
</body>

©primoz.weingerl
OSNOVNI ELEMENTI

©primoz.weingerl
<h1> … </h1> … <h6> … </h6>
deﬁniranje naslovov
<p> … </p>
zapis odstavka
<br>
prelom besedila / nova vrstica
<a href=“”> … </a>
deﬁniranje povezave/linka
<blockqute></blockqute> 
<q></q> 
<cite></cite>
citirana vsebina, kratek citat, vir/referenca (naslov, avtor, url)

©primoz.weingerl
STRUKTURIRANJE BESEDILA

©primoz.weingerl
<em> … </em>
vsebuje vsebino, ki jo želimo poudariti.
<strong> … </strong>
označuje pomembnost, resnost oz. nujnost.
<i> … </i>
vsebina drugačnega značaja, označuje drugačno vsebino (npr.
kategorije, tehnični izrazi, idiomi , prevodi ..).
<b> … </b>
označevanje besedila zaradi uporabnosti, brez izražanja pomembnosti
oz. značaja (npr. ključne besede v izvlečku, ime izdelka v oceni).
<small> … </small>
tekst obrobnega pomena, “drobni tisk”.

©primoz.weingerl
VSEBINSKI MODELI 
CONTENT MODELS

©primoz.weingerl
INLINE ELEMENTS  
(medvrstični elementi)
BLOCK ELEMENTS  
(blokovni elementi)

©primoz.weingerl
Metadata
Interactive
Phrasing
Embedded
Heading
Sectioning
Flow

©primoz.weingerl
description list (seznam opisov)
<dl>
<dt>description term/name</dt> 
<dd>describtion</dd>
</dl>
unordered list (neurejen seznam)
<ul>
<li>examle 1</li> 
<li> example 2 </li>
</ul>
ordered list (urejen seznam)
<ol>
<li>examle 1</li> 
<li> example 2 </li>
</ol>

©primoz.weingerl
<table> … </table> 
zapis tabele oz. tabelarnih podatkov
<tr> … </tr> 
vrstica tabele
<thead> … </thead>, <tbody> … </tbody>, <tfoot> … </tfoot> 
glava, vsebina in noga tabele
<td> … </td> 
celica tabele

©primoz.weingerl
<form> … </form> 
deﬁniranje spletnega obrazca
<label> … </label> 
oznaka vnosnega polja. Oznako povežemo z vnosnim poljem tako da
uporabimo atribut for kateri mora biti enak id atributu vnosnega polja.
<select> … </select>, <option></option> 
izbirni meni
<input> 
vnosno polje. Vrsto vnosnega polja določimo z atributom type.
<textarea>…<textarea> 
večvrstično vnosno polje

©primoz.weingerl
<img>  
vključevanje slik
src – pot do slike (relativna ali absolutna)
alt – kratek opis slike, nadomestno besedilo za sliko
width – širina slike
height – višina slike
<svg> … </svg> 
vključevanje svg slik neposredno v html
JPEG PNG GIF SVG

©primoz.weingerl
<article> … </article> 
vsebuje celostno, samostojno vsebino, ki je lahko deljena oz. uporabljena
neodvisno.
<aside> … </aside> 
vsebina, ki se deloma navezuje oz. je sorodna vsebini sekcije, kjer se nahaja in
se lahko obravnava ločeno (npr. obrazložitve, deﬁnicije, povezave, reklame,
citati iz besedila)
<nav> … </nav> 
glavna navigacija na strani – element, ki vsebuje povezave na druge strani.
<section> … </section> 
tematsko združevanje elementov, za poimenovanje se uporabi naslov najvišje
stopnje znotraj elementa.

©primoz.weingerl
<header> … </header> 
glava dokumenta oz. sekcije v kateri se element nahaja
<main> … </main> 
vsebuje glavno vsebino dokumenta oz. aplikacije
<time> … </time> 
vsebuje čas oz. datum
<footer> … </footer> 
noga dokumenta oz. sekcije. Vsebuje podatke o avtorjih, povezave itd.

©primoz.weingerl
<div> … </div> 
blokovni element za združevanje elementov (brez strukturne in
semantične vloge)
<span> … </span> 
inline element za združevanje elementov (brez strukturne in
semantične vloge)

Informacijske tehnologije (Information technology) – HTML

More Related Content

Featured

Informacijske tehnologije (Information technology) – HTML