Lectia 4 HTML

Legatura (link-ul) este o eticheta deosebit de importanta in HTML pentru că confera utilizatorului probabilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cind suntem deasupra lui cursorul isi altera forma.

Link-ul este definit cu etichetele <a> 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 timpul 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: http://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
--------------------------------------------------------------------------------------------------------------
<a href="http://www.academiaonline.ro">Academia Online</a> Academia Online

Putem insera un link catre o adresa de e-mail putand asocia si un subiect prestabilit
HTML Afisare
<a href="mailto:test@test.ro">Trimite e-mail</a> Trimite e-mail
<a href='mailto:test@test.ro?subject="subiect prestabilit"'>Trimite e-mail</a> Trimite e-mail

Culoarea linkurilor poate fi modificata introducand in eticheta body urmatoarele atribute:
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)
ALINK legatura activa (nu prea se foloseste - default portocaliu)

3.2 Ancore
Se pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazul unor pagini HTML destul de lungi sau catre un loc anume aflat intr-o alta.
Ancora se defineste tot intre etichetele <a> si </a> dar cu atributul name. Pentru a face trimitere catre ancora se introduce un link cu atributul href avand ca valoare denumirea ancorei.

Exemplu:
Ancora <a name="nume">Ancora</a>
Link catre ancora aflata in aceeasi pagina <a href="#nume">Inapoi la ancora</a>
Link catre ancora aflata in alta pagina <a href="pagina.html#nume">Inapoi la ancora din pagina.html</a>
------------------------------------------------------------------------------------------------------------------------------
HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.

<hr> introduce o linie linie orizontala si trecerea la un rand nou.

Folosind etichete adecvate textul poate fi formatat.
Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar titlurile (header), de la 1 la 6, sunt diverse ca marime (1 cel mai mare iar 6 cel mai mic).

Etichetele <div> si </div> delimiteaza un bloc text in vederea formatarii. Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stanga
right aliniere la dreapta

In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fost introdus (text preformatat) in fisierul sursa vom folosi pereche de etichete <pre> si </pre>.

Exemplu
HTML Afisare
text normal text normal
<b>text bold</b> text bold
<i>text cursiv</i> text cursiv
<u>text subliniat</u> text subliniat
<del>text taiat</del> text taiat
<sup>exponent</sup> exponent
<sub>indice</sub> indice
<tt>caractere monospatiate</tt> caractere monospatiate
<cite>Citat</cite> Citat
<em>evidentiat</em> evidentiat
<code>text scris la tastatura</code> text continand cod de computer
<kbd>text scris la tastatura</kbd> text scris la tastatura
<samp>mostra de cod de computer</samp> mostra de cod de computer
<strong>text ingrosat</strong> text ingrosat
<big>mare</big> mare
<small>mic</small> mic
<font color="red">font rosu</font> font rosu
<font face="Courier">font Courier</font> font Courier
<font size="6">font size=6</font> font size=6
<div align="center">text aliniat pe centru</div>
text aliniat pe centru
<div align="left">text aliniat la stanga</div>
text aliniat la stanga
<div align="right">text aliniat la dreapta</div>
text aliniat la dreapta
<h1>Titlu 1</h1>
Titlu 1
<h2>Titlu 2</h2>
Titlu 2
<h3>Titlu 3</h3>
Titlu 3
<h4>Titlu 4</h4>
Titlu 4
<h5>Titlu 5</h5>
Titlu 5
<h6>Titlu 6</h6>
Titlu 6
-----------------------------------------------------------------------------------------------------------------------
Hartile de imagini permit declararea unor zone din fotografie ca legaturi catre alte pagini web si implica doua aspecte.

Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este întrebuințat un interiorul etichetei <map> prezentate mai jos

Definirea hartii întrebuințând perechea de etichete <map> si <map> cu atributul obligatoriu name, avand aceeasi valoare ca la usemap din img.
Zona sau zonele continute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:
shape fiind forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default=alte forme (diferite de cele anterioare)
coords coordonatele zonei
href adresa paginii destinatie a legaturii

Exemplu: o harta de imagini care contine 5 zone
<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map>
</body>
</html>

To Be Continued........