Ce este HTML: tag-uri de bază

29.05.2022

Timp de citire: 1 minut

Profesii

Autorul articolului

Grișa Prepeliță

Ce este HTML: tag-uri de bază

HTML este utilizat pentru a structura o pagină pe un site web, pentru a adăuga imagini, tabele, liste.

134

Conţinut:

De ce HTML?

Tag-uri principale

HTML și alte tehnologii

Noțiuni de bază despre HTML

HTML (HyperText Markup Language) este un limbaj de marcare a hypertextului. Acest standard este utilizat la proiectarea paginilor web. Acesta nu este un limbaj de programare în care se scriu programe și aplicații. El are doar tag-uri - acestea spun browserului cum să redea un site web. HTML este un element de bază în profesiile de design și dezvoltare web.

De ce HTML?

Atunci când un utilizator deschide un site web într-un browser, browserul răspunde cu o pagină HTML, fișiere de stil CSS și scripturi JS, dacă acestea sunt prezente pe pagină. Browserul procesează aceste date și redă pagina în conformitate cu regulile prestabilite.

HTML este utilizat pentru a defini structura: blocuri de conținut și ordinea acestora. Un bloc conține text și diverse atribute. De exemplu, iată cum este creat antetul:

<h2> Acesta este al doilea nivel de antet <h2>

Și iată cum se face paragraful:

<p>Paragrafele încep pe un rând nou și sunt indentate în partea de sus și de jos.<p>

Aceste tag-uri împerecheate sunt utilizate pentru a marca blocurile: containere, titluri, paragrafe, tabele și multe altele.

Tag-uri principale

Orice pagină HTML modernă începe cu o etichetă <!DOCTYPE html>. Acest lucru indică browserul la cea mai recentă versiune de HTML5. Fără acest tag, pagina nu se va afișa corect.

Structura HTML este destul de simplă: tot codul se află în interiorul tag-ului <html></html>. În blocul <head></head> sunt incluse stilurile, sunt indicate metatag-urile și metadescrierea. Setați titlul cu ajutorul etichetei <title></title> — acesta va fi afișat în fila din browser. Blocul <body></body> conține conținutul paginii, partea sa vizibilă: text, imagini, videoclipuri, link-uri.

Exemplu de o pagină simplă:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1>Aceasta este antetul de prim nivel</h1>.
<p>Puneți textul și apoi imaginea</p>
<img src="/media/imagine.png">
<p>Pot exista oricâte tag-uri de acest fel doriți</p>
</body>
</html>

Principalele tag-uri utilizate pentru a structura un document includ tag-uri pentru afișarea media, lucrul cu text și hyperlinkuri. Și, de asemenea, tag-uri pentru a crea liste, titluri, butoane, formulare și blocuri personalizate - div-containers.

Pentru text

Pe lângă tag-ul de paragraf <p>, tag-ul <span> este folosit mai frecvent. Acesta este un tag special inline, cu ajutorul căruia se modifică formatarea unei părți a textului. Adică, se evidențiază unele informații din alte tag-uri și se stabilește stilul. În interiorul unui paragraf, puteți modifica culoarea și dimensiunea primei litere: adăuga-ți tag-ul la început și la sfârșit <span> și definiți un stil de text pentru aceasta. De exemplu, faceți-l bolt, cursiv sau colorat.

<p><b>Acest text va fi scris cu bold</b></p> — datorită acestei tag-uri/tag </b>

<p>O parte din text <i>va fi cu text italic</i></p> — obținem acest lucru prin intermediul tag-ului<i>.

<p>Exemplu cu <span style="color: red;"><i>roșu italic</i></span><br>și transferăm 
rândul</p>

Pentru imagini

Eticheta <img> este folosită pentru a adăuga o imagine. Atributul său src este setat la o valoare care conține calea către fișierul dorit. De exemplu, pentru a afișa o imagine de 200 pe 200 de pixeli, scrieți:

<img src="calea_către_imagine.png" width=200 height=200> — width и height — 
atributele tag-ului <img>

Pentru o structură de date complexă

Această structură include liste marcate și numerotate. Fiecare are propriul tag: <ul> - pentru marcat, <ol> - pentru numerotat. Și pentru a desemna un element din listă, utilizați tag <li>. Pentru astfel de liste, există o regulă: în interiorul <ul> și <ol> nu ar trebui să fie altceva decât <li>.

<h2>Listă nesortată</h2>
<ul>
<li>Element  1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>

<h2>Listă ordonată</h2>
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>

O structură și mai complexă este un tabel. Este descris în interiorul tag-ului <table>. Pentru a defini numele coloanelor, creați un element <tr> și plasați tag-urile antetului tabelului <th> cu numele coloanelor. Adăugați valori cu tag de date din tabel <td>.

<!-- Se descriu coloanele din tabel-->
<table border="1">
<caption>Tag-urile html</caption>
<tr>
<th>tag</th>
<th>pentru ce este necesar</th>
<th>descriere</th>
</tr>
<!-- următoarele sunt valorile -->
<tr>
<td>caption</td>
<td>tabele</td>
<td>se creează titlul tabelului</td>
</tr>
<tr>
<td>a</td>
<td>hyperlink</td>
<td>se creează link-uri pe documente separate</td>
</tr>
<tr>
<td>br</td>
<td>transferul</td>
<td>transferul textului pe un rând nou</td>
</tr>
<tr>
<td>img</td>
<td>imagine</td>
<td>conține link-ul către imagine</td>
</tr>
</table>

Rezultatul codului:

HTML și alte tehnologii

HTML este o tehnologie fundamentală, dar nu este singura tehnologie folosită pentru a dezvolta site-uri web. Folosind CSS este descris aspectul elementelor paginii, este adaptat site-ul pentru vizualizare de pe computer și smartphone. Și cu JavaScript, se face pagina dinamică: adică se animă butoane, imagini, carduri de produse.

Învațați HTML, CSS și JavaScript în cursul pentru dezvoltatori web de la Skillbrain Online School. Cunoașteți și lucrați cu GIT, GitHub, linteri, formatatori, framework React, dezvoltare back-end.

Veți stăpâni teoria prin lecții video, seminarii web și note. Pentru a lucra - cu ajutorul temelor: doar dezvoltatorii practicanți le verifică. Veți analiza subiecte complexe online, în 6 luni de studiu veți realiza 5 proiecte în portofoliu.

Noțiuni de bază despre HTML

HTML este limbajul de marcare hipertext al unei pagini. Constă din tag-uri - comenzi către browser cum să afișeze pagina.

Cu ajutorul HTML, faceți textul bold, italic, subliniat, schimbați culoarea. Pteți pune paragrafe, desemna titluri, tabele, liste. Plasați nu numai text, ci și linkuri sau imagini.
Lista completă a tag-urilor este pe site-ul web HTML5Book. Și vă puteți consolida abilitățile în editorul online Сodesandbox.

HTML este responsabil pentru structură și conținut - nu pentru formatarea elementelor paginii sau dinamica site-ului. Prin urmare, dezvoltatorul trebuie să cunoască alte tehnologii: CSS și JavaScript.