Aeronautica	Comunicatii	Drept	Informatica	Nutritie	Sociologie
Tehnica mecanica

Html

Qdidactic » stiinta & tehnica » informatica » html
Limbajul html

Limbajul html

LIMBAJUL HTML

1. Introducere

Hypertext Markup Language (HTML) este un limbaj conceput pentru realizarea paginilor de internet si alte informatii care urmeaza sa fie afisate intr-un browser (navigator) web. HTML este folosit pentru a structura informatia (stabilind titlurile, paragrafele, listele, etc.) si 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 hipertext, fac din el un foarte bun format pentru documentele Internet si Web. HTML permite crearea de documente hypertext pentru paginile web.

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.

Conceput initial de catre Tim Berners-Lee, HTML este astazi un standard international (ISO/IEC 15445:20000).

Sursa documentului HTML este procesata cu ajutorul oricarui editor de texte (ex.: NotePad), si se salveaza sub extensia „.htm” sau „.html”.

Pentru a deosebi informatia text de informatia de control (marcajele sau instructiunile HTML) dintr-un document html sau document web, prin conventie, toate instructiunile html incep cu o paranteza unghiulara deschisa '<' si se termina cu o paranteza unghiulara inchisa '>'. Un astfel de marcaj (instructiune) html se numeste „TAG” si are sintaxa:

<Nume_Tag> Text . . . . . . [</Nume_Tag>]

Tag-urile intre aceste paranteze unghiulare 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.

Astfel, tag-urile pot fi:

- singulare, cand se regaseste numai tag-ul de inceput (<TAG>)

- pereche, reprezentat prin tag de inceput (<TAG>) si tag de sfarsit (</TAG>)

Unele tag-uri detin atribute (parametri) care pot lua anumite valori; in acest caz sintaxa este:

<Nume_Tag Atribut1=”Valoare1” Atribut2=”Valoare2”> Text . . . . . . [</Nume_Tag>]

Atributele scrise intre parantezele drepte [ ] sunt optionale.

Marcajele (instructiunile) html pot fi scrise atat cu litere mici, cat si cu majuscule – in acest caz, pentru a putea fi mai usor deosebite de informatia text din cadrul documentului respectiv. Adica <TAG> = <Tag> = <tag>. Caracterele 'spatiu' ce apare intre etichete (tag-uri) sunt ignorate de catre browser, la fel si orice aliniere sau element de stil din fisierul text initial.

Daca nu se trec marcajele <, >, textele introduse vor fi luate ca texte simple si afisate pe ecran (la fel si pentru instructiunile introduse – acestea nu vor functiona).

Posibilitatile de formatare si tag-urile (instructiunile) folosite in HTML sunt multiple si complexe, de aceea voi prezenta, in continuare, doar ceea ce am folosit eu in constructia site-ului.

2. Structura generala a unui document HTML

Orice document HTML incepe cu tag-ul <HTML> si se termina cu tag-ul </HTML>, deci intreg continutul documentului va fi scris intre cele doua tag-uri.

In interiorul structurii <HTML> . . . . </HTML> se utilizeaza si tag-urile:

<HEAD> . . . . . . </HEAD> ce marcheaza inceput / sfarsit antet document (informatii de

identificare a paginii; utilizeaza tag-ul <TITLE>)

<TITLE> . . . . . . </TITLE> ce marcheaza inceput / sfarsit titlu document

Continutul blocului <TITLE> . . </TITLE> va aparea in bara de titlu a ferestrei browser-ului; daca acest bloc lipseste intr-o pagina HTML, sau daca continutul lui este acelasi cu numele fisierului, atunci in bara de titlu a browser-ului va aparea numele fisierului.

<BODY> . . . . . . </BODY> ce marcheaza inceput / sfarsit corp document (contine

informatiile de prezentat efectiv in pagina).

-Structura generala a unui document HTML-

Luand exemplu crearea primei pagini a site-ului, fisierul „Ghid.html”, sectiunea Title va arata: <TITLE> Ghid</TITLE> , iar in sectiunea Body se completeaza continutul paginii (text, imagini, legaturi, etc.). In bara de titlu a browser-ului va aparea titlul: Ghid.

Tag-urile <HTML></HTML>, <HEAD></HEAD>, <TITLE></TITLE> si <BODY></BODY> vor aparea o singura data in cadrul unui fisier HTML.

