SlideShare a Scribd company logo
 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 
 Cu ajutorul limbajului HTML se pot construi 
pagini web nu foarte pretentioase insa 
reprezinta un inceput pentru realizarea site-urilor 
profesionale.
 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. 
Aceste tag-uri (etichete) pot fi de doua feluri: 
taguri pereche (un tag de inceput si unul de 
incheiere). Exemple: <HTML> si </HTML>; 
<TITLE> si </TITLE>; <HEAD> si </HEAD> 
 
taguri singulare (nu au un tag de incheiere) 
Exemple: <HR>, <BR>
 <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 il putea afisa. 
 <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii 
folositoare pentru browser-ul de internet 
</HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD> 
<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. 
</TITLE> - este tag-ul de incheiere al tag-ului <TITLE>. Arata sfarsitul titlului 
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. 
</BODY> - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce 
vei scrie dupa acest tag nu va mai fi afisat. 
</HTML> - este tag-ul de incheiere al tag-ului <HTML>. Codul oricarui document se 
termina cu acest tag.
 <HTML> 
<HEAD> 
<TITLE>Prima mea pagina web</TITLE> 
</HEAD> 
<BODY> 
Bine ai venit!<BR> 
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina 
web! 
</BODY> 
</HTML> 
 Dupa ce am scris codul intr-un editor Notepad, salvam documentul cu 
extensia .html sau .htm
 Atributele pot fi definite ca niste proprietati ale tag-urilor. 
Atributele se pun numai in tag-ul de inceput. Daca un tag 
nu are nici un atribut, atunci browser-ul va lua in 
considerare valorile implicite ale tag-ului respectiv. 
De exemplu, atributul BGCOLOR care se foloseste cu tag-ul 
<BODY> indica ce culoare va avea fundalul viitoarei 
pagini web. Fundalul unei pagini web are in mod implicit 
culoarea alba, dar sa spunem ca vrem ca fondul paginii 
noastre sa fie portocaliu. 
In acest caz vom folosi pentru atributul BGCOLOR codul 
culorii orange: #FF9900 
 <BODY BGCOLOR=" #FF9900"> 
 Pentru bleu, folosim 
 <BODY BGCOLOR="#00FFFF">
 Culoarea textului in cadrul unei pagini html se 
poate schimba folosind atributul COLOR (culoare) 
al tag-ului <FONT>. 
 Mesajul "Bine ai venit!" sa spunem, de exemplu, 
ca am vrea sa fie scris cu albastru in loc de 
negru, care este valoarea implicita si sa fie scris 
cu litere mai mari decat restul textului. Pentru a 
scrie astfel textul, vom folosi tag-ul FONT insotit 
de unele atribute astfel: 
<FONT COLOR="#0000FF" SIZE="6"> 
Bine ai venit! 
</FONT><BR>
 Pentru alegerea caracteristicilor unui text, 
putem folosi tag-ul <FONT>. Acest tag 
accepta mai multe atribute (color, face, size) 
care ne vor ajuta in formatarea textelor. 
Atributul COLOR se refera la culoarea textului 
ce va fi incadrat de tag-urile <FONT> si 
</FONT>, atributul FACE arata tipul fontului, 
iar atributul SIZE arata marimea fontului.
 <FONT COLOR="#FF0000">Imi place aceasta 
lectie</FONT> 
 Exemplu 4 
 <FONT COLOR="#000000" FACE="Arial >Voi 
lucra mai mult in HTML</FONT> 
 Exemplu5 
 <FONT COLOR="#FFA500" FACE="Arial" 
SIZE="7">Stiu sa modific dimensiunea, 
culoarea si tipul fontului</FONT>
 Stabilirea elementelor de stil se face cu 
ajutorul tag-urilor <I>…</I>, <B>…</B>, 
<U>…</U>, <S>…</S>, având ca efect 
înclinarea, îngroşarea, sublinierea şi tăierea 
textului cu o linie

