Html 9

l) Modele de stiluri

In specificatiile HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets – CSS). Pana la acea data forma, culoarea si marimea textului puteau fi date cu instructiunea “font” si cu atributele sale: “face”, “color”, “size”.
Modelele de stiluri pot fi aplicate aproape oricarei instructiuni, folosind atributele din tabelul de mai jos.
Modelele de stiluri pot fi aplicate in mai multe moduri:
a) intern: atributele sunt specificate in interiorul marcajului de deschidere al fiecarei instructiuni; este cel mai neeconomic mod.
b) specificate in antetul fisierului: specificam la inceputul unui fisier diverse atribute pentru mai multe stiluri de text; acele stiluri le putem folosi de mai multe ori in corpul acelui fisier fara a mai specifica si atributele.
c) extern: atributele pentru diverse stiluri sunt specificate intr-un fisier special (pe care il putem construi cu un editor de texte (Notepad) si il salvam ca fisier de tip text cu extensia .css ) astfel incat pot fi apelate de orice alt fisier de pe site. Este modul cel mai recomandat, mai ales pentru site-uri mari.
Putem face chiar ca un anumit stil sa poata fi aplicat numai cu o anumita instructiune, iar altele sa poata fi aplicate cu mai multe instructiuni. Unele atribute din tabelul de mai jos pot fi specificate si sub o forma prescurtata; se poate intampla ca unele caracteristici specificate de dvs. sub forma prescurtata sa nu functioneze – folositi forma explicita, neprescurtata.

Atribut	Descriere	Valori
background	imagini sau culori de fundal	URL-ul (imaginii) sau culori date prin nume sau valoare RGB
color	culoarea textului	nume sau valoare RGB
font-family	tipul fontului	numele fontului sau al familiei de fonturi
font-size	dimensiunea fontului	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
font-style	text cursiv	normal, italic
font-weight	grosimea fontului	extra-light, light, demi-light, medium, demi-bold, bold, extra-bold
line-height	distanta dintre liniile de baza ale randurilor	data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)
margin-left	distanta fata de marginea din stanga a paginii	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-right	distanta fata de marginea din dreapta a paginii	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-top	distanta fata de textul precedent sau fata de marginea de sus a paginii	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
text-align	alinierea textului	left(stanga), center(centru), right(dreapta), justify
text-decoration	evidentierea textului	none(nimic), underline(subliniat), italic(cursiv), line-through(taiat)
text-indent	distanta primului rand fata de marginea din stanga	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-style	tipul chenarului	none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width	grosimea chenarului	data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-color	culoarea chenarului	nume sau valoare RGB
72 pt=1 inch = 25,4 mm; un font de dimensiunea 14pt inseamna ca sunt 14 puncte intre partea superioara a literei M sau h si partea inferioara a literei g sau y

Se folosesc si instructiunile:
Instructiune	Atribute	Descriere
< style > < / style >	-	specifica in antet caracteristicile stilurilor
	type=	in general Cascading Style Sheets: “text/css”
< span > < / span >	-	marcaj generic, numai pentru stiluri
	class=	specifica un anumit stil
	id=	specifica un anumit stil

Html 8 – Facilitarea gasirii paginii de catre motoarele de cautare

k) Facilitarea gasirii paginii de catre motoarele de cautare

Instructiune	Atribute	Descriere
<title> </title>	-	- marcajele pereche TITLE – aici dam titlul: cateva cuvinte sugestive despre continutul paginii – aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita sau listata ca rezultat al unei cautari, ele apar ca nume al paginii.
<meta atribute>	name =	keywords, description, author, …
	content =	descrie valoarea lui name

In general in antetul unei pagini web, intre marcajele <HEAD> si </HEAD>, exista mai multe marcaje META, cu atribute name – content perechi. Exemplu:

<html><head><title>Titlul dorit</title>

<meta content=”text/html; charset=windows-1252″ http-equiv=Content-Type>

indica browserului ca este un fisier HTML; charset stabileste tipul de caractere (in general windows-1252), dar exista si altele

<meta content=”o lista de cuvinte, separate prin virgula”>

pagina va fi listata de un motor de cautare (la care ati inscris deja site-ul) in cazul unei cautari in care s-au folosit cuvinte din aceasta lista

<meta content=”O fraza care descrie pe scurt continutul paginii”>

in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la content=”o fraza care descrie …”); daca nu avem in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o eventuala cautare

<meta content=”numele dvs., e-mail, etc”>

nu este neaparat necesara

</head><body> …. </body></html>

Html 7

j) Liste

