Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de definitii.
Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.
Suport didactic: Marcaje pentru liste
Exemplu:
<html>
<head> Liste exemple
</head>
<body>
<h4 align="left">Obiective turistice:</h4>
<ol>
<li> Manastiri </li>
<li> Monumente </li>
<li>Muzee </li>
</ol>
<h4 align="center">lista de cumparaturi </h4>
<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>
<dl>
<dt><b>Fromage</b></dt>
<dd>Cuvant francez pentru branza .</dd>
<dt><b>Voiture</b></dt>
<dd>Cuvant francez pentru masina</dd>
</dl>
</body>
</html>
Rezultat:
Cadre
Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre.
Suport didactic: Marcaje pentru 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:
Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:
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.
In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi goala. Pentru a evita acest lucru 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.
Manual HTML
Exemplu:
<html>
<head> Liste exemple
</head>
<body>
<h4 align="left">Obiective turistice:</h4>
<ol>
<li> Manastiri </li>
<li> Monumente </li>
<li>Muzee </li>
</ol>
<h4 align="center">lista de cumparaturi </h4>
<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>
<dl>
<dt><b>Fromage</b></dt>
<dd>Cuvant francez pentru branza .</dd>
<dt><b>Voiture</b></dt>
<dd>Cuvant francez pentru masina</dd>
</dl>
</body>
</html>
Rezultat:
Cadre
Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre.
Suport didactic: Marcaje pentru 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 perechea de etichete <frame> </frame>, si suporta atributele:
- src fisierul sau adresa fisierului introdus
- bordercolor culoarea 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 posibilitatea de redimensionare a cadrelor
<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>
<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 dreapta (se poate verifica
functionarea atributului target al legaturii). Cadrul din stanga va avea
scroll.
<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>
In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi goala. Pentru a evita acest lucru 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.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>
Manual HTML
REALIZATI URMATOAREA ACTIVITATE
Bibliografie suplimentara:
- Inserati in paginile proiectului dvoastra coduri HTML care sa contina toate tag-urile studiate la ora, insotite de atributele prezentate mai sus.
- Trimiteti prin e-mail lucrarea sau o predati personal profesorului pe stik, termen de predare 9.11.2014.
Bibliografie suplimentara:
- Structura documentului HTML
- Formatarea caracterelor, organizarea textului
- Blocuri de text
- Liste. Noţiuni şi marcaje utilizate
- Tabele. Noţiuni si marcaje utilizate
- Operarea cu obiecte. Inserarea imaginilor, sunetelor şi videoclipurilor
- Referinţe. Referinţe interne şi externe.
- Documentarea unei pagini WEB.
- Operarea cu formulare. Marcaje utilizate
- Ferestre in HTML. Comenzi de construire a ferestrelor(cadrelor)
Niciun comentariu:
Trimiteți un comentariu