carte html

69
MARIUS MĂNESCU

Upload: ciscomarius

Post on 30-Jun-2015

2.602 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: CARTE HTML

MARIUS MĂNESCU

Page 2: CARTE HTML

Cum realizăm un site web?

Cuprins

1. Cuvânt înainte...................................................2

2. Introducere în limbajul HTML............................5

3. Cum creăm o pagină web simplă cu aplicaţia Notepad?...........................................................8

4. Componentele unui document HTML..............11

5. Componenta Antet(Head) a fişierului...............13

6. Corpul fişierului................................................15

7. Introducerea textului........................................16

8. Controlul <FONT>...........................................19

9. Inserarea unei imagini.....................................21

10. Inserarea de tabele..........................................25

11. Inserarea listelor..............................................31

12. Inserarea legăturilor web.................................35

13.Crearea unui sit web funcţional.......................43

14.Bibliografie.......................................................52

2

Page 3: CARTE HTML

Cum realizăm un site web?

Cuvânt înainte

În zilele noastre odată cu expansiunea Internetului a serviciului web în mod special, a luat avânt o întreagă industrie numită web design sau webdesign prin care se înțelege realizarea de situri web, de la momentul conceperii structurii şi interfeţei grafice şi până la finalizarea programării şi introducerea propriu-zisă a datelor - imagini, text, fişiere şi alte elemente - care alcătuiesc conţinutul sitului.

Primul sit din istorie a fost realizat în anul 1991, de către inventatorul www-ului, Tim Berners Lee, siturile apărute, inițial nu erau complexe şi încărcate grafic cum sunt în prezent, limbajul utilizat - HTML - nefiind puternic şi permiţând numai o serie limitată de formatări, precum şi inserarea de link-uri, pentru a putea "lega" paginile între ele, webdesignul fiind, de fapt, mai mult "programare" web.

Siturile, în forma în care ele se afişează în browsere, sunt de fapt interpretări vizuale, menite să fie înţelese de orice persoană, fără să fie necesare cunoştinţe în domeniul informaticii sau al secvenţelor de cod redactate de programatori. Aceştia lucrează ori în diverse limbaje din care apoi se generează limbajul specific de script al internetului HTML (HyperText Markup Language), ori direct in HTML.

Dacă nu ar exista browserele care ştiu să interpreteze limbajul de script şi să afişeze rezultatul pe

3

Page 4: CARTE HTML

Cum realizăm un site web?

ecran, siturile ar fi doar înşiruiri de texte neformatate şi, cel mai probabil, fără imagini. În principiu, limbajul HTML indică locul în care să se afişeze diversele elemente vizibile, dimensiunea, culoarea, precum şi alţi parametri care conferă unei pagini web atât aspectul dorit cât şi funcţionalitate optimă.

Vreau să mulțumesc pentru apariția acestei cărți, soției mele care m-a sprijinit constant în activitatea de studiu. Totodată, mulțumesc Agenției ANPCDEFP și Comisiei Europene, care în anul 2005, mi-au furnizat un grant de studiu al paginilor web la Universitatea ”La Sapienza” din Roma, în cadrul acestuia realizând cu adevărat felul de structurare a unui sit web.

Totodată mulțumesc pentru sugestii și încurajări doamnei directoare Nițoi Leontina(Colegiul Tehnic ”Lorin Sălăgean”).

Menționez că acest material a fost analizat și apreciat de către domnul lector univ. dr. Dumitru Bălă de la Universitatea din Craiova, având un nivel calitativ ridicat și fiind un ajutor valoros pentru cadrele didactice din învățământul preuniversitar.

4

Page 5: CARTE HTML

Cum realizăm un site web?

Introducere în limbajul HTML

Cartea de faţă foloseşte limbajul HTML versiunea 4.0 pentru construcţia paginilor şi siturilor web, din acest motiv am considerat că este necesar să facem câteva precizări importante pentru cititor. De exemplu faţă de versiunea anterioară, se încurajează separarea clară între structură şi aspectul paginii, acesta fiind un element cheie în înţelegerea versiunii discutate în carte.

Folosirea marcajelor în structură şi a fişierelor de alte tipuri (Javascript, CSS), permite o mai mare independenţă de dispozitivul fizic, ce permite folosirea paginii web prin ajustare, pe toate tipurile de medii fizice de la telefonul mobil până la dispozitivele de tip navigare sau GPS. Totodată se pune problema schimbului de informaţie între două sau mai multe calculatoare şi rezolvarea optimă a acesteia, situaţie ce implică respectarea unor "reguli de comunicare" pe care calculatoarele sa le folosească uzual.

Transferul datelor între două calculatoare se realizează prin folosirea acestor "reguli de comunicare", exact ca în situaţia comunicării dintre două persoane din ţări diferite – folosind un limbaj universal, adică limba engleză, iar informaţia oferită de una dintre părţi poate fi preluata si mai apoi înţeleasă de către cealaltă persoană implicată în comunicare. Regulile după care două calculatoare ce rulează cu sisteme de operare diferite

5

Page 6: CARTE HTML

Cum realizăm un site web?

transferă datele unul către altul sunt stabilite de către protocoalele de comunicaţie TCP/IP. Descrierea acestor protocoale nu face obiectul cărţii de faţă, dar este necesară prezentarea succintă a acestora şi anume precizez că HTTP (Hypertext Transfer Protocol – Protocol de Transfer a Textului cu Marcaje) este protocolul folosit la transferul acestor pagini web.

