 |
|
 |  |
|
|
| |
 | Biologie | Chimie | Didactica | Fizica | Geografie | Informatica |
| Istorie | Literatura | Matematica | Psihologie |
Pagini WEB cu HTML 4.0
Mihai Scortaru
In acest episod vom incheia prezentarea generala a limbajului HTML. Veti afla mai multe informatii despre modelele de stiluri introduse de specificatiile CSS si diferite artificii utile pentru imbunatatirea calitatii paginilor dumneavoastra. Serialul despre crearea paginilor Web nu se va incheia aici, deoarece exista multe alte domenii care pot fi cercetate cum ar fi: limbajul VRML, noua specificatie XML 1.0 care, probabil, se va impune ca standard pentru crearea paginilor Web, precum si limbajul SMIL pentru crearea de prezentari multimedia pe Web.
Implementarea suportului pentru specificatiile CSS (Cascading Style Sheets) a reprezentat o adevarata revolutie in crearea paginilor Web. Dintre toate noutatile si modificarile introduse de specificatiile HTML 4.0 nici una nu este mai importanta si mai utila decat modelele de stiluri. In cadrul versiunilor HTML anterioare existau numai indicatii de formatare cum ar fi tag-urile <B>, <H2> etc., iar browserul decidea (in functie de felul in care a fost configurat) modul in care informatiile vor aparea pe ecran. Modelele de stiluri permit proiectantilor de pagini Web sa defineasca anumite caracteristici pentru orice tag HTML. Pot fi astfel definite dimensiunea, tipul sau culoarea fontului, precum si multe alte caracteristici.
Modele de stiluri
Cu ajutorul modelelor de stiluri poate fi modificata spatierea liniilor, o margine a textului fara modificarea celeilalte etc O modalitate de a specifica modificari aduse stilurilor este folosirea atributului STYLE al diferitelor comenzi HTML cu conditia ca atributul TYPE al aceleiasi comenzi sa aiba valoarea text/css. In urmatorul exemplu va fi ilustrat modul de folosinta al acestor doua atribute:
<html>
<head>
<title> The Declaration of Independence
</title>
</head>
<body>
<p type='text/css'
style=' font-size: 14pt; font-family: sans-serif; font-weight: bold; text-align: center'>
THE DECLARATION OF INDEPENDENCE
<p type='text/css'
style=' font-size: 10pt; line-height: 10pt; font-family: helvetica; text-align: center'>
Action of Second Continental Congress, July 4, 1776 <BR>
The unanimous Declaration of the thirteen United States of America
<p type='text/css'
style='font:9pt/12pt times new roman;
text-indent: 5mm;
margin-left: 5mm'>
WHEN in the Course of human Events, it becomes necessary for one People to dissolve the Political bands which have connected them with another, and to assume among the Powers of the Earth, the separate and equal Station to which the Laws of Nature's God entitle them, a decent Respect to the Opinions of Mankind require they should declare the causes which impel them to the Separation.
<p type='text/css'
style='font:9pt/12pt times new roman;
text-indent: 5mm;
margin-left: 5mm'>
WE hold these Truths to be self-evident, that all Men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the Pursuit of Happiness
</body>
</html>
Fereastra browserului ar putea arata astfel:
Dupa cum observati valoarea atributului STYLE este destul de complicata. De fapt, sunt transmise mai multe atribute ale textului cum ar fi:
- dimensiunea fontului,
- distanta dintre doua linii consecutive,
- culoarea,
- distanta fata de una dintre margini etc.
O caracteristica a textului poate fi specificata cu ajutorul unei secvente de tipul:
Denumire_caracteristica: valoare_caracteristica
Cateva dintre caracteristicile stilurilor sunt:
- background, color;
- font-family, font-size, font-style, font-weight;
- line-height;
- margin-left, margin-right, margin-top;
- text-align, text-decoration si text-indent.
Cu ajutorul caracteristicii background poate fi specificata o imagine sau o culoare de fundal. Valoarea transmisa poate fi URL-ul imaginii, denumirea culorii sau valoarea RGB a culorii.
Exemplu: background: silver
Prin intermediul caracteristicii color putem specifica o culoare pentru afisarea textului, valoarea care este transmisa putand fi denumirea sau valoarea RGB a culorii.
Exemplu: color: white
Caracteristica font-family ne permite sa indicam tipul fontului, ea putand avea ca valori un font sau o familie de fonturi.
Exemplu: font-family: courier
Font-size este folosit pentru a indica dimensiunea fontului, valoarea transmisa fiind un numar urmat de unitatea de masura. Unitatile de masura admise sunt:
- puncte (pt); - toli (in);
- centimetri (cm); - pixeli(px).
Exemplu: font-size:12 pt - seteaza dimensiunea textului la 12 puncte tipografice.
Pentru a defini textele cursive vom folosi caracteristica font-style care poate lua valorile normal si italic.
Exemplu: font-style: italic
Grosimea fontului poate fi specificata cu ajutorul caracteristicii font-weight care poate avea ca valori:
extra-light, light, demi-light;
medium
demi-bold, bold si extra-bold.
Exemplu: font-weight: bold - scrierea unui text folosind caractere ingrosate
Distanta dintre liniile de baza ale caracterelor este indicata de caracteristica line-height. Valorile pe care le putem transmite sunt compuse dintr-un numar, urmat de o unitate de masura. Se accepta o noua unitate de masura si anume procentul (pc).
Exemplu: line-height:2 cm - distanta dintre liniile de baza a doua randuri de text este de 2cm.
Caracteristicile margin-left, margin-right, respectiv margin-top indica distantele pana la marginea stanga, marginea dreapta, respectiv marginea superioara a paginii. Valorile sunt aceleasi ca pentru caracteristica line-height.
Exemplu: margin-left: 15px.
Pentru a specifica alinierea textului va trebui sa folosim caracteristica text-align cu urmatoarele valori:
- left - aliniere la stanga;
- right - aliniere la dreapta;
- center - afisarea unui text centrat.
Exemplu: text-align: center.
Diferite modalitati de evidentiere a textului sunt oferite de caracteristica text-decoration care poate lua valorile:
- none - nimic;
- underline - subliniere;
- italic - cursiv;
- line-through - taiat.
Exemplu: text-decoration: underline - pentru a afisa un text subliniat
Ultima caracteristica pe care o vom prezenta este text-indent, ea putand fi folosita pentru indentarea primei linii a unui paragraf si acceptand aceleasi valori ca si line-height.
Exemplu: text-indent: 1 cm.
Dupa cum probabil ati observat, in exemplul anterior nu a fost respectata sintaxa care apare in specificatiile CSS. Aceasta se datoreaza faptului ca browserele ofera anumite prescurtari pentru a micsora timpul necesar introducerii informatiilor. Astfel comenzile devin:
<p type='text/css'
style='font-weight:bold;
font-size:12pt;
line-height:14pt;
font-family:helvetica'> si
<p type='text/css'
style= 'font: bold 12pt/14pt helvetica'>.
O alta posibilitate oferita de specificatiile CSS este setarea unor caracteristici pentru chenarele in care vor fi incadrate anumite elemente.
Exemplu:
Fisierul HTML care a dus la aparitia acestei ferestre este urmatorul:
<html>
<head> <title> CLA&E21S </title> </head>
<body>
<h1 type=text/css
style='text-align: center;
font: 0.5cm helvetica;
color: blue;
border-width: 0.25cm;
border-color: red;
border-style: groove'>
S.C. Electric 21 Service S.R.L.
</h1>
<h1 type=text/css
style='text-align: center;
font: 0.5cm arial;
color: aqua;
border-width: 0.25cm;
border-color: red;
background: yellow;
border-style: ridge'>
S.C. Computer LIBRIS Agora S.R.L.
</h1>
</body> </html>
Chenarul unui element poate fi afisat prin indicarea marimii sale si a catorva alte atribute. In exemplul anterior s-a stabilit dimensiunea de 0,25 cm, culoarea rosie si stilul groove. Valorile care pot fi transmise pentru caracteristica border-style sunt:
- none; - dotted;
- dashed; - solid;
- double; - ridge;
- inset; - outset.
Stiluri specificate in antet
Specificatiile HTML 4.0 ofera posibilitatea redefinirii efective a unor comenzi HTML prin intermediul tag-ului <STYLE> care apare in antetul documentului HTML. Sa presupunem ca doriti ca toate paragrafele sa fie scrise cu fontul Arial, sa aiba dimensiunea de 6 mm si sa fie aliniate la centru. Pentru a realiza acest lucru, antetul documentului ar trebui sa arate astfel:
<HEAD>
<STYLE type='text/css'>
<!--
P
-->
</STYLE>
</HEAD>
Din momentul in care ati creat aceasta definitie, orice utilizare a marcajului <H1> va determina utilizarea stilului specificat in antet. La fel ca si in cazul script-urilor, definitiile de stiluri ar trebui inglobate in comentarii HTML, pentru ca browserele mai vechi, care nu recunosc modelele de stiluri, sa nu interpreteze gresit comenzile date.
De asemenea, specificatiile CSS si HTML 4.0 permit crearea de noi tipuri de marcaje HTML. Sa presupunem ca doriti sa dispuneti de doua tipuri de paragrafe, unul pentru scrierea titlurilor si altul pentru scrierea strofelor unei poezii.
Exemplu
<html>
<head>
<title> Noi suntem romani!
</title>
<style type=text/css>
<!--
P.titlu
P.strofa
-->
</style>
</head>
<body>
<p class=titlu> Noi suntem romani!
<p class=strofa>
A sosit Ziua Dreptatii, <BR>
Ziua sfanta-a Libertatii, <BR>
Tot romanul veseleste, <BR>
Romania'ntinereste!
</body>
</html>
Pagina browser-ului ar putea arata astfel:
Cea mai importanta utilitate a acestei facilitati o reprezinta posibilitatea de a schimba cateva caractere in antetul documentului. Pentru a modifica o intreaga pagina Web, fara a mai fi nevoie de modificari plictisitoare pentru fiecare element.
Fisiere .CSS
Specificarea tuturor stilurilor dorite la inceputul documentului poate economisi timp, dar pentru mai multe pagini Web ar trebui scrise toate specificatiile la inceputul fiecarui document.
Pentru a economisi timpul necesar pentru copierea acestor informatii dintr-o pagina in alta, modelele de stiluri pot fi salvate in fisiere cu extensia css. Acest fisier va trebui incarcat in antetul fiecarei pagini care utilizeaza stilurile respective.
Exemplu
<html>
<head>
<title> Fisier .CSS
</title>
<link rel=stylesheet
href='stiluri.css'
type=text.css>
</head>
<body>
</body>
</html>
Link-uri cu dimensiuni variabile
Un artificiu interesant pe care il puteti folosi pentru a imbunatati calitatea paginilor dumneavoastra WEB este acela de a modifica dimensiunile link-urilor in momentul in care acestea au fost vizitate.
Exemplu
<html>
<head>
<title> Link-uri cu dimensiuni variabile
</title>
<style type=text/css>
A: link
A: visited
</style>
</head>
<body>
<a href='pagina_vizitata.shtml'>
Pagina vizitata
</a> <BR>
<a href='pagina_nevizitata.shtml'>
Pagina nevizitata
</a>
</body> </html>
La un moment dat, fereastra browserului ar putea arata astfel:
Controlul amplasarii elementelor in pagina
O alta facilitate oferita de specificatiile CSS o reprezinta posibilitatea de a realiza un control precis al amplasarii elementelor in pagina, chiar de a suprapune sau a suprascrie unele elemente.
Exemplu
<html>
<head>
<title> Suprapuneri
</title>
<style type=text/css>
#background
#foreground
</style>
</head>
<body>
<p align=center>
<span id=background> Computer PRESS Agora
</span>
<p type=text/css
style='font:bold 50px;
margin-top: -200px;
text-align: center;'>
<span id=foreground>
Gazeta de Informatica<BR>
PC Report & Byte<BR>
PC Magazine
</span>
<p style='text-align: center;
font: bold 25px serif;'
type=text/css>
Cele mai interesante publicatii din domeniul IT&C!!!
</body> </html>
Cel mai important atribut de stil utilizat in acest exemplu este margin-top:-200px, aceasta caracteristica determinand ca marginea superioara a urmatorului text sa fie mai 'inalta' cu 200 de pixeli decat in mod normal.
Este fructificat si un alt avantaj al unei metode de utilizare a modelelor de stiluri: utilizand atributul ID a fost creat un alt tip de specificatie de model de stil care poate fi utilizata asemenea unui macrou asemanator celor din Microsoft Word. ID-urile sunt definite cu ajutorul prefixului '#' in cadrul comenzii <STYLE> si sunt folosite in cadrul documentului prin sintaxa:
ID=nume_identificator
Un alt tag folosit este <SPAN> care permite specificarea atributelor textului intre opening tag-ul si closing tag-ul acestei comenzi. Pagina prezentata anterior este ilustrata in urmatoarea figura:
Din nou tabele
Specificatiile HTML 4.0 au introdus cateva comenzi noi pentru lucrul cu tabele.
Exemplu
<html>
<head>
<title>
Bancnote
</title>
</head>
<body>
<h1 type=text/css
style='text-align: center' >
Bancnote romanesti
</h1>
Datorita inflatiei, dupa 1990 Banca Nationala a trebuit sa emita bancnote si monede noi. Pana in 1989 bancnota cu cea mai mare valoare era cea de 100 de lei. La ora actuala avem si monede de 500 de lei, bancnota cu cea mai mica valoare fiind cea de 1.000 de lei.
<table border=1 width=66%
align=left HSPACE=10 VSPACE=10>
<tr bgcolor=#ffffcc#>
<TH> Valoarea bancnotei
</th>
<TH> Personalitatea de pe bancnota
</th>
</tr>
<tr align=center>
<TD> 1.000 Lei
</td>
<TD> Mihai Eminescu
</td>
</tr>
<tr align=center>
<TD> 5.000 Lei
</td>
<TD> Lucian Blaga
</td>
</tr>
<tr align=center>
<TD> 10.000 Lei
</td>
<TD> Nicolae Iorga
</td>
</tr>
<tr align=center>
<TD> 50.000 Lei
</td>
<TD> George Enescu
</td>
</tr>
<tr align=center>
<TD> 100.000 Lei
</td>
<TD> Nicolae Grigorescu
</td>
</tr>
<caption align=bottom>
Cine sunt personalitatile de pe bancnotele noastre?
</caption>
</table>
De-a lungul anilor personalitatile care au aparut pe bancnotele noastre au fost schimbate. Personalitati ca Avram Iancu, Constantin Brancusi si altii s-au aflat in buzunarele noastre, dar locul lor a fost luat cu timpul de alte personalitati.
</body>
</html>
In acest exemplu apare antetul de tabel care poate fi introdus cu ajutorul tag-ului <TH>. Aceasta comanda are acelasi rol ca si comanda <TD> dar, asa cum puteti vedea in imagine, textul este automat centrat si ingrosat. Din imagine se observa un alt efect interesant si anume faptul ca textul apare si in jurul tabelului si nu numai deasupra si dedesubtul sau.
Un alt element nou este tag-ul <CAPTION> care permite specificarea unui text explicativ asociat tabelului. Textul explicativ poate fi aliniat:
- in partea superioara a tabelului (top);
- in partea inferioara a tabelului (bottom);
- in stanga tabelului (left);
- in dreapta tabelului (right).
Iata si fereastra browserului pentru exemplul anterior:
Specificatiile HTML 4.0 introduc un nou atribut pentru comanda <TD> si anume NOWRAP. Daca tag-ul <TD> primeste acest parametru, browserul este fortat sa nu desparta automat textul pe linii, decat daca intalneste comanda <BR>.
O alta noutate introdusa de aceste specificatii este valoarea baseline pentru atributul VALIGN. Aceasta aliniere asigura ca prima linie a textului celulei sa fie pe aceeasi linie ca si cota inferioara a primei linii a textului din celula precedenta.
Dupa cum probabil stiti, un browser nu poate reda prima linie a tabelului pana nu receptioneaza fiecare element de informatie. Pentru a evita acest lucru este oferita posibilitatea specificarii numarului de coloane a unui tabel cu ajutorul comenzilor <COL> si <COLGROUP>.
Exemplu:
<html>
<head>
<title> Coloane
</title>
</head>
<body>
<table border=1>
<colgroup>
<col width=6'*'>
<col width=3'*'>
<col>
<col width=25%
>
<col width=75>
</colgroup>
<tr> <TD> GInfo
</td>
<TD> GInfo
</td>
<TD> GInfo
</td>
<TD> GInfo
</td>
</tr>
<tr> <TD> GInfo </td> <TD> GInfo </td> <TD> GInfo </td> <TD> GInfo </td> <TD> GInfo
</td>
</tr>
<tr> <TD> GInfo
</td>
<TD> GInfo
</td>
<TD> GInfo
</td>
</tr>
</table>
</body>
Sa presupunem ca latimea ferestrei browserului este de 500 de pixeli. Am definit o coloana cu latimea de 75 pixeli, una cu latimea de 25% din latimea totala a ferestrei, adica 0.25ˇ500=125 de pixeli, iar restul de 300 pixeli vor fi impartiti in proportia 6:3:1 intre celelalte trei coloane, deci acestea vor avea 180, 90, respectiv 30 de pixeli latime.
Comanda <COL> este echivalenta cu:
<col width=1'*'>.
Specificatiile HTML 4.0 stabilesc faptul ca intr-un tabel se poate renunta la closing tag-uri pentru celule si linii. In plus au fost adaugate marcajele <THEAD> si <TBODY> pentru a indica antetul de tabel si corpul tabelului.
Un alt aspect interesant este posibilitatea alinierii continutului unei celule relativ la un caracter, cu ajutorul unei comenzi de tipul:
<td align=char char=':'>
Este posibila si o alta optiune pentru atributul ALIGN si anume alinierea de tip justify. De asemenea, prin specificarea unor atribute pentru o anumita coloana, acestea vor fi aplicate pentru toate celulele care fac parte din acea coloana.
Exemplu
<html>
<head>
<title> Noi facilitati
</title>
</head>
<body>
<table border=1>
<colgroup>
<col align=justify>
<col align=char char=':'>
</colgroup>
<THEAD>
<tr> <th> Activitate <th> Ora
<TBODY>
<tr> <td> Prima activitate <td> 8:00 am
<tr> <td> A doua activitate <td> 8:30 am
<tr> <td> A treia activitate <td> 9:45 am
<tr> <td> <td>
<tr> <td> Ultima activitate <td> 10:45 pm
</table>
</body>
Din nefericire, Internet Explorer si Netscape Navigator nu ofera inca suportul complet pentru lucrul cu tabele, motiv pentru care nu avem posibilitatea sa va prezentam capturi de ferestre care sa ilustreze aceste noi facilitati. Totusi, firma Microsoft promite ca versiunea Internet Explorer 5.0 care va aparea curand (probabil ca a aparut deja in momentul in care cititi aceste randuri) va oferi suport complet pentru toate facilitatile cuprinse in specificatiile HTML 4.0.
Din nou frame-uri
Ca in cazul tabelelor, specificatiile HTML 4.0 introduc cateva noutati cu privire la frame-uri si anume conceptul de frame intern - frame complet inconjurat de o fereastra exterioara.
Un frame intern poate fi introdus intr-o pagina Web cu ajutorul comenzii <IFRAME> care are o sintaxa asemanatoare comenzii <FRAME>. Intre opening tag-ul si closing tag-ul acestei noi comenzi pot fi specificate comenzi ale caror efecte vor aparea in ferestrele browserelor care nu suporta frame-uri interne. Aceste comenzi vor fi ignorate de browserele care recunosc tag-ul <IFRAME>.
Exemplu
<html>
<head>
<title>
Frame-uri interne
</title>
</head>
<body bgcolor=#99cc99>
<center>
<font size=+1>
In fiecare dintre ferestrele de mai jos veti putea vedea versurile unui anumit cantec romanesc:
</font>
</center>
<table border=0 cellpadding=20
align=center width=75% height=100%>
<tr>
<td>
<iframe src='carpatii.shtml'>
Aici ar trebui sa fie versurile cantecului
<i>Treceti batalioane romane Carpatii
</i>
</iframe>
<v>
<iframe src='horamare.shtml'>
Aici ar trebui sa fie versurile cantecului
<i> Hai, sa'ntindem hora mare
</i>
</iframe>
<tr>
<TD>
<iframe src='nuuita.shtml'>
Aici ar trebui sa fie versurile cantecului
<i> Nu uita ca esti roman
</i>
</iframe>
<td>
<iframe src='romani.shtml'>
Aici ar trebui sa fie versurile cantecului
<i> Noi, romani din neam de frunte
</i>
</iframe>
</table>
</body>
</html>
In fereastra unui browser care suporta frame-urile interne, pagina Web ar arata astfel:
In fereastra unui browser care nu suporta aceste frame-uri, aceeasi pagina Web va arata asa cum se vede in figura urmatoare:
Comanda <MARQUEE>
Aceasta comanda nu apare in specificatiile HTML 4.0, ea fiind introdusa de firma Microsoft si, ca urmare, browserul Internet Explorer este singurul care o suporta pana in acest moment. Motivul pentru care am ales sa prezentam aceasta comanda este faptul ca poate oferi niste efecte interesante. Daca veti folosi aceasta comanda, textul care apare intre opening tag-ul si closing tag-ul ei va fi animat. Unul dintre cei mai importanti parametri ai acestei comenzi este BEHAVIOR care poate lua valorile scroll (derulare), slide (alunecare) si alternate (alternat). Daca valoarea este scroll atunci textul va aparea litera cu litera, va derula pe ecran, va disparea si apoi va reaparea. In cazul valorii slide textul va aluneca pe ecran si se va opri in momentul in care va atinge marginea opusa. Daca veti transmite valoarea alternate, textul se va balansa inainte si inapoi in cadrul zonei animate. Directia in care va fi derulat textul poate fi specificata cu ajutorul parametrului DIRECTION care poate lua valorile left (stanga) si right (dreapta). Alti parametri ai acestei comenzi sunt WIDTH, HEIGHT, BGCOLOR, VSPACE, HSPACE etc., cu aceeasi semnificatie ca si la celelalte comenzi la care i-am mai intalnit. Comanda dispune si de parametrii SCROLLAMOUNT si SCROLLDELAY care permit specificarea numarului de pixeli dintre doua afisari succesive, respectiv intervalul de timp (in milisecunde) dintre doua afisari. Iata si un exemplu de utilizare al acestui nou marcaj:
<html>
<head> <title> Animatie
</title> </head>
<body>
<marquee behavior=scroll direction=right>
Gazeta de Informatica
</marquee>
<marquee behavior=scroll direction=left>
Gazeta de Informatica
</marquee>
<marquee behavior=slide direction=right>
Gazeta de Informatica
</marquee>
<marquee behavior=slide direction=left>
Gazeta de Informatica
</marquee>
<marquee behavior=alternate direction=right>
Gazeta de Informatica
</marquee>
<marquee behavior=alternate direction=left>
Gazeta de Informatica
</marquee>
</body> </html>
Imaginile urmatoare prezinta fereastra browserului in doua momente diferite:
Fundaluri fixe
Daca veti derula continutul unei pagini Web atunci, de obicei, se misca si imaginea din fundal. Daca doriti ca fundalul sa ramana fix va trebui sa transmiteti valoarea fixed pentru atributul BGPROPERTIES al comenzii <BODY>. Aceasta comanda mai are doi parametri: TOPMARGIN si LEFTMARGIN care va permit sa specificati deplasamentul fundalului fata de marginea din stanga, respectiv fata de marginea superioara a paginii.
Exemplu
<html>
<head> <title> Fundal fix
</title>
<style type='text/css'>
#stil
</style>
</head>
<body text='Nemes Liana' background='sacrecr.jpg' bgproperties=fixed>
<h1 type=text/css style='text-align:center'>
DATES TO REMEMBER
</h1>
<span id=stil>
<p> <i> May 25, 1787:
</i>
The Constitutional Convention opens with a quorum of seven states in Philadelphia to discuss revising the Articles of Confederation. Eventually all states but Rhode Island are represented.
<p> <i> September 17, 1787:
</i>
All 12 state delegations approve the Constitution, 39 delegates sign it of the 42 present, and the Convention formally adjourns.
<p> <i> June 21, 1788:
</i>
The Constitution becomes effective for the ratifying states when New Hampshire is the ninth state to ratify it.
<p> <i> March 4, 1789:
</i>
The first Congress under the Constitution convenes in New York City.
<p> <i> April 30, 1789:
</i>
George Washington is inaugurated as the first President of the United States.
<p> <i> June 8, 1789:
</i>
James Madison introduces proposed Bill of Rights in the House of Representatives.
<p> <i> September 24, 1789:
</i>
Congress establishes a Supreme Court, 13 district courts, three ad hoc circuit curts, and the position of Attorney General.
<p> <i> September 25, 1789:
</i>
Congress approves 12 amendments ans sends them to the states for ratification.
<p> <i> February 2, 1790:
</i>
Supreme Court convenes for the first time after an unsuccessful attempt February 1.
<p> <i> December 15, 1791: </i> Virginia ratifies the Bill of Rights, and 10 of the 12 proposed amendments become part of the U.S. Constitution.
</span>
</font>
</body>
</html>
Daca priviti urmatoarele doua imagini veti observa ca fundalul ramane fix, in timp ce continutul paginii este derulat.
Daca ati fost atenti la exemplul anterior ati observat ca textul este scris cu o culoare a carei denumire este cel putin ciudata: Nemes Liana. (Orice asemanare cu persoane din lumea reala este mai mult sau mai putin intamplatoare.) In mod surprinzator aceasta denumire pentru o culoare este acceptata de browsere, componentele RGB ale culorii fiind generate in functie de codurile ASCII ale caracterelor transmise. Totusi, functia dupa care se determina aceste componente RGB difera de la un browser la altul, asa ca nu este recomandabila folosirea unei astfel de culori.
Despartirea in silabe
Uneori, la sfarsitul unui rand ramane un spatiu prea mare care ar putea fi suparator pentru vizitatorii paginilor dumneavoastra. Pentru a evita aparitia acestor spatii exista posibilitatea specificarii modului in care se vor desparti in silabe anumite cuvinte. Standardul HTML trateaza secventa ­ ca o indicatie a sfarsitului unei silabe.
Daca secventa apare intr-un cuvant care nu trebuie despartit in silabe, atunci ea este ignorata, dar daca respectivul cuvant se afla la sfarsitul randului, atunci se va incerca afisarea catorva silabe pe un rand, iar restul silabelor pe randul urmator. Versiunile actuale ale browserelor nu suporta inca despartirea in silabe, ele inlocuind secventa ­ cu o cratima, chiar daca nu este necesar.
Comanda <meta>
Pentru ca paginile dumneavoastra WEB sa fie cunoscute este necesar ca acestea sa fie 'prietenoase' fata de motoarele de cautare. Exista mai multe metode care va permit acest lucru, dar cea mai importanta este utilizarea tag-ului <meta>.
Aceasta comanda nu determina afisarea nici unei informatii in fereastra browserului, dar toate motoarele de cautare vor folosi continutul acesteia ca rezumat sau ca pe o scurta descriere a paginii. Acelasi tag permite specificarea unor cuvinte cheie ale paginii dumneavoastra, care vor fi luate in considerare de catre motoarele de cautare.
Exemplu
<meta name=description
contents='Vizitati pagina Web a Gazetei de Informatica pentru a deveni un viitor specialist in tehnologia informatiei!!!'
<meta name=keywords
contents='GInfo, Gazeta de Informatica, HTML, Olimpiada de Informatica, Java, probleme propuse, probleme rezolvate, noutati, baze de date, begin'
Comanda <meta> poate fi utilizata pentru realizarea multor alte efecte spectaculoase, unul dintre cele mai interesante fiind posibilitatea de a schimba continutul unei pagini Web dupa un anumit interval de timp.
De exemplu
<meta http-equiv=refresh
content='6;url=pagina2.shtml'
va duce la inlocuirea paginii curente cu pagina corespunzatoare fisierului pagina2.html dupa 6 secunde de la incarcarea paginii. Sa consideram urmatoarele doua fisiere HTML:
<html>
<head>
<title> Rampart
</title>
<meta name=description
contents='Orasul de tip Rampart din Heroes of Might and Magic III'>
<meta name=keywords
contents='Rampart, Heroes of Might and Magic III, Heroes III, Heroes 3, Heroes3'
>
<meta http-equiv=refresh
content='30;url=rampart_creatures.shtml'
>
<script language='JavaScript'>
<!--
i=30;
function TimeOut()
TimeOut();
// -->
</script>
</head>
<body>
<h1 type=text/css
style='text-align:center'>
Rampart
</h1>
In imaginea de mai jos puteti vedea un orasul de tip Rampart din jocul Heroes of Might and Magic III. Eroii acestui tip de oras sunt druizi si rangeri. Admirati repede aceasta pagina deoarece peste putin timp ea va fi inlocuita cu cea care prezinta armatele de tip Rampart.
<p>
<center>
<img src='rampart.jpg' width=400>
</center>
</body>
</html>
<html>
<head>
<title> Armate Rampart </title>
<meta name=description
contents='Armatele de tip Rampart din Heroes of Might and Magic III'>
<meta name=keywords
contents='Rampart, Heroes of Might and Magic III, Heroes III, Heroes3, Heroes III, centaur, centaur captain, dwarf, battle dwarf, wood elf, grand elf, pegasus, silver pegasus, dendroid guard, dendroid soldier, unicorn, war unicorn, green dragon, gold dragon'>
</head>
<body bgcolor=#bfffbf>
<table border=0>
<tr>
<TD> <img src='1centaur.gif'>
<BR>
<center> Centaur </center>
<TD> <img src='1dwarf.gif'>
<BR>
<center> Dwarf </center>
<TD> <img src='1woodelf.gif'>
<BR>
<center> Wood elf </center>
<TD> <img src='1pegasus.gif'>
<BR>
<center> Pegasus </center>
<TD> <img src='1dendroidguard.gif'>
<BR>
<center> Dendroid Guard </center>
<tr>
<TD> <img src='1centaurcaptain.gif'>
<BR>
<center> Centaur Captain </center>
<TD> <img src='1battledwarf.gif'>
<BR>
<center> Battle Dwarf </center>
<TD> <img src='1grandelf.gif'>
<BR>
<center> Grand Elf </center>
<TD> <img src='1silverpegasus.gif'>
<BR>
<center> Silver Pegasus </center>
<TD> <img src='1dendroidsoldier.gif'>
<BR>
<center> Dendroid Soldier </center>
<tr>
<TD> <img src='1unicorn.gif'>
<BR>
<center> Unicorn </center>
<TD> <img src='1warunicorn.gif'>
<BR>
<center> War Unicorn </center>
<td align=center VALIGN=bottom>
<font size=5> Acestea sunt armatele de tip
</font>
<font size=6> Rampart
</font>
<TD> <img src='1greendragon.gif'>
<BR>
<center> Green Dragon </center>
<TD> <img src='1golddragon.gif'>
<BR>
<center> Gold Dragon </center>
</table>
</body>
</html>
Imediat dupa incarcarea primului fisier HTML, fereastra browserului ar putea arata astfel:
Dupa expirarea celor 30 de secunde pagina din fereastra browserului se va modifica, aparand urmatoarea pagina Web:
Pagini Web dinamice
Pana in prezent, toate paginile Web pe care le-ati creat erau limitate la o singura dimensiune: totul se petrece pe o 'coala de hartie'. Cu ajutorul modelelor de stiluri puteti controla pozitionarea relativa a elementelor, le puteti chiar suprapune cu ajutorul unor artificii, dar rezultatele nu sunt foarte atractive.
Firma Netscape a introdus o noua facilitate care ofera posibilitatea extinderii paginilor Web, astfel incat acestea sa contina niveluri (straturi) multiple. Pentru aceasta a fost introdusa o noua comanda HTML si anume <LAYER>. Aceasta comanda dispune de o gama larga de parametri, dar cei mai importanti sunt ID si WIDTH.
Cel mai simplu strat poate fi definit in felul urmator:
<layer id=strat width=300>
Cu ajutorul acestei comenzi este creat un strat denumit strat, de latime 300 de pixeli.
Alte atribute ale acestui tag sunt: BGCOLOR, BACKGROUND, TOP si LEFT. Cu ajutorul primelor doua atribute poate fi specificata o imagine fundal sau o culoare de fond pentru stratul respectiv. Atributele TOP si LEFT permit o localizare exacta a stratului relativ la coltul din stanga-sus.
Exemplu
<html>
<head>
<title> straturi
</title>
</head>
<body bgcolor=#8080ff>
<layer id=strat1 width=350
top=50 left=50 bgcolor=#cfcfff>
<center>
Dupa parerea multora, cea mai puternica armata din Heroes of Might and magic III este arhangelul. Altii cred ca dragonul negru este superior deoarece nici o magie nu il afecteaza.
</center>
</layer>
<layer id=strat2 width=350 top=25 left=75>
<img src='1archangel.gif'>
<img src='1blackdragon.gif'>
</layer>
</body>
</html>
Efectul poate fi observat in imaginea urmatoare:
Caracteristica straturilor de a putea fi plasate unul deasupra altuia reprezinta un concept foarte important in dezvoltarea paginilor Web. Ca in cazul graficii pe calculator, straturile din paginile Web apar pe o axa verticala Oz, perpendiculara pe planul ecranului. Straturile care au valori mari pentru coordonatele z apar deasupra celor cu coordonate mai mici. Coordonatele z cresc pe masura ce straturile sunt definite in pagina. De aceea un strat strat1, definit dupa un strat strat2, va aparea deasupra stratului strat2.
Exista posibilitatea specificarii valorilor coordonatei z a unui strat, in cazul in care doriti ca straturile sa fie afisate intr-o alta ordine. Pentru aceasta au fost introdusi parametrii Z-INDEX, ABOVE si BELOW ai comenzii <LAYER>.
Cu ajutorul parametrului Z-INDEX puteti specifica direct coordonata verticala a stratului. Cu ajutorul celorlalti doi parametri puteti specifica faptul ca un anumit strat se afla imediat deasupra, respectiv imediat dedesubtul altui strat.
Nu puteti defini straturi cu aceeasi coordonata verticala. Trebuie sa aveti grija sa nu apara contradictii prin folosirea atributelor ABOVE si BELOW. Daca nu respectati aceste conditii rezultatele nu sunt definite in specificatiile HTML si efectele difera de la un browser la altul. De exemplu urmatoarea definitie de straturi nu ar trebui sa apara in nici o pagina Web:
<layer id=strat1 above=strat2 width=>
<layer id=strat2 above=strat1 width=>
Starea de vizibilitate a unui strat este data de atributul VISIBILITY care poate avea trei valori:
show (afisat) - stratul este vizibil;
hidden (ascuns) - stratul nu este vizibil;
inherit (mosteneste) - stratul va avea aceeasi stare ca si stratul parinte (exista posibilitatea definirea de straturi imbricate).
Exemplu
<html>
<head>
<title> Straturi ascunse
</title>
</head>
<body>
<layer id=strat2 width=50% top=25%
left=25% visibility=show>
<center>
<img src='1angel.gif'>
</center>
</layer>
<layer id=strat3 width=50% top=25%
left=25% visibility=hidden>
<center>
<img src='1devil.gif'>
</center>
</layer>
<layer id=strat1 top=10%>
<c enter> Angels and devils hate each other, so they cannot appear at the same time on the screen. Press a button to select the good or the evil!
<BR><BR><BR><BR>
<form>
<input type=button value='Show the angel!!!'
OnClick='strat2.visibility='show';
strat3.visibility='hidden';
return false;'>
         
         
<input type=button value='Show the devil!!!'
OnClick='strat3.visibility='show';
strat2.visibility='hidden';
return false;'>
</form>
</center>
</layer>
</body>
</html>
Urmatoarele doua imagini prezinta fereastra browserului in doua situatii: la incarcarea paginii si dupa apasarea butonului Show the devil!. In functie de butonul pe care apasati va aparea una dintre cele doua imagini.
Un alt efect interesant care poate fi obtinut folosind o combinatie intre straturi si JavaScript este posibilitatea de a misca o imagine in fereastra browserului. In exemplul urmator va fi creat un strat care va contine imaginea unui titan care se va deplasa pe ecran. Pagina va mai include si doua butoane Start si Stop cu ajutorul caruia puteti opri sau porni miscarea titanului.
<html>
<head>
<title> Titan </title>
<script language=JavaScript>
var dx=5;
var dy=5;
var miscare=1;
function misca()
function Start()
function Stop()
</script>
</head>
<body>
<center>
<h1 type=text/css
style='font:32pt Impact'>
Titanul este cea mai puternica armata care are posibilitatea atacului de la distanta.
</h1>
<layer id=titan top=0>
<img src='1titan.gif'>
</layer>
<form>
<input type=button value=Start
OnClick='Start(); return false;'>
         
         
<input type=button value=Stop
OnClick='Stop(); return false;'>
</form>
</center>
</body>
</html>
Ideea de baza pentru constructia acestei pagini este simpla. La inceput, stratul care contine imaginea titanului se afla in coltul din stanga-sus al ferestrei browserului, iar apoi locatia sa este modificata prin adaugarea valorilor dx, respectiv dy, la coordonatele coltului stanga-sus al stratului. In cazul in care coordonata orizontala depaseste o anumita valoare, atunci variabila corespunzatoare va primi o valoare negativa si imaginea se va deplasa, pe orizontala, de la dreapta la stanga.
Similar, in cazul in care coordonata orizontala va scadea sub o anumita valoare, atunci variabila corespunzatoare va primi o valoare pozitiva si imaginea se va deplasa de la stanga la dreapta. Am procedat asemanator pentru coordonata verticala.
Au fost definite trei functii:
Start() - apelata pentru a pune in miscare imaginea;
Stop() - apelata pentru a opri miscarea acesteia;
misca() - modifica pozitia imaginii in modul descris anterior, apoi verifica starea variabilei miscare si, daca aceasta are valoarea 1, se autoapeleaza dupa 10 milisecunde.
Daca aceasta variabila are valoarea 0, atunci executia functiei misca() se termina si pozitia stratului nu se mai modifica. Urmatoarele imagini prezinta starea paginii in doua situatii diferite:
Un efect interesant se obtine daca veti apasa de mai multe ori pe butonul Start. Datorita faptului ca la fiecare apasare se va apela functia misca(), imaginea se va misca mai repede, deoarece pentru fiecare apel vor fi modificate coordonatele stratului.
Un alt parametru al tag-ului <LAYER> este CLIP. Cu ajutorul acestui parametru se defineste regiunea de taiere pentru strat (materialul corespunzator stratului poate fi mai mare decat marimea curenta a acestuia; sectiunea mai mica din strat care va fi afisata reprezinta regiunea de taiere). Pentru localizarea exacta a stratului fata de fereastra browserului sunt pusi la dispozitie alti doi parametri: PageX si PageY. Un strat poate contine o intreaga alta pagina HTML, URL-ul acesteia putand fi precizat cu ajutorul parametrului SRC.
Tot ce am spus pana acum despre straturi este valabil numai pentru browserul Netscape Navigator. Pentru mai multe informatii despre straturi in viziunea Netscape puteti vizita pagina:
https://developer.netscape.com/library/documentation/
communicator/dynhtml/layers32.htm
Compania Microsoft implementeaza diferit paginile Web dinamice, felul in care browserul Internet Explorer le afiseaza fiind asemanator, dar comenzile HTML difera foarte mult. Implementarea Microsoft este mai robusta, dar mult mai dificil de invatat. Un punct in plus pentru Microsoft este faptul ca modelul sau este compatibil cu modelul de document orientat pe obiecte (Document Object Model - DOM) care a fost propus de comitetul de standardizare HTML. Informatii despre straturi in viziunea Microsoft puteti gasi la adresa:
https://www.microsoft.com/workshop/author/dhtml/
Contoare de pagini
Unul dintre cele mai interesante componente ale unei pagini Web este contorul care indica numarul vizitatorilor paginii. Contoarele pot fi realizate in multe feluri, ele pot fi de tip grafic sau de tip text.
Pentru a crea un contor de tip text trebuie sa aflati daca serverul care gazduieste pagina dumneavoastra ofera aceasta facilitate. De aceea, modul in care sunt implementate contoarele difera in functie de tipul de server pe care sunt gazduite paginile.
De exemplu, pe anumite servere ar putea functiona urmatoarea secventa de cod:
<font size=4>
<b> Sunteti vizitatorul cu numarul
</b>
</font>
<font size=5>
<b> <#counter file='mycounter'
>
</b>
</font>
Pentru un contor grafic trebuie sa specificati o imagine speciala care sa reprezinte legatura cu un program de contorizare. O posibilitate ar fi <img src='counter.cgi'>, fisierul counter.cgi trebuind sa furnizeze imaginea corespunzatoare .
Pe Internet sunt disponibile o multime de contoare distractive si stiluri de afisare a numarului de vizitatori. O pagina Web de unde puteti afla tot ce doriti despre acestea este:https://www.digitmania.com
La final
Acesta a fost serialul despre limbajul HTML. Pentru informatii referitoare la ultimele versiuni ale specificatiilor HTML vizitati pagina Web a consortiului W3 la adresa https://www.w3.org. Speram ca acest serial a fost util pentru cei care doresc sa proiecteze site-uri Web si va uram:
Bibliografie:
Dave Taylor - Crearea Paginilor Web cu HTML 4, Editura Teora, 1998
Dick Oliver - HTML 3.2 in 24 Hours, 1997
Irina Athanasiu, Bogdan Costinescu, Octavian Andrei Dragoi, Florentina Irina Popovici - Limbajul Java. O perspectiva pragmatica, Editura Computer Libris Agora, 1998
Visual Basic, Programmer's Guide, Microsoft Inc., 1997
Visual Basic, Components Tools Guide, Microsoft Inc., 1997
PC Magazine Romania, Ianuarie 1999
Chip Computer Magazine, Ianuarie 1999
PC Report&Byte, Februarie 1999
Romania Libera, 10 Mai 1998
Specificatiile HTML 4.0 - www.w3.org
Heroes of Might and Magic III - www.3do.com
The Constitution of the United States and The Declaration of Independence, National Constitution Center, 1997
Copyright © 2024 - Toate drepturile rezervate
