Pentru ca nu s-a schimbat nimic referitor la HTML/XHTML, mi-am permis sa dau copy paste la un articol pe care l-am scris acum ceva vreme pe Windows 7, avand in vedere ca va fi mutata aici categoria WEB de acolo.
HTML-ul este limbajul de baza pentru afisarea informatiilor pe web. Acesta contine mai multe taguri pentru a formata infatisarea unei pagini web. Acest mic tutorial are ca scop prezentarea principalelor taguri, cele mai des utilizate si intalnite in varianta XHTML 1.0, ultima versiune aparuta.
Inceputul unei pagini web XHTML ar trebui sa contina urmatoarele declaratii:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Astfel browserul stie ca are de-a face cu XHTML 1.0 varianta Transitional, pe langa aceasta varianta mai exista si Strict si Frameset.
XHTML are anumite reguli stricte cele mai frecvent intalnite sunt:
- declaratia !DOCTYPE… de mai sus, cu una din cele 3 variante alese
- declaratia <html xmlns… trebuie inclusa in fisier
- toate tagurile trebuie sa fie continute intre
<html> si </html>
- tagurile duble sunt de forma
<tag></tag> Ex:<div>...</div>
- tagurile singure sunt de forma
<tag /> Ex:<input... />
inainte de /> este un spatiu
- totate tagurile si atributele se scriu cu litere mici
- tagurile duble se inchid in ordinea inversa deschiderii lor Ex:
<tag1>text1<tag2>text2><tag3>text3</tag3>alt text2</tag2></tag1>
- atributele nu pot fi scrise fara valoare, iar valoarea se pune intre ghilimele Ex:
<tag atribut="valoare" />
Taguri:
<html></html>
Intre aceste taguri se afla tot codul din XHTML, ele pot fi considerate containerul principal pentru o pagina – tagul parinte, un document care nu prezinta aceste taguri, va fi formatat de browser ca HTML, insa nu va fi valid XHTML.
In interiorul acestui tag se gasesc 2 taguri principale:
<head> </head> <body> </body>
Tagul “head” contine informatii care nu vor fi afisate in pagina web:
- tagul
<title> </title>
ce contine titlul paginii si va fi afisat de majoritatea browserelor moderne in tabul de navigare
- tagul singur
<meta />
ce poate contine: atributul:Ex: http-equiv=”content-type”
atributul:Ex: content=”text/html; charset=iso-8859-1″
atributul name cu valorile: author, description, keywords, revised, generator, robots…
- tagul
<script> </script> Ex: <script type="text/javascript">COD</script>
– anunta inceputul de cod pentru javascript, browserul va interpreta acest cod in pagina; sau type=”text/css” – anunta inceputul de cod pentru CSS; codul este declarat in interiorul tagului script
- tagul singur
<link />
– folosit pentru incarcarea de pagini ce contin cod – javascript sau css
Ex: <link rel="stylesheet" href="locatie/pagina.css" type="text/css" />
Tagul “body” contine toate tagurile afisate, “corpul” paginii web:
<p> </p>
– reprezinta un paragraf, acesta va avea un rand liber inainte si dupa, iar tot interiorul sau va fi formatat in functie de proprietatile sale din CSS.
<div> </div>
– reprezinta un bloc dreptunghiular, ce poate contine diverse informatii (text, poze, alte taguri – div, p…), asemeni paragrafului interiorul sau poate fi formatat in functie de CSS.
<h1> </h1> ... <h6> </h6>
– sunt taguri speciale, ele au deja o anumita formatare – textul marit si boldat, in functie de numar – h1 este cel mai mare. Se folosesc in principal la titluri, subtitluri, informatia din interiorul lor fiind folosita de motoarele de cautare pentru relevanta in rezultatele afisate (SEO).
<a> </a>
– cu atributul href=”pagina.ext” – este folosit la afisarea legaturilor dintr-o pagina
Ex: <a href="http://blog.weebo.ro">Windows 7</a>
Atributul “href” poate primi diverse valori
Ex: <a href="mailto:sadwys@yahoo.com">Mail: Emanuel</a>
sau poate face trimiteri intr-un anume loc din pagina cu valoarea “#”
<a href="#jos">Sfarsitul articolului </a>
<ol> </ol>
– impreuna cu tagul
<li> </li>
este folosit pentru a reprezenta o lista ordonata (numerotata), in tagul “li” aflanduse o linie din lista
<ul> </ul>
– cu tagul “li” formeaza o lista neordonata (punctata)
<img />
– tag singur, cu atributele src=”poza.ext” alt=”ce sa apara daca nu este gasita poza”, XHTML valideaza ambele atribute
<table> </table>
– retine o tabla, se foloseste impreuna cu tagurile
<tr></tr>
– rand tabela si
<td> </td>
– data din celula
Ex: <table><tr><td>Celula 1 </td><td>Celula 2 </td></tr></table>
– tagul “td” poate avea atributele “colspan” sau “rowspan” atunci cand dorim afisarea pe mai multe coloane sau pe mai multe linii.
<form></form>
– cel mai important in crearea paginilor dinamice – el contine formularele
– atribute – name=”nume”
– method=”post” sau “get” – get afiseaza variabilele in URL
– action-”pagina.php” – pagina care sa efectueze actiunea… aici o pagina PHP
- in interiorul tagului form, se afla mai multe taguri:
<input />
– tag singular, cu proprietatile: name=”nume” value=”" valoarea implicita a campului, poate fi lipsa sau alta valoare, si type=”" cu valorile: “text” camp in care se pot scrie valori; “password” camp pentru parole, ceea ce este scris apare cu (*) stelute; “submit” si “button” – pentru evaluarea formularului – dupa ce este apasat datele se trimit catre pagina din action; “radio” – pentru selectia de optiuni; “checkbox” – pentru a bifa o optiune; “file” pentru upload de fisiere; “hidden” camp ce nu apare pe pagina, de obicei contine valori implicite ce nu trebuiesc modificate, dar trebuiesc trimise catre pagina de actiune; “reset” sterge toate valorile din formular, care au fost completate
<select> </select>
– se foloseste impreuna cu tagul
<option></option>
“select” primeste atributul name=”nume” si option atributul “value” – fiecare optiune va avea o valoare distincta – reprezinta o lista derulanta ce poate avea unul sau mai multe rezultate
<textarea></textarea>
– pentru a introduce texte foarte mari, atributele “cols” si “rows” pentru a dimensiona
Pentru a verifica daca un site este valid XHTML puteti folosi validatorul celor de la W3C, cei care se ocupa de intretinerea limbajului HTML, si de aparitia de noi versiuni, acum se lucreaza la XHTML 2 si HTML 5.
Completare: – toate tagurile pot avea atributele id=”" si class=”", ele sunt folosite in special pentru formatarea afisarii, fie prin CSS fie prin Javascript – document.getElementById(‘ce se afla intre ghilimele’);
– exista si caractere speciale, pentru afisare: pentru simbolul mai mic: “<” se foloseste <
pentru simbolul mai mare: “>” se foloseste >
mai multe spatii se pot introduce cu
copyright “©” = ©
pentru ampersant “&” se foloseste &
<a name="jos"/></a>
