SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:
UNITATEA DE INVATARE: Instrumente de lucru
pentru crearea site-urilor Web
- Elemente de marcare
- Formatari
- Organizarea
textului
HTML (HyperText Markup Language) este un limbaj folosit pentru crearea paginilor Web.
In general, HTML este usor de utilizat, fiind bazat pe un elemente numite tag-uri.
HTML foloseste aceste elemente pentru introducerea imaginilor si a linkurilor, pentru a modifica fontul curent,etc.
Un tag consta dintr-o litera sau cuvant rezervat intre parantezele unghiulare < si >.
Iata cateva exemple:
Tag
|
Efect
|
<b>
|
text
|
<i>
|
text
|
<p>
|
Creeaza paragraf nou
|
<img>
|
Insereaza o poza
|
Majoritatea comenzilor HTML sunt alcatuite din doua tag-uri:
unul de inceput si unul de sfarsit, cu deosebirea ca tag-ul de sfarsit contine caracterul / dupa <. Codul de mai jos:
Acesta este un <b>exemplu</b>.
va aparea pe pagina astfel: Acesta este un exemplu.
Structura unei pagini HTML
Majoritatea paginilor Web au cateva lucruri in comun, cum ar fi sectiunile head si body, marcate prin tag-urile: <head> si respectiv <body>. Anumite informatii despre pagina, cum ar fi titlul, se scriu in sectiunea head, iar continutul propriu-zis al paginii - in body. De asemenea, fiecare pagina HTML incepe si se termina cu tag-ul <html> (</html>).
Iata structura de baza a unei pagini HTML:
<html>
<head>
(titlu, alte informatii....)
</head>
<body>
(Continutul paginii - text, imagini)
</body>
</html>
Daca vizualizezi aceasta pagina intr-un browser, nu vei vedea nimic, deoarece pagina nu contine deocamdata text sau imagini.
Pentru a da paginii un titlu oarecare, vom folosi tag-ul <title>, inserat intre: <head> si:</head>.
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
</body>
</html>
In bara de sus a browserului va aparea textul: Pagina mea!
Inserarea textului
Daca vrei ca textul tau sa apara sub forma de paragrafe, in sectiunea <body> poti folosi tag-ul <p> (paragraph).
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
<p>Aceasta este prima mea pagina de web !</p>
</body>
</html>
Felicitari! Ai creat prima ta pagina Web.
Noi tag-uri
In continuare poti folosi tag-urile HTML pentru a imbunatati aspectul paginii.
De exemplu, tag-urile <b> .... </b> sau <strong> .... </strong> au ca efect ingrosarea textului (bold).
Aceasta este <b>prima</b> pagina construita de mine!
apare in felul urmator:
Aceasta este prima pagina construita de mine!
Pentru a centra textul, se foloseste tot tag-ul <p> cu atributul align="center":
<p align="center"> Aceasta este <b>prima</b> pagina construita de mine!</p>
Pentru a schimba culoarea de fundal (background) in negru si a textului in alb, in tag-ul body trebuie specificat bgcolor="#000000" si respectiv text="#FFFFFF".
<body bgcolor="#000000" text="#FFFFFF">
Codul HTML va arata astfel:
<html>
<head>
<title>Pagina mea !</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"> Aceasta este <b>prima</b> pagina construita de mine!</p>
</body>
</html>
Incearca in continuare sa modifici pagina adaugand noi paragrafe si schimband culoarea de fundal sau culoarea textului.
<HTML> </HTML>
| Defineşte un fişier în format Web |
<HEAD> </HEAD>
| Antetul documentului |
<TITLE> </TITLE>
| Tilul documentului |
<BODY> </BODY>
| Corpul paginii HTML |
BGCOLOR = culoare
| Culoarea de fond a paginii |
TEXT=culoare
| Culoarea textului pe pagină |
| |
<P>
| Paragraf |
|
|
<FONT> </FONT>
| Specifică atribute ale textului încadrat |
SIZE=n
| Dimensiunea textului este 1-7 |
FACE="a,b"
| Specifică fontul: a, dacă este disponibil, sau b |
COLOR=s
| Culoarea textului: fie un nume de culoare, fie o valoare RGB |
<BR>
| Linie nouă |
|
|
<!-- -->
| Comenatriu HTML |
<CENTER> </CENTER>
| Centrează materialul în pagină |
<HR>
| Riglă orizontală |
SIZE=x
| Înălţimea riglei în pixeli |
WIDTH=x
| Lăţimea riglei în pixeli sau în procente |
NOSHADE
| Dezactivează afişarea umbrei pentru rigla orizontală |
ALIGN=x
| Alinierea riglei orizontale în pagina (left, center, right) |
COLOR=x
| Culoarea riglei orizontale (numai pentru IE) |
|
|
<sup></sup>
| Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup> |
<sub></sub>
| Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O |
Formatarea caracterelor
<B> </B>
| Afişează text cu caractere aldine |
<I> </I>
| Afişează text cu caractere cursive |
<U> </U>
| Afişează text subliniat |
<TT> </TT>
| Text cu font monospaţiu |
<CITE> </CITE>
| Citare bibliografică |
<CODE> </CODE>
| Listing de program |
<EM> </EM>
| Stil logic de evidenţiere |
<KBD> </KBD>
| Text de la tastatură |
<STRONG> </STRONG>
| Evidenţiere logică puternică |
<VAR> </VAR>
| Program sau variabilă |
<BASEFONT SIZE = n>
| Specifică dimensiunea implicită a fontului din pagină |
Marcaje pentru liste
<DD>
| Descriere definiţie |
<DL> </DL>
| Lista de tip definiţie |
<DT>
| Termen de definiţie |
<LI>
| Element de listă |
<OL>
| Listă ordonată (numerotată) |
TYPE=tip
| Tipul numerotării. Valori posibile: A, a, I, i, 1 |
START=x
| Numărul de început al listei ordonate |
<UL>
| Listă neordonată (marcată) |
TYPE=formă
| Forma marcajului. Valori posibile: circle, square, disc. |
Marcaje pentru cadre
| <FRAMESET> </FRAMESET> | Definirea redactării paginii |
| COLS=x | Numărul şi mărimea relativă a coloanelor |
| ROWS=x | Numărul şi mărimea relativă a liniilor |
| BORDER=x | Specifică starea "on" (activă) sau "off" (inactivă) pentru chenarul cadrului FRAMESET (1 sau 0) |
| FRAMEBORDER = x | Specifică mărimea chenarului |
| FRAMESPACING = x | Mărimea spaţiului dintre două cadre adiacente |
| <FRAME> | Definiţia unui anumit cadru |
| SRC=url | URL-ul sursă pentru cadru |
| NAME=nume | Numele cadrului (utilizat împreună cu TARGET=nume ca parte componentă a marcajului de tip ancoră<a> |
| SCROLLING=scrl | Defineşte opţiunea barei de derulare.Valori posibile: on(activă), off(inactivă), auto (automat) |
| FRAMEBORDER=x | Mărimea chenarului din jurul cadrului |
| MARGINHEIGHT=x | Spaţiul suplimentar de deasupra şi dedesubtul unui anumit cadru |
| MARGINWIDTH=x | Spaţiu suplimetar la stânga şi la dreapta unui anumit cadru |
| <NOFRAMES> </NOFRAMES> | Secţiunea de pagină afişată pentru utilizatorii care nu pot vedea un cadru |
| <IFRAME> | Cadru intern (numai pentru IE) |
| SRC=url | Sursa cadrului |
| NAME=s | Numele ferestrei (util pentru TARGET) |
| HEIGHT=x | Înăţtimea cadrului înglobat |
| WIDTH=x | Lăţimea cadrului înglobat |
Marcaje pentru tabele
| <TABLE> </TABLE> | Tabel HTML |
| BORDER=x | Chenarul tabelului |
| CELLPADDING=x | Spaţiul suplimentar în cadrul celulelor tabelului |
| CELLSPACING=x | Spaţiul suplimentar între celulele tabelului |
| WIDTH=x | Lăţimea impusă tabelului |
| FRAME=valoare | Ajustarea fină a tabelului |
| RULES=valoare | Ajustarea fină a riglelor tabelului |
| BORDERCOLOR = culoare | Specifică culoarea chenarului tabelului |
| BORDERCOLORLIGHT = culoare | Cea mai deschisă culoare din cele două culori specificate |
| BORDERCOLORDARK = culoare | Cea mai închisă culoare din cele două culori specificate |
| ALIGN=left | Aliniază tabelul la marginea din stânga a paginii, iar textul curge în partea dreaptă |
| ALIGN=right | Aliniază tabelul la marginea din dreapta a paginii, iar textul curge în partea stângă |
| HSPACE=x | Spaţiu suplimetar pe orizontală în jurul tabelului |
| VSPACE=x | Spaţiu suplimetar pe verticală în jurul tabelului |
| COLS=x | Specifică numărul de coloane ale unui tabel |
| <COLGROUP> </COLGROUP> | Defineşte un set de definiţii de coloane cu ajutorul marcajului <col> |
| <COL WIDTH=x> | Defineşte lăţimea unei coloane exprimată în pixeli |
| <THEAD> </THEAD> | Defineşte titlul tabelului |
| <BODY> </TBODY> | Defineşte corpul tabelului |
| <TR> </TR> | Linie de tabel |
| BGCOLOR=culoare | Specifică culoarea de fond pentru întreaga linie |
| ALIGN=aliniere | Alinierea celulelor de pe linia curentă (left, center, right) |
| <TD> </TD> | Celula de date a tabelului |
| BGCOLOR=culoare | Specifică culoarea de fond pentru celula de date |
| COLSPAN=x | Numărul de coloane pe care se întinde celula curentă de date |
| ROWSPAN=x | Numărul de linii pe care se întinde celula curentă de date |
| ALIGN=aliniere | Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) |
| VALIGN=aliniere | Alinierea pe verticală a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) |
| BACKGROUND=url | Specifică imaginea de fond pentru celula tabelului |
| NOWRAP | Nu permite despărţirea textului pe linii în cadrul unei celule |
| ALIGN=baseline | Aliniază celule de date cu linia de bază a textului adiacent |
| ALIGN=caracter | Aliniază o coloană faţă de un anumit carcater (caracterul prestabilit este ".") |
| ALIGN=justify | Aliniază atât marginea din stânga cât şi marginea din dreapta a unui text |
Adăugarea imaginilor
| <IMG > | Marcajul de introducere a imaginilor |
| SRC=url | Sursa fişierului grafic |
| ALT=text | Textul alternativ de afişat, dacă este necesar |
| ALIGN=aliniere | Alinierea imaginii în pagină. Valori posibile: top (sus), middle (în mijloc), bottom (jos), left (în stânga), right (la dreapta) |
| HEIGHT=x | Înălţimea imaginii (în pixeli) |
| WIDTH=x | Lăţimea imaginii |
| BORDER=x | Chenarul din jurul imaginii, atunci când aceasta este utilizată ca hiperlegătură |
| HSPACE=x | Spaţiul suplimentar pe orizontală din jurul imaginii (în pixeli) |
| VSPACE=x | Spaţiul suplimentar pe verticală din jurul imaginii (în pixeli) |
Tabel diacritice
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.
| valoare | cod |
| ă | ă |
| Ă | Ă |
| â | â |
| Â | Â |
| î | î |
| Î | Î |
| ş | ş |
| Ş | Ş |
| ţ | ţ |
| Ţ | Ţ |
