HTML Si CSS

HTML înseamnă Hyper Text Markup Language
HTML este limbajul de marcare standard pentru crearea

paginilor Web
HTML descrie structura unei pagini Web
HTML constă dintr-o serie de elemente
Elementele HTML spun browserului cum să afișeze
conținutul
Elementele HTML etichetează părți de conținut precum
„acesta este un titlu”, „acesta este un paragraf”, „acesta
este un link”, etc.
Toate documentele HTML trebuie să înceapă cu o

declarație de tip de document: <!DOCTYPE html>.
Declarația <!DOCTYPE> reprezintă tipul de document și
ajută browserele să afișeze corect paginile web.
Trebuie să apară o singură dată, în partea de sus a

paginii (înaintea oricăror etichete HTML).
Declarația <!DOCTYPE> nu face distincție între

majuscule și minuscule.
Documentul HTML în sine începe cu <html> și se
termină cu </html>.
Partea vizibilă a documentului HTML se află între

<body> și </body>.
Toate elementele HTML pot avea atribute

Atributele oferă informații suplimentare despre
elemente
Atributele sunt întotdeauna specificate în eticheta de
început
Atributele vin de obicei în perechi nume/valoare, cum
ar fi: name="value"
Eticheta <a> definește un hyperlink.
Atributul href specifică adresa URL a paginii la care
merge linkul.
Eticheta <img> este folosită pentru a încorpora o
imagine într-o pagină HTML.
Atributul src specifică calea către imaginea care
urmează să fie afișată
Există două moduri de a specifica adresa URL în
atributul src:
1. URL absolută - Legături către o imagine externă care
este găzduită pe un alt site web. Exemplu:
src="https://www.w3schools.com/images/img_girl.jpg
".
Note: Imaginile externe pot fi protejate prin drepturi

de autor. Dacă nu obțineți permisiunea de a-l folosi,
este posibil să încălcați legile privind drepturile de
autor. În plus, nu puteți controla imaginile externe;
poate fi eliminat sau schimbat brusc.
2. URL relativă - Legături către o imagine care este

găzduită pe site. Aici, adresa URL nu include numele
domeniului. Dacă adresa URL începe fără bară oblică,
va fi relativ la pagina curentă. Exemplu:
src="img_girl.jpg". Dacă adresa URL începe cu o bară
oblică, va fi relativ la domeniu. Exemplu:
src="/images/img_girl.jpg".
Sfat: este aproape întotdeauna cel mai bine să utilizați

adrese URL relative. Nu se vor rupe dacă schimbați
domeniul.
Eticheta <img> ar trebui să conțină, de asemenea,
atributele de lățime și înălțime, care specifică lățimea și
înălțimea imaginii (în pixeli)
Atributul alt necesar pentru eticheta <img> specifică un
text alternativ pentru o imagine, dacă imaginea din
anumite motive nu poate fi afișată. Acest lucru se poate
datora unei conexiuni lente sau unei erori în atributul
src sau dacă utilizatorul folosește un cititor de ecran.
Atributul stil este folosit pentru a adăuga stiluri unui
element, cum ar fi culoarea, fontul, dimensiunea și
multe altele.
Ar trebui să includeți întotdeauna atributul lang în
interiorul etichetei <html>, pentru a declara limba
paginii Web. Acesta este menit să ajute motoarele de
căutare și browserele.
Următorul exemplu specifică engleza ca limbă:

Codurile de țară pot fi, de asemenea, adăugate la codul
de limbă din atributul lang. Deci, primele două
caractere definesc limba paginii HTML, iar ultimele
două caractere definesc țara.
Următorul exemplu specifică engleza ca limbă și Statele

Unite ca țară:
<!DOCTYPE html>
<html lang="en-US">
<corp>
...
</corp>
</html>
Atributul title definește câteva informații suplimentare

despre un element.
Valoarea atributului titlu va fi afișată ca un sfat
explicativ atunci când treceți cu mouse-ul peste
element:
<p title="I'm a tooltip">Acesta este un paragraf.</p>
Rezumatul capitolului
Toate elementele HTML pot avea atribute
Atributul href al lui <a> specifică adresa URL a paginii la care
merge linkul
Atributul src al <img> specifică calea către imaginea care

