Curs2 HTML PDF

CURS 2
Limbajul HTML
Ce este HTML?
Unul dintre primele elemente fundamentale ale World Wide Web (www) este HTML (HyperText
Markup Language), care descrie formatul primar n care documentele sunt distribuite i vzute pe Web.
HTML a fost dezvoltat iniial de Tim Berners Lee la CERN n 1989 fiind vzut ca o posibilitate pentru
fizicienii care utilizau computere diferite s schimbe ntre ei informaie utiliznd Internetul. Erau necesare
cteva trsturi:
-
independena de platform nseamn c un document poate fi afiat n mod asemntor pe

calculatoare diferite;
posibiliti hypertext;
structurarea documentelor.
Hypertext nseamn c orice cuvnt, fraz, imagine sau al element al documentului vzut de utilizator
poate s fac referin la un alt document, ceea ce uureaz mult navigarea ntre documente multiple sau chiar
n interiorul aceluiai document.
Tim Berners Lee a utilizat ca model SGML (Standard Generalized Markup Language), un standard
internaional n plin dezvoltare. SGML avea avantajul unei structurri avansate i al independenei de
platform. Flexibil, SGML putea fi descris ca o aplicaie pentru descrierea altor formate. Utilizatorii puteau crea
noi formate (DTD Document Type Definitions) care puteau fi nelese de orice produs SGML pur i simplu prin
citirea mai nti a definiiilor noilor formate. HTML este un DTD, deci o aplicaie a SGML.
Documentele HTML sunt documente n format ASCII i prin urmare pot fi create cu orice editor de
texte. Au fost ns dezvoltate editoare specializate care permit editarea de tipul WYSIWYG.
Noiuni de baz
Orice document HTML ncepe cu notaia <html> i se termin cu notaia </html>. Acestea se numesc n
literatura de specialitate TAG-uri. Prin convenie, toate informaiile HTML ncep cu o parantez unghiular
deschis < i se termin cu o parantez unghiular nchis >. TAG-urile (etichetele) dintre aceste paranteze
transmit comenzi ctre browser pentru a afia pagina ntr-un anumit mod. Unele blocuri prezint delimitatori
de sfrit de bloc, n timp ce pentru altele acest delimitator este opional sau chiar interzis.
Page 1
ntre cele dou marcaje <html> i </html> vom introduce dou seciuni:
-
seciunea de antet <head> </head>;
corpul documentului <body> </body> - ce cuprinde coninutul propriu-zis al paginii HTML.
O etichet poate fi scris att cu litere mari ct i cu litere mici. Adic: <HTML> = <HtMl>=<html>.
Spaii albe
Browserul ignor toate spaiile albe introduse n fiierul HTML.
(ex1.html, ex2.html)
<html><head></head><body>Prima pagina web
</body></html>
<html> <head>
</head>
Prima
pagina
<body>
web </body>
</html>
Page 2
Titluri de pagin
Putei ataa un titlu unei pagini Web. Acest titlu va aprea n bara de titlu a browserului. n acest scop
introducei un bloc nou <title></title> n interiorul blocului <head></head>. Dac blocul <title></title>
lipsete, n bara de titlu va aprea calea i numele fiierului.
(ex3.html)
<html>
<head>
<title>
Acesta este titlul de pagin
</title>
</head>
<body>
Prima pagina web
</body>
</html>
ntreruperile de rnd
Browserele ignor caracterul CR/LF. Pentru a obliga browserul s afieze un element la nceputul
rndului urmtor, trebuie s introducei o comand utiliznd eticheta <br>. Eticheta <br> nu are etichet de
nchidere </br>.
(ex4.html, ex5.html)
<html>
<head>
</head>
<body>
Prima restanta
A doua restanta
A opta restanta
</body>
</html>
Page 3
<html>
<head>
</head>
<body>
Prima restanta <br>
A doua restanta<br>
<br>
A opta restanta <br>
</body>
</html>
Text preformatat
Pentru a pstra formatarea utilizat n cursul editrii documentului surs, putem folosi eticheta
<pre></pre>.
(ex6.html)
<html>
<head>
</head>
<body>
<pre>
-----------|
|
|
--|
|
|
|
|
------ |---- |
</pre>
| |
| |
|--|
| |
| |
</body>
</html>
Page 4
Stiluri pentru blocurile de text

