1
Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia
Tehnologia informaţiilor şi comunicaţiilor
Crearea pag...
2
Cuprins
1. Introducere.....................................................................................................
3
1. Introducere
Disciplina „Tehnologia informaţiei şi a comunicaţiilor”, din cadrul ariei curriculare „Tehnologii”,
trebu...
4
2. Structura unui document HTML
Paginile HTML sunt formate din etichete sau tag-uri şi au extensia .html sau .htm. În ma...
5
3. Atribute
Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput...
6
Nume tag Nume
atribut
Valoare atribut Detalii
_top
<B> Text bold
<BODY> Cuprinsul documentului
background adresa imagini...
7
Nume tag Nume
atribut
Valoare atribut Detalii
marginheight numar de pixeli Spatiu deasupra si sub un cadru
marginwidth n...
8
Nume tag Nume
atribut
Valoare atribut Detalii
alt text Text ce va fi afisat in locul imaginii, in
cazul in care, aceasta...
9
Nume tag Nume
atribut
Valoare atribut Detalii
start numar Cu ce valoare incepe numerotarea
type A, a, I, i, 1 Tipul nume...
10
Nume tag Nume
atribut
Valoare atribut Detalii
<TD> Celula de tabel
align left
center
right
Alinierea continutului celul...
11
4. Recapitulare
1. Care sunt etichetele utilizate pentru inserarea titlului paginii:
 <body> </body>
 <title> </title...
12
5. Bibliografie:
Resurse didactice
1. Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora, 2000
2. Daniela Bej...
Upcoming SlideShare
Loading in …5
×

Proiect tic a_1b_dumitru_alina

