Header

postat acum 4 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!

Comentariu postate de fila disruptor la data de 16.05.2019
I intended to send you this bit of note to be able to thank you very much over again considering the amazing guidelines you have featured here. It has been simply seriously generous with people like you to allow easily exactly what a number of people would've made available for an e book in making some profit on their own, and in particular now that you might well have tried it in case you decided. Those principles likewise worked as the fantastic way to fully grasp many people have similar fervor like my own to understand significantly more when considering this problem. I'm sure there are millions of more pleasurable situations in the future for individuals that looked over your blog post.
Comentariu postate de minecraft download pc la data de 17.05.2019
fantastic post, very informative. I ponder why the opposite specialists of this sector do not understand this. You should proceed your writing. I am confident, you have a great readers' base already!