Proiect Didactic HTML

Limbajul html
1
Disciplina:
► Informatică și T.I.C.
Clasa:
► a VIII-a
Lecția:Limbajul
► HTML
Tipul
► lecției: de consolidare a cunoștințelor și deprinderilor
Competențe
► specifice:
⮚ utilizarea eficientă a unor componente software;
⮚ utilizarea unui editor dedicat pentru realizarea unor pagini web;
⮚ utilizarea unor instrumente specializate pentru obținerea unor produse utile;
⮚ elaborarea/actualizarea de pagini web conform unor specificații data.
Competențe
► derivate:
C1 - cunoașterea unor tag-uri pentru formatarea textului, paragrafelor, fundalurilor;
►
C2
► - aplicarea unor formatări pentru câteva elemente de conținut ale unei pagini web: text, paragraf,
fundal;
►C3 - utilizarea unui editor de texte pentru redactarea unui fișier HTML;
C4-Utilizarea
► platformei replit.com
Metode
► și procedee didactice: conversația, exercițiul, explicația, învățarea prin descoperire,
algoritmizarea.
► Resurse materiale:
∙ tablete sau computere;
∙ fișe de lucru;
∙ videoproiector.
∙ Prezentare Prezi-la sfârșit în limba maghiară
Forme
► de organizare: frontală, pe grupe
Ce este limbajul HTML?
HTML este prescurtarea de la Hypertext Markup

Language, ceea ce reprezintă de fapt limbajul pe care
browserele de internet îl înțeleg și cu ajutorul lui pot fi afișate
paginile web.
Avantajele învățării limbajului HTML:
► Este foarte simplu și nu necesită mult timp;

► Oferă controlul absolut asupra realizării paginii web;
► Poți folosi în cadrul paginilor pe care le vei realiza secvențe de
cod HTML “împrumutate” de la alte pagini.
Ce îmi trebuie ca sa învăț HTML?
Învățarea limbajului HTML este ușoară, nu ai nevoie

decat de urmatoarele:
► Să știi să utilizezi un editor de text (ex: Notepad)
► Să ai cel putin un browser de internet (ex: Google Chrome,
Microsoft Internet Explorer, etc)
Structura unui document HTML
Tag-urile nu sunt altceva decât nițte marcaje sau etichete pe

care limbajul HTML le folosește alături de texte pentru a ajuta
browserul de internet să afișeze corect continutul paginii web.
Tag de
<html>
Tag-uri inceput
pereche Tag de
</html>
Tag-uri sfarsit
Tag-uri Tag de
 , <hr>
singulare inceput
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>…</HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse
informatii folositoare pentru browser-ul de internet.
<TITLE>…</TITLE> - cu ajutorul acestor 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 tagul de incheiere al tag-ului <HTML>. Codul oricarui document se
termina cu acest tag.
Structura documentului HTML
Cum se realizează primul document HTML?
1. Se deschide programul Notepad.

2. Se va scrie codul sursa:
Exemplu:
<HTML>
<HEAD>
<TITLE> Prima mea pagina web! </TITLE>
</HEAD>
<BODY>
Aceasta este prima mea pagina web! 
</BODY>
</HTML>
3. Se va salva documentul cu cu extensia Nume.html (File-Save as).

Etichetele si atributele lor
► Atributele pot fi definite ca niste proprietati ale tag-urilor.

Atributele se pun numai in tag-ul de inceput. Daca un tag nu
are niciun atribut, atunci browser-ul va lua in considerare
valorile implicite ale tag-ului respectiv.
Cum modificam culoarea de fundal?
<HTML>
<HEAD>
Tag-ul <BODY> are
<TITLE> Prima mea pagina web!
urmatoarele atribute:
</TITLE>
- bgcolor (pentru culoarea de
fundal) </HEAD>
- background (pentru imaginea de<BODY BGCOLOR=“red”>
fond)
Aceasta este prima mea pagina
web! 
</BODY>
</HTML>
Cum se formateaza textul?
<HTML>
<HEAD>
Tag-ul are urmatoarele atribute: <TITLE> Prima mea pagina web!
- Color – pentru culoarea textului
</TITLE>
- Size – pentru dimensiunea textului
</HEAD>
- Face – pentru tipul fontului
<BODY BGCOLOR=“red”>

