Ancore în HTML

Ancore

Într-o pagină  foarte lungă pot exista puncte de reper (ancore) către care se definesc legături.
O ancoră se defineşte de asemenea prin eticheta <a>. Pentru a defini ancora se utilizează atributul name care primeşte ca valoare un nume atribuit ancorei (de exemplu "ancora1").
Pentru a insera o legătura către "ancora1" definită în aceeaşi pagină se utilizează eticheta <a> având atributulhhrefn de valoare "#ancora1".                                                                        .  
 ancore in html

 

ancore in html

 

Fǎcând click pe primul text subliniat apare:

ancore in html

 

Se revine în paginǎ cu ajutorul butonului ancore in html.

Fǎcând click pe al doilea text subliniat apare:

 

ancore in html

 

Pentru a introduce o legǎturǎ cǎtre o ancorǎ definitǎ în alt document (altǎ paginǎ) aflat în acelaşi director, atributul  href  primeşte o valoare de forma

“nume_fişier.html#nume_ancora”

ancore in html

ancore in html

 

Fǎcând click pe primul text subliniat apare:

 

ancore in html

Se revine în paginǎ cu ajutorul butonului ancore in html.

Fǎcând click pe al doilea text subliniat apare:

ancore in html

Dacǎ dorim ca pagina solicitatǎ sǎ fie încǎrcatǎ într-o altǎ fereastrǎ decât cea curentǎ, atunci trebuie lansatǎ în execuţie o nouǎ instanţǎ a browserului care va conţine noua paginǎ. Acest lucru se realizeazǎ folosind atributul target al etichetei <a>, care primeşte ca valoare un nume (de exemplu ,,fereastra”) pentru fereastra în care se va încǎrca noua paginǎ.

 

ancore in html

 

ancore in html

Dacǎ mai multe legǎturi folosesc aceeaşi valoare pentru atributul target, înseamnǎ cǎ paginile referite de acestea se vor încǎrca în aceeaşi fereastrǎ.

ancore in html

ancore in html

ancore in html

 

 

 

Ancore definite prin atributul id

   Atributul id este un atribut universal, adicǎ poate fi ataşat oricǎrui element al unei pagini Web. Acest atribut va înlocui complet atributul name, care putea fi ataşat numai anumitor elemente.

    Atributul id primeşte ca valoare un nume (de exemplu ,,id1”) care identificǎ în mod unic un element.

    Atributul id poate fi utilizat pe post de ancorǎ într-o paginǎ Web conform sintaxei:

 

            <a href = “#id1”> …</a>

            <eticheta id =”id1”>…</eticheta>

ancore in html

ancore in html

 

Fǎcând click pe primul text subliniat apare:

ancore in html

Se revine în paginǎ cu ajutorul butonului ancore in html.

Fǎcând click pe al doilea text subliniat apare:

 

ancore in html

 

Atributul title aparţine etichetei <a> şi comandǎ apariţia unei mici ferestre în pagina Web când mouse-ul se aflǎ pe o legǎturǎ, fereastrǎ în care este afişatǎ valoarea datǎ acestui atribut. Acest atribut are astfel menirea de a furniza informaţii suplimentare despre semnificaţia unei legǎturi.

ancore in html

ancore in html

 

Fǎcând click pe  textul subliniat apare:

ancore in html

Pentru ca vizitarea unei pagini Web sǎ fie însoţitǎ de un sunet de fond, browserul Internet Explorer  acceptǎ eticheta <bgsound>. Fişierul care stocheazǎ sunetul este precizat printr-un atribut al etichetei <bgsound>, şi anume src (de la ,,source” = sursǎ).

     Un al doilea atribut al etichetei <bgsound>, şi anume loop permite precizarea numǎrului de repetiţii care sunt executate pânǎ când sunetul de fond înceteazǎ. Valorile posibile sunt:

  • ,,-1”  sau  ,,infinite”  pentru ca sunetul de fond sǎ se repete de un numǎr

infinit de ori

  • un numǎr întreg pozitiv care precizeazǎ de câte ori sǎ se repete sunetul

ancore in html

ancore in html

 

Stilurile dedicate se aplicǎ numai blocurilor de text pentru care sunt definite.

În blocul <head…< / head>  se insereazǎ un bloc <style>…< / style>

(în exemplul de mai jos dorim ca toate titlurile de mǎrimea 1 sǎ fie centrate şi de culoare roşie)

ancore in html

 

 

