Introducere în HTML și CSS

Înregistrare de lavesteabuzoiana mai 31, 2024 Observații 6
YouTube player

Introducere

HTML (HyperText Markup Language) constituie baza oricărei pagini web, definind structura și conținutul acesteia. Un document HTML este format din elemente, fiecare element reprezentând o parte specifică a paginii. De exemplu, elementul <h1> definește un titlu de nivel 1, în timp ce elementul <p> reprezintă un paragraf de text. 

<html>
<head>
<title>Pagina mea web</title>
</head>
<body>
<h1>Bun venit!</h1>
<p>Acesta este un paragraf de text.</p>
</body>

CSS⁚ Adăugarea de stil

<html>
<head>
<title>Pagina mea web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bun venit!</h1>
<p>Acesta este un paragraf de text.</p>
</body>
h1 {
 color⁚ blue;
}

Această regulă CSS va seta culoarea textului pentru toate titlurile de nivel 1 din pagina web la albastru.

Înainte de a aplica stiluri, este necesar să se selecteze elementele HTML specifice cărora se vor aplica aceste stiluri. CSS oferă diverse metode de selectare a elementelor, inclusiv prin tag, prin ID și prin clasă.

4.1 Selectarea prin tag

p {
 color⁚ blue;
}

4.2 Selectarea prin ID

<h1 id="titlu">Titlul Paginii</h1>

Pentru a stiliza acest element, vom utiliza selectorul “#titlu” în CSS⁚

#titlu {
 font-size⁚ 24px;
 font-weight⁚ bold;
}

Acest cod va seta dimensiunea fontului titlului la 24px și îl va face bold.

4.3 Selectarea prin clasă

<p class="paragraf">Acest paragraf are clasa "paragraf".</p>
<div class="paragraf">Acest div are și clasa "paragraf".</div>

Pentru a stiliza toate elementele cu clasa “paragraf”, vom utiliza selectorul “.paragraf” în CSS⁚

.paragraf {
 color⁚ blue;
 text-align⁚ center;
}

Acest cod va seta culoarea textului la albastru și va centra textul pentru toate elementele cu clasa “paragraf”.

Proprietățile CSS

5.1 Proprietăți de text

