Inserarea link-urilor si a imaginilor

html

ALTE DOCUMENTE

Pe scurt despre WWW

Folosirea fisierelor

Controlul marimii imaginii

Includerea miniaplicatiilor Java

Utilizarea listelor

Internet Explorer

Marcaj HTML

Elemente de grafica avansata

Structura unui document HTML

Tabele

Inserarea link-urilor si a imaginilor

1. Link-uri si pozitionare

Un element important al oricarei pagini web il constituie link-urile catre alte pagini.

Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cind suntem deasupra lui cursorul isi schimba forma.

Link-ul este definit cu etichetele <a> 16416x239q si </a> si are atributele:
href - adresa fisierului destinatie
target - in ce fereastra se va deschide fisierul destinatie
title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla deasupra legaturii

Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier daca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi server sau disc, indicandu-se calea
adresa URL fiind adresa completa a paginii (de exemplu: https://www.proba.ro/pagina.html)

Atributul target poate lua valorile:
_blank pagina va fi incarcata intr-o noua fereastra
_parent pagina va fi incarcata in fereastra parinte
_top pagina va fi incarcata in fereastra top a cadrului
_self pagina va fi incarcata in aceeasi fereastra

Link-urile pot fi link-uri externe, care fac referire catre un alt site, sau link-uri interne care fac referire catre alte pagini ale aceluiasi site. Ambele tipuri se codifica asemanator prin folosirea unui tag de tipul

<A HREF=link.html>...</A> (pentru un link intern) sau
<A HREF=https://www.abc.abc>...</A> pentru un link extern.

Astfel codul de mai jos va afisa textul "Apasati aici pentru pagina 2" care prin apasare va incarca fisierul pag2.html:

<A HREF=pag2.html>Apasati aici pentru pagina 2</A>

Codul de mai jos va afisa "Apasati aici pentru pagina XYZ SRL", text care prin apasare va incarca pagina www.xyz.xyz:

<A HREF=https://www.xyz/xyz>Apasati aici pentru pagina XYZ SRL</A>

In exemplul de mai sus poti specifica in ce mod se va incarca pagina respectiva folosind atributul TARGET:
- TARGET="nume", unde nume este numele pe care vrei sa il dai unei noi ferestre unde se va incarca pagina. Poti folosi si TARGET="_blank" pentru o fereastra noua sau TARGET="_self" pentru incarcarea in aceeasi fereastra.
O alta varianta este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afiseaza "Scrie-ne!", text care prin apasare va deschide o fereastra pentru transmiterea unui mesaj la adresa [email protected]:

<A HREF="mailto:[email protected]">Scrie-ne!</A>

In acelasi mod o pagina HTML poate fi impartita in mai multe "capitole" (sectiuni), in caz ca este foarte lunga. Astfel, fiecarei sectiuni i se va asigna un nume, nume ce va putea fi utilizat in incarcarea paginii respecitve, astfel incat sa se afiseze exact sectiunea respectiva. Fie fisierul lucrare.html pe care il impartim in doua sectiuni.Codul care face acest lucru ar fi:

<A NAME=unu>Sectiunea 1</A>
...text pentru sectiunea 1...
<A NAME=doi>Sectiunea 2</A>
...text pentru sectiunea 2...

Apoi, daca dorim sa incarcam fisierul lucrare.html din alta pagina, dar astfel incat sa se incarce direct sectiunea 2, vom utiliza:

<A HREF=lucrare.html#doi>Apasa aici</A>

Cel mai bine vom demonstra aceste lucruri printr-un exemplu (se deschide intr-o pagina separata):

In mod similar poti afisa fisiere text (cu extensia txt) sau poti da posibilitatea vizitatorului sa salveze pe disc un alt tip de fisier (zip de exemplu):

<A HREF=raport.txt>Raport</A> sau <A HREF=program.zip>Salveaza programul</A>

Un alt element util in formatarea paginii web este tag-ul <CENTER >...</CENTER>. Acesta este utilizat pentru alinierea pe centru a unor elemente (texte, tabele imagini). Tot ce este scris intre tag-ul <CENTER> si </CENTER> va apare centrat.

In fisierul nostru deschis in Notepad vom folosi tag-ul CENTER pentru a pozitiona central elementele paginii. Astfel, vom introduce tag-ul <CENTER> imediat dupa tag-ul BODY de la inceputul fisierului (<BODY BGCOLOR="#DDFFFF" LINK="#0000AA" VLINK="#0000AA">) si vom mai introduce si </CENTER> imediat inainte de tag-ul </BODY> de la sfarsitul fisierului.
Mai facem o imbunatatire fisierului index.html deschis in Notepad, prin introducerea unor link-uri. Identifica in cel de-al doilea tabel din acest fisier textul "Va stam la dispozitie si prin e-mail" si inlocuieste e-mail cu:

<A HREF="mailto:[email protected]">e-mail</A>

De asemenea identifica si textul "apasati aici" de la sfarsitul tabelului si inlocuieste cuvantul "aici" cu:

<A HREF=https://www.xyz.xyz TARGET="_blank">aici</A>

Fisierul nostru deschis in Notepad ar trebui sa arate acum cam asa:

Acum toate elementele tabelului (titlul si cele doua tabele) sunt pozitionate pe centru si exista link-uri pentru e-mail si pagina XYZ.

2. Imagini

Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei incarcari greoaie daca dimensiunile imaginii sunt mari.

Prezentarea imaginilor in pagini HTML se face folosind tag-ul <IMG SRC=nume>, unde nume este numele unui fisier gif sau jpg. Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png). Formatul gif este recomadat pentru realizarea butoanelor si a icoanelor iar jpg pentru fotografii. Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele atribute:

src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)

Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height care pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi redimensionata automat de catre browser.

Exemplu:

<IMG SRC=sigla.gif>, va afisa (presupunand ca avem deja fisierul sigla.gif):

Tag-ul IMG poate primi si atributul BORDER cu formele BORDER=0 (implicit) sau BORDER=n - pentru un chenar in jurul pozei de dimensiune n pixeli. O poza intr-un chenar arata mai bine:

<IMG SRC=sigla.gif BORDER=1>, va afisa:

Se poate folosi o imagine si drept link catre o alta pagina:

<A HREF="mailto:[email protected]"><IMG SRC=sigla.gif BORDER=0></A>, va afisa:

Cu un click pe imaginea de mai sus se va deschide o fereastra pentru compunerea unui mesaj.Se mai pot folosi imagini si drept fundal pentru pagini internet. Pentru aceasta, vom introduce atributul BACKGROUND in cadrul tag-ului <BODY> de la inceputul unui fisier:

<BODY BACKGROUND=bkg.gif>

Efectul unei asemenea comenzi va fi (presupunand ca avem deja fisierul bkg.gif):