Scribd
Încărcați
343 vizualizări23 pagini

Auxiliar 4 Limbajull HTML

Documentul prezintă informații despre limbajul HTML și cum se creează o pagină web folosind tag-uri HTML. Sunt prezentate elementele de bază ale unei pagini HTML, cum ar fi tag-urile <html>, <head>, <title> și <body>. De asemenea, sunt oferite exemple practice de cod HTML.

Încărcat de

Radu Octav
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
343 vizualizări23 pagini

Auxiliar 4 Limbajull HTML

Documentul prezintă informații despre limbajul HTML și cum se creează o pagină web folosind tag-uri HTML. Sunt prezentate elementele de bază ale unei pagini HTML, cum ar fi tag-urile <html>, <head>, <title> și <body>. De asemenea, sunt oferite exemple practice de cod HTML.

Încărcat de

Radu Octav
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd

Informaţie şi comunicare. Limbajul HTML prof.

Ilioasa Adriana

INTRODUCERE

Acestă lucrare îşi propune să vină în sprijinul elevilor și


profesorilor pentru pregătirea probei de Competenţe digitale din
cadrul examenului de Bacalaureat, domeniul de competență
Informație și comunicare. Limbajul HTML.
Anul şcolar 2009-2010 a fost primul an în care a fost introdusă
proba de Competențe digitale în cadrul examenului de Bacalaureat
pentru toţi elevii, indiferent de profil.
Lucrarea creează cadrul necesar învăţării şi s-a dezvoltat
treptat pentru a suplini lipsa manualelor corelate cu programele
şcolare în vigoare şi actualizate la softurile existente în laboratoarele
de informatică.
Lucrarea este utilă și în activităţile didactice, astfel este un
instrument de lucru care se adresează atât elevilor, indiferent de
profil și clasă cât şi profesorilor.

Adriana ILIOASA
Profesor Tehnologia Informației și a comunicațiilor
Colegiul Tehnic ‘’Anghel Saligny’’ Baia Mare

2
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Programa de examen pentru evaluarea competenţelor digitale Bacalaureat 2014


Anexa nr. 2 la OMEN nr. 4923/ [Link].2013

Competenţe de evaluat

• Utilizarea operaţiilor de bază necesare realizării unei pagini HTML


• Inserarea în pagina web a elementelor: text, imagine, tabel, hiper-legătură etc.
• Aplicarea operaţiilor de bază necesare pentru realizarea unei pagini web – copiere,
mutare, stergere, formatare
• Transformarea documentelor multimedia în pagini web

Conţinuturi

Opţiuni de editare a paginilor web cu HTML:


inserarea si formatarea de text (font,dimensiune, stil, culoare etc.),
imagini (poziţionare, dimensiuni, încadrare în text),
fundal, legături, mapare), tabele etc.

3
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 1 Elementele standard ale unui document HTML

HTML (HyperText Markup Language = Limbaj de Marcare a HyperTextului), reprezintă un ansamblu de


marcaje (tag-uri) cu semnificaţie precisă, prin a căror folosire se obţine un hypertext.

HTML este un limbaj destinat descrierii statice a paginilor web. Putem asemăna procesul de creare a unui
hypertext, a unei pagini web, cu operaţiile de formatare făcute asupra unui document obişnuit, creat cu un editor
de text evoluat; tag-urile au rolul pe care-l au butoanele sau punctele de meniu din editorul de texte.

Un tag HTML are forma generală: <TAG>...</TAG>

Un document HTML este un fişier text care, pe lângă textul propriu-zis ce va apărea în pagină, conţine şi o
serie de elemente speciale, denumite etichete, sau marcaje (tags, în limba engleză).
Un document HTML contine taguri (marcaje).

a) taguri de tip pereche exemplu: <html>…</html>

b) taguri singulare exemplu: <br>

Pas 1: se deschide NotePad: Start/All Programs/Accesories/Notepad şi se bifează opţiunea


Format/WordWrap

Pas2: începutul unui document HTML