3. Aranjarea in pagina si formatarea textului documentelor (paginilor)

Cel mai important element al unei pagini internet este textul. Intr-o forma simpla, acesta poate fi scris efectiv intr-o pagina HTML, si se incadreaza cu tag-uri acolo unde se doreste afisarea lui intr-un anumit mod; caracteristicile dorite vor fi afisate de la locul in care apare tag-ul, pana la inchiderea lui (sau pana la urmatorul tag de acelasi tip, dar cu alte atribute). Daca un tag are mai multe atribute, acestea se separa printr-un spatiu, si nu prin virgula; valoarea fiecarui atribut se exprima cu semnul „=” si intre ghilimele (vezi exemplul de la FONT).

Trecerea pe o linie noua nu se face apasand tasta enter, ci la o comanda explicita, care trebuie sa apara in pagina html. Aceasta este tag-ul <BR> , de la „line break” = intrerupere de linie); este un tag singular, deci nu are tag de sfarsit; intrerupe linia curenta si trece pe urmatoarea, indiferent daca urmeaza text sau imagine.

L-am folosit atat in tabele, pentru alinierea textului cu imaginile, sau pentru a insera randuri libere.

Afisarea mai multor spatii consecutive este posibila folosind de cate ori este nevoie sintagma   (de la « no break space »).

De exemplu, pentru a pune trei spatii intre margine si cuvantul « Inainte », am scris in fisierul HTML astfel:     Inainte (din pagina Ghid).

<HR> traseaza o linie orizontala de separare in pagina.

Blocuri de text

Orice « portiune » de text incadrata de (o pereche de) taguri este un bloc de text.

Tag-urile care desemneaza un bloc de text produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. Aici se incadreaza :

- Paragrafele : tag-ul <P> face trecerea la o linie noua si permite : inserarea unui spatiu suplimentar inainte de blocul paragraf si inserarea unui spatiu suplimentar dupa de blocul paragraf (spre deosebire de tag-ul <BR>), daca se foloseste si tag-ul de inchidere </P> (acesta fiind optional).

- Heading-uri (blocuri de titlu) : tag-urile <H1> . .</H1>, <H2> . .</H2> , . , <H6> . .</H6>, stabilesc dimensiunea caracterelor pentru textul din interiorul tag-ului ; dimensiunea cea mai mica se obtine folosind tag-ul <H6> . .</H6>, iar cea mai mare folosind tag-ul <H1> . .</H1>.

Pentru stabilirea dimensiunii textului se poate folosi si atributul SIZE al tag-ului <FONT>, prezentat mai jos.

- Blocuri Center : blocul introdus de tag-urile <CENTER> . .</CENTER> aliniaza centrat toate elementele pe care le contine.

Fonturi

Un font este definit de perechea de tag-uri <FONT></FONT>, utilizata pentru formatarea modului de afisare a textului si permit inserarea de blocuri de texte personalizate ; fontul este caracterizat de urmatoarele atribute :

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

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

- familia fontului (tipul sau stilul), stabilita prin atributul FACE ;

Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace si fantasy. Pot fi introduse mai multe fonturi separate prin virgula, iar browserul va utiliza primul font pe care il cunoaste; fontul implicit al unei pagini html este Times New Roman.

- marimea fontului, definita prin atributul SIZE ; valorile acestui atribut pot fi :1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare) ; marimea prestabilita a fontului unei pagini html este 3. Reamintesc ca pentru stabilirea dimensiunii textului se pot folosi si tag-urile <H1>,..,<H6>.

- culoarea fontului, stabilita prin atributul COLOR.

O culoare poate fi precizata in doua moduri :

a) 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.

b) Prin constructia ' #rrggbb ' , conform standardului de culoare RGB (Red, Green, Blue), 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.

Sistemul de codificare a culorilor pentru paginile web poate fi explicat astfel :
fiecare culoare este interpretata ca fiind compusa din diverse procente ale culorilor rosu, verde si albastru. Acestea sunt exprimate prin numere in baza 16. Astfel, numarul 00 reprezinta nivelul minim dintr-o anumita culoare iar numarul FF reprezinta nivelul maxim. Acordand ponderi exprimate prin aceste numere in baza 16 culorilor rosu, verde si albastru (Red, Green, Blue - RGB) se poate obtine orice culoare:

