S28 – S29 – S30 Crearea unei Pagini HTML cu Mapare de Imagine și Tabele
Tema Practică: Crearea unei Pagini HTML cu Mapare de Imagine și Tabele
Durata: 4 ore
Nivel: Clasa a IX-a
Obiective:
- Maparea unei imagini în HTML pentru crearea unor zone interactive.
- Inserarea unui tabel în HTML.
- Aplicarea stilurilor CSS pentru formatarea tabelului.
Sarcini de lucru:
1. Structura de bază a documentului HTML
- Creează un fișier nou în Notepad și salvează-l cu extensia
.html(ex.:pagina_ta.html). - Scrie structura de bază a documentului HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mapare și Tabele</title>
<style>
/* Stiluri pentru tabel */
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 10px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
</body>
</html>
2. Maparea unei imagini
- Adaugă o imagine în secțiunea
<body>și creează zone interactive pe imagine (de ex.: o hartă sau un meniu cu zone clicabile).- Imaginea trebuie să fie în același folder cu fișierul HTML (ex.:
harta.jpg).
- Imaginea trebuie să fie în același folder cu fișierul HTML (ex.:
<h1 style=”text-align:center;”>Mapare Imagine</h1>
<img src=”harta.jpg” alt=”Harta interactivă” usemap=”#harta_interactiva” style=”display:block; margin:0 auto;”>
<map name=”harta_interactiva”>
<area shape=”rect” coords=”10,10,100,100″ href=”pagina1.html” alt=”Zona 1″>
<area shape=”circle” coords=”150,150,50″ href=”pagina2.html” alt=”Zona 2″>
<area shape=”poly” coords=”200,200,250,200,250,250,200,250″ href=”pagina3.html” alt=”Zona 3″>
</map>
Explicație:
- shape definește forma zonei interactive:
- rect: dreptunghi (coordonate: x1, y1, x2, y2).
- circle: cerc (coordonate: x, y, raza).
- poly: poligon (coordonate: x1, y1, x2, y2, x3, y3…).
- coords specifică coordonatele zonei.
- href definește legătura către o altă pagină.
3. Inserarea unui tabel
- Adaugă un tabel în secțiunea
<body>:
<h1 style=”text-align:center;”>Tabel cu Date</h1>
<table>
<tr>
<th>Nume</th>
<th>Vârstă</th>
<th>Oraș</th>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
<td>București</td>
</tr>
<tr>
<td>Andrei</td>
<td>30</td>
<td>Cluj-Napoca</td>
</tr>
<tr>
<td>Ioana</td>
<td>28</td>
<td>Timișoara</td>
</tr>
</table>
4. Formatarea tabelului
- Tabelul este deja formatat folosind stilurile din secțiunea
<style>:- Borduri: pentru celule (
border). - Aliniere: text centrat (
text-align: center). - Culoare de fundal: pentru antet și rândurile pare.
- Dimensiuni: tabelul ocupă 50% din lățimea paginii.
- Borduri: pentru celule (
<!DOCTYPE html>
<html>
<head>
<title>Mapare și Tabele</title>
<style>
/* Stiluri pentru tabel */
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 10px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1 style=”text-align:center;”>Mapare Imagine</h1>
<img src=”harta.jpg” alt=”Harta interactivă” usemap=”#harta_interactiva” style=”display:block; margin:0 auto;”>
<map name=”harta_interactiva”>
<area shape=”rect” coords=”10,10,100,100″ href=”pagina1.html” alt=”Zona 1″>
<area shape=”circle” coords=”150,150,50″ href=”pagina2.html” alt=”Zona 2″>
<area shape=”poly” coords=”200,200,250,200,250,250,200,250″ href=”pagina3.html” alt=”Zona 3″>
</map>
<h1 style=”text-align:center;”>Tabel cu Date</h1>
<table>
<tr>
<th>Nume</th>
<th>Vârstă</th>
<th>Oraș</th>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
<td>București</td>
</tr>
<tr>
<td>Andrei</td>
<td>30</td>
<td>Cluj-Napoca</td>
</tr>
<tr>
<td>Ioana</td>
<td>28</td>
<td>Timișoara</td>
</tr>
</table>
</body>
</html>
Instrucțiuni de verificare:
- Salvează fișierul ca .html și deschide-l în browser.
- Verifică dacă:
- Imaginea este afișată cu zonele clicabile corect.
- Tabelul este afișat cu stilurile aplicate.
Succes! 😊