SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:
PAGINI WEB - DESIGN - TUTORIAL INTERACTIV ON-LINE
PAGINI WEB - PROGRAMARE - TUTORIAL INTERACTIV ON-LINE
PROGRAMARE HTML
LIMBAJUL HTML - SITE DIDACTIC
SITE DIDACTIC HTTP://WWW.W3SCHOOLS.COM/HTML
PAGINI WEB - DESIGN - TUTORIAL INTERACTIV ON-LINE
PAGINI WEB - PROGRAMARE - TUTORIAL INTERACTIV ON-LINE
PROGRAMARE HTML
LIMBAJUL HTML - SITE DIDACTIC
SITE DIDACTIC HTTP://WWW.W3SCHOOLS.COM/HTML
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 >.
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:
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>.
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).
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).
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":
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.
Formatarea caracterelor
<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 |
<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ă |
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.
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.
valoare | cod |
ă | ă |
Ă | Ă |
â | â |
 |  |
î | î |
Î | Î |
ş | ş |
Ş | Ş |
ţ | ţ |
Ţ | Ţ |