Limbajul HTML Complet

Limbajul HTML Pagina 1 din 19

La crearea unei pagini WEB se parcurg paşii:

1. StartProgramsAccessoriesNOTEPAD.

2. Editarea codului sursă ( a tag-urilor) în editorul de texte NOTEPAD.

3. Salvarea codului sursă sub forma unui fişier cu extensia HTM sau HTML (obligatoriu). Fişierul va fi salvat în folderul dvs.

4. Localizarea fişierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fişier va avea

pictograma următoare: .

5. Lansarea în execuţie a fişierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tag-urile scrise în Notepad pe Internet) – dublu click pe fişier şi astfel se va deschide programul Internet Explorer.

6. Modificarea codului sursă se va face în Notepad. Deschiderea fişierului pentru ai modifica sursa se poate face:

a. NotepadFileOpen ...

b. Direct din fereastra ce s-a deschis la pasul 5 (fereastra Internet Explorer) astfel: ViewSource (va deschide automat Notepad-ul).

Orice modificare adusă codului sursă trebuie salvată (FileSave). Pentru a vedea şi pe Internet modificarea făcută în Notepad trebuie, fie să repetăm paşii 4 şi 5, fie să revenim în fereastra Internet Explorer (ea este deja deschisă – vezi bara de START) şi să alegem din meniul ViewRefresh (sau apăsă tasta F5)

Observaţie: Pentru o nouă modificare a codului sursa se va repeta pasul 6.

TAG-uri UTILZATE

Structura generală a unui fişier cu extensia HTM sau HTML este:

Observaţie: un tag se va scrie întotdeauna încadrat de semnele < >. Efectul unui tag este vizibil pâna când acesta este închis (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 întregii pagini web

Început şi sfârşit de document html

Antetul documentului

Corpul propriu-zis al documetului

Titlul paginii


<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a paginii Web, culoarea implicită de scriere a textului, culoarea legăturilor, culoarea legăturilor vizitate, culoarea legăturilor de acţiune.

Atributul BGCOLOR stabileşte culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de fundal va fi albastră – sau <body bgcolor = 804050> (formatul de culoare este RRGGBB – roşu, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal))

Atributul TEXT permite stabilirea culorii implicite de scriere pe întreaga pagină Web (Ex: <body Text = red> – tot textul pe pagina de Web va scris cu roşu)

Atributul LINK permite stabilirea culorii unei legături (vezi tag-urile de la legături). Implicit aceasta este albastră. (Ex: <body link = green> - legăturile vor avea culoarea verde)

Atributul Vlink permite stabilirea culorii unei legături vizitate (Ex: <body vlink = red> – un link vizitat va avea culoarea roşie)

Atributul ALINK permite stabilirea culorii unei legături de acţiune, adică pâna la realizarea conexiunii stabilite de legătură (vezi tag-urile de la legături) link-ul va avea culoarea stabilită prin ALINK, iar după realizarea conexiunii acesta culoare va devenii automat cea specificată cu VLINK (Ex: <body alink = yellow> - un link în acţiune va avea culoarea galbenă)

