Curs Initiere Web Design Bm

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

3.2.1. Trecerea la linie nouaMarcajul <BR>. El se poate folosi si in combinatie cu

parametrul CLEAR=optiune, optiune ce forteaza trecerea la linie noua fata de marginea specificata.

Valorile posibile pentru optiune sunt left, right, all.------------------------------------------------------------------<HTML>


</HEAD><BODY>Salut! <BR CLEAR=all>

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. <BR> 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. </BR>

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

1

------------------------------------------------------------------3.2.2. Specificarea unui paragrafMarcajul <P>...<P/P>

------------------------------------------------------------------<HTML>


</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 paragrafMarcajul <P>...<P/P> se imbogateste cu optiunea align.Optiunea align poate primi ca valoare unul din cuvintele:

left, right, center.------------------------------------------------------------------<HTML>


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



</BODY></HTML>

------------------------------------------------------------------

2

------------------------------------------------------------------3.2.4. Centrarea textuluiMarcajul <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>



</BODY></HTML>

------------------------------------------------------------------3.3. FORMATAREA FONT-URILOR------------------------------------------------------------------

Un font reprezinta un set de caractere (256) cu un aspect grafic unitar.

Stiluri de afisare: ingrosat, inclinat, subliniat.Marcajul <B>...</B> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara ingrosat.Marcajul <I>...</I> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara ingrosat.Marcajul <U>...</U> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara subliniat.

3.3.1. Nivele de titluMarcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al

unui document; n poate lua valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 fiind cel mai mic nivel.

