Scribd Logo

Limbă

Aflați mai multe
ÎncărcațiCitiți gratuit pentru 30 zile

Bine ați venit la Scribd!

Elemente generale ale limbajului HTML

Încărcat de

spy2o
3 vizualizări7 pagini

Descriere:

Drepturi de autor:

Attribution Non-Commercial (BY-NC)
Descărcați ca PDF, TXT sau citiți online pe Scribd
Indicator pentru conținut neadecvat
3 vizualizări7 pagini

Elemente generale ale limbajului HTML

Încărcat de

spy2o

Descriere:

Drepturi de autor:

Attribution Non-Commercial (BY-NC)
Descărcați ca PDF, TXT sau citiți online pe Scribd
Indicator pentru conținut neadecvat

Titluri conexe

din 7

1

Elemente generale ale limbajului HTML


Limbajul HTML include o diversitate de marcatori (tag-uri sau etichete) sub forma : <Nume_Tag>.</Nume_Tag> TAG-ul este un identificator care furnizeaza browser-ului instructiuni de formatare a documentului. Tag-urile pot fi : singulare cand se gaseste numai la incepu (< >) pereche reprezentat prin tag de inceput (< >) si tag de sfarsit (</ >) OBSERVAIE : Unele TAG-uri contin parametri (atribute) care pot lua diverse valori. Structura unui document HTML este urmatoarea : NOTA : Toate informatiile HTML incep cu o paranteza unghiulara deschisa (<) si se termina cu o paranteza unghiulara inchisa (>).

<HTML> - inceput document HTML <HEAD> - inceput antet document .. < /HEAD> - sfarsit antet document <BODY> - inceput corp document </BODY> - sfarsit corp document </HTML> - sfarsit document HTML
ANTETUL documentului se regaseste reprezentat intre TAG-urile : <HEAD> .. </HEAD> <TITLE> . </TITLE> pentru a specifica titlul documentului; CORPUL documentului se gaseste reprezentat intre TAG-urile : <BODY> .. </BODY> contine esenta documentului HTML. OBSERVAIE : Pentru a putea personaliza continutul corpului de document vom folosi parametrii ATRIBUTE care pot lua diverse valori alfanumerice. Atribute : BACKGROUND=URL sir de caractere care indica adresa WEB a unei imagini ; BGCOLOR=culoare stabileste culoarea de fundal; TEXT=culoare stabileste culoarea textului; LINK=culoare stabileste culoarea pentru link-urile nevizitate; VLINK=culoare stabileste culoarea pentru link-urile vizitate; ALINK=culoare stabileste culoarea pentru link-ul activ; LANG=cod_limba stabileste limba de redactat (exe. en engleza). OBSERVAIE : Putem introduce in corpul unui document HTML si comentarii, folosind TAG-ul <! ->. Acest TAG se poate insera oriunde in document iar comentariul nu va fi afisat!

2
Formatarea paragrafelor Delimitarea paragrafelor se face folosind perechea de TAG-uri : <P> </P> OBSERVAIE : TAG-ul de sfarsit </P> nu este obligatoriu sa fie inserat; deci, daca dorim sa incepem un paragraf, vom insera TAG-ul <P>, dupa care vom edita continutul acestuia. Atribute : ALIGN=LEFT / CENTER / RIGHT / JUSTIFY realizeaza alinierea paragrafului, iar ca valoare putem avea left/center/right/justify; Utilizarea paragrafelor de titlu Se foloseste perechea de TAG-uri : <Hi> .. </Hi> i = 1,2,3,4,5,6 valori pentru definirea nivelului paragrafului titlu in structura documentului. Valoarea 1 este corespunzatoare unui nivel mare, valoarea 6 este corespunzatoare unui nivel mic. Atribute : ALIGN Formatarea la nivel de caracter Se foloseste perechea de TAG-uri : <FONT> .. </FONT> Atribute : SIZE=valoare stabileste valoarea fontului, mai exact 1,2,3,4,5,6,7,+n,-n ; OBSERVAIE : Valoarea implicita, care se obtine in cazul in care nu specifica o valoare anume, este 3. COLOR=culoare stabileste culoarea textului; FACE=lista_fonturi stabileste lista de fonturi separate prin virgula Aplicarea unor efecte asupra textului Pentru a aplica unei zone de text un anumit efect, se incadreaza textul intre TAG-ul de inceput si cel de sfarsit, corespunzatoare efectului respectiv. Astfel, avem : <I> .. </I> - stabileste stilul italic (inclinat) ; <B> .. </B> - stabileste stilul bold (ingrosat); <U> .. </U> - stabileste stilul underline (subliniat);

