QReferate - referate pentru educatia ta.
Cercetarile noastre - sursa ta de inspiratie! Te ajutam gratuit, documente cu imagini si grafice. Fiecare document sau comentariu il poti downloada rapid si il poti folosi pentru temele tale de acasa.



AdministratieAlimentatieArta culturaAsistenta socialaAstronomie
BiologieChimieComunicareConstructiiCosmetica
DesenDiverseDreptEconomieEngleza
FilozofieFizicaFrancezaGeografieGermana
InformaticaIstorieLatinaManagementMarketing
MatematicaMecanicaMedicinaPedagogiePsihologie
RomanaStiinte politiceTransporturiTurism
Esti aici: Qreferat » Documente informatica

Introducere in HTML



Cuprins:   Introducere

Aranjarea in pagina

Liste

Tabele

Imagini

Legaturi

Formulare

Metainformatii



Cascading Style Sheets

Cadre

DHTML



Introducere in HTML

   HTML-ul  (HyperText Markup Language) este limbajul de marcare al hipertextului.

Crearea paginilor web se poate face in trei moduri:

. cu ajutorul editoarelor de text (NotePad, Word). Aceasta metoda este   destul de rudimentara, insa ofera un foarte mare control asupra paginilor   create
. cu ajutorul editoarelor HTML, care sunt de fapt editoare de text cu anumite   imbunatatiri precum: introducerea automata   a etichetelor, a culorilor,   verificarea sintaxei HTML, etc
. prin intermediul editoarelor WYSIWYG (What You See Is What You Get)   precum Microsoft FrontPage, Macromedia   Dreamweaver, Claris HomePage.   Aceste editoare sunt grafice in totalitate, insa ofera mai putin control asupra   codului   generat

   HTML-ul foloseste o mare diversitate de tag-uri (marcatori sau etichete). Tag-urile pot fi:

. singulare - cand se regaseste numai tagul de inceput (<br>)
. pereche sau de tip bloc - reprezentat printr-un tag de inceput (<HTML>) si   unul de sfarsit (</HTML>)

   Strucura documentelor HTML

   Orice document HTML contine un antet si un corp. Se folosesc urmatoarele etichete intr-un document HTML:

<HTML> - marcheaza inceputul si sfarsitul documentului
<HEAD> - marcheaza inceputul/sfarsitul antetului
<TITLE> - marcheaza inceputul/sfarsitul titlului documnetului
<BODY> - marcheaza inceputul/sfarsitul documentului propriu-zis


Aranjarea in pagina

<Hi> <Hi> - stabileste dimensiunea caracterelor pentru textul continut in interiorul tag-urilor ( i = 1, 2, 3, 4, 5, 6). Cea mai mica dimensiune se obtine pentru i = 6, iar cea mai mare pentru i = 1.

<EM> </EM> - scoate in evidenta textul din interiorul tag-urilor (emphasis).
<STRONG> </STRONG> - scoate mai puternic in evidenta textul
<ADDRESS> </ADDRESS> - textul dintre aceste tag-uri specifica o adresa postala, o adresa e-mail sau un numar de telefon.

<B> </B> - textul devine 'bold' (ingrosat)
<I> </I> - textul devine italic
<TT> </TT> - textul devine monospatiat
<BR> - realizeaza trecerea la un nou rand
<P> - trece la paragraful urmator, lasand insa si un rand liber ca separator de paragrafe
<! .> - arata ca ceea ce este in locul punctelor reprezinta un comentariu, fiind ignorat de browser

<HR> - are rolul de a trasa o linie orizontala, cu atributele: 
 . SIZE: grosimea liniei (in pixeli sau procente)
 . WIDTH: lungimea liniei (in pixeli sau procente)
 . ALIGN: alinierea liniei (left/right/center)
 . NOSHADE : linia va fi fara umbra
 . COLOR: culoarea liniei

<DIV> - creeaza un bloc