<FONT COLOR=#FF0000>	rosu
<FONT COLOR=#00FF00>	verde
<FONT COLOR=#0000FF>	albastru
<FONT COLOR=#FFFF00>	galben
<FONT COLOR=#FF00FF>	mov
<FONT COLOR=#00FFFF>	bleu
<FONT COLOR=#000000>	negru
<FONT COLOR=#FFFFFF>	(alb)

Culorile de mai sus vor fi mai putin 'aprinse' daca in loc de FF se foloseste AA, spre exemplu: #00AA00.

Un exemplu complet pentru tag-ul FONT cu cele 3 atribute (mentionez ca aceste atribute pot fi utilizate separat, adica cate unul, sau simultan – toate - in cadrul tag-ului FONT) ar fi :

<FONT FACE= “Arial, Serif, Monospace“ SIZE=“4“ COLOR=“red“ >Text cu font Arial sau Serif sau Monospace, marime 4, culoare rosie </FONT>

<FONT FACE= “Arial, Serif“ COLOR=“#FF0000“>Text cu font Arial sau Serif, culoare rosie </FONT>

Fundalul si formatarea la nivel de pagina

Formatarile la nivelul intregii pagini (document) se precizeaza prin intermediul unor atribute ale tag-ului <BODY>, astfel :

- atributul BGCOLOR stabileste culoarea fondului unei pagini ;

atributul TEXT stabileste culoarea textului (altul decat legaturile hipertext) unei pagini .

Valorile acestor doua atribute sunt nume de culori definite ca si pentru tag-ul <FONT>.

- atributul LINK stabileste culoarea legaturilor hipertext care nu au fost inca vizitate;

- atributul VLINK stabileste culoarea legaturilor care au fost vizitate;

- atributul ALINK stabileste culoarea temporara a legaturii din momentul activarii acesteia (legaturile active); culoarea implicita este rosu.

- atributele LEFTMARGIN sau RIGHTMARGIN stabilesc distanta dintre marginea stanga /respectiv dreapta a ferestrei browser-ului si marginea stanga / dreapta a continutului paginii;

- atributul TOPMARGIN stabileste distanta dintre marginea de sus ferestrei browser-ului si marginea de sus a continutului paginii;

Un exemplu folosit pentru aceste atribute ar fi :

<BODY BGCOLOR= “Blue“ LINK=“bleu“ VLINK=“purple“ ALINK=“red“ TOPMARGIN=“0“ LEFTMARGIN=“0“ >Pagina cu fundal de culoare albastra, linkuri de culoare albastra (nevizitate), mov (vizitate), rosu (active) ; distanta dintre marginea de sus si cea din stanga a ferestrei, fata de continutul paginii este 0 </BODY>

- atributul BACKGROUND permite specificarea unei imagini ca fond de ecran (fundal de pagina); imaginea trebuie sa fie cat mai simpla si mai putin colorata, pentru o vizualizare usoara a paginii.

Sintaxa generala este : <BODY BACKGROUND='fisier_imagine.JPG (sau .GIF)' >

Exemplu: <BODY BACKGROUND='Argezi_autoportret.JPG'>Pagina avand ca fundal imaginea, Argezi_autoportret din directorul . . . . . </BODY>

