Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  


AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


TAG-uri UTILZATE

html

+ Font mai mare | - Font mai mic



DOCUMENTE SIMILARE

Trimite pe Messenger
TAG-uri UTILZATE
Editarea unei pagini HTML
Tag-uri utilizate pentru crearea legaturilor (referintelor, pointerilor)
Inserare unui link
Blocuri de titlu
Pozitionarea obiectelor HTML in document
Inserarea cadrelor (frame)
Culori, RGB, exprimarea culorilor in hexazecimal
Linii orizontale - HR
Cadre sau subferestre


TAG-uri UTILZATE

Structura generala a unui fisier cu extensia HTM sau HTML este:





   

Observatie: un tag se va scrie intotdeauna incadrat de semnele < >. Efectul unui tag este vizibil pana cand acesta este inchis (Ex: <title> Prima pagina WEB</title> care permite scrierea pe bara de titlu a programului Internet Explorer a textului Prima pagina WEB).

Tag-uri cu efect asupra intregii pagini web

<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a paginii Web, culoarea implicita de scriere a textului, culoarea legaturilor, culoarea legaturilor vizitate, culoarea legaturilor de actiune.

Atributul BGCOLOR stabileste culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de fundal va fi albastra – sau <body bgcolor = 804050> (formatul de culoare este RRGGBB – rosu, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal))

Atributul TEXT permite stabilirea culorii implicite de scriere pe intreaga pagina Web (Ex: <body Text = red> – tot textul pe pagina de Web va scris cu rosu)

Atributul LINK permite stabilirea culorii unei legaturi (vezi tag-urile de la legaturi). Implicit aceasta este albastra. (Ex: <body link = green> - legaturile vor avea culoarea verde)

Atributul Vlink permite stabilirea culorii unei legaturi vizitate (Ex: <body vlink = red> – un link vizitat va avea culoarea rosie)

Atributul ALINK permite stabilirea culorii unei legaturi de actiune, adica pana la realizarea conexiunii stabilite de legatura (vezi tag-urile de la legaturi) link-ul va avea culoarea stabilita prin ALINK, iar dupa realizarea conexiunii acesta culoare va devenii automat cea specificata cu VLINK (Ex: <body alink = yellow> - un link in actiune va avea culoarea galbena)

OBS. Un tag poate folosi toate atributele de care dispune sau numai o parte din acestea (Ex: <body bgcolor = red text = yellow link = gray>

Daca dorim ca pe o pagina Web sa avem ca fundal o poza, atunci in locul atributului BGCOLOR vom folosi atributul BACKGROUND urmand a specifica adresa pozei respective (Ex: <body background = “c:studentpoza.gif” text = red ……>

<bgsound src= „Fisier muzica”> - permite ascultarea pe fundalul paginii Web a unei melodi.

Tag-uri pentru formatarea caracterelor si aranjarea textului

<b> - permite scrierea caracterelor ingrosat (bold)

<i> - permite scrierea caracterelor inclinat (italic)

<u> - permite scrierea caracterelor subliniat (underline)

<center> - permite alinierea pe centru a textului pe pagina

<p align = left/right/center>permite alinierea la stanga/dreapta/centru a textului pe pagina

<br> - intrerupe linia curenta si trece textul sau imaginea pe urmatoarea linie

<p> intrerupe linia curenta si trece textul sau imaginea la paragraful urmator

Obs. <p> este echivalentul lui <br><br> (de doua ori <br>).

<sup> - permite scrierea unor cuvinte la putere (Ex: 9<sup>50 – are ca efect - 950)

<sub> - permite scrierea unor cuvinte ca indice (Ex: X<sub>i – are ca efect – Xi)

<tt> - permite scrierea unui text monospatiat (Ex: <tt>Este cel mai bine</tt>

<hr size = a color = b width = c align = left/right/center > - plaseaza o linie orizontala in document.

Atributul SIZE defineste grosimea liniei orizontale (Ex: <hr size = 3> – linia va avea o grosime de aproximativ 1 mm)

Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va avea culoarea rosie - sau color = 804050 (formatul de culoare este RRGGBB – rosu, verde, albastru) sau color = 15%85%95% sau color = aaffcc (formatul hexazecimal))

Atributul WIDTH specifica lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontala o sa ocupe numai 45% din suprafata paginii web)

Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stanga/dreapta/centru)

