Aeronautica	Comunicatii	Drept	Informatica	Nutritie	Sociologie
Tehnica mecanica

Html

Qdidactic » stiinta & tehnica » informatica » html
Istoric al Limbajului HTML

Istoric al Limbajului HTML

Unul din primele elemente fundamentale ale WWW ( World Wide Web) este HTML ( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma,structurarea formatarii si legaturile hypertext,fac din ele un foarte bun format pentru documentele Internet si Web.

Primele specificatii 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 schimba intre ei informatie utilizand Internetul. Erau prin urmare necesare cateva 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 atat de variata.

Hipertext inseamna ca orice cuvant, 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 aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul, precum si interogarea unor baze de date formate din aceste documente.

Taguri de baza

Orice document HTML incep cu notatia <html> si se termina cu notatia </html>. Acestea se numesc in literaturatura 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.

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.

O eticheta poate fi scrisa 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.

Exemplu de prim document HTML:

<html>

<head>

</head>

<body>

</body>

</html>

Titlul unei pagini

Se obtine inserand numele in sectiunea<head> . </head>

Exemplu:

<title>Aceasta este prima mea pagina de Web</title>

Exemplu:

<html>

<head>

<title>Aceasta este prima mea pagina de Web</title>

</head>

<body>

Bine ati venit in pagina mea de Web!

</body>

</html>

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 ferestrei browser-ului va aparea numele fisierului.

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”--inrerupere de linie).

Exemplu:

<html>

<head>

<title>titlul paginii</title>

</head>

<body>

Bine ati venit in <br> pagina mea de Web!

</body>

</html>

Blocuri preformatate

Penru ca browser-ul sa interpreteze correct caracterele “spatiu”, “tab” si” CR/LF” ce apar in cadrul unui text trebuie inclus intr-un bloc <pre> . </pre>.

<html>

<head>

<title>bloc preformatat</title>

</head>

Prima linie

A doua linie

A treia linie

</pre></body>

</html>

Culoarea de fond

O culoare pote fi precizata in doua moduri:

Printr-un nume de culoare. Sunt disponibile cel putin 16 numere de culori : aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

Prin constuctia “#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 bgcolor al etichetei <body>, de exemplu : <body bgcolor=culoare>.

Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.

<html>

<head>

<title>culoare de fond</title>

</head>

O pagina Web cu fondul GRI!

</body>

</html>

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul exemplu textul are culoarea rosie.

<html>

<head>

<title>culoare textului</title>

</head>

Un text de culoare rosie.

</body>

</html>

Etichete

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 ( size ), culoare ( color ), font ( style ). Acestea sunt atribute ale etichetei <basefont>. Este o eticheta singulara (fara delimitator de sfarsit de bloc).

Proiect: Sistem informational - sistem informatic - sistemele informatice in activitatea economica

Referat: Istoria virusilor - ce este un virus de calculator?

unde :

numar – poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru cel mai mare );

culoare - este o culoare precizata prin nume sau printr-oconstructie RGB;

font – poate fi un font generic ca “serif”, “san serif”, ”cursive”, “monospace”, “fantasy” sau un font specific instalat pe calculatorul clientului, ca “Times New Roman”, “Helvetica” sau “Arial”. Se accepta ca valoare si o lista de fonturi separate prin virgule, de exemplu :

“Times New Roman, serif, monospace”.

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 ferestrei browserului si marginea stanga a continutului paginii );

topmargin ( stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii );

Exemplu :

<html>

<head>

<title>Configurarea textului si stabilirea marginii</title>

</head>

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 caractere 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 caractere 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 caractere 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>, respective <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>.

In exemplul urmator se utilizeaza 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 acesta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscript.<br>

<strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike>

<br>

In acesta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectionat.

</body>

</html>

Fonturi

Un font este caracterizat de de urmatoarele atribute :

● culoare ( stabilita prin atributul color );

● tipul sau stilul ( stabilit prin atributul face );

● marimea ( definita prin atributul size )

● grosime ( definita prin atributul weight ).

● Toate aceste atribute apartin etichetei, care permite inserarea de

blocuri

de texte personalizate.

Culori

O culoare poate fi precizata in doua moduri:

-printr-un nume de culoare.

-printr-o constanta conform standardului de culoare RGB ( Red, Green , Blue). O astfel de constanta se formeaza astfel : #rrggbb, unde r, g si b sunt cifre hexazecimale.

