Sunteți pe pagina 1din 17

Realizarea interfeelor Web utiliznd limbajul de marcare HTML

Introducere n HTML

HyperText Markup Language (HTML)este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afiate ntr-un browser
Hipertext-ul este un text obisnuit, nzestrat cu caracteristici externe: formatarea, imaginile, multimedia i hiperlegturile. Marcarea - este procesul prin care un text obinuit este mbogit cu simboluri. Fiecare simbol reprezint o comand ctre browser pentru reprezentarea textului.

HTML Prezentare general

Browserele interpreteaz un document HTML i l afieaz. Standardul oficial HTML este World Wide Web Consortium (W3C). Dezvoltri succesive ale limbajului HTML au condus la apariia limbajelor DHTML (Dinamic HyperText Markup Language) i XHTML (Extensible HyperText Markup Language). XHTML este construit pe baza ultimei versiuni HTML 4.01, i tinde s nlocuiasc actualul HTML

HTML Prezentare general


Un document HTML se poate realiza n dou moduri:
Manual redactnd codul surs ntr-un editor de text, spre exemplu Notepad; Cu ajutorul editoarelor specializate (editoare HTML) aplicaii software pentru crearea paginilor web. Ex: Macromedia Dreamweaver, Front Page (Share Point Designer), Netscape Composer.

Pentru obinerea codului surs al unei pagini web, se efectueaz click dreapta pe pagin i se selecteaz View Source.

HTML Prezentare general


Un document HTML este divizat n blocuri numite elemente. Acestea pot fi ncadrate n trei seciuni principale.
Seciunea BODY, cea care descrie cum va fi afiat corpul documentului de ctre browser. Seciunea HEAD (antet), care conine informaii despre documentul HTML: titlul acestuia, relaiile cu alte documente, etc. Seciunea pentru declaraii nu este obligatorie, este plasat la nceputul documentului.

Structura standard a unui document HTML


<!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4.loose.dtd> Declaratia DOCTYPE indica browserului versiunea HTML sau
XHTML in care este scris documentul Atributul DTD(Document Type Definition), indica tipul de constructie a documentului: strict are regili foarte stricte de constructie si nu accepta elemente de formatare decat prin foi de stil; transitional (loose)- o varianta mai flexibila, acceptand si elemente sau atribute din versiuni mai vechi, care sunt inca in uz; framseset este asemanatoare cu transitionl, dar care accepta si elemente sau atribute referitoare la frame-uri. nceput document; Indic broserului faptul c este vorba de un document HTML sau XHTML . nceput antet; Conine informaii despre documentul HTML: titlul, limbajul sript folosit, definiii de stil , etc. Acestea sunt introduse prin marcaje precum: ;<title>, <script>, <style>, etc., incluse n blocul <head>.</head> Sfrit antet. nceput corp document; Include toate elementele, atributele i informaiile care vor fi afiate n fereastra browserului. Sfrit corp document

<html>
<head> <title> TITLUL DOCUMENTULUI</title> </head> <body> CORPUL DOCUMENTULUI HTML </body> </html>

Sfrit document

HTML Prezentare general


Un document HTML contine text si marcaje. Textul contine informatia care va fi afisata in pagina Web Marcajele precizeaza modul in care acest text va fi afisat, sau permit includerea in pagina a altor elemente (butoane, legaturi, sunete etc.). Un marcaj (tag) este cuprins intre caracterele"<" si ">", putand contine: a) un cuvant cheie(numele marcajului); b) o lista de forma "atribut=valoare" daca marcajul are atribute. Un marcaj poate avea mai multe atribute. De ex. un marcaj cu doua atribute arata astfel: <marcaj atribut1=valoare1 atribut2=valoare2> c) caracterul "/" (slash) daca este un marcaj final.

Realizarea unui document HTML


Se lanseaz n execuie un editor de texte (de exemplu Notepad), se deschide un nou document i se scrie textul (ex: Aceasta este pagina Web) Se salveaz fiierul cu extensia .html sau .htm (ex: prima-pag.html ). n caseta Save as type se alege All Files, iar n caseta Encoding se alege ANSI

Se vizualizeaz pagina creeat: lansnd n execuie browserul preferat i din meniul acestuia se deschide fiierul sau se selecteaz fiierul creeat si se deschide, de exemplu apsnd tasta Enter. Datorit extensiei .html se lanseaz n execuie automat browserul implicit Observaie: documentul este funcional.Totui, stilul n care a fost creeat nu este unul standard, conform cu specificaiile HTML ntocmite de W3C.

Prima pagin n format HTML standard


Se lanseaz n executie editorul de text Notepad i se creeaz un fiier cu urmatorul coninut:
Se salveaz fiierul cu extensia .html (1.Prima-pag-standard.html) Se vizualizeaz fisierul

Titlul paginii web


Se realizeaz cu ajutorul marcajului: <title> ......</title> inserat n blocul <head>..... </head>

Dac blocul <title> ......</title> lipsete din documentul HTML, n bara de titlu a ferestrei browserului va fi afiat numele fiierului.

Formatarea de baz a textului


Caracterele spaiu i tab multiple sunt echivalente cu un singur caracter spaiu Trecerea pe o linie nou de text nu este sesizat de browser dect dac este marcat corespunztor.
Exemplu:

Formatarea de baz a textului


Pentru a impune ca, la afiarea n browser, s se respecte trecerea pe un rnd nou, se folosete marcajul <br> (de la break line) n codul HTML, acesta este un marcaj nepereche (nu necesit un marcaj pereche, de nchidere)

Formatarea de baz a textului


Pentru interpretarea corect a unor caractere ca: spaiu, tab,sau trecere pe un rnd nou, textul respectiv poate fi inclus ntr-un bloc: <pre>.</pre> (de la preformatted)

Formatarea de baz a textului


In cadrul unui document HTML se pot insera comentarii, care nu vor fi afisate de browser. Acestea sunt deseori utile pentru a urmari structura documentului si eventualele actualizari. Un comentariu are sintaxa: <!---textul comentariului--->

Stabilirea culorilor n pagina Web


Culorile n pagina web pot fi utilizate la nivelul textului, pentru fundalul paginii sau la nivelul ilustraiilor. Culoarea de fond a unei pagini se precizeaz prin atributul bgcolor iar culoarea textului prin intermediul atributului text. Ambele sunt atribute ale marcajului <body> i se introduc prin sintaxa: <body bgcolor= culoare text=culoare>

Atributul culoare reprezint culoarea prin nume sau prin cod hexazecimal

Setarea marginilor paginii Web


Pentru a poziiona coninutul afiat al paginii Web n raport cu marginile ferestrei browserului se folosesc atributele leftmargin i topmargin ale elementului <body> Valorile celor dou atribute pot fi exprimate n pixeli sau n procente din limea, respectiv din nlimea ferestrei browserului.

S-ar putea să vă placă și