Lecția 1. Etichetele HTML (Tags)

Dacă ai urmărit lecția precedentă atunci e bine!

Deschide fișierul HTML salvat de tine în editorul tău text, urmând pașii următori:
Editor text > Fișier > Deschide > Caută fișierul HTML și apasă: „Deschide”.

Să revenim la subiectul lecției noastre, și anume etichetele HTML (engleză: Tags):


Etichetele HTML seamănă cu cele pe care le vezi pe produsele de pe rafturile magazinelor, iar în ambele cazuri, au rolul să ne spună despre tipul informației (sau tipul produsului, în cazul magazinului).

Etichetele HTML vin în perechi. O etichetă arată începutul informației, iar alta sfârșitul.

Etichetele HTML arată în felul următor:

 <b>Salut!</b>

Astfel <b> este eticheta care arată începutul informației, iar </b> – sfârșitul ei.
Cuvântul „Salut!” este informația cuprinsă între etichete.

Explicație:

În eticheta de mai sus, litera „b” care este prezentă în ambele etichete, cea de deschidere și cea de închidere, ne arată că textul ce urmează este unul îngroșat (în engleză Bold, de unde și se trage prima literă).

Prima etichetă conține semnul mai-mic <, litera b și semnul mai mare >.
După aceasta urmează conținutul dintre etichete, în cazul nostru cuvântul Salut!
A doua etichetă, cea care închide elementul nostru, se deosebește de prima printr-o bară: „/” dinaintea lui „b”.
O etichetă poate să aibă și alte funcții, (pe care le vom învăța mai târziu) în afară de cazul nostru, unde are sarcina de a face textul îngroșat.

 

Exercițiu:

1. Șterge tot conținutul scris la lecția precedentă
2. Copiază în editorul tău text, exemplul dat mai sus:

<b>Salut!</b>

3. Salvează fișierul (CTRL+S)
4. Deschide fișierul tău în navigator
5. Apreciază rezultatul!
6. Rezultatul trebuie să conțină textul dintre etichete, în bold. Dacă nu e așa verifică din nou, conform pașilor de mai sus.

Structura unei pagini HTML standart:

Pentru „înțelege ce dorești să-i spui” unui Navigator, codul tău HTML trebuie să aibă următoarea structură:

<html>
       <body>
       <h1>Aceasta este o rubrica</h1>
       <p>Acesta este un text obisnuit</p>
       </body>
</html>

 

Exercițiu:
Copie codul HTML de mai sus în editorul tău text, salvează-l, și deschide pagina HTML într-un navigator. Compară rezultatele tale cu comentariile scrise mai jos.

Modul în care ar trebui să arate documentul tău HTML în editorul tău text, conform exercițiului (Notepad, în cazul imaginii de mai sus).

 

Analizarea rezultatului:

Modul în care ar trebui să arate documentul tău HTML, într-un navigator. Aici s-a folosit Internet Explorer.

 

Codul nostru HTML conține următoarele elemente:

<html> –  Spune navigatorului că următorul cod este scris în HTML

<body> –  Traducere: Corp. După cum ne spune și termenul tradus, de aici începe conținutul paginii noastre WEB.

<h1>(prescurtat de la Heading 1). Ne arată că textul scris între etichete este un titlu (care este mai mare decât textul obișnuit)

<p> – Text obișnuit. „P” vine de la „Paragraph” (Paragraf)

 

Pentru a face codul nostru HTML mai citeț (mai ușor de citit pentru oameni), acesta a fost indentat (tras) spre dreapta apăsând butonul Tab. Acest lucru nu afectează felul cum va arăta pagina ta HTML, ci doar are rolul să facă codul mai ușor de citit (de către oameni) și mai bine organizat.

Fii atent!

Scrie întotdeauna textul obișnuit între etichete (de exemplu <p> și </p> sau <h1> și </h1>), niciodată nu-l scrie independent, întrucât navigatorul ar putea să nu te „înțeleagă”.

Declararea tipului de document:

Pe lângă codul ce l-am scris la lecția precedentă, este nevoie să declaram și tipul de document. Acesta nu se schimbă și rămâne același peste tot.

Astfel documentul nostru trebuie să arate cam așa:

<!DOCTYPE html>
       <html>
       <body>
       <h1>Aceasta este o rubrica</h1>
       <p>Acesta este un text obisnuit</p>
</html>

 

Dacă vom încerca să rulăm acest cod în navigatorul nostru, vom observa că rezultatul primit nu se deosebește prin nimic ceea ce am făcut în pasul precedent.

<!DOCTYPE html> – este tipul de document pe care îl vom utiliza în toate lecțiile. Rolul lui este de a explica navigatorului cu ce fel de cod are de-a face. Acesta nu apare în rezultatul final al documentului, întrucât nu este inclus în corpul documentului  <body> ci în afara acestuia.

<!DOCTYPE html> – stă numai înainte de eticheta de deschidere <html>.

 

Bine de știut!

Termenul „Document” se aplică oricărei pagini scrise în HTML, adică orice pagină scrisă în HTML se numește „Document”.

681FansLike
574FollowersFollow
84FollowersFollow
542FollowersFollow
1,460SubscribersSubscribe

Mai vezi și astea

Creează-ți cont de email, pentru a-ți face cont pe WordPress

Bine ai venit pe internet! În lumea noastră de azi, este la modă să fii...

Liste HTML