| CATEGORII DOCUMENTE |
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
Acesta este continutul primei pagini! El va fi vizualizat de catre browser.
</body>
</html>
Sfarsitul de linie <br> 'break line'
<html>
<head>
<title>Acesta este titlul primei pagini</title>
</head>
<body>
Prima linie<br>
A doua linie<br>
</body>
</html>
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
<pre>
Prima linie
A doua linie indentata (1 tab)
A treia linie de doua ori indentata (2 tab)
</pre>
</body>
</html>
O culoare poate fi precizata in doua moduri:
Printr-un nume de culoare. Cel putin urmatoarele 16 nume de culori sunt disponibile: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
Prin constructia ' #rrggbb' unde r,g sau b sunt cifre hexagesimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f sau F. Se pot defini astfel 65536 de culori. Se foloseste modelul de culoare RGB (Red, Green, Blue). Conform acestui model o culoare se obtine din amestecul a trei culori fundamentale: rosu, verde si albastru.
<html>
<head>
<title>
Culoare background
</title>
</head>
<body bgcolor='yellow'>
Aceasta este o pagina web<br>
cu fondul de culoarea galbena.
</body>
</html>
sintaxa:
<body text=culoare>
</head>
<body text='red'>
Aceasta este o pagina web cu textul de culoarea rosie.
</body></html>
<tag atribut1=valoare1 atribut2=valoare2 atribut3=valoare3>.
Sintaxa utilizata este:
<basefont size=numar color=culoare style=font>
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 (vezi primul paragraf).
font poate fi un font generic ca 'serif', 'sans-serif', 'cursive', 'monospace', 'fantasy' sau poate fi un font specific instalat pe computerul clientului ca 'Times New Roman', 'Helvetica' sau 'Arial'. Se accepta ca valoare si o lista de fonturi separate prin ',' de exemplu: 'Times Roman, serif, monospace'.
Atributele implicite sunt:
size=3, color='black' si style='Times New Roman'.
Pozitionarea continutului paginii web fata de marginile ferestrei browser-ului se poate face cu ajutorul a doua atribute ale tag-ului <body>:
'leftmargin' (seteaza distanta dintre marginea din stanga a ferestrei browser-ului si marginea din stanga a continutului paginii);
'topmargin' (seteaza distanta dintre marginea de sus a ferestrei browser-ului si marginea de sus a continutului paginii);.
Ambele atribute pot primii urmatoarele valori posibile:
un numar intreg pozitiv reprezentand o distanta masurata in pixeli;
un procent din latimea respectiv inaltimea ferestrei browser-ului.
<b>.</b>, <em>.</em>, <strong>.</strong>
<i>.</i>
<u>.</u>
<strike>.</strike>, <s>.</s>
<big>.</big>
<small>.</small>
<sub>.</sub>
<sup>.</sup>
<code>.<code>, <kbd>.</kbd>, <tt>.</tt>
<blink>.</blink> (numai pentru Netscape)
Culoarea:
<font color="red"> .text.</font>
Familia fontului:
<font face="Arial">.text.</font>
Marimea fontului:
<font size="5">.text.</font>
<font size="+2">.text.</font>
<font size="-1">.text.</font>
Exemplu de utilizare combinata
<font size="5" color="blue" face="Arial>.text.</font>
Inserarea unei adrese:
<address> . text adresa . </address>
Identarea unui bloc:
<blockquote>.text.</blockquote>
Blocul div: (aliniere diviziune)
<div align="left"> . </div>
<div align="center"> . </div>
<div align="right"> . </div>
Format caractere speciale (&):
Space = (non breaking space)
= "
& = &
< = <
> = >
a = â A = Â
i = î I = Î
a = ã A = Ã
Blocul paragraf <p> .</p>
<p align="left"> . </p>
<p align="center"> . </p>
<p align="right"> . </p>
Blocul header
<h1> . </h1> sau <h1 align="left, center, right>.</h1>
<h2> . </h2> sau <h2 align="left, center, right>.</h2>
<h6> . </h6> sau <h6 align="left, center, right>.</h6>
Blocul center
<center> . </center>
Blocul nobr
<nobr> . </nobr>
Linii orizontale <hr>
Aliniere (align):
<hr align="left">
<hr align="center">
<hr align="right">
Lungimea liniei (width) grosimea liniei (size) culoarea liniei (color) si umbrirea liniei (noshade):
Valori implicite:
align="left" width="100%", size=2 cu umbrire
Ex. (linie aliniata center, lungime 50%, grosime 5 pixeli, fara umbra
<hr align="center" width="50%" size="5" noshade>
<ul> </ul> - unordered list
<li> - initiaza fiecare element al listei
Ex.:
<ul> .text. (despre continutul listei)
<li> .text.(elementul 1)
<li> .text.(elementul 2)
<li> .text.(elementul 3)
</ul>
Optional tag-urile <ul> si <li> pot seta caracterul tip bullet din stanga: "circle", "disc" (disc plin este valoarea implicita), "square" prin parametrul type.
Ex.:
<ul type="square"> .text. (despre continutul listei)
<li> .text.(elementul 1)
<li> .text.(elementul 2)
<li> .text.(elementul 3)
</ul>
Se pot utiliza si liste neordonate imbricate:
<ul> .text. (despre continutul listei)
<li> .text.(elementul 1)
<ul> .text. (despre continutul listei)
<li> .text.(elementul 1)
<li> .text.(elementul 2)
</ul>
<li> .text.(elementul 2)
<li> .text.(elementul 3)
</ul>
Tag-urile: <ol> </ol> si <li>
<ol> poate controla urmatorii parametrii:
- Parametrul type seteaza tipul de caractere utilizat in ordonarea listei:
"A" - secventa A, B, C, .
"a" - secventa a, b, c, .
"I" - secventa I, II, III, IV, V,.
"i" - secventa i, ii, iii,.
"1" - secventa 1, 2, 3, .
Parametrul sart care seteaza valoarea initiala a secventei de ordonare:
Ex.: <ol type="A" start="3"> . </ol>
<li> poate seta prin value valoarea particulara a unui item din lista. Ex.:
<ol start="3"> . text .
<li> . text (element 1 va incepe cu 3)
<li value="5"> . text (element 2 va incepe cu 5)
<li> . text (element 3 va continua cu 6)
<ol>
<dl> . </dl> (definition list)
<dt> (definition term) initiaza un termen de definitie
<dd> (definition description) initiaza descrierea unei definitii
Ex.:
<dl>Glosar de termeni
<dt> Termen 1 .
<dl> Explicatia, definitia termenului 1 .
<dt> Termen 2 .
<dl> Explicatia, definitia termenului 2 .
<dt> Termen 3 .
<dl> Explicatia, definitia termenului 3 .
<dl>
<table> si </table>,
<tr> si </tr> (table row)
<td> si </td> (table data)
Atribute:
align=left, center, right
border=size
bgcolor=culoare
width=valoare sau valoare%
height= valoare sau valoare%
cellspacing=valoare pixeli, seteaza distanta dintre doua celule vecine
cellpadding=valoare pixeli, seteaza distanta dintre distanta in pixeli dintre marginea unei celule si continutul ei
<hspace>=val., <vspace>=val. Seteaza zona din jurul unui tabel pe orizontala si verticala. Functioneaza doar sub Netscape.
caption seteaza titlul unui tabel. Ex.:
Titlul unui tabel:
<table border>
<caption align='top'>Fructe
<tr><td>mure<td>zmeura<td>afine
<tr><td>mere<td>pere<td>cirese
</table>
<th> (table header) seteaza capul de tabel. Ex.:
<table border>
<caption align='bottom'> Bilantul in saptamana 11-15 mai
<tr><th>BilantZile
<th>Luni<th>Marti<th>Miercuri
<th>Joi<th>Vineri
<tr><th>Intrari<td>1000<td>2000 td>3000 <td>4000<td>5000
<tr><th>Iesiri<td>100<td>200<td>300 <td>400<td>500
</table>
Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului 'align' care poate lua valorile:
'left' (la stanga);
'center' (centrat);
"right' (la dreapta);
'char' (alinierea se face in raport cu un caracter);
Obs: Valoarea implicita este 'center' (centrat).
Daca alinierea este de tipul 'char' atunci caracterul in raport cu care se face alinierea este setat de atributul 'char' care primeste ca valoare caracterul de aliniere. In mod implicit acest caracter este '.'.
Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului 'valign' care poate lua valorile:
'baseline' (la baza);
'bottom' (jos);
'middle' (la mijloc);
'top' (sus).
Obs: Valoarea implicita este 'middle' (la mijloc).
Un tabel trebuie privit ca o retea rectangulara de celule. Cu ajutorul a doua atribute ale tag-urilor <td>sau <th> o celula se poate extinde peste celulele vecine. Astfel:
Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului 'colspan' a carui valoare determina numarul de celule care se unifica;
Extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului 'rowspan' a carui valoare determina numarul de celule care se unifica;
Obs:
Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz vor fi prezente in tag-urile <td>sau <th> ambele atribute 'colspan' si 'rowspan';
In definirea tabelului o celula extinsa este introdusa printr-un singur tag <td> sau <th>.
Urmatoarele atribute ale tag-ului <table> functioneaza sub Internet Explorer dar nu functioneaza sub Netscape Communicator:
'background' permite setarea unei imagini pentru fondul unui tabel. Primeste ca valoare URL-ul imaginii folosite pentru fond.
'bordercolor' permite setarea culorii pentru chenarul unui tabel;
'bordercolorlight' permite setarea culorii pentru chenarul 3D al unui tabel;
'bordercolordark' permite setarea culorii pentru chenarul 3D al unui tabel.
Imagini
Cele mai utilizate formate in care pot fi memorate fisierele de imagine in paginele Web sunt:
GIF (Graphics Interchange Format) (au extensia '.gif');
JPEG (Joint Photographic Experts Group) (au extensia '.jpeg' sau '.jpg');
BMP (BitMap) (au extensia '.bmp') (Numai cu browser-ul Internet Explorer);
TIFF (Tagged Image File Format) (au extensia '.tif' sau '.tiff');
PCX (PC Paintbrush);
PNG (Portable Network Graphics) (au extensia '.png').
Obs: Cele mai raspandite formate sunt GIF (8 biti pentru o culoare, 256 de culori posibile) si JPEG (24 de biti pentru o culoare, 16.777.216 de culori posibile).
Pentru inserarea unei imagini se utilizeaza tag-ul: <img> (image) cu atributele:
src (source) - contine adresa URL a imaginii
Ex.: <img src='NumeImagine.gif'>.Text .
Alte atribute optionale:
border - chenarul unei imagini
width si height - pentru a specifica dimensiunea imaginii pot fi numere (pixeli) sau procente %
align left, right, top,middle, bottom - aliniere
o (hspace, vspace pentru alinieraea celorlalte obiecte in jurul imaginii numai pentru Netscape)
Ex.:
<img src='nume.jpg' align="center" border width='200' height='20%'>
- Deseori dimensiunea unei imagini de inalta rezolutie ocupa multi KB, si implicit timpul de incarcare al paginii web in fereastra browser-ului creste cu atat mai mult cu cat legatura dintre client si server este mai lenta.
- Pentru ca in acest timp utilizatorul sa poata vedea ceva se apeleaza la doua atribute ale tag-ului <img> care inlocuiesc imaginea pe perioada incarcarii:
Atributul 'alt' admite ca valoare un text care se va afisa in locul imaginii, sau ca explicatie a imaginii;
Atributul 'lowsrc' admite ca valoare adresa URL a unei imagini de joasa rezolutie (de mica dimensiune) incarcabila rapid chiar si pe legaturile slabe. Exista aplicatii de prelucrare de imagini care permit transformarea unei imagini intr-o imagine asemanatoare de joasa rezolutie si de marime mult mai mica decat imaginea originala numite thumbnail.
Ex.:
<img src='nume1.gif' lowsrc= 'nume2.gif' alt='Explicatie'>
Imagini de fond ale paginilor Web
O imagine poate fi utilizata pentru a seta fondul unei pagini web. Pentru a efectua acest lucru se foloseste atributul 'background' al tag-ului <body> avand ca valoare URL-ul imaginii. Imaginea se multiplica pe orizontala si pe verticala pana se umple intregul ecran.
Pentru ca in timpul defilarii unei pagini web foarte mari imaginea de fond sa ramana fixa se utilizeaza atributul 'bgproperties' al tag-ului <body> fixat la valoarea 'fixed'. Acest atribut functioneaza numai cu Internet Explorer.
Ex.:
<body background='Nume.gif'
bgproperties='fixed'>
Tabelele pot contine imagini:
Ex.:
<table border>
<tr><td><img src='i1.gif'><td><img src='i2.gif'>
<tr><td><img src='i3.gif'><td><img src='i4.gif'>
</table>
Formatul GIF permite urmatoarele trei facilitati aduse fisierelor imagine:
Imagini intretesute (interlaced images) sunt imaginile care apar integral in pagina web dar pe masura ce sunt incarcate claritatea imaginii creste;
Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond astfel incat ceea ce se afla in spatele imaginilor devine vizibil;
Imaginile animate (animated images) sunt fisiere imagine speciale care contin o succesiune de imagini care sunt afisate periodic in pagina web.
Link-urile (legaturile) transforma un text obisnuit in 'hipertext' sau 'hipermedia', aspecte care permit trecerea rapida de la o informatie aflata pe un anumit server la alta informatie aflata pe un alt server oriunde in lume.
Link-urile sunt 'zone active' intr-o pagina web, adica zone pe ecran sensibile la apasarea butonului stang al mouse-ului.
Un click efectuat pe un link este interpretat ca o cerere catre un anumit server de pe INTERNET de a expedia catre computerul client o resursa catre care link-ul respectiv puncteaza.
In felul acesta paginile web devin interactive (adica raspund la actiuni initiate de utilizator).
In pagina html se insereaza link-uri prin intermediul unui tag special <a> (de la 'anchor'=ancora)si a unui atribut 'href' (referinta) care ia ca valoare adresa (URL-ul) resursei solicitate.
De exemplu:
<a href='http www.netscape.com'> . Text . </a>
'Zona activa', adica zona in pagina web care devine sensibila la apasarea butonului stang al mouse-ului, este formata din textul cuprins intre tag-urile <a> si </a>.
href poate specifica:
o pagina web aflata pe acelasi disc local sau
o adresa URL a unei pagini Web aflata pe un alt server.
<a href='pag1.html'><img src='imag1.gif'></a>
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1137
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