LISTELE
Listele pot fi, la randul lor, de trei tipuri : liste ordonate, liste neordonate si liste de definitii. Listele ordonate au forma generala a tag-ului :

<OL TYPE=t START=s> <Li> text1 <Li> text2 </OL>


o Atributul TYPE defineste modul de numerotare a elementelor listei in care t poate lua urmatoarele valori : 1 pentru cifre ; A pentru caractere alfabetice majuscule ; a

3
o caractere alfabetice minuscule ; I pentru numerotare cu cifre romane mari ; i numerotare cu cifre romane mici. Atributul START defineste prin valoarea s valoarea de inceput. Listele neordonate au forma generala a tag-ului :

<UL TYPE=t> <LI> text 1 <LI> text 2 . </UL>


o Atributul TYPE defineste semnul care va precede elementele listei si poate lua urmatoarele valori : SQUARE patrat; CIRCLE cerc vid; DISC cerc plin. Listele cu definitii au forma generala a tag-ului :

<DL> <DT> termen de definit1 <DD> definire termen1 <DT> termen de definit2 <DD> definire termen2
..

</DL>
Legturi hipertext
Legaturile hipertext permit vizualizarea unor fisiere (obiecte), prin executarea unui clic de mouse pe un cuvant, fraza sau imagine. Legaturile se pot realiza : intern in cadrul aceluiasi document; local catre un document aflat pe acelasi server. extern catre un document aflat pe un alt server. Elemente TAG-uri de legatura : A creeaza o legatura catre o resursa intr-un document ; <A> .. </A> ancora (anchor), TAG-ul care stabileste o legatura, o ancorare. Atribute : HREF=URL (Hypertext Reference) specifica adresa URL-ului, adica a resursei la care se face legatura. Legatura intern se realizeaza intre campurile/elementele aceluiasi document sau catre un anumit punct tinta al altui document. Aceasta presupune : crearea unei ancore in punctul tinta : <A NAME=cuvant_cheie>Inapoi</A> realizarea unei legaturi efective, prin care se specifica fisierul/ancora unde se realizeaza legatura : <A HREF=#cuvant cheie> CLICK</A>

4
se fixeaza ancora "cuvant cheie" intr-un spatiu al documentului, dupa care, la efectuarea unui click de mouse pe cuvantul CLICK, se realizeaza legatura/revenirea la zona in care a fost inserata ancora vida "cuvant cheie".

Legatura local se realizeaza intre campurile/elementele a doua documente HTML, aflate pe acelasi server. Foloseste atributul HREF=URL pentru a specifica adresa locala (calea) si numele documentului la care se face lagatura. < A HREF=[cale]/Fisier2.html>CLICK</A> La executarea unui click de mouse pe cuvantul CLICK, se va face legatura cu fisierul "Fisier2.html". Legatura extern se realizeaza intre campurile/elementele a doua documente HTML, aflate pe servere diferite. Foloseste atributul HREF=URL pentru a specifica adresa externa si numele documentului la care se face lagatura. < A HREF=http://stec.utm.ro/studenti/grup5/Fisier2.html>CLICK</A> La executarea unui click de mouse pe cuvantul CLICK, se va face legatura cu fisierul "Fisier2.html", care se gaseste la adresa de web specificata.

Inserarea imaginilor in documente HTML


