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 transferă datele unul către altul sunt stabilite de către

1

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 modul cum este

2

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.

Cum procedăm pentru a crea 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-o locaţie aleasă de dumneavoastră, de exemplu pe Desktop sau pe

3

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:

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

4

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:

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

5

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

6

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> <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>

7

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 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:

8

<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. 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">

9

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.

Î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.

10

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

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>

11

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>.

Pentru a insera secvenţe de text aliniate ca indice (subscript) trebuie delimitate de etichetele _... sau ca exponent (superscript), aceste fragmente de ^.... 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>

12

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

_{Acest text este indice la restul textului.}

^{Acest text este exponent la restul textului.}

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

Vizualizare efectelor:

13

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.<FONT Face="Courier">

14

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:

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

Nu dureaza mult si arata acceptabil<font color="#00ff00">,<br> insa mai am de lucru</font> <font size = 6>in realizarea

15

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 identificarea imagini în spaţiul în care se află sau URL-ul acestuia:

16

<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;

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:

17

<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) si height(î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>

18

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

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

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.

19

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 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ă.

20

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

21