<HTML>
</HTML>
Fiecare dintre acestea sunt numite tag-uri. Există un tag pentru început şi un tag pentru final (încheiere).
Pentru a face un tag final, doar adaugă / la tagul de început. Majoritatea, dar nu toate tagurile au un tag final.
Ceea ce tocmai i-aţi spus pana acum browserului: acesta este începutul unui document HTML (<HTML>) şi acesta
este sfârşitul unui document HTML (</HTML).
Acum trebuie să punem ceva între tag-urile de început şi de sfărşit.

Pas 3: zona de antet: perechea de tag-uri de tip : HEAD (reprezintă antetul paginii web)
<HTML>
<HEAD>
</HEAD>
</HTML>

Pas 4: titlul paginii: perechea de tag-uri de tip TITLE ( reprezintă titlul care va apărea pe bara de titlu a
ferestrei Internet Explorer).
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

4
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Pas 5: corpul paginii perechea de tag-uri de tip BODY (conţinutul paginii web)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Exerciţiul 1:
<HTML>
<HEAD>
<TITLE>Exerciţiu pagina Web!</TITLE>
</HEAD>
<BODY>
Prima mea pagina web
</BODY>
</HTML>

Pas 6: Salvarea ca fişier HTML:


- File/Save As, alegeţi directorul în care salvaţi (directorul cu numele elevului) Câmpul Save in
- În câmpul File name scrieţi numele documentului (exercitiul [Link]) cu extensia .html sau .htm iar
în câmpul Save as type alegeţi All files(*.*)
Pas 7: deschiderea fisierului html: dublu click pe el pentru a-l deschide sau deschide un browser de web,
apoi click File / Open / Browse, selectează fişierul exerciţ[Link]

Pas 8: modificarea paginii web: Clic dreapta în pagina web, View Source
După fiecare modificare pe care o vei face, nu uita să salvezi, pentru că altfel nu vei observa schimbările. Dupa ce
ai salvat, intră în browserul de web şi click Refresh.

Exerciţiul 2
Schimbaţi titlul paginii cu [Link] şi textul din body enumerând paşii necesari creării unei pagini web

OBSERVAŢII
1) Ceea ce ai realizat se numeşte scheletul unui document HTML; orice document HTML are nevoie de aceste
tag-uri de bază.
2) Ceea ce ai scris între tag-urile <TITLE>...</TITLE> va apărea în bara de titlu a ferestrei browserului.

5
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 2 Aplicaţii practice

Aplicaţie practică 1
1. Introduceţi codul sursă din cele două exemple şi observaţi paginile web rezultate.
Ce observaţi? Care este diferenţa între cele două exemple?

EXEMPLUL 1
<html>
<head>
<title> Colegiul Tehnic “Anghel Saligny” Baia Mare </title>
</head>
<body>
Istoric
Stiri
Profesori
Elevi
Proiecte
Forum
</body>
</html>

EXEMPLUL 2
<html>
<head>
<title> Colegiul Tehnic “Anghel Saligny” Baia Mare </title>
</head>
<body>
Istoric<br>
Stiri<br>
Profesori<br>
Elevi<br>
Proiecte<br>
Forum
</body>
</html>

Aplicație practică 2
Răspundeţi în caietele de notiţe la următoarele întrebări:
1. Ce este limbajul HTML?
2. Ce sunt tag-urile?
3. Care este perechea de tag-uri pentru:
a) document HTML
b) antet
c) titlu
d) conţinutul paginii?
4. Care este modalitatea de salvare a unui document HTML?
5. Cum modificaţi un document html existent?

6
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 3 Utilizarea culorilor în HTML


Culorile într-un document HTML sunt definite cu ajutorul codului RGB care exprimă în sistem
hexazecimal cantitatea de roşu, verde şi albastru prezentă în fiecare culoare.

atributele etichetei <BODY> sunt:


bgcolor - culoarea fundalului
text - culoarea textului
link - culoarea linkurilor
vlink - culoarea linkurilor vizitate
alink - culoarea linkului activ

