Lecia 1: Structura unui document HTML. Notiuni de baza.1.1 Ce este HTML?HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989, ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recent HTML 4.01), fiecare versiune oferind noi facilitati. Se remarca cateva trasaturi cum ar fi:

independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe care se realizeaza afisarea); structurarea formatarii; posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate face referinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre documente diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga informatii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat sa reprezinte instante ale acestor tipuri de documente. La baza SGML si a HTML se afla acelasi principiu: descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad). In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma . Parantezele unghiulare sunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie in marcajul de inceput: ................

Exista doua tipuri de marcaje: - individuale (ex.
) - perechi (ex. ...) - de mentionat ca sfarsitul unui marcaj este indicat prin utilizarea caracterului '/' in fata numelui de marcaj In functie de modul de formatare a paginii, avem marcaje de tip: - block: este afisat sub elementul anterior (ex. ) - inline: este afisat dupa elementul anterior (ex. ) - table: este afisat sub forma unui tabel Marcajele perechi pot fi imbricate: ................

Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

1.2 Structura unui document HTML

Un document HTML 4 are urmatoare structura: 1. 2. 3. o linie continand versiunea HTML sectiunea HEAD, delimitata de marcajele sectiunea BODY, delimitata de marcajele sau

Prima mea pagina web ........... Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin intermediul DTD (document type definition). Pe scurt, fisierul DTD contine definitiile marcajelor din versiunea respectiva de HTML. HTML 4.01 specifica 3 variante DTD :

HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt "invechite" (elemente si atribute a caror utilizare nu este recomandata deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in documentele ce contin cadre. HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele "invechite". HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).

HTML 4.01 Strict DTD HTML 4.01 Transitional DTD HTML 4.01 Frameset DTD

1.2.1 Sectiunea HEADCuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului . Marcajul este obligatoriu si poate apare doar in sectiunea HEAD. El va contine un titlu relevant pentru pagina, fiind deosebit de important pentru motoarele de cautare. Alte marcaje care apar in sectiune HEAD:

- poate contine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecventa (teoretica) cu care motoarele de cautare ar trebui sa reindexeze pagina, etc. Declaratiile META implica in general declararea unei proprietati si a valorii asociate acelei proprietati. Declararea setului de caractere se face astfel:

Precizarea setului de caractere face posibila afisarea in browserul utilizatorului a caracterelor specifice unor limbi precum romana, rusa, araba, etc.

- cascading style sheets - stiluri pentru formatarea textului din documentul HTML. ...

- scripturi JavaScript sau VBScript

- stabileste URL-ul de "baza" al documentului. Toate referintele (, respectiv ) din documentul respectiv vor fi deschise relativ la marcajul .

- stabileste o legatura cu un document extern, spre exemplu un fisier de definitii CSS.

Sectiunea HEAD a unui document HTML poate arata in felul urmator:

Titlul paginii mele 1.2.2 Sectiunea BODY

Este inclusa intre marcajele ...... ................ continut document .................

Marcajul de sfarsit () nu este obligatoriu In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini, etc.) (.... ).

LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat in Internet Explorer 3+).

LEFTMARGIN precizeaza, n pixeli, marginea stanga a documentului (distanta dintre fereastra si continutul documentului); TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului (distanta dintre fereastra si continutul documentului)

Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii, folosind marcajul

Titlul paginii mele text text text text text text text text text text alt text alt text alt text alt text alt text In exemplul de mai sus a aparut un nou marcaj (paragraf). Alaturi de el trebuie mentionate marcajele , , , , , (headings - toate necesita marcaj de inchidere) care sunt folosite in general pentru evidentierea titlurilor. (exemplu) Pentru formatarea textului pot fi folosite si marcajele:

... - caractere ingrosate ... - caractere inclinate ... - caractere subliniate

... - caractere "taiate" ... - marcajul de informatie preformatata

conserva toata caracterele si spatierile de linii utilizeaza un font diferit (Courier)

... - exponent ... - indice
- "rupe" textul, trecand pe o linie noua - poate apare oriunde in text - traseaza o linie subtire orizontala

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus. Marcajul ... ofera posibilitatea modificarii dimensiunii, culorii si a tipului de font utilizat (exemplu) Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele si (ambele necesita marcaj de inchidere):.

este un marcaj de tip "inline". Se foloseste in general in interiorul marcajelor de tip "block" (ex. ) in combinatie cu stilurile CSS, pentru a impune o formatare diferita de restul continutului din marcajul "block" respectiv (exemplu). spre deosebire de , marcajul este de tip "block". Se foloseste in general pentru pozitionare in cadrul documentului si pentru specificarea unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).

.................................

1. 2.

