Curs: Comunicare n mediu virtualModulul al III-lea : HTML
(Partea a II-a)Hiperlegturin seciunea Hipertext am fcut referire la
definiii conform crora hipertextul este un mod de reprezentare a
informaiei ntr-o manier complex, folosind legturi pentru a crea o
reea de noduri, n acest fel renunnd la modul tradiional de citire a
unui document. Tot aici am vzut c hipertextul are un concept de
baz: legtura (link-ul).
Definirea unei legturi se face folosind containerul .... Litera
provine de la cuvntul ancor, denumire dat locului marcat din care
se face saltul la o nou locaie, aceasta putn fi n acelai document,
la alte fiiere din calculatorul dumneavoastr sau adrese URL
externe. Odat realizat o legtur, vei observa c aceasta este activ
la vizualizarea paginii, n sensul c zona pentru care s-a stabilit
legtura poate avea o alt culoare (la texte), la trecerea cursorului
mouse-lui sgeata devine o mn i, dac dai click (sau Enter) se va
face trecerea la inta stabilit. Aceasta se definete folosind
atributul "href", a crui valoare este adresa paginii cu care dorim
s facem legtura.
Pentru a realiza corect legturile (link-urile), vom realiza o
aplicaie, urmnd paii: Pasul 1: Se alege o pagin creat deja n prima
parte i care conine codul:
pagina mea
Comunicare n mediu virtual (cu h1 i aliniat n centru)
Comunicare n mediu virtual (cu h2 i aliniat la dreapta)
Comunicare n mediu virtual (cu h3 i aliniat la stnga)
Comunicare n mediu virtual (cu h4 i aliniat la stnga
implicit)
Comunicare n mediu virtual (cu h5 i aliniat n centru)
Comunicare n mediu virtual (cu h6 i aliniat la dreapta)
Pasul 2: Salvm pagina cu numele exemplu.html n folderul curent
(desktop).
Pasul 3: Alegem un alt exemplu, care conine codul:
pagina mea
Mine
Vreau ziua de mine s-nceap
Cu-a buzelor tale
ofrand,
Vreau
ziua
dinti
s se-ntoarc
i cele ursite s-nceap
Cu tine.
i salvm pagina cu numele poezie.html n folderul Imagini creat
anterior.Pasul 4: Alegem o adres extern oarecare, de exemplu:
http://www.youtube.com/
Pasul 5: Scriem codul:
Pagina de baz (index)
Link ctre o imagine din folderul curent
La Toya
Link ctre o pagin web din folderul curent
Exemplu
Link ctre o pagin web din subfolderul Imagini
Mine
Link ctre o pagin extern (un site)
Mine
Pasul 5: Salvai cu numele index.html i vizualizai efectul.Obs.1:
Imaginea "La Toya.jpg", folosit ntr-un exemplu anterior exist deja
n aceeai locaie i va fi folosit pentru a realiza legtura cu o
imagine situat n acelai folder.
Obs.2: ntruct n pagina la care s-a fcut trecerea nu este prevzut
ntoarcerea la pagina de plecare, pentru a v ntoarce la aceasta i a
ncerca celelalte legturi, folosii:
Pentru a face o distincie ntre legturile active, cele nevizitate
i cele deja vizitate, se pot aduga tagului atribute care seteaz
culorile acestora astfel: , unde link se folosete pentru link-uri
nevizitate, vlink pentru cele vizitate, iar alink pentru cele
active. Vizualizai efectul.
Dac dorii informaii suplimentare despre o legtur, putei obine
acest lucru introducnd atributl title n elementul . La poziionarea
mouse-lui pe legtur, apare o fereastr ce conine textul dat ca
valoare atributului title.Folosind aceste noile atribute,
index.html devine:
Pagina de baz (index)
Link ctre o imagine din folderul curent:
La Toya
Link ctre o pagin web din folderul curent:
Exemplu
Link ctre o pagin web din subfolderul Imagini:
Mine
Link ctre o pagin extern (un site):
Un site
Observai schimbarea culorii legturilor i apariia casetelor cu
textele "Maina mea preferat" i "O poezie".
Liste
Organizarea informaiilor ntr-o pagin Web se poate realiza i prin
utilizarea listelor. Acestea pot fi: liste neordonate - blocuri de
text delimitate de
; liste ordonate - blocuri de text delimitate de
- ...
; liste de definiie - blocuri de text delimitate de ....n cazul
primelor dou categorii, mai des ntlnite, fiecare element al listei
va fi introdus cu ajutorul tagului (scrierea lui este opional), iar
prezena atributului type permite apariia unor marcatori poziionai
in faa fiecrui element, care pot fi:
pentru listele neordonate (
-
): cerc (circle), disc plin (disc), ptrat (square);
pentru listele ordonate (
-
) valorile atributului type pot fi: " A ", " a ", " I ", " i ",
" 1 ".Exemplu:
Pagina de baz (index)
- Aceasta este o list neordonat:
- Link ctre o imagine din folderul curent
- Link ctre o pagin web din subfolderul Imagini
- Link ctre o pagin extern (un site)
- Aceasta este o list ordonat:
- Link ctre o imagine din folderul curent
- Link ctre o pagin web din subfolderul Imagini
- Link ctre o pagin extern (un site)
Aplicm legturi pentru exemplul de mai susi obinem:
Pagina de baz (index)
Exerciiu: Aplicai legturi la lista ordonat din exemplu.
TabeleVom ncepe, n aceast seciune, cu vizualizarea unei pagini
web n care se observ c s-au folosit formatri realizate cu alte
mijloace dect cele folosite pn acum i care au contribuit la un
aspect mai ngrijit, mai plcut, al paginii. Amintem, ntr-o seciune
anterioar, c o mbuntire a aspectului paginii i o uurare a
sarcinilor de aliniere a elementelor folosite (texte, imagini), se
poate realiza cu ajutorul tabelelor.
n imaginea urmtoare, am pus n eviden tabelele folosite pentru
obinerea aspectului de mai sus, prin adugarea n cod a unor atribute
de culoare i bordur.
Vom observa, de asemenea, realizarea unui meniu cu legturi dar,
spre deosebire de cele folosite la liste, acesta este orizontal i
ncadrat ntr-un tabel. Referindu-ne numai la acesta, vom ncerca s
vizualizm codul prezentat n exemplul urmtori n care am ngroat
elementele table, tr i td:
Meniu orizontal n tabel
FlexForm |
Festo |
Mecatronic |
UT Cluj-Napoca |
MECTS |
UE
Obs.: Atributul target precizeaz dac documentul referit se va
afia ntr-o fereastr nou (_blank) , n aceeai fereastr (_self), n
fereastra iniial (_top) sau n cea anterioar (_parent). Putem crea
un tabel folosind , n interiorul cruia introducem tagurile pentru
rnduri (linii) i pentru celule (coloane) . n exemplul urmtor vom
construi un tabel simplu, cu dou linii i trei coloane.
Exemplu:Tabel
R1,C1R1,C2R1,C3
R2,C1R2,C2R2,C3
Atunci cnd folosim tabele, ne putem gndi la crearea unui cap de
tabel (table header) n care scrierea s apar ntr-un mod diferit de
restul tabelului. n HTML, acest lucru se poate realiza folosind
tagul n locul pe primul rnd al tabelului.De asemenea, un tabel are,
de cele mai multe ori, un titlu. Putem realiza acest lucru folosind
(n interiorul containerului ), care suport atributul align, pentru
poziionarea fa de tabel.
Pentru punerea n eviden a marginilor, n se folosete atributul
border, cu valori >=0, ce reprezint grosimea n pixeli a
bordurii. Valoarea 0 reprezint lipsa bordurii, iar valorile mai
mari dect 0 dau tabelului un aspect tridimensional.Vom folosi toate
aceste lucruri n aplicaia urmtoare care, bazndu-se pe exemplul
anterior, realizeaz un tabel cu titlu scris deasupra, cu cap de
tabel i borduri.
Aplicaie: Realizai un tabel cu elevii unei clase, coninnd
datele: nume, prenume, telefon ntr-o pagin web. Salvai pagina cu
numele tabel.html.
Rezolvarea:
Tabel
Tabel cu elevii unei clase
NumePrenumeTelefon
opescuGic0734657723
ovaGheorghe0723651298
Vizualiznd efectul acestui cod, observm c aspectul tabelului (i
al paginii) las de dorit. De exemplu, am putea folosi atributul
bgcolor pentru culoarea de fundal a ntregii pagini, insernd n tagul
acest atribut sub forma . Ne-am putea gndi c am putea face n aa fel
nct i tabelul sau, cel puin capul de tabel, s aib un fundal i
ncercm un bgcolor="#CCCCFF" sub forma < table
bgcolor="#CCCCFF">. Facem modificrile n cod i...merge!
ntr-adevr, atributul bgcolor se poate folosi la tabele, iar n
tabele, la rnduri i celule. Prioritatea n cazul folosirii multiple
a atributului fiind: celul, rnd, tabel. Aspectul paginii este mai
plcut acum dar poziia tabelului fa de marginea de sus nu este cea
mai bun. Avem nevoie de o distanare fa de aceasta i am putea
folosi
de mai multe ori (naintea tabelului). Folosind atributul vspace=100
n tagul , vom obine o deplasare n jos a ntregului tabel, cu 100
pixeli. n mod asemntor, dac ar fi nevoie de o deplasare pe
orizontal, aceasta s-ar obine folosind un alt atribut permis n i
anume hspace.O alt observaie pe care o facem se refer la mrimea
fonturilor din titlu. tim din seciunea referitoare la tagul cum se
procedeaz, aa c aplicm asupra textului "Tabel cu elevii unei clase"
containerul astfel: Tabel cu elevii unei clase.
A aprut o alt problem: tabelul are dimensiuni prea mici. Vom
ncerca mrirea tabelului folosind atributele deja cunoscute de la
seciunea referitoare la imagini: width i height. tim c valorile
acestora pot fi exprimate n pixeli sau procente. Vom alege valori n
procente i observm c, dac tabelul ar avea jumtate din dimensiunile
ecranului, prin centrarea sa am avea mrimea dorit. n consecin,
introducem aceste atribute n tagul , dup toate celelalte. Acesta ar
trebui s aib o form deja foarte lung (i nc n-am terminat), care ar
fi: . Salvm i vizualizm. Se pare c este aproape gata, numai c...
datele din tabel nu arat prea bine: fonturile mici (de acum tii cum
se schimb), fr diacritice i alinierea n celule.Mai nt ns, vom
ncerca s lucrm cu diacritice n cod, folosind: (), (),(), (), (),
(), (), (), (), ().nlocuind n document, opescu devine opescu, Gic
devine Gic ova devine ovaIntroducem caracteristici pentru font n
fiecare celul (opescu).
Alinierea n interiorul celulelor o realizm folosind atributul
align care, n afara valorilor deja cunoscute (" left", " center", "
right"), mai poate avea i valoarea " char", care permite alinierea
fa de un caracter. Dac nu avei deja alinierea dorit fa de marginile
superioar i inferioar ale celulelor (dei este prestabilit), putei
folosi atributul valign al , care realizeaz alinierea la linia de
baz pentru valoarea " baseline", jos pentru valoarea " bottom", sus
pentru " top" i are valoarea prestabilit la mijloc (" middle"). Vom
folosi copy paste pentru a aduce fiecare celul la forma: . Salvm,
vizualizm i...gata! Obs: Alinierea s-ar obine mai uor folosind ,
folosirea atributului n cadrul unui rnd asigurnd alinierea dorit n
fiecare dintre celulele rndului respectiv.Rezolvarea aplicaiei a
nsemnat crearea documentului tabel.html, care conine codul:
Tabel
Tabel cu elevii unei clase
NumePrenumeTelefon
opescu Gic
0734657723
ova Gheorghe
0723651298
La vizualizare ar trebui s obinei pentru codul de mai sus, sau
ceva asemntor (pentru atribute schimbate):
Un alt atribut pe care l putem folosi n cadrul tag-ului este
cellspacing. El stabilete distana ntre dou celule vecine i are
valori numere pozitive. Introducei n document atributul cellspacing
sub forma: Atributul cellpadding se refer la distana n pixeli
dintre marginea celulei i coninutul ei, valorile pe care le poate
lua sunt tot numere ntregi, corespunztoare mrimii n pixeli a
distanei.Dac se dorete ca un tabel s aib celule vide, atunci se
utilizeaz sau
n containerul .Exemplu: Trei celule + una vid >Celula1 Celula 2
Celula 3
Aplicaie: Realizai, folosind tabele, o pagin cu numele
Romania.html care, la vizualizare, s apar (aproximativ) astfel:
Pentru rezolvare, vom avea nevoie de cteva cunotine suplimentare
fa de cele deja acumulate i, printre acestea, un mod de lucru care
nu face obiectul cursului (se refer la foi de stil) dar, fiind uor
de neles i de folosit, l voi folosi n acest capitol. nainte ns, vom
cuta rspunsul la urmtoarea ntrebare: ntr-un tabel este posibil
inserarea unei imagini? Pentru a verifica, ncercm s modificm codul
din exemplul anterior, astfel nct, n celula vid s introducem o
imagine, astfel:
Exemplu:
Trei celule + o poz
Celula1 Celula 2
Celula 3
Vizualiznd efectul codului scris, vom observa o deformare a
celulelor din cel de-al doilea rnd, datorat mrimii imaginii. Pentru
uniformizare, avem dou posibiliti: micorm imaginea sau mrim celula.
Apare decio nou ntrebare: putem folosi width i heiht la celule de
tip sau ? Facem cteva modificri n codul anterior i aplicm opiunile
pentru lungime i nlime att tabelului, ct i primei celule. Dac
lungimea acesteia este 50% din spaiul disponibil n tabel, restul va
fi rezervat celorlalte celule i, pentru c sunt doar dou celule,
spaiul va fi mprit egal de acestea.
Logica este aceeai pentru nlimea height="50%". Alfel zis, pentru
acest tabel, este suficient includerea atributelor ntr-o singur
celul.Coninutul documentului html devine:
Trei celule + o poz
Celula1
Celula 2 Celula 3
Imagine
AlbastruGalbenRou
Pasul urmtor ar putea fi realizarea unui tabel mai mare, care s
conin n colul din stnga-sus imaginea i s realizeze tricolorul
colornd cteva celule n zona de mijloc. Ne-am putea gndi chiar la
inserarea unei imagini cu un cerc pe fundal galben dar, pentru c se
cere un aspect "aproximativ" la fel cu imaginea dorit, ne vom
mulumi cu un tricolor simplu. Ne-ar putea ajuta o schi ca:
ncepem cu imagine i o mutm pe primul rnd, n prima celul, cutnd
ca aceasta s aib o nlime de 25% din nlimea tabelului i o lungime de
30% din ntreaga lungime a tabelului. Codul: .n cel de-al doilea
rnd, stabilim pentru prima i ultima celul width="30%", celelalte
trei celule, care conin culorile, mprindu-i egal spaiul de 40% rmas
n tabel.
Codul:
Cel de-al treilea rnd este cel mai simplu: are o singur celul
vid, a crei nlime este: height="50%".Codul pentru aceasta este:
Renunm la textul "Trei celule + o poz " i scriem titlul:
Romania.
De asemenea, putem renuna la bordura declarat n , prin
stabilirea valorii 0 (border="0") i, mai ales renunm la fundalul
din , pentru c aici vom aplica a proprietate CSS (foi de stil)
despre care aminteam la nceputul rezolvrii aplicaiei. Pn acum, n
containerul ... am introdus numai tagul , dei n seciunea
referitoare la structura unui document HTML afirmam c aici se pot
insera "descrieri ale documentului HTML: titlul (), limbajul
folosit (), definiii de stil ( ), legturi (link) i altele". Vom
aplica o definiie de stil pentru , n care permitem o imagine de
fundal pentru ntregul coninut al paginii. Aplicm urmtorul cod:
body{background-image: url("map.jpg");}Obs: map.jpg este o
imagine pe care o prelucrm(mrim/micorm) ntr-un foto-editor
(ex:Paint) astfel nct s ocupe, la vizualizare, ntreaga
suprafa.Salvm documentul cu numele Romania.html i considerm
aplicaia rezolvat.
Codul final este:
Romania body{background-image: url("map.jpg"); }
Aplicaie:
Creai un folder cu numele Aplicaie pe desktop. Realizai o pagin
web care are ca tem realizri din domeniul dumneavoastr de
activitate i folosete ct mai multe noiuni nsuite n cadrul Modulului
III.Material ajuttor:
Pagina de baz, pe care o putei salva cu numele index.html n
folderul creat, ar putea fi:
Curs
Program de formare continu :
Comunicare n mediu virtual
- Pagina principal
- Google disc
- Blogger
- HTML
- Partea I
- Partea a II-a
- Partea a III-a
Galerie foto
Contact
Pentru a tri, a nva i a lucra ntr-o societate bazat pe
cunoatere, din ce n ce mai complex i n care volumul de informaii
este din ce n ce mai mare, att elevii ct i profesorii trebuie s
utilizeze n mod eficient tehnologiile informaiei i comunicrii
(TIC). ntr-un mediu educaional modern i eficient, acetia trebuie s
devin capabili s utilizeze tehnologiile informaiei i comunicrii s
caute, s analizeze i s evalueze informaii, s utilizeze n mod
creativ i eficient instrumente specifice mediului virtual, s
comunice, s colaboreze, s editeze i s creeze, s devin ceteni
informai, responsabili i implicai. Cadrul didactic este responsabil
pentru crearea unui mediu adecvat i pentru pregtirea unor activiti
de nvare care s faciliteze utilizarea tehnologiilor de ctre elevi
cu scopul de a nva i de a comunica. Prin urmare, este esenial ca
toi profesorii s fie pregtii s desfoare astfel de activiti cu
elevii lor. Cadrele didactice trebuie s fie pregtite s-i fac pe
elevi s beneficieze de avantajele pe care tehnologiile le pot
oferi. Instituiile educaionale, att cele reale, ct i cele virtuale,
trebuie s aib profesori care s dein resursele i competenele
necesare n domeniul tehnologiilor i care s fie capabili s predea
coninutul specific disciplinei lor incorpornd n acelai timp
conceptele i competenele specifice tehnologiilor. Simulrile
interactive pe calculator, resursele educaionale digitale i
deschise i instrumentele avansate de colectare i analiz a datelor
sunt doar cteva dintre resursele prin care cadrele didactice pot
oferi posibiliti noi de nelegere conceptual. Profesorii trebuie s
fie capabili s utilizeze TIC pentru a crea i pentru a evalua
proiectele individuale sau de grup ale elevilor, precum i s
contacteze experi i s colaboreze cu ali profesori, utiliznd
Internet-ul i participnd activ n cadrul reelelor profesionale.
Pornind de la un sondaj (Eficiena utilizrii noilor tehnologii n
educaie, EduTic 2009) n care: Tehnologia m ajut s obin coninuturile
obligatorii/ s mprtesc coninuturile cu colegii mei a obinut un
procent de numai 2.75% i de la discuiile cu colegii de alte
specialiti dect Informatica, am ajuns la concluzia c popularizarea
unor mijloace care permit colaborarea n mediu virtual este benefic
pentru cadrele didactice, iar desfurarea unor cursuri n acest sens
este necesar.
Dup cum ai observat deja, va fi nevoie de dou imagini cu numele
imag1.jpg i imag2.jpg, pe care le putei alege i pe care le vei
salva n acelai folder.
Meniul aplicaiei, realizat cu liste ordonate i neordonate,
folosete legturi. Pentru unele dintre acestea, se pot folosi, de
exemplu, paginile disc.html i foto.html, salvate n acelai
folder.
Disc
Program de formare continu :
Comunicare n mediu
virtual
- Pagina principal
- Google disc
- Blogger
- HTML
- Partea I
- Partea a II-a
- Partea a III-a
Galerie foto
Contact
Google Disc (Drive)
Folosind Google Disc putei s ncrcai i s convertii
documente Word, OpenOffice, RTF, HTML, fiiere text (.txt), Open
Office (.odt) i fiiere
StarOffice Writer (.sxw) (sau creai documente de la zero), s
formatai cuuurin documentele, s verificai ortografia, s invitai
alte persoane s modifice
sau s vizualizeze documentele dvs., prin e-mail. De asemenea,
putei s modificai
documente online, colabornd cu oricine dorii, s vizualizai
istoricul versiunilor
documentelor i revenii la orice versiune, s publicai documente
online ca pagini web sau s publicai documente pe blogul personal, s
descrcai documente pe desktop n format Word, OpenOffice, RTF, PDF,
HTML sau zip, s trimitei documentele prin e-mail ca ataamente. n
privina foilor de calcul, putei s importai i s convertii date n
format .xls, .csv, .txt i .ods, s exportai date n format .xls,
.csv, .txt i .ods i fiiere PDF i HTML, s utilizai formatarea i
editarea formulelor pentru a calcula rezultate i pentru a afia
datele cu aspectul dorit, s conversai n timp real cu alte persoane
care editeaz foaia de calcul, sau s ncorporai o foaie de calcul pe
blogul dvs. sau pe site-ul dvs. web.n prezentrile Power Point, avei
posibilitatea s editai i s colaborai la prezentri cu prietenii i
colegii, s importai i s convertii prezentrile pe care le avei n
tipurile de fiier .ppt i .pps, s descrcai prezentrile ca fiier PDF,
PPT sau TXT, s modificai cu uurin prezentrile, s inserai imagini i
videoclipuri i formatai slide-urile n funcie de preferine, s
permitei vizualizarea n timp real a prezentrilor, online, din
locaii separate i aflate la distan, s publicai i s ncorporai
prezentrile dvs. ntr-un site web, permind accesul la acestea unui
public larg.
Foto
Pagina principal
12