OBS. Un tag poate folosi toate atributele de care dispune sau numai o parte din acestea (Ex: <body bgcolor = red text = yellow link = gray> Dacă dorim ca pe o pagină Web să avem ca fundal o poză, atunci în locul atributului BGCOLOR vom folosi atributul BACKGROUND urmând a specifica adresa pozei respective (Ex: <body background = “c:\student\poza.gif” text = red ……>

<bgsound src= „Fişier muzică”> - permite ascultarea pe fundalul paginii Web a unei melodi.

Tag-uri pentru formatarea caracterelor şi aranjarea textului

<b> - permite scrierea caracterelor îngroşat (bold)

<i> - permite scrierea caracterelor înclinat (italic)

<u> - permite scrierea caracterelor subliniat (underline)

<center> - permite alinierea pe centru a textului pe pagină

<p align = left/right/center>permite alinierea la stânga/dreapta/centru a textului pe pagină

<br> - întrerupe linia curentă şi trece textul sau imaginea pe următoarea linie

<p> - întrerupe linia curentă şi trece textul sau imaginea la paragraful următorObs. <p> este echivalentul lui <br><br> (de două 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 monospaţiat (Ex: <tt>Este cel mai bine</tt>

<hr size = a color = b width = c align = left/right/center > - plasează o linie orizontală în document.


Atributul SIZE defineşte 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 roşie - sau color = 804050 (formatul de culoare este RRGGBB – roşu, verde, albastru) sau color = 15%85%95% sau color = aaffcc (formatul hexazecimal))Atributul WIDTH specifică lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontală o să ocupe numai 45% din suprafaţa paginii web) Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stânga/dreapta/centru)

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

Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> – textul va fi scris cu albastru. Observaţie: Acest parametru are prioritate faţă de acelaşi atribut din tag-ul <body text = b>. Aşadar, dacă se stabileşte o culoarea a textului pe întreaga pagină Web pe roşu - <body text=red> - şi doresc să scriu un cuvânt cu ablastru atunci voi folosi tag-ul <font color=blue> înaintea cuvântului pe care doresc să-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul <font color=blue> are prioritate faţă de tag-ul <body text=red>.

Atributul SIZE stabileşte dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existând 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 poştale, a unui telefon

<marquee direction = left/right behavior = Scroll/Slide/Alternate>….Text sau imagine ….</marquee> - permite realizarea unei animaţii a textului, în sensul deplasării acestuia pe ecran

Tag-uri pentru includerea unei imagini în cadrul paginii Web

<img src = “ “ border = a width = c height = d align = left/right/center alt = “ “> - acest tag permite amplasare unei imagini în 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:\student\poza.gif”> - va plasa pe pagina de Web fişierul poza.gif existent în folderul c:\student

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

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

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

Atributul ALIGN permite alinierea imaginii respective în cadrul paginii Web (Ex: <img src=”c:\student\poza.gif” align = left> - poza va fi aliniată la stânga)

Atributul ALT permite scrierea unui text care va apare numai atunci când utilizatorul este poziţionat cu mouse-ul pe imaginea respectivă (Ex: <img src=”c:\student\poza.gif” align = left alt = ”Poza aceasta este din secolul trecut”>)

<img dynsrc=”Fişier 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 listă<li>Al doilea element din listă<li>Al treilea element din listă

</ol>- permite realizarea unei liste ordonate. O lista este ordonată dacă elementele ei au o numerotare în faţă

(ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specifică de la cât să înceapă numerotarea în lista

Ex: <ol type = a start =1><li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ol>Ex: <ol type = A start =3>

<li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ol>Ex: <ol type = 1 start =5>


</ol>Ex: <ol type = I start =3>


</ol>

<ul type = a><li>Primul element din listă<li>Al doilea element din listă<li>Al treilea element din listă

</ul>- permite realizarea unei liste neordonate. O lista este neordonată dacă elementele ei nu au o numerotare în faţă

(sunt neordonate), ci doar semne care să identifice elementul din listă

Atributul TYPE permite specificarea tipului de semn al elementului din listă

Ex: <ul type = Square><li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ul>Ex: <ul type = Disc>


</ul>

Ex: <ul type = Circle><li> Primul element din listă <li> Al doilea element din listă


<li> Al treilea element din listă </ul>

<dl><dt>Student

<dd>O persoană înscrisă la o instituţie de învăţământ superior<dt>Profesor universitar

<dd>Cadru didactic la o instituţie de învăţământ superior</dl>

- permite realizarea unei liste cu definiţii. Tag-ul <dt> precizează termenul pe care vrem să-l definim în cadrul listei cu definiţii, iar tag-ul <dd> defineşte termenul pe care vrem să-l definim.Ex:

Tag-uri pentru realizarea legăturilor

Tag-ul pentru realizarea legăturilor este:

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

În funcţie de locul unde vreau să ajung distingem trei tipuri de legături: interne, locale şi externe.

A. Legătura internă - permite realizarea unei legături în cadrul aceluiaşi fişier (de exemplu de la cuprinsul unei cărţi ce cuprinde capitolele existente în cartea respectivă să se relizeze o conexsiune către conţinutul unui capitol). Schematic se distinge astfel:

Fişierul A.htm

Ex: presupunem că avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se află pe pagina 1) doresc a fi o punte de legătură între el şi conţinutul fiecărui capitol (adică dacă dau click stânga de mouse pe capitolul 3 să mă poziţioneze direct pe conţinutul capitolului 3 care se află, de exemplu la pagina 185. Cum voi proceda ?

1. Realizarea cuprinsului ca punte de legătură între el şi conţinutul fiecărui capitol (pe pagina 1).2. Deplasare la pagina 185 şi realizarea unui semn de carte pentru a şti unde anume să-mi poziţioneze

cursorul atunci când execut click stânga de mouse pe textul de legătură.

Ex:

Suntem pe pagina 1 şi realizăm 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>După cum se observă Capitolul 3 a fost trecut ca text de legătură (vezi sintaxa tag-ului <A href = …. >…..</A>) pentru a putea executa click stânga de mouse şi a ne trimite apoi la pagina 185(conform enunţ exemplu).

“#Continutul capitolului 3” este numele semnului de carte de la pagina 185. Aşa am vrut să numesc semnul de carte (puteam să-i dau orice alt nume cu spaţii sau fără spaţii, dar dacă are spaţii atunci acest nume de semn de carte trebuie pus între ghilimele)

Deplasare la pagina 185 în cadrul cărţii respective. Această deplasare o realizăm cu bara de defilare sau cu tasta PageDown, deoarece acesta este locul în care vreau să mă poziţioneze cu mouse-ul după ce dau click pe textul de legătură.La această pagină vom crea un semn de carte cu numele “#Continutul capitolului 3” astfel: <A name = “#Continutul capitolului 3”>

După ce am definit semnul de carte la pagina 185 putem să ne deplasăm de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legătură şi numai este nevoie de tasta PageDown sau de bara de defilare.Obs: Fişierul HTML trebuie să aibă cel puţin 185 de pagini.

B. Legătura locală – permite realizarea unei conexiuni cu un fişier existent pe calculatorul local

Fişierul A.htmFişierul B.htm sau orice altă

extensie

Ex: În fişierul A.Htm avem următorul tag: <A href = “c:\student\B.doc”>Click aici</a> - dacă executaţi click stânga de mouse pe textul Click aici atunci se va realiza o conexiune cu fişierul B.doc existent pe c:\student. Observaţie: de data aceasta nu mai este nevoie de un semn de carte.

Dacă însă avem două fişiere cu extensia htm (fisierul1.htm şi fisierul2.htm) şi dorim să ne deplasăm din fişierul1.htm în fişierul2.htm la pagina 200, atunci în fişierul1.htm vom scrie:

<A href = “c:\student\fisierul2.htm#Semnul de carte de la pagina 200”>Către fişierul 2</a>

Observaţie: La pagina 200 din fişierul2.htm voi merge şi voi defini un semn de carte cu numele Semnul de carte de la pagina 200. Astfel am realizat o legătură localo-internă.


C. Legătura externă – permite realizarea unei conexiuni cu exteriorul (un site, un e-mail)

Fişierul A.htm

Ex: Legătură către un site

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

Ex: Legătură de transmitere a unui mesaj

<A href=mailto:[email protected]> Georgescu Nicolae </A> - permite transmiterea unei mesaj către căsuţa poştală a lui Georgescu Nicolae (numele este chiar text de legătură).

Observaţie generală: Până acum tot ce am făcut nu ne permite ca pe o pagină de Web să tastăm ceva, ci doar să citim

conţinutul paginii respective. Cum vom proceda atunci când utilizatorul doreşte de exemplu să scrie un mesaj, sau

doreşte să completeze un formular electronic în care trebuie să-şi tasteze numele şi prenumele, data naşterii,

domiciliu, .... etc, direct de pe Internet fără a mai fi nevoie să se deplaseze la sediul unei firme? Răspuns: utilizând

tag-uri care să permită realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obţin 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 analiză”> …..…..…..

</form>- permite realizarea de casete speciale pentru a putea scrie pe o pagina Web.

Atributul METHOD specifică modalitatea de transmitere a datelor către 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 între <form> ..şi ...</form>.

Casetă 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 casetă utilizată (text)Atributul Name permite specificarea numelui casetei de tip textAtributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile în caseta detip text)Atributul Maxlength permite specificarea numărului maxim de caractere ce poate fi scris în caseta de tip textAtributul Value permite specificarea textului implicit ce va apărea scris în caseta de tip text.

Exterior: Site sau Email

mailto:[email protected]

http://www.ase.ro/


Ex: Introduceţi numele şi prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = “Popescu Ion>

Observaţie. Caseta de tip text nu permite scrierea pe mai multe rânduri, ci doar pe unul singur.

Un exemplu mai sofisticat ce face apel la stiluri:

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

Casetă de tip parolă: <input type = Password name = a size = b maxlength = c value = d>- permite realizarea de casete de tip parolă Ex: Introduceţi parola<input type=password name=caseta2 size=15 maxlength=12 value="Popescu Ion">

Casetă de tip checkbox <input type=checkbox name = a>

Ex: Care sunt limbile străine cunoscute: <input type=checkbox name = a>Engleză <input type=checkbox name = b>Franceză <input type=checkbox name = c>Germană

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

Ex: Care este ţara de origine: <input type = radio name = a>România <input type=radio name = a>SUA<input type=radio name = a>Germania

Observaţie. Numele radio butoanelor trebuie să fie acelaşi, deoarece ţara de origine este numai una singură ori dacă butoanele radio nu au acelşi nume se pot selecta toate ţările.

Buton de trimitere a datelor către 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 ştergere a datelor <input type=Reset name=a value = “Sterge datele”>

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

Buton obişnuit < input type=button name=a value=”Calculeaza valoare din coş”>


Casetă de tip multilinie

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

Atributul Rows permite precizarea numărului de linii vizibile în cadrul acestei casete de tip multilinie. Numărul liniilor ce poate fi scris în această casetă este cu mult mai mare, dar vizibile pe ecran sunt cele precizate în Rows, pentru restul liniilor ne vom deplasa cu bare de defilare care va apare automat dacă numărul de linii este mai mare decât cel precizat cu Rows.

Atributul Cols permite precizarea numărului de caractere de pe coloană (un caracter = o coloană).

Ex: <Textarea rows=6 cols=15>Tastaţi mesajul dvs.</textarea>

Observaţie. Verificaţi numărul liniilor precizate cu Rows şi numărul caracterelor pe coloană precizate cu Cols.

Casetă 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 (listă derulantă)

Ex:

Observaţie. Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizează o selectie implicită a acestei opţiuni.


Casetă de tip listă derulantă cu selectie multiplă<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 numărului de opţiuni vizibile în cadrul listei respective.

Ex:

Observaţie. În listă avem 5 ţări dar vizibile avem numai 4 dintre ele datorită atributului SIZE=4. Pentru a vedea şi cea de-a 5-a ţară ne deplasăm cu bare de defilare verticală. Pentru a selecta mai multe ţări trebuie să ţinem şi tasta CTRL apasătă.

Tag-uri pentru realizarea tabelelor

La realizarea tabelelor folosim următoarele 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 tabeluluiAtributul CELLSPACING permite stabilirea spaţiului dintre celulele unui tableAtributul CELLPADING permite stabilirea spaţiului dintre textul din interiorul unei celule şi liniile acesteia.Atributul WIDTH stabileşte suprafaţa pe care să o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule.Atributul BORDERCOLOR permite stabilirea culorii liniilor tabeluluiAtributul BGCOLOR permite stabilirea culorii de fundal a liniei (în tag-ul TR) sau celulei (în tag-ul TD). Dacă nu dorim pe fundal o culoare ci o poză atunci folosim în loc de BGCOLOR atributul BACKGROUND urmând a preciza care este adresa pozei de fundal.Atributul ALIGN permite alinierea pe orizontală a textului în linia/celula respectivăAtributul VALIGN permite alinierea pe verticală a textului în linia/celula respectivăTAG-ul TR – crează o linie în cadrul tabelului respectiv. Deci câte linii are tabelul atâtea TR trebuie să avem (cheie de control). Atributele din TR au efect asupra întregi linii.TAG-ul TD – creează o celulă pe linia respectivă. Deci câte celule are tabelul respectiv atâtea TD trebuie să avem (cheie de control). Atributele din TD au efect asupra celulei curente.


Ex:

Observaţie. Atributele folosite în cadrul tag-ul TD au prioritate faţă de cele folosite în cadrul tag-ului TR. În cadrul tag-ului TD se poate folosii simultan şi atributul ROWSPAN şi COLSPAN semnificând faptul că celula respectivă este unită peste X linii şi Y coloane.ATENŢIE: urmăriţi culorile liniilor pentru a înţelege cum se realizează un tabel. Anumitor celule le-am schimbat culoare pentru a vedea prioritatea dintre TR şi 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 când vrem ca ecranul monitorului să fie împărţit plecând de la crearea mai întâi a liniilor frame-urilor şi pe urmă a coloanelor frame-urilor de pe un monitor. Această alegere o facem în fucţie de liniile sau coloanele pe care vrrem să le avem ca despărţitoare de frame-uri (cadre) de pe monitor şi anume Ce avem dintr-un capăt în altul al monitorului? – linie despărţitoare sau coloană despărţitoare. Dacă avem linii, obligatoriu trebuie să pornim cu tag-ul <frameset rows = a frameborder = yes/no>, iar dacă avem coloană cu tag- ul <frameset cols = a frameborder = yes/no>. Dacă avem şi linii şi coloane care unesc capetele monitorului (pe orizontală şi pe verticală) atunci începem crearea frame-urilor de la linii sau de la coloane.Presupunem ca vrem să împărţim ecranul astfel:

Observaţie. Dintr-un capăt la ecranului în altul nu ajunge decât o linie. Aşadar ecranul este împărţit în două linii dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori cât 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 împărţită şi în trei coloane egale. deci trebuie să creăm coloanele respective <frameset cols="*,*,*">. Odată ce am creat coloanele respective, deoarece aceasta este forma finală a primei linii, trebuie să precizăm care este sursa pentru fiecare coloană în parte de pe prima linie. Pentru că doresc să nu aibe posibilitatea redimensionării frame-urilor voi folosi şi atributul NORESIZE atunci când precizez sursa fiecărui cadru în parte.

<frame name=f1 src=1.htm noresize><frame name=f2 src=2.htm noresize><frame name=f3 src=3.htm noresize>


Odată cu precizarea surselor coloanelor acesta trebuie închis (</frameset>)Deci cu prima linie am terminat. Urmează a doua linie.

Aceasta este şi ea împărţită în 2 coloane egale, deci trebuie să le creăm: <frameset cols="*,*">. Aceasta fiind forma finală trebuie acum să precizez care este sursa pentru cele 2 noi coloane create.

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

Odată cu precizarea surselor coloanelor acesta trebuie închis (</frameset>)Totodată am terminat cu ambele linii, deci trebuie să închid frame-urile (</frameset>)

Observaţie: în fişierul ce conţine frame-uri nu trebuie să avem tag-ul BODY, deci nu trebuie să avem nimic în corpul documentului. Fişierele precizate ca sursă a coloanelor trebuie măcar să existe, chiar dacă nu avem nimic scris în ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm – trebuie să existe).

