Scribd
Încărcați
23 vizualizări25 pagini

Auxiliar HTML

Încărcat de

LELIANA LOREDANA BUZATU
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
23 vizualizări25 pagini

Auxiliar HTML

Încărcat de

LELIANA LOREDANA BUZATU
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
Sunteți pe pagina 1/ 25

Str. 23 August, nr.

9
loc. Giurgiu, jud. Giurgiu
tel: 0246/215401 fax: 0246/215409
e-mail: [email protected]
web: www.nicolaecartojan.ro

Auxiliar
Noţiuni de baza în HTML
Clasa a IX-a

Realizator:
Prof. Mirlogeanu Anemona Dana

2015
Limbajul HTML

HTML este un format text proiectat pentru a putea fi citit şi editat de oameni utilizând un editor
de text simplu.. Limbajul HTML indică locul în care să se afișeze diversele elemente vizibile,
dimensiunea, culoarea, precum și alți parametrii care conferă unei pagini web atât aspectul dorit cât și
funcționalitatea optimă.
Paginile Web realizate în HTML au dezavantajul că sunt statice, conținutul neputând fi modificat
odată ce au fost încărcate pe un server decât aducându-le înapoi pentru a fi editate.
HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza
paginilor web. Paginile HTML contin elemente (etichete) si au extensia .html.

I. Componentele elementare ale unui document HTML

Documentul conține două părți: partea de început, denumită și antetul documentului cuprinsă în interiorul
tagului <head> și corpul propriu zis al paginii cuprins în cadrul tagului <body>. Tagul <title> text </title> este
localizat în partea de început (head) și cuprinde titlul paginii ce va fi afișat în cadrul ferestrei browserului. Tot în
zona de antet sunt localizate și tagurile de tip <meta> ce cuprind termenii cheie utilizați de către motoarele de
căutare pentru indexarea paginii html.
Începutul și sfârșitul unui document HTML sunt marcate prin folosirea tagului <html> și,
respectiv, de forma de închidere a acestuia </html>.
În cadrul corpului paginii (interiorul tagului <body>) se află conținutul util al documentului (text,
imagini, hiper-linkuri, alte taguri de formatare).
O formă simplă de document HTML este următoarea:
<html>
<head>
<title>
Pagina elementara
</title>
</head>
<body>
Notiune elementare. In aceasta zona putem adauga text, imagini, tabele,legaturi, etc.
</body>
</html>
I.1 TRECEREA LA LINIE NOUĂ ÎN HTML

De obicei, textele conţinute de o pagină sunt grupate din punct de vedere funcțional în mai multe
paragrafe. Un paragraf este delimitat în cadrul documentului HTML prin introducerea conținutului său
între tag-urile <P> ... </P>. La afişare, două paragrafe consecutive vor fi separate printr-o linie goală.
Pentru a realiza trecerea la o nouă linie în cadrul unui paragraf sau pentru a separa în cadrul paginii
elemente cu tipuri diferite (de exemplu, un paragraf de o imagine, poate fi utilizat tagul html <br/> ).
În cadrul unui fişier HTML, Enter-ul nu are nici un efect. De asemenea, dacă două cuvinte ale unui
paragraf sunt separate prin mai multe spaţii sau alte caractere albe (enter-uri, tab-uri), browser-ul
afişează doar un singur spaţiu. La majoritatea tag-urilor li se pot specifica atribute. Un atribut se
specifică înainte de închiderea parantezei unghiulare a tag-ului (>) prin
nume_atribut=”valoare”.
În cadrul paragrafului, prin intermediul atributul align este controlată alinierea textului din cadrul
paragrafului. Dacă acest atribut nu este prezent, alinierea este făcută în mod implicit la stânga. Acest
atribut poate lua una dintre valorile center, left, right, justify.
<p align =”atribut”> Text </p>
<html>
<head>
<title>
Trecerea la linie noua
</title>
</head>
<body>
Notiune elementare.<br> In aceasta zona putem adauga text, imagini, tabele,legaturi, etc.<br>

</body>
</html>
Exemplu de aliniere a paragrafului:

