1. Introducere în HTML ........................................................................................................................................ 2 1.1. Inter-re ele şi Internet ................................................................

.............................................................. 2 1.2. Terminologie web...................................................................................................................................... 8 2. Crearea site–urilor web ................................................................................................................................. 12 2.1. Tipuri de site-uri web .............................................................................................................................. 12 2.2. Etapele de realizare a unui site............................................................................................................. 13 2.2.1. Proiectare (Design).......................................................................................................................... 14 2.2.2. Promovarea site-ului (Marketing) .................................................................................................. 16 2.2.3. Gazduirea site-ului........................................................................................................................... 18 2.2.4. Administrarea site-ului..................................................................................................................... 19 3. Principiile proiectării unui site web............................................................................................................... 20 4. Bazele proiectării site-urilor Web ................................................................................................................. 26 4.1. Standardizarea HTML ............................................................................................................................ 27 4.2. Rezumat.................................................................................................................................................... 30 5. Fundamentele standardului HTML .............................................................................................................. 32 5.1. Etichete (tag-uri) ....................................................................................................................................... 33 5.2. Structura documentelor HTML.............................................................................................................. 43 6. Texte ................................................................................................................................................................ 47 6.1. Culori ......................................................................................................................................................... 47 6.1.1. Alegerea culorilor ............................................................................................................................. 51 6.2. Caractere speciale HTML........................................................................................................................ 52 6.3. Formatarea caracterelor .......................................................................................................................... 56 6.3.1. Formatare la nivel fizic .................................................................................................................... 57 6.3.2. Formatare la nivel logic................................................................................................................... 60 6.3.3. Formatare la nivel de comunicare................................................................................................. 63 6.4. Extensii Netscape şi Microsoft ................................................................................................................ 65 6.5. Formatarea textului .................................................................................................................................. 68 6.6. Sugestii privind aspectul textului............................................................................................................. 77 7. Legături în documente HTML ....................................................................................................................... 79 7.2. Adrese URL ............................................................................................................................................. 79 7.2. Legături (link-uri) ..................................................................................................................................... 81 7.2.1. Legătura la un URL ......................................................................................................................... 81 7.2.2. Legătura la o sec iune..................................................................................................................... 88 7.3. Adrese absolute şi adrese relative.......................................................................................................... 91 7.4. Legătura la o loca ie denumită din alt document................................................................................ 94 7.5. Comenzi rapide de la tastatură pentru link-uri.................................................................................... 94 7.6. Alte marcaje ............................................................................................................................................. 96 7.6.1. Informa ii de cale.............................................................................................................................. 96 7.6.2. Rela ii între documente ................................................................................................................... 97

Tutorial HTML

1. Introducere în HTML
1.1. Inter-re ele şi Internet
O re ea este un grup de computere capabile să comunice unele cu altele, să partajeze fişiere, date, programe sau opera ii. Computerele dintr-o re ea sunt conectate prin componente hardware şi software. Componenta hardware asigură legătura fizică dintre computere (legături telefonice, fibre optice, routere, plăci de re ea şi chiar calculatoare). Componenta software este reprezentată de programele care fac posibilă utilizarea componentei hardware pentru comunica ii şi schimbul de informa ii. Re elele pot fi de mai multe tipuri: LAN (Local Area Network) – calculatoarele sunt plasate în interiorul aceleaşi clădiri sau campus universitar; MAN (Metropolitan Area Network) – re ea extinsă la nivelul unui oraş); WAN (Wide Area Network) – re ea na ională. Multe dintre re elele de calculatoare sunt conectate între ele, formând interre ele (re ele de re ele de calculatoare). O re ea de re ele se numeşte internet (“net” însemnând în limba engleză “re ea”). Cea mai mare inter-re ea publică (re ea de re ele de calculatoare cu acces public) este re eaua Internet. În concluzie, Internetul este o interconectare de LAN-uri, MAN-uri şi WAN-uri prin legături rapide (satelit, circuite cu comunica ie digitală etc.). Pentru a fi identificate, calculatoarelor conectate la Internet li se atribuie numere unice numite adrese de Internet. Deoarece utilizatorul re ine mai greu un număr, calculatorului conectat la Internet i se mai atribuie şi un nume cunoscut ca nume de domeniu. Domeniul poate con ine mai multe subdomenii. Schema folosită de Internet pentru structurarea domeniului pe mai multe niveluri de subdomenii formează sistemul numelor de domeniu (DNS – Domain Name System). Numele de domeniu este format din mai multe păr i, separate prin punct, care corespund numelor de subdomenii. De exemplu: zz.alfa.beta.gamma.ro În exeplul dat, domeniul este format din următoarele subdomenii: Numele computerului: zz. Grupul care gestionează calculatorul (exemplu: alfa) reprezintă un grup de utilizatori sau un departament care foloseşte calculatorul.
2

Tutorial HTML Organiza ia utilizatorului (exemplu:beta) reprezintă organiza ia din care face parte grupul de utilizatori sau departamentul. Tipul organiza iei (exemplu:gamma) se referă la organiza iile care fac parte din acelaşi sistem. Zona geografică sau ara (exemplu:ro) este identificată printr-un cod. Dacă în numele de domeniu nu apare acest cod înseamnă că acel calculator se gaseşte în SUA. Observa ie. Pentru identificare în re eaua internet, calculatoarele folosesc numere, iar oamenii nume. Pentru translatarea numelor în numere se folosesc servere de nume. Ele sunt calculatoare dintr-un anumit domeniu (tipul organiza iei,organiza ia etc.) Software-ul care permite lucrul în re ea respectă un set de reguli fixe (limbaj), cunoscute sub numele de protocol de re ea. Re eaua poate fi interoperabilă, adică diferite tipuri computere, folosind diferite sisteme de operare, pot fi conectate, pot să comunice unele cu altele, să partajeze informa iile, dacă respectă aceleaşi protocoale de re ea. Protocolul folosit s-a standardizat şi se numeşte TCP/IP (Transmission Control Protocol / Internet Protocol, adică Protocolul Internet). Există mai multe metode (servicii) de acces la informa ia stocată pe un calculator prin intermediul re elei internet : FTP (File Transfer Protocol) este serviciul pentru transferul fişierelor de la un calculator la altul şi este parte a protocoalelor TCP/IP. Fişierele care pot fi transferate sunt stocate pe computere speciale numite servere de FTP. Pentru a accesa aceste fişiere se utilizează un client de FTP; acesta este o interfa ă care permite utilizatorului să localizeze fişierele şi să le transfere pe propriul computer. Fişierele pe serverele de FTP sunt adesea comprimate, compresia micşorând dimensiunea fişierului ceea ce face ca transferul să fie mai rapid. Anonymous FTP permite utilizatorilor să acceseze o bogată colec ie de informa ii publice de pe Internet. Nu este necesar un cont special sau o parolă. Totuşi uneori serverele de FTP anonim cer ca utilizatorul să se login-eze cu cuvântul anonymus şi în loc de parolă cu adresa de e-mail. O bogata categorie de fişiere sunt disponibile prin FTP anonim pe Internet: Shareware – software care poate fi utilizat free pentru o anumită perioadă după care trebuie să fie achitată o
3

