Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  


AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Transformarea unei imagini intr-o legatura hipertext

html

+ Font mai mare | - Font mai mic



DOCUMENTE SIMILARE

Trimite pe Messenger
Tag-uri utilizate pentru afisarea listelor
Metode de pozitionare pe orizontala a elementelor HTML
Tag-uri utilizate pentru formatarea textului
Programare WEB - Introducere in lumea JavaScript
Blocuri de text - blockquote
Trecerea la un rand nou
Example HTML
Liste ordonate - <li>
Inserare unui link
Culori, RGB, exprimarea culorilor in hexazecimal


Transformarea unei imagini intr-o legatura hipertext

<A HREF=”URL”> <IMG SRC>=”numefisier” </A>

URL este adresa paginii catre care se realizeaza legatura

Numefisier este numele fisierului grafic care se doreste sa apara pe pagina si pe care navigatorul va executa click




Obs. Eticheta de final </A> trebuie sa fie pe acelasi rand cu eticheta <IMG>

Crearea unei bare de instrumente intr-o pagina web

Majoritatea programelor moderne au bare de instrumente cu diferite butoane, care iti ofera un acces simplu, prin intermediul unui singur click, la cele mai utilizate comenzi ale programelor respective. Pentru as realiza o bara de instrumente intr-o pagina web trebuie parcursi 3 pasi:

Se foloseste un program de grafica pentru a crea imagini asemanatoare unor butoane care reprezinta sectiunile importante ale site-ului

Se creeaza etichete <IMG> pentru a transforma aceste butoane in legaturi imagine care conduc catre paginile corespunzatoare

Se insereaza etichetele <IMG> una dupa alta (pe un singur rand) in partea de sus sau de jos a fiecarei pagini. Etichetele <IMG> consecutive determina imaginile sa apara una langa cealalta: rezulta o bara de instrumente web.

Butoanele de navigare

De multe ori este util sa oferi cititorului o metoda usoara de navigare inainte si inapoi prin paginile site-ului. Solutia ar fi introducerea in pagina a unor butoane de genul celor de la aparatele video. Acestea sunt de regula sageti care te indruma inainte sau inapoi.

Crearea imaginilor in miniatura (thumbnail)

Atunci cand pe un site trebuie afisate mai multe imagini (galerii online) cea mai fericita abordare este crearea unei versiuni in miniatura a fiecarei imagini si afisarea acestei copii la scara redusa. Apoi fiecare thumbnail este configurat sa conduca direct la versiunea de mari dimensiuni a imaginii corespunzatoare.

Pentru a crea un thumbnail trebuie urmati pasii:

Se incarca imaginea completa intr-un program de grafica si se reduce dimensiunea imaginii

Crearea legaturii catre imaginea originala

Ex. Presupunem ca imaginea originala se numeste photo.jpg si ca thumbnail-ul se numeste photothmb.jpg.

<A HREF=”photo.jpg”><IMG SRC=”photothumb.jpg”></A>

Imaginile pot fi si harti

O harta de imagini este un grafic dintr-o pagina web in care exista cateva zone definite, in care se poate executa click (zone numite si puncte fierbinti – hot spot). Prin apasarea unei zone se incarca o anumita pagina. Hartile de imagini ofera mult mai multa flexibilitate decat legaturile imagine simple. Metoda poarta numele: harti de imagini orientate client (client-side image maps) sau harti de imagini in browser (browser-based image maps).

Pentru ca harta de imagini sa functioneze corect trebuie parcurti 3 pasi:

Stabilirea regiunilor distincte din imagine si a coordonatelor pentru fiecare regiune

Folosirea etichetelor <MAP> <AREA> pentru a asocia o legatura fiecareia dintre aceste regiuni

Adaugarea unei versiuni speciale a etichetei <IMG> la pagina web

Pasul 1. Stabilirea coordonatelor hartii

Un ecran tipic aranjeaza pixelii in 800 de colane si 600 de randuri (punctul din coltul stanga sus are coordonatele (0,0)). O modalitate de a afla coordonatele este sa incarci imaginea intr-un program de grafica (cum este Paint care arata coordonatele in bara de stare atunci cand se gliseaza cu mouse-ul in interiorul imaginii). In lipsa unui program de grafica exista o alta metoda de a afisa coordonatele in browser (numai in Windows). Ea consta in a crea un fisier HTML cu o legatura care utilizeaza urmatorul format:

<A HREF=”orice”><IMG=SRC=”hartadeimagini” ISMAP></A>

