S27 – Crearea unei Pagini HTML Simple folosind Notepad
Tema Practică: Crearea unei Pagini HTML Simple folosind Notepad
Durata: 2 ore
Nivel: Clasa a IX-a
Obiective:
- Crearea unei pagini HTML utilizând cod pur.
- Inserarea și formatatea textului.
- Inserarea unei imagini și ajustarea proprietăților acesteia.
Sarcini de lucru:
1. Lansarea editorului HTML
- Deschide Notepad.
- Creează un fișier nou și salvează-l cu extensia
.html(ex.:pagina_mea.html). - Scrie structura de bază a unui document HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pagina mea HTML</title>
</head>
<body>
</body>
</html>
2. Inserarea și formatarea textului
- Adaugă un titlu principal și un paragraf formatat în secțiunea
<body>:
<h1 style=”color:blue; font-size:24px; font-family:Arial;”>Titlu Pagina HTML</h1>
<p style=”font-size:16px; color:red; font-family:Verdana;”>Acesta este un text exemplu pentru formatări HTML.</p>
3. Inserarea unei imagini
- Adaugă o imagine în pagina HTML. Imaginea trebuie să fie în același folder cu fișierul HTML (de ex.,
imagine.jpg).
<img src=”imagine.jpg” alt=”Descriere imagine” style=”width:400px; height:auto;”>
4. Poziționarea și încadrarea imaginii
- Modifică poziționarea și adaugă un text în jurul imaginii:
<img src=”imagine.jpg” alt=”Imagine exemplu” style=”float:left; margin:10px;”>
<p style=”text-align:justify;”>Acest paragraf este un exemplu de text care se aliniază în jurul unei imagini plasate în stânga. Puteți observa cum imaginea este încadrată de text.</p>
Rezultatul Final:
Pagina HTML creată va conține:
- Un titlu principal formatat.
- Un paragraf formatat.
- O imagine inserată cu proprietăți ajustate.
- Text aliniat în jurul imaginii.
<!DOCTYPE html>
<html>
<head>
<title>Pagina mea HTML</title>
</head>
<body>
<h1 style=”color:blue; font-size:24px; font-family:Arial;”>Titlu Pagina HTML</h1>
<p style=”font-size:16px; color:red; font-family:Verdana;”>Acesta este un text exemplu pentru formatări HTML.</p>
<img src=”imagine.jpg” alt=”Imagine exemplu” style=”float:left; margin:10px;”>
<p style=”text-align:justify;”>Acest paragraf este un exemplu de text care se aliniază în jurul unei imagini plasate în stânga. Puteți observa cum imaginea este încadrată de text.</p>
</body>
</html>
Instrucțiuni pentru verificare:
- Salvează fișierul cu extensia .html.
- Deschide fișierul în browser (de ex.: Chrome sau Edge).
- Verifică dacă textul și imaginea sunt afișate conform cerințelor.
Succes! 😊