Culoarea fontului

Pentru a scrie un fragmented text cu caractere de o anumita culoare se incadreaza acest fragment intre delimitatorii . avand stabilit atributul color la valoarea necesara.

Familia fontului

Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi ( stiluri de caractere ). Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor : serif, sans serif, cursive, monospace si fantasy. Tipul de font necesar poate fi stability prin atributul face al etichetei. Pot fi introduce mai multe fonturi separate prin virgula.

In acest caz browserul va utiliza primul font pe care il cunoaste.

<html>

<head>

<title>Culoarea si familia fontului</title>

</head>

<body>

Aceasta linie este scrisa cu caractere normale.

<br>

<font color=”red”>Aceasta linie este rosie.</font>

<br>Aici<font color=”green”>fiecare</font>

<font color=”blue”>cuvant</font>

<font color=”#3478fa”>culoare.</font>

<br>

<font face=”monospace”>Linie scrisa cu caractere monospatiate.</font>

<br>

<font face=”arial”>Linie scrisa cu caractere arial.</font>

</body>

</html>

Marimea fontului

Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi :

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare );

+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;

-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;

Marimea unui font poate fi stabilita exactcu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numarul astfel precizat reprezinta marimea fontului in puncte tipografice.

Acest atribut functioneaza numai cu Netscape Communicator.

<html>

<head>

<title>Marimea fontului</title>

</head>

<body>

Aceasta linie este scrisa cu caractere normale.<br>

<font size=”5”>Fonturi de marime 5.</font><br>

<basefont size=”4”>Fonturi de marime 4.</font><br>

<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 Netscape Communicator ).</font><br>

<font point-size=”50”>Fonturi de marime 50 pt ( numai cu Netscape Communcator ).</font>

</body>

</html>

Grosimea unui font

Grosimea unui caracter poate fi definaita cu ajutorul atributului weight al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800, 900 ( 100 pentru fontul cel mai subtire si 900 pentru cel mai gros ).

<html>

<head>

<title>Grosimea fontului</title>

</head>

<body>

Aceasta linie este scrisa cu caractere normale.<br>

<font weight=”100”>Fonturi cu grosime 100.</font><br>

<font weight=”500”>Fonturi cu grosime 500.</font><br>

<font weight=”900”>Fonturi cu grosime 900.</font>

</body>

</html>

Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele imagine sunt :

GIF (Graphics Interchange Format ) cu extensia .gif;

JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;

XPM (X PixMap) cu extensia .xmp;

XBM (X BitMap) cu extensia .xbm;

BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Cele mai raspandite formate sunt GIF( 8 biti pentru o culoare, 256 culori posibile) si JPEG ( 24 biti pentru o culoare, 16777216 de culori posibile ).

Adresa URL a unei imagini URL ( “Uniform Resourse Locator” = identificator unic al resursei ) este un standard folosit in identificarea unica a unei resurse in Internet.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la “image” = imagine ).

Pentru a putea identifica imaginea care va fi inserata , se utilizeaza un atribut al etichetei <img> si anume src ( de la “source”= sursa ).

Ex :

Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>. Valorile acestor atribute sunt numere intregi positive. O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul creearii ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web.

Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatoarele valori :

“left” - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta;

“right” - aliniere la dreapta; celelalte componente sunt dispuse pe partea stanga;

“top” - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea;

“middle” - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea;

“bottom” – aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.

Alinieri :

Pe verticala :

La mijloc: <img src=”w3.gif” align=”middle”>

Jos: <img src=”w3.gif” align=”bottom”>Text dupa imagine.

Imagini pentru fondul unei pagini

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei< body>, avand ca valoare adresa URL a imaginii.

Imaginea se multiplica pe orizontala si verticala pana umple intregul ecran.

Imagini folosite ca legaturi

O legatura( link) introduce in pagina Web o zona active.

Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina.

Pentru a utilize imaginea “umb 1.jpg” drept legatura catre pagina index.html utilizam sintaxa:

In mod prestabilit imaginea utilizata pe post de activa este inconjurata de un chenar avand culoarea unei legaturi.

Daca stabilim pentru atributul border al etichetei <img> acest chenar dispare.

Tabele

Inserarea Tabelelor