<font color = a size = b face = c> - permite stabilirea culorii de scriere a caracterelor, stabilirea dimensiunii acestora, precum si stilul de scriere (Ex: Times New Roman, sau Arial)

Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> – textul va fi scris cu albastru. Observatie: Acest parametru are prioritate fata de acelasi atribut din tag-ul <body text = b>. Asadar, daca se stabileste o culoarea a textului pe intreaga pagina Web pe rosu - <body text=red> - si doresc sa scriu un cuvant cu ablastru atunci voi folosi tag-ul <font color=blue> inaintea cuvantului pe care doresc sa-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul <font color=blue> are prioritate fata de tag-ul <body text=red>.

Atributul SIZE stabileste dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existand un echivalent al acestora cu dimensiunile caracterelor din WORD – 1 = 8pt / 2 = 10pt / 5 = 18pt / 7 = 36pt – (Ex: <font size = 1> – scrie la o dimensiune a caracterelor de 8pt)

Atributul FACE permite specificarea stilului de scriere (Ex: <font face = Arial> - scrie pe stilul Arial)

<address> - permite scrierea pe un anumit stil a unei adrese postale, a unui telefon

<marquee direction = left/right behavoir = Scroll/Slide/Alternate>….Text sau imagine ….

</marquee> - permite realizarea unei animatii a textului, in sensul deplasarii acestuia pe ecran

Tag-uri pentru includerea unei imagini in cadrul paginii Web

