Tutorial 2007 prof. Dogaru Simona, Alba Iulia

În mediul Design efectuăm editarea propriu-zisă a paginii web. Adică o putem privi ca pe o pagină din Word în care introducem texte, imagini, tabele, diagrame, simboluri, grafice şi încă ceva specific unei pagini web : link-uri.

Link-urile sunt legături către alte pagini. Ele pot fi reprezentate prin texte sau imagini.

În mediul Split putem vizualiza codul sursă din spatele paginii web (care nu este vizibil vizitatorului paginii respective) în timp real. Orice pagină web (prin pagina web înţelegem fişier) trebuie să înceapă cu tag-ul <Html> şi se va încheia cu </Html> .

Prin Tag înţelegem o etichetă cuprinsă între parantezele unghiulare <.....> şi care reprezintă un anumit efect aplicat textului, imaginii sau asupra oricărei componente a paginii. < TAG > - marchează începutul unui bloc iar </ TAG > - marchează sfârşitul blocului.

În mediul Source putem vizualiza numai codul sursă al paginii create de noi.

Observaţie:

Înainte de a începe crearea unor pagini web trebuie să aveţi în vedere următorul lucru: Toate fişierele create trebuie salvate într-un singur director iar întotdeauna fişierul de plecare va avea numele index.html

Cuvinte de reţinut

- Tag - folosit pentru a specifica regiuni ale documentului HTML pe care le va interpreta ulterior browser-ul. Tag-urile vor arăta astfel: <tag>

- Element - este un tag complet, având un <tag> de deschidere şi unul de închidere </tag>

- Atribut - este folosit pentru a modifica valoarea unui element în HTML. De obicei un element are mai multe atribute.

Excepţii - Tag-uri care nu au nevoie de închidere

Există câteva tag-uri care nu îndeplinesc modelul arătat mai sus. Cel mai simplu exemplu este "line break" <br/> . Line break se foloseşte pentru a spune browser-ului că vrem să coborâm cu o linie mai jos, fără însă a încheia paragraful.

Alte tag-uri care urmează aceeaşi regulă ar mai fi:

<img src="../…./image.jpg" /> -- tag pentru poze--

<br /> -- tag pentru linie nouă--

<input type="text" size="20" /> -- elemente de formular --

Etichete de marcare

Orice document HTML este structurat în două părţi: Antetul (HEAD) şi corpul (BODY) .

Eticheta <HTML>…</HTML>

Acest element spune programului tău de explorare că fişierul conţine informaţii codate în HTML. Extensia html sau htm indică, de asemenea acest lucru, şi trebuie utilizată nefiind singura modalitate de a descrie documente web.

Eticheta <HEAD>...</HEAD>

"Head" nu are nici o funcţie vizibilă dar poate oferi browser-ului informaţii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.

Elementul de antet ("head") identifică prima parte a documentului codat HTML, care conţine diverse informaţii şi setări globale, cum ar fi:

Marcajul TITLE

Elementul "title" conţine numele documentului nostru şi identifică conţinutul său într-un context global. Acesta este afişat în pe bara de titlu a ferestrei navigatorului, aşa încât alegem ceva relevant, unic şi relativ scurt. Acest titlu se crează odată cu salvarea documentului: meniul File – Save. În caseta de dialog se tastează numele paginii web şi se apasă butonul OK. Se alege folderul de lucru şi apoi apăsăm pa butonul Save.

Furnizarea de informaţii relevante referitoare la document

< META Http-equiv=” refresh | reply-to | keywords” Name = “ author | description | copyright “ Content = “ sirContinut “ >

Cea mai folosită valoare a atributului http-equiv este keywords, pentru a preciza cuvintele cheie în funcţie de care documentul este indexat de către motoarele de căutare:

Exemplu:

< META Http-equiv=” keywords” Content = “ flori masina actori “ >

Atributul Name se utilizează pentru precizarea informaţiilor referitoare la autor, o scurtă descriere a conţinutului documentului şi informaţiile privind drepturile de autor.

Eticheta <BODY>…</BODY>

A doua şi cea mai mare parte a documentului tău HTML este corpul, care conţine textul propriu-zis al documentului, afişat în zona de text a ferestrei exploratorului. Etichetele explicate în continuare se utilizează în corpul documentului HTML.

Atribute generice

Atributele sunt folosite pentru a personaliza tag-urile. Dacă dorim să redimensionăm o imagine sau un tabel sau să schimbăm culoarea de fond o vom face cu ajutorul atributelor.

Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre acestea pe măsură ce prezint un nou tag. Acum însă vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.

Atributele se introduc între parantezele unghiulare (< >) ale tag-ului de deschidere.

Atributul	Opţiuni	Explicaţie
align	right, left, center	Aliniere orizontală
valign	top, middle, bottom	Aliniere verticală
bgcolor	numeric, hexadecimal, sau valoare RGB	Un background în spatele elementului
background	URL	O imagine în spatele elementului
id	Definit de user	Numeşte un element care se va folosi cu CSS
class	Definit de user	Clasifică un element care se va folosi cu CSS
width	Valoare numerică	Specifica lăţimea unui tabel, imagine, sau căsuţe de tabel.
height	Valoare numerică	Specifica înălţimea unui tabel, imagine, sau căsuţe de tabel.
title	Definit de user	"Pop-up". Afişează un titlu pentru un element stabilit.

EDITAREA TEXTELOR