Aplicaţie rezolvată

Scrieţi codul sursa pentru realizarea următoarei pagini de WEB:

Observaţie. Conţinutul existent în partea din stânga, partea centrala şi partea de jos apare numai după ce aţi executat click pe textul aici situat în partea de sus.

Rezolvare:

Fişierul de creare al frame-urilor (Frame.htm) conţine următorul cod sursă:


Observaţie. Frame-urile din stânga nu au nici o sursă, deoarece acestea vor fi completate numai după ce execut click stânga pe textul aici din fişierul sursă SUS.htm.

Fişierul SUS.htm conţine următorul cod sursă:

Observaţie. Atributul TARGET din cadrul tag-ului <A href = ……> …..</A> are ca obiectiv afişarea conexiunii în frame-ul cu numele precizat în TARGET şi nu în cadrul aceluiaşi frame (vezi ce nume am dat frame-urilor (name) în fişierul FRAME.htm şi localizează locul cadranului în care este precizat <A href= …..>…..</A> ce conţine atributul TARGET – fişierul Sus.htm este ca sursă pentr cadranul din partea de sus.).

Fişierul STÂNGA.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde:



Fişierul Central.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde:

Fişierul Jos.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde:


Tag-uri pentru realizarea frame-urilor interne

Pentru realizarea frame-urilor interne se foloseşte tag-ul:

