An1 Limbajul HTML Seminar

Limbajul HTML Pagina 1 din 18
La crearea unei pagini WEB se parcurg paşii:
1. StartProgramsAccessoriesNOTEPAD.
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. NotepadFileOpen ...
b. Direct din fereastra ce s-a deschis la pasul 5 (fereastra Internet Explorer) astfel: ViewSource (va
deschide automat Notepad-ul).
Orice modificare adusă codului sursă trebuie salvată (FileSave). 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 ViewRefresh (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:
Început şi sfărşit de
<html> document html
<head>
Titlul paginii <title> ……………</title> Antetul documentului
</head>
<body>
…….. Corpul propriu-zis
…….. al documetului
……..
</body>
</html>
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
<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ător
Obs. <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 behavoir = 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>
</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>

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


</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.
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>

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 B.htm
Fişierul A.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 Exterior: Site sau Email
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:Georgescu@yahoo.com> 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 text
Atributul 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 text
Atributul Value permite specificarea textului implicit ce va apărea scris în caseta de tip text.
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 tabelului
Atributul CELLSPACING permite stabilirea spaţiului dintre celulele unui table
Atributul 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 tabelului
Atributul 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>
</frameset>
<frameset cols="*,*">
</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.
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.
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:
Site-urile se vor
afişa în acest
cadru intern.
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.
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:
1 1
26
2
3
pix 2
eli 5 3
1 4
2 - lungimea razei
3 6 8 p i x e l i
Rezolvare
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: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 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.

An1 Limbajul HTML Seminar

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

An1 Limbajul HTML Seminar

Încărcat de

Drepturi de autor:

Formate disponibile

Limbajul HTML Pagina 1 din 18

La crearea unei pagini WEB se parcurg paşii:

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

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

Titlul paginii <title> ……………</title> Antetul documentului

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ă

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

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

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

<ul type = a>

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

Ex: <ul type = Square>

Ex: <ul type = Circle>

<li> Al doilea element din listă

Tag-uri pentru realizarea legăturilor

Tag-ul pentru realizarea legăturilor este:

Suntem pe pagina 1 şi realizăm curpinsul.

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

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

Fişierul A.htm Exterior: Site sau Email

Ex: Legătură către un site

Ex: Legătură de transmitere a unui mesaj

Tag-uri pentru realizarea formularelor

Atributul Type permite specificarea tipului de casetă utilizată (text)

Un exemplu mai sofisticat ce face apel la stiluri:

Introduceţi numele dvs: <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana;

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

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

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

Casetă de tip multilinie

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

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

Casetă de tip combobox

Casetă de tip listă derulantă cu selectie multiplă

Tag-uri pentru realizarea tabelelor

La realizarea tabelelor folosim următoarele tag-uri:

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

Tag-urile pentru realizarea frame-urilor sunt:

<frameset rows = a frameborder = yes/no>

Odată cu precizarea surselor coloanelor acesta trebuie închis (</frameset>)

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

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

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"

Codul sursă al acestei pagini este:

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

Tag-uri pentru realizarea imaginilor reactive

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

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

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

S-ar putea să vă placă și