ancore in html

 

Observaţie: Dacǎ dorim ca acelaşi stil sǎ fie utilizat de cǎtre mai multe elemente (de exemplu ,,h1”, ,,h2” şi ,,p”) atunci se procedeazǎ ca în exemplul de mai jos:

ancore in html

ancore in html

 

 

Clasele de stiluri  permit definirea unui stil general şi folosirea lui acolo unde este necesar. Procedǎm astfel:

1. Definim o clasǎ de stiluri ,,rc” (roşu şi centrat) în interiorul blocului <style>…< / style> aflat la rândul lui în blocul <head>…< / head>:

             <style>

                 . rc {text-align : center ; color : red ; }

              <style>

Observaţie:  Locul liber aflat în faţa clasei de stiluri ,,rc” indicǎ faptul cǎ aceastǎ clasǎ este aplicabilǎ tuturor blocurilor de text, atunci când este necesar.

2. Dacǎ dorim ca un titlu de mǎrimea 2 sǎ foloseascǎ aceastǎ clasǎ de stiluri atunci scriem:

               <h2 class=rc>…< / h2>

ancore in html

ancore in html

Observaţie:  Dacǎ dorim ca o clasǎ de stiluri sǎ fie aplicabilǎ pentru anumite elemente ale documentului (de exemplu ,,p”), atunci:

ancore in html

 

ancore in html

 

Stiluri ,,identificate”

   Toate elementele unui document admit un atribut universal numit id. Acest atribut înlocuieşte un atribut mai vechi  name şi  are rolul de a identifica în mod unic un element în cadrul unui document.

    Atributul id poate identifica stilul utilizat de un element.

    Pentru a utiliza un stil ,,identificat”, procedaţi astfel:

1. <style>

        #VERDE  {color : green ; }

    <style>

2. În elementul în care se doreşte utilizarea localǎ a acestui stil, folosiţi atributul id care primeşte ca valoare numele stilului definit anterior

ancore in html

 

ancore in html

Dacǎ dorim ca un stil ,,identificat” sǎ fie aplicabil numai pentru anumite elemente ale documentului (de exemplu ,,h2”), atunci:

ancore in html

ancore in html

Pentru ca toate blocurile de text cursiv dintr-un bloc de text de tip paragraf  sǎ fie de culoare roşie, atunci:

    <style>

        p , i  {color : red ; }

    <style>

 

ancore in html

ancore in html

Stiluri in-line sunt definite chiar în eticheta ce iniţiazǎ blocul în care dorim sǎ se aplice aceste stiluri:

 

ancore in html

ancore in html

 

     În cazul în care dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text într-un bloc cu ajutorul delimitatorilor <span>…< / span> dupǎ care utilizǎm atributul style pentru eticheta <span>

ancore in html

 

ancore in html

 

Stiluri definite în fişiere externe

Procedǎm astfel:

1. Se creazǎ un fişier stiluri.html (conţinutul acestui fişier coincide cu conţinutul unui bloc <style>…< / style>, fǎrǎ ca aceşti delimitatori sǎ fie incluşi)

ancore in html

2. În fişierul urmǎtor pe care-l vom numi   e15_10.html   includem în blocul <head>…< / head>  o etichetǎ <link> având atributele:

·         atributul rel cu valoarea “stylesheet

·         atributul type cu valoarea “text/css

·         atributul href având ca valoare adresa URL a fişierului creat anterior.

ancore in html

Exemplul este echivalent ca efect cu  e15_5

ancore in html

Dacǎ un atribut are valoarea  ,, ! important ”, atunci el are prioritate maximǎ.

ancore in html

ancore in html

 

Tipul  fontului  poate fi stabilit cu ajutorul atributului font-family.

ancore in html

 

 

ancore in html

 

Grosimea fontului  poate fi stabilitǎ cu ajutorul atributului font-weight. Valorile posibile sunt:

  • normal
  • bold
  • bolder
  • lighter
  • valori numerice între 100 (pentru fontul cel mai subţire) şi 900 (pentru fontul cel mai gros)

ancore in html

ancore in html

 

Stilul fontului  poate fi stabilit cu ajutorul atributului font-style.

Valorile posibile sunt:

  • normal
  • italic

ancore in html

ancore in html

 

Variantele fontului  pot fi stabilite cu ajutorul atributului font-variant.

Valorile posibile sunt:

  • normal
  • small-caps

 

ancore in html

 

ancore in html