HTTP este protocolul cel mai des utilizat pentru accesarea informaţiilor în reţeaua Internet, informaţii care sunt păstrate pe servere conforme cu standardele W3C sau „popular” WWW (World Wide Web). În momentul în care folosim o aplicaţie de tip browser sau „motor de căutare” – (traducerea nu este ceea mai potrivită), ca de exemplu Internet Explorer sau Mozilla Firefox şi introducem de exemplu www.google.ro sau doar google.ro, aplicaţia de fapt asociază automat protocolul http, deoarece acesta este protocolul implicit şi adresa devine http://www.google.ro, dacă nu mă credeţi priviţi bara de adrese. Automat va rula un program corespunzător pe calculatorul destinație ce înțelege protocolul respectiv şi care va folosi limbajul HTML, pentru afişarea fişierului. Fișierul destinație trebuie sa fie un document HTML (HyperText Markup Language), un fișier grafic, de sunet, de animație, un program executabil pe server-ul respectiv sau un editor de texte.

HTML (Hypertext Markup Language - Limbajul de Marcare HiperText) oferă unui program de tip browser sau interpretor de HTML informaţii despre

6

Page 7: CARTE HTML

Cum realizăm un site web?

modul cum este formatat conţinutului unui fişier şi cum se realizează legăturile acestuia cu alte fişiere.

Ce este adresa unui fişier web? Reprezintă calea obişnuită pentru accesarea unui fişier sau o anumita secţiune din fişier, stocat pe un server, prin folosirea structurii arborescente a server-ului respectiv şi evident a protocolului descris anterior. Serverul Web caută fișierul rădăcină, fișier care - de cele mai multe ori - poartă numele "index.html sau "default.html". Dacă un asemenea fişier nu există, sau nu a fost definit ca fişier implicit in cadrul serverului, acesta din urmă întoarce utilizatorului care a cerut adresa respectivă un mesaj de eroare şi oferă un ajutor contextual pentru depanarea problemei apărute.

Exemplu de adresă web: http://www.htmlhelp.com/copyright.html, unde copyright.html, este numele fişierului html, aflat pe serverul www.htmlhelp.com.

7

Page 8: CARTE HTML

Cum realizăm un site web?

Cum creăm o pagină web simplă cu

aplicaţia Notepad?

Vă prezint mai jos câteva explicaţii privind modul în care vă puteţi organiza activitatea:

1. Pentru început creaţi-vă folderul de lucru într-olocaţie aleasă de dumneavoastră, de exemplu pe Desktop sau pe o partiţie de lucru, evitaţi pe cât puteţi partiţia principală C:\, din motive de securitate.

2. Deschideţi editorul de text Notepad, cu care veţi lucra în procesul de învăţare şi scrieţi fiecare exemplu pe care îl găsiţi aici. E recomandabil să încercaţi să folosiţi şi exemplele găsite în reţeaua Internet, ştiut fiind faptul că ”…repetiţia este mama învăţării…”.

3. Salvaţi apoi fişierul în folderul creat la pasul 1 de către dumneavoastră cu numele dorit şi cu extensia .html sau extensia .htm, însă este necesar ca să folosiţi de fiecare dată aceeaşi extensiei.

4. Iată un exemplu

mai jos:

8

Page 9: CARTE HTML

Cum realizăm un site web?

Și executând comanda File – Save as…, obținem:

Operaţia de salvarea în folderul tema are două componente esenţiale:

1. File name – tema1.html2. Save as type – All Files

Rezultatul este afişat mai jos:

9

Page 10: CARTE HTML

Cum realizăm un site web?

Și vizualizarea rezultatului se află pe pagina următoare:

10

Page 11: CARTE HTML

Cum realizăm un site web?

Componentele unui document HTML

Un document HTML are trei componente principale:

1. Componenta ce conţine informaţii despre fişierul HTML 2. Componenta antet(Head) a fişierului

3. Corpul(Body) fişierului

Marcajele „<” şi „>” sunt folosite pentru scrierea comenzilor ce vor fi interpretate de browser – exemplul cel mai elocvent este <HTML> şi </HTML> ce reprezintă începutul şi sfârşitul paginii web, înglobând antetul si corpul fişierului, în sensul că blocul de text cuprins între ele este scris şi formatat în limbajul HTML standard. În continuare vă ofer sursa paginii prin intermediul căreia am explicat în esență, cum se salvează o pagină web simplă în cadrul unui folder de lucru. Folosirea folderului nu o explic încă, dar v-a deveni mai clară utilitatea sa la folosirea fișierelor externe.

Sursa paginii web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>

11

Page 12: CARTE HTML

Cum realizăm un site web?

<head> <!—În antetul fişierului avem titlul fişierului-->

<title>Titlul fişierului HTML</title>

<!—Definirea tipului şi a setului de caractere folosit --> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <!--Corpul fişierului. Vom plasa conţinutul paginii pe care o creăm--> Bine aţi venit pe pagina mea. E un început! </body> </html>

Sau mai simplu și pe înțelesul tuturor:

<html> <head><title>Titlul fişierului HTML</title>

</head>

<body> Bine aţi venit pe pagina mea. E un început! </body> </html>

12

Page 13: CARTE HTML

Cum realizăm un site web?

Componenta ce conţine informaţii despre fişierul HTML identifică versiunea limbajului HTML folosit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