<img src = “ “ border = a width = c height = d align = left/right/center alt = “ “> - acest tag permite amplasare unei imagini in cadrul paginii Web

Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web (Ex: <img src=”c:studentpoza.gif”> - va plasa pe pagina de Web fisierul poza.gif existent in folderul c:student

Atributul BORDER permite stabilirea grosimii liniei ce va inconjura poza (Ex: <img src=”c:studentpoza.gif” border = 3> - linia ce va inconjura poza va avea o grosime de aproximativ 1 mm)

Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontala (lungimea pozei pe orizontala) (Ex: <img src=”c:studentpoza.gif” width = 150> - poza va avea o lungime pe orizontala de aproximativ 5 cm)

Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe verticala (lungimea pozei pe verticala) (Ex: <img src=”c:studentpoza.gif” height = 300> - poza va avea o lungime pe orizontala de aproximativ 10 cm)

Atributul ALIGN permite alinierea imaginii respective in cadrul paginii Web (Ex: <img src=”c:studentpoza.gif” align = left> - poza va fi aliniata la stanga)

Atributul ALT permite scrierea unui text care va apare numai atunci cand utilizatorul este pozitionat cu mouse-ul pe imaginea respectiva (Ex: <img src=”c:studentpoza.gif” align = left alt = ”Poza aceasta este din secolul trecut”>)

<img dynsrc=”Fisier film> - permite plasarea pe pagina de Web a unui film.

Tag-uri pentru realizarea de liste

<ol type = a start = b>   

<li>Primul element din lista

<li>Al doilea element din lista

<li>Al treilea element din lista

</ol>

permite realizarea unei liste ordonate. O lista este ordonata daca elementele ei au o numerotare in fata (ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specifica de la cat sa inceapa numerotarea in lista

 
Ex: <ol type = a start =1>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ol>

 
Ex: <ol type = A start =3>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ol>

 
Ex: <ol type = 1 start =5>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ol>

 
Ex: <ol type = I start =3>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ol>

<ul type = a>   

<li>Primul element din lista

<li>Al doilea element din lista

<li>Al treilea element din lista

</ul>

permite realizarea unei liste neordonate. O lista este neordonata daca elementele ei nu au o numerotare in fata (sunt neordonate), ci doar semne care sa identifice elementul din lista

Atributul TYPE permite specificarea tipului de semn al elementului din lista

 
Ex: <ul type = Square>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista



</ul>

 
Ex: <ul type = Disc>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ul>

 
Ex: <ul type = Circle>

<li> Primul element din lista

<li> Al doilea element din lista

<li> Al treilea element din lista

</ul>

<dl>

<dt>Student

<dd>O persoana inscrisa la o institutie de invatamant superior

<dt>Profesor universitar

<dd>Cadru didactic la o institutie de invatamant superior

</dl>

 
permite realizarea unei liste cu definitii. Tag-ul <dt> precizeaza termenul pe care vrem sa-l definim in cadrul listei cu definitii, iar tag-ul <dd> defineste termenul pe care vrem sa-l definim.

Ex

Tag-uri pentru realizarea legaturilor

Tag-ul pentru realizarea legaturilor este:

<A href = “Unde vreau sa ajung” > Pe ce dau click (text sau imagine)</a>

In functie de locul unde vreau sa ajung distingem trei tipuri de legaturi: interne, locale si externe.

A.     Legatura interna - permite realizarea unei legaturi in cadrul aceluiasi fisier (de exemplu de la cuprinsul unei carti ce cuprinde capitolele existente in cartea respectiva sa se relizeze o conexsiune catre continutul unui capitol). Schematic se distinge astfel:

Fisierul A.htm

Ex: presupunem ca avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se afla pe pagina 1) doresc a fi o punte de legatura intre el si continutul fiecarui capitol (adica daca dau click stanga de mouse pe capitolul 3 sa ma pozitioneze direct pe continutul capitolului 3 care se afla, de exemplu la pagina 185. Cum voi proceda ?

Realizarea cuprinsului ca punte de legatura intre el si continutul fiecarui capitol (pe pagina 1).

Deplasare la pagina 185 si realizarea unui semn de carte pentru a sti unde anume sa-mi pozitioneze cursorul atunci cand execut click stanga de mouse pe textul de legatura.

Ex

Suntem pe pagina 1 si realizam curpinsul.

 
<A href=“#Continutul capitolului 1”>Capitolul 1</a>

<A href=“#Continutul capitolului 2”>Capitolul 2</a>

<A href=“#Continutul capitolului 3”>Capitolul 3</a>

<A href=“#Continutul capitolului 4”>Capitolul 4</a>

<A href=“#Continutul capitolului 5”>Capitolul 5</a>

Dupa cum se observa Capitolul 3 a fost trecut ca text de legatura (vezi sintaxa tag-ului <A href = …. >…..</A>) pentru a putea executa click stanga de mouse si a ne trimite apoi la pagina 185(conform enunt exemplu).

“#Continutul capitolului 3” este numele semnului de carte de la pagina 185. Asa am vrut sa numesc semnul de carte (puteam sa-i dau orice alt nume cu spatii sau fara spatii, dar daca are spatii atunci acest nume de semn de carte trebuie pus intre ghilimele)

Deplasare la pagina 185 in cadrul cartii respective. Aceasta deplasare o realizam cu bara de defilare sau cu tasta PageDown, deoarece acesta este locul in care vreau sa ma pozitioneze cu mouse-ul dupa ce dau click pe textul de legatura.

La aceasta pagina vom crea un semn de carte cu numele “#Continutul capitolului 3” astfel: <A name = “#Continutul capitolului 3”>

Dupa ce am definit semnul de carte la pagina 185 putem sa ne deplasam de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legatura si numai este nevoie de tasta PageDown sau de bara de defilare.

Obs: Fisierul HTML trebuie sa aiba cel putin 185 de pagini.

B. Legatura localapermite realizarea unei conexiuni cu un fisier existent pe calculatorul local

Fisierul A.htm

Fisierul B.htm sau orice alta extensie

Ex: In fisierul A.Htm avem urmatorul tag: <A href = “c:studentB.doc”>Click aici</a> - daca executati click stanga de mouse pe textul Click aici atunci se va realiza o conexiune cu fisierul B.doc existent pe c:student.

Observatie: de data aceasta nu mai este nevoie de un semn de carte.

Daca insa avem doua fisiere cu extensia htm (fisierul1.htm si fisierul2.htm) si dorim sa ne deplasam din fisierul1.htm in fisierul2.htm la pagina 200, atunci in fisierul1.htm vom scrie:

<A href = “c:studentfisierul2.htm#Semnul de carte de la pagina 200”>Catre fisierul 2</a>

Observatie: La pagina 200 din fisierul2.htm voi merge si voi defini un semn de carte cu numele Semnul de carte de la pagina 200. Astfel am realizat o legatura localo-interna.

C. Legatura externapermite realizarea unei conexiuni cu exteriorul (un site, un e-mail)

 


Fisierul A.htm

Ex: Legatura catre un site

<A href = https://www.ase.ro>Vizitati site-ul A.S.E.</a> - permite realizarea unei conexiuni cu site-ul Academiei de Studii Economice.

Ex: Legatura de transmitere a unui mesaj

<A href=mailto:Georgescu@yahoo.com> Georgescu Nicolae </A> - permite transmiterea unei mesaj catre casuta postala a lui Georgescu Nicolae (numele este chiar text de legatura).

Observatie generala Pana acum tot ce am facut nu ne permite ca pe o pagina de Web sa tastam ceva, ci doar sa citim continutul paginii respective. Cum vom proceda atunci cand utilizatorul doreste de exemplu sa scrie un mesaj, sau doreste sa completeze un formular electronic in care trebuie sa-si tasteze numele si prenumele, data nasterii, domiciliu, . etc, direct de pe Internet fara a mai fi nevoie sa se deplaseze la sediul unei firme? Raspuns: utilizand tag-uri care sa permita realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obtin cu tag-urile de realizare a formularelor.

Tag-uri pentru realizarea formularelor

<form method = post/get action = “adresa unde vor fi trimise datele scrise spre analiza”>

</form>

permite realizarea de casete speciale pentru a putea scrie pe o pagina Web.

Atributul METHOD specifica modalitatea de transmitere a datelor catre server pentru a putea fi analizate.

Atributul ACTION permite specificarea adresei server-ului care va primii datele scrise de utilizator pe internet.

Tag-urie efective de realizare a casetelor speciale se scriu intre <form> ..si </form>.

Caseta de tip text: <input type = text name = a size = b maxlength = c value = d>

- permite realizarea de casete de tip text

Atributul Type permite specificarea tipului de caseta utilizata (text)

Atributul Name permite specificarea numelui casetei de tip text

Atributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile in caseta detip text)



Atributul Maxlength permite specificarea numarului maxim de caractere ce poate fi scris in caseta de tip text

Atributul Value permite specificarea textului implicit ce va aparea scris in caseta de tip text.

Ex: Introduceti numele si prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = “Popescu Ion>

Observatie. Caseta de tip text nu permite scrierea pe mai multe randuri, ci doar pe unul singur.

Un exemplu mai sofisticat ce face apel la stiluri:

Introduceti numele dvs: <INPUT type='text' STYLE='color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;' size='10' maxlength='30'>


Caseta de tip parola:    <input type = Password name = a size = b maxlength = c value = d>

- permite realizarea de casete de tip parola

Ex

Introduceti parola<input type=password name=caseta2 size=15 maxlength=12 value='Popescu Ion'>

Caseta de tip checkbox <input type=checkbox name = a>

Ex: Care sunt limbile straine cunoscute: <input type=checkbox name = a>Engleza <input type=checkbox name = b>Franceza <input type=checkbox name = c>Germana

Caseta de tip Radio buton <input type=radio name = a>

Ex: Care este tara de origine: <input type = radio name = a>Romania <input type=radio name = a>SUA<input type=radio name = a>Germania

Observatie. Numele radio butoanelor trebuie sa fie acelasi, deoarece tara de origine este numai una singura ori daca butoanele radio nu au acelsi nume se pot selecta toate tarile.

Buton de trimitere a datelor catre server <input type=Submit name=a value = “Trimite datele”>

Atributul VALUE permite scrierea unui text pe buton.

Ex: <input type=Submit name=a value=”Trimite datele”>

Buton de stergere a datelor <input type=Reset name=a value = “Sterge datele”>

Ex: <input type=Reset name=a value=”Sterge datele”>

   

Buton obisnuit < input type=button name=a value=”Calculeaza valoare din cos”>

   

Caseta de tip multilinie

<textarea rows=a cols=b> …….</textarea> permite scrierea pe mai multe randuri

Atributul Rows permite precizarea numarului de linii vizibile in cadrul acestei casete de tip multilinie. Numarul liniilor ce poate fi scris in aceasta caseta este cu mult mai mare, dar vizibile pe ecran sunt cele precizate in Rows, pentru restul liniilor ne vom deplasa cu bare de defilare care va apare automat daca numarul de linii este mai mare decat cel precizat cu Rows.

Atributul Cols permite precizarea numarului de caractere de pe coloana (un caracter = o coloana).

Ex: <Textarea rows=6 cols=15>Tastati mesajul dvs.</textarea>

Observatie. Verificati numarul liniilor precizate cu Rows si numarul caracterelor pe coloana precizate cu Cols.

Caseta de tip combobox

<select>

<option>Elementul 1

<option>Elementul 2

<option selected>Elementul 3

<option>Elementul 4

<option>Elementul 5

</select>

permite realizarea unui combobox (lista derulanta)

Ex

Observatie. Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizeaza o selectie implicita a acestei optiuni.

Caseta de tip lista derulanta cu selectie multipla

<select multiple size = a>

<option>Elementul 1

<option>Elementul 2

<option selected>Elementul 3

<option>Elementul 4

<option>Elementul 5

</select>

Atributul SIZE permite specificarea numarului de optiuni vizibile in cadrul listei respective.

Ex

Observatie In lista avem 5 tari dar vizibile avem numai 4 dintre ele datorita atributului SIZE=4. Pentru a vedea si cea de-a 5-a tara ne deplasam cu bare de defilare verticala. Pentru a selecta mai multe tari trebuie sa tinem si tasta CTRL apasata.

Tag-uri pentru realizarea tabelelor

La realizarea tabelelor folosim urmatoarele tag-uri:

<table border=a cellspacing=b cellpading=c width=d bordercolor=e>

<tr bgcolor=a align=left/right/center valign=top/middle/bottom>

<td bgcolor=a align=left/right/center valign=top/middle/bottom width=b>

Atributul BORDER permite stabilirea grosimii liniilor tabelului

Atributul CELLSPACING permite stabilirea spatiului dintre celulele unui table

Atributul CELLPADING permite stabilirea spatiului dintre textul din interiorul unei celule si liniile acesteia.

Atributul WIDTH stabileste suprafata pe care sa o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule.

Atributul BORDERCOLOR permite stabilirea culorii liniilor tabelului

Atributul BGCOLOR permite stabilirea culorii de fundal a liniei (in tag-ul TR) sau celulei (in tag-ul TD). Daca nu dorim pe fundal o culoare ci o poza atunci folosim in loc de BGCOLOR atributul BACKGROUND urmand a preciza care este adresa pozei de fundal.

Atributul ALIGN permite alinierea pe orizontala a textului in linia/celula respectiva

Atributul VALIGN permite alinierea pe verticala a textului in linia/celula respectiva

TAG-ul TR – creaza o linie in cadrul tabelului respectiv. Deci cate linii are tabelul atatea TR trebuie sa avem (cheie de control). Atributele din TR au efect asupra intregi linii.

TAG-ul TD – creeaza o celula pe linia respectiva. Deci cate celule are tabelul respectiv atatea TD trebuie sa avem (cheie de control). Atributele din TD au efect asupra celulei curente.

Ex:

Observatie. Atributele folosite in cadrul tag-ul TD au prioritate fata de cele folosite in cadrul tag-ului TR. In cadrul tag-ului TD se poate folosii simultan si atributul ROWSPAN si COLSPAN semnificand faptul ca celula respectiva este unita peste X linii si Y coloane.

ATENTIE: urmariti culorile liniilor pentru a intelege cum se realizeaza un tabel. Anumitor celule le-am schimbat culoare pentru a vedea prioritatea dintre TR si TD.

Tag-uri pentru realizarea de Frame-uri (cadre)

Tag-urile pentru realizarea frame-urilor sunt:

<frameset rows = a frameborder = yes/no>

<frameset cols=b frameborder = yes/no>

<frame name=a noresize src=b>.

Se va folosii <frameset rows = a frameborder = yes/no> atunci cand vrem ca ecranul monitorului sa fie impartit plecand de la crearea mai intai a liniilor frame-urilor si pe urma a coloanelor frame-urilor de pe un monitor.

Aceasta alegere o facem in fuctie de liniile sau coloanele pe care vrrem sa le avem ca despartitoare de frame-uri (cadre) de pe monitor si anume Ce avem dintr-un capat in altul al monitorului? – linie despartitoare sau coloana despartitoare. Daca avem linii, obligatoriu trebuie sa pornim cu tag-ul <frameset rows = a frameborder = yes/no>, iar daca avem coloana cu tag- ul <frameset cols = a frameborder = yes/no>. Daca avem si linii si coloane care unesc capetele monitorului (pe orizontala si pe verticala) atunci incepem crearea frame-urilor de la linii sau de la coloane.

Presupunem ca vrem sa impartim ecranul astfel:

Observatie. Dintr-un capat la ecranului in altul nu ajunge decat o linie. Asadar ecranul este impartit in doua linii dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori cat prima (3*). Deci pornim cu tag-ul <frameset rows =”*,3*” frameborder = yes>

<html>

<head>

<title>Realizare frame-uri</title>

</head>

<frameset rows='*,3*' frameborder=yes>

<frameset cols='*,*,*'>

<frame name=f1 src=1.htm noresize>

<frame name=f2 src=2.htm noresize>

<frame name=f3 src=3.htm noresize>

</frameset>

<frameset cols='*,*'>

<frame name=f4 src=4.htm noresize>

<frame name=f5 src=5.htm noresize>

</frameset>

</frameset>

</html>

Prima linie este impartita si in trei coloane egale. deci trebuie sa cream coloanele respective <frameset cols='*,*,*'>. Odata ce am creat coloanele respective, deoarece aceasta este forma finala a primei linii, trebuie sa precizam care este sursa pentru fiecare coloana in parte de pe prima linie. Pentru ca doresc sa nu aibe posibilitatea redimensionarii frame-urilor voi folosi si atributul NORESIZE atunci cand precizez sursa fiecarui cadru in parte.

<frame name=f1 src=1.htm noresize>

<frame name=f2 src=2.htm noresize>

<frame name=f3 src=3.htm noresize>

Odata cu precizarea surselor coloanelor acesta trebuie inchis (</frameset>)

Deci cu prima linie am terminat. Urmeaza a doua linie.

Aceasta este si ea impartita in 2 coloane egale, deci trebuie sa le cream: <frameset cols='*,*'>. Aceasta fiind forma finala trebuie acum sa precizez care este sursa pentru cele 2 noi coloane create.

<frame name=f4 src=4.htm noresize>

<frame name=f5 src=5.htm noresize>

Odata cu precizarea surselor coloanelor acesta trebuie inchis (</frameset>)

Totodata am terminat cu ambele linii, deci trebuie sa inchid frame-urile (</frameset>)

Observatie: in fisierul ce contine frame-uri nu trebuie sa avem tag-ul BODY, deci nu trebuie sa avem nimic in corpul documentului. Fisierele precizate ca sursa a coloanelor trebuie macar sa existe, chiar daca nu avem nimic scris in ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm – trebuie sa existe).



