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 raščlaniti i mogu ih koristiti pretraživači poput Googlea ili drugih web pretraživača. Sljedeći dio opisuje upotrebu meta tagova u razne svrhe.



Deklarisanje Character Encoding u HTML

Meta tag koja 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>


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 u cjelini 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>


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 kratki sažetak stranice. Evo primjera:

<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>


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 okvira 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 izgledat će na sljedeći način:

<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č.