Header

Stefanescu Mihai 2 years ago 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>

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.