În mediul Design vom realiza editarea textelor şi apoi deschidem în modul Split sau Source şi observăm că acest text apare cuprins între tag-urile <body> .... </body> .

Titluri

HTML are şase nivele de titluri, numerotate de la 1 la 6, nivelul 1 fiind cel mai proeminent. Titlurile sunt afişate pe ecran în fonturi mai mari şi/sau mai îngroşate decât textul obişnuit. Primul titlu ar oricărui document va fi etichetat cu <H1>.

Sintaxa unui element de titlu este:

<Hy>Textul titlului </Hy>

unde y este un număr între 1 şi 6, indicând nivelul titlului.

Să nu săriţi peste un nivel de titlu în documentele pe care le scrieţi. De exemplu, să nu începeţi cu titlul de nivel unu (<H1>) şi apoi să treceţi direct la nivelul 3 (<H3>).

Paragrafe

Spre deosebire de majoritatea editoarelor de texte, returul de car (Enter) nu este important. Aşadar, HTML nu ţine cont de cât de lung este un rând din textul tău şi, în plus, mai multe spaţii vor fi transformate (la afişare) într-unul singur. Un program de explorare nu va interpreta trecerea la un nou rând din cadrul textului tău, decât dacă apare marcajul <P>.

Paragraful este un element de bază în editare de text. Tag-ul pentru paragraf va plasa o linie goală deasupra şi una sub text pentru a fi evidenţiat, iar browser-ul îl va interpreta ca atare.

Astfel, de pildă, textul unui paragraf :

<P Align = „left | right | center | justify”> …………. Aici apare textul ……………</P>

Aşadar, trebuie indicate paragrafele cu marcajele <P>. Un program de explorare ignoră orice identare sau grup de spaţii în cadrul textului sursă. Fără elementele <P>, documentul devine un mare paragraf.

De exemplu, încercaţi următorul exemplu:

<html>

<head>

<TITLE>Un exemplu simplu</TITLE>

</head>

<body>

<H1>HTML este usor de invatat </H1>

<P>Bine ai venit in lumea HTML! Acesta

este primul paragraf. Chiar daca e asa de

scurt, este totusi un paragraf! </P> <P>Iar acesta

este cel de al doilea paragraf.</P>

</body>

</html>

Pentru păstrarea lizibilităţii într-un fişier HTML, puneţi titlurile pe linii separate, folosiţi linii goale acolo unde vă ajută să identificaţi începutul unei noi secţiuni şi folosiţi paragrafe separate cu linii goale, în completarea etichetelor <P>. Acestea vă vor ajuta la editarea documentului, chiar dacă exploratorul le va ignora.

De notat că eticheta de final </P> poate fi omisă. Aceasta deoarece programul de explorare înţelege că întâlnirea unei noi etichete <P> implică şi finalul paragrafului precedent.

Utilizând atributul ALIGN între <P> şi </P> poţi alinia după dorinţă conţinutul respectivului paragraf. Iată un exemplu, în care textul apare aliniat pe centru:

<P align=center>

Acesta este un paragraf centrat.

</P>

Efectul va fi:

Acesta este un paragraf centrat.

Linebreak

Lasă un spaţiu mai mic în comparaţie cu cel de paragraf. Se foloseşte într-un paragraf sau la sfârşitul unei scrisori pentru a evidenţia o semnătură.

<p>

Popescu Ion <br />

Bvd. Revoluţiei 1989, Nr. 47 <br />

Alba Iulia, România <br />

</p>

<p>

Multumesc anticipat,<br />

<br />

Popescu Ion <br />

Manager

</p>

Va avea ca efect:

Popescu Ion

Bvd. Revoluţiei 1989, Nr. 47

Alba Iulia, România

Multumesc anticipat,

Popescu Ion
Manager

Liste

HTML acceptă liste numerotate, nenumerotate şi de definiţie. Putem avea şi liste imbricate una în alta, dar folosiţi aceasta cu cumpătare, deoarece mai multe liste imbricate pot fi greu de urmărit.

Liste nenumerotate

Pentru a face o listă nenumerotată, cu buline în faţă, procedaţi astfel:

1. începeţi cu o etichetă <UL> ("unnumbered list");

2. introduceţi elementele listei precedate de eticheta <LI> ("list item") (nu e nevoie de marcaj final </LI>);

3. încheie lista cu eticheta <UL>.

Iată un exemplu simplu cu trei elemente în listă:

<UL>

<LI> mere

<LI> pere

<LI> portocale

</UL>

Rezultatul este:

· mere

· pere

· portocale

Un item al listei poate conţine mai multe paragrafe, pe care le veţi marca cu <P>.

Se poate introduce atributul TYPE ce va specifica elementul grafic dorit (cerc, disc sau pătrat) , astfel:

<LI Type = „valoare”> ….text…. </LI>

Valoarea atributului Type poate fi:

- CIRCLE – afişează un cerc în faţa textului

- DISC - afişează un disc (opţiune implicită)

- SQUARE - afişează un pătrat.

Liste numerotate

O listă numerotată (numită şi listă ordonată) este identică cu o listă nenumerotată, doar că în loc de marcajul <UL> se foloseşte <OL> ("ordered list"). Itemii sunt marcaţi tot cu eticheta <LI>. Selectăm cuvintele ce vor forma itemii listei şi apoi din meniul Format alegem List şi stilul dorit (vezi imaginea). Acelaşi efect îl obţinem prin selectarea comenzii corespunzătoare de pe toolbar.

