Sunteți pe pagina 1din 19

Crearea paginilor Web

No iuni introductive
Pagina Web

Cod surs

Limbajul H.T.M.L.
Colegiul NationalGH.M. MURGOCI BRAILA Prof. FLORICA LEFTER

Cuprins
Limbajul H.T.M.L. Editarea unui document H.T.M.L. Opera ii de baz Structura unui document H.T.M.L. Parametrii marcajului <BODY> </BODY>

Formatarea textului ntr-o pagin Web Formatarea paragrafelor Test de evaluare Bibliografie

Limbajul H.T.M.L.
 

HYPER TEXT MARKUP LANGUAGE (limbaj de marcare a hipertextului) este un limbaj pentru descrierea unui document Web, n care fiecare element este marcat prin semne speciale ale limbajului numite Taguri. H.T.M.L. a fost conceput n anul1989 de Tim Berners-Lee, licen iat la Oxford, pe atunci fizician. Fiind i expert n software, Berners-Lee e acum director al World Wide Web Consortium ( pe scurt, W3C ), adic al organiza iei care coordoneaz dezvoltarea web-ului. Sintaxa oricarui tag este: <TAG atribut1="val" atribut2="val">Text</TAG> Hipertext este un text mbog it. El con ine: - text obi nuit; - etichete pentru formatarea textului i ncapsularea altor tipuri de informa ii (salturi rapide c tre alte resurse de informa ii, sunete, imagini, filme, etc). Hipertextul este stocat n fi iere avnd o extensie special : .htm sau html.

No iunea de Hipertext
Hipertextul nu face dect s creeze leg turi ntre mai multe pagini Web pe o por iune de tip text. Hipermedia este un termen ce a ap rut ca urmare a dezvolt rii noilor tehnologii i a posibilit ii de a crea leg turi prin fi iere ce con in: anima ie, sunet, film, imagine. Hipertextul i hipermedia permite stocarea unei cantit i mari de informa ie, iar utilizatorului i ofer posibilitatea parcurgerii documentului respectiv n ce ordine dore te, dndu-i senza ia de navigare ntr-un spa iu virtual. De aici vine i sintagma: a naviga pe Internet . Paginile Web au fost construite ini ial cu ajutorul unui limbaj de marcare a hipertextelor, numit HTML (HyperText Markup Language). Acesta con ine comenzi care-i transmit browser-ului s afi eze text, imagini, fi iere multimedia i leg turi cu alte pagini Web. Mai multe pagini Web conectate ntre ele prin hiper-leg turi ce au un subiect comun, formeaz un site Web.

Editarea unui document HTML


Pentru editarea unui document Html putem folosi editorul de text Notepad sau un editor specializat n crearea paginilor Web. Se lanseaz n execu ie editorul Notepad, se scrie codul surs i se salveaz cu extensia .html

Opera ii de baz
Deschiderea unui document Html se poate face astfel: Se deschide editorul de texte Notepad i se alege din meniul File (Fi ier) op iunea Open (Deschide); va ap rea o caset de dialog cu ajutorul c ruia utilizatorul caut documentul ce urmeaz a fi deschis; Se execut clic dreapta pe iconi a fi ierului i se alege op iunea Open With (Deschide cu ) Notepad; Se deschide pagina html si se alege op iunea Source (Surs ) din meniul View (Vizualizare);

Structura unui document H.T.M.L.


Un document H.T.M.L. con ine marcajele <Html> </Html>, marcaj ce define te documentul ca fiind de tip Html i cuprinde dou p r i: Antetul paginii Sec iunea Head (cuprins ntre <Head> i </Head>) con ine antetul paginii. Ea furnizeaz titlul paginii, cuprins ntre marcajele <Title> i </Title>. Corpul paginii Sec iunea Body (cuprins ntre <Body> i </Body>). n aceast sec iune se define te practic pagina Web.

Parametrii marcajului <BODY></BODY>


Marcajul <BODY> </BODY> ncadreaz con inutul propriu-zis al paginii, avnd urm toarele atribute: bgcolor, background, text, link, vlink, alink; Atributele bgcolor / background ncadreaz o culoare de fond sau o imagine ca fundal pentru pagina Web. Sintaxa este: <body bgcolor= pink > sau <body background= didactic.jpg >
CULOARE
NEGRU ALB RO U ARGINTIU GRI CASTANIU VERDE GALBEN ALBASTRU VERNIL M SLINIU ALBASTRU MARIN

DENUMIR E
BLACK WHITE RED SILVER GRAY MAROON GREEN YELLOW BLUE LIME OLIVE NAVY

