Documentaţie HTML

Prof Andreea Adina Chelaru
Crearea paginilor Web

Un document HTML are urmtorul ciclu de via:
1. Editarea fiierului HTML cu ajutorul unui editor de texte (ex. Notepad)
2. Salvarea fiierului editat folosind extensia htm sau html
3. Vizualizarea paginii cu ajutorul unui browser (ex. Internet Explorer)
Elementele standard ale unui document HTML sunt:
<html>
<head>
</head>
<body>
</body>
</html>
n seciunea de antet,adic n corpul etichetei pereche <head> </head>, sunt furnizate informaii
browser-ului i server-ului pe care este documentul. n partea de antet pot fi folosite etichetele:
-
<title> </title>
<bgsound>
<meta>
ntre <title> </title> se trece un ir de caractere care reprezint titlul, ce va fi afiat n bara de titlu n
momentul execuiei.
Eticheta <bgsound>
ne permite s lansm n execuie un document de sunet din HTML.Dac
documentul este publicat n Internet este indicat ca dimensiunea s fie ct mai mic (s fie folosit formatul mid
sau rm). Atributele etichetei sunt:
src calea ctre fiierul sunet
loop=nr numrul de repetri a sunetului (dac nr=-1 sunetul este redat la infinit).
Eticheta <meta> furnizeaz informaii browser-ului sau motoarelor de cutare, stabilete tipul limbajului de
scripturi folosit n acel document, stabilete un mod grafic de deschidere sau nchidere a documentului HTML.
Exemple:
1. <meta name =description content =scurt descriere a coninutului documentului>
2. <meta name =keywords content =cuvinte cheie din document separate prin ,>
3. <meta name =author content =numele autorului>

4. <meta http-equiv =expires content =>
5. <meta http-equiv =Content_Script_Type content =text javascript>
6. <meta http-equiv =Content_Script_Type content =text/css>
7. <meta http-equiv =page-enter content =revealtrans (duration =3, transition = 17)>
8. <meta http-equiv =page-exit content = revealtrans (duration =5, transition = 21>
9.
<meta http-equiv = refresh content =10; URL=http://www.kappa.ro> - dup 10 secunde
documentul va fi nchis i browser-ul va ncarca pagina de la adresa dat de URL. URL(Uniform Resource
Locator) este un mecanism comun pentru identificarea unic a informaiei din spaiul de date.
Ex. <html>
<head> <title> Acesta este titlul primei pagini. </title>
</head>
<body>
Prima linie
A doua linie
A treia linie
</body>
</html>
Ex. <html>
</head>
<body>
Prima linie 
A doua linie 
A treia linie
</body>
</html>
n seciunea de corp,adic n corpul etichetei pereche <body> </body> pot fi folosite urmtoarele atribute:
1.bgcolor =culoare/RRGGBB,unde R,G,B iau valori de la 0 la F
2. background =adresa URL sau calea relativa catre un fisier imagine- setaeza o imagine in background
si dezactiveaza bgcolor

3.bgproperties =fixed determina background fix, adica la deplasarea scroll-ului se va deplasa doar
continutul fara background
4. text =culoare stabileste culoarea textului din pagina
5. link = culoare stabileste culoarea link-urilor din pagina, care implicit este albastru
6. alink = culoare stabileste culoarea link-urilor active din pagina,
7. vlink = culoare stabileste culoarea link-urilor vizitate din pagina,
Ex. <html>
</head>
<body>
<pre>
Prima linie
A doua linie indentata
A treia linie de doua ori indentata
</pre>
</body>
</html>
Etichete pentu text

1) .
2) face seteaza tipul fontului
3) color stabileste culoarea fontului
4) size stabileste marimea fontului
5) . - face textul ingrosat/aldin
6) . - face textul inclinat/cursiv
7) . - face textul subliniat
8) <s>.</s> - face textul taiat
9) . - afiseaza textul mai sus decat textul de baza
10) . - afiseaza textul mai jos decat textul de baza
Ex.1
<html>
<head> <title>Exemplu </title> </head>
<body >
3
Aceasta linie e scrisa cu cacartere normale 

Aici fiecare 
 cuvant
are
alta
culoare
 M 
 O 
 Z 
 A 
 I 
 C 
</body>
</html>
Ex. 2
Aceasta linie este scrisa cu caractere
normele.
Fonturi de marime 6
Fonturi de marime 4
Fonturi de marine 1
Fonturi de marime 6
<html>
<head>
<title>Exemplu </title>
</head>
<body >
Aceasta linie este scrisa cu caractere normele 
 Fonturi de marime 6 
 Fonturi de marime 4 
 Fonturi de marime 1 
 Fonturi de marime 2 