3.3.2. Alegerea tipului de fontMarcajul <FONT>...</FONT> impreuna cu optiune face (ce va

primi ca valoare numele fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu care dorim sa fie afisat textul.

3

<FONT face="Courier, Arial">...</FONT>

3.3.3. Alegerea dimensiunii caracterelorMarcajul <FONT>...</FONT> impreuna cu optiune size (ce va

primi ca valoare un numar incadrat intre ghilimele).<FONT face="Courier,Arial" size="4">...</FONT>

3.3.4. Alegerea culorii font-uluiMarcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea

acestei optiuni va fi numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de asemenea, de ghilimele.<FONT face="Courier,Arial" size="4" color="red">...</FONT><FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT>

------------------------------------------------------------------ 3.4. LINII DE DELIMITARE SI COMENTARII------------------------------------------------------------------

3.4.1. Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii orizontale.

Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune, ALIGH=optiune si NOSHADE.

- optiunea parametrului SIZE este un numar ce stabileste grosimea liniei;

- optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla respectiva;

- parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept efect fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right.

- optiunea COLOR stabileste culoarea riglei;- prin prezenta parametrului NOSHADE, fara nici o optiune, se

dezactiveaza afisarea umbrei pentru rigla orizontala.

3.4.2. ComentariiComentariile sunt texte incadrate intre .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

4.1. Imagini GIF si JPGFormele grafice permise de HTML sunt: GIF(imagini;256 culori)

şi JPG (imagini; milioane de culori).

4.2. Inserarea imaginilorMarcajul <IMG SRC=nume_imagine>

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>[email protected]</I><HR COLOR=red>

</BODY></HTML>

Efect

Salut!

Ma numesc Motanel!

[email protected]

5

4.3. Liste in pagini Web

4.3.1. Liste Ordonate (elementele sunt automat numerotate).Declararea unei liste ordonate se face cu ajutorul marcajului:

<OL>..</OL>

Ex. Nr.1 (LO1.html) Efect<OL>

<LI>element 1<LI>element 2<LI>element 3

</OL>

1. element 1 2. element 2

3. element 3

Ex. Nr.2 (LO2.html) Efect<OL TYPE=A>


</OL>

A. element 1 B. element 2

C. element 3

Ex. Nr.3 (LO3.html) Efect<OL TYPE=I START=3>


</OL>

III. element 1 IV. element 2

V. element 3

Ex. Nr.4 (LO4.html) Efect

<OL TYPE=I START=3><LI>element 1<LI VALUE=10>element 2<LI VALUE=20>element 3<LI>element 4

</OL>

III. element 1

X. element 2

XX. element 3

XXI. element 4

4.3.2. Liste Neordonate – sau liste marcate (elementele sunt marcate printr-un semn special).Declararea unei liste neordonate se face cu ajutorul marcajului:

<UL>..</UL>.

Ex. Nr.1 (UL1.html) Efect<UL>

<LI> element 1<LI> element 2<LI> element 3

</UL>

element 1 element 2

element 3

Ex. Nr.2 (UL2.html) Efect<UL TYPE=circle>

<LI> element 1<LI> element 2<LI> element 3

</UL>

o element 1 o element 2

o element 3

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

4.3.3. Liste de Definitii de termeni si definitiile lor asociate.Declararea unei liste ordonate se face cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa.

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>

EfectAldine

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.

4.3.4. Liste in liste – liste imbricate

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>[email protected]</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

Saptamana viitoare trebuie s prezint la ora de engleza un referac cu urmatoarele caracteristici>

o Tema- "Internet viitorul omenirii?" o Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata

omului viitorului o Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie

Sugestii

Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui referat ti-as ramane indatorata.

Alina

[email protected]

4.4. Inserarea tabelelor

9

Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar în interiorul acestui marcaj se utilizează marcajele:

<TR>..</TR> pentru definirea unei linii a tabelului;<TH>..</TH> pentru definirea antetului tabelului;<TD>..</TD> pentru definirea datei unei cellule a tabelului.

Parametrii marcajului <TABLE> Parametrii marcajului <TD> BORDER=n – permite definirea

zonei umbrite din jurul tabelului (n, nr. întreg).

BORDER COLOR=cod_culoare – permite definirea culori zonei umbrite.

CELLSPACING=n – defineşte spaţiul lăsat între celule (n, nr. întreg - pixeli).

CELLPADDING=n - defineşte spaţiul lăsat dintre data din celulă şi chenarul celulei (n, nr. întreg - pixeli).

WIDTH=n – permite definirea lăţimii dorite a tabelului (n, în pixeli sau în procente).

HEIGHT=n permite definirea înălţimii dorite a tabelului (n, în pixeli sau în procente).

COLSPAN=n – permite unei celule să se extindă pe mai multe coloane.

ROWSPAN=n – permite unei celule să se extindă pe mai multe rînduri.

GBCOLOR=culoare –permite definirea culorii de fond a unei celule.

ALIGN=pozitie – specifică alinierea orizontală a datei din celulă. Opţiunile posibile sunt: Left, Right, Center.

BACKGROUND=fisier_imagine permite specificarea unei imagini grafice de fond în interiorul unei cellule.

Ex. Nr. 1 (Tabel1.html) Efect<HTML>

<HEAD>

<TITLE>Tabele</TITLE></HEAD><BODY>

<TABLE><TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH><TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD></TABLE>

</BODY></HTML>

Nume Prenume MediaPetcu Ionut 8.20

Ex. Nr. 2 (Tabel2.html) Efect

10

<HTML><HEAD>


<TABLE BORDER COLOR=RED><TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH><TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD></TABLE>

</BODY></HTML>

Nume Prenume Media

Petcu Ionut 8.20

Ex. Nr. 3 (Tabel3.html)

<HTML><HEAD>


<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

CandidatNume Prenume Media

Petcu Ionut 8.20

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

CAP.5. REFERINŢE ÎN PAGINI WEB

11

5.1. Referinţe interne5.2. Referinţe externe5.3. Link-uri şi imagini

Principala caracteristică a hipertextelor o constituie legăturile (links).Un links este o conexiune către altă resursă Web, resursă care poate fi accesată din fereastra

browser – ului printr-un singur clic.Link-urile pot fi de două tipuri: interne şi externe.Marcajul principal atât pentru referinţele interne cât şi pentru cele externe este: <A>…</A>

(anchor- ancoră), acesta trebuie să conţină parametrul HREF=valoare, fără de care nu are nici un sens.

5.1. Referinţe interne

Să presupunem că dorim să adăugăm un cuprins unei pagini Web de dimensiune mare pentru a permite utilizatorului să se deplaseze într-un anumit loc din aceeaşi pagină. Locurile în care dorim să se facă deplasarea se numesc ţintele salturilor interne din paginile Web sau ancore cu nume şi sunt specificate, în cadrul documentului HTML, prin utilizarea parametrului name al marcajului <A>…</A>:

<A name=valoare>Mesaj</A>Ex.: <A nume="baza">Baza materială</A>

Unde valoarea parametrului name poate fi orice secvenţă de caractere, numere sau semen de punctuaţie.

Adăugarea legăturilor către ţinte din cadrul paginii WebCorespondentul unei ancore cu nume care defineşte saltul către această ţintă este:

<A HREF=#NumeAncorăCuNume>Mesaj</A><A HREF="#baza">Baza materiala</A>

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

<h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1><h2><I>Prof. ing. Bostan Mihaela</I></h2><Font color="green" size="5">

<P><a href=#jos name=sus>Du-te jos</a><P><A HREF="#baza">Baza materiala</A><P><A HREF="#profile"> Profile</A><P><A HREF="#profesori"> Profesori</A><P><A HREF="#elevi"> Elevi</A>

<A NUME="baza"><h2>BAZA MATERIALA</h2></A><br>27 sali de clasa<br>14 laboratoare si sali specializate<br>un atelier scoala<br>o biblioteca

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>

5.2. Referinţe externe

13

Referinţe către pagini Web de pe acelaşi sistem de calculReferinţ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.

6.1. Cadre orizontaleExemplul1: Împărţirea browser-ului în două secţiuni orizontale.

Cadre1.html<HTML> <FRAMESET ROWS="80, *"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET></HTML>

Exemplul2: Împărţirea browser-ului în trei secţiuni orizontale.Cadre2.html

<HTML> <FRAMESET ROWS="80,50, *"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="trei.html"> </FRAMESET></HTML>

6.2. Cadre verticaleExemplul1: Împărţirea browser-ului în două secţiuni verticale.

Cadre3.html<HTML> <FRAMESET COLS="80,*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET></HTML>

Exemplul2: Împărţirea browser-ului în trei secţiuni verticale.Cadre4.html

<HTML> <FRAMESET COLS="80,50,*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="trei.html"> </FRAMESET></HTML>

6.3. Cadre în cadre

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>

2. <SELECT> - oferă utilizatorului posibilitatea de a alege dintr-o listă de opţiuni. Atributele pentru aceasta sunt:

NAME – defineşte numele câmpului;SIZE – stabileşte câte opţiuni sunt afişate în acelaşi timp;MULTIPLE – permite selectarea mai multor opţiuni în acelaşi timp.

Opţinile sunt delimitate de marcajele <SELECT> şi </SELECT> şi sunt listate în cadrul etichetei <OPTION>. Valorile pentru această etichetă sunt:

VALUE – reprezintă valoare ce este atribuită opţiunii şi care apoi este trimisă către script;SELECTED – stabileşte o opţiune ca fiind implicită.Exemplul2:

Fişierul „Form2.html”<HTML> Alegeti o optiune din lista <FORM> <SELECT NAME="Optiuni"> <OPTION SELECTED VALUE="Optiune1">Optiune1

<OPTION VALUE="Optiune2">Optiune2 <OPTION VALUE="Optiune3">Optiune3</SELECTED>

</FORM></HTML>

3. <INPUT> - este un câmp pentru o singură opţiune ce permite colectarea de informaţii, incluzând câmpuri simple de text, butoane radio, căsuţe de bifare şi butoane de trimitere sau de anulare a informaţiilor din formulare. Atributele pentru aceasta sunt:

NAME – defineşte numele câmpului;SIYE – dimensiunea câmpului specificată în număr de caractere text;

18

MAXLENGHT – specifică nr. Max. De caractere ce pot fi citite pentru un câmp de text;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.

Exemplul3 - pentru un câmp simplu de text:Fişierul „Form3.html”

<HTML><FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"></FORM></HTML>

Exemplul4 – pentru căsuţa de bifare :Fişierul „Form4.html”<HTML><FORM> <INPUT TYPE="checkbox" NAME=""checkbox1" VALUE="Optiune1">Optiune1 <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="Optiune2" CHECKED>Optiune2</FORM></HTML>

Exemplul5 – pentru butoane radio:Fişierul „Form5.html”

<HTML><FORM> Intrebarea 1: Va placut pana acum? <br> <INPUT TYPE="radio" NAME=choice" VALUE"Optiune1">Da <INPUT TYPE="radio" NAME=choice" VALUE"Optiune2">Nu</FORM></HTML>

Exemplul6 – pentru butoane de trimitere şi anulare:Fişierul „Form6.html”

<HTML><FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> <br><br> <INPUT TYPE="Submit" VALUE="Trimite"> <INPUT TYPE="Reset" VALUE="Anuleaza"></FORM></HTML>

Exerciţiu:

19

1. Creaţi o pagină Web numită Formular.html, care să conţină un formular pentru sugestiile şi întrebările vizitatorilor site-ului din care va face parte pagina respectivă.

Programul pentru Formularul pe WEB:

„sondaj.html”<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" [email protected] <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 FTPCap. 9 - Proiectarea site-urilor Web

Cap. 10 - INTRODUCERE ÎN JAVASCRIPT

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

Un eveniment este o acţiune generată de utilizator: click pe un obiect, trecerea mouse-ului pe un obiect, trimiterea unui formular etc.

Exemplu: “even.html” Rezultat:<HTML> <BODY> <FORM>

<INPUT type="Button" value="Apasati-ma" onClick="alert('Salut')">

</FORM> </BODY></HTML>

22

10.2. Elementele limbajului JavaScript

Definirea şi apelarea funcţiilor:Definirea unei funcţii presupune doar specificarea acţiunilor ce se vor efectua. Apelarea unei funcţii

presupune punerea în aplicare a acelor acţiuni.Definirea funcţiilor se face în antetul documentului HTML.Funcţiile pot returna unul sau mai multe rezultate ori nici unul în urma apelului.

Exemplu ce defineşte o funcţie în antet şi o apelează apoi în corpul documentului HTML:

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=valoareVariabilele 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

Curs Initiere Web Design Bm

Documents

Transcript of Curs Initiere Web Design Bm