HTML: ‘head’

<head></head>

HTML5 ionoa

Buruak web-orria sortzeko behar diren informazio eta baliabide guztiak biltzen ditu. Ikus dezagun.

<title></title> —Web-orriaren izena ezartzeko.

<base></base> —Nabigatzaileak URL erlatiboen benetako kokapena ezartzeko erabiltzen duen URLa definitzen du. Elementuak href atributua izan behar du oinarrizko URLa deklaratzeko. Elementu hori deklaratzen denean, egungo URLaren ordez, nabigatzaileak href atributuari esleitutako URLa erabiltzen du URL erlatiboak osatzeko.

<meta> —Dokumentuarekin lotutako metadatuak adierazten ditu, hala nola dokumentuaren deskribapena, hitz gakoak, karaktereen kodifikazio mota, etab. Elementuak name atributuak barne har ditzake metadata mota deskribatzeko, content balioa zehazteko, eta charset edukia prozesatzerakoan erabili beharreko karaktereen kodifikazio mota adierazteko.

<link> —Dokumentuaren eta kanpoko baliabide baten arteko erlazioa zehazten du (normalean CSS fitxategiak kargatzeko erabiltzen da). Baliabidearen kokapena adierazteko href eta erlazio mota definitzeko rel atributuak erabili ohiditu. Horiez gain baliabidea lotuta dagoen bitartekoa zehazteko batez bestekoa (pantaila, inprimagailua, etab.), eta baliabide-mota eta haren tamaina adierazteko type eta sizes atributuak ere har ditzake.

<style></style>—Dokumentuaren barruan CSS estiloak adierazteko erabiltzen da.

<script></script> —JavaScript kodea kargatzeko edo deklaratzeko erabiltzen da.

<title></title>

<head></head> elementua deklaratzen dugunean, normalean, lehenik eta behin, haren barruan barruan izenburua zehaztu ohi da. Hori <title></title> etiketez inguratua egin ohi da. Testu hori web-orriko erlaitzean agertzen da, eta horixe da erabiltzaileek gure webgunea pantailaratzen dutenean ikusten dutena.


<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Webgunegintza</title>
  </head>
  <body>

  </body>
</html>
<title></title> elementua

HTML-egitura(1): <title></title> elementua

Adi!: aurreko adibideko <title></title> elementua eskuinerantz mugitu dugu tabuladorearekin garatzaileari hierarkiaren barruan elementuaren posizioa ikusten laguntzeko. Nabigatzaileek ez dituzte kontuan hartzen zuriuneak eta elementuetatik kanpoko lerro-jauziak.

<meta>

Izenburuaz gain, dokumentuaren metadatuak ere buruan adierazten dira.

Metadatuek nabigatzaileek eta bilatzaileek web-orria sortzeko eta sailkatzeko erabiltzen duten orriari buruzko informazioa biltzen dute.

Balioak <meta> elementuarekin adierazten dira. Elementu honek hainbat ezaugarri ditu. Ikus dezagun.

Garrantzitsuenak pantailan testua aurkezteko erabili beharreko karaktere-taula definitzen du, charset atributuarekin adierazten dena.


<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Webgunegintza</title>
    <meta charset="utf-8">
  </head>
  <body>

  </body>
</html>

Gogoratu: adibideak utf-8 gisa definitzen du karaktere-multzoa, hizkuntza gehienetan erabiltzen diren karaktere guztiak biltzen dituena, baina beste batzuk ere badaude eskuragarri.

Informazio gehigarria deklaratzeko <meta> elementu ugari sar daitezke.

Adibidez, gure dokumentuak prozesatzeko orduan nabigatzaileek kontuan har ditzaketen bi datu dira orriaren deskribapena eta edukia identifikatzen duten gako-hitzak.

<meta> elementu horiek name atributua eskatzen dute description eta keywords balioekin, eta content atributua deskribapen eta gako-hitz gisa esleitu nahi dugun testuarekin (gako-hitzak komaz bereizi behar dira).


<!DOCTYPE html>
<html lang="es">
  <head>
      <title>Webgunegintza</title>
      <meta charset="utf-8">
      <meta name="description" content="Hau ikasmaterialaren lehen atalaren web-orria da.">
      <meta name="keywords" content="HTML, CSS, JavaScript, Euskara">
  </head>
  <body>

  </body>
</html>

<link>icon

Elementu hori erabiltzen da dokumentuari kanpoko artxiboetatik estiloak, kodeak, irudiak edo ikonoak gehitzeko.

Adibidez, nabigatzaile batzuek ikono bat erakusten dute leihoaren goiko aldean, orrialdearen izenburuarekin batera. Ikono hori kargatzeko, <link></link> elementu bat erabili ohi dugu. Haren barruan hainbat atributu sartu ohi ditugu:

  • icon balioa duen rel atributua
  • ikonoa duen fitxategiaren kokapena zehazten duen duen href atributua
  • ikonoaren formatua zehazten duen type atributu
  • eta ikonoaren zabalera eta altuera biderkatzen dituen sizes atributua

<!DOCTYPE html>
<html lang="es">
    <head>
      <title>Webgunegintza</title>
      <meta charset="utf-8">
      <meta name="description" content="Hau ikasmaterialaren lehen atalaren web-orria da.">
      <meta name="keywords" content="HTML, CSS, JavaScript, Euskara">
      <link rel="icon" href="imagenes/favicon.png" type="image/png" sizes="16x16">
    </head>
    <body>

    </body>
</html>

Nabigatzaileak leku gutxi du ikonoa erakusteko, beraz, irudi honen tamaina tipikoa 16 pixel bider 16 pixelekoa da. Irudiak erakusten du nola ikusten den leihoa ikono bat duen dokumentu bat irekitzen dugunean (kasu honetan, izenburuaren ezkerraldean irudi bat agertzen da).

Ikonoa erlaitzean

HTML-egitura(2): ikonoa erlaitzean

Gogoratu: <link></link> elementuaren type atributuari esleitutako balioa MIME mota gisa zehaztu behar da. Fitxategi guztiek dute MIME mota bat, sistemari edukiaren formatua adierazteko. Adibidez HTML fitxategi baten MIME mota text/html da.

MIME mota bat dago erabilgarri dagoen fitxategi mota bakoitzerako, JPEG eta PNG irudietarako  image/jpeg  eta  image/png barne hartzen dituena.

<link>CSS

<link></link> elementua web orria sortzeko behar diren estiloak dituzten CSS fitxategiak kargatzeko erabiltzen da. Adibidez, hurrengo dokumentuak misestilos.css fitxategia kargatzen du.

Fitxategia kargatu ondoren, barruan adierazitako estilo guztiak dokumentuaren elementuei aplikatzen zaizkie. Kasu honetan, baliabide-mota deklaratzeko rel atributuari CSS estilo-orrietarako “stylesheet” balioa esleitu behar diogu eta href atributuari fitxategiaren kokapena zehazten duen URLa. CSS estiloak zehazten dituen fitxategia nola definitu hurrengo kapitulu batean aztertuko dugu.


<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Webgunegintza</title>
        <meta charset="utf-8">
        <meta name="description" content="Hau ikasmaterialaren lehen atalaren web-orria da.">
        <meta name="keywords" content="HTML, CSS, JavaScript, Euskara">
        <link rel="icon" href="imagenes/favicon.png" type="image/png" sizes="16x16">
        <link rel="stylesheet" href="estiloa.css">
    </head>
    <body>

    </body>
</html>

Dokumentuaren burua prest!

Jarraian gorputza osatzeari ekingo diogu.