-
Eticheta <i></i>
Blocul <i></i> este utilizat pentru afiarea textului cu stilul cursiv (italic) (ex7).
<html>
<head> </head>
<body>
Text normal <i> Text cursiv </i> Text normal
</body>
</html>
Eticheta <b></b>
Textul din interiorul unui bloc <b>...</b> va fi afiat cu text ngroat (aldin) (ex8).
<html>
<head> </head>
<body>
Text normal <b> Text ingrosat </b> Text normal
</body>
</html>
Page 5
Etichete imbricate
Stiluri de text pot fi imbricate (ex9):

<html>
<head> </head>
<body>
Text normal, <b> ingrosat, <i> italic si ingrosat,
</b> italic, </i> normal.
</body>
</html>
Eticheta <big></big>
Textul din interiorul unui bloc <big></big> va fi afiat cu un font mai mare dect cel current (ex10):
<html>
<head> </head>
<body>
Text normal, <big> mai mare, </big> <big> <big>
mult mai mare, </big> </big> normal.
</body>
</html>
Page 6
Eticheta <small></small>
Textul din interiorul unui bloc <small></small> va fi afiat cu un font mai mic dect cel current (ex11):
<html>
<head> </head>
<body>
Text normal, <small> mai mic, </small> <small>
<small> mult mai mic, </small> </small> normal.
</body>
</html>
Eticheta <s></s>
Textul din interiorul unui bloc <s></s> va fi afiat tiat cu o linie (ex12):
<html>
<head> </head>
<body>
Text normal, <s> text taiat, </s> text normal.
</body>
</html>
Eticheta <u></u>
Textul din interiorul unui bloc <u></u> va fi afiat subliniat (ex13):
Page 7
<html>
<head> </head>
<body>
Text normal, <u> text subliniat, </u> text normal.
</body>
</html>
Etichetele <sub> i <sup>
Textul din interiorul unui bloc <sub></sub> va fi afiat ca indice iar textul din interiorul unui bloc
<sup></sup> va fi afiat ca exponent (ex14):
<html>
<head> </head>
<body>
Puterea absorbita de resistor P<sub>R</sub> =
RI<sup>2</sup.
</body>
</html>
Unele dintre stilurile de text sunt considerate depite i se recomand folosirea tehnologiei CSS
(Cascading Style Sheets) n locul lor.
Page 8
Stiluri logice de text sunt utilizate pentru a preciza o destinaie specific unui anumit bloc de
text (paragraph, titluri, citate etc.).
-
Eticheta <p></p>
n cazul unui text mai lung, este recomandat mprirea lui n paragrafe (<p></p>). Eticheta <p> are un
atribut numit align care se utilizeaz la definirea unui tip de aliniere a textului (left, center, right, justify),
valoarea prestabilit fiind left. Ca s precizai o valoare pentru atributul align, utilizai sintaxa <p
align=center></p> (ex15) :
<html>
<head> </head>
<body>
<p> Acesta este un prim paragraf aliniat implicit la
stanga. </p>
<p align=right> Acesta este un alt paragraf la care
am impus alinierea la dreapta.</p>
<p align=center> Iar acesta este un paragraf cu
alinierea centrata. </p>
</body>
</html>
-
Titlurile
HTML v permite introducerea de titluri ntr-o pagin web, afiarea lor difer de restul paginii i depinde de
browserul
utilizat.
Exist
6
tipuri
de
titluri
predefinite:
<h1></h1>,
<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>, primul fiind afiat utiliznd cel mai mare
font i ngroat. Toate titlurile prezint atributul align (cu valori posibile: left, right, center, justify) (ex16).
<html>
<head> </head>
<body>
<h1 align=center> TEORIA CIRCUITELOR ELECTRICE
</h1>
<h2 align=center> Regimuri de functionare.</h2>
<h3> Regimul de curent continuu. </h3>
<h4> Elemente de circuit. </h4>
<h5> Rezistorul. </h5>
<h6 align=right> Figura 1.</h6>
</body>
</html>
Page 9
Citate
Eticheta <blockquote></blockquote> permite introducerea unor citate lungi n cadrul paginii web. Citatul
este afiat pe un rand nou nconjurat de un spaiu alb suplimentar (ex17).
<html>
<head> </head>
<body>
Franz Kafka:
<blockquote> Sunt doua pacate principale din care
toate celelalte pacate se nasc: nerabdarea si
lenea.</blockquote>
</body>
</html>
Eticheta <q></q> este destinat introducerii citatelor n interiorul rndului (fr s se nceap un rnd
nou) (ex18).
<html>
<head> </head>
<body>
Albert Einstein spunea: <q>Pune mana pe o soba
fierbinte un minut si ti se va parea o ora. Stai cu o
fata frumoasa o ora si ti se va parea un minut. Asta
e relativitatea.
</q>
</body>
</html>
Page 10
Linii orizontale
Putem separa diferite pri ale unei pagini web prin linii orizontale folosind eticheta <hr> (nu necesit o
etichet de nchidere). O linie orizontal ncepe pe un rnd nou i poate avea mai multe atribute:
-
align valori posibile left, right, center;
width dac i atribuim un numr va reprezenta lungimea liniei n pixeli; dac i atribuim un procent va
reprezenta o fraciune din lungimea implicit;
size reprezint grosimea liniei n pixeli (valoarea implicit 2);
noshade dac acest atribut este prezent, linia va fi afiat fr umbr (nu 3D);
color valoarea implicit este black (ex19).
<html>
<head> </head>
<body>
<hr>
<hr align=right width=30% size=7>
<hr align=right width=25 size=5>
<hr align=center color=blue width=10 noshade
size=6>
<hr width=35 color=yellow size=8>
<hr align=left color=red size=10 width=50%>
<hr size=5>
</body>
</html>
Eticheta <div>...</div>
Elementul <div> definete o poriune (o diviziune) a paginii i are mai multe atribute:
-
align cu valorile posibile left,right, center, justify;
title impune afiarea unei sugestii pe ecran atunci cnd mouse-ul rmne timp de cteva secunde
deasupra coninutului;
style, onclick etc (ex20).
Page 11
<html>
<head> </head>
<body>
Si daca...
<div title="De ce nu tai copacul?">
Si daca ramuri bat in geam...
</div>
</body>
</html>
- Elementul <span></span>
Toate observaiile prezentate pentru <div> sunt valabile i pentru elementul <span>, diferena fiind c
<span> este un element inline. (ex21)
<html>
<head> </head>
<body>
Pagina web <br>
<span
title="http://www.electro.pub.ro/">a
Facultatii de Inginerie Electrica este OK.</span>
</body>
</html>
Culori
Culorile pot fi utilizate pentru a defini un fundal sau un tip de liter. O culoare poate fi definit prin:
-
un nume de culoare. Exist 16 nume de culori standard i implementate de toate browserele: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.
modelul de culoare RGB. Conform acestui model, o culoare poate fi obinut prin amestecul a trei
culori fundamentale: rou (Red), verde (Green) i albastru (Blue). Sintaxa este #rrggbb unde r,g i b
sunt cifre hexazecimale.
Page 12
Alb este #ffffff un amestec al tuturor culorilor.