urmează să fie afișată
Atributele de lățime și înălțime ale <img> oferă informații

despre dimensiunea imaginilor
Atributul alt al <img> oferă un text alternativ pentru o

imagine
Atributul stil este folosit pentru a adăuga stiluri unui element,

cum ar fi culoarea, fontul, dimensiunea și multe altele
Atributul lang al etichetei <html> declară limba paginii Web
Atributul title definește câteva informații suplimentare

despre un element
Titlurile HTML sunt titluri sau subtitrări pe care doriți să le

afișați pe o pagină web.
Titlurile HTML sunt definite cu etichetele <h1> până la <h6>.
<h1> definește cel mai important titlu. <h6> definește titlul
cel mai puțin important.
Exemplu
<h1>Titlul 1</h1>
<h2>Titlul 2</h2>
<h3>Titlul 3</h3>
<h4>Titlul 4</h4>
<h5>Titlul 5</h5>
<h6>Titlul 6</h6>
Fiecare titlu HTML are o dimensiune implicită. Cu toate
acestea, puteți specifica dimensiunea oricărui titlu cu
atributul style, folosind proprietatea CSS font-size:
Exemplu
<h1 style="font-size:60px;">Titlul 1</h1>
Un paragraf începe întotdeauna pe o linie nouă și este de

obicei un bloc de text.
Elementul HTML <p> definește un paragraf.
Un paragraf începe întotdeauna pe o linie nouă, iar

browserele adaugă automat niște spații albe (o marjă) înainte
și după un paragraf.
Eticheta <hr> definește o pauză tematică într-o pagină HTML
și este afișată cel mai adesea ca o regulă orizontală.
Elementul <hr> este folosit pentru a separa conținutul (sau a
defini o modificare) într-o pagină HTML.
Eticheta <hr> este o etichetă goală, ceea ce înseamnă că nu
are nicio etichetă de final la fel ca <br>
Elementul HTML <br> definește o întrerupere de linie.

Utilizați <br> dacă doriți o întrerupere de linie (o linie nouă)
fără a începe un nou paragraf
Elementul HTML <pre> definește textul preformatat.

Textul din interiorul unui element <pre> este afișat într-un
font cu lățime fixă (de obicei Courier) și păstrează atât
spațiile, cât și rupturile de linie.
pentru poezii
CSS
înseamnă Cascading Style Sheets.
Cascading Style Sheets (CSS) este folosit pentru a
formata aspectul unei pagini web.
Cu CSS, puteți controla culoarea, fontul, dimensiunea
textului, distanța dintre elemente, modul în care sunt
poziționate , ce imagini de fundal sau culori de fundal
vor fi utilizate, etc.
Cuvântul cascadă înseamnă că un stil aplicat unui
element părinte se va aplica și tuturor elementelor
copii din cadrul părinte. Deci, dacă setați culoarea
textului corpului la „albastru”, toate titlurile,
paragrafele și alte elemente de text din corp vor avea,
de asemenea, aceeași culoare (dacă nu specificați
altceva)
CSS poate fi adăugat documentelor HTML în 3 moduri:
Inline - prin utilizarea atributului de stil în interiorul
elementelor HTML
Intern - prin utilizarea unui element <style> în
secțiunea <head>
Extern - prin utilizarea unui element <link> pentru a
conecta la un fișier CSS extern
Inline CSS
Un CSS inline este folosit pentru a aplica un stil unic
unui singur element HTML.
Următorul exemplu setează culoarea textului
elementului <h1> la albastru și culoarea textului
elementului <p> la roșu:
<h1 style="color:blue;">Un titlu albastru</h1>
<p style="color:red;">Un paragraf roșu.</p>
Intern CSS
Un CSS intern este folosit pentru a defini un stil
pentru o singură pagină HTML.
Este definit în secțiunea <head> a unei pagini HTML, în
cadrul unui element <style>.
Următorul exemplu setează culoarea textului TOATE
elementele <h1> (pe pagina respectivă) la albastru, iar
culoarea textului TOATE elementele <p> la roșu.
<!DOCTYPE html>
<html> <head> <style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Extern CSS
Un CSS extern este utilizată pentru a defini stilul
pentru multe pagini HTML.
Pentru a utiliza adăugați un link către aceasta în
secțiunea <head> a fiecărei pagini HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Here is what the "styles.css" file looks like:
"styles.css":
body { background-color: powderblue; }
h1 { color: blue; }
p{
color: red; }
Culori, fonturi și dimensiuni CSS
Proprietatea color CSS definește culoarea textului care
trebuie utilizat.
Proprietatea CSS font-family definește fontul care
trebuie utilizat.
Proprietatea CSS font-size definește dimensiunea