Un alt tag folosit pentru formatarile la nivelul intregii pagini este <BASEFONT> cu atributele SIZE (marime), COLOR (culoare) si STYLE (font). Este un tag singular (fara delimitator de sfarsit de bloc. Valorile atributelor sunt aceleasi cu cele mentionate si in cazul tag-ului <FONT >. 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 (size=3, color=black, style=Times New Roman) sau atribute precizate de browserul utilizat.

Am preferat sa folosesc acest tag cu atributul COLOR (mai simplu si evident pentru aratarea unei culori), in locul atributului TEXT din tag-ul <BODY>; in schimb nu am folosit atributul STYLE, preferand utilizarea atributului FACE din tag-ul <FONT> pentru formatatea fontului (stilului).

Exemplu: <BASEFONT SIZE= “4“ COLOR=“RED“ >Pagina cu text de marime 4, culoare rosie

In afara de culoare si imagini, in fundalul unei pagini pot fi incluse si sunete, utilizand tag-ul

<BGSOUND> un tag singular (fara delimitator de sfarsit de bloc) cu atributul SRC, care insereaza fisierul sunet, si atributul LOOP, care arata de cate ori se repeta un sunet si are ca valoare un numar intreg, iar daca valoarea este -1, sunetul va fi repetat pana la inchiderea paginii.

Aceasta facilitate este oferita doar de browser-ul Internet Explorer.

Stiluri pentru blocurile de text – se mai folosesc urmatoarele tag-uri:

- <B></B> - utilizat pentru scrierea textelor bolduite;

- <I></I> - utilizat pentru scrierea textelor cu litere inclinate (italics);

- <U></U> - pentru a scrie text subliniat.

- <BIG></BIG> pentru ca un text sa fie scris cu caractere mai mari cu o unitate decat cele curente;

- <SMALL></SMALL> un text sa fie scris cu caractere mai mici cu o unitate decat cele curente.

- <CITE></CITE> pentru a pune in evidenta fragmente de text, prin stil cursiv (citat).

Desigur, pot exista combinatii intre tag-uri, insa tag-urile trebuie inchise in aceeasi ordine in care au fost deschise.

Un exemplu de combinatii intra tag-ul FONT si tag-urile de subliniare, ingrosare sau inclinare: <FONT COLOR=#FF00FF><B>Text mov, ingrosat</FONT></B>.

4. Legaturi hipertext

Legaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text obisnuit sau o imagine in hipertext sau hiperlegatura, care premite saltul de la o informatie aflata in pagina curenta la alta informatie aflata in aceeasi pagina (legaturi interne), in alta pagina sau fisier de pe acelasi server (legaturi locale) sau in alt server (legaturi externe).
Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea mouse-ului. Textul sau imaginea care declanseaza saltul se numeste text de legatura (sau hot-spot) sau paragraf tinta.

Pentru a realiza o legatura hipertext se utilizeaza tag-ul ancora <A> . .</A> (de la „anchor”, anocora), care include si atribute. Un atribut folosit in toate cele 3 tipuri de legaturi este HREF (Hypertext REFerence), utilizat pentru specificarea URL-ului tinta.

Sintaxa generala este: <A HREF=”localizare text sau document”>text de legatura</A>

Zona activa care devine sensibila la apasarea mouse-ului este textul cuprins intre <A> . .</A>.

Legatura interna – intre elementele aceluiasi document html (catre un anumit punct /paragraf tinta); presupune folosirea simultana a 2 sintaxe (fiecare in locul in care se doreste actionarea ei in pagina):

a) crearea unei ancore in punctul tinta, cu ajutorul atributului NAME; sintaxa este:

<A NAME=”cuvant_cheie”>Paragraf tinta</A>

b) realizarea efectiva a legaturii, cu ajutorul sintaxei:

<A HREF=”#cuvant_cheie”>Paragraf tinta</A>

Cuvantul cheie este un nume atribuit ancorei, care pentru realizarea legaturii (deci doar pentru atributul HREF) trebuie sa fie precedat de caracterul „#”; in aceeasi pagina nu trebuie sa existe doua nume de ancora identice; de exemplu, daca intr-o pagina dorim 3 legaturi interne, cuvintele cheie pot fi: „A1” (de la ancora 1), „A2”, „A3” (am preferat sa le numerotez, pentru a nu ma incurca in ordinea definirii lor, ancorele si legaturile efective nefiind in acelasi loc intr-o pagina; in general, prima ancora, A1, am folosit-o pentru revenirea de la sfarsitul unui tabelului din paginile poetilor, la inceputul paginii).

Ordinea celor 2 sintaxe de mai sus (punct tinta, apoi legatura) am aplicat-o pentru reveniri – care nu au paragraf tinta, ci efectiv un punct tinta (pe ecran nu va aparea text scris aici) - adica mai intai am definit punctul tinta, locul unde sa se revina, apoi am creat efectiv legatura (HREF).

Exemplu pentru definirea revenirii de la sfarsitul paginii, intr-un punct tinta aflat la inceputul pag.:

<A NAME=”A1”> </A> (se scrie undeva la inceputul paginii, dupa <BODY>; pe ecran

nu apare text)

. (corp document) . .

