HTML – Hyper Text Markup Language

Atunci cand vrem sa vorbim cu un polonez, spre exemplu, trebuie sa gasim un mod de comunicare, o limba pe care sa o stim cu totii. Acelasi lucru e si cu browserul. Pentru a ii transmite ce dorim, trebuie sa folosim aceeasi limba. Practic, aceasta limba este HTML. “Cuvintele” pe care le folosim sunt:

Tag – specifica regiuni importante in documentul HTML si se noteaza astfel : <tag>Element – Un tag complet, care e compus din tag de deschidere <tag> si de inchidere </tag>. Nu toate tagurile au pereche, unele se folosesc astfel : <tag/>Atribut – Se foloseste pentru modificarea elementelor HTML. Se pot folosi atribute multiple, astfel <tag atribut=”valoare atribut”></tag>.

Scopul HTML este prezentarea informatiilor – paragrafe, fonturi, tabele, div-uri, etc. HTML este un format text proiectat pentru a putea fi citit si editat de oameni utilizand un editor de text simplu (Notepad).

O pagina HTML, are urmatoarele elemente de baza:

Tip document – <html></html>
Head – <head></head> – Aici sunt continute informatii descriptive, metadate
Body – <body></body> – Corpul paginii

Ca idee, pagina are un cap si un corp. Asa cum e in viata, corpul se vede din prima, practic, pe browser se va afisa ce e in body. Conteaza “ce are in cap” cineva, deci informatiile din head-ul paginii vor comunica cu browserul si ii vor da detalii despre pagina.

Un alt element important in crearea unei paginii web il reprezinta DOCTYPE-ul. DOCTYPE-ul e necesar intr-o pagina web incat prin acest tag ii spunem browser-ului cum sa interpreteze pagina. Nu va chinuiti sa retinteti tot, google va poate da o linie de cod pt DOCTYPE.

O pagina de HTML ar arata asa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
   </head>
<body>
<!-- cod html -->
</body>
</html>

Sa vedem ce etichete HTML apar in exemplu:

<html></html> – Inceputul si sfarsitul fisierului
<head></head> – Contine informatii descriptive si metadata
<title></title>
– Este pozitionat in <head></head> si contine titlul paginii
Etichetele <meta> pot include informaţii despre titlul şi autorul documentului, informaţii structurale despre cum este împărţit documentul în diferite segmente, paragrafe etc. şi informaţii care permit ca documentul să poată fi legat de alte documente (css, javascript). Tot in <head> se pot definii stiluri si functii javascript, care vor fi folosite in documentul html.
<body></body> – Contine corpul paginii, ceea ce se va afisa pe browser. Asadar: tot ce dorim sa apara pe browser, punem intre cele doua taguri <body>..
<!– comentariu –> – Comentariu HTML

Taguri folosite

<h1></h1>Headinguri – Titlurile in HTML sunt numerotate de la 1-6, cu 1 fiind cea mai mare poziţie şi 6 fiind cel mai mica. Prin introducerea de text în cadrul tag-ului <h1>, textul va avea dimensiunea in functie de h-ul adaugat (1-6).

<h1> Titlul 1</h1>
<h2> Titlul 2</h2>
<h3> Titlul 3</h3>
<h4> Titlul 4</h4>
<h5> Titlul 5</h5>
<h6> Titlul 6</h6>

<p></p> Paragraf
<p> Acesta este un paragraf. </p>

Rezultat:
Acesta este un paragraf.
Daca scriam:
p Acesta este un paragraf </p>
Rezultatul ar fi fost:
p Acesta este un paragraf
Paragraful poate avea atribute, printre care si align, cu valorile: left, right, justify, center.

<br / >Rand nou – tag nepereche

<hr />Linie orizontala – tag nepereche

<ol></ol>Lista ordonata. Contine itemi, notati cu <li></li>.;
<ol>
<li>Primul</li>
<li>Al doilea</li>
<li>Al treilea</li>
</ol>
Lista ordonata are atributele:
start = numarul de la care incepe numerotarea
type = tipul listei, cu valorile: “a”, “A”, “i”, “I”

<ul></ul>Lista neordonata, sau lista cu bullets. Contine itemi, notati cu <li></li>.
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>

Lista neordonata are atributul type, care poate fi square, disc, circle.

<dl></dl>Lista de definitii, care contine <dt></dt> – termenul definit, si <dd></dd> – definitia.

<b></b>Bold