textului care trebuie utilizat.
Chenar CSS
Proprietatea border CSS definește o chenar în jurul

unui element HTML.
Proprietatea padding CSS definește o umplutură

(spațiu) între text și chenar.
Proprietatea margin CSS definește o marjă (spațiu) în

afara graniței.
Utilizați atributul style HTML pentru stilul inline.
Utilizați elementul HTML <style> pentru a defini
CSS intern.
Utilizați elementul HTML <link> pentru a vă referi
la un fișier CSS extern.
Utilizați elementul HTML <head> pentru a stoca
elementele <style> și <link>.
Utilizați proprietatea de culoare CSS pentru
culorile textului.
Utilizați proprietatea CSS font-family pentru
fonturile text.
Utilizați proprietatea CSS font-size pentru
dimensiunile textului.
Utilizați proprietatea border CSS pentru margini.
Utilizați proprietatea de umplutură (padding) CSS
pentru spațiul din interiorul graniței.
Utilizați proprietatea margine (margin) CSS
pentru spațiul din afara graniței.
Eticheta HTML <a> definește un hyperlink. Are

următoarea sintaxă:
<a href="url">text link</a>
Cel mai important atribut al elementului <a> este
atributul href, care indică destinația link-ului.
Făcând clic pe textul linkului, cititorul va trimite la
adresa URL specificată.
Atributul target specifică unde să deschide
documentul legat.
Atributul target poate avea una dintre
următoarele valori:
_self - Implicit. Deschide documentul în aceeași

fereastră/filă în care a fost făcută clic
_blank - Deschide documentul într-o fereastră
sau filă nouă
_parent - Deschide documentul în cadrul părinte
_top - Deschide documentul în întreg corpul
ferestrei
Utilizați elementul <a> pentru a defini o
legătură.
Utilizați atributul href pentru a defini
adresa linkului.
Utilizați atributul target pentru a defini

unde să deschideți documentul legat.
Utilizați elementul <img> (în interiorul

<a>) pentru a utiliza o imagine ca link.
Fiecare element HTML are o valoare de afișare

implicită, în funcție de ce tip de element este.
Există două valori de afișare: block și inline:
Elemente la nivel de block
începe întotdeauna pe o linie nouă, iar browserele
adaugă automat un spațiu (o marjă) înainte și după
element.
Ocupă întotdeauna toată lățimea disponibilă (se
întinde la stânga și la dreapta cât de mult poate).
Două elemente de block utilizate în mod obișnuit sunt:
<p> și <div>.
Elementul <p> definește un paragraf într-un document
HTML.
Elementul <div> definește o diviziune sau o secțiune
într-un document HTML.
Elemente în linie
Un element inline nu începe pe o linie nouă.
Un element inline ocupă doar atâta lățime cât este
necesar.
Atributul de class HTML specifică unul sau mai multe
nume de clasă pentru un element.
Clasele sunt folosite de CSS și JavaScript pentru a
selecta și accesa anumite elemente.
Numele clasei face distincție între majuscule și
minuscule.
Atributul HTML id este utilizat pentru a specifica un ID

unic pentru un element HTML.
Nu puteți avea mai mult de un element cu același id
într-un document HTML.
Utilizarea atributului id
Atributul id specifică un id unic pentru un element
HTML. Valoarea atributului id trebuie să fie unică în
documentul HTML.
Atributul id este folosit pentru a indica o anumită
declarație de stil într-o foaie de stil. De asemenea,
este folosit de JavaScript pentru a accesa și manipula
elementul cu id-ul specific.
Elementul HTML <head> este un container pentru

următoarele elemente:
<titlu>, <stil>, <meta>, <link>, <script> și <bază>.
Elementul <head> este un container pentru metadate
(date despre date) și este plasat între eticheta <html>
și eticheta <body>.
Metadatele definesc de obicei titlul documentului,