Următorul cod HTML:

<OL>

<LI> mere

<LI> pere

<LI> portocale

</OL>

produce următorul rezultat formatat:

1. mere

2. pere

3. portocale

Liste de definiţie

O listă de definiţie (marcată prin <DL>) constă, de obicei, din alternarea unui termen de definit (marcat cu <DT>) şi o definire a definiţiei (<DD>). În general, programele de navigare formatează definiţiile pe un nou rând.

Iată un exemplu:

<DL>

<DT> HTML

<DD> HTML, Limbajul de marcare hipertext,

este folosit pentru descrierea documentelor

din World Wide Web.

<DT> WEB

<DD> WEB vine de la World Wide Web,

pânza de paianjen mondiala

</DL>

Rezultatul va fi:

HTML

HTML, Limbajul de marcare hipertext, este folosit pentru descrierea

documentelor din World Wide Web.

WEB

WEB vine de la World Wide Web, "pânza de paianjen mondiala".

Elementele <DT> şi <DD> pot conţine mai multe paragrafe (foloseşte eticheta <P> în acest scop), liste sau alte informaţii.

Liste imbricate

Listele pot fi cuprinse una într-alta ca, de exemplu:

<UL>

<LI> Fructe de vara

<UL>

<LI> capsuni

<LI> visine

<LI> cirese

</UL>

<LI> Fructe de toamna

<UL>

<LI> mere

<LI> struguri

</UL>

Codul de mai sus va avea rezultatul:

Fructe de vara

· capsuni

· visine

· cirese

Fructe de toamna

· mere

· struguri

Rigle orizontale

Eticheta <HR> ("horizontal rule") produce apariţia unei rigle (linii) orizontale în fereastra navigatorului. O astfel de linie e necesară pentru a separa diferite secţiuni din documentul vostru. De exemplu, mulţi adaugă o astfel de linie la sfârşitul textului lor.

Puteţi stabili grosimea liniei, precum şi lungimea ei (procentul din lărgimea ferestrei programului de navigare). Meniul Insert- Horizontal Line.

Exemplul următor:

<HR SIZE = 2 Color =”culoare” WIDTH ="50%">

va afişa linia:

Specificarea culorii unui element se poate face astfel:

- prin precizarea numelui culorii : de exemplu red, black, lightblue, drakblue etc.

- prin utilizarea unui număr de 6 cifre hexazecimale (0 – 9 , A – F):

Color = “ #RRGGBB” . Orice culoare sau nuanţă de culoare poate fi obţinută prin combinarea unei cantităţi oarecare de roşu, verde şi albastru. Primele două cifre ale constantei RR arată cantitatea de culoare roşie, următoarele două cantitatea de verde şi ultimele două cifre arată cantitatea de albastru. De exemplu #FF0000 reprezintă culoarea roşie iar #00FF00 culoarea verde.

Indicaţie:

Transformările pe care le puteţi aplica asupra textelor sunt aceleaşi ca şi în programul Word. Fie cu ajutorul Toolbar-ului fie din meniul Format. Pentru a alege alinierea şi stilul fonturilor folosim toolbar-ul. Mai jos este reprezentat un exemplu în modul Split.

Observaţi tag-urile care apar în plus în funcţie de setările făcute.

Tag-uri diverse pentru fonturi

<b> ….</b> text îngroşat (bold)

<i>….</i> text aplecat (italic)

<u>….</u> text subliniat

<sub>…..</sub> _{text afişat ca indice inferior}

<sup>….</sup> ^{text afişat ca indice superior}

<del>…</del> ~~text tăiat~~

<code>….</code> Computer Code Text

Programul ne oferă posibilitatea sa folosim fonturi de mărimea „medium” care se va ajusta în funcţie de mărimea ecranului. Pentru a le folosi se selectează textul şi din meniul Format alegem Size.

Tag-ul Preformating

Atunci când scriem un cod HTML vom introduce spaţii, tab-uri sau enter-uri pentru a ne putea orienta mai uşor în liniile de cod. Un browser însă va interpreta codul menţionat ca pe o singură linie de cod ignorând spaţiile şi tab-urile menţionate.

În acest sens avem tag-ul <pre> care facilitează afişarea în browser a formatării.

<pre>

Nume Utilizator        Parola Utilizator       ID Utilizator

</pre>

Va afişa:

Nume Utilizator        Parola Utilizator       ID Utilizator

Coduri de culori

Culorile acceptate în HTML se regăsesc în tabelul de mai jos:

Color	Hexa	Color	Hex	Color	Hex	Color	Hex
aqua	#00FFFF	green	#008000	navy	#000080	silver	#C0C0C0
black	#000000	gray	#808080	olive	#808000	teal	#008080
blue	#0000FF	lime	#00FF00	purple	#800080	white	#FFFFFF
fuchsia	#FF00FF	maroon	#800000	red	#FF0000	yellow	#FFFF00

Codul de culori RGB

Acest cod de culori nu este recomandat, deoarece Internet Explorer este singurul browser care suportă valorile RGB în HTML.

RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare între 0 (nu colorează deloc) şi 255 (în totalitate acea culoare). Am alăturat mai jos forma de scriere a culorilor in RGB. Dacă folosiţi un browser care nu este Internet Explorer nu veţi avea nici un rezultat.