Pentru a stabili culorile într-o pagină Web se folosesc atributele etichetei <BODY> după următoarea sintaxă:

<BODY bgcolor="#RGB sau nume_culoare" text="#RGB sau nume_culoare" link="#RGB sau nume_culoare"
alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">corpul documentului</BODY>

Alegerea culorilor pentru o pagină Web trebuie să fie în strânsă legătură cu mesajul transmis de aceasta şi să
permită citirea cu uşurinţă a informaţiilor prezentate. Pentru a evita afişarea defectuoasă a culorilor din pagină
este recomandată folosirea culorilor "sigure".

1. Culoarea fundalului

Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei
<BODY>, căruia îi atribuim o valoare astfel:
<BODY bgcolor="#RGB sau nume_culoare">
Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iată un
exemplu de pagină cu fundal verde:
Exemplul 3. 1
<HTML>
<HEAD>
<TITLE>culori1</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
<H1 align="center">Pagina cu fundal verde</H1><HR>
</BODY>
</HTML>

Vizualizaţi aspectul paginii folosind Internet Explorer.

2. Culoarea textului

Pentru a seta culoarea textului din întreaga pagină se foloseşte atributul text al etichetei <BODY>, conform
sintaxei:
<BODY text="#RGB sau nume_culoare">

7
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Dacă am stabilit o culoare pentru textul din pagină şi dorim să utilizăm o altă culoare pentru o anumită
secţiune a textului (culoarea unui bloc de text), vom folosi eticheta <FONT>. Aceasta este o etichetă container
care cuprinde între etichetele de început şi de final textul a cărui culoare dorim să o modificăm. Stabilirea
culorii se face folosind atributul color al etichetei conform sintaxei:
<FONT color="#RGB sau nume_culoare">Text</FONT>

Exemplul 3. 2
<HTML>
<HEAD>
<TITLE>culori2</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#0000FF">
<H1 align="center">Text albastru si rosu</H1>
<HR>
Textul din aceasta pagina este albastru cu mici
<FONT color="#FF0000"> exceptii</FONT>
</BODY>
</HTML>

Vizualizaţi aspectul paginii folosind Internet Explorer.

3. Culoarea legăturilor

În general legăturile (links) dintr-o pagină Web au culori prestabilite (default), astfel:
 blue (albastru) - pentru legături
 red (roşu) - pentru legătura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stâng apăsat)
 purple (violet) - pentru legăturile vizitate, cele pe care s-a efectuat cel puţin un click

Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei <BODY>:
link pentru legături
alink pentru legăturile active
vlink pentru legăturile vizitate

conform sintaxei:
<BODY link="#RGB sau nume_culoare"
alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">

Documentul din Exemplul 3.3 creează o pagină în care textul este negru iar legăturile au culoarea verde,
legăturile active culoarea albastru şi cele vizitate, culoarea roşu. În exemplu este folosită eticheta <A> şi
atributul sau href, care vor fi prezentate pe larg în capitolul despre legături. În acest moment singurul lucru
care ne interesează este cum putem stabili culorile acestora.
Exemplul 3. 3
<HTML>
<HEAD>
<TITLE>culori3</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" alink="#0000FF" vlink="#FF0000">
<H1 align="center">Legaturi colorate</H1>
8
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

<HR>
<A href="[Link]">Legatura catre primul exemplu</A>
</BODY>
</HTML>
Vizualizaţi aspectul paginii folosind Internet Explorer.

4. Alegerea culorilor

