Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Cuprins
Lecția 1-Introducere în HTML .............................................................................. 2
Lecția 2- Formatarea textului ................................................................................ 5
Lecția 3- Introducerea imaginilor .......................................................................... 6
Lecția 4- Introducerea hyperlinkurilor .................................................................. 7
Lecția 5- Utilizarea listelor .................................................................................... 8
Lecția 6- Introducerea tabelelor ............................................................................ 9
Lecția 7- Descrierea frameurilor ......................................................................... 10
Lecția 8- Maparea imaginilor .............................................................................. 12
LECȚIA 1-Introducere în HTML
Limbajul HTML (Hypertext Markup Language) este limbajul de descriere a paginilor web.
Aproape tot ceea ce putem obține într-un editor de texte cu ajutorul butoanelor sau comenzilor
din meniuri, se poate realiza și într-o pagină web, scriind de la tastatură anumite comenzi,
numite taguri, care produc efectul dorit.
Un document html se poate introduce cu ajutorul editorului Notepad și trebuie salvat cu
extensia html și nu txt cum pune implicit Notepad.
Structura unui document html este:
……………..
antetul documentului-conține informații care nu se vor afișa: titlul paginii-care
va apărea sus, în bara de titlu; cuvinte cheie care permit regăsirea paginii web
de către motoarele de căutare; informații despre autor
………
…………………. corpul documentului- tot ceea ce apare aici se va afișa
De exemplu, codul html de mai jos va produce în browser următorul efect:
pagina 1
Primavara
Se observă că tagurile sunt în pereche, pentru a indica de unde și până unde trebuie să
acționeze. Nu avem posibilitatea de a selecta un text și apoi să-i aplicăm o anumită formatare,
ca în editoarele de texte.
Există și taguri singulare:
are ca efect coborârea cu un rând
trasează o linie orizontală
Opțiuni ale tagului body:
bgcolor=” culoare” - culoarea de fundal a paginii (implicit este albă)
Text=” culoare ” - culoarea textului (implicit este negru)
background=”nume fișier imagine” –pagina va avea o imagine de fundal
In HTML culorile pot fi introduse în două moduri:
- prin denumirea lor în limba engleză (pentru un număr redus de culori)
- în format hexazecimal folosind două caractere (începând de la 00 la FF) pentru fiecare din
cele trei culori roșu (R), verde (G) și albastru (B) . Pentru culori, în format zecimal, valoarea
minimă este 0 (corespunzătoare valorii 00 în hexa) iar cea maximă 255 (corespunzătoare
valorii FF în hexa).
Exemplu:
Să presupunem că am ales o culoare folosind aplicația Paint din Windows care ne indică
R=111, G=52, B=200.
Folosind calculatorul științific din Windows
transformăm aceste valori din format zecimal și
obținem R=6F, G=34 si B=C8.
Formatul final recunoscut de HTML este
#6F34C8 (caracterul # conținut la început este
obligatoriu).
Codul RGB (Red Green Blue) este format din 6 cifre hexazecimale (0,
1,…A,B,C,D,E,F) , primele două indică cât roșu, următoarele două cât
verde și ultimele două cât albastru.
Alb are codul FFFFFF, negru are 000000, gri are 777777, mov are
FF00FF, șamd.
Cu ajutorul Paint putem afla componența RGB, cu Calculator putem
converti în hexazecimal.
Numele și codurile culorilor se pot găsi pe Internet făcând căutare după
RGB.
Format
zecimal
Format
hexazecimal
Format
HTML Rezultat
R=111 R=6F
#6F34C8
G=52 G=34
B=200 B=C8
Exercițiul 1:
Realizați o pagină cu titlul ex1, care va avea fundal verde închis, identic cu nuanța din
imaginea cu bule, descris cu ajutorul codului RGB. Introduceți textul a patru versuri dintr-o
poezie de primăvară, scis cu auriu. Trasați la sfârșit o linie.
Indicații:
copiați imaginea din lecție în Paint, notați în caiet valorile pentru Red, Green, Blue
cu accesoriul Calculator convertiți în hexa valorile; adăugați un 0 în față dacă e cazul,
pentru a avea câte 2 cifre pentru fiecare componentă (RRGGBB)
notați în caiet codul obținut din alipirea celor 3 valori de câte 2 cifre
deschideți Notepad
scieți codul html necesar pentru descrierea paginii, folosind exemplele din lecție
salvați documentul din Notepad cu Salvare ca…
vizualizați pagina în browser, dând dublu clic pe numele ei
modificați pagina cu clic dreapta Deschidere cu… Notepad
LECȚIA 2- Formatarea textului
Dacă dorim ca anumite porțiuni din textul afișat să apară cu altă formatare încadrăm textul
respectiv cu perechi de taguri care determină afișarea lui în modul dorit.
Exemplu: Dorim centrarea și îngroșarea cuvântului Primavara
Primavara
Pentru culoare, dimensiune sau stilul fontului avem tagul:
………….
Size poate lua valori între 1-7
Pentru scriere cursivă (italic) se folosește ….
Ce marcaj folosim pentru a sublinia un text?
Pentru titluri putem apela la tag-urile , , , , , , care au și
perechi de închidere.
Alinierea textului:
…..samd
Exercițiul 2:
Realizați o pagină , care va avea o imgine de fundal specifică verii.
Afișați cuvântul Vara, centrat, îngroșat, dimensiune maximă.
Introduceți textul a 4 versuri dintr-o poezie de vară, scis înclinat, cu font și culoare diferită.
Adăugați distanță între rânduri, aliniere paragraf, astfel încât textul să fie vizibil.
Lecția 3- Introducerea imaginilor
Tipurile de imagini care sunt suportate în pagina web sunt jpg, gif, png, bmp.
Dacă imaginile de tip gif au animație, aceasta va fi redată în browser.
Fișierul de imagine trebuie salvat în aceșași folder cu fișierul html.
Tagul marquee- permite derularea unui text sau imagini pe direcție orizontală sau verticală,
cu diverse opțiuni (lungime, lățime, repetiție)
….text …
Slide, alternate
900, 500 , 60% left,right, up, down 1, 2, 3…. infinite
Exercițiul 3:
Realizați pagina toamna.html, având în centru o imagine de dimensiune 300 x 400 iar sub ea,
4 versuri care se deplasează de jos în sus de 3 ori.
Exercițiul 4:
Realizați pagina iarna.html, având ca fundal ninsoare animată, în centru 2 imagini de
dimensiuni mici care conțin animații de Crăciun, cu 10 rânduri mai jost textul **** care se
deplasează alternativ, pe orizontală.
Lecția 4- Introducerea hyperlinkurilor
Hyperlinkurile permit înlănțuirea paginilor web. Pot pleca de pe text sau de pe imagine. Ne
pot trimite la altă pagină web, la adrese de internet, la adrese mail, sau la fișiere oareare din
calculator.
clic aici pentru …. link de pe text
link de pe imagine
mai multe informatii despre vreme link spre www
sau alte impresii link spre mail
Exercițiul 5:
Creați o pagină principală care să conțină linkuri spre cele 4 fișiere create în lecțiile
precedente, un link spre o pagină meteo, un link spre o adresă de mail (va pleca de pe o
imagine sugestivă), un link spre o imagine creată de voi în Paint.
Lecția 5- Utilizarea listelor
Listele sunt enumerări de idei care au la început un simbol , o cifră sau literă.
Lista ordonată, are litere sau cifre la începutul paragrafelor.
LUNI
MARTI
MIERCURI
JOI
Lista neordonată, are marcatori la începutul paragrafelor.
13.30-romana
14.30 informatica
15.30 ed. fizica
16.30 geografie
Putem avea și liste îmbricate:
Exercițiul 6:
Introduceți orarul vostru într-o pagină html, urmând modelul de mai sus.
Lecția 6- Introducerea tabelelor
Spre deosebire de automatismul cu care se pot introduce și modifica tabelele Word, în html
trebuie descrisă fiecare căsuță în parte:
Exercițiul 7:
Introduceți tabelul cu căsuțe unite pe coloana 2, folosind o imagine de fundal în loc de
culoarea roșie.
Introduceți orarul vostru într-o pagină html, sub formă de tabel, înlocuind unele
marterii cu imagini sugestive.
Lecția 7- Descrierea frameurilor
Frameurile sau cadrele sunt zone de ecran în care se încarcă pagini html diferite.
Dimensiunile fiecărei zone se exprimă în pixeli sau în procent( %) din dimensiunile ecranului.
Paginile html care descriu frame-uri nu au tagul body.
Ecranul de mai sus se descrie
considerând că avem un set de
2 rânduri, unul de 200 pixeli
lățime și celălalt de cât rămâne
din lățimea totală (semnul *).
Primul rând este un set de 2
coloane, egale (50%, *). În
prima coloană de pe primul
rând se va încărca pagina
p1.html, în a doua se va
încărca pagina alb.html. Zona
2 are numele p2. Acesta va fi
folosit mai departe când
încărcăm altceva în această zonă.
Inițial zona 2,
3, 4, 5 încarcă
aceeași pagină,
alb.html. Codul
care determină
ca în fiecare
zonă să se
încarce ulterior
alte pagini este
scris în p1.html :
Exercițiul 8:
1.Introduceți în Notepad următorul cod html, pentru a obține un ecran împărțit în 3 cadre.
Înlocuiți p1, p2, p3 cu numele unor pagini html create de voi.
Exercițiul 9
Creați următoarea structură:
Lecția 8- Maparea imaginilor
Maparea unei imagini permite ca zone diferite ale aceleiași imagini să funcționeze cu linkuri
spre pagini diferite. Zonele pot avea formă de cerc, dreptunghi sau poligon.
Exercițiul 10: Miniproiect - Utilizarea hărților de imagini în HTML
PAS 1: Se creează un folder pentru această lucrare, cu numele maparea.
PAS 2: Se descarcă o imagine cu harta Romaniei (dimensiune aprox=700x500) și se
deschide cu Paint
Se prelucrează puțin imaginea (se uniformizează culorile, se înlătură textul și fundalul din
exteriorul conturului. Se poate folosi harta viticolă.
Se notează în caiet coordonatele următoarelor puncte (perechea de valori din bara de stare
de la Paint) :
centrul Moldovei centrul Dobrogei colțurile opuse ale unui dreptunghi care acoperă Muntenia
Se salvează imaginea în folderul creat anterior, cu numele hartarom și tipul jpg
PAS 3: Cu Notepad se editează un fișier html care va folosi harta creată în Paint.
harta viticola a Romaniei
HARTA VITICOLA A ROMÂNIEI
Selectati zona care va intereseaza:
164,124
50
400,150
320,90
în spațiile punctate
se completează
valorile din caiet
(50 reprezintă raza
cercului)
Se salvează cu numele harta.html, în acelașii loc cu fișierul hartarom.jpg
PAS 4 : Se creează câte un fișier Word pentru fiecare zonă (Moldova, Muntenia, Dobrogea)
vezi modelul de mai jos. Se salveaza cu numele Moldova, Muntenia respectiv Dobrogea in
acelasi loc cu celelalte fisiere de la Pas2, Pas3.
Aceste 3 fișiere sunt necesare pentru a putea proba cele 3 linkuri descrise pe hartă.
La Cotnari, mostenirea este fara seaman. Prin mestesugul
vinului, vechi de peste doua mii de ani, traditia, arta si
voia buna stralucesc, din nou, laolalta. Transmitem
patrimoniul pastrat de secole: o reala mostenire a
indeletnicirii vinului, a locuitorilor de pe aceste
meleaguri, a traditiilor si a evolutiei, probabil cel mai bine
pastrate din Romania din domeniul vini-viticol.
PAS 5 : Se dă clic pe fișierul harta.html și se probează
linkurile obținute.