<HTML>
<HEAD>
<TITLE>ALINIERE</TITLE>
<BODY>
<P ALIGN="CENTER"> TEXT ALINIAT LA CENTRU</P>
<P ALIGN="RIGHT"> TEXT ALINIAT LA DREAPTA</P>
<P ALIGN="LEFT"> TEXT ALINIAT LA STANGA</P>
</BODY>
</HEAD>
</HTML>
I.2 FOLOSIREA MĂRIMILOR STANDARD DE CARACTERE

Pentru a utiliza mărimi și stiluri de fonturi predefinite, se pot utiliza tagurile: <h1> până la <h6>.
Acestea au asociate o serie de caracteristici privitoare la modalitatea de afișare ce pot fi suprascrise prin
utilizarea CSS, fiind însă utilizate și pentru structurarea logică a conținutului paginii (titluri, subtitluri,
etc).

<html>
<head>
<title>
Exemplu de marimi caractere.
</title>
</head>
<body>
<h1> Titlu marimea H1. Cel mai mare.</h1>
<h2> Titlu marimea H2 </h2>
<h3> Titlu marimea H3 </h3>
<h4> Titlu marimea H4 </h4>
<h5> Titlu marimea H5 </h5>
<h6> Titlu marimea H6. Marimea mea mai mica. </h6>
</body>
</html>
I.3 Stabilirea fontului

Pentru stabilirea font-ului se foloseşte tag-ul <FONT>...<FONT/>. Atributele acestuia sunt:


 face indică numele font-ului și a familiei din care face parte acesta;
 size indică mărimea (trebuie să fie un număr cuprins între 1 şi 7).
 color permite specificarea culorii. Aceasta se specifică fie prin intermediul constantelor
predefinite ale HTML-ului (numele englezesc al culorii) fie prin componentele sale de Roşu,
Verde şi Albastru exprimate în hexazecimal;

I.3.1 Selectarea tipului de font

<html>
<head>
<title>
Alegerea fontului dorit.
</title>
</head>
<body>
<font face = "times new roman"> Fontul va fi Times new roman </font><br>
<font face = "arial"> Fontul va fi Arial </font><br> </body>
</html>
I.3.2. Selectarea mărimii fontului

<html>
<head>
<title>
Alegerea marimii fontului
</title>
</head>
<body>
<font face = "arial" size = "10"> font marimea 10 </font><br>
<font face = "calibri= "9"> font marimea 3 </font><br>
<font face = "times new roman" size = "8"> font marimea 8 </font><br>
<font face = "times new roman" size = "7"> font marimea 7 </font><br>
</body>
</html>
I.3.3 Selectarea culorii fontului

<html>
<head>
<title>
Alegerea culorii fontului
</title>
</head>
<body>
<font face = "times new roman" size = "4" color = "blue">
Text culoare albastra </font><br>
<font face = "times new roman" size = "3" color = "yellow">
Text culoare galbena </font><br>
</body>
</html>
I.4. Stiluri de afișare a fontului

 <B>...</B> : Are ca efect afişarea textului bold (îngroşat) cuprins între cele două tag-uri ale sale.
 <I>...</I> : Are ca efect afișarea textului italic (înclinat) cuprins între cele două tag-uri ale sale;
 <U>...</U> : Are ca efect afişarea textului subliniat cuprins între cele două tag-uri ale sale. Un
tag sinonim al lui <U> este: <INS>...</INS>
 <BIG>...</BIG> : Are ca efect afişarea textului cuprins între cele două tag-uri ale sale mai mare
decât textul în care este cuprins.
 <SMALL>...</SMALL> : Are ca efect afişarea textului cuprins între cele două tag-uri ale sale
mai mic decât textul în care este cuprins.

<html>
<head>
<title>
Tipuri de formatari in HTML.
</title>
</head>
<body>
<font face = "arial" size = "2">
<b> Scrisul este ingrosat</b><br>
<u> Scrisul este subliniat<//u><br>
<i> Scrisul este oblic</i><br>
</font>
</body>
</html>
II. Tabele simple

Pentru a crea un tabel, trebuie se utilizează tag-urile <TABLE> și </TABLE>. Tot ce va fi scris
intre aceste tag-uri va deveni conținutul respectivului tabel. Dupa tag-ul <TABLE> urmeaza tag-ul
<TR>, ce reprezintă prescurtarea expresiei "Table Row" (randul tabelului) și are ca efect introducerea
unui rand in cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al
tabelului. Dupa crearea unui rand, pentru adăugare de celule in cadrul acestuia, se utilizează tag-urilor
<TD> si </TD>.