Sunt multe elemente care trebuie luate în considerare la alegerea culorilor pentru o pagină Web.
Primul şi cel mai important este acela de a face conţinutul uşor de citit. Aceasta înseamnă...aţi ghicit! Litere
negre pe fond alb.
Deşi în vestimentaţie combinaţia de roşu cu bleumarin este rafinată, într-o pagină Web literele roşii pe
fond albastru nu arată bine şi sunt greu de citit. O altă combinaţie nefericită este cea cu fondul negru sau de
culoare foarte închisă şi textul de culoare albă.
Să nu uităm nici faptul că toate monitoarele dispun de reglaje ale strălucirii luminoase şi ale
contrastului pe care utilizatorii le setează diferit, în funcţie de preferinţele personale, de toleranţa ochiului, de
iluminarea camerei, etc.
Pe un monitor cu reglaje medii ale contrastului şi strălucirii, un text de culoare roşie dispus pe un fundal negru
va fi ilizibil, chiar dacă la valori maxime ale acestor caracteristici combinaţia poate genera efecte interesante.
În alegerea culorilor pentru un site este bine să ţineţi seama de câteva elemente de psihologia culorilor, pentru
a sublinia astfel mesajul pe care vreţi să îl transmiteţi.

Iată câteva dintre sentimentele pe care le sugerează culorile:


 Roşu - agresivitate, pasiune, putere, vitalitate
 Roz - feminitate, inocenţă, moliciune
 Portocaliu - amuzament, veselie, căldură, exuberanţă
 Galben - sentimente pozitive şi cordialitate
 Verde - linişte, sănătate, prospeţime
 Albastru - autoritate, demnitate, securitate, încredere
 Violet - sofisticare, spiritualitate, mister
 Maro - utilitate, legătura cu pământul, bogăţie
 Alb - puritate, încredere, modernitate, rafinament
 Gri - sobrietate, autoritate, simţ practic
 Negru - seriozitate, distincţie, hotărâre

Alegerea culorilor pentru site trebuie să fie în concordanţă cu tema site-ului şi să sublinieze mesajul
său. Astfel, dacă doriţi să construiţi un site destinat copiilor veţi folosi culori vesele şi luminoase, în vreme ce
pentru un site destinat prezentării unei firme de consultanţă financiară sunt potrivite culori sobre şi care
sugerează seriozitate şi încredere.
Alegerea culorilor pentru legături este, de asemenea, importantă. Legăturile au, în mod prestabilit,
anumite culori. Schimbarea acestora, deşi posibilă, îl poate induce în eroare pe vizitator. Ca şi în cazul textului,
alegeţi pentru legături, legăturile vizitate şi legătura activă culori care să vină în contrast cu culoarea sau
imaginea de fundal a paginii. Rămâneţi consecvent culorilor alese pentru legături, pe parcursul întregului site.

Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare
culoare care sunt cantităţile de roşu (Red), verde (Green) şi albastru (Blue) care o compun.

9
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

În HTML orice culoare este desemnată printr-un cod de 6 cifre hexazecimale, dintre care primele două
reprezintă cantitatea de roşu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de
albastru.

Sistemul hexazecimal este un sistem de numeraţie care foloseşte 16 cifre, existând următoarea
corespondenţă între cifrele hexazecimale şi cele zecimale:

Sistem zecimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Sistem hexazecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

10
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecția 3 HTML Utilizarea culorilor


Aplicaţii practice

1. Introduceţi codul sursă de mai jos pentru a observa pagina web rezultată.

<html>

<head>
<title> Colegiul Tehnic “Anghel Saligny” Baia Mare
</title>
</head>

<body>
<body bgcolor=”silver” text=”blue”>
Istoric<br>
<font style=”times roman” size=3 color=”#ff0000”>
Stiri<br>
<font size=3 color="green">
Profesori<br>
<font size=5>
Elevi<br>
Proiecte<br>
Forum <br>
<font color="red">
SUCCES MAI DEPARTE!
</body>

</html>

2. Deschideţi Notepad (Start/Allprograms/Accessories/Notepad). Scrieţi codul sursă pentru o pagina web


care să conţină:
titlul paginii: Prima pagina web
conţinut: culoarea de fundal: albastru
Numele si prenumele vostru (culoare negru, marimea 5)
Data nasterii (culoare rosie, marimea 4)
Zodia (culoarea verde,marimea 3)
Hobby-uri (culoarea galben, marimea 2)

Datele să fie scrise fiecare pe rând nou;


Salvaţi fişierul pe Desktop cu numele [Link] , alegeţi la optiunea Save as type All Files;
Deschideţi fişierul [Link]. Ce observaţi?