Instructiune	Atribute	Descriere
liste de tip definitie
<dl> </dl>	-	lista de tip definitie
<dt>	-	termen de definitie
<dd>	-	descriere de definitie
liste neordonate ( marcate )
<ul atribute> </ul>	-	lista neordonata (marcata)
	type=	forma marcajului: circle, square, disc (implicit)
<li>	-	element de lista
liste ordonate ( numerotate )
<ol atribute> </ol>	-	lista ordonata (numerotata)
	type=	tipul numerotarii: A, a, I, i, 1 (implicit)
	start=	cu a cat-a valoare incepe (implicit cu prima)
<li>	-	element de lista

Combinatii de liste – exemplu

Sursa :

Rezultat :

<ol> <li>termen 1         <ul>         <li>termen1-1 :                <dl>                <dt>termen1-1a                <dd>descriere termen1-1a                <dt>termen1-1b                <dd>descriere termen1-1b                </dl>         <li>termen1-2 :                <dl>                <dt>termen1-2a                <dd>descriere termen1-2a                <dt>termen1-2b                <dd>descriere termen1-2b                </dl>         </ul> <li>termen 2         <ul>         <li>termen2-1 :                <dl>                <dt>termen2-1a                <dd>descriere termen2-1a                <dt>termen2-1b                <dd>descriere termen2-1b                </dl>         <li>termen2-2 :                <dl>                <dt>termen2-2a                <dd>descriere termen2-2a                <dt>termen2-2b                <dd>descriere termen2-2b                </dl>         </ul> <li>termen 3 </ol>

termen 1 termen1-1 : termen1-1a descriere termen1-1a termen1-1b descriere termen1-1b termen1-2 : termen1-2a descriere termen1-2a termen1-2b descriere termen1-2b termen 2 termen2-1 : termen2-1a descriere termen2-1a termen2-1b descriere termen2-1b termen2-2 : termen2-2a descriere termen2-2a termen2-2b descriere termen2-2b termen 3

Lista de tip definitie – exemplu

Sursa :	Rezultat :
<dl> <dt>termen1 <dd>descriere termen1</dl> <dt>termen2 <dd>descriere termen2</dl> <dt>termen3 <dd>descriere termen3</dl> </dl>	termen1 descriere termen1 termen2 descriere termen2 termen3 descriere termen3

Liste neordonate – exemple

Sursa :	Rezultat :	Sursa :	Rezultat :
lista 1 – fara type – implicit		lista 2 – cu
<ul> <li>termen 1 <li>termen 2 <li>termen 3 </ul>	termen 1 termen 2 termen 3	<ul > <li>termen 1 <li>termen 2 <li>termen 3 </ul>	termen 1 termen 2 termen 3
lista 3 – cu		lista 4 – cu
<ul > <li>termen 1 <li>termen 2 <li>termen 3 </ul>	termen 1 termen 2 termen 3	<ul > <li>termen 1 <li>termen 2 <li>termen 3 </ul>	termen 1 termen 2 termen

Html 6

f) Imagini

Instructiunea	Atribute	Descriere
< img atribute >	-	marcajul de includere a imaginii
	src = ” url “	adresa fisierului grafic (url absolut sau relativ)
	alt = ” text “	textul alternativ care este afisat celor care navigheaza fara imagini
	align =	alinierea imaginii in pagina: right (dreapta), left (stanga = implicit) alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
	height =	inaltimea imaginii (in pixeli sau %)
	width =	latimea imaginii (in pixeli sau %)
	border =	marimea chenarului din jurul imaginii (in pixeli)
	hspace =	spatiu pe orizontala in jurul imaginii (in pixeli)
	vspace =	spatiu pe verticala in jurul imaginii (in pixeli)

Folositi intotdeauna atributele width si height (exprimate in pixeli): ele rezerva in pagina un spatiu cu latimea si inaltimea specificate si permit afisarea paginii si a textului inainte de receptionarea imaginii de la server.

g) Cadre

Cu ajutorul cadrelor putem imparti ecranul in mai multe zone si alegem ce fisier sa apara in fiecare zona. Cel mai folosita este impartirea in 2 coloane: in coloana din stanga, mai ingusta, sunt legaturile, iar in zona din dreapta se afiseaza fisierele accesate.

Instructiune	Atribute	Descriere
< frameset atribute > < / frameset >	-	definirea impartirii paginii in cadre
	cols =	numarul si marimea relativa a coloanelor
	rows =	numarul si marimea relativa a liniilor
	border =	marimea chenarului (pixeli); in general nu dorim chenar si folosim border =0 impreuna cu framespacing =0 si frameborder =no, pentru ca nu stim ce browser (cu ce valori setate ca implicite) foloseste vizitatorul, deci mai bine le specificati dvs.
	frameborder =	specifica daca cadrul definit cu FRAMESET are sau nu chenar : yes sau no; implicit yes
	framespacing =	marimea spatiului dintre cadre (pixeli); daca il folositi impreuna cu border, dar cu valori diferite, pentru unele browsere primeaza valoarea lui framespacing (ex. IE.5) iar pentru altele valoarea lui border (ex. Netscape 4.51)
