Limbajul HTML

Curs de autoinstruire in HTML

Geluri de unghii diamond
Inregistrati-va si puteti plasa pagina Web pe Geocities.

Top100
Cele mai bune pagini

HTML

HTML 4.0 Specification
Aici gasiti o descriere mai complexa despre limbajul HTML 4.0

HTML 4.01 Specification
Aici gasiti o descriere mai complexa despre limbajul HTML 4.01

DHTML

Javascript

Animatii

UTT : UBM : HTML

Limbajul HTML
Autor: Barna Alexa

11. Stiluri

Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web. Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite valori pentru font, marime culoare, aliniere, distante fata de margini etc).
Exista doua modalitati de a defini un stil:

sintaxa CSS (Cascading Style Sheets);
sintaxa Javascript.

Cascading Style Sheets inseamna "foi in stilul cascada".

Stiluri dedicate

Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu:

<style> h1 {text-align:center; color:red;} </style>

Toate titlurile care apar in fisier ca fiind de marime 1 vor fi de culoare rosie si centrate.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. "h1", "h2", si "p") atunci se utilizeaza o lista acestor elemente, separate prin virgula:

<style> h1, h2, p {text-align:center; color:red;} </style>

Clase de stiluri

Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este necesar. Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului <style>...</style>, aflat la randul lui in blocul <head>...</head>:

<style> all.ac {text-align:center; color:blue;} </style>

Daca dorim ca un titlu de marimea 2 sa foloseasca clasa de stiluri "ac" atunci scriem:

<h2 class = ac>Acesta este un header de marime 2 albastru si centrat</h2>

- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar.
La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul class avand ca valoare numele clasei de stil. Acesta este un atribut universal adica este aplicabila tuturor elementelor.

Observatii:
In interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /* si */ ( ca in C, C++, Java si Javascript).

Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (de exemplu "p") atunci in consturctia va aparea acest element ( de exemplu "p.rc").

<html> <head><title>clasa de stiluri dedicata</title> <style> p.ac {text-align:center; color:blue;} </style> </head> <body> <p>Acesta este un paragraf normal
<br> <p class=ac>Acesta este un paragraf albastru si centrat
</body> </html>

vezi acest exemplu

Stiluri " identificate "

Toate elementele unui document admite un atribut universal numit id.
Atributul id poate identifica stilul utilizat de un element.
Pentru a utiliza un stil "identificat" procedati astfel:

in blocul <style>...</style> introduceti definitia stilului conform sintaxei:
<style> #rosu { color: red } </style>
in elementul in care se doreste utilizarea locala a acestui stil , folositi atributul id care primeste valoare numele stilului definit anterior.
Daca dorim ca un stil " identificat " sa fie aplicabil numai pentru anumite elemente ale documentului ( de exemplu "h2") atunci in constructia selectorului va aparea acest element (de exemplu "h2#ac").

Stiluri in-line

Stilurile in-line sunt definite chiar in eticheta ce initiaza blocul in care dorim sa se aplice aceste stiluri.
Pentru aceasta se utilizeaza atributul universal style (comun practic tuturor etichetelor ce par intr-un document HTML).
Valoarea data atributului style este tocmai descrierea stilului, cuprinsa nu intre acolade {..} ci intre ghilimele "...".
De exemplu:

<h2 style = " color: red; text-align: center;">
Acest header de marimea 2 este de culoare rosie si este centrat.</h2>

Daca dorim utilizarea unui anumit style pentru un fragment de text, atunci includem acest text intr-un bloc cu ajutorul delimitatorilor <span>...</span>, dupa care utilizam atributul style pentru eticheta <span>.

Stiluri definite in fisiere externe

Stilurile definite in interiorul unui bloc <style>...</style> pot fi transferate intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere HTML.
Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:

Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia .css sau .html. Continutul acestui fisier coincide cu continutul unui bloc <style>...</style> , fara ca acesti delimitatori sa fie inclusi.
In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 , se include in blocul <head>...</head> o eticheta <link>avand trei atribute.
- atributul rel cu valoarea "stylesheet"
- atributul href avand ca valoare adresa URL a fisierului creat la punctul 1 ;
- atributul type cu valoarea "text/css".
Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in fisierul HTML curent intr-un bloc <style>...</style>.

Pseudoclase

Pseudoclasele se utilizeaza pentru personalizarea legaturilor. Ele se definesc in blocul <style>...</style> sau intr-un fisier extern, conform sintaxei:

a: link {color: black; font-size: 20pt} a: activate {color: blue; font-style: italic} a: visited {color: cyan; text-decoration: none}

Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi urmatoarele doua metode:

a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>
a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>

Forma cursorului

Atentie!!! acest exemplu lucreaza doar cu browsere Internet Explorer 4.x sau 5!

In browsere cursorul mouse-ului are in general o forma simpla, luaind pe parcursul vizionarii paginii respective maximum doua infatisari diferite:

Mana - atunci cand este pozitinat pe o legatura
Bara verticala - atunci cand este pozitionat pe alt obiect decat o legatura.

Acestea insa sunt formele implicite. Desigur exista cazuri in care am dori ca browser-ul sa aiba o alta forma decat una dintre acestea. La fel ca multe alte probleme care privesc modul in care o pagina arata si aceasta isi gaseste rezolvarea in folosirea CSS, ca limbaj de descriere a formei unui document.
Proprietatea care gestioneaza forma cursorului se numeste simplu: cursor si poate fi introdusa in orice element style al unui tag html.
De exemplu pentru obtinerea unei imagini a cursorului de tipul unei sageti orientata Est-Vest la trecerea mouse-ului peste un link iata codul ce va trebui folosit:

< a href=" fisier.html" style=" cursor :e-resize" " Legatura< /a>

Iata deci cum va arata (doar pentru IE 4.x sau mai mare):
Legatura
Nu este, insa singurul exemplu, in continuare aveti toate codurile pentru formele de cursor pe care le puteti folosi:

auto	utilizeaza setarile implicite ale utilizatorului
crosshair	creeaza o cruce
default	setarile implicite ale browserului
e-resize	sageata Est-Vest
hand	mana
help	semnul intrebarii
move	cruce cu sageti la capete
n-resize	sageata sud-nord
ne-resize	sageata SudVest - NordEst
nw-resize	sageata SudEst - NordVest
pointer	mana
s-resize	sageata Nord - Sud
se-resize	sageata NordVest - SudEst
sw-resize	sageata NordEst - SudVest
text	bara verticala din campurile de introducere a datelor
w-resize	sageata Est-Vest
wait	clepsidra

1111

Continut

  1. Ce este HTML ?
  2. Primii pasi
  3. Fonturi
  4. Blocuri de text
  5. Imagini
  6. Legaturi
  7. Liste
  8. Tabele
  9. Ferestre in Html
10. Formulare
11. Stiluri
12. Javascript
13. Tag-uri

       [ HOME ]

[ HOME ]