11
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 4 Formatarea textului

1. Textul afişat este caracterizat de următoarele atribute:


a) mãrime (size)
b) culoare (color)
c) font (style)

Eticheta singularã <basefont> se defineşte astfel:


<basefont size=numãr color=culoare style=font>

Unde:
- numãr poate fi 1, 2, 3, 4, 5, 6, 7 (1 fontul cel mai mic, 7 fontul cel mai mare)
- culoare este o culoare precizatã prin nume sau construcţia RGB
- font poate fi un font generic ca “serif”, “cursive” sau un font instalat pe calculator ca «Times Roman»,
«Arial».

2. Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se face cu ajutorul a două
atribute ale etichetei <body>:
Leftmargin – distanţa dintre marginea din stanga a conţinutului paginii
Topmargin – distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a conţinutului paginii

Aplicaţie practică 1
Scrieţi codul sursă în Notepad, salvaţi fişierul cu numele [Link], pe Desktop şi vizualizaţi pagina
obţinută.

<html>

<head>
<title>exemplu</title>
</head>

<body>
<body bgcolor="silver" text="blue">
Pagina are fondul de culoare gri şi textul de culoare albastra<br>
<font style="TimesRoman" size=3 color="#ff0000">Textul este scris cu fontul "Times Roman", marimea 3,
culoarea rosie<br>
<font size=3 color="green">Textul este scris cu fontul implicit, marimea 3, culoarea verde<br>
<font size=5>Textul este scris cu fontul implicit, marimea 5, culoarea implicita<br>
Succes mai departe !
</body>

</html>

12
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

3. Formatarea paragrafelor:

1. <i> textul este scris cursiv </i>


2. <u> textul este scris subliniat </u>
3. <b> textul este scris ingrosat </b>

4. Delimitarea paragrafelor
- se realizeaza cu ajutorul etichetei <p>, eticheta de sfarsit </p> fiind optionala.
<p align=valori>…</p>
unde „valori” este definit astfel:
left – textul este aliniat la marginea din stanga
right – textul este aliniat la marginea din dreapta
center – textul este centrat
justify – textul este aliniat si la dreapta si la stanga

Exemplu:
Pt alinierea paragrafului la stanga:
<p align=left>…</p>

5. Gruparea paragrafelor
Pentru a stabili acelasi mod de aliniere pentru mai multe paragrafe, trebuie sa le grupam intr-un singur bloc, cu
ajutorul etichetei <div>

<div align="right">
<p>.....primul paragraf...
<p>....al doilea paragraf...
<p>... al treilea paragraf...
</div>

Aplicaţie practică 2
Editaț fişierul cu numele [Link], salvați şi vizualizaţi pagina obţinută.

<html>

<head>
<title>exemplu</title>
</head>

<body>
<body bgcolor="silver" text="blue">
Pagina are fondul de culoare gri şi textul de culoare albastra<br>
<font style="TimesRoman" size=3 color="#ff0000">Textul este scris cu fontul "Times Roman", marimea 3,
culoarea rosie<br>
<font size=3 color="green">Textul este scris cu fontul implicit, marimea 3, culoarea verde<br>
<font size=5>Textul este scris cu fontul implicit, marimea 5, culoarea implicita<br>
Succes mai departe !
</body>

</html>

13
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Aplicaţie practică 3
Realizaţi o pagină web care să conţină 5 elevi din clasa voastră. Pagina trebuie să aibă următorul aspect:

Titlul paginii: Catalog

Clasa 12 …(dimensiune 4, culoare rosie, centrat)


Diriginte: prof…. (dimensiune 3, verde, aliniat la dreapta)
Nume Prenume 1 (albastru, dimensiune 2, aliniament la stanga)
Nume Prenume 2
Nume Prenume 3
Nume Prenume 4
Nume Prenume 5

Culoare de fundal: gri


Numele fisierului: nume_elev.html
Salvaţi pe Desktop