bgcolor="rgb(255,255,255)"	White
bgcolor="rgb(255,0,0)"	Red
bgcolor="rgb(0,255,0)"	Green
bgcolor="rgb(0,0,255)"	Blue

Codul de culori hexazecimal

Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este compatibil în aplicaţiile web sau aplicaţii locale precum gimp, photoshop, corel, etc.

Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. Primele două caractere (RR) reprezintă culoarea roşu (Red), următoarele două (GG) culoarea verde (Green), iar ultimele două (BB) culoarea albastră (Blue).

bgcolor="#RRGGBB"

Sistemul hexazecimal conţine 16 valori formate din cifre de la zero la nouă şi apoi literele de la A la F. Prin combinarea lor se obţine un cod de culoare.

Un exemplu de cod hexazecimal ar fi: bgcolor="#FFAA33"

Sistemul hexazecimal este compatibil cu majoritatea browser-elor. Mai jos aveţi tabel cu codurile corespunzătoare culorilor. Codurile culorilor sunt prezentate în tabel prin cod scurt, pe care îl veţi interpreta astfel: 603 este de fapt „#660033” sau F3C înseamnă „#FF33CC”.

*000	300	600	900	C00	*F00
*003	303	603	903	C03	*F03
006	306	606	906	C06	F06
009	309	609	909	C09	F09
00C	30C	60C	90C	C0C	F0C
*00F	30F	60F	90F	C0F	*F0F
030	330	630	930	C30	F30
033	333	633	933	C33	F33
036	336	636	936	C36	F36
039	339	639	939	C39	F39
03C	33C	63C	93C	C3C	F3C
03F	33F	63F	93F	C3F	F3F
060	360	660	960	C60	F60
063	363	663	963	C63	F63
066	366	666	966	C66	F66
069	369	669	969	C69	F69
06C	36C	66C	96C	C6C	F6C
06F	36F	66F	96F	C6F	F6F
090	390	690	990	C90	F90
093	393	693	993	C93	F93
096	396	696	996	C96	F96
099	399	699	999	C99	F99
09C	39C	69C	99C	C9C	F9C
09F	39F	69F	99F	C9F	F9F
0C0	3C0	6C0	9C0	CC0	FC0
0C3	3C3	6C3	9C3	CC3	FC3
0C6	3C6	6C6	9C6	CC6	FC6
0C9	3C9	6C9	9C9	CC9	FC9
0CC	3CC	6CC	9CC	CCC	FCC
0CF	3CF	6CF	9CF	CCF	FCF
*0F0	3F0	*6F0	9F0	CF0	*FF0
0F3	*3F3	*6F3	9F3	CF3	*FF3
*0F6	*3F6	6F6	9F6	*CF6	*FF6
0F9	3F9	6F9	9F9	CF9	FF9
*0FC	*3FC	6FC	9FC	CFC	FFC
*0FF	*3FF	*6FF	9FF	CFF	*FFF

Totuşi doar 22 dintre cele 216 culori sunt cu adevărat sigure şi nu vor fi modificate în reprezentare de către nici un browser. În tabelul de mai sus culorile cu adevărat sigure au fost reprezentate cu un asterix ( * ) în faţă.

Tabelul care le conţine numai pe acestea:

*000	*F00
*003	*F03
*00F	*F0F
*FF0	*FF3
*CF6	*FF6
*0F0	*6F0
*3F3	*6F3
*0F6	*3F6
*0FC	*3FC
*0FF	*3FF
*6FF	*FFF

INSERAREA TABELELOR

Inserarea unui tabel se realizează astfel: din meniul Table→Insert→ Table.

Editarea în tabel se execută ca şi în Word. Pentru diverse efecte vizuale marcăm tabelul şi din meniul Table→Table Properties alegem culoarea fundalului, a bordurii, grosimea bordurii, culori diferite pentru bordura care e mai luminoasă şi pentru cea mai întunecată , distanţa în interiorul şi dintre celulele tabelului.

Observaţie:

Este recomandat , ca atunci când dorim să edităm un text sub forma unei pagini de ziar, să-l introducem într-un tabel cu margini "invizibile" utilizatorului pentru a păstra forma de coloane.

"Anularea bordurii" o realizăm prin stabilirea bordurii la valoarea zero border=”0”:

<TR> - etichetă care delimitează o linie a tabelului

<TH> - delimitează capul de tabel, datele fiind scrise îngroşat

<TD> - delimitează o celulă a tabelului

Stabilirea unei poze pe fundal

În modul Design executăm click dreapta pe bara stare a programului pe tag-ul <table> şi alegem opţiunea Inline styles. În fila Background dăm click pe butonul Choose file şi alegem imaginea ce va constitui fundalul tabelului. Se vor stabili setăriledorite legate de poziţionare (vezi foto).

Tag-urile DIV şi SPAN

Tag-ul div creează secţiuni de blocuri în pagină, a căror formă şi grafică de conţinut pot fi manipulate pentru fiecare separat.

Exemplu de folosire a tag-ului <div> :

<div id="meniu" align="right" >

<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>

</div>

<div id="continut" align="left" bgcolor="white"> <h5>Titlu Aici </h5>

<p>Primul paragraf. Primul paragraf. Primul paragraf.</p>

</div>

HOME | CONTACT | ABOUT

Titlu Aici

Primul paragraf. Primul paragraf. Primul paragraf