<html>
<head>
<title>
Tabele simple
</title>
</head>
<body>
<b><center>Exemplu de tabel</center></b>

<table border = "2">


<tr>
<td>nr_crt</td>
<td>nume_elev</td>
<td>prenume_elev</td>
<td>varsta_elev</td>
</tr>
<tr>
<td>1.</td><td>Burdel</td><td>Ioana</td><td>12</td>
</tr>
<tr>
<td>2.</td><td>Marinescu</td><td>Andrei</td><td>13</td>
</tr>
</table>
</body>
</html>
II.1 Formatarea celulelor

Formatările într-un tabel presupun folosirea următoarelor atribute:


 BORDERCOLOR - definește culoarea chenarului;
 WIDTH – stabilește lățimea tabelului în pixeli;
 HEIGHT - stabilește înălțimea tabelului în pixeli;
 ALLIGN - stabilește alinierea în fereastră (left/center/right);
 VALIGN - stabilește alinierea verticală a datelor (top/middle/bottom);

<html>
<head>
<title>
Formatari ale celulelor in tabel
</title>
</head>
<body>
<font face="times new roman">
<b>Formatari in tabel (cellspacing,cellpadding) </b>
</font>
<br>
<table border = "3" color = "red" cellpadding = "10" cellspacing = "5">
<tr> <td>NR.</td><td>Nume</td><td>Prenume</td><td>Varsta</td> </tr>
<tr> <td>1.</td><td>Mirlogeanu</td><td>Anemona</td><td>15</td> </tr>
<tr> <td>2.</td><td>Marinescu</td><td>Andrei</td><td>16</td> </tr>
</table>
</body>
</html>
II.3 Alinierea în celule

Alinierea conținutului în cadrul celulelor unui tabelul se poate face prin două atribute:
 ALIGN –definește alinierea orizontală și poate lua valorile:
o LEFT- datele sunt aliniate la stânga;
o RIGHT-datele sunt aliniate la dreapta;
o CENTER- datele sunt centrate;
 VALIGN- definește alinierea verticală și poate avea valorile:

o TOP - datele sunt aliniate la marginea de sus a celulei;


o BOTTOM - datele sunt aliniate la baza celulei;
o MIDDLE - datele sunt centrate vertical la mijlocul celulei;

