Etichete: nicio etichetă

WWW (World Wide Web) a fost proiectat ca un set de resurse globale (pagini web, imagini, alte fișiere, etc.), stocate pe diverse servere și conectate la Internet. Fiecare resursă are o adresă unică la nivel global, numită adresă URL (Uniform Resource Locator), iar utilizatorul poate accesa aceste resurse prin intermediul browser-ului și poate naviga între ele foarte ușor folosind mouse-ul sau tastatura.

Legăturile sunt elemente dintr-o pagină web care fac posibilă navigarea între resursele internet. Legătura este o proprietate a unui bloc de text și/sau a unei imagine de a accepta comenzi prin intermediul mouse-ului sau a tastaturii. Aceste comenzi conduc de regulă la navigarea la o altă resursă web.

Elementul a

Pentru a crea o legătură, folosim elementul ancoră <a>...</a>. Acesta trebuie să aibă atributul href, care conține adresa URL a resursei asociate cu legătura, ea fiind absolută sau relativă și poate fi adresa oricărul tip de fișier: document html, imagine, etc. Între etichetele elementului <a> se scrie un text (sau un element imagine) care va fi afișat în pagina web și care va accepta comenzi de la mouse sau de la tastatură.

<a href="https://www.pbinfo.ro">pbinfo.ro</a>

Ancorele pot avea atributul target, prin care se precizează fereastra în care se va deschide resursa precizată prin href. Valoarea implicită este _self, reprezentând fereastra curentă (tab-ul curent). O altă valoare frecvent utilizată este _blank, cu înțelesul de fereatră nouă (tab nou). Mai multe detalii aici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.

<a href="https://www.pbinfo.ro" target="_blank">pbinfo.ro</a>

Adrese relative și adrese absolute

O adresă absolută are următoarea formă:

protocol://nume.domeniu/cale/de/fisier.html

unde protocol este de regulă http sau https, nume.domeniu este numele de domeniu al site-ului în care este localizată resursa, /cale/de este calea spre directorul care conține fișierul resursă, iar fisier.html este fișierul propriu-zis. În acest fel fiecare resursă disponibilă în spațiul WWW este identificabilă.

Un site web reprezintă o colecție de fișiere localizate pe un server, într-un folder. Aceste fișiere pot fi documente html, imagini, fișiere de altă natură. De cele mai multe ori, crearea site-ului începe pe propriul calculator, fără a avea la dispoziție un server, deci fără ca fișierele din site să aibă o adresă URL validă. În acest context, în adresa URL lipsește partea protocol://nume.domeniu/, obținându-se o adresă relativă. Ea este relativă la structura de directoare care fac parte din folder-ul care conține site-ul și la documentul html din care face parte.

Considerăm următoarea structură de foldere și fișiere, în care site, pagini și img sunt foldere:

site
--pagini
----pagina1.html
----pagina2.html
--img
----poza1.jpg
----poza2.jpg
--index.html

În fișierul index.html, următoarele adrese sunt corecte:

<a href="pagini/pagina1.html">Pagina 1</a>
<a href="pagini/pagina2.html">Pagina 2</a>
<a href="img/poza1.jpg">Poza 1</a>
<a href="img/poza2.jpg">Poza 2</a>

Următoarele sunt greșite:

<a href="pagina1.html">Pagina 1</a>
<a href="poza1.jpg">Poza 1</a>
<a href="img/poza2.jpg">Poza 2</a>

În fișierul pagini/pagina1.html, următoarele adrese sunt corecte:

<a href="pagina2.html">Pagina 2</a>
<a href="../index.html">Index</a>
<a href="../img/poza1.jpg">Poza 1</a>

Ancore interne și externe

Legăturile de mai sus foloseau ancore externe – resursa era în exteriorul documentului html curent. Putem defini și ancore interne, cu care putem naviga în interiorul paginii web curente.

Mecanismul este următorul:

  • se stabilește destinația legăturii, folosind atributul id:
<a id="destinatie"></a>
  • se definește elementul <a>:
<a href="#destinatie">Click</a>

Formatarea legăturilor cu CSS

<style>
	#nav{
    	background-color: #ffff00;
        list-style-type: none;
        padding:0;
    }
    #nav li{display: inline;}
    #nav li a{padding:5px; line-height: 20pt; text-decoration: none; background-color: #ff00ff; color: white; float:left; border-right: solid 1px white;}
    #nav li a:hover{background-color: black; text-deoration: underline;}
</style>
<ul id="nav">
	<li>
    	<a href="#">Link 1</a>
    </li>
    <li>
    	<a href="#">Link 2</a>
    </li>
    <li>
    	<a href="#">Link 3</a>
    </li>
    <li>
    	<a href="#">Link 4</a>
    </li>
</ul>

Inserarea imaginilor

Imaginile îmbunătățesc semnificativ aspectul paginilor web. Pentru a insera o imagini, vom folosi elementul <img>.

<img src="santas.gif">

Adresa propriu-zisă a fișierului imagine se stabilește prin atributul src și este o adresă URL, absolută sau relativă. Acest atribut este practic obligatoriu. Un atribut recomandat este altalternative text, care conține un text care va fi afișat în cazul in care nu se poate afișa imaginea:

<img src="santas.gif" alt="Mos Craciun">

Alte atribute utile sunt height și width, care precizează înălțimea, respectiv lățimea, exprimate în pixeli, cu care se va afișa imaginea.

<img src="santas.gif" alt="Mos Craciun" width="100" height="200">

Mai multe informații despre elementul <img> sunt disponibile aici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img.