Documente Academic
Documente Profesional
Documente Cultură
3: HTML DE BAZĂ
------------------------------------------------------------------
3.1. STRUCTURA UNUI DOCUMENT HTML
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum
este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui
pe internet. Saptamana viitoare trebuie sa prezint la ora de
engleza un referat cu tema "Internet viitorul omenirii?" in care
voi vorbi despre implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului. Sigur ca trebuie
sa fie o viziune a mea asupra viitorului si nu o profetie. Daca
tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva
sugestii in realizarea acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
3.2. FORMATAREA PARAGRAFELOR
1
------------------------------------------------------------------
3.2.2. Specificarea unui paragraf
Marcajul <P>...<P/P>
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
<P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum
este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui
pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un
referat cu tema "Internet viitorul omenirii?" in care voi vorbi
despre implicatiile pe care le are informatica si, in special,
internetul in viata omului viitorului. Sigur ca trebuie sa fie o
viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea
ajuta cu cateva sugestii in realizarea acestui referat ti-as
ramane indatorata.</P>
</BODY>
</HTML>
------------------------------------------------------------------
3.2.3. Alinierea unui paragraf
Marcajul <P>...<P/P> se imbogateste cu optiunea align.
Optiunea align poate primi ca valoare unul din cuvintele:
left, right, center.
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
<P align="center">Salut!</P>
<P>Ma numesc Alina si sunt eleva la un liceu din Craiova.
Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma
hai-hui pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de
engleza un referat cu tema "Internet viitorul omenirii?" in care
voi vorbi despre implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului. Sigur ca trebuie
sa fie o viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea
ajuta cu cateva sugestii in realizarea acestui referat ti-as
ramane indatorata.</P>
</BODY>
</HTML>
------------------------------------------------------------------
2
------------------------------------------------------------------
3.2.4. Centrarea textului
Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a
textului.
{Are acelasi efect ca marcajul <P align="center">...</P>}
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
<CENTER> Salut! </CENTER>
<P>Ma numesc Alina si sunt eleva la un liceu din Craiova.
Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma
hai-hui pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de
engleza un referat cu tema "Internet viitorul omenirii?" in care
voi vorbi despre implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului. Sigur ca trebuie
sa fie o viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea
ajuta cu cateva sugestii in realizarea acestui referat ti-as
ramane indatorata.</P>
</BODY>
</HTML>
------------------------------------------------------------------
3.3. FORMATAREA FONT-URILOR
------------------------------------------------------------------
Un font reprezinta un set de caractere (256) cu un aspect
grafic unitar.
3
<FONT face="Courier, Arial">...</FONT>
------------------------------------------------------------------
3.4. LINII DE DELIMITARE SI COMENTARII
------------------------------------------------------------------
3.4.2. Comentarii
Comentariile sunt texte incadrate intre <!-- si -->.
Rolul comentariilor este de a face un document HTML mai usor
de inteles prin plasarea unor expicatii din loc in loc. Ele nu vor
fi afisate in cuprinsul paginii Web creata prin documentul
respectiv.
------------------------------------------------------------------
4
Cap.4
ÎMBUNĂTĂŢIREA PAGINII WEB CU IMAGINI, LISTE ŞI TABELE
Exemplu (PISICA.html)
<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><FONT face="Courier, Arial" color="RED"
size="6"><P> Ma numesc Motanel!</P></FONT></CENTER>
<CENTER><IMG SRC=C:\pisica.jpg></CENTER>
<HR SIZE=30 color=RED>
<I>pisica@k.ro</I><HR COLOR=red>
</BODY>
</HTML>
Efect
Salut!
Ma numesc Motanel!
pisica@k.ro
5
4.3. Liste in pagini Web
6
{Schimbarea simbulului care preced elementele din lista se poate
face utilizand parametrul TYPE al marcajului <UL>..</UL>, caruia i
se pot asocia una dintre urmatoarele valori> disc, circle şi
square.}
Exemplu (DL.html)
<DL>
<DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate
prin caractere mai ingrosate.
<DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet.
<DT>Font<DD>Utilizarea particulara a unui anumit stil de
caractere.
</DL>
Efect
Aldine
Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.
Date
Flux nesfarsit de materiale care apar pe Internet.
Font
Utilizarea particulara a unui anumit stil de caractere.
7
Listele pot fi conţinute una într-alta. În proiectarea unei pagini Web trebuie avut în vedere
următorul lucru foarte important: informaţia conţinută în pagină să fie structurată astfel încât să
poată fi uşor de urmărit şi de găsit. În acest sens combinarea celor trei tipuri de liste este foarte utilă.
Exerciţiu:
Construiţi o pagină Web în care să redactaţi propria agendă telefonică utilizând listele de
definiţii. Documentul va fi salvat sub numele Agenda.html în directorul Elev al directorului
rădăcină.
Exemplu (Liste_imbricate.html)
<HTML>
<HEAD>
<TITLE>Liste in pagini Web</TITLE>
</HEAD>
<BODY>
<HR SIZE=30 COLOR=RED>
<IMG SRC=c:\Alina.jpg allign=right>
<H1><CENTER>Salut!</CENTER></H1>
<HR WIDTH=50%>
<UL>
<LI><H3>Date personale</H3>
<DL>
<DT>Nume:<DD>Mateescu.
<DT>Prenume:<DD>Alina
<DT>Data nasterii:<DD>12_04_1985
<DT>Profesia:<DD>Eleva anul II la Colegiu
</DL>
<LI><H3>Stare emotionala</H3>
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma
hai-hiu pe internet.
<P><LI><H3>Preocupari actuale</H3>
Saptamana viitoare trebuie s prezint la ora de engleza un
referat cu urmatoarele caracteristici>
<UL>
<LI>Tema- "Internet viitorul omenirii?"
<LI>Continutul:-implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului
<LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra
viitorului si nu o profetie
</UL>
<LI><H3>Sugestii</H3>
Daca tu, draga prietene de pe internet, m-ai putea ajuta cu
cateva sugeestii in realizarea acestui referat ti-as ramane
indatorata. <P>
</UL>
<HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P>
<I>alina@k.ro</I><HR COLOR=RED>
</BODY>
</HTML>
Efect
8
Salut!
Date personale
Nume:
Mateescu.
Prenume:
Alina
Data nasterii:
12_04_1985
Profesia:
Eleva anul II la Colegiu
Stare emotionala
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet.
Preocupari actuale
Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea
acestui referat ti-as ramane indatorata.
Alina
alina@k.ro
9
Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar în interiorul acestui marcaj se
utilizează marcajele:
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR><TH>Nume</TH> Nume Prenume Media
<TH>Prenume</TH> Petcu Ionut 8.20
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
10
<HTML>
<HEAD>
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE BORDER COLOR=RED>
<TR><TH>Nume</TH> Nume Prenume Media
<TH>Prenume</TH>
<TH>Media</TH> Petcu Ionut 8.20
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE BORDER HEIGHT=100 WIDTH=100>
<TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH>
<TH>Nume</TH>
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Efect
Exerciţiu:
Construiţi o pagină Web de prezentare a oraşului în care locuiţi. Înseraţi imagini cu
monumente semnificative ale oraşului. Structuraţi pagina utilizând un tabel fără chenar. Folosiţi
pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele
Oras.html în directorul Elev al directorului rădăcină.
11
5.1. Referinţe interne
5.2. Referinţe externe
5.3. Link-uri şi imagini
Unde valoarea parametrului name poate fi orice secvenţă de caractere, numere sau semen de
punctuaţie.
Exemplu care ilustrează cum ar arăta un set de ancore cu nume într-un document HTML
destinat să afişeze o pagină Web a unei şcoli.
<html>
<body background="C:\Documents and Settings\andye\My Documents\My Pictures\404.gif"
text="steelblue">
12
<br>laboratoare de informatica cu retea de calculatoare si acces la Internet
<br>cabinet metodic de perfectionare
<br>dispensar medical scolar
<br>cabinet stomatologic scolar
<br>un bazin de inot in constructie
<br>baza sportiva proprie
<br>o cantina
<br>un camin
<br><a name=jos href=#sus>Du-te sus</a>
<A NAME="profile"><h2>PROFILE</h2>
<br>Profil Pedagogic
<br>Invatatori-Educatoare
<br>Profil Bibliotecar si Pedagog scolar
<br>Bibliotecar documentarist
<br>Instructor animator
<br>Pedagog scolar
<br>Profil Matematica-Informatica
<br>Profil Stiinte ale naturii
<br>Profil Filologie
<br><a name=jos href=#sus>Du-te sus</a>
<A NAME="profesori"><h2>PROFESORI</h2>
<br>Gorbanescu
<br>Stoica
<br>Negrea
<br>
...
<br>
<br><a name=jos href=#sus>Du-te sus</a>
<A NAME="elevi"><h2>ELEVI</h2>
<br>5A-Dir.: Prof. Negrea
<br>5B-Dir.: Prof. Mocanu
<br>5C-Dir.: Prof. Vintila
<br>6A-Dir.: Prof. Cuciureanu
<br>6B-Dir.: Prof. Arsinte
<br>6C-Dir.: Prof. Bibire
<br>7A-Dir.: Prof. Escu
<br>7B-Dir.: Prof. Costea
<br>7C-Dir.: Prof. Mirzac
<br>
…
<br><a name=jos href=#sus>Du-te sus</a>
</body>
</html>
13
Referinţe către pagini Web de pe acelaşi sistem de calcul
Referinţe către site-uri din Internet
Cap.6. CADRE
14
Cadrele (frames) sunt secţiuni ce oferă posibilitatea de a vizualiza simultan în fereastra browser-
ului mai multe pagini Web.
Bazele organizării cadrelor
Fiecare pagină afişată într-un cadru se specifică utilizând marcajul <FRAME> ce este inserat în
marcajul <FRAMSET>.
Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMSET> se defineşte spaţiul
din cadrul ferestrei browser-ului, alocat fiecărei pagini Web în parte.
Definirea spaţiului alocat fiecărei pagini Web se poate face în pixeli sau în procente, procentul
se referă la cât la sută din fereastra browser-ului este alocată fiecărei pagini Web în parte.
15
Exemplul1: Putem afişa în aceeaşi fereastră a browser-ului simultan atât cadre orizontale
cât şi cadre verticale.
<HTML>
<FRAMESET COLS="80%,*">
<FRAMESET ROWS="30%,70%*">
<FRAME SRC="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME SRC ="rosu.html">
<FRAME SRC ="galben.html">
<FRAME SRC ="verde.html">
</FRAMESET>
</FRAMESET>
</HTML>
Exemplul2: 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
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="RED"TEXT="#FFFFFF">
<A HREF="VERDE.html" TARGET=REFER>Referire catre pagina Web verde</A>
<BR>
<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>
16
<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>
Exercitii:
1. Scrieţi codurile HTML anterioare (prima.html, rosu.html, alb.html, negru.html, verde.html,
albastru.html) creând paginile Web corespunzătoare.
2. Vizualizaţi pagina Web prima.html.
3. Vizitaţi pe rând referinţele: „Referire către pagina Web verde” şi „Referire către pagina Web
albastră”. Ce constataţi?
Cap. 7. FORMULARE
17
Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide
Web (WWW). Formularele HTML vă oferă posibilitatea de a aduna informaţii sau impresii de la
cei care vă vizitează pagina Web. Pentru a prelucra datele dintr-un formular, aveţi nevoie de un
script. Acesta are trei componente principale: <TEXTAREA>, <SELECT> şi <INPUT>.
1. <TEXTAREA> -defineşte un câmp în care utilizatorul poate introduce un text pe mai multe
linii.
Atributele pentru aceasta sunt:
NAME – defineşte numele câmpului;
ROWS – stabileşte numărul de linii de câmp;
COLS – stabileşte numărul de coloane din câmp.
Exemplul1:
Fişierul „Form1.html”
<HTML>
<FORM>
<TEXTAREA NAME="Comentariu" ROWS=5 COLS=40>
</TEXTAREA>
</FORM>
</HTML>
18
VALUE – defineşte pentru un câmp de text, textul implicit ce va fi afişat;
CHECKED – activeayă un buton radio sau o căsuţă de bifare;
TYPE – defineşte tipul câmpului de intrare.
Exerciţiu:
„sondaj.html”
19
<HTML>
<HEAD>
<TITLE>Sondaj</TITLE>
</HEAD>
<BODY>
<H1>SONDAJ</H1>
Multumim pentru timpul alocat raspunsului la urmatoarele intrebari:
<FORM ACTION="mailto:eu@provaiderul meu.ro
METHOD=POST
ENCTYPE="text/plain">
Adresa dumneavoastra de e-mail:
<INPUT TYPE="text" NAME="E-mail" VALUE=login@provider.ro
<P>
<INPUT TYPE="checkbox" NAME="secret" VALUE="da">
Nu vreau sa faceti publica adresa mea.
<P>
Cum va conectati la internet? <BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="modem" CHECKED>Modem <BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="RNIS">RNIS<BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="LS">legatura specificata<BR><P>
Unde va aflati?
<SELECT NAME="Regiune">
<OPTION VALUE="Romania SELECTED">Romania
<OPTION VALUE="SUA">SUA
<OPTION VALUE="Europa">Europa
<OPTION VALUE="Restul lumii">Restul lumii
</SELECT>
<P>
Ce cautati prin pagina mea de web?<BR>
<SELECT NAME="Interes" SIZE=4MULTIPLE>
<OPTION VALUE="Informatii">Informatii
<OPTION VALUE="Sport">Sport
<OPTION VALUE="Divertisment">Divertisment
<OPTION VALUE="Cultura">Cultura
<OPTION VALUE="Slujba">Slujba
</SELECT>
<P>
Aveti vreo observatie de facut?<BR>
<TEXTAREA NAME="Comentarii" COLS=40 ROWS=4 WRAP=physical>
</TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Trimite">
<INPUT TYPE="reset" VALUE="Initializare">
</FORM>
</BODY>
</HTML>
20
Cap.8 - Transferul fişierelor prin FTP
Cap. 9 - Proiectarea site-urilor Web
21
JavaScript este un limbaj de programare creat de Netscape, cu ajutorul căruia se pot realiza
pagini web interactive. Sintaxa sa este asemănătoare cu cea a limbajelor C/C++ sau Java.
JavaScript poate recunoaşte şi răspunde la evenimentele utilizatorului cum ar fi efectuarea
unui clik cu mouse-ul, introducerea datelor într-un formular de navigare în pagină. De exemplu, se
pot scrie funcţii care să verifice dacă datele introduse într-un formular sunt valide.
Instrucţiunile JavaScript sunt cuprinse în interiorul documentului HTML în interiorul
marcajului: <SCRIPT>...</SCRIPT>
Acesta poate apărea, fie în antetul documentului, fie în corpul său.
<SCRIPT language=”JavaScript”>
//codul JavaScript
</SCRIPT>
Exemplu:
java.html
<HTML>
<BODY>
<SCRIPT language="JavaScript">
document.write("Text scris cu JavaScript");
</SCRIPT>
<br>Text scris cu HTML
</BODY>
</HTML>
Rezultat:
Text scris cu JavaScript
Text scris cu HTML
10.1. Evenimente
22
Funcţiile pot returna unul sau mai multe rezultate ori nici unul în urma apelului.
fct.html
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function suma(numar1, numar2)
{
return numar1+numar2;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write("Suma returnata de functie este ", suma(5,10));
</SCRIPT>
</BODY>
</HTML>
Variabile:
Variabilele se declară cu ajutorul cuvântului cheie var, fără a se preciza tipul acestora. Acestea îşi
pot schimba tipul pe parcursul programului.
Sintaxa de declarare a variabilellor este:
var variabila1, variabila2, ...
sau
var variabila=valoare
Variabilele sunt de două tipuri: locale (sunt declarate în interiorul funcţiilor) şi globale) sunt
declarate în afara funcţiilor).
variabile.html
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var nume='Toma'
var prenume
function scrie()
{
var prenume='Elena'
document.write(prenume);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write(nume+' '+prenume+' ');
scrie();
</SCRIPT>
</BODY>
</HTML>
23