utilizatorul emulează computerul de la distan ă. documenta ii. etc. Cutia poştală (mailbox) este un fişier în care se memorează mesajele primite. Scrisoarea electronică este un mesaj format din: antet (header) – o secven ă standard de informa ii cu care începe mesajul postal. semnatura (signa-ture) – o secven ă standard de informa ii care se adaugă la sfârşitul mesajului poştal. Electronic Mail este serviciul de mesagerie electronică. Documente – articole. fişiere cu programe şi alte tipuri de fişiere cu informa ii. O data conectat. Există şi resurse disponibile pe Internet fără cont şi parolă. Gestionarea mesajelor poştale se face prin intermediul mai multor tipuri de cutii poştale: Inbox – pentru mesajele primite. de exemplu fonturi clipart sau jocuri. Freeware – software distribuit gratuit. Sent – pentru mesajele expediate. Când sunt tastate comenzile. fizic. Computerul remote poate fi. Poşta electronică (electronic mail sau e-mail) asigură func ia de comunicare. Pentru accesul la un computer remote este necesar un cont şi o parolă. Telnet este serviciul pentru accesul de la distan ă la resursele unui calculator. Computerul care ini iază conexiunea se numeşte computer local iar computerul care este accesat şi care acceptă conexiunea se numeşte remote computer sau gazda (host). Delete – pentru mesajele sterse. ele se execută pe computerul gazdă. Outbox – pentru mesajele care urmează să fie expediate. în alt oraş sau în altă ară. Windows NT). etc. Acest proces se numeşte şi conectare la distan ă (remote login). Procedura de conectare la computerul gazdă depinde de tipul de acces Internet. Comunicarea se 4 . prin transmiterea electronică a mesajelor de la un calculator la altul. News este serviciul de ştiri. După conectare pot apărea instruc iuni sau meniuri sau se pot utiliza comenzi ale sistemului de operare de pe maşina respectivă (UNIX. monitorul afişând mesajele computerului gazdă. corp (body) – mesajul propriuzis. Un grup de ştiri (newsgroup) este un grup de utilizatori Internet care discută despre acelaşi subiect. Scrisoarea elctronică este formată dintr-un mesaj căruia i se pot ataşa imagini şi sunete. localizat în cealaltă cameră.Tutorial HTML taxă simbolică. Upgrades & Patches – noi variante ale unor programe sau softuri corectate.

filme video şi legături hipertext către alte resurse de pe Internet. 5 . italic text. prin stabilirea unor legături între informa ii şi nu în ultimul rând. Este un mecanism care foloseşte conceptul hipermedia pentru a lega o colec ie de zeci de milioane de documente cu informa ii. Articolele sunt stocate pe servere de ştiri. pauze de paragraf şi liste numerotate. titluri îngroşate. Aceste coduri permit ca pagina de web să aibă particularită i cum ar fi: bold text.htm. sau *. Acesta prezintă două avantaje: în primul rând permite căutarea în întreg spa iul Internet şi uşurează căutarea. O pagină web este o unitate de informa ie. Informa ia este prezentată ca documente numite şi pagini de web. World Wide Web (în traducere adlitteram „pânză de păianjen întinsă în lumea întreagă”) sau prescurtat web. imagini. www sau w3 este cel mai important serviciu de informare şi documentare. ce sunt păstrate pe calculatoarele răspândite în toată lumea.html care au fost create utilizând limbajul HTML (HyperText Markup Language – Limbajul de Marcare a Hypertextului). fişiere cu extensia *. este re eaua UseNet. Pagina de web este transferată pe computerul utilizatorului prin HTTP (HyperText Transfer Protocol. Protocolul de acces la acest serviciu se numeşte NNTP(Network News Transfer Protocol). permite să fie create legături de la un item de informa ie la altul. ca cititor de ştiri se poate folosi aplica ia Microsoft Outlook Express. Serviciul se numeşte serviciu pentru re ele de ştiri sau serviciu pentru grupuri de ştiri. World Wide Web este o metodă (serviciu) de acces la informa ia stocată pe un calculator aflat oriunde în lume. HTML constă dintr-o serie de coduri standard (tag-uri) care se folosesc pentru a defini structura unei pagini de web. Pagina de web este creată utilizând limbajul HTML. Paginile de web con in texte. sunete. adică Protocolul de Transfer al HyperTextului).Tutorial HTML realizează prin intermediul unei re ele de ştiri (network news) care asigură accesul utilizatorului la o colec ie de articole organizate pe subiecte. Utilizatorul are nevoie de un program denumit cititor de ştiri (newsreader) cu care se poate abona la grupuri de ştiri. Cea mai importantă sursă de ştiri. un document disponibil prin www şi poate fi mai mare decât un ecran de calculator sau poate să fie tipărită pe mai mult de o foaie de hârtie.

una sau mai multe copii ale programului server. Cât timp calculatorul server nu func ionează. Este necesară instalarea unui software pentru a asigura accesul la un anumit tip de re ea. Ele furnizează un serviciu. Programele care asigură comunicarea. a mai multor copii ale programului server. adică emit o cerere de serviciu către un server şi aşteaptă răspunsul. Calculatoare server – calculatoarele pe care se depozitează informa ia. pentru ca blocările să fie rare.Tutorial HTML Pentru furnizarea serviciilor pe Internet se foloseşte modelul client – server: Calculatoare client – calculatoarele care au acces la informa ie. Programul server rămâne în execu ie atâta timp cât nu este întreruptă alimentarea cu energie electrică. în timp ce transmite către server apăsări de taste sau ac ionări cu mouse-ul ale unor obiecte de interfa ă. clientul interac ionează cu serverul şi aşteaptă răspunsul. Pentru unele categorii de servicii. va primi un mesaj de eroare. clientul se angajează într-o interac iune pe timp îndelungat. care vrea să stabilească o legătură pentru comunicare. Ele solicită un serviciu. 6 . Clientul foloseşte re eaua Internet pentru o comunicare cu serverul. şi trebuie să fie fiabil. Programe server – programe care oferă servicii. calculatorul pe care rulează programul server trebuie să aibă o putere mare de calcul pentru a permite rularea simultană. func ionează pe baza modelului client – server: Programe client – programe care contactează un serviciu. Comunicarea prin Internet se realizează întotdeauna între o pereche de programe. orice program client. Pentru o altă categorie de servicii. Calculatoarele care oferă un serviciu lansează automat în execu ie. atunci când este pornit. Pe aceste calculatoare trebuie instalat un software care să asigure accesul la un anumit tip de serviciu în re ea. cu viteză mare. adică primesc o cerere de serviciu. Clientul stabileşte comunicarea cu serverul şi apoi afişează con inutul datelor primite. execută serviciul şi transmit rezultatul către calculatorul solicitant. Din această cauză. Persoanele care doresc să folosească un serviciu al re elei Internet lansează în execu ie un program client.

2. URL reprezintă o adresare standard pentru o resursa Internet şi ajută utilizatorul să localizeze resursa. Identificatorul calculatorului care stochează resursa (host-ul sau gazda). Acesta se compune din : / – reprezintă directorul rădăcină. de exemplu o pagina de web. În acest scop se vor lansa mai multe copii ale programului care asigură serviciul. Calculatoarele care furnizează un anumit serviciu se numesc situri ale acelui serviciu. 3. ftp:// protocolul de transfer de fişiere. Există mai multe metode (protocoale) de acces la informa ia stocată pe un calculator conectat la Internet şi respectiv mai mul i identificatori de servicii (protocoale): http:// protocolul de transfer bazat pe hipertext. unde domeniu_internet reprezintă o ramură din structura arborescentă a internetului. o imagine. Cale_relativă/ – reprezintă calea relativă spre directorul în care se găseşte fişierul destina ie. calculatorul său devine nod în Internet şi utilizând protocolul TCP/IP va putea folosi diverse programe cu rol de client pentru a putea transfera informa ii de la alte calculatoare cu rol de server conectate la rândul lor la Internet. câte o copie pentru fiecare utilizator care a cerut acces la acel serviciu. iar un calculator care con ine o colec ie de pagini web se numeşte sit web.domeniu_internet. etc. Un URL (Uniform Resource Locator) identifică o resursă de pe Internet. file:// pentru accesul la fişierele stocate pe calculatorul local. Un singur calculator poate furniza servicii mai multor utilizatori. 7 . un calculator care permite copierea fişierelor cu protocol ftp se numeşte sit ftp. În acest mod. De exemplu. un catalog de bibliotecă. este format din: nume_calculator. cu ierarhia de la stânga la dreapta. Identificatorul serviciului (protocolului) Internet utilizat pentru accesarea resursei. numere şi semne de punctua ie şi concatenează trei elemente: 1. un utilizator trebuie să conecteze calculatorul său la una dintre subre elele precizate mai sus. URL ul este alcătuit din litere. Structura de bază a URL-ului este ierarhică. Orice resursă de pe Internet are un URL unic.Tutorial HTML Pentru a beneficia de facilită ile oferite de Internet. Identificatorul resursei (fişierului) pe calculatorul gazdă (server).

Tutorial HTML Nume_fişier – numele fişierului destina ie. #nume_ancoră – numele unei ancore definite în fişierul destina ie prin <a name=”nume_ancoră” >.edu. http://www. etc. sunete. Home Page (pagina gazdă) este o pagină din site-ul unei organiza ii care: 1. Aceste fişiere con in: text. Ancoră – anchor = punct de reper.html#ancora1 . a. Nu toate URL-urile au directoare şi nume de fişiere. unde http:// – identifică protocolul www.edu/library/catalog/guide. b. Terminologie web Pagină web.ro – identifică sistemul numit www din domeniul edu.exe Observa ie.ro /news/index. este o pagină de prezentare a organiza ei. care este parte a domeniului com resursa este în directorul numit freeware şi este programul program. Un URL poate fi Case sensitive (este important ce tip de litere folosim: mari sau mici).edu/library/catalog/GUIDE. ftp://ftp. 1.ro/news/index.company.edu.example.txt Notă.exe ne spune: protocolul de acces este ftp:// resursa este pe computerul ftp în domeniul company. numite şi pagini web. 2. Exemple. 8 . http://www. 2.txt http://www.com/freeware/program. filme. Pentru www sunt importante anumite fişiere speciale. acest ultim termen este corect pentru metoda de acces http://. De exemplu: 1.2. Fiecărui URL îi corespunde unui IP. programe. imagini. este în mod uzual prima pagină accesată din site.example. În orice calculator informa ia este stocată în unită i numite fişiere.html – reprezintă calea relativă spre fişier #ancora1 –reprezintă o ancoră în fişierul destina ie începând cu care se va afişa pagina în browser . Acestea au extensia htm sau html.

2.). imagini şi filme 3. filme. Hypertext este un text îmbogă it. Site web.). imagini. clientul solicită pagini web de la un site web. HTML este un limbaj care permite inserarea de: 1. VRML etc. sunete. Java. Hypertextul este stocat în fişiere având o extensie specială: htm sau html. Folosind această metodă pot fi eviden iate şi alte obiecte. cum sunt de exemplu sunetele şi imaginile. HTML. care nu sunt texte. Eviden ierea se face folosind numere. Serviciul www utilizează ca protocol de comunicare între client şi server http. etichete pentru formatarea textului şi încapsularea altor tipuri de informa ii (salturi rapide către alte resurse de informa ii. Folosind această metodă. două calculatoare folosesc un sistem de reguli ce formează un protocol. etc. stiluri diferite de caractere sau culori diferite. HTTP. Deci. Aşadar. O colec ie organizată de pagini web formează un site web. În www. Un server web este un calculator care adăposteşte un site web şi care este capabil să răspundă la cereri de pagini web din partea 9 . Hypermedia este o extensie a metodei hipertext.Tutorial HTML 3. Legături (link-uri) către alte pagini web aflate oriunde în lume 5. Httpd (HyperText Transfer Protocol Demon) este o aplica ie care se execută pe serverul web pentru a prelucra cererile de pagini web recep ionate de acesta de la clien i. oferă cel mai eficient mod de explorare a informa iilor aflate în site. Text 2. Formatele acceptate sunt fişierele gif şi jpeg. un hipertext con ine: 1. Server web. Pentru a comunica între ele. Indicatori de prezentare a informa iei 4. Textul eviden iat se numeşte hiperlegatură. Sunete. text obişnuit. Aplica ii (programe Javascript. prin care trimiterile se pot face şi la alte medii de prezentare a informa iei. Un fişier care con ine hipertext este scris într-un limbaj specific numit HTML. textele eviden iate dintr-un document reprezintă trimiteri la alte documente care con in informa ii suplimentare.

Pentru a putea răspunde permanent cererilor web. cablu. Un browser grafic permite utilizatorului să vadă imagini şi să utilizeze mouse-ul pentru hyperlegături. Un browser este un soft care oferă o interfa ă între utilizator şi serverul de web de pe Internet . Re eaua Internet dispune de mijloace de corec ie a erorilor de transmitere a pachetelor. Informa ia care circulă între calculatoare interconectate este încapsulată în pachete. TCP/IP. Un astfel de mijloc de dirijare a pachetelor este IP. Browser-ul contactează serverul şi transmite cererea de informa ie. apoi primeşte informa ia şi o afişează pe calculatorul clientului. etc. ini ialele denumirii din limba engleză Internet Service Provider. ISP. access prin linie închiriată. Pachet (packet). satelit etc. Un ISP este o firmă sau organiza ie care oferă access la Internet şi servicii conexe. Editarea fişierului HTML utilizând: un editor de texte obişnuit (Notepad. ADSL). pachetul este format din informa ia propriu-zisă şi informa iile de control care con in adresa destinatarului şi adresa expeditorului. Fiecare pachet are un expeditor şi un destinatar. Comutarea de pachete (packet switching) este cea mai răspândită tehnică folosită în transmiterea datelor în re ele de arie largă. Oracle Web Server. Crearea unei pagini web presupune: 1. Informa ia de control este memorată în antetul pachetului. radio. Ea se bazează pe separarea calculatoarelor după func ii: calculatoare cu functii de aplica ie şi calculatoare cu func ii de comunica ii. un calculator trebuie să ruleze permanent o aplica ia specială httpd. Serviciile oferite pot fi servicii de tranzit internet.) 10 . Word. telefon (ISDN. Wordpad. etc. Furnizorii de servicii Internet sunt deseori numi i ISP. înregistrare nume domeniu. Accesul la Internet poate fi pe linie comutată (dial-up). Cele mai întâlnite servere web sunt: Apache Server. Aşadar.Tutorial HTML unui client. Microsoft Web Server. Netscape Navigator şi HotJava. adică Protocolul de Control al Transferului). Re eaua Internet dispune de mijloace de dirijare a pachetelor astfel încât acestea să ajungă la destina ie. Tipuri de browser: Microsoft Internet Explorer. Un astfel de mijloc de corec ie este TCP (Transfer Control Protocol. Browser web.

Salvarea paginii web cu extensia html sau htm într-un site web 3. Pagina web astfel creată poate fi vizualizată prin intermediul unui browser. sunete. filme.Tutorial HTML un editor de texte dedicat (Netscape Composer) 2. etc. Rezolvarea referin elor con inute în pagina web (legături. imagini. 11 .). aplica ii Java.

La proiectarea unui astfel de site trebuie luate în considerare următoarele aspecte: Modul în care vor fi actualizate datele de pe site. Acest tip de site se 12 . Site-uri cu pagini dinamice – aceste site-uri necesită o actualizare periodică (zilnică sau săptămânală) a elementelor specifice. care poate fi actualizată în mod regulat prin intermediul unui program prioritar.1. Site-uri dezvoltate pe baze de date – aceste site-uri impun metode şi tehnici speciale pentru realizare. Se pot utiliza şi bazele de date Access sau File Maker. cel mai ieftin mijloc de a publica informa ii în Internet. necesitând actualizări frecvente ale elementelor componente. de exemplu). 3. Costurile opera iunilor de actualizare periodică. Tipuri de site-uri web Paginile HTML constituie în anumite condi ii. deoarece clien ii doresc transpunerea în format HTML a principalelor broşuri (pliante) de prezentare. 2. Site-uri cu pagini statice – se folosesc în special drept panouri publicitare.Tutorial HTML 2. Pagina ini ială trebuie să con ină informa ii cu caracter general şi introductiv precum şi hyperlegături la resursele corelate. Comunicarea cu clien ii (utilizatorii) care apelează un astfel de site. Crearea site–urilor web 2. pe paginile site-ului. ele se bazează pe o baza de date (Oracle. Se mai numesc şi “ brochureware” . O pagină proiectată corespunzător con ine butoane de navigare interne. În aceste condi ii se poate lua în considerare şi folosirea unui autoreponder pus la dispozi ie de către ISP. înştiin ându-l astfel de primirea mesajului transmis şi mul umindu-i pentru vizită. Home page (pagina ini ială) reprezintă un document hipertext (HTML) care serveşte ca punct de intrare ini ial într-un web. În felul acesta se va transmite automat un mesaj de răspuns vizitatorului site-ului. Un asemenea tip de sit este relativ uşor şi ieftin de construit. Se administrează extrem de greu. există patru tipuri de site-uri web: 1. care ajută utilizatorul să se deplaseze printre numeroasele documente la care are acces. Practic. se poate realiza prin inserarea de formulare de e-mail.

Magazine virtuale – acest tip de site este cel mai complicat şi mai greu de utilizat. cu ajutorul căr ilor de credit sau a banilor virtuali (electronic cash). Aceste companii asigură în mod frecvent consultan ă. Pentru realizarea site-urilor web. Analiza efectuată de specialist trebuie să stabilească în primul rând următoarele elemente: Este nevoie de un site web? Ce tip de site este necesar? Care este suma disponibilă de alocat pentru realizarea site-ului? Care este cel mai indicat designer? În cât timp se poate realiza? Ce browser se preferă? Cât de rapid se pot încărca paginile? Pe ce motoare de căutare va fi listat site-ul? Ce platformă sistem va fi utilizată? Companiile de design web înseamnă de obicei mai mult decât o mâna de oameni. au fost realizate o mul ime de instrumente software. la servicii care adaugă elemente de finisare.2. pentru o persoană fizică sau o organiza ie. care se ocupă de partea grafică a unui site. Astfel este necesar să se efectueze o analiză a oportunită ii realizării unui site. 2.Tutorial HTML recomandă pentru activită i cu volum important de informa ii ce trebuie actualizat la intervale regulate de timp. precum şi o parte din serviciile necesare pentru realizarea unui 13 . 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 sa achizi ioneze în siguran ă produse sau servicii on line. la cele de nivel înalt pentru construirea aplica iilor bazate pe web. Etapele de realizare a unui site Existen a unui site web reprezintă în prezent cel mai modern şi eficient mijloc de prezentare şi de activitate în Internet. începând cu cele mai simple de tip WYSIWYG (what-you-see-is-what-you-get). Procesarea căr ilor de credit este partea cea mai dificilă în dezvoltarea unui astfel de site. În general se recomandă beneficiarilor să apeleze la o firmă de specialitate pentru realizarea unui site web. 4. dând un aspect deosebit de profesional site-ului.

imaginile de fundal. Solaris 2. Este important pentru proiectant ca site-ul să func ioneze sub ambele browsere. II. Se recomandă ca testarea să se facă cu ambele browsere. Găzduire (Hosting) IV. Această decizie este importantă deoarece de ea depinde fiabilitatea solicitudinii (răspunsului) site-ului la cerin ele clien ilor. Crearea paginilor web se poate realiza în două moduri. ci şi crearea oricăror programe necesare (de exemplu. Proiectare (Design) Proiectarea. Administrare. Cu ajutorul programelor de grafica. Astfel de programe ce pot fi utilizate sunt: Paint Shop Pro sau Adobe Photo-Shop. se creează/editează. Crearea manuală a paginilor web se poate realiza numai de către specialişti. nu înseamnă numai partea de concep ie grafică a paginilor web. Programe de grafică. pentru legarea la o bază de date) sau de formulare folosite pentru colectarea de informa ii de la utilizatorii (vizitatorii) site-ului. Manual. în fiecare moment şi de scriere a tag-urilor HTML. Unix. Browser-ul web este necesar pentru testarea a ceea ce se ob ine. Promovare (Marketing) III. 2. La proiectarea unui site este foarte important alegerea platformei (sistem de operare) pentru site-ul web. Linux.1. figurile. Se pot avea în vedere sistemele de operare: Microsoft Windows NT. Realizarea manuală presupune existen a următoarelor instrumente: Browser de web. Pentru crearea unui site performant este necesar să se parcurgă următoarele etape: I. 14 . scriind efectiv tag-urile HTML. butoanele. Proiectare (Design). şi anume: 1. Novell Netware. precum şi a volumului de muncă ce trebuie investit pentru a-l men ine în func iune.2.Tutorial HTML site. desenele etc. ce cunosc limbajul HTML. Microsoft Internet Explorer şi Netscape Communicator.6 şi 7.

Tutorial HTML Programe de editare text. Programul de editare text este utilizat pentru scrierea efectivă a tag-urilor HTML, folosind comenzi Visual Basic. Programe ce pot fi utilizate pentru scrierea tag-urilor HTML sunt: Notepad, WordPad Plus. Principalul avantaj al metodei manuale constă în faptul, că pagina HTML este exact aşa cum s-a dorit. Se poate introduce astfel, orice tag, cu orice atribut. Dezavantajul metodei constă în principal, în faptul că proiectantul trebuie să cunoască bine limbajul HTML, fiind necesară o documenta ie de specialitate. 2. Asistat, cu ajutorul unor programe speciale. Proiectantul poate utiliza pentru realizarea site-ului unul din editoarele WYSIWYG, ce dispune de un ansamblu de instrumente de care avem nevoie pentru a construi un site profesional. La realizarea site-urilor profesionale de tip aplica ii on-line, se pot utiliza pachete de programe ce asigura o mul ime de op iuni şi facilită i de programare. Utilizarea acestor programe necesită cunoaşterea tehnicii de programare orientată obiect. În modul asistat sunt necesare următoarele categorii de programe: Browsere de web (identic cu metoda manuală). Programe de editare vizuală a paginilor HTML. În acest caz se poate folosi programul Microsoft Word (Office 97 sau 2000) sau solu ii integrate care con in browser şi editor vizual. Programele din categoria solu ii integrate pun la dispozi ia proiectan ilor, wizard-uri (asisten i) şi şabloane. Important este faptul că cu ajutorul acestor programe specializate, se pot crea propriile machete de proiectare, elemente interactive şi legăturile la bazele de date existente. La ora actuala, în clasamentul celor mai performante instrumente de editare site-uri de tip WYSIWYG sunt următoarele: Microsoft FrontPage 2000, Adobe PageMil 3.0, Macromedia DreamWeaver 2, HomePage 3.0, HotMetal PRo 5.0, NetObjects Fusian 4.0, VisualPage 2.0. Programul Microsoft FrontPage 2000 dispune de asisten i pentru construirea tipurilor obişnuite de site-uri (de exemplu: Corporate
15

Tutorial HTML Presence ), şi modele predefinite, proiectate astfel, încât să confere site-ului un aspect plăcut şi un con inut consistent. Acest program asigură proiectantului şi posibilitatea creării unei pagini, care lucrează cu baza de date Microsoft SQL. Celelalte pachete de programe, indicate mai sus, în special Macromedia DreamWeaver2, asigură o mul ime de facilită i pentru realizarea unei prezen e on-line, mai sofisticate, a site-ului. O mul ime de func ii ale acestor programe, se bazează pe suportul extins pentru Dynamic HTML (DHTML). Astfel, se poate realiza pozi ionarea obiectelor, cum ar fi texte sau imagini, cu o precizie de pixel, folosind fie Cascading Style Sheets (CSS), fie tabele. Componentele DHTLM, permit adăugarea cu uşurin ă a efectelor speciale şi a anima iei. Majoritatea acestor programe suportă şi formate obişnuite pentru anima ie (Macromedia Flash and Shockwave), formate audio şi video streaming. În concluzie, instrumentele moderne de creare a paginilor web sunt mai mult decât utilitare pentru crearea şi între inerea unui site web; sunt aplica ii productive care se pot folosi regulat pentru proiectarea, reproiectarea şi între inerea unui site. Programe ce asigură facilită i de programare. Aceste pachete de programe asigură construirea aplica iilor on-line fără să fie nevoie să se apeleze la o echipă de programatori profesionişti Java sau C++. La ora actuală, în clasamentul celor mai performante programe ce asistă utilizatorul pentru realizarea unei aplica ii web sunt următoarele: Allaire ColdFusion 4.0, Microsoft Visual Studio 6.0 Enterprise, Oracle Developer 6.0, SilverStream 2.5, Sun NetDynamics 5.0 Programe de grafică (identic cu metoda manuală).

2.2.2. Promovarea site-ului (Marketing)
În general, companiile care se ocupă cu dezvoltarea site-urilor web, se ocupă şi de promovarea acestuia. Promovarea site-ului prin bannere publicitare şi poştă electronică, constituie o metodă eficientă în creşterea traficului de acces la site-ul respectiv.
16

Tutorial HTML Un prim pas în promovarea unui site este înregistrarea lui pe cele mai importante motoare de căutare: Yahoo, Altavista, Excite, Infoseek, Lycos, webCrawler, HotBot şi Magellan, acestea fiind în general primele locuri către care se îndreaptă utilizatorii când caută ceva pe Internet. O tactică promo ională actuală este schimbul de bannere, adică afişarea reclamei site-ului dumneavoastră pe un alt site, în schimbul includerii unui banner de reclamă pe propriul site. Prin prezen a acestor bannere site-ul dumneavoastră poate arata mai profesional, putând atrage vizitatori, care altfel nu l-ar fi vizitat. În cadrul activită ii de promovare, se pot utiliza instrumente de urmărire a traficului ob inânduse informa ii deosebit de utile beneficiarului (proprietarul site-ului). Pentru promovarea unui site web prin intermediul bannerelor se pot utiliza următoarele instrumente: HyperBanner (www.hyperbanner.com). Dacă dorim atragerea unei clientele interna ionale spre site-ul nostru web, atunci alegerea cea mai bună este HyperBanner. Este singurul serviciu care oferă bannere din alte ări, rulabile local. HyperBanner permite afişarea simultană a mai multor bannere şi oferă statistici corespunzătoare acestora, pentru o mai bună apreciere a eficien ei lor. De altfel, HyperBanner este singurul care trimite rapoarte prin e-mail membrilor săi, celelalte necesitând vizitarea siturilor proprii pentru a vedea datele. HyperBanner este singurul serviciu ce oferă grafice de performan ă, deşi acestea nu mai sunt trimise prin e-mail, fiind necesară vizitarea sit-ului. MSN LinkExchange (www.linkexchange.com). Cumpărăturile făcute de la o singură sursă sunt valoroase dacă ne oferă produse de calitate. Acesta este cazul lui MSN LinkExchange, care ne oferă o gamă largă de servicii inestimabile, accesibile şi la subiect. LinkExchange oferă două servicii de listă de coresponden ă. Unul este ListBot, care con ine reclame şi permite un număr nelimitat de mesaje până la 100 Kb fiecare. Celalalt este ListBot Gold, fără reclame, până la un trafic de 5000 de mesaje pe lună, fiecare mesaj putând avea până la 250 Kb. SmartAge (www.smartpages.com). SmartAge permite schimbarea banner-ului după dorin ă sau deschiderea mai multor conturi. La raportări, SmartAge este de neînvins. Oferă statistici de performan ă pentru toate
17

2. Cat de complex este site-ul? 2.Tutorial HTML categoriile la care figurează banner-ul propriu. adică conexiune în conformitate cu traficul preconizat şi personal specializat.com). de care se vor bucura vânzătorii prin e-mail direct. atunci când se prezintă pe web. Alegerea numelui site-ului are importan ă pentru proprietar. Investi ia pentru un server propriu. Pentru găsirea unei gazde (host) a site-ului. Care este traficul estimat? Serviciul de Hosting vă va taxa în func ie de răspunsul la cele două întrebări de mai sus. numită Hitometer. webSite Garage (www. care necesită actualizări frecvente şi se apreciază a sus ine un trafic important. pentru suma de 150 $ fără TVA. lipsindu-i programul de schimb de bannere şi posibilitatea comer ului electronic. Nu este aşa de bogat în caracteristici ca LinkExchange sau SmartAge. Pentru începători oferă o unealtă indispensabilă sitului web.3. Mai pune la dispozi ie un program de liste de coresponden ă. Cea mai des utilizată solu ie este plasarea întregului site pe serverul unui ISP. necesară analizei traficului. Răspunsul la cele două întrebări are ca scop determinarea mărimii spa iului necesar pe hard disc şi volumul transferului de date. Majoritatea ISP-iştilor înregistrează site-ul pentru beneficiar. Cu siguran ă. Acesta oferă două avantaje importante fa ă de ListBot de la LinkExchange: poate personaliza e-mail-urile şi poate urmări rata răspunsurilor la mesajele noastre. La 18 . este viabilă pentru un site complex. oferă mai multe servicii utile şi unice. cu numele dorit de acesta. webSite Garage are deficien ele sale.website. webSite Garage are şi un serviciu de listă de coresponden ă cu taxă. conform tarifului perceput de Re eaua Na ională de calculatoare. Gazduirea site-ului. gestionarul spa iului web din România. 2. trebuie în primul rând să răspunde i la două întrebări: 1. numit webSite Post Office Commercial. putând astfel analiza care categorie asigură cele mai bune rezultate. dar în compensa ie. În concluzie se poate spune că programul de bannere şi integrarea serviciilor de la ter i furnizori sunt trăsăturile cele mai valoroase din SmartAge.

există o ofertă pentru acest serviciu. ca proiectantul site-ului să pună la dispozi ia beneficiarului. În general. 2.4. întreg pachetul de servicii pe care un ISP îl oferă. La ora actuală. FTP etc. La adresa: http://members.shtml se găseşte lista domeniilor ocupate în acel moment. Site-uri fără taxă. astfel încât să se poată actualiza site-ul fără să se cunoască nimic despre HTML. Administrarea site-ului Tipul de site ales. impune o anumită frecven ă şi anumite metode pentru actualizările specifice. ca beneficiarul să cumpere. un instrument de actualizare automată a paginilor web.ro/new/welcome.2. în baza unui contract.com/Ijpsp1/sites. Este posibil.rnc.html se poate lista un număr de siteuri care oferă spa iu gratuit sau ieftin pentru paginile web. 19 . Acest lucru se recomandă a fi înscris în contract.tripad. este mai uşor şi mai convenabil.Tutorial HTML adresa: http://www. Beneficiarul (proprietarul) site-ului poate să apeleze în acest sens la persoanele care au proiectat site-ul.

Crearea sa implică. La prima vedere.Tutorial HTML 3. preponderent cu clien ii (efectivi şi poten iali) şi cu concuren ii săi. nu dublează notorietatea organiza iei şi nu îi triplează vânzările. În primul caz este vorba despre furnizarea unui volum de informa ii atractive şi suficiente pentru a determina o reac ie favorabilă a clien ilor: cumpărarea sau comandarea produselor (serviciilor) promovate sau cel pu in solicitarea de informa ii suplimentare despre acestea. pentru a limita sau elimina anumite situa ii tactice nefavorabile. Site-ul web al organiza iei trebuie să fie perceput astfel ca un instrument de marketing on-line. Microsoft FrontPage Express (un program specializat în crearea de pagini web integrat în cadrul Internet Explorer) sau Netscape Composer (un alt program specializat integrat în cadrul Netscape Communicator) au rezolvat problema. în general şi în special din punct de vedere al comunica iei de marketing. sau pentru că. cu caracter strategic. crearea şi dezvoltarea unui site web trebuie însă să aibă ca suport existen a unor nevoi specifice. nu expediază produse la beneficiarul acestora. nu stabileşte pre uri. crearea şi dezvoltarea unui site web al organiza iei reprezintă o problemă deja rezolvată. 20 . în ultimă instan ă. din partea organiza iei. Este important de re inut în acest context că un site web nu face minuni peste noapte în domeniul marketingului: în general. În al doilea caz este vorba despre diferen ierea organiza iei în raport cu competitorii săi. concrete. integrarea şi utilizarea acestuia în comunica ia de marketing a organiza iei. Principiile proiectării unui site web Oportunitatea creării unui site web al organiza iei. Acesta nu poate fi creat pentru a răspunde unor necesită i de moment. al acesteia. Într-adevăr. legate în cea mai mare parte de modul în care se desfăşoară comunica ia de marketing a organiza iei. este de bon-ton pentru "o firmă care se respectă". Din punct de vedere al marketingului. angajamentul clar pentru: 1. din punct de vedere strict tehnic. crearea acestuia nu mai constituie un obstacol în fa a organiza iilor care doresc acest lucru. acesta nu creează produse. Site-ul web poate contribui semnificativ la maniera în care organiza ia realizează schimbul de informa ii cu mediul său de marketing.

eventual. link-uri 21 . alocarea unor resurse specifice (tehnologie.Tutorial HTML 2. imagini. paginile web sunt create preponderent cu ajutorul limbajului HTML reprezentând în esen ă un ansamblu de instruc iuni folosite pentru a construi şi reprezenta texte. vânzării prin intermediul Internetului a produselor şi serviciilor organiza iei? În ce măsură produsele (serviciile) pentru care urmează să fie creat siteul pot fi promovate adecvat utilizând Internetul şi. site-ul web? Dispune organiza ia de capacitatea logistică necesară pentru a expedia (presta) efectiv produsele (serviciile) promovate prin intermediul site-ului web? Care va fi efectul generat asupra vânzărilor produselor (serviciilor) prin crearea site-ului web? Care va fi efectul generat asupra imaginii organiza iei prin crearea siteului web? Ce este un site web? o colec ie de pagini web construite în raport cu o anumită structură predefinită şi având ca obiective principale crearea suportului pentru realizarea comunica iei de marketing a organiza iei în spa iul virtual şi/sau crearea platformei pentru desfăşurarea comer ului electronic cu produsele şi/sau serviciile organiza iei site-urile web reprezintă la ora actuală forma cea mai comună de proiectare şi desfăşurare a marketingului on-line din punct de vedere tehnic. bani. îl utilizează pentru a ob ine informa ii sau a cumpăra diferite produse sau servicii? Este pia a suficient de mare din punct de vedere al capacită ii sale pentru a asigura rentabilitatea promovării şi. respectiv. ca instrument specific. oameni şi timp) pentru actualizarea şi extinderea con inutului său. Iată câteva întrebări ale căror răspunsuri pot orienta organiza ia în încercarea sa de a crea un site web: Este pia a suficient de largă din punct de vedere al ariei pentru a presupune acoperirea acesteia şi prin intermediul Internetului? În ce măsură consumatorul / utilizatorul poten ial are acces la Internet şi.

Utilizarea acesteia conferă mai multă claritate şi concizie în prezentarea şi urmărirea informa iilor incluse în paginile web. informa iile de contact – numele. Structura unui site web cuprinde: Pagina de introducere Paginile de produs (serviciu) Formularul de comandă Chestionarul 22 . lista – reprezintă nu atât un element de con inut cât mai ales un mod de prezentare (formatare) care poate fi utilizat pentru structurarea şi prezentarea informa iilor incluse în paginile web. adresă de email.) ale persoanei (persoanelor) care au creat. etc. sunete sau alte elemente de con inut. prenumele şi elementele de localizare (adresă poştală. imagini. de obicei în combina ie astfel încât efectul asupra publicului să fie maxim. elemente grafice. hyperlink-urile – oferă posibilitatea urmăririi doar a acelor sec iuni de care este interesat "navigatorul" (în cadrul aceleiaşi pagini). Acestea sunt: titlul paginii – apare în bara de titlu a programului de navigare pe Internet utilizat şi serveşte atât la identificarea paginii şi a con inutului acesteia cât şi pentru facilitarea căutării acesteia în spa iul virtual. alte pagini (având un con inut similar sau asociat paginii văzute ini ial) sau chiar alte site-uri având legătură directă cu con inutul informa iilor prezentate în pagina accesată (vizualizată) ini ial. administrează sau de in pagina accesată. subtitlurile (titlurile interne) – servesc la structurarea logică a con inutului paginii în sec iuni distincte facilitând parcurgerea acesteia în raport cu interesul celui care o vizualizează. număr de telefon sau fax.Tutorial HTML sau orice alte componente ale unei pagini web Structura unei pagini web cuprinde elementele care se regăsesc cel mai frecvent în con inutul unei pagini web. Pentru prezentarea acestora pot fi utilizate diferite texte. con inutul paginii – cuprinde informa iile pe care organiza ia inten ionează să le transmită publicului vizat.

interesează şi condi iile în care poate fi ob inut un spa iu suplimentar pentru stocarea de fişiere ale organiza iei (texte. etc. sunete. reparti ia acestora pe intervale temporale (ore.) şi identificarea acestora (de exemplu identificarea motoarelor de căutare de pe care a fost accesat site-ul) 23 . nu este suficientă cunoaşterea volumului spa iului disponibil ci şi "chiria" plătită pentru acesta (exprimată uzual în dolari/MB). cu atât este necesară o viteză de transfer mai mare şi absen a oricăror limitări în transferul acestora urmărirea traficului – este un element-cheie în evaluarea eficien ei utilizării site-ului web ca instrument de marketing on-line. imagini. etc.Tutorial HTML Pagina de noută i Newsletterul Pagina FAQ Alegerea unui "web designer" se face în func ie de: problema-cheie: să fie din interiorul firmei sau din exteriorul acesteia? În raport cu ce elemente va fi selectat web designerul organiza iei? Pre uri şi tarife Reputa ia profesională Recomandările unor clien i ai acestuia Criteriile de selec ie pentru alegerea unui nume de domeniu (server-gazdă pentru site-ul organiza iei) sunt: stocarea de date – cu cât spa iul oferit de furnizorul de Internet este mai mare cu atât probabilitatea de selec ie a acestuia creşte). interesează existen a unor facilită i cum ar fi contorizarea numărului de accesări. zile. există limite tehnice sau contractuale referitoare la aceste aspecte? Cu cât cantitatea de informa ii care se doreşte a fi disponibilizată pentru publicul vizat este mai mare. de asemenea.) transmiterea de date – elementele de referin ă sunt reprezentate de viteza de transfer de date şi de cantitatea de date apte a fi transmise către cel care accesează site-ul organiza iei.

urmărind ca obiectiv principal (sau. Pentru a beneficia de impactul generat de crearea. Simpla existen ă a unei colec ii de pagini web undeva în spa iul virtual nu reprezintă prea mult din punct de vedere al marketingului on-line. crearea de trafic către site sau ambele concomitent. consum sau utilizare 24 . Alegerea serverului-gazdă este rezultatul unei analize comparative a facilită ilor oferite de către diferi ii furnizori avu i în vedere şi a facilită ilor vizate ce către organiza ie. Exemple de ac iuni de marketing care pot fi avute în vedere pentru promovarea site-ului web: 1. secundar) informarea publicului despre existen a site-ului. Ac iuni de marketing on-line campanii de direct e-mail. în anumite cazuri. Cu cât site-ul este mai accesibil.Tutorial HTML reexpedierea poştei electronice – permite retransmiterea tuturor mesajelor de poştă electronică de către administratorul (de inătorul) server-ului gazdă către organiza ia care a închiriat spa iu pe acesta într-un cont de poştă electronică specificat de aceasta natura conexiunii la Internet a serverului-gazdă – tipul conexiunii şi viteza de transfer sunt esen iale pentru "vizibilitatea" site-ului web al organiza iei în spa iul virtual. cu atât eficien a şi utilitatea sa vor fi mai mari pentru organiza ie. transmiterea de e-mail-uri către publicul vizat. Promovarea site-ului web. dezvoltarea şi utilizarea site-ului web al organiza iei este necesară îndeplinirea a cel pu in două cerin e: site-ul să fie cunoscut de către publicul vizat site-ul să fie accesat de către publicul interesat Respectarea acestor cerin e presupune desfăşurarea unor ac iuni (campanii) de marketing distincte. poten ial interesat în raport cu existen a şi con inutul site-ului web al organiza iei inserarea unor informa ii minimale privind site-ul şi link-ul de acces la acesta pe principalele motoare de căutare pe Internet inserarea unor bannere publicitare pe motoarele de căutare pe Internet cele mai utilizate sau pe site-urile unor organiza ii cu ale căror produse sau servicii există un anumit grad de asociere în cumpărare. atât on-line cât şi off-line.

ro. radio. afişaj) includerea unor informa ii minimale privind existen a site-ului web în mesajele publicitare specifice comunica iei tradi ionale (de exemplu.Tutorial HTML inserarea unor link-uri de acces la site-ul web al organiza iei incluse în cele mai importante site-uri de resurse existente în spa iul virtual 2. o conferin ă de presă desfăşurată cu ocazia lansării site-ului sau publicarea unor articole referitoare la con inutul site-ului în publica iile de specialitate sau în rubricile specializate existente în diferitele publica ii cotidiene sau periodice) De foarte multe ori. televiziune.organiza ia. Ac iuni de marketing off-line desfăşurarea unor campanii de publicitate urmărind promovarea siteului web al organiza iei în mediile tradi ionale (presă. www. întrun anun publicitar tipărit) organizarea unor ac iuni de rela ii publice ocazionate de lansarea şi dezvoltarea site-ului web al organiza iei (de exemplu. 25 . Cele mai bune exemple în acest sens le constituie: organizarea şi desfăşurarea unor concursuri cu premii care răsplătesc cunoaşterea şi accesarea site-ului web al organiza iei sau participarea la un târg specializat pe tehnologia informa iei sau chiar Internet cu un stand cuprinzând mai multe posturi de lucru de la care poate fi accesat site-ul web al organiza iei. promovarea site-ului web presupune integrarea ac iunilor de marketing on-line şi off-line în vederea atingerii celor două obiective. men ionarea adresei Internet a organiza iei.

SGML este un standard interna ional (ISO-8879) aprobat în 1986. HTTP şi URL. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format în altul precum şi interogarea unor baze de date înglobând aceste documente. o aşa-numită aplica ie a acestuia. structurarea formatării şi legăturile hypertext. erau necesare câteva condi ii esen iale: independen a de platformă. limbajul permitea oarece control asupra fonturilor dar nu permitea inserarea graficii. posibilită i hypertext şi structurarea documentelor. grafică şi culori aidoma). limbajul părea scăpat de sub control. ceea ce uşurează mult navigarea între păr ile componente ale unui document sau între multiple documente. Născut în urmă cu aproximativ 30 de ani. frază. fac din el un foarte bun format pentru documentele Internet şi Web. în 1994.Tutorial HTML 4. În 1993. limbajul hypertext a evoluat încet. În primii ani de evolu ie HTML a demarat lent în principal pentru că îi lipseau posibilită ile de a reda publica ii electronice profesionale. NCSA a îmbogă it limbajul pentru a permite inserarea graficii şi a construit primul navigator grafic: Mosaic. într-o tentativă de a rezolva unele probleme ivite la transportul documentelor între diferite computere. standard ce descrie formatul primar în care documentele sunt distribuite şi văzute pe Web. imagine sau element al documentului văzut de un utilizator (client) poate face referin ă la un alt document sau chiar la paragrafe din interiorul aceluiaşi document. Multe din trăsăturile lui. Au urmat apoi contribu ii ad-hoc ale diverselor firme care au adus tot felul de adăugiri limbajului HTML astfel încât. Hypertext se traduce prin faptul că orice cuvânt. HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language). Prin urmare. lucru vital pentru o audien ă numeroasă şi extrem de variată. Independen a de platformă semnifică faptul că un document poate fi afişat în mod asemănător (sau aproape identic) de computere diferite (deci cu font. ale WWW este HTML. Bazele proiectării site-urilor Web Unul din primele elemente. Primele specifica ii de bază ale Web-ului au fost HTML. Urmarea a fost că la prima conferin ă WWW de la Geneva (Elve ia) s-a 26 . fundamentale de altfel. cum ar fi independen a fa ă de platformă. HTML a fost dezvoltat ini ial de fizicianul şi informaticianul Tim Berners-Lee la CERN în 1989. HTML a fost ini ial văzut ca o posibilitate pentru fizicienii care utilizează computere diferite să schimbe între ei informa ie prin mijlocirea Internetului.

0. 27 .2. aceste extensii au devenit standarde de facto adoptate de autorii de browsere. printre care şi HTML 2. lucru care s-a concretizat în HTML 2. 3. Orice standard îşi începe aventura ca W3C Note. nu. Stadiile prin care trece un standard elaborat de W3C sunt: 1. votul nu este obligatoriu. În momentul în care se ob ine o sus inere şi un consens suficient de larg.0 si. 4.1. nu. 4. putându-se vota în 4 moduri diferite: da. odată standardizat.01. Standardizarea HTML Standardul oficial HTML este dat de W3C (World Wide Web Consortium). Este motivul pentru care acelaşi document HTML apare uşor diferit când este privit utilizând navigatoare diferite. sub rezerva unor îmbunătă iri. În acest moment este publicat ca propunere (Working Draft) şi în acest stadiu oricine poate face comentarii. cel mai recent. În unele cazuri (cum ar fi tag-ul Netscape). 2. HTML 4. Urmează o perioadă de 6 săptămâni în care to i membrii W3C au şansa să voteze această propunere de recomandare. specifica ia trebuie abandonata. el "citeşte" documentul în căutarea tag-urilor HTML. 5. HTML 3.0. Cînd navigatorul încarcă un document HTML. HTML 4. limbajul a putut fi apoi extins întrun mod mai controlat la alte nivele. Importan a ac iunii acestui grup constă în faptul că. W3C a enun at câteva versiuni ale specifica iei HTML. directorul W3C decide dacă specifica ia este gata să devină propunere oficială de recomandare (Proposed Recommendation). formatează textul şi imaginea şi le afişează pe ecran. da. De aici este preluat de către un grup particular de lucru (Working Group) şi este discutat până când se ajunge la un consens. care este afiliat la IETF (Internet Engineering Task Force). În acelaşi timp. au dezvoltat adesea propriile "extensii" HTML în afara procesului standard şi le-au incorporat în browserele lor.Tutorial HTML constituit un grup de specialişti (HTML Working Group) a cărui primă misiune a fost formalizarea HTML. HTML 3. autorii de browsere cum ar fi Netscape şi Microsoft.0. până când anumite sarcini nu sunt îndeplinite.

etc. când pentru realizarea publica iilor electronice există multe alte tehnologii? Primul motiv este simplitatea. Versiunea 3.01.inclusiv cele în mod text.0. Dar de ce a fost preferat HTML pentru publica ii pe Web. Versiunea 2.0. care era proiectată să reflecte şi să standardizeze practicile acceptate la scară largă. Rezultă de aici o compresie bună. Specifica ia HTML 3. În Mai 1996. folosi i tag-urile HTML 2. astfel că fiecare vot trebuie să fie un da fără rezerve. multe nu erau încă oficializate. prin adăugarea unor facilită i precum tabelele şi un mai mare control asupra textului din jurul imaginilor.2. HTML 2. tag-uri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât tag-urile "oficiale". este standardul pe care ar trebui să-l suporte toate browserele curente . regăsească on-line informa ii prin intermediul hyperlink-urilor accesate printr-un simplu click de mouse 28 .0.. Deşi unele din noută ile HTML 3.0 şi HTML 4. Charta W3C stipulează necesitatea ob inerii consensului complet. suport pentru legături hypertext şi uşurin a în a scrie navigatoare pentru vizualizarea documentelor. Revolutia HTML 4. Limbajul HTML dă proiectan ilor de pagini web posibilitatea să: publice documente cu headere.0 erau deja folosite de autorii de browsere. W3C a scos pe pia ă specifica ia HTML 3.0 reflectă concep ia originală a HTML ca un limbaj de marcare independent de obiectele existente.2 include tag-urile HTML 3. HTML 2. în loc de a specifica exact cum ar trebui să arate acestea. deci nu mai este un standard oficial în prezent. a încercat să dezvolte HTML 2.0 este larg utilizat şi au fost deja publicate specifica iile HTML 4. texte.01. elaborat în Iunie 1994. focalizându-se pe aşezarea lor în pagină. enun ată în 1995. liste.0 care erau adoptate de autorii de browsere precum Netscape şi Microsoft plus noi extensii HTML. specifica ia trebuie aprobată în final de Director şi se publică sub forma unui standard (W3C Recommendation).. HTML 4. 7.0. Al doilea este că permite formatarea textului ASCII cu tag-uri în format ASCII. Dacă to i paşii anteriori au fost îndeplini i. Deci HTML 3.0 a expirat repede. În unele cazuri. tabele.0! Versiunea 3. fotografii.0. Specifica ia HTML 3. În acest moment.Tutorial HTML 6.2. Daca dori i să fi i siguri că to i vizitatorii vor vedea paginile aşa cum trebuie.

cereri de bunuri. scrierea codului HTML realizânduse de către aceste editoare.01 fa ă de versiunea 3. proiectan ii pot ob ine mult mai uşor independen a de periferic/ computer/ platformă hard-soft. 29 . Elementul esen ial diferit adus de versiunea 4. permi ând documentului însuşi să se adapteze mai uşor noilor tehnologii (cum ar fi. În cazul editoarelor clasice se pot folosi editoare de text ASCII..0 şi mai ales 4. este posibilitatea separării structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Pentru realizarea unui document HTML se pot utiliza editoare clasice sau editoare de tipul WYSIWYG. proiectarea formularelor pentru a se realiza tranzac ii prin servicii de la distan ă. clipuri video.. etc.Tutorial HTML proiecteze formulare pentru realizarea tranzac iilor cu servere aflate la distan ă. rezervări. separarea con inutului de partea de prezentare permite modificarea înfă işării chiar a unui întreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul). editoare HTML sau convertoare HTML. acestea con in: titlu.. de exemplu. cititoarele braille. lucru care a facut HTML-ul atît de popular. Utilizând limbajul HTML pentru structurarea unui document şi style sheet-urile pentru a stiliza prezentarea acestuia. Experien a a demonstrat că o astfel de abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme şi probleme. În concluzie. accentul se pune pe aspectul grafic al paginii web. tabele. facilitând şi o între inere ulterioară şi modificări mult mai uşoare. browserele capabile să vorbească. regăsirea on-line a informa iei prin legături hypertext. texte. În plus. imagini etc. clipuri sonore şi alte aplica ii în document. pentru căutări de informa ie sau pentru activită i specifice comer ului includă foi de calcul tabelar. liste.). Un document cu o structură complexă poate fi prezentat în diferite moduri pe medii diferite. În cazul editoarelor WYSIWYG. sunete şi alte aplica ii direct în documente. includerea de clipuri video.2. HTML oferă următoarele posibilită i: publicarea documentelor on-line. pentru căutarea de informa ie.

