HTML TUTORIAL ROMANA: Curs incepatori HTML5 Basic | Invata Web Design | Lectia #1

Vrei să inveți cum să creezi site-uri folosind limbajul HTML și CSS?

Ei bine astăzi iți voi arăta câteva elemente de bază pe care trebuie să le cunoști pentru a deveni programator web.

Salut, astazi iti voi arata principalii pasi pe care trebuie sa-i urmezi pentru a crea o pagina web HTML5. Hai să deschidem programul de editare de cod și să începem treaba. Eu iți sugerez să folosești “Brackets” – gasesti link in descriere. Nu este neapărat necesar; poți folosi Notepad sau Notepad++. Odată instalat programul, începe prin a crea un fișier nou. Ai grijă ca atunci când îl vei salva sa adaugi extensia .html dacă programul tău nu adaugă extensia automat.

Taguri necesare pentru realizarea unei pagini HTML5

In interiorul acestui document “.html” vom include toate tagurile HTML de care vom discuta asta. Primul tag este cel prin care declar ca tipul de document: . Acest tag defineste documentul ca fiind un un document HTML5. Tine cont ca acest tag nu trebuie sa aibe un tag de inchidere. Urmatorul tag pe care trebuie sa-l adaugam este “”. Acest tag este radacina tuturor tagurilor pe care urmeaza sa le folosim. Dupa cum poti vedea daca folosesti programul sugerat mai sus, Brackets, acesta trebuie inchis, astfel incat programul a adaugat automat tagul de inchidere . Acesta este unul dintre avantajele de a lucra un cu IDE. Urmatoarele taguri pe care trebuie sa le adaugam suntsi.

Intre tagurilevom adauga meta informatii pe care dorim sa le transmitem catre browsere sau motoare de cautare precum titlul paginii, meta taguri, reguli CSS, linkuri externe catre fisiere javascript, etc. – acestea nu vor fi vizibile ca text pe pagina noastra, pentru utilizatorii finali. In sectiuneavom adauga tot continutul care dorim sa fie afisat pe pagina noastra.

Acum ca am adaugat toate tagurile principale si am creat arhitectura elementara pentru realizarea unei pagini HTML, voi salva documentul si il voi deschide intr-un browser. Dupa cum poti observa pagina este goala pentru moment.

Taguri esentiale in sectiunea HEAD

Primul lucru pe care-l voi face este sa adaug un titlu acestei pagini. Voi adauga titlu in sectiuneaa paginii. Dupa ce am adaugat titlul dorit voi salva din nou fisierul si voi reincarca pagina in browser. Dupa cum poti observa nu a aparut nimic nou in pagina, dar daca ne uitam mai atent la tabul deschis, vom vedea ca acesta a preluat informatia pe care am adaugat-o in tagul

Taguri esentiale in sectiunea BODY

Pentru a adauga continut in pagina vom crea un nou tag, de aceasta data in sectiunea <body> a site-ului. Astfel, intre cele 2 taguri <body> </body> voi adauga tagul <h1></h1>. Scriu un titlu oarecare dupa care salvez si reincarc pagina. Dupa cum poti observa am creat primul nostru titlu vizibil pe pagina. Dupa cum vei vedea in continuare, exista mai multe marimi de titluri – h1 fiind cea mai mare dintre ele. Tagurile titlu H1, H2, H3 sunt foarte folositoare si in optimizarea site-urilor in punct de vedere SEO.

Pentru a vedea diferentele dintre taguri, voi adauga cateva taguri H – h2 si h3 pentru a vedea diferenta dintre acestea.

Incearca si vezi cate titluri exista. Lasa-mi scris in comentarii cate tipuri de tiluri ai gasit si ce alte taguri folositoare ai descoperit.

Dupa ce le-ai creat salveaza pagina si reincarca browserul. Vei vedea diferenta de dimensiune dintre texte. Aceasta dimensiune poate fi alterata prin aplicarea unor reguli CSS, asa cum vom vedea intr-un alt tutorial.

Un alt tag foarte des intalnit este cel de paragraf – <p></p>. Tagurile de paragraf sunt foarte des folosite pentru a formata textul din pagina.

 

Taguri de stiliare HTML

Pe langa tagurile de baza mai regasim si taguri HTML prin care putem sa stilizam textul din pagina. Astfel, daca in interiorul ultimului paragraf vrem sa bolduim un cuvant sau o expresie voi folosi tragul <strong></strong>. Deasemenea, pot la fel de bine sa stilizez textul folosind taguri precum <em></em> sau <u></u>. Dupa cum observi prin folosirea tagului <em> am creat un text italic, iar prin folosirea tagului <u> am subliniat ceea ce mi s-a parut important de retinut.

Voi incerca acum sa mut o parte din text pe o noua linie. Daca voi da enter textul se va muta in editorul text dar daca voi reincarca pagina, aceasta modificare nu se va revedea si in pagina. Pentru a face acest lucru posibil avem nevoie de un nou tag – <br /> (care nu se inchide ca celelalte de mai sus). Folosind acest tag acolo unde vreau ca textul sa se mute pe o noua linie, acest lucru va deveni posibil. Cu cat voi introduce mai multe taguri <br /> unul dupa altul, cu atat textul meu va cobora mai multe linii.

Adauga in comentarii ce tag ti se pare cel mai folositor.

Dupa cum vezi am creat prima ta pagina web in format HTML. Arata ca o pagina web din 1995 dar este doar inceputul. Vom continua sa imbunatatim designul web al paginilor prin adaugarea de stiluri CSS si a unor noi functionalitati prin Javascript.

Lasa un comentariu

Your email address will not be published.