HyperText Markup Language (HTML) este un limbaj de markup folosit pentru a construi documente online și este fundamentul majorității site-urilor web de astăzi. Un limbaj de marcare precum HTML ne permite acest lucru

  • creați linkuri către alte documente,
  • structurați conținutul din documentul nostru și
  • atribuiți context și semnificație conținutului documentului nostru.

Un document HTML are două aspecte. Conține informații structurate (Markup) și linkuri text (HyperText) către alte documente. Ne structurăm paginile folosind Elemente HTML. Acestea sunt constructe ale oferirii limbajului structura și sens în documentul nostru pentru browser și elementul link-uri către alte documente de pe internet.

Internetul a fost creat inițial pentru a stoca și prezenta documente statice (neschimbătoare). Aspectele HTML discutate mai sus au fost văzute perfect în aceste documente care nu aveau niciun design și stil. Au prezentat informații structurate care conțineau legături către alte documente.

HTML5 este cea mai recentă versiune sau specificație a HTML. World Wide Web Consortium (W3C) este organizația responsabilă de dezvoltarea standardelor pentru World Wide Web, inclusiv a celor pentru HTML. Pe măsură ce paginile web și aplicațiile web devin mai complexe, W3C actualizează standardele HTML.

HTML5 introduce o serie de elemente semantice. Deși am discutat despre modul în care HTML a ajutat să ofere sens documentului nostru, nu a fost până la introducerea HTML5s de elemente semantice că potențialul său a fost realizat.

Un exemplu simplu de document HTML

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

! DOCTYPE html: definește acest document ca HTML5

html: elementul rădăcină al unei pagini HTML

head: Elementul conține metainformații despre document

title: Elementul specifică un titlu pentru document

corp: elementul conține conținutul vizibil al paginii

h1: Elementul definește un titlu mare

p: Elementul definește un paragraf

Tutoriale pentru a începe cu HTML și HTML5

Cel mai bun loc pentru a începe să înveți HTML este cu Routech’s Introducere de 2 ore la tutorialul HTML.

Atunci, dacă te simți mai aventuros, avem un întreg Curs de 12 ore care acoperă HTML, HTML5 și CSS în detaliu.

Cele mai bune tutoriale HTML si HTML5

Structura paginii

Pentru a vă crea paginile în HTML, trebuie să știți cum să structurați o pagină în HTML. Practic, structurarea unei pagini urmează ordinea de mai jos:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Page</title>
  </head>
  <body>
    <!-- Content -->
  </body>
</html>

1 – The <!DOCTYPE html> declarația trebuie să fie întotdeauna prima care apare pe un HTML pagină și îi spune browserului ce versiune a limbii este utilizată. În acest caz, lucrăm cu HTML5.

2 – The <html> și </html> etichetele indică browserului web unde se află HTML codul începe și se termină.

3 – <head> și </head> etichetele conțin informații despre site-ul web, de exemplu: stil, metaetichete, scripturi etc.

4 – <title> și </title> etichetele spun browserului care este titlul paginii. Titlul poate fi văzut identificând fila din browserul dvs. de internet. Textul definit între aceste etichete este, de asemenea, textul care este folosit ca titlu de către motoarele de căutare atunci când prezintă paginile în rezultatele unei căutări.

5 – Între <body> și </ body> etichetează conținutul paginii este plasat, ceea ce este afișat în browser.

Modificări în HTML5

Introducerea etichetelor semantice

În loc de a folosi <div> pentru fiecare celălalt container, există mai multe semantice (aceste etichete ajută cititorii de ecran utilizate de persoanele cu deficiențe de vedere), precum <header> <footer> . Deci, este recomandabil să utilizați aceste etichete în loc de generice <div>.

Elemente HTML

Elementele sunt elementele de bază ale HTML care descriu structura și conținutul unei pagini web. Acestea sunt partea „Markup” a HyperText Markup Language (HTML).

Sintaxa HTML folosește parantezele unghiulare (”<” și ”>”) pentru a menține numele unui element HTML. Elementele au de obicei o etichetă de deschidere și o etichetă de închidere și oferă informații despre conținutul pe care îl conțin. Diferența dintre cele două este că eticheta de închidere are o bară directă.