De obicei editoarele de HTML introduc automat textul necesar la începutul fişierului.

Componenta Antet(Head) a fişierului

Componenta antet (Head) a fişierului este încadrată de controalele <HEAD> si </HEAD>. Prezenţa celor două controale în document ajuta la o împărţire şi structurare mai clară a fişierului, deoarece conţine titlul fişierului (pentru a fi afișat pe bara de sus a ferestrei programului de navigare sau pentru ca fişierul sa poată fi mai ușor identificat de către utilizator), cuvinte-cheie care folosesc motoarelor de căutare, precum si alte informaţii legate de fişierul creat, dar nu sunt afișate de către browser.

Linia următoare: <title>Titlul fişierului HTML</title>

reprezintă titlul fişierului. Textul dintre marcajele <title> şi </title> - va fi afișat pe bara de titlu a browser – ului

13

Page 14: CARTE HTML

Cum realizăm un site web?

sau va putea fi folosit de utilizatori pentru păstrarea fişierului în listele specifice ale acestui program. Linia:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

are următoarea semnificație:<META> reprezintă meta-informații despre document declarând anumite proprietăţi împreună cu valorile lor definite intern. Cu ajutorul elementului META se pot preciza informațiile care vor fi trimise în antetul fişierului, informații specifice protocolului HTTP şi pe care browserul le interpretează pregătind afișarea fişierului.1. http-equiv = numele informației meta pentru un document HTML - "text/html" 2. content = pentru conținutul (valoarea) informației respective.

Setul de caractere folosit – charset =iso-8859-1 reprezintă o mulțime de caractere folosite în alfabetul diferitelor limbi, caractere identificate printr-un număr de cod. De aceea, pentru ca browserul să descifreze corect informația pe care o primește este recomandabil, ca acest atribut să fie specificat în antetul fiecărui document. Seturile de caractere sunt niște standarde stabilite de către ISO (Organizația Internațională pentru Standardizare). Deci, charset iso 8859-1 - ( sau ISO Latin-1) reprezintă setul care conține cele mai răspândite extensii ale alfabetului latin şi este cel mai des întâlnit.

14

Page 15: CARTE HTML

Cum realizăm un site web?

Alte tipuri de informaţii META sunt <META name="nume proprietate" content="valoare proprietate">.

Se pot introduce astfel informaţii privind autorul paginii respective, informații in scopuri de indexare a paginii de către motoare de căutare Web.

<META name="author" content="Profesor"><META name="keywords" content="Html, CSS, Javascript">

Corpul fişierului

Tot conţinutul paginii web se plasează în corpul fişierului şi este încadrat de marcajele <BODY> si </BODY>. Marcarea corpului fişierului cu cele doua etichete este opțională, dar folosirea lor determină o mai mare claritate în structurarea fişierului pe elemente componente. Opţional marcajul <BODY> poate sa conţină atribute referitoare la fondul si marginile documentului sau culoarea textului.

background="Poze/elev.jpg" încarcă imaginea de fond a fişierului dintr-un fişier imagine de tip JPG.

bgcolor="#ffffff" modifică culoarea fundalului documentului (Alb).

text="#000000"modifică culoarea textului existent in document, în cazul nostru negru.

15

Page 16: CARTE HTML

Cum realizăm un site web?

În cazul în care sunt prezente amândouă, atributele background şi bgcolor, browserul caută fișierul imagine de fond şi dacă acesta există, el va fi afișat şi multiplicat pentru a acoperii întreaga suprafață a fişierului, culoarea de fond fiind vizibilă, numai daca fundalul imagini este transparent.

Introducerea textului

Conţinutul fişierului HTML constă în text, imagini, sunete, efecte dinamice şi fiecare dintre acestea posedă caracteristici distincte şi uşor de urmărit în cadrul codului din Notepad. Pentru început vom analiza caracteristicile textului, urmând ca în capitolele următoare să analizăm şi celelalte componente.

În documentele create de noi vom folosi stiluri de text diferite pentru a evidenţia anumite cuvinte sau pentru a le acorda o anume semnificaţie (de citate, de nume, etc.). Pentru a realiza aceste stiluri specificăm valorile pentru atributele fontului:

litera culoarea

stilul

dimensiunea

16

Page 17: CARTE HTML

Cum realizăm un site web?

Stiluri pentru litera textului

Pentru ca un bloc de text sa apară în pagină evidențiat (cu caractere aldine), trebuie inclus între separatorii <b>...</b> ( b vine de la bold =îngroşat ).

<b>Text scris cu caractere îngroșate.</b>

Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus într-un bloc delimitat de etichetele <i>...</i>( i vine de la italic).

<i>Text scris cu caractere înclinate.</i>

Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la underline).

<u>Text scris cu caractere subliniate.</u>

Pentru a indica folosirea fontului monospaţiu, adică forma de scriere în care fiecare caracter ocupa pe lăţime același spațiu se utilizează etichetele<tt>…</tt>( tt înseamnă " teletype " = teleprinter).

<tt>Text scris la maşina de scris.</tt>

Pentru ca o porţiune din text să aibă caractere mai mari cu o unitate decât cele din restul textului acesta trebuie inclus într-un bloc delimitat de etichetele <big>...</big>. Pentru ca o porţiune din text să aibă caractere mai mici cu o unitate decât cele din restul textului acesta trebuie inclus într-un bloc delimitat de etichetele <small>...</small>.

17

Page 18: CARTE HTML

