Lectia 2 HTML

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset> iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.

Atributele etichetei frameset sunt:
cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
rows imparte pagina in randuri cu aceleasi valori ca la cols
bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
frameborder inhibarea afisarii chenarelor cu valorile yes sau no

Cadrele sunt introduse prin pereche de etichete <frame> </frame> care suporta atributele:
src fisierul sau adresa fisierului introdus
bordercolor colorit chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto

Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina de sus are chenarul rosu iar cea de jos are scroll.
<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>

Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara probabilitatea de redimensionare a cadrelor
<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>

Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor deschide in cadrul din stanga (se poate verifica functionarea atributului target al legaturii). Cadrul din stanga va avea scroll.

In situatia in care browserul întrebuințat nu suporta pagini care contin cadre imaginea afisata va fi goala. Pentru a evita acest fapt vom introduce un mesaj incadrat de <body> si </body> intre etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser care nu suporta cadre.
<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.htm">
<frame src ="pag2.htm">
<frame src ="pag3.htm">
</frameset>

Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si </iframe> si au atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru

Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poate introduce un mesaj pentru browserele care nu suporta cadre in-line. Modul de afisare al exemplului poate diferi de la un browser la altul.
<html>
<head>
<title>Exemplul 8_4</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>
------------------------------------------------------
Formatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi).

In pagini putem introduce:
1. link-uri catre fisiere video
2. videoclipuri care care sa fie vizionate direct din pagina web

<a href="1.avi">fisier video</a> fisier video

A doua varianta este acceptata doar de browserul internet Explorer care permite atribute speciale in eticheta <img>:
dynsrc - fisierul sursa video care va fi vizionat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi vizionat fisierul)
start - indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost incarcata, mouseover=cand mose-ul este deasupra imaginii)
controls - afiseaza butoanele de control.
Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).

In pagini putem introduce:
1. link-uri catre fisiere de sunet
2. sunete care care sa fie audiate direct din pagina web
3. sunet de fond (fundal sonor)

<a href="1.mid">fisier sunet</a> fisier sunet

A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.

A treia varianta este acceptata doar de browserul internet Explorer si consta in inserarea in interiorul trupului paginii a etichetei: <bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi audiat fisierul)

Aceste etichete au o mare utilizare deoarece tabele reprezintă structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent  .

Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

Exemplu:http://files-upload.com/files/593110/exemplu2.html

<table border="1">
<tr><td width="80" bgcolor="red">rosu</td>
<td width="160" bgcolor="yellow">galben</td></tr>
<tr><td bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> </table>
-------------------------------------------------------------------------------------------------------------------------
Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = nuanță de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului si continut

Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea

Exemplu:http://files-upload.com/files/593121/exemplu3.html
<table border="1">
<tr> <td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
<td bgcolor="white">R1 C3</td>
<td bgcolor="yellow">R1 C4</td> </tr> <tr>
<td colspan="2" bgcolor="red">R2 C1+C2</td>
<td bgcolor="yellow">R2 C3</td>
<td bgcolor="red">R2 C4</td> </tr> <tr>
<td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td>
<td bgcolor="yellow">R3 C2</td>
<td bgcolor="white">R3 C3</td>
<td bgcolor="yellow">R3 C4</td> </tr> <tr>
<td bgcolor="red">R4 C2</td> <td bgcolor="yellow">R4 C3</td>
<td bgcolor="red">R4 C4</td> </tr> </table>
-------------------------------------------------------------------
Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.

To Be Continued................

I am glad to learn something new! In general, a positive attitude to all the people who do not stand still, and learn something new.