Tag-ul div este mult mai uşor de folosit decât tag-ul table, de aceea vă recomand folosirea lui ori de câte ori este nevoie. Unul dintre motivele pentru care este uşor de folosit este introducerea noilor date cu facilitate.

În exemplul următor am adăugat câteva linii noi paginii exemplificate mai sus.

<div id="meniu" align="right" >
<a href="#">HOME</a> |
<a href="#">CONTACT</a> |
<a href="#">ABOUT</a> |
<a href="#">SITEMAP</a>
</div>

<div id="continut" align="left" >
<h5>Titlu Aici </h5>
<p> Primul paragraf. Primul paragraf. Primul paragraf.</p>
<h5 >Titlu 2 Aici </h5>
<p>Paragraful al doilea. Paragraful al doilea. Paragraful al doilea.</p>
</div>

Liniile roşii au fost adăugate după formatarea iniţială a paginii.

HOME | CONTACT | ABOUT |SITEMAP

Titlu Aici

Primul paragraf. Primul paragraf. Primul paragraf

Titlu 2 Aici

Paragraful al doilea. Paragraful al doilea. Paragraful al doilea

Un alt exemplu în care avem 2 div-uri: unul conţine un text iar celălalt o listă "<ul></ul>", fiecare div cu propria culoare de fundal, dimensiuni stabilite şi margini diferite.

<div style="width:250px; background:#33ccff; border:1px solid blue;" align=”justify”>

<i>Font-family</i> este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font

generic (de exemplu serif, sans-serif sau monospace). <br> In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.

</div>

Alt DIV

<div style="width:180px; background:#ff9933; border:5px outset #888888;">

<ul>

<li>Linie 1</li>

<li>Linie 2</li>

<li>Linie 3</li>

</ul>

</div>

Efectul va fi:

Cu tag-ul <span></span> puteţi adăuga stiluri grafice unei anumite porţiuni dintr-un context. Pentru aceasta trebuie folosit împreună cu proprietăţi CSS care pot fi adăugate printr-un atribut "style" în interiorul etichetei "<span>" .

În continuare avem un exemplu în care vom evidenţia anumite cuvinte dintr-un text. Pentru aceasta încadrăm cuvintele respective într-un tag span căruia îi adăugăm proprietăţile dorite.

Acesta este un exemplu de <span style="background:#009900; font-weight:bold;"> utilizare a unui tag </span> ce va evidentia o parte din text.

Am introdus porţiunea din text ("utilizare a unui tag") într-un tag span pentru a-i putea aplica proprietăţile grafice dorite şi care nu afectează restul conţinutului.

Efectul va fi:

Acesta este un exemplu de utilizare a unui tag ce va evidentia o parte din text.

Tag-ul span poate fi folosit şi ca o clasă pentru CSS. Astfel, proprietăţile adăugate elementului span într-o foaie de stil vor fi transferate tuturor elementelor din pagină care sunt încadrate în tag-uri "<span></span>".

Exemplu:

<html>

<head>

<title>Titlul</title>

<style type="text/css">

span {

border:2px solid red;

color:#009900;

}

</style>

</head>

<body>

<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4>

<ul>

<li>Linia 1</li>

<li><span> Linie 2, in span </span></li>

<li>Linia 3</li>

<li><span> Linie 4, in span </span></li>

<li>Linia 5</li>

</ul>

</body>

</html>

Efectul va fi:

Fiindcă am adăugat elementul "span" în tag-ul "<style> </style>" din secţiunea HEAD a codului HTML, acest element va face referire la toate tag-urile "<span></span>" din document şi le va transmite aceleaşi proprietăţi.

APLICAREA UNUI FUNDAL PAGINII WEB

Pentru a aplica un fundal (background) paginii deschidem meniul Format→Page Color and Background iar aici avem 2 posibilităţi: sau să alegem o imagine de pe o unitate de disc sau să alegem o culoare. Sau direct de pe toolbar dăm click pe butonul corespunzător culorilor şi anume pe cel din spate. Primul buton este valabil pentru culoarea textelor. (vezi foto)

ELEMENTE MULTIMEDIA

Introducerea imaginilor

Elementele multimedia de pe paginile Web sunt fişiere separate de fişierul HTML ce conţine textul şi marcajele (tag-urile) pentru pagină. Se face referire la aceste elemente multimedia în cadrul fişierului HTML. Asta înseamnă că în momentul când browser-ul încarcă fişierul HTML, un tag special din acesta îi spune care fişier multimedia să-l aducă de pe server şi unde să-l afişeze pe pagină (dacă fişierul respectiv conţine informaţie vizuală).

Imaginile sunt pe departe cele mai răspândite elemente multimedia.

Fişierele imagine au extensiile lor în funcţie de format (cum sunt codificate punctele şi atributele lor în interiorul fişierului). Cele mai răspândite formate de imagine sunt GIF (cu extensia „.gif”) şi JPEG (cu extensia „.jpeg” sau „.jpg”), dar şi formatul PNG se răspândeşte rapid, mai ales pentru că oferă aceeaşi calitate ca GIF, dar la mărime mai redusă a fişierului imagine.

Observaţie:

Fişierele GIF codifică imaginea cu maxim 256 culori, JPEG pe 16 milioane culori sau 256 nuanţe de gri. Fişierele GIF sunt adecvate desenelor şi reclamelor desenate pe calculator, iar JPEG-urile sunt cea mai bună soluţie pentru fotografii.