Atributul acestui tag este ALIGN, cu valorile left/right/center, atribut ce specifica alinierea textului

<PRE> - browserul va tine cont in acest caz de caracterele 'spatiu' si 'tab' care apar in cadrul textului si astfel va duce la afisarea intocmai a continutului unui bloc de text din fisierul sursa.
Singurul atribut al tag-ului este WIDTH (latimea blocului exprimata in pixeli sau procente)

<FONT> cu atributele:
  . SIZE: stabileste dimensiunea caracterelor, putand lua valori intre 1 si 7. Daca valoarea atributului este precedata de semnul '+', atunci aceasta reprezinta cresterea in raport cu dimensiunea curenta a caracterelor. Aceeasi semnificatie o are si semnul '-', semnificand scaderea fata de dimensiunea curenta
  . COLOR: stabileste culoarea caracterelor dupa modelul RGB (red-green-blue): rrggbb; rr - rosu, gg - verde , bb - blue, rr, gg si bb fiind valori hexazecimale. Valoarea 00 da o intensitate minima, iar FF o intensitate maxima.
  . FACE: permite stabilirea tipului de font, care trebuie sa fie instalat pe calculatorul clientului

<CENTER> </CENTER> - centreaza pe orizontala ceea ce este cuprins intre aceste etichete
<BODY> cu atributele:
 . BGCOLOR: seteaza culoarea de fundal
 . LINK , VLINK si ALINK: seteaza culoarea legaturilor care nu au fost vizitate, a celor vizitate si respectiv a celor active (culoarea temporara a legaturii in momentul activarii ei)
 . TEXT: specifica culoarea textului

Culoarea de fond sau cea a textului se poate seta in doua moduri:

1. Prin precizarea numelui unei culori.

2. Folosindu-se modelul de culoare RGB (Red Green Blue) - sub forma '#rrggbb', unde rr, gg, bb sunt cifre hexazecimale care 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. In acest mod se pot defini 65.536 de culori. Conform acestui model, o culoare se obtine din amestecul a trei culori de baza: rosu, verde si albastru.

Ex: <BODY BGCOLOR='yellow'> sau <BODY BGCOLOR='999900'>

  <BODY BACKGROUND = xxx.gif> - in acest mod se poate folosi in locul culorii de fundal o imagine.

Stiluri pentru blocurile de text

<B>..</B> (bold) - textul din cadrul acestui bloc devine ingrosat
<BIG></BIG> - textul va fi scris caractere mai mari cu o unitate decat cele curente
<SMALL>.</SMALL> - textul va fi scris cu caractere mai mici cu o unitate decat cele curente
<I>.</I> (italic) - textul va fi scris cu caractere cursive
<SUB></SUB> - caracterele din cadrul acestui bloc vor fi afisate in browser ca indice
<SUP>.</SUP> - textul cuprins intre aceste etichete va fi afisat ca exponent
<U>..</U> (underline) - textul devine subliniat
<S> .</S> (strike) - textul devine taiat la mijloc cu o linie orizontala
Stilurile de mai sus sunt toate stiluri fizice. Acest lucru se datoreaza faptului ca nu s-a acordat nici o semnificatie informatiei continute de aceste blocuri.

Stilurile logice sunt cele ce tin cont de semnificatia pe care o are blocul in cadrul paginii Web:
<CITE></CITE> (citat)
<EM></EM> (emphasize)
Ambele stiluri scot in evidenta un text, atribuindu-se acestuia stilul cursiv.
<CODE><CODE> (cod sursa)
<TT>..<TT> (teletype)
<KBD>..</KBD> (keyboard)
Folosirea acestor etichete va conduce la acelasi rezultat: textul va fi scris cu caractere monospatiate.
<BLINK></BLINK> - textul va clipi (insa numai in Netsape Navigator, nu si in Internet Explorer)
<Q></Q> (quote) - permite introducerea citatelor in cadrul textului. Textul din interiorul acestor tag-uri va fi afisat de browser cu caractere italice.