Black este #000000 absena oricrei culori.
Verde este #00ff00.
Atributele elementului <body>

Eticheta <body> are dou atribute care se aplic n cazul culorilor.
-
bgcolor definete culoarea de fundal a paginii web;
text definete culoarea textului din pagina web. (ex22)
<html>
<head> </head>
<body bgcolor=red text=#FFFF00>
<b>Acesta este un text galben pe un fundal
rosu.</b>
</body>
</html>
Atributele de margine
Browserele utilizeaz atribute de margine diferite: leftmargin, rightmargin, topmargin, bottommargin,
marginwidth, marginheight. Valoarea fiecrui atribut este un numr ntreg, care reprezint distana n pixeli
ntre coninut i marginea ferestrei browserului. (ex23)
Page 13
<html>
<head>
</head>
<body
leftmargin=150
rightmargin=50
topmargin=0>
In lumea stiintifica creditul ii apartine celui care
convinge lumea si nu celui caruia ii vine prima data
ideea (Darwin).
</body>
</html>
Eticheta <basefont> sau <font>

Browserul va afia textul dintr-o pagin n funcie de parametrii si prestabilii (size=3, color=black,
style=Times New Roman). Aceti parametri pot fi redefinii folosind eticheta <basefont> sau <font>. Aceste
etichete au urmtoarele atribute:
-
color definete culoarea literei;
face definete tipul de liter, avnd valori posibile serif, sans-serif, monospace;
size definete dimensiunea literei (1,2,...,7 sau +1, +2,...-1,-2).
Elementul <basefont> nu are etichet de nchidere, efectul elementului rmnnd pn la apariia unui alt
element <basefont> sau pn la sfritul paginii web. (ex24)
<html>
<head>
</head>
<body>
A gresi e omenesc. <font color=navy size=+3>A da
vina pe altcineva este si mai omenesc. </font>
</body>
</html>
Page 14
Liste
O list reprezint o serie de articole. ntr-o pagin pot fi inserate mai multe tipuri de liste:
- Liste fr o ordine specificat
ntr-o astfel de list fiecare articol are acelai simbol introductiv. Articolele vor fi afiate n ordinea n care
au fost introduse. Pentru a insera o astfel de list utilizai eticheta <ul></ul>, iar pentru a insera un articol
n list folosii eticheta <li>. n faa fiecrui articol din list exist un simbol introductiv care poate fi
modificat cu ajutorul atributului <type> (disc, circle, square). (ex25)
<html>
<head>
</head>
<body>UPB
<ul type=circle> Facultatile Universitatii Politehnica
sunt:
<li> Facultatea de Inginerie Electrica;
<li> Facultatea de Automatica;
<li> Facultatea de Electronica;
<li> etc.
</ul>
</body>
</html>
Liste ordonate
ntr-o list ordonat, fiecare articol are un simbol introductiv, secvenial. Pentru a insera o astfel de list
utilizai eticheta <ol></ol>, iar pentru a insera un articol n list folosii eticheta <li>. n faa fiecrui articol
din list exist un simbol introductiv secvenial care poate fi modificat cu ajutorul atributului <type>.
Valorile posibile sunt:
-
1 pentru cifre arabe (1, 2, 3,) valoare prestabilit;
a pentru litere mici (a, b, c,);
A pentru litere mari (A, B, C,);
i pentru cifre romane scrise cu litere mici (i, ii, iii,);
I pentru cifre romane scrise cu litere mari (I, II, III,). (ex26)
Page 15
<html>
<head>
</head>
<body> <h3>Reteta de gogosi</h3>
<ol type=I> Pasii de lucru:
<li> Se inmoaie drojdia cu laptele;
<li> Se bat ouale cu zaharul;
<li> Se amesteca si se framanta;
<li> Se taie rondele;
<li> Se pun la copt in ulei incins.
</ol>
</body>
</html>
Primul simbol dintr-o list ordonat este 1,a, A, i sau I. Putei modifica acest parametru prestabilit
impunnd o valoare numeric atributului start. (ex27)
<html>
<head>
</head>
<body>
<ol type=I start=10> Ultimele trei luni ale anului
sunt:
<li> Octombrie;
<li> Noiembrie;
<li> Decembrie;
</ol>
</body>
</html>
Page 16
Liste ordonate i neordonate imbricate
Pentru a putea imbrica listele, inserai a doua list ca un element al primei liste. (ex28)
<html>
<head>
</head>
<body>
<ol type=a> Elementele de circuit sunt:
<li> Rezistorul <ul> Specificatii:
<li> valoare nominala
<li> toleranta
<li> putere nominala
</ul>
<li> Condensatorul <ul> Specificatii:
<li> valoare nominala
<li> toleranta
<li> putere nominala
</ul>
</ol>
</body>
</html>
Liste de definiii
O list de definiii reprezint o serie de termeni mpreun cu definiiile acestora. Pentru a insera o astfel de list
utilizai eticheta <dl></dl>, iar pentru termenul de definit eticheta <dt> i pentru descriere eticheta <dd>.
(ex29)
Page 17
<html>
<head>
</head>
<body>
**********************
<dl> Cateva definitii hazlii:
<dt> Nanosecunda
<dd> Fractiune de timp intre momentul in care
semaforul devine verde si claxonul masinilor din spate.
<dt> Hardware
<dd> Partea unui calculator pe care o lovesti cand
apar probleme de software.
<dt> Bancher
<dd> Cineva care iti imprumuta umbrela lui cand
afara e soare si o cere inapoi cand incepe sa ploua.
</dl>
</body>
</html>
Tabele
Orice tabel este compus din:
-
un element <table></table> - acesta este cadrul pentru celelalte elemente;
etichete <tr> - care definesc linii din tabel;
etichete <td> - care definesc celulele din tabel. (ex30)
<html>
<head>
</head>
<body>
Un exemplu de tabel:
<table>
<tr> <td>Euro <td>Lira <td>Dolar
<tr> <td>Leu <td>Leva <td>Rubla
</table>
</body>
</html>
Page 18
Implicit un tabel este afiat fr borduri, aliniat la stnga i pe un rnd nou. Atributele etichetei <table>
sunt:
-
border fixeaz bordura tabelului i poate lua valori ntregi pozitive (reprezentnd grosimea bordurii n
pixeli);
frame v permite s precizai ce pri din bordur vor fi afiate (bellow, hsides, box);
rules v permite s precizai modul n care vor fi afiate bordurile pentru celulele tabelului (groups,
rows, cols);
bordercolor pentru a seta culoarea bordurii unui tabel (red, #0000ff);
align pentru a preciza poziia tabelului n pagin (left, center, right);
hspace, vspace v permite s precizai spaiul alb din jurul unui tabel;
bgcolor stabilete culoarea de fundal, ea putnd fi utilizat pentru ntreg tabelul (<table>) sau pentru
o linie (<tr>) sau pentru o celul (<td>);
background stabilete o imagine de fundal i poate fi aplicat att tabelului ct i unui rnd sau unei
celule;
Pentru a extinde coninutul unei celule peste coninutul celulelor adiacente se utilizeaz atributele colspan i
rowspan (valorile lor reprezentnd numrul de coloane sau linii ocupate de celula extins) n cadrul
elementelor <td>. (ex31)
Page 19
<html>
<head>
</head>
<body>
<table border bgcolor=gray>
<tr>
<td colspan=3 align=center> <b>Clasament</b>
<tr>
<td rowspan=2 align=right >1.
<td
rowspan=2
align=center
background=steaua.jpg> STEAUA
<td>10j
<tr>
<td> 20p
<tr>
<td
rowspan=2
align=center
background=dinamo.jpg> DINAMO
<td>10j
<tr>
<td> 18p
<tr>
<td
rowspan=2
align=center
background=rapid.jpg> RAPID
<td>9j
<tr>
<td> 15p
</table>
Imagini
HTML v permite s inserai imagini, sunete, animaii, filme i alte tipuri de coninut multimedia ntr-o
pagin web. Formatele de imagini acceptate (de majoritatea browserelor) sunt:
-
GIF (Graphic Interchange Format);
JPEG (Joint Photographic Experts Group);
PNG (Portable Network Graphics);

Page 20
TIFF (Tagged Image File Format);
BMP (BitMaP format).
Utiliznd eticheta <img> putem insera o imagine ntr-o pagin web. Eticheta <img> este un element
inline. Un atribut al etichetei este src care definete numele i locaia fiierului imagine (URL Uniform
Resource Locator, reprezint o modalitate standard de identificare a resurselor n internet i poate fi absolut
sau relativ http://www.pub.ro/images/stories/camine.jpg, /curs/imagini/poza1.jpg). (ex32)
<html>
<head>
</head>
<body>
In primul an studentii Facultatii de Inginerie
Electrica sunt cazati in camine
<img
src=http://www.pub.ro/images/stories/camine.jpg
width=20%><br>
iar dupa sesiune, in functie de numarul
restantelor, li se va schimba locatia.
<img src=campus.jpg width=20%>
</body>
</html>
Alte atribute ale etichetei <img> sunt:

-
align (left, center, right, top, baseline, middle) pentru a stabili alinierea pe orizontal sau vertical;
hspace, vspace definesc dimensiunile spaiului alb dintre imagine i coninutul paginii;
alt permite s se ataeze o descriere la o imagine. Dac browserul nu poate descrca o imagine el va
afia valoarea atributului alt n locul imaginii. (ex33)
Page 21
<html>
<head>
</head>
<body>
Gaudeamus igitur,<br>
Juvenes dum sumus;<br>
Post jucundam juventutem,<br>
Post molestam senectutem<br>
Nos habebit humus!<br>
<br>
<img src=diploma.jpg width=50% alt="SCOPUL
SUPREM" align=right hspace=20>
Vita nostra brevis est,<br>
Brevi finietur,<br>
Venit mors velociter,<br>
Rapit nos atrociter,<br>
Nemini parcetur.<br>
<br>
Vivat academia,<br>
Vivant professores,<br>
Vivat membrum quodlibet,<br>
Vivant membra quaelibet,<br>
Semper sint in flore! <br>
</body>
</html>
Metadate
Metadatele sunt informaii inserate n antetul <head> pentru descrierea paginii web i care transmit
date motoarelor de cutare. Metadatele nu sunt afiate de ctre browser. Pentru a insera metadata, se
utilizeaz o pereche de atribute: name i content sau http-equiv i content.
Atributul name este utilizat pentru insera date cum ar fi description (pentru introducerea unei descrieri),
keywords (pentru a defini un set de cuvinte cheie), author (pentru a aduga informaii despre autor), refresh
Page 22
(pentru a actualiza o pagin n mod automat, dup un anumit numr de secunde). Atributul content conine
datele propriu-zise.
Pentru a insera un comentariu ntr-o pagin web utilizai sintaxa:
 (ex34)
<html>
<head>
<meta
name=author
content=Dragos
NICULAE>
<meta
http-equiv=refresh
content="10;
url='http://www.upb.ro/'">
</head>
<body>

Text scris dupa comentariu!
</body>
</html>
Legturi
Legturile sunt utilizate pentru a face posibil navigarea prin resursele Internetului. O legtur poate fi
inserat folosind eticheta <a>. Resursa din internet indicat de ctre legtur este precizat de atributul href.
Legturile pot fi definite folosind adrese URL absolute sau relative.
Pentru a defini o legtur la o resurs de pe sistemul local, utilizai file:///.
Pentru a defini o imagine ca legtur, inserai elementul <img> n interiorul etichetei <a>.
Pentru a defini o legtur la o adres e-mail, utilizai mailto:.
Pentru a naviga n interiorul unei pagini web, utilizai elementul <a> mpreun cu atributul name.
Pentru a defini fereastra n care va fi ncrcat noua resurs indicat de ctre legtur, folosii atributul
target al etichetei <a>. (ex35, ex36)
Page 23
<html>
<head>
</head>
<body>
<a href=#p1> Legatura catre paragraful 1. </a>
<br>
<br>
<br>
<a
href=file:///E:\Dragos\Facultate\cursinformatica-aplicata\curs2\ex36.html>
Legatura catre pagina ex.36. </a> <br>
<a name=p1>Pargaraf 1</a>
Paragraf 1. Paragraf 1. Paragraf 1. <br>
</body>
</html>
Putei defini legturi ctre orice tip de fiier, nu doar ctre fiiere HTML. Dac browserul cunoate i
poate lucra cu respectivul tip de fiier, el va afia corect fiierul n fereastra sa. Dac browserul nu cunoate
tipul de fiier, el va ncerca s descarce fiierul pe sistemul client.
Multimedia
Limbajul HTML are capacitatea de a ngloba fiiere multimedia. Browserele rezolv fiierele multimedia
utiliznd programe de completare (plug-in-uri) sau aplicaii ajuttoare. Tipul unui fiier multimedia este
determinat de extensia de nume sau de tipul MIME ataat (Multipart Internet Mail Extensions organizeaz
extensiile de fiiere de date n tipuri i subtipuri de fiiere(image/jpeg, application/pdf)). Putei crea o legtur
la un fiier multimedia utiliznd elementul <a> mpreun cu atributul href.
O resurs multimedia poate fi nglobat ntr-o pagin web utiliznd elementul <embed> mpreun cu
atributele specifice: src, type, width, height.
O metod general de inserare a oricrui tip de resurse (fiiere multimedia, controale ActiveX,
miniaplicaii Java) const n utilizarea elementului <object> mpreun cu atributele specifice: data, type, classid,
width, height, align, border. (ex.37)
Page 24
<html>
<head>
</head>
<body>
<object classid="clsid:8E27C92B-1264-101C-8A2F040224009C02" id="Calendar1">
<param
name="BackColor"
value="2147483633">
<param name="Year" value="2010">
<param name="Month" value="10">
<param name="Day" value="13">
<param name="DayLength" value="1">
<param name="MonthLength" value="1">
<param name="DayFontColor" value="0">
<param name="FirstDay" value="7">
<param name="GridCellEffect" value="1">
<param
name="GridFontColor"
value="10485760">
<param name="GridLinesColor" value="2147483632">
<param
name="ShowDateSelectors"
value="-1">
<param name="ShowDays" value="-1">
<param
name="ShowHorizontalGrid"
value="-1">
<param name="ShowTitle" value="-1">
<param
name="ShowVerticalGrid"
value="-1">
<param
name="TitleFontColor"
value="10485760">
<param name="ValueIsNull" value="0">
</object>
</body>
</html>
Page 25
Imagini hri
Putei utiliza o imagine hart pentru a defini mai multe legturi ctre diferite resurse internet. Pentru a
declara o imagine ca imagine hart, utilizai eticheta <img> mpreun cu atributul usemap. Pentru a descrie o
hart, utilizai elementul <map> mpreun cu atributul name i inserai n el elemente <area> pentru fiecare
zon activ.
Atributul <shape> al etichetei <area> se utilizeaz la definirea tipului de zon (rect, circle, poly).
Atributul <coords> al etichetei <area> se utilizeaz la definirea coordonatelor zonei active.
Atributul <href> al etichetei <area> se utilizeaz la definirea adresei URL a resursei indicate de zona
activ.
<html>
<head> </head>
<body>
<img src="vaca.jpg" usemap="#vaca_id">
<map name="vaca_id">
<area
href="ex1.html"
shape=polygon
coords="220, 180, 250, 180, 250, 330"
title="rasol">
<area href="ex2.html" shape=rect coords="300,
70, 400,170" title="antricot">
<area href="ex3.html" shape=circle coords="500,
150, 100" title="fleica">
</map>
</body>
</html>
Formulare
Formularele sunt utilizate pentru transmiterea datelor ctre o aplicaie sau la o adres de e-mail.
Pentru a insera un formular, se utilizeaz elementul <form> mpreun cu atributele specifice.
Atributul action al elementului <form> stabilete destinatarul datelor transmise de ctre formular
(aplicaie pe partea de server sau adres e-mail).
Page 26
Atributul method al elementului <form> determin metoda prin care datele sunt transmise de ctre
formular (metoda GET adaug datele la adresa URL, metoda POST transmite datele ntr-o tranzacie separat.)
Atributul enctype al elementului <form> determin metoda de codificare utilizat la transmiterea
datelor (text/plain utilizat pentru trimiterea datelor prin pot electronic, multiform/form-data utilizat
pentru trimiterea imaginilor sau a altor fiiere ctre server).
Putei aduga tipuri diferite de elemente de formular preciznd diferite valori pentru atributul type al
elementului <input>: text pentru cmpuri de text, password pentru parole, checkbox pentru casete de validare,
radio pentru butoane radio, file pentru ncrcarea de fiiere, button pentru butoane generice, submit pentru
butoane de tip transmitere, etc.
Elementul <select> v permite s alegei dintr-o list de opiuni definite cu elementul <option>.
<html>
<head> </head>
<body>
<form
name="f1"
method="POST"
enctype="text/plain"
action=mailto:dragos.niculae@upb.ro>
Nume: <input type="text" name="nume"> <br>
Prenume: <input type="text" name="prenume">
<br>
Sex: <select name="sex">
<option value="1">Masculin</option>
<option value="2">Feminin</option></select>
Click pentru trimitere: <input type="submit">
</form>
</body>
</html>
Page 27
Cadre
Cadrele sunt utilizate pentru afiarea simultan a mai multor pagini web n aceeai fereastr de
browser.
Cadrele se definesc utiliznd elementul <frame> n interiorul etichetei <frameset>, care nlocuiete
elementul <body>.
Atributele cols i rows ale elementului <frameset> v permit s mprii fereastra browserului n cadre
verticale i orizontale.
Elementul <frameset> are i alte attribute, cum ar fi border (ataeaz o bordur), bordercolor (atribuie
o culoare bordurii), frameborder (stabilete vizibilitatea bordurilor).
Elementul <frame> are atribute similare, cum ar fi bordercolor i frameborder, pe lng acestea ar mai
fi marginheight i marginwidth (care definesc spaiul alb dintre coninut i marginile cadrului), noresize
(dezactiveaz redimensionarea cadrelor cu ajutorul mouse-ului), scrolling (ataeaz bare de derulare) i src
(definete adresa URL a paginii care va fi ncrcat n respectivul cadru).
<html>
<head> </head>
<frameset cols="210,*,20%" frameborder ="yes">
<frame src="ex16.html" scrolling="yes" noresize>
<frameset rows="100,*" >
<frame src="ex28.html" scrolling="yes">
<frame src="ex26.html" scrolling="yes">
</frameset>
<frame src="ex31.html">
</frameset>
</html>
Introducere n CSS
CSS nseamn Cascading Style Sheets (foi de stil n cascad) i v permite s mbuntii prezentarea
unei pagini web.
O foaie de stil const ntr-o serie de reguli. O regul este definit de un selector (care precizeaz unde
se aplic regula) i o declaraie. Declaraia este o serie de perechi proprietate:valoare.
Pentru a defini un stil in-line, precizai proprietatea style a unui element HTML. Pentru a defini un stil n
interiorul unui document HTML, utilizai un element <style> plasat n interiorul etichetei <head>. Pentru a
Page 28
defini un stil ntr-un fiier extern, creai o foaie de stil i, utiliznd un element <link> plasat n interiorul
elementului <head>, cerei browserului s afieze documentul care face referire la foia de stil.
Atributele obligatorii pentru elementul <link> sunt: rel cu valoarea stylesheet, type cu valoarea text/css
i href care are ca valoare adresa URL a fiierului care conine foaia de stil.
<html>
<head> </head>
<body>
<h3 style="font-size:24pt; font-style:italic"> Un
titlu de 24 italic.</h3>
<img
src="vaca.jpg"
width=250
style=
"cursor:move>
</body>
</html>
<html>
<head> <style>
p {font-size:18pt; background:red}
ol {background : yellow; color : green}
</style>
</head>
<body>
<p>Acesta este un paragraf formatat.
<ol>Urmeaza o lista ordonata
<li>ala
<li>bala
<li>portocala</ol>
</body>
</html>
Page 29
<html>
<head>
<LINK REL= "stylesheet" TYPE= "text/css" HREF=
"stil.css">
<title>Pagina de text stilizat</title>
</head>
<body>
<p>Acesta este un paragraf</p>
<table width="100%" border="1">
<tr>
<td align="left">Nume</td>
<td align="left">Prenume</td>
<td align="left">Telefon</td>
<td align="left">E-mail</td>
<li>Program dupamiaza</li>
.
</ul>
</body>
</html>
Page 30

Curs2 HTML PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs2 HTML PDF

Încărcat de

Drepturi de autor:

Formate disponibile

CURS 2

independena de platform nseamn c un document poate fi afiat n mod asemntor pe

seciunea de antet <head> </head>;

corpul documentului <body> </body> - ce cuprinde coninutul propriu-zis al paginii HTML.

Stiluri pentru blocurile de text

Stiluri de text pot fi imbricate (ex9):

Textul din interiorul unui bloc <u></u> va fi afiat subliniat (ex13):

Etichetele <sub> i <sup>

align valori posibile left, right, center;

size reprezint grosimea liniei n pixeli (valoarea implicit 2);

color valoarea implicit este black (ex19).

align cu valorile posibile left,right, center, justify;

style, onclick etc (ex20).

Alb este #ffffff un amestec al tuturor culorilor.

Atributele elementului <body>

bgcolor definete culoarea de fundal a paginii web;

text definete culoarea textului din pagina web. (ex22)

Eticheta <basefont> sau <font>

color definete culoarea literei;

size definete dimensiunea literei (1,2,...,7 sau +1, +2,...-1,-2).

1 pentru cifre arabe (1, 2, 3,) valoare prestabilit;

a pentru litere mici (a, b, c,);

A pentru litere mari (A, B, C,);

i pentru cifre romane scrise cu litere mici (i, ii, iii,);

Liste ordonate i neordonate imbricate

un element <table></table> - acesta este cadrul pentru celelalte elemente;

etichete <tr> - care definesc linii din tabel;

etichete <td> - care definesc celulele din tabel. (ex30)

bordercolor pentru a seta culoarea bordurii unui tabel (red, #0000ff);

align pentru a preciza poziia tabelului n pagin (left, center, right);

GIF (Graphic Interchange Format);

JPEG (Joint Photographic Experts Group);

PNG (Portable Network Graphics);

TIFF (Tagged Image File Format);

BMP (BitMaP format).

Alte atribute ale etichetei <img> sunt:

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