Cum realizăm un site web?

Pentru a insera secvențe de text aliniate ca indice (subscript) trebuie delimitate de etichetele <sub>...</sub> sau ca exponent (superscript), aceste fragmente de <sup>...</sup>. Pentru a insera un bloc de caractere tăiate cu o linie se utilizează etichetele <strike>...</strike>.

Exemplu de cod sursă:

Aici este textul din fişier.

<big>Acest text este mai mare decât restul textului.</big>

<small> Acest text este mai mic decât restul textului.</small>

<sub> Acest text este indice la restul textului. </sub>

<sup> Acest text este exponent la restul textului.</sup>

<strike> Acest text este tăiat cu o linie.</strike>

Vizualizare efectelor:

18

Page 19: CARTE HTML

Cum realizăm un site web?

Controlul <FONT>

Acest control valabil şi pentru versiunile anterioare de HTML permite adăugarea următoarelor caracteristici: tipul caracterelor, dimensiunea şi culoarea lor, formatând un bloc de text la fel ca procesoarele de text conform dorinţelor creatorului documentului.

Aceste caracteristici le voi explica mai jos pentru înţelegerea clară a lor:

Font Face - folosit pentru alegerea aspectului literei utilizate în text. Valoarea primită de proprietate trebuie să fie un font recunoscut de browser şi recomandabil este să folosiţi fonturile obişnuite, pentru ca browserul să recunoască tipul de font specificat.

19

Page 20: CARTE HTML

Cum realizăm un site web?

<FONT Face="Courier">

Font Size este folosit mărimea fontului utilizat şi poate lua valori de la 1 la 7. Această valoare este de

două tipuri:

Absolută – specifică dimensiunea exactă a fontului. <FONT Size = 5>

Relativă – specifică dimensiunea fontului faţă de cea a fontului curent.

<FONT Size = +3> Valoarea implicită a dimensiunii fontului este 3.

Font Color – este atributul cu ajutorul căruia se poate stabili culoarea textului marcat. Valorile acestei proprietăţi se pot scrie fie cu ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui culorilor de bază. Exemplu:

<Font Color = blue><Font Color = #f>

Exemplu de realizare în codul HTML:

Sursă HTML:

20

Page 21: CARTE HTML

Cum realizăm un site web?

<font face="Tahoma" size = 5>Primul site web realizat de mine.</font>

Nu durează mult și arată acceptabil <font color="#00ff00">, <br> însă mai am de lucru </font> <font size = 6> în realizarea paginilor web <br> <font face="arial" color="#ff3300"> ce fac parte din site</font>.

Pe pagina cealaltă am afișat rezultatul codului anterior și veți putea observa diferențele între fontul cu o caracteristică și alta.

Vizualizare:

Inserarea unei imagini

Pentru a introduce o imagine în documentul HTML este necesară folosirea marcatorului IMG(image în engleză), al cărui atribut src(source)este folosit la

21

Page 22: CARTE HTML

Cum realizăm un site web?

identificarea imagini în spaţiul în care se află sau URL-ul acestuia:

<IMG src = "nume_imagine.gif">

Marcatorul IMG nu are marcaj de încheiere, deoarece marcatorul nu are conţinut pe care sa-l includă şi acceptă doar anumite tipuri de fişiere imagine compatibile cu HTML cum ar fi gif, jpeg si png. E bine de clarificăm câteva aspecte legate de folosirea acestor tipuri de fişiere:

GIF (Graphics Interchange Format) cu extensia .gif sunt fişiere folosite pentru imagini simple, fără cerinţe prea mari în privinţa spaţiului de lucru(8 biţi pentru o culoare, 256 culori posibile) şi este recomandat să le folosiţi pentru sigle, pentru benere, pentru trasarea şi delimitarea structurii grafice a paginii web, etc.

JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg sunt fişiere folosite pentru imaginile paginii web, deoarece au o calitate net superioară în raport cu precedentele(24 biţi pentru o culoare, 16777216 de culori posibile), suportă diverse compresii şi modificări de nuanţe şi contraste

PNG(Portable Network Graphics) cu extensia .png sunt fişiere cu format inventate de firma Microsoft, în ideea folosirii sale pe platforma Internet Explorer cu predilecţie, are însă portabilitatea pe celelalte platforme lasă de dorit;

22

Page 23: CARTE HTML

Cum realizăm un site web?

Atributul Alt este folosit pentru afişarea unui text în locul imaginii pentru situaţia în care browser-ul nu lucrează decât în mod text sau in cazul dacă, utilizatorul renunţă la încărcarea imaginilor (opțiune oferita de majoritatea programelor de navigare Web). În cazul afişării imaginii acest conţinut va fi afişat în format tool-tip (casetă de informare).

Chenarul unei imagini se realizează cu atributul border ce primeşte diverse valori:

<img src="imagine.gif" border="3">

<img src="imagine1.gif" border="6">

Stabilirea dimensiunilor imaginii

Dimensiunile iniţiale ale imaginii pot fi modificate prin intermediul atributelor width (lăţime) și height

23

Page 24: CARTE HTML

Cum realizăm un site web?

(înălţime). Atributele width si height stabilesc de fapt dimensiunile suprafeței din document ce este ocupată de imagine şi prin acest fapt determinăm încărcarea rapidă a documentului în fereastra programului browser. Dacă imaginea are dimensiuni mai mici sau mai mari, decât cele indicate imaginea va fi deformată pentru a se încadra în suprafața asociată de programul browser.

