Sunteți pe pagina 1din 23

Programarea i utilizarea calculatoarelor

2 ore curs/spt. 2 ore aplicaii laborator/spt.

HTML Hypertext Markup Language


Ce este HTML Noiuni de baz Terminologie HTML Crearea documentelor HTML Etichete de formatare a textului Editarea listelor

HTML generaliti
Termenul hypertext - Ted Nelson 1960. Dezvoltarea World Wide Web are la baz ideile englezului Tim Berners Lee Pentru generarea i distribuia hypertextului acesta a optat pentru setul de reguli SGML Nivelul 1 al acestui set de reguli, HTML a fost utilizat n Internet n 1992.

HTML terminologie
Reeaua INTERNET = ansamblu de milioane de calculatoare interconectate n vederea schimbului de informaii ; Comunicaia prin Internet : pot electronic (e-mail) ; Transfer de fiiere (ftp); informare, documentare, jocuri ; comer ; grupuri de discuie.

HTML terminologie
World Wide Web (WWW, Web) : un numr imens (miliarde!) de documente memorate pe discurile unor calculatoare aflate undeva, n lume, accesibile prin intermediul reelei cu ajutorul unui program de navigaie (browser). URL : Fiecare document are o adres unic (Uniform Resource Locator, URL) folosit pentru accesarea sa de ctre programul de navigaie. Adresa se scrie fr spaii i este compus din 3 pri : protocolul folosit, numele calculatorului gazd i cale : http://www.zdnet.com/pcmag/special/web100

HTML terminologie
Pagin Web : Fiier (document) aparinnd WWW. O pagin poate conine text, imagini, sunete i secvene animate. Server Web : calculator in care sunt stocate pagini Web puse la dispoziia utilizatorilor reelei. Site Web (Web site) : o colecie de pagini Web ntreinut de o firm, o instituie de nvmnt, o agenie guvernamental, etc.

HTML terminologie
Referine (hyperlinks) : iruri de caractere sau imagini a cror selectare provoac afiarea unei alte pagini, aflat pe acelai calculator sau undeva, n reea.

Programe de navigaie (Web browser) : aplicaii destinate afirii paginilor Web. Cele mai uzuale : Microsoft Internet Explorer i Netscape. Sunt gratuite.

Paii realizrii paginilor Web


1. 2. 3. 4. 5. 6. Stabilirea subiectului i reunirea informaiilor necesare ; Organizarea informaiilor. Informaiile trebuie grupate n seciuni, fiecare seciune fcnd ulterior obiectul unei pagini Web ; Scrierea textelor din fiiere cu ajutorul unui editor de texte i inserarea marcajelor HTML (HyperText Markup Language) ; Adugarea imaginilor (referine la fiiere care conin imagini) ; Legarea paginilor prin adugarea n fiecare pagin a referinelor spre alte pagini ; Publicarea (transferul) pe un server Web.

Aplicaii pentru crearea paginilor Web


Pentru realizarea paginilor HTML se pot folosi : Editoare de text obinuite : Notepad, Wordpad, Word ; Editoare HTML (ex. HomeSite, ncrcat de la : www.allaire.com) sau editorul din Netscape (Communicator / Composer) Editoare n mod grafic : Microsoft FrontPage. Primele dou tipuri de editoare necesit cunotine de HTML i un program de navigaie pentru a vedea rezultatul.

HTML faciliti
Crearea paginilor i a site-urilor web Tabele Imagini Form-uri Frame-uri Elemente multimedia Javascript Viewer pentru miniaplicaii Java, applet

Structura documentului HTML


Documentul HTML cuprins ntre etichetele <HTML> i </HTML> care desemneaz nceputul respectiv sfritul paginii conine dou seciuni : Seciunea head (cuprins ntre <HEAD> i </HEAD>) - antetul paginii. Contine : titlul paginii, cuprins ntre etichetele <TITLE> i </TITLE>, afiat pe bara de titlu a ferestrei browserului, fiierul coninnd secvena sonor care va fi reprodus n momentul ncrcrii paginii, indicat cu ajutorul etichetei BGSOUND : <BGSOUND SRC=sunet.wav" LOOP="-1">, etc. Seciunea body (cuprins ntre <BODY> i </BODY>) conine corpul paginii.

Marcajul <!-- . . . --> permite scrierea n pagina Web a unui comentariu. Exemplu : <!--Mai trebuie doar o poza si e gata -->

HTML - formatarea textului


Marcajele uzuale pentru formatarea textului sunt : <BR> - marcaj trecere forat la linie nou ;

<NOBR> . . . </NOBR> - interzice trecerea la linie nou ex : <NOBR> 096 125236 </NOBR> <P> . . . </P> - marcaj paragraf. Acest marcaj admite atributul ALIGN prin care se impune tipul de aliniere a textului dorit (LEFT stnga, CENTER centrat, RIGHT dreapta sau JUSTIFY ntre marginile din stnga i dreapta ale ferestrei programului de navigare). ex : <P ALIGN=CENTER> Contactati-ne la 096 123 234</P>

HTML - formatarea textului


<H1> . . . </H1> - marcaj titlu (heading). Se pot folosi marcaje diferite pentru titluri de diferite nivele : H1, H2, , H6. Nivelul 4 coincide cu textul normal. Mrimea caracterelor pentru nivelele 5 i 6 este mai mic dect cea normal. i acest marcaj admite atributul ALIGN : ex: <H1 ALIGN=CENTER> text scris cu heading 1</H1>