<IFRAME SRC="fisierul dorit " NAME="FINTERN1" WIDTH="400" HEIGHT="150" FRAMEBORDER="1"

ALIGN="LEFT/CENTER/RIGHT" SCROLLING=YES/NO>

</IFRAME>Exemplu: Fişierul X.htm se prezintă astfel:

Codul sursă al acestei pagini este:

Observaţie: Pentru frame-ul intern (numit FI1 – frame intern 1) din celula stângă se foloseşte fişierul A.htm, iar pentru frame-ul intern (numit FI2 – frame intern 2) din dreapta, se foloseşte fişierul B.htm.

Site-urile se vor afişa în acest cadru intern.


Codul sursă al fişierului A.htm este:

Codul sursă al fişierului B.htm este foarte simblu, având numai culoarea de fundal „pink”..

Tag-uri pentru realizarea imaginilor reactive

O imagine reactivă este o imagine obişnuită asupra căreia se definesc zone de acţiune diferite (pătrat, cerc, poligon, etc.)La definirea unei zone rectangulare trebuie specificate coordonatele colţului din stânga sus şi 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 colţurilor ce formează poligonul.

Sugestie:Pentru aflarea tuturor coordonatelor se va plasa poza în progranul PAINT, iar apoi se poziţionează mouse-ul