Exemplu imagine.gif are dimensiunile de 43 pixeli x 37 pixeli

Dimensiunile iniţiale pentru lăţime şi înălţime:

<img src="imagine.gif" width=43 height=37>

Dimensiuni duble pentru lăţime şi înălţime:

<img src="imagine.gif" width=86 height=74>

24

Page 25: CARTE HTML

Cum realizăm un site web?

Alinierea imaginii în raport cu textul

Pentru a alinia imaginea în raport cu textul din jurul său este obligatorie folosirea atributului align, care are mai multe valorile pe care le poate lua:

o top este folosită pentru a alinia textului faţă de

partea de sus a imaginiio bottom este folosită pentru a alinia textului faţă

de partea de jos a imaginiio middle sau center este folosită pentru a alinia

textului faţă de centrul imaginii o left este folosită pentru a alinia textului faţă de

partea stânga a paginii, blocul de text aflat după marcajul imaginii ocupă spațiul liber din dreapta şi de sub ea.

o right este folosită pentru a alinia textului faţă de

partea dreapta paginii, blocul de text aflat după marcajul imaginii ocupă spațiul liber din stânga şi de sub ea.

Inserarea de tabele

Avem foarte multe posibilități de a prezenta în interiorul documentului informația într-o formă structurată, iar folosirea tabelelor este utilă, mai ales în

25

Page 26: CARTE HTML

Cum realizăm un site web?

situația în care informația are un grad mare de complexitate.

Ce este un tabel? Un tabel este o suprafață dreptunghiulară formată din linii şi coloane. Elementul creat prin intersecţia unei linii cu o coloană se numeşte celulă. O linie a tabelului este realizată din mai multe celule aliniate pe orizontală, iar o coloană este realizată din mai multe celule aliniate pe verticală. Celulele tabelului pot să conțină conţină text, imagini, legături web, iar independent de celelalte celule, fiecare celulă poate avea propriile caracteristici pentru culoarea de fundal, culoarea şi alinierea textului.

Pentru a insera un tabel într-un document HTML se folosesc marcajele <TABLE> şi </TABLE>, marcajul de final este obligatoriu, deoarece absenţa lui nu permite afişarea corectă a tabelului. Pentru inserarea unei linii într-un tabel se folosesc marcajele <TR> şi </TR> (table row). Pentru inserarea unei celule cu informaţii se folosesc marcajele <TD> şi </TD> (table data). Marcajele de închidere pentru inserarea unei linii sau celule sunt opţionale, deoarece fiecare linie şi celulă este urmată de alta şi acestea pot realiza închiderea necesară.

26

Page 27: CARTE HTML

Cum realizăm un site web?

Vom exemplifica ceea ce am discutat anterior pe un caz concret al unui tabel cu bordura de 2

Caracteristici ale tabelului

Border

Introduce grosime în pixeli pentru marginea sau bordura tabelului, dacă valoarea este nulă, tabelul nu afişează bordură sau linii interne.

Width şi height

Stabilesc dimensiunile tabelului pe orizontală (width – lăţime) şi pe verticală (height – înălţime) şi sunt exprimate în pixeli cu valori întregi pozitive sau în procente între 1-100 din lăţimea şi înălţimea totală a paginii. Dimensiunile sunt calculate de browser(programul de navigare Web) în funcţie de opţiunile introduse de programator, prin cele doua

27

Page 28: CARTE HTML

Cum realizăm un site web?

caracteristici, dar si de dimensiunile elementelor din tabel pentru a se respecta afişarea corectă a acestora.

Exemplu:

1. Am modificat marcajul table adăugând dimensiuni pentru tabel width=200 pixeli şi height=200 pixeli

2. Am modificat marcajul table adăugând dimensiuni pentru tabel width=25% din lăţimea paginii şi height=25% din înălţimea paginii

Align

Determina alinierea pe orizontală a tabelului în cadrul paginii web şi are următoarele opţiuni posibile:

28

Page 29: CARTE HTML

Cum realizăm un site web?

left – textul ce urmează după tabel va fi afişat în dreapta tabelului;

center - textul ce urmează după tabel va fi afişat sub tabel.

right - textul ce urmează după tabel va fi afişat în stânga tabelului;

Exemplu:

Aliniere tabel la stânga textului:

Cellspacing

29

Page 30: CARTE HTML

Cum realizăm un site web?

Stabileşte spaţiul (în pixeli) dintre două celule alăturate ale unui tabel, precum și spaţiul dintre marginile tabelului şi celule.

Exemplu:

Cellpading

Stabileşte spaţiul (în pixeli) dintre marginile unei celule și conţinutul acesteia.

Bgcolor

Stabileşte culoarea de fond a tabelului.

<table border="2" cellspacing="7" cellpadding="5" bgcolor ="aqua">

30

Page 31: CARTE HTML

Cum realizăm un site web?

Background

Stabileşte imaginea de fond a tabelului.

<table border="2" cellspacing="7" cellpadding="5" background =…/imagine.gif">

Hspace şi Vspace

Reprezintă distanţa pe orizontală şi respectiv, verticală dintre tabel şi celelalte elemente ale paginii Web, dar este recunoscut implicit doar de Netscape nu şi de Internet Explorer.

Inserarea listelor