Exemplu: http://www. Instruc iunile sunt denumite tag-uri HTML (marcatori. Netscape Navigator. Browsere cunoscute: Internet Explorer. Toate paginile web con in instruc iuni (pentru afisaj) – spre norocul nostru acestea nu trebuie compilate.2. O re ea de calulatoare mondială. Exemplu: <p>Acesta este un paragraf si este un tag foarte important in standardul HTML </p>. O cerere standard către un server con ine o adresă. Standardele web sunt realizate de: Un grup nonguvernamental denumit W3C. W3C stabileşte specifica iile pentru standardele web. W3C înseamnă World Wide Web Consortium. CSS and XML.. Opera. Paginile web sunt fişiere text salvate pe un calculator numit server de web. Rezumat Prin Web se acceptă să se în eleagă: Denumirea prescurtată pentru World Wide Web.blablabla. etichete). Calculatoarele care accesează paginile web sunt denumite clien i web. Pentru a vizualiza paginile web un client web are nevoie de un program denumit browser (“răsfoieşte”). Foloseste protocolul de comunica ie HTTP. 30 . Un fişier text care con ine tag-uri. Mozila ..Tutorial HTML 4. WWW func ionează astfel: Informa ia este salvată în documente numite pagini web. Browserul func ionează astfel: Browserul face o cerere (request) către server. Un fişier HTML este: Prescurtarea pentru Hyper Text Markup Language. Cele mai importante standarde web sunt HTML. ele sunt doar interpretate iar în caz de eşec browserul nu afişează nimic.

Tutorial HTML Un fişier HTML trebuie să aibe extensia htm sau html. 31 . Un fişier HTML poate fi creat cu ajutorul unui editor de text simplu (exemplu: Notepad).