<IMG> - TAG-ul care are rolul de a insera o imagine intr-un document HTML Atribute : SRC=URL specifica adresa fisierului care contine imaginea. Fisierul imagine poate fi de tipul (adica poarta extensia): o JPEG : Joint Photographic Experts Group o GIF : Graphic Interchange Format ALT=text specifica un text alternativ care va fi afisat, in cazul in care imaginile nu pot fi vizualizate. HEIGHT=dimensiune defineste inaltimea imaginii de inserat WIDTH=dimensiune defineste latimea imaginii de inserat OBSERVAIE : Dimensiunile se pot exprima atat in numar de pixeli, cat si in procente. In cazul in care dimensiunile sunt exprimate in procente, procentajul se refera la spatial disponibil pe orizontala sau pe verticala si nu la dimensiunile originale ale imaginii. ALIGN=valoare specifica modul de aliniere in raport cu textul TOP MIDDLE BOTTOM LEFT RIGHT

Inserarea unei legaturi pe o imagine


TAG-ul <IMG> se foloseste drept continut al TAG-ului ancora <A>. Astfel se insereaza in document o legatura pe imagine. Mai exact, la efectuarea unui click de mouse pe imagine va fi accesat fisierul de destinatie (specificat prin atributul HREF). Exemplu : <A HREF= "Fisier2.html"><IMG SRC="desen.bmp"></A>

5
Formulare
<FORM> .. </FORM> Se folosesc pentru crearea de pagini Web interactive. Un formular este construit din elemente speciale, denumite elemente de control (butoane radio, butoane de validare, campuri text, meniuri etc.). Astfel, folosind aceste elemente de control, se pot transmite informatii catre server-ul care gazduieste pagina Web respectiva.

Transmiterea datelor introduse intr-un formular


<FORM> .. </FORM> Atribute ACTION = URL specifica adresa programului CGI (Common Gateway Interface) METHOD = GET/POST stabileste modalitatea in care sunt transmise informatiile respective catre server POST informatiile introduse, memorate sub forma perechilor (nume_camp, valoare), sunt incluse in corpul formularului si transmise catre programul CGI care va realiza prelucrea lor. GET informatiile introduse sunt atasata adresei URL care specifica programul ce va realiza prelucrarea lor, separate prin ?, apoi acest nou URL este transmis catre programul CGI de prelucrare a informatiilor. Elemente de control 1. Butoane de comanda <BUTTON> .. </BUTTON> <INPUT> Pot fi butoane de comanda de tip : SUBMIT cand este activat acest buton, se transmit informatiile inscrise in formular catre un server RESET cand este activat acest buton, toate datele inscrise in formular se pierd, campurile formularului fiind completate cu valorile lor initiale (nu se transmite nici o informatie) PUSH cand este activat acest buton, se executa o actiune specificata 2. Butoane de validare <INPUT> .. Acest tip de butoane permite selectarea sau nu a unor optiuni din formular, prin activarea sau dezactivarea unor butoane. OBSERVAIE : Selectia se face fara excludere, deci putem alege din lista de optiuni a formularului cate valori dorim. 3. Butoane radio <INPUT> .. Acest tip de butoane permite selectarea unei singure optiuni din formular, prin activarea selectiva a unui singur buton. OBSERVAIE : Selectia se face cu excludere, deci putem alege din lista de optiuni a formularului doar o singura valoare. 4. Meniuri Prezinta o lista de optiuni. <SELECT> <OPTION> ..</OPTION> <OPTGROUP> </OPTGROUP> </SELECT>