More Related Content

What's hot

Educatie Rutiera Circulatia
Educatie Rutiera  CirculatiaEducatie Rutiera  Circulatia
Educatie Rutiera Circulatia
CatalinToma
 
analizator acustico-vestibular
analizator acustico-vestibularanalizator acustico-vestibular
analizator acustico-vestibular
simonacadare
 
Metode interactive (lim. lit. rom)
Metode interactive (lim. lit. rom)Metode interactive (lim. lit. rom)
Metode interactive (lim. lit. rom)Mary Dulits
 
Asemanarea triunghiurilor
Asemanarea triunghiurilorAsemanarea triunghiurilor
Asemanarea triunghiurilor
Buta Carmen
 
Traficul de persoane
Traficul de persoaneTraficul de persoane
Traficul de persoaneRoxana Giusca
 
Lectie discriminare
Lectie discriminareLectie discriminare
Lectie discriminare
Iasmin Bodea
 
scoala ardeleana
scoala ardeleanascoala ardeleana
scoala ardeleana
Agnes Iacob
 
Proiect didactic
Proiect didacticProiect didactic
Proiect didactic
nasy1985
 
Moldova independentă
Moldova independentăMoldova independentă
Moldova independentă
Biblioteca Drept
 
Hronicul si cantecul varstelor
Hronicul si cantecul varstelorHronicul si cantecul varstelor
Hronicul si cantecul varstelor
Emil Mustata
 
Analizatorul cutanat
Analizatorul cutanat Analizatorul cutanat
Analizatorul cutanat
simonacadare
 
”TOȚI SUNTEM COPII”- ppt ces.pptx
”TOȚI SUNTEM COPII”- ppt ces.pptx”TOȚI SUNTEM COPII”- ppt ces.pptx
”TOȚI SUNTEM COPII”- ppt ces.pptx
NadyaRacila
 
Primul ajutor calificat...
Primul ajutor calificat...Primul ajutor calificat...
Primul ajutor calificat...
Elena Negotei
 
Cv europass-20191118-danila-ro
Cv europass-20191118-danila-roCv europass-20191118-danila-ro
Cv europass-20191118-danila-ro
DianaDanila4
 
Proiect lectie deschisa
Proiect lectie deschisaProiect lectie deschisa
Proiect lectie deschisa
TundeLaudat
 
Curs Consiliere si Orientare in Cariera.pdf
Curs Consiliere si Orientare in Cariera.pdfCurs Consiliere si Orientare in Cariera.pdf
Curs Consiliere si Orientare in Cariera.pdf
IulianaMovileanu
 
FORMARE ATESTAREA CADRELOR DIDACTICE.pptx
FORMARE ATESTAREA CADRELOR DIDACTICE.pptxFORMARE ATESTAREA CADRELOR DIDACTICE.pptx
FORMARE ATESTAREA CADRELOR DIDACTICE.pptx
Daniela Munca-Aftenev
 
Standarde de competență profesională ale cadrelor didactice
Standarde de competență profesională ale cadrelor didacticeStandarde de competență profesională ale cadrelor didactice
Standarde de competență profesională ale cadrelor didactice
dorinavacari
 
Atelierul de comunicare
Atelierul de comunicareAtelierul de comunicare
Atelierul de comunicare
DanielaMuncaAftenev
 

What's hot (20)

Educatie Rutiera Circulatia
Educatie Rutiera  CirculatiaEducatie Rutiera  Circulatia
Educatie Rutiera Circulatia
 
analizator acustico-vestibular
analizator acustico-vestibularanalizator acustico-vestibular
analizator acustico-vestibular
 
Metode interactive (lim. lit. rom)
Metode interactive (lim. lit. rom)Metode interactive (lim. lit. rom)
Metode interactive (lim. lit. rom)
 
Asemanarea triunghiurilor
Asemanarea triunghiurilorAsemanarea triunghiurilor
Asemanarea triunghiurilor
 