Putem vorbi de imagini inline şi imagini externe. Imaginile inline sunt „în linie”, adică apar pe pagina Web împreună cu textul; dacă le includeţi în mijlocul unei propoziţii din fişierul HTML, ele vor apărea în mijlocul propoziţiei în pagină. Imaginile pot fi inserate în mijlocul oricărui text de afişat (text clar, paragrafe, subtitluri etc.). În continuare vom vorbi despre imagini inline.

Observaţie:

Sursa imaginii (fişierul) ce va fi introdusă în site trebuie copiată în acelaşi director de lucru.

Indicaţie :

Pentru a găsi mai repede şi mai uşor pozele ce le adăugaţi în site ar fi indicat să vă creaţi în directorul curent încă un director numit "imagini" şi acolo să vă copiaţi toate pozele pe care doriţi să le introduceţi în fişier.

Procedeul prin care încărcăm o imagine este : din meniul Insert→Image. După inserare, dacă deschidem modul Source observăm tag-ul

<img src=" ../nume_fişier.jpg">

unde "src=..." reprezintă calea până la fişierul poză.

Deschidem tab-ul Location şi în câmpul Image Location vom căuta fişierul imagine. Câmpul Alternate text reprezintă un text ce va apărea în cazul în care imaginea nu se încarcă.

Atributele width şi height

Cum se încarcă o pagină care conţine şi imagini? Se încarcă fişierul HTML, browser-ul îl scanează şi determină unde anume în pagină trebuie să afişeze elemente multimedia. Acest lucru nu constituie o problemă, dacă imaginile sunt mici. Dar dacă imaginile sunt de mărime mai mare (ca suprafaţă pe pagină), când a început să le „aducă” de pe server, trebuie să le aloce loc în pagină, asta însemnând redesenarea întregii pagini. Motivul este că browserul află mărimea imaginii numai când a început să aducă fişierul aferent.

O soluţie ar fi ca deja fişierul HTML să-i specifice browserului locul ocupat de imagine în pagină, inclusiv suprafaţa necesară. Astfel, browserul poate să afişeze toată pagina, cu locuri „goale” în locul imaginilor, şi, pe măsură ce reuşeşte să aducă fişierele aferente imaginilor, să le afişeze în locul prealocat. Această tehnică produce senzaţia că pagina se încarcă mai rapid. Este indicat să folosiţi aceste atribute la toate imaginile din paginile dvs.

Cele două atribute, „width” şi „height”, specifică lăţimea şi înălţimea imaginii, în pixeli (sau procente). Pentru a afla mărimea unei imagini deschidem tabul Dimension şi bifăm opţiunea Custom size ca să putem stabili lăţimea şi înălţimea imaginii.

Atunci când caseta Constrain este bifată şi modificaţi una dintre dimensiuni, cealaltă se ajustează automat pentru a păstra proporţiile.

Atributul align, border, vspace şi hspace

Dacă inserăm imaginea în mijlocul propoziţiei, va fi o singură linie de text pe pagină, în dreapta şi stânga imaginii. Dacă avem mai multe linii de text, înfăţişarea paginii nu va fi prea estetică.

În acest caz vom folosi atributul „align” care specifică poziţia orizontală a imaginii pe pagină, sau în funcţie de textul în care este inserat. Valorile standard sunt „top”, „middle”, „bottom”, „left”, „right” sau „center”. Primele trei („top”, „middle” şi „bottom”) se raportează la textul în care este inserată imaginea, iar „left” , „right” şi „center” poziţionează imaginea în pagină, pe orizontală, textul din dreapta (stânga) imaginii ocupând spaţiul disponibil de lângă imagine.

Dacă doriţi să centraţi imaginea pe orizontală în pagină, puneţi tot tag-ul <img> într-un alt bloc, de exemplu:

<p align=”center”><img src=”imaginea.gif”></p>.

Opţiunile de aliniere se aleg din lista derulantă Align Text to Image. Pentro o mai bună evideniere imaginea poate fi încadrată într-un chenar din câmpul Solid Border. Acest atribut desenează un chenar de grosime specificată (în pixeli) în jurul imaginii. Putem chiar forţa dispariţia chenarului (cu border=”0”), de exemplu în cazul imaginilor care sunt şi legături. Trebuie avut grijă când forţăm chenarul la zero, deoarece este singura indicaţie că imaginea este o legătură activă!

Putem specifica şi distanţa dintre text şi imagine (în pixeli), pe orizontală şi pe verticală din câmpurile Left and Right şi Top and Bottom. Ele generează atributele „hspace” şi respectiv „vspace”.

Imagini externe

Interpretăm următoarea linie de comandă:

<a href="Picture.jpg"><img src="Picture.jpg" width="238" height="179"></a>

Versiunea mare a imaginii din exemplu este o imagine externă („Picture.jpg”) fiindcă nu este afişată împreună cu celelalte elemente de pe pagină, ci numai la cererea explicită a utilizatorului (când acesta dă clic pe imaginea mică afişată în pagină). Observăm că în momentul când este activat (utilizatorul dă click pe versiunea mai mică), browserul încarcă şi afişează versiunea mare a imaginii, fără ca aceasta să fie conţinută explicit într-o pagină Web (browser-ul afişează imaginea, fără să fie nevoie de un fişier HTML).