<A HREF=”#A1”> <CENTER> Revenire </A> </CENTER> ( scris la sfarsitul tabelului; cuvantul de legatura „Revenire ” va aparea pe ecran, subliniat, ca orice legatura, si centrat (orizontal) in pagina, datorita tag-ului <CENTER> ).

Pentru legatura dintre un text (text de legatura) si un paragraf (paragraf tinta) ordinea celor 2 sintaxe este inversa: intai se defineste legatura (HREF), apoi punctul tinta, care este un paragraf.

Legatura locala – intre documente html aflate pe acelasi server; presupune folosirea sintaxei:

<A HREF=”nume_fisierLocal.html”>text de legatura</A>

Daca 2 documente html (pagini) se afla in acelasi director (folder), in numele fisierului (al paginii) nu trebuie precizat si numele directorului; legatura va contine in pagina 1, numele paginii 2, iar in pagina 2, numele paginii 1.

Daca 2 documente html (pagini) se afla in directoare diferite, in numele fisierului (al paginii) trebuie precizat si numele directorului sursa (=”Nume_folder/nume_fisierLocal.html”).

O legatura catre un fisier oarecare, de orice tip, aflat pe acelasi server se poate face ca si in cazul paginilor html, doar ca difera extensia, care depinde de tipul fisierului:

<A HREF=”[Folder/]nume_fisierLocal.ext”>text de legatura</A>

Atunci cand se efectueaza clic pe legatura creata browserul deschide o caseta de dialog File download, care permite salvarea pe discul local, sau deschiderea fisierului.

In acelasi mod se pot crea si legaturi catre fisiere de sunet sau fisiere videoclipuri, doar ca difera extensia; pentru fisierele audio extensiile pot fi: .au, .aiff sau .aif, .wav, .mpeg2, .mid sau .midi, .wma, .ogg.

Legatura externa – catre un document aflat pe alt server; presupune folosirea sintaxei:

<A HREF=”https://www.numeAdresa”>text de legatura</A> (se poate si fara https://)

Intr-o pagina Web se pot afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor electronice. Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet mailto: urmat de o adresa e-mail valida, astfel:

<A HREF=”mailto:adresaE-mail”>text de legatura</A>

Pentru ca aceasta sa functioneze, pe calculator trebuie sa fie instalata o aplicatie de expediere a mesajelor electronice (Outlook Express), adresa sa fie valida si calculatorul conectat la Internet.

5. Liste

Sunt de trei tipuri: liste cu definitii, liste neordonate si liste ordonate; toate incep pe o linie noua si sunt indentate (aliniate in interior) fata de restul paginii web; numarul termenilor din lista este nelimitat.

Liste cu definitii

<DL>

<DT>Termen de definit 1

<DD>Definitia termenului 1

<DT>Termen de definit 2

<DD>Definitia termenului 2

. .

</DL>

Liste neordonate

O lista neordonata este un bloc de text delimitat de etichetele corespondente <UL></UL> (de la 'unordered list' = lista neordonata). Fiecare element al listei este initiat de eticheta <LI> (list item); sintaxa generala:

<UL Type=”t”>

<LI>Text 1

<LI>Text 2

. .

</UL>

Listele neordonate pot fi si imbricate pe mai multe nivele (lista in lista)

Liste ordonate

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente

<OL></OL> (de la 'ordered list'= lista ordonata). Fiecare element al listei este initiat de eticheta <LI> (list item); sintaxa generala:

<OL Type=”t” Start=”s”>

<LI>Text 1

<LI>Text 2

. .

</OL>

Utilizari speciale ale listelor

Daca intr-o lista, in loc de elementele acesteia introduse prin <LI>, se insereaza un bloc de text, acesta va fi indentat (intocmai ca elementele unei liste).

6. Imagini incluse in pagina

Imaginile pot fi:

- inserate direct in documentul web; pentru a putea fi afisate, trebuie sa fie salvate in unul din formatele acceptate de browsere, cele mai raspandite fiind GIF si JPEG (sau JPG);

- imagini incarcate si afisate la cererea utilizatorului, prin tag-ul <A> (imagini – punct de legatura).