</body>
</html
Ex. 3
Aceasta linie este formata din este formata din <html>
text normal
<head>
Aceasta linie este scrisa cu caractere
ingrosate
</head>
In aceasta linie doar cuvantul gros este
<body >
ingrosat
Aceasta linie este formata din este formata
din text normal 
 Aceasta linie este scrisa cu caractere
ingrosate 
In aceasta linie doar cuvantul gros
este ingrosat
</body>
</html
Ex. caratere marite

Linie cu text normal.
<html>
Linie scrisa in intregime cu caractere marite.
<head> <title> Caractere marite </title></head>

<body>
Normal marit mai
mare si
mai
mare
Linie cu text normal. 

<big> Linie scrisa in intregime cu caractere
marite.</big> 
Normal <big> marit <big> mai mare <big> si mai
mare</big></big></big>
</body>
</html>
Ex. caractere micsorate

<html>
Linie scrisa in intregime cu caractere micsorate cu o unitate.
<head> <title> Caractere micsorate</title></head>
Normal micsorat mai mic si mai mic
<body>
 Linie scrisa in intregime cu caractere
micsorate cu o unitate. 
Normal micsorat mai mic si
mai mic
</body>
</html>
Ex. caractere indice si exponent

<html>
In aceasta linie sus este superscript, iar jos este
<head><title> Indice si exponent </title></head>
subscript.
<body>
F(y) = (x1 + x2)2

In aceasta linie sus este superscript, iar
 jos este subscript. 
F(y) = (x1 +
x2)2
</body>

</html>
Etichete pentru aranjarea elementelor in pagina

1) <center>..</center> - centreaza continutul
2) - trece continutul ce urmeaza pe linie noua
3) .. - creeaza un nou paragraf
4) <hr color =culoare width = lungime size =pixeli align=left/center/right> -deseneaza o linie
orizontala; nu conteaza ordinea atributelor in eicheta; width se completeaza cu un numar de pixeli (ex.
100,200,..) sau cu un procentaj (ex. 50%, adica 50% din pagina)
Ex. 4
<html>
<head>
</head>
<body >
Tipuri de
linii orizontale 
Urmeaza o linie implicita(aliniere stg, latime
100%, grosime 2)
<hr >
Urmeaza o linie aliniata centru , de latime
50%, grosime 5
<hr> align=center width=50% size=5>
</body>
</html>
Tipuri de linii orizontale

Urmeaza o linie implicita(aliniere stg, latime
100%, grosime 2)
Urmeaza o linie aliniata centru , de latime
50%, grosime 5
Ex. 5
<html>
<head>
</head>
<body >
<center>
<hr width=10%>
<hr width=40%>
<hr width=70%>
<hr width=100%>
<hr width=70%>
<hr width=40%>
<hr width=10%>
</center>
6
</body></html>
Ex. indentarea folosind blockquote
Constantin Brancusi obisnuia sa spuna:

Simplitatea nu este un scop in arta, insa
ajungi la simplitate fara voia ta, apropiindu-te
de sensul cel real al lucrurilor. Simplitatea este
in sine o complexitate - si trebuie sa te hranesti
cu esenta, ca sa poti sa ii intelegi valoare.
<html>
<head><title>Blockquote</title></head><body>
Constantin Brancusi obisnuia sa spuna:
<blockquote>
Simplitatea nu este un scop in arta, insa ajungi
la simplitate fara voia ta, apropiindu-te de sensul cel
real al lucrurilor. Simplitatea este in sine o
complexitate
si
trebuie
sa
te
hranesti
cu
esenta, ca sa poti sa ii intelegi valoare.

</blockquote>
</body>
</html>
Ex. aliniere datelor div
Aceasta este o linie normala. Urmatorul text va fi

