TEHNOLOGIA PENTRU INTERNET
Definirea culorilor de font
Culoarea de font se stabileste cu ajutorul bgcolor care poate fi atasat intregului tabel adica cu atributul <table> doar unei linii ca atribut al tagu-lui <tr> sau unei coloane ca atribut al tagului <td>.
Valorile sunt cele cunoscute pentru valorile culorilor.
Observatie Daca in table sunt definite mai multe attribute <bgcolor> atunci prioritatea este in ordine descrecatoare de la <td> etc
Exemplu:
<html> <had> <table> Exemplu </title> </head>
<body> <h1align="center"> Ex de table colorat
<table border=3"bgcolor "yelow"> <tr> <td> galben
<td bgcolor="green> verde <tr bgcolor ="red"> <td > rosu < td bgcolor="cyan"> cyan
</table> </body> </html>
|
Galben |
Verde |
|
Rosu |
|
Rezultatul acestui exemplu
Bgcolor
<table> tabelului
<tr> liniei
<td> celulei
- din punct de vedere al popularitatii
Dimensiunea celulei unui tabel
Distanta dintre 2 celule vecine se defineste cu ajutorul atributului cellsspacing.
Valorile acestui atribut pot fi numere intregi pozitive inclusiv 0, si reprezinta
distanta in Excel intre 2 celule vecine, implicit valoarea lui cellsspacing este 2.
Distanta dintre marginea unei celule si continutul ei este definita cu ajutorul atributul atributului ceelpending si valoarea acestui atribut este un numar intreg pozitiv inclusiv 0 implicit valoarea 1.
Dimensionarea unui tabel
Dimensiunile unui tabel adica latimea si inaltimea pot fi stabilite prin intermediul a doua atribute width si height.
Valorile acestor atribute pot fi:
- numere intregi pozitive
- numere intregi intre 1 si 100 urmate de semnul procent rearezentand fractiunea din latimea respectiv inaltimea totala a paginii.
Width
Heght = ,,50 /"
Observatie: Daca dimensiunile precizate sunt mai mici decit cele necesare afisarii tabelului atunci vor fi folosite aceste dimensiuni, astfel vor fi folosite dimensiunile implicite date la constructia tabelului.
Zona din jurul unui tabel - distanta dintre tebel si celelalte elemente ale paginiivor fi stabilite cu ajutorul atributelor: hspace si vspace
Valoarea acestor attribute reprezinta nr. intregi positive inclusive 0 cu observatia ca atributele au efect in Netscape.
Titlul unui tabel
Unui tabel i se poate atasa un titlu cu ajutorul atributului align etichetei caption care poate lua una dintre valorile bottom - atunci cand afisarea este sub tabel, top - afisarea deaspra tabelului, left - stanga si right - dreapta.
Cap de tabel
Un tabel poate avea celule cu semnificatie de cap de tabel, aceste celule sunt introduse cu ajutorul tagului <th> table header. Acest tag inlolcuieste practic tagul td
Observatie: Toate atributele care pot fi atasate tagului tg pot fi atasate si tagului th
Continutul celulelor din interiorul tagului th va fi centrat si ingrosat.
Exemplu:
<htmal> <head> <title> Exemplu <title> </head> <body>
<h1align "center"> Exemplu </h1>
<h2> Un tabel cu titlu sa cap de tabel </h2>
<table border> <caption align ="battom"> bilantul in saptamana 11-15 Mai
<tr> <th> Bilant/zile <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 > <body> </html>
- 3 randuri
- th - Luni apare in interiorul coloanei
- zilele - centrate, ingrotate
- intrari, iesiri - centrat
|
Bilant/zile |
Luni |
Marti |
Miercuri |
Joi |
Vineri |
|
Intrari | |||||
|
Iesiri |
- numerele - centrate la stanga
- tabelul are un border - liniile ingrosate
- tabelul are un caption : Bilantul saptamanii 11-15 Mai
Alinierea continutului
Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului align
care poate lua valorile:
- left - stanga
- center - centru
- right - dreapta implicit atunci cand nu exista acest atribut valoarea sa este left.
Alinierea pe verticala a continutului unei celule se poate face cu ajutorul atributului valign:
- top -sus
- middle - mijloc
- bottom implicit este middle
Aceste atribute pot fi atasate atat etichetelor tr pentru a defini alinierea tuturor celulelor unui rand cat si etichetelor td sau th pentru a stabili alinierea intr-o celula.
Celulele vide a unui tabel
Daca un tabel are celule ce nu contin date, acestea vor aparea in tabel fara un chenar de delimitare. Pentru a afisa un chenar celulelor vide vom folosi caracterul & nbsp (ne break space/ tasta 5 sau 6)
Grupuri de coloane
Folosirea tagului < colgroup > < /colgroup > permite definirea unui grup de coloane, urm. atribute: span determina nr. de coloane dintr-un grup, width determina o latime unica pentru coloanele din grup respectiv align determina tip unic pentru coloanele din grup.
Imagini
Imaginile sunt stocate in fisiere in diverse formate. Formatele acceptate de browsere pentru fisiere imagine sunt:
- GIF (Graphic Interchange Format)
- JPEG (Joint Photografic Experts Group) - acest format are extensia JPG - recomandabil pentru dimensiunile mari
- BMP (Bit Map)
- TIFF (Tagged Image File Format) - fisierele care vin ca urmare a intrarilor de la fax etc
- PNG (Portable Network Grapfic)
Adresa URL a unei imagini
URL - Uniform Resource Locater - rearezinta un standard folosit in identificarea unica a unei resurse in internet. Vom exprima adresa unei imagini in functie de directorul curent. Pentru a insera intr-o pagina Web o imagine se utilizeaza tagul <img>. Pentru a putea fi identificata imaginea, vom utiliza atributul src al acestui tag. Valoarea acestui atribut este adresa URL a imaginii, daca imaginea se afla in acelasi director html cu fisierul curent, atunci adresa URL a imaginii este formata doar din numele fisierului imagine: "nume extensie"
Daca fisierul imagine nu se afla in directorul curent atunci pentru identificare vom folosi adresa relativa.
Primul caz. Cazul in care fisierul se afla intr-un subdirector al directorului curent:
Driverul C:
html (vom lucra in acest director)
exemplu.html
IMAGINI - director
IMAGINI COLOR director
Imagine1.gif - fisier
IMAGINI ALB-NEGRU
src - atributul sursa = IMAGINI / IMAGINI COLOR / imagine.gif
imagine.gif adresa relativa
2. Fisierul de imagine nu se afla in structura aborescenta ce are ca radacina directorul curent. Pentru aceasta va trebui sa urcam in aborescenta catre directoarele parinte.
C
:
html
IMAGINI
IMAGINI COLOR
Imagine2.gif
IMAGINI ALB-NEGRU
src = .. / IMAGINI COLOR / imagine = adresa relativa
Exemplu:
..
<html> <head> <title> Exemplu </title> </head> <body>
<h2> imagine chenar <h2>
<img src = "imagine gif " border = >
</body> </html>
" imagine1.gif" directorul curent
Observatie: In exemplu tabul img are un atribut care va da chenarul imaginii. Acesta este border, valorile atributului border sunt valori intregi pozitive inclusiv 0.
Border 0 inseamna fara chenar
Taburile se inchid neaparat ex. html, head, title
Dimensionarea unei imagini
O imagine are dimensiuni prestabilite in momentul crearii ei. Daca nu apar alte cerinte acestea vor fi si dimensiunile cu care imaginea va fi afisata. Putem modifica dimensiunile prestabilite folosind atributele width si height ale tabului img. Valoriule acestor atribute sunt intregi sau procentuale.
Obeservatie: Daca dimensiunile imaginii sunt mai mici decat dimensiunile date de widht si height atunci aceste atribute au efect, altfel nu.
Observatie: Cu cat dimensiunea imaginii exprimata in KBt este mai mare cu atat viteza de incarcare a imaginii in pagina scade.
Alinierea unei imagini se face cu ajutorul atributului Align care poate avea urm. valori:
- left
- right
- top
- middle
- bottom
Atributele hspace si vspace precizeaza distanta in pikceli pe orizontala respectiv pe verticala intre imagine si restul elementelor de pe pagina. Valoarea acestor atribute este asemanatoare cu valoarea atributelor width si height. Elemente inlocuitoare pentru imagine:
In cazul imaginilor de dimensiuni mari, pentru reducerea timpului de incarcare a imaginii in pagina se folosesc inlocuitori de imagine sau imagine de dimesnsiuni mai mici care vor fi afisate pana la descarcarea completa a imaginii cerute. Vom folosi pentru aceasta atributul alt care admite ca valoare un text ce va fi afisat in locul imaginii sau atributul lowsrc ce admite ca valoare adresa URL a unei imagini de joasa rezolutie ce poate fi incarcata imediat si care va fi inlocuita in momentul descarcarii complete a imaginii dorite.
Observatii:
Atributul alt va determina afisarea textului, valoarea atributului in momentul in care mousul este pozitionat peste imaginea ce urmeaza a fi incarcata:
Imagini folosite pentru fontul unei pagini web
Pentru aceasta se foloseste atributul background al tabului <body> avand ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala si pe verticala pana la umplerea completa a fontului. Pentru ca in timpul derularii unei pagini web foarte mari imaginea de font sa ramana fixa se utilizeaza atributul bgpropertes al tabului <body> ce va avea valoarea "fixed".
Documentarea unei pagini web
Metainformatiile sunt informatii despre modul de organizare a informatiilor, in cazul unei pagini web metainformatiile vor furniza date despre modul in care a fost creata aceasta pagina. Metainformatiile nu sunt vizibile intr-o pagina web, ele sunt continute in fisierul sursa html si sunt utilizate de serverele web din internet specializate in stocarea de informatiidespre informatii, serverele specializate in stocarea metainformatiilor ofera utilizatorilor motoare de cautare puternice care permit regasirea informatiilor.
Metainformatiile se introduc cu ajutorul tabului meta <meta> </meta>.
Acest tag va fi plasat in interiorul tagului head.
Atributele tagului meta sunt:
- name
- http - equiv
- content
- scheme
- long
Pentru a face cunoscut motoarele de cautare scopul in care a fost creata o pagina web putem insera un element meta a vand atributele:
name setat la valorea description si content setat la valoarea unui sir de caractere ce va indica continutul paginii.
<html> <head>
Cuvintele cheie intr-o pagina web
Cuvintele cheie sunt utilizate pentru a regasi informatii prin intermediul unui motor de cautare. Pentru a preciza cuvintele cheie atributul name va fi setat la valoarea "Keywords", iar contents va contine o lista de cuvinte chei separate prin virgula.
Drepturile de autor vor fi stabilite in cazul setarii atributului name la valoarea "author content"
Data crearii si data reactualizarii paginii web
Pentru aceasta se foloseste atributul <http> - equiv
Atributul content va fi in acest caz o data calendaristica avand formatul general :
- zi, luna, an ora
Zzz, zz, ///, aaaa, hhmm,ssttt
Primele 3 z-uri - primele trei caractere din zilele saptamanii: Ex: Mondy, Tuesday
Urm. doua z-uri reprezinta ziua in cadrul lunii: 01,02,.. ,
/// reprezinta primele trei litere din numerele lunii
a reprezinta anul
h reprezinta ora
s reprezinta secunda
ttt reprezinta standardul de timp
Pentru a preciza informatii legate de tipul fisierului utilizat http equiv va avea valoarea "content.type" iar content tipul fisierului, de ex. "text / script"
Punctualizarea paginii unui browser
O utilizarea speciala a atributului http equiv este aceia de a stabili reincarcarea automata in browser a unei pagini, in acest fel se obtin facilitati dinamice pentru un site web:
Pentru a reincarca aceiasa pagina la un interval precizat de secunde vom folosi atributul http eqiuv setat la valorea "refresh", iar atributul content avand o valoare intreaga pozitiva va da nr. de secunde la care se va face reactualizarea.
Legaturi
Interactivitatea unei pagini
Legaturile sau link-urile reprezinta partea cea mai importantaa unei pagini web. Ele transforma un text obisnuit in hipertext si permit trecerea rapida de la o informatie aflata pe un server la o alta informatie memorata pe un alt server. Legaturile reprezinta zone active intr-o pagina webadica zone de pe ecran sensibile la apasarea butonului stang al mousului.
Un click efectuat cu mousul pe o legatura, este interpretata ca o cerere catre un anumit server din internet de a expedia catre calculatorul client o resursa indicata, de legatura respectiva.
In acest sens paginile web devin interactive.
Pasii sunt urmaturii:
In pagina <html>se insereaza legaturi prin intermediul unor etichete speciale si a unui atribut care ia valoare, adresa URL ale sursei solicitate. In pagina web apar legaturi definite ca zone active, cand mousul se afla deasupra unei zone active cursorul mousului se modifica luand forma unei miini, efectuan-d click pe o zona activa, browserul imite catre server care stocheaza noua resursa o cerere, pentru ai expedia pagina.
Serverul primeste cererea, expediaza catre utilizator resursa solicitata. Daca aceasta este o noua pagina web atunci serverul expediaza un fisier html impreuna cu toate fisierele oferite de sunet, imagine etc.
Calculatorul client primeste resursa solicitata si o incarca in browser.
Pagina veche este inlocuita de cea noua sau este creata, o noua instanta a browserului.
Legatura catre o pagina aflata in acelasi director
|
