1. TIPURI DE SITE-URI WEB Paginile HTML constituie în anumite condiţii, cel mai ieftin mijloc de a publica în formaţii în Internet. Home page (pagina iniţială) reprezintă un document hipertext(HTML) care serveşte ca punct de intrare iniţial într-un web. Pagina iniţială trebuie să conţină informaţii cu caracter general şi introductiv precum şi hyperlegături la resursele corelate. O pagină proiectată corespunzător conţine butoane de navigare interne, care ajută utilizatorul să se deplaseze printre numeroasele documente la care are acces. Practic, există patru tipuri de site-uri web: 1. Site-uri cu pagini statice – se folosesc în special drept panouri publicitare. Se mai numesc şi “brochureware”, deoarece clienţii doresc transpunerea în format HTML a principalelor broşuri (pliante) de prezentare. Un asemenea tip de sit este relativ uşor şi ieftin de construit. 2. Site-uri cu pagini dinamice – aceste site-uri necesită o actualizare periodică(zilnică sau săptămânală) a elementelor specifice. La proiectarea unui astfel de site trebuie luate în considerare următoarele aspecte: - Modul în care vor fi actualizate datele de pe site. - Costurile operaţiunilor de actualizare periodică. Comunicarea cu clienţii (utilizatorii) care apelează un astfel de site, se poate realiza prin inserarea de formulare de e-mail, pe paginile site-ului. În aceste condiţii se poate lua în considerare şi folosirea unui autoreponder pus la dispoziţie de către ISP. În felul acesta se va transmite automat un mesaj de răspuns vizitatorului site- ului, înştiinţându-l astfel de primirea mesajului transmis şi mulţumindu-i pentru vizită. 3. Site-uri dezvoltate pe baze de date – aceste site-uri impun metode şi tehnici speciale pentru realizare, necesitând actualizări frecvente ale elementelor componente. Se administrează extrem de greu, ele se bazează pe o baza de date (Oracle, de exemplu), care poate fi 1
Transcript
1. TIPURI DE SITE-URI WEB
Paginile HTML constituie în anumite condiţii, cel mai ieftin mijloc de a publica în formaţii în Internet. Home page (pagina iniţială) reprezintă un document hipertext(HTML) care serveşte ca punct de intrare iniţial într-un web. Pagina iniţială trebuie să conţină informaţii cu caracter general şi introductiv precum şi hyperlegături la resursele corelate. O pagină proiectată corespunzător conţine butoane de navigare interne, care ajută utilizatorul să se deplaseze printre numeroasele documente la care are acces. Practic, există patru tipuri de site-uri web:
1. Site-uri cu pagini statice – se folosesc în special drept panouri publicitare. Se mai numesc şi “brochureware”, deoarece clienţii doresc transpunerea în format HTML a principalelor broşuri (pliante) de prezentare. Un asemenea tip de sit este relativ uşor şi ieftin de construit.
2. Site-uri cu pagini dinamice – aceste site-uri necesită o actualizare periodică(zilnică sau săptămânală) a elementelor specifice. La proiectarea unui astfel de site trebuie luate în considerare următoarele aspecte:
- Modul în care vor fi actualizate datele de pe site. - Costurile operaţiunilor de actualizare periodică.
Comunicarea cu clienţii (utilizatorii) care apelează un astfel de site, se poate realiza prin inserarea de formulare de e-mail, pe paginile site-ului. În aceste condiţii se poate lua în considerare şi folosirea unui autoreponder pus la dispoziţie de către ISP. În felul acesta se va transmite automat un mesaj de răspuns vizitatorului site-ului, înştiinţându-l astfel de primirea mesajului transmis şi mulţumindu-i pentru vizită.
3. Site-uri dezvoltate pe baze de date – aceste site-uri impun metode şi tehnici speciale pentru realizare, necesitând actualizări frecvente ale elementelor componente. Se administrează extrem de greu, ele se bazează pe o baza de date (Oracle, de exemplu), care poate fi actualizată în mod regulat prin intermediul unui program prioritar. Se pot utiliza şi bazele de date Access sau File Maker. Acest tip de site se recomandă pentru activităţi cu volum important de informaţii ce trebuie actualizat la intervale regulate de timp.
4. Magazine virtuale – acest tip de site este cel mai complicat şi mai greu de utilizat, necesitând metode şi tehnici speciale de proiectare şi exploatare. Magazinele virtuale se bazează pe date stocate în baze de date şi permit clienţilor să aleagă şi apoi să achiziţioneze în siguranţă produse sau servicii on line, cu ajutorul cărţilor de credit sau a banilor virtuali (electronic cash). Procesarea cărţilor de credit este partea cea mai dificilă în dezvoltarea unui astfel de site.
1
2. STRUCTURA UNEI PAGINI DIN CADRUL UNUI SITE WEB. ELEMENTE SPECIFICE PUBLICĂRII SI REGĂSIRII SITE-ULUI ÎN CADRUL MOTOARELOR DE CĂUTARE
Contrar cu ceea ce s-ar putea crede, cea mai mare parte dintre paginile web sunt în realitate doar simple fișiere de text. Browserul este cel care citește textul, caută în el etichete HTML şi apoi afișează corespunzător pagina. De exemplu, putem preciza printr-o etichetă HTML că dorim ca un anumit cuvânt să apară cu caractere aldine. Atunci când browserul ajunge la partea respectivă a documentului, el formatează cuvântul cu caractere aldine.
2.1. Etapele creării unei pagini HTML:P1. Se creează un nou fișier de text: deschidem editorul de text (Notepad) şi eventual apelăm meniul File - New. De asemenea, putem deschide un fișier deja existent (File - Open).P2. Introducem în fișier textul şi etichetele HTML necesare.P3. Salvăm fișierul ca pagină web. De exemplu, pentru Notepad:
• apelăm meniul File -Save/Save As.• în caseta Save in, alegem locul unde trebuie salvată pagina web.• introducem numele fișierului care trebuie salvat, terminat cu extensia .htm sau .html• în caseta Save as type, specificăm tipul fișierului ca fiind All files (*.*). Acest lucru determină Notepad să folosească extensia .htm sau .html (şi nu extensia normală, .txt).• apăsăm butonul Save.
P4. Încărcăm pagina în browser, pentru a vedea cum arată dacă o publicăm pe Internet. Pentru aceasta, facem dublu clic pe fișierul HTML sau deschidem browserul şi apelăm meniul File - Open (cazul browserului IE). Pentru reîncărcarea paginii, apelăm meniul View - Refresh sau tastăm F5 (ca ultima soluție: închidem şi repornim browserul).P5. Repetăm pașii 2 - 3 (si eventual 4) de câte ori este necesar.
2.2. Etichete html Etichetele HTML, numite şi tag - uri (tags) sau marcatori, instruiesc browserul să afișeze elementele din
pagina aşa cum este necesar. De exemplu, dacă dorim ca un cuvânt din pagina să apară cu scris îngroșat, atunci încadrăm cuvântul respectiv în etichetele corespunzătoare pentru textul cu caractere aldine.
Etichetele HTML au, în general, forma următoare: <ETICHETA>Textul care va fi afectat de eticheta</ETICHETA>
Partea ETICHETA este un cod care specifică tipul de efect pe care îl dorim. Codul apare întotdeauna înconjurat cu paranteze unghiulare < >; parantezele spun browserului web că începe sau se termină o porțiune HTML şi nu un text oarecare.
Aceste tag-uri (etichete) pot fi de două feluri:- tag-uri pereche (un tag de început si unul de incheiere). Exemple: <HTML> şi </HTML>;
<TITLE> si </TITLE>; <HEAD> si </HEAD>;- tag-uri singulare (nu au un tag de încheiere) Exemple: <HR>, <BR>.
2.3. Elementele de baza ale paginii Fișierele HTML încep întotdeauna cu eticheta <HTML>. Aceasta eticheta spune browserului că fișierul
este o pagină web. Ultima linie din document este eticheta de final corespunzătoare: </HTML>. Următoarele elemente servesc la împărțirea paginii în două secțiuni: antetul şi corpul paginii. Secțiunea
antet este asemenea unei introduceri pentru pagină. Browserele web folosesc antetul pentru a prezenta diferite tipuri de informații despre pagină. În antet pot apărea o serie de elemente, dintre care cel mai întâlnit este titlul paginii.
Pentru a defini antetul, se adaugă o eticheta <HEAD> şi o etichetă </HEAD> imediat sub/după eticheta <HTML>.
Obs. Nu contează dacă scriem numele etichetelor cu litere mari sau cu litere mici, cu toate că ultimul standard HTML sugerează că toate etichetele HTML să fie scrise folosind litere mici.
2
Corpul paginii este locul unde introducem textul şi alte elemente afișate de browser. Definirea corpului paginii se face cu etichetele: <BODY> - înainte şi </BODY> - după secțiunea antet (după eticheta </HEAD>).
2.4. Adăugarea unui titluTitlul paginii apare în bara de titlu a ferestrei browserului. Pentru a defini un titlu, folosim etichetele
<TITLE> şi </TITLE>. De exemplu, dacă titlul paginii este: Pagina Colegiului Tehnic (CTM) , introducem: <TITLE> Pagina Colegiului Tehnic (CTM)</TITLE>
2.5. Introducerea textuluiTextul obișnuit se introduce între etichetele <BODY> şi </BODY>, astfel:
<HTML> <HEAD>
<TITLE> Pagina Colegiului Tehnic</TITLE>
</HEAD> <BODY>
Acest text apare în corpul paginii </BODY>
</HTML>
2.6. Realizarea paragrafelor Pentru a afișa un anumit text într-un nou paragraf, îl încadrăm între etichetele <P> şi </P>.
Exerciţiu: 1. Lansaţi în execuţie editorul de texte NotePad.2. Introduceţi următoarele marcaje:
<HTML><HEAD>
<TITLE>Prima mea pagina web</TITLE></HEAD><BODY>Bine ai venit!<BR>Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!<BR>
</BODY></HTML>
3. Salvaţi documentul cu numele Prima pag web.html4. Vizualizaţi cu navigatorul Internet Explorer, pagina Web creată.
Tema: Realizați o pagina web conținând o strofă dintr-o poezie cunoscută (cu versurile pe câte un rând). Titlul
poeziei să apară atât în pagina cât şi în bara de titlu a browserului.
3
3. ELEMENTE DE CONŢINUT ALE PAGINILOR WEB(3 ORE)3.1. Texte
3.1.1. Atribute HTMLAtributele pot fi definite ca niște proprietăți ale tag-urilor. Atributele se pun numai în tag-ul de început. Dacă un tag
nu are nici un atribut, atunci browser-ul va lua în considerare valorile implicite ale tag-ului respectiv.
Atributul BGCOLOR care se folosește cu tag-ul <BODY> indică ce culoare va aveafondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea albă, dar să spunem că vrem ca fondul paginii noastre sa fie portocaliu, vom scrie:
<BODY BGCOLOR="#FF9900">
Acum să ne ocupăm de textul paginii noastre. Mesajul "Bine ai venit!" să spunem, de exemplu, că am vrea sa fie scris cu albastru în loc de negru, care este valoarea implicită şi să fie scris cu litere mai mari decât restul textului. Pentru a scrie astfel textul, vom folosi tag-ul <FONT> însoțit de unele atribute astfel:<FONT COLOR="#0000FF" SIZE="6"> Bine ai venit!</FONT><BR>
Tagul <FONT> are atributele (valoarea atributului) - Descrierea- COLOR(cod culoare sau nume culoare) - Culoarea fontului- FACE (nume font) - Tipul fontului- SIZE (un număr de la 1 la 7) - Mărimea fontului
Atunci când vrem ca textul din cadrul paginii noastre web să fie afișat pe mai multe rânduri vom folosi tag-ul <BR>.
3.1.2. StiluriDacă vrem ca textul nostru să fie scris cu caractere îngroșate, folosim perechea de etichete <B> şi </B>.
<B>Text bold</B>Text bold
Pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete <I> şi </I>.<I>Text italic</I>Text italic
Pentru ca textul să fie subliniat, folosim perechea de etichete <U> şi </U>.<U>Text subliniat</U>Text subliniat
Dacă vrem ca textul să fie afişat în centrul paginii putem folosi perechea de etichete <CENTER> şi </CENTER>.<CENTER>Text centrat</CENTER>
Text centrat
3.1.3. Trasarea unei linii orizontaleAtunci când vrem sa trasăm o linie, folosim tag-ul <HR> care vine de la Horizontal Rule care înseamnă linie
orizontală. Daca nu îi asociem acestui tag nici un atribut atunci vom obține o linie orizontală cât lățimea paginii web. Dacă vrem să folosim propriile noastre proprietăți pentru trasarea unei linii orizontale vom apela la atributele tag-ului <HR>. Aceste atribute sunt următoarele:- ALIGN (left, center, right) - pentru alinierea liniei- COLOR (cod culoare sau nume culoare) - pentru culoarea liniei- SIZE (procent număr de pixeli) - pentru grosimea liniei - WIDTH (procent număr de pixeli) - pentru lungimea liniei.
Pentru a trasa o linie roșie, cu o lungime de jumătate din valoarea şi puțin mai groasă decât cea implicită ce va fi aliniată în centrul paginii, vom folosi următoarea linie de cod:<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">Exerciţiu:
1. Lansaţi în execuţie editorul de texte NotePad.2. Introduceţi următoarele marcaje:
<HTML><HEAD>
<TITLE>Prima mea pagina web</TITLE></HEAD><BODY BGCOLOR="#FF9900">
<FONT COLOR="#FF0000"> Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!</FONT><HR>
</BODY></HTML>
3. Salvaţi documentul cu numele Prima pag web2.html4. Vizualizaţi cu navigatorul Internet Explorer, pagina Web creată.
3.2. TitluriAtunci când avem nevoie să folosim un titlu în cadrul paginii noastre web putem apela la
tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au şi tag-uri de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel în cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfârșit vom folosi tag-ul de încheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari în timp ce textul încadrat de tag-urile <H6> si </H6> va fi afișat cu caracterele cele mai mici.
Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat lastânga, la centru sau la dreapta.Exerciţiu:
1. Lansaţi în execuţie editorul de texte NotePad şi scrieţi codul html care sa conțină următoarele titluri(titlul paginii html va fi:Titluri):
Acesta este un titlu cu <H1>Acesta este un titlu cu <H2>Acesta este un titlu cu <H3>Acesta este un titlu cu <H4>Acesta este un titlu cu <H5>Acesta este un titlu cu <H6>
2. Salvaţi documentul cu numele Titluri.html
3. Vizualizaţi cu navigatorul Internet Explorer, pagina Web creată.
Exerciţiu: 1. Lansaţi în execuţie editorul de texte NotePad şi introduceţi următoarele marcaje:
<H3 ALIGN=”CENTER”> Lucian Blaga - Iubire <H3><BR>„Iubești - când ulciorul de-arama <BR>se umple pe rând, de la sine <BR>aproape, de flori si de toamna, <BR>de foc, de-anotimpul din vine. <BR> <BR>Iubești - când suava icoana <BR>ce-ti faci in durere prin veac <BR>o ții înramata ca-n rana <BR>stravechiului verde copac. <BR><BR>Iubesti - cand sub timpuri prin sumbre <BR>valtori, unde nu ajung sorii, <BR>te-avanti sa culegi printre umbre <BR>balaiul suras al comorii. <BR><BR>Iubesti - cand simtiri se desteapta <BR>ca-n lume doar inima este, <BR>ca-n drumuri la capat te-asteapta <BR>nu moartea, ci alta poveste. <BR><BR>Iubesti - cand intreaga faptura, <BR>cu schimbul, odihna, furtuna <BR>iti este-n aceeasi masura <BR>si lava patrunsa de luna. ” <BR>
</BODY></HTML>
2. Salvaţi documentul cu numele Iubire.html
5
3. Vizualizaţi cu navigatorul Internet Explorer, pagina Web creată.3.2. Imagini
3.2.1. Formatele imaginilor Browserele recunosc, în cadrul paginilor web, mai multe formate ale imaginilor. Cele mai
răspândite sunt cele cu extensia .gif şi cele care au una din terminațiile .jpg sau .jpeg. Iată în continuare câteva caracteristici ale acestor formate de imagini:- GIF (Graphics Interchange Format) - Formatul GIF poate reda un număr de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animații. - JPEG (Joint Photographic Expert Group) - Formatul JPEG nu mai este limitat la 256 de culori şi de aceea este folosit pentru fotografii. Imaginile care aparțin acestui format au extensia .jpg sau .jpeg.
Pentru a folosi imagini şi în cadrul paginilor tale web trebuie să folosești tag-ul <IMG> însoțit de atributul SRC (source) care indica adresa sau calea catre imaginea pe care vrei să o folosești.
Forma generala a acestui tag va fi: <IMG SRC="numeleimaginii.extensie">! Atenție la extensie. Nu uita să scrii şi extensia imaginii pentru că altfel imaginea nu va
fi afișată de browser.Este bine ca atunci când vrei să faci un site, sa ții toate fișierele (pagini HTML, imagini etc.) în cadrul
aceluiași folder. Dacă vei folosi în codul HTML al paginilor site-ului tău linia de cod de mai sus, imaginea va fi afișată doar dacă pagina respectivă va fi in același folder cu imaginea pe care vrei să o folosești. În caz contrar imaginea nu va fi afişată.
Tagul <IMG> are atributele (valoarea atributului) – Descrierea- SRC (URL) - Adresa imaginii- ALIGN (left, right, top, middle, bottom) - Alinierea imaginii in pagina- ALT (text) - Text ce va fi afișat in locul imaginii, in cazul in care, aceasta nu este afișată- BORDER (număr de pixeli) - Mărimea chenarului din jurul imaginii- HEIGHT (procent număr de pixeli) - Înălțimea imaginii- WIDTH (procent număr de pixeli) - Lățimea imaginii- HSPACE ( număr de pixeli) - Spațiu pe orizontala in jurul imaginii- VSPACE (număr de pixeli) - Spațiu pe verticala in jurul imaginii
3.2.2. Imagini ca fond al unei pagini webCu ajutorul atributului BACKGROUND al tag-ului <BODY> poți folosi o imagine ca
fond al unei pagini web. Exemplu: <BODY BACKGROUND=”../Poze/background1.jpg”>
Exerciţiu: 1. Lansaţi în execuţie editorul de texte NotePad.2. Căutaţi pe Internet două imagini de tip .jpg pe care sa le salvaţi pe desktop cu numele: fundal.jpg şi
4. Salvaţi documentul cu numele Imagini.html5. Vizualizaţi cu navigatorul Internet Explorer, pagina Web creată.
6
3.3. Liste
Listele pe care le poți crea cu ajutorul limbajului HTML sunt de următoarele tipuri: liste neordonate, liste ordonate şi liste de definiții.
3.3.1. Liste neordonate (UL)Înainte de vorbi despre listele neordonate sa vedem, mai întâi, cum arată una:
Firma noastră vă oferă următoarele servicii: printare laminare îndosariere xerox tehnoredactare
Pentru a putea face o lista neordonata trebuie să folosim tag-urile <UL> si </UL>.(denumirea acestor tag-uri vine de la "unordered list" care înseamnă în limba engleza listaneordonată). Fiecare element al listei trebuie introdus de tag-ul <LI>.Exerciţiu: <HTML>
<HEAD><TITLE>Liste neordonate</TITLE>
</HEAD><BODY>
<UL>Firma noastra va ofera urmatoarele servicii:<LI>printare<LI>laminare<LI>indosariere<LI>xerox<LI>tehnoredactare
</UL></BODY>
</HTML>Salvează pagina cu numele de liste1.html.
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecărui element. Acesta este folosit in mod implicit atunci când folosim o lista neordonată. Astfel, prin atribuirea unei valori atributului TYPE, vom putea face ca elementele listei sa fie precedate de un pătrat sau de un cerc gol. Pentru a vedea rezultatele, înlocuiește linia a 6-a din codul HTML de mai sus cu una din următoarele linii de cod:- pentru cercuri goale:
<UL TYPE=”circle”> Firma noastra va ofera urmatoarele servicii:Salvează pagina cu numele de liste2.html- pentru pătrate pline:
<UL TYPE=”square”> Firma noastra va ofera urmatoarele servicii:Salvează pagina cu numele de liste3.html
3.3.2. Liste ordonate (OL)Lista următoare păstrează conținutul celei de mai sus însă este o listă ordonată (ordered list).
Firma noastră vă oferă următoarele servicii:1. printare2. laminare3. îndosariere4. xerox5. tehnoredactareListele ordonate se formează cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora venind din limba engleza „ordered list” care înseamnă lista ordonata. La fel ca si la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>.
7
Iată codul pentru lista ordonata de mai sus:<HTML>
<HEAD><TITLE>Liste ordonate</TITLE>
</HEAD><BODY>
<OL> Firma noastra va ofera urmatoarele servicii:<LI>printare<LI>laminare<LI>indosariere<LI>xerox<LI>tehnoredactare
</OL></BODY>
</HTML>Salvează pagina cu numele de liste4.html
Ca şi in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoareimplicita, așa cum am văzut in exemplul de mai sus: numerele. in loc de numere putem folosi si alte caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu valoarea potrivita.
Pentru a vedea rezultatele, înlocuiește linia a 6-a din codul HTML de mai sus cu una dinurmătoarele linii de cod:- pentru litere mari:
<OL TYPE=”A”> Firma noastră va oferă următoarele servicii:Salvează pagina cu numele de liste5.html - pentru litere mici:
<OL TYPE=”a”> Firma noastră va oferă următoarele servicii:Salvează pagina cu numele de liste6.html - pentru cifre romane mici:
<OL TYPE=”i”> Firma noastră va oferă următoarele servicii:Salvează pagina cu numele de liste7.html - pentru cifre romane mari:
<OL TYPE=”I”> Firma noastră va oferă următoarele servicii:Salvează pagina cu numele de liste8.html
Pe lângă atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acestatribut este folosit atunci când vrem sa schimbam valoarea inițială, de exemplu dacă vrem să începem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a acestui atribut este START=n, unde n este un numar natural:
<OL TYPE=”A” START=”4”> Firma noastra va ofera urmatoarele servicii:
3.3.3. Liste de definiții (DL)Pentru a forma liste de definiții trebuie sa folosești tag-urile <DL> si </DL> (denumirea lor vine de la
„definition list” = lista de definiții).Iată cum arata o lista de definiții:
Teorema lui PitagoraÎn orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei.Teorema cateteiÎn orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză.Teorema înălţimiiÎn orice triunghi dreptunghic pătratul înălţimii este egal cu produsul proiecţiilorcelor două catete pe ipotenuză.
Fiecare element al unei liste de definiții va trebui introdus de tag-ul <DT> (DefinitionTerm), iar apoi fiecare definiție va fi precedata de tag-ul <DD> (Definition Definition).Codul listei de mai sus este următorul:<HTML>
8
<HEAD><TITLE>Liste definiții</TITLE>
</HEAD><BODY>
<DL> <DT><B>Teorema lui Pitagora</B>
<DD> În orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei
<DT><B>Teorema catetei</B><DD> În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză.
<DT><B> Teorema înălţimii</B><DD> În orice triunghi dreptunghic pătratul înălţimii este egal cu produsul
proiecţiilorcelor două catete pe ipotenuză.
</DL></BODY>
</HTML>
Exercitiu:1. Scrie codul HTML al unei pagini web care sa conțină următoarea lista:
Michael Schumacher Rubens Barichello Jenson Button Fernando Alonso Giancarlo Fisichella Juan Pablo Montoya Kimi Raikkonen Jacques Villeneuve David Coulthard Ralf Schumacher
2. Salvează pagina HTML cu numele formula1.html.
9
3.4. Tabele
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pelângă crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
3.4.1. Crearea unui tabelPentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris intre aceste
tag-uri va forma un tabel. După tag-ul <TABLE> urmează tag-ul <TR> care vine de la "Table Row" (rândul tabelului) si reprezintă introducerea unui rând in cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rând al tabelului. După crearea unui rând, trebuie sa adăugam in cadrul acestuia, câteva celule, cu ajutorul tag-urilor <TD> si </TD>.
Sa vedem cu ajutorul unui exemplu cum putem adaugă un tabel in cadrul unei paginiweb. Scrie următorul cod HTML:<HTML>
</BODY></HTML>Salvează pagina cu numele de tabel.html.
10
3.4.2. Proprietățile tabelelorAșa cum ai observat, în exemplul de mai sus am realizat un tabel, dar fără nici o linie. Pentru ca liniile unui
tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie însoțit de atributul BORDER având valoarea egala cu cel puțin 1.
In plus, poți schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR însoțit de codul culorii dorite.
Astfel, daca vrem ca liniile tabelului nostru sa aibă culoarea roșie vom folosi următoarealinie de cod: <TABLE BORDER="1" BORDERCOLOR="#FF0000">
Înlocuiește în exemplul de mai sus si salvează pagina cu numele tabel2.html.
După cum ai putut observa, liniile tabelului sunt practic niște linii duble. Pentru a aveadecât o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alături de acest atribut putem folosi si atributul CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rând sau a unei celule, folosim atributeleWIDTH pentru lățime si/sau HEIGHT pentru înălțime.
Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right".
Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN însoțit de unadintre valorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rând sau chiar a întregului tabel folosimatributul BGCOLOR împreună cu codul culorii alese.
Pentru a specifica numărul de coloane a tabelului se folosește atributul COLS împreună cu un număr.
Scrie codul următor in cadrul unui editor text si salvează apoi pagina cu numele detabel3.html.<HTML>
În plus fata de noțiunile învățate pana acum în aceasta lecție, mai trebuie sa reținem încă două atribute foarte importante ale tag-ului <TD>: COLSPAN (numărul de coloane pe care se întinde celula) şi ROWSPAN (numărul de linii pe care se întinde celula).<HTML> <HEAD> <TITLE>Tabele mari</TITLE> </HEAD> <BODY> <TABLE WIDTH="70%" border="1" CELLPADDING="0" CELLSPACING="0"> <TR> <TD HEIGHT="83" COLSPAN="2" BGCOLOR="#FF0000"></TD> </TR> <TR> <TD WIDTH="151" ROWSPAN="3" BGCOLOR="#0000FF"></TD> <TD WIDTH="402" HEIGHT="66" BGCOLOR="#FFFF00"></TD> </TR> <TR> <TD HEIGHT="95" BGCOLOR="#66FF00"></TD> </TR> <TR> <TD HEIGHT="127" BGCOLOR="#9933FF"></TD> </TR> </TABLE> </BODY></HTML>
12
3.5. Cadre
Cu ajutorul cadrelor putem împarți o pagina web in mai multe zone, iar apoi putem stabili cepagina va fi afișată in fiecare zona.
3.5.1. Folosirea cadrelor intr-o pagina webPentru a împărți o pagina web in mai multe cadre, trebuie sa folosim, înainte de tag-ul <BODY>, tag-ul
<FRAMESET> însoțit de unul dintre atributele <COLS> sau <ROWS>, pentru a defini exact cum va fi împărțită pagina respectiva. Astfel pentru a împărți pagina in doua cadre orizontale vom folosi următoarea linie de cod: <FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini mărimea rândurilor sau a coloanelor care vor formacadrele. In exemplul de mai sus, primul cadrul va avea 70% din înălțimea paginii, iar al doilea cadru restul, adică "*" sau 30%.
Alături de tag-ul <FRAMESET> se mai folosesc si atributele <FRAMESPACING>, pentru mărimea spatiilor dintre cadre si <FRAMEBORDER>, care se refera la cadrele definite, daca au sau nu chenar, valorile sale fiind "yes" sau "no". Astfel, linia completa pentru definirea a doua cadre orizontale va fi următoarea:
Pentru a împărți pagina web in mai multe cadre orizontale, se vor asocia mai multe procente atributului ROWS, dar având grija ca suma lor sa nu depășească 100%. La fel se procedează si pentru împărțirea unei pagini web in cadre verticale singura deosebire fiind aceea ca in locul atributului ROWS se folosește atributul COLS. Nu uita de tag-ul de încheiere </FRAMESET>
După ce am stabilit împărțirea paginii in cadre, se trece la definirea cadrelor. Astfel intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>. Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul căruia indicam sursa cadrului. Astfel o linie de cod care definește un cadru ar putea fi următoarea: <FRAME SRC="numelepaginii.html">
Pentru a înțelege mai bine utilizarea cadrelor in paginile web, vom face împreună o pagina web cu mai multe cadre. Trebuie sa facem patru pagini web fiecare având culoarea de background la fel cu una dintre cele patru culori din imaginea de mai sus. Apoi vom face a cincea pagina web in care vom defini cadrele si care le va conține practic pe celelalte patru pagini. Numele celor patru pagini web vor fi rosu.html, albastru.html, galben.html si verde.html.Acum sa vedem codul sursa al paginii care va conține cele patru pagini web create:<HTML>
</HTML>Salvează pagina, in același fișier cu celelalte patru, cu numele cadre.html.
13
3.6. Formulare
Formularele reprezintă o metodă de interactivitate cu utilizatorii paginii tale web. Prin intermediul unui formular poți obține date importante de la vizitatorii paginii tale. După ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar tu primești datele introduse in formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare si adăugate intr-o baza de date. In aceasta lecție vom învăța cum se pot adaugă in cadrul unei pagini web diferite tipuri de formulare, dar si cum putem trimite datele introduse intr-un formular, prin email.
Pentru a folosi un formular in pagina ta web, va trebui sa folosești tag-urile <FORM> si </FORM>. Intre aceste tag-uri vor fi introduse toate elementele formularului.
Tag-ul <FORM> are doua atribute foarte importante: ACTION si METHOD.Cu ajutorul atributului ACTION ii spunem browser-ului ce se va întâmplă cu datele introduse in formular.
Astfel, valoarea atributului ACTION poate fi o adresa URL a unui script, scris intr-un limbaj de programare, care va interpreta datele si le va introduce într-o baza de date, daca este cazul, sau poate fi o adresa de email, caz in care datele introduse in formular vor fi trimise prin email la adresa respectiva.
Atributul METHOD, așa cum ii spune si numele, precizează metoda de trimitere a datelorsi poate avea doua valori. Valoarea implicita a acestui atribut este GET, cu ajutorul acestei metode putând fi trimise cantități mici de date, cea mai folosita metoda fiind POST.
Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului<INPUT>. Atributele cele mai importante ale acestui tag sunt următoarele:- TYPE - tipul elementului- NAME - numele elementului- VALUE - valoarea elementului
Elementele ale unui formular pot fi:- câmpurile de editare- butoanele radio- casetele de validare- casetele de fișiere- listele de selecție- butoanele submit si reset
3.6.1. Câmpurile de editarePentru a introduce in cadrul unui formular un câmp de editare, trebuie sa folosim pentru
atributul TYPE, al tag-ului <INPUT>, valoarea text.
Atributele cele mai folosite pentru tag-ul <INPUT> de tipul câmp de editare sunt:• SIZE, care reprezintă lățimea câmpului de editare• MAXLENGTH, specifica numărul maxim de caractere care pot fi introduse în câmpul de editare• VALUE, valoarea inițială a câmpului de editare
De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod:<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20"MAXLENGTH="30">
Daca vrei sa introduci un câmp de editare de tip "parola", atributul TYPE va avea valoarea "password". In acest caz, caracterele introduse in câmpul de editare, nu vor fi vizibile.
Atunci când vrem sa adăugăm in cadrul formularului nostru un câmp de editare in care sa poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un câmp de editare multilinie:<TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA>
14
Am folosit atributul COLS pentru a stabili numărul de caractere al fiecărui rând, atributulROWS pentru numărul de rânduri al câmpului de editare, iar atributul NAME pentru numele câmpului de editare.
3.6.2. Butoanele radioDaca avem o întrebare cu mai multe variante de răspuns, vom folosi butoanele radio.
Pentru a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE, valoarea "radio". Exemplu:In ce categorie de vârstă vă încadrați? <BR><INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >sub 15 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 aniCu ajutorul atributului CHECKED, fără alte valori, putem selecta un buton radio in modprestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, în același timp.
3.6.3. Casetele de validarePentru a introduce o caseta de validare (checkbox) se utilizează eticheta <INPUT> cu
atributul TYPE având valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opțiuni.
In cazul casetelor de validare, spre deosebire de butoanele radio, pot fi selectate mai multe optiuni. Exemplu:Unde vă petreceţi concediul de obicei?<BR><INPUT TYPE="checkbox" NAME="optiunea1">La mare<BR><INPUT TYPE="checkbox" NAME="optiunea2">La munte<BR><INPUT TYPE="checkbox" NAME="optiunea3"> În străinătate <BR><INPUT TYPE="checkbox" NAME="optiunea4"> La ţară<BR><INPUT TYPE="checkbox" NAME="optiunea5"> Acasă
3.6.4. Casetele de fișierePentru a trimite un fișier prin intermediul unui formular, folosim pentru atributul TYPE altag-ului <INPUT>, valoarea "file". Exemplu:<INPUT TYPE="file" NAME="file">
3.6.5. Listele de selecțieO lista de selecție, așa cum ii spune si numele, permite utilizatorului sa aleaga una sau
mai multe opțiuni dintr-o lista. Listele de selecție pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si </SELECT>.Atributele cele mai folosite pentru tag-ul <SELECT> sunt:• NAME, atribuie listei de selecție un nume• SIZE, specifica numărul de elemente din cadrul listei de selecție• VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub forma deperechi "name = value"• SELECTED (fără alte valori), selectează in mod prestabilit un element al listeiSa vedem cum arata o lista de selecție:Exemplu:<SELECT><OPTION value=”Alba”>Alba</OPTION><OPTION value=”Arad”>Arad</OPTION><OPTION value=”Arges”>Arges</OPTION><OPTION value=”Bacau”>Bacau</OPTION>
Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosimpentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.
3.6.5. Butoanele de tip Submit si ResetPentru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre
un script scris intr-un limbaj de programare care va interpreta aceste date, trebuie sa folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <INPUT>, cu atributul TYPE avand valoarea "submit". Putem modifica si valoarea butonului, care in mod implicit este Submit, cu ajutorul atributului VALUE. Astfel, linia de cod pentru un buton de tip submit va fi urmatoarea:<INPUT TYPE="submit" VALUE="Trimite">
Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset. Prin apasareaacestui buton toate elementele formularului vor reveni la valoarea lor prestabilita, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedeaza la fel ca si la butonul de tip Submit, singura deosebire fiind ca atributul TYPE va avea valoarea "reset". Sa vedem cum arata linia de cod care introduce in cadrul unui formular un buton de tip Reset:<INPUT TYPE="reset" VALUE="Sterge">
16
3.6.7. Trimiterea datelor dintr-un formular prin e-mailPentru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim
pentru atributul ACTION al tag-ului <FORM>, valoarea "mailto:[email protected]". in felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificata.
De exemplu, pentru a trimite datele dintr-un formular la adresa [email protected] vomfolosi urmatoarea linie de cod:<FORM ACTION="mailto:[email protected]" METHOD="POST">
Exercițiu: realizarea unui formular<HTML><HEAD><TITLE>Realizarea unui formular</TITLE></HEAD><BODY><H2>Realizarea unui formular</H2><HR>Completeaza formularul urmator pentru a ne trimite parerea ta<br>despre site-ul www.ecursuri.ro, dar si despre cursul "HTML pe intelesul tuturor"<br><FORM ACTION="mailto:[email protected]" METHOD="POST">Nume: <input name="textfield" type="text" size="15" maxlength="30"><br><br>Sex: <input name="radiobutton" type="radio" value="radiobutton"> feminin <input name="radiobutton" type="radio" value="radiobutton"> masculin <br><br>Varsta: <select name="varsta">
4. Ierarhia paginilor în cadrul site-ului web. Sistemul de link-uri, pagina de start.
4.1. Legătura către o alta paginaPentru a folosi legături in paginile web pe care le vei face, trebuie sa folosești perechea de tag-uri <A> si
</A>. Numele acestor tag-uri vine de la cuvântul anchor care se traduce ancora. Tag-ul <A> va trebui folosit împreună cu atributul HREF. Linia de cod pentru inserarea unei legături in cadrul unei pagini web va avea următoarea forma:
<A HREF=numelepaginii.html>Textul legăturii</A>
Daca pagina respectiva se afla in același folder cu pagina pe care se afla legătura atunci nu sunt necesare ghilimelele. Deschide editorul de texte (de exemplu: Notepad) si scrie următorul cod HTML pentru a adaugă o legătura intr-o pagina web către pagina cu numele Imagini.html. Salvează pagina (File/Save As) cu numele de link.htmlExemplu:<HTML> <HEAD> <TITLE>Legături</TITLE> </HEAD> <BODY> <CENTER><B>LEGATURA CATRE O ALTA PAGINA </B><BR><BR> <A HREF=Imagini.html>Imagine bebe</A> </CENTER> </BODY></HTML>
Daca pagina către care vrem sa facem o legătură, nu se afla in același folder cu pagina noastră atunci nu mai putem folosi decât numele paginii HTML ca valoare a atributului HREF, ci întreaga cale: <A HREF="Firma 1/numelepaginii.html">Text link</A>
4.2. Legătura către un siteTrebuie sa folosești următoarea linie de cod: <A HREF="adresa site-ului">Textul legăturii</A>
Exemplu: Sa facem o pagina web care sa conțină legături către site-uri ale unor ziare din Romania. Scrie următorul cod HTML:
<HTML><HEAD><TITLE>Legaturi catre site-uri particulare</TITLE></HEAD><BODY><CENTER><B>Legaturi catre site-urile unor ziare din Romania</B><BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A><BR><A HREF="http://www.jurnalul.ro">Jurnalul National</A><BR><A HREF="http://www.capital.ro">Capital</A><BR><A HREF="http://www.prosport.ro">Prosport</A><BR><A HREF="http://www.gsp.ro">Gazeta sporturilor</A><BR><A HREF="http://www.libertatea.ro">Libertatea</A></CENTER></BODY></HTML>
Salvează pagina cu numele de ziare.html
19
4.3. Legătura către o secțiune de paginaAtunci când avem de-a face cu pagini mai lungi, putem împărți aceste pagini in mai multe secțiuni către
care sa adăugăm câte o legătură la începutul paginii pentru ca utilizatorii să ajungă mai repede la secțiunea care îi interesează. Un bun exemplu pentru o astfel de pagina îl reprezintă paginile care conțin întrebările frecvente (Frecvently Asked Questions).
Fiecare titlu al secțiunii trebuie definit ca ancora. Pentru acest in mod normal foloseam atributul NAME pe care îl asociam tagului <A>, dar pentru ca in browserul Mozilla Firefox nu merge in toate versiunile, vom folosi atributul ID care face același lucru. Trebuie sa ținem cont ca fiecare ID trebuie sa înceapă cu o litera si sa fie unic intr-o pagina (adică nu putem avea mai multe ID-uri cu același nume in aceeași pagina).<A ID="ancora1">Titlul primei secțiuni</A><A ID="ancora2">Titlul secțiunii a doua</A><A ID="ancora3">Titlul secțiunii a treia</A>
Legăturile către ancorele din cadrul aceleiași pagini HTML vor avea următoarea forma:<A HREF="#ancora1">Legătura către prima secțiune</A><A HREF="#ancora2">Legătura către a doua secțiune</A><A HREF="#ancora3">Legătura către a treia secțiune</A>
Legăturile către ancore din cadrul altei pagini HTML vor avea următoarea forma:<A HREF="numelepaginii.html#ancora1">Legatura către prima secțiune</A><A HREF="numelepaginii.html#ancora2">Legatura către a doua secțiune</A><A HREF="numelepaginii.html#ancora3">Legatura către a treia secțiune</A>
Pentru a înțelege mai bine cum funcționează legăturile către secțiunile paginilor, să scriem împreună codul unei pagini cu mai multe secțiuni:<HTML> <HEAD> <TITLE>Legatura catre o sectiune de pagina</TITLE> </HEAD> <BODY> <BR><BR><BR><BR><BR><BR> <CENTER><B>Intrebari frecvente</B></CENTER> <BR><BR><BR><BR><BR><BR> <A HREF="#intrebarea1">1. Ce pot gasi pe site-ul eCursuri.ro?</A><BR><BR><BR> <A HREF="#intrebarea2">2. Ce este un curs online?</A><BR><BR><BR> <A HREF="#intrebarea3">3. De ce sa invat online?</A><BR><BR><BR><BR> <HR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A ID="intrebarea1">1. Ce pot gasi pe site-ul eCursuri.ro? </A> </FONT><BR>
Site-ul eCursuri.ro isi propune sa ofere vizitatorilor sai cat mai multe resurse pentru a invata online. In acest sens, oferim membrilor site-ului acces GRATUIT la cursuri online interactive, tutoriale in care poti invata sa faci aproape orice, teste online prin care iti poti verifica cunostintele din diverse domenii, jocuri educative si referate pentru scoala.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A ID="intrebarea2">2. Ce este un curs online? </A>
20
</FONT><BR>Un curs online presupune ca toate materialele necesare, sa fie disponibile pe internet. Asadar, viitorii cursanti vor avea la dispozitie toate resursele necesare pentru invatat, la fel ca si in cazul unui curs traditional, singura deosebire fiind ca totul se petrece online.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A ID="intrebarea3">3. De ce sa invat online? </A> </FONT><BR>
Cursurile online prezinta, indiscutabil, foarte multe avantaje fata de alte tipuri de cursuri. In primul rand cursurile online pot fi consultate oricand, ele fiind disponibile non stop pe internet. Un lucru extrem de important in alegerea unui curs online este si pretul scazut al unui astfel de curs comparativ cu preturile cursurilor traditionale. In cazul cursurilor prezente pe site-ul eCursuri.ro, acestea sunt 100% GRATUITE. Un alt avantaj al cursurilor online de pe eCursuri.ro este acela ca permite interactiunea intre membrii site-ului si/sau intre membri si autorii cursurilor, astfel fiind foarte usor sa se lamureasca anumite notiuni care nu au fost intelese foarte bine.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </BODY></HTML>Salvează pagina cu numele intrebari.html
4.4. Legătura către o adresa de e-mailDaca vrei ca utilizatorii paginii tale web sa iți poată scrie părerile lor despre site, de exemplu, atunci trebuie
ca in cadrul paginii sa existe o legătura către o adresa de e-mail. Cum faci asta? Foarte simplu. Forma generala a unei legături către o adresa de e-mail este următoarea:
<A HREF="mailto:adresa de e-mail">Text link</A>In codul HTML al paginii intrebari.html adaugă înainte de linia de cod ce conține eticheta de încheiere ,
următoarea secvență de cod:<FONT FACE="Arial" COLOR="#FF9900">Pentru a afla raspunsul la alte intrebari, trimite un mail la:</FONT> <A HREF="mailto:[email protected]" TITLE="Intreaba ceva">Contact eCursuri.ro</A>Salvează pagina intrebari.html peste cea existenta.
4.5. Utilizarea unei imagini ca legăturaPentru a folosi o imagine ca legătura intre tag-urile <A> si </A>, va trebui scrisa adresa imaginii: <A
HREF="numepagina.html"><IMG SRC="adresaimaginii"></A>Exemplu. Salvăm mai întâi imaginea cu numele bomboane.jpg. După care se scrie codul unei pagini web care să folosească aceasta imagine ca legătura către site-ul Ghid-Culinar.ro. Deschide editorul de texte şi scrie codul următor:<HTML>
<HEAD><TITLE>Folosirea unei imagini ca legatura</TITLE>
</HEAD><BODY>
<CENTER><H1>Imagini ca legaturi</H1> <BR><BR>
21
<A HREF="http://www.ghid-culinar.ro/retete-culinare/dulciuri-diverse/bomboane-raffaello.html" TITLE="Invata sa faci bomboane Raffaello" BORDER="0">
<IMG SRC="bomboane.jpg"> </A>
</CENTER></BODY>
</HTML>Salvează pagina cu numele linkimg.html
4.6. Cum pot schimba culorile legăturilor?Fiecare legătura din cadrul unei pagini web are trei culori:
• o culoare pentru legăturile nevizitate (nu a fost efectuat nici un click pe ele)• o culoare pentru legăturile vizitate (s-a efectuat cel puțin un click pe ele)• o culoare pentru legăturile active (atunci când cursorul mouse-ului se afla deasupra lor)
Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu ajutorul căruia putem schimba culoarea implicita:• LINK pentru legăturile nevizitate• VLINK pentru legăturile vizitate• ALINK pentru legăturile active
Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu dacă vrei ca in cadrul paginii tale web, legăturile sa fie de culoare roșie atunci când nu au fost vizitate, de culoare neagra cele vizitate si de culoare portocalie atunci când se trece cu mouse-ul pe deasupra lor, trebuie sa folosești următoarea linie de cod:<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>
Pentru a folosi culorile preferate pentru legăturile paginilor tale nu trebuie decât sa înlocuiești in linia de mai sus, codurile, cu cele ale culorilor dorite.
22
5. Cerinţe de prezentare a informaţiilor prezentate în documentele Web
Cerinţele de prezentare a informaţiilor prezentate în documentele Web sunt:- de conţinut,- acurateţea,- lizibilitatea,- design-ul,- conformitate cu cerinţele proiectului.Lizibilitate - care poate fi citit (cu uşurinţă); citeţ (DEX). Lizibilitatea este definita ca ușurința cu care un document poate fi citit. Cea mai buna combinație de lizibilitate pentru site este text negru pe fundal alb, dar exista si alte combinații de asemenea, excelente. In afara de alb, alte culori eficiente pentru fundal, sunt culorile albastru închis, gri si negru. Evitați culori light, pentru lizibilitate. Anumite informații pe care trebuie sa fie aduse in atenția vizitatorilor poate fi evidențiat prin culoare, acest lucru îmbunătățește si poate ajuta la reducerea de oboseala vizuala. Un factor important in dezvoltarea unui site web este utilizarea de diferite culori pentru hyperlink-uri, in scopul de a ajuta utilizatorii sa distingă intre paginile pe care le-au vizitat deja si pagini nevizualizate încă.
Criterii considerate la realizarea documentelor Web sunt: - viteza de încărcare, - raportul text/imagine, - configurare şi administrare, - rapoartele, - formularele, căutarea şi regăsirea a informaţiei. Formularele reprezintă o metodă de interactivitate cu utilizatorii paginii tale web. Prin intermediul unui formular poţi obține date importante de la vizitatorii paginii tale. După ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar tu primeşti datele introduse în formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare şi adăugate într-o baza de date. Cum poţi să creşti viteza de încărcare a site-urilor?Ca să creşti viteza de încărcare a site-urilor în Internet Explorer trebuie să urmezi paşii:1. Salvezi fișierul ie.reg (descărca acest fişier)(click dreapta, Save target as)2. Dai dublu click el pentru a face import în regiştrii3. Restartezi sistemul.Această metodă măreşte numărul de conexiuni simultane care îi sunt permise lui Internet Explorer de la 2 (sau 4) la 16.