Pentru a insera o imagine in pagina se utilizeaza eticheta <IMG> (de la 'image'=imagine).
Pentru a putea fi identificata imaginea care va fi inserata, se utilizeaza un atribut al tag-ului <img>: SRC (de la 'source'=sursa); tag-ul <IMG> are si alte atribute care permit formatarea imaginii.
Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia; daca se afla in alt director, adresa imaginii va contine si numele directorului (folderului).

Sintaxa generala pentru imaginile inserate direct in pagina, este:

<IMG SRC=”[NumeFolder/]nume_imagine.jpg ALIGN=”a” WIDTH=”x” HEIGHT=y” BORDER=”n1” HSPACE=”n2” VSPACE=”n3” ALT=”text”>

In afara de atributul SRC, celelalte atribute ale tag-ului <IMG> sunt optionale si permit formatarea textului, astfel:

- ALIGN permite alinierea imaginii in pagina, fata de textul care o precede; valorile pe care le poate lua sunt: „left” (stanga), „right” (dreapta), „top” (sus), „middle” (mijloc), „bottom” (jos).

- WIDTH si HEIGHT stabilesc dimensiunile pe orizontala si pe verticala (latimea si inaltimea) care se doresc afisate pentru o imagine, daca nu se doreste respectarea dimensiunilor imaginii create; valorile celor doua atribute se exprima in pixeli sau procente.

- BORDER adauga un chenar in jurul imaginii, iar valoarea este un numar intreg pozitiv;

- HSPACE si VSPACE precizeaza distanta in pixeli pe orizontala, respectiv pe verticala, dintre imagine si restul elementelor din pagina (adica, alinierea textului in jurul imaginii);

- ALT (alt =alternativa) admite ca valoare un text care va fi afisat pe imagine, sub forma unei etichete, in momentul deplasarii mouse-ului pe imagine.

Pentru separarea textului de imagine, se poate folosi si tag-ul <BR>, care determina trecerea pe un rand nou a imaginii, fata de textul care o precede.

TABELE

Tabelele ne permit sa cream o retea dreptunghiulara de domenii (celule), fiecare avand propriile optiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc tag-urile <TABLE></TABLE>. Un tabel este format din randuri. Pentru a insera un rand intr-un tabel se folosesc tag-urile <TR></TR> ( de la ' table row '= rand de tabel ). Un rand este format din mai multe celule ce contin date. O celula se introduce cu tag-urile <TD></TD>; daca intre aceste doua tag-uri nu este nicio informatie, celula este vida.

O celula poate contine: text, liste, imagini, legaturi hipertext, sau elemente ale unui formular.

Un tabel poate avea celule cu semnificatia de cap de tabel (antet); acestea sunt introduse de tag-urile <TH></TH> (de la „tabel header”=cap de tabel). <TH> are aceleasi atribute ca si <TD>, iar textul din <TH> este automat centrat si bolduit. <TH> este un tag optional.

Unui tabel i se poate atasa, optional, un titlu cu ajutorul tag-ului <CAPTION> . </CAPTION>.

Sintaxa generala pentru crearea unui tabel este:

<TABLE ALIGN=”a” BORDER=”n1” CELLPADING=”n2” CELLSPACING=”n3” WIDTH=”n%” BGCOLOR=”culoare” BORDERCOLOR=”culoare”>

[ <CAPTION ALIGN =”top”/”bottom”> . ..(titlul tabelului) . </CAPTION> ]

<TR ALIGN=”right”/”left”/”center” VALIGN=”top”/”bottom”/”middle”

[BGCOLOR=”culoare”] >

[<TH ALIGN=”a1” VALIGN=”a2” COLSPAN=”n1” rowspan='”n2”'

[BGCOLOR=”culoare”]> . (numele antetului) . </TH> ]

</TR>

<TR ALIGN=”right”/”left”/”center” VALIGN=”top”/”bottom”/”middle”

[BGCOLOR=”culoare”] >

<TD ALIGN=”a1” VALIGN=”a2” COLSPAN=”n1” rowspan='”n2”'

[BGCOLOR=”culoare”]> . (numele celulei) . </TD>

<TD ALIGN=”a1” VALIGN=”a2” COLSPAN=”n1” rowspan='”n2”'

[BGCOLOR=”culoare”]> . (numele celulei) . </TD>

. . .

</TR>

. . .

</TABLE>

Semnificatia atributelor este urmatoarea:

