Overview:
În dezvoltarea web, elementele HTML pot fi împărțite în două categorii principale: blocuri și elemente inline. În această lecție, vom explora diferențele dintre aceste două tipuri de elemente și modul în care influențează structura și prezentarea paginilor web.
Key Concepts:
- Elemente Bloc:
- Elementele bloc sunt elemente care încep pe o nouă linie și se extind pe întreaga lățime a containerului părinte.
- Exemple de elemente bloc includ
<div>,<p>,<h1> - <h6>,<ul>,<ol>,<li>, și altele.
- Elemente Inline:
- Elementele inline sunt elemente care nu încep pe o nouă linie și se încadrează doar pe suprafața necesară conținutului lor.
- Exemple de elemente inline includ
<span>,<a>,<strong>,<em>,<img>, și altele.
- Caracteristici ale Elementelor Bloc:
- Ocupă întreaga lățime disponibilă a containerului părinte.
- Elementele bloc permit să le stabilim înălțimea și lățimea.
- Elementele bloc pot conține alte elemente, inclusiv alte elemente bloc.
- Caracteristici ale Elementelor Inline:
- Ocupă doar spațiul necesar conținutului lor.
- Nu permit să le stabilim înălțimea și lățimea direct.
- Elementele inline se încadrează în jurul conținutului lor fără a schimba structura liniei.
Detailed Examples:
1. Element Bloc: <div>
<div>
<p>Acesta este un paragraf într-un element bloc.</p>
<ul>
<li>Element bloc în listă</li>
<li>Alt element bloc în listă</li>
</ul>
</div>
2. Element Inline: <span>
<p>Acesta este un <span>text inline</span> într-un paragraf.</p>
3. Stilizare Diferențiată:
/* Stilizare pentru elemente bloc */
div {
background-color: #e0e0e0;
padding: 10px;
}
/* Stilizare pentru elemente inline */
span {
color: #ff0000;
font-weight: bold;
}
Practice Exercise:
Task:
- Creați o structură HTML care să includă atât elemente bloc, cât și elemente inline.
- Aplicați stilizare diferită pentru elementele bloc și elementele inline folosind CSS.
Structură HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplu Bloc vs. Inline</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="block-element">
<h1>Element Bloc</h1>
<p>Acesta este un paragraf într-un element bloc.</p>
<ul>
<li>Element bloc în listă</li>
<li>Alt element bloc în listă</li>
</ul>
</div>
<p>Acesta este un <span class="inline-element">text inline</span> într-un paragraf.</p>
</body>
</html>
Fișierul CSS (styles.css):
/* Stilizare pentru elemente bloc */
.block-element {
background-color: #e0e0e0;
padding: 10px;
}
/* Stilizare pentru elemente inline */
.inline-element {
color: #ff0000;
font-weight: bold;
}
Exemplu 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lecția 7 - Bloc vs. Inline</title>
<style>
/* Stilizare pentru elemente bloc */
.container {
background-color: #f0f0f0;
padding: 20px;
}
p {
color: #333;
font-size: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
background-color: #c0c0c0;
margin-bottom: 5px;
}
/* Stilizare pentru elemente inline */
span {
color: #ff0000;
font-weight: bold;
}
a {
text-decoration: none;
color: #0077cc;
}
</style>
</head>
<body>
<div class="container">
<p>Acesta este un paragraf într-un element bloc.</p>
<ul>
<li>Element bloc în listă</li>
<li>Alt element bloc în listă</li>
</ul>
</div>
<p>Acesta este un <span>text inline</span> într-un paragraf. Un <a href="#">link inline</a> către o altă pagină.</p>
</body>
</html>
Această structură HTML include atât elemente bloc (cum ar fi <div>, <p>, <ul>, <li>), cât și elemente inline (cum ar fi <span> și <a>). Stilurile CSS asociate evidențiază diferențele între aceste două tipuri de elemente, inclusiv culoarea de fundal, dimensiunile textului și stilul link-urilor.