Luminita Serbanescu informatica

  • View
    213

  • Download
    0

Embed Size (px)

DESCRIPTION

ok

Transcript

1

APLICAII N HTML

GHID PENTRU LUCRRI DE LABORATOR Luminia erbnescu

CUPRINS

41. Introducere n HTML

62. Structura unui document HTML

93. Scrierea de text cu formate n HTML

93.1 Formatarea textului

113.2 Formatarea caracterelor

193.3 Exemple

284. Inserarea de imagini n paginile WWW

284.1 Amplasarea imaginilor ntr-o pagin web

294.2 Alinierea imaginilor

324.3 Dimensiunile unei imagini

344.4 Exemplu

355. Legturi

385.1 Alegerea culorilor pentru legturi

395.2 Exemple

446. Liste n HTML

456.1 Liste de definiii

466.2 Liste neordonate

476.3 Liste ordonate

496.4 Exemple

577. Crearea tabelelor

597.1 Atributele tabelelor

677.2 Atributele celulelor

777.3 Exemple

858. Ferestre n HTML

868.1 Definirea structurii de cadre (frames)

928.2 Exemple

1009. Crearea formularelor folosind HTML

1009.1 Controalele formularului

1159.2 Exemple

12410. Modele de construire a site-urilor web

136Bibliografie

1. Introducere n HTML

HTML e limbajul n care sunt scrise paginile web. Paginile web sunt fiiere cu extensia .html sau .htm care rezid, de obicei, pe serverele de Internet, dar care pot rezida i pe calculatorul dumneavoastr. HTML e acronimul de la HyperText Markup Language, care e numele unui limbaj de marcare ce a nlocuit SGML-ul i a fost conceput n 1989 de Tim Berners-Lee. Fiind i expert n software, Berners-Lee e acum director al World Wide WEb Consortium (pe scurt, W3C), adic al organizaiei care coordoneaz dezvoltarea web-ului (n principal, prin impunerea de standarde pentru limbaje etc.). HTML-ul a cunoscut o popularitate rapid, aproape toate paginile web fiind scrise n acest limbaj.

Fiind un limbaj de marcare, HTML nu utilizeaz instruciuni (ca Pascal-ul sau C-ul) ori comenzi (ca Fox-ul), ci etichete, acestea fiind numite i elemente sau tag-uri. Sintaxa oricrui tag este:

Text

n unele cazuri, atributele pot lipsi. n altele, poate lipsi tag-ul de nchidere: . O pagin web poate conine: text

imagini

fiiere audio

fiiere video

Paginile web se vizualizeaz n browsere, care sunt nite programe de vizitare. Cele mai populare browsere sunt:

Netscape Navigator, care a cunoscut mai multe versiuni, cele mai reuite fiind 4.75 si 4.76 care aveau, totui, defectul ca nu suportau diacriticele. Acestora le-a urmat versiunea 8.0 care suport diacriticele.

Microsoft Internet Explorer, care a ajuns la versiunea 7.

Orice browser prezint, n partea de sus, o fereastr ngust n care se tasteaz adresa paginii web cutate. Un exemplu de adresa ar fi: http://www.upit.ro. Dup tastarea adresei i apsarea tastei "Enter", browserul dumneavoastr i trimite serverului upit.ro cererea de a i se furniza pagina web proprie.

ntr-un fisier html, se pot include:

programe n JavaScript

scripturi CSS

tag-uri care s seteze parametrii unui applet (program scris n Java i care rezid pe reea)

Un fiier html se poate realiza:

manual, scriind tag dup tag n Notepad

cu ajutorul editoarelor HTML precum Homesite, Adobe Golive, Microsoft Frontpage '98 sau 2000, Macromedia Dreamweaver (aplicaia cea mai apreciat de profesioniti ), CoffeeCup HTML Editor , Netscape Composer (recomandat doar nceptorilor). Ultimele dou sunt distribuite freeware (gratuit). Dealtfel, de pe site-urile de download putei descrca un mare numr de editoare HTML, unele n regim freeware, altele n regim shareware. Editoarele v uureaz munca, dar nu v nva HTML, aa c e de dorit s le evitai la nceputul activitii dumneavoastr de webdesigner.

Cum realizm prima pagin web ?

Alocai un director site-ului pe care intentionai s-l realizai.

Click pe butonul Start, apoi pe Programs, Accessories, Notepad. Introducei textul i etichetele. Salvai fiierul cu extensia .htm sau .html n directorul dedicat. Fiierul va aprea ca, s zicem, index.htm. Deschidei fiierul index.htm n Microsoft Internet Explorer. Pentru a aduce modificri fiierului, executai click-dreapta pe suprafaa acestuia i vei obine codul-surs. Dup modificarea fiierului, salvai-l. Observaii:

1. HTML-ul e independent de platform.

2. HTML-ul nu e un limbaj case-sensitive, aa c putem scrie la fel de bine , , sau etc., pentru c n HTML nu se face distincia ntre literele mari i cele mici.

2. Structura unui document HTML

