Sunteți pe pagina 1din 9

Componentele unui sistem hipertext

Crearea paginilor web utliznd limbajul (X)HTML


Mihai Gabroveanu

Noduri (concepte) = blocuri de informa#ii cuprinse n re#eaua sistemului hipertext. Un nod reprezint , n mod uzual, un concept unic (o idee), putnd con#ine text, grafic , anima#ie, audio, video, imagini sau programe. n Leg turi (rela(ii) = conexiuni ntre nodurile din re#eaua hipertextului, ce permit utilizatorului s treac de la un nod la altul.
n
Crearea paginilor web utliznd limbajul (X)HTML 3

Ce este hipertextul?
n

Ce este HTML?
n n n n n

Ted Nelson (1965) defineste hipertextul (text non-linear) ca fiind un "material scris sau grafic interconectat ntr-o manier complex care n mod conven#ional nu poate fi reprezentat pe hrtie. El poate con#ine cuprinsuri ale propriului s u con#inut &i rela#iile dintre diverse p r#i componente; poate de asemeni con#ine adnot ri, ad ugiri &i note de subsol pentru cei care doresc s -l examineze. Metod de organizare a informa#iilor n care datele sunt memorate ntr-o re#ea de noduri &i leg turi, putnd fi accesat prin intermediul navigatoarelor interactive &i manipulat de un editor structural

HTML = Hypertext Markup Language (limbaj de marcare a textului) utilizat pentru descrierea paginilor Web Conceput de Tim Berners-Lee n anul 1989 HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language) HTML nu este un limbaj de programare, e un limbaj de marcare Standardizat de W3C

HTML 4.01 versiunea curenta, 24 decembrie 1999 XHTML 1.0 nlocuitor modern al limbajului HTML, 26 ianuarie 2000 HTML 5.0 n lucru

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Facilit #i oferite de limbajul HTML


n

Sintaxa unui tag HTML


n

Limbajul HTML ofer autorilor mijloace pentru:


publicarea de documente cu headere, texte, tabele, liste, fotografii, etc. reg sirea on-line de informa#ii prin intermediul hiperlinkurilor accesate printr-un simplu click de mouse proiectarea de formulare pentru realizarea tranzac#iilor cu servere aflate la distan# , pentru c utari de informa#ie sau pentru activit #i specifice comer#ului includerea foi de calcul tabelar, clipuri video, sunete &i alte aplica#ii direct n documente

Tag-uri de tip bloc (pereche):


<nume_tag> </nume_tag>

Textul cuprins ntre tag-ul de nceput )i cel de sfr)it se nume)te con#inutul elementului. Spa#iile multiple din con#inutul unui element sunt ignorate Exemplu: <p>Acesta este un paragraf</p> <h1>Acesta este un titlu</h1>

Tag-uri singulare:
<nume_tag>

Exemplu:
<br> <hr>
7

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Elementele limbajului HTML


n n n n

Sintaxa unui tag HTML (cont.)


n n

Marcarea textului se realizeaz prin intemediul tagurilor. Tag-urile reprezint comenzi ce spun navigatorului cum s interpreteze textul marcat Un tag este un )ir de caractere delimitat de caracterele < si > Tag-urile mai sunt numite )i elemente

n n