pe zonele de demarcaţie dorite, notându-se separat coordonatele fiecărui colţ, după caz. Aceste coordonate vor fi scrise în cadrul tag-ului corespunzător în NOTEPAD.

Aplicaţie rezolvată

Să se scrie codul sursă pentru realizarea următoarei pagini WEB:

Rezolvare

263 pixeli 3 6 8 p i x e l i

1

2

1

2

3

4

5

1

2 - lungimea razei


Poza de pe pagina de WEB are dimensiunea: Width (lungimea) = 368 pixeli şi Height (înălţimea) = 263 pixeli.Pe aceasta se regăsesc trei zone de acţiune:

o zonă rectangulară, ce are coordonatele: 198, 40 şi 217, 55 o zonă de cerc, ce are coordonatele: 210, 180, 7 o zonă poligon, ce are coordonatele: 266, 68 267, 87 286, 87 286, 68 şi 276, 39

După ce s-au stabilit coordonatele celor trei zone reactive de pe imaginea suport se poate trece la scrierea codului sursă. 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:[email protected]">

<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 pagină.html"> </Map>

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

</html>

După cum se observă, pentru început a fost necesară crearea hărţii pozei de pe pagina de WEB. Pentru aceasta s-a folosit tag-ul <Map>……</Map>, un tag mai complex. În interior tag-ului de început şi sfârşit, <Map>, se regăseşte tag-ul <Area>, iar atributul Shape defineşte practic zonele reactive din imaginea nostră. Valorile luate de acest atribut trebuie să specifice forma zonei reactive. Astfel, Rectangle sau Rect – formă rectangulară, Circle sau Circ– cerc, Polygon sau Poly– poligonul (mai multe laturi). Atributul Coords permite specificarea coordonatelor zonelor reactive pe tipuri de forme (rectangulară, cerc sau polign). Atributul Href are rolul de o specifica adresa, destinaţia legăturilor din zonele reactive.