Proprietățile CSS dedicate textului permit controlul asupra modului în care textul este afișat pe o pagină web. Aceste proprietăți includ⁚

  • color⁚ Definește culoarea textului. Poate fi specificată prin nume de culori (de exemplu, “red”, “blue”), coduri hexazecimale (#FF0000 pentru roșu) sau valori RGB (de exemplu, rgb(255, 0, 0) pentru roșu).
  • font-family⁚ Specifică familia de fonturi care va fi utilizată pentru text. Poate fi un font generic (de exemplu, “serif”, “sans-serif”, “monospace”) sau un font specific (de exemplu, “Arial”, “Times New Roman”).
  • font-size⁚ Stabilește dimensiunea fontului, care poate fi specificată în pixeli (px), puncte (pt), em (în raport cu dimensiunea fontului părintelui) sau procente (%) din dimensiunea fontului părintelui. De exemplu, “font-size⁚ 16px” va seta dimensiunea fontului la 16 pixeli.
  • font-weight⁚ Controlează grosimea fontului. Valorile comune includ “normal” (fontul implicit), “bold” (fontul îngroșat) și “lighter” (fontul mai subțire).
  • text-align⁚ Aliniază textul într-un element. Valorile posibile sunt “left”, “center”, “right” și “justify”.
  • text-decoration⁚ Adaugă decorare textului, cum ar fi subliniere, supralineaturare sau tăiere. Valorile includ “underline”, “overline”, “line-through” și “none” (fără decorare).
  • text-transform⁚ Modifică aspectul textului, transformând toate literele în majuscule (uppercase), minuscule (lowercase), prima literă a fiecărui cuvânt în majusculă (capitalize) sau lăsând textul neschimbat (none).

Utilizarea corectă a proprietăților de text permite o prezentare clară și estetică a conținutului textului pe o pagină web.

5.2 Proprietăți de fonturi

Proprietățile CSS dedicate fonturilor permit controlul asupra aspectului general al textului, inclusiv a familiei de fonturi, a dimensiunii, a grosimii și a altor caracteristici. Aceste proprietăți oferă o flexibilitate semnificativă în personalizarea aspectului textului pentru a se potrivi cu designul paginii web.

  • font-family⁚ Această proprietate specifică familia de fonturi care va fi utilizată pentru text. Poate fi un font generic (de exemplu, “serif”, “sans-serif”, “monospace”) sau un font specific (de exemplu, “Arial”, “Times New Roman”). Este recomandat să se specifice mai multe familii de fonturi, separate prin virgule, pentru a asigura o afișare corectă în cazul în care prima familie de fonturi nu este disponibilă pe dispozitivul utilizatorului.
  • font-size⁚ Această proprietate stabilește dimensiunea fontului, care poate fi specificată în pixeli (px), puncte (pt), em (în raport cu dimensiunea fontului părintelui) sau procente (%) din dimensiunea fontului părintelui. De exemplu, “font-size⁚ 16px” va seta dimensiunea fontului la 16 pixeli.
  • font-weight⁚ Această proprietate controlează grosimea fontului. Valorile comune includ “normal” (fontul implicit), “bold” (fontul îngroșat) și “lighter” (fontul mai subțire). Există, de asemenea, valori numerice de la 100 la 900, unde 400 este echivalent cu “normal” și 700 cu “bold”.
  • font-style⁚ Această proprietate specifică stilul fontului, cum ar fi “normal” (stilul implicit), “italic” (fontul înclinat) sau “oblique” (un stil înclinat similar cu italic).

Utilizarea corectă a proprietăților de fonturi contribuie la o experiență vizuală plăcută și la o mai bună lizibilitate a textului pe o pagină web.

5.3 Proprietăți de culoare

  • color⁚ Această proprietate definește culoarea textului. Poate fi specificată prin nume de culori (de exemplu, “red”, “blue”, “green”), prin coduri hexazecimale (de exemplu, “#FF0000” pentru roșu), prin coduri RGB (de exemplu, “rgb(255, 0, 0)” pentru roșu) sau prin coduri HSL (de exemplu, “hsl(0, 100%, 50%)” pentru roșu).
  • background-color⁚ Această proprietate stabilește culoarea de fundal a unui element. Utilizează aceleași metode de specificare a culorii ca și proprietatea “color”.
  • border-color⁚ Această proprietate definește culoarea marginii unui element. Se poate aplica la toate marginile sau doar la o anumită margine (de exemplu, “border-top-color”, “border-right-color”, etc.).

Utilizarea judicioasă a culorilor în CSS poate îmbunătăți semnificativ aspectul și atractivitatea unei pagini web, contribuind la o experiență vizuală armonioasă și la o mai bună percepție a conținutului.

5.4 Proprietăți de layout

  • margin⁚ Această proprietate controlează spațiul dintre un element și elementele adiacente. Poate fi aplicată la toate marginile (de exemplu, “margin⁚ 10px”) sau doar la o anumită margine (de exemplu, “margin-top⁚ 10px”).
  • padding⁚ Această proprietate controlează spațiul dintre conținutul unui element și marginea sa. Similar cu proprietatea “margin”, poate fi aplicată la toate marginile sau doar la o anumită margine;
  • width⁚ Această proprietate definește lățimea unui element. Poate fi specificată în pixeli (px), procente (%) sau alte unități de măsură.
  • height⁚ Această proprietate definește înălțimea unui element. Similar cu proprietatea “width”, poate fi specificată în pixeli, procente sau alte unități de măsură.

Prin combinarea judicioasă a proprietăților de layout, designerii web pot crea pagini atractive, organizate și ușor de navigat, îmbunătățind experiența utilizatorului.

Exemplu⁚ Styling o pagină web simplă

De exemplu, putem seta culoarea de fundal a paginii la un albastru deschis, titlul la un font mai mare și bold, iar imaginea la o anumită lățime și înălțime. Codul CSS corespunzător ar arăta astfel⁚

body {
 background-color⁚ lightblue;
}

h1 {
 font-size⁚ 24px;
 font-weight⁚ bold;
}

img {
 width⁚ 300px;
 height⁚ 200px;
}

Acest cod simplu demonstrează puterea CSS de a transforma o pagină web simplă într-una mai estetică și atractivă, oferind o experiență mai plăcută utilizatorului.

Concluzie

Folosind selectarea elementelor și proprietățile CSS, puteți controla culoarea, fonturile, dimensiunile, poziționarea și multe alte aspecte ale paginii web. Deși Notepad nu este un editor de cod avansat, este un instrument util pentru începători în web development, permițând experimentarea cu HTML și CSS într-un mod simplu și intuitiv.

În timp ce CSS oferă o flexibilitate extraordinară, este important să mențineți un stil coerent și o estetică unitară pentru a crea o experiență online plăcută și profesională.

Rubrică:

6 Oamenii au reacționat la acest lucru

  1. Articolul este bine scris și ușor de înțeles, chiar și pentru cei care nu au experiență în programare. Explicațiile sunt clare și concise, iar exemplele practice sunt de ajutor. Apreciez modul în care articolul prezintă diverse metode de selectare a elementelor HTML, inclusiv prin tag, ID și clasă. Recomand acest articol ca un punct de plecare excelent pentru cei care doresc să învețe elementele de bază ale HTML și CSS.

  2. Articolul prezintă o introducere clară și concisă în HTML și CSS, subliniind importanța lor în dezvoltarea web. Explicațiile sunt ușor de înțeles, iar exemplele practice oferă o imagine de ansamblu asupra modului în care se aplică aceste tehnologii. Apreciez abordarea sistematică a selecției elementelor HTML, prezentând diverse metode de selectare prin tag, ID și clasă. Recomand acest articol ca un punct de plecare excelent pentru cei care doresc să învețe elementele de bază ale HTML și CSS.

  3. Articolul este bine scris și ușor de înțeles, chiar și pentru cei care nu au experiență în programare. Explicațiile sunt clare și concise, iar exemplele practice sunt de ajutor. Apreciez modul în care articolul prezintă diverse metode de selectare a elementelor HTML, inclusiv prin tag, ID și clasă. Consider că acest articol este o introducere excelentă în HTML și CSS.

  4. Articolul este bine structurat și ușor de citit. Explicațiile sunt clare și concise, iar exemplele de cod sunt bine alese și ușor de înțeles. Apreciez modul în care articolul prezintă diverse metode de selectare a elementelor HTML, inclusiv prin tag, ID și clasă. Consider că acest articol este o resursă utilă pentru cei care doresc să învețe elementele de bază ale HTML și CSS.

  5. Articolul este o resursă excelentă pentru cei care doresc să învețe elementele de bază ale HTML și CSS. Explicațiile sunt clare și concise, iar exemplele practice sunt de ajutor. Apreciez modul în care articolul prezintă diverse metode de selectare a elementelor HTML, inclusiv prin tag, ID și clasă. Recomand acest articol ca un punct de plecare excelent pentru cei care doresc să învețe HTML și CSS.

  6. Articolul este o introducere excelentă în HTML și CSS. Explicațiile sunt clare și concise, iar exemplele practice sunt de ajutor. Apreciez modul în care articolul prezintă diverse metode de selectare a elementelor HTML, inclusiv prin tag, ID și clasă. Recomand acest articol ca un punct de plecare excelent pentru cei care doresc să învețe elementele de bază ale HTML și CSS.

Lasă un comentariu