De obicei, în pagină se afişează o versiune mai mică a imaginii, pentru ca încărcarea şi afişarea paginii să nu dureze prea mult. Dacă utilizatorul doreşte vizualizarea imaginii mai în detaliu, poate să încarce versiunea mai mare a imaginii.

Inserare fişiere audio / video

Tag-ul embed

Acest tag este caracteristic browserului Internet Explorer dar funcţionează şi pe Mozilla Firefox . Cu ajutorul acestui tag putem îngloba un element multimedia (audio sau video) în pagină.

<embed src="c:/muzica/m11.mid" autostart="true" hidden="true" loop="0">

Exemplul de mai sus înglobează fişierul „m11.mid” (fişier audio de tip MIDI) în pagină, fără ca acesta să afecteze vizual pagina (atributul “hidden”); muzica va porni automat la încărcarea paginii (atributul “autostart”). Autostart stabileşte dacă sunetul va începe imediat după încărcarea paginii web. Poate avea valoarea true sau false. Piesa se va repeta de “0” ori (atributul “loop”). Loop stabileşte dacă sunetul va fi repetat la nesfârşit. Poate avea valoarea true sau false. Volume poate avea orice valoare între 0 si 100.

<embed src="sound.mid" hidden="false" autostart="false" loop="false" volume="60" HEIGHT=60 WIDTH=144/>

Putem schimba valoarea atributului “hidden” în false, ca să apară şi butoane de control pentru audio. Această opţiune nu va funcţiona în Mozilla Firefox.

Tag-ul bgsound

Cu acest tag, propriu lui Internet Explorer, putem specifica un fundal sonor pentru pagina web. Folosim o piesă de fundal scurtă, şi fără să repetăm, ca să nu distragem atenţia utilizatorului.

<bgsound src="santana.mp3">

Dacă adăugăm şi opţiunea loop=”-1” atunci sunetul se va repeta la nesfârşit.

Elemente video

Tot în Internet Explorer putem include elemente video în pagină.

<img dynsrc="filmul.avi" src="filmul.gif" >

Acest exemplu afişează imaginea „filmul.gif” în alte browsere, dar în Internet Explorer, se porneşte fişierul video „filmul.avi”.

CREAREA UNUI LINK

Reamintim ce înţelegem prin link. Link-ul este o legătură către o informaţie conţinută în aceeaşi pagină sau spre o altă pagină web.

Link în aceeaşi pagină

Edităm în modul Design următorul text: Aici este un cuprins. În modul Source cuvântul cuprins va fi încadrat astfel: <a href="#jos">cuprins</a>. În modul Design , după cuvântul cuprins apăsăm pe Enter de mai multe ori ( 20-25 ori) şi apoi scriem: Am ajuns unde doream. În modul Source vom scrie sub acest text : <a name = "jos"></a> .

Vă propun să încercaţi să creaţi voi o legătură de jos în sus.

Deci un link (legătură) este reprezentat prin tag-ul <a href="#numele">..........</a> . În locul punctelor de suspensie poate fi un text, o literă sau chiar o imagine.

REŢINEŢI : Pentru un link creat în aceeaşi pagina "numele" poate fi orice text (denumire) dat de voi.

Aplicaţia Kompozer permite crearea unei ancore prin intermediul butonului de pe toolbar sau din meniul Insert alegem Named Anchor. Prosedăm după exemplul de mai sus.

- Introducem textul Aici este un cuprins.

- Apăsăm butonul şi în fereastracare se deschide tastăm numele ancorei (fiecare ancoră trebuie să aibă un nume unic).

- După ce daţi click pe OK o să apară un mic simbol cu o ancoră. Acesta nu va fi afişat atunci când deschidem pagina în browser.

Apăsăm de mai multe ori pe enter şi apoi introducem textul Am ajuns unde doream. Acum ne mai rămâne să introducem un link spre ancora creată.

- Deschidem meniul Insert – Link.

- În fereastra Link Properties introducem în caseta text Link Text am ajuns unde doream reprezentând textul ce va afişat sub formă de link , iar din lista derulantă corespunzătoare celei de’a doua casete alegem numele ancorei( va apărea şi semnul diez în faţă)

- La final click pe OK.

Vizualizarea în browser o puteţi realiza rapid apăsând pe butonul de pe toolbar.

Link spre altă pagină

Nu la fel se întâmplă atunci când vom crea un link către o altă pagină, aşa cum vom vedea în continuare. Fişierul în care am lucrat până acum îl veţi salva sub numele de "lectia1.htm" în directorul "pagina_mea". Acum veţi deschide un fişier nou şi-l veţi salva sub numele de "index" în acelaşi director. În el veţi edita următorul text :

Acesta va fi fişierul de plecare al primei pagini web. Pentru a deschide o altă pagină veţi da click aici.

Textul "click aici" vrem să fie un link. Marcăm textul "click aici" , apăsăm pe butonul drept al mouse-ului şi alegem Hyperlink. În căsuţa cu numele URL trebuie să scriem numele fişierului care dorim să se deschidă atunci când efectuăm un click al mouse-ului. Pentru a uşura munca ne folosim de al doilea buton din fereastra deschisă anterior poziţionat pe aceeaşi linie cu căsuţa URL. Apăsăm pe el şi în fereastra care se deschide trebuie să alegem fişierul care dorim să se deschidă. Îl căutăm în arbore. Să presupunem că aţi ales fişierul cu numele "lectia1.htm". Faceţi o probă cu butonul şi observaţi efectul. Dacă aruncăm o privire în modul Source, tag-ul care a apărut are forma

