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.