Aplicatie rezolvata

Scrieti codul sursa pentru realizarea urmatoarei pagini de WEB:

Observatie. Continutul existent in partea din stanga, partea centrala si partea de jos apare numai dupa ce ati executat click pe textul aici situat in partea de sus.

Rezolvare:

Fisierul de creare al frame-urilor (Frame.htm) contine urmatorul cod sursa:

Observatie. Frame-urile din stanga nu au nici o sursa, deoarece acestea vor fi completate numai dupa ce execut click stanga pe textul aici din fisierul sursa SUS.htm.

Fisierul SUS.htm contine urmatorul cod sursa:

Observatie Atributul TARGET din cadrul tag-ului <A href = ……> …..</A> are ca obiectiv afisarea conexiunii in frame-ul cu numele precizat in TARGET si nu in cadrul aceluiasi frame (vezi ce nume am dat frame-urilor (name) in fisierul FRAME.htm si localizeaza locul cadranului in care este precizat <A href= …..>…..</A> ce contine atributul TARGET – fisierul Sus.htm este ca sursa pentr cadranul din partea de sus.).

Fisierul STANGA.HTM (vezi SUS.HTM – este precizast aici ca referinta (href)) curpinde:

Fisierul Central.HTM (vezi SUS.HTM – este precizast aici ca referinta (href)) curpinde:

