Curs: Comunicare n mediu virtual

Curs: Comunicare n mediu virtualModulul al III-lea : HTML (Partea I)1. Pornind de la faptul c utilizatorii Internet-ului sunt mprii n creatori de pagini web i consumatori ai informaiilor coninute n aceste pagini, ne vom considera, dup ce am creat bloguri n cadrul celui de-al II-lea modul, ca fcnd parte din prima categorie i, chiar nefiind foarte versai tehnic, participm direct la rspndirea prin web a informaiilor i opiniilor. 2. Aceasta este, practic, noua nelegere a Internet-ului: resurs pentru procesele de creare de cominut, de nvare n comuniti auto-organizate. 3. Termenul Web 2.0 se refer, n principal, la aplicaii web, iar instrumentele sale sunt: bloguri, site-uri, reele sociale, etc. HyperText Markup Languagesau pescurtHTML a aprut ca o modalitate de a prezenta informaia structurat pe titluri, paragrafe, liste, tabele, formulare, etc. Limbajul HTML nu este un limbaj de programare, ci doar un limbaj declarativ.4. HTML este un limbaj creat n scopul de a descrie, n mod text, formatul paginilor Web; fiierele create n acest limbaj vor fi interpretate de browsere (Explorer, Mozilla, Google Chrome, Safari, etc.), care vor afia paginile n forma dorit (cu texte formatate, liste, tabele, formule, imagini, hiperlegturi, obiecte multimedia etc.).

5. Aa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale elementelor incluse prin procedee de marcare. Fiecare element va fi introdus ntre dou marcaje ("tags", n limba englez) - de nceput i sfrsit - (uzual) de forma: . Practic, marcajele HTML asigur controlul asupra modului de afiare a obiectelor corespunztoare n cadrul programelor de vizualizare a documentelor HTML.

6. Ultimele versiuni ale editoarelor de documente ofer facilitti de salvare n format HTML - de exemplu, Word, ncepnd cu versiunea Microsoft Office '97.

7. Paginile HTML se pot crea cu orice editor de texte de ctre utilizatorii care cunosc limbajul HTML sau prin utilizarea unor editoare speciale (Ex: Macromedia Dreamweaver), n care obiectele se introduc interactiv iar codul HTML se genereaz automat.

8. Vom alege prima variant de lucru.Avem nevoie de un browser (Internet Explorer, Opera, Mozilla, etc.) instalat pe calculatorul la care lucrm, chiar fr conexiune la Internet i de un editor de texte (Notepad, Wordpad). Browser-ul este necesar pentru a vizualiza efectul codului scris n Notepad. Dup redactarea unei pagini HTML ntr-un document text va trebui s salvai documentul cu extensia .html (ex: dvd.html) pe desktop sau ntr-un director n care vei salva i alte fiiere pe care le vei folosi n realizarea paginilor web i nu uitai opiunea All Files (n caz contrar fiierul va avea forma dvd.html.txt).Exemplu:

Pagina mea

Primul meu document HTML.

Deschiderea n browser se face:

Prin dublu click pe icon-ul fiierului; Dreapta mouse Deschidere cu(Open With) se alege browser-ul dorit; Dac dorii o deschidere implicit cu un acelai browser, atunci: Dreapta mouse Deschidere cu(Open With) Properties Change - se alege browser-ul cu care se va deschide, de acum nainte, prin dublu-click.

Documentul pe care l-ai creat ar trebui s fie vizibil, la deschiderea cu Internet Explorer, astfel:

Aceasta este, evident, o pagin web extrem de simpl, ns ea va constitui punctul de plecare pentru ceea ce urmeaz. Acum ns, observai efectul codului pe care l-ai scris: Pagina mea a avut ca efect apariia titlului paginii Pagina mea Primul meu document HTML. a avut ca efect apariia coninutului paginii web i anume Primul meu document HTML.

Exerciiu: Schimbai titlul i coninutul din document, salvai (Save sau Ctrl+S) i vizualizai efectul

codului scris.