Aplicaţie practică 4
Completaţi spaţiile libere în caietele de notiţe:

1. Precizarea culorilorîntr-o pagină web se realizează:


a) prin nume de culoare..................
b) prin construcţia RGB ” #rrggbb”………………..

2. Atributele textului :
a) mărime
b) culoare
c) font

eticheta singulară basefont este definită astfel :


<basefont size= numar color=culoare style=font>
unde:
numar reprezintă.................
culoare reprezintă.................
font reprezintă......................

3. Poziţionarea conţinutului paginii web


Leftmargin aliniază ................
Topmargin aliniază..................

14
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lectia 5 Inserarea listelor în documente HTML

1. Liste neordonate (unordered list) sunt încadrate de etichetele <ul> si </ul>. Fiecare intrare în listă este
precedată de eticheta <li>

Exemplul 1
<ul>
<li>nivel1
<li>nivel2
<li>nivel3
</ul>
sau
<ul>
<li>nivel1 (implicit disc)
<ul>
<li>nivel2 (implicit circle)
<ul>
<li>nivel3 (implicit square)
</ul>
<li>nivel2
</ul>
<li>nivel1
</ul>

2. Liste ordonate (ordered list) se realizează încadrând intrările din listă între etichetele pereche <ol> si </ol>

Exemplul 2
elevii clasei a XI-B
<ol>
<li> Abel Andreea
<li> Aman Alexandru
<li> ....
</ol>

3. Crearea unei liste de definiţii se realizează cu ajutorul etichetelor pereche <dl> si </dl> între care vor fi
încadrate intrările în listă. În acest caz, o intrare în listă este constituită din două părţi:
Un termen <dt> definition term
O definiţie <dd> definition description

Exemplul 3
<dl>
<dt>liste ordonate
<dd>elementele listei trebuie parcurse în
ordinea numerotãrii
<p>
<dt>liste neordonate

15
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

<dd>elementele listei nu trebuie parcurse în ordine


<p>
<dt>liste de definiţii
<dd>elementele listei au douã pãrţi: un termen şi descrierea sa
</dl>

Aplicaţie practică 1
Realizaţi un document HTML care să conţină o listă cu 5 elevi ai clasei voastre (ca în exemplul 2)

Aplicaţie practică 2
Realizaţi un document HTML care să conţină o lecţie de informatică cu titlul INTERNETUL şi în care să se
găsească definiţiile următoarelor noţiuni:
HTML
pagina Web
machetare pagină web

16
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lectia 6 Inserarea tabelelor

Inserarea unui tabel se realizează cu ajutorul elementului table.


Elementul table admite atributele:

summary = text (specifică o descriere a rolului şi structurii tabelului)


align = left/center/right (specifică modul de aliniere a tabelului în document)
width = valoare (specifică lăţimea întregului tabel)
height = valoare (specifică înălţimea tabelului)
border = valoare (specifică grosimea liniei chenarului din jurul tabelului)
cellspacing=valoare (specifică spaţiul dintre celule şi spaţiul dintre celule şi marginile tabelului)
cellpading = valoare (specifică spaţiul dintre chenarul celulei şi conţinutul ei)

Specificarea unei linii din tabel se face folosind eticheta <tr>


Specificarea celulelor care constituie antetul tabelului se realizează prin intermediul etichetei <th>
Pentru celulele care vor conţine informaţiile din tabel se utilizează eticheta <td>.

Exemplu:

<table width="200px" border="1" cellspacing="0" cellpadding="0">


<tr>
<td>luni</td>
<td>marti</td>
</tr>
<tr>
<td>fizica</td>
<td>logica</td>
</tr>
</table>

Aplicaţie practică:

Creaţi o pagină web care să conţină un tabel cu orarul clasei voastre.

17
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

APLICAŢIE PRACTICĂ HTML


Realizaţi o pagină web cu următorul conţinut:
1. Titlul paginii web: CONCURS
2. Culoare fundal: gri
3. Conţinut: CONCURS FOTOGRAFIE DIGITALĂ (roşu, centrat)
4. Listă neordonată: (text albastru)
PREMIUL I 1 1 cameră video
PREMIUL II 1 aparat foto
PREMIUL III 1 stick memorie
5. Tabel (text albastru)