Scenariu -balul bobocilor
Scenariu -balul bobocilorScenariu -balul bobocilor
Scenariu -balul bobocilor
 
Traficul de persoane
Traficul de persoaneTraficul de persoane
Traficul de persoane
 
Lectie discriminare
Lectie discriminareLectie discriminare
Lectie discriminare
 
scoala ardeleana
scoala ardeleanascoala ardeleana
scoala ardeleana
 
Proiect didactic
Proiect didacticProiect didactic
Proiect didactic
 
Moldova independentă
Moldova independentăMoldova independentă
Moldova independentă
 
Hronicul si cantecul varstelor
Hronicul si cantecul varstelorHronicul si cantecul varstelor
Hronicul si cantecul varstelor
 
Analizatorul cutanat
Analizatorul cutanat Analizatorul cutanat
Analizatorul cutanat
 
”TOȚI SUNTEM COPII”- ppt ces.pptx
”TOȚI SUNTEM COPII”- ppt ces.pptx”TOȚI SUNTEM COPII”- ppt ces.pptx
”TOȚI SUNTEM COPII”- ppt ces.pptx
 
Primul ajutor calificat...
Primul ajutor calificat...Primul ajutor calificat...
Primul ajutor calificat...
 
Cv europass-20191118-danila-ro
Cv europass-20191118-danila-roCv europass-20191118-danila-ro
Cv europass-20191118-danila-ro
 
Proiect lectie deschisa
Proiect lectie deschisaProiect lectie deschisa
Proiect lectie deschisa
 
Curs Consiliere si Orientare in Cariera.pdf
Curs Consiliere si Orientare in Cariera.pdfCurs Consiliere si Orientare in Cariera.pdf
Curs Consiliere si Orientare in Cariera.pdf
 
FORMARE ATESTAREA CADRELOR DIDACTICE.pptx
FORMARE ATESTAREA CADRELOR DIDACTICE.pptxFORMARE ATESTAREA CADRELOR DIDACTICE.pptx
FORMARE ATESTAREA CADRELOR DIDACTICE.pptx
 
Standarde de competență profesională ale cadrelor didactice
Standarde de competență profesională ale cadrelor didacticeStandarde de competență profesională ale cadrelor didactice
Standarde de competență profesională ale cadrelor didactice
 
Atelierul de comunicare
Atelierul de comunicareAtelierul de comunicare
Atelierul de comunicare
 

Viewers also liked

Elemente de conţinut ale paginilor web
Elemente de conţinut ale paginilor webElemente de conţinut ale paginilor web
Elemente de conţinut ale paginilor web
cttauto
 
Competente digitale
Competente digitaleCompetente digitale
Competente digitaleCarmenMatei
 
Elemente de grafic design
Elemente de grafic designElemente de grafic design
Elemente de grafic design
pop tiberiu
 
Design de interfete web
Design de interfete webDesign de interfete web
Design de interfete webAlex Andronic
 
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...Semantic Web Semantic Web-based Agent Applications based Agent Applications –...
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...Sabin Buraga
 
Sabin Buraga: Open Web Application Development, Mozilla, and You
Sabin Buraga: Open Web Application Development, Mozilla, and YouSabin Buraga: Open Web Application Development, Mozilla, and You
Sabin Buraga: Open Web Application Development, Mozilla, and You
Sabin Buraga
 
Any Colour You Like
Any Colour You LikeAny Colour You Like
Any Colour You Like
Sabin Buraga
 
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
Sabin Buraga
 
Soc Cap01
Soc Cap01Soc Cap01
Soc Cap01
Victor Johnson
 
Cursu PS - ASM Cluj
Cursu PS - ASM ClujCursu PS - ASM Cluj
Cursu PS - ASM Cluj
ASMCluj
 
Cu codul în "nori"
Cu codul în "nori"Cu codul în "nori"
Cu codul în "nori"
Sabin Buraga
 