Forma unui document HTML

Aa cum ai observat n exemplul anterior, un document HTML este un document text obinuit. El poate conine textul propriu-zis, care va fi vizualizat n browser i marcajele (tagurile), introduse n document sub forma . Numele tagurilor poate fi scris (de preferat) cu litere mici.

Se pot folosi taguri simple (individuale) sau perechi, cele din urm cunoscute i sub numele de containere.Un tag simplu poate fi plasat la nceputul unei noi linii (ex: - folosit la introducerea unor termeni ntr-o list), sau la sfritul unei linii (ex:
- care determin inceperea unei linii noi).

Exemplu: nlocuii, n documentul html creat anterior, textul pe care l-ai scris n coninut (....) cu un text scris pe dou rnduri. Observai c modul de afiare nu ine seama de aspectul din document. Scriei tagul
dup primul rnd i observai efectul acestei schimbri.

Forma generala a unui container este: continut unde tagul de sfrit conine caracterul "/" in faa numelui de tag. ntreg coninutul containerului este afectat de execuia acestuia.

Exemplu: ncadrai , n linia Primul meu document HTML. containerul , astfel: Primul meu document HTML. Se va obine o scriere cu caractere ngroate a textului. Introducei i containerul . Codul obinut, cu mici modificri (litere mici n taguri i scrierea mai multor containere pe o singur linie):

Pagina mea

Primul meu document HTML.

Obs. 1 : Un container este n ntrgime inclus ntr-un alt container .CorectIncorect

Pagina meaPagina mea

Primul meu document Primul meu document

Obs. 2 : Spaiile care apar ntre taguri sunt ignorate.

Structura standard a unui document HTML

declaraii

titlul documentului

corpul (coninutul) documentului HTML

Obs: Tagul ! este folosit pentru comentarii n document i are forma general: Declaraia DOCTYPE indic browserului versiunea HTML sau XHTML n care este scris documentul i, implicit, setul de elemente i atribute care pot fi folosite i regulile privind structura documentului. Dei aceast declaraie nu este obligatorie, este util versiunilor mai noi ale browser-elor, permindu-le s decid asupra modului de afiare a paginii. Partea principal a unei astfel de declaraii este atributul DTD (Document Type Definition), care indic tipul de construcie a documentului. Exist dou modaliti de a construi un document HTML sau XHTML:

Strict un astfel de document HTML are reguli foarte stricte de construcie, conforme cu standardele actuale W3C, si nu accept elemente formatate dect prin foi de stil;

Transitional (loose) este o variant mai flexibil, acceptand i elemente sau atribute din versiuni mai vechi, care nc sunt n uz;

Frameset este o variant asemntoare cu transitional, dar care accept i elemente sau atribute referitoare la frame-uri.

n paginile pe care le vom crea vom ignora declaraiile i vom considera c, ntr-un document HTML, tagurile principale sunt:

1. . . . , care indic browserului faptul c este vorba de un document HTML sau XHTML.2. . . . , care conine descrieri ale documentului HTML: titlul (), limbajul folosit (), definiii de stil ( ), legturi (link) i altele.

3. . . . . care include toate elementele, atributele i informaiile care vor fi afiate n fereastra browserului.De asemenea, vom considera c ntr-un document HTML sunt dou seciuni:

1. Sectiunea HEAD;2. n funcie de forma dorit a paginilor (site-ul) pe care le vom crea, pentru cea de-a doua seciune putem folosi una dintre variantele:a) FRAMESET, folosit pentru documentelor afiate ntr-o structur care cuprinde mai multe ferestre. Vom folosi aceast variant atunci cnd vom lucra cu mai multe documente care vor fi afiate n ferestre diferite;b) BODY, pe care deja o folosim i care este indicat atunci cnd documentele sunt afiate ntr-o singur fereastr)Pe scurt, vom spune c forma general a unui document html este:

Cuprins document

