Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Limbajul HTML Complet

    Încărcat de

    MiTudoran
    17 vizualizări18 pagini
    Limbajul HTML Complet

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Limbajul HTML Complet

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    17 vizualizări18 pagini

    Limbajul HTML Complet

    Încărcat de

    MiTudoran
    Limbajul HTML Complet

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 18

    Limbajul HTML

    Pagina 1 din 18

    La crearea unei pagini WEB se parcurg paii:


    1. StartProgramsAccessoriesNOTEPAD. 2. Editarea codului surs ( a tag-urilor) n editorul de texte NOTEPAD. 3. Salvarea codului surs sub forma unui fiier cu extensia HTM sau HTML (obligatoriu). Fiierul va fi salvat n folderul dvs. 4. Localizarea fiierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fiier va avea pictograma urmtoare: .

    5. Lansarea n execuie a fiierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tag-urile scrise n Notepad pe Internet) dublu click pe fiier i astfel se va deschide programul Internet Explorer. 6. Modificarea codului surs se va face n Notepad. Deschiderea fiierului pentru ai modifica sursa se poate face: a. NotepadFileOpen ... b. Direct din fereastra ce s-a deschis la pasul 5 ( fereastra Internet Explorer) astfel: ViewSource (va deschide automat Notepad-ul). Orice modificare adus codului surs trebuie salvat (File Save). Pentru a vedea i pe Internet modificarea fcut n Notepad trebuie, fie s repetm paii 4 i 5, fie s revenim n fereastra Internet Explorer (ea este deja deschis vezi bara de START) i s alegem din meniul ViewRefresh (sau aps tasta F5) Observaie: Pentru o nou modificare a codului sursa se va repeta pasul 6.

    TAG-uri UTILZATE
    Structura general a unui fiier cu extensia HTM sau HTML este: nceput i sfrit de document html Antetul documentului

    <html> <head> Titlul paginii

    <title> </title>

    </head> <body> .. .. .. </body> </html> Corpul propriu-zis al documetului

    Observaie: un tag se va scrie ntotdeauna ncadrat de semnele < >. Efectul unui tag este vizibil pna cnd acesta
    este nchis (Ex: <title> Prima pagina WEB</title> care permite scrierea pe bara de titlu a programului Internet Explorer a textului Prima pagina WEB). Tag-uri cu efect asupra ntregii pagini web

    Limbajul HTML

    Pagina 2 din 18

    <body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a
    paginii Web, culoarea implicit de scriere a textului, culoarea legturilor, culoarea legturilor vizitate, culoarea legturilor de aciune. Atributul BGCOLOR stabilete culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de fundal va fi albastr sau <body bgcolor = 804050> (formatul de culoare este RRGGBB rou, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal)) Atributul TEXT permite stabilirea culorii implicite de scriere pe ntreaga pagin Web ( Ex: <body Text = red> tot textul pe pagina de Web va scris cu rou) Atributul LINK permite stabilirea culorii unei legturi (vezi tag-urile de la legturi). Implicit aceasta este albastr. (Ex: <body link = green> - legturile vor avea culoarea verde) Atributul Vlink permite stabilirea culorii unei legturi vizitate (Ex: <body vlink = red> un link vizitat va avea culoarea roie) Atributul ALINK permite stabilirea culorii unei legturi de aciune, adic pna la realizarea conexiunii stabilite de legtur (vezi tag-urile de la legturi) link-ul va avea culoarea stabilit prin ALINK, iar dup realizarea conexiunii acesta culoare va devenii automat cea specificat cu VLINK (Ex: <body alink = yellow> - un link n aciune va avea culoarea galben) OBS. Un tag poate folosi toate atributele de care dispune sau numai o parte din acestea ( Ex: <body bgcolor = red text = yellow link = gray> Dac dorim ca pe o pagin Web s avem ca fundal o poz , atunci n locul atributului BGCOLOR vom folosi atributul BACKGROUND urmnd a specifica adresa pozei respective (Ex: <body background = c:\student\poza.gif text = red >

    <bgsound src= Fiier muzic> - permite ascultarea pe fundalul paginii Web a unei melodi.
    Tag-uri pentru formatarea caracterelor i aranjarea textului

    <b> - permite scrierea caracterelor ngroat (bold) <i> - permite scrierea caracterelor nclinat (italic) <u> - permite scrierea caracterelor subliniat (underline) <center> - permite alinierea pe centru a textului pe pagin <p align = left/right/center>permite alinierea la stnga/dreapta/centru a textului pe pagin <br> - ntrerupe linia curent i trece textul sau imaginea pe urmtoarea linie <p> - ntrerupe linia curent i trece textul sau imaginea la paragraful urmtor
    Obs. <p> este echivalentul lui <br><br> (de dou ori <br>).

    <sup> - permite scrierea unor cuvinte la putere (Ex: 9<sup>50 are ca efect - 950) <sub> - permite scrierea unor cuvinte ca indice (Ex: X<sub>i are ca efect Xi) <tt> - permite scrierea unui text monospaiat (Ex: <tt>Este cel mai bine</tt> <hr size = a color = b width = c align = left/right/center > - plaseaz o linie orizontal n document.

    Limbajul HTML

    Pagina 3 din 18

    Atributul SIZE definete grosimea liniei orizontale (Ex: <hr size = 3> linia va avea o grosime de aproximativ 1 mm) Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va avea culoarea roie - sau color = 804050 (formatul de culoare este RRGGBB rou, verde, albastru) sau color = 15%85%95% sau color = aaffcc (formatul hexazecimal)) Atributul WIDTH specific lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontal o s ocupe numai 45% din suprafaa paginii web) Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stnga/dreapta/centru)

    <font color = a size = b face = c> - permite stabilirea culorii de scriere a caracterelor, stabilirea dimensiunii
    acestora, precum i stilul de scriere (Ex: Times New Roman, sau Arial) Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> textul va fi scris cu albastru. Observaie: Acest parametru are prioritate fa de acelai atribut din tag-ul <body text = b>. Aadar, dac se stabilete o culoarea a textului pe ntreaga pagin Web pe rou - <body text=red> - i doresc s scriu un cuvnt cu ablastru atunci voi folosi tag-ul <font color=blue> naintea cuvntului pe care doresc s-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul <font color=blue> are prioritate fa de tag-ul <body text=red>. Atributul SIZE stabilete dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existnd un echivalent al acestora cu dimensiunile caracterelor din WORD 1 = 8pt / 2 = 10pt / 5 = 18pt / 7 = 36pt (Ex: <font size = 1> scrie la o dimensiune a caracterelor de 8pt) Atributul FACE permite specificarea stilului de scriere (Ex: <font face = Arial> - scrie pe stilul Arial)

    <address> - permite scrierea pe un anumit stil a unei adrese potale, a unui telefon <marquee direction = left/right behavior = Scroll/Slide/Alternate>.Text sau imagine . </marquee> - permite realizarea unei animaii a textului, n sensul deplasrii acestuia pe ecran
    Tag-uri pentru includerea unei imagini n cadrul paginii Web

    <img src =

    border = a width = c height = d align = left/right/center alt = > - acest tag

    permite amplasare unei imagini n cadrul paginii Web Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web (Ex: <img src=c:\student\poza.gif> - va plasa pe pagina de Web fiierul poza.gif existent n folderul c:\student Atributul BORDER permite stabilirea grosimii liniei ce va nconjura poza (Ex: <img src=c:\student\poza.gif border = 3> - linia ce va nconjura poza va avea o grosime de aproximativ 1 mm) Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontal (lungimea pozei pe orizontal) (Ex: <img src=c:\student\poza.gif width = 150> - poza va avea o lungime pe orizontal de aproximativ 5 cm) Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe vertical (lungimea pozei pe vertical) (Ex: <img src=c:\student\poza.gif height = 300> - poza va avea o lungime pe orizontal de aproximativ 10 cm) Atributul ALIGN permite alinierea imaginii respective n cadrul paginii Web ( Ex: <img src=c:\student\poza.gif align = left> - poza va fi aliniat la stnga) Atributul ALT permite scrierea unui text care va apare numai atunci cnd utilizatorul este poziionat cu mouse-ul pe imaginea respectiv (Ex: <img src=c:\student\poza.gif align = left alt = Poza aceasta este din secolul trecut>)

    <img dynsrc=Fiier film> - permite plasarea pe pagina de Web a unui film.

    Tag-uri pentru realizarea de liste

    Limbajul HTML

    Pagina 4 din 18

    <ol type = a start = b> <li>Primul element din list <li>Al doilea element din list <li>Al treilea element din list </ol> - permite realizarea unei liste ordonate. O lista este ordonat dac elementele ei au o numerotare n fa (ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specific de la ct s nceap numerotarea n lista Ex: <ol type = a start =1> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> Ex: <ol type = A start =3> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> Ex: <ol type = 1 start =5> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> Ex: <ol type = I start =3> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> <ul type = a> <li>Primul element din list <li>Al doilea element din list <li>Al treilea element din list </ul> - permite realizarea unei liste neordonate. O lista este neordonat dac elementele ei nu au o numerotare n fa (sunt neordonate), ci doar semne care s identifice elementul din list Atributul TYPE permite specificarea tipului de semn al elementului din list Ex: <ul type = Square> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ul> Ex: <ul type = Disc> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ul>

    Ex: <ul type = Circle> <li> Primul element din list

    Limbajul HTML <li> Al doilea element din list <li> Al treilea element din list </ul> <dl> <dt>Student <dd>O persoan nscris la o instituie de nvmnt superior <dt>Profesor universitar <dd>Cadru didactic la o instituie de nvmnt superior

    Pagina 5 din 18

    </dl> - permite realizarea unei liste cu definiii. Tag-ul <dt> precizeaz termenul pe care vrem s-l definim n cadrul listei cu definiii, iar tag-ul <dd> definete termenul pe care vrem s-l definim. Ex:

    Tag-uri pentru realizarea legturilor Tag-ul pentru realizarea legturilor este:

    <A href = Unde vreau s ajung > Pe ce dau click (text sau imagine)</a>
    n funcie de locul unde vreau s ajung distingem trei tipuri de legturi: interne, locale i externe. A. Legtura intern - permite realizarea unei legturi n cadrul aceluiai fiier (de exemplu de la cuprinsul unei cri ce cuprinde capitolele existente n cartea respectiv s se relizeze o conexsiune ctre coninutul unui capitol). Schematic se distinge astfel: Fiierul A.htm

    Ex: presupunem c avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se afl pe pagina 1) doresc a fi o punte de legtur ntre el i coninutul fiecrui capitol (adic dac dau click stnga de mouse pe capitolul 3 s m poziioneze direct pe coninutul capitolului 3 care se afl, de exemplu la pagina 185. Cum voi proceda ? 1. Realizarea cuprinsului ca punte de legtur ntre el i coninutul fiecrui capitol (pe pagina 1). 2. Deplasare la pagina 185 i realizarea unui semn de carte pentru a ti unde anume s-mi poziioneze cursorul atunci cnd execut click stnga de mouse pe textul de legtur.

    Ex: Suntem pe pagina 1 i realizm curpinsul.

    Limbajul HTML

    Pagina 6 din 18

    <A href=#Continutul capitolului 1>Capitolul 1</a> <A href=#Continutul capitolului 2>Capitolul 2</a> <A href=#Continutul capitolului 3>Capitolul 3</a> <A href=#Continutul capitolului 4>Capitolul 4</a> <A href=#Continutul capitolului 5>Capitolul 5</a> Dup cum se observ Capitolul 3 a fost trecut ca text de legtur ( vezi sintaxa tag-ului <A href = . >..</A> ) pentru a putea executa click stnga de mouse i a ne trimite apoi la pagina 185(conform enun exemplu). #Continutul capitolului 3 este numele semnului de carte de la pagina 185. Aa am vrut s numesc semnul de carte (puteam s-i dau orice alt nume cu spaii sau fr spaii, dar dac are spaii atunci acest nume de semn de carte trebuie pus ntre ghilimele) Deplasare la pagina 185 n cadrul crii respective . Aceast deplasare o realizm cu bara de defilare sau cu tasta PageDown, deoarece acesta este locul n care vreau s m poziioneze cu mouse-ul dup ce dau click pe textul de legtur. La aceast pagin vom crea un semn de carte cu numele #Continutul capitolului 3 astfel: <A name = #Continutul capitolului 3> Dup ce am definit semnul de carte la pagina 185 putem s ne deplasm de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legtur i numai este nevoie de tasta PageDown sau de bara de defilare. Obs: Fiierul HTML trebuie s aib cel puin 185 de pagini. B. Legtura local permite realizarea unei conexiuni cu un fiier existent pe calculatorul local Fiierul A.htm Fiierul B.htm sau orice alt extensie

    Ex: n fiierul A.Htm avem urmtorul tag: <A href = c:\student\B.doc>Click aici</a> - dac executai click stnga de mouse pe textul Click aici atunci se va realiza o conexiune cu fiierul B.doc existent pe c:\student. Observaie: de data aceasta nu mai este nevoie de un semn de carte. Dac ns avem dou fiiere cu extensia htm (fisierul1.htm i fisierul2.htm) i dorim s ne deplasm din fiierul1.htm n fiierul2.htm la pagina 200, atunci n fiierul1.htm vom scrie: <A href = c:\student\fisierul2.htm#Semnul de carte de la pagina 200>Ctre fiierul 2</a> Observaie: La pagina 200 din fiierul2.htm voi merge i voi defini un semn de carte cu numele Semnul de carte de la pagina 200. Astfel am realizat o legtur localo-intern.

    Limbajul HTML C. Legtura extern permite realizarea unei conexiuni cu exteriorul (un site, un e-mail) Fiierul A.htm Exterior: Site sau Email

    Pagina 7 din 18

    Ex: Legtur ctre un site <A href = http://www.ase.ro>Vizitai site-ul A.S.E.</a> - permite realizarea unei conexiuni cu site-ul Academiei de Studii Economice. Ex: Legtur de transmitere a unui mesaj <A href=mailto:Georgescu@yahoo.com> Georgescu Nicolae </A> - permite transmiterea unei mesaj ctre csua potal a lui Georgescu Nicolae (numele este chiar text de legtur). Observaie general: Pn acum tot ce am fcut nu ne permite ca pe o pagin de Web s tastm ceva, ci doar s citim coninutul paginii respective. Cum vom proceda atunci cnd utilizatorul dorete de exemplu s scrie un mesaj, sau dorete s completeze un formular electronic n care trebuie s-i tasteze numele i prenumele, data naterii, domiciliu, .... etc, direct de pe Internet fr a mai fi nevoie s se deplaseze la sediul unei firme? Rspuns: utiliznd tag-uri care s permit realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obin cu tag-urile de realizare a formularelor. Tag-uri pentru realizarea formularelor <form method = post/get action = adresa unde vor fi trimise datele scrise spre analiz> .. .. .. </form> - permite realizarea de casete speciale pentru a putea scrie pe o pagina Web. Atributul METHOD specific modalitatea de transmitere a datelor ctre server pentru a putea fi analizate. Atributul ACTION permite specificarea adresei server-ului care va primii datele scrise de utilizator pe internet. Tag-urie efective de realizare a casetelor speciale se scriu ntre <form> ..i ...</form>. Caset de tip text: <input type = text name = a size = b maxlength = c value = d> - permite realizarea de casete de tip text Atributul Type permite specificarea tipului de caset utilizat (text) Atributul Name permite specificarea numelui casetei de tip text Atributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile n caseta detip text) Atributul Maxlength permite specificarea numrului maxim de caractere ce poate fi scris n caseta de tip text Atributul Value permite specificarea textului implicit ce va aprea scris n caseta de tip text.

    Limbajul HTML

    Pagina 8 din 18

    Ex: Introducei numele i prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = Popescu Ion>

    Observaie. Caseta de tip text nu permite scrierea pe mai multe rnduri, ci doar pe unul singur.
    Un exemplu mai sofisticat ce face apel la stiluri:

    Introducei numele dvs: <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">

    Caset de tip parol: <input type = Password name = a size = b maxlength = c value = d> - permite realizarea de casete de tip parol Ex: Introducei parola<input type=password name=caseta2 size=15 maxlength=12 value="Popescu Ion">

    Caset de tip checkbox <input type=checkbox name = a> Ex: Care sunt limbile strine cunoscute: <input type=checkbox name = a>Englez <input type=checkbox name = b>Francez <input type=checkbox name = c>German

    Caset de tip Radio buton <input type=radio name = a> Ex: Care este ara de origine: <input type = radio name = a>Romnia <input type=radio name = a>SUA<input type=radio name = a>Germania Observaie. Numele radio butoanelor trebuie s fie acelai, deoarece ara de origine este numai una singur ori dac butoanele radio nu au aceli nume se pot selecta toate rile. Buton de trimitere a datelor ctre server <input type=Submit name=a value = Trimite datele> Atributul VALUE permite scrierea unui text pe buton. Ex: <input type=Submit name=a value=Trimite datele>

    Buton de tergere a datelor <input type=Reset name=a value = Sterge datele> Ex: <input type=Reset name=a value=terge datele>

    Buton obinuit < input type=button name=a value=Calculeaza valoare din co>

    Limbajul HTML Caset de tip multilinie <textarea rows=a cols=b> .</textarea> permite scrierea pe mai multe rnduri

    Pagina 9 din 18

    Atributul Rows permite precizarea numrului de linii vizibile n cadrul acestei casete de tip multilinie. Numrul liniilor ce poate fi scris n aceast caset este cu mult mai mare, dar vizibile pe ecran sunt cele precizate n Rows, pentru restul liniilor ne vom deplasa cu bare de defilare care va apare automat dac numrul de linii este mai mare dect cel precizat cu Rows. Atributul Cols permite precizarea numrului de caractere de pe coloan (un caracter = o coloan). Ex: <Textarea rows=6 cols=15>Tastai mesajul dvs.</textarea>

    Observaie. Verificai numrul liniilor precizate cu Rows i numrul caracterelor pe coloan precizate cu Cols. Caset de tip combobox <select> <option>Elementul 1 <option>Elementul 2 <option selected>Elementul 3 <option>Elementul 4 <option>Elementul 5 </select> - permite realizarea unui combobox (list derulant) Ex:

    Observaie. Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizeaz o selectie implicit a acestei opiuni.

    Limbajul HTML Caset de tip list derulant cu selectie multipl <select multiple size = a> <option>Elementul 1 <option>Elementul 2 <option selected>Elementul 3 <option>Elementul 4 <option>Elementul 5 </select>

    Pagina 10 din 18

    Atributul SIZE permite specificarea numrului de opiuni vizibile n cadrul listei respective. Ex:

    Observaie. n list avem 5 ri dar vizibile avem numai 4 dintre ele datorit atributului SIZE=4. Pentru a vedea i cea de-a 5-a ar ne deplasm cu bare de defilare vertical. Pentru a selecta mai multe ri trebuie s inem i tasta CTRL apast. Tag-uri pentru realizarea tabelelor La realizarea tabelelor folosim urmtoarele tag-uri:
    <table border=a cellspacing=b cellpading=c width=d bordercolor=e> <tr bgcolor=a align=left/right/center valign=top/middle/bottom> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b>

    Atributul BORDER permite stabilirea grosimii liniilor tabelului Atributul CELLSPACING permite stabilirea spaiului dintre celulele unui table Atributul CELLPADING permite stabilirea spaiului dintre textul din interiorul unei celule i liniile acesteia. Atributul WIDTH stabilete suprafaa pe care s o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule. Atributul BORDERCOLOR permite stabilirea culorii liniilor tabelului Atributul BGCOLOR permite stabilirea culorii de fundal a liniei (n tag-ul TR) sau celulei (n tag-ul TD). Dac nu dorim pe fundal o culoare ci o poz atunci folosim n loc de BGCOLOR atributul BACKGROUND urmnd a preciza care este adresa pozei de fundal. Atributul ALIGN permite alinierea pe orizontal a textului n linia/celula respectiv Atributul VALIGN permite alinierea pe vertical a textului n linia/celula respectiv TAG-ul TR creaz o linie n cadrul tabelului respectiv. Deci cte linii are tabelul attea TR trebuie s avem (cheie de control). Atributele din TR au efect asupra ntregi linii. TAG-ul TD creeaz o celul pe linia respectiv. Deci cte celule are tabelul respectiv attea TD trebuie s avem (cheie de control). Atributele din TD au efect asupra celulei curente.

    Limbajul HTML Ex:

    Pagina 11 din 18

    Observaie. Atributele folosite n cadrul tag-ul TD au prioritate fa de cele folosite n cadrul tag-ului TR. n cadrul tag-ului TD se poate folosii simultan i atributul ROWSPAN i COLSPAN semnificnd faptul c celula respectiv este unit peste X linii i Y coloane. ATENIE: urmrii culorile liniilor pentru a nelege cum se realizeaz un tabel. Anumitor celule le-am schimbat culoare pentru a vedea prioritatea dintre TR i TD. Tag-uri pentru realizarea de Frame-uri (cadre) Tag-urile pentru realizarea frame-urilor sunt: <frameset rows = a frameborder = yes/no> <frameset cols=b frameborder = yes/no> <frame name=a noresize src=b>.

    Limbajul HTML

    Pagina 12 din 18

    Se va folosii <frameset rows = a frameborder = yes/no> atunci cnd vrem ca ecranul monitorului s fie mprit plecnd de la crearea mai nti a liniilor frame-urilor i pe urm a coloanelor frame-urilor de pe un monitor. Aceast alegere o facem n fucie de liniile sau coloanele pe care vrrem s le avem ca despritoare de frame-uri (cadre) de pe monitor i anume Ce avem dintr-un capt n altul al monitorului? linie despritoare sau coloan despritoare. Dac avem linii, obligatoriu trebuie s pornim cu tag-ul <frameset rows = a frameborder = yes/no>, iar dac avem coloan cu tag- ul <frameset cols = a frameborder = yes/no>. Dac avem i linii i coloane care unesc capetele monitorului (pe orizontal i pe vertical) atunci ncepem crearea frame-urilor de la linii sau de la coloane. Presupunem ca vrem s mprim ecranul astfel:

    Observaie. Dintr-un capt la ecranului n altul nu ajunge dect o linie. Aadar ecranul este mprit n dou linii dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori ct prima (3*). Deci pornim cu tag-ul <frameset rows =*,3* frameborder = yes> <html> <head> <title>Realizare frame-uri</title> </head> <frameset rows="*,3*" frameborder=yes> <frameset cols="*,*,*"> <frame name=f1 src=1.htm noresize> <frame name=f2 src=2.htm noresize> <frame name=f3 src=3.htm noresize> </frameset> <frameset cols="*,*"> <frame name=f4 src=4.htm noresize> <frame name=f5 src=5.htm noresize> </frameset> </frameset> </html> Prima linie este mprit i n trei coloane egale. deci trebuie s crem coloanele respective <frameset cols="*,*,*">. Odat ce am creat coloanele respective, deoarece aceasta este forma final a primei linii, trebuie s precizm care este sursa pentru fiecare coloan n parte de pe prima linie. Pentru c doresc s nu aibe posibilitatea redimensionrii frame-urilor voi folosi i atributul NORESIZE atunci cnd precizez sursa fiecrui cadru n parte. <frame name=f1 src=1.htm noresize> <frame name=f2 src=2.htm noresize> <frame name=f3 src=3.htm noresize>

    Limbajul HTML

    Pagina 13 din 18

    Odat cu precizarea surselor coloanelor acesta trebuie nchis (</frameset>) Deci cu prima linie am terminat. Urmeaz a doua linie. Aceasta este i ea mprit n 2 coloane egale, deci trebuie s le crem: <frameset cols="*,*">. Aceasta fiind forma final trebuie acum s precizez care este sursa pentru cele 2 noi coloane create. <frame name=f4 src=4.htm noresize> <frame name=f5 src=5.htm noresize> Odat cu precizarea surselor coloanelor acesta trebuie nchis (</frameset>) Totodat am terminat cu ambele linii, deci trebuie s nchid frame-urile (</frameset>) Observaie: n fiierul ce conine frame-uri nu trebuie s avem tag-ul BODY, deci nu trebuie s avem nimic n corpul documentului. Fiierele precizate ca surs a coloanelor trebuie mcar s existe, chiar dac nu avem nimic scris n ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm trebuie s existe).

    Aplicaie rezolvat
    Scriei codul sursa pentru realizarea urmtoarei pagini de WEB:

    Observaie. Coninutul existent n partea din stnga, partea centrala i partea de jos apare numai dup ce ai executat click pe textul aici situat n partea de sus. Rezolvare: Fiierul de creare al frame-urilor (Frame.htm) conine urmtorul cod surs:

    Limbajul HTML

    Pagina 14 din 18

    Observaie. Frame-urile din stnga nu au nici o surs, deoarece acestea vor fi completate numai dup ce execut click stnga pe textul aici din fiierul surs SUS.htm. Fiierul SUS.htm conine urmtorul cod surs:

    Observaie. Atributul TARGET din cadrul tag-ului <A href = > ..</A> are ca obiectiv afiarea conexiunii n frame-ul cu numele precizat n TARGET i nu n cadrul aceluiai frame (vezi ce nume am dat frame-urilor (name) n fiierul FRAME.htm i localizeaz locul cadranului n care este precizat <A href= ..>..</A> ce conine atributul TARGET fiierul Sus.htm este ca surs pentr cadranul din partea de sus.) . Fiierul STNGA.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

    Limbajul HTML Fiierul Central.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

    Pagina 15 din 18

    Fiierul Jos.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

    Limbajul HTML

    Pagina 16 din 18

    Tag-uri pentru realizarea frame-urilor interne Pentru realizarea frame-urilor interne se folosete tag-ul: <IFRAME SRC="fisierul dorit " NAME="FINTERN1" WIDTH="400" HEIGHT="150" FRAMEBORDER="1" ALIGN="LEFT/CENTER/RIGHT" SCROLLING=YES/NO> </IFRAME>
    Exemplu: Fiierul X.htm se prezint astfel:

    Site-urile se vor afia n acest cadru intern.

    Codul surs al acestei pagini este:

    Observaie: Pentru frame-ul intern (numit FI1 frame intern 1) din celula stng se folosete fiierul A.htm, iar pentru frame-ul intern (numit FI2 frame intern 2) din dreapta, se folosete fiierul B.htm.

    Limbajul HTML Codul surs al fiierului A.htm este:

    Pagina 17 din 18

    Codul surs al fiierului B.htm este foarte simblu, avnd numai culoarea de fundal pink.. Tag-uri pentru realizarea imaginilor reactive O imagine reactiv este o imagine obinuit asupra creia se definesc zone de aciune diferite (ptrat, cerc, poligon, etc.) La definirea unei zone rectangulare trebuie specificate coordonatele colului din stnga sus i ale celui din dreapta jos. La definirea unei zone de cerc trebuie specificate coordonatele centrului cercului, precum si dimensiunea razei cercului, iar la definirea unei zone poligonale trebuie precizate coordonatele tuturor colurilor ce formeaz poligonul. Sugestie: Pentru aflarea tuturor coordonatelor se va plasa poza n progranul PAINT, iar apoi se poziioneaz mouse-ul pe zonele de demarcaie dorite, notndu-se separat coordonatele fiecrui col, dup caz. Aceste coordonate vor fi scrise n cadrul tag-ului corespunztor n NOTEPAD. Aplicaie rezolvat S se scrie codul surs pentru realizarea urmtoarei pagini WEB:

    1 2

    26 3 pix eli
    1

    5 4

    2 - lungimea razei

    3
    Rezolvare

    Limbajul HTML

    Pagina 18 din 18

    Poza de pe pagina de WEB are dimensiunea: Width (lungimea) = 368 pixeli i Height (nlimea) = 263 pixeli. Pe aceasta se regsesc trei zone de aciune: o zon rectangular, ce are coordonatele: 198, 40 i 217, 55 o zon de cerc, ce are coordonatele: 210, 180, 7 o zon poligon, ce are coordonatele: 266, 68 267, 87 286, 87 286, 68 i 276, 39 Dup ce s-au stabilit coordonatele celor trei zone reactive de pe imaginea suport se poate trece la scrierea codului surs. Acesta este:
    html> <head> <title>Exemplu de imagine reactiva</title> </head> <body> Aici este o singura poza in care avem mai multe zone reactive, zone ce interactioneaza diferit la un clic de mouse. <p> <Map name="Poza noastra"> <area shape="rectangle" coords="198, 40 217, 55" href="mailto:georgescu@ase.ro"> <area shape="circle" coords="210, 180, 7" href="Http://www.electrice.ro"> <area shape="polygon" coords="266, 68 267, 87 286, 87 286, 68 276, 39" href="Alta pagin.html"> </Map> <img Usemap="#Poza noastra" border="3" src="J0149118.JPG" width="386" height="263"> </body> </html>

    Dup cum se observ, pentru nceput a fost necesar crearea hrii pozei de pe pagina de WEB . Pentru aceasta s-a folosit tag-ul <Map></Map>, un tag mai complex. n interior tag-ului de nceput i sfrit, <Map>, se regsete tag-ul <Area>, iar atributul Shape definete practic zonele reactive din imaginea nostr. Valorile luate de acest atribut trebuie s specifice forma zonei reactive. Astfel, Rectangle sau Rect form rectangular, Circle sau Circ cerc, Polygon sau Poly poligonul (mai multe laturi). Atributul Coords permite specificarea coordonatelor zonelor reactive pe tipuri de forme (rectangular, cerc sau polign). Atributul Href are rolul de o specifica adresa, destinaia legturilor din zonele reactive. Includerea unei poze pe o pagin Web se face cu tag-ul <IMG>, cunoscut deja de la aplicaiile anterioare. Un atribut nou, Usemap, ne permite specificarea faptului c poza ce se dorete a fi inclus pe pagina de Web, are n cazul de fa, cele trei zone reactive la coordonatele specificate mai sus. Foarte importante sunt i atributele WIDTH i HEIGHT, deoarece harta zonelor reactive de pe poza noastr a fost fcut pe dimesiunile specificate ale pozei, adic pe Width (lungimea) = 368 pixeli i Height (nlimea) = 263 pixeli. Aceasta nseamn c n colul din stnga sus al pozei se afl coordonatele 0,0, iar n colul din dreapta jos se afl coordonatele 368, 263. Aadar, ntre aceste coordonate s-au stabilit i zonele reactive. Atenie, nu este corect s avem o zon reactiv n afara dimensiunilor pozei din pagina Web. Tag-uri pentru realizarea foilor de stil de citit din cartea Bazele tehnologiei informaiei i comunicaiilor Tama i alii, Ed. InfoMega, Bucureti, 2005.

    S-ar putea să vă placă și