marți, 25 martie 2014

LECTIA 11 - HTML HEAD ELEMENTS

Si uite asa am ajuns si la lectia cu numarul 11. In aceasta lectie vorbim despre tag-ul <head> si despre ce putem scrie in aceasta sectiune.


Elementele care se pot adauga in sectiunea <head> si </head> sunt :

  • <title>
  • <style>
  • <link>
  • <meta>
  • <script>
  • <noscript>
  • <base>
Acum sa luam fiecare element html din sectiunea <head></head> si sa vorbim despre el.

ELEMENTUL <title>
Folosim acest element pentru a seta titlul unei pagini. Tag-ul <title> defineste un titlu in bara de instrumente a browser-ului. 
Seteaza un titlu atunci cand o pagina este adaugata la favorite.
Afiseaza un titlu pentru o pagina/pagini in rezultatele motoarelor de cautare.

Eemplu:

<!DOCTYPE html>
<html>
<head>
<title>Acesta este titlul paginii</title>
</head>

<body>
Acesta este continutul vizibil al paginii</body>
</body>
</html>

ELEMENTUL <base>
Tag-ul <base> specifica url-ul de baza pentru toate legaturile relative intr-o pagina.

Exemplu:

<head>
<base href="http://despre-web.blogspot.ro/img/" target="_blank">
</head>

ELEMENTUL <link>
Tag-ul <link> defineste relatia dintre o pagina web si o resursa externa. Acest element html se foloseste in general pentru a importa/lega foi de stil externe.

Exemplu:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>


ELEMENTUL <style>
Tag-ul <style> este folosit pentru a defini anumite stiluri intr-o/pentru o pagina web. In interiorul tag-ului <style> se definesc stiluri pentru diverse elemente html.

Exemplu:

<head>
<style type="text/css">
body {background-color: red;}
p {color: blue;}
</style>
</head>

In exemplul de mai sus folosind tag-ul <style> am definit niste valori pentru elementele body si p. Folosind proprietatile background-color si color am spus browser-ului ca, culoarea de fundal este rosie iar textul paragrafelor albastru.

Scrieti codul de mai sus intr-un fisier cu extensie html salvati-l apoi deschideti fisierul prin internet explorer sau browser-ul folosit de voi pentru a vedea rezultatele. Modificati valorile "red" si "blue" cu alte culori pentru a intelege cum lucreaza elementul html <style>.

ELEMENTUL <meta>
Tag-ul <meta> se foloseste pentru a transmite informatii despre un website sau o pagina web. Folosind acest tag putem specifica descrierea unei pagini, cuvintele cheie, autorul etc. 

Exemplu:

<head>
<meta name="description" content="Tutoriale si resurse web" />
<meta name="keywords" content="tutoriale, resurse web, html, css, php" />
<meta name="author" content="Un nume de autor" />
</head>

De asemenea putem spune browser-ului cand sa faca refresh la o pagina astfel:

<head>
<meta http-equiv="refresh" content="20" />
</head>

In exemplul de mai sus content="20" spune browser-ului ca odata la 20 de secunde sa faca refresh la pagina.

ELEMENTUL <script>
Tag-ul <script> se foloseste tot in sectiunea <head> atunci cand se doreste definirea unui script client-side  cum ar fi JavaScript.
 

0 comentarii:

Trimiteți un comentariu

Comenteaza despre acest articol