Elemente de baza

postat acum 2 ani de Stefanescu Mihai in categorie HTML

Am spus si in lectia trecuta, documentele HTML sunt formate din mai multe tag-uri ( care formeaza elementele).

Orice element HTML are urmatoarea forma: <se deschide tag-ul> continutul elementului </se inchide tag-ul>

Tag-urile de Heading

Orice document HTML incepe cu un heading.

Se pot folosi diferite dimensiuni pentru heading, dar acest lucru este facut mult mai usor de HTML, care vine cu 6 asemenea elemente :

<h1>, <h2>, <h3>, <h4>, <h5> si <h6>.Inainte si dupa aceste tag-uri este introdus un line break.

<html>
	<head>
		<title>Exemplu Heading</title>
	</head>
<body>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
</body>
</html>

Codul de mai sus va avea urmatorul rezultat:

Tag de Paragraf

Tag-ul <p> iti ofera posibilitatea de a-ti structura textul in paragrafe. Fiecare pragraf trebuie sa fie scris intre tag-urile <p> si </p>:

<!DOCTYPE html>
<html>
	<head>
		<title>Exemplu Paragrafe</title>
	</head>
<body>
	<p>Primul Paragraf</p>
	<p>Al doilea paragraf</p>
 
</body>
</html>

Tag-ul pentru Line Break

In orice loc folositi tag-ul <br /> orice continut vine dupa el va fi mutat cu un rand mai jos. Acest tag contine si unspatiu intre br si slash, iar daca acesta este omis browserele mai vechi nu vor face nimic (ca si cand acel tag nu ar fi acolo.).

Atentie! Acest tag nu se inchide, se posteaza decat codul <br /> unde doriti sa inserati un rand nou si atat.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Line Break</title>
</head>
<body>
<p>Salut<br />
Avem un break mai sus si unul.<br />
la sfarsitul acestui rand.<br />
Salut!</p>
</body>
</html>

Acest cod va avea urmatorul rezultat:

Salut
Avem un break mai sus si unul.
la sfarsitul acestui rand.
Salut!

 Linii Orizontale

Liniile orizontale sunt folosite pentru a separa sectiuni din document. Tag-ul <hr> creeaza o linie orizontala de-a lungul ecranului dintr-o margine pana in cealalta a elementului parinte.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu linie orizontala</title>
</head>
<body>
<p>Paragraful de sus</p>
<hr />
<p>Paragraful de jos</p>
</body>
</html>

Atentie! Acest tag nu se inchide, se posteaza decat codul <hr /> unde doriti sa inserati o linie orizontala si atat.

Pastrarea formatarii

Exista momente in care doresti sa pastrezi formatarea unui text exact ca intr-un document HTML, iar pentru aceste cazuri avem la dispozitie tag-ul <pre>.

Orice text pus intre tag-urile <pre> si </pre> isi va pastra formatarea din documentul sursa.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Pastrare Fomratare</title>
</head>
<body>
<pre>
function testamFunction( stringText ){
   alert (stringText)
}
</pre>
</body>
</html>

Va fi afisat astfel:

function testamFunction( stringText ){
   alert (stringText)
}

 

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!