SlideShare a Scribd company logo
1 of 23
Tehnologia Informaţiei şi
Comunicaţiilor
Dumitru Alina
Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia
Ce este limbajul HTML?
1
Cuprins:
2
Introducere
3
Ce este limbajul HTML?
HTML este prescurtarea de la
Hypertext Markup Language, ceea ce
reprezinta de fapt limbajul pe care
browserele de internet il inteleg si cu
ajutorul lui pot fi afisate paginile web.
4
De ce trebuie sa invat HTML?
Invatarea limbajului HTML are trei mari
avantaje:
• este foarte simpla si nu necesita mult
timp
• ofera controlul absolut asupra realizarii
paginii web
• poti folosi in cadrul paginilor pe care le
vei realiza secvente de cod HTML
5
Ce imi trebuie ca sa invat HTML?
Invatarea limbajului HTML este foarte
usoara, nu ai nevoie decat de
urmatoarele:
• sa stii sa utilizezi un editor de text (ex:
Notepad etc.)
• sa ai cel putin un browser de internet
(ex: Microsoft Internet Explorer ,
Mozilla Firefox etc.)
6
Structura unui document HTML
7
Tag-urile nu sunt altceva decat niste marcaje sau
etichete pe care limbajul HTML le foloseste alaturi de
texte pentru a ajuta browser-ul de internet sa afiseze
corect continutul paginii web.
Structura unui document HTML
8
Care sunt principalele tag-uri din structura
unui document HTML?
<HTML> - cu acest tag incepe orice document HTML. Prin
folosirea acestui tag ii spunem browser-ului ca este vorba de
un fisier HTML pentru a-l putea afisa.
<HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul
paginii, diverse informatii folositoare pentru browser-ul de
internet, informatii pe care le vom descoperi pe parcursul
acestui curs.
<TITLE> - cu ajutorul acestei perechi de tag-uri vei putea
da un titlu documentului tau. Astfel, textul pe care il vei scrie
intre aceste tag-uri va fi afisat in bara de titlu a documentului.
<BODY> - odata cu acest tag incepe continutul paginii web.
Tot ce vei scrie intre tag-urile <BODY> si </BODY> va fi
afisat, de catre browser, pe ecranul monitorului.
</HTML> - este tag-ul de încheiere al tag-ului <HTML>.
Codul oricarui document se termina cu acest tag.
9
1. Se deschide programul Notepad
2. Se va scrie codul sursa.
Exemplu:
<HTML>
<HEAD>
<TITLE>Prima pagina web</TITLE>
</HEAD>
<BODY>
Aceasta este prima mea pagina web .<BR>
</BODY>
</HTML>
3. Se va salva Documentul cu extensia Nume.html, din
meniul File-Save As ( Fisier-Salvare ca)
Daca ai lucrat corect pagina trebuie sa apara asa:
Pentru verificare apasa aici
Cum se realizeaza primul document
HTML ?
10
Etichetele si atributele lor
11
Tag-ul <body> are urmatoarele
atribute:
bgcolor-pentru culoarea de
fundal
background- pentru imaginea
de fond
Codul sursa:
<html>
<title>Prima pagina web</title>
<body bgcolor=red>
Aceasta este prima mea pagina
web <BR>
</body>
</html>
Pentru verificare
apasa aici
Cum modificam culoarea de fundal?
12
Tag-ul <font> are
urmatoarele atribute:
Color- pentru culoarea
textului
Size- pentru dimensiunea
textului
Face-pentru tipul fontului
Codul sursa:
<html>
<title>Prima pagina web</title>
<body bgcolor=red>
<font color=blue size=10>
Aceasta este prima mea pagina
web <
</font>
</html>
Pentru verificare
apasa aici
Cum se formateaza textul?
13
Aspectul de baza al textului
poate fi modificat utilizand
marcatorii:
•<B>.. text...</B> - pentru
stilul bold
•<I>..text...</I> - pentru stilul
italic
•<U>...text...</U> - pentru
stilul underline
•<SUB> ... text...</SUB> -
pentru scrierea sub forma de indice
•<SUP>...text...</SUP> -
pentru scrierea sub forma de
exponent
Codul sursa:
<html>
<title>Prima pagina web</title>
<body bgcolor=red>
<U>
Aceasta este prima mea pagina
web </U> <BR>
</body>
</html>
Pentru verificare
apasa aici
Cum se formateaza textul?
14
<LEFT> </LEFT>
Toate elementele dintre
marcaje vor fi aliniate la stanga.
<CENTER> </CENTER>
Toate elementele dintre
marcaje vor fi centrale.
<RIGHT> </RIGHT>
Toate elementele dintre
marcaje vor fi aliniate la dreapta.
Codul sursa:
<HTML>
<HEAD>
<TITLE>Prima pagina web</TITLE>
</HEAD>
<BODY>
<Center>
Aceasta este prima mea pagina web
</Center> <BR>
</BODY>
</HTML>
Pentru verificare
apasa aici
Cum pozitionam obiectele in pagina?
15
Evaluare
16
Care sunt etichetele utilizate pentru inserarea titlului paginii:
<body> </body>
<title> </title>
<titlu> </titlu>
Pentru a trece la un rând nou se foloseşte eticheta:
<b>
<br>
<i>
Atributul utilizat pentru inserarea unei imagini in fundalul
paginii este:
bgcolor
background
link
Test
17
Bibliografia
18
Resurse didactice
Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora,
2000
Daniela Bejan. Limbajul HTML. Bacău: Editura EduSoft, 2006
Resurse on-line si multimedia:
http://www.worklance.com/htmltutorial/ceestehtml
http://www.ecursuri.ro/cursuri/html-introducere.php
http://www.afaceri-online.net/proiectare-site-web/html
www.codlea.go.ro
www.info-codlea.ro
www.fil.unitbuc.ro
www.images.google.ro
www.3schools.ro
www.e-training.iatp.md
19
Concluzii
20
Invatarea editarii paginilor web
21
Care sunt etichetele utilizate pentru inserarea titlului paginii:
<body> </body>
<title> </title>
<titlu> </titlu>
Pentru a trece la un rând nou se foloseşte eticheta:
<b>
<br>
<i>
Atributul utilizat pentru inserarea unei imagini in fundalul
paginii este:
bgcolor
background
link
Test
22
Inapoi la test
Care sunt etichetele utilizate pentru inserarea titlului paginii:
<body> </body>
<title> </title>
<titlu> </titlu>
Pentru a trece la un rând nou se foloseşte eticheta:
<b>
<br>
<i>
Atributul utilizat pentru inserarea unei imagini in fundalul
paginii este:
bgcolor
background
link
Test
23
Inapoi la test