Dezvoltator Web?! – ...în 2016
Dezvoltator Web?! – ...în 2016Dezvoltator Web?! – ...în 2016
Dezvoltator Web?! – ...în 2016
Sabin Buraga
 
Microsoft power point 2007 tic 10
Microsoft power point 2007 tic 10Microsoft power point 2007 tic 10
Microsoft power point 2007 tic 10
technoconcord
 
HTML5 în XXX de minute
HTML5 în XXX de minuteHTML5 în XXX de minute
HTML5 în XXX de minute
Sabin Buraga
 
Olga Gaidet, Copilul intra in Internet...
Olga Gaidet, Copilul intra in Internet...Olga Gaidet, Copilul intra in Internet...
Olga Gaidet, Copilul intra in Internet...
Alianta INFONET
 
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
Sabin Buraga
 
Lucrare de curs WEB
Lucrare de curs WEBLucrare de curs WEB
Lucrare de curs WEB
Danyk Skobiola
 
Facebook
FacebookFacebook
Facebook
Speranţa State
 

Viewers also liked (20)

Elemente de conţinut ale paginilor web
Elemente de conţinut ale paginilor webElemente de conţinut ale paginilor web
Elemente de conţinut ale paginilor web
 
Competente digitale
Competente digitaleCompetente digitale
Competente digitale
 
Elemente de grafic design
Elemente de grafic designElemente de grafic design
Elemente de grafic design
 
Design de interfete web
Design de interfete webDesign de interfete web
Design de interfete web
 
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...Semantic Web Semantic Web-based Agent Applications based Agent Applications –...
Semantic Web Semantic Web-based Agent Applications based Agent Applications –...
 
Sabin Buraga: Open Web Application Development, Mozilla, and You
Sabin Buraga: Open Web Application Development, Mozilla, and YouSabin Buraga: Open Web Application Development, Mozilla, and You
Sabin Buraga: Open Web Application Development, Mozilla, and You
 
Web - CGI
Web - CGIWeb - CGI
Web - CGI
 
Web - PHP
Web - PHPWeb - PHP
Web - PHP
 
Any Colour You Like
Any Colour You LikeAny Colour You Like
Any Colour You Like
 
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...
 
Soc Cap01
Soc Cap01Soc Cap01
Soc Cap01
 
Cursu PS - ASM Cluj
Cursu PS - ASM ClujCursu PS - ASM Cluj
Cursu PS - ASM Cluj
 
Cu codul în "nori"
Cu codul în "nori"Cu codul în "nori"
Cu codul în "nori"
 
Dezvoltator Web?! – ...în 2016
Dezvoltator Web?! – ...în 2016Dezvoltator Web?! – ...în 2016
Dezvoltator Web?! – ...în 2016
 
Microsoft power point 2007 tic 10
Microsoft power point 2007 tic 10Microsoft power point 2007 tic 10
Microsoft power point 2007 tic 10
 
HTML5 în XXX de minute
HTML5 în XXX de minuteHTML5 în XXX de minute
HTML5 în XXX de minute
 
Olga Gaidet, Copilul intra in Internet...
Olga Gaidet, Copilul intra in Internet...Olga Gaidet, Copilul intra in Internet...
Olga Gaidet, Copilul intra in Internet...
 
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)
 
Lucrare de curs WEB
Lucrare de curs WEBLucrare de curs WEB
Lucrare de curs WEB
 
Facebook
FacebookFacebook
Facebook
 

Similar to Structura unei pagini web

Mandache Sorin
Mandache SorinMandache Sorin
Mandache Sorin
sorinmandache
 
Proiect tic a_1b_dumitru_alina
Proiect tic a_1b_dumitru_alinaProiect tic a_1b_dumitru_alina
Proiect tic a_1b_dumitru_alinaAlina_Dumitru
 
Mandache sorin
Mandache sorinMandache sorin
Mandache sorin
sorinmandache
 
