Documente Academic
Documente Profesional
Documente Cultură
1. Ce este HTML ?
Unul din primele elemente fundamentale ale WWW ( World Wide Web )
este HTML ( Hypertext Markup Language ), care descrie formatul primar in
care documentele sint distribuite si vazute pe Web. Multe din trasaturile
lui, cum ar fi independenta fata de platforma, structurarea formatarii si
legaturile hipertext, fac din el un foarte bun format pentru documentele
Internet si Web.
Primele specificatiile de baza ale Web-ului au fost
HTML,
HTTP si
URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989.
HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza
computere diferite s schimbe intre ei informatie utilizind Internetul. Erau
prin urmare necesare citeva trasaturi : independenta de platforma,
posibilitati hypertext si structurarea documentelor.
Independenta de platforma inseamna ca un document poate fi afisat in
mod asemanator pe computere diferite ( deci cu fonte, grafica si culori
diferite ), lucru vital pentru o audienta atit de variata.
Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al
documentului vazut de un utilizator ( client ) poate face referinta la un alt
document, ceea ce usureaza mult navigarea intre multiple documente sau
chiar in interiorul unui aceluiasi document.
Structurarea riguroasa a documentelor permite convertirea acestora dintrun format in altul precum si interogarea unor baze de date formate din
aceste documente.
SGML si HTML
Tim Berners-Lee a utilizat ca model SGML ( Standard Generalized Markup
Language ), un standard international in plina dezvoltare. SGML avea
avantajul unei structurari avansate si al independentei de platforma dar
proiectarea lui a avut in vedere mai mult structura semantica a
documentului decit modul de formatare. Flexibil, SGML putea fi descris ca
">".
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a
afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de
sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional
sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
-sectiunea de antet <head>...</head> si - corpul documentului
<body>...</body>. Blocul <body>...</body> cuprinde continutul propriuzis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.
Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce
apar intre etichete sunt ignorate de catre browser.
Deci un prim document HTML ar fi ceva de genul asta:
<html>
<head> </head>
<body>
</body>
</html>
</body>
</html>
Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si
" CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc
<pre>...</pre>.
<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
Culoarea de fond
unde:
numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si
7 pentru fontul cel mai mare);
culoare - este o culoare precizata prin nume sau printr-o constructie
RGB;
font - poate fi un font generic ca " serif ", " san serif ", " cursive ", "
monospace ", "fantasy " sau un font specific instalat pe calculatorului
clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se
accepta ca valoare si o lista de fonturi separate prin virgula, de
exemplu:
" Times New Roman, serif,monospace ".
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue"
size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body>
</html>
Stiluri pentru blocurile de text
<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big>
si mai mare<big> si mai mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate <small>mai
mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> In aceasta linie <sup>sus</sup> este superscript iar
<sub>jos</sub> este subscirpt.<br>
<strike>Aceasta linie este in intregime sectionata de o linie
orizontala.</strike> <br>
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul
<s>strike</s> sectoinat.
</body>
</html>
Stiluri fizice si logice
3. Fonturi
Un font este caracterizat de urmatoarele atribute:
Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de
caractere). Exista cinci familii generice de fonturi care sunt de regula
disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive,
monospace si fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face="Arial, serif, monospace">
<html>
<head>
<title> Culoarea si familia fontului</title>
</head>
<body>
4. Blocuri de text
Aceste etichete nu se refera la particularitatiile caracterelor ce compun
textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii
Web.
Toate aceste etichete produc automat trecerea la un rand nou si
adaugarea unui spatiu suplimentar.
Inserarea unei adrese
Daca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza
facilitatile oferite de o eticheta dedicata: <address>...</address>.
<html>
<head>
<title> Adresa</title>
</head>
<body>
Ora/Ziua
8:00
9:00
Luni
Marti
Miercuri
Romana Matematica
Sport
Geografie
Istorie
Fizica </pre>
</body>
</html>
Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta " si
"CR/LF ". Textul afisat in pagina este monospatiat.
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la
stanga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf
aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.Paragraf aliniat in
centru.Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat
in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.
</body>
</html>
Blocuri de titlu
align permite alinierea liniei orizontala. Valorile posibile sunt " left " ,"
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita
Blocuri <nobr>
5. Imagini
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de
browsere pentru fisierele imagine sunt:
Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 culori
posibile) si JPEG (24biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
<html>
<head><title> O pagina cu imagine</title></head> <body> O pagina
imagine.
</body>
</html>
Alinierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului align care
poate lua urmatorele valori:
<html>
<head><title> Alinierea unei imagini</title></head> <body> Alinieri:
<br> Pe verticala:
<img src="w3.gif" align="top">
La mijloc: <img src="w3.gif" align="center">
Jos: <img src="w3.gif" align="bottom"> Text dupa imagine.
</body>
</html>
Alinierea textului in jurul imaginii
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest
scop se foloseste atributul background al etichetei <body>, avand ca
valoare adresa URL a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul
ecran.
<html> <head><title> Pagina cu imagine de fond</title></head>
<body background="w3.gif">
Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.
Printre aceste utilizari speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor .
2. Simboluri speciale pentru elementele unei liste neordonate ( vezi ).
6. Legaturi
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini
Web.
Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite
trecerea rapida de la o informatie aflata pe un anumit server la alta
informatie memorata pe un alt server aflat oriunde in lume.
Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran
sensibile la apasarea butonului stang al mouse-ului.
Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director
atunci pentru a preciza pozitia ei in structura de directoare se poate folosi
adresarea relativa.
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="exemple/list/listex_11.html">
Link catre o pagina cu liste </a>
</body>
</html>
O legatura catre un site particular
Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc
legaturi.
O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini
ancora se utilizeaza atributul name care primeste ca valoare un nume
atribuit ancorei (de exemplu "leg1").
Pentru a insera o legatura catre "leg1" definita in aceeasi pagina se
utilizeaza eticheta <a> avand atributul href de valoare "#leg1".
Pentru a introduce o legatura catre o ancora definita in alt document (alta
pagina) aflat in acelasi director, atributul href primeste o valoare de forma
"nume_fisier.html#nume_ancora".
<html>
<head>
<title> Ancore definite in acelasi document si in alt doocument</title>
</head>
<body>
<h3>Ancore definite in acelasi document si in alt document </h3>
<a href="#ancora1">
Link catre ancora 1 </h3>
<a href="../../legaturi.php#anc">
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau
conform standardului RGB.
<html>
<head>
<title> Culori pentru lagaturi</title>
</head>
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active,
verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br>
<a href=leg_ex2.html>
Link catre pagina 2 <br>
<a href=leg_ex8.html>
Link catre pagina 11 </a>
</body>
</html>
Utilizarea postei electronice
Intr-o pagina Web se poate afla legaturi care permit lansarea in executie a
aplicatiei de expediere a mesajelor electronice.
Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet
mailto: urmat de o adresa e-mail valida.
Pentru ca exemplul urmator sa functioneze trebuie ca:
<html>
<head>
<title> Expediere de mesaje electronice</title>
</head>
<body>
<h3>Expediere de mesaje electronice</h3><br>
<a href="mailto:a_bsz@yahoo.com">
</body>
</html>
Legaturi catre fisiere oarecare
O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe
orice servere din Internet. Pentru aceasta se utilizeaza eticheta <a> avand
valoarea atributului href egala cu adresa URL a fisierului destinatie.
Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul
se deschide o caseta de dialog - File download - care va permite:
<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="fisier.zip">
Atributul title apartine etichetei <a> si comanda aparitia unei mici ferestre
in pagina Web cand mouse-ul se afla pe o legatura, fereastra in care este
afisata valoarea data acestui atribut.
Acest atribut are astfel menirea de a furniza informatii suplimentare despre
semnificatia unei legaturi.
<html>
<head>
<title> Atributul title</title>
</head>
<body>
<h3>Atributul title</h3><br>
<a href="mailto:a_bsz@yahoo.com" title="adresa mea de e-mail">
</body>
</html>
Legaturi catre fisiere de sunet
7. Liste
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini
este un set de definitii, referinte sau indexuri. Glosarele sunt exemple
clasice in acest sens; cuvintele sunt listate in ordine alfabetica, urmate de
definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui glosar
va fi gestoinata printr-o lista de definitii, care este inclusa intr-o pereche de
marcaje de lista de definitii: <dl>...</dl> (de la "definition list" = lista de
definitii).
Observatii:
- Un termen al listei este initiat de eticheta <dt> (de
la "definition term" = termen definit);
- Definitia unui termen este initiata de eticheta <dd>
(de la "definition description" = descrierea
definitiei);
- Definitia unui termen incepe pe o linie noua si este
indentata;
<html>
<head><title>listex_1</title></head>
<body><h1 align="center">O lista de definitii</h1><hr>
<dl>
Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul
afisat in fata fiecarui element al listei. Valorile posibile al acestui atribut
sunt:
o
"circle" (cerc)
"square" (patrat)
</ul>
</ul>
</ul>
</body>
</html>
Liste ordonate
ordonata). Fiecare element al listei este initiat de eticheta <li> (list item).
Lista va fi indentata fata de restul paginii Web si fiecare element al listei
incepe pe un rand noua.
<html>
<head><title>listex_4</title></head>
<body><h1 align="center">O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow
<li>Purple <li>Aqua
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de
caractere utilizate pentru ordonarea listei.Valorile posibile sunt:
Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a
secventei de ordonare.Valoarea acestui atribut trebuie sa fie un numar
intreg pozitiv.
Tag-ul <li> poate avea un atribut value care satileste valoare pentru
elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un
numar intreg pozitiv (vezi urmatorul exemplu).
<html>
<head><title>listex_7</title></head>
<body><h1 align="center">O lista ordonata avand itemi setati
individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol>
</body>
</html>
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
8. Tabele
</body>
</html>
Alinierea tabelului
<html>
<head><title>tabelex_3</title></head>
<body><h1 align=center>Un tabel aliniat la dreapta</h1><hr> Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
<table border="0" align="right">
<tr> <td>cell 11</td> <td>cell 11</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
</table>
Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text
dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text
dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text
dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.
</body>
</html>
<html>
<head><title>tabelex_7</title></head>
<body><h1 align=center>Un tabel de de 200 pixeli X 50 %</h1><hr>
<table border="0" width="200" height="50%">
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
</table>
</body>
</html>
<html>
<head><title>tabelex_9</title></head>
<body><h1 align=center>Un tabel cu titlu</h1>
<table border="0"><caption align="top">Masini
<tr><td>Mercedes </td><td>Citroen </td><td>Jaguar </td></tr>
<tr><td>BMW </td><td>Volvo </td><td>Renault </td></tr>
</table>
</body>
</html>
Cap de tabel
Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor
elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a
stabili alinierea textului intr-o singura celula.
<html>
<head><title>tabelex_11</title></head>
<body><h1 align=center>Un tabel avand continutul celulelor
aliniate</h1>
<table border="0" width="50%" height="50%">
<tr align="right"><td>Aici</td> <td>alinierea</td><td>este
centru</td><td>dreapta</td></tr> <tr>
<td align="left">stanga</td>
<td align="center">centru</td><td valign="top">sus</td> <td
valign="bottom">jos</td></tr>
<tr align="left"><td>aici</td><td>alinierea</td> <td>este
centru</td><td>stanga (implicita)</td></tr> </table>
</body>
</html>
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu
ajutorul a doua atribute ale acestor etichete: width pentru latime si height
pentru inaltime.
Valorile posibile ale acestor atribute sunt:
<html>
<head><title>tabelex_12</title></head>
<body><h1 align=center>Un tabel cu celule de 100x150 de
pixeli</h1><hr>
<table border="0">
<tr> <td width="100" height="150">cell 11</td> <td width="100"
height="150">cell 11</td></tr>
<tr> <td width="100" height="150">cell 21</td> <td width="100"
height="150">cell 22</td></tr>
</table>
</body>
</html>
Tabele de forme oarecare
daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara
un chenar de delimitare.
In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele
trucuri:
<table border="0">
<tr> <td>cell 11<td> <td>cell 12</td><td>cell 13</td></tr>
<tr> <td> </td> <td></td></tr>
</table>
</body>
</html>
Atribute Internet Explorer pentru tabele
<html>
<head><title>tabelex_16</title></head>
<body><h1 align=center>Atribute "Internet Explorer"</h1><hr>
<table border="5" background=".../images/ubm1.jpg" cellspacing=15
bordercolor="maroon" bordercolodark="red">
<tr bgcolor="yellow"> <td>cell 11</td> <td>cell 12</td><td>cell
13</td></tr>
<tr bgcolor="yellow"> <td> </td><td></td> <td></td></tr>
</table>
</body>
</html>
Grupuri de coloane
<html>
<head><title>tabelex_17</title></head>
<body><h1 align=center>Grupuri de coloane</h1><hr>
<table width="400" cellspacing=10>
<colgroup> <col width="100" align=right> <col width="100"
align=center> <col width="200" align=right> </colgroup>
<tr> <td valign=top>Text in prima coloana.Text in prima coloana.Text in
prima coloana. Text in prima coloana.</td> <td valign=top>Text in
<frame src="p1.html">
<frame src="p2.html">
</frameset>
</html>
</frameset>
</frameset>
</html>
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</html>
<html>
<head><title>ferex_5_2</title></head>
<frameset cols="20%,*" frameborder="no">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</html>
Bare de defilare
<html>
<head><title>ferex_6</title></head>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes" noresize>
<frame src="p.html" scrolling="no" noresize>
<frame src="p.html" scrolling="auto" noresize>
</frameset>
</html>
<html>
<head><title>ferex_8</title> </head>
<body>
<a href="p1.html" target="icad">
Fisierul1</a><br> <a href="p2.html" target="icad">
Fisierul2</a><br> <a href="p3.html" target="icad">
Fisierul3</a><br> <a href="p.html" target="icad">
Home</a><br> <center><iframe width="60%" height="50%"
border=2 bordercolor=red name="icad" src="p.html"> Daca vedeti
Observatie:
- daca este prezent atat un atribut target in <base>
cat si un atribut target in <a>, atunci cele precizate
de atributul target din <a> sunt prioritare.
Numele unui cadru este stabilit prin atributul name al etichetei <frame>
conform sintaxei: <farme name="nume_frame">
In exemplul urmator este prezentata o pagina Web cu doua cadre.Toate
legaturile din cadrul 1 incarca paginile in cadrul 2.
<html>
<head><title>ferex_9_frames</title></head>
<frameset cols="20%,*">
<frame src="left.html" name="left">
<frame src="p.html" name="main">
</frameset>
</html>
<html>
<head><title>ferex_9_left</title> </head>
<body>
<a href="p1.html" target="main">
Fisierul1</a><br> <a href="p2.html" target="main">
Fisierul2</a><br> <a href="p3.html" target="main">
Fisierul3</a><br><br> <a href="p1.html" target="_blank">
Fis1 intr-o fereastra noua</a><br><br> <a href="p1.html"
target="_self">
Fis1 in fereastra curenta</a><br><br> <a href="p.html"
target="main">
Home</a><br>
</body>
</html>
Valori pentru atributul target
Observatii:
- daca atributul type lipseste intr-un element
<input> , atunci campul respectiv este considerat in
mod prestabilit ca fiind de tip "text".
- formularele cu un singur camp (de tip text) nu au
nevoie de un buton de expediere, datele sunt expediate
automat dupa completarea si apasarea tastei ENTER.
Butonul Reset
Butoanele radio permit alegerea ,la un moment dat , aunei singure variante
din mai multe posibile. Butoanele radio se introduc prin eticheta <input>
cu atributul type avand valoarea "radio".
<html>
<head><title>formex_4</title></head>
<body><h1>Un formular cu butoane radio</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
<html>
<head><title>formex_6</title></head>
<body><h1>Un formular cu caseta de fisiere</h1>
<hr>
atributul value primeste ca valore un text care va fi expediat serverului in perechea "name=value"; daca acest atribut lipseste ,atunci
catre server va fi expediat textul ce urmeaza dupa <option>;
atributul selected (fara alte valori) permite selectarea prestabilita a
unui elem,ent al listei.
<html>
<head><title>formex_7</title></head>
<body><h1>Un formular cu o lista de selectie</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Universitatea absolvita:<br><br>
<select name="universitate" size="3"> <option value="B">
Daca atributul size este egal cu 1 atunci lista de selectie arata asa.
Lista de selectie cu selectii multiple
<html>
<head><title>formex_9</title></head>
<body><h1>Un formular cu un camp de editare multilinie</h1> <hr>
<form action="mailto:xxxxx@xxx.com" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
<html>
<head><title>formex_10</title></head>
<body><h1>Un formular complex</h1> <hr>
<center><table bgcolor="orange"> <form
action="mailto:xxxxx@xxx.com" method="post">
<caption align="top">MENIU</caption>
<tr align=left><th>Numele:
<td><input type="text" name="numele">
<tr align=left><th>Preumele:
<td><input type="text" name="prenumele"> <tr
align=left><th>Telefonul:
<td><input type="text" name="telefonul"> <tr
align=left><th>Alegeti pizza:
<td><input type="checkbox" name="ciuperci"> cu ciuperci
<input type="checkbox" name="mexicana">mexicana <input
type="checkbox" name="europeana">europeana
<tr align=left><th>Alegeti plata:<td>
<ul style="background-color:lightblue;"> <li><input type="radio"
name="plata">cash <li><input type="radio" name="plata">card
</ul> <tr align=left><th>Comentarii:
<td> <textarea name="comentarii" cols="30" rows="5" wrap="off">
11. Stiluri
Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de
personalizare a paginilor Web. Un stil reprezinta un mod de a scrie un bloc
de text ( adica anumite valori pentru font, marime culoare, aliniere, distante
fata de margini etc).
Exista doua modalitati de a defini un stil:
Stiluri dedicate
Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este
necesar. Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului
<style>...</style>, aflat la randul lui in blocul <head>...</head>:
<style>
all.ac {text-align:center; color:blue;}
</style>
- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este
aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar.
La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul
class avand ca valoare numele clasei de stil. Acesta este un atribut
universal adica este aplicabila tuturor elementelor. Observatii:
Stiluri in-line
Iata deci cum va arata (doar pentru IE 4.x sau mai mare):
Legatura
Nu este, insa singurul exemplu, in continuare aveti toate codurile pentru
formele de cursor pe care le puteti folosi:
auto
e-resize
sageata Est-Vest
hand
mana
help
semnul intrebarii
move
n-resize
sageata sud-nord
mana
s-resize
w-resize
sageata Est-Vest
wait
clepsidra
12. Javascript
Javascript este un limbaj de programare simplu , de tip script, pentru
definirea comportamentului elementelor dintr-o pagina Web. Nu este
acelasi lucru cu mult mai complexul limbaj de programare Java.
Javascript poate specifica , in mod obisnuit in doar cateva randuri ,
raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei pagini,
deplasarea mouse-ului intr-un anumit punct sau stergerea unui anumit
camp dintr-un formular.
Cea mai simplas aplicatie Javscript este aceea care determina apariria si
derularea unui mesaj:
<html>
<head><script language="Javascript">
Handler de
eveniment
blur
onBlur
click
onClick
change
onChange
focus
onFocus
load
onLoad
onSelect
submit
onSubmit
unload
onUnload
Tilul documentului
TEXT=culoare
LINK=culoare
VLINK=culoare
ALINK=culoare
BACKGROUND = url
<P>
Paragraf
<Hn> <Hn>
FACE="a,b"
COLOR=s
Linie noua
<PRE> </PRE>
Informatie preformatata
<!-- -->
Comenatriu HTML
<CENTER>
</CENTER>
<HR>
Rigla orizontala
SIZE=x
WIDTH=x
NOSHADE
ALIGN=x
COLOR=x
<A> </A>
HREF=url
Referinta hipertext
HREF=#nume
Name=nume
<DD>
Descriere definitie
<DL>
</DL>
<DT>
Termen de definitie
<LI>
Element de lista
<OL
TYPE=tip
START=x
<UL
TYPE=forma
Formatarea caracterelor
<B> </B>
<I> </I>
<U> </U>
<TT> </TT>
<CITE> </CITE>
Citare bibliogarfica
<CODE> </CODE>
Listing de program
<EM> </EM>
<KBD> </KBD>
Text de la tastatura
<STRONG>
</STRONG>
<VAR> </VAR>
<BASEFONT SIZE =
n>
<FRAMESET>
</FRAMESET>
COLS=x
ROWS=x
BORDER=x
FRAMEBORDER = x
FRAMESPACING = x
<FRAME>
SRC=url
NAME=nume
SCROLLING=scrl
FRAMEBORDER=x
MARGINHEIGHT=x
MARGINWIDTH=x
<NOFRAMES>
</NOFRAMES>
<IFRAME>
SRC=url
Sursa cadrului
NAME=s
HEIGHT=x
WIDTH=x
<TABLE> </TABLE>
Tabel HTML
BORDER=x
Chenarul tabelului
CELLPADDING=x
CELLSPACING=x
tabelului
WIDTH=x
FRAME=valoare
RULES=valoare
BORDERCOLOR =
culoare
BORDERCOLORLIGHT =
culoare
BORDERCOLORDARK =
culoare
ALIGN=left
ALIGN=right
HSPACE=x
VSPACE=x
COLS=x
<COLGROUP>
</COLGROUP>
<COL WIDTH=x>
<THEAD> </THEAD>
<BODY> </TBODY>
<TR </TR>
Linie de tabel
BGCOLOR=culoare
ALIGN=aliniere
BGCOLOR=culoare
COLSPAN=x
ROWSPAN=x
ALIGN=aliniere
VALIGN=aliniere
BACKGROUND=url
NOWRAP
ALIGN=baseline
ALIGN=caracter
ALIGN=justify
Adaugarea imaginilor
<IMG
SRC=url
ALT=text
WIDTH=x
Latimea imaginii
BORDER=x
HSPACE=x
VSPACE=x
<FORM>
</FORM>
ACTION=url
METHOD=metoda
<INPUT
TYPE=optiune
NAME=nume
VALUE=valoare
SIZE=x
<SELECT>
</SELECT>
NAME=nume
SIZE=x
MULTIPLE=x
<OPTION
VALUE=valoare
<TEXTAREA>
</TEXTAREA>
NAME=nume
ROWS=x
COLS=x
<FIELDSET>
</FIELDSET>
<LEGEND>
</LEGEND>
ALIGN=s
TABINDEX=x
ACCESKEY=c
DISABLED
READONLY
Carcatere speciale
&
& ampersand
tilda
<
>
simbolul de copyright
n mic cu tilda
HTML avansat
<STYLE> </STYLE>
TYPE=val
<SCRIPT>
</SCRIPT>
LANGUAGE=limbaj
Limbajul utilizat
EVENT=eveniment
FOR=numeobiect