More Related Content

Viewers also liked

Romanian Lesson 01 02
Romanian Lesson 01 02Romanian Lesson 01 02
Romanian Lesson 01 02guest5c039104
 
Evaluare ex de_vocabular
Evaluare ex de_vocabularEvaluare ex de_vocabular
Evaluare ex de_vocabularalinaprigoana
 
Trecutul simplu continuu in engleza
Trecutul simplu continuu in englezaTrecutul simplu continuu in engleza
Trecutul simplu continuu in englezaMarius Laurentiu
 
Cursuri de limbi straine pentru copii
Cursuri de limbi straine pentru copiiCursuri de limbi straine pentru copii
Cursuri de limbi straine pentru copiianamsro
 
Engleza pentru incepatori
Engleza pentru incepatori Engleza pentru incepatori
Engleza pentru incepatori msoare1953
 
English vocabulary
English vocabularyEnglish vocabulary
English vocabularyAcasa
 
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekkenlcosteiu2005
 
91710747 conversatie-generala-in-limba-engleza
91710747 conversatie-generala-in-limba-engleza91710747 conversatie-generala-in-limba-engleza
91710747 conversatie-generala-in-limba-englezaRusu Maria
 
205097508 carti-culegere-de-matematica-clasele-1-2
205097508 carti-culegere-de-matematica-clasele-1-2205097508 carti-culegere-de-matematica-clasele-1-2
205097508 carti-culegere-de-matematica-clasele-1-2lcosteiu2005
 
176847742 culegere-limba-romana-pentru-clasele-1-4
176847742 culegere-limba-romana-pentru-clasele-1-4176847742 culegere-limba-romana-pentru-clasele-1-4
176847742 culegere-limba-romana-pentru-clasele-1-4lcosteiu2005
 
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...lcosteiu2005
 
Invata Singur-Limba-Engleza
Invata Singur-Limba-EnglezaInvata Singur-Limba-Engleza
Invata Singur-Limba-Englezaelenaxag
 
62 ma te 1 4
62 ma te 1 462 ma te 1 4
62 ma te 1 4danaregal
 
