»  Pagina principala  »  Tutoriale »  Tutorial complet HTML

Tutorial complet HTML

Exemplele prezentate in capitolele anterioare incarcau o singura pagina HTML in fereastra browserului.

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 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

<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 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.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>



« Inapoi 1 2 3 4 5 6 7 8 9 10 11 Inainte »
Pagina Urmatoare: Formulare




Link-ul autorului:
www.drogoreanu.ro/tutorials/html.php

Comentarii



   GAVRILESCU

Sint incepator in cele ale html dar informatiile pe care le dati sint extraordinare.Va felicit si va multumesc.poate imi recomandati ceva pentru documentare....chiar si contra cost
23-Apr-2010 - 23:51


   Cristian

Pentru HTML si CSS gasesti mai multe resurse pe www.tutorialehtml.com (e frate cu etutoriale), care e dedicat in totalitate pentru tutoriale HTML, XHtml si CSS. Daca ai rabdare si nu sari peste pagini in graba nu ai nevoie de nici un manual sau curs platit.
24-Apr-2010 - 19:00


   Andreiul

Poti te rog sa ma ajuti cu doua chestii ? 1. am pus o ancora in pagina ... si a doua nu mai functioneaza daca o pun ... 2. nu stiu cum sa postez situl .. poti sa imi dai niste indicatii :D ; daca ai timp uite-te te rog si la site-ul meu ... ce fac gresit in a pune acele ancore ... si te rog raspunde-mi ;)
(...............)
21-May-2010 - 14:55


   ioana

am facut un site calumea dar nu stiu cum sal postez........ma ajuti pls
23-Jun-2010 - 13:33


   marian

Nu vreu sa fiu rautocios, dar majoritatea tutorialele
sint fortate, sumare, fara introducere, fara intelegerea fenomenelor facute in graba.
12-Sep-2010 - 18:46


   Robert

Eu am invatat de aici cum sa fac un website
http://www.#######.ro
04-Oct-2010 - 16:39


   denisa

cum fac si io un radio ca am urmat pas cu pas tutorialul tau vali si nu merge imi spune invalid password. ce fac ?
06-Oct-2010 - 13:14


   Andreea

ce trebuie sa contina fisierul "script.php" si cum il creez? please help!!!
14-Nov-2010 - 18:47


   upgrade

imi palce mult!
17-Nov-2010 - 14:45


   Ionita Marius

lucruri foarte folesitoare!!!multumim!!
06-Dec-2010 - 13:07


   Extremlym

Thanks !!!
Apreciate
07-Dec-2010 - 16:59


   robi

doresc sa scriu un text langa un video pe care l-am luat de pe youutube si nu reusesc aveti vreo idee cum as putea face?
08-Jan-2011 - 15:14


   s0r1n

Cum mai pot pune un dj? Cu ShoutCast si winamp v5?
19-Jan-2011 - 14:31


   Popa mihai

Cel mai tare blog
29-Mar-2011 - 07:57



Voteaza acest articol!
 



Trimite un comentariu!

Nume *
E-mail *
Comentariu *
  Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

Security image

Catalin Drogoreanu

Inginer electronist din Bucuresti. In 2003 a inceput activitatea de webdesigner ca o activitate in timpul liber. Are cunostinte de HTML, CSS, PHP, MySQL si Adobe Photoshop.
http://www.drogoreanu.ro

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php