Incarcand fisierul HTML intr-un browser si miscand cursorul mouse-ului pe deasupra imaginii se afiseaza in bara de stare coordonatele imaginii.

Pasul 2. Utilizarea etichetei <MAP> pentru a defini harta de imagini

Dupa stabilirea coordonatelor imaginii se poate trece la definirea hartii de imagini.

<MAP NAME=”numeharta”>

</MAP>

Specificarea zonelor din imagine pe care se poate executa click. Se foloseste eticheta <AREA>

<AREA SHAPE=”shape” COORDS=”cords” HREF=”url”>

atributul shape determina forma zonei (RECT daca este dreptunghiulara)

atributul coords depinde de shape (daca este RECT se specifica coltul stanga-sus si coltul dreapta-jos ale zonei)

Ex.

<MAP NAME=”testmap”>

<AREA SHAPE=”RECT” COORDS=”0, 0, 199, 99” HREF=”a.htm”>

<AREA SHAPE=”RECT” COORDS=”199, 0, 399, 99” HREF=”b.htm”>

<AREA SHAPE=”RECT” COORDS=”399, 0, 599, 99” HREF=”c.htm”>

</MAP>

Atributul SHAPE mai poate lua valorile:

CIRCLE (pentru cerc) caz in care COORDS are trei valori: coordonatele centrului cercului si raza

POLY (pentru poligon) caz in care COORDS are trei sau mai multe seturi de coordonate (browser-ul determina zona tragand o linie intre o coordonata si alta)

Pasul 3. Adaugarea hartii de imagini la pagina web

Se foloseste o versiune speciala a etichetei <IMG>

<IMG SRC=”hartaimagini” USEMAP=”#numeharta”>

hartaimagini- numele fisierului harta de imagini

Adaugarea tabelelor in pagina web

Termeni folositi in lucrul cu tabele:

Rand (o linie de date care traverseaza tabelul)

Coloana (o sectiune verticala de date)

Celula (intersectia dintre un rand si o coloana)

Legenda (titlu) – textul care apare in partea de sus a tabelului si este folosit pentru a descrie continutul tabelului



Antet (primul rand din tabel folosit pentru a eticheta coloanele)

Margini (liniile care inconjoara tabelul si fiecare celula)

Construirea unui tabel

Se foloseste eticheta: <TABLE> </TABLE>

Daca se doreste ca marginea tabelului sa fie vizibila <TABLE BORDER=”n”>

n este latimea marginii dorite

Pentru a adauga un rand nou se foloseste eticheta: <TR> </TR> (se plaseaza intre <TABLE> si </TABLE>)

Pentru a imparti un rand in coloane se foloseste eticheta: <TD> </TD> (se plaseaza intre <TR> si </TR>)

Intre etichetele <TD> si </TD> poate fi plasat: text, etichete de formatare a textului HTML, legaturi, liste, imagini

Ex. <TABLE BORDER=”1”>

<TR>

<TD> IONESCU RADU </TD>

<TD> 10 </TD>

<TD> 9 </TD>

</TR>

<TR>

<TD> IONESCU DAN </TD>

<TD> 9 </TD>

<TD> 7 </TD>

</TR>

<TR>

<TD> GEORGESCU RAZVAN </TD>

<TD> 9 </TD>

<TD> 10 </TD>

</TR>

</TABLE>

IONESCU RADU

IONESCU DAN

GEORGESCU RAZVAN

Crearea unui rand antet

Se foloseste eticheta: <TH> </TH>

Ex. <TABLE BORDER=”1”>

<TR>

<TH> NUMELE </TH>

<TH> NOTA MATE </TH>

<TH> NOTA ROMANA </TH>

</TR>

<TR>

<TD> IONESCU RADU </TD>

<TD> 10 </TD>

<TD> 9 </TD>

</TR>

<TR>

<TD> IONESCU DAN </TD>

<TD> 9 </TD>

<TD> 7 </TD>

</TR>

<TR>

<TD> GEORGESCU RAZVAN </TD>

<TD> 9 </TD>

<TD> 10 </TD>

</TR>

</TABLE>

NUMELE

NOTA MATE

NOTA ROMANA

IONESCU RADU

IONESCU DAN

GEORGESCU RAZVAN

Includerea unei legende: O legenda sau un titlu este o scurta descriere care spune cititorului scopul tabelului:

<CAPTION ALIGN=”unde”> Titlul tabelului </CAPTION>