pornind chiar cu banalul Notepad din Windows. structura: . tabele.numele: titluri capitole. Elementele care guvernează interactivitatea printr-un document HTML. utilizarea: prin editare. . ecua ii.html. paragrafe. versiunea HTML Specifica ia limbajului con ine următoarele informa ii: Ce caractere pot apărea într-un document HTML.abc) este numit index. imagini. Elementele care guvernează prezentarea unui document HTML. incluzând text. incluzînd stiluri. Fişierul care se editează se va numi index. grafică. Con inutul unui document se caracterizează prin: natura informa iei: texte. Ciclul de via ă al unui document Web include: concep ia: când se utilizează instrumente de editare. gestiunea: stocarea în fişiere. reguli şi alte prezentări vizuale. prezentare: opera ia de formatare. nu este descrisă aranjarea precisă în pagină.concep ia obiectelor imbricate. seturi de caractere. În general fişierul principal al unui site internet (cel care se încărcă atunci când tastăm o adresă de genul www. tabele. legende. un document HTML poate fi reutilizabil.abc. Elementele care guvernează structura unui document HTML.html. imprimare. liste.Tutorial HTML 5. obiecte. incluzând chestionare pentru introducerea informa iei 32 . copiere. Tipurile de date de bază dintr-un document. Principalele caracteristici ale HTML sunt: descrie structura documentului. permite fiecărui navigator să aibă propria prezentare. Fundamentele standardului HTML Editarea paginilor pe internet se poate face în orice program de editare texte. legături. difuzarea: fiind permisă vizualizarea de către utilizatori. precum şi frame-uri pentru prezentările cu ferestre multiple. applet-uri (aplica ii).

liste. Prin definirea tipului de document SGML se declară tipurile de elemente prin care se reprezintă structurile sau modul de afişare dorit. semnifică op ionalitate. etc) modul de prezentare a informa iei din pagină. legături hypertext. Fiecare declarare a tipului de element. ceea ce este scris între paranteze drepte.Tutorial HTML utilizatorului şi scripturile pentru documentele dinamice. Fiecare instan ă con ine o referin ă către DTD-ul care poate fi utilizat pentru interpretare. 33 . Tag-urile nu trebuie scrise respectând reguli foarte stricte (nu e nevoie să scrii numai câte un tag pe rând sau să foloseşti numai litere mari – nu sunt case-sensitive.1. Instan ele document ce con in date şi marcatori. DTD poate include defini ii suplimentare. în general. 5. con inutul. HTML include tipurile de elemente pentru paragrafe. O specifica ie ce descrie semantica asociată marcajelor.). Etichete (tag-uri) Instruc iunile folosite într-o pagină HTML se numesc tag-uri şi acestea indică browser-ului (Netscape. Tag-urile nu sunt altceva decât nişte marcaje (etichete) pe care limbajul HTML le foloseşte alături de texte pentru a ajuta browser-ul de internet să afişeze corect con inutul paginii web. tag de sfârşit. tabele. O aplica ie SGML este. sintaxa generală a unui element fiind: <Nume_tag> bla. bla. DTD (Document Type Definition – Definire a tipului de document) defineşte sintaxa de construire a marcajelor. con ine trei păr i: tag de început. etc. Internet Explorer. bla. … [</Nume_tag>] unde. cum ar fi referin e la entită ile caracter. caracterizată prin: Declara ia SGML . Limbajul HTML include o mare diversitate de elemente. Această specifica ie impune anumite restric ii de sintaxă care nu pot fi definite prin DTD. Tag-urile se scriu între caracterele < şi >.prin care se specifică caracterele şi delimitatorii ce pot apare în aplica ie. imagini etc. în general. Orice limbaj de marcare definit prin SGML este denumit aplica ie SGML.

Atributele se pun numai în tag-ul de început. prezen a tagului de închidere (</Nume_tag>) este op ională. care au valori. Codurile de marcare HTML pot fi clasificate în următoarele categorii: 1. denumite atribute. în cazul unora dintre ele. O particularitate a tag-urilor container este că. imagini sau obiecte multimedia preluate din fişiere. Elementele pot avea asociate proprietă i. tag-urile sunt: singulare (sau vide – empty tags). marcaje pentru introducerea de obiecte . marcaje pentru formatarea textului şi crearea listelor. formule. marcaje pentru structurarea documentului . titlul acesteia şi corpul paginii. Dacă un tag nu are nici un atribut. pereche (sau container – container tags).. Sintaxa tag-ului de început este: <Nume_tag atrib1="valoare1" atrib2="valoare2" … atribi="valoarei"> Observa ie. 2.--> <! doctype> <a> Nume atribut Valoare atribut Semnifica ie Un comentariu Tipul documentului Ancoră Adresa către care vrem să fie legătura: referin ă hypertext sau referin ă 34 href • URL • #nume .cele care delimitează pagina/documentul HTML. marcaje pentru crearea hiperlegăturilor (hyperlinks)..tabele. În cazurile rare când valoarea atributului necesită ghilimele atunci se poate proceda conform exemplului: name='Ion zis "Macelarul" '. Se pot utiliza şi ‘ ‘.care permit introducerea de subtitluri. 5.Tutorial HTML Aşadar. Valorile atributelor pentru atribute trebuie să fie scrise întotdeauna între ghilimele. paragrafe. linii de delimitare. 4. atunci browser-ul va lua în considerare valorile implicite ale tag-ului respectiv. când se regăseşte numai tag-ul de început. formulare. 3. reprezentate prin tag de început şi tag de sfârşit. În tabelul următor este prezentată lista completă a tag-uri împreună cu cele mai importante atribute ale lor: Nume tag <!--. Tag-urile specifică formatul în care va fi afişat textul con inut între tag-ul de început şi cel final. marcaje de bază .

Defini ia unei ancore interne Fereastra în care se va face afişarea O abreviere Un acronim Un element adresă Un applet (o aplica ie) O zonă în interiorul unei imagini hartă Text bold Un URL de bază pentru toate legăturile dintr-o pagină Un font de bază Specifică dimensiunea implicită a fontului din pagina Direc ia textului afişat Text mărit O cota ie Cuprinsul documentului Imaginea de fond Culoarea fondului Distan a dintre marginea din stânga a ferestrei browserului şi marginea din stânga a paginii Distan a dintre marginea de sus a ferestrei browserului şi marginea de sus a paginii Culoarea textului Culoarea legăturilor active (atunci când mouse-ul se află deasupra lor) Culoarea legăturilor nevizitate (nu s-a efectuat nici un click pe ele) 35 target <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> size <bdo> <big> <blockquote> <body> background bgcolor leftmargin • număr • adresa imaginii • cod culoare • nume culoare • procent din lă imea paginii • număr de pixeli • procent din înăl imea paginii • număr de pixeli • cod culoare • nume culoare • cod culoare • nume culoare • cod culoare • nume culoare topmargin text alink link .Tutorial HTML Nume tag Nume atribut Name Valoare atribut • nume • _blank • _self • _parent • _top Semnifica ie către o ancoră internă.

Tutorial HTML Nume tag Nume atribut vlink <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <div> <dfn> <dl> <dt> <em> <fieldset> <font> color face size <form> action method <frame> frameborder marginheight marginwidth src • 1 sau 0 • număr de pixeli • număr de pixeli • URL • URL • GET • POST • cod culoare • nume culoare • nume font • un număr de la 1 la 7 Valoare atribut • cod culoare • nume culoare Semnifica ie Culoarea legăturilor vizitate (s-a efectuat cel pu in un click pe ele) Sare la rând nou Un buton push Un tabel de subtitlu Afişarea în centrul paginii O citare Text de cod Atribute pentru capete de tabel Grupuri de coloane din tabel O defini ie descriere Text şters O listă de directoare O sec iune într-un document O defini ie termen O listă O defini ie termen Text subliniat Un câmp de text Fontul textului Culoarea fontului Tipul fontului Mărimea fontului Formular interactiv Adresa scriptului care prelucrează datele din cadrul formularului Metoda de prelucrare a datelor formularului Cadru (fereastră) Cadrul are sau nu are chenar Spa iu deasupra şi sub un cadru Spa iu la stânga şi la dreapta unui cadru Sursa cadrului 36 .

h6 align <head> <hr> • left • center • right • justify noshade <html> <i> . .Tutorial HTML Nume tag Nume atribut name Valoare atribut • nume • on • off • auto • procent din lă imea paginii • număr de pixeli • procent din înăl imea paginii • număr de pixeli • 1 sau 0 • număr • număr Semnifica ie Numele cadrului (utilizat împreună cu target=nume ca parte componentă a marcajului de tip ancoră <a>) Defineşte op iunea barei de derulare: activă. .. inactivă.. automată Mul ime de ferestre Numărul şi mărimea relativă a coloanelor Numărul şi mărimea relativă a rândurilor Specifică starea "on" (activă) sau "off" (inactivă) pentru chenarul cadrului frameset (1 sau 0) Specifică mărimea chenarului Mărimea spa iului dintre două cadre adiacente Titluri în cadrul documentului Alinierea titlului Antetul documentului Linie orizontală align color size width • left • center • right • cod culoare • nume culoare • număr de pixeli • procent din lă imea paginii • număr de pixeli Alinierea orizontală a liniei Culoarea liniei numai pentru Internet Explorer Înăl imea liniei Lă imea liniei Dezactivează afişarea umbrei pentru rigla orizontală Document HTML Text italic 37 scrolling <frameset> cols rows border frameborder framespacing h1. h2.

Câmp de text sau alte date de intrare Buton/casetă marcată în mod prestabilit Număr maxim de caractere Numele simbolic al valorii câmpului Numărul maxim de caractere acceptate Adresa pentru o imagine align alt border height hspace src vspace width <input> checked maxlength name size src • op iune • număr • date de tip caracter • număr • URL 38 . middle (mijloc). bottom (jos) Text ce va fi afişat în locul imaginii. aceasta nu este afişată Mărimea chenarului din jurul imaginii Înăl imea imaginii Spa iu pe orizontală în jurul imaginii Adresa imaginii Spa iu pe verticală în jurul imaginii Lă imea imaginii Element al formularului.Tutorial HTML Nume tag <iframe> src name height width <img> • left • right • top • middle • bottom • text • număr de pixeli • procent • număr de pixeli • număr de pixeli • URL • număr de pixeli • procent • număr de pixeli • URL • nume • număr • număr Nume atribut Valoare atribut Semnifica ie Cadru intern (numai pentru IE) Sursa cadrului Numele ferestrei (util pentru target) Înăl imea cadrului înglobat Lă imea cadrului înglobat Adăugarea unei imagini Alinierea imaginii în pagină: left (stanga) sau right (dreapta) Alinierea elementelor din jurul imaginii: top (sus). în cazul în care.

Tutorial HTML Nume tag Nume atribut Valoare atribut • text • password • checkbox • radio • submit • reset • file • hidden • image • button • date de tip caracter Semnifica ie type Tip input value <ins> <isindex> <kbd> <label> <legend> align Valoare input. Con inutul prestabilit al câmpului de text Un text inserat Defineşte o singură linie de intrare Text tastatură O etichetă pentru o formă de control Un nume într-un câmp fieldset Specifică alinierea legendei (explica iei) afişate Specifică ordinea elementelor atunci când utilizatorul apasă tasta Tab Specifică tasta care asigură comanda rapidă de la tastatura asociată unui anumit element Elementul este inactiv. dar este afişat pe ecran Elementul este afişat pe ecran dar nu poate fi editat Element al unei liste O resursă de referin ă O imagine hartă O lista de meniu Metainforma ii Descrie valoarea atributului name Autor Descriere Cuvinte cheie 39 • top • bottom • left • right • număr tabindex acceskey disabled readonly <li> <link> <map> <menu> <meta> content name • caracter • text • author • description • keywords .

1 (implicit) O op iune de grup O op iune într-o listă verticală Paragraf Alinierea paragrafului Un parametru pentru un obiect Text preformatat O perioadă scurtă de cotare Text tăiat Mostră de cod Include un script de regulă Javascript. i. în pagina Web Limbajul utilizat Eveniment care declanşează execu ia unor scripturi specifice Numele obiectului din pagină asupra căruia ac ionează scriptul Listă de selec ii Permite selec ia mai multor elemente Numele listei de selec ii Numărul de elemente ale listei Text mic O sec iune într-un document Text tăiat Text eviden iat O definire de stil 40 start type <optgroup> <option> <p> align <param> <pre> <q> <s> <samp> <script> language event for <select> multiple name size <small> <span> <strike> <strong> <style> • număr • A.Tutorial HTML Nume tag <noframes> <noscript> <object> <ol> Nume atribut Valoare atribut Semnifica ie O sec iune noframe O sec iune noscript Un obiect incorporat Lista ordonată Cu ce valoare începe numerotarea Tipul numerotării: A. a. 1 • left • center • right • justify • limbaj • eveniment • numeobiect • date de tip caracter • număr . a. I. i. I.

Tutorial HTML Nume tag Nume atribut type <sub> <sup> <table> align background bgcolor border bordercolor cellpadding cellspacing cols hspace vspace width bordercolorlight bordercolordark width frame rules <tbody> <td> align • left • center • left • center • right • URL • cod culoare • nume culoare • procent • număr de pixeli • cod culoare • nume culoare • număr de pixeli • număr de pixeli • număr • număr de pixeli • număr de pixeli • procent • număr de pixeli • culoare • culoare • număr • valoare • valoare Valoare atribut • valoare Semnifica ie Tipul modelului de stiluri. De regulă "text/css" Text indice inferior (subscript) Text exponent (superscript) Tabel Alinierea tabelului Imaginea de fond pentru tabel Culoarea fondului pentru tabel Chenarul tabelului Culoarea chenarului Spa iu între con inutul celulelor tabelului şi marginile lor Spa iu între celulele tabelului Numărul de coloane ale unui tabel Spa iu pe orizontală în jurul tabelului Spa iu pe verticală în jurul tabelului Lă imea tabelului Cea mai deschisă culoare din cele două culori specificate Cea mai închisă culoare din cele două culori specificate La imea impusă tabelului Ajustarea fină a tabelului Ajustarea fină a riglelor tabelului Corpul unui tabel Celula de tabel Alinierea con inutului celulei pe orizontală 41 .

Tutorial HTML Nume tag Nume atribut Valoare atribut • right Semnifica ie • baseline • caracter • justify background bgcolor colspan height rowspan valign width nowrap <textarea> cols name rows <tfoot> <th> <thead> <title> <tr> align bgcolor • left • center • right • cod culoare • nume culoare • număr • date de tip caracter • număr • URL • cod culoare • nume culoare • număr • număr de pixeli • număr • top • middle • bottom • număr de pixeli Aliniaza celule de date cu linia de bază a textului adiacent Aliniaza o coloană fa ă de un anumit carcater (caracterul prestabilit este ".") Aliniază atât marginea din stânga cât şi marginea din dreapta a unui text Imaginea de fond pentru celulă Culoarea fondului pentru celulă Numărul de coloane pe care se întinde celula Înăl imea celulei Numărul de linii pe care se întinde celula Alinierea con inutului celulei pe verticală Lă imea celulei Nu permite despăr irea textului pe linii în cadrul unei celule Câmp de editare multilinie Numărul de coloane Numele câmpului de editare multilinie Numărul de rânduri Zona de sfârşit a unui tabel Un antet de tabel Un antet de tabel Titlu document Rând de tabel Alinierea con inutului celulelor pe orizontală Culoarea fondului pentru tot rândul 42 .

este divizat în: 1. Structura documentelor HTML Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursă HTML (forma pe care o interpretează pentru afişarea paginii). 2. la modul general. sec iunea antet (între <head> şi </head>) care include şi titlul documentului. astfel: <html> <head> <title> </title> </head> <body> .. programele de navigare ignoră spa iile şi <Enter>-urile. ... Con inutul oricărui fişier HTML trebuie inclus între tag-urile <html> şi </html>: <html>. prin care la un moment dat se afişează mai multe ferestre con inând fiecare câte o pagină. Structura unui document HTML poate fi reprezentată.. sec iunea corp (între <body> şi </body>) care include con inutul. La interpretare. Introducerea şi gestiunea frame-urilor se realizează foarte convenabil folosind editoarele HTML. <body> </html> Început document Început antet Început titlu Sfârşit titlu Sfârşit antet Început corp de document Corp de document Sfârşit corp de document Sfârşit document 43 .2.Tutorial HTML Nume tag Nume atribut valign <tt> <u> <ul> type <var> • circle • disc • square Valoare atribut • top • middle • bottom Semnifica ie Alinierea con inutului celulelor pe verticală Text tipărit Text subliniat Listă neordonată Forma marcajului O variabilă 5. </html> Un document HTML. aplicând formatarea specificată. schematic. Pentru structurarea şi organizarea informa iilor din paginile web se pot utiliza frame-uri (marcajul <frame>). .aici se completează informa ia de prezentat în pagină.

</title> marchează titlul documentului care va fi afişat pe fereastra browserului...</body> vor apărea o singură dată în cadrul unui fişier HTML...Tutorial HTML Un exemplu de pagina HTML foarte simplă. La sfârşitul documentului avem </html>. Tag-urile <body>. Blocul de text dintre <head> şi </head> este informa ia din antet care nu se afişează în fereastra browserului. În continuare avem două delimitări importante ale documentului partea de head şi cea de body.. după cum arată exemplul de mai sus... Tag-urile <title>... Tag-urile <html>. 4. 2. numite metatag-uri sunt deosebit de importante pentru ca pagina să fie cât mai bine cotată de către motoarele de căutare.</title> şi <body>. world!" este: <html> <head> <title>Hello world! </title> </head> <body> …aici se completeaza continutul paginii… </body> </html> Observa ii. Nu lăsa i un spa iu după „<” pentru că browserul nu mai recunoaşte instruc iunea! 3.. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de căutare pentru indexarea paginii.</html>. Acesta are rolul de a anun a browserul că urmează un document HTML. acesta aten ionând browserul că a ajuns la sfârşitul documentului HTML. 1. <title>..</head>. 44 . <head>. În antetul documentului se inserează: Anumite secven e de program (script-uri). Aceste elemente.. Prin urmare. Corpul documentului poate fi implementat şi prin elementul <frameset>. 5. care se execută la încărcarea documentului în browser. Primul tag din document este <html>. având titlul "Hello.</body> delimitează zona de text care va fi afişată în cadrul ferestrei browser-ului. strădui i-vă să găsi i un titlu care să descrie cât mai corect şi complet con inutul paginii dumneavoastră.

aici se completeaza continutul paginii. Extensia „htm” a devenit mai populară datorită faptului că majoritatea extensiilor fişierelor sunt formate din 3 litere.. este să foloseşti la scrierea codului. Pentru cei ce se pregătesc să scrie tag-uri conform standardului XHTML utilizarea literelor mici este obligatorie. să introduce i comentarii în text pentru a face această structură cât mai explicită.. aceasta fiind recomandarea pentru standardul HTML 4. se recomandă ca. însă orice document HTML trebuie să includă un element <title> în sec iunea de antet. dar nu uita de extensia . W3C recomandă utilizarea literelor mici în scrierea tag-urilor. Trebuie inut cont că tag-urile trebuie închise în ordine inversă fa ă de cum au fost deschise. Oricum consecven a în utilizarea unei singure extensii este foarte importantă. O altă solu ie pentru a nu uita să închizi vreun tag. scriind apoi con inutul între ele. 10. un editor HTML (atunci când vrei să foloseşti un tag. 9..html sau . Deschide fişierul salvat cu Netscape sau Internet Explorer. 8. atunci când scrii codul unei pagini web să închizi toate tag-urile pe care le-ai deschis. 13. editorul va scrie automat şi tag-ul de încheiere). Pentru a fi sigur că nu ui i încearcă să te obişnuieşti să scrii după fiecare tag şi tag-ul de încheiere (la tag-urile pereche). Salvează pagina cu ce nume vrei tu. Fereastra deschisă va avea ca titlu: "Hello. pe măsură ce procesul de editare avansează. 7. Deoarece structura documentelor HTML obişnuite este în realitate mult mai complexă. 45 . 11. Nu uita. 12. 14.. Pentru a vedea codul unei pagini web scrise cu HTML alege din meniul View al browserului op iunea Source.htm! În principiu nu contează pentru că ambele sunt interpretate la fel.". Elementele <html> şi <head> sunt op ionale.Tutorial HTML 6. world!" şi drept con inut: ".

Comentariile se introduc prin includerea textului între etichetele de mai jos. ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML. explica ii la elementele de cod utilizate.-> 46 .Tutorial HTML Comentariile nu sunt vizibile pentru browser.. <!-. Comentariile constă în scurte informa ii.-> <!. etc.Acesta este un comentariu introdus in pagina Web . mai ales în situa ia în care se impune depanarea codului. fiind deosebit de utile ulterior.-Acesta este un comentariu pe mai multe randuri care ia sfarsit aici ..--> Iată două exemple: <!.

2. 4. D. 8. se pot defini astfel 65536 de culori. 1. navy. a. 9. silver. c. Printr-un nume de culoare. Prin construc ia "#RRGGBB" unde R(red). A. red. C. Culorile sigure sunt acele culori care vor fi afişate de majoritatea browserelor. B. 7. 3. 2. 6. white şi yellow. Cele mai importante culori care sunt recunoscute de majoritatea browserelor sunt redate în tabelul care urmează: Culoare Nume culoare AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan Cod culoare #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF 47 . F. d. e. dar nu ai verificat să vezi dacă aceasta face parte din culorile sigure. purple. gray. black. 5. Texte 6. fuchsia. teal. sau B(blue) sunt cifre hexazecimale şi pot lua valorile: 0. Dacă. green lime. Sunt disponibile cel pu in 16 nume de culori: aqua. atunci există posibilitatea ca unii dintre utilizatorii paginii tale să vadă o cu totul altă culoare. E.Tutorial HTML 6. b. pentru fondul paginii tale web ai folosit o anumită culoare. de exemplu.1. f. Culori O culoare poate fi precizată astfel: 1. G(green). maroon. olive.

Tutorial HTML Culoare Nume culoare DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue Feldspar FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue Cod culoare #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #D19275 #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 48 .

Tutorial HTML Culoare Nume culoare LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip Cod culoare #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #8470FF #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 49 .

Exemplu: 50 . după sintaxa <body text=culoare>. Culoarea textului se setează prin intermediul atributului "text" al tag-ului <body>. De exemplu: <body bgcolor = culoare>.Tutorial HTML Culoare Nume culoare PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet VioletRed Wheat White WhiteSmoke Yellow YellowGreen Cod culoare #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #D02090 #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 Culoarea fundalului unei pagini se precizează prin intermediul atributului "bgcolor" din cadrul etichetei <body>.

1. Deşi în vestimenta ie combina ia de roşu cu bleumarin este rafinată. Iată câteva dintre sentimentele pe care le sugerează culorile: 51 . într-o pagină Web literele roşii pe fond albastru nu arată bine şi sunt greu de citit. O altă combina ie nefericită este cea cu fondul negru sau de culoare foarte închisă şi textul de culoare albă. de toleran a ochiului.a i ghicit! Litere negre pe fond alb. Să nu uităm nici faptul că toate monitoarele dispun de reglaje ale strălucirii luminoase şi ale contrastului pe care utilizatorii le setează diferit.Tutorial HTML <html> <head> <title>Atribute multiple </title> </head> <body bgcolor=yellow text=blue > Fond de culoare galbena si text de culoare albastra. pentru a sublinia astfel mesajul pe care vre i să îl transmite i. un text de culoare roşie dispus pe un fundal negru va fi ilizibil. de iluminarea camerei. În alegerea culorilor pentru un site este bine să ine i seama de câteva elemente de psihologia culorilor. Primul şi cel mai important este acela de a face con inutul uşor de citit. Pe un monitor cu reglaje medii ale contrastului şi strălucirii. </body> </html> Efect: 6. Aceasta înseamnă. în func ie de preferin ele personale..1. etc. Alegerea culorilor Sunt multe elemente care trebuie luate în considerare la alegerea culorilor pentru o pagină Web. chiar dacă la valori maxime ale acestor caracteristici combina ia poate genera efecte interesante..

seriozitate. hotărâre Alegerea culorilor pentru site trebuie să fie în concordan ă cu tema site-ului şi să sublinieze mesajul său. importantă.sentimente pozitive şi cordialitate Verde . deşi posibilă. rafinament Gri . exuberan ă Galben . demnitate. veselie.puritate. pasiune. încredere. moliciune Portocaliu ..sobrietate. îl poate induce în eroare pe vizitator.agresivitate. Referin ele la caracter vor fi scrise sub forma &nume_entitate. direct de la tastatură. în mod prestabilit. Schimbarea acestora. 6. pe parcursul întregului site. Caracterele speciale sunt “case sensitive”. distinc ie. încredere Violet .sofisticare. Mai jos este redat codul caracterelor româneşti şi unele din cele mai folosite caractere speciale: Cod HTML Semnifica ie Cod HTML Semnifica ie 52 . modernitate.feminitate.utilitate. spiritualitate. prospe ime Albastru . bogă ie Alb . anumite culori. Astfel. Caractere speciale HTML Entită ile.autoritate.Tutorial HTML Roşu . autoritate. sănătate. sau care nu sunt disponibile la tastatură. alege i pentru legături. legăturile vizitate şi legătura activă culori care să vină în contrast cu culoarea sau imaginea de fundal a paginii. sim practic Negru . Legăturile au. mister Maro . putere. constituie o metodă de reprezentare a caracterelor care nu ar putea fi redate corect în cadrul unui document HTML dacă ar fi scrise ca atare. O referin ă la o entitate caracter este o construc ie SGML care face trimitere la un caracter al setului de caractere utilizat în document. Alegerea culorilor pentru legături este.2. în vreme ce pentru un site destinat prezentării unei firme de consultan ă financiară sunt potrivite culori sobre şi care sugerează seriozitate şi încredere. vitalitate Roz .linişte.amuzament. legătura cu pământul. inocen ă. Observa ie. dacă dori i să construi i un site destinat copiilor ve i folosi culori vesele şi luminoase. Rămâne i consecvent culorilor alese pentru legături. de asemenea. Ca şi în cazul textului. securitate. căldură.

&nbsp. &#355. &copy.Tutorial HTML &#259. &#934. ¡ &Omega. &#963. &#183. &#182. &#961. &amp. &#351. &acute. &#38. &#8364. &#163. &#951. &#8212. &plusmn. &#180. &pound. &#174. &micro. &miu. &#166. &#966. &#164. ¦ &epsilon. &#178. &#947. &#168. &Icirc. ® &niu. &#945. &#34. ´ &sigma. © &theta. &reg. ° &omicron. &#167. &#948. &#959. ă Ă î Î ş Ş â Â Non Breaking SPace & (semnul ampersand) ß &copy. &#960. > &Chi. &ordf. &#175. &Acirc. Semnifica ie Cod HTML " &Tau. &#955. &#173. &#354. &shy. &yen. ¶ &upsilon. &cent. &para. &lt. &#954. &#177. &yen. &#258. &#952. &#936. &icirc. ¢ &alpha. £ &beta. § &zeta. &#162. Semnifica ie Τ Υ Φ Χ Ψ α β γ δ ε ζ η θ ι κ λ µ ν ξ ο π ρ ς σ τ υ φ 53 . &#962. &#161. &sect. &#60. &#950. &#169. &#949. &curren. ± &pi. &iexcl. &brvbar. &gt. &sup2. &szlig. &#176. &pound. &sup3. &#957. &nbsp. &macr. ¯ &xi. &#937. · &phi. &#181. ¨ &eta. &#8220. &#165. &#8482. &laquo. &#179. &#935. &#933. &not. &#946. &#350. ² &rho. &#160. & &Upsilon. &#62. &#953. &deg. ³ &sigmaf. &lt. µ &tau. &#964. &#172. &#958. &#956. &middot. &#932. &amp. ¬ &lambda. ¥ &delta. &#170. &#8221. &sect. ¤ &gamma. < &Phi. « &kappa. &acirc. &#965. &Psi. ª &iota. &uml. &gt. &reg. © (semnul pentru copyright) ® (marcă înregistrată) ™ (TradeMark) £ ¥ € “ ” — < > § Lista completă este redată de tabelul următor: Cod HTML &quot. &#171.

&#8216. &#223. &#8260. &#201. &#8218. &#978. &Icirc. Ñ &permil. &#8595. &#189. &#8364. Ü &trade. &Iuml. &#188. &aacute. Semnifica ie Cod HTML ¸ &chi. &Acirc. &#193. &frac34. &Oacute. ¾ &ensp. &#8212. &#8249. Ó &Prime.Tutorial HTML Cod HTML &cedil. &Egrave. » &thetasym. &#200. ¹ &psi. &THORN. Ê &ldquo. &Uuml. Ð &hellip. &Iacute. &#968. &#207. &#8224. &#8226. ß &uarr. &#8201. &#185. × &frasl. &Euml. &#8472. &#8194. Ç &lsquo. Ë &rdquo. &#186. Ä &rlm. &#8629. &raquo. &frac12. &#191. &#8501. &times. &#8593. &Igrave. &#213. Æ &mdash. &#8594. &#198. Ø &euro. &Atilde. &#221. Û &real. Ù &image. &#196. &#190. &#8195. Semnifica ie χ ψ ω ϑ ϑ ϑ ϑ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ ›  ⁄ € ϑ ϑ ϑ ™ ϑ ← ↑ → ↓ ↔ ϑ 54 . &#209. Þ &larr. &#8240. &Ucirc. &Ntilde. &#203. &#8476. &#215. &Ccedil. &frac14. &#227. &Ecirc. &#206. &#216. &#8242. &#969. &#8207. &#205. Ă &lrm. &ordm. Ý &alefsym. À &thinsp. &Ograve. &Agrave. &#8217. &Eacute. &#195. &#211. &#220. &#967. Å &ndash. &#202. &#977. ¿ &emsp. Á &zwnj. &#208. &#8250. Î &Dagger. &Otilde. Ì &bdquo. &#8592. &#219. &#8243. ½ &piv. Ô &lsaquo. &#8230. Í &dagger. &#8225. &szlig. &#194. &agrave. &Ocirc. &Ouml. &#212. â &harr. &#8254. &#8205. É &sbquo. &#8221. &acirc. &Ugrave. &#224. &#8220. ă &crarr. Ï &bull. &#199. &#226. &#214. º &omega. &#197. &#8206. &Yacute. &Uacute. à &rarr. Â &zwj. È &rsquo. Ò &prime. &#8222. Õ &rsaquo. &#8204. &#192. &iquest. &#982. &Aacute. &Auml. &#217. &#218. &#8596. ¼ &upsih. &#8465. &#187. &Aring. &#204. &Oslash. &#8482. &sup1. Ú &weierp. &atilde. &#222. &ETH. á &darr. &#8211. &#184. &AElig. &#210. &#225. Ö &oline.

&#8968. &#249. &Zeta. &fnof. ˜ &nsub. ê &part. &#8839. &#8659. &#247. &#916. &#8835. &#241. &#376. Semnifica ie Cod HTML ä &Arr. &#250. &otilde. ð &ni. &#8800. &yuml. &Beta. &#8712. ú &or. &#255. &#229. &#8901. &#8711. &#8727. ∆ &otimes. &#339. &ucirc. &#236. &euml. &oslash. &eacute. &#8836. &divide. î &isin. Γ &oplus. &ecirc. ø &ang. ù &and. &#8709. &#243. &#8658. &#237. &#246. ì &empty. &cong. &#402. &#8734. ˆ &sup. &#8744. &#8776. &#231. &#234. &#252. &#8660. è &hArr. &icirc. &#920. &#235. ç &dArr. &#8869. &#8704. &#914. &igrave. &eth. œ &ne. &#353. &oacute. &#230. &iuml. &#228. ò &sum. &ntilde. &#8721. &aring. &#8756. Η &lceil. ë &exist. &#8706. Ε &perp. &Oelig. Θ Semnifica ie ϑ ϑ ϑ ϑ ϑ ϑ ∂ ϑ ϑ ϑ ϑ ϑ ϑ ∏ ∑ − ϑ √ ϑ ∞ ϑ ϑ ϑ ∩ ϑ ∫ ϑ ϑ ϑ ≈ ≠ ≡ ≤ ≥ ϑ ϑ ϑ ϑ ϑ ϑ ϑ ϑ ϑ ϑ 55 . &#248. ï &notin. &uuml. &#8801. &#8736. &#8719. û &cap. &thorn. ô &lowast. &#8713. &#710. &#8733. ö &prop. í &nabla. &#915. &Gamma. &#239. ý &int. Α &sube. &#8746. &Epsilon. æ &rArr. &#242. &ocirc. &Delta. é &forall. &circ. &#8745. Š &equiv. &#254. &Eta. &#8838. &#8657. &#732. &#251. &#232. ÷ &infin. Œ &asymp. &#8853. &#8656. &ccedil. &Theta. Β &supe. &#244. &#8730. &#8805. &#8804. &#8707. &#238. &iacute. Ÿ &ge. &#8722. š &le. þ &there4. &OElig. &#913. &#352. &#233. &yacute. ƒ &sub. &tilde. &Scaron. &egrave. &ouml. &#8764. ó &minus. &#8743. å &uArr. &uacute. &#8855. &Yuml. &#253. &#918. õ &radic. &#917. &Alpha. &ograve. &#8715. ü &cup. &#8773. &scaron. &ugrave. Ζ &sdot. &#245. &#338. ñ &prod. &#240.Tutorial HTML Cod HTML &auml. &#8747. &aelig. &#8834. &#919. ÿ &sim.

&#927. &#924. &Miu.&nbsp. Ν &loz. &#929. &#925. &#9001. Formatarea caracterelor Deşi există multe tag-uri dedicate formatării caracterelor. &Rho. Multe tag-uri sunt lăsate la interpretarea browserelor sau constituie rezervă pentru dezvoltări ulterioare. Semnifica ie Cod HTML &rceil. &Xi. Acest tag se utilizează singur (nu se foloseşte cu </br>) şi reprezintă o rupere de rând.3. &#931. sau niciuna sunt libere de imagini flotante (vezi tag-ul <img>). Σ Semnifica ie ϑ ϑ ϑ ϑ ϑ ◊ ♠ ♣ ♥ ♦ 6. Ο &clubs. Μ &rang. pentru a pune trei spa ii între cuvinte va trebui să se scrie în fişierul HTML astfel: &nbsp. în fişierul HTML. Este de aşteptat ca următoarele versiuni de HTML să accepte definirea de stiluri. &#9827. Π &hearts. &#921. 2. Ι &lfloor. ci folosind de mai multe ori sintagma „&nbsp. Ruperea rândului: <br [clear="left"|"right"|"all"|"none"]>. ambele. &Omicron. &#922. &#928.&nbsp. fără a se trece la un nou paragraf (deci fără a se lăsa spa iu suplimentar între rânduri). &#9829. Prezen a acestui caracter special între două cuvinte împiedică plasarea lor pe rânduri separate. &#8970. dreaptă. ceea ar facilita formatarea unitară a unui document.”. &Lambda. Κ &rfloor. &#923. &#8971. &#8969. &#9830. &#926. 1. Ξ &spades. sintagma are o alta semnifica ie: nbsp înseamnă caracterul special Non Breaking SPace. &#9674. Deşi este utilizată pentru inserarea de spa ii. Ρ &diams. Într-un fişier HTML afişarea mai multor spa ii consecutive nu este posibilă prin scrierea directă în fişier. &Sigma. Astfel. 56 . Λ &lang. Observa ii. &#9002. &Pi.Tutorial HTML Cod HTML &Iota. nu se face apăsând Enter. Trecerea la un nou rând. această formatare nu este la nivelul celei produse de un procesor de text. &#9824. &Niu. Atributul clear are efectul anulării alinierilor precedente când marginea stângă. &Kappa. ci utilizând tag-ul <br> (line BReak).

Vizitatorii paginii trebuie să aibă fontul respectiv instalat pe calculator. Exemplu: <html> <head> <title> Culoarea si familia fontului</title> </head> <body> Aceasta linie este scrisa cu caractere normale.</font> <br> Aici<font color="green"> fiecare</font> <font color="blue">cuvant</font> <font color="yellow">are</font> <font color="cyan">alta</font> <font color="#3478fa">culoare. Formatare la nivel fizic Formatarea la nivel fizic se efectuează atunci când se indică direct fontul. Pot fi introduse mai multe fonturi separate prin virgulă. Tipul de font necesar se stabileşte prin atributul face. Observa ie. culoarea şi/sau dimensiunea caracterelor cu care se afişează anumite por iuni de text.<br> <font color="red">Aceasta linie este rosie.1.Tutorial HTML Formatarea caracterelor se poate efectua la nivel fizic. serif. Verdana.</font><br> <font face="monospace">Linie scrisa cu caractere 57 . cursive. Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif. deci este indicat să se utilizeze numai fonturi "clasice". la nivel logic sau la nivel de comunicare. monospace şi fantasy.3. sans serif. De exemplu: <font color=red>fragment de text de culoare rosie</font> Observa ie. Pentru a scrie un fragment de text cu caractere de o anumită culoare se utilizează atributul color la valoarea necesară. Fontul implicit este Times New Roman. monospace"> În acest caz browserul va utiliza primul font pe care îl cunoaşte. 6. De exemplu: <font face="Arial. Culoarea implicită este negru. <font [size=[+|-]1|2|3|4|5|6|7] [color="#rrggbb"|"color"] [face="font"]> text </font> Aceşti parametri pot fi utiliza i separat sau simultan în cadrul tag-ului <font>. Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de caractere).

