CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5
Proiect tic a_1b_dumitru_alina
1. 1
Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia
Tehnologia informaţiilor şi comunicaţiilor
Crearea paginilor web
Prof. Dumitru Alina
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
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
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
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
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
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
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
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
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
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