unde - poate fi TOP (sus) sau BOTTOM (jos)

Ex. <CAPTION ALIGN=”TOP”> MEDII ELEVI</CAPTION>

<TABLE BORDER=”1”>

<TR>

<TH> NUMELE </TH>

<TH> NOTA MATE </TH>

<TH> NOTA ROMANA </TH>

</TR>

<TR>

<TD> IONESCU RADU </TD>



<TD> 10 </TD>

<TD> 9 </TD>

</TR>

<TR>

<TD> IONESCU DAN </TD>

<TD> 9 </TD>

<TD> 7 </TD>

</TR>

<TR>

<TD> GEORGESCU RAZVAN </TD>

<TD> 9 </TD>

<TD> 10 </TD>

</TR>

</TABLE>

MEDII ELEVI

NUMELE

NOTA MATE

NOTA ROMANA

IONESCU RADU

IONESCU DAN

GEORGESCU RAZVAN

Alinierea textului in interiorul celulelor

Alinierea standard pentru celulele tabelelor este la stanga pentru celulele de date <TD> si centrata pentru celulele de anteturi <TH>. In interiorul atichetelor <TD> si <TH> se poate introduce atributul ALIGN

Ex. <TD ALIGN=”aliniere”>

Aliniere poate fi LEFT (stanga) RIGHT (dreapta), CENTER (centru)

Textul in interiorul unei celule poate fi aliniat si pe verticala. Pentru aceasta se foloseste atributul VALIGN

Ex. <TD VALIGN=”aliniere”>

Aliniere poate fi TOP (sus) BOTTOM (jos), MIDDLE (centru)

Extinderea textului pe mai multe randuri sau coloane

Datele se pot intinde pe mai multe randuri sau mai multe coloane.

Intinderea pe mai multe coloane:

<TD COLOSPAN=”coloane”>

<TH COLOSPAN=”coloane”>

coloane – reprezinta numarul de coloane pe care se intinde celula

Intinderea pe mai multe randuri:

<TD rowspan='”randuri”>

<TH rowspan='”randuri”>

coloane – reprezinta numarul de randuri pe care se intinde celula

Atribuite pentru tabele

Pentru a stabili culoarea de fundal pentru un tabel sau pentru o celula dintr-un tabel se adauga atributul BGCOLOR=”#rrggbb” la eticheta <TABLE> sau la eticheta <TD>

Pentru a stabili o imagine de fundal de fundal pentru un tabel sau pentru o celula dintr-un tabel se adauga atributul BACKGROUND=”imagine.gif” la eticheta <TABLE> sau la eticheta <TD>

Pentru a stabili latimea tabelului se foloseste atributul WIDTH la eticheta <TABLE> (se poate specifica fie o latime in pixeli fie un procentaj din latimea disponibila a ferestrei). Ex. <TABLE WIDTH=”75%”>. La fel se poate specifica si latimea unei celule. Ex. <TD WIDTH =”45%”>

Spatiul dintre celule este implicit de 2 pixeli si poate fi marit folosind atributul CELLSPACING pentru eticheta <TABLE>. Ex. <TABLE CELLSPACING=”10”>

Spatiul dintre continutul unei celule si marginea acesteia poate fi setat folosind atributul CELLPADING pentru eticheta <TABLE>. Ex. <TABLE CELLPADING=”10”>

Folosirea unui tabel pentru a realiza marginea unei pagini

Multe site-uri au paginile configurate astfel incat sa aiba o margine in stanga. Aceasta margine poate fi o imagine sau o culoare care difera de culoarea de fundal a paginii. Aceste margini pot fi doar pur decorative sau pot contine legaturi si alte informatii. Pentru realizarea unei astfel de margini se poate folosi un tabel cu doua coloane:

se seteaza inaltimea tabelului la 100% folosind atributul HEIGHT al etichetei <TABLE>

prima coloana este marginea (folosind atributul WIDTH se stabileste latimea marginii)

a doua coloana este cea in care se afla textul si elementele obisnuite ale paginii web

Eticheta <BODY> include patru noi atribute: LEFTMARGIN (margine la stanga) TOPMARGIN (margine sus) MARGINWIDTH (latimea marginii), MARGINHEIGHT (inaltimea marginii). Setarea tuturor acestor atribute la 0 determina disparitia oricarui spatiu suplimentar deasupra si la stanga tabelului principal.






Politica de confidentialitate



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 808
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2021 . All rights reserved

Distribuie URL

Adauga cod HTML in site