Elemente de baza

HTML | Stefanescu Mihai | 2020-10-11

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)
}

 



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
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.

Posteaza un comentariu

Comentarii

ovi_cluj
ovi_cluj | 2023-03-26 05:38
salut, imi place mult ce faci si ca ai pus lectii gratuie asa o sa ajunga si copkii nostrii sus in IT, macar cu atata sa realizam, ca dupa cei care ne conduc din Guvernare, nu am nici o baza despre mine: ing energetica ind la UTCN sysadmin la UBB + Cisco_CCNA Linux user: LinuxMint ( ubuntu ) age: 55 yo PC: unul slab: dar pe Linux e destul dual procesor cu 4 Gb Ram ::) screen capt: https://i.imgur.com/QHQFktc.png si https://i.imgur.com/hjoZfnn.png contact: e-mail: [email protected] LK https://www.linkedin.com/in/chifor-ovidiu-system-engineer-industrial-energetic-engeenirig/ FB https://www.facebook.com/ValentinLinuxMint Salve from Cluj !

CurtisRuist
CurtisRuist | 2024-01-19 16:35
[url=http://vermox.cfd/]buy vermox cheap[/url]

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 ⊞

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.

⮆ïļ