Curs de lb engleza
Curs de lb englezaCurs de lb engleza
Curs de lb englezaSima Sorin
 
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...lcosteiu2005
 
Lista verbe neregulate engleza
Lista verbe neregulate englezaLista verbe neregulate engleza
Lista verbe neregulate englezaAcasa
 
Gramatica limbii engleze, inclusiv exercitii
Gramatica limbii engleze, inclusiv exercitiiGramatica limbii engleze, inclusiv exercitii
Gramatica limbii engleze, inclusiv exercitiiadeadina
 
6654510 fise-limba-romana-clasa-i
6654510 fise-limba-romana-clasa-i6654510 fise-limba-romana-clasa-i
6654510 fise-limba-romana-clasa-idanaregal
 

Viewers also liked (20)

Romanian Lesson 01 02
Romanian Lesson 01 02Romanian Lesson 01 02
Romanian Lesson 01 02
 
31adjectivul
31adjectivul31adjectivul
31adjectivul
 
Evaluare ex de_vocabular
Evaluare ex de_vocabularEvaluare ex de_vocabular
Evaluare ex de_vocabular
 
Trecutul simplu continuu in engleza
Trecutul simplu continuu in englezaTrecutul simplu continuu in engleza
Trecutul simplu continuu in engleza
 
Cursuri de limbi straine pentru copii
Cursuri de limbi straine pentru copiiCursuri de limbi straine pentru copii
Cursuri de limbi straine pentru copii
 
Engleza pentru incepatori
Engleza pentru incepatori Engleza pentru incepatori
Engleza pentru incepatori
 
English vocabulary
English vocabularyEnglish vocabulary
English vocabulary
 
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken
229719461 carti-teste-de-limba-romana-clasa-1-ed-institutul-european-tekken
 
91710747 conversatie-generala-in-limba-engleza
91710747 conversatie-generala-in-limba-engleza91710747 conversatie-generala-in-limba-engleza
91710747 conversatie-generala-in-limba-engleza
 
205097508 carti-culegere-de-matematica-clasele-1-2
205097508 carti-culegere-de-matematica-clasele-1-2205097508 carti-culegere-de-matematica-clasele-1-2
205097508 carti-culegere-de-matematica-clasele-1-2
 
176847742 culegere-limba-romana-pentru-clasele-1-4
176847742 culegere-limba-romana-pentru-clasele-1-4176847742 culegere-limba-romana-pentru-clasele-1-4
176847742 culegere-limba-romana-pentru-clasele-1-4
 
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...
201944440 carti-culegere-de-exercitii-si-texte-gramaticale-clasele-1-4-ed-eli...
 
Invata Singur-Limba-Engleza
Invata Singur-Limba-EnglezaInvata Singur-Limba-Engleza
Invata Singur-Limba-Engleza
 
62 ma te 1 4
62 ma te 1 462 ma te 1 4
62 ma te 1 4
 
Curs de lb engleza
Curs de lb englezaCurs de lb engleza
Curs de lb engleza
 
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...
202373268 157388610-carti-caiet-sa-scriem-corect-clasele-1-2-ed-paralela-45-t...
 
Lista verbe neregulate engleza
Lista verbe neregulate englezaLista verbe neregulate engleza
Lista verbe neregulate engleza
 
Gramatica limbii engleze, inclusiv exercitii
Gramatica limbii engleze, inclusiv exercitiiGramatica limbii engleze, inclusiv exercitii
Gramatica limbii engleze, inclusiv exercitii
 
6654510 fise-limba-romana-clasa-i
6654510 fise-limba-romana-clasa-i6654510 fise-limba-romana-clasa-i
6654510 fise-limba-romana-clasa-i
 
Caiet clasa-intai
Caiet clasa-intaiCaiet clasa-intai
Caiet clasa-intai
 

Similar to Lectia 1