Listele reprezintă modalităţi de organizare mai simplă a datelor din pagina web şi servesc la prezentarea informaţiilor în mod organizat, pentru a fi mai accesibile şi uşor de parcurs. Listele le regăsim şi în alte aplicaţii, fiind foarte uşor de implementat în oricare situaţie. Listele sunt organizate la rândul lor în trei categorii:

liste ordonate (cu numere sau litere), liste neordonate (cu simboluri), liste de definiţii , fără marcaje.

Liste ordonate

31

Page 32: CARTE HTML

Cum realizăm un site web?

Listă ordonată este un porţiune de text delimitată de marcajele <OL> şi </OL> (ordered list – listă ordonată), ale cărei elemente se marchează cu numere. Fiecare componentă a listei este descrisă de marcajul <LI> (list item – element de listă), iar lista este indentată în raport cu pagina şi orice element nou al listei, începe pe o linie nouă.

Exemplu de listă ordonată simplă:

Marcajul <OL> poate avea opţiunea type, ce stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile opţiunii type sunt:

A - pentru ordonare cu litere mari

<OL type="A">

a - pentru ordonare cu litere mici

<OL type="a">

I - pentru ordonare cu cifre romane mari

<OL type="I">

i - pentru ordonare cu cifre romane mici

32

Page 33: CARTE HTML

Cum realizăm un site web?

<OL type="i">

Exemplu pentru opţiunea type:

Liste neordonate

O listă neordonată este o mulţime de componente asemănătoare, aranjate într-o ordine oarecare. Lista este o porţiune de text delimitată de marcajele pereche <UL> şi </UL> (unordered list – listă neordonată). Fiecare componentă a listei este introdusă prin marcajul simplu <LI> (list item – element listă). Cu toate că eticheta <LI> este o etichetă container, eticheta sa de închidere, </LI>, este opţională. Dacă nu este prezentă, la întâlnirea unei noi etichete <LI> se consideră că vechea etichetă este închisă.

33

Page 34: CARTE HTML

Cum realizăm un site web?

Exemplu de listă neordonată:

Exemplu de listă neordonată cu caracteristica type ce stabileşte simbolul afişat în faţa fiecărui element al listei:

Valorile acestuia sunt următoarele:

1. circle (cerc)

34

Page 35: CARTE HTML

Cum realizăm un site web?

2. disc (disc plin) 3. square (pătrat)

Liste de definiţii

Lista de definiţii reprezintă un tip de listă cu componente ce nu sunt numerotate, cu simboluri şi care prezintă două nivele de indentare. Listele de definiţii sunt porţiuni de text incluse între marcajele <DL> şi </DL> (definition list – listă de definiţii), cu marcaj de închidere obligatoriu. Orice componentă a

listei este

introdusă prin marcajul <DT> (definition term – termen de definiţie) şi conţine un număr de elemente care îl definesc, introduse cu marcajul <DD> (definition description – descriere definiţie).

35

Page 36: CARTE HTML

Cum realizăm un site web?

Inserarea legăturilor web

Legăturile (link-urile sau hiperlegăturile) sunt marcaje în fişierul HTML care definesc în fapt structura de navigare a unui site web, realizând conexiunea între paginile componente, exact ca o scurtătură din spaţiul de lucru al ecranului Windows, către un fişier aflat undeva pe discul C. Hipertextul este tip de text, ce are comportament modificat datorită codului HTML şi este total diferit de textul clasic din aplicaţia Word de exemplu şi permite nu doar salt dintr-un fişier în altul pe acelaşi calculator, dar şi către un calculator aflat oriunde în lume.

Cum se inserează o legătură într-o pagină web(fişier HTML) ?

Vom folosi marcajele <a> şi </a> a – anchor înseamnă ancoră, nume destul de sugestiv pentru elementul descris, deoarece o navă pentru a rămâne într-un anumit loc are nevoie de ancoră, la fel şi în acest caz pentru a putea deschide o altă resursă de date, folosim marcajul respectiv. Marcajul <A> are un parametru obligatoriu href (hypertext reference – referinţă hipertext) ce primeşte ca valoare adresa fişierului ce dorim să-l deschidem sau URL-ul respectiv(Uniform Resource Locator – Resursă

36

Page 37: CARTE HTML

Cum realizăm un site web?

Localizată Uniform). Fişierul poate fi imagine, text sau HTML, fişierul HTML în care plasăm legătura se numeşte sursă, iar fişierul către care avem legătura se numeşte destinaţie.

Linia de program este:

<a href= adresa fişierului >text descriptiv </A>

iar între marcajele <a> şi </a> poate fi plasată şi o imagine. Textul dintre marcaje va fi afişat subliniat şi de culoare albastră, iar imaginile au bordură de culoare albastră şi acesta poate fi plasat chiar în interiorul textului, tabelelor şi al listelor.

<table> <tr> <a href= adresa fişierului >text descriptiv </A> </tr> </table>

Legături în aceeaşi pagină

Locul în care dorim să facem legătura se realizează introducând marcajul <A> cu caracteristica name, în faţa unui anumit element din pagină – un titlu, o imagine, un tabel şi name primeşte ca valoare un nume atribuit ancorei.

Cum se construieşte?

Se introduce în locul dorit linia de mai jos:

<a name = nume legătură> </a>

37

Page 38: CARTE HTML

Cum realizăm un site web?

Legătura se realizează cu caracteristica href a marcajului <a>, şi legătura primeşte ca valoare #nume legătură, aşa cum arată instrucţiunea de mai jos:

