Wikipedija

HTML: razlika između inačica

Pregledaj povijest
← Starija izmjenaNovija izmjena →
Izbrisani sadržaj Dodani sadržaj
VizualnoWikitekst
m sit.
m ispravak zastarjele sintakse
Redak 23:
'''Primjer HTML elementa'''
 
<sourcesyntaxhighlight lang="html5">
<body></body>
</syntaxhighlight>
</source>
 
Osim navedenih, standardnih HTML elemenata, postoje i samozatvarajući HTML elementi. Kod takvih elemenata nema zatvarajuće oznake.
Redak 31:
'''Primjer samozatvarajućeg elementa'''
 
<sourcesyntaxhighlight lang="html5">
<link rel="stylesheet" type="text/css" href="stil.css" />
</syntaxhighlight>
</source>
 
Iako nije nužno, prema preporuci W3C-a, kod samozatvarajućih elemenata poželjno je ostaviti razmak između definiranih atributa i njihovih vrijednosti i zatvarajućih znakova (<code><nowiki>/></nowiki></code>).
Redak 40:
 
'''Primjer jednostavnog HTML dokumenta'''
<sourcesyntaxhighlight lang="html5">
<!DOCTYPE html>
<html>
Redak 50:
</body>
</html>
</syntaxhighlight>
</source>
 
=== Komentari unutar html dokumenta ===
Redak 61:
'''Primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<!-- ovo je komentar -->
</syntaxhighlight>
</source>
 
Najčešće će u boljem html editoru komentar biti ispisan sivim slovima kako bi se razlikovao od ostatka koda.
Redak 73:
'''Primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
Redak 87:
</body>
</html>
</syntaxhighlight>
</source>
 
=== Osnovno oblikovanje teksta ===
Redak 95:
'''Primjeri:'''
{{Div col||cols=2}}
<sourcesyntaxhighlight lang="html5">
<p>tag za odlomak (Paragraph)</p>
<big>veliki tekst</big>
Redak 108:
<code>tekst računalnog koda</code>
<hr>vodoravna crta</hr>
</sourcesyntaxhighlight><br />
Što će izgledati ovako:
<p>tag za odlomak (Paragraph)</p>
Redak 127:
* veličina fonta od 1 do 7
 
<sourcesyntaxhighlight lang="html5">
<font size="6">velicina fonta 6</font>
</syntaxhighlight>
</source>
 
* boju fonta možemo mijenjati na više načina, koristeći hexa zapis boja
 
<sourcesyntaxhighlight lang="html5">
<fontspan colorstyle="color:#770000;">ovaj tekst je u hexaboji #770000</fontspan>
</syntaxhighlight>
</source>
 
* koristeći ime boje
 
<sourcesyntaxhighlight lang="html5">
<fontspan colorstyle="color:blue;">ovaj tekst je plav</fontspan>
</syntaxhighlight>
</source>
 
* koristeći rgb, ali taj zapis nije uobičajen
Redak 147:
* vrsta fonta
 
<sourcesyntaxhighlight lang="html5">
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>
</syntaxhighlight>
</source>
 
* veliko početno slovo
 
<sourcesyntaxhighlight lang="html5">
<font size="5" face="Georgia, Arial" color="blue">P</font>očetno slovo
</syntaxhighlight>
</source>
 
=== Dodavanje zvuka i multimedije ===
Redak 165:
Sljedeći primjer koristi <code><nowiki><EMBED></nowiki></code> oznaku:
 
<sourcesyntaxhighlight lang="html5">
<HTML>
<HEAD>
Redak 175:
</BODY>
</HTML>
</syntaxhighlight>
</source>
 
Isti primjer korištenjem <code><nowiki><OBJECT></nowiki></code>:
 
<sourcesyntaxhighlight lang="html5">
<HTML>
<HEAD>
Redak 190:
</BODY>
</HTML>
</syntaxhighlight>
</source>
 
Primjer za '''HTML5''':<BR>
Redak 196:
* VIDEO oznaka
 
<sourcesyntaxhighlight lang="html5">
<video src="video_datoteka.mpg" width="640" height="480" controls></video>
</syntaxhighlight>
</source>
 
* AUDIO oznaka
 
<sourcesyntaxhighlight lang="html5">
<audio src="zvučna_datoteka.mp3" controls>
</syntaxhighlight>
</source>
 
* Primjer bez kontrolnog prozora, s automatskim pokretanjem (autoplay)
 
<sourcesyntaxhighlight lang="html5">
<audio src="zvuk.mp3" type="audio/mp3" autoplay=”false” />
</syntaxhighlight>
</source>
 
* Isto tako možete za video, samo kopirate oznaku autoplay u videotag.
Redak 220:
'''Primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
Redak 229:
</body>
</html>
</syntaxhighlight>
</source>
 
Pomoću obilježja <code><nowiki>alt</nowiki></code> možemo definirati tekst koji će opisivati što je na slici, koji će se prikazati ukoliko korisnikov web preglednik nije u stanju otvoriti dokument.
Redak 235:
'''Primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<img src="pas.gif" alt="Na slici je pas" height="100" width="100">
</syntaxhighlight>
</source>
 