VALOARE #rrggbb #000000 #FFFFFF #FF0000 #C0C0C0 #808080 #800000 #008000 #FFFF00 #0000FF #00FF00 #808000 #000080

Exemplu

Formatarea textului ntr-o pagin Web


Stabilirea stilului fonturilor se face cu ajutorul tag-ului <Font> </Font> cu atributele: - Face pentru stabilirea fonturilor, avnd sintaxa <font face= Tahoma Utiliz m fontul Tahoma></font>; - Size pentru stabilirea dimensiunii fonturilor, avnd sintaxa<font size= 2 Acest text are m rimea1></font>; - Color pentru stabilirea culorii fonturilor, avnd sintaxa <font color= red Acest text este ro u> </font>; Stabilirea elementelor de stil se face cu ajutorul tagurilor <I> </I>, <B> </B>, <U> </U>, <S> </S>, avnd ca efect nclinarea, ngro area, sublinierea i t ierea textului cu o linie.

Alte elemente de stil


Tag-ul em(emphasized)

<p><em> Acest text este eviden iat italic></em></p>


Tag-ul strong

<p><strong> Acest text este eviden iat ngro at></strong></p>


Tag-urile small,big

<p> Ultimul cuvnt este mai<small> mic</small>></p> <p> Ultimul cuvnt este mai<big> mare</big>></p>
Tag-urile sub, sup

<p> Ultimul cuvnt este un<sub> indice</sub>></p> <p> Ultimul cuvnt este o<sup>putere</sup>></p>

Exemplu

Formatarea paragrafelor
n Notepad, wordPad, Microsoft Word paragrafele se separ prin tastarea unui Enter, n schimb, n HTML, Enter-ul nu are nici un efect. F r o alt comand , un rnd al unui paragraf are l imea ferestrei afi at de browser. De exemplu, dac mic or m fereastra browser-ului acela i paragraf va ocupa mai multe rnduri. Dac dou cuvinte ale unui paragraf sunt separate prin mai multe spa ii, browser-ul afi eaz doar un singur spa iu. n HTML delimitarea paragrafelor se realizeaz utiliznd tag-ul <p> con inut paragraf </p> avnd urm toarele atribute: Align - controleaz alinierea paragrafului. Poate lua una din valorile: Center - paragraful este aliniat n centru. Left - paragraful este aliniat la stnga. Right - paragraful este aliniat la dreapta. Justify - paragraful este aliniat la ambele margini.

Test de evaluare
1. Care este marcajul care define te corpul documentului de tip HTML?
<BODY> </BODY> <HTML> </HTML> <HEAD> </HEAD>

2. Care este extensia unui document HTML?


.xlp .html .exe

3. Care sunt marcajele obligatorii ntr-un document HTML?


HTML, HEAD, BODY HTML, TITLE, TABLE HEAD, TITLE, BODY

4. Care este marcajul folosit pentru trecerea la o linie nou ?


<B> <S> <P>

5. Care este marcajul care trebuie folosit pentru a sublinia un text? <B> <BODY> <I> <P> <U> <S> 7. Atributul ALIGN se poate utiliza n marcajele: 8. Atributele controlului "Font" sunt: Face, color, width Face, BG Face, size, color 9. Elementul BODY admite urm toarele atribute: TITLE BGCOLOR BIG

n loc de concluzii:
Paginile Web au urm toarele caracteristici: sunt multimedia, adic ele con in informa ii sub form de text, imagini, sunete, filme etc; sunt interactive, adic r spund la cererile utilizatorului; sunt independente de platforma hardware i software, adic se v d la fel pe orice calculator, avnd instalat orice sistem de operare i utiliznd orice browser.

Bibliografie
http://www.didactic.ro/files/12/notiunidelimbajhtml1.doc http://www.didactic.ro/lectii-informatica-12-elementele-unei-pagini-web-editarea-html-p37063-t0 http://www.didactic.ro/lectii-informatica-12-formatarea-documentelor-html-p37060-t0 http://www.didactic.ro/files/12/html_structura_unei_pagini.doc http://www.didactic.ro/files/12/0formatarea_textului_dintr_o_pagina_web.pps#2 http://www.didactic.ro/files/12/0html_introducere.pps#4 http://www.didactic.ro/files/12/cum_functioneaza_paginile_web.pdf http://www.didactic.ro/lectii-informatica-12-notiuni-de-html-p2690-t0 http://www.ecursuri.ro/cursuri/html-introducere.php http://www.htmlcodetutorial.com http://grafica.lufo.ro/ http://www.etutoriale.ro/articles/112/1/Tutorial-complet-HTML/