Conform specificatiilor HTML 4.01, este recomandata folosirea marcajului pentru centrarea textului, in locul marcajului exemplu. poate fi folosit ca un container pentru alte elemente de tip "block". Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj , insa pentru a se evita formatarea explicita pe fiecare paragraf in parte (ex. fontul), se va defini stilul de formatare pentru marcajul , stil care va fi preluat de paragrafele mentionate.

1. 2.

Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online Realizeaza o pagina HTML (folosind NotePad) care sa includa toate marcajele prezentate in aceasta lectie. Valideaza pagina la adresa http://validator.w3.org/

Lecia 2: Liste si referinte2.1 ListeHTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste, fiecare tip trebuie sa includa cel putin un element: 1. 2. 3. liste de tip definitie liste ordonate (numerotate) liste neordonate (marcate)

2.1.1 Liste de tip definitie

Unul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau indexuri. Un exemplu concret il reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de definitiile termenilor respectivi. Lista de tip definitie este introdusa de marcajele:

... - lista definitii (definition list) - termenul definit (definition term) - definitie (definition)

Lista de tip definitie Applet Java Aplicatie Java inclusa intr-un document HTML Cookie Mecanism de comunicare intre client si server Domeniu Nume unic prin care se identifica un site pe Internet Poti vizualiza exemplul de mai sus in browserul tau aici.

2.1.2 Liste neordonateSunt introduse de marcajele:

...

- lista neordonata (unordered list) - element lista

Lista neordonata In HTML sunt disponibile 3 tipuri de liste:

liste de tip definitie

liste neordonate

liste ordonate

Poti vizualiza exemplul de mai sus in browserul tau aici.

Atributul square precizeaza tipul maracatorului

2.1.3 Liste ordonateSunt introduse de marcajele:

... - lista ordonata (ordered list) - element lista

Lista ordonata In HTML sunt disponibile 3 tipuri de liste: liste de tip definitie liste neordonate liste ordonate Poti vizualiza exemplul de mai sus in browserul tau aici. Atributul start seteaza numarul de inceput pentru primul element al listei ordonate. Diferenta dintre listele ordonate si cele neordonate consta in inlocuirea punctelor din enumerare cu numere. Vizualizand in browser exemplele mentionate anterior, vei intelege diferentele in modul de afisare a fiecarui tip de lista. 1. 2. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste. Valideaza pagina la adresa http://validator.w3.org/

2.2 Referinte (link-uri)Marcajul HTML principal pentru introducerea referintelor catre alte pagini HTML sau catre elemente din cadrul aceleiasi pagini web este . El trebuie sa contina atribute, in caz contrar neafectand formatarea documentului.

Exemplul urmator nu va afecta formatarea documentului: Aici ar trebui sa fie un link !

Pentru a activa linkul de mai sus vom adauga atributul href.

Exemplul urmator arata formatarea documentului: Aici este un link !

Referintele pot fi absolute (ex. http://www.domeniu.ro/pagina.html) saurelative (ex. pagina.html). Referintele relative sunt folosite in interiorul siturilor. Ele functioneaza pe baza faptului ca browserul adauga automat numele domeniului la fiecare referinta (presupunand ca exista o pagina la adresa http://www.hostx.ro/director/pagina.html si o referinta relativa catre pagina2.html, browserul va construi referinta http://www.hostx.ro/director/pagina2.html in momentul in care pagina2.html este solicitata) Referintele absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un alt site (domeniu); pot fi folosite si in interiorul unui site, insa va implica un efort mai mare in scrierea paginilor (pe scurt, ai mai mult de tastat), iar in cazul in care muti situl pe un alt domeniu vei fi nevoit sa re-editezi toate referintele. Referintele pot fi catre pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere audio, video, documente in alte formate, etc.) Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

Presupunem ca ai un site cu urmatoare structura de directoare: /director1 /director2 Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi urmatoarea secventa:

Un link oarecarePentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul superior al sitului) voi folosi urmatoarea secventa:

Un link oarecare2.2.1 AncorePana acum am prezentat modul de realizare a referintelor externe, catre alte pagini sau catre alte situri. Ce se intampla insa in cazul in care avem un document de dimensiuni mari si vrem sa introducem referinte catre anumite sectiuni ale sale? Solutia consta in utilizarea ancorelor.

Ancorele asigura usurinta in navigare in paginile de dimensiuni mari. O ancora are urmatorul format

...Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva !

In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor: ... ... In HTML xxx si XXX inseamna acelasi lucru! Odata definita ancora trebuie definita si legatura activa catre ancora respectiva. Ea va fi o referinta hypertext in formatul urmator: Link catre ancora Acest exemplu evidentieaza efectele marcajelor mentionate mai sus. Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe: Link catre ancora externa 1. 2. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online Realizeaza o pagina HTML (folosind NotePad) pe baza unui text existent, care sa includa ancore. Folosind pagina realizata la exercitiul precedent (liste) si insereaza linkuri catre ancorele create.