Iată un exemplu care utilizează element p (<p>) pentru a spune browserului că un grup de text este un paragraf:

<p>This is a paragraph.</p>

Deschiderea și închiderea etichetelor trebuie să se potrivească, altfel browserul poate afișa conținut într-un mod neașteptat.

Benzi desenate XKCD care arată textul „Î: Cum enervați un dezvoltator?”  înconjurat de o etichetă div de deschidere și o etichetă de închidere

Elemente de închidere automată

Unele elemente HTML se închid automat, ceea ce înseamnă că nu au o etichetă de închidere separată. Elementele care se închid automat introduc de obicei ceva în documentul dvs.

Un exemplu este element br (<br>), care introduce o întrerupere de linie în text. În trecut, etichetele care se închideau automat aveau în interiorul lor o linie directă (<br />), cu toate acestea, specificațiile HTML5 nu mai necesită acest lucru.

Funcționalitatea elementului HTML

Există multe elemente HTML disponibile. Iată o listă cu câteva dintre funcțiile pe care le îndeplinesc:

  • oferiți informații despre pagina web în sine (metadatele)
  • structurați conținutul paginii în secțiuni
  • încorporați imagini, videoclipuri, clipuri audio sau alte elemente multimedia
  • creați liste, tabele și formulare
  • oferiți mai multe informații despre anumite conținut text
  • link către foi de stil care au reguli despre modul în care browserul ar trebui să afișeze pagina
  • adăugați scripturi pentru a face o pagină mai interactivă și dinamică

Elemente HTML de cuibărire

Puteți adăuga elemente în alte elemente într-un document HTML. Acest lucru ajută la definirea structurii paginii. Asigurați-vă că etichetele se închid mai întâi din elementul cel mai interior.

Corect: <p>This is a paragraph that contains a <span>span element.</span></p>

Incorect: <p>This is a paragraph that contains a <span>span element.</p></span>

Elemente la nivel de bloc și Inline

Elementele apar în două categorii generale, cunoscute sub denumirea de nivel de bloc și linie. Elementele la nivel de bloc încep automat pe o nouă linie, în timp ce elementele în linie se află în conținutul înconjurător.

Elementele care ajută la structurarea paginii în secțiuni, cum ar fi o bară de navigare, titluri și paragrafe, sunt de obicei elemente la nivel de bloc. Elementele care inserează sau oferă mai multe informații despre conținut sunt, în general, în linie, cum ar fi link-uri sau imagini.

Elementul HTML

Există un <html> element folosit pentru a conține celălalt marcaj pentru un document HTML. Este, de asemenea, cunoscut ca elementul „rădăcină”, deoarece este părintele celorlalte elemente HTML și conținutul unei pagini.

Iată un exemplu de pagină cu element de cap, A elementul corpului, și unul paragraf:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>I'm a paragraph</p>
  </body>
</html>

Elementul HEAD

Acesta este containerul pentru procesarea informațiilor și metadatelor pentru un document HTML.

<head>
  <meta charset="utf-8">
</head>

Elementul CORP

Acesta este un container pentru conținutul afișabil al unui document HTML.

<body>...</body>

Elementul P.

Creează un paragraf, poate cel mai comun element de nivel de bloc.

<p>...</p>

Creează un hyperlink pentru a direcționa vizitatorii către o altă pagină sau resursă.

<a href="https://www.freecodecamp.org/news/best-html-html5-tutorial/#">...</a>

Imagini în HTML

Puteți defini imagini utilizând <img> etichetă. Nu are o etichetă de închidere, deoarece poate conține numai atribute. Pentru a insera o imagine definiți sursa și un text alternativ care este afișat atunci când imaginea nu poate fi redată.

src – Acest atribut oferă adresa URL pentru imaginea prezentă fie pe computerul / laptopul dvs., fie pentru a fi inclusă de pe un alt site web. Amintiți-vă că linkul furnizat nu ar trebui să fie rupt, altfel imaginea nu va fi produsă pe pagina dvs. web.

