Introducere
Unul din
primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext
Markup Language ), care descrie formatul primar in care documentele sint
distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma,
structurarea formatarii si legaturile hipertext, fac din el un foarte bun
format pentru documentele Internet si Web.
Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva trasaturi : independenta de platforma, posibilitati hypertext si structurarea documentelor.Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atit de variata.
Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva trasaturi : independenta de platforma, posibilitati hypertext si structurarea documentelor.Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atit de variata.
Hipertext inseamna
ca orice cuvint, fraza, imagine sau alt element al documentului vazut de un
utilizator ( client ) poate face referinta la un alt document, ceea ce usureaza
mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi
document. sStructurarea riguroasa a documentelor permite convertirea acestora
dintr-un format in altul precum si interogarea unor baze de date formate din
aceste documente.
Tim
Berners-Lee a utilizat ca model SGML ( Standard Generalized Markup Language ),
un standard international in plina dezvoltare. SGML avea avantajul unei structurari avansate si
al independentei de platforma dar proiectarea lui a avut in vedere mai mult
structura semantica a documentului decit modul de formatare. Flexibil, SGML putea fi descris ca o
specificare pentru descrierea altor formate. Utilizatorii puteau crea noi
formate (DTD, Document Type Definitions) care puteau fi intelese de orice
produs soft SGML pur si simplu prin citirea mai intai a definitiilor noilor
formate.
HTML este pur si
simplu un DTD, deci o aplicatie a SGML. In primii ani de evolutie HTML a
crescut lent, in principal pentru ca ii lipseau posibilitatile de a descrie
publicatii electronice profesionale; limbajul permitea oarece control asupra
fontelor dar nu permitea inserarea graficii. In 1933, NCSA a imbogatit limbajul
pentru a permite inserarea graficii si au construit primul navigator grafic,
Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus
adaugiri limbajului HTML (adaugiri si nu imbogatiri pentru ca unele taguri nu
erau in conformitate cu principiile generale ale SGML) astfel incat, prin 1994
limbajul parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW din Geneva ( Elvetia ) s-a
constituit un grup ( HTML Working Group ) a carui prima misiune a fost
formalizarea HTML intr-un DTD al SGML, lucru care s-a concretizat in HTML Level
2 ( sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost proiectat de Tim Berners-Lee
). Importanta actiunii
acestui grup consta in faptul ca, odata standardizat, limbajul poate fi apoi
extins intr-un mod mai controlat la alte nivele.
Standardul oficial HTML este World Wide Web
Consortium (W3C),
care este afiliat la Internet
Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre
care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere, cum
ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii"
HTML in afara procesului standard si le-au incorporat in browserele lor. In
unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de
facto adoptate de autorii de browsere.
HTML 2.0, elaborat in
Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele
curente -- inclusiv cele mod text. HTML 2.0 reflecta conceptia originala a HTML
ca un limbaj de marcare independent de obiectele existente pentru asezarea lor
in pagina, in loc de a specfica exact cum ar trebui sa arate acestea. Daca doriti sa fiti siguri ca toti
vizitatorii vor vedea paginile asa cum trebuie, folositi tagurile HTML 2.0.
Specificatia
HTML 3.0, Enuntata in
1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati precum
tabelele si un mai mare control asupra textului din jurul imaginilor. Desi
unele din noutatile HTML 3.0 erau deja folosite de autorii de browsere, multe
nu erau inca. In unele cazuri, taguri asemanatoare implementate de autorii de
browsere au devenit mai raspandite decat tagurile "oficiale".
Specificatia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include
tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si
Microsoft plus extensii HTML raspandite. In Bilantul asupra HTML, W3C recomanda ca providerii de informatii
sa utilizeze specificatia HTML 3.2.Versiunile curente ale majoritatii
browserelor ar trebui sa suporte toate, sau aproape toate aceste taguri.
De asemenea exista
extensii Netscape si Microsoft care nu fac parte din specificatia HTML 3.2, ori
pentru ca sunt mai putin utilizate, ori au fost omologate dupa aparitia HTML
3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care
suporta anumite taguri HTML 3.0, iar Netscape detine in jur de 70% din piata de
browsere, multi au crezut eronat ca toate extensiile Netscape (incluzand taguri
ca <BLINK> si facilitati ca ferestrele) fac parte din HTML 3.0 sau
HTML 3.2.
La momentul
aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja
publicate specificatiile HTML 4.01.
Documentele HTML
sint documente in format ASCII si prin urmare pot fi create cu orice editor de
texte. Au fost insa dezvoltate editoare specializate care permit editarea
intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit
navigatoarele afiseaza acelasi document oarecum diferit, in functie de
platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care
permit formatarea HTML a documentelor generate ( si formatate ) cu alte
editoare. Evident conversiile nu pot patra decit partial formatarile anterioare
deoarece limbajul HTML este inca incomplet.
Primii
pasi
Orice document
HTML incepe cu notatia <html> si se termina cu notatia </html>.
Aceste "chestii" se numesc in literatura de specialitate
"TAG-uri".Prin conventie, toate informatiile HTML incep cu o
paranteza unghiulara deschisa "<" si se termina cu o
paranteza unghiulara inchisa ">".
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.
Intre
cele doua marcaje <html> si </html> vom introduce
doua sectiuni:
-sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
-sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
O eticheta poate
fi scris atat cu litere mici, cat si cu litere mari.
Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre browser.
Deci un prim document HTML ar fi ceva de genul asta:
Un text de culoare rosie.
Fond de culoare albastra si text de culoare galbena.
Textul are atribute implicite.
Textul este scris cu fontul "Arial", culoare albastru si marime 6.
In aceasta linie urmatorul cuvant este
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este:
Tastati urmatoarea comanda comanda DOS:
Acest cuvant clipeste
Normal
Aceste linie este scrisa cu caractere normale.
CV http://modeldivers-cv.blogspot.com/
Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre browser.
Deci un prim document HTML ar fi ceva de genul asta:
Asa arata primul document
HTML.
Copiati-l folosind
Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM
In primul
rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head>
a urmatoarei linii:
<title>
Aceasta este prima mea pagina de Web</title>
In plus, in
sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj <
sau > atunci interpretorul HTML le va lua ca texte simple si le va
afisa pe ecran. Sa
vedem o noua versiune a paginii noastre:
Continutul
blocului <title>...</title> va aparea in bara de titlu a
ferestrei browser-ului.
Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului.
Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului.
Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-un
singur rand, intrucat caracterele " CR/LF " sunt ignorate de browser.
Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apara
in pagina html.
Aceasta comanda este marcajul <br> ( de la " line break " - intrerupere de linie ).
Aceasta comanda este marcajul <br> ( de la " line break " - intrerupere de linie ).
Folosind aceleasi
operatii ca mai sus, vizualizati noua pagina! Veti vedea textul ce apare in
fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel
introdus de dvs.
Bine ati venit in
Folosind aceleasi
operatii ca mai sus, vizualizati noua pagina! Veti vedea textul ce apare in
fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel
introdus de dvs.
<html>
<head>
<title>
titlul paginii</title>
</head>
<body>
Bine ati venit in
<br>
pagina mea de Web! </body>
</html>
Blocuri preformatate
Prima linie
A doua linie
A treia linie
Pentru ca
browser-ul sa interpreteze corect caracterele " spatiu ", " tab
" si " CR/LF " ce apar in cadrul unui text, acest text trebuie
inclus intr-un bloc <pre>...</pre>.
<html>
<head>
<title>
bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
Culoarea de fond
O culoare
poate fi precizata in doua moduri:
- Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
- Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei
pagini se precizeaza prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabileste cu atributul
Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
Culoarea fondului paginii Web se stabileste cu atributul
bgcolor
al etichetei <body>, de
exemplu: <body bgcolor = culoare>
. Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
Culoarea textului
Acest lucru
se face prin intermediul atributului
text
al etichetei <body>
dupa sintaxa <body text=culoare>
. In urmatorul exemplu textul are
culorea rosie. <html>
<head>
<title>
culoare textului </title>
</head>
<body
text=red>
Un text de culoare rosie.
</body>
</html>
O eticheta poate
avea mai multe atribute.De exemplu , o eticheta cu trei atribute arata astfel:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.
Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si textul de
culoare galbena.
<html>
<head>
<title>
atribute multiple </title>
</head>
<body
bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
Textul afisat este
caracterizat de urmatoarele atribute: Marime (
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fara delimitator de sfarsit de bloc).
size
), Culoare (color
), Font (style
). Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fara delimitator de sfarsit de bloc).
<basefont size =
numar
color =
culoare
style =
font
>
unde:
- numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare);
- culoare - este o culoare precizata prin nume sau printr-o constructie RGB;
- font
- poate fi un font generic ca " serif ", " san serif
", " cursive ", " monospace ", "fantasy
" sau un font specific instalat pe calculatorului clientului, ca
" Times New Roman ", " Helvetica " sau " Arial
".Se accepta ca valoare si o lista de fonturi separate prin virgula,
de exemplu:
" Times New Roman, serif,monospace ".
Domeniul de
valabilitate al caracteristicelor precizate de aceasta eticheta se intinde de
la locul in care apare eticheta pana la sfarsitul paginii sau pana la
urmataorea eticheta <basefont>.
Daca acest atribut lipseste atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman " .
Daca acest atribut lipseste atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman " .
Pozitionarea
continutului paginii Web fata de marginile ferestrei browserului se poate face
cu ajutorul a doua atribute ale etichetei <body>:
leftmargin
(stabileste distanta dintre marginea stanga a ferstrei browserului si marginea stanga a continutului paginii);topmargin
(stabileste distanta dintre marginea de sus a ferstrei browserului si marginea de sus a continutului paginii);
<html>
<head>
<title>
Configurarea textului si stabilirea
marginii </title>
</head>
<body
leftmargin="100" topmargin="50">
Textul are atribute implicite.
<br><basefont style="Arial"
color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6.
</body>
</html>
Stiluri pentru blocurile de text
Pentru ca un bloc
de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus
intre delimitatorii <b>...</b> (b vine de la
"bold" = indraznet).
Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> (i vine de la " italic ").
Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> (i vine de la " italic ").
Pentru a insera
secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script)
, aceste fragmente trebuie delimitate de etichetele <sub>...</sub>,
respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>...</strike> sau <s>...</s>.
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>...</strike> sau <s>...</s>.
In exemplul
urmator vom utiliza toate etichetele mentionate anterior.
<html>
<head>
<title>
Stiluri pentru blocuri de text </title>
</head>
<body>
<b>
Text scris cu caractere ingrosate.</b>
<br>
<big>
Text cu caractere marite cu o
unitate <big>
mai
mare<big>
si mai mare<big>
si mai mare.</big></big></big></big><br>
<small>
Textul este scris cu caractere
micsorate cu o unitate <small>
mai mic.</small></small><br>
<i>
Text scris cu caractere italice.</i>
<br>
In aceasta linie <sup>
sus</sup>
este superscript iar <sub>
jos</sub>
este subscirpt.<br>
<strike>
Aceasta linie este in intregime
sectionata de o linie orizontala.</strike>
<br>
In aceasta linie urmatorul cuvant este
<u>
subliniat</u>
, iar cuvantul <s>
strike</s>
sectoinat.</body>
</html>
Stiluri fizice si logice
Am prezentat deja
8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice
intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de
aceste blocuri.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.
Pentru a pune in evidenta
(prin silul cursiv) fragmente de text se utilizeaza etichetele:
- <cite>...</cite> (" cite " inseamna citat);
- <em>...</em> (em vine de la " emphasize " = a evidentia).
In locul lor se poate utiliza eticheta echivalenta <i>...</i>.
Urmatoarele etichete
au efecte similare.Ele permit scrierea fragmentului de text cu caractere
monospatiate (de tipul celor folosite de o masina de scris):
- <code>...</code> ("code" inseamna cod sau sursa);
- <kbd>...</kbd> (kbd vine de la " keyboard " = tastatura);
- <tt>...</tt> (tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink>
delimiteaza fragmenete de text clipitoare. Aceasta eticheta functioneaza numai
in browserul Netscape Communicator.
<html>
<head>
<title>
Blocuri de
caractere monospatiate si clipitoare </title>
</head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este:
<code>
Function
f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd>
copy c:\windows\*
c:\temp<kbd><br>
<tt>
Asa scrie un
teleprinter</tt><br>
Acest cuvant clipeste
<blink>
Blink</blink>
</body>
</html>
Exemplul urmator
ilustreaza ca etichetele pot fi imbricate.
- un fragment de text poate fi scris cu aldine si cursive in acelsi timp;
- pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, marit si cursiv.
Blocul <q>...</q>
permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre
browser cu caractere cursive.
" q " vine de la " in-line quotation " (citate inserate in-line);
Si blocurile " q " pot fi imbricate.
" q " vine de la " in-line quotation " (citate inserate in-line);
Si blocurile " q " pot fi imbricate.
<html>
<head>
<title>
Imbricarea etichetelor </title>
</head>
<body>
Aceasta linie
este formata din text normal.<br>Normal
<b>
ingrosat <i>
ingrosat si italic </i>
ingrosat </b>
.<br>
Normal <u>
subliniat <b>
subliniat si ingrosat <big>
subliniat, ingrosat si marit.<br>
<i>
Subliniat, ingrosat ,marit si
italic.</i>
</big></b></u>
</body>
</html>
<font size="-3">
Fonturi de marime 1.</font>
<br>
<font
size="+2">
Fonturi de marime 6.</font>
<br>
<font
point-size="30">
Fonturi de marime 30 pt (numai cu Netcape Communicator).</font>
<br>
<font
point-size="50">
Fonturi de marime 50 pt (numai cu Netcape Communicator).</font>
</body>
</html>
Grosimea unui font
Grosimea unui
caracter poate fi definita cu ajutorul atributului
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).
weight
al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).
<html>
<head>
<title>
Grosimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale.
<br>
<font
weight="100">
Fonturi de grosime 100.</font>
<br>
<font
weight="500">
Fonturi de grosime 500.</font>
<br>
<font
weight="900">
Fonturi de grosime 900.</font>
</body>
</html>
CV http://modeldivers-cv.blogspot.com/