HTML-Incepatori

Localizare : Vid Mesaje : 30

Ce este HTML

Html sau HyperText Markup Language este unul dintre 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 comenzile de baza din HTML.
Acest sir de tutoriale html este conceput pentru a-ti 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 aceasta 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 stii ce este un notepad si cum se foloseste
- Sa stii sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)
- Sa stii ce este si cum se face un copy/paste

Prima pagina web

Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea a fost executata corect, in caz contrar pagina nu va functiona.
HTML:
<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 trebui 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 browsere sunt:
- Internet Explorer
- FireFox
- Opera
- Chrome
- Safari
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:
- Din File selecteaza Open.
- Click pe Browse pentru a deschide un Windows Explorer.
- Iti aduci aminte unde ai salvat fisierul? Foarte bine, acolo trebuie sa te duci.
- Cand l-ai gasit dai dublu click pe el pentru a-l deschide.
Felicitari! Tocmai ai vazut prima ta pagina web.

Acum ca deja ai creat prima tapagina web, ar trebui sa examinam cateva segmente ale fisierului "index.html". Cu siguranta ai vazut ca exista un model in aranjarea 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 de asemenea un exemplu de tag care ar trebui sa existe in absolut orice pagina web.

Tag-uri de baza in HTML

Sa mai aruncam o privire asupra 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.

HTML:
<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 inaintea numelui tag-ului si spune browser-ului 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 - 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.
HTML:
<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.

Localizare : Vid Mesaje : 30

Elementele HTML au multe ranguri. Tot ceea ce vezi, paragrafurile, banner-ul de deasupra, link-urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.
- <p> - tag-ul pentru deschiderea unui paragraf.
- Continutul elementului - paragraful propriu-zis.
- </p> - tag-ul de inchidere.
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title sibody.

<html>element...</html>

Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv </html>. Aceasta este structura standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:
HTML:
<html>
</html>
Salveaza documentul din meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creat, "index.html". Apasa Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).
Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!

Elementul <head>

Elementul <head> este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebui sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca <head> poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.
Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa aruncam o privire fara el:
HTML:
<html>
<head>
</head>
</html>
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.

Elementul <title>

Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head.Ceea ce vei scrie intre cele doua tag-uri title (<title> si </title>) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat avem si codul sursa:
HTML:
<html>
<head>

<title> Prima mea pagina web!</title>

</head>
</html>
Salveaza acum fisierul si deschide-l in browser. Vei putea vedea titlul dupa cum am mai spus in partea din stanga sus, la marea majoritate a browser-elor poti pune orice nume doresti, doar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior.

Elementul <body>

Elementul body este cel care defineste inceperea continutului paginii propriu-zise (titluri, paragrafuri, fotografii, muzica si orice altceva).
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.
HTML:
<html>
<head>
<title> Prima mea pagina web!</title>
</head>

<body>
Salut Gasca! Aici voi pune mai tarziu continutul!
</body>

</html>

Localizare : Vid Mesaje : 30

Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai spus deschiderea, continutul si inchiderea.
Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau doua.
HTML:
<openingtag>Continut</closingtag>
<p>Exemplu un paragraf</p>
Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.
Alaturat sunt cateva exemple de taguri in HTML.
HTML:
<body>Actioneaza ca o capsula asupra continutului.

<p>Paragraf</p>

<h2>Titlu (heading)</h2>

<b>Ingrosat (bold)</b>

<i>Inclinat (italic)</i>

</body>
Exceptii - Tag-uri care nu au nevoie de inchidere

Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie de nici un continut. Datorita acestui fapt se va folosi o maniera modificata de creere a acestor taguri.
Cel mai simplu exemplu este "linebreak"
HTML:
<br/>

Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit. Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.
Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.
HTML:
<img src="../img/image.jpg" /> -- Image Tag --

<br /> -- Line Break Tag --

<input type="text" size="12" /> -- Input Field --
Dupa cum poti vedea browser-ul este capabil sa reproduca aceasta imagine atata timp cat furnizam locatia cu ajutorul atributului "scr".

Localizare : Vid Mesaje : 30

Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.
Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.
Atributele se introduc intre parantezele unghiulare (<>) ale tag-ului de deschidere.

Atributele "class" si "id" in HTML

Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor ci mai degraba sunt utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia sintaxa si funcia lor in CSS.
Ideea este ca, atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.
HTML:
<p id="italicsparagraph">Paragraph type 1, inclinat </p>

<p id="boldparagraph">Paragraph type 2, ingrosat </p>
Vizualizare

Paragraph type 1, inclinat
Paragraph type 2, ingrosat

HTML - Atributul "name"

"name" este ceva mai diferit fata de "id" si "class". Punand un nume unui element, acesta devine o variabila de script pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.
HTML:
<input type="text" name="TextField" />

Acest atribut (name) nu are nici un efect asupra redarii casutei de text, cu toate ca in background detine un rol foarte important.

HTML - Atributul "title"

Atributul title este folosit foarte putin fata de cat ar trebui, el adauga un titlu (un pop-up) oricarui continut al unui element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra continutului.
HTML:
<h2 title="Eu sunt un atribut title!">Un Titlu Oarecare</h2>
HTML - Atributul "align"

Daca vrei sa aliniezi in mod diferit anumite elemente ale paginii tale, atunci ai la dispozitie atributul align. Poti alinia la stanga (left), dreapta (right) sau la mijlocul (center) paginii, aproape orice element. Prin default elementele se aliniaza la stanga, exceptand atunci cand se specifica o alta aliniere.
HTML:
<h2 align="center">Titlu centrat </h2>

Alete exemple:

HTML:
<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>
Valori standard pentru atribute

Multora dintre tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri.

Atribute generice

Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alaturat aici cateva dintre atributele cele mai comune, folosite in HTML:
HTML-Incepatori 16bf3ub

Si asta a fost

Subiect: Re: HTML-Incepatori Dum Aug 21 2016, 12:23

Ai mai încalcat regula asta odată în topic-ul tău de Php, nu primești Warn decat dacă până diseară la miezul nopții aceste 4 posturi nu devin unul singur.

O zi bună în continuare!