Învață bazele HTML - Tutorial pentru începători

Învață bazele HTML - Tutorial pentru începători

De ce instrumente ai nevoie pentru a învăța HTML

Pentru a învăța limbajul HTML, ai nevoie de un computer. Nu contează cât de nou e, de cine este fabricat, sau ce putere are. Nici măcar sistemul de operare nu contează atât de mult. Fie că folosești Windows, Linux sau MacOS, limbajul HTML este universal valabil.

Dar pentru că majoritatea folosește Windows 10, vom folosi și noi în acest tutorial sistemul de operare al Microsoft: Windows 10.

Activarea vizibilități extensiilor în Windows 10

Pentru genera mai ușor fisire de tip HTML, este necesar să modificăm o mică setare în Windows 10.

Deschidem o fererastra File Explorer folosind tasta Windows + E. (tasta Windows este în gereral localizată pe tastatură între Ctrl și Alt în colțul din stânga jos). În File Explorer mergem la tabul View, apoi facem click pe Options. Se va deschide o fereastră nouă numită Folder Options. Aici mergem în tabul View și debifam "Hide extentions for known file types". Click pe OK și modificările au fost salvate.

Creăm primul fișier HTML

Mergem pe desktop unde vom crea primul fișier HTML. Facem click dreapta pe desktop apoi mergem la New -> Text Document. Pe desktop avem acum fișierul New Text Document.txt pe care îl redenumim în index.html. Windows ne va avertiza că pot fi probleme dacă schimbăm extensia, dar confirmăm operațiunea.

Cu un dublu click pe index.html deschidem fișierul în browserul web setat că default. (Noi va recomandăm să folosiți Chrome sau Firefox).

Adăugăm conținut în fișierul HTML

Browserul web s-a deshis, dar nu este decât o paqina goală. Urmează să adăugăm conținut în această pagină, dar în primul rând trebuie să adăugăm structura.

Mergem înapoi pe desktop, facem click dreapta pe index.html și apoi Open With -> Notepad, și deshis codul sursă al fișierului index.html.

Putem instala Visual Studio Code gratuit pentru o experiență mai bună la editare.

Apoi în editor scriem următorul cod:

HTML head body

Pentru a salva moficarile folosim Ctrl + S, apoi mergem în browserul web și îi dăm refresh (F5) fișierului index.html. Observăm că pagina are acum un titlu "Pagina HTML" și conținut texul "Invat bazele HTML".

Finalizăm partea de adăugat conținut cu inserarea unul paragraf în secțiunea body:

html h1

Adăugarea unei poze într-o pagină HTML

În codul sursă, sub paragraful adăugat anterior vom adăuga o imagine. Dar pentru asta avem nevoie de un fișier jpg sau png. Cu siguranță aveți undeva în calculator o poză pe care o vom copia pe desktop și o vom redenumi "poza.jpg". Apoi doar adăugam codul:

img src

Adăugarea unui link către o altă pagină

În codul sursă adăugăm sub poză:

link altweb

Observați că am creat un link către AltWeb, dar acesta este pe aceeași linie cu poza. Pentru a muta link-ul sub poză, inserăm în cod, între poză și link:

page break html

Adăugarea unui link către o pagină locală

Creăm un alt fișier, să îl denumim "despre-noi.html". În acest fișier adăugăm următoarea structura:

local html

Salvăm și ne întoarcem la "index.html" unde în codul sursă adăugăm sub link-ul către AltWeb.ro, codul:

link html tutorial

Adăugarea unei liste într-o pagină HTML

Codul pentru adăugarea unei liste este intuitiv:

lista html tutorial

Elemente HTML ce conțin alte elemente HTML

Să zicem că avem nevoie de o listă de link-uri, așa că înlocuim conținutul listei de mai sus cu link-uri. Codul exemplu este mai jos:

lista link-uri tutorial html

Construim un tabel în HTML

Pentru organizarea datelor un tabel este mereu util. Observați structura:

tabel html tutorial

Tabelul este deschis de tagul TABLE. Apoi fiecare rând este deschis de TR (table row).

Primul rând conțin elemente TH (table heading), iar celelalte rânduri conțin elemente TD (celulele de baza ale tabelului).

Observați că am adăugat border și cellpadding pentru a vizualiza cu ușurință structura.

Pentru a nu complica foarte mult lucrurile ne oprim aici cu lecția. După ce stăpâniți bazele HTML, va recomandăm să vizitați https://www.w3schools.com/html pentru a aprofunda aceste cunoștințe.

Ce urmează după ce învățați HTML

După aprofundarea limbajului HTML, urmează să învățați CSS și JavaScript pentru a stiliza și a adaugă elemente interactive paginii web.

După ce stăpâniți CSS și JavaScript urmează să învățați PHP și MySql pentru a putea lucra cu resurse stocate în baze de date și pentru a interacționa cu serverul.

Aveți nevoie de multă pasiune pentru a aprofunda măcar bazele acestor limbaje.

Dacă vreți să învățați să creați pagini web, folosiți recomandările noastre și încercați să învățați lucrând, aplicând din mers ce ați învățat.

Dar dacă vreți să învățați să faceți pagini web doar pentru a vă face un website, va recomandăm să apelați la specialiști, mai ales dacă timpul este prețios pentru dumneavoastră. Nu am recomandă nici măcar Wordpress, chiar dacă este ușor de instalat și de pus în funcțiune, adăugarea de conținut într-o structura dorită necesită alte tutoriale care va vor mânca din timp și presupun învățarea de elemente PHP și CSS.

Pentru orice sfat ne puteți oricând contacta și vă vom îndruma către soluția cea mai bună.

Dan Stoian
Web Developer

Timpul este cel mai prețios

O afacere de succes înțelege că trebuie să se concentreze pe ceea ce face cel mai bine!
Noi facem web design.