Includerea unei poze pe o pagină Web se face cu tag-ul <IMG>, cunoscut deja de la aplicaţiile anterioare. Un atribut nou, Usemap, ne permite specificarea faptului că poza ce se doreşte a fi inclusă pe pagina de Web, are în cazul de faţă, cele trei zone reactive la coordonatele specificate mai sus. Foarte importante sunt şi atributele WIDTH şi HEIGHT, deoarece harta zonelor reactive de pe poza noastră a fost făcută pe dimesiunile specificate ale pozei, adică pe Width (lungimea) = 368 pixeli şi Height (înălţimea) = 263 pixeli. Aceasta înseamnă că în colţul din stânga sus al pozei se află coordonatele 0,0, iar în colţul din dreapta jos se află coordonatele 368, 263. Aşadar, între aceste coordonate s-au stabilit şi zonele reactive. Atenţie, nu este corect să avem o zonă reactivă în afara dimensiunilor pozei din pagina Web.

Tag-uri pentru realizarea foilor de stil – de citit din cartea „Bazele tehnologiei informaţiei şi comunicaţiilor” – Tamaş şi alţii, Ed. InfoMega, Bucureşti, 2005.

Date post:	15-Feb-2015
Category:	Documents
Upload:	mitudoran
View:	78 times
Download:	11 times

Limbajul HTML Complet

Documents