6
5. Campuri text <INPUT> .. pentru text format dintr-o singura linie <TEXTAREA> ..</TEXTAREA> pentru text format din mai multe linii Permit introducerea unui text format dintr-o singura linie sau mai multe linii. 6. Elemente de control ascunse <INPUT> .. Acest tip de elemente nu se pot vizualiza, dar permit transmiterea unor informatii utile, in acelasi timp cu transmiterea informatiilor scrise in formular. INPUT permite inserarea elementelor de control Atribute NAME = sir_de_caractere asociaza elementului de control un nume VALUE = sir_de_caractere specifica valoarea initiala a elementului de control - este un atribut optional - nu se foloseste pentru butoanele de tip radio ; SIZE = valoare specifica dimensiunea initiala a elementului de comanda - dimensiunea este specificata in pixeli (pentru campuri de tip Image) sau in numar de caractere (pentru campuri de tip Text, File, Password) MAXLENGHT = valoare specifica numarul maxim de caractere care se pot introduce (pentru campuri de tip Text, Password) CHECKED specifica faptul ca elementul de control respectiv este activat (pentru butoane de tip Radio, Checkbox) SRC = URL specifica adresa fisierului care contine imaginea ce reprezinta butonul utilizat din elementul de comanda ( pentru campuri de tip Image) TYPE = TEXT/RADIO/CHECKBOX/PASSWORD/SUBMIT/RESET/BUTTON/ IMAGE/ FILE/HIDDEN - specifica tipul elementului de comanda creat; EXEMPLE : - pentru TYPE=text <INPUT TYPE=text NAME=nume> - pentru TYPE=radio <INPUT TYPE=Radio VALUE=Da> <INPUT TYPE=Radio VALUE=Nu CHECKED> - pentru TYPE=Checkbox (permite introducerea butoanelor de validare) <INPUT TYPE=Checkbox VALUE=a CHECKED> .. <INPUT TYPE=Checkbox VALUE=b> .. - pentru TYPE=Password (permite inserarea unui camp de introducere a parolei) .. <INPUT TYPE=text NAME=user> .. <INPUT TYPE=Password NAME=parola> - pentru TYPE=Submit/Reset/Button (permit inserarea butoanelor de comanda, de tip Submit/Reset/Push) <INPUT TYPE=Submit VALUE=OK> <INPUT TYPE=Reset VALUE=Renunt> <INPUT TYPE=Button VALUE=Help> - pentru TYPE=Image (permite folosirea unei imagini pentru butonul de tip Submit) .. <INPUT TYPE=Image VALUE=OK SRC=desen.bmp ALIGN=Middle HEIGHT=50 WIDTH=50> - pentru TYPE=File (permite specificarea unui fisier ce va fi transmis prin intermediul formularului) <INPUT TYPE=File VALUE=fisier.html SIZE=40>

7
SELECT permite inserarea intr-un formular a meniurilor <SELECT> ..</SELECT> Atribute NAME = sir_de_caractere asociaza un nume elementului de comanda SIZE = valoare specifica numarul de optiuni vizibile in fereastra derulanta in care e vizualizat meniul MULTIPLE permite selectarea mai multor optiune din meniu OPTION se foloseste impreuna cu TAG-ul SELECT si are rolul de a permite introducerea optiunilor din care este constituit meniul Atribute SELECTED indica faptul ca initial aceasta optiune este selectata VALUE = sir_de_caractere specifica valoarea initiala a elementului de comanda LABEL = sir_de_caractere specifica o denumire mai scurta decat continutul acesteia (eticheta) pentru aceasta optiune EXEMPLE : <SELECT SIZE=3 NAME=Discipline> <OPTION VALUE=Matematica>Matematica</OPTION> <OPTION SELECTED VALUE=Informatica>Informatica</OPTION> <OPTION>Finante</OPTION> <OPTION>Geografie</OPTION> <OPTION>Contabilitate</OPTION> </SELECT> TEXTAREA permite inserarea unui camp text construit din mai multe linii Atribute ROWS = numar_de_linii specifica numarul de linii vizibile COLS = numar_de_caractere specifica numarul maxim de caractere pe o linie OBSERVAIE : Daca textul depaseste 5 linii pe verticala sau 40 de caractere pe orizontala, dupa caz campul text va fi prevazut cu o bara de defilare pe verticala, respectiv pe orizontala. EXEMPLE : <TEXTAREA NAME=Important ROWS=5 COLS=40> </TEXTAREA>

Mai multe de la spy2o

Evaluare

Partajare