aliniat la dreapta:
Motto:
"Misiunea artei este sa creeze bucurie
si nu se poate crea artistic decat
in echilibru si in pace sufleteasca.."
Constantin Brancusi
Urmatorul bloc este aliniat la centru:
"De cand viata mea te stie
o suferinta port mereu;
Frumusetea ta-i o poezie,
pe care n-am facut-o eu."
Lucian Blaga: Catren
<html>
<head><title>Blockquote</title></head>
<body>Aceasta este o linie normala. Urmatorul text va
fi aliniat la dreapta:
<div align="right">Motto: "Misiunea artei este sa
creeze bucurie si nu se poate crea artistic
decat in echilibru si in pace sufleteasca.." 
Constantin Brancusi</div>
Urmatorul bloc este aliniat la centru:
<div align ="center">"De cand viata mea te stie 
o suferinta port mereu; 
Frumusetea ta-i o poezie, pe care n-am facut-o
eu." Lucian Blaga: Catren</div>
</body>
</html>
5) <hi align=left/center/right> </hi>, i=1,2,3,4,5,6. ajuta la scrierea unui titlu cu o anumita

marime, h1 este cea mai mare marime, iar h6 cea mai mica
6) <ul type=disc/square/circle> - construieste o lista neordonata de elemente (ul unordered list)

7) <ol type=1/a/A/i/I> - construieste o lista ordonata de elmente (ol ordered list)
8) <li>.</li> - defineste un element de lista ordonata sau neordonata
Ex. 6 lista neordonata

Pentru a cunoaste Internet-ul trebuie sa <html>
studiati urmatoarele carti:
<body >
HTML
 O lista neordonata
JavaScript
<ul type=circle> Pentru a cunoaste Internet-ul
Java
trebuiesa studiati urmatoarele carti:
Seria Internet va cuprinde <li> HTML
<li> JavaScript
urmatoarele carti:
<li> Java
HTML prin exemple
</ul>
JavaScript prin exemple
<ul type=square> Seria Internet va cuprinde
Java prin exemple
urmatoarele carti:
<li> HTML prin exemple
<li> JavaScript prin exemple
<li> Java prin exemple
</ul>
</body>
</html>
Ex. 7 lista ordonata
Pentru a cunoaste Internet-ul trebuie sa <html>
studiati urmatoarele carti:
A. HTML
<body >
B. JavaScript
 O lista neordonata
C. Java
<ol type=A> Pentru a cunoaste Internet-ul
trebuiesa studiati urmatoarele carti:
Seria Internet va cuprinde urmatoarele <li> HTML
carti:
<li> JavaScript
I. HTML prin exemple
<li> Java
II. JavaScript prin exemple
</ol>
III. Java prin exemple
<ol type=I> Seria Internet va cuprinde
urmatoarele carti:
<li> HTML prin exemple
<li> JavaScript prin exemple
<li> Java prin exemple
</ol>
</body></html>
9) <img src=adresa url sau calea relativa a unui fisier imagine border=pixeli width=lungimea
height=inaltimea> - insereaza o imagine;width si height pot fi completate inpixeli sau procente
Ex. 8
Salut!
ManumescMotanel!
<html>
<head> <title> includerea unei imagini </title>
</head>
<body>
<hr size=30 color=red>
<img src=c:\catel.jpg>
<h1><center> salut!</center></h1>
<center>

ma numesc motanel!</center>
<center>
<img src=c:\pisica.jpg></center>
<hr size=30 color=red>
pisica@k.ro<hr color=red>
</body>
</html>
pisica@k.ro
10) <a href =adresa url a unui document sau calea relativa catre acesta> - creeaza unlink la
documentul indicat de atributul href
Ex. 9
<html>
<head>
Pagina 1
<title>p1 </title>
</head>
<body >
 <center>Pagina 1
Link catre pagina 2
</center> 
<hr>
<a href=p2.html>Link catre pagina 2</a>
</body>
</html>
Ex. 10
<html>
<head>
Link catre un site web
</head>
<body >
 <center>Link catre un
Link catre www.yahoo.com
site Web</center> 
9
<hr>
<a href=http://www.yahoo.com>Link catre
www.yahoo.com</a>
</body>
</html>
11) <table
width=pixeli/procent
border=pixeli
align=left/center/right
bgcolor=culoare
cellpadding=pixeli/procent hspace=pixeli vspace=pixeli>

a. width=pixeli/procent latimea tabelului
b. border=pixeli chenarul unui tabel
c. align=left/center/right alinierea tabelului
d. bgcolor=culoare culoarea de fond a tabelului
e. cellpadding=pixeli/procent distanta dintre continut si marginea unei celule
f.
hspace=pixeli distanta orizontala dintre tabel si textul inconjurator
g. vspace=pixeli - distanta verticala dintre tabel si textul inconjurator