Pentru tag-ul <TABLE>

- ALIGN permite alinierea tabelului in pagina; valori posibile: „left” (stanga) – prestabilit; „center” si „right” (dreapta).

- BORDER adauga un chenar unui tabel; valoare poate fi un numar intreg (inclusiv 0, cand chenarul va lipsi) care semnifica grosimea in pixeli a chenarului, 1 fiind valoarea prestabilita.

- CELLPADING stabileste spatiul din jurul textului unei celule (distanta dintre marginea unei celule si continutul ei; ia valori intregi pozitive (inclusiv 0), valoarea prestabilita fiind 1.

- CELLSPACING stabileste spatiul intre celule (distanta dintre doua celule vecine); ia valori intregi pozitive, inclusiv 0, valoarea prestabilita fiind 1.

- WIDTH arata in procente cat la suta din suprafata ferestrei ocupa tabelul (in latime).

- BGCOLOR stabileste culoarea de fond pentru tabel.

- BORDERCOLOR stabileste culoarea pentru chenarul unui tabel; functioneaza doar cu Internet Explorer.

Pentru tag-ul <TR>

- ALIGN si VALIGN stabilesc alinierea pe orizontala, respectiv pe verticala a textului din rand.

- BGCOLOR stabileste culoarea de fond pentru rand.

Pentru tag-urile <TD> si <TH>

- ALIGN si VALIGN stabilesc alinierea pe orizontala, respectiv pe verticala a textului din celula.

- COLSPAN extinde o celula peste celulele din dreapta ei (uneste coloane); valoarea este egala cu numarul de celule care se unifica.

- ROWSPAN extinde o celula peste celulele de dedesubtul ei (uneste randuri); valoarea este egala cu numarul de celule care se unifica.

Presupunand ca avem un tabel cu doua randuri si trei celule, utilizarea atributului COLSPAN=3 in prima celula a celui de-al doilea rand, spune ca celula respectiva se 'intinde' pe lungimea a 3 celule din structura normala a tabelului. Desigur, acest al doilea rand va contine numai o singura celula, nu trei. Similar se poate proiecta un tabel cu o celula care se intinde pe verticala pe spatiul a doua celule, folosind atributul rowspan='2' in a treia celula a primului rand al tabelului. Acesta spune ca aceasta celula se intinde pe verticala pe 'inaltimea' a doua randuri. Desigur, cel de-al doilea rand contine numai doua celule (nu trei), intrucat a treia vine din randul de sus.

- BGCOLOR stabileste culoarea de fond pentru o celula.

Toate celulele unui rand mostenesc valorile atributelor definite in tag-ul rand <TR>, cu exceptia cazului cand acestea se redefinesc diferit prin tag-ul <TD>, devenind astfel prioritar.

Dimensionarea celulelor unui tabel se face automat la lungimea maxima a textului din celule. Daca textul introdus este mai lung de 64 de caractere, navigatorul il imparte automat in mai multe randuri. Daca se doreste trecerea la un rand nou inainte de aceasta, se foloseste tag-ul <BR>.

In site-ul creat, tabelul principal (care contine „meniurile”, deci legaturile catre celelalte pagini) este definit astfel (-exemplu din pagina Poluareai.html-):
<TABLE BORDER=” table width table height '>

</TABLE>

Exemple complete de tabele se pot vedea in sursele oricarei pagini, incepand cu pagina acasa..

Introducerea unui video de pe YouTube:

Acest lucru se face foarte simplu, youtube avand pe pagina fiecarui video codul HTML corespunzator.

<! -- Aici incepe codul Youtube -->

value='https://www.youtube.com/

v/UAq8qHNWMNw&hl=en&fs=1'>

</param><param name='allowFullScreen' value='true'>

</param> <embed src='https://www.youtube.com/

v/UAq8qHNWMNw&hl=en&fs=1' type='application/x-shockwave-flash' allowfullscreen='true' width='425'

height='344'></embed></object>

<! -- Aici se termina codul Youtube -->

Adevarul este ca ai dreptate e cam haotic tot ce vezi, dar partea buna este ca nu trebuie sa il faci tu ci doar sa il copiezi de pe pagina youtube, si vei avea ca rezultat reprezentarea de mai jos, sau una asemanatoare in cazul in care alegi alt video.

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 -\|