Fisierul Jos.HTM (vezi SUS.HTM – este precizast aici ca referinta (href)) curpinde:


Tag-uri pentru realizarea frame-urilor interne

Pentru realizarea frame-urilor interne se foloseste tag-ul:

<IFRAME SRC='fisierul dorit ' NAME='FINTERN1' WIDTH='400' HEIGHT='150'

FRAMEBORDER='1'

ALIGN='LEFT/CENTER/RIGHT'

SCROLLING=YES/NO>

</IFRAME>

Exemplu: Fisierul X.htm se prezinta astfel:

Site-urile se vor afisa in acest cadru intern.

 

Codul sursa al acestei pagini este:

Observatie: Pentru frame-ul intern (numit FI1 – frame intern 1) din celula stanga se foloseste fisierul A.htm, iar pentru frame-ul intern (numit FI2 – frame intern 2) din dreapta, se foloseste fisierul B.htm.

Codul sursa al fisierului A.htm este:

Codul sursa al fisierului B.htm este foarte simblu, avand numai culoarea de fundal „pink”..

Tag-uri pentru realizarea imaginilor reactive

O imagine reactiva este o imagine obisnuita asupra careia se definesc zone de actiune diferite (patrat, cerc, poligon, etc.)

La definirea unei zone rectangulare trebuie specificate coordonatele coltului din stanga sus si ale celui din dreapta jos. La definirea unei zone de cerc trebuie specificate coordonatele centrului cercului, precum si dimensiunea razei cercului, iar la definirea unei zone poligonale trebuie precizate coordonatele tuturor colturilor ce formeaza poligonul.

