Formatarea textului, imaginilor și fundalurilor în HTML

Formatarea textului, imaginilor și fundalurilor în HTML

1. Inserarea și formatarea unui text

Textul într-o pagină web poate fi personalizat prin setarea tipului de font, dimensiunii, stilului și culorii. De asemenea, se poate utiliza aplicația Paint pentru a obține culori personalizate și aplicația Calculator pentru a converti culorile între formatul zecimal și hexazecimal.

  • Corp de literă: Pentru a schimba corpul de literă, folosiți proprietatea font-family.
  • Mărimea textului: Mărimea textului se poate ajusta cu proprietatea font-size, de exemplu: font-size: 16px;.
  • Stilul textului: Stilul se poate modifica cu font-style (exemplu: font-style: italic;) sau font-weight pentru a face textul bold.
  • Culoarea textului: Culoarea textului se poate schimba cu color, utilizând un cod hexazecimal, obținut prin Paint sau conversia în Calculator.

Exemplu de cod CSS pentru formatarea unui text:

                
                    h1 {
                        font-family: Arial, sans-serif;
                        font-size: 24px;
                        color: #4CAF50;
                    }
                
            

2. Inserarea unei imagini

Imaginile pot fi adăugate în paginile web cu ajutorul etichetei <img>. De asemenea, se pot modifica proprietățile imaginii, cum ar fi dimensiunile, poziționarea și încadrarea în text.

  • Inserarea imaginii: Folosiți eticheta <img src="imagine.jpg" alt="descriere">.
  • Modificarea dimensiunii imaginii: Utilizați atributele width și height pentru a ajusta dimensiunea imaginii.
  • Poziționarea imaginii: Folosiți proprietăți CSS, cum ar fi float pentru a poziționa imaginea la stânga sau dreapta textului.
  • Încorporarea imaginii în text: Puteți folosi text-align pentru a alinia imaginea.
Exemplu imagine

Exemplu de imagine inserată și poziționată corespunzător.

3. Formatarea unui fundal sau a unei teme

Pentru a adăuga un fundal într-o pagină HTML, puteți utiliza CSS. Acesta poate fi un fundal de culoare unică sau o imagine de fundal.

  • Fundal de culoare: Folosiți proprietatea background-color pentru a seta o culoare de fundal.
  • Fundal cu imagine: Folosiți proprietatea background-image pentru a adăuga o imagine de fundal.
  • Dimensiunea fundalului: Cu background-size, se poate ajusta dimensiunea imaginii de fundal.

Exemplu de CSS pentru setarea unui fundal:

                
                    body {
                        background-color: #f0f0f0;
                        background-image: url('fundal.jpg');
                        background-size: cover;
                    }
                
            

© 2024 Lecție - Formatarea textului, imaginilor și fundalurilor în HTML