Introducere în HTML – Partea 5

Headings - Rubrici

Rubricile (în engleză – headings) sunt foarte importante în documentele HTML.


Rubrici HTML

Rubricile sunt definite cu etichetele <h1> până la <h6>.

<h1> definește cea mai importantă rubrică. <h6> definește cea mai puțin importantă rubrică.

Exemplu

<h1>Aceasta este o rubrică</h1>
<h2>Aceasta este o rubrică</h2>
<h3>Aceasta este o rubrică</h3>

Remark Notă: Browser-ele adaugă în mod automat puțin spațiu gol (o margine) înainte și după fiecare rubrică.


Rubricile sunt doar pentru rubrici

Nu folosiți rubricile pentru a face textul MARE sau îngroșat.

Motoarele de căutare folosesc rubricile pentru a indexa structura și conținutul paginilor tale.

Din moment ce utilizatorii vor răsfoi paginile după rubrici este important să folosești rubricile pentru a arăta structura documentului/paginii.

Rubricile H1 trebuie folosite ca rubrici principale, urmate de rubrici H2, după care cele mai puțin importante H3-H6.


Linii HTML

Eticheta <hr /> creează o linie orizontală în o pagină HTML. Elementul poate fi folosit pentru a separa conținutul:

Exemplu:

<p>Acesta este un paragraf</p>
<hr />
<p>Acesta este un paragraf</p>
<hr />
<p>Acesta este un paragraf</p>


Comentarii HTML

Comentariile pot fi inserate în codul HTML al unei pagini pentru a-l face mai lizibil și mai ușor de înțeles. Ele sunt ignorate de browser și nu sunt afișate.

Comentariile se scriu astfel:

Exemplu:

<!-- Acesta este un comentariu -->

Remark Notă: După eticheta de deschidere avem semnul exclamării, dar nu înainte de eticheta de închidere.


Pont HTML – Cum să vezi sursa HTML

Ai văzut vreodată o pagină web și te-ai întrebat "Hey! Cum au facut asta?"

Pentru a afla, fă click-dreapta în pagină și selectează "View Source" (pentru Internet Explorer) sau "View Page Source" (pentru Firefox), sau similar pentru alte browser-e. Această acțiune va deschide o fereastră conținând codul HTML al paginii.


Referință etichete HTML

W3Schools‘ conține informații adiționale despre aceste etichete și atributele lor.

Etichetă Descriere
<html> Definește un document HTML
<body> Definește corpul documentului
<h1> la <h6> Definește rubricile html
<hr /> Definește o linie orizontală
<!–> Definește un comentariu

Output HTML – Ponturi

E aproape imposibil să știi cum va fi generat HTML-ul în toate cazurile, ecrane mari sau mici și ferestre redimensionate vor genera rezultate diferite.

Cu HTML nu poți schimba rezultatul adăugând spații sau rânduri adiționale în codul HTML. Browser-ul va scoate spațiile și rândurile adiționale când va afișa pagina. Orice număr de rânduri fac cât un singur rând și orice număr de spații fac cât un singur spațiu.

Etichete HTML de formatare

HTML folosește etichete precum <strong> și <em> pentru formatarea rezultatului, la fel ca textul bold (îngroșat) sau italic.

Etichetă Descriere
<b> Definește text îngroșat
<big> Definește text mare
<em> Definește text accentuat
<i> Definește text înclinat
<small> Definește text mic
<strong> Definește text important
<sub> Definește text subscript
<sup> Definește text superscript
<ins> Definește text inserat
<del> Definește text șters

Etichete HTML “Computer Output”

Etichetă Descriere
<code> Definește text de cod
<kbd> Definește text de tastatură
<samp> Definește text mostră de cod
<tt> Definește text teletype
<var> Definește o variabilă
<pre> Definește text preformatat (păstrează spațiile și rândurile)

Etichete de citat, ghilimele și definiție

Etichetă Descriere
<abbr> Definește o abreviere
<acronym> Definește un acronim
<address> Definește informații de contact pentru autorul/posesorul documentului.
<bdo> Definește direcția textului
<blockquote> Definește un citat lung
<q> Definește un citat scurt
<cite> Definește o citație
<dfn> Definește un termen definitoriu

Scrierea codului HTML

HTML poate fi scris și editat folosid doar un editor simplu de text precum Notepad, dar eu vă recomand folosirea unui editor profesional ca:

Adobe Dreamweaver
Notepad++
Sublime
Microsoft Expression Web
CoffeeCup HTML Editor


« Partea 4



5 Responses to Introducere în HTML – Partea 5

  1. lexandres spune:

    utile

  2. mihai spune:

    super….mi-au fost de folos

  3. Lucian spune:

    Ma bucur, bafta la coding.

  4. Andreea spune:

    Super de ajutor, ms :)

  5. Lucian spune:

    Ma bucur ca ti-a fost de folos.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *

*


+ 3 = 5

Poți folosi aceste etichete HTML și atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>