Crearea Paginilor Web Utlizând Limbajul (X) HTML: Ce Este Hipertextul? Ce Este HTML?

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
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
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)
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
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">
10
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

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.
14
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>

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
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>
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>
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">

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
26
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>
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
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>
30
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
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

< reprezinta < > reprezinta > & reprezinta & ' reprezinta ' " reprezinta " sprezinta un spatiu alb in HTML mai multe spatii simple sunt tratate ca un singur spatiu
34

Crearea Paginilor Web Utlizând Limbajul (X) HTML: Ce Este Hipertextul? Ce Este HTML?

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Crearea Paginilor Web Utlizând Limbajul (X) HTML: Ce Este Hipertextul? Ce Este HTML?

Încărcat de

Drepturi de autor:

Formate disponibile

Componentele unui sistem hipertext

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Facilit #i oferite de limbajul HTML

Sintaxa unui tag HTML

Limbajul HTML ofer autorilor mijloace pentru:

Tag-uri de tip bloc (pereche):

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Elementele limbajului HTML

Sintaxa unui tag HTML (cont.)

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Structura general a unui document HTML

Reprezentarea sub form de arbore

Un document HTML este compus din 3 sec(iuni:

Con(inul documentul HTML

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Structura general a unui document HTML

Declara#ia tipului de document HTML

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Antetul unui document HTML - HEAD

Corpul documentului - Elementul BODY

Sec#iunea HEAD cuprinde antetul pagini ce include:

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

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

Crearea paginilor web utliznd limbajul (X)HTML

Corpul documentului - Elementul BODY

Elemente ale limbajului HTML

Tag-urile HTML pot fi clasificate astfel:

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Elemente pentru introducerea antetelor - Hn

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

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

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

Crearea paginilor web utliznd limbajul (X)HTML

Elemente pentru introducerea antetelor - Hn

Pentru alinierea paragrafelor se poate utiliza atributul align

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

Crearea paginilor web utliznd limbajul (X)HTML

Formatarea textului - Exemplu

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

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

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

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

Crearea paginilor web utliznd limbajul (X)HTML

Inserarea de imagini - Exemplu

Crearea paginilor web utliznd limbajul (X)HTML

Crearea paginilor web utliznd limbajul (X)HTML

Inserarea de tabele - Exemplu

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

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

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

Inserarea de tabele (cont.)

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

Crearea paginilor web utliznd limbajul (X)HTML