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”).
Structură
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.
Acesta a fost articolul de astăzi! Dacă ți-a plăcut, nu uita să arunci un ochi peste blog-ul nostru pentru mai multe articole interesante, în special pe categoria Web-ul în 100 de pași! De asemenea, ne găsești și pe TikTok, și pe Instagram!