0html introducere
0html introducere0html introducere
0html introducereSima Sorin
 
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
 
Info an 2 introducere in html
Info an 2  introducere in htmlInfo an 2  introducere in html
Info an 2 introducere in html
AndreiEduard
 
Html
HtmlHtml
Html
ahaller
 
Informatica Pagini Web Html
Informatica   Pagini Web HtmlInformatica   Pagini Web Html
Informatica Pagini Web Htmlguest191ab8
 
Perechea_1 ro.pdf
Perechea_1 ro.pdfPerechea_1 ro.pdf
Perechea_1 ro.pdf
OxanaRabei1
 

Similar to Structura unei pagini web (12)

Lectia 1
Lectia 1Lectia 1
Lectia 1
 
Mandache Sorin
Mandache SorinMandache Sorin
Mandache Sorin
 
Proiect tic a_1b_dumitru_alina
Proiect tic a_1b_dumitru_alinaProiect tic a_1b_dumitru_alina
Proiect tic a_1b_dumitru_alina
 
Mandache sorin
Mandache sorinMandache sorin
Mandache sorin
 
Curs html
Curs htmlCurs html
Curs html
 
0html introducere
0html introducere0html introducere
0html introducere
 
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...
 
Info an 2 introducere in html
Info an 2  introducere in htmlInfo an 2  introducere in html
Info an 2 introducere in html
 
Html
HtmlHtml
Html
 
Informatica Pagini Web Html
Informatica   Pagini Web HtmlInformatica   Pagini Web Html
Informatica Pagini Web Html
 
Perechea_1 ro.pdf
Perechea_1 ro.pdfPerechea_1 ro.pdf
Perechea_1 ro.pdf
 
Tema2 pc2012 v2
Tema2 pc2012  v2Tema2 pc2012  v2
Tema2 pc2012 v2
 

Recently uploaded

Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia MonicaSă ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
NinaTofanErmurachi
 
Antarctica caracterizare fizico geografica
Antarctica caracterizare fizico geograficaAntarctica caracterizare fizico geografica
Antarctica caracterizare fizico geografica
Alina70851
 
Proces verbal sedinta cu parintii (26.09.2023).docx
Proces verbal sedinta cu parintii (26.09.2023).docxProces verbal sedinta cu parintii (26.09.2023).docx
Proces verbal sedinta cu parintii (26.09.2023).docx
AureliaTertereanu
 
Raport proiect transfrontalier Culori fermecate.pdf
Raport proiect transfrontalier Culori fermecate.pdfRaport proiect transfrontalier Culori fermecate.pdf
Raport proiect transfrontalier Culori fermecate.pdf
savinioana
 
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELAPatrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
iecheisorayagabriela
 
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptx
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptxPapa Francisco canoniza los martires de Rumanía (Rumanian).pptx
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptx
Martin M Flynn
 
Studiu Nike, Dascalu Ana-Georgiana, Crp.
Studiu Nike, Dascalu Ana-Georgiana, Crp.Studiu Nike, Dascalu Ana-Georgiana, Crp.
Studiu Nike, Dascalu Ana-Georgiana, Crp.
GeorgianaDascalu1
 
Analiza SWOT - fisa de lucru aplicabila pentru liceu
Analiza SWOT - fisa de lucru aplicabila pentru liceuAnaliza SWOT - fisa de lucru aplicabila pentru liceu
Analiza SWOT - fisa de lucru aplicabila pentru liceu
Andreea Balaci
 

Recently uploaded (8)

Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia MonicaSă ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
Să ne împrietenim cu lectura Ermurachi Nina/ Pruncia Monica
 
Antarctica caracterizare fizico geografica
Antarctica caracterizare fizico geograficaAntarctica caracterizare fizico geografica
Antarctica caracterizare fizico geografica
 
Proces verbal sedinta cu parintii (26.09.2023).docx
Proces verbal sedinta cu parintii (26.09.2023).docxProces verbal sedinta cu parintii (26.09.2023).docx
Proces verbal sedinta cu parintii (26.09.2023).docx
 