Isto tako možemo pomoću obilježja <code><nowiki>title</nowiki></code>, dok korisnik mišem nacilja odrađeni dio dokumenta koji smo označili tim tagom, pojaviti će mu se okvirić s tekstom koji smo napisali.
Redak 243:
'''Primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<img src="pas.gif" title="Na slici je pas" height="100" width="100">
</syntaxhighlight>
</source>
 
=== Meta tagovi ===
Redak 252:
Ako je vaša stranica bogata slikama i grafikom, tada su vam meta tagovi jako važni. Kažu da slika govori tisuću riječi, ali slike su nažalost tražilicama bezvrijedne. Pogotovo ako stranica sadrži jako malo teksta. Tada je potrebno koristiti obilježje <code><nowiki>alt</nowiki></code> koje izgleda ovako:
 
<sourcesyntaxhighlight lang="html5">
<img src="imeslike.jpg" alt="Tekst koji će tražilica indexirati">
</syntaxhighlight>
</source>
 
Meta tagovi bi uvijek trebali biti smješteni u <code><nowiki><head></nowiki></code> područje HTML dokumenta. <code><nowiki><head></nowiki></code> tag se nalazi odmah nakon <code><nowiki><html></nowiki></code> taga, i završava prije <code><nowiki><body></nowiki></code> taga.
Redak 260:
'''primjer:'''
 
<sourcesyntaxhighlight lang="html5">
<title>Naziv stranice</title>
<meta name="description" content="opis web stranice">
<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice ">
<meta name="robots" content="index,follow">
</syntaxhighlight>
</source>
 
Uvijek budite sigurni da vaši meta tagovi nemaju nikakvih prelazaka u novi red u sebi, jer će ih u tom slučaju tražilice vidjeti kao neispravan kod i ignorirati. Također bi trebali izbjegavati upotrebu velikih slova (html5 standard), kao i ponavljanje izraza unutar taga ključne riječi.
 
<sourcesyntaxhighlight lang="html5">
<meta name="description" content="opis web stranice">
</syntaxhighlight>
</source>
 
Mnoge tražilice će prikazati ovaj tekst u rezultatima pretraživanja pokraj naziva stranice. Neka taj tekst ne bude pre dugačak, neka bude razumljiv i neka što bolje opiše sadržaj vaše stranice.
 
<sourcesyntaxhighlight lang="html5">
<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice">
</syntaxhighlight>
</source>
 
Ključne riječi predstavljaju ključne termine koje netko može upisati u tražilicu. Izaberite samo važne izraze. Ako ćete staviti te izraze pod tag ključne riječi, trebali biste ih spomenuti i na tekstu na stranici. Mnoge tražilice uspoređuju vaš meta sadržaj s tekstualnim sadržajem stranice, i ako se to ne poklapa, vaša stranica može zaraditi kaznu, i biti na lošoj poziciji kod rezultata pretraživanja.
 
<sourcesyntaxhighlight lang="html5">
<meta name="robots" content="index,follow">
</syntaxhighlight>
</source>
 
Mnoge web stranice imaju ovaj tag neispravno napisan. Primjer neispravnog korištenja je <code><nowiki>content="index, follow, all"</nowiki></code> Krivo jer neke tražilice ne mogu obraditi razmake između riječi. Većina tražilica po defaultu pretpostave da želite da vaša web stranica bude indeksirana i da linkovi budu praćeni, tako da korištenje neispravne sintakse može rezultirati time da tražilica jednostavno ignorira vašu stranicu. Ako zbog nekog razloga ne želite da vaša stranica bude indeksirana u pretraživačima, zamjenite u tagu riječ <code><nowiki>index</nowiki></code> sa <code><nowiki>noindex</nowiki></code>, a ako želite da linkovi ne budu praćeni, zamjenite riječ <code><nowiki>follow</nowiki></code> sa <code><nowiki>nofollow</nowiki></code>.
Redak 289:
Među ostalim meta tagovima koristan tag za napomenu o zaštiti autorskih prava autora sadržaja stranice je <code><nowiki>name="Author"</nowiki></code>.
 
<sourcesyntaxhighlight lang="html5">
<meta name="Author" content="Ime tvrtke koja je dizajnirala sajt">
</syntaxhighlight>
</source>
 
Na internetu se svakodnevno pojavljuje više od 8 milijuna novih stranica, a tražilice indeksiraju samo jedan dio od toga. Meta Tagovi su uobičajen standard koji može osigurati pravilnu kategorizaciju vaše stranice. Uvijek upotrebljavajte Meta Tagove i u njima koristite samo najvažnije riječi vezane za sadržaj stranice. Pravilno korištenje Meta Tagova vam može samo pomoći kod pozicije na tražilici, što podrazumjeva i veću i kvalificiranu posjetu stranice.
Redak 303:
'''Primjer'''
 
<sourcesyntaxhighlight lang="html5">
<style type="text/css">
.ime_stila {
Redak 313:
.drugi_stil { color: #0F0; }
</style>
</syntaxhighlight>
</source>
 
'''LINIJSKI''' – Stilska obilježja ugrađuju se kroz cijeli HTML dokument. Svakom pojedinom HTML tagu možemo pridružiti svoja vlastita stilska obilježja.
Redak 319:
'''Primjer'''
 
<sourcesyntaxhighlight lang="html5">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #F00;">Označeni tekst stylom</p>
</syntaxhighlight>
</source>
 
'''VEZANI''' – Stilska obilježja pohranjena su u zasebnoj datoteci. Ta datoteka se može povezati s bilo kojim HTML dokumentom koristeći tag <code><nowiki><link></nowiki></code> koji se smješta unutar <code><nowiki><head></nowiki></code> taga.
Redak 327:
'''Primjer'''
 
<sourcesyntaxhighlight lang="html5">
<link href="http//www.pou.com/Unnamed Site 2/style.css" rel="stylesheet" type="text/css">
</syntaxhighlight>
</source>
 
== Postavljanje stranica ==
Dobavljeno iz "https://hr.wikipedia.org/wiki/HTML"