Nr. crt Nume si prenume Clasa Şcoala


1.
2.
3.

Barem de corectare:

titlul paginii - 1 punct


culoare fundal – 1 punct

conținutul paginii:
titlul zonei de conținut – 1 punct (culoare roșie, centrat)
listă neordonată – 1 punct
tabel – 2 puncte
salvare ca pagină web – 1 punct

3 puncte din oficiu

18
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 7 Inserarea imaginilor în paginile web

<IMG> (Image)-marcajul pentru inserarea imaginilor în pagina web


Sintaxa:
<IMG SRC=”[Link]”>
- Extensii suportate: .jpg, .gif, .png
- În cazul în care imaginile nu sunt în același folder cu pagina în care va fi inserată,
trebuie precizată calea
- ATRIBUTE ale lui IMG:
o WIDTH=”x” –specifică lățimea de afișare a imaginii
o HEIGHT=”x” – specifică înălțimea de afișare a imaginii
o BORDER=”x”- specifică grosimea chenarului imaginii
o ALIGN-realizează alinierea imaginii față de text (=”left”,=” right”, =”top”,
=”middle”, =”bottom”.)
Exemplu: <img src="[Link]" height=135 width=135 align=middle alt="ilustratã de la mare">

Aplicația practică 1
1. Creați în folderul vostru un folder cu numele imagine.
2. În aplicația Paint desenați o floare pe care să o salvați în folderul imagine, cu denumirea floare.
Alegeți pentru tipul de fișier imagine, tipul jpg. Astfel, fișierul cu imaginea va avea denumirea
”[Link]” .
3. Creați în folderul imagine o pagina web cu denumirea inserare_imagine. Inserați imaginea
creată la punctul 2.
4. Trimiteți folderul arhivat care conține pagina web la adresa de email ailioasa@[Link]

Aplicația practică 2
Creați o pagină web care să ilustreze trei litere din jocul ”Flori, fete, filme …”. Completați celulele
tabelului cu imagini.
Exemplu:

Litera Flori Filme Actori Cântăreți


azelee Apocalypto Armand Andra
A Assante

19
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 8 Inserarea unui link


Sintaxa pentru inserarea unui link este următoarea:
<a href=”pune aici adresa link-ului“>pune aici textul pe care să poți da click</a>
Exemplu:
Pentru a ajunge pe site-ul [Link], da click aici.

Codul pentru cuvântul aici este următorul:


<a href=[Link]

Exemplu inserare link:


Aplicația practică 1
<html>
<head>
<title>Napoca FM Live</title>
</head>
<body>
<a href=[Link] FM Live</a>
</body>
</html>

Aplicația practică 2
1. Creați în folderul vostru un folder cu numele Craciun
2. În aplicația Paint desenați un brad de Crăciun pe care să îl salvați în folderul Craciun, cu
denumirea brad. Alegeți pentru tipul de fișier imagine, tipul jpg. Astfel, fișierul cu imaginea va
avea denumirea ”[Link]” .
3. Creați în folderul imagine o pagina web cu denumirea [Link]. Inserați imaginea creată la
punctul 2.
4. Inserați în pagina web un link cu adresa site-ului MagicFM- Radioul lui Moș Crăciun.
5. Inserați o urare de Crăciun , culoarea textului să fie Roșie.
6. Trimiteți folderul arhivat care conține pagina web la adresa de email ailioasa@[Link]

20
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Lecţia 9 Cadre (Frame)


Cu ajutorul cadrelor pot fi dispuse mai multe pagini web în aceeaşi fereastră a browserului. Fiecare
document HTML care generează o pagina web reprezintă un cadru; cadrele sunt independente unele faţă de
altele.

<frameset> defineşte modul de împărţire a ferestrei în cadre.


