HTML5 - Meta
Definisanje meta podataka
Oznake <meta> obično se koriste za pružanje strukturisanih metapodataka kao što su ključne riječi dokumenta, opis, ime autora, kodiranje znakova i drugi metapodaci. Bilo koji broj meta tagova može se smjestiti unutar zaglavlja HTML ili XHTML dokumenta. Meta podaci se neće prikazivati na web stranici, ali će se moći mašinski razčlaniti i mogu ih koristiti pretraživači poput Google-a ili drugih web pretraživača. Sljedeći dio opisuje upotrebu meta tagova u razne svrhe.
Deklarisanje Character Encoding u HTML
Character Encoding se obično koristi za deklarisanje character encoding unutar HTML dokumenta.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deklarisanje Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Volim da učim uz IT TUTORIJALE!</h1>
</body>
</html>
Napomena!
UTF-8 je vrlo svestran i preporučuje se (character encoding) za odabir. Međutim, ako ovo nije navedeno, tada se koristi zadano kodiranje platforme.
Definisanje autora dokumenta
Takođe možete koristiti meta tag da biste jasno odredili ko je autor ili kreator web stranice. Autor može biti pojedinac, kompanija ili treća strana.
<head>
<title>Definisanje autora dokumentar</title>
<meta name="author" content="Miloš Mihaljica">
</head>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Definsanje autora stranice</title>
<meta name="author" content="Miloš Mihaljica">
</head>
<body>
<h1>IT TUTORIJALI!</h1>
<p><strong>Napomena:</strong> Informacije unutar meta tagova nisu vidljive u pretraživaču.</p>
</body>
</html>
Napomena!
Atribut name meta taga definiše ime dijela meta podataka na nivou dokumenta, dok atribut content daje odgovarajuću vrijednost. Vrijednost atributa content može da sadrži tekst i entitete, ali ne smije da sadrži HTML oznake.
Ključne riječi i opis za pretraživače
Neki pretraživači koriste meta podatke, posebne ključne riječi i opise za indeksiranje web stranica. Međutim ovo ne mora nužno biti istina. Ključne riječi koje daju dodatnu težinu ključnim riječima i opisima dokumenta pružaju kratak sažetak stranice. Pogledajmo primjer:
<head>
<title>Ključne riječi i opis za pretraživače</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="IT TUTORIJALI - Online
platforma za učenje HTML, CSS, javaScript i još mnogo toga...">
</head>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Definisanje ključnih riječi i opisa stranice</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="IT TUTORIJALI - Online
platforma za učenje HTML, CSS, javaScript i još mnogo toga...">
</head>
<body>
<h1>IT TUOTIJALI!</h1>
<p><strong>Note:</strong> Informacije unutar meta tagova nisu vidljive u pretraživaču.</p>
</body>
</html>
Savjet!
Pretraživači će često koristiti meta opis stranice za stvaranje kratkog sažetka za stranicu kada se pojavi u rezultatima pretraživanja.
Konfigurisanje okvira za prikaz za mobilne uređaje
Možete koristiti meta tag okvira za pravilno prikazivanje web stranica na mobilnim uređajima. Bez meta taga za prikaz, mobilni pretraživač generišu web stranice u tipičnim širinama ekrana radne površine, a zatim ih smanjuju tako da odgovaraju mobilnom ekranu. Kao rezultat, potreban je pinch-and-zoom za pravilno prikazivanje web stranice na mobilnim uređajima, što je vrlo nezgodno. Sljedeća demonstracija prikazuje dvije web stranice - jednu s meta tagom vidnog polja i drugu bez postavljene meta taga vidnog polja. Otvorite ove veze na mobilnim uređajima da vidite kako to funkcionira.
Meta tag okvira za prikaz omogućava vam da postavite najbolju veličinu okvira za prikaz i ograničenja skaliranja za gledanje web stranica na mobilnim uređajima. Tipična definicija meta taga vidnog polja izgledaće kao u sljedećem primjeru:
<head>
<title>Konfiguracija Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Postavljanje prikaza za mobilne ekrane</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 18px;
font-family: cursive;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<h1>Demonstracija meta tagova za prikaz</h1>
<p><img src="/examples/images/sky.jpg" alt="Cloudy Sky"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id
metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id
interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget
nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque
viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit
amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at
lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu.
Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor,
commodo ac dui quis, bibendum viverra erat. Maecenas mattis
lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam
tristique, accumsan nunc eu.</p>
</body>
</html>
Par ključ/vrijednost width=device-width unutar atributa content postavlja širinu okvira za prikaz na jednaku širini ekrana uređaja, dok initial-scale=1 postavlja početni nivo ili zum na 100% kada stranicu prvi put učita pretraživač.
Savjet!
Na svojim web stranicama uvijek koristite oznaku okvira za prikaz <meta>. Učiniće vašu web stranicu jednostavnijom za upotrebu i dostupnijom na mobilnim uređajima i tabletima.