setul de caractere, stilurile, scripturile și alte meta
informații.
Elementul <title> definește titlul documentului.

Titlul trebuie să fie doar text și este afișat în bara de
titlu a browserului sau în fila paginii.
Elementul <title> este necesar în documentele HTML!
Elementul HTML <meta>

Elementul <meta> este utilizat în mod obișnuit pentru
a specifica setul de caractere, descrierea paginii,
cuvintele cheie, autorul documentului și setările
ferestrei de vizualizare.
Metadatele nu vor fi afișate pe pagină, dar sunt

utilizate de browsere (cum să afișați conținutul sau
reîncărcarea paginii), de motoarele de căutare (cuvinte
cheie) și de alte servicii web.
Exemple
Definiți setul de caractere utilizat:
<meta charset="UTF-8">
Definiți cuvinte cheie pentru motoarele de căutare:
<meta name="keywords" content="HTML, CSS,
JavaScript">
Definiți o descriere a paginii dvs. web:
<meta name="description" content="Tutoriale web
gratuite">
Definiți autorul unei pagini:
<meta name="author" content="John Doe">
Elementul <head> este un container pentru metadate
Și este plasat între eticheta <html> și eticheta <body>.
Elementul <title> este necesar și definește titlul
documentului.
Elementul <style> este folosit pentru a defini
informațiile de stil pentru un singur document.
Eticheta <link> este folosită cel mai adesea pentru a
lega foi de stil externe.
Elementul <meta> este folosit de obicei pentru a
specifica setul de caractere, descrierea paginii,
cuvintele cheie, autorul documentului și setările
pentru vizualizare.
Elementul <script> este folosit pentru a defini
JavaScript-uri la nivelul clientului.
Elementul <base> specifică adresa URL de bază și/sau
ținta pentru toate adresele URL relative dintr-o
pagină.

HTML Si CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Si CSS

Încărcat de

Drepturi de autor:

Formate disponibile

HTML înseamnă Hyper Text Markup Language

HTML este limbajul de marcare standard pentru crearea

Toate documentele HTML trebuie să înceapă cu o

Trebuie să apară o singură dată, în partea de sus a

Declarația <!DOCTYPE> nu face distincție între

Partea vizibilă a documentului HTML se află între

Toate elementele HTML pot avea atribute

Note: Imaginile externe pot fi protejate prin drepturi

2. URL relativă - Legături către o imagine care este

Sfat: este aproape întotdeauna cel mai bine să utilizați

Următorul exemplu specifică engleza ca limbă:

Următorul exemplu specifică engleza ca limbă și Statele

Atributul title definește câteva informații suplimentare

Atributul src al <img> specifică calea către imaginea care

Atributele de lățime și înălțime ale <img> oferă informații

Atributul alt al <img> oferă un text alternativ pentru o

Atributul stil este folosit pentru a adăuga stiluri unui element,

Atributul lang al etichetei <html> declară limba paginii Web

Atributul title definește câteva informații suplimentare

Titlurile HTML sunt titluri sau subtitrări pe care doriți să le

Un paragraf începe întotdeauna pe o linie nouă și este de

Un paragraf începe întotdeauna pe o linie nouă, iar

Elementul HTML <br> definește o întrerupere de linie.

Elementul HTML <pre> definește textul preformatat.

Proprietatea CSS font-size definește dimensiunea

Proprietatea border CSS definește o chenar în jurul

Proprietatea padding CSS definește o umplutură

Proprietatea margin CSS definește o marjă (spațiu) în

Eticheta HTML <a> definește un hyperlink. Are

_self - Implicit. Deschide documentul în aceeași

Utilizați atributul target pentru a defini

Utilizați elementul <img> (în interiorul

Fiecare element HTML are o valoare de afișare

Atributul HTML id este utilizat pentru a specifica un ID

Elementul HTML <head> este un container pentru

Metadatele definesc de obicei titlul documentului,

Elementul <title> definește titlul documentului.

Elementul <title> este necesar în documentele HTML!

Elementul HTML <meta>

Metadatele nu vor fi afișate pe pagină, dar sunt

S-ar putea să vă placă și