Sugestie

Pentru aflarea tuturor coordonatelor se va plasa poza in progranul PAINT, iar apoi se pozitioneaza mouse-ul pe zonele de demarcatie dorite, notandu-se separat coordonatele fiecarui colt, dupa caz. Aceste coordonate vor fi scrise in cadrul tag-ului corespunzator in NOTEPAD.

Aplicatie rezolvata

Sa se scrie codul sursa pentru realizarea urmatoarei pagini WEB:

Oval: 1Oval: 2 - lungimea razeiOval: 4Oval: 5Oval: 3Oval: 2Oval: 1Oval: 2Oval: 1

263 pixeli

 

368 pixeli

 

Rezolvare

Poza de pe pagina de WEB are dimensiunea: Width (lungimea) = 368 pixeli si Height (inaltimea) = 263 pixeli.

Pe aceasta se regasesc trei zone de actiune:

o zona rectangulara, ce are coordonatele: 198, 40 si

o zona de cerc, ce are coordonatele:

o zona poligon, ce are coordonatele: 286, 68 si

Dupa ce s-au stabilit coordonatele celor trei zone reactive de pe imaginea suport se poate trece la scrierea codului sursa. Acesta este:

html>

<head>

<title>Exemplu de imagine reactiva</title>

</head>

<body>