..CURS INTRERUPT

Microsoft Word XP (RO) Modul avansatiMicrosoft Word 2002 (XP) este inca cea mai populara versiune a editorului de text oferit de Microsoft prin suita Office. Daca experienta de incepator pe care o ai in utilizarea acestui program nu iti mai este de ajutor si vrei sa iti imbunatatesti performantele in ceea ce priveste productivitatea, eficienta si timpul consumat, acest curs este ceea ce iti trebuie. Acest curs te invata sa utilizezi cele mai avansate optiuni de procesare a textului puse la dispozitie de MS Word 2002. Autor: Dumitrel TOMA Tutor: Dumitrel TOMA

Lecia 1: Documente le sablonAceasta lectie acopera tema documentelor sablon. Utilizarea sabloanelor reprezinta calea cea mai simpla de salvare a timpului dedicat altfel formatarii initiale sau modificarii documentelor. Mai nti vom analiza modul in care pot fi utilizate sau create documentele sablon. Astfel, vei nvata cum sa economisesti timp utiliznd un sablon, in locul crearii repetate a unor documente identice sau asemanatoare. Prezentare:

Spre deosebire de fisierele Ms Word normale, care au simbolul

si

extensia *.doc, sabloanele sunt fisiere reprezentate prin , avnd extensia *.dot. Cteva exemple de sabloane, predefinite si clasificate de autorii programului Ms Word (rapoarte, scrisori si faxuri, memorii, brosuri etc.), sunt accesibile prin comanda "Document Office nou" din cadrul meniului "START" al sistemului de operare Windows. La acestea se pot adauga sabloanele create de fiecare utilizator in parte (in cadrul paginii "General").

1. Utilizarea sabloanelor predefinite

Prin accesarea comenzii "Document Office nou" din cadrul meniului "START", poti alege din 10 categorii de sabloane predefinite de autorii Ms Word. Toate fisierele sablon predefinite se afla stocate pe hard disk in subdirectorul "Templates\1033" din cadrul directorului in care se afla instalat programul Word (ex. :\Program Files\Microsoft Office\Templates\1033). Exemplu: Pentru a realiza o brosura ma pot folosi de sablonul pe care autorii l ofera in cadrul paginii "Publicatii" din cadrul ferestrei "Document Office nou" (Start | Document Office nou).

2. Crearea unui sablonPentru a evita formatarea initiala repetata pentru anumite tipuri de documente (ex.: adeverinte, declaratii, anunturi, formulare etc.), iti poti crea singur documente sablon. Realizarea unui sablon este foarte simpla. Prelucrezi documentul ce-ti va servi de model si l salvezi cu numele dorit (Fisier| Salvare ca), alegnd din casuta "Tip fisier" optiunea "Sablon document (*.dot)".

Toate sabloanele create de tine se vor gasi in pagina "General" din cadrul ferestrei "Document Office nou" (Start | Document Office nou sau, din Ms Word: Fisier | Nou | Sabloane generale). Exemplu: Pentru a realiza un sablon care sa contina un formular alb (necompletat) realizez urmatoarele:

editez formularul initial; salvez (Fisier | Salvare ca) documentul rezultat cu numele "Formular" iar la tipul fisierului aleg "Sablon document *.dot"

Pentru a deschide sablonul cu numele "Formular.dot" nu trebuie dect sa accesez pagina "General" din cadrul ferestrei "Document Office nou" (Start | Document Office nou sau, din Microsoft Word: Fisier | Nou | Sabloane generale).

1. Completeaza un fisier Word cu urmatorul text: Acesta este un formular. Pentru a nu l reface de fiecare data cnd am nevoie de el, l salvez sub forma de document sablon. Data: ________ Numele: ___________ Prenumele: __________ Site-ul preferat: ____________ Salveaza fisierul sub forma de document sablon cu numele Formular. 2. Deschide documentul sablon Formular.dot si completeaza datele formularului. Salveaza primul document rezultat cu numele Complet1.doc. nchide programul Word. 3. Deschide documentul sablon Formular.dot si completeaza datele formularului. Salveaza cel de-al doilea document rezultat cu numele Complet2.doc. nchide programul Word. 4. Elimina documentele Complet1.doc si Complet2.doc. 5. Sterge din fereastra "Document Office nou" documentul Formular.dot (click dreapta pe fisier, ca n imaginea de mai jos). 6. Comunica in SEMINARUL ONLINE problemele cu care te-ai confruntat.

3. Stergerea unui sablonExperimenteaza, nsa ntotdeauna asigura-te ca ceea ce stergi nu-ti va trebui mai trziu!

Lecia 2: Lucrul cu fisierele si cu barele de instrumenteHTML prin exemple

In cadrul acestei lectii vom incerca sa aflam: 1. 2. 3. 4. 5. optiunile de lucru cu fisierele cum modificam proprietatile unui document word ce reprezinta barele de instrumente cum lansam o bara de instrumente cum configuram propriile bare de instrumente

