Elemente Block

HTML | Stefanescu Mihai | 2020-10-11

Toate elementele HTML pot fi puse in doua mari categorii, elemente de tip Block si elemente de tip Inline.

Elemente de tip Block

Elementele de tip block au inainte si dupa ele un line break ( <br/> ). Drept exemplu avem tag-urile <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, <address>, etc. Toate aceste elemente incep pe propria lor linie si orice urmeaza dupa ele apare pe alta linie.

Elemente de tip Inline

Elementele Inline pot fi postate chiar si in interiorul frazelor si nu apar pe o line noua. Drep exemplu avem tag-urile <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> si <var>.Gruparea elementelorSunt doua tag-uri importante ce sunt folosite in mod frecvent pentru a grupa diverse tag-uri HTML <div> si <span>.Div-ulAcesta este un element de tip block foarte important in gruparea diverselor elemente si aplicarea de stiluri CSS pe tot grupul. Acest tag poate fi folosit foarte bine si la creearea de layout-uri de pagini web.Iata un exemplu de layout foarte simplu:

<!DOCTYPE html>
<html>
<head>
<title>Exmple Div-uri</title>
<style>
<!--
#main_head{
	min-height: 65px;
	background: rgba(255, 0, 0, .4);
	font-size: 24px;
	border: 1px solid black;
	margin: 2px;
}
#main_container{
	width: 450px;
	margin: 0 auto;
}
#main_stanga{
	float: left;
	width: 65px;
	background: rgba(0, 0, 255, .4);
	border: 1px solid black;
	margin: 2px;	
}
#main_dreapta{
	float: right;
	width: 65px;
	background: rgba(0, 0, 255, .4);
	border: 1px solid black;
	margin: 2px;	
}
#main_continut{
	float: left;
	border: 1px solid black;
	margin: 2px;	
	width: 67%;
}
#main_footer{
	border: 1px solid black;
	margin: 2px;
	clear: both;
}
-->
</style>
</head>
<body>
<div id="main_container">
	<div id="main_head">Header</div>
		<div id="main_stanga">Stanga</div>
		<div id="main_continut">Continut</div>
		<div id="main_dreapta">Dreapta</div>
	<div id="main_footer">Footer</div>
</div>
</body>
</html>

 Iara aici avem rezultatul:

Span-ul

Acesta este un element HTML inline si poate fi folosit pentru a grupa elemente inline intr-un document HTML. Acest tag nu aduce nici-o schimbare vizuala cand este folosit fara CSS.

<p>Acest text este <span style="color:blue;">albastru</span> iar acesta este <span style="color:green">verde</span></p>


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

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

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.

⮆ïļ