Un tag poate avea unul sau mai multe atribute ce pot mbun t (ii sau modifica func(ionalitatea tag-ului Sintaxa: <nume_tag idAtribut1="val1" idAtribut2="val2 > </nume_tag> Exemplu: <div align="center">Text centrat</div> <font color="blue">Text afisat cu albastru</font> Tag-urile HTML nu sunt case sensitive, adic nu conteaz dac sunt scrise cu litere mari sau mici Tag-urile XHTML sunt case sensitive (numai litere mici)

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Structura general a unui document HTML


n

Reprezentarea sub form de arbore


html head title
Primul meu document HTML

Un document HTML este compus din 3 sec(iuni:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Primul meu document HTML</TITLE> </HEAD> <BODY> <P>Salutari lumii!</P> </BODY> </HTML>

o linie con#innd informa#ii despre versiunea HTML, o sec#iune declarativ de nceput (header -- delimitat de elementul HEAD ), un corp (body) care con#ine con#inutul actual al documentului. Corpul poate fi implementat cu elementul BODY sau cu elementul FRAMESET.

body

Con(inul documentul HTML

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

11

Structura general a unui document HTML

Declara#ia tipului de document HTML


n

DTD-ul Strict HTML 4.01 include toate elementele &i atributele care nu au fost depasite sau care nu apar in documentele frameset. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> DTD-ul Tranzitional HTML 4.01 include tot ce exist n DTD-ul strict plus elementele &i atributele dep &ite (cele mai multe care au de-a face cu prezentarea vizual ). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DTD-ul Frameset HTML 4.01 include tot ce exist n DTD-ul tranzitional plus frame-urile deasemenea. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Crearea paginilor web utliznd limbajul (X)HTML

10

Crearea paginilor web utliznd limbajul (X)HTML

12

Antetul unui document HTML - HEAD


n

Corpul documentului - Elementul BODY


Elementul <BODY> </BODY> ncadreaz con#inutul efectiv al paginii web n Atribute acceptate:
n

Sec#iunea HEAD cuprinde antetul pagini ce include:


titlul paginii, cuprins ntre marcajele <TITLE></TITLE> metainforma#ii cu privire la con#inutul paginii web - tag-ul META alte tag-uri: SCRIPT, NOSCRIPT, BGSOUND, STYLE, LINK

Exemplu:
<HEAD> <TITLE>Introducere in limbajul HTML</TITLE> <META name="author" content="Mihai Gabroveanu"> <META name="keywords" content="curs, limbaj, web, html"> <META name="description" content="Pagina de introducere"> </HEAD>

= culoarea de fundal background = imagine de fundal text = culoarea textului


link,

bgcolor

vlink, alink = culorile pentru: link-uri, linkuri vizitate, link-urile active


Crearea paginilor web utliznd limbajul (X)HTML 15

Crearea paginilor web utliznd limbajul (X)HTML

13

Corpul documentului - Elementul BODY


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Introducere in HTML</TITLE> </HEAD> <BODY bgcolor="cyan" text="black" link="red" alink="fuchsia" vlink="maroon"> <H1>Cuprins</H1> <A href="introducere.html">Introducere</A> </BODY> </HTML>

Elemente ale limbajului HTML


n

Tag-urile HTML pot fi clasificate astfel:


marcaje de baz - cele care delimiteaz pagina / documentul HTML, titlul acesteia &i corpul paginii; marcaje pentru structurarea documentului - care permit introducerea de subtitluri, paragrafe, linii de delimitare; marcaje pentru formatarea textului si crearea listelor; marcaje pentru crearea hiperleg turilor; marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte multimedia preluate din fi&iere, formulare.

Crearea paginilor web utliznd limbajul (X)HTML

14

Crearea paginilor web utliznd limbajul (X)HTML

16

Elemente pentru introducerea antetelor - Hn


n n n n

Paragrafe
n

Antetele (titlurile) sunt utilizate pentru ierarhizarea diferitelor sec#iuni de text. Limbajul HTML define)te 6 nivele pentru antete: H1,H2,, H6 H1 = cel mai important, H6 = cel mai pu#in important Browserele vizuale de obicei interpreteaz titlurile mai importante cu fonturi mai mari decat cele mai putin importante. Atribute asociate

Definirea de paragrafe se realizeaz utiliznd tag-ul <P></P>

Exemplu:
<p>Acesta este un paragraf</p>

Trecerea la un rnd nou se realizeaz utliznd tag-ul <BR>

align = specifica modul de aliniere a textului; valori posibile: left, center, right

Exemplu: <p>Prima linie din paragraf<br> A doua linie din paragraf </p>

Introducerea unei linii orizontale se realizeaz cu ajutorul tagului <HR>


Crearea paginilor web utliznd limbajul (X)HTML 19

Crearea paginilor web utliznd limbajul (X)HTML

17

Elemente pentru introducerea antetelor - Hn


<HTML> <HEAD> <TITLE>Utilizarea antetelor</TITLE> </HEAD> <BODY> <H1 align="center">Heading 1</H1> <H2>Heading 2</H2> <H3 align="left">Heading 3</H3> <H4 align="right">Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </BODY> </HTML>

Alinierea paragrafelor
n

Pentru alinierea paragrafelor se poate utiliza atributul align


<p align="direc#ie">Text paragraf</p>

Valori posibile:
left

= aliniere la stnga right = aliniere la dreapta center = aliniere la centru


18 Crearea paginilor web utliznd limbajul (X)HTML 20

Crearea paginilor web utliznd limbajul (X)HTML

Texte preformatate
n n

Formatarea textului - Exemplu


<HTML> <HEAD> <TITLE>Formatarea textului</TITLE> </HEAD> <BODY> <P align="center">Acesta este un paragraf centrat</P> <P><B>Textul acesta este boldat</B><BR> <I>Text inclinat</I> </P> <P> Se considera urmatoarea secventa de cod:</P> <HR> <PRE> <CODE> if (x == 10) { f(x); } </CODE> </PRE> <HR> </BODY> </HTML> Crearea paginilor web utliznd limbajul (X)HTML 23

Afi&area textelor pefromatate se realizeaz cu ajutorul tag-ului <PRE> Sintaxa:


<PRE> Majoritatea documentelor HTML contin text format cu tag-uri. Asta inseamna ca textul respectiv este afectat de restrictiile HTML, in sensul ca toate spatiile suplimentare, taburi, etc sa fie ignorate de catre navigator. Afisarea textelor, exact asa cum sunt ele se poate face cu ajutorul acestui tag </PRE>
Crearea paginilor web utliznd limbajul (X)HTML 21

Formatarea textului
n n n n n n n

Definirea listelor
n

<B>Text boldat</B> <I>Text nclinat (italic)</I> <U>Text subliniat</U> <EM>Text accentuat</EM> <STRONG>Text puternic accentuat</STRONG> <CITE>Text ce reprezinta o citare sau o referire la alte surse </CITE> <CODE>Desemneaza un fragment de cod</CODE>
22

Liste neordonate <UL> <LI>primul element al listei</LI> <LI>al doilea element al listei</LI> <LI>s.a.m.d</LI> </UL>

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

24

Definirea listelor
n

Inserarea de imagini
Pentru a insera o imagine ntr-o pagina HTML vom utiliza tag-ul <IMG> n Sintaxa
n

Liste ordonate <OL> <LI>primul element al listei</LI> <LI>al doilea element al listei</LI> <LI>s.a.m.d</LI> </OL>

<IMG src="URL-imagine" width="latime" height="inaltime" alt="text alternativ" border=grosime chenar>


n

Exemplu <IMG src="smile.jpg" alt="Zmbe&te">


Crearea paginilor web utliznd limbajul (X)HTML 27

Crearea paginilor web utliznd limbajul (X)HTML

25

Definirea listelor
n

Inserarea de imagini - Exemplu


<HTML> <HEAD> <TITLE>Utilizarea imaginilor</TITLE> </HEAD> <BODY> <p>Aceasta este o pagina ce contine o imagine.</p> <IMG src="smile.jpg" alt="Zmbeste border="1"> </BODY> </HTML>

In cazul listelor ordonate putem stabili modul de numerotare al itemilor cu ajutorul atributului type:
<OL

type="A"> - va genera o list numerotat cu A,B,C <OL type="a"> - va genera o list numerotat cu a,b,c <OL type="i"> - va genera o list numerotat cu i,ii,iii

Crearea paginilor web utliznd limbajul (X)HTML

26

Crearea paginilor web utliznd limbajul (X)HTML

28

Inserarea de link-uri
n

Inserarea de tabele - Exemplu


<HTML> <HEAD> <TITLE>Utilizarea tabelelor</TITLE> </HEAD> <BODY> <P>Notele studentilor</P> <TABLE border="1"> <TR> <TH>Nume</TH> <TH>Nota</TH> </TR> <TR> <TD>Popescu Ion</TD> <TD align="right">9</TD> </TR> <TR> <TD>Popa Mihai</TD> <TD align="right">10</TD> </TR> </TABLE> </BODY> </HTML>

Pentru a insera un link (hyperlink) c tre o alt pagin :


<A href="URL-pagina">text link</A>

Exemplu:
Pentru a va alege disciplinele optionale acesati pagina <A href="http://inf.ucv.ro/~optionale">acesta</A>

Textul asociat link-ului va fi automat subliniat &i colorat de regul n albastru


Inserarea unei ancore: <A name="nume-ancora">text</A> Adaugarea unui link: <A href="#nume-ancora">text-link</A> <A href="URL-pagina#nume-ancora">text link</a>
Crearea paginilor web utliznd limbajul (X)HTML 29

Pentru a insera un link c tre o anumit zona dintr-o pagin :


Pentru a insera un link catre o anumita zona, dintr-o alt pagin

Crearea paginilor web utliznd limbajul (X)HTML

31

Inserarea de tabele
n n n

Inserarea de tabele (cont.)


n

Limbajul HTML permite organizarea informatiei sub forma de tabele bidimensionale(linii (rows) &i coloane (columns)) Un tabel se defineste cu ajutorul tag-ului<table> si contine una sau mai mute linii definite prin tag-ul <TR> Fiecare linie contine una sau mai multe celule, <TD>, sau celule header, <TH>

Pentru a unii una sau mai multe celule dintr-un tablel folosim atributule colspan (pentru unirea pe orizontal ) &i rowspan (pentru unirea pe vertical )

Diferenta dintre <TD> si <TH> este data de modul de afisare

Pentru a definii grosimea marginii unui tabel se utilizeaza atributul border ce se asocieazaa tag-ului <TABLE>

Crearea paginilor web utliznd limbajul (X)HTML

30

Crearea paginilor web utliznd limbajul (X)HTML

32

Inserarea de tabele - Exemplu


<HTML> <HEAD> <TITLE>Utilizarea tabelelor</TITLE> </HEAD> <BODY> <TABLE border="1"> <TR> <TD>Celula 1</TD> <TD>Celula 2</TD> <TD rowspan="3">Celula 3</TD> </TR> <TR> <TD colspan="2">Celule 4 si 5</TD> </TR> <TR> <TD>Celula 6</TD> <TD>Celula 7</TD> </TR> </TABLE> </BODY> </HTML> Crearea paginilor web utliznd limbajul (X)HTML 33

Validarea documentelor HTML


Markup Validation Service: http://validator.w3.org/ n HTML Tidy http://tidy.sourceforge.net/
n

Crearea paginilor web utliznd limbajul (X)HTML

35

Entit #i
n n n

Anumite caractere precum, <, > au o semnificatie special in limbajul HTML Pentru a putea utiliza aceste caractere intr-o pagina au fost introduse entit %ile Cele mai utilizate entitati

&lt; reprezinta < &gt; reprezinta > &amp; reprezinta & &apos; reprezinta ' &quot; reprezinta " &nbsp; sprezinta un spatiu alb in HTML mai multe spatii simple sunt tratate ca un singur spatiu

Crearea paginilor web utliznd limbajul (X)HTML

34