Atributele de aliniere pot fi plasate atât în tag-urile ce delimitează rândurile tabelului cât și în tag-
urile ce definesc celulele. Dacă este utilizat atributul ALIGN cu valoare “left” în tag-ul TABLE, textul care
urmează tabelului este afișat în paralel cu acesta (tabelul este aliniat în stânga ferestrei navigatorului iar
în dreapta sa se afișează textul. Folosirea atributului ALIGN cu valoarea “right” aliniază tabelul în
dreapta paginii și afișează textul în partea stângă a tabelului.

<html>
<head>
<title>Alinierea în celule</title>
</head>
<body>
<font face="times new roman"><b>Alinierea in celule</b></font><br>
<table border = "4">
<tr><td>NR.</td><td>nume</td><td>prenume</td><td>varsta</td></tr>
<tr>
<td align = "center">1.</td>
<td align = <right">Mirlogeanu </td>
<td>Anemona</td><td>15</td>
</tr>
<tr>
<td align = "left">2.</td>
<td align = "center">Marinescu</td>
<td>Andrei</td><td>16</td>
</tr>
</table>
</body>
</html>

II.4. Unirea celulelor

<html>
<head>
<title>
Unirea celulelor
</title>
</head>
<body>
<font face="arial"><b><center>
Exemplu unirea celulelor (colspan)</center></b></font><br>
<table border=2>
<tr>
<td>NR.</td><td>Nume</td><td>Prenume</td><td>Varsta</td>
</tr>
<tr>
<td>1.</td><td>Mirlogeanu</td><td>Anemona</td><td>38</td>
</tr>
<tr>
<td>2.</td><td>Marinescu</td><td>Andrei</td><td>18</td>
</tr>
<tr>
<td>3.</td><td colspan =”2”>Mirlogeanu Ioana</td><td>32</td>
</tr>
</table>
</body>
</html>
III. Liste ordonate și neordonate

În limbajul HTML se pot folosi mai multe tipuri de liste. Listele sunt definite prin intermediul tag-
urilor <LI> ... </LI>. HTML dispune de următoarele tipuri de liste:
 neordonate marcate prin intermediul tag-ului <UL>…</UL>; la formatare itemii apar
precedați de marcatori geometrici;
 ordonate –delimitate de tag-ul <OL>…</OL>; la formatare itemii apar numerotați;
 de tip meniu - delimitate de tag-ul <MENU>…</MENU>; la formatare itemii apar într-o
reprezentare tip multicoloană [4.3];

<html>
<head>
<title>Liste ordonate </title>
</head>
<body>
<font face = "arial" size = "4">Liste<br/>
<ol>
<li> Mere </li>
<li> Pere </li>
</ol>
</body>
</head>
</html>
<html>
<head>
<title>Liste ordonate </title>
</head>
<body>
<font face = "arial" size = "2">Liste<br/>
<ul>
<li> Mere </li>
<li> Pere </li>
<li> Portocale </li>

</ul>
</body>
</head>
</html>
III.1 Liste imbricate

<html>
<head>
<title>
Liste imbricate
</title>
</head>
<body>
<font face = "arial" size = "4">Liste imbricate<br>
<font face = "times new roman" size = "3"><br>
<ul>
<li> 1 dispozitive periferice de intrare </li>
<li> 2 dispozitive periferice de iesire</li>
<ul>
<li> 1.1 imprimanta </li>
<li> 1.2 scanner </li>
<li> 1.3 boxe </li>
</ul>
<li> 3 dispozitive periferice de intrare-iesire </li>
</ul>
</body>
</html>
IV. Folosirea legăturilor(Hyperlink)
Pentru a oferi utilizatorului posibilitatea accesării unei resurse (altă pagină html, stream audio,
imagine), identificabile prin intermediul unui URL, în cadrul unei pagini HTML sunt utilizate așa-
numitele elemente de tip hyperlink. Acestea se introduc prin tagul <A>….</A> aplicate unui text sau a
unei imagini. Hiperlinkurile se pot crea către o adresă URL (link extern), către fișiere aflate pe același
calculator cu pagina creată (link local) sau către o zonă din documentul HTML. Pentru a activa legătura
și a determina afișarea resursei asociate link-ului se face click pe elementul aflat în interiorul tagului
<a>. Atributele specifice ale acestui element sunt : HREF (indică localizare resursei externe prin
specificarea adresei URL, crearea unei legături locale prin intermediul numelui și a căii de acces la
fișierul corespunzător sau a unei legături interne documentului) și NAME (atribut utilizat pentru a asocia
un nume elementului de tip ancoră creat).
<html>
<head>
<title>
Inserare hyperlink.
</title>
</head>
<body>
<a href = "#legaturi"> primul link </a><br>
<a href = "#legatura1">Al doilea link </a><br>
</body>
</head>
</html>
HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină,
utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel
de software fiind browserul web.

V. Inserarea imaginilor

Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <IMG>. Forma generală a
acestui element este <IMG atribute>. Acest tag nu are şi formă de închidere.
Atributele sale sunt:
• src identifică fişierul efectiv de pe disc, ce conţine imaginea respectivă. Dacă imaginea
se află în directorul curent, se specifică doar numele şi extensia sa. Dacă se află într-un subdirector,
acesta se specifică înaintea numelui şi extensiei imaginii, separat prin caracterul /. Imaginile recunoscute
de majoritatea browser-elor internet sunt de tip .jpg, .gif, .png.
• align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află.
Acesta poate lua una dintre valorile următoare:
- right : imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas liber, în
stânga acesteia;
- left : imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas liber, în
dreapta acesteia;
- top : doar latura de sus a imaginii se aliniază cu rândul de text în cadrul căruia se află; următorul
rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;
- middle : rândul de text în cadrul căruia se află imaginea se aliniază la jumătatea înăţimii acesteia;
următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;
- bottom : doar latura de jos a imaginii se aliniază cu rândul de text în cadrul căruia se află;
următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;
• atributul alt=”text” permite specificarea unui text alternativ ce va fi afişat fie dacă menţinem
cursorul de mouse asupra imaginii, fie în locul imaginii propriu-zise, în cazul în care imaginea nu poate
fi încărcată din cauza unei probleme de conexiune;
• atributele height şi width permit specificarea altor dimensiuni pentru imagine, decât cele reale
ale acesteia. Evident, dacă dimensiunile nu sunt proporţionale cu cele reale, imaginea va fi deformată.
Totodată, dacă se specifică dimensiuni mai mari decât cele reale, imaginea se va vedea mai puţin clar. În
realitate, imaginea este transferată de pe server la dimensiunile sale originale, redimensionarea având loc
la nivelul calculatorului pe care este vizualizată pagina.

<html>
<head>
<title>
Imagini
</title>
</head>
<body>
<h5> Imagini ! </h5>
<img src = "comp_i.jpg" width="50" height="50">

</body>
</html>
<html>
<head>
<title>
Imagini
</title>
</head>
<body>
<h5> Imagini ! </h5>
<img src = "comp_i.jpg" width="50" height="50" align=”right” > Poza este o parte din globul
pamantesc!

</body>
</html>
VI. Formulare HTML

Formularele HTML oferă interactivitate între utilizator și pagina Web pe care acesta o accesează.
Astfel, prin intermediul acestora se pot obține informații variate, provenite de la utilizatorul site-ului web
(persoana sau sistemul informatic care formulează cereri de tip GET/POST). După ce formularul a fost
completat, utilizatorul accesează un buton de trimitere, iar serverul web pe care este găzduit site-ul
primește datele introduse în formular sub forma unui request de tip GET/POST ce urmează a fi procesat
cu ajutorul unui limbaj de programare server-side și, eventual, adaugat într-o baza de date.
De exemplu, un absolvent de liceu care dorește să se înscrie on-line la o facultate va completa un
formular html ce conține numele, prenumele, orașul, județul, media de absolvire, media de la
bacalaureat, etc. Aceste informații vor fi prelucrate cu ajutorul unor aplicații numite scripturi (CGI). Un
formular se introduce prin tag-ul <FORM>….</FORM> și poate conține:
 Câmpuri de text;
 Butoane radio;
 Căsuțe de validare;
 Casete combinate;
 Butoane de comandă;
Cele mai importante atribute ale tag-ului <FORM> sunt ACTION și METHOD.
Valoarea atributului ACTION poate fi o adresă URL a unui script, scris într-un limbaj de
programare, care va interpreta datele și le va introduce intr-o baza de date, daca este cazul, sau poate fi o
adresa de email, caz în care datele introduse în formular vor fi trimise prin email la adresa respectivă.
Atributul METHOD, stabilește metoda de trimitere a datelor și poate avea două valori.
Valoarea implicită a acestui atribut este GET, cu ajutorul acestei metode putând fi trimise cantități
mici de date, prin adăugarea acestora la URL-ul paginii. Pentru a trimite date complexe, neexpuse
codării directe în URL-ul paginii, cea mai folosită metodă este POST. Intoducerea elementelor într-un
formular se pot face prin intermediul tag-ului: INPUT. Atributele specifice ale acestui tag sunt: TYPE
(tipul elementului), NAME (numele elementului) și VALUE (valoarea elementului).

Folosirea butoanelor radio:

Butoanele radio se folosesc în cazul în care se dorește obținerea din partea utilizatorului a unui
singur răspuns la o întrebare cu variante multiple. Pentru afișarea unui buton radio, se folosește tag-ul
<INPUT> cu setarea valorii "radio" a atributului TYPE. Pentru a alege una din materiile preferate putem
scrie:
<INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED>matematica<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="a">fizică<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="a">istorie

Butoanele radio permit alegerea unei singure opțiuni, selectare unui alt răspuns, determinând
deselectarea automată a celui selectat anterior.

Folosirea casetelor de validare

Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu atributul


TYPE avand valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai
multor optiuni. Pentru a putea alege două tări care vă plac mai mult:
INPUT TYPE="checkbox" NAME="prima optiune">Bine<BR>
INPUT TYPE="checkbox" NAME="a doua optiune">Foarte bine<BR>
INPUT TYPE="checkbox" NAME="a treia optiune">Binisor<BR>

Bibliografie:

Mariana Pantiru- Tehnologia informatiei si comunicatiilor- Editura liceALL 2000


Tudor Sorin – Crearea paginilor Web- Editura L&S 2003

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