Bucovina Prezenta pe Internet
CUPRINS
INTRODUCERE ……………………………………………………………….………5
CAPITOLUL I: INTERNET ȘI WORD WIDE WEB………………………………………..8
I.1. Introducere în Internet……………………………………………………………………………………8
I.2. Arhitectura World Wide Web……………………………………………………………………….10
CAPITOLUL II: LIMBAJUL HTML……………………………………………………………….13
II.1. Generalități…………………………………………………………………………………………………13
II.2. Editarea unui document HTML…………………………………………………………………….14
II.3. Structura unui document HTML…………………………………………………………………..14
II.4. Formatarea paragrafelor……………………………………………………………………………….17
II.5. Formatarea fonturilor…………………………………………………………………………………..20
II.6. Folosirea imaginlor GIF și JPG……………………………………………………………………..22
II.7. Liste în Limbajul HTML………………………………………………………………………………23
II.8. Inserarea tabelelor……………………………………………………………………………………….25
II.9. Crearea de link-uri……………………………………………………………………………………….27
II.10 Formulare………………………………………………………………………………………………….29
CAPITOLUL III: LIMBAJUL JAVASCRIPT……………………………………..33
III.1. Generalități………………………………………………………………………………………………..33
III.2. Inserarea unui JavaScript într-un document HTML………………………………………..33
III.3. Cum se execută un script intr-un document HTML………………………………………….34
CAPITOLUL IV: FOI DE STIL…………………………………………………………..35
IV.1. Generalități………………………………………………………………………………………………35
IV.2 Componentele unui obiect CSS……………………………………………………………………35
IV.3. Introducerea stilurilor în HTML………………………………………………………………….36
CAPITOLUL V: UTILIZAREA LIMBAJULUI HTML LA REALIZAREA
PAGINII WEB „BUCOVINA – PREZENȚĂ PE INTERNET”………………………38
CAPITOLUL VI: METODICA PREDĂRII INFORMATICII………………………45
VI.1. Proiecte de lecții…………………………………………………………………………………………..46
VI.2. Organizatori cognitivi……………………………………………………………………………………67
VI.2. Măsuri de securitate în laboratorul de informatică……………………………………………..71
CONCLUZII………………………………………………………………………………………………………74
BIBLIOGRAFIE………………………………………………………………………………………………..76
INTRODUCERE
Folosirea computerului în procesul de predare-învățare-evaluare devine o necesitate în condițiile dezvoltării accelerate a tehnologiei informației. Implicând calculatorul în procesul educativ putem diversifica strategiile didactice utilizare și putem facilita accesul elevului la informații mai ample, mai logic organizate, prezentate în modalități diferite de vizualizare.
Asistarea procesului educativ cu calculatorul presupune: predarea unor lecții de dobândire de noi cunoștințe, aplicarea, consolidarea, sistematizarea noilor cunoștințe, verificarea automată a unei lecții sau a unui grup de lecții, verificarea automată a unei discipline școlare sau a unei anumite programe școlare. Calculatorul este utilizat ca suport tehnic, iar softul este utilizat ca suport informațional.
Utilizarea calculatorului în procesul de învățământ transformă profesorul într-un coordonator și evaluator al procesului didactic, el nemaifiind sursa principală de transmitere a cunoștințelor. Manualul, sursa informațională de bază, devine un punct de plecare care se completează cu informațiile obținute cu ajutorul calculatorului. Elevul este un adept al utilizării calculatorului în procesul didactic, mai ales în contextul ultimilor ani. Învățarea centrată pe elev devine baza instruirii asistate de calculator.
Folosirea calculatorului îi oferă profesorului disponibilități de timp și posibilități de a folosi acest timp ocupându-se mai mult de organizarea învățării, de structurarea conținuturilor, de exersarea gândirii la elevi, de stimularea creativității acestora, aspecte adeseori neglijate până acum.
Utilizând calculatorul, elevii, sub îndrumarea permanentă a profesorului la școală sau individual, acasă, pot obține informații necesare pregătirii lecțiilor și temelor la toate disciplinele, pot selecta surse din Internet care conțin informații care să-i ajute în dezvoltarea proiectelor.
Activitatea de învățare și progresul elevilor trebuie să fie evaluat. În acest sens, utilizarea calculatorului joacă un rol foarte important. Evaluarea la clasă se poate face obiectiv, într-un timp scurt, utilizând teste cu itemi obiectivi sau semiobiectivi. În concursurile școlare specifice disciplinei informatică, utilizarea evaluatoarelor automate a devenit o practică curentă. Aceleași instrumente pot fi utilizate de către elevi în propria pregătire, pentru autoevaluare.
Utilizarea tehnologiei informației și a comunicațiilor la disciplinele informatice constituie un răspuns la nevoia de diversificare a conținuturilor orelor petrecute în sala de clasă, în laboratorul de informatică, dar și în afara școlii în pregătirea individuală a elevilor și a profesorilor.
Educația trebuie să țină pasul cu evoluția tehnologiei, sa înțeleaga și să anticipeze impactul asupra modului de învățare. Calculatoarele au fost încorporate în programele educaționale oferindu-le celor ce se instruiesc o libertate si flexibilitate mai mare dar și individualitate în clasă. Folosirea Internetului de către elevi a fost o idee care a prins repede. Afinitatea naturală dintre elevi/studenți și Internet a dat naștere mai multor proiecte orientate înspre elevi, inițiate de elevi, conduse de elevi.
Școala trebuie să pregătească în mod real elevul pentru viață, dezvoltându-i competențele cheie care îi pot asigura integrarea socială. Având în vedere tehnologizarea și utilizarea sistemelor computerizate în toate domeniile – proiectare, statistică, financiar-bancar, industrie și la scară largă deja în sănătate, un rol important în inserția pe piața muncii a absolvenților de liceu o are formarea de competențe digitale avansate.
Lucrarea de față este structurată astfel: Introducere; capitolul I – Internet și World Wide Web ; capitolul al II-lea – Limbajul HTML; capitolul al III-lea – Limbajul JAVASCRIPT; capitolul al IV-lea – Foi de stil; capitolul al V-lea – Descrierea site-ului; capitolul al VI-lea – Metodica predării Informaticii, Concluzii și Bibliografie.
Introducerea face o scurtă analiză a diversificării metodelor de predare-învățare și a sistemului de învățământ la distanță. De asemenea se face o trecere în revistă a conținutului lucrării de față cu referiri la aspectele esențiale.
În primul capitol am prezentat noțiunile de bază din domeniul rețelelor de calculatoare și din domeniul Internet, descrierea arhitecturiii World Wide Web și pașii necesari într-un ciclu de creare-vizualizare rezultat, pentru o pagină Web.
Capitolul al II-lea conține o prezentare a Limbajului HTML, descrierea structurii de bază a unui document, explicarea sintaxei directivelor HTML, folosirea directivelor HTML pentru formatarea logică și fizică a textului, folosirea imaginilor, realizarea tabelelor.
Capitolul al III-lea cuprinde o descriere a limbajului JAVASCRIPT și utilizarea lui în cadrul unui document HTML.
Capitolul al IV-lea oferă informații cu privire la utilizarea foilor de stil – CSS.
În capitolul al V-lea este prezentată construcția site-ului pas cu pas. Sunt descrise paginile site-ului și modul de realizare a elementelor principale.
Capitolul al VI-lea se referă la Metodica predării Informaticii și cuprinde exemple de proiecte de lecție, organizatori cognitivi și reguli de securitate în laboratorul de informatică
Urmează concluziile și o anexă cu cele mai importante tag-uri din HTML împreună cu atributele lor.
CAPITOLUL I – INTERNET ȘI WORLD WIDE WEB
I.1 Introducere în Internet
Noțiunea de Internet provine din alăturarea artificială și parțială a două cuvinte englezești: interconnected = interconectat și network = rețea.
Conectarea la internet (Fig.I.1) se realizează prin :
linie de telefon fixă;
ruter (sau modem ADSL) conectat la rețeaua fixă de telefonie sau de ADSL;
controler de comunicații dedicat;
rețele de telefonie celulară, mobilă (GSM);
rețeaua de cablu de TV;
Fig.I.1 Accesul la Internet
(Sursa http://internet-4kids.weebly.com)
Internetul este format din rețele locale de calculatoare interconectate care formează rețele globale de calculatoare numite și inter-rețele. Rețeaua INTERNET este cea mai mare inter-rețea cu acces public.
Calculatoarele din rețea sunt dotate cu plăci de rețea (Ethernet, modem) care prin intermediul cablurilor coaxiale, telefonice sau fibră optică, sunt puse în legătură. Acest tip de legătură se folosește pentru rețele locale numite LAN (Local Area Network). Dacă rețeaua se extinde la nivelul unui oraș atunci se încadrează în tipul MAN (Metropolitan Area Network). Atunci când rețeaua se extinde la nivel și mai mare cum ar fi cel național apare o rețea de tip WAN (Wide Area Network). Aceste rețele sunt conectate între ele prin legături mai rapide cum ar fi circuite de comunicație digitală, satelit, fibră optică, pentru a nu încetini accesul pe distanțe mari și pentru o mare putere de transmitere a informațiilor.
În același timp Internetul este o uriașă comunitate care facilitează comunicarea în timp real și eficient și o sursă de informare datorită cantității mari de informații depozitate.
Rețeaua Internet se dezvoltă într-o manieră explozivă datorită câtorva proprietăți cum ar fi: interoperabilitatea dintre calculatoare, globalitatea sistemelor de programare, ușurința utilizării și costul redus al accesului la rețea.
Internetul oferă utilizatorilor săi mai multe servicii:
World Wide Web – abreviat WWW sau și www, numit scurt și web, care în engleză înseamnă „ rețea mondială” respectiv „ rețea”, permite accesul la informația stocată oriunde în lume;
E-mail – poșta electronică;
FTP – transfer de fișiere;
Telnet – permite accesul la resursele altui calculator din Internet
Toate calculatoarele din rețea comunică între ele pe baza unor reguli fixe numite protocoale, devenite standard pe plan mondial.
Protocolul de comunicație utilizat în Internet pentru serviciile de mai sus este TCP/IP (Protocol de control al transmisiei/Protocol Internet). Acesta definește:
modul în care calculatoarele ar trebui să fie conectate în Internet;
modul în care se realizează o legătură de la un calculator la altul din Internet;
modul în care sunt transmise date între calculatoarele din Internet.
Modelul TCP/IP a fost creat de Ministerul Apărării Naționale al Statelor Unite din necesitatea unei rețele care ar putea supraviețui în orice condiții. Acesta dorea ca, atâta timp cât funcționau mașina sursă și mașina destinație, conexiunile să rămână intacte, chiar dacă o parte din mașini sau din liniile de transmisie erau brusc scoase din funcțiune. Era nevoie de o arhitectură flexibilă, deoarece se aveau în vedere aplicații cu cerințe divergente, mergând de la transferul de fișiere până la transmiterea vorbirii în timp real.
Aceste cerințe au condus la alegerea a patru niveluri pentru modelul TCP/IP:
Aplicație – se referă la protocoalele de nivel înalt folosite de majoritatea aplicațiilor, precum terminalul virtual (TELNET), transfer de fișiere (FTP) și poștă electronică (SMTP),
Transport – se ocupă cu probleme legate de siguranță, control al fluxului și corecție de erori,
Rețea (sau Internet) – asigură rutarea pachetelor în interiorul unei singure rețele,
Acces la Rețea – se ocupă cu toate problemele legate de transmiterea efectivă a unui pachet IP pe o legătură fizică, incluzând și aspectele legate de tehnologii și de medii de transmisie.
Un calculator trebuie să aibă o adresă de rețea unică pentru a se putea conecta și a fi identificat în rețea. Aceasta poartă denumirea de adresă IP . O adresă de IP este formată din 4 grupe de cifre cuprinse între 0 și 255 separate prin caracterul “.”.
Exemplu IP: 83.249.85.99
Deoarece formatul acesta de adresă este greu de reținut, a fost creat un sistem care permite transformarea adreselor IP în cuvinte. Acesta poartă numele de Nume de Domeniu/ Sistem DNS (Domain Names / Domain Name System).
De exemplu, mai rapid iti amintesti [anonimizat] decat nume@80.96.148.26.
I.2 Arhitectura World Wide Web
World Wide Web abreviat WWW sau și www, numit scurt și web, care în engleză înseamnă „ rețea mondială” respectiv „ rețea” este serviciul care permite accesul la informația stocată oriunde în lume.
Web-ul reprezintă un sistem de distribuție locală sau globală a informațiilor hipermedia. Acesta nu trebuie confundat cu Internet-ul fiind una din componentele software cele mai dinamice ale acestuia, ce nu poate exista fără infrastructura hardware a rețelelor mondiale interconectate.
Webul a fost inventat în 1989 la Centrul European de Cercetări Nucleare (CERN) din Geneva, Elveția. Propunerea inițială de creare a unei colecții de documente având legături între ele a fost făcută de Tim Berners-Lee în martie 1989. Propunerea a apărut în urma problemelor de comunicare pe care le întâmpinau echipele de cercetători ce foloseau centrul, chiar și folosind poșta electronică.
World Wide Web reprezintă un sistem de calculatoare în Internet care poate realiza schimb de fișiere HTML. Acestea suportă existența de legături către alte documente sau către fișiere audio sau grafice.
La baza funcționării webului stau 3 standarde, și anume:
Hypertext Transfer Protocol (HTTP) – stiva de protocoale OSI prin care serverul web și browserul clientului (utilizatorului) comunică între ele;
Hypertext Markup Language (HTML) – standard de definire și prezentare a paginilor web.
Uniform Resource Identifier (URI) – sistem universal de identificare a resurselor din web, folosit pentru a identifica și regăsi paginile web;
Următoarele standarde sunt definite mai târziu:
Cascading Style Sheets (CSS)
JavaScript
Hypertext Transfer Protocol Secure – HTTPS.
Modul de functionare (Fig.I.2) este foarte simplu din punctul de vedere al utilizatorului: folosind un client web introduce adresa (URL-ul) resursei pe care dorește să o acceseze. Clientul trimite adresa prin protocolul HTTP la serverul de web de la acea adresă, care intoarce la client resursa (pagina) cerută. Elementele din figură sunt descrise mai jos:
Fig. I.2 World Wide Web – Modul de funcționare
Sursa – http://vega.unitbv.ro
Server-ul web este un program ce rulează pe un calculator conectat permanent la Internet și care servește cererile de pagini web primite de la diferitele calculatoare conectate la Internet, cereri trimise prin intermediul navigatorului.
Clientul web (Internet Explorer, Netscape Navigator, Opera, Mozilla, etc.) este browser-ul (navigatorul) care permite accesarea informațiilor pe diferitele servere web din Internet. Acesta permite vizualizarea unei pagini de la o anumita adresă, memorează paginile vizitate recent, pentru a fi accesate mai rapid când utilizatorul cere o pagina deja vizitată (cu butoanele Back și Forward), memorarea anumitor adrese (Bookmark sau Favorites) pentru vizitare ulterioară etc.
Protocoalele în general sunt un set de reguli, comenzi folosite pentru a schimba informații între calculatoare. Protocolul HTTP (HyperText Transfer Protocol) este folosit pentru schimbul de fișiere cum ar fi text, imagini, sunet, video între server și clientul web. Când utilizatorul introduce adresa unei pagini web sau face click pe o legătură hypertext navigatorul trimite o cerere HTTP către serverul care se află la adresa respectivă. Serverul primește cererea și după procesarea ei trimite fișierul cerut la clientul care a facut cererea.
URL (Uniform Resource Locator) este adresa unei resurse, unui fișier accesibil pe Internet.
Un site web este o colecție de documente web (în format HTML) ce includ o pagină de intrare numită home page. Site-ul web al unei persoane sau al unei firme poate fi accesat prin adresa "home page"-ului. De acolo după aceea se poate accesa restul site-ului.
Paginile web sunt fișiere cu un anumit format ce permite organizarea asociativă a informațiilor. Acestea au extensia .htm sau .html.
Crearea unei pagini web presupune următorii pași:
1. editarea fișierului HTML utilizând fie un editor de texte obișnuit (Notepad, Wordpad etc.), fie un editor de texte dedicat (Netscape Composer, HotMetal etc.);
2. salvarea paginii Web cu extensia .html sau .htm într-un site Web;
3. Rezolvarea referințelor conținute în pagina Web (legături, imagini, sunete, filme etc.);
Pentru a vizualiza pagina Web creată se utilizează un browser web.
CAPITOLUL II: LIMBAJUL HTML
II.1 Generalități
HTML este prescurtarea de la Hyper Text Mark-up Language și este codul care stă la baza paginilor web.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. Acest limbaj a fost vazut de către fizicienii care utilizau computere diferite ca o modalitate de a schimba informații între ei utilizând Internetul. Pentru ca acest lucru să fie posibil erau necesare câteva caracteristici:
independența față de platformă,
posibilități hypertext,
structurarea documentelor.
Independența față de platformă se referă la posibilitatea ca un document să poată fi afișat în mod asemănător de către computere diferite.
Hipertext înseamnă că orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator ( client ) poate face referință la un alt document. Acest lucru ușura foarte mult navigarea între multiple documente sau chiar în interiorul aceluiași document.
Structurarea documentelor permite convertirea acestora dintr-un format în altul precum și interogarea unor baze de date formate din aceste documente.
HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web.
HTML oferă mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri.
Majoritatea oamenilor sunt de acord că documentele HTML ar trebui să meargă bine cu orice tip de browser și pe orice platformă. Atingerea acestei interoperabilități diminuează costurile publicanților de documente deoarece ei trebuie să dezvolte doar o singură versiune a respectivului document. Dacă efortul nu este făcut, este mult mai mare riscul ca Web-ul să se extindă într-o lume proprietară a incompatibilității, în final reducând potențialul comercial și informațional al Web-ului pentru toți participanții.
Fiecare versiune de HTML a încercat să reflecte un consens din ce în ce mai mare în privința utilizării unui singur format de bază pentru ca investiția făcută de publicanți să nu fie risipită și ca documentele lor să nu devină imposibil de citit într-o perioadă scurtă de timp.
II.2 Editarea unui document HTML
Sunt mai multe programe cu care se pot crea pagini web, chiar fără a cunoaște limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de bază pentru editarea paginii web. Avantajul folosirii lor este simplitatea. Pentru realizarea paginii web sunt necesare câteva din codurile invizibile ale limbajului HTML. Astfel se crează documente rapid și usor, în plus ocupă foarte puțin spațiu și resurse de memorie, acestea însă necesită cunoașterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad.
Documentul astfel editat se salvează cu extensia .htm sau .html transformându-se în pagină web.
Pentru a vizualiza pagina web astfel creată se utilizează un browser.
II.3. Structura unui document HTML
Paginile HTML sunt formate din etichete sau tag-uri și au extensia „.html” sau „.htm”. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta />.
Navigatorul web interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul este un limbaj care nu face deosebire între litere majuscule și minuscule.
Pagina principala a unui domeniu este fisierul „index.html” respectiv „index.htm”. Această pagină este setată a fi afișată automat la vizitarea unui domeniu.
De exemplu la vizitarea domeniului www.litera.ro este afișată pagina www.litera.ro/index.html.
Componența unui document HTML este:
versiunea HTML a documentului
zona head cu etichetele <head> </head>
zona body cu etichetele <body> </body> sau <frameset> </frameset>
Toate paginile HTML încep și se termină cu etichetele <html> și </html>. În interiorul acestor etichete găsim perechile <head>, </head> și <body>, </body>.
Head conține titlul paginii între etichetele <title> și </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, script-uri și legături către fișiere externe (de exemplu script-uri, fișiere de tip CSS sau favicon).
Etichetele de tip meta conțin cuvinte cheie, descrierea paginii, date despre autor, informații utile motoarelor de căutare și au următorul format:
<META NAME="nume" CONTENT="conținut">
Body găzduiește practic toate etichetele afișate de browser pe ecran.
Exemplu: o pagină HTML cu titlul Prima mea pagină web iar conținutul Conținut pagină
Fig. II.1 Prima mea pagină Web
Elementul <body>…</body> are o importanță deosebită în ceea ce privește imaginea de ansamblu a paginii web, deoarece el permite definirea unor parametri globali cum ar fi: culoarea sau imaginea de fundal a paginii sau culoarea textului și a legăturilor din pagină. Acești parametri globali se definesc cu ajutorul atributelor directivei.
Atributul bgcolor – folosit pentru stabilirea culorii de fundal a paginii Web. Valoarea acestui parametru va fi numele în limba engleză al culorii, încadrat în ghilimele (Ex: „red”, „green”, „blue” sau codul culorii precedat de semnul # încadrat de asemenea de ghilimele.
Exemplu:
Fig. II.2 Utilizarea atributului bgcolor
Cele mai folosite culori sunt redate în tabelul de mai jos însoșite de codul corespunzător fiecărei nuanțe.
Tabel nr. II.1 Coduri de culori uzuale
Atributul background – se poate utiliza pentru a seta ca fundal pentru o pagină Web o imagine. Adresa acesteia este specificată ca valoare a parametrului Background specific marcajului <body>…</body>
<body background=URL>…</body>
Obs. Dacă fișierul imagine se află în directorul curent atunci este suficient să dăm prin URL doar numele fișierului imagine (cel mai indicat), în caz contrar trebuie specificată prin URL toată calea de acces la fișierul imagine respectiv.
Atributul TEXT este utilizat pentru a defini culoarea textului din documentul HTML. Culoarea implicită a textului este negru. Culoarea se poate specifica prin nume sau folosind modelul RGB.
Exemplu: <body text=”red”>
La alegerea culorii textului trebuie avut în vedere ca acesta să poată fi distins ușor de fundal.
Atributele LINK, ALINK, VLINK permit controlul legăturilor în funcție de starea acestora:
– LINK – definește culoarea cu care vor fi afișate inițial legăturile. Implicit este albastru.
– ALINK – definește culoarea legăturii în momentul activării.Implicit este roșu.
– VLINK – definește culoarea cu care vor fi afișate legăturile care au mai fost vizitate. Implicit este purpuriu.
II.4 Formatarea paragrafelor
Pentru ca o pagină să fie cât mai ușor de citit este recomandată împărțirea ei în paragrafe. Spre deosebire de documentele scrise cu procesoarele de text existente, caracterele de linie nouă nu sunt luate în considerare. Orice tip de spațiere va fi transformată într-un singur spațiu liber în momentul afișării documentului de către browser.
Pentru a indica începerea sau terminarea unui paragraf și deci trecerea la o linie nouă se utilizează directiva HTML <p></p>.
Directiva de final </p> poate fi omisă deoarece majoritatea browserelor la întâlnirea unei noi directive <p> consideră automat că paragraful anterior s-a terminat.
Paragrafele permit să adaugi text în document astfel încât lungimea de afișare a textului va fi ajustată de mărimea deschiderii browser-ului și fiecare paragraf va începe un nou rând.
Distanța dintre două paragrafe succesive este mare deoarece browser-ul le afișează cu un rând gol între ele.
Exemplu: Codul HTML
Fig. II.3 Utilizarea directivei <p></p>
Uneori este necesară trecerea forțată la o linie nouă fără a termina însă paragraful curent. Deoarece caracterele de linie nouă sunt ignorate în HTML această trecere se face folosind directiva HTML <br>. Aceasta nu are directivă de sfârșit deoarece elementul marchează o poziție și nu are niciun conținut care să trebuiască delimitat.
Fig. II.4 Utilizarea directivei <br>
Elementul <br> folosește un singur atribut – CLEAR, care poate avea valoarea LEFT, RIGHT sau ALL, și este folosit dacă este o imagine pe pagină. Atributul CLEAR forțează o linie în jos. Dacă o imagine este așezată în partea stângă a paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea stângă.
O altă modalitate de a separa diferite părți ale unui document este utilizarea directivei <HR>. Prin utilizarea acestei directive browserul trece automat la o linie nouă și trasează o linie orizontală.
Caracteristicile liniei orizontale pot fi controlate prin atributele directivei:
width – stabilește lungimea liniei în pixeli sau procent din lungimea ferestrei,
align – stabilește modul de aliniere a liniei și poate lua valorile left, center, right,
noshade – prezența acestui atribut indică faptul că linia va fi desenată fără umbră,
size – specifică grosimea (în pixeli) cu care va fi desenată linia.
Fig. II.5 Utilizarea directivei <HR>
Pentru alinierea la stânga, la dreapta sau centrat a unui paragraf se folosește pe lângă marcajul <p>…</p> opțiunea align, opțiune ce poate primi ca valoare unul din cuvintele: left, right, center. Valoarea trebuie încadrată de ghilimele.
II.5 Formatarea fonturilor
Directiva <BASEFONT> stabilește dimensiunea implicită a fontului pentru textul folosit în interiorul documentului HTML. Titlurile nu sunt afectate de aceasta directivă. Această directivă are un singur atribut – SIZE. Acesta stabilește dimensiunea implicită a fontului folosit în cadrul documentului. Valoarea lui este un număr întreg cuprins între 1 și 7. Implicit are valoarea 3.
Aceast element nu are directivă de sfârșit.
Modificarea fontului de bază ar trebui făcută cu grijă deoarece alegerea unei dimensiuni prea mari poate duce la situația în care fontul pentru titlu are dimensiuni mai mici decât fontul textului propriu-zis.
Pentru a defini carecteristicile fontului precum dimensiune, culoare, tip se utilizează directiva <FONT></FONT>. Directiva de sfârșit este obligatorie.
Directiva <FONT> are atributele: size, color, face.
Atributul SIZE modifică mărimea textului. Acesta poate lua valorile numerice de la 1 la 7 și pe lângă acestea poate folosi, ca valoare relativă, semnele "+" sau "-". Textul normal (dacă nu este specificat acest atribut) are valoarea 3.
Atributul COLOR definește culoarea textului din interiorul elementului FONT. Precizarea culorii se face folosindu-se codul RGB sau numele predefinit al culorii dorite.
Atributul FACE permite modificarea tipului de font utilizat pentru afișarea textului. Dacă fontul nu este suportat de către browser va fi folosit tipul implicit de font.
Fig. II.6 Formatarea fontului
Fiecare font poate fi afișat pe ecran în mai multe stiluri: normal, îngroșat, înclinat, subliniat.
<b>…</b> – pentru ca un cuvânt sau o porțiune de text din pagina Web să apară îngroșat;
<i>…</i> – pentru ca un cuvânt sau o porțiune de text din pagina Web să apară înclinat;
<u>…</u> – pentru ca un cuvânt sau o porțiune de text din pagina Web să apară subliniat.
Directiva <PRE></PRE> creează un spațiu în interiorul căruia textul va fi afișat de către browser exact în formatul din codul sursă HTML, păstrându-se numărul de spații libere succesive. Lungimea liniei nu mai este potrivită în raport cu dimensiunea ferestrei browserului.
Textul din interiorul directivei <pre></pre> este afișat folosindu-se un font cu lungimea constantă a caracterului.
Aceasta directivă are un singur atribut opțional – WIDTH care determină numărul de caractere conținute într-o linie a blocului preformatat.
Directiva <pre></pre> poate include orice directivă de formatare logică sau fizică a textului, imagini sau legături.
Directivele care indică sfârșitul unui paragraf nu sunt indicate a fi folosite pentru că rezultatul utilizării lor nu este consistent pentru toate tipurile de browsere.
Utilizarea acestor elemente se impune în general pentru realizarea de tabele sau atunci când este necesară păstrarea integrității unor coloane sau rânduri.
II.6 Folosirea imaginilor GIF și JPEG
Cele mai folosite formate pentru imaginile adăugate într-o pagină HTML sunt GIF (8 biți pentru o culoare, 256 culori posibile) și JPEG (24 biți pentru o culoare, 16 777 216 culori posibile). Avantajul acestora este că imaginile care au aceste extensii au o mărime mică (in bytes).
Formatul grafic folosit pentru prima dată în cadrul paginilor Web este GIF (Graphic Interchange Format – Format grafic pentru transfer).
Dezavantajul acestui format este că nu permite folosirea uni număr mai mare de 256 de culori pentru o imagine. Acest dezavantaj a fost inlăturat în cazul formatului JPEG.
Formatul grafic JPEG a fost creat de către Joint Photographic Experts Group (Grupul experților fotografi) și este ca și GIF independent de platformă
Pentru a introduce o imagine într-un format HTML se folosește elementul <img> </img> împreună cu următoarele atribute :
SRC – valoarea acestui atribut determină locația fișierului care conține imaginea.
ALT – prin acest atribut se scrie textul care va apărea dacă imaginea nu e afișată (de unele browsere) sau când utilizatorul va poziționa, în browser, mouse-ul peste imagine.
ALIGN – acest atribut permite așezarea imaginii în locuri diferite pe pagină. Pot fi folosite următoarele opțiuni: Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
WIDTH – valoarea acestui atribut reprezintă lungimea imaginii, în pixeli. Dacă nu este scris imaginea va fi prezentată cu lungimea originală.
HEIGHT – valoarea acestui atribut reprezintă înălțimea (lățimea) imaginii, în pixeli. Dacă nu este scris imaginea va fi prezentată cu înălțimea originală.
BORDER – prin adăugarea acestui atribut imaginea va apărea înconjurată de un chenar, valoarea acestui atribut reprezintă grosimea chenarului, în pixeli.
HSPACE – acest atribut este pentru spațiu orizontal pe ambele părți ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spațiu invizibil, de 5 pixeli, în părțile orizontale ale imaginii.
VSPACE – acest atribut este pentru spațiu vertical pe ambele părți ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spațiu invizibil, de 5 pixeli, în părțile verticale ale imaginii.
Fig. II.7 Utilizarea imaginilor
II.7 Liste în Limbajul HTML
Enumerările, de orice fel, constituie o parte importantă a comunicării prin faptul că ajută la sistematizarea și evidențierea unor intrãri.
În HTML se pot marca (ceea ce urmează este un exemplu de lista neordonată cu buline):
liste neordonate, cu buline sau fără;
liste ordonate;
liste de definiție.
Listele pot fi îmbricate, o întreagă listă poate fi element în altă listă.
Primele două tipuri de liste au ca punct comun noțiunea de element al listei (item), definit prin tagul LI.
Listele neordonate sunt folosite pentru enumerarea unor elemente pentru care ordinea de apariție nu este importantă.
O listă neordonată se definește folosind directiva <UL></UL>. In interiorul acestei directive fiecare element se specifică folosind directiva <LI>.
Elementele din listă sunt precedate de un marcator. Schimbarea simbolului care precede elementele din listă se poate face utilizând parametrul type al marcajului <UL>…</UL>, căruia i se pot asocia una din următoarele valori: disc, circle, square.
Fig.II.8 Exemplu lista neordonată
Listele ordonate sunt folosite atunci când ordinea elementelor este importantă. O listă ordonată are aceeași structură de bază ca o listă neordonată.
Pentru a defini o listă ordonată se folosește directiva <OL> în interiorul căreia fiecare element se specifică folosind directiva <LI>.
Fig.II.9 Exemplu listă ordonată
Listele de definiție permit enumerarea unei liste de elemente fiecare dintre acestea fiind urmate de explicația lor. Pentru definirea acestor tipuri de listă se folosesc directivele <DD>, <DL>, <DT>.
Fig. II.10 Exemplu listă definiții
II.8 Inserarea tabelelor
Tabelele sunt elemente foarte utile pentru așezarea și prezentarea conținutului într-o pagină web.
Pentru a crea tabele în paginile web se folosește elementul <table> </table>. Acesta încadrează alte patru sub-elemente, care alcătuiesc structura tabelului.
Linia (randul) Tabelului <tr> </tr>,
Titlul Tabelului <th> </th>,
Coloanele tabelului (datele) <td> </td>,
Sub-titlu tabelului <caption></caption>.
Linia tabelului conține elementul pentru titlurile tabelului și elementul pentru coloanele tabelului. În cadrul elementelor pentru titlurile și coloanele tabelului se pot adăuga și alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini.
Mai jos puteți vedea un exemplu de cod HTML pentru crearea unui tabel:
Fig. II.11 Tabel
Atributele Tabelului
bgcolor = definește culoarea tabelului
width = specifică lungimea tabelului (în pixeli sau procente din lungimea paginii)
border = grosimea liniei (în pixeli) ce definește tabelul si înconjoară fiecare celulă
cellspacing = spațiu dintre celule (în pixeli)
cellpadding = spațiu dintre linia celulei si conținutul acesteia (în pixeli)
align = controlează poziționarea tabelului in pagină, cu următoarele atribute : left, right, sau center
background = controlează culoarea de fond a tabelului, care poate fi și o imagine
bordercolor = culoarea liniei din jurul tabelului
bordercolorlight = culoarea luminoasă folosită de două linii din cele patru care înconjoară tabelul
bordercolordark = culoarea întunecată folosită de doua linii din cele patru care înconjoara tabelul
Atributele specifice elementelor pentru titlu si coloane
colspan = specifică cât de multe coloane ale tabelului vor înlocui această celulă,
rowspan = specifică cât de multe rânduri ale tabelului vor înlocui această celulă,
align = alinierea datelor celulei pe orizontală (left, right sau center),
valign = alinierea datelor celulei pe verticală (top, middle sau bottom),
background = controlează culoarea de fond a celulei, care poate fi și o imagine,
bgcolor = definește culoarea celulei (dar nu imagine),
width = specifică lungimea celulei (în pixeli sau procente din lungimea paginii)
height = specifică înălțimea celulei (în pixeli sau procente din înălțimea paginii)
În următorul exemplu puteți vedea rezultatul folosirii atributelor: "colspan" "rowspan" si "bgcolor".
Fig. II. 12 – Folosirea atributelor colspan, rowspan, bgcolor
II.9 Crearea de link-uri
Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links). Un link este o conexiune către o altă resursă Web (un alt hipertext sau o imagine, o secvență video sau audio, un program), resursă care poate fi accesată din fereastra browser-ului printr-un simplu clic.
Forma generală pentru crearea unui link este următoarea:
<a href="url" title="Titlu link">Nume</a>
a este elementul specific pentru crearea link-urilor
href este atributul care marchează indicarea adresei link-ului
url este adresa link-ului (a paginii care va fi deschisă).
title este atributul prin care se dă un titlu link-ului (un text ascuns, care apare numai când este poziționat mouse-ul deasupra link-ului)
Titlu link este textul ascuns care apare când este poziționat mouse-ul deasupra link-ului
Nume este textul care va apărea în browser și pe care trebuie dat click cu mouse-ul. În loc de acest text se poate folosi și o imagine, astfel "Nume" va fi înlocuit cu <img src="nume_imagine.extensie">.
Culoarea link-urilor poate fi schimbată de următoarele atribute, care trebuie scrise în interiorul elementului <BODY> :
link="#0000ff – reprezintă culoarea link-ului în browser.
vlink="#00ffff – reprezintă culoarea link-ului când pagina respectivă a fost / este vizitată.
alink="#ff0000 – reprezintă culoarea link-ului când acesta este activat.
Link-urile sunt de două feluri:
1. Link-uri externe – (sunt cele mai utilizate), care sunt și ele de două feluri:
a) Link-uri externe către pagini ale aceluiași site. Pentru acestea URL-ul poate să nu includă si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale în directoare, numele și extensia documentului la care se face saltul.
De exemplu:
dacă documentul țintă se află în același director cu fișierul în care se scrie link-ul, codul va fi scris asa:
<a href="nume_fisier.extensie" title="Titlu link">Nume</a>
dacă documentul țintă se află într-un director anterior celui în care se află fișierul în care se scrie link-ul, codul va fi scris asa:
<a href="../nume_fisier.extensie" title="Titlu link">Nume</a>
dacă documentul țintă se află într-un director din cel care se află fișierul în care se scrie link-ul, codul va fi scris așa:
<a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
b) Link-uri externe către alte site-uri. Aici, adresa URL din link trebuie să conțină și domeniul (numele site-ului) paginii țintă, codul HTML se va scrie, de exemplu, așa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link-uri interne – sunt link-uri către alte texte din aceeași pagină. Se folosesc când pagina respectivă este lungă și e nevoie să se sară spre anumite texte din pagină.
– Pentru creare de link-uri interne trebuie urmați pașii:
1. Se scrie următorul cod la textul țintă, care marchează locul unde se va face saltul și se află în aceeași pagină cu linkul
<a name="cuvant">Textul tinta</a>
– atributul "name" indică ținta pentru link, e un fel de semn care indică destinația.
– "cuvânt" poate fi orice cuvânt, trebuie să fie unic pentru fiecare link.
– "Textul tinta" este textul unde se face saltul.
2. În locul unde vrem să fie link-ul (acolo unde o să dăm click pentru a face saltul către textul ales), se scrie următorul cod:
<a href="#cuvant">Nume</a>
– aici "cuvant" este același text scris la pasul 1.
Link-urile interne și externe pot fi combinate. Astfel putem face saltul către un anumit text aflat într-o altă pagină. În pagina respectivă se scrie codul de la pasul 1, la textul ales pentru ținta link-ului, iar în pagina în care va fi link-ul se scrie:
<a href="adresa_pagina#cuvant">Nume</a>
II.10 Formulare
Constituie metode interactive de comunicare din WWW. Se pot crea formulare furnizând un anumit număr de câmpuri în care un utilizator poate introduce informații sau poate alege o opțiune dintr-o listă de opțiuni.
Formularele HTML oferă posibilitatea de a aduna informații sau impresii de la cei care vizitează pagina Web. Pentru prelucrarea datelor dintr-un formular este nevoie de un script.
Elementele principale ale unui formular sunt:
<TEXTAREA> – definește un câmp în care utilizatorul poate introduce un text pe mai multe linii;
<SELECT> – oferă utilizatorului posibilitatea de a alege dintr-o listă de opțiuni;
<INPUT> – definește toate celelalte metode de introducere a datelor (text pe o singură linie, butoane radio, butoane de trimitere sau de anulare a datelor).
Formularele HTML sunt delimitate de marcajul <FORM>, care se specifică prin <FORM ACTION=url METHOD=metoda> și de marcajul de terminare </FORM>.
ACTION specifică URL-ul (adresa) la care vor fi trimise informațiile din formular. Dacă acesta nu este specificat, informațiile vor fi trimise la același URL de unde provine pagina Web.
METHOD specifică cum vor fi trimise informațiile. Cea mai folosită metodă este POST, care trimite toate informațiile din formular separat față de URL. Cealaltă opțiune pentru METHOD este GET, care atașează informațiile din formular la sfârșitul URL-ului.
<TEXTAREA >
Cu această componentă se poate defini o zonă în care se poate introduce un text, pe mai multe linii. Atributele pentru aceasta sunt:
NAME – definește numele câmpului;
ROWS – stabilește numărul de linii pentru câmp;
COLS – stabilește numărul de coloane din câmp.
Fig. nr. II.13 Exemplu formular cu zonă pentru text
<SELECT>
Acest element oferă posibilitatea utilizatorului să aleagă dintr-o listă de opțiuni. Se poate preciza câte opțiuni să fie afișate în același timp. Atributele pentru acestea sunt:
NAME – definește numele câmpului;
SIZE – stabilește câte opțiuni sunt afișate în același timp;
MULTIPLE – permite selectarea mai multor opțiuni în același timp.
Opțiunile sunt delimitate de marcajele <SELECT> și </SELECT> și sunt listate în cadrul etichetei <OPTION>. Valorile pentru această etichetă sunt:
– VALUE – reprezintă valoarea ce este atribuită opțiunii și care este apoi trimisă către script;
– SELECTED – stabilește o opțiune ca fiind implicită.
Fig. nr. II.14 Exemplu formular cu listă de opțiuni
<INPUT>
Este un câmp pentru o singură opțiune ce permite colectarea de informații, incluzând câmpuri simple de text, butoane radio, căsuțe de bifare și butoane de trimitere sau de anulare a informațiilor din formulare. Atributele pentru acesta sunt:
– NAME – definește numele câmpului, este obligatoriu pentru toate tipurile cu excepția butoanelor de trimitere și anulare;
– SIZE – dimensiunea câmpului specificată în număr de caractere pentru text;
– MAXLENGTH – specifică numărul maxim de caractere ce pot fi citite pentru un câmp de text;
– VALUE – definește pentru un câmp de text, textul implicit ce va fi afișat. Pentru un buton radio sau o căsuță de bifare specifică opțiunea implicită ce va fi selectată. Pentru butoanele de trimitere sau anulare a informațiilor din formular, specifică textul ce va fi afișat în interiorul butonului;
– CHECKED – activează un buton radio sau o căsuță de bifare;
– TYPE – definește tipul câmpului de intrare.
Fig. nr. II.15 Exemplu formular cu butoane radio
Fig. nr. II.15 Exemplu formular cu butoane de trimitere și anulare
CAPITOLUL III: LIMBAJUL JAVASCRIPT
III.1 Generalități
JavaScript (JS) este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru acesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.
JavaScript a fost inventat pentru a adăuga paginilor Web capabilitatea de a prelucra informații introduse de utilizator sau de a executa operații fără a fi nevoie de intervenția serverului de Web.
JavaScript este un limbaj simplu scris cu scopul de a fi ușor de asimilat și utilizat de către persoane care nu au experiență în programare.
III.2 Inserarea unui JavaScript într-un document HTML
Pentru a insera JavaScript într-un document HTML deja existent, este necesară introducerea în fișier a etichetei <script> și </script>.
Aceasta etichetă necesita aributul "type" sau atributul "language" (acesta din urmă este depreciat in standardul XHTML) care va specifica browser-ului limbajul folosit pentru interpretarea codului inclus.
În interiorul etichetei <script></script> vom scrie codul nostru.
Pentru scrierea și executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi Notepad) și un browser (ex. Mozilla Firefox, Internet Explorer).
Atributul "language" va avea următoarea sintaxă:
– language="JavaScript" (aceasta specifică browser-ului ce limbaj este folosit).
Atributul "type" – înlocuitorul lui "language" – va avea următoarea sintaxă:
– type="text/javascript", aceasta spune browser-ului că scriptul este scris în format plaintext.
Putem, de asemenea, să introducem instrucțiunile JavaScript într-un alt fișier, extern, care va avea extensia ".js". Pentru editarea acestui fișier este nevoie de un editor simplu de texte.
Avantajul este că putem folosi același cod în mai multe pagini HTML și în cazul necesității unei modificări în codul JavaScript, modificăm doar datele dintr-un singur fișier (cel cu extensia ".js").
Dezavantajul acestei metode este faptul că într-un fișier extern ".js" nu putem folosi etichete HTML, ci numai instrucțiuni JavaScript.
În cazul în care codul JavaScript se află într-un fișier extern, eticheta <script> din pagina HTML va trebui să conțină atributul "src" a cărui valoare determină locul fișierului în care se află codul JavaScript.
În fișierul extern cu extensia "js" nu trebuie să scriem eticheta "<script>", scriem direct instrucțiunile scriptului.
III.3 Cum se execută un script într-o pagină
Scripturile se pot executa fie la încărcarea paginii, dacă scriptul este definit în secțiunea <BODY>, fie la apariția unui eveniment care are asociat un script.
JavaScript oferă posibilitatea de a detecta anumite evenimente care au loc în pagină și de a reacționa la acestea. Astfel de exemple pot fi: încărcarea paginii, apăsarea unei taste, descărcarea unei pagini, trecerea cu mouse-ul peste un anumit obiect (imagine, buton, hyperlink).
Cele mai multe directive HTML pot fi configurate să răspundă la astfel de evenimente prin executarea unui script JavaScript la producerea acestuia.
Directivele care nu suportă atribute pentru procesarea evenimentelor sunt: <HEAD>, <BODY>, <BASEFONT>, <FONT>, <BR>, <HTML>, <SCRIPT>, <TITLE>, <APPLET> și <FRAME>.
Cele mai utilizate attribute pentru procesarea evenimentelor – Atribute Event Handler – sunt:
onClick – evenimentul apare atunci când utilizatorul execută un click pe elementul respectiv;
onDbkClick – evenimentul apare atunci când utilizatorul execută un dublu click pe elementul respectiv;
onMouseOver – evenimentul apare atunci când utilizatorul trece cu cursorul peste element;
CAPITOLUL IV: FOI DE STIL
IV.1 Generalități
O problemă importantă când avem un site cu multe pagini este atunci când dorim să făcem anumite schimbări în elementele paginii: fondul, grafica sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), în traducere "foi de stil in cascada", acest lucru nu mai este o problemă, realizându-se relativ ușor, prin schimbarea sau adăugarea unor elemente în codul CSS, nefiind nevoiți să lucrăm la fiecare pagină sau la fiecare element din pagină.
CSS se ocupă în general cu aspectul și controlul grafic al elementelor din pagină, cum ar fi: textul, imaginile, fondul, culorile și asezarea acestora în cadrul ferestrei paginii.
CSS foloseste stiluri, acestea înglobează, sub un anumit nume, atribute de formatare care se aplică asupra unui element individual din pagină, asupra unui grup de elemente sau la nivelul întregului document.
CSS funcționează cu HTML, însă nu este HTML. El extinde funcționalitățile HTML, permițând redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului sau a unui element individual din interiorul său, poate fi controlat mult mai ușor. Stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui întreg site web.
Un dezavantaj ar fi că unele navigatoare nu sunt compatibile CSS, astfel că documentele HTML sunt afișate ca și cum CSS n-ar exista.
IV.2. Componentele unui obiect CSS
Obiectele CSS au în componență următoarele elemente:
Selectorii – identifică un obiect; pot fi selectori de etichete HTML, clase sau identificatori.
Proprietățile – identifică o proprietate a obiectului; se referă în special la aspect.
Valorile – sunt atributele unei proprietăți; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzând de proprietate.
Sintaxa generală a unei reguli CSS este următoarea:
selector {proprietate: valoare; }
Proprietățile și valorile constituie definiția regulii (obiectului) CSS. Acestea se regăsesc sub formă de perechi, despărțite de caracterul două puncte ”:”, fiecare pereche se termină cu un caracter punct și virgulă ";".
Etichetele HTML nu sunt sensibile la diferența între majuscule și litere mici. Dar odată cu apariția limbajului XHTML, acesta face distincție între majuscule și minuscule, astfel că toate etichetele și toți selectorii trebuie scriși cu litere mici.
Există trei tipuri principale de obiecte CSS: selector, clasă si identificator.
1. Selectorul HTML – se folosește pentru a redefini modul de afișare al conținutului etichetei HTML. Un selector HTML reprezintă partea etichetei HTML care indică navigatorului tipul de etichetă.
2. Clasa este un obiect care poate fi aplicat oricărei etichete HTML.
O clasă trebuie creată în interiorul etichetei HTML înainte de a fi definită într-un cod CSS. Crearea clasei în interiorul etichetei se face simplu, prin specificarea cuvantului class și numele clasei, ca în exemplu de mai jos:
<h1 class="nume_clasa"> Text </h1>
– "nume_clasa", poate fi orice nume dorim.
Apoi în interiorul codului CSS, clasa trebuie definită prin adăugarea unui caracter punct (.) înaintea numelui clasei.
Numele aceleași clase poate fi atribuit mai multor etichete HTML din aceeași pagină, și toate vor prelua același stil css.
3.Identificator – obiectele de tip identificator (ID) sunt asemănătoare cu clasele. Pot fi aplicate oricărei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagină, pentru altă etichetă se adaugă un ID cu nume diferit.
Ca și clasa, identificatorul trebuie întâi creat în interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvântului id și numele clasei, ca în exemplu de mai jos:
<h1 id="nume_id"> Text </h1>
– "nume_id", poate fi orice nume dorim.
În interiorul codului CSS, identificatorul este definit prin adăugarea unui caracter diez (#) inaintea numelui.
4.3 Introducerea stilurilor în HTML
Modelele de stiluri pot fi aplicate în mai multe moduri:
1. Intern – direct in eticheta HTML
Pentru adăugarea unui STYLE intern la un element se folosește atributul style urmat de proprietăți și valori, folosind următoarea sintaxă:
<element style="proprietate:valoare; proprietate:valoare;"></element>
2. În antetul (header-ul) fișierului
În acest caz se adaugă în secțiunea HEAD a documentului HTML următoarea sintaxă:
<style type="text/css"> … </style>
Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.
Această metodă este utilă când se dorește folosirea acelorași stiluri pentru mai multe elemente din pagină. Astfel sunt scrise o singură dată și nu la fiecare element.
Proprietățile și valorile de stil CSS se introduc în acest element STYLE, după cum puteți vedea în exemplul următor:
Conform acestui cod, toate textele "h2" din pagină vor avea culoarea albastră și vor fi subliniate.
Se foloseste (opțional) "<!– … –>" pentru browserele care nu recunosc elementul "<style>" și astfel îl ignoră.
3. Extern
Aici proprietățile și valorile pentru diverse stiluri sunt specificate într-un fișier extern special, de obicei cu extensia "css" (pe care îl putem construi cu un editor simplu de texte, gen Notepad).
Avantajul folosirii fișierelor externe CSS este faptul că aceleași coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singură dată. În plus ajută la micșorarea ca mărime (in bytes) a documentului HTML care astfel se încarcă mai repede.
În fișierul extern CSS se scriu direct elementele cu proprietățile și valorile dorite, NU se mai adauga eticheta "style".
CAPITOLUL V: UTILIZAREA LIMBAJULUI HTML LA REALIZAREA
PAGINII WEB „BUCOVINA – PREZENȚĂ PE INTERNET”
Bucovina este printre cele mai atractive și frecventate zone turistice de pe harta României. Nu întâmplător de altfel, această zonă, vestită astăzi în întreaga lume, a fost distinsă în anul 1975 cu premiul internațional “Pomme d’Or” de către Federația Internațională a Ziariștilor și Scriitorilor de Turism, iar multisecularele monumente de arhitectură cu fresce interioare și exterioare din acest colț de țară au fost trecute de UNESCO în lista monumentelor de artă universală.
Site-ul “Bucovina – prezență pe internet” se adresează tuturor celor pasionați de călătorii și interesați de informații suplimentare despre această regiune.
Pagina principală a site-ului este structurată sub forma unui tabel cu două coloane.
Fig. V.I – Pagina principală a site-ului
Coloana laterală cuprinde un menu sub forma unei liste neordonate și o galerie foto. Fiecare cuvânt din menu constituie un link către o alta pagină.
Codul sursă pentru această secțiune este:
Coloana principală cuprinde un banner intitulat “Zone turistice complexe”. În cadrul lui utilizând o altă listă neordonată am enumerat cele mai importante zone turistice din Bucovina. Fiecare element al listei constituie o legătură către alt document HTML.
Codul sursă este:
Tot din coloana principală fac parte două secțiuni intitulate “Bucătărie” și “Obiceiuri și tradiții”. Cele două secțiuni sunt însoțite de către o imagine sugestivă și câte un paragraf cu informații generale.
La “Obiceiuri și tradiții” am adăugat o listă neordonată cu trei documente HTML în care sunt disponibile mai multe informații referitoare la principalele sărbători ale Anului. Pentru a accesa aceste informații am realizat link-uri.
Codul sursă este:
În continuare voi descrie paginile la care se ajunge folosind butoanele din meniu.
Apăsând butonul Relief se deschide o pagină HTML în care se pastrează coloana laterală a paginii principale (pentru o navigare mai ușoară), iar pe coloana principală sunt mai multe informații cu privire la relieful zonei turistice Bucovina.
Am realizat formatarea textului utilizând directivele HTML specifice: <p></p> și <br>.
Textul este însoțit de o imagine sugestivă pentru a cărei inserare am utilizat directiva HTML <img></img>.
Fig.V.2 – Pagina “Relief”
Paginile Climat, Rezervații, Tipuri de turism, Infrastructură turistică au fost realizate urmărind același șablon.
Apăsând butonul Contact din menu se deschide o pagină care conține un formular.
Pentru contact am realizat un formular complex cu mai multe câmpuri de editare text și butoane de trimitere sau renunțare.
Codul sursă este:
Fig. nr. V.3 – Pagina “Contact”
Pagina “Galerie foto” este compusă din mai multe imagini reprezentând obiective turistice emblematice pentru regiunea Bucovina. Pentru fiecare imagine am utilizat JavaScript cu funcția popup. Astfel în momentul în care un utilizator face click cu mouse-ul pe imagine se deschide o fereastra nouă în care imaginea este afișată cu o dimensiune mai mare.
În momentul în care cursorul mouse-ului va trece peste o imagine, aceasta se mărește pentru previzualizare. Acest lucru este posibil deoarece la definirea directivei IMG am adăugat atributul onmouseover.
Codul sursă este:
Fig.nr.V.4 – Pagina „Galerie foto”
CAPITOLUL VI: METODICA PREDĂRII
INFORMATICII
Aplicațiile online câștigă teren pe zi ce trece, fiind din ce în ce mai valorificate în activități de învățare formale și nonformale. Internetul este resursă și, în același timp, un suport extraordinar în activitățile de predare-invățare, pentru că poate oferi fiecărui elev sau profesor o serie de beneficii. Printre acestea se numără: accesul la informații din toate domeniile de cunoaștere, posibilități de documentare, exersarea capacităților de selecție, procesare și prelucrare a informației, mediu de comunicare chiar și în afara programului școlar, spațiu pentru activități de învățare în cooperare și de manifestare a imaginației, creativității etc.
Evoluția societății românești din ultimii ani, dezvoltarea și pătrunderea informaticii in viața economică, socială și în învățământ, impun o pregătire diversificată a tinerilor în acest domeniu. Învățământul preuniversitar trebuie să asigure dobândirea unor cunoștințe de informatică de nivel mediu, necesare continuării studiului sau a unor cunoștințe având caracter aplicativ care să asigure posibilitatea găsirii unui loc de muncă.
Utilizarea calculatorului in demersul educativ asigură numeroase avantaje pentru elevi:
– creșterea încrederii elevilor în procesul de evaluare;
– creșterea interesului elevilor pentru disciplinele informatice;
– creșterea ponderii timpului de invățare în clasă;
– stimularea creativității elevilor în desfășurarea activitățillor individuale sau pe grupe;
– motivarea elevilor cu cerințe educative speciale pentru învățare, accesul la informație a grupurilor vulnerabile;
– stimularea capacității de învățare inovatoare și consolidarea abilităților de investigare științifică.
Folosirea calculatorului în procesul educativ oferă numeroase avantaje și cadrelor didactice implicate. Dintre aceste avantaje menționăm:
– creșterea ponderii timpului alocat interacțiunii cu elevii în procesul educațional
– realizarea progresului școlar prin valorificarea instrumentelor și resurselor didactice specifice TIC în cadrul disciplinelor informatice
– diversificarea metodelor și instrumentelor de evaluare în scopul creșterii gradului de obiectivitate a evaluării.
VI.1. Proiecte de lecții
Școala gimnazială Nr. 153 Data: 15..12.2014
Disciplina: TIC Mediul de instruire: Laboratorul de informatica
Clasa: a IX-a Profesor: Nicolescu Gabriel
Nr de elevi: 23
PROIECT DIDACTIC
Titlul lecției: Folosirea imaginilor in limbaj HTML
A. Necesitatea studierii temei: Familiarizarea elevilor cu diferite formate de imagini suportate de browsere și formarea deprinderii de a utiliza imagini in limbajul HTML.
B. Structura logică a conținutului lecție
C. Contextul în care se desfășoară lecția:
D. Obiectivele lecției:
E. Proba de evaluare
F. Strategii didactice
Bibliografie – Oprescu Daniela, Dămășescu Cristina-Eugenia – Tehnologia informației și comunicațiilor. Manual pentru clasa a IX-a., EDP, București, 2012
ANEXA 1
FIȘĂ DE LUCRU
APLICAȚIA 1
<html>
<head>
<title> O pagină cu imagine</title>
</head>
<body>
Cele mai răspândite formate sunt GIF și JPEG. <br>
Dacă imaginea se află în același director cu fișierul HTML care face referire la imagine, atunci adresa <br>URL a imaginii este formată numai din numele imaginii, inclusiv extensia.<br>
<img src="../../images/ubm1.jpg">
Text după imagine.
</body>
</html>
APLICAȚIA 2
<html>
<head>
<title> Imagine cu chenar si mărit</title>
</head>
<body>
Dacă doriți să adăugați un chenar în jurul imaginii, folosiți atributul border al etichetei <img>.<br>
Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width și height. <br>
<img src="../../images/ubm1.jpg" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>
APLICAȚIA 3
<html>
<head>
<title> Alinierea unei imagini</title>
</head>
<body>
Alinieri:
<br> Pe verticală:
<img src="../../images/ubm1.jpg" align="top">
La mijloc: <img src="../../images/ubm1.jpg" align="middle">
Jos: <img src="../../images/ubm1.jpg" align="bottom"> Text dupa imagine.
</body>
</html>
APLICAȚIA 4
<html>
<head>
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniată la stânga înconjurată de text la distanța de 30 de pixeli.
</h4><p> Text înainte de imagine.<br> Atributele hspace și vspace precizează distanța în pixeli pe orizontală, respectiv pe verticală, dintre imagine și restul elementelor din pagină. <br>
Atributul alt admite ca valoare un text care va fi afișat în locul imaginii. <br>
<img src="../../images/ubm1.jpg" align="left" hspace="30" vspace="30" alt="COLEGIUL NAȚIONAL A.I. CUZA">
Atributele hspace și vspace precizează distanța în pixeli pe orizontală, respectiv pe verticală, dintre imagine și restul elementelor din pagină. <br>
Atributul alt admite ca valoare un text care va fi afișat în locul imaginii.
</body>
</html>
APLICAȚIA 5
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="../../images/ubm1.jpg">
O imagine poate fi utilizată pentru a stabili fondul unei pagini Web. <br> În acest scop se folosește atributul background al etichetei <body>, având ca valoare adresa URL a imaginii.<br>
Imaginea se multiplică pe orizontală și pe verticală până umple întregul ecran.
<br> </body>
</html>
APLICAȚIA 6
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body"><h4>Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.html"><img src="../../images/ubm1.jpg "></a>
Text dupa imagine.
</body>
</html>
Școala gimnazială Nr. 153 Data: 27.11.2014
Disciplina: TIC Mediul de instruire: Laboratorul de informatica
Clasa: a IX-a Profesor: Nicolescu Gabriel
Nr de elevi: 23
PROIECT DIDACTIC
Titlul lecției: Tipuri de liste in limbajul HTML
A. Necesitatea studierii temei: Listele reprezintă un mijloc excelent pentru a sistematiza și a scoate în evidență anumite aspecte importante dintr-un anume context.
B. Structura logică a conținutului lecție
C. Contextul în care se desfășoară lecția:
D. Obiectivele lecției:
E. Proba de evaluare
F. Strategii didactice
Bibliografie – Oprescu Daniela, Dămășescu Cristina-Eugenia – Tehnologia informației și comunicațiilor. Manual pentru clasa a IX-a., EDP, București, 2012
Anexa 1
FIȘĂ DE LUCRU
Realizați următoarea pagină web folosind listele ordonate și neordonate:
Școala gimnazială Nr. 153 Data: 30.10.2014
Disciplina: TIC Mediul de instruire: Laboratorul de informatica
Clasa: a IX-a Profesor: Nicolescu Gabriel
Nr de elevi: 23
PROIECT DIDACTIC
Titlul lecției: Realizarea tabelelor in limbajul HTML
A. Necesitatea studierii temei: Scopul inițial al tabelelor în limbaj HTML a fost pentru prezentarea anumitor date organizate în format tabelar. Suportul oferit de către HTML pentru tabele s-a dovedit însă foarte eficient la aranjarea în pagină a diferitelor elemente. Cu ajutorul directivelor oferite de către limbajul HTML este posibilă poziționarea oricărui tip de element la poziția dorită în pagină.
B. Structura logică a conținutului lecție
C. Contextul în care se desfășoară lecția:
D. Obiectivele lecției:
E. Proba de evaluare
F. Strategii didactice
Bibliografie – Oprescu Daniela, Dămășescu Cristina-Eugenia – Tehnologia informației și comunicațiilor. Manual pentru clasa a IX-a., EDP, București, 2012
ANEXA 1
FIȘĂ DE LUCRU
Tabelele se inserează într-un document HTML cu ajutorul etichetei container <TABLE> … </TABLE>.
Atributul <BORDER> adaugă o bordură tabelului (implicit tabelul nu are borduri).
Tabelele sunt formate din linii, care se introduc prin eticheta <TR>.
Fiecare linie este formată din celule introduse prin eticheta <TD>.
Eticheta <TH> defineste un titlu de coloană.
Eticheta <CAPTION>…. </CAPTION> definește titlul tabelului.
Celulele unui tabel pot conține text, imagini, legături, formulare sau alte tabele.
Exemplu
Exercițiu
Adăugați o nouă coloană în tabel cu numele Dată amortizare și completați cu 11/11/2021 pentru primul echipament si cu 12/06/2018 pentru al doilea (inserați o coloană nouă).
Adăugați în tabel un nou echipament cu denumirea Xerox, număr de inventar 12347, valoare 5000, dată amortizare 06/11/2020 (inserați o linie nouă).
Textul dintr-un tabel poate fi formatat cu eticheta <FONT>…</FONT>. Formatați textul din tabel astfel încât în prima coloană a tabelului (denumirea echipamentului) textul să fie de culoare roșie și îngroșat.
Puteți adăuga o culoare de fundal tabelului folosind în eticheta <TABLE> atributul bgcolor. Înlocuiți codul <table border=”1”> cu codul <table border=” bgcolor=”lime”> și vizualizați efectul în browser.
Puteți stabili o culoare de fundal pentru fiecare linie sau fiecare celulă a tabelului folosind același atribut bgcolor în etichetele <TR>, <TH>, <TD> . Formatați tabelul astfel încât fiecare linie să aibă altă culoare de fundal.
Textul din cadrul unui tabel poate fi aliniat la stânga, la dreapta sau centrat folosind atributul align. Dacă dorim ca alinierea să aibă efect asupra tabelului va fi folosit în eticheta <TABLE>; dacă dorim să aibă efect asupra unei linii va fi folosit în eticheta <TR>; dacă dorim să aibă efect asupra unei celule va fi folosit în eticheta <TD>. Formatați textul din a doua și a treia coloană astfel încât valorile să fie aliniate la dreapta.
7. Celulele unui tabel pot conține imagini. Adăugați o nouă coloană Imagine și inserați pentru fiecare ehipament o imagine folosind eticheta <img src…..>
VI.2 ORGANIZATORI COGNITIVI
1. Harta conceptuală
2. Liste structurate
SOFTWARE
Definire
Tipuri – programe de sistem
– programe de aplicații
Funcții – gestiunea prelucrărilor
– gestiunea resurselor
– gestiunea fișierelor
3. Tabel liniar vertical
4. Tabel sinoptic
5. Tabel T
Codul EBCDIC
Caracter EBCDIC
0 11110000
1 11110001
2 11110010
3 11110011
6. Matrice
6.1 Matrice conceptuală
6.2 Matricea scrierii din surse multiple
7. Diagrame secvențiale
Etapele executării unui program pe calculator
8. Diagrama arbore orizontală
9. Diagrama Venn
10. Cvintet
Internetul
Informează, dezinformează
Atractiv, eficient, rapid
Mijloc de comunicare eficient
Informație
V.3 MĂSURI DE PROTECȚIE A MUNCII
ÎN LABORATORUL DE INFORMATICĂ
Accesul și desfășurarea activității în laborator se face numai sub supravegherea profesorului
Cordoanele de alimentare a echipamentelor trebuie să fie perfect izolate și să corespundă nssm
Se interzice conectarea echipamentelor la prize defecte sau fără legătură la pământ
Se interzice îndepărtarea dispozitivelor de protecție ale echipamentelor
Se interzice efectuarea oricărei intervenții în timpul funcționării echipamentelor
Remedierea defecțiunilor se va realiza numai de către personalul autorizat
Dacă în timpul funcționării echipamentelor se aud zgomote deosebite, acestea vor fi oprite imediat
Funcționarea echipamentelor va fi permanent supravegheată.
După terminarea lucrului echipamentele vor fi deconectate de la rețeaua de alimentare.
REGULI DE SECURITATE ÎN
LABORATORUL DE INFORMATICĂ
SE INTERZICE:
deteriorarea prin lovire a echipamentelor sau mobilierului din laborator.
contactul cu instalațiile electrice pentru a evita pericolul accidentelor prin electrocutare sau deteriorarea echipamentelor din laborator.
REGULI DE SECURITATE ÎN LABORATORUL
DE INFORMATICĂ
Mă oblig:
Se interzice:
CONCLUZII
De ce anume site-ul web, dacă în lume există mult mai multe posibilități de informare a populației? Deoarece este o metodă mult mai efectivă în comparație cu celelalte și chiar aș vrea să precizez că site-ul web este un instrument foarte util în promovarea unei regiuni, a unei afaceri, iar odată cu trecerea timpului, acest instrument devine tot mai greu de înlocuit.
Acest site se adresează tuturor celor care doresc să afle informații suplimentare cu privire la una din cele mai frumoase regiuni turistice din țară – Bucovina.
Pornind de la această idee s-a trecut la proiectarea acestui site. Paginile create s-au dorit a fi cât mai atrăgătoare, oferind posibilitatea de informare unui număr cât mai mare de utilizatori.
Având stabilit scopul site-ului a fost realizată schița globală a conținutului paginilor Web și a legăturilor dintre aceastea.
Am optat pentru un șablon ce a stat la baza tuturor paginilor Web realizate și pentru un menu prezent în pagina principală. Cu ajutorul acestui menu se poate naviga cu ușurință în interiorul site-ului.
Conturându-se planul site-ului, cu ajutorul limbajului HTML, s-a trecut la realizarea propriu-zisă a paginilor, ajustând proiectul paginii gazdă în funcție de necesitățile rezultate pe parcurs. După crearea paginilor, inserarea imaginilor, a fost absolut necesară previzualizarea acestora. Din fericire determinarea erorilor de cod a fost relativ simplă, de obicei, eroarea din pagină indicând zona de cod care nu este corectă.
Au fost parcurse mai multe cicluri de codificare, previzualizare, modificare a codului HTML pentru a se ajunge la forma corectă și dorită.
Odată creată structura de bază a paginilor au fost adaugate și verificate legăturile relevante: legături interne înainte – înapoi sau externe – către alte pagini.
Referitor la conținutul site-ului web, am urmărit ca acesta să conțină informații convingătoare pentru utilizatori, dar și în același timp să dispună de o exactitatea sporită a acestora. De asemenea am urmărit ca informațiile cuprinse în site să stimuleze și să capteze atenția, să informeze publicul-țintă, să fie accesibil și potrivit pentru acesta și cel mai important — ca informația existentă să-l impresioneze pe utilizator, determinându-l să revină pe site în viitorul apropiat.
Pentru a asigura o comunicare deschisă între utilizatori și administrator am realizat pagina Contact. Astfel, atunci când un utilizator accesează site-ul poate completa formularul existent în această pagină pentru a primi cât mai rapid informația exactă de care acesta are nevoie. În acest fel site-ul implică activ utilizatorii asigurând un mediu online deschis spre dialog și interacțiune.
BIBLIOGRAFIE
1. Acu C. I., (2003) – Optimizarea paginilor Web, Editura Polirom, Iași;
2. Anghel Ana Magdalena, Olteanu Adriana, Pietraru R., (2006) – Realizarea paginilor WEB, Ministerul Educației și Cercetării, București;
3. Brut M., Buraga S., (2004) – Prezentări multimedia pe Web, Editura Polirom, Iași
4. Buraga S., (2002), – Proiectarea siturilor Web. Design și funcționalitate, Ediția a II-a, Editura Polirom, Iași;
5. Cârstoiu D., Ecaterina Oltean (2004) – Introducere în HTML și XML, Editura Printech, București;
6. Cerghit I., (2006) – Metode de învățământ, Editura Polirom, București;
7. Gugoiu T., (2000) – HTML prin exemple, Editura Teora, București;
8. Negrino T., Smith D., (2004) – JavaScript pentru World Wide Web. Ghid de învățare rapidă prin imagini, Editura Corint, București;
9. Noveanu E., (2005) – Proiectarea pedagogică a lecțiilor multimedia , Editura Preprint;
10. Taylor D., (1999) – Crearea paginilor WEB, Editura Teora, București;
11. http://www.robotics.ucv.ro/flexform/aplicatii/it
12. http://vega.unitbv.ro/~jipa/ui
13.https://www.moodle.ro/preparandia/index.php/liceal7
14. http://www.w3schools.com/html/
15. http://ro.wikipedia.org/wiki/HyperText_Markup_Language
DECLARAȚIE PRIVIND CONTINUTUL AUTENTIC AL
LUCRĂRII DE DISERTATIE
Subsemnatul ____________________________________________________, domiciliat în ___________________________________________________________________________
legitimat cu ____seria ________nr. ________, CNP __________________ autorul lucrării cu titlul:__________________________________________________________________________________________________________________________________________________
elaborată în vederea susținerii disertatiei organizată de către Universitatea Tehnică de Constructii Bucuresti, Facultatea_______________anul universitar ______, declar pe proprie răspundere, că lucrarea prezentată pentru a fi sustinută în cadrul sedintei publice de sustinere, la Specializarea _______________________________ este rezultatul propriei activități intelectuale, nu conține porțiuni plagiate, iar sursele bibliografice au fost utilizate cu respectarea legislației române și a convențiilor internaționale privind Copyright-ul.
Data, Semnătura,
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Bucovina Prezenta pe Internet (ID: 162013)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.