<a href = #nume legătură>text destinaţie</a>,

textul destinaţie fiind afişat de culoare albastră şi subliniat. Dacă plimbăm cursorul de maus deasupra legăturii, cursorul va lua formă de mânuţă şi prin clic pe text vom putea să facem salt la pagina sau fişierul dorit.

Legături către altă pagină din folderul comun

Construcţia sitului web se bazează pe existenţa mai multor pagini web sau fişiere, pentru a realiza o structură ierarhică de legături, ce v-a permite navigarea cu uşurinţă de la o pagină, către altă pagină din folder. Pentru a permite acest lucru se construieşte următoarea structură:

<a href="nume_fişier_ţintă.html">TEXT</a>

Atributul href primeşte ca valoare chiar numele fişierului ţintă, şi face posibil saltul la conţinutul acestuia, fiind o legătură locală către un fişier aflat pe acelaşi server.

TEXT – este textul pe care se face clic cu maus-ul pentru a urma calea indicată de atributul href, şi pentru a

38

Page 39: CARTE HTML

Cum realizăm un site web?

activa hiperlegătura. Acest text este afişat subliniat şi având culoare albastră.

Cel mai simplu caz de aplicare a cunoștințelor anterioare, este crearea unor legături între două fişiere aflate în acelaşi folder sau folder comun, ca model de lucru pentru crearea unui sit web funcţional apoi, prin generalizare.

Vom construi în paginile web două structuri asemănătoare:

În fișierul 1 vom introduce <a href="fişier2.html">Către fişier 2</a>.

În fișierul 2 vom introduce <a href="fişier1.html">Către fişier 1</a>.

Conţinutul fişierului 1 va fi următorul:

<html>

<body>

<h1>Fisier 1 </h1><br>

<a href="fişier2.html">Către fişier 2</a>

</body>

</html>

39

Page 40: CARTE HTML

Cum realizăm un site web?

Conţinutul fişierului 2 va fi următorul:

<html>

<body>

<h1>Fisier 2 </h1><br>

<a href="fişier1.html">Către fişier 1</a>

</body>

</html>

Dacă facem clic pe oricare din hiperlegături, Către fișier 1 sau Către fișier 2, acestea permit accesul la fişierul vecin, deci putem trece din fişierul 1 în fişierul 2 şi invers.

Legături către o pagină aflată în alt folder

În situaţia în care este necesar să legăm două pagini aflate în foldere diferite(situaţie nerecomandată

40

Page 41: CARTE HTML

Cum realizăm un site web?

pentru încărcarea în server), pentru a preciza poziţia paginilor în structura de foldere, se va folosi adresarea relativă sau adresarea absolută a acestora.

Adresarea relativă se referă la calea spre pagina cu care facem legătura, din documentul în care ne aflăm, şi presupune parcurgerea nivel cu nivel, a structurii de foldere din calculator sau server folosind şirul de caractere ../.

Adresarea absolută se referă la calea completă spre pagina cu care facem legătura, pornind de la folderul principal, ce se află de obicei pe discul C, din care se ajunge la pagina ţintă.

Exemple de structuri:

1. Relativă - < a href="../New Folder/fisier1.html>Catre fisier 1</a>

2. Absolută - < a href="C:/Documents and Settings /Administrator /Desktop /New Folder/fisier1.html>Catre fisier 1</a>

Legături către pagini externe

Dacă dorim ca situl nostru să aibă referinţe externe, respectiv legături către alte situri web, este obligatoriu să adaptăm structura legăturii în mod corespunzător. Acest

41

Page 42: CARTE HTML

Cum realizăm un site web?

lucru se realizează prin modificarea valorii atributului href, prin asocierea acesteia cu URL-ul sitului respectiv, ca de exemplu http://www.google.ro/ ce reprezintă URL-ul motorului de căutare Google.

<a href="http://www.google.ro"> GOOGLE<a>

Implementare:

<html>

<body>

<h1>Legatura catre Google </h1><br>

a href="http://www.google.ro"> GOOGLE<a>

</body>

</html>

Bineînţeles că hiperlegătura nu v-a funcţiona decât, dacă aveţi conexiune Internet şi este foarte utilă pentru vizitatorii sitului dumneavoastră în situaţia în care vor să caute o anumită informaţie. Reamintesc că în locul

numelui sitului ţintă, se poate introduce ip-ul respectivului sit, dar este o complicaţie inutilă şi nu merită folosit.

42

Page 43: CARTE HTML

Cum realizăm un site web?

Crearea unui sit web funcţional

Pentru a crea un sit web funcţional şi corespunzător este necesar ca anterior să fie realizate câteva etape cheie:

1. Planificare

2. Proiectare

3. Testare

Autorul în această carte îşi propune să realizeze un sit simplu de test, mai mult cu valoare pedagogică decât practică, format din patru fişiere distincte aflate într-un folder comun ce se pot încărca ulterior într-un server web de găzduire.

Vom începe cu prima etapă, aceea de planificare a sitului şi care trebuie să răspundă la întrebarea:

Care este publicul ţintă al sitului, ce scop trebuie să aibă, ce informaţii trebuie să conţină?

Având în vedere că anterior am stabilit, că situl va fi unul pedagogic, de învăţare, este destul de comod să folosim o temă legată de şcoală. De exemplu să presupunem că dirigintele unei clase doreşte să încarce situaţia şcolară cu note, medii şi absenţe la sfârşit de semestru pentru a fi accesate, de către părinţii ocupaţi

