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".
.
Făcând click pe primul text subliniat apare:
Se revine în pagină cu ajutorul butonului .
Făcând click pe al doilea text subliniat apare:
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”
Făcând click pe primul text subliniat apare:
Se revine în pagină cu ajutorul butonului .
Făcând click pe al doilea text subliniat apare:
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ă.
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 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>
Făcând click pe primul text subliniat apare:
Se revine în pagină cu ajutorul butonului .
Făcând click pe al doilea text subliniat apare:
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.
Făcând click pe textul subliniat apare:
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
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)
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:
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>
Observație: Dacă dorim ca o clasă de stiluri să fie aplicabilă pentru anumite elemente ale documentului (de exemplu ,,p”), atunci:
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
Dacă dorim ca un stil ,,identificat” să fie aplicabil numai pentru anumite elemente ale documentului (de exemplu ,,h2”), atunci:
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>
Stiluri in-line sunt definite chiar în eticheta ce inițiază blocul în care dorim să se aplice aceste stiluri:
Î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>
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)
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.
Exemplul este echivalent ca efect cu e15_5
Dacă un atribut are valoarea ,, ! important ”, atunci el are prioritate maximă.
Tipul fontului poate fi stabilit cu ajutorul atributului font-family.
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)
Stilul fontului poate fi stabilit cu ajutorul atributului font-style.
Valorile posibile sunt:
- normal
- italic
Variantele fontului pot fi stabilite cu ajutorul atributului font-variant.
Valorile posibile sunt:
- normal
- small-caps