7 (1 pentru cel mai mic font şi 7 pentru cel mai mare). 2. pentru a micşora dimensiunea fontului cu 1. 4. 5.</font> </body> </html> Efect: 58 .<br> <font size="5">Fonturi de marime 5. etc. 2. +1.</font> <br> <font size="-3">Fonturi de marime 1. . 6.</font> <br> <font face="arial">Linie scrisa cu caractere arial. -1. 3. Valorile acestui atribut pot fi: 1. fa ă de valoarea curentă.. -2.</font><br> <font size="+2">Fonturi de marime 6. fa ă de valoarea curentă. +2. Exemplu: <html> <head> <title> Marimea fontului</title> </head> <body> Aceasta linie este scrisa cu caractere normale.Tutorial HTML monospatiate.</font><br> <font size="4">Fonturi de marime 4. etc. pentru a mări dimensiunea fontului cu 1. etc. etc.</font> </body> </html> Efect: Pentru a stabili mărimea unui font se utilizează atributul size. 2.

Blocul <i>text</i> aplică textului stilul italic (cursiv. Este utilizat. Text monospa iat. Este utilizat pentru eviden ierea anumitor cuvinte. Nu provoacă trecerea pe un rând nou. Blocul <b> text </b> aplică textului stilul bold (aldin. Blocul <tt>text</tt> se foloseşte pentru a afişa textul inclus în container cu fonturi monospa iate. înclinat). Este utilizat. fără a produce o rupere de rând. Înclinarea textului. de obicei. Astfel. Nu produce o rupere de rând. pentru producerea unor exemple negative: aşa nu se face). Tipul de font monospa iat (cum este de exemplu Courier) are proprietatea că fiecărui caracter i se rezervă acelaşi număr de pixeli pe ecran. Blocul <u>text</u> subliniază textul con inut. Sublinierea cu tag-ul <u> poate produce. Tăierea textului. Exemple cu stiluri de fonturi. pentru prezentarea unei ieşiri de tip listing (clasic) de calculator.Tutorial HTML Îngroşarea textului. confuzii cu legăturile utilizate într-un hypertext. Este utilizat pentru eviden ierea anumitor cuvinte. propozi ii etc. împreună cu utilizarea unor culori. Blocul strike>text</strike> produce "tăierea" cu o linie a textului con inut. fără a produce o rupere de rând. îngroşat). <html> <head> <title> Stiluri de font </title> </head> <body> <b>Acest text este Bold</b><br> <i>Acest text este Italic (cursiv) </i><br> <u>Acest text este Underline</u><br> 59 . Se va prefera eviden ierea textului prin alte mijloace. propozi ii etc. în general. caracterul "i" va avea alocat tot atâta spa iu pe ecran ca şi caracterul "W": "Courier" este un font monospa iat. Sublinierea textului. Nu are loc rupere de rând.