414 views
341 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
414
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Proiect tic a_1b_dumitru_alina

  1. 1. 1 Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia Tehnologia informaţiilor şi comunicaţiilor Crearea paginilor web Prof. Dumitru Alina
  2. 2. 2 Cuprins 1. Introducere.......................................................................................................................................... 3 2. Structura unui document HTML ........................................................................................................... 4 3. Atribute ............................................................................................................................................... 5 4. Recapitulare....................................................................................................................................... 11 5. Bibliografie:........................................................................................................................................ 12
  3. 3. 3 1. Introducere Disciplina „Tehnologia informaţiei şi a comunicaţiilor”, din cadrul ariei curriculare „Tehnologii”, trebuie să asigure dobândirea unor cunoştinţe de utilizare a calculatorului si a programelor, de tehnologia informaţiei şi comunicării la nivel de cultură generală, necesare unor activităţi cu caracter aplicativ utile în mediul în care îşi vor desfăşura activitatea. Pornind de la faptul că nu există domeniu de activitate unde să nu se prelucreze şi să nu se transmită informaţii atât în cadrul domeniului respectiv cât şi spre exteriorul lui, afirmăm că azi informaţia este foarte preţioasă, ea trebuie stocată, prelucrată şi transmisă în condiţii care asigură corectitudine şi exactitate, deci la nivel profesional. Tehnologia informaţiei, prin specificul ei, este esenţial legată de lucrul individual pe un calculator, deci dezvoltă deprinderea de a lucra individual. Pe de altă parte, prin intermediul reţelelor de calculatoare este posibil schimbul de informaţii între mai mulţi utilizatori de calculatoare mult mai eficient decât prin orice altă metodă clasică. O pagină web este o resursă aflată în spațiul web (WWW) din Internet, de obicei în format HTML sau XHTML (extensia numelui fișierului fiind de cele mai multe ori .html sau .htm) și având hiperlinkuri (hiperlegături) pentru navigarea simplă (cu un singur clic de maus) de la o pagină sau secțiune de pagină la alta. Pagina web se numește astfel deoarece ea se poate afișa pe un monitor sau ecran de calculator și se aseamănă într-o oarecare măsură cu o pagină de ziar. O pagină web poate conține:  texte în cele mai diferite formate (forme, mărimi, culori, poziții etc.)  imagini (fișiere cu formatele .gif, .jpeg, .png ș.a.)  audio (fișiere în formatele .mid, .wav ș.a.)  conținut multimedial interactiv care, pentru a fi văzut și utilizat, necesită de obicei un plugin ca de ex. cu formatul Adobe Flash sau Adobe Shockwave  miniaplicații (așa-numite "applets") – subprograme care rulează la chemarea paginii și care deseori oferă filme, imagini, interacțiune și sunete. 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. La sfârşitul unităţii de învăţare elevii vor fi capabili să:  utilizeze editorul de texte Notepad pentru a crea o pagina web;  sa insereze si sa formateze un text in pagina;  sa insereze o imagine;  sa realizeze o legatura cu o alta pagina pe un text sau pe o imagine;  sa creeze o pagina web cu tema „Statele lumii ”
  4. 4. 4 2. Structura unui document HTML Paginile HTML sunt formate din etichete sau tag-uri şi au extensia .html sau .htm. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> şi alta de închidere </eticheta>. Mai există şi cazuri in care acestea nu se inchid. Atunci se foloseste <eticheta />, iar browserul interpreteaza aceste etichete afisand rezultatul pe ecran. Un document HTML se împarte în trei sectiuni:  <html> - Orice document html se incepe cu marcajul html. Acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului  <head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se afiseaza in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare ca titlul ferestrei browser-ului. Marcajul <head> > contine descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon), etc. Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format: <META NAME="nume" CONTENT="continut">  <body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in browser (text, imagini,etc.). Pentru a crea o pagina HTML simplă trebuie scris codul de mai jos într-un editor de texte (Notepad) şi apoi salvat într-un fişier cu extensia .html (index.html). Pentru a o afisa, fişierul creat trebuie deschis cu un browser web (Mozilla Firefox, Internet Explorer). <html> <head> <title> Titlul paginii </title> </head> <body> Buna ziua! </body> </html>
  5. 5. 5 3. Atribute Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Dacă un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. Atributele sunt ca o descriere pentru taguri, ele mereu au nume si o valoare. Un atribut se scrie sub forma: nume=”valoare” si se introduce in tag sub forma <tag nume=”valoare”></tag>. Printre acestea sunt tagurile de aliniere, de formatare a textului, a culorii diferitor elemente, pentru link-uri, etc. Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem ca fondul paginii noastre sa fie portocaliu. <html> <head> <title> Titlul paginii </title> </head> <body bgcolor=" #FF9900 "> Continutul paginii. <h1 align="center"> Buna ziua!</h1> </body> </html> Textul se poate introduce si fara taguri. Dar daca se doreste un text de o anumita forma atunci acesta se introduce intre tag-uri ca cele de mai jos. <font>… </font> - intre acestea se introduce textul care se doreste a fi afisat pe pagina (acest tag nu va schimba deloc forma textului). Acesta are trei atribute optionale: color, face si size. Astfel cu ajutorul lui se poate specifica culoarea textului, fontul si dimensiunea acestuia. <b>…</b> sau <strong>…</strong> - defineste text ingrosat <big>…</big> - defineste text mare <i>…</i> sau <em>…</em> - defineste text italic <u>...</u> - textul apare subliniat <s>...</s> - textul apare taiat Anteturile sunt folosite in general pentru evidentierea titlurilor (h - headings). In dependenta de numarul din dreptul numelui marcajului, variaza dimensiunea fontului. HTML adauga automat o linie goala in plus inainte si dupa un antet. <h1>…</h1> -defineste un antet de cea mai mare marime; <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> -defineste antetul de cea mai mica marime; Marcajul <p>...</p> specifica un paragraf. Marcajul <br> inseamna rand nou. Atunci cand se doreste ca o propozitie sa apara in rand nou, va trebui sa se includa acest marcaj(<br> e echivalentul lui "Enter" in Word, de exemplu.) El este nepereche, neavand nevoie de tag de inchidere. Cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor: Nume tag Nume atribut Valoare atribut Detalii <A> Ancora href URL Adresa catre care vrem sa fie legatura target _blank _self _parent Fereastra in care se va face afisarea
  6. 6. 6 Nume tag Nume atribut Valoare atribut Detalii _top <B> Text bold <BODY> Cuprinsul documentului background adresa imaginii Imaginea de fond bgcolor cod culoare nume culoare Culoarea fondului leftmargin procent din latimea paginii numar de pixeli Distanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a paginii topmargin procent din inaltimea paginii numar de pixeli Distanta dintre marginea de sus a ferestrei browserului si marginea de sus a paginii text cod culoare nume culoare Culoarea textului alink cod culoare nume culoare Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor) link cod culoare nume culoare Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele) vlink cod culoare nume culoare Culoarea legaturilor vizitate (s-a efectuat cel putin un click pe ele) <BR> Sfarsitul randului <CENTER> Afisarea in centrul paginii <FONT> Fontul textului color cod culoare nume culoare Culoarea fontului face nume font Tipul fontului size un numar de la 1 la 7 Marimea fontului <FORM> Formular interactiv action URL Adresa scriptului care prelucreaza datele din cadrul formularului method GET POST Metoda de prelucrare a datelor formularului <FRAME> Cadru (fereastra) frameborder 1 sau 0 Cadrul are sau nu are chenar
  7. 7. 7 Nume tag Nume atribut Valoare atribut Detalii marginheight numar de pixeli Spatiu deasupra si sub un cadru marginwidth numar de pixeli Spatiu la stanga si la dreapta unui cadru src URL Sursa cadrului <FRAMESET> Multime de ferestre cols procent din latimea paginii numar de pixeli numarul si marimea relativa a coloanelor rows procent din inaltimea paginii numar de pixeli numarul si marimea relativa a randurilor H1, H2, H3, H4, H5, H6 Titluri in cadrul documentului align left center right justify Alinierea titlului <HEAD> Antetul documentului <HR> Linie orizontala align left center right Alinierea orizontala a liniei color cod culoare nume culoare Culoarea liniei size numar de pixeli Inaltimea liniei width procent din latimea paginii numar de pixeli Latimea liniei <HTML> Document HTML <I> Text italic <IMG> Adaugarea unei imagini align left right top middle bottom Alinierea imaginii in pagina: left (stanga) sau right (dreapta) Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
  8. 8. 8 Nume tag Nume atribut Valoare atribut Detalii alt text Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata border numar de pixeli Marimea chenarului din jurul imaginii height procent numar de pixeli Inaltimea imaginii hspace numar de pixeli Spatiu pe orizontala in jurul imaginii src URL Adresa imaginii vspace numar de pixeli Spatiu pe verticala in jurul imaginii width procent numar de pixeli Latimea imaginii <INPUT> Element al formularului maxlength numar Numar maxim de caractere name date de tip caracter Numele elementului formularului size numar Marimea elementului formularului src URL Adresa pentru o imagine type text password checkbox radio submit reset file hidden image button Tip input value date de tip caracter Valoare input <LI> Element al unei liste <META> Metainformatii content text Descrie valoarea atributului name name author Autor description Descriere keywords Cuvinte cheie <OL> Lista ordonata
  9. 9. 9 Nume tag Nume atribut Valoare atribut Detalii start numar Cu ce valoare incepe numerotarea type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1 (implicit) <P> Paragraf align left center right justify Alinierea paragrafului <SELECT> Lista de selectii multiple Permite selectia mai multor elemente name date de tip caracter Numele listei de selectii size numar Numarul de elemente ale listei <STRONG> Text evidentiat <SUB> Text indice <SUP> Text exponent <TABLE> Tabel align left center right Alinierea tabelului background URL Imaginea de fond pentru tabel bgcolor cod culoare nume culoare Culoarea fondului pentru tabel border procent numar de pixeli Chenarul tabelului bordercolor cod culoare nume culoare Culoarea chenarului cellpadding numar de pixeli Spatiu intre continutul celulelor tabelului si marginile lor cellspacing numar de pixeli Spatiu intre celulele tabelului cols numar Numarul de coloane ale unui tabel hspace numar de pixeli Spatiu pe orizontala in jurul tabelului vspace numar de pixeli Spatiu pe verticala in jurul tabelului width procent numar de pixeli Latimea tabelului
  10. 10. 10 Nume tag Nume atribut Valoare atribut Detalii <TD> Celula de tabel align left center right Alinierea continutului celulei pe orizontala background URL Imaginea de fond pentru celula bgcolor cod culoare nume culoare Culoarea fondului pentru celula colspan numar Numarul de coloane pe care se intinde celula height numar de pixeli Inaltimea celulei rowspan numar Numarul de linii pe care se intinde celula valign top middle bottom Alinierea continutului celulei pe verticala width numar de pixeli Latimea celulei <TEXTAREA> Camp de editare multilinie cols numar Numarul de coloane name date de tip caracter Numele campului de editare multilinie rows numar Numarul de randuri <TITLE> Titlu document <TR> Rand tabel align left center right Alinierea continutului celulelor pe orizontala bgcolor cod culoare nume culoare Culoarea fondului pentru tot randul valign top middle bottom Alinierea continutului celulelor pe verticala <U> Text subliniat <UL> Lista neordonata type circle disc square Forma marcajului
  11. 11. 11 4. Recapitulare 1. Care sunt etichetele utilizate pentru inserarea titlului paginii:  <body> </body>  <title> </title>  <titlu> </titlu> 2. Pentru a trece la un rând nou se foloseşte eticheta:  <b>  <br>  <i> 3. Atributul utilizat pentru inserarea unei imagini in fundalul paginii este:  bgcolor  background  link 4. Completaţi în spaţiile libere etichetele şi atributele pentru a realiza o pagină cu următoarele caractesistici:  Titlul paginii: Statele lumii  Culoarea de fundal a paginii este roşu  Pe mijloc să se scrie România îngroşat şi subliniat <html> _____________ Statele lumii _____________ <body ___________> ________________ Romania ________________ </html> 5. Descoperiţi cele cinci greşeli strecurate în realizarea unei pagini cu următoarele caracteristici:  Titlul paginii: Acasa  Culoarea de fundal a paginii verde  Pe mijloc scris inclinat Romania  3 rânduri libere după titlu  Primul paragraf aliniat la dreapta <html> <titlu>Acasa </titlu> <body bgcolor=verde> <b>Romania</b> <p align=left> România este o țară situată în sud-estul Europei Centrale, pe cursul inferior al Dunării, la nord de peninsula Balcanică și la țărmul nord-vestic al Mării Negre. </html>
  12. 12. 12 5. Bibliografie: Resurse didactice 1. Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora, 2000 2. Daniela Bejan. Limbajul HTML. Bacău: Editura EduSoft, 2006 Resurse on-line si multimedia: 1. http://www.worklance.com/htmltutorial/ceestehtml 2. http://www.ecursuri.ro/cursuri/html-introducere.php 3. http://www.afaceri-online.net/proiectare-site-web/html 4. www.codlea.go.ro 5. www.info-codlea.ro 6. www.fil.unitbuc.ro 7. www.images.google.ro 8. www.3schools.ro 9. www.e-training.iatp.md

×