HipertextHipertextul este un concept a crui prim definiie (Ted Nelson, 1965) este: material scris sau grafic interconectat ntr-o manier complex, care n mod convenional nu poate fi reprezentat pe hrtie. Cu timpul, conceptul a evoluat, iar una dintre definiiile actuale ale hipertextului este: mod de construcie a unui sistem de management i reprezentare a informaiei folosind legturi pentru a crea o reea de noduri.Hipertextul permite prsirea modului tradiional de citire a unui document: linie dup linie, pagin dup pagin, prin folosirea hiperlegturilor care, printr-un simplu clic de mouse, permit accesul la o alt pagin web.

Conceptul de baz n definirea hipertextului este "legtura" (link-ul), fie n cadrul aceluiai document, fie ctre alt document. Hipertextul permite crearea unor aa-numite "noduri" i a unor legturi ntre ele, iar utilizatorul poate naviga de la un nod la altul. n acest fel, un nod reprezint un concept, el putnd conine orice fel de informaie: text, grafic, imagini, animaii, sunete, etc. Nodul surs al unei legturi se numete "referin" iar cel destinaie "referent" sau ancor, punctele de legtur din respectivele noduri fiind marcate. Principala aplicaie actual a hipertextului este World Wide Web-ul alturi de noiunile asociate HTTP i HTML.Coninutul unui nod se afieaz la activarea legturii.Modalitatea de memorare a informaiilor n cadrul nodurilor variaz de la sistem la sistem, pentru Web folosindu-se limbajul HTML. Limbajul HTML permite transformarea oricrui text ntr-un hipertext prin introducerea unor marcaje (tag-uri), care vor indica modul cum se efectueaz legturile documentului, cum vor aprea paginile documentului etc. Limbajul HTML utilizeaz marcatori (tag-uri) descriptivi pentru definirea modului de prezentare i a structurii logice a unui document hipertext.

Astfel, forma unui element generic este, aa cum am vzut, ..., unde specific un tag de nceput i specific un tag de sfrit. Obs.: Numele unui element nu poate ncepe cu un numr i nu poate conine spaii.

Un element poate fi vid (nu conine nimic ntre tag-ul de nceput i cel de sfrit), poate conine un text sau alte elemente.Elementele pot avea atribute, utilizate cu scopul de a descrie o anumit proprietate a unei apariii particulare a unui element, fiecare atribut avnd stabilit un nume i poate avea drept valori iruri de caractere sau numere ntregi delimitate de ghilimele (sau nu). Specificarea unei valori pentru un atribut are forma: atribut ="valoare".Exemplu: n exemplul anterior, introducei n elementul atributul bgcolor=pinksub forma:

i vei observa, la vizualizarea n browser, modificarea culorii de

fundal n roz.

Formatarea textuluiPentru formatarea textului n modul dorit se folosesc tag-uri speciale.

Tag-ul
Daca introducem mai multe linii ntr-o pagin, browser-ul va afia totul pe un singur rnd, aa cum am vzut ntr-un exemplu anterior. Exemplu:

pagina mea

Am smuls un fir de iarb

cnd eram copil

i i l-am oferit

ntr-un hohot de rs.

va afia textul pe o singur linie, astfel:Am smuls un fir de iarb cnd eram copil i i l-am oferit ntr-un hohot de rs.

Trecerea pe o linie nou se face cu ajutorul tagului
n felul urmtor:

pagina mea

Am smuls un fir de iarb
Cnd eram copil
i i l-am oferit
ntr-un hohot de rs.

Textul va fi afiat astfel: Am smuls un fir de iarb

cnd eram copil

i i l-am oferit

ntr-un hohot de rs.

Exerciiu: Copiai cele dou coduri de mai sus n notepad, salvai-le, apoi deschidei-le ntr-un browser i observai efectul folosirii tagului
.

Elementul Pentru ca un browser s poat interpreta caracterele "spaiu", "tab" i "CR/LF" folosite ntr-un text, vom introduce textul ntr-un bloc (container) ....

Exemplu:

pagina mea

Am smuls un fir de iarb

Cnd eram copil

i i l-am oferit

ntr-un hohot de rs.