2. Blocul <kbd>text</kbd> se foloseşte pentru a indica un text care urmează a fi introdus de la tastatură.3. <pre>. Multe dintre tag-urile care realizează acest lucru produc acelaşi efect vizibil. Blocul <dfn>text</dfn> este folosit pentru a insera în text defini ia (definition) unor termeni. <tt> şi alte asemenea. Nu produce rupere de rând. Nu produce o rupere de rând. Aplică textului din container un font 60 . Accentuarea unui text (emphasized). Este util la crearea indexului sau glosarului unui document. Textului men ionat i se aplică un font similar intrării de la tastatură.Tutorial HTML <strike>Acest text este Strike</strike><br> Urmeaza un text cu caractere monospatiate: <tt>Caractere monospatiate</tt><br> </body> </html> Efect: 6. Introducerea unui text de la tastatură (keyboard). deci un font nepropor ional. de obicei prin scrierea înclinată. Textul de defini ie este identificat şi va fi scris cu caractere diferite de textul înconjurător. Formatarea la nivel logic se efectuează atunci când se indică doar faptul că o anumită por iune de text trebuie eviden iată fa ă de textul din jur şi se lasă la latitudinea browserului să efectueze această eviden iere. Multe browsere aplică acelaşi font pentru <kbd>. Crearea indexului unui document. Blocul <samp>text</samp> este folosit pentru a insera o mostră de text. ca în următorul exemplu: Pentru a parasi programul tastati <kbd>quit</kbd>. Tag-ul <kbd> nu provoacă o rupere de rând. Formatare la nivel logic. Inserarea unei mostre de text (sample). Blocul <em>text</em> va eviden ia textul specificat. diferen ierea lor fiind lăsată browserelor de genera ii viitoare.

Inserarea indicilor superiori (superscript). Accentuarea unui text (strong). Textul cuprins între tag-urile <sup>…</sup> va fi mutat mai sus decât linia de bază a textului precedent şi îi va fi aplicat un font mai mic (face trecerea în indice superior – exponent). Nu produce trecerea pe un rând nou. Multe browsere utilizează acelaşi font ca pentru <tt>. Unele editoare HTML convertesc tag-ul <big>în <font size=+1>text</font>.Tutorial HTML asemănător ieşirii de calculator (nepropor ional). Blocul <big>text</big> afişează textul din container cu dimensiune mai mare decât fontul de bază. Nu produce rupere automată de rând. Exemple cu formatări la nivel logic: <html> <head> <title> Formatare la nivel logic </title> </head> <body> Aceasta este o definitie<dfn> Definitie </dfn> <br> <kbd>Acesta este un text scris cu un font nepropor ional kbd </kbd> <br> <em>Acesta este un text scris inclinat cu em </em> <br> <samp>Acesta este un text scris cu samp</samp><br> <big>Acesta este un text big</big> <br> <small>Acesta este un text small</small> <br> <strong>Acesta este un text strong</strong> <br> Acum se aplica un format superscipt pentru X la puterea n: X <sup>n</sup>. Accentuarea unui text (big). Blocul <small>text</small> afişează textul din container cu o dimensiune mai mică decât textul înconjurător. <br> iar pentru formula apei H<sub>2</sub>O am aplicat un format subscript. Textul cuprins între tag-urile <sub>…</sub> va fi mutat mai sus decât linia de bază a textului precedent şi îi va fi aplicat un font mai mic (face trecerea în indice inferior). Tag-ul nu produce o rupere de rând. Nu produce rupere automată de rând. Accentuarea unui text (small). Blocul <strong>text</strong> produce o eviden iere pronun ată a textului. Nu produce rupere automată de rând. </body> 61 . Nu produce rupere automată de rând. uzual prin trecerea în aldine. Inserarea indicilor inferiori (subscript). Unele editoare HTML convertesc tag-ul <small> în <font size=-1>text</font>.

Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine. </h2> <h4> Titlu de marime 4 aliniat la stanga (implicit) </h4> </body> </html> Efect: 62 . în centru şi la dreapta. pe când <h6> foloseşte caracterele cele mai mici. Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1|h2|h3|h4|h5|h6 [align=”left”|”center”|”right”] > text </h1|h2|h3|h4|h5|h6>. Exemplu: <html> <head> <title> Blocuri de titlu</title> </head> <body> <h1 align="center"> Titlu de marime 1 aliniat in centru </h1> <h2 align="right"> Titlu de marime 2 aliniat la dreapta. Toate aceste etichete se referă la un bloc de text şi trebuie înso ite de o etichetă de încheiere similară.Tutorial HTML </html> Efect: Blocuri de titlu. Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stânga (în mod prestabilit).

putem include textul respectiv între etichetele <cite>…</cite>. Inserarea unui citat (citation). Textului din container i se aplică un font nepropor ional precum cel de calculator 63 . atunci putem utiliza facilită ile oferite de eticheta dedicată: <address [align=”left”|”center”|”right”]> text </address>. Formatare la nivel de comunicare. Formatarea este logică.3. H3 fără a fi utilizat H2 etc. i. Inserarea unei adrese. 6. de exemplu. implicit. Inserarea unor secven e de cod (code). deci forma de vizualizare depinde de browserul utilizat. Atributul align indică modul de aliniere orizontală. În această sec iune se prezintă tag-uri dedicate formatărilor specifice pentru anumite tipuri de informa ii. În general secven ele de cod sunt afişate cu fonturi Courier.Tutorial HTML Observa ii. textul inclus va fi afişat cu caractere italice. titlul unei lucrări sau să dăm o referin ă. să nu se utilizeze. ii. Tag-urile Hn provoacă o rupere de rând şi. deci diferen ierea este dependentă de browserul utilizat. adică. Referin a este diferen iată fa ă de textul curent. În cele mai multe dintre browsere. Nu se produce rupere de rând. Formatările respective intră tot în categoria formatărilor logice. Este de preferat ca stilurile să se specifice în ordine. Pentru inserarea în text a unor secven e de cod scrise într-un limbaj de programare aceste se vor include între tagurile <code>…</code>.3. Dacă într-o pagină web trebuie inclusă o adresă (uzual o adresă de e-mail). au câte un rând gol înainte şi după. Dacă dorim ca într-un text să citam un termen.

Observa ie. Multe browsere utilizează acelaşi font pentru <code>. Eviden ierea textului.<br> Aleea Şcolii.<br> Urmeaza un exemplu de utilizare a formatării code: <code>Acesta este un exemplu de utilizare a formatarii CODE.Tutorial HTML (clasic). Este un tag păstrat doar pentru compatibilitate cu versiuni mai vechi.</var>.. <kbd>. Nr: 1 <br> Dragasani – Romania </address> Pentru mai multe informatii contactati-ma la <address> gibmihaescu@yahoo. dar este dedicată eviden ierii termenilor noi introduşi într-un document. uzual prin trecerea în italice. Se produce o eviden iere a textului.. Nu produce schimbări în curgerea textului. depinde deci de browser. Forma efectivă de afişaj depinde de browser. Urmează un exemplu cu toate formatările la nivel de comunicare.</code> <br> Acum urmeaza un exemplu de utilizare a formatării var: <var> Acesta este un exemplu de utilizare a formatarii VAR </var>. </body> </html> Efect: 64 . </cite> HTML in Plain English reprezinta un citat. Este o formatare logică. Pentru a eviden ia un text. Blocul <listing>text</listing>. acesta se include între tagurile <var>. <pre>.Gib Mihaescu&ldquo. <samp> şi <tt>. <html> <head> <title>Formatare la nivel de comunicare </title> </head> <body> Adresa şcolii noastre este:<address> Colegiul Na ional &bdquo. Aplică textului din container un font similar ieşirilor de calculator. Provoacă trecerea la un nou paragraf. Este preferabil să se utilizeze tag-ul <pre> pentru realizarea func iunilor <listing> şi <code>.com</address> In acest tutorial s-au utilizat unele definitii de tag-uri dupa volumul <cite>HTML in Plain English.

name specifică numele fontului. Ca urmare. Nu se foloseşte pentru a stabili caracteristicile unui bloc de text. Blocul <blink>text</blink> produce "clipirea" textului con inut în container.2. Spre deosebire de <font> aceasta nu este o etichetă container. Observa ie. Este extensie Netscape. dar importan a lor le va impune probabil ca standarde. color este culoarea fontului. Blocul <basefont [size=1|2|3|4|5|6|7] [color="#rrggbb"|"color"] [name="font"]> [</basefont>] defineşte fontul care va fi utilizat pentru textul unei întregi pagini Web care urmează tag-ului <basefont>: size este mărimea fontului. Op iunea este doar Microsoft. Implicit este 3. Extensii Netscape şi Microsoft Aceste extensii nu sunt recunoscute de toate browserele. deoarece efectul ei se referă la tot textul din pagină.Tutorial HTML 6. Deşi eticheta <basefont> face parte din standardul HTML 3.4. acesta va afişa textul utilizând propriile setări prestabilite (default). Op unea este doar Microsoft. Exemplu de formatare <basefont> şi <blink>: <html> <head> <title> Basefont si blink</title> </head> <body> Acesta este un <basefont size=5 color=”blue”>exemplu</basefont> de utilizare a formatarii basefont si <basefont size=4> <blink>blink</blink>. De remarcat ca dimensiunea din basefont se pastreaza in continuare. ignorând atributele men ionate în eticheta <basefont>. atributele sale nu sunt recunoscute de browserele Netscape. 65 .

<p> Aici s-a utilizat p pentru trecerea la un nou paragraf.Tutorial HTML </body> </html> Efect: Afişarea textului pe o singură linie. cu exceptia celor provocate de <br>. <html> <head> <title> Formatare nobr</title> </head> <body> Acesta este un text care permite ruperea automata a randurilor si potrivirea pe dimensiunea de afisare. Blocul <nobr>text</nobr> anulează wrap-ul automat al cuvintelor pentru textul din container şi ruperile de rânduri generate. Este de remarcat ca se pastreaza randurile asa cum au fost scrise.. Cu alte cuvinte. cele lungi putand fi vazute cu defilarea orizontal.. <p> şi <wbr>. blocul de text cuprins între etichetele <nobr>. Aceasta este extensie Netscape şi Microsoft şi poate servi la aranjarea unor texte în linii predefinite. Exemplul care urmează chiar dacă acest lucru înseamnă depăşirea marginii ferestrei şi derularea acestuia pe orizontală poate fi ilustrativ dacă ve i încerca să modifica i dimensiunea ferestrei de afişare a exemplului. </nobr> <p>Aici s-a iesit de sub influenta nobr.<br> Aici s-a utilizat br pentru trecerea la un nou rand.</nobr> va fi afişat pe o singură linie. <p> <nobr>Aici începe zona sub actiunea tagului nobr. chiar dacă acest lucru înseamnă depăşirea marginii ferestrei şi derularea acestuia pe orizontală. </body> </html> Efect: 66 .

<wbr> cele lungi putand fi vazute cu defilarea orizontal. <p> <nobr>Aici începe zona sub actiunea tagului NOBR.Tutorial HTML Eticheta <wbr> inserează o rupere de rând.<br> Aici s-a utilizat BR pentru trecerea la un nou rand. într-o linie aflată în containerul <nobr>. Exemplul care urmează este bazat pe acelaşi text ca şi exemplul de la <nobr>.<p> Aici s-a utilizat P pentru trecerea la un nou paragraf. Este similar unui cratime op ionale (inten ia autorilor. </body> </html> Efect: 67 . <wbr> Este de remarcat ca se pastreaza randurile asa cum au fost scrise. dar diverse browsere pot să considere obligatorie trecerea pe un nou rând). Utilizarea uzuală este <nobr> text<wbr>text</nobr>. </nobr> <p>Aici s-a iesit de sub influenta NOBR. dar în cadrul propozi iei lungi s-au introdus tag-uri <wbr>. Urmări i ce se întâmplă cu textul la modificarea lă imii ferestrei. <html> <head> <title> Formatare wbr </title> </head> <body> Acesta este un text care permite ruperea automata a randurilor si potrivirea pe dimensiunea de afisare.

la stânga şi este zdren uit în partea dreaptă. implicit. textul. adaptat programării în Web. Pentru structurarea şi organizarea informa iilor din paginile web se pot utiliza frame-uri (marcajul <frame>). nu se vor interpreta trecerile pe un rând nou (CR/LF-urile). prin care la un moment dat se afişează mai multe ferestre con inând fiecare câte o pagină. respectiv lansării în execu ie.Tutorial HTML 6. dar mai ales pentru că toate browserele efectuează wrap automat ceea ce poate interfera inadecvat cu formatările autorului. desigur. Aceasta are justificarea că documentele trebuie să fie afişate pe maşini diferite. În cazurile când este necesară o anumită formă de curgere a textului. Acestea sunt scrise în limbajul Java. aceasta se realizează prin tag-uri speciale. care se remarcă prin: Lăsarea unui spa iu vertical suplimentar după el. Mai men ionăm faptul că în ultimele versiuni ale limbajului HTML şi ale browser-elor s-a introdus posibilitatea integrării. Formatarea textului Cel mai important element al unei pagini web este. Observa ii. 1. un limbaj cu caracteristici distribuite şi obiectuale. prin navigator. alinierile efectuate din tastatură etc. ele se numesc "applet"-uri (aplica ii) şi se introduc în 68 . Textul este aliniat. Introducerea şi gestiunea frame-urilor se realizează foarte convenabil folosind editoarele HTML. În lipsa unor marcaje adecvate. Unitatea principală de text este paragraful. 2. a unor aplica ii.5.

size – permite alegerea grosimii liniei. de latime 50%. width – permite stabilirea lungimii liniei. Într-o pagină Web pot fi inserate linii orizontale. <hr>Urmeaza o linie aliniata in centru . Exemplu: <html> <head> <title> Linii orizontale</title> </head> <body> O linie implicita este cu aliniere la stanga. latime 100%. 69 . Pentru a configura o linie orizontală se utilizează următoarele atribute ale etichetei <hr>: align – permite alinierea liniei orizontale. Ultimele versiuni de editoare HTML permit introducerea interactivă a applet-urilor Java. color – permite definirea culorii liniei. grosime 12 pixeli .Tutorial HTML sursele HTML cu marcajul <app> sau <applet>. grosime 5 pixeli . de culoare rosie. grosime 2 cu umbra. fara umbra. Marcajul <hr> introduce o linie orizontală şi trece la un rând nou. <hr align="right" width=150 size=12 color="red"> </body> </html> Efect: Observa ie. noshade – când este prezent defineşte o linie fără umbră. de latime 150 de pixeli. Acest lucru se face cu ajutorul tag-ului singular <hr>. Linii orizontale: <hr [align="left"|"center"|"right"] [width=n (pixeli)|n% (din lă imea paginii)] [size=n (pixeli)] [color="#rrggbb"|"color"] [noshade]>. <hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta .

. 70 .Tutorial HTML Centrarea textului. echivalentă cu <p align=center>. Blocul introdus de etichetele <center>. Cu ajutorul etichetei paragraf <p> este posibilă trecerea la o linie nouă şi permite: inserarea unui spa iu suplimentar înainte de blocul paragraf. 2. uneori. Etichetele pentru blocuri de text nu se referă la particularită ile caracterelor ce compun textul. Exemplu: <html> <head> <title> Linii orizontale</title> </head> <body> <center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body> </html> Efect: Observa ii. Blocuri de text. Utilizarea tag-ului <center> este. Blocul paragraf: <p [align="left"|"center"|"right"|"justify"]> text [</p>]. Unele editoare HTML convertesc tag-ul <center>text</center> în <center><p>text</p></center> care introduce efectul suplimentar al formării unui nou paragraf cu textul centrat (vezi <p> – blocul paragraf). Anumite browsere nu recunosc acest tag. ci la func iile pe care le poate avea un bloc de text în cadrul paginii Web. 1.</center> aliniază centrat toate elementele pe care le con ine.. 3. Toate aceste etichete produc automat trecerea la un rând nou şi adăugarea unui spa iu suplimentar.

apare un inconvenient de ordin estetic şi anume faptul că. prin această for are. dacă se foloseşte delimitatorul </p> (acesta fiind op ional). Paragraf aliniat in centru. Exemplu: <html> <head> <title> Blocuri paragraf</title> </head> <body> Prima linie <p> Linii generate de un paragraf (implicit paragraful este aliniat la stanga). Paragraf aliniat la dreapta. 1. Paragraf aliniat in centru. alinierea orizontală a textului cu ajutorul atributului align. Paragraf aliniat la dreapta. </body> </html> Efect: Observa ii referitoare la utilizarea paragrafelor. <p align="right"> Paragraf aliniat la dreapta. Paragraf aliniat in centru. Paragraf aliniat in centru. Utilizarea repetată paragrafelor goale (adică o succesiune de elemente sub forma <p><p><p>) în scopul realizării unui spa iu mai mare între două 71 . Paragraf aliniat in centru. 2. Paragraf aliniat in centru. <p align="center"> Paragraf aliniat in centru. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. spa iul dintre cuvinte nu va mai fi acelaşi. Paragraf aliniat la dreapta. el variind în func ie de modul în care se va umple rândul respectiv. Paragraf aliniat la dreapta.Tutorial HTML inserarea unui spa iu suplimentar după blocul paragraf. Prin alinierea unui paragraf la ambele margini (justify).

4. este indicat să nu fie omis.</blockquote>.Tutorial HTML paragrafe nu constituie o solu ie corectă. pentru că citirea textului sursă se face mai uşor.</blockquote> cuvinte care . Între două paragrafe va rămâne un rând liber. În plus. Daca dorim sa modificam spa iul dintre paragrafe va trebui să utilizăm CSS. </body> </html> Efect: 72 . Churchill a zis despre un politician al vremii: <blockquote>are toate calitatile pe care le detest si nici un viciu pe care sa-l admir. urmând ca restul paragrafelor goale să fie ignorate.. Pentru ca un bloc de text să fie indentat (marginea din stânga a textului să fie deplasată la dreapta la o anumită distan ă fa ă de marginea paginii). Distan a dintre paragrafe poate fi modificată dar acest lucru nu poate fi realizat prin intermediul elementelor existente în HTML. Chiar dacă utilizarea tag-ului de sfârşit (</p>) nu este obligatorie. Chiar dacă un browser poate interpreta corect acest lucru există browsere care nu citesc decât un singur paragraf gol. utilizarea ambelor tag-uri uşurează munca atunci când este nevoie să se facă modificări în documentul ini ial. 3. Până la apari ia CSS. Aceasta regulă este bine să fie aplicată tuturor etichetelor HTML. Exemplu: <html> <head> <title> Indentarea unui bloc</title> </head> <body> W. distan a dintre două paragrafe putea fi modificată cu ajutorul elementului <br>. Această metodă dă rezultate bune dar nu permite un control foarte riguros asupra spa iului dintre paragrafe... Indentarea unui bloc.. Lipsa acestui tag va face ca elementul imediat următor să nu mai fie pozi ionat la un rând distan ă fa ă de paragraf. acesta trebuie inclus între etichetele <blockquote>.

<br> A crown it is that seldom kings enjoy.<br> Not decked with diamonds and Indian stones <br> Nor to be seen: my crown is called content. Observa ie. </blockquote> <p align=center> William Shakespeare </body> </html> Effect: textul va fi văzut ca o strofă..Tutorial HTML Alt exemplu: <html> <head> <title> Alta indentare blockquote </title> </head> <body> <blockquote> My crown is in my heart. Preformatarea textului. indentată din ambele păr i (efectul tag-ului <blockquote>) şi cu împăr irea corectă în versuri (efectul tag-urilor <br>): Exerci iu. Încerca i să modifica i dimensiunile ferestrelor deschise de browserul utilizat şi observa i efectul asupra formatării. pentru a insera un citat într-un text. în special. Ştim despre caracterul "spa iu" că este luat în considerare de browser doar dacă este inserat explicit prin &nbsp. când acesta depăşeşte câteva linii. de regulă. Tag-ul <blockquote> se utilizează. not on my head. Blocul 73 .