Elemente de formatare la nivel de linie sau la nivel de text (text-level sau...
Elemente de formatare la nivel de linie  sau la nivel de text (text-level sau...Elemente de formatare la nivel de linie  sau la nivel de text (text-level sau...
Elemente de formatare la nivel de linie sau la nivel de text (text-level sau...Violeta Tanasescu
 
Suport 01-cls9-tic-cap05-crearea paginilor web
Suport 01-cls9-tic-cap05-crearea paginilor webSuport 01-cls9-tic-cap05-crearea paginilor web
Suport 01-cls9-tic-cap05-crearea paginilor webGeorge Brebenel
 
Perechea_1 ro.pdf
Perechea_1 ro.pdfPerechea_1 ro.pdf
Perechea_1 ro.pdfOxanaRabei1
 
Informatica Pagini Web Html
Informatica   Pagini Web HtmlInformatica   Pagini Web Html
Informatica Pagini Web Htmlguest191ab8
 
prezentare etapa 1 proiect
prezentare etapa 1 proiectprezentare etapa 1 proiect
prezentare etapa 1 proiecttest4ie
 
Proiect tic a_2b_bada
Proiect tic a_2b_badaProiect tic a_2b_bada
Proiect tic a_2b_badacameliabada
 
Proiect tic a_2b_badauta
Proiect tic a_2b_badautaProiect tic a_2b_badauta
Proiect tic a_2b_badautacameliabada
 
Ghid SEO Optimizare Site Web
Ghid SEO Optimizare Site WebGhid SEO Optimizare Site Web
Ghid SEO Optimizare Site WebFlavius Noja
 

Similar to Lectia 1 (20)

Elemente de formatare la nivel de linie sau la nivel de text (text-level sau...
Elemente de formatare la nivel de linie  sau la nivel de text (text-level sau...Elemente de formatare la nivel de linie  sau la nivel de text (text-level sau...
Elemente de formatare la nivel de linie sau la nivel de text (text-level sau...
 
Lucrare de curs WEB
Lucrare de curs WEBLucrare de curs WEB
Lucrare de curs WEB
 
Suport 01-cls9-tic-cap05-crearea paginilor web
Suport 01-cls9-tic-cap05-crearea paginilor webSuport 01-cls9-tic-cap05-crearea paginilor web
Suport 01-cls9-tic-cap05-crearea paginilor web
 
Curs html
Curs htmlCurs html
Curs html
 
Perechea_1 ro.pdf
Perechea_1 ro.pdfPerechea_1 ro.pdf
Perechea_1 ro.pdf
 
Capitolul 3
Capitolul 3Capitolul 3
Capitolul 3
 
Informatica Pagini Web Html
Informatica   Pagini Web HtmlInformatica   Pagini Web Html
Informatica Pagini Web Html
 
Licenta web aplicatie.pptx
Licenta web aplicatie.pptxLicenta web aplicatie.pptx
Licenta web aplicatie.pptx
 
Best cars
Best carsBest cars
Best cars
 
Best cars
Best carsBest cars
Best cars
 
Best cars
Best carsBest cars
Best cars
 
Eu code week moldova
Eu code week moldovaEu code week moldova
Eu code week moldova
 
Html
HtmlHtml
Html
 
Patrascu Mihaela Hanelore Conceptul World Wide Web
Patrascu Mihaela Hanelore Conceptul World Wide Web Patrascu Mihaela Hanelore Conceptul World Wide Web
Patrascu Mihaela Hanelore Conceptul World Wide Web
 
prezentare etapa 1 proiect
prezentare etapa 1 proiectprezentare etapa 1 proiect
prezentare etapa 1 proiect
 
Felicitari personalizate
Felicitari personalizateFelicitari personalizate
Felicitari personalizate
 
Proiect tic a_2b_bada
Proiect tic a_2b_badaProiect tic a_2b_bada
Proiect tic a_2b_bada
 
Proiect tic a_2b_badauta
Proiect tic a_2b_badautaProiect tic a_2b_badauta
Proiect tic a_2b_badauta
 
Ghid SEO Optimizare Site Web
Ghid SEO Optimizare Site WebGhid SEO Optimizare Site Web
Ghid SEO Optimizare Site Web
 
Galerie
GalerieGalerie
Galerie
 

Lectia 1

  • 1. Tehnologia Informaţiei şi Comunicaţiilor Dumitru Alina Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia Ce este limbajul HTML? 1
  • 4. Ce este limbajul HTML? HTML este prescurtarea de la Hypertext Markup Language, ceea ce reprezinta de fapt limbajul pe care browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web. 4
  • 5. De ce trebuie sa invat HTML? Invatarea limbajului HTML are trei mari avantaje: • este foarte simpla si nu necesita mult timp • ofera controlul absolut asupra realizarii paginii web • poti folosi in cadrul paginilor pe care le vei realiza secvente de cod HTML 5
  • 6. Ce imi trebuie ca sa invat HTML? Invatarea limbajului HTML este foarte usoara, nu ai nevoie decat de urmatoarele: • sa stii sa utilizezi un editor de text (ex: Notepad etc.) • sa ai cel putin un browser de internet (ex: Microsoft Internet Explorer , Mozilla Firefox etc.) 6
  • 8. Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web. Structura unui document HTML 8
  • 9. Care sunt principalele tag-uri din structura unui document HTML? <HTML> - cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru a-l putea afisa. <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs. <TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tau. Astfel, textul pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului. <BODY> - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre browser, pe ecranul monitorului. </HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul oricarui document se termina cu acest tag. 9
  • 10. 1. Se deschide programul Notepad 2. Se va scrie codul sursa. Exemplu: <HTML> <HEAD> <TITLE>Prima pagina web</TITLE> </HEAD> <BODY> Aceasta este prima mea pagina web .<BR> </BODY> </HTML> 3. Se va salva Documentul cu extensia Nume.html, din meniul File-Save As ( Fisier-Salvare ca) Daca ai lucrat corect pagina trebuie sa apara asa: Pentru verificare apasa aici Cum se realizeaza primul document HTML ? 10
  • 12. Tag-ul <body> are urmatoarele atribute: bgcolor-pentru culoarea de fundal background- pentru imaginea de fond Codul sursa: <html> <title>Prima pagina web</title> <body bgcolor=red> Aceasta este prima mea pagina web <BR> </body> </html> Pentru verificare apasa aici Cum modificam culoarea de fundal? 12
  • 13. Tag-ul <font> are urmatoarele atribute: Color- pentru culoarea textului Size- pentru dimensiunea textului Face-pentru tipul fontului Codul sursa: <html> <title>Prima pagina web</title> <body bgcolor=red> <font color=blue size=10> Aceasta este prima mea pagina web < </font> </html> Pentru verificare apasa aici Cum se formateaza textul? 13
  • 14. Aspectul de baza al textului poate fi modificat utilizand marcatorii: •<B>.. text...</B> - pentru stilul bold •<I>..text...</I> - pentru stilul italic •<U>...text...</U> - pentru stilul underline •<SUB> ... text...</SUB> - pentru scrierea sub forma de indice •<SUP>...text...</SUP> - pentru scrierea sub forma de exponent Codul sursa: <html> <title>Prima pagina web</title> <body bgcolor=red> <U> Aceasta este prima mea pagina web </U> <BR> </body> </html> Pentru verificare apasa aici Cum se formateaza textul? 14
  • 15. <LEFT> </LEFT> Toate elementele dintre marcaje vor fi aliniate la stanga. <CENTER> </CENTER> Toate elementele dintre marcaje vor fi centrale. <RIGHT> </RIGHT> Toate elementele dintre marcaje vor fi aliniate la dreapta. Codul sursa: <HTML> <HEAD> <TITLE>Prima pagina web</TITLE> </HEAD> <BODY> <Center> Aceasta este prima mea pagina web </Center> <BR> </BODY> </HTML> Pentru verificare apasa aici Cum pozitionam obiectele in pagina? 15
  • 17. Care sunt etichetele utilizate pentru inserarea titlului paginii: <body> </body> <title> </title> <titlu> </titlu> Pentru a trece la un rând nou se foloseşte eticheta: <b> <br> <i> Atributul utilizat pentru inserarea unei imagini in fundalul paginii este: bgcolor background link Test 17
  • 19. Resurse didactice Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora, 2000 Daniela Bejan. Limbajul HTML. Bacău: Editura EduSoft, 2006 Resurse on-line si multimedia: http://www.worklance.com/htmltutorial/ceestehtml http://www.ecursuri.ro/cursuri/html-introducere.php http://www.afaceri-online.net/proiectare-site-web/html www.codlea.go.ro www.info-codlea.ro www.fil.unitbuc.ro www.images.google.ro www.3schools.ro www.e-training.iatp.md 19
  • 22. Care sunt etichetele utilizate pentru inserarea titlului paginii: <body> </body> <title> </title> <titlu> </titlu> Pentru a trece la un rând nou se foloseşte eticheta: <b> <br> <i> Atributul utilizat pentru inserarea unei imagini in fundalul paginii este: bgcolor background link Test 22 Inapoi la test
  • 23. Care sunt etichetele utilizate pentru inserarea titlului paginii: <body> </body> <title> </title> <titlu> </titlu> Pentru a trece la un rând nou se foloseşte eticheta: <b> <br> <i> Atributul utilizat pentru inserarea unei imagini in fundalul paginii este: bgcolor background link Test 23 Inapoi la test