HTML = Hyper Text Mark-up Language
Hiper = text + legaturi catre alte obiecte : imagini , sunete , filme , alte fisiere .
În interiorul textului sunt introduse niste etichete de macare , cu marcaje sau tag-uri , care reprezinta instructiunile acestui limbaj .
individuale
Etichete
pereche (container) - are doua parti
Orice eticheta este scrisa între paranteze unghiulare . Textul unei etichete poate fi scris atât cu litere mari cât si cu litere mici . Spre deosebire de un limbaj de programare unde o insructiune gresita genereaza o eroare , în HTML nu se întâmpla asa ceva ; navigatorul de internet , pur si simplu , trece peste etichetele pe care nu le cunoaste .
Marcajul HTML
Sectiunile unui document HTML
Un document are doua sectiuni : antet si corp (HEAD , BODY).
Antetul : < HEAD > ... < / HEAD >
Corpul : < BODY > ... < / BODY >
Antetul poate avea cel mult doua componente : titlul si eticheta " META ".
Titlul va fi încadrat înte doua etichete :
< TITLE > titlul documentului < / TITLE >
Titlul documentului va aparea doar în bara de titlu a ferestrei navigatorului .
Documentul minimal HTML
< HTML >
< HEAD >
< TITLE > titlul documentului < / TITLE >
< / HEAD >
< BODY > corpul documentului < / BODY >
< / HTML >
În interiorul etichetei < BODY > putem sa stabilim mai multe caracteristici :
culoarea textului ;
- 24124n1322y ; culoarea fundalului ;
- 24124n1322y ; culoarea legaturilor din interiorul documentului ;
- 24124n1322y ; culoarea legaturilor deja vizitate ;
- 24124n1322y ; marginea în care o putem lasa în stânga sau deasupra documentului .
Ex : < BODY TEXT = " red " >
Sintaxa etichetei " BODY "
BODY BACKGROUND = " adresa imaginii " BGCOLOR = " culoare "
VLINK = " culoare " ALINK = " culoare " LINK = " culoare " TEXT = " culoare "
LEFTMARGIN = " marginea din stânga " TOPMARGIN = "marginea de sus "
BACKGROUND
Este folosit daca dorim sa punem o imagine pe fundalul documentului ; dupa " = " se pune adresa imaginii respective .
Ex : < BACKGROUND = " http : // www.tuiasi.ro / library / a.jpg " >
BGCOLOR - stabileste care este culoarea fundalului
BGCOLOR - culoarea cu denumirea ei : red , green , blue , etc .
BGCOLOR = " # rrggbb " - " # 700000 "
rr - culoarea rosie ; gg - culoarea verde ; bb - culoarea albastra .
TEXT va specifica care este culoarea textului în interiorul documentului .
LINK - culoarea legaturilor altor obiecte din document .
VLINK - culoarea legaturilor deja vizitate .
LEFTMARGIN - marginea pe care dorim sa o lasam în partea stânga la afisare . Dimensiunea
este stabilita în pixeli .
TOPMARGIN - marginea pe care dorim sa o lasam în partea de sus a documentului .
Textul din interiorul documentului va aparea pe ecran în mod continuu pe o singura linie , chiar daca nu era scris pe fisierul HTML pe mai multe linii . Pentru a aparea altfel , va trebui sa includem câteva etichete într-însul .
Ex : < BR > - trecerea la început , la linia urmatoare
< HR > - desenarea unei linii orizontale
Ex : < BODY > Valerica Pedala , elev la liceul < BR > " Tehnoton " < / BODY >
FORMATAREA DOCUMENTULUI
- 24124n1322y ; caractere înclinate < I > ... < / I > ( Italic )
- 24124n1322y ; caractere îngrosate < B > ... < / B > ( Bold )
- 24124n1322y ; caractere subliniate < U > ... < / U > ( Underline )
- 24124n1322y ; caractere taiate < STRIKE > ... < / STRIKE > ( Srikethrough )
- 24124n1322y ; fontul MS-DOS < TT > ... < / TT > ( TeleType )
- 24124n1322y ; scrierea textului central < CENTER > ... < / CENTER >
Div align = left / center / right
Eticheta " Div " serveste doar la schimbarea alinierii textului .
Ex : < DIV ALIGN = right > - pentru text aliniat la dreapta
Înainte si dupa paragraf vor fi lasate niste spatii libere . La fiecare eticheta , toate atributele vor fi puse în aceeasi paranteza .
Ex : < DIV > text < / DIV >
< P > text < / P >
< PRE > text < / PRE >
Schimbarea dimensiunii fontului
< FONT SIZE = + / - / 1 / 2 / 3 / 4 / 5 / 6 / 7
COLOR = " culoare " FACE = " font "
< BIG > - formatul literelor este mai mare
< SMALL > - formatul literelor este mia mic
Formate prestabilite : H1 , H2 , H3 , H4 , H5 , H6
Ex : < H1 > text < / H1 >
Aceste formate au dimensiuni diferite : " H1 "- cel mai mare ; " H6 "- cel mai mic .
Ex : Formula apei este : H < SUB > 2 < / SUB > O
Ex : x × x = x < SUP > 2 < / SUP >
Elementul unei liste
< L1 VALUE = n TYPE = A / a / i / ' / square / circle / disk >
element lista
< / L1 >
Lista ordonata
< OL COMPACT START = n TYPE = a / A / i / [ / 1 >
element 1
element 2
................
< / OL >
Ex : < OL COMPACT START = 1 TYPE = 1 > Ex : < UL COMPACT TYPE = square >
< Li > element 1 < Li > rosu
< Li > element 2 < Li > galben
< Li > element 3 < Li > verde
< / OL > < / UL >
Ex : < OL START = 1 TYPE = 1 > Ex : < UL TYPE = disk >
< Li > element 1 < Li > element principal
< OL START = 3 TYPE = a > < Li > element principal
< Li > element 1.c < UL COMPACT TYPE = circle >
< Li > element 1.a < Li > element secundar
< Li > element 1.2 < Li > element secundar
< / OL > < / UL >
< Li > element 2 < Li > element principal
< Li > element 3 < / UL >
< / OL >
Liste de definitii : < DL COMPACT >
< DT > termen
< DD > definitie
< DT > termen
< DD > definitie
...........................
< / UL >
Ex : Lista de definitie cu cuvinte din dictionar :
< DL COMPACT >
< DT > habanera
< DD > dans popular cubanez
< DT > habitaclu
< DD > < OL > < Li > local special al compasului la o nava
< Li > spatiu într-un avion , într-o masina pentru echipaj , pentru calatori < / OL >
< DT > happy-end < DD > sfârsit fericit
< DL >
Legaturi spre alte documente :
< A HREF = "link" TARGET = _top / _self_blank /_parent >
text < / A >
Pentru un fisier de pe internet : " http : // adresa ".
Legaturi în interiorul documentelor
Realizarea unei locatii denumite :
< A NAME = " denumire " > text < / A >
Legatura la o locatie denumita :
< A HREF = " # denumire " > text < / A >
Legatura la o locatie denumita din alt fisier :
< A HREF = " Adresa # locatie " > text < / A >
Ex : < html >
< body >
< A HREF = " # S1 " > sectiunea 1 < / A >
< A HREF = " # S2 " > sectiunea 2 < / A >
< A HREF = " # S3 " > sectiunea 3 < / A >
< A NAME = " # S1 " > capitolul 1 < / A >
< A NAME = " # S2 " > capitolul 2 < / A >
< A NAME = " # S3 " > capitolul 3 < / A >
< / body >
< / html >
Inserare legaturi : < A HREF = adresa resursei NAME = sir caractere TITLE = sir caractere >
text < / A >
Ex : " ex_1.html >
" http : // www.yahoo.com "
< IMG SRC = adresa fisierului grafic
ALT = sir de caractere - va aparea când mouse-ul indica imaginea respectiva sau când
browse-ul nu poate vizualiza imagini
HEIGHT = numarul de pixeli
WIDTH = numarul de pixeli
ALIGN = TOP / MIDDLE / BOTTOM / LEFT / RIGHT
BORDER = numarul de pixeli
HSPACE = numarul de pixeli
- reprezinta spatiul inserat în stânga si în dreapta imaginii
BSPACE = numarul de pixeli
- analog
VSPACE - stânga sus si dreapta jos a imaginii
Realizarea unei legaturi pe o imagine se face prin punerea între eticheta de început < A > si eticheta de sfârsit < / A > eticheta IMG cu atributele sale .
Ex : < html >
< body >
< IMG SRC = "dog1.gif ALT = "câine 1"
HEIGHT = 360 WIDTH = 180
ALIGN = MIDDLE > text explicativ
< IMG SRC = "dog4.gif" ALT = "câine 4"
HEIGHT = 240 WIDTH = 120
ALIGN = BOTTOM BORDER = 5 > text explicativ
< A HREF = "legatura.html" > < / A >
< IMG SRC = "dog3.gif" ALT = "câine 3"
HEIGHT = 250 WIDTH = 400
ALIGN = TOP > text explicativ
< / body >
< / html >
În cazul inserarii unei imagini , efectele sunt mai spectaculoase când se creaza noi legaturi , nu pe întreaga imagine , ci pe anumite zone din imagine . Aceasta operatie înseamna sa se ataseze imaginii o descriere în care se specifica zonele senzitive ale imaginii si se numeste mapare . Pentru a asocia unei imagini o harta luând :
< IMG USEMAP = " # nume harta " , apoi descrierea hartii :
< MAP NAME = " nume harta "
descriere zona 1
descriere zona 2
...........................
< / MAP >
descriere zona
< AREA HREF = " adresa legaturii
SHAPE = DEFAULT - toata RECT - drept CIRCLE - cerc
POLY - poligon de n vârfuri
COORDS = sir de coordonate astfel :
RECT = abscisa si ordonata punctului din stânga sus
= abscisa si ordonata punctului din dreapta jos
CIRCLE = abscisa si ordonata , centrul si raza
POLY = abscisa si ordonata celor n vârfuri
ALT = sir de caractere >
Ex : < IMG SRC = " control. gif " HEIGHT = 350 WIDTH = 150
USEMAP = " # harta "
< MAP NAME = "harta"
< AREA HREF = adresa
SHAPE = RECT
COORDS = " 0 , 0 , 40 , 30 " >
< AREA HREF SHAPE = RECT
< / MAP >
Cadrele ofera posibilitatea împartirii ecranului în mai multe ferestre , în fiecare afisându-se separat un document HTML . La început vor fi fixate niste dimensiuni , dar acestea pot fi modifi - cate în cursul vizualizarii . Pentru definirea cadrelor se folosesc etichetele "FRAMESET" si "FRAME".
Ex : < FRAMESET ROWS = "structura liniei"
COLS = "structura coloanei"
FRAMEBORDER = 1 / 0 FRAMESPACING = n >
definitii cadre
< / FRAMESET >
- " FRAMEBORDER " are valoarea 1 daca cadrele au chenar ;
- " FRAMEBORDER " are valoarea 0 daca cadrele nu au chenar ;
- " FRAMESPACING " stabileste dimensiunea spatiului de la marginea fiecarui capat ;
- " ROWS " - reprezinta modul de împartire a ecranului de sus în jos;
- "COLS " - reprezinta modul de împartire a ecranului de la stânga la dreapta .
Structura este un sir de elemente separate prin " , " si încadrat între " ". Fiecare element poate fi :
- un numar reprezentând dimensiunea cadrului în pixeli ;
- un procent reprezentând raportul dintre dimensiunea cadrului si dimensiunea ferestrei
navigatorului ;
- simbolul " ", adica dimensiunea va fi tot spatiul ramas disponibil .
" poate face parte din mai multe elemente , eventual cu un numar în fata , în acest caz spatiul ramas disponibil este împartit proportional cu numerele respective .
Ex : 1) < FRAMESET ROWS = " 150 , 20 % , " >
~ Ecranul va fi împartit în trei cadre suprapuse :
- primul cadru are înaltimea de 150 pixeli
- al doilea cadru are înaltimea de 20 % din cea a ferestrei
- al treilea cadru are restul spatiului
2) < FRAMESET COLS = " 2 , 80 " >
Pentru fiecare cadru definit utilizam o eticheta " FRAME " în care specificam fisierul HTML utilizat si , eventual alti parametri .
< FRAME SRC = " adresa " NAME = " nume "
MARGINWIDTH = " latime "
MARGINHEIGHT = " înaltime "
FRAMEBORDER = 1 / 0 >
În fisierul HTML în care se utilizeaza " FRAMESET " nu se mai foloseste eticheta " BODY ". În interiorul lui " FRAMESET ", în loc de a defini un cadru , putem utiliza o alta eticheta "FRAMESET " pentru a împarti cadrul respectiv în mai multe alte cadre .
|