O singura linie. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este align – aliniere orizontală. O singura linie.Tutorial HTML <pre>. O singura linie. O singura linie.</pre> este indicat pentru a insera rânduri vide (spa iu între rândurile succesive)... Urmatorul bloc este aliniat la dreapta. O singura linie. Un bloc <div> admite şi atributul "nowrap" care interzice întreruperea rândurilor de către browser. Într-un bloc <pre>. Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este folosirea delimitatorilor <div>.. O singura linie.. <html> <head> <title> Blocul div </title> </head> <body> Aceasta linie este o linie normala.</div>.. <html> <head> <title> Bloc preformatat</title> </head> <body> Orar:<pre> Ora/Ziua Luni Marti 8:00 9:00 </body> </html> Efect: Romana Geografie Matematica Istorie Miercuri Sport Fizica </pre> Divizarea blocurilor: <div [align=”left”|”center”|”right”] [nowrap]> text </div>. O singura linie.<br> O singura linie. O singura linie. O singura linie. semnifica ia marcajelor HTML se păstrează.</pre>.. <div align="right"> O singura linie.<br> 74 .<br> O singura linie.

Tutorial HTML </div> <div align="center"> Bloc aliniat pe centru. Tag-ul <div> marchează doar locul unde începe o nouă sec iune în document. deocamdată.<br> <div align=right> Se începe alta sectiune. Atributul align indică alinierea textului pentru întreaga diviziune. i.</div> poate include alte subblocuri. </body> </html> Efect: 75 .<br> Bloc aliniat pe centru.. <div> Este o noua sectiune. de fapt. Un bloc <div>. <html> <head> <title> Efecte cu div </title> </head> <body> Inceputul documentului. nu se produce absolut nimic în prezentarea documentului. Bloc aliniat pe centru. singurul motiv pentru care poate.</div> Nu se modifica nimic. sau cu posibilitatea de a schimba alinierea textului. Bloc aliniat pe centru. Următorul exemplu arată că tag-ul <div> nu produce trecerea pe un rând nou. iii. Este.<br> Bloc aliniat pe centru. ca un simplu comentariu. Bloc aliniat pe centru. să apară tag-ul <div>.<br> </div> </body> </html> Efect: Observa ii.. ii. </div> Textul precedent este aliniat pe dreapta. În lipsa op iunii align.

.. Aceste marcaje interpretează corect caracterele "spa iu".Tutorial HTML Blocuri <xmp>. Textul afişat în pagină este monospa iat.. Ele încadrează comenzile şi atributele de afişare a elementelor într-o pagină.</xmp>. Dacă dorim ca un fragment de text să con ină astfel de caractere.. Într-un fişier HTML. caracterele "<" şi ">" au o semnifica ie specială pentru browser. acel fragment trebuie încadrat între perechile de etichete: <xmp>.. Exemplu: <html> <head> <title>Exemplu cu xmp</title> </head> <body> Un fisier html standard arata astfel: <xmp> <html> <head> <title> </title> </head> <body> O pagina Web . </body> </html> </xmp> </body> </html> Efect: 76 .. "tag" şi "CR/LF".</xmp> (80 de caractere pe rând).

