Cuprins - · PDF fileRealizați pagina toamna.html, ... mai multe informatii despre vreme ...

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:

<html>

<head>

……………..

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

………

</head>

<body>

…………………. corpul documentului- tot ceea ce apare aici se va afișa

</body>

</html>

De exemplu, codul html de mai jos va produce în browser următorul efect:

<html>

<head> <title> pagina 1</title>

</head>

<body>

Primavara

</body>

</html>

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:

<br> are ca efect coborârea cu un rând

<hr> 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

<body bgcolor="#00FF00" text="yellow"> <body background="bk1.jpg" text="yellow">

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

<CENTER> <B> Primavara </B> </CENTER>

Pentru culoare, dimensiune sau stilul fontului avem tagul:

<FONT COLOR=”GOLD” SIZE=”7” FACE=”VERDANA”> ………….</FONT>

Size poate lua valori între 1-7

Pentru scriere cursivă (italic) se folosește <I> …. </I>

Ce marcaj folosim pentru a sublinia un text?

Pentru titluri putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, care au și

perechi de închidere.

Alinierea textului:

<p align=right>

<p align=justify> …..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.

<img src=”nume fisier imagine” width=” …..” height=”…..”>

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)

<marquee width=”…” direction=” ….” loop=”…” behavior=”…”> ….text …</ marquee>

Slide, alternate

900, 500 , 60% left,right, up, down 1, 2, 3…. infinite

<marquee height=”30%” > <img src=”nume fisier imagine” > </marquee>

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.

<a href=”vara.html”> clic aici pentru …. </a> link de pe text

<a href=”nume fisier”> <img src=”nume fisier imagine”> </a> link de pe imagine

<a href="http://www.inmh.ro" > mai multe informatii despre vreme </a> link spre www

<a href="mailto: [email protected]" > sau alte impresii </a> 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.

<ol TYPE ="a">

<li>LUNI

<li>MARTI

<li>MIERCURI

<li>JOI

</OL>

Lista neordonată, are marcatori la începutul paragrafelor.

<ul type=”circle”>

<li>13.30-romana

<li> 14.30 informatica

<li>15.30 ed. fizica

<li>16.30 geografie

</ul>

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.

<html>

<frameset rows="100,*">

<frame src="p1.html" >

<frameset cols="30%,*">



</frameset>

</frameset>

</html>

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.

<html><head><title>harta viticola a Romaniei</head></title>

<body bgcolor="green" text="white">

<center><font size="4">HARTA VITICOLA A ROMÂNIEI</font>

Selectati zona care va intereseaza:<br>

<img src="hartarom.jpg" usemap="#harta"></center>

<map name="harta">

<area shape="circle" coords="..., ... ,50" href ="moldova.docx">

<area shape="rect" coords="... , ... , ... , ... " href ="muntenia.docx">

<area shape="circle" coords="... , ... ,50" href ="dobrogea.docx">

</map></body></html>

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.

Cuprins - · PDF fileRealizați pagina toamna.html, ... mai multe informatii despre vreme ...

Documents

Transcript of Cuprins - · PDF fileRealizați pagina toamna.html, ... mai multe informatii despre vreme ...