alt – Acest atribut este utilizat pentru a depăși problema imaginii rupte sau a incapacității browserului dvs. de a produce imagini pe pagina web. Acest atribut, așa cum sugerează și numele, oferă o „alternativă” la o imagine care este un „TEXT” care descrie imaginea.

Exemplu

<img src="https://www.freecodecamp.org/news/best-html-html5-tutorial/URL of the Image" alt="Descriptive Title" />

Pentru a defini înălțimea și lățimea unei imagini, puteți utiliza atributul înălțime și lățime:

<img src="https://www.freecodecamp.org/news/best-html-html5-tutorial/URL of the Image" alt="Descriptive Title" height="100" width="150"/>

De asemenea, puteți defini grosimea chenarului (0 înseamnă că nu există chenar):

<img src="https://www.freecodecamp.org/news/best-html-html5-tutorial/URL of the Image" alt="Descriptive Title" border="2"/>

Aliniați o imagine:

<img src="https://www.freecodecamp.org/news/best-html-html5-tutorial/URL of the Image" alt="Descriptive Title" align="left"/>

De asemenea, puteți utiliza stiluri într-un atribut de stil:

<img src="https://www.freecodecamp.org/news/best-html-html5-tutorial/URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>

Cum se utilizează linkuri în HTML

În HTML puteți utiliza fișierul <a> eticheta pentru a crea un link. De exemplu, puteți scrie <a href="https://www.freecodecamp.org/">Routech</a> pentru a crea un link către site-ul Routech.

Linkurile se găsesc în aproape toate paginile web. Linkurile permit utilizatorilor să facă clic de la o pagină la alta.

Linkurile HTML sunt hyperlinkuri. Puteți face clic pe un link și săriți la un alt document.

Când mutați mouse-ul peste o legătură, săgeata mouse-ului se va transforma într-o mână mică.

Notă: un link nu trebuie să fie text. Poate fi o imagine sau orice alt element HTML.

În HTML, legăturile sunt definite cu etichetă:

<a href="https://www.freecodecamp.org/news/best-html-html5-tutorial/url">link text</a>

Exemplu

<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>

Atributul href specifică adresa de destinație (https://www.freecodecamp.org) a linkului.

Textul linkului este partea vizibilă (accesați site-ul nostru pentru tutoriale).

Dacă faceți clic pe textul linkului, veți ajunge la adresa specificată.

Cum se utilizează listele în HTML

Listele sunt utilizate pentru a specifica un set de articole consecutive sau informații conexe într-un mod bine format și semantic, cum ar fi o listă de ingrediente sau o listă de pași procedurali.

Marcajul HTML are trei tipuri diferite de liste – ordonat, unorderoșu și Descriere liste.

Liste comandate

O listă ordonată este utilizată pentru a grupa un set de articole conexe, într-o ordine specifică. Această listă este creată cu <ol> etichetă. Fiecare articol din listă este înconjurat de <li> etichetă.

Cod
<ol>
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>
Exemplu
  1. Se amestecă ingredientele
  2. Coaceți în cuptor timp de o oră
  3. Se lasă să stea zece minute

Liste neordonate

O listă neordonată este utilizată pentru a grupa un set de articole înrudite, fără nicio ordine specială. Această listă este creată cu <ul>etichetă. Fiecare articol din listă este înconjurat de <li> etichetă.

Cod
<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Exemplu

  • Tort de ciocolata
  • Tort de Pădurea Neagră
  • Tort de ananas

Liste de descriere

O listă de descrieri este utilizată pentru a specifica o listă de termeni și descrierile acestora. Această listă este creată cu <dl> etichetă. Fiecare articol din listă este înconjurat de <dd> etichetă.

Cod
<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>
Ieșire

Pâine Un aliment copt din făină. Cafea O băutură făcută din boabe de cafea prăjite.

Listă de styling

De asemenea, puteți controla stilul listei. Poți să folosești list-style proprietatea listelor. Lista dvs. poate fi gloanțe, pătrate, cu cifre romane sau poate fi imagini dacă doriți.

list-style proprietatea este prescurtată list-style-type, list-style-position, list-style-image.