Tabelele ne permit sa creeam o retea dreptunghiulara de domenii, fiecare domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

Pentru a insera un table se folosesc etichetele corespondente <table> . </table>. Un tablel este format din randuri. Pentru a insera un rand intr-un table se folosesc etichetele <tr> . </tr> ( de la “table row”= rand de tabel ); folosirea etichetei de sfarsit </tr> este optionala. Un rand este format din mai multe cellule ce contin date. O celula de date se introduce cu eticheta <td> . </td>.

Chenarul unui tabel

In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tablel, se utilizeaza un atribut al etichetei <tabel> numit “border”. Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) si reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul “border” nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimii semnifica absenta chenarului.

Cand atributul “border”are o valoare nenula chenarul unui table are un aspect tridimensional.

Alinierea tabelului

Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul “align” al etichetei <table>, cu urmatoarele valori posibile : “left” ( valoare prestabilita), “center” si “right”. Alinierea este importanta pentru textul ce inconjoara tabelul.

Astfel :

v daca tabelul este aliniat la stanga ( <table align=”left”> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului;

v daca tabelul este aliniat la dreapta ( <table align=”right”> ), atunci textul care urmeaza dupa punctual de inserare al tabelului va fi dispus in partea stanga a tabelului;

v daca tabelul este aliniat pe centru ( <table align=”center”> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii, imediat sub table.

Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului “bgcolor”, care poate fi atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le poate primi “bgcolor” sunt cele cunoscute pentru o culoare. Daca in tabel sunt definite mai multe atribute “bgcolor”, atunci prioritatea este urmatoarea : <td>, <tr>, <table> ( cu prioritate cea mai mica ).

Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului “cellspacing” al etichetei <table>. Valorile acestui atribut pot fi numere intregi positive, inclusive 0 si reprezinta distanta in pixeli dintre doua celule vecine. Valoarea prestabilita a atributului “cellspacing” este 2.

Distanta dintre marginea unei celule si continutul ei poate definite cu ajutorul atributului “cellpadding” al etichetei <table>. Valorile acestui atribut pot fi numere intregi positive si reprezinta distanta in pixeli dintre celule si continutul ei. Valoarea prestabilita a atributului “cellpadding” este 1.

Titlul unui tabel

Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> ( de la “table caption”= titlu tabel ). Aceasta eticheta trebuie plasata in interiorul etichetelor <table> . </table>, dar nu in interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu ajutorul atributului “align” al etichetei <caption> care poate lua una dintre valorile :

“bottom” ( sub tabel );
“top” ( deasupra tabelului );
“left” ( la stanga tabelului );
“right” ( la dreapta tabelului );

Atributele “frame” si “rules”

Atributul “frame” al eichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate.

Valorile posibile ale acestui atribut sunt :

Void – elimina toate muchiile exterioare ale tabelului;
Above – afiseaza o muchie in partea superioara a cadrului tabelului;
Below – afiseaza o muchie in partea inferioara a cadrului tabelului;
Hsides – afiseaza cate o muchie in partea superioara si inferioara cadrului tabelului;
Lhs – afiseaza o muchie in partea din stanga a cadrului tabelului;
Rhs – afiseaza o muchie in partea din dreapta a cadrului tabelului;
Vsides – afiseaza o muchie in partea din stanga si din dreapta a cadrului tabelului;
Box – afiseaza o muchie pe toate laturile cadrului tabelului;
Border – afiseaza o muchie pe toate laturile cadrului tabelului;

Atributul “rules” al etichetei <table> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt :

None – elimina toate muchiile interioare ale tabelului;
Groups – afiseaza muchii orizontale intre toate grupurile unui tabel. Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot> si <colgroup>;
Rows – afiseaza muchii orizontale intre toate liniile tabelului;
Cols – afiseaza muchii verticale intre toate coloanele tabelului;
All – afiseaza muchii intre toate liniile si coloanele;

<html>

<head>

<title>tabele_ex14</title>

</head>

<body>

<h1 align=center>Atributele frames si rules</h1>

<tr>

</tr>

<tr>

</tr>

</table>

</body></html>

Contact \|- ia legatura cu noi -\|
Adauga document \|- pune-ti documente online -\|
Termeni & conditii de utilizare \|- politica de cookies si de confidentialitate -\|
Copyright © \|- 2024 - Toate drepturile rezervate -\|