<strong></strong> – Text strong, asemanator cu bold

<i></i>Italic

<em></em>Emphasis, asemanator cu italic

<sup></sup>Superscript

<sub></sub>Subscript

<del></del>Text taiat

<code></code>Font cod

<font></font>Font.
Are urmatoarele atribute:
size – dimensiunea fontului
color – culoarea fontului
face – tipul fontului

<a></a>Link
Are urmatoarele atribute:
href – adresa fisierului destinatie
target – in ce fereastra se va deschide fisierul destinatie. Poate lua valorile: _blank (pagina va fi incarcata intr-o noua fereastra), _parent (pagina va fi incarcata in fereastra parinte), _top (pagina va fi incarcata in fereastra top a cadrului), _self (pagina va fi incarcata in aceeasi fereastra)
title – descrierea afisata in momentul in care mouse-ul se afla deasupra linkului
<a href="adresa-fisier" target="_blank" title="titlu"> nume</a>
Link-urile pot fi interne, locale, sau globale.
Pentru a creea un link de trimitere a unui email, folosim:
   <a href="mailto:angela@soft-build.com?subject=Intrebare blog" >Da-mi un email</a>

<img /> – Eticheta folosita pentru inserarea unei imagini in pagina. Are urmatoarele atribute:
src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)
<img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />

Sursa imaginii, sau adresa ei, poate fi relativa sau absoluta. Sa vedem ce inseamna fiecare:
Daca suntem in Piata Operei, in Timisoara, cu spatele la Opera si intrebam pe cineva unde este catedrala, ne va spune: “Drept inainte”. Asta e calea relativa, pentru ca doar daca stam cu spatele la Opera si mergem inainte, putem gasi Catedrala.

Daca vorbim cu cineva pe messenger si intrebam unde e Catedrala, ne va spune: “Mergi in Piata Operei, stai cu spatele la Opera si mergi inainte”. Asta e calea absoluta, pentru ca oriunde am fi, daca mergem in Timisoara, in Piata Operei si stam cu spatele la Opera, iar apoi mergem inainte, vom ajunge la Catedrala.

Astfel, calea relativa e atunci cand gasesc locatia pozei plecand de la locatia fisierului html. Pot sa zic ca poza e in acelasi director, si voi pune la src “poza.jpg”. Daca poza e in directorul imagini, care e in acelasi director cu fisierul, vom merge la “imagini/poza.jpg”. Daca poza e intr-un director mai sus fata de fisier, vom scrie “../imagini/poza.jpg”.

Pentru a lua o imagine folosind calea absoluta, scriem adresa imaginii din calculator “c:\imagini\poza.jpg” sau de pe internet http://www.site.ro/imagini/poza.jpg. Se mai poate lua si calea absoluta, ca si baza siteului (acolo unde e fisierul index.html, iar aceasta se noteaza asa: “/imagini/poza.jpg”.

O imagine poate fi, la randul ei link, astfel:
<a href="#" alt="" target="_blank">
<img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />
</a>

<table></table> – Tabel
<tr></tr> – Rand de table
<td></td> – Celula de table

<table border="1">
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
</tr>
<tr>
<td>Celula 3</td>
<td>Celula 4</td>
</tr>
</table>

Atributele etichetei table sunt:
border = bordura (0 – lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left, right, center)
valign = aliniere pe verticalala a continutului (top, bottom, middle)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea

<div></div> – Div – o caseta folosita pentru a grupa alte elemente. Nu permite alte elemente pe acelasi rand.

<span></span> – Span – o caseta folosita pentru a grupa alte elemente, dar care permite alte elemente pe acelasi rand.

Entitati si simboluri

Putem folosi anumite simboluri, pentru a afisa anumite caractere. Spre exemplu, pentru ca ochiul uman citeste mai usor codul indentat, browserul nu va lua in seama doua spatii unul dupa celalalt pe care ni le scriem noi in cod, ci va considera ca e un singur spatiu. De aceea, daca vrem sa afisam doua spatii, va trebui sa folosim un simbol special pentru spatiu. Mai putem afisa si alte caractere speciale.

&nbsp; = spatiu
&copy; – ©
&lt; = <
&gt; =>

Tema

  1. un fisier care se numeste index.html si in care incercati exemplele din documentatie in html
  2. un fisier cv.html care va contine cv-ul vostru in format html, fara stiluri, folosind elementele invatate la html
  3. pozele referite in cod, unde e cazul

Intrebari?:)