Raport proiect transfrontalier Culori fermecate.pdf
Raport proiect transfrontalier Culori fermecate.pdfRaport proiect transfrontalier Culori fermecate.pdf
Raport proiect transfrontalier Culori fermecate.pdf
 
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELAPatrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
 
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptx
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptxPapa Francisco canoniza los martires de Rumanía (Rumanian).pptx
Papa Francisco canoniza los martires de Rumanía (Rumanian).pptx
 
Studiu Nike, Dascalu Ana-Georgiana, Crp.
Studiu Nike, Dascalu Ana-Georgiana, Crp.Studiu Nike, Dascalu Ana-Georgiana, Crp.
Studiu Nike, Dascalu Ana-Georgiana, Crp.
 
Analiza SWOT - fisa de lucru aplicabila pentru liceu
Analiza SWOT - fisa de lucru aplicabila pentru liceuAnaliza SWOT - fisa de lucru aplicabila pentru liceu
Analiza SWOT - fisa de lucru aplicabila pentru liceu
 

Structura unei pagini web

  • 1.
  • 2.  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  Cu ajutorul limbajului HTML se pot construi pagini web nu foarte pretentioase insa reprezinta un inceput pentru realizarea site-urilor profesionale.
  • 3.  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. Aceste tag-uri (etichete) pot fi de doua feluri: taguri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>  taguri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>
  • 4.  <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 il putea afisa.  <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru browser-ul de internet </HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD> <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. </TITLE> - este tag-ul de incheiere al tag-ului <TITLE>. Arata sfarsitul titlului 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. </BODY> - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce vei scrie dupa acest tag nu va mai fi afisat. </HTML> - este tag-ul de incheiere al tag-ului <HTML>. Codul oricarui document se termina cu acest tag.
  • 5.  <HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> Bine ai venit!<BR> Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web! </BODY> </HTML>  Dupa ce am scris codul intr-un editor Notepad, salvam documentul cu extensia .html sau .htm
  • 6.  Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. De exemplu, atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fundalul viitoarei pagini web. Fundalul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem ca fondul paginii noastre sa fie portocaliu. In acest caz vom folosi pentru atributul BGCOLOR codul culorii orange: #FF9900  <BODY BGCOLOR=" #FF9900">  Pentru bleu, folosim  <BODY BGCOLOR="#00FFFF">
  • 7.  Culoarea textului in cadrul unei pagini html se poate schimba folosind atributul COLOR (culoare) al tag-ului <FONT>.  Mesajul "Bine ai venit!" sa spunem, de exemplu, ca am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicita si sa fie scris cu litere mai mari decat restul textului. Pentru a scrie astfel textul, vom folosi tag-ul FONT insotit de unele atribute astfel: <FONT COLOR="#0000FF" SIZE="6"> Bine ai venit! </FONT><BR>
  • 8.  Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag accepta mai multe atribute (color, face, size) care ne vor ajuta in formatarea textelor. Atributul COLOR se refera la culoarea textului ce va fi incadrat de tag-urile <FONT> si </FONT>, atributul FACE arata tipul fontului, iar atributul SIZE arata marimea fontului.
  • 9.
  • 10.  <FONT COLOR="#FF0000">Imi place aceasta lectie</FONT>  Exemplu 4  <FONT COLOR="#000000" FACE="Arial >Voi lucra mai mult in HTML</FONT>  Exemplu5  <FONT COLOR="#FFA500" FACE="Arial" SIZE="7">Stiu sa modific dimensiunea, culoarea si tipul fontului</FONT>
  • 11.  Stabilirea elementelor de stil se face cu ajutorul tag-urilor <I>…</I>, <B>…</B>, <U>…</U>, <S>…</S>, având ca efect înclinarea, îngroşarea, sublinierea şi tăierea textului cu o linie