<PRE> . . . </PRE> - se folosete pentru a transmite programului de navigaie c pentru zona de text cuprins ntre marcaje spaiile i caracterele CR (RETURN sau ENTER) trebuie respectate. Textul apare formatat exact ca in fereastra editorului de text.

HTML - formatarea textului


Adugarea de spaii suplimentare se va realiza prin includerea pentru fiecare spaiu suplimentar a irului de caractere "&nbsp;". Similar se procedeaz i pentru adugarea unui caracter special (de exemplu a caracterelor romneti). &icirc; &acirc; &atilde; &Acirc; &Icirc; - pentru - pentru - pentru (n loc de ) - pentru - pentru .

Astfel textul "doi romni ntr-o gar" va fi scris : "doi rom&acirc;ni &icirc;ntr-o gar&atilde;"

HTML - formatarea textului


<B> . . . </B> - pentru marcarea textului de scris accentuat ; <I> . . . </I> - pentru marcarea textului de scris nclinat (italic) ; <STRIKE> . . . </STRIKE> barat ; <U> . . . </U> subliniat ; pentru marcarea textului care se scrie

- pentru marcarea textului care se scrie

<SUP> . . . </SUP> pentru marcarea textului care va fi scris ca exponent (indice superior) ; <SUB> . . . </SUB> pentru marcarea textului care va fi scris ca indice inferior ;

HTML - formatarea textului


<FONT FACE=" . . . "> . . . </FONT> determin schimbarea fontului curent. ntre ghilimele se introduce numele fontului dorit i eventual unul sau mai multe fonturi de substituie dac pe calculatorul care afieaz pagina primul font specificat nu este instalat.

Exemplu : <FONT FACE="CountryBlueprint, Arial"> Text care trebuie formatat </FONT> va afia textul fie cu fontul CountryBlueprint fie cu Arial. <FONT SIZE="n"> . . . </FONT> determin scrierea textului cuprins ntre marcaje cu caractere de mrimea n. Mrimea este o valoare ntre 1 (caracterele cele mai mici) i 7 (caracterele cele mai mari). Valoarea 3 este cea implicit.

HTML - definirea culorilor


<BODY TEXT="#rrggbb'> . . . </BODY> schimb culoarea textului pentru toat pagina. Codul "#rrggbb" arat combinaia de rou (rr) verde (gg) i albastru (bb) care se va folosi. Valorile sunt n hexazecimal, deci cuprinse ntre 00 i FF. <BODY BGCOLOR="#rrggbb"> . . . </BODY> schimb culoarea fondului pe toat pagina. <FONT COLOR="#rrggbb"> . . . </FONT> impune pentru textul dintre marcaje culoarea "#rrggbb".

HTML definirea listelor


Lista ordonat este declarat prin marcajul <OL> (ordered list) i are rndurile numerotate. Fiecare linie este precedat de un marcaj <LI>.
<HTML> <HEAD> <TITLE>Cuprins</TITLE> </HEAD> <BODY> <H2> Cuprins</H2> <OL> <LI>Introducere <LI>Limbajul HTML <LI>Sistemul de operare UNIX <LI>Publicarea sitului pe un server UNIX </OL> </BODY> </HTML>

HTML definirea listelor


Numerotarea liniilor este automat. Pentru a ncepe numerotarea de la o valoare diferit de 1, marcajului <OL> i se va aduga atributul START=n, n fiind numrul dorit pentru prima linie a listei:

<OL START=4> <LI> Introducere .. </OL>

HTML definirea listelor


Lista ordonat poate fi numerotat folosind litere sau cifre romane. Pentru aceasta se va aduga marcajului <OL> atributul TYPE=s, s fiind unul dintre simbolurile : Ex. TYPE=A A, B, C TYPE=a a, b, c TYPE=I I, II, III TYPE=i i, ii, iii TYPE=1 1, 2, 3 <H2> Cuprins</H2> <OL TYPE=i START=3> <LI>Introducere <LI>Limbajul HTML <LI>Sistemul de operare UNIX <LI>Publicarea sitului pe un server UNIX </OL>

HTML definirea listelor neordonate


Lista neordonat este declarat prin marcajul <UL> (unordered list) i are rndurile precedate de puncte. Fiecare linie este precedat de un marcaj <LI>. Ex.

<H2> Cuprins</H2>
<UL> <LI>Introducere <LI>Limbajul HTML <LI>Sistemul de operare UNIX <LI>Publicarea site-ului pe un server UNIX </UL>

HTML definirea listelor neordonate


Aspectul punctului din faa fiecrei linii poate fi schimbat prin folosirea atributului TYPE=v, v fiind circle, disc sau square. <H2> Cuprins</H2> <UL> <LI>Introducere </UL> <UL TYPE=square> <LI>Limbajul HTML <LI>Sistemul de operare UNIX </UL> <UL TYPE=circle> <LI>Publicarea sitului pe un server UNIX </UL>

HTML definirea listelor


Listele pot avea n interior alte liste :

<H2> Cuprins</H2> <OL> <LI>Introducere <OL TYPE=a> <LI>Limbajul HTML <LI>Sistemul de operare UNIX </OL> <LI>Publicarea site-ului pe un server UNIX

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