Un cadru poate fi vertical sau orizontal.
Atribute:
cols – defineşte cadre verticale
- are ca valoare un procent care arată cât din suprafaţa totală ocupă coloanele
rows – defineşte cadre orizontale
– are ca valoare un procent care arată cât din suprafaţa totală ocupă rândurile; daca sunt mai multe
rânduri, procentele se despart prin virgulă.
<frame> defineşte documentul HTML care trebuie alocat fiecărui cadru.

Exemplul [Link]

<html>
<head>
<title>Cadre</title>
</head>
<frameset cols=25%,75%>
<frame src=”frame_a.html”>
<frame src=”frame_b.html”>
</frameset>
</html>

unde:
frame_a.html este un fisier html care are continutul Cadrul A
frame_b.html este un fisier html care are continutul Cadrul B

21
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

Exemplul [Link]

<html>
<head>
<title>Cadre</title>
</head>
<frameset rows=50%,50%>
<frame src=”frame_a.html”>
<frameset cols=25%,75%>
<frame src=”frame_b.html”>
<frame src=”frame_c.html”>
</frameset>
</html>

unde:
frame_a.html este un fisier html care are continutul Cadrul A
frame_b.html este un fisier html care are continutul Cadrul B
frame_c.html este un fisier html care are continutul Cadrul C

Aplicaţie practică:

Pornind de la exemplele cu cadre exersate, realizaţi o pagină web care să aibă urmatoarea structură:
În cadrul A o fotografie cu elevii clasei voastre;
În cadrul B numele clasei, numele profesorului diriginte şi numele elevilor, sub formă de listă;
În cadrul C un tabel cu elevii premianţi din fiecare an şcolar: clasa, numele şi prenumele, premiul obţinut.
Salvaţi pagina web în locul indicat de profesor.

exemplu:
Clasa/an scolar Premiul obţinut Numele elevului
Clasa a IX-a Premiul I
Premiul II
Premiul III
Menţiune
Clasa a X-a Premiul I
Premiul II
Premiul III
Menţiune
Clasa a XI-a Premiul I
Premiul II
Premiul III
Menţiune

22
Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana

CULEGERE DE SUBIECTE DATE LA PROBA DE COMPETENȚE DIGITALE


DOMENIUL DE COMPETENȚĂ CONCEPTE DE BAZĂ ALE TEHNOLOGIEI INFORMAȚIEI
Model de subiect Examenul de Bacalaureat național 2017
SUBIECTUL AL III-lea
Deschideți fișierul comp_h.
a. Formatați primul și ultimul cuvânt din primul paragraf, astfel încât doar acestea să fie
subliniate cu linie simplă. (5p)
b. După imaginea din pagina web creați o listă ordonată care să conțină, în această ordine,
termenii comunicare, lingvistic, digital, folosind tipul de numerotare cu cifre arabe (1., 2., 3.). (5p)

Examenul de Bacalaureat național 2016, varianta 4


SUBIECTUL AL IV-lea
Deschideți fișierul comp_h.
a. Scrieți pe foaia de examen primele 3 cuvinte din titlul paginii web. (1p)
b. Formatați primele două paragrafe astfel încât să fie scrise cu font Courier. (3p)
c. Adăugați la sfârșitul paginii un tabel cu două rânduri și două coloane, iar în fiecare celulă a acestuia scrieți
textul HTML (3p)

Examenul de Bacalaureat național 2016, varianta 14


SUBIECTUL AL IV-lea
Deschideți fișierul comp_h.
a. Scrieți pe foaia de examen codul RGB al culorii textului din pagina web. (1p)
b. Formatați numai primul cuvânt din pagina web, astfel încât să fie scris cu font Courier. (3p)
c. Utilizând un tabel cu o singură celulă, încadrați al doilea paragraf al paginii web cu un chenar de dimensiune
10 pixeli. (3p)

Pe site-ul Manual online de competențe digitale/secțiunea Bacalaureat/Modele de


subiecte se află o colecție de subiecte date la proba de competențe digitale în perioada 2010 până în
prezent.

23

S-ar putea să vă placă și