12) <tr> - defineste un rand al tabelului
13) <td align=left/center/right/justify bgcolor=culoarecolspan=numar height=pixeli/procent
width=pixeli/procent rowspan=numar valign=top/middle/bottom> - defineste o data din
tabel
align=left/center/right/justify alinierea pe orizontala
bgcolor=culoare culoarea unei celule
colspan=numar - numarul de coloane lipite
height=pixeli/procent - inaltimea celulei
width=pixeli/procent latimea celulei
rowspan=numar numarul de randuri lipite
valign=top/middle/bottom alinierea pe verticala
Ex. 11
mure
<html>
<head>
zmeura
afine
10
mere
pere
cirese
</head>
<body >
 <center> Un tabel
titlu</center> 
<table border=3>
<tr>
<td> mure
<td> zmeura
<td> afine
<tr>
<td> mere
<td> pere
<td> cirese
</table>
</body> </html>
cu
14) <marquee align=top/middle/bottom behavior=scroll/slide/alternate height=pixeli/procent

width=pixeli/procent loop=numar bgcolor=culoare scrolldelay=numar> - creeaza zona in care
defileaza un text sau o imagine
align=top/middle/bottom alinierea pe verticala
behavior=scroll/slide/alternate modul de deplasare continuu/se opreste la margine/stanga-dreapta
height=pixeli/procent inaltimea zonei de defilare
width=pixeli/procent latimea zonei de defilare
loop=numar numarul de defilari, daca numar= -1 defileaza la nesfarsit
bgcolor=culoare culoarea de background a zonei de defilare
scrolldelay=numar numarul de milisecunde intre doua defilari consecutive
Pagini in pagini
Cadrele sunt definite intr-un fisier HTML special, in care blocul <body></body> este inlocuit de blocul
<frameset></frameset>. In interiorul acestui bloc fiecare cadru este introdus prin eticheta <frame>. Un
atribut obligatoriu al etichetei <frame> este src.
1.) <frameset cols=*/pixeli/procent rows=*/pixeli/procent bordercolor=culoare frameborder=
yes/no>
cols=*/pixeli/procent lista latimilor coloanelor separate prin ,
rows=*/pixeli/procent- lista latimilor randurilor separate prin ,
11
bordercolor=culoare culoarea chenarului
frameborder= yes/no vizibilitatea chenarului
2.) <frame src=adresa url/calea relativa a unui document align=top/middle/bottom/left/right

border=pixeli bordercolor=culoare scrolling=yes/no/auto frameborder=1/0
height=pixeli/procent width=pixeli/procent>
align=top/middle/bottom/left/right alinierea cadrului
border=pixeli chenarul cadrului
bordercolor=culoare - culoarea chenarului
scrolling=yes/no/auto bare de derulare
frameborder=1 / 0 chenarul unui cadru
height=pixeli/procent inaltimea cadrului
width=pixeli/procent latimea cadrului
Ex. 12
1. Cadre orizontale
mprirea browser-ului n dou seciuni orizontale.
Cadre1.html
<HTML>
<FRAMESET ROWS="80, *">
<FRAME SRC ="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
</HTML>
mprirea browser-ului n trei seciuni orizontale.
Cadre2.html
<HTML>
<FRAMESET ROWS="80,50, *">
<FRAME SRC ="trei.html">
</FRAMESET>
</HTML>
2. Cadre verticale
12
mprirea browser-ului n dou seciuni verticale.

Cadre3.html
<HTML>
<FRAMESET COLS="80,*">
</FRAMESET>
</HTML>
mprirea browser-ului n trei seciuni verticale.
Cadre4.html
<HTML>
<FRAMESET COLS="80,50,*">
<FRAME SRC ="trei.html">
</FRAMESET>
</HTML>
3. Cadre n cadre
Putem afia n aceeai fereastr a browser-ului simultan att cadre orizontale ct i cadre verticale.
Cadre5.html
<HTML>
<FRAMESET COLS="80%,*">
<FRAMESET ROWS="30%,70%*">
<FRAME SRC="unu.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME SRC ="rosu.html">
<FRAME SRC ="galben.html">
<FRAME SRC ="verde.html">
</FRAMESET>
</FRAMESET>
</HTML>
Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al marcajului <FRAME>.
Documentul prima.html
<HTML>
<FRAMESET COLS="30%,*">
<FRAME SRC ="ROSU.html">
<FRAMESET ROWS="30%,*">
<FRAME SRC ="NEGRU.html">
<FRAME SRC ="ALB.html" NAME=REFER>
</FRAMESET> </FRAMESET></HTML>
Documentul rosu.html
13
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="RED"TEXT="#FFFFFF">
<A HREF="VERDE.html" TARGET=REFER>Referire catre pagina Web verde</A>
 
