Header

postat acum 2 ani de Stefanescu Mihai in categorie HTML

Am invatat in lectiile trecute ca un document HTML are urmatoarea structura:

<!DOCTYPE html>
<html>
   <head>
       Headerul documentului
   </head>

   <body>
       Bodyul documentului
   </body>
</html>

In aceasta lectie am sa detaliez putin partea de header, mai exact continutul tag-ului <head> si am sa vorbesc despre taguri precum <title>, <meta>, <link>, <base>, <style>, <script> si <noscript>.Titlul documentuluiTag-ul <title>este folosit pentru a specifica titlul unui document HTML.

<!DOCTYPE html>
<html>
   <head>
       <title>Titlu document HTML</title>
   </head>

   <body>
       Continutul paginii web ajunge aici.
   </body>
</html>

 Tag-urile <meta>

Tag-ul HTML <meta> este folosit pentru a oferi meta-date despre documentul HTML, aici ma refer la informatii precum data de expirare a paginii, autorul paginii, cuvinte cheie, meta descriere, etc.

Mai jos sunt cateva metatag-uri importante.

<!DOCTYPE html>
<html>
   <head>
       <title>Titlu document HTML</title>

		<!-- O lista de cuvinte cheie -->
		<meta name="keywords" content="HTML, CSS, C, C++, Java, PHP, Perl, Python">

		<!-- O descriere a paginii -->
		<meta name="description" content="Sursa ta de tutoriale gratuite in limba romana">

		<!-- DEspre AUtor -->
		<meta name="author" content="Stefanescu Mihai">

		<!-- Tipul de continut afisat in pagina -->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!-- Refresh delay pagina-->
		<meta http-equiv="refresh" content="30">

		<!-- Data de expirare a paginii -->
		<meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

		<!-- Tag ce anunta robotii sa nu indexeze continutul unei pagini -->
		<meta name="robots" content="noindex, nofollow">
	   
   </head>

   <body>
       Continutul paginii web ajunge aici.
   </body>
</html>

 Tag-ul <base>

Acest tag este folosit pentru a specifica baza URL_ului pentru toate link-urile relative din pagina, ceea ce inseamna ca toate link-urile relative sunt concatenate cu baza.

De exemplu, toate paginile si imaginile sunt cautate folosind URL-urile relative concatenate cu URL-ul de baza, in cazul nostru fiind http://www.invata-programare.ro.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Base</title>
<base href="http://www.invata-programare.ro/" />
</head>
<body>

<img src="/images/logo.png" alt="Logo"/>
<a href="/toate-lectiile-html" title="Tutorial HTML"/>Tutorial HTML</a> 

</body>
</html>

Tag-ul link

Tag-ul <link> este folosit pentru a specifica relatia dintre documentul curent si o resursa externa. In urmatorul exemplu avem pusa legatura dintre documentul HTML curent si un document CSSaflat intr-un subdirector.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu tag link</title>
<base href="http://www.invata-programare.ro/" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p>Exemplu link catre fisier CSS.</p>
</body>
</html>

Tag-ul <style>

Acest tag este folosit pentru a scrie o lista de stiluri CSS pentru pagina actuala.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Style</title>
<base href="http://www.invata-programare.ro/" />
<style type="text/css">
.clasaMea{
   background-color: #ccc;
   padding: 12px;
}
</style>
</head>
<body>
<p class="clasaMea">Salut, eu sunt Mihai si imi place Bacon-ul.</p>
</body>
</html>

Tag-ul <script>

Acest script este folosit pentru a include in documentul tau HTML un script javascript extern sau pentru a defini un script javascript in document.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Script</title>
<base href="http://www.invata-programare.ro/" />
<script type="text/javascript">
function Hello(){
   alert("Salut, sper ca acest site iti este folositor!");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Apasa!"  />
</body>
</html>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!