Ghid HTML pentru incepatori
Ce este mai exact HTML?
Html sau HyperText Markup Language este un limbaj de programare web (printre cele mai vechi limbaje de programare web).
Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin limbajul de programare HTML.
Acest articol are ca principal scop sa iti oferi putina experienta, sa te ajute sa lucrezi in HTML, sa poti edita/salva corect documentele
Aceasta postare nu are nici o rubrica despre cum se foloseste un calculator sau despre functiile sale de baza. Pentru asa ceva poti sa ceri ajutorul unui prieten. Ar trebui sa cunosti urmatoarele: Sa stii sa utilizezi notepad (eu va recomand notepad ++); Sa stii sa folosesti un browser (precum Internet Explorer sau Chrome) si sa deschizi fisiere HTML folosind acel browser; Sa stii sa utilizezi functia copy/paste.
Haideti sa facem prima noastra pagina web.
Vom face prima noastra pagina HTML folosind urmatorul cod:
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>Prima mea pagina web in HTML!</title> </head> <body> <h2>Prima mea pagina web in HTML!</h2> </body> </html> |
Codul HTML de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web simpla.
Copiem codurile de mai sus intr-o noua fila de notepad folosind copy/paste.
Acum poti salva documentul in notepad selectand din meniul „File”, optiunea „Save As”. In fereastra care se deschide, selecteaza „All Files”.
Vom da un nume fisierului, de exemplu „index.html”, fara ghilimele. Verifica de doua ori innainte de a apasa butonul „Save” ca terminatia numelui fisierului sa fie „.html”.
Vizualizarea primei pagini.
Pentru a putea vizualiza pagina web, trebuie sa deschizi fisierul „index.html” intr-un browser. In acest sens, poti face dublu-click pe fisier si se v-a deschide in browser.
Tag-uri de baza in HTML.
Acum ca deja ai creat prima ta pagina web, ar trebuii sa examinam cateva segmente ale fisierului „index.html”. Cu siguranta ai vazut ca exista un model in aranjatea comenzilor, niste cuvinte care sunt incercuite de „<” si „>”, acestea sunt tag-urile HTML
Un exemplu de tag in HTML este <body>. Tag-ul <body> spune browser-ului, unde incepe continutul paginii web. <body> este deasemenea un exemplu de tag care ar trebuii sa existe in absolut orice pagina web.
Sa mai aruncam o privire asupre codului. O pagina web are in componenta doua elemente de baza. Daca vei incerca sa creezi o pagina fara cele doua tag-uri, vei avea probleme.
Un exemplu corect de folosire a tagurilor HTML:
|
1 2 3 4 5 |
<html> <body> Continutul paginii va fi aici </body> </html> |
Primul tag se numeste <html> si este cel care ii spune browser-ului ca a inceput un cod in HTML. Cel de-al doilea tag, <body>, spune browser-ului ca aici incepe partea vizibila sau continutul paginii HTML.
Inchiderea tag-urilor in HTML.
Poate ai observat deja inca doua tag-uri asemanatoare la sfarsitul documentului, </body> si </html>. Acestea sunt tag-urile de inchidere. </body>, da de stire browser-ului, ca sa incheiat continulul pagini, iar </html> ca s-a incheiat documentul HTML.
Slesh „/” este pus innaintea numelui tag-ului si spune browserului ca ar dori sa incheie respectiva functie. Deci <tag> este folosit pentru a incepe o functie, iar </tag> pentru a o incheia.
Ordinea tag-urilor.
Ordinea deschiderii si a inchiderii tag-urilor este foarte importanta. Daca un tag este deschis intr-un altul, de exemplu body este deschis in html atunci acel tag (body) este cel care trebuie inchis inaintea celui de-al doilea tag (html).
Am inchis mai intai body pentru ca a fost cel care s-a deschis cel mai recent. Aceasta regula si anume deschiderea si inchiderea tag-urilor se aplica la toate celelalte taguri ale documentelor HTML.
Haideti sa mai incercam sa mai facem inca o noua pagina HTML.
Probabil ca ai nevoie de timp si de mai multe incercari perntru a te acomoda cu aceste reguli, asa ca cel mai bine ar fi sa exersam in continuare cu o a doua pagina web. Copiaza acest cod in notepad, asa cum ai facut si prima data.
Vom face o noua pagina HTML folosind urmatorul cod:
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>Pagina mea!</title> </head> <body> <h2>Bine ati venit.</h2> <p>Foarte curand voi face o pagina care va v-a da pe spate pe toti!</p> </body> </html> |
Dupa ce te-ai asigurat ca totul e facut conform indicatiilor anterioare, poti salva documentul. Ai putea chiar sa-l salvezi cu acelasi nume ca si cel anterior, si anume „index.html”. S-ar putea sa te intrebe daca vrei sa salvezi peste documentul anterior, poti sa dai linistit OK, nu vom mai avea nevoie de celalalt document.
Haideti sa facem o mica recapitulare a acestui articol/tutorial.
In exemplul anterior au fost introduse cateva tag-uri noi. Vom incerca sa dam o definitie acesstora. Tag-urile despre care vorbeam sunt: <head>, <title>, <h2> si <p>.
<head>
Acest tag urmeaza imediat dupa <html> si este folosit pentru a indica browser-ului, informatii utile precum: titlul pagini, continulul (folosit de motoarele de cautare vechi) si multe altele.
<title>
Se pune intre <head> si </head>. Acest tag este cel care da numele pagini. Numele va fi afisat in browser, de obicei in partea stanga sus. In exemplul anterior titlul era „Pagina mea!” si va fi afisat ca si titlul browserului.
<h2>
Acesta este titlul care apre in pagina, inainte de continut si va fi mai mare decat litera de continut. <h2> inseamna ca e cea de-a doua marime a literei intre cel sase care exista. <h1> este cea mai mare iar <h6> va fi cea mai mica.
<p>
Este tag-ul care marcheaza deschiderea si incheerea unui paragraf. Asa ca atunci cand vei incepe un paragraf asigurate ca ai pus <p> la inceput si </p> la sfarsit.
Continua sa inveti!
Acum ca ai inteles baza etichetelor in HTML si cum acestea functioneaza, poti sa mergi mai departe incepand sa experimentezi singur :).
Nu te retine sa comentezi acolo unde ai nelamuriri sau pur si simplu ai ceva de adaugat sau completat.