Aceasta este prima mea pagina web!
 

</BODY>
</HTML>
Trasarea unei linii
Pentru a trasa o linie , folosim tag-ul <HR> (Horizontal Rule).

Daca nu ii asociem acestui tag nici un atribut atunci vom obtine o linie orizontala cat
latimea paginii web.
Atributele lui <HR>:
-ALIGN –pentru alinierea liniei (center, left, right)
-COLOR – pentru culoarea liniei
-SIZE – pentru grosimea liniei
-WIDTH – pentru lungimea liniei
<HR COLOR=“yellow” WIDTH=“50%” SIZE=“5%” ALIGN=“center”>

<HTML>
<HEAD>
<TITLE> Prima mea pagina web! </TITLE>
</HEAD>
<BODY BGCOLOR=“red”>
<HR>

Aceasta este prima mea pagina web! 

<HR COLOR=“yellow” WIDTH=“50%” SIZE=“5%” ALIGN=“center”>
</BODY>
</HTML>
Veți lucra: https://replit.com/~
Fișa de lucru
● Editaţi în programul https://replit.com/~

<HTML>
<HEAD>
<TITLE>EXERCITIU </TITLE>
</HEAD>
<BODY>
<H1>EXERCITIU 1 IN LIMBAJUL HTML</H1>
 
<H4>SCRIEŢI NUMELE ŞI PRENUMELE VOSTRU CU MAJUSCULE</H4>
 Text de culoare verde
 Acesta este un font Arial
 Acesta este un text de marime 1
 Acesta este un text de marime maxima 7
 Acesta este un text ingrosat
 Acesta este un text inclinat
 Acesta este un text subliniat
</BODY>
</HTML>
2. Salvati fişierul cu numele Pagina 1. html in dosarul clasei voastre.
3. Vizulizaţi rezultatul cu un browser de Internet: Internet Explorer, Mozilla, Opera, etc.
Fișa de lucru
Exercitiul 2
1. Sa se lanseaze in executie aplicatia NotePad/WordPad.
2. Sa se scrie documentul HTML de mai jos:
<HTML>
<HEAD>
<TITLE> Schimbarea stilului caracterelor </TITLE>
</HEAD>
<BODY>
 - B are ca efect îngrosarea textului 
 - I are ca efect italicizarea textului 
 - U are ca efect sublinierea textului 
<BIG> -BIG are ca efect marirea textului </BIG> 
 - SMALL are ca efect micsorarea textului 
<TT> - TT are ca efect spatierea în mod egal a textului (litera I si litera M vor ocupa acelasi spatiu în interiorul unui cuvânt)
</TT> 
<S> - S are ca efect afisarea textului taiat cu o linie orizontala </S> 
<STRIKE> - STRIKE are ca efect afisarea textului taiat cu o linie orizontala </STRIKE> 
<DEL> - DEL are ca efect afisarea textului taiat cu o linie orizontala </DEL>
</BODY>
</HTML>
3. Sa se salveaze documentul cu numele "formatare_text.html"
4. Sa se deschidă documentul.

Proiect Didactic HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiect Didactic HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Limbajul html

HTML este prescurtarea de la Hypertext Markup

► Este foarte simplu și nu necesită mult timp;

Învățarea limbajului HTML este ușoară, nu ai nevoie

Tag-urile nu sunt altceva decât nițte marcaje sau etichete pe

1. Se deschide programul Notepad.

3. Se va salva documentul cu cu extensia Nume.html (File-Save as).

► Atributele pot fi definite ca niste proprietati ale tag-urilor.

Pentru a trasa o linie , folosim tag-ul <HR> (Horizontal Rule).

<HR COLOR=“yellow” WIDTH=“50%” SIZE=“5%” ALIGN=“center”>

● Editaţi în programul https://replit.com/~

S-ar putea să vă placă și