Lectia 1

23
Tehnologia Informaţiei şi Comunicaţiilor Dumitru Alina Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia Ce este limbajul HTML? 1

description

 

Transcript of Lectia 1

Page 1: Lectia 1

Tehnologia Informaţiei şi Comunicaţiilor

Dumitru Alina

Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia

Ce este limbajul HTML?

1

Page 2: Lectia 1

Cuprins:

2

Page 3: Lectia 1

Introducere

3

Page 4: Lectia 1

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

Page 5: Lectia 1

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

Page 6: Lectia 1

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

Page 7: Lectia 1

Structura unui document HTML

7

Page 8: Lectia 1

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

Page 9: Lectia 1

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

Page 10: Lectia 1

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

Page 11: Lectia 1

Etichetele si atributele lor

11

Page 12: Lectia 1

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 verificareapasa aici

Cum modificam culoarea de fundal?

12

Page 13: Lectia 1

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 verificareapasa aici

Cum se formateaza textul?

13

Page 14: Lectia 1

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 verificareapasa aici

Cum se formateaza textul?

14

Page 15: Lectia 1

<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

Page 16: Lectia 1

Evaluare

16

Page 17: Lectia 1

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:bgcolorbackgroundlink

Test

17

Page 18: Lectia 1

Bibliografia

18

Page 19: Lectia 1

Resurse didactice Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora, 2000Daniela Bejan. Limbajul HTML. Bacău: Editura EduSoft, 2006 Resurse on-line si multimedia: http://www.worklance.com/htmltutorial/ceestehtmlhttp://www.ecursuri.ro/cursuri/html-introducere.phphttp://www.afaceri-online.net/proiectare-site-web/htmlwww.codlea.go.rowww.info-codlea.rowww.fil.unitbuc.rowww.images.google.rowww.3schools.rowww.e-training.iatp.md

19

Page 20: Lectia 1

Concluzii

20

Page 21: Lectia 1

Invatarea editarii paginilor web

21

Page 22: Lectia 1

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:bgcolorbackgroundlink

Test

22Inapoi la test

Page 23: Lectia 1

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:bgcolorbackgroundlink

Test

23Inapoi la test