HTML
3 participanți
HTML
Scris de !! Lyo !! Vin Sept 04, 2009 5:47 pm
HTML - Introducere
Bine ai venit in sectiunea de tutoriale. Aici vei putea invata baza HTML-ului, pentru a fi capabil sa realizazi propriile tale pagini web.
Daca deja esti familiarizat cu XML, atunci HTML ti se va parea usor de invatat. Va safatuim sa nu cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o jumatate de ora parcurgand cateva lectii dupa care sa reflectari asupra informatiei citite si sa practicati.
Pregatire pentru HTML
Crearea documentelor in HTML nu este dificila. Pentru inceput vei avea nevoie decat de notepad si putina dedicatie. Daca esti nou in domeniu si nu ai parcurs inca Ghidul incepatorului, te sfatuiesc sa petreci cateva minute citindul.
Ghidul incepatorului
Bine ai venit in pagina de tutoriale , tutoriale despre HTML si web-design. Acest sir de tutoriale este conceput pentru oferi putina experienta, pentru ca tu sa fi capabil sa citesti si sa scri in HTML, sa poti salva corect documentele si sa poti dupa aceea sa vizualizezi toata "osteneala" intr-un browser web. Din pacate aceeasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele:
* Sa sti ce este un notepad si cum se foloseste
* Sa sti sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)
* Sa sti cum se face si ce este un copy/paste
Prima pagina web
Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea sa executat corect, in caz contrar pagina nu va functiona.
Code:
<html>
<head>
</head>
<body> <h2>Prima mea pagina web!</h2>
</body>
</html>
Codul de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. 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. O sa te rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu.
Vizualizarea primei pagini web - Browsers
Pentru a putea vedea pagina, va trebuii sa folosesti un browser. Browser-ele sunt programele de internet care interpreteaza codurile HTML, asemanatoare cu acele pe care le-ai copiat si salvat in notepad. Acestea transforma codul HTML intr-o pagina web care poate fi citita de orice internaut. Cele mai folosite browsre...l sunt:
*
Internet Explorer
*
FireFox
*
Ópera
*
Netscape Navegator
Vizualizarea primei pagini
Pentru a putea vizualiza pagina web, trebuie sa deschizi fisierul "index.html" intr-un browser. In acest sens, deschide o noua fereastra de Internet Explorer si urmareste intructiunile:
1.
Din File selecteaza Open
2.
Click pe Browse pentru a deschide un Windows Explorer
3.
Iti aduci aminte unde ai salvat fisierul? Foarte bine, acolo trebuie sa te duci.
4.
Cand l-ai gasit dai dublu click pe el pentru a-l deschide.
Felicitari! Tocmai ai vazut prima ta pagina web.
Tags in HTML
Acum ca deja ai creat prima ta pagina web, ar trebuii sa examinam cateva segmante 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 de 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.
Tag-uri de baza in HTML
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.
Code:
<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.
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 inchee respectiva functie. Deci <tag> este folosit pentru a incepe o functie, iar </tag> pentru a o incheia.
Ordinea tag-urilor - Foarte important
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.
Cea de-a doua pagina
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.
Code:
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine a-ti 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. Cand ai terminat, mergi mai departe si citeste urmatorul tutorial.
Concluzie
In exemplul anterior au fost introduse cateva tag-uri noi. Vom incerca sa dam o definitie acesstora, pentru a putea incepe in lectia urmatoare, adevaratul Tutorial HTML. Tagurile despre care vorbeam sunt: <head>, <title>, <h2> si <p>.
Exemplul in discutie:
Code:
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine a-ti venit.</h2>
<p>Foarte curand voi face o pagina care va v-a da pe spate pe toti!</p>
</body>
</html>
<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.
Acum ca ai inteles baza etichetelor in HTML si cum acestea functioneaza, poti sa mergi ma departe incepand sa citesti sectiunea Tutorial HTML. Aici vei invata toate etichetele si atributele HTML, cum sa le folosesti si cum sa construiesti o pagina web functionala.
Bine ai venit in sectiunea de tutoriale. Aici vei putea invata baza HTML-ului, pentru a fi capabil sa realizazi propriile tale pagini web.
Daca deja esti familiarizat cu XML, atunci HTML ti se va parea usor de invatat. Va safatuim sa nu cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o jumatate de ora parcurgand cateva lectii dupa care sa reflectari asupra informatiei citite si sa practicati.
Pregatire pentru HTML
Crearea documentelor in HTML nu este dificila. Pentru inceput vei avea nevoie decat de notepad si putina dedicatie. Daca esti nou in domeniu si nu ai parcurs inca Ghidul incepatorului, te sfatuiesc sa petreci cateva minute citindul.
Ghidul incepatorului
Bine ai venit in pagina de tutoriale , tutoriale despre HTML si web-design. Acest sir de tutoriale este conceput pentru oferi putina experienta, pentru ca tu sa fi capabil sa citesti si sa scri in HTML, sa poti salva corect documentele si sa poti dupa aceea sa vizualizezi toata "osteneala" intr-un browser web. Din pacate aceeasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele:
* Sa sti ce este un notepad si cum se foloseste
* Sa sti sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)
* Sa sti cum se face si ce este un copy/paste
Prima pagina web
Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea sa executat corect, in caz contrar pagina nu va functiona.
Code:
<html>
<head>
</head>
<body> <h2>Prima mea pagina web!</h2>
</body>
</html>
Codul de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. 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. O sa te rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu.
Vizualizarea primei pagini web - Browsers
Pentru a putea vedea pagina, va trebuii sa folosesti un browser. Browser-ele sunt programele de internet care interpreteaza codurile HTML, asemanatoare cu acele pe care le-ai copiat si salvat in notepad. Acestea transforma codul HTML intr-o pagina web care poate fi citita de orice internaut. Cele mai folosite browsre...l sunt:
*
Internet Explorer
*
FireFox
*
Ópera
*
Netscape Navegator
Vizualizarea primei pagini
Pentru a putea vizualiza pagina web, trebuie sa deschizi fisierul "index.html" intr-un browser. In acest sens, deschide o noua fereastra de Internet Explorer si urmareste intructiunile:
1.
Din File selecteaza Open
2.
Click pe Browse pentru a deschide un Windows Explorer
3.
Iti aduci aminte unde ai salvat fisierul? Foarte bine, acolo trebuie sa te duci.
4.
Cand l-ai gasit dai dublu click pe el pentru a-l deschide.
Felicitari! Tocmai ai vazut prima ta pagina web.
Tags in HTML
Acum ca deja ai creat prima ta pagina web, ar trebuii sa examinam cateva segmante 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 de 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.
Tag-uri de baza in HTML
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.
Code:
<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.
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 inchee respectiva functie. Deci <tag> este folosit pentru a incepe o functie, iar </tag> pentru a o incheia.
Ordinea tag-urilor - Foarte important
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.
Cea de-a doua pagina
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.
Code:
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine a-ti 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. Cand ai terminat, mergi mai departe si citeste urmatorul tutorial.
Concluzie
In exemplul anterior au fost introduse cateva tag-uri noi. Vom incerca sa dam o definitie acesstora, pentru a putea incepe in lectia urmatoare, adevaratul Tutorial HTML. Tagurile despre care vorbeam sunt: <head>, <title>, <h2> si <p>.
Exemplul in discutie:
Code:
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine a-ti venit.</h2>
<p>Foarte curand voi face o pagina care va v-a da pe spate pe toti!</p>
</body>
</html>
<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.
Acum ca ai inteles baza etichetelor in HTML si cum acestea functioneaza, poti sa mergi ma departe incepand sa citesti sectiunea Tutorial HTML. Aici vei invata toate etichetele si atributele HTML, cum sa le folosesti si cum sa construiesti o pagina web functionala.
!! Lyo !!- Administrator
- Numarul mesajelor : 235
Data de inscriere : 09/04/2009
Localizare : galati
.::BoGdAn::.- Super Active
- Numarul mesajelor : 98
Data de inscriere : 05/07/2009
Localizare : Galati
balaceanu- Beginner
- Numarul mesajelor : 21
Data de inscriere : 04/08/2009
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum|
|
|