n curnd va fi lansat o nou serie de cursuri online. Urmrii seciuneaCursuri

1. Optiuni de lucru cu fisierele

Cum se nva online Cine se nscrie Cum devin student Cum m nscriu Cum accesez cursurile Ce se pltete Ghidul studentului Invitaie ctre vizitator

Inainte de salvarea unui fisier word pot fi utilizate cateva tipuri de optiuni. Acest optiuni se afla in meniul Instrumente din fereastra Salvare ca... (Fisier | Salvare ca...).

Sistem eLearning Academia Online Scop Oportuniti Propune un curs Adaug la favorite Pagina de start

a. Optiunile de salvare modifica modul in care salvezi documentul. Din fereastra Salvare (Fisier | Salvare ca... | Instrumente | Optiuni salvare) poti selecta modalitati de salvare (salvari in fundal, salvari rapide, utilizarea copiilor de rezerva, incorporarea fonturilor, timpul de salvare a informatiilor pentru eventuale recuperari automate, etc.), de asemenea poti dezactivate caracteristicile specifice Word XP, documentul rezultat putand fi compatibil 100% cu versiunile anterioare ale programului (Ms Word 97, Ms Word 95).

b. Optiunile de securitate vizeaza posibilitatile de protejare a fisierului prin parolare. Ele sunt accesibile din ferestra Securitate deschisa prin Fisier | Salvare ca... | Instrumente | Optiuni de securitate. Utilizandu-le, poti bloca total accesul la document folosind o parola de deschidere sau poti permite deschiderea documentului, insa doar in format Doar in citire (read only). In acest caz, poti configura si nivelul de protejare a documentului.

c. Optiunile de Web se refera la modul in care programul Ms Word configureaza fisierele, imaginile, fonturile in momentul salvarii unei pagini Web. Din fereastra Optiuni Web, deschisa prin Fisier | Salvare ca... | Instrumente | Optiuni Web, se poate alege tipul de browser caruia ii este destinat documentul, modul in care sunt salvate fisierele suport (imagini, tabele, animatii etc.) calitatea imaginilor utilizate, tipul de codificare sau caracteristicile fonturilor implicite.

d. Optiuni de imagine pot fi folosite pentru a comprima imaginile, pentru a schimba rezolutia sau elimina zonele trunchiate din imaginile initiale. Pentru a deschide fereastra Comprimare imagini trebuie sa urmezi calea Fisier | Salvare ca... | Instrumente | Comprimare imagini.

2. Cum modificam proprietatile unui document wordTrebuie sa lansezi fereastra Proprietati prin Fisier | Proprietati. Urmariti animatia pentru a intelege modul de completare a proprietatilor. Apasa aici!

3. Ce reprezinta barele de instrumenteBarele de instrumente reprezinta colectii de comenzi. Principalele bare de instrumente sunt : Standard, Formatare, Desenare, Imagine. Pentru a vedea o descriere a comenzilor acestor bare de instrumente, apasa aici!

4. Cum lansam o bara de instrumente?Pentru a lansa o bara de instrumente trebuie dat clic cu dreptul in bara de meniuri si selectata bara de instrumente dorita. A doua modalitate de lansare a unei bare de instrumente este prin Vizualizare | Bare de instrumente.

5. Cum configuram propriile bare de instrumente?Trebuie retinut ca barele de instrumente contin butoanele care se aseamana prin functiune (Bara de instrumente Formatare contine comenzile cu rol in formatare textului, Bara de instrumente Desenare contine comenzile care ajuta la imbogatirea grafica a documentului). Programul Ms Word are presetate 18 tipuri de bare de instrumente, insa comenzile pot fi accesate si independent de acest 18 bare. Astfel, tu poti sa-ti creezi propriile bare de instrumente care sa contina comenzile pe care le utilizezi mai des sau pe care nu le gasesti in barele presetate.

Eu am configurat o bara (Bara mea) cu care am acces la comenzile de marire si micsorare a caracterelor, la spatializarea cuvintelor, la comanda de modificare a limbii tastaturii, comenzile exponent si indice, interlinie, modificare orientare text, modificare dupa caz si ghid fonetic. Cum am realizat aceasta bara? Urmareste animatia!

1. Incearca sa realizezi un document care sa fie disponibil Doar in citire , sa aiba parola de deschidere "onoare", iar campurile de proprietati sa fie completate in intregime. 2. Realizeaza o bara de instrumente cu numele "bara" si care sa contina urmatoarele comenzi: ecran complet, lupa, repaginare, ora, rotire libera. a. Incearca sa verifici care dintre cele trei bare de mai jos corespunde barei realizate de tine.

1.

2.

3. b. Publica in cadrul SEMINARULUI ONLINE solutia ta.