bine organizat şi aşezat în pagină va face din pagina dumneavoastră un mediu accesibil şi prietenos care îl va stimula pe vizitatorul acesteia să parcurgă cu plăcere informa iile oferite. cum este Times New Roman. Un text lizibil. cât mai uşor de parcurs de către cititori.Tutorial HTML 6. astfel că textul va fi afişat de browser cu fonturile prestabilite. • Nu folosi i fonturi de dimensiuni prea mici sau fonturi cu serife. Verdana. Deşi este tipul cel mai utilizat pentru publica iile tipărite. • Nu folosi i prea multe tipuri de fonturi şi nici tipuri de fonturi rare. bold). menite să vă ajute la crearea unor texte lizibile. Textele scrise cu majuscule sunt mai greu de citit. Aceasta este o practică obişnuită în ziare şi reviste dar nu este potrivită într-o pagină Web deoarece for ează vizitatorul ca odată ajuns la baza paginii să o deruleze din nou pentru a citi ce-a de-a două coloană. textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Prefera i tipurile Arial. 77 . scris cu caractere de dimensiune potrivită. nu folosi i caractere cursive (înclinate. De asemenea. Helvetica. Sugestii privind aspectul textului Aspectul textului într-o pagină Web este esen ial pentru calitatea acesteia. sau italice) în exces. Iată câteva sfaturi referitoare la aspectul paginilor Web. • Nu face i exces de caractere aldine (îngroşate. • Nu aranja i textul în pagină pe două coloane.6. • Nu folosi i numai litere mari (majuscule). Folosirea unui mare număr de fonturi de dimensiuni şi culori diferite va face ca paginile să arate încărcate şi să fie greu de citit. Limita i-vă la a accentua cuvinte sau por iuni reduse din text. Folosirea tipurilor de fonturi rare aduce după sine riscul ca vizitatorul să nu le aibă instalate pe computerul propriu.

În acest fel.Tutorial HTML • Este bine să folosi i fiecare etichetă în scopul pentru care a fost ea definită. scad şansele ca paginile dumneavoastră să fie identificate şi citite de cei interesa i. Multe motoare de căutare scanează pagina în căutarea titlurilor şi pe baza lor construiesc o schi ă a paginii. adică pentru a fi citite. pentru a-şi atinge scopul. cel mai frecvent prin intermediul motoarelor de căutare. trebuie mai întâi descoperite de cititori. Observa ie. Motoarele de căutare indexează paginile Web şi în func ie de elementele (etichetele) care sunt incluse în ele iar folosirea lor neadecvată conduce la o indexare eronată a paginii dumneavoastră. Nu uita i că paginile vor fi publicate pe Web. Nu folosi i etichetele de titlu pentru a accentua anumite păr i ale textului care nu sunt titluri. unde. Dacă ve i folosi etichetele de titlu pentru a accentua anumite păr i ale textului (opera ie pe care o pute i realiza în mod corect folosind eticheta <font>) ve i oferi informa ii eronate motoarelor de căutare. Nu folosi i eticheta <address> pentru a insera alte texte decât adrese sau eticheta <cite> pentru a realiza scrierea cu caractere italice a textului. 78 .

com/ . port reprezintă numărul portului de comunica ie prin intermediul căruia browserul se conectează la server.com/carti. cum ar fi HTTP. path. poştă electronică. Există mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute: etichetele care introduc legături.html. fiecare servind unui alt tip de comunica ie: HTTP.Tutorial HTML 7.autor. oferind informa ii despre numele serverului pe care este stocată acea resursă precum şi despre localizarea ei.domain reprezintă identificatorul serverului pe care este găzduit fişierul respectiv. Serverele de in mai multe astfel de porturi. Toate acestea folosesc aceeaşi sintaxă a adresei URL pentru a specifica loca ia unei anumite resurse.domain[:port]/path. Gopher. Acest identificator poate fi adresa IP a serverului sau numele său.autor. Legături în documente HTML 7. Adrese URL O adresă URL constă dintr-un şir de caractere care identifică în mod unic o anumită resursă. etc.filename unde: • tip-resursă reprezintă unul dintre protocoalele de transfer al informa iilor.filename reprezintă localizarea ierarhică a fişierului în sistemul de directoare de pe server. • • • Iată câteva exemple de adrese URL împreună cu explica ii referitoare la sintaxa lor: http://www. host. Numărul portului trebuie precizat numai în cazul când acesta este diferit de 80.html Această adresă URL indică documentul HTML. indiferent de tipul acesteia. FTP. care se află în directorul rădăcină al serverului www. imagini sau formulare.resursă://host. Sintaxa generală a unei adrese URL este: tip. numit carti.com Această adresă indică prima pagină 79 http://www. Portul prestabilit în cazul transferului prin HTTP are numărul 80. Telnet. etc. FTP. Aceasta constă într-unul sau mai multe nume despăr ite prin caracterul "/" (slash).2.autor.

autor. • path. atunci când dorim să adresăm un fişier aflat pe computerul propriu putem omite prima parte a adresei URL ob inând următoarea formă: C:\My Documents\Work\culori. Cele 80 . În cazul când fişierul este stocat pe propriul calculator se foloseşte o adresă http://www.html care este salvat în folderul de lucru Work din My Documents pe computerul personal va avea următoarea adresă URL: file://localhost/C:\My Documents\Work\culori. directoarele şi subdirectoarele care formează calea către fişier sunt despăr ite prin caracterul "\" (backslash). În acest caz. numele directoarelor care fac parte din calea către resursă sunt despăr ite prin caracterul "/" (slash).html#webdesign În acest exemplu este indicată calea spre documentul HTML carti. dar specificând şi numărul portului care este diferit de cel prestabilit.com.filename unde: • localhost reprezintă numele computerului personal pe care este stocat fişierul (acelaşi pe care rulează browserul).Tutorial HTML (home page) a aceluiaşi server. Termenul localhost poate fi omis. http://www. deoarece este numele prestabilit al computerului propriu.html sau file:///C:\My Documents\Work\culori.com/carti.html Observa ie.html În practică. În cazul resurselor stocate pe servere externe.autor.filename De exemplu fişierul culori. dar specificându-se o anumită sec iune a acestui document. sec iune denumită webdesign.filename reprezintă localizarea fişierului în structura de directoare conform regulilor sistemului de operare.autor.html aflat pe acelaşi server. browserul va accesa fişierul folosind facilită ile obişnuite ale sistemului de operare de pe computerul propriu. În acest caz este necesară prezen a unui caracter "/" suplimentar: file:/// path. Exemplul indică spre prima pagină a serverului www.com:8080/ URL de forma următoare: file:// localhost / path. La fişierele stocate pe computerul propriu.

nu sunt diferen iate în documentul afişat pe ecran. Marcajul utilizat pentru ambele tipuri de legături este <a> </a>.jpg aflat pe discul C:. folderul Imagini are următoarea adresă URL: C:/My Documents/Imagini/foto.2. Cele două tipuri de marcaje pot fi prezente simultan deşi legătura la o altă legătură produce o oarecare întârziere. etc. Link-ul începe de la ancora "sursă" şi arată către ancora "destina ie". denumit ancorare). textul legăturii va apărea pe ecran subliniat. Mai mult.2. Deşi sintaxa lui poate fi prezentată unitar. un clip video. un element dintr-un document HTML. link-ul a fost una din for ele primare care au dus la succesul Webului. un program.).1. un fişier numit foto. legături către alte loca ii: acestea se vor caracteriza prin textul legăturii (vizibil în documentul afişat pe ecran) şi prin adresa la care se poate efectua un salt. definiri de nume care au doar rolul de a introduce inte pentru legături. care poate fi orice resursă Web (de ex. o buca ică de sunet. Deoarece marea majoritate a serverelor Web folosesc sistemul de operare UNIX. Deşi este un concept simplu.Tutorial HTML două moduri de scriere sunt specifice celor două sisteme de operare: UNIX. adresa intă a legăturii apare (dacă nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci când pointerul mouse-ului este pe textul legăturii. Astfel. 2. această conven ie s-a extins şi la adresele URL referite de pe sisteme Windows. o imagine. Legături (link-uri) Un link (legătură) este o conexiune de la o resursă Web la alta. respectiv DOS-Windows. într-o culoare diferită de cea a textului adiacent. în My Documents. Marcajele pentru ancorare pot fi de două tipuri: 1. în continuare se discută separat principalele forme ale tag-ului. Legătura la un URL <a href="url" [accesskey ="caracter"] [tabindex = nr] [rel="tip-rel"] [rev="tip-rev"] [title="title-name"] [target="fereastra"|_blank|_parent|_self|_top]> text_legatura </a> 81 . Un link are două capete (numite ancore) şi o direc ie (un loc marcat. 7.jpg 7. calea către resursele stocate pe ele se scrie respectând conven iile acestui sistem. un document HTML. a provenind de la anchor.

Tutorial HTML unde: • url este adresa (absolută sau relativă) a documentului către care se poate efectua saltul. • title-name determină apari ia unei mici ferestre (tool tip) în pagina Web când mouse-ul se afla pe o legătură. <area>. se permite introducerea textului. linkul. browserul urmează. valoarea sa este un şir (între ghilimele). fereastră în care este afişată valoarea dată acestui atribut. Ac iunea care are loc când un element receptionează focusul depinde de element. unde este ancora. Aceasta valoare trebuie să fie un număr între 0 şi 32767. <input>. Când un utilizator activează un buton radio. Există mai multe tag-uri care suportă atributul accesskey: <a>. utilizarea unei adrese relative pentru documentele din acelaşi director sau de pe aceeaşi maşină reduce mult timpul necesar încărcării şi permite o mai bună între inere a paginii. <button>. • caracter atribuie o tastă de acces la un element. în general. O tastă de acces este un singur caracter din setul de caractere al documentului. • • tip-rel precizează tipul de rela ie care leagă documentul. <button>. etc. de documentul referit. valoarea sa este un şir (între ghilimele). Observa ie. <select> şi <textarea>. Datorită utilizării sporadice a acestor atribute nu s-a efectuat o standardizare a valorilor pentru tipurile de rela ii. care are astfel menirea de a furniza 82 . <area>. De exemplu. <input>. • nr specifică pozi ia elementului curent în ordinea tab pentru documentul curent. Informa ia respectivă este interpretată de browsere după necesită i. Apăsând o tastă de acces atribuită unui element. <legend> şi <textarea>. <object>. browserul schimbă valoarea butonului radio.Ordinea tab defineşte ordinea în care elementele vor recep iona focusul când sunt navigate de utilizator via tastatură. când un utilizator activează un link definit de un element <a>. se dă focusul acelui element. Când utilizatorul activează un câmp text. <label>. tip-rev precizează tipul de rela ie care leagă documentul referit de documentul prezent (rela ia inversă pentru tip-rel). Elementele următoare suportă atributul tabindex: <a>. Ordinea tab poate include elemente imbricate în alte elemente.

Valorile posibile sunt: 1. _blank . 5. în lipsă se va considera adresa drept titlu. 83 . liste sau tabele se face plasând eticheta <a> în interiorul acestora. Pentru proiectarea modului de afişare sunt disponibile trei atribute ale tag-ului <body>: 1. • target este utilizat pentru a preciza unde va fi afişat documentul referit (dacă se va activa legătura. dar care nu mai poate con ine alte legături. Aceasta înseamnă că dacă ve i face click pe un link. fonturi.în aceeaşi fereastră ca şi documentul curent (valoare implicită). În acest sens. 2. legăturile deschid pagina pe care o referă în fereastra curentă. _top . Acest text este afişat diferen iat fa ă de textul adiacent lui pentru a se aten iona că este locul de unde se poate "naviga" către alte adrese.Tutorial HTML informa ii suplimentare despre semnifica ia unei legături. 3. formatat sau nu. fereastra . Nu este permisă imbricarea mai multor etichete <a>. Folosirea etichetei <a> imbricată cu etichete de formatare a textului. 4. _self .indicând exact fereastra de afişare (dacă nu există. este creată).fereastra părinte (cea anterioară). vlink="#rrggbb"|"culoare" – Viewed LINK=legătură vizitată (default roşu). noua pagină se va încărca în locul paginii deja deschise (în aceeaşi instan ă a browserului). • text_legatura poate fi orice text (care poate să con ină imagini). _parent . standardul HTML consideră incorectă o construc ie ca aceasta: <a href="adresa_url"><font face="tip">legatura</font></a> În locul ei vom folosi construc ia: <font face="tip"><a href="adresa_url">legatura</a></font> Observa ie. bineîn eles).o fereastră nouă. Pentru a reveni la pagina anterioară trebuie să apăsa i butonul Back al browserului. În mod prestabilit. link="#rrggbb"|"culoare" – legătură nevizitată (default albastru). 2.în fereastra ini ială.

<p> Pentru a întelege exemplul. dacă text_legatura este doar text. chenarul este chenar al imaginii..google.<p> <a href="http://www. alink="#rrggbb"|"culoare" – Active LINK=legătură activă (default portocaliu.<p> Culoarea legăturii nevizitate este <em>blue</em>. Fiecare browser are. totuşi. <html> <head> <title> Atributul title </title> 84 . comportări diferite în interpretarea acestor atribute.ro">Conexiunea</a><p> De remarcat că textul documentului este scris în <em>darkgreen</em> iar hârtia este o nuantă de alb.Tutorial HTML 3. Reamintim că atributele se vor scrie în tag-ul de început <body>: <body link= . Pentru a reveni va trebui să urmati indicatiile din documentul care se va activa. În cazul când se utilizează o imagine drept text_legatura. în timpul activării şi după ce vă veti întoarce din documentul către care se efectuează saltul..>. observati culoarea legăturii din paragraful următor înainte de a o activa.</em> </body> </html> Efect: Exemplul următor ilustrează utilitatea atributului title. atunci chenarul este doar inferior (subliniere). a legăturii vizitate este <em>purple</em> iar ultima conexiune activată este <em> lime</em>. nu prea se foloseşte). Să urmărim exemplul: <html> <head> <title>Alegerea culorilor pentru legături</title> </head> <body text="#006666" bgcolor="#f0f0f0" link="blue" vlink="purple" alink="lime"> Acesta este un exemplu în care se prezintă o legătură către un alt document.

Tutorial HTML </head> <body> <h1 align="center">Atributul title</h1><hr> <a href="http://www.google.com" title="Legatura catre Google.com">Google</a> </body> </html> Efect:

Exemplul următor redă modul în care se deschide o pagină într-o nouă fereastră: <html> <head> <title>Deschiderea paginii</title> </head> <body> <h1 align="center">Deschiderea paginii in alta fereastra</h1> <hr> Pagina de mai jos se va deschide intr-o fereastra noua <p> <a href="Atributul title.htm" target="_blank">Utilitatea atributului title</a> </body> </html> În foarte multe site-uri a i observat, probabil, existen a, în partea de jos a paginii, a unui bloc de text care con ine legături către paginile care compun site-ul, legăturile fiind delimitate de mici linii verticale, ca în exemplul de mai jos: |Link1| |Link2| |Link3|

85

Tutorial HTML Utilitatea acestei bare este legată de facilitarea navigării în site, mai ales în cazurile când dimensiunea paginii depăşeşte un ecran. În acest caz, utilizatorul trebuie să deruleze, la citire, paginile pe verticală, astfel că link-urile de pe bara superioară de navigare nu mai sunt accesibile. O astfel de bară secundară de navigare se poate realiza procedând ca în exemplul următor: <html> <head> <title>Bara de navigare</title> </head> <body> <h1 align="center">Bara de navigare</h1><hr> <h4 align="center"> <a href="optiune1.html">|optiune1|</a> <a href=" optiune2.html">| optiune2|</a> <a href=" optiune3.html">| optiune3|</a> </h4> </body> </html> O pagină care con ine o astfel de bară de navigare va avea aspectul următor:

Bara verticală inserată între textele care trimit la paginile respective este de obicei plasată, pe tastatură, pe aceeaşi tastă cu caracterul "\" (backslash). Dacă dori i ca bara să facă parte din textul activ, o ve i insera între etichetele <a> şi </a>, altminteri ea trebuie plasată în afara acestora, astfel: |<a href="optiune1.html">optiune1</a>| O pagină Web poate con ine legături nu doar către alte fişiere HTML, dar şi către fişiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Nefiind vorba despre un fişier HTML, browserul nu va putea să îl proceseze, astfel că va activa procesul de transfer sau de descărcare (download), urmând ca, după transferul integral al fişierului, utilizatorul să îl deschidă cu un program adecvat.
86

Tutorial HTML În exemplul care urmează, atunci când se efectuează click pe legătură se deschide caseta de dialog File download care permite: • • salvarea fişierului pe disc sau deschiderea fişierului în loca ia curentă

<html> <head> <title>Legaturi catre fisiere oarecare</title> </head> <body> <h1 align="center">Legaturi catre fisiere oarecare</h1><hr> <A href="html.zip"> Link catre fisierul download.zip </a> </body> </html> Figura alăturată redă efectul activării unei legături către un fişier oarecare.

Într-o pagină Web se pot crea legături care permit lansarea în execu ie a aplica iei de expediere a mesajelor electronice a celui care vizitează pagina. Făcând click pe textul care înso eşte legătura, programul de poşta electronică al vizitatorului paginii se va deschide automat, având câmpul adresei destinatarului, "To:" deja completat cu adresa de mail specificată în pagină. Pentru a realiza acest lucru se foloseşte comanda mailto: atributul href primind o valoare ca mai jos: <a href="mailto:adresa_e-mail"> Dacă pagina este vizualizată cu browserul Internet Explorer iar vizitatorul are instalat un e-mail manager, cum sunt de pildă aplica iile Microsoft Outlook sau Outlook Expres, activarea legăturii va determina deschiderea unuia dintre aceste programe. În cazul în care managerul de e-mail default este de alt tip decât aplica ia Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nouă pagină Send şi cu adresa destinatarului pre-completată.
87

loca ia denumită ( intă). Crearea unei loca ii denumite. Nu apare în pagina vizualizată. iar câmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de asemenea completat automat cu adresa autor@domeniu. se va marca locul prin <a id|name="denumire">[text-denumire]</a> unde: • denumire este numele sub care locat ia poate fi referită în legături hipertext. Legătura la o sec iune Pentru a putea naviga în cadrul documentului activ este nevoie de două etape: 1.2. numele sec iunii către care se poate naviga (poate să lipsească). similar introducerii unei etichete într-un limbaj de programare. În exemplul următor. 88 .com aşa cum rezultă din figura alăturată. prin intermediul serviciului mailto:.2. 1. <html> <head> <title>Expediere de mesaje</title> </head> <body> <h1 align="center">Expediere de mesaje electronice </h1><hr> <a href="mailto:autor@domeniu. Ambele etape se efectueaza prin tag-ul <a> şi sunt explicate în continuare. în momentul când vizitatorul paginii face click pe textul "Trimite i un mesaj". se va deschide programul de poştă electronică încorporat în browser. • text-denumire este textul care apare în pagina vizualizată. marcarea locului unde se poate efectua saltul. Acolo unde este necesar să se efectueze saltul.Tutorial HTML Dacă pagina este vizualizată în Netscape.com" title="adresa mea de mail"> Trimiteti un mesaj </a> </body> </html> 7. 2. constituie. nu este eviden iat în niciun mod. marcarea locului de unde se poate efectua saltul (ancorarea). aplica ia de poştă electronică este lansată automat. în general.

Se va urmări modul în care se marchează locurile de interes. <html> <head> <title> Legătura la o sec iune </title> </head> <body> <a id="cuprins"><h2>Cuprins</h2></a> <a href="#sect1">Sectiunea 1</a> <a href="#sect2">Sectiunea 2</a> <a id="sect1"><h2>Sectiunea 1 </h2></a> . Marcarea ancorării se face uzual printr-un tag <a> de forma: <a href="#denumire">text_legatură</a> unde: 1. în cadrul paginii. unde. Din cuprins se poate efectua un salt la oricare dintre sec iuni iar din finalul fiecărei sec iuni se poate reveni la cuprins. În cazul în care semnul este omis.. 1. continutul sectiunii 1 . denumire este numele unei loca ii denumite din acelaşi document. Observa ii. este obligatorie. Atributul id este un atribut universal. evident.. 2. <small>Revenire la 89 . text_legatură este textul care va apărea în document sub aspectul uzual al unui punct de salt posibil. Acesta indică browserului faptul că este vorba despre o legătură internă. adică poate fi ataşat oricărui element al unei pagini Web.. nu îl va găsi. se recomandă să vă denumi i toate fişierele sau numele pentru ancore cu litere mici. care poate fi ataşat numai anumitor elemente. Pentru a evita greşelile. 2. Legătura hipertext la o loca ie denumită din document. browserul va căuta acest nume în afara paginii. Acest atribut va înlocui complet atributul name.Tutorial HTML 2. Exemplul următor cuprinde schema unui document care con ine un cuprins şi două sec iuni. Numele fişierelor care reprezintă valori ale atributului href sunt case sensitive. Acelaşi lucru se întâmplă şi cu textul care desemnează valorile atributului name şi id. plasat înaintea numelui ancorei. prezen a semnului #..

atributul primeşte ca valoare chiar numele fişierului.. <html> <head> <title>Pagina 1</title> </head> <body> <h1>Pagina 1 </h1><hr> <a href="pagina2..reprezintă textul pe care se face click cu mouse-ul pentru a activa legătura.html">text legatura</a> unde: • href reprezintă atributul care stabileşte calea către inta cu care se face legătura.în general. <small>Revenire la <a href="#cuprins">CUPRINS </a> </small> </body> </html> Pentru a realiza o legătură către o pagină aflată în acelaşi director (folder) se procedează astfel: <a href="nume_fisier. Acest text este afişat diferit fa ă de restul textului .htm. În exemplul care urmează este realizată o legătură reciprocă între două pagini aflate într-un acelaşi folder de lucru. (De exemplu "Click aici" ).. subliniat şi de culoare albastră.htm iar exemplul care urmează cu numele pagina2. <html> <head> <title>Pagina 2</title> </head> <body> <h1>Pagina 2 </h1><hr> <a href="pagina1.htm">Link catre pagina 1 </a> </body> </html> 90 .Tutorial HTML <a href="#cuprins">CUPRINS</a> </small> <a nume="sect2"><h2>Sectiunea 2 </h2></a> . • text explicativ .. Dacă fişierul intă este în acelaşi director.htm">Link catre pagina 2 </a> </body> </html> Salva i exemplul anterior cu numele pagina1. continutul sectiunii 2 .

Adrese absolute şi adrese relative Pentru a putea localiza un fişier în structura ierarhică de directoare. Adresarea absolută se realizează precizând adresa absolută. o legătură către fişierul culori. prin care se poate ajunge la fişierul de care vrem să legăm pagina.piata-cartii.html se va face în modul următor: <a href="C:/Manual HTML/Exemple/culori.3. Ambele documente HTML trebuie salvate în acelaşi folder.html se află plasat pe discul C:. Întotdeauna este bine să adauga i la sfârşit un „/” când da i adresa spre un subfolder.ro/carti-editura/RAO/” Exemplu incorrect: href=”www. Dacă nu pune i „/” la sfârşit. Exemplu corect: href=”www.Tutorial HTML La fel cum a i procedat şi până acum. subdirectorul Exemple. se poate folosi adresarea absolută sau adresarea relativă. legătura dintre cele două pagini fiind astfel reciprocă. iar a doua când va face cererea cu „/” adăugat. De exemplu.html Fişierul culori. deschide i una dintre cele două pagini cu browserul şi testa i func ionarea legăturii dintre ele.ro/carti-editura/RAO” 91 .html">Link</a> Obseva ie. 7. atunci browserul va face două cereri: prima în care va adauga automat „/”. Adresa absolută a unui fişier con ine calea (path) precisă şi completă către fişierul respectiv pornind de la directorul rădăcină. în scopul de a stabili o legătură către el. Ve i observa că atunci când vă afla i în Pagina 1 şi face i click cu mouse-ul pe textul Link catre pagina 2 se va deschide cel de-al doilea document HTML şi invers. în directorul Manual HTML.piata-cartii. C:/Manual HTML/Exemple/culori.

Prin urmare. Să presupunem că ne aflăm în documentul legaturi. în raport cu directorul curent.. Adresarea relativă precizează calea către documentul cu care facem legătura pornind de la documentul în care ne aflăm.. Pentru a urca un nivel în structura de directoare se foloseşte şirul de caractere "./" se ajunge în folderul părinte. întrucât folderul curent. În acest caz.gif din folderul My Pictures. în care se află pagina de pornire este C:/My Documents/Manual HTML.Tutorial HTML Adresa relativă a unui fişier precizează pozi ia acestuia în raport cu documentul HTML din care este apelat. care este C:/My Documents.html plasat în folderul de lucru Manual HTML. numit My Pictures. va avea următoarea formă: <a href=". după care se specifică numele fişierului din acest folder cu care vrem să stabilim legătura. De aici se continuă calea în folderul My Pictures.html. În afară de folderul Manual HTML în care lucrăm..gif Dorim să realizăm o legătură cu un fişier numit trandafir./" (punct punct slash) se urcă un nivel în ierarhia de directoare./ " Să presupunem că ne aflăm într-un document HTML numit legaturi.html My Pictures trandafir./ My Pictures/trandafir.. plasată în documentul legaturi. 92 . prin utilizarea şirului de caractere ".gif">Deschide imaginea</a> Semnifica ia este următoarea: Prin folosirea şirului de caractere ". în My Documents se mai află un folder.html pozi ionat ca în schema care urmează. eticheta <a>. ca în structura următoare: C: C: My Documents Manual HTML e legaturi.

htm">. dacă am avea legături absolute.html">Link la text</a> Referin ele relative au câteva avantaje: • avem mai pu in de tastat în codul sursă: nu mai tastam calea completă pentru fiecare legătura în parte.Tutorial HTML C: C: My Documents Manual HTML Exemple Legaturi e legaturi.. am putea plasa toate fişierele în acelaşi director (pe hard-disk sau la adresa www. • dacă vom dori să mutam site-ul pe un alt server. Legaturi).com cu http://www.html">Link la text</a> Am urcat un nivel în ierarhie ajungând în directorul Exemple şi am specificat numele fişierului cu care dorim să facem legătura. 93 . care apelează orice alt fişier.com./.html care se află în directorul Exemple (directorul părinte al folderului nostru. nume_server. o legatură relativă plasată în orice fişier. nu trebuie să modificăm nimic.nume_server./text. nume_nou_server. ar fi de forma <a href = "alt_fisier. • în cazul unui site de dimensiuni mici.com/nume_director/)./text. adică în folderul Manual HTML.html Dorim să stabilim o legătură cu un fişier numit text. pentru fiecare ar trebui să înlocuim http://www. Atunci referirea se va face astfel: <a href=".. nu avem nevoie de o organizare mai complicată a site-ului (cu multe directoare). atunci adresarea s-ar fi făcut astfel: <a href=".. • legăturile vor func iona şi în timp ce construim site-ul. care con ine doar câteva pagini (fişiere).html s-ar fi aflat cu două nivele mai sus fa ă de folderul în care lucrăm. într-un director pe hard-disk. Dacă fişierul text.

Comenzi rapide de la tastatură pentru link-uri În exemplul care urmează atribuim o tastă de acces unui element definit de un tag-ul <a>. de remarcat că este necesar caracterul # în fa a denumirii. utilizatorul trebuie să apese în general tasta "Cmd" în plus fa ă de tasta de acces. Tastând această tastă de acces. • text_legatură este textul care va apărea în document sub aspectul uzual al unui punct de salt posibil. cuprins. • denumire este numele unei loca ii denumite din documentul referit. crearea acestora va necesita. 7. drepturi de scriere în acel document.com/specification/contents. De exemplu. Legătura la o loca ie denumită din alt document Marcarea ancorării se face tot printr-un tag <a> în care referin a are un con inut mai complex: <a href="link-url#denumire"> text_legatură </a> unde: • link-url este adresa documentului către care se poate efectua saltul (relativă sau absolută).5.html"> Cuprins</a> Invocarea tastei de acces depinde de sistemul de operare. pe computerele pe care rulează MS Windows.4. evident. În cazul în care documentul intă nu are definite denumiri de loca ii. utilizatorul este trimis către alt document. Exemplu: <html> <head> <title> Titlu de text </title> </head> <body> Treci în <h1>! </h1> <p> 94 . Interpretarea tastelor de acces depinde de browser. Pe sistemele Apple. utilizatorul trebuie să apese în general tasta "Alt" în plus fa ă de tasta de acces. în acest caz.Tutorial HTML 7. Observa ie. <a accesskey="C" rel="contents" href="http://someplace. Link-ul accesat cu cheia de acces se va executa la ac ionarea tastei “Enter”.

fr/" tabindex="1"> Oraşul meu 1</a> <br> <a href="http://www.com/" tabindex="4"> Baza de date de filme online 4</a> <br> <a href="http://www. prin urmare.htm" accesskey="p"> Listă de discu ii în filozofie </a> [Alt] + [p] <br> <a href="http://www. la al patrulea şi.willy-online.de/" accesskey="w"> Willy online </a> [Alt] + [w] </p> </body> </html> Cele mai moderne browsere permit. ave i posibilitatea să specifica i HTML într-o ordine diferită. la primul.imdb.selfhtml/selfhtml.fr/philosophie/listesdediscussion. Pute i oferi utilizatorului posibilitatea de a stabili o legătură prin apăsarea unui buton. În exemplul care urmează fila de căutare se va muta de la primul link la al treilea. trecerea de la un link la altul în ordinea în care sunt definite în fişierul HTML (cu "Enter". în final. Link-ul ales.maville. Cu atributul tabindex putem să men ionăm fila de căutare.fr/" accesskey="t"> Selfhtml </a> [Alt] + [t]<br> <a href="http://www.infonie.fr/" tabindex="3"> Infonie 3</a> </p> </body> </html> 95 .ac-toulouse. [Tab] </h1> <p> <a href="http://french. apoi la cel de-al doilea. Exemplu: <html> <head> <title>Titlu de text </title> </head> <body> <h1> De turism. link-ul poate fi executat). prin tastatură.com/" tabindex="2"> Grafic Versuri 2</a> <br> <a href="http://www. Cu toate acestea.Tutorial HTML <a href="http://www.com. poate fi apoi executat prin apăsarea "Enter".chart-lyrics.

Adresele relative sunt rezolvate în concordan ă cu url de baza./cages/birds. sunt întotdeauna specificate de o adresă. De exemplu.html"> </head> <body> <p>Ati vazut <a href=". Informa ii de cale Pentru a specifica adresa URL a paginii home pentru documentul curent se utilizează tag-ul singular <base>: <base href="url de baza" [target=”nume fereastră”|_blank|_parent|_self|_top]> unde: • url de baza este adresa completă a documentului home pentru documentul curent. linkurile şi referin ele la imaginile externe. cu exceptia celor care sunt redirectate individual prin tag-ul <a>.gif">custile pentru pasari</a>? </body> 96 . Atributul target este extensie Netscape şi Microsoft. atunci toate legăturile din pagina curentă vor fi deschise în fereastra specificată. dată fiind urmatoarea declara ie <base> şi o declara ie <a>: <html> <head> <title>Produsele noastre</title> <base href="http://www. Alte marcaje 7. • dacă se utilizeaza target.6. În HTML.aviary.6.1. programele de procesare a formelor. care poate proveni dintr-o varietate de surse.. foi de stil. etc. Tag-ul <base> permite autorilor să specifice url de baza al documentului în mod explicit.com/products/intro.Tutorial HTML 7. appleturile.

Tag-ul <base> este permis doar în sec iunea <head> a documentului..2. Rela ii între documente Pentru a arata o legătură de la documentul curent la altul.Tutorial HTML </html> Adresa relativă ". 1./cages/birds. se utilizează tag-ul singular <link>: <link [href="link-url"] [hreflang ="cod-de-limbă"] [charset ="set-de-caractere"] [lang="cod-limbă"] [media ="descriptor-media"] [rel="tip-rel"] [rev="tip-rev"] [title="titlu"] [type="nume-tip"]> unde: • • • link-url este adresa (absolută sau relativă) către care există o legatură. Această conversie se potriveşte cu schema activită ii pe Web: serverele trimit documente HTML spre browser ca un şir de octe i. 97 . înainte de orice element care se referă la o sursă externă.6.gif Observa ii. nu este recunoscut de toate browserele. cod-de-limbă specifică limba de bază a resursei desemnate de href şi poate fi utilizat numai când href este specificat. 2.com/cages/birds. set-de-caractere specifică codificarea caracter a resursei desemnate de link. Deşi este un tag din HTML 2.0.gif" se va rezolva ca: http://www. în special pentru a furniza o informa ie internă. Parametrul "charset" identifică o codificare caracter. Informa ia de cale specificată de elementul <base> afectează numai adrese brelative în documentul unde apare elementul.aviary. browserul le interpretează ca pe o secven ă de caractere. 7. care este o metodă de conversie a unei secven e de octe i într-o secven ă de caractere.

cu utilizare posibilă în afaceri. fie A şi B două documente. Atributele rel si rev joacă roluri complementare: atributul rel specifică un link direct şi atributul rev specifică un link invers..html"> </head> . Valoarea implicită pentru acest atribut este "ecran". tipuri de documente referite etc.Tutorial HTML • cod-limbă specifică limba de bază a valorilor atributelor unui element şi con inutului text. ja (japoneza). de (germana). Documentul curent este "Capitolul2. nl (olandeza). Spre deosebire de <a>. tag-ul <link> poate fi utilizat doar în sec iunea <head> şi pot exista mai multe intrări <link>. ru (rusa).. tip-rev specifică rela ia dintre documentul intă şi documentul current. şi sa (sanscrita). Exemplu care urmează ilustrează cum câteva defini ii <link> pot apare în sec iunea <head> a unui document. ur (urdu). Document A: Document B: <link href="docB" rel="foo"> < link href="docA" rev="foo"> 98 Are exact acelaşi în eles ca: . ar (araba). titlu poate fi folosit pentru a denumi legătura (ca informa ie a documentului curent). hi (hindu). De exemplu. el (elena . Codurile primare din două litere sunt rezervate pentru abrevierile limbilor şi includ fr (franceza).. Poate fi un singur descriptor media sau o listă separată cu virgule./index.. pt (portugeza).html"> <link rel="Prev" href="Capitolul1. <html> <head> <title>Capitolul 2</title> <link rel="Index" href=".html"> <link rel="Next" href="Capitolul3. • descriptor-media specifică mediul de destina ie inten ionat pentru informa iile de stil.greaca). es (spaniola).. • • • • tip-rel specifică rela ia dintre documentul curent şi documentul intă. it (italiana). adrese email. Deşi <link> nu are con inut poate fi utilizat pentru a furniza informa ii despre autor. zh (chineza). exploatarea informa iilor inând de programul navigator. Valoarea implicită a acestui atribut este "unknown" ="necunoscută". Fiind în sec iunea <head> nu se afişează nimic în pagina vizualizată. Atributul rel specifică rela ia documentului legat cu documentul curent. nume-tip specifică un nume pentru tipul de legatură (ca informatie internă a documentului).html".restul documentului.

Tag-ul <link>poate fi utilizat pentru a furniza o varietate de informa ii pentru motoarele de cautare. De notat utilizarea atributului charset pentru manualul în arabă şi de asemenea. destinate pentru diferite medii.com/manual/arabic.ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.html"> <link lang="fr" title="La documentation en Fran&ccedil. linkuri către versiuni alternative ale documentului. utilizăm atributul hreflang pentru a spune motoarelor de căutare unde să găsească versiunile în olandeză. pentru elementul <link> spunând că manualul francez este în franceză.html"> <link title="Manualul in portugheza" type="text/html" rel="alternate" hreflang="pt" href="http://someplace. linkuri către pagina de start a unei colec ii de documente. tipurile media şi tipurile de linkuri pot fi combinate pentru a îmbunătă i manipularea documentului de către motoarele de cautare. • Exemplele de mai jos ilustrează cum informa ia de limbă. portugheză şi arabă a unui document. de exemplu o versiune pregatită special pentru tipărire. În exemplul următor. scrise în alte limbi. <html> <head> <title>Manualul in engleza</title> <link title="Manualul in olandeza" type="text/html" rel="alternate" hreflang="nl" href="http://someplace.com/manual/dutch. utilizarea atributului lang pentru a indica valoarea atributului title.com/manual/french.html"> </head> </html> 99 .html"> <link title="Manualul in araba" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar" href="http://someplace. incluzând: • • linkuri către versiuni alternative ale documentului.com/manual/portuguese.Tutorial HTML Ambele atribute pot fi specificate simultan.

com/manual/start. <head> <title>Manual referinta</title> <link media="print" title="Manualul in postscript" type="application/postscript" rel="alternate" href="http://someplace. spunem motoarelor de căutare unde să găsească versiunea tiparită a manualului. <head> <title>Manual de referinta -.html"> </head> 100 .ps"> </head> Iar în exemplul care urmează. spunem motoarelor de căutare unde să găsească prima pagină a unei colec ii de documente.Tutorial HTML În exemplul următor.com/manual/postscript.Pagina 5</title> <link rel="Start" title="Prima pagina a manualului" type="text/html" href="http://someplace.

Tutorial HTML Notă. Tutorialul va fi completat ulterior cu alte elemente HTML. 101 . Chiar şi în această formă este perfectibil de îmbunătă iri.

Sign up to vote on this title
UsefulNot useful