< frame atribute >	-	definitia unui cadru
	src = ” url “	sursa cadrului
	name =	numele cadrului, utilizat de marcajul < a href = “url” target = nume >
	scrolling =	optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit “auto”
	noresize	pentru a nu redimensiona tragand de chenar (doar daca are)
	marginheight =	spatiu deasupra si sub un cadru (pixeli)
	marginwidth =	spatiu la stanga si la dreapta unui cadru (pixeli)
< noframes > < / noframes >	-	sectiunea de pagina afisata browserelor care nu pot interpreta cadre
< iframe atribute > < / iframe >	-	cadru intern (doar IE)
	src = ” url “	sursa cadrului
	name =	numele cadrului, utilizat de marcajul < a href = “url” target = nume >
	height =	inaltimea cadrului inglobat (pixeli sau %)
	width =	latimea cadrului inglobat (pixeli sau %)
	frameborder =	specifica daca cadrul definit cu IFRAME are sau nu chenar (yes sau no; implicit yes)
	scrolling =	optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit “auto”

h) Caractere speciale

Pentru a face sã aparã în browser caracterul din coloana Caracter, in codul sursã trebuie sã avem Cod HTML

Caracter	Cod HTML	Semnificatie
&	&	ampensand
<	&lt;	mai mic (less than)
>	&gt;	mai mare (greater than)
Pentru a obtine majuscule, le folosim in codul sursa in locul literelor mici . Ex. : &Acirc; = Â
á	&aacute;	a mic cu accent ascutit (acute)
à	&agrave;	a mic cu accent grav
â	&acirc;	a mic cu accent circumflex
ã	&atilde;	a mic cu tildã
ä	&auml;	a mic cu doua puncte (umblaut)
å	&aring;	a mic cu inel (ring)
ç	&ccedil;	c mic cu sedilã
ñ	&ntilde;	n mic cu tildã
ø	&oslash;	o mic barat (slash)
ß	&szlig;	s-z mic ligaturat
¿	&iquest;	semnul de întrebare invers
£	&pound;	lira sterlinã
¢	&cent;	cent
©	&copy;	simbolul de copyright
®	&reg;	simbolul de marcã înregistratã
	&nbsp;	forteazã spatii multiple; chiar dacã în codul sursã avem mai multe spatii, browserul afiseazã unul singur; se poate folosi pentru a scrie un paragraf cu aliniat
“	&quot;	ghilimele
&scedil;	&scedil;	nu am obtinut s cu sedilã; afiseazã exact codul sursã
&tcedil;	&tcedil;	nu am obtinut t cu sedilã; afiseazã codul sursã

Html 5

e) Harti de imagini

Sunt imagini care sunt “impartite” in mai multe zone, in functie de zona pe care se executa click, browserul afiseaza o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click in zona Brasov se incarca o pagina care descrie diverse obiective turistice din judet si/sau contine o imagine a hartii judetului, pe care definim alte zone in jurul localitatilor, iar un click pe o localitate ar duce la alta pagina care descrie obiectivele turistice din localitate.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate se poate folosi o imagine care reprezinta toate butoanele – mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.
Pana aici numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va intelege mai nimic (putem totusi folosi marcajul alt de specificare a textului alternativ pentru imagini).

Instructiune	Atribute	Descriere
< img atribute >	-	marcaj de includere a imaginilor
	ismap	specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
	usemap = ” nume_harta “	specifica harta de imagine la client
	lowscr = ” url “	imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
< map atribute > < / map >	-	specifica regiunile unei harti de imagine la client
	name = ” nume_harta “	numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)
< area atribute >	-	defineste o regiune a unei harti de imagine
	shape = ” forma “	forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon) !!! Netscape 4.51 nu a “inteles” decat circle, nu si circ
	coords = ” coordonate “	coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii: - pentru rect (dreptunghi) se dau coordonatele colturilor din stg. sus si dr. jos ale regiunii - pentru circ (cerc) se dau coordonatele centrului cercului si raza - pentru point (punct) se dau coordonatele punctului - pentru poly (poligon) se dau coordonatele colturilor poligonului
	href = ” url “	URL – ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
	alt = ” text “	textul alternativ asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini !!! Netscape 4.51 nu a afisat decat primul text dat cu alt