Tutorial HTML – Introducere

September 17, 2021

Dacă mi-ar fi spus cineva acum un an că voi ajunge să învăţ design web, HTML şi chiar programare, i-aş fi râs în faţă şi i-aş fi spus că e nebun. Dar aşa e: în urmă cu vreo jumătate de an m-am uitat la primul meu tutorial de design web şi am făcut chiar şi primul meu site, de care încă sunt mândră. Cu toate astea, se vede că e un prim site şi de fiecare dată când intru pe el, mai găsesc ceva ce aş modifica sau la care aş renunţa de tot.

Însă astăzi vreau să vorbim despre altceva, anume despre o primă lecţie legată de HTML. Un fel de lecţie introductivă, tutorial sau cum îmi place mie să spun, un fel de „hai-să-învăţăm-împreună”. HTML poate fi plictisitor dar e un început bun pentru cineva care nu a mai avut până acum treabă cu domeniul ăsta, al tehnologie, şi vrea să înceapă de unedva totuşi.

Ce înseamă HTML?

Dar, ce înseamnă acest HTML? De la ce vine? Ei bine, HTML, ori HyperText Markup Language, este un limbaj de editare, deci nu poţi programa şi nici nu te poţi ocupa de design-ul unei pagini. Te poţi folosi de el doar pentru a afişa informaţii într-un site.

Înainte de a începe, n-ai nevoie decât de un editor de text, iar cel mai simplu e Notepad (eu folosesc Visual Studio Code). Deschide Notepad-ul, denumeşte-l şi nu uita să îi adaugi extensia .html (altfel, nu o să se întâmple nicio „magie”).

Structura HTML-ului

Un document HTML începe cu tag-ul <html> şi se termină cu acelaşi tag, dar închis </html>.  Între aceste două tag-uri, vom introduce apoi încă două secţiuni: antetul  <head>…</head> și corpul documentului <body>…</body>. Secţiunea de body cuprinde conținutul paginii, adică ceea ce va fi afișat în browser.

Sigur, vrem să adăugăm şi un titlu. Aşa că în secţiunea <head>…</head> adăugăm următoarea linie: <title>Hello World</title>. Conţinutul din tag-ul title va apărea în bara de titlu a ferestrei browser-ului. Dacă acest tag lipseşte, în bara de titlu va apărea numele fişierului. Apoi, putem adăuga orice şi orict conţinut dorim în pagina noastră. De exemplu:

Pentru a trece pe o linie nouă, nu este de ajuns să folosim tasta enter. Avem nevoie de un tag nou, anume de break: <br>. Acest tag este unul din tag-urile care nu trebuiesc şi închise. Dacă vrem să introducem un paragram nou, tag-ul pentru asta este <p>…</p>.

Acum să vorbim puţin şi despre formatarea textului. Următoarele tag-uri pot fi utile:

Şi…cam asta a fost prima ta lecţie. Data viitoare, vom continua cu structura de baza a unei pagini HTML, anume vom vorbi despre liste, despre tabele dar şi despre câteva tag-uri speciale.

0 Comentarii

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Alte Articole

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Data trecută am stabilit că următorul tutorial va fi despre stilizarea unui buton, ceva nu foarte complicat. Vom începe prin crearea unui document cu extensia .html, în cazul meu, l-am denumit index.html, iar apoi facem şi un document cu extensia .css, spre exemplu...

Tutorial HTML – Liste, Tabele, Butoane, Imagini

Tutorial HTML – Liste, Tabele, Butoane, Imagini

Liste Dacă data trecută am vorbit puţin despre HTML, astăzi continuăm cu încă câteva elemente ce sunt de folos atunci când ne dorim să construim o pagină web simplă. Aşadar, începem cu inserarea unei liste. Avem 2 tag-uri pentru liste, anume <ul>…</ul>,...

Tutorial HTML – Liste, Tabele, Butoane, Imagini

Tutorial HTML – Liste, Tabele, Butoane, Imagini

Liste Dacă data trecută am vorbit puţin despre HTML, astăzi continuăm cu încă câteva elemente ce sunt de folos atunci când ne dorim să construim o pagină web simplă. Aşadar, începem cu inserarea unei liste. Avem 2 tag-uri pentru liste, anume <ul>…</ul>,...