<a href="lectia1.htm" target="_blank"> click aici.</a>

unde:

target=” _blank” semnifică faptul că, la un click al mouse-ului pe link , noua pagină se va deschide într-o altă fereastră goală.

În continuare veţi crea un link din fişierul "lectia1.htm" către fişierul "index.htm". Deschideţi fişierul lectia1.htm şi editaţi în pagină , în partea de jos (sau oriunde în altă parte) cuvântul back. Acesta va fi legătura către fişierul index.htm. Creaţi singuri ! Vizualizaţi în browser efectul.

Acum lansaţi fişierul index.htm din directorul vostru cu browser-ul şi observaţi efectele.

Target-uri pentru link

Atributul target spune browser-ului dacă trebuie să deschidă noua pagină într-o nouă fereastră sau în aceeaşi fereastră.

target="	_blank"	Deschide o nouă fereastră
	_self"	Deschide pagina în aceeaşi fereastră
	_parent"	Deschide noua pagină într-un frame superior link-ului
	_top"	Deschide noua pagină în acelaşi browser anulând toate frame-urile

Deschiderea unei pagini de web într-o nouă fereastră a browserului

<a href="http://www.yahoo.com/" target="_blank" >Yahoo </a>

Pentru a crea o legătura către adresa de e-mail:

<a href="mailto:ioana@yahoo.com"> e-mail la Ioana</a>

Proprietăţile unui link

· Hyperlink : culoarea unui text care este un link

· Visited hyperlink : culoarea unui link care a fost vizitat (adică pe care l-am folosit)

· Active hyperlink : culoarea ultimului link vizitat

Inserarea simbolurilor

De exemplu pentru a introduce simbolul pentru copyright vom proceda astfel:

- începem cu semnul "end" - &

- în continuare vom scrie numele semnului - copy

- la sfârşit vom scrie simbolul "punct şi virgulă" - ;

Simbol	Definitie	Valuare Corelata
	Non-Breaking Space
<	Less Tha	<
>	Greater Than	>
"	Quotation Mar	"
¡	Inverted Exclamation	¡
¢	Cent	¢
£	English Pound	£
¤	Currency	¤
¥	Yen	¥
¦	Broken Vertical Bar	¦
§	Section	§
¨	Double Dot	¨
©	Copyright	©
ª	Feminine Ordinal Indicator	ª
« »	Left Angle Quotation Mark Right Angle Quotation Mark	« »
¬	Negation	¬
®	Registered Trademark	®
¯	Spacing Macron	¯
°	Degree(s)	°
±	Plus or Minus	±
²	Superscript 2	²
³	Superscript 3	³
´	Spacing Acute	´
µ	Micro	µ
¶	Paragraph	¶
·	Middle Dot	·
¸	Spacing Cedilla	¸
¹	Superscript 1	¹
º	Masculine Ordinal Indicator	º
¼	¼ Fraction	¼
½	½ Fraction	½
¾	¾ Fraction	¾
¿	Inverted Question Mark	¿
à	Grave Accent-Captial A	À
á	Acute Accent-Capital A	Á
â	Circumflex Accent-Capital A	Â
ã	Tilde-Capital A	Ã
ä	Umlaut Mark-Capital A	Ä
å	Ring-Capital A	Å
æ	Capital ae	Æ
ç	Cedilla-Capital C	Ç
è	Grave Accent-Capital E	È
é	Acute Accent-Capital E	É
ê	Circumflex Accent-Capital E	Ê
ë	Umlaut Mark-Capital E	&Eml;
ì	Grave Accent-Capital I	Ì
í	Acute Accent-Capital I	Í
î	Circumflex Accent-Capital I	Î
ï	Umlaut Mark-Capital I	Ï
ð	Capital eth	&mp;ETH;
ñ	Tilde-Capital N	&mp;Ntilde;
ò	Grave Accent-Capital O	Ò
ó	Acute Accent-Capital O	Ó
ô	Circumflex Accent-Capital O	Ô
õ	Tilde-Capital O	Õ
ö	Umlaut Mark-Capital O	%amp;)uml;
×	Multiplecation	×
ø	Slash-Capital O	Ø
ù	Grave Accent-Capital U	Ù
ú	Acute Accent-Captital U	Ú
û	Circumflex Accent-Capital U	Û
ü	Umlaut Mark-Capital U	Ü
ý	Acute Accent-Capital Y	Ý
þ	Thorn	Þ
ß	Small Sharp	ß
æ	Small ae	æ
ð	Small eth	ð
ø	Slash-Small o	ø
þ	Small Thorn	þ
œ	Small Ligature	&oelig;
œ	Capital Ligature	&OElig;
ˆ	Modifier Circumflex Accent	&circ;
˜	Small Tilde	&tilde;
–	En Dash	–
—	Em Dash	—
‘	Left Single Quote	‘
’	Right Single Quote	’
‚	Single Low Quote	&sbquo;
“	Left Double Quote	“
”	Right Double Quote	”
„	Double Low Quote	&bdquo;
†	Dagger	&dagger;
†	Double Dagger	&Dagger;
‰	Per Mile	&permil;
‹	Left Single Arrow Quote	&lsaquo;
›	Right Single Arrow Quote	&rsaquo;
€	Euro Mark	€
™	TradeMark	™