Cod HTML

Lectia 1
Creat în Elvetia în anul 1989, HTML este utilizat pentru crearea paginilor Web. Utilizarea HTML propune scrierea textulu
urile HTML pentru a descrie amplasarea elementelor in pagina. Paginile Web pot fi vizionate prin intermediul unor progr
HTML dispune de un set de predefinit de tag-uri, nu puteti crea tag-uri proprii. Pentru a complica lucrurile, exista versiun
browser nu poate fi recunoscut de un browser diferit sau mai putin recent. Urmeaza cîteva exemple de tag-uri HTML:
1. <B>…..</B> Pentru text boldat
2. <U>…..</U> Pentru text subliniat
3. <I>…..</I> Pentru text italic
4. <P>…..</P> Pentru a începe un paragraf nou
5. <TABLE>…..</TABLE> Pentru a insera un tabel
6. <TITLE >…..</TITLE> Pentru a intitula o pagina

Tag-urile HTML indica efectele aplicate diferitor parti de pagina în programele browser (asa ca Netscape Navigator si In
cu dezvoltarea web-ului, au aparut mai multe idei pentru îmbunatatirea acestuia. În cea mai recenta versiune sunt mai p
capatata si cu un numar mai mic decît acesta. Majoritatea tag-urilor HTML trebuie sa fie deschise <A>, apoi închise </A
prezenta textul în font boldat, Italic si subliniat. Codul HTML pentru aceasta propozitie este: <P> Majoritatea programel
subliniat </U>. </P> Tag-urile HTML (<B> si </B>) de pe ambele parti ale cuvîntului “bold” fac ca acest cuvînt sa apara
vazute în browser. Editoarele HTML Editoarele HTML va usureaza munca deoarece sînt capabile sa insereze codul HT
HTML, editorul transforma automat design-ul un cod HTML. Editoarele HTML mai sunt considerati folositori si datorita u
perde timpul la tiparirea lor. Pe lînga toate acestea editoarele HTML permit atît adaugarea, stergerea si modificarea tex
miscarea si lichidarea legaturilor (links) si a imaginilor de pe pagina, iar apoi publicarea paginii propriu-zis în Internet. D
Lectia 2
Antet
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1>La multi ani!</h1> La multi ani!

<h2>La multi ani!</h2> La multi ani!
<h3>La multi ani!</h3>La multi ani!
 <hn>---</hn> intarit.
 <hn>---</hn> insereaza o linie goala fara a fi nevoie de tag-ul <p>

Nu pot afisa fonte de dimensiuni diferite in aceeasi linie.
Dimensiune font
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# (pe o portiune de text)
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7 (pentru toata pagina)
<font size=7>La multi ani!</font> La multi ani!
Marcare fizica
<b>La multi ani!</b> La multi ani!
<i>La multi ani!</i> La multi ani!
<u>La multi ani!</u> La multi ani!
<tt>La multi ani!</tt> La multi ani!
<sup>La multi ani!</sup> La multi ani!
<sub>La multi ani!</sub> La multi ani!
<s>La multi ani!</s> La multi ani!
<strike>La multi ani!</strike> La multi ani!
Marcare logica
<em>La multi ani!</em> La multi ani!
<strong>La multi ani!</strong> La multi ani!
<code>La multi ani!</code> La multi ani!
<samp>La multi ani!</samp> La multi ani!
<kbd>La multi ani!</kbd> La multi ani!
<var>!</var> La multi ani!
<dfn>La multi ani!</dfn> La multi ani!
<cite>La multi ani!</cite> La multi ani!
<small>La multi ani!</small> La multi ani!
<big>La multi ani!</big> La multi ani!
Dimensiuni si atribute
<i><font size=5>
<b>La</b> multi <font size=6> ani!</font>
</font></i>
La multi ani!
Culoare font
Culoarea specificata <font color=#> ... </font>
#=rrggbb numar hexazecimal sau numele culorii:

Black = "#000000" Olive = "#808000"
Teal = "#008080" Red = "#FF0000"
Blue = "#0000FF" Maroon = "#800000"
Navy = "#000080" Gray = "#808080"
Lime = "#00FF00" Fuchsia = "#FF00FF"
White = "#FFFFFF" Green = "#008000"
Purple = "#800080" Silver = "#C0C0C0"
Yellow = "#FFFF00" Aqua = "#00FFFF"
<font color=ffffff>White</font> &
<font color=white>White</font>
Tipuri de fonte
<font face="#"> ... </font>
#=fonte disponibile
<font face="Arial, Helvetica"> Noroc!</font>
Noroc!
Entitati
&#; #=cuvant cheie sau codul ascii
Caractere in HTML2.0
& &
< <
> >
" "
Lectia 3
Structura unui document
<html>...</html>
<head>...</head>
<body>...</body>
<HTML> <HEAD> <title>, <base>, <link>, <isindex>, <meta> </HEAD> <BODY> Corpul unui document </BODY> </
Set de caractere
<meta http-equiv="Content-Type" content="text/html;charset=#">
#=
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
Se poate specifica codul setului de caractere pentru fiecare document HTML. Se utilizeaza pentru cei care vor
Daca codificatorul se specifica in documentul HTML, browserul poate schimba automat in setul de caractere
este bine sa se specifice setul de caractere (de ex: iso-8859-1). Entitatile vor aparea modificate la accesarea do
Culoare de fond si text
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- culoarea de fond
text --- culoarea textului
link --- culoarea legaturii
alink --- culoarea legaturii la activare
vlink --- culoarea legaturii dupa activare
Black = "#000000" Olive = "#808000"
Teal = "#008080" Red = "#FF0000"
Blue = "#0000FF" Maroon = "#800000"
Navy = "#000080" Gray = "#808080"
Imaginea de fond
<body background="imagine-URL">
Nu se poate face scroll pe imaginea de fond astfel:

<body background="URL" bgproperties=FIXED>
Margini
Marginea stanga <body leftmargin=#>
Marginea superioara <body topmargin=#>
#=dimensiunea marginii
Legaturi
Legaturi de baza <a href="URL"> ... </a>
Acesta este un
<a href="../exemplu/legatura.html">test pentru legaturi</a>.
Acesta este un test pentru legaturi.
Legatura la o pagina din document
<a href="#nume"> ... </a>
<a name="nume"> ... </a>
<a href="#salt">Salt la urmatoarea "legatura"</a><P>
<a name="salt">Legatura</a>
Salt la urmatoarea "legatura"
Salt la un alt document
<a href="URL#nume"> ... </a>

<a name="nume"> ... </a>
Salt la o
<a href="../exemplu/legatura.html#salt"> urmatoarea "legatura"</a>
din alt document.
Salt la o "legatura" din alt document.
Ferestre tinta
<a href="URL" target="Numele_Ferestrei"> ... </a>
 Netscape Navigator 2.0* deschide o fereastra noua.

<a href="../exemplu/fereastra.html" target="numele_ferestrei">
Deschide o fereastra!
</a>
Deschide o fereastra!
Linii de delimitare
Hair Line<hr>
<hr>
<hr size=#>
<hr size=10>
<hr width=#>
<hr width=50>
<hr width=50%>
<hr align=#> #=left, right
<hr width=50% align=left>

<hr width=50% align=right>
<hr noshade>
<hr noshade>
<hr color=#>

Black = "#000000" Olive = "#808000"
Teal = "#008080" Red = "#FF0000"
Blue = "#0000FF" Maroon = "#800000"
Navy = "#000080" Gray = "#808080"
<hr color="red">
Lectia 4
Paragraf
Paragraf <p> (Linie goala)
<p>Acesta este primul paragraf. <p>Acesta este al Acesta este primul paragraf.
doilea paragraf.
Acesta este al doilea paragraf.
Aliniere paragraf
<p align=#>#=left, center, right, justify
<p align=left>
<p align=center> <p align=right>
Acesta este primul paragraf.
Acesta este primul paragraf. Este Acesta este primul paragraf. Es
Este un material interesant, nu-i
un material interesant, nu-i asa? un material interesant, nu-i as
asa?
Linie de impartire<br>
Acesta este<br>primul paragraf.
Acesta este
primul paragraf.
Linie continua <nobr>
<nobr>
Prin micsorarea latimii ferestrei se va observa efectul acestui element!
</nobr>
Prin micsorarea latimii ferestrei se va observa efectul acestui element!
Centrare in pagina
<center>...</center>
<center>Salut</center>
Salut
Grupare text
Fragmentare (grupare text sub forma de bloc)
<div> ... </div>
<div class="section"> <H5>1. Introducere</H5> In aceasta 1. Introducere
sectiune se are in vedere.... <div class="subsection">
<h5>1-1. Prezentare</h5> Lucrarea reprezinta o parte
In aceasta sectiune se are in vedere....
importanta.... </div> </div>
1-1. Prezentare
Lucrarea reprezinta o parte importanta....
Span (grupare text dupa cuvant) <span> ... </span>

TELEFON: <span class="telefon"> 000-0000000 TELEFON: 000-0000000
</SPAN>
Liste
Liste neordonate <ul><li>...</ul>
<ul>
<li>Ziua
<li>Noaptea
</ul>
 Ziua
 Noaptea
Liste ordonate <ol><li>...</ol>

<ol>
<li>Ziua
<li>Noaptea
</ol>
1. Ziua
2. Noaptea
Liste de definitii <dl><dt>...<dd>...</dl>

<dl>
<dt>Ziua
<dd>Ziua straluceste soarele.
<dt>Noaptea
<dd>Noaptea apar stelele pe cer.
</dl>
Ziua
Ziua straluceste soarele.
Noaptea
Noaptea apar stelele pe cer.
Lista de definitii compacta
<dl compact><dt>...<dd>...</dl>
<dl compact>
Ziua <dt>Ziua
Ziua straluceste soarele. <dd>Ziua straluceste soarele.
Noaptea <dt>Noaptea
Noaptea apar stelele pe cer. <dd>Noaptea apar stelele pe cer.
</dl>
Liste marcate
Tipuri de marcare
<li type=#> #=disk(sfera), circle(cerc), square(patrat)
<ul>
<li type=disc>UNU
<li type=circle>DOI
<li type=square>TREI
</ul>
 UNU
o DOI
 TREI
Majuscule <li type=#> #=A, a, I, i, 1

<ol><li type=A>UNU-UNU
<li>UNU-DOI</ol>
A. UNU-UNU
B. UNU-DOI
<ol><li type=a>UNU-UNU
<li>UNU-DOI</ol>
a. UNU-UNU
b. UNU-DOI
<ol><li type=I>UNU-UNU
<li>UNU-DOI</ol>
I. UNU-UNU
II. UNU-DOI
<ol><li type=i>UNU-UNU
<li>UNU-DOI</ol>
i. UNU-UNU
ii. UNU-DOI
<ol><li type=1>UNU-UNU
<li>UNU-DOI</ol>
1. UNU-UNU
2. UNU-DOI
Numerotarea listelor <ol start=#> #=numar

<ol start=5> <li type=A>UNU-UNU <li>UNU-DOI <ol start=10> <li>DOI-UNU <li type=i>DOI-UNU </ol></ol>
5.
E. UNU-UNU
F. UNU-DOI
10. DOI-UNU
x. DOI-DOI
Texte preformatate
<pre>...</pre>
<pre>
Comunicatiile au luat amploare.
A aparut Internet-ul.
<b>Azi se poate comunica in mai multe feluri:</b>
<ul><li>Fax
<li>Posta
<li>Posta electronica</ul>
</pre>
Comunicatiile au luat amploare A aparut Internet-ul Azi se poate comunica in mai multe feluri:
 Fax
 Posta
 Posta electronica
<listing>...</listing>
<listing>
A aparut Internet-ul
<ul><li>Fax
<ul><li>Posta
</listing>
Comunicatiile au luat amploare. A aparut Internet-ul Azi se poate comunica in mai multe feluri:
 Fax
 Posta
<xmp>
A aparut Internet-ul
<ul><li>Fax
<li>Posta
</xmp>
Comunicatiile au luat amploare. A aparut Internet-ul Azi se poate comunica in mai multe feluri:
 Fax
 Posta
Spatiere
<spacer type="horizontal" size=#> #=spatiu pe orizontala
<spacer type="vertical" size=#> #=spatiu pe verticala
IERI <spacer type="horizontal" size=50> AZI <spacer type="vertical" size=50> MAINE
IERI AZI MAINE
<spacer type="block" width=# height=# align=##>
#=space size
##=top, middle, bottom, left, right
<spacer type="block" width=150 height=50 align=left> IERI<br> AZI<br> MAINE
IERI
AZI
MAINE
Afisare multicoloane
<multicol cols=#> ... </multicol> #=numarul de coloane
<multicol cols=2> text text text... </multicol>
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text
Lectia 5
Declarare imagine
<img src=#> #=Imagine URL
<img alt=#>
#=Textul afisat in cazul in care nu reuseste incarcarea imaginii.
<img src="SMILING.GIF" alt="UN ZAMBET :-)">
Imagini si text
<img align=#> #= top, middle, bottom,

absmiddle, absbottom, texttop, baseline
<img src=URL align= top> Un zambet!
Un zambet!
<img src=URL align= middle> Un zambet!
Un zambet!
<img src=URL align= bottom> Un zambet!
Un zambet!
<img src=URL align= absmiddle> Un zambet!
Un zambet!
<img src=URL align= absbottom> Un zambet!
Un zambet!
<img src=URL align= texttop> Un zambet!
Un zambet!
<img src=URL align= baseline> Un zambet!
Un zambet!
 O singura linie de text poate apare de o parte si de alta a unei imagini.
Pozitionare imagini
<img align=left>
<img src=URL align=left>Un zambet!<br>
Este mereu<br>
incurajator.<br>
Hahaha....<br>
Un zambet!
Este mereu
incurajator.
Hahaha....
<img align=right>
Un zambet!
Este mereu
incurajator.
Hahaha....
<br clear=all>
<img src=URL align=left>Un zambet!<br>
Este mereu
<br clear=all>
incurajator.<br>
Hahaha....<br>
Un zambet!
Este mereu
incurajator.
Hahaha....
<img vspace=# hspace=#> #=value

<img src=URL align=left vspace=10 hspace=20>Un zambet!<br>
Este mereu<br>
incurajator.<br>
Hahaha....<br>
Un zambet!
Este mereu
incurajator.
Hahaha....
Linia de contur
<img border=#> #=value
<a href="URL">
<img src=URL border=15>
</a>
Inap
Lectia 6 | Urmatoa
Elemente Alternative Inline

Structura de baza
<embed src=# autostart=# loop=# volume=# controls=#>
src --- URL
autostart --- true, false
loop --- true, false
volume --- un numar intre 1 - 100
controls --- console
Acest element se foloseste pentru incarcarea unor elemente speciale: film, sunet, vrml, etc. Pentru a putea lucra cu
<embed> acum, trebuie instalat pachetul software corespunzator audio/video. Atributele de incarcare difera la fiecare
conectare.
Fundal sonor (IExplorer)

<bgsound src=#> #=URL a fisierului wav
<bgsound loop=#> #=numarul buclei (de cate ori)
<bgsound src="sunet.wav" loop=3>

<img src="url.gif" dynsrc="url.avi">
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI">

Start <img start=#> #=fileopen, mouseover
#=implicit este fileopen.

Se pot specifica amandoua astfel <img start=fileopen,mouseover>
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>
Control <img controls>
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>
Bucla <img loop=#>
<loop=infinite> va bucla la infinit.
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>
Intarzierea <img loopdelay=#> #=milisecunde
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"

loop=3 loopdelay=250>
Lectia 7 Inapoi | Urmatoar
ea
Marquee - Structura de baza

Elementul <marquee> ... </marquee>
<marquee>Bine ati venit!</marquee>
@ Bine at
Atribute de scroll
Directia <direction=#> #=left(stanga), right(dreapta)

<marquee direction=left>Bine ati venit!</marquee><P>
<marquee direction=right>Bine ati venit!</marquee>
@ Bine at
@ Bine at
Comportament <behavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>Bine ati venit!</marquee><P>
<marquee behavior=slide>Bine ati venit!</marquee><P>
<marquee behavior=alternate>Bine ati venit!</marquee>
@ Bine at
@ Bine at
@ Bine at
Bucla <loop=#> #=numar sau infinit

<marquee loop=3 width=50% behavior=scroll>Bine ati venit!</marquee><P>
<marquee loop=3 width=50% behavior=slide>Bine ati venit!</marquee><P>
<marquee loop=3 width=50% behavior=alternate>Bine ati venit!</marquee>
Bine at
Bine at
Bine at
Valoare Scroll <scrollamount=#>

<marquee scrollamount=50>Bine ati venit!</marquee>
@ Bine at
Intarziere Scroll <scrolldelay=#>

<marquee scrolldelay=500 scrollamount=100>Bine ati venit!</marquee>
@ Bine at
Schema Marquee
Aliniere <align=#> #=top(sus), middle(mijloc), bottom(jos)

<font size=6>
<marquee align=# width=200>Bine ati venit!</marquee>
</font>
Salutari din Moldova.
È Bine at
È Bine at
È Bine at
Culoare fond <bgcolor=#> #=rrggbb sau nume

<marquee bgcolor=aaaaee>Bine ati venit!</marquee>
@ Bine at
Dimensiune <height=# width=#>

<marquee height=40 width=50% bgcolor=aaeeaa>
Bine ati venit!
</marquee>
( Bine at
Margini <hspace=# vspace=#>
********************************************<br>
Bine
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle> Ati Venit!</marquee>
Salutari din Moldova.<br>
********************************************
********************************************
Bine – at Salutari din Moldova.
********************************************
ea
Elemente tabel
<table>...</table>
<tr> - definitie linie de tabel
<th> - antet
<td> - date
<table border> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
<tr><td>A</td><td>B</td><td>C</td> </table>
Flori Culori Parfum
A B C
<table> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Flori Culori Parfum
A B C
Dimensionare tabele
Dimensionare dupa coloane

<th colspan=#>
<table border> <tr><th colspan=3> Florarie</th> <tr><th>Flori</th> <th>Culori</th>
<th>Parfum</th> <tr><td>A</td><td>B</td><td>C</td> </table>
Florarie
Flori Culori Parfum
A B C
Dimensionare dupa randuri

<th rowspan=#>
<table border> <tr><th rowspan=3> Florarie</th> <th>Flori</th> <td>A</td></tr>
<tr><th>Culori</th> <td>B</td></tr> <tr><th>Parfum</th> <td>C</td></tr> </table>
Flori A
Florarie Culori B
Parfum C
<table border=#> - chenarul unei tabele

<table border=10> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Flori Culori Parfum
A B C
<table width=# height=# > - suprafata unei tabele

<table border width=170 height=100> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Flori Culori Parfum
A B C
<table cellspacing=#> - spatiul dintre celule (in pixeli)

<table border cellspacing=10> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Flori Culori Parfum
A B C
<table cellpadding=#> - dimensiunea unei celule (in pixeli)

<table border cellpadding=10> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Flori Culori Parfum
A B C
Afisare text in tabel
<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<table border width=160> <tr> <th>Flori</th><th>Culori</th><th>Parfum</th><tr> <td
align=left>A</td> <td align=center>B</td> <td align=right>C</td> </table>
Flori Culori Parfum
A B C
<tr valign=#>
<th valign=#> #=top(sus), middle(mijloc), bottom(jos), baseline
<td valign=#>
<table border height=100> <tr> <th>Flori</th><th>Culori</th>
<th>Parfum</th><th>Altceva</th> <tr> <td valign=top>A</td> <td valign=middle>B</td> <td
valign=bottom>C</td> <td valign=baseline>D</td> </table>
Flori Culori Parfum Altceva
A B C D
Asezare tabel in pagina
<table align=left>
<table align="left" border> <tr><th>Flori</th><th>Culori</th><th>Parfum</th>
<tr><td>A</td><td>B</td><td>C</td> </table> Florile preferate...<br> trandafirii, zambilele, etc.
Flori Culori Parfum Florile preferate...
A B C trandafirii, zambilele, etc.

<table align=right>
Flori Culori Parfum
Flori preferate... A B C
trandafirii, zambilele, etc.

Titlu de tabel
Aliniere titlu pe orizontala

<caption align=#> ... </caption>
#=left(stanga), center(centrat), right(dreapta)
<table border> <caption align=center>Florarie</caption>
<tr><th>Flori</th><th>Culori</th><th>Parfum</th> <tr><td>A</td><td>B</td><td>C</td>
</table>
Florarie
Flori Culori Parfum
A B C
Aliniere titlu pe verticala

<caption valign=#> ... </caption>
#=top(sus), bottom(jos)
 valign=implicit este top.

<table border> <caption valign=bottom>Florarie</caption>
<tr><th>Flori</th><th>Culori</th><th>Parfum</th>
Florarie
Flori Culori Parfum
A B C
ea
Structura rame
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
Elementul <noframes> se foloseste pentru browser-ele care nu suporta

frame-uri.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<NOFRAMES> ... </NOFRAMES>
</FRAMESET>
</HTML>
Dimensiune frame
<frameset cols=#>
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
A B C
<frameset rows=#>
<frameset rows=25%,25%,50%>
</frameset>
A
COLOANE si RANDURI
<frameset cols=20%,*>
<frameset rows=40%,*>
</frameset>
</frameset>
A
C
Fara redimensionare <frame noresize>
Frame-ul implicit este redimensionabil.
Tinte intr-un frame

Numele frame-ului
<frame name=#>
<a href=url target=#>
<frameset cols=50%,50%>
<frame src="B.html" name="SALUT">
</frameset>
A B
Tinta speciala
<a href=url target=_blank>
<a href=url target=_self>
<a href=url target=_parent>
<a href=url target=_top>
Atribute frame
Chenar <frame frameborder=#> #=yes, no
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=no>
<frame src="Bcol.html" frameborder=no>
<frame src="Ccol.html" frameborder=no>
</frameset>
</frameset>
B C
Spatiu intre frame-uri (IExplorer)

<frameset framespacing=#> #=dimensiunea spatiului
<frameset rows=30%,* framespacing=100>

<frame src="Acol.html">
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
B C
Culoare chenar (Netscape)

<frameset bordercolor=#>
Black = "#000000" Olive = "#808000"
Teal = "#008080" Red = "#FF0000"
Blue = "#0000FF" Maroon = "#800000"
Navy = "#000080" Gray = "#808080"
<frameset rows=30%,* bordercolor=red>

<frame src="Acol.html">
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
A
B C
Margini <frame marginwidth=# marginheight=#>

<frameset cols=50%,50%>
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
AA
AAAA
AA
Scroll <frame scrolling=#> #=yes, no, auto

#=auto este implicit.
Frame mobil (IExplorer)

<iframe src=# name=##> ... </iframe>
#=URL
##=numele frame-ului (ca in paragraful Tinte intr-un frame)
... = sursa html pentru browser-e care nu suporta frame-uri
<center>
<iframe src="A.html" name="window">
Aici este un frame mobil
</iframe>
<br><br>
<a href="A.html" target="window">Incarca A</A><BR>
<a href="B.html" target="window">Incarca B</A><BR>
<a href="Ccol.html" target="window">Incarca C</A><BR>
</center>
Afiseaza
A.html
Incarca A
Incarca B
Incarca C
Inapoi
Lectia 10 | Urmatoare
a
Formulare
Structura unui
formular
Structura de baza
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
Intrari
<input type=* name=**>
*=text, password(parola), checkbox, radio,

image(imagine), hidden(ascuns), submit, reset
**=Nume simbolic pentru un script CGI
Text si parola
*=text, parola
<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>

Numele:
<input type=text name=name><br>
Home Page:
<input type=text name=home value=http://><br>
Password:
<input type=password name=name><br>
<input type=submit><input type=reset>
</form>
Numele:
http://
Home Page:
Password:
Submit Reset
<input type=* size=**>

<input type=* maxlength=**>

<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
</form>
Submit Query Reset

Checkbox si radio
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<input type=checkbox name=f01>
Banana<p>
<input type=checkbox name=f02 checked>
Mar<p>
<input type=checkbox name=f03 value=Portocala>
Portocala<p>
</form>
Banana
Mar
Portocala
Submit Query Reset
<input type=radio value=**>

<input type=radio value=** checked>

<input type=radio name=fructe>
Banana<p>
<input type=radio name=fructe checked>
Mar<p>
<input type=radio name=fructe value=Portocala>
Portocala<p>
</form>
Banana
Mar
Portocala
Submit Query Reset
Coordonate imagine
<input type=image src=url>

<input type=image name=fata
src=SMILING.GIF><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

x2 x4 x6
Reset
Elemente ascunse
<input type=hidden value=*>

<input type=hidden name=add
value=wwwuser@www.ro>
Aici este un element ascuns. <p>
</form>
Aici este un element ascuns.
Submit Query Reset
Meniu selectabil
Elementul "select"
<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<select name=fructe>
<option>Banana
<option selected>Mar
<option value=Fructul-preferat>Portocala
</select><p>
</form>
Submit Query Reset

<select size=**>

<select name=fructe size=3>
<option>Banana
<option>Piersica
</select><p>
</form>
Submit Query Reset
<select size=** multiple>

<select name=fructe size=3 multiple>
<option selected>Banana
<option selected>Piersica
</select><p>
</form>
Submit Query Reset
Suprafata text
<textarea name=* rows=** cols=**> ... <textarea>

<textarea name=comment rows=5 cols=60>
</textarea>
<P>
</form>
Submit Query Reset
Incadrarea textului
(Netscape)
<textarea wrap=off> ... </textarea>
La fel ca la setarea implicita.

<textarea wrap=soft> ... </textarea>
<form action=/cgi-bin/post-query
method=POST>
<textarea wrap=soft name=comment rows=5
cols=25> </textarea><P>
</form>
Submit Query Reset
<textarea wrap=hard> ... </textarea>

<form action=/cgi-bin/post-query
method=POST>
<textarea wrap=hard name=comment
rows=5 cols=25> </textarea><P>
</form>
Submit Query Reset
Lectia 11 Inapoi
Ce este JavaScript?
Introdus pentru prima oara de catre
Netscape in produsul Netscape
Navigator 2.0, limbajul JavaScript ofera
posibilitati multiple de interactivizarese d
esporire a "intelegentei" paginilor
dumneavoastra de Web.
Spre deosebire de java, unde codul este
compilat si scris in fisiere separate
numite appllet-uri, codul JavaScript este
inclus ca parte integranta a codului
sursa HTML si nu necesita comilari sau
preprocesari, fiind un limbaj 100%
interpretat. Astfel comenzile JavaScript
vor fi citite de browser-ul Web si
procesate atunci cand user-ul apelaza la
acele functii (prin apasare de butoane,
completare de formulare etc).
Destul de similar cu limbaje de
programare cunoscute precum Pascal,
C++ si in special C, limbajul JavaScript
este usor de invatat si folosit, dar are
puteri deosebite, pe care aveti
posibilitatea sa le descoperiti in
urmatoarele pagini.
De ce sa folosim JavaScript?
Limbajul HTML ofera autorilor de pagini

Web o flexibilitate insa prin natura sa
este un libaj static. Documentele .html
nu pot interactiona cu utilizatorul in alt
mod decat a pune la dispozitia acestuia
legaturi la alte resurse (URL-uri).
Crearea CGI-urilor (Common Graphics
Interface) – programe care ruleaza pe
serverul Web si care accepta informatii
primite din pagina de web si returneaza
cod HTML – a adus la alrgirea
posibilitatilor efective de lucru.Urmatorul
pas spre interactivizare a fost realizat de
JavaScript, care permite inserarea in
document in document de mici script-uri
care se executa in cadrul paginii web si
mai exact in cadrul browser-ului
utilizatorului in locul executarii pe server.
Spre exemplu intr-o pagina destinata
colectarii de la utilizator se pot insera
scripturi JavaScript pentru a valida
corectitudinea introducerii si apoi pentru
a trimite serverului numai date corecte
spre procesare.
JavaScript ofera utilizatorilor o lista
destul de ampla de functii si comenzi
incorporate menite sa ajute la operatii
matematice, manipulari de siruri,
imagini, sunete, de obiecte si ferestre
ale browser-ului, locatii URL si verificari
de introduceri ale datelor in formulare
interactive. Codul necesar acestor
actiuni poate fi inserat in pagina si
executat cand pagina s-a incarcat. De
asemenea aveti posibilitatea crearii de
functii apelabile cind anumite conditii
indeplinite (apasarea unui buton,
modificarea unei valori numerice etc).
De asemenea JavaScript poate fi suport
pentru setarea atributelor si a
variabilelor de functionare a unor applet-
uri Java sau modificarea proprietatilor
obiectelor deja existente.
Cum arata JavaScript-ul implementat
intr-o pagina de Web?
Pentru a introduce JavaScript intr-un
document thnl deja existent, necesita o
singura adaugire la aceasta, si anume
introducerea in fisier a tagului <script> si
</script>. Tagul <script> necesita
setarea parametrului LANGUAGE care
va specifica browserului limbajul folosit
pentru a interpreta codul ce este inclus.
Exemplu:
<SCRIPT LANGUAGE="JavaScript">
document.write("Textul va fi afisat pe
ecran dar nu si sursa sa");
</SCRIPT>
Limbajul si conventiile sale
Exista cateva conventii ale limbajului, si

d asemenea cateva chestiuni standard
care trebuie utilizate atunci cind doriti sa
lucrati JavaScript in pagina
dumneavoastra de Web.
Astfel, asemanarea cu limbajul C si C++,
Pascal sau dBASE presupune ca:
Limbajul JavaScript sa fie case-sensitive
(conecteaza daca scrierea a fost facuta
cu litere mari sau mici).
JavaScript-ul este foarte flexibil la partea
de scriere a comenzilor. O singura
comanda poate ocupa mai multe randuri
si de asemenea pe fiecare rand se vor
scrie comenzi separate prin ";".
Ascunderea scripturilor fata de
browserele care nu suporta JavaScript.
Unele browsere nu au fost implementate
din anumite motive de limbaj ca Java
sau JavaScript. Astfel, pentru a nu apare
texte in plus fata de cele dorite,
scripturile JavaScriptse vor ascunde.
De exemplu:
<HTML>
<HEAD>
<TITLE> Titlul Paginii </TITLE>
<HEAD>
<BODY>
<SCRIPT LLANGUAGE="JavaScript">

</SCRIPT>
</BODY>
JavaScript and Java
Urmatorul tabel infatiseaza deosebirile
dintre scripturile JavaScript si applet-
urile Java.
Java JavaScrpt
Compilate pe Interpretate de
server inainte de clienti (nu
executie compilate)
Orientate pe Bazat p eobiecte.

obiecte. Sistemul Scripturile folosesc
se compune din obiecte dar nu
obiecte cu necesita mosteniri
mosteniri de
proprietati
Applet-urile sunt Codul pentru

fisiere separate de scripturi este inclus
pagina de Web in oagina de Web
HTML HTML
Trebuie declarate Variabilele se

toate variabilele declara la
inaintate initializare
Cautarea de librarii Librariile sunt

si functii se face la verificate la
compilare pentru executarea
includere in applet scriptului de client
Nu are permisiune Nu are permisiune

sa scrie pe hard- sa scriepe Hard-
disk disk
Obiecte, functii si propietati

Ierarhia obiectelor in JavaScript ce pot fi
folosite in browser.
Window
|
+--parent, frames, self, top
|
+--location(functii si proprietati ale
locatiei)
|
+--history(functii si proprietati folosite la
navigare)
|
+--document
|
+--forms
||
| elements (text fields, textarea,
checkbox, password radio, select,
button, submit, reset)
|
+--links
|
+--anchors
Evenimente:
In browserul de web, deseori scripturile
JavaScript sunt aplicate in cazul
indeplinirii unei conditii. Acestea se mai
numesc si EVENT-uri (evenimente) si
provin de la clientul folosit.
Iata citeva evenimente posibile si
modalitatea de utilizare.
Eveniment Apare cand… Conditie
(Handler)
Blur Userul onBlur

trece la a
selecta alt
camp
Click Userul onClick

apasa un
buton sau
un link
Change Userul onChange

modifica
valoarea
unui
element
Focus Userul onFocus

actioneaza
asupra
unui
element
Load Userul onLoad

incarca
pagina in
Navigator
Mouseover Mouse-ul onMouseOver
se afla
pozitionat
peste
obiect
Submit Userul onSubmit

trimite spre
procesare
datele
Unload Userul onLoad

paraseste
pagina

Aceste conditii se folosesc in taguri html
dupa cum urmeaza:
<TAG conditie-"cod JavaScript">
Exemplu:<INPUT
TYPE="button"VALUE="[Callculeaza]"
onClick="computer(this.form)">
(la apasarea butonului, se va apela
functia compute cu parametrii din
formular)
Exemplu:
<HEAD>
function compute(form){
if (confirm("Are you sire?")) /*deschide o
fereastra in care cere confirmara */
form.result.value=eval(form.expr.value)
else
alert("Try again later.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr"
SIZE-15> /*se introduce valoarea
expresieide evealuat*/
<INPUT TYPE="button"
VALUE="Calculate"
ONCLOCK="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text"NAME="result"
SIZE=15>
<BR>
</FORM>
</BODY>
Example 4 page display.

Enter an expression:
Rezultat:
Exemplul 5: script cu un formular si cu
un eveniment handler intr-un BODY.
<HEAD>

</SCRIPT>
<P>
Thanks.
</BODY>
Rezultat:
Big Text
Normal Text
Thanks
Folosirea de ghilimele simple si duble
implica recunoasterea valorilor dintre
acestea ca fiind constante de tip text si
deci vor fo folosite ca siruri de caractere
separate. Un exemplu poate fi
urmatorul:
<HTML>
<HEAD>
<!—ascundefunction say(sir) {
document.write(sir,’<BR>’);}

</SCRIPT></HEAD>
<BODY>
<!—text=’Aceasta este valoarea unei
variabile’;say(text);
say(‘acesta este un apel literal’);
<FONT COLOR=RED> text scris cu
rosu direct din html </FONT>
</BODY>
Java si JavaScripul ofera o multitudine
de funtii si librarii, care sunt disponibile
pentru Netscape Navigator incepind de
la versiunea 2.0 si pentru MicroSoft
InterNet Explorer 3.0
Puteti deci creste gradul de
interactivizare a paginilor
dumneavoastra de Web folosind
tehnologia Java si JavaScript.
Documentatia completa JavaScript si
Java eset disponibile pe serverul:
http://www1.kappa.ro/doc/javascript/
cat si pe serverul Web al Netscape
http://www.netscape.com/

Cod 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

Cod HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Lectia 1

2. <U>…..</U> Pentru text subliniat

3. <I>…..</I> Pentru text italic

4. <P>…..</P> Pentru a începe un paragraf nou

5. <TABLE>…..</TABLE> Pentru a insera un tabel

6. <TITLE >…..</TITLE> Pentru a intitula o pagina

<h1>La multi ani!</h1> La multi ani!

<h6>La multi ani!</h6>La multi ani!

 <hn>---</hn> insereaza o linie goala fara a fi nevoie de tag-ul <p>

<font size=1>La multi ani!</font> La multi ani!

<i>La multi ani!</i> La multi ani!

<u>La multi ani!</u> La multi ani!

<tt>La multi ani!</tt> La multi ani!

<sup>La multi ani!</sup> La multi ani!

<sub>La multi ani!</sub> La multi ani!

<s>La multi ani!</s> La multi ani!

<strike>La multi ani!</strike> La multi ani!

<strong>La multi ani!</strong> La multi ani!

<code>La multi ani!</code> La multi ani!

<samp>La multi ani!</samp> La multi ani!

<kbd>La multi ani!</kbd> La multi ani!

<var>!</var> La multi ani!

<dfn>La multi ani!</dfn> La multi ani!

<cite>La multi ani!</cite> La multi ani!

<small>La multi ani!</small> La multi ani!

<big>La multi ani!</big> La multi ani!

#=rrggbb numar hexazecimal sau numele culorii:

<font face="Arial, Helvetica"> Noroc!</font>

Nu se poate face scroll pe imaginea de fond astfel:

Salt la un alt document

<a href="URL#nume"> ... </a>

 Netscape Navigator 2.0* deschide o fereastra noua.

<hr align=#> #=left, right

<hr width=50% align=left>

#=rrggbb numar hexazecimal sau numele culorii:

Lucrarea reprezinta o parte importanta....

Span (grupare text dupa cuvant) <span> ... </span>

Liste ordonate <ol><li>...</ol>

Liste de definitii <dl><dt>...<dd>...</dl>

Majuscule <li type=#> #=A, a, I, i, 1

Numerotarea listelor <ol start=#> #=numar

<img src="SMILING.GIF" alt="UN ZAMBET :-)">

<img align=#> #= top, middle, bottom,

 O singura linie de text poate apare de o parte si de alta a unei imagini.

<img vspace=# hspace=#> #=value

Elemente Alternative Inline

Fundal sonor (IExplorer)

<bgsound src="sunet.wav" loop=3>

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI">

#=implicit este fileopen.

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>

Control <img controls>

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>

Bucla <img loop=#>

<loop=infinite> va bucla la infinit.

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>

Intarzierea <img loopdelay=#> #=milisecunde

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"

Marquee - Structura de baza

Directia <direction=#> #=left(stanga), right(dreapta)

Comportament <behavior=#> #=scroll, slide, alternate

Bucla <loop=#> #=numar sau infinit

Valoare Scroll <scrollamount=#>

Intarziere Scroll <scrolldelay=#>