43

Page 44: CARTE HTML

Cum realizăm un site web?

atunci când ajung acasă. Publicul ţintă a fost aşadar stabilit în mod precis, ca fiind părinţii elevilor dintr-o anumită clasă, putem să pornim la planificarea sitului.

Ce aşteptări au părinţii elevilor, ce vor să cunoască în privinţa activităţilor desfăşurate de elevi?

1. Notele la fiecare disciplină şcolară;

2. Absenţele la fiecare disciplină şcolară;

3. Mediile la fiecare disciplină şcolară;

4. Abateri de la conduita şcolară;

Vom crea 4 fişiere ce vor conţine fiecare, informaţii conform cu enunţurile prezentate mai sus, în folderul Sit părinți:

şi va conţine următoarea structură de fişiere:

Etapa a doua este cea de proiectare a fiecărui fişier în parte. Primul pas constă în crearea unei structuri şablon ce va fi copiată în toate fişierele:

44

Page 45: CARTE HTML

Cum realizăm un site web?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

<html>

<head>

<title>Numele fisierului(note, absente, medii, abateri)</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="red">

<h1 align="center">Informatiile despre note, absente, medii, abateri </h1><br>

</body>

</html>

Şi are următorul efect:

45

Page 46: CARTE HTML

Cum realizăm un site web?

Primul fişier ce va fi proiectat este fişierul cu notele elevilor la disciplinele şcolare al cărui conţinut este realizat bidimensional, ţinând cont de numele elevilor – prima dimensiune şi nota la disciplina şcolară – a doua dimensiune. Forma de organizare cea mai potrivită rămâne tabelul:

Şi ţineţi cont că nu am introdus în fişierul Note.html, toţi elevii şi notele lor, ci doar trei dintre aceştia, pentru a înţelege mecanismul de lucru:

<h1 align="center"> Notele elevilor de la clasa......</h1><br>

<table border="4">

<tr>

<td>Nume elev

<td>Note D1

<td>Note D2

și lista continuă până când realizăm toată linia tabelului pentru discipline;

…………………..

46

Page 47: CARTE HTML

Cum realizăm un site web?

<tr>

<td>Popescu Ion

<td>7,8,9

<td>4,5,6

și lista continuă până când realizăm toată linia tabelului pentru note;

…………………..

<tr>

<td>Ionescu Ion

<td>7,8,9

<td>4,5,6

și lista continuă până când realizăm toată linia tabelului pentru note;

…………………..

<tr>

<td>Cristescu Stefan

<td>7,8,9

<td>4,5,6

și lista continuă până când realizăm toată linia tabelului pentru note;

47

Page 48: CARTE HTML

Cum realizăm un site web?

…………………..

</table>

Disciplinele se introduc cu listă neordonată:

<h1 align="center">Lista disciplinelor scolare</h1><hr>

<ul>Discipline de studiu

<li>D1 Limba si literatura romana

<li>D2 Limba engleza

și lista continuă până când introducem toate disciplinele;

…………………..

</ul>

Şi rezultatul arată cam aşa:

48

Page 49: CARTE HTML

Cum realizăm un site web?

Al doilea fişier ce va fi proiectat este fişierul cu absenţele elevilor la disciplinele şcolare al cărui conţinut este realizat bidimensional, la fel ca şi primul, singura diferenţă va consta în introducerea unui câmp suplimentar cu numărul total de absenţe înregistrat de elev. Nu modificaţi decât conţinutul celulelor cu note şi antetul tabelului:

49

Page 50: CARTE HTML

Cum realizăm un site web?

Al treilea fişier ce va fi proiectat este fişierul cu mediile generale ale ce poate fi creat cu ajutorul unei liste neordonate, ce v-a conţine numele elevului şi media pe fiecare item:

Fișierul cu abateri,adică cel de-al patrulea și ultimul se realizează, cu o listă neordonată sau ordonată la fel ca și în cazul fișierului anterior.

<h1 align="center">Lista abaterilor scolare</h1><hr>

<ul>Abateri

<li>Ionescu Ion – chiul repetat

<li>Cristescu Stefan – distrugere obiecte scolare

și lista continuă până când introducem toate abaterile;

…………………..

</ul>

50

Page 51: CARTE HTML

Cum realizăm un site web?

Bineînțeles că se poate realiza un sit foarte valoros pe aceeași temă, dar repet scopul a fost unul didactic, și nu am încercat să aduc foarte multe elemente care să îngreuneze munca unui începător.

Ideal pentru mulți creatori este să utilizeze un editor de HTML, care să creeze rapid și elegant situl web, sunt însă situații în care cunoașterea codului HTML contribuie la proiectarea mai precisă a paginilor și apoi reproiectarea sau chiar depanarea acestora.

Vă urez mult succes!

51

Page 52: CARTE HTML

Cum realizăm un site web?

Bibliografie

1. Wikipedia Enciclopedia Liberă http://ro.wikipedia.org/wiki/Web_design

2. HTML pentru www cu XHTML si CSS. Ghid de învățare rapidă prin imagini. Elisabeth Castro. Editura TEORA.

3. Grafică și HTML pentru elevi. Emil Onea și Dan Crintea. Editura Paralela 45.

4. http://www.w3.org/ pentru cele mai noi specificații HTML.

5. HTML pentru începători. Michael Karbo. Editura Egmont.

52