Codul HTML este stocat n fiiere cu extensia .html sau .htm. Un document HTML este un fiier text obinuit (cunoscut i sub denumirea de fiier ASCII) care conine, pe lng informaiile textuale propriu-zise, marcaje pentru utilizarea opiunilor de formatare i de conectare. Un asemenea marcaj se numete TAG. Un tag se introduce in text sub forma: , unde parantezele unghiulare sunt elementele care indic prezenta unui tag. Numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la litere mari / litere mici.

Orice document HTML are dou componente principale:

HEAD (antetul documentului), care conine titlul documentului;

BODY (corpul documentului), care conine textul propriu-zis sub form de paragrafe, liste i alte elemente.

Ce mai simplu document HTML ncepe cu tag-ul i se termin cu tag-ul . ntre acestea se afl cela dou elemente eseniale: head i body.

Tag-urile de marcare: HTML. Acest element transmite browserului c documentul conine informaii n cod HTML. Extensia fiierului .html indic, de asemenea, un document HTML. Extensia .htm se folosete n cazul n care fiierele au nume de DOS (8 caractere, iar extensia 3 caractere). HEAD. Elementul HEAD identific prima parte a documentului HTML. Marcajele din aceast seciune au doar rolul s descrie documentul curent pentru programe (cum ar fi browsere), pentru alte documente HTML sau pentru documentare. Informaiile prezentate n aceast seciune nu vor fi vizibile n pagina afiat de browser, cu excepia titlului ce va aprea pe linia titlu a browserului. Nici vizionarea codului surs al documentului nu va arta, n general, informaiile din aceast seciune. Tagurile care pot fi imbricate n aceast seciune sunt: , , , , i . Dintre acestea: este cel mai des ntlnit. Elementul TITLE conine titlul documentului i identific coninutul su n contextul general El este afiat undeva n fereastra browserului (de obicei n partea de sus, pe bara de titlu), dar nu n interiorul ariei de text. De asemenea, titlul poate aprea ntr-o list a unui utilizator sau ca bookmark, de aceea el trebuie s reprezinte ceva descriptiv, unic i relativ scurt. Titlul documentului poate aprea numai n seciune HEAD. Elementul TITLE are urmtoarea sintax: Textul titlului

BODY. A doua - i cea mai cuprinztoare - parte a unui document HTML este BODY, care reprezint coninutul documentului (afiat n interiorul ariei de text a ferestrei browserului). Seciunea BODY ncepe cu tagul i se ncheie cu tagul . ntre acestea se pot introduce anumii parametri ca: imagine de fundal, culoare de fundal, linkuri, alinieri.

Coninut document

BACKGROUND se refer la imaginea de fundal a paginilor web i primete ca valoare calea ctre fiierul imagine respectiv. BGCOLOR se refer la culoarea de fundal avnd ca valoare numele sau codul culorii RGB n hexazecimal. TEXT se refer la culoarea textului. LEFTMARGIN precizeaz, n pixeli, marginea stng a documentului (distana dintre fereastr i coninutul documentului); TOPMARGIN precizeaz, n pixeli, marginea de sus a documentului (distana dintre fereastr i coninutul documentului).

n documentele HTML se mai pot introduce linii de comentariu. Acest lucru se poate realiza cu ajutorul tagului :

Funcionalitatea lui principal este cea uzual n orice limbaj de programare. Apare ns i o funcie nou, oarecum improprie unei linii de comentariu, aceea de a "ascunde" anumite poriuni ale textului. Poriunile respective vor fi interpretate doar de unele browsere. Comentariile n cod HTML nu au tag de nchidere.Exemplul 1:

Culoarea paginii va fi gri ( stabilit prin bgcolor="#C0C0C0" ), link-urile vor fi rosii, link-ul activ albastru iar link-urile vizitate verzi. Textul va fi afisat cu negru. De multe ori , nu se precizeaz culoarea fundalului/textului/link-urilor, ceea ce conduce la afisarea u nui fundal alb, a unor fonturi negre si a unor link-uri albastre. Aceasta e setarea implicit. Se observ c orice culoare poate fi exprimat att printr-un cuvnt, ct si printr-un set de 6 caractere precedate de diez ( # ). Aceast notatie se datoreaz existentei unui sistem bazat pe rosu, verde si albastru ( Red, Green, Blue ). Sistemul se numeste RGB. In acest sistem, fiecare component are o valoare cuprins ntre 00 si FF. Impreun, valorile celor trei componente alctuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca:

Exemplul 2:

Fundalul paginii e o imagine ( poza1.jpg din directorul imagini ).

Exemplul 3:

Dac, n plus, dorim ca imaginea de fundal s nu se deplaseze cnd navigm de-a lungul paginii, vom scrie:

Exemplul 4: Pentru a seta marginile de sus si din stnga ale paginii la valorile de 10, respectiv 15 pixeli, vom scrie:

3. Scrierea de text cu formate n HTML

Documentul HTML conine, pe lng informaiile textuale propriu-zise, marcaje pentru utilizarea opiunilor de formatare. Aceste opiuni se refer att la formatarea textului din interiorul documentului, ct i la formatarea caracterelor, care poate avea loc pe trei nivele: fizic, logic, de comunicare.

3.1 Formatarea textului

O proprietate care difereniaz editoarele de text de procesoarele de text este modul n care apare textul n forma final: se pot schimba fonturile, se poate varia mrimea caracterelor, se poate opera asupra alinierii orizontale sau / i verticale.

n cont