<A HREF="ALBASTRU.html"TARGET=REFER>Referire catre pagina Web albastra</A>
</BODY>
</HTML>
Documentul alb.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="WHITE"TEXT=#000000">
<H1><CENTER>PAGINA ALBA</CENTER></H1>
</BODY>
</HTML>
Documentul negru.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLACK"TEXT=#FFFFFF">
<H1><CENTER>PAGINA NEAGRA</CENTER></H1>
</BODY>
</HTML>
Documentul verde.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="GREEN"TEXT=#000000">
<H1><CENTER>PAGINA VERDE</CENTER></H1>
</BODY>
</HTML>
Documentul albastru.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLUE"TEXT=#000000">
<H1><CENTER>PAGINA ALBASTRA</CENTER></H1>
</BODY> </HTML>
14

Documentaţie HTML

Încărcat de

Informații document

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

Documentaţie HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Prof Andreea Adina Chelaru

Crearea paginilor Web

ne permite s lansm n execuie un document de sunet din HTML.Dac

Prof Andreea Adina Chelaru

<meta http-equiv = refresh content =10; URL=http://www.kappa.ro> - dup 10 secunde

Prof Andreea Adina Chelaru

Etichete pentu text

Prof Andreea Adina Chelaru

Aceasta linie e scrisa cu cacartere normale<br>

Prof Andreea Adina Chelaru

Ex. caratere marite

Linie scrisa in intregime cu caractere marite.

<head> <title> Caractere marite </title></head>

Normal marit mai

Linie cu text normal. <br>

Ex. caractere micsorate

Linie scrisa in intregime cu caractere micsorate cu o unitate.

<head> <title> Caractere micsorate</title></head>

Normal micsorat mai mic si mai mic

Ex. caractere indice si exponent

In aceasta linie sus este superscript, iar jos este

<head><title> Indice si exponent </title></head>

F(y) = (x1 + x2)2

Linie cu text normal. <br>

Prof Andreea Adina Chelaru

Etichete pentru aranjarea elementelor in pagina

Tipuri de linii orizontale

Prof Andreea Adina Chelaru

Constantin Brancusi obisnuia sa spuna:

<i>esenta</i>, ca sa poti sa ii intelegi valoare.

Aceasta este o linie normala. Urmatorul text va fi

5) <hi align=left/center/right> </hi>, i=1,2,3,4,5,6. ajuta la scrierea unui titlu cu o anumita

Prof Andreea Adina Chelaru

Ex. 6 lista neordonata

Prof Andreea Adina Chelaru

Prof Andreea Adina Chelaru

cellpadding=pixeli/procent hspace=pixeli vspace=pixeli>

hspace=pixeli distanta orizontala dintre tabel si textul inconjurator

g. vspace=pixeli - distanta verticala dintre tabel si textul inconjurator

align=left/center/right/justify alinierea pe orizontala

bgcolor=culoare culoarea unei celule

colspan=numar - numarul de coloane lipite

height=pixeli/procent - inaltimea celulei

width=pixeli/procent latimea celulei

rowspan=numar numarul de randuri lipite

valign=top/middle/bottom alinierea pe verticala

Prof Andreea Adina Chelaru

14) <marquee align=top/middle/bottom behavior=scroll/slide/alternate height=pixeli/procent

align=top/middle/bottom alinierea pe verticala

behavior=scroll/slide/alternate modul de deplasare continuu/se opreste la margine/stanga-dreapta

height=pixeli/procent inaltimea zonei de defilare

width=pixeli/procent latimea zonei de defilare

loop=numar numarul de defilari, daca numar= -1 defileaza la nesfarsit

bgcolor=culoare culoarea de background a zonei de defilare

scrolldelay=numar numarul de milisecunde intre doua defilari consecutive

cols=*/pixeli/procent lista latimilor coloanelor separate prin ,

rows=*/pixeli/procent- lista latimilor randurilor separate prin ,

Prof Andreea Adina Chelaru

bordercolor=culoare culoarea chenarului

frameborder= yes/no vizibilitatea chenarului

2.) <frame src=adresa url/calea relativa a unui document align=top/middle/bottom/left/right

align=top/middle/bottom/left/right alinierea cadrului

border=pixeli chenarul cadrului

bordercolor=culoare - culoarea chenarului