Familia fontului

Exista cinci familii de fonturi de baza:
 . serif
 . sans serif
 . cursive
 . monospace
 . fantasy


Ex: <FONT FACE=monospace, arial, serif> - browserul va folosi in cazul acesta primul font pe care il va gasi instalat pe calculatorul client

Blocuri de text

Urmatoarele etichete produc trecerea la un nou rand si adaugarea unui spatiu suplimentar:

<ADDRESS>..</ADDRESS> - browserele afiseaza de obicei textul cuprins intre aceste tag-uri cu caractere cursive
<BLOCKQUOTE>.</BLOCKQUOTE> - duce la indentarea unui bloc de text (textul va fi deplasat la dreapta o anumita distanta fata de marginea paginii
<DIV></DIV>
Deoarece caracterele '<' si '>' au in HTML o anumita semnificatie pentru browser, atunci cand vrem ca aceste caractere sa nu fie luate in considerare de catre browser, ci sa fie afisate, textul trebuie cuprins intre etichetele:
<XMP>..</XMP>
<LISTING></LISTING>
<PRE></PRE>


Blocul paragraf

<P>..</P>

Blocuri de titlu

Cu ajutorul etichetelor <H1>, <H2>, <H3> < H6> se pot introduce titluri de capitole sau paragrafe de anumite dimensiuni, <H1> reprezentand cea mai mare dimensiune, iar <H6> cea mai mica.


<HR> - introduce o linie orizontala



Liste

Liste ordonate

<OL TYPE = t START= s> (OL = ordered list)
<LI>..(list item)
<LI>.
<LI>
</OL>Atributul TYPE defineste tipul de caractere care e utilizat pentru ordonarea listei: t = a, t = I, t = i, etc
Atributul START defineste valoarea de inceput. De exemplu: start = c


Liste neordonate

<UL TYPE = t> (UL = unordered list)
<LI>
<LI>
</UL>

Atributul TYPE arata ceea ce va fi afisat inaintea elementelor listei; t poate lua una din valorile:
. SQUARE (patrat)
. CIRCLE (cerc gol)
. DISC (cerc plin)

Atributul START defineste valoarea de inceput. De exemplu: start = c


Liste neordonate

<UL TYPE = t> (UL = unordered list)
   <LI>
   <LI>
</UL>

Atributul TYPE arata ceea ce va fi afisat inaintea elementelor listei; t poate lua una din valorile:
. SQUARE (patrat)
. CIRCLE (cerc gol)
. DISC (cerc plin)


Liste de definitii

Sunt formate dintr-o succesiune de termeni, fiecare din acesti termeni fiind urmat de definitia sa.

<DL> (definition list)
<DT>..(definition term)
<DD>
<DD>
<DT>
<DD>(definition description)
<DD>
</DL>


Tabele

<TABLE>
Atributele pe care le poate lua aceasta eticheta:

. BORDER - grosimea chenarului tabelului exprimata in pixeli. Dacaacestui atribut nu i se atribuie o valoare, chenarul va avea grosimea de 1pixel

. CELLPADDING - distanta dintre continutul celulei si marginea ei

. CELLSPACING - spatiul intre celulele tabelului

. WIDTH - latimea tabelului in pixeli sau procente din latimea paginii

. HEIGHT - inaltimea tabelului in pixeli sau procente din latimea paginii

. ALIGN - atribut care poate lua ca valori left/center/right

. HSPACE - arata distanta pe orizontala dintre tabel si celelalte elemente ale paginii

. VSPACE - arata distanta pe verticala dintre tabel si celelalte elemente ale paginii


<CAPTION> - precizeaza titlul tabelului. Eticheta aceasta trebuie introdusa in interiorul etichetelor <table>..</table>

Eticheta aceasta are un singur atribut: ALIGN - cu valorile:

. LEFT (la stanga tabeleuli)

. RIGHT (la dreapta)

. BOTTOM (sub tabel)

. TOP (deasupra tabelului)


<TR> - defineste un rand (table row)

Tag-ul are urmatoarele atribute:

. VALIGN - specifica alinierea verticala a textului in celule. Valorile posibile sunt: top/bottom/middle
. ALIGN - specifica alinierea orizontala. Valorile atributului sunt: left/center/right/justify/char


<TD> - defineste o celula in cadrul unui rand (table data) 

Iata atributele tag-ului:

. VALIGN

. ALIGN

Toate celulele unui rand mostenesc valorile atributului VALIGN definit in tag-ul <TR>, in afara de cazul in care acest atribut este redefinit prin tag-ul <TD>

. COLSPAN - arata numarul de coloane care se unesc

. ROWSPAN - arata numarul de randuri care se unesc

. NOWRAP - atribut care ignora o regula conform careia daca textul introdus intr-o celula e mai lung de 64 de caractere, navigatorul il imparte automat in mai multe randuri. Deci textul va fi prezent pe un singur rand, indiferent de lungimea lui.


<TH> - eticheta prin care se precizeaza antetul tabelului. Acesta are aceleasi atribute ca si <TD>. Textul din acest tag este centrat si bold.


Tot tabelul, o singura celula a lui sau mai multe pot fi colorate cu ajutorul atributului BGCOLOR plasat in interiorul tag-urilor <TABLE>, <TR> sau <TD>.


Imagini


Cele mai raspandite formate pentru imagini folosite pe Web sunt:


1.GIF, care foloseste 8 biti pentru o culoare, avand maxim 256 de culori. Formatul GIF89a aduce ca imbunatatiri ale fisierelor imagine:

. imaginile intretesute (interlaced images) - imagini a caror calitate  creste in timp ce pagina e incarcata. Intreteserea este un efect prin   care diferite portiuni ale unei imagini sunt afisate simultan

. imaginile transparente

. imagini animate, numite si GIF-uri animate - contin o succesiune de   imagini, ducand astfel de senzatia de animare2.


  2. JPEG, care foloseste 24 de biti pentru o culoare, folosind maxim 16.777.216 culori. Acest format este folosit in general pentru fotografii sau imagini cu efecte de umbrire.

<IMG SRC = url>

   Daca imaginea se afla in acelasi director cu fisierul HTML, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia acesteia (adresa relativa). In caz contrar, se va folosi adresa absoluta.

   IMG - poate lua ca atribute urmatoarele:

. BORDER - care ia ca valori numere intregi pozitive

. WIDTH - specifica latimea imaginii, in pixeli sau procente din latimea paginii

. HEIGHT - specifica inaltimea imaginii, in pixeli sau procente din inaltimea   paginii

   Daca se precizeaza spatiul pe care il ocupa o imagine intr-o pagina Web, va creste viteza de incarcare a paginii, deoarece browserul rezerva spatiul in pagina si continua sa afiseze celelalte elemente ale acesteia

. ALIGN - atribut care poate lua ca valori: left, right, top, middle, bottom sau baseline

. ALT - atribut care ia ca valoare un text ce va fi afisat in locul imaginii pana cand aceasta se va incarca sau la trecerea mouse-ului peste imagine

. LOWSRC - ia ca valoare adresa URL a unei imagini de calitate mai slaba decat a celei originale, care va inlocui imaginea de calitate mai buna pana la incarcare


BACKGROUND - se poate folosi ca atribut al etichetei <BODY>. Acest atribut ia ca valoare adresa URL a imaginii. Imaginea respectiva se va multiplica pe orizontala si vericala pana cand se va umple ecranul. In timpul derularii paginii, textul si imaginea de fond se vor deplasa concomitent. Se poate insa ca imaginea de fundal sa ramana fixa in timpul derularii, in timp ce textul se va deplasa. In cazul acesta se va folsi atributul BGPROPERTIES cu valoarea fixed. Atributul acesta functioneaza insa numai cu Internet Explorer.


Legaturi


   Pentru realizarea unei legaturi hipertext se foloseste tag-ul ancora:

<A> </A> (anchor)

   Cel mai important atribut al acestei etichete este HREF (HiperText REFerence). Acesta se foloseste pentru a specifica adresa documentului tinta. Legaturile se pot realiza:

. intern - in cadrul aceluiasi document

. local - catre un document aflat pe acelasi server

. extern - catre un document aflat pe alt server

 Legatura locala

<A HREF=fisier_local> text de legatura </A>

Adresa fisierului local poate fi relativa sau absoluta. Daca pagina actuala si cea care va fi afisata in urma utilizarii legaturii se afla in acelasi director, atunci se va folosi legatura relativa.

Ex: <A HREF='contact.htm'>Contactati-ma!</A>.

Legaturile absolute se folosesc pentru legarea la o pagina de pe alt server.

Ex: <A HREF=http://www.hotmail.com>E-mail</A>


Legatura interna

   Se realizeaza intre elementele aceluiasi document sau catre un punct tinta al altui document.
   Pentru aceasta este necesara crearea unei ancore in punctul tinta

<A NAME=cuvant_cheie> Text </A>

si realizarea legaturii:

<A HREF=nume_fisier#cuvant_cheie>.</A>


Legatura externa

  Ex: <A HREF='http:/mfd.go.ro>.</A>

O legatura hipertext poate avea ca tinta un fisier HTML, o imagine externa (GIF, JPEG etc), un film sau un text caruia i s-a marcat o ancora.

   Putem preciza fereastra in care se va incarca pagina atasata unei legaturi folosindu-ne de atributul TARGET al etichetei <A>. Acest atribut poate lua ca valori urmatoarele:
. '_blank' - incaracrea paginii se face intr-o fereastra noua

. '_parent' - incarcarea paginii se face in fereastra parinte (care a lansat legatura hipertext)

. '_self' - incarcarea paginii se face in aceeasi fereastra

. '_top' - incarcarea se face pe toata suprafata browser-ului


Alegerea culorilor pentru legaturi intr-o pagina se poate face prin folosirea a trei atribute ale eticehtei <BODY>:

. link pentru legaturi nevizitate

. vlink pentru cele vizitate

. alink pentru cele active


 Atributul TITLE apartine etichetei <a> si arata o anumita informatie la trecerea mouse-ului peste o legatura.

Ex: <A HREF ='Contact.html' title='Contactati-ma !'>E-mail</A>


Formulare

Formularul este o interfata care urmareste obtinerea de informatii de la utilizatori. Prelucrarea acestor informatii se executa pe server cu ajutorul CGI - Common Gateway Interface.
Utilizatorul va completa formularul si il va expedia unui server. O aplicatie dedicata de pe server va analiza formularul si va stoca datele intr-o baza de date daca e cazul. Atunci cand e cazul, serverul va expedia un raspuns utilizatorului <FORM METHOD = tip_metoda ACTION = URL_cgi NAME = n TARGET = cadru>

   Atributul METHOD arata metoda folosita pentru expedierea datelor formularului. Poate lua ca valori:
. GET - datele din formular sunt trimise la adresa URL care este precizata de atributiul ACTION

. POST


Atributul ACTION arata locul unde se emite informatia. Arata adresa unui script aflat pe un server care primeste datele formularului, prelucreaza aceste date si expediaza catre utilizator un raspuns.


Atributul NAME indica scriptului CGI numele formularului care a trimis datele atunci cand exista mai multe formulare in cadrul aceluiasi document si identifica un anumit formular pentru a putea fi referit prin functiile JavaScript.

Atributul TARGET specifica fereastra sau cadrul in care se va afisa rezulatatul executiei script-ului CGI. Daca nu exista atributul acesta, se va inlocui pagina curenta.

<INPUT TYPE = tip NAME = nume_camp VALUE=val SIZE=n MAXLENGTH=m>


Atributul TYPE arata tipul intrarii in formular:

. text (text simplu, parola, ascuns sau multilinie)

. meniu (cu selectarea unei intrari sau cu selectare multipla)

. butoane (casete de validare, butoane radio, butoane reset si submit)


TEXT
Atributul NAME permite definirea numelor, pentru identificarea datelor care vor fi trimise catre server
VALUE - este un atribut optional care permite definirea continutului din campul text, adica ceea ce o sa apara pe ecran la prima activare a formularului

SIZE - atribut optional prin care se stabileste lungimea campului de intrare text (in caractere)
MAXLENGTH - atribut optional prin care se limiteaza numarul de caractere care pot fi introduse

PASSWORD
- se foloseste pentru introducerea de parole. In acest caz se folosesc aceleasi atribute ca si pentru intrarea text

TEXTAREA
- folosit pentru introducerea de text multilinie

<TEXTAREA NAME = 'nume_camp' rows = 'r' cols = 'c'>

ROWS - arata numarul de randuri care pot fi afisate

COLS - arata numarul de coloane care pot fi afisate

OPTION - specifica o optiune a meniului

VALUE - atribut optional prin care se specifica valoarea optiunii emise spre server

SELECTED - atribut optional prin care se specifica prima optiune afisata a meniului

Prin introducerea atributului MULTIPLE SIZE se pot alege mai multe optiuni dintr-o lista

CHECKBOX (caseta de validare)

<INPUT TYPE = 'checkbox' VALUE = 'v' CHECKED>

VALUE - atribut optional care specifica valoarea trimisa catre server in caz ca acest atribut este selectat
CHECKED - atribut optional pentru selectarea in mod implicit a casetei


RADIO
<INPUT TYPE = 'radio' VALUE = 'v' CHECKED>.

Butoanele radio permit alegerea unei singure variante din mai multe posibile.

RESET/SUBMIT
Cand se activeaza aceste butoane are loc stergerea zonelor de intrare din formular, respectiv trimiterea datelor catre server.


HIDDEN
- transmite o informatie la server ascunzand textul. Este necesara prezenta atributului VALUE pentru a se specifica valoarea textului ascuns, care va fi emis catre server.


Metainformatii


   Metainformatiile sunt informatii despre modul de organizare al informatiilor. Ele arata modul in care a fost realizata o pagina Web, facand parte din fisierul sursa. Sunt folosite de serverele Web, care le stocheaza, si prin intermediul motoarelor de cautare se pot regasi informatii despre anumite subiecte.

Cele mai cunoscute motoare de cautare sunt:

. www.yahoo.com

. www.altavista.com

. www.excite.com

. www.lycos.com

. http://www.google.com/

   Metainformatiile se introduc in fisierul sursa cu ajutorul tag-ului <META>, care va fi plasat in interiorul blocului <head>..</head>.

Acest tag poate lua urmatoarele atribute:

. name

. http-equiv

. content

. scheme

. lang


Descrierea paginii Web

Daca se doreste ca motoarele de cautare sa afiseze scopul in care a fost creat site-ul, atunci atributul NAME va lua ca valoare DESCRIPTION, iar atributul CONTENT va lua ca valoare un sir ce face o prezentare generala a paginii.


Cuvinte cheie pentru o pagina Web

Cuvintele cheie sunt utilizate pentru a regasi informatii prin intermediul motoarelor de cautare. Pentru acest lucru:

. atributul NAME va lua ca valoare KEYWORDS

. atributul CONTENT va lua ca valoare o lista de cuvinte cheie care vor fi separate prin virgula


Drepturile de autor

Pentru a furniza informatii legate de autorul paginii :
. atributul NAME va lua ca valoare AUTHOR, iar atributul CONTENT va lua ca valoare numele autorului
. atributul NAME va lua ca valoare COPYRIGHT, iat atributul CONTENT va arata drepturile de autor

Cascading Style Sheets


CSS (Cascading Style Sheets - foi de stil in cascada).

   Foile de stil ajuta foarte mult la gestionarea unui site Web, un singur document putand controla formatarea textului in intreg site-ul, modificarea stilului devenind extrem de simpla.
Stilul se refera la fontul, fundalul, textul, culorile legaturilor, marginile si amplasarea obiectelor in pagina. Insa CSS-ul are o mare problema: nu este suportat in intregime de toate browserele.

   Exista trei metode prin care foile de stil pot fi aplicate unui document HTML:

1. INLINE - metoda prin care fiecarei etichete HTML i se adauga un stil; se realizeaza cu ajutorul atributului STYLE

2. EMBEDDED (incapsulat) - utilizeaza eticheta <STYLE> care se amplaseaza inaintea etichetei <BODY> in fisierul sursa

3. LINKED sau EXTERNAL (legat sau extern) Cu ajutorul unei foi de stil legate se creeaza o foaie de stil principala care poate fi aplicata intregului site. Acest document principal se va salva cu extensia .css si va cuprinde stilurile care vor fi aplicate site-ului.

   Ex:

 <STYLE>
   BODY
   H1
 </STYLE>

   Acest document se va salva cu extensia .css (de exemplu stilulMeu.css). Va putea fi legat la oricate pagini HTML, introducand inainte de <head>:
<link rel = 'stylesheet' href= 'stilulMeu.css' type = 'text/css'>

   Foile de stil recunosc cinci familii de font-uri:

. Serif - in acest caz, literele au anumite terminatii. Aceste font-uri maresc vizibilitatea si de aceea sunt recomandate pentru textul de baza (Times, Garamond)

Sans Serif - nu au terminatii (Arial)

Script (cursive) - este asemanator scrisului de mana (Park Avenue)

Monospatioat (monospace) - fonturi asemanatoare celor batute la masina de scris. Se numesc asa deoarece toate literele au acceasi latime (Courier)

Decorativ (Fantasy) - ex: Fantasy

Cadre


   Cu ajutorul cadrelor se poate diviza ecranul in mai multe sectiuni, fiecare continand un document HTML. Crearea cadrelor se realizeaza cu ajutorul a trei tag-uri: FRAMESET, FRAME si NOFRAMES. Structura unui document ce contine cadre e diferita de cea a unui document HTML clasic:


<html>
<head></head>
<frameset>
   <frameset'>
   ..
 <frame>
   </frameset>
   <frameset>
   ..
   </frameset>
</frameset>
</html>

<FRAMESET COLS =c1, c2, c3, , cn FRAMEBORDER = no  / yesMARGINWIDTH=m BORDERCOLOR=rrggbb> - divizeaza ecranul in cadreverticale

. <FRAMESET ROWS =r1, r2, r3, , rn FRAMEBORDER = no  / yesMARGINHEIGHT=m BORDERCOLOR=rrggbb> - divizeza ecranul in cadreorizontale

   Numarul de cadre este egal cu cel al numarului de valori c1, c2, ., cn in cazul cadrelor verticale sau cu numarul de valori r1, r2, r3, ., rn in cazul celor orizontale (aceste valori reprezinta procente din latimea sau inaltimea ferestrei pe care o imparte in cadre)


   Atributul FRAMEBORDER specifica daca separarea cadrelor se face printr-o bordura, valoarea implicita fiind FRAMEBORDER=yes. Daca FRAMEBORDER = no, atunci latimea bordurii dintre cadre se specifica prin atributul MARGINWIDTH=n. Daca FRAMEBORDER= yes, atunci BORDERCOLOR=rrggbb reprezinta culoarea bordurii.

Descrierea unui cadru se face astfel:

<FRAME SRC = 'url' NAME = 'nume_cadru' MARGINWIDTH= m MARGINHEIGHT = n SCROLLING = yes/no/auto NORESIZE>

. SRC- indica URL-ul de unde se incarca cadrul respectiv

. NAME - specifica numele cadrului. Acest atribut va fi folosit ca tinta intr-o legatura hipertext prin atributulTARGET

. MARGINWIDTH, MARGINHEIGHT- definesc spatiul intre document si marginea stanga, respectiv cea desus a cadrului

. SCROLLING - defineste o bara de derulare, necesara pentru documentele care nu pot fi afisate in totalitate in cadru

. NORESIZE - impiedica posiblitatea utilizatorului de a redimensiona cadrele cu ajutorul mouse-ului
. Tag-ul <NOFRAMES><NOFRAMES> permite afisarea unui text explicativ pentru navigatoarele care nu suporta cadre


   Etichetele <A> si <FORM> pot lua atributul TARGET, care specifica cadrul in care se va afisa documentul asociat legaturii.


 Ex: <A HREF = 'contact.htm' TARGET = 'nume_cadru'>..</A>
<FORM ACTION='/cgi-bin/xxx' TARGET = 'nume_cadru' METHOD = post>

<IFRAME> </IFRAME> - insereaza in pagina un cadru in-line. Acest tag are atribute preluate de la etichetele <frame> si <frameset> (src, border, frameborder, bordercolor, marginwidth, marginheight, scrolling, name, noresize) sau de la eticheta <img> (vspace, hspace, align, width, height)


Dynamic HTML


DHTML-ul (Dynamic HTML) imbunatateste HTML-ul prin faptul ca atribuie elementelor unei pagini Web un caracter dinamic si interactiv. Un mare avantaj al DHTML-ului este faptul ca paginile Web realizate cu ajutorul acestuia se incarca foarte rapid.
   Efectele DHTML sunt realizate utilizand trei tehnologii: HTML, CSS si scripting. Aceste efecte se pot obtine cu ajutorul a doua limbaje de scripting: VBScript si JavaScript.
Realizarea de documente HTML dinamice se bazeaza pe 2 concepte: bloc si strat: . Blocul este foarte strans legat de conceptul de foi de stil (CSS - Cascading Style Sheets) si permite izolarea unei portiuni din pagina (text, imagine, etc) sub forma unei entitati separate.
. Stratul permite asamblarea blocurilor intr-un spatiu tridimensional si in timp ca urmare a unor evenimente controlate cu ajutorul JavaScript.

Fiecare strat are un nume si o anumita pozitie in pagina, care poate fi absoluta sau relativa.

Straturile se pot defini in doua moduri:

. in mod CSS - prin tag-urile <STYLE>

. in mod JavaScript - prin tag-urile <LAYER> pentru pozitionare absoluta si <ILAYER> pentru pozitionare relativa

Iata principalele atribute ale tag-ului LAYER:

. ID - indica numele stratului

. TOP - arata pozitia absoluta in raport cu inaltimea ferestrei

. LEFT - arata pozitia absoluta in raport cu marginea stanga a ferestrei

. WIDTH , HEIGHT - latimea si inaltimea in pixeli a stratului

. PAGEX, PAGEY - spatiul pe orizontala si verticala dintre strat si restul documentului

. Z-INDEX - defineste pozitia stratului in ansamblul de straturi

. ABOVE, BELOW - specifica numele straturilor precedent si succesiv din ansamblu

. VISIBILITY -care poate lua ca valori hide/show/inherit - arata faptul ca stratul este invizibil, vizibil sau ca mosteneste atributul de vizibilitate de la stratul parinte

. BGCOLOR - specifica culoarea de fond pentru strat

. BACKGROUND - permite afisarea unei imagini de fond


Nu se poate descarca referatul
Acest document nu se poate descarca

E posibil sa te intereseze alte documente despre:

Copyright © 2024 - Toate drepturile rezervate QReferat.com Folositi documentele afisate ca sursa de inspiratie. Va recomandam sa nu copiati textul, ci sa compuneti propriul document pe baza informatiilor de pe site.
{ Home } { Contact } { Termeni si conditii }