Aici este o singura poza in care avem mai multe zone reactive, zone ce interactioneaza diferit la un clic de mouse.

<p>

<Map name='Poza noastra'>

<area shape='rectangle' coords='198, 40 217, 55' href='mailto:georgescu@ase.ro'>

<area shape='circle' coords='210, 180, 7' href='Http://www.electrice.ro'>

<area shape='polygon' coords='266, 68 267, 87 286, 87 286, 68 276, 39' href='Alta pagina.html'>

</Map>

<img Usemap='#Poza noastra' border='3' src='J0149118.JPG' width='386' height='263'>

</body>

</html>

Dupa cum se observa, pentru inceput a fost necesara crearea hartii pozei de pe pagina de WEB. Pentru aceasta s-a folosit tag-ul <Map>……</Map>, un tag mai complex. In interior tag-ului de inceput si sfarsit, <Map>, se regaseste tag-ul <Area>, iar atributul Shape defineste practic zonele reactive din imaginea nostra. Valorile luate de acest atribut trebuie sa specifice forma zonei reactive. Astfel, Rectangle sau Rect – forma rectangulara, Circle sau Circ– cerc, Polygon sau Poly– poligonul (mai multe laturi).

Atributul Coords permite specificarea coordonatelor zonelor reactive pe tipuri de forme (rectangulara, cerc sau polign).

Atributul Href are rolul de o specifica adresa, destinatia legaturilor din zonele reactive.

Includerea unei poze pe o pagina Web se face cu tag-ul <IMG>, cunoscut deja de la aplicatiile anterioare. Un atribut nou, Usemap, ne permite specificarea faptului ca poza ce se doreste a fi inclusa pe pagina de Web, are in cazul de fata, cele trei zone reactive la coordonatele specificate mai sus. Foarte importante sunt si atributele WIDTH si HEIGHT, deoarece harta zonelor reactive de pe poza noastra a fost facuta pe dimesiunile specificate ale pozei, adica pe Width (lungimea) = 368 pixeli si Height (inaltimea) = 263 pixeli. Aceasta inseamna ca in coltul din stanga sus al pozei se afla coordonatele 0,0, iar in coltul din dreapta jos se afla coordonatele 368, 263. Asadar, intre aceste coordonate s-au stabilit si zonele reactive.

Atentie, nu este corect sa avem o zona reactiva in afara dimensiunilor pozei din pagina Web.

Tag-uri pentru realizarea foilor de stil – de citit din cartea „Bazele tehnologiei informatiei si comunicatiilor” – Tamas si altii, Ed. InfoMega, Bucuresti, 2005.






Politica de confidentialitate



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 697
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2021 . All rights reserved

Distribuie URL

Adauga cod HTML in site