Curs Initiere Web Design BM

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing.
Bostan Mihaela
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 noua Marcajul <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> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </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
Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela
-----------------------------------------------------------------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. 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 titlu Marcajele <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 font Marcajul <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 caracterelor Marcajul <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-ului Marcajul <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. Comentarii Comentariile 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. ------------------------------------------------------------------
Cap.4 MBUNTIREA PAGINII WEB CU IMAGINI, LISTE I TABELE 4.1. Imagini GIF si JPG Formele grafice permise de HTML sunt: GIF(imagini;256 culori) i JPG (imagini; milioane de culori). 4.2. Inserarea imaginilor Marcajul <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>pisica@k.ro</I><HR COLOR=red> </BODY> </HTML> Efect
Salut! Ma numesc Motanel!
pisica@k.ro 4.3. Liste in pagini Web

5
Liste Ordonate (elementele sunt automat numerotate). Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>..</OL>
4.3.1.
Ex. Nr.1 (LO1.html) <OL> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.2 (LO2.html) <OL TYPE=A> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.3 (LO3.html) <OL TYPE=I START=3> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.4 (LO4.html)
Efect 1. element 1 2. element 2 3. element 3 Efect A. element 1 B. element 2 C. element 3 Efect III. IV. V. element 1 element 2 element 3
<OL TYPE=I START=3> <LI>element 1 <LI VALUE=10>element 2 X. <LI VALUE=20>element 3 XX. <LI>element 4 </OL> XXI.
Efect III. element 1 element 2 element 3 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) <UL> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Ex. Nr.2 (UL2.html) <UL TYPE=circle> <LI> element 1 <LI> element 2 <LI> element 3 </UL>
Efect

element 1 element 2 element 3 Efect element 1 element 2 element 3
o o o
{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.} 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.
4.3.3.
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.
4.3.4.
Liste in liste liste imbricate

7
Listele pot fi coninute una ntr-alta. n proiectarea unei pagini Web trebuie avut n vedere urmtorul lucru foarte important: informaia coninut n pagin s fie structurat astfel nct s poat fi uor de urmrit i de gsit. n acest sens combinarea celor trei tipuri de liste este foarte util. Exerciiu: Construii o pagin Web n care s redactai propria agend telefonic utiliznd listele de definiii. Documentul va fi salvat sub numele Agenda.html n directorul Elev al directorului rdcin. 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
Saptamana viitoare trebuie s prezint la ora de engleza un referac cu urmatoarele caracteristici>
o o o
Tema- "Internet viitorul omenirii?" Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului 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
alina@k.ro 4.4. Inserarea tabelelor
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> BORDER=n permite definirea zonei umbrite din jurul tabelului (n, nr. ntreg). BORDER COLOR=cod_culoare permite definirea culori zonei umbrite. CELLSPACING=n definete spaiul lsat ntre celule (n, nr. ntreg - pixeli). CELLPADDING=n - definete spaiul lsat dintre data din celul i chenarul celulei (n, nr. ntreg pixeli). WIDTH=n permite definirea limii dorite a tabelului (n, n pixeli sau n procente). HEIGHT=n permite definirea nlimii dorite a tabelului (n, n pixeli sau n procente).
Parametrii marcajului <TD>
COLSPAN=n permite unei celule s se extind pe mai multe coloane. ROWSPAN=n permite unei celule s se extind pe mai multe rnduri. GBCOLOR=culoare permite definirea culorii de fond a unei celule. ALIGN=pozitie specific alinierea orizontal a datei din celul. Opiunile posibile sunt: Left, Right, Center. BACKGROUND=fisier_imagine permite specificarea unei imagini grafice de fond n interiorul unei cellule.
Ex. Nr. 1 (Tabel1.html) <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>
Efect Nume Prenume Media Petcu Ionut 8.20
10
Ex. Nr. 2 (Tabel2.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <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> Ex. Nr. 3 (Tabel3.html)
Efect Nume Prenume Media Petcu Ionut 8.20
<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 Candidat Nume Prenume Media Petcu Ionut 8.20
Exerciiu: Construii o pagin Web de prezentare a oraului n care locuii. nserai imagini cu monumente semnificative ale oraului. Structurai pagina utiliznd un tabel fr chenar. Folosii pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html n directorul Elev al directorului rdcin. CAP.5. REFERINE N PAGINI WEB
11
5.1. Referine interne 5.2. Referine externe 5.3. Link-uri i imagini Principala caracteristic a hipertextelor o constituie legturile (links). Un links este o conexiune ctre 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 att pentru referinele interne ct i pentru cele externe este: <A></A> (anchor- ancor), acesta trebuie s conin parametrul HREF=valoare, fr de care nu are nici un sens. 5.1. Referine interne S presupunem c dorim s adugm un cuprins unei pagini Web de dimensiune mare pentru a permite utilizatorului s se deplaseze ntr-un anumit loc din aceeai 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 punctuaie. Adugarea legturilor ctre inte din cadrul paginii Web Corespondentul unei ancore cu nume care definete saltul ctre aceast int este: <A HREF=#NumeAncorCuNume>Mesaj</A> <A HREF="#baza">Baza materiala</A> Exemplu care ilustreaz cum ar arta un set de ancore cu nume ntr-un document HTML destinat s afieze 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. Referine externe
13
Referine ctre pagini Web de pe acelai sistem de calcul Referine ctre site-uri din Internet
Cap.6. CADRE
14
Cadrele (frames) sunt seciuni ce ofer posibilitatea de a vizualiza simultan n fereastra browserului mai multe pagini Web. Bazele organizrii cadrelor Fiecare pagin afiat ntr-un cadru se specific utiliznd marcajul <FRAME> ce este inserat n marcajul <FRAMSET>. Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMSET> se definete spaiul din cadrul ferestrei browser-ului, alocat fiecrei pagini Web n parte. Definirea spaiului alocat fiecrei pagini Web se poate face n pixeli sau n procente, procentul se refer la ct la sut din fereastra browser-ului este alocat fiecrei pagini Web n parte. 6.1. Cadre orizontale Exemplul1: mprirea browser-ului n dou seciuni orizontale. Cadre1.html <HTML> <FRAMESET ROWS="80, *"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET> </HTML> Exemplul2: mprirea browser-ului n trei seciuni 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 verticale Exemplul1: mprirea browser-ului n dou seciuni verticale. Cadre3.html <HTML> <FRAMESET COLS="80,*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET> </HTML> Exemplul2: mprirea browser-ului n trei seciuni 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 afia n aceeai fereastr a browser-ului simultan att cadre orizontale ct 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
16
<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> Exercitii: 1. Scriei codurile HTML anterioare (prima.html, rosu.html, alb.html, negru.html, verde.html, albastru.html) crend paginile Web corespunztoare. 2. Vizualizai pagina Web prima.html. 3. Vizitai pe rnd referinele: Referire ctre pagina Web verde i Referire ctre pagina Web albastr. Ce constatai?
17
Cap. 7. FORMULARE Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide Web (WWW). Formularele HTML v ofer posibilitatea de a aduna informaii sau impresii de la cei care v viziteaz pagina Web. Pentru a prelucra datele dintr-un formular, avei nevoie de un script. Acesta are trei componente principale: <TEXTAREA>, <SELECT> i <INPUT>.
1.
<TEXTAREA> -definete un cmp n care utilizatorul poate introduce un text pe mai multe linii. Atributele pentru aceasta sunt: NAME definete numele cmpului; ROWS stabilete numrul de linii de cmp; COLS stabilete numrul de coloane din cmp. Exemplul1: Fiierul Form1.html <HTML> <FORM> <TEXTAREA NAME="Comentariu" ROWS=5 COLS=40> </TEXTAREA> </FORM> </HTML>
<SELECT> - ofer utilizatorului posibilitatea de a alege dintr-o list de opiuni. Atributele pentru aceasta sunt: NAME definete numele cmpului; SIZE stabilete cte opiuni sunt afiate n acelai timp; MULTIPLE permite selectarea mai multor opiuni n acelai timp. Opinile 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 opiunii i care apoi este trimis ctre script; SELECTED stabilete o opiune ca fiind implicit. Exemplul2: Fiierul 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>
2.
3.
<INPUT> - este un cmp pentru o singur opiune ce permite colectarea de informaii, incluznd cmpuri simple de text, butoane radio, csue de bifare i butoane de trimitere sau de anulare a informaiilor din formulare. Atributele pentru aceasta sunt: NAME definete numele cmpului; SIYE dimensiunea cmpului specificat n numr de caractere text;
18
MAXLENGHT specific nr. Max. De caractere ce pot fi citite pentru un cmp de text; VALUE definete pentru un cmp de text, textul implicit ce va fi afiat; CHECKED activeay un buton radio sau o csu de bifare; TYPE definete tipul cmpului de intrare. Exemplul3 - pentru un cmp simplu de text: Fiierul Form3.html <HTML> <FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> </FORM> </HTML> Exemplul4 pentru csua de bifare : Fiierul 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: Fiierul 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: Fiierul 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> Exerciiu:
1.
Creai o pagin Web numit Formular.html, care s conin un formular pentru sugestiile i ntrebrile vizitatorilor site-ului din care va face parte pagina respectiv.
19
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" 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 fiierelor prin FTP

21
Cap. 9 - Proiectarea site-urilor Web Cap. 10 - INTRODUCERE N JAVASCRIPT JavaScript este un limbaj de programare creat de Netscape, cu ajutorul cruia se pot realiza pagini web interactive. Sintaxa sa este asemntoare cu cea a limbajelor C/C++ sau Java. JavaScript poate recunoate i rspunde 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 funcii care s verifice dac datele introduse ntr-un formular sunt valide. Instruciunile JavaScript sunt cuprinse n interiorul documentului HTML n interiorul marcajului: <SCRIPT>...</SCRIPT> Acesta poate aprea, fie n antetul documentului, fie n corpul su. <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 aciune generat de utilizator: click pe un obiect, trecerea mouse-ului pe un obiect, trimiterea unui formular etc. Exemplu: even.html <HTML> <BODY> <FORM> <INPUT type="Button" value="Apasati-ma" onClick="alert('Salut')"> </FORM> </BODY> </HTML> Rezultat:
10.2. Elementele limbajului JavaScript

22
Definirea i apelarea funciilor: Definirea unei funcii presupune doar specificarea aciunilor ce se vor efectua. Apelarea unei funcii presupune punerea n aplicare a acelor aciuni. Definirea funciilor se face n antetul documentului HTML. Funciile pot returna unul sau mai multe rezultate ori nici unul n urma apelului. Exemplu ce definete o funcie 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 cuvntului cheie var, fr 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 funciilor) i globale) sunt declarate n afara funciilor). 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

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs Initiere Web Design BM

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing.

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Salut! Ma numesc Motanel!

pisica@k.ro 4.3. Liste in pagini Web

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Efect III. element 1 element 2 element 3 element 4

element 1 element 2 element 3 Efect element 1 element 2 element 3

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Liste in liste liste imbricate

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Parametrii marcajului <TD>

Efect Nume Prenume Media Petcu Ionut 8.20

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Efect Nume Prenume Media Petcu Ionut 8.20

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

5.2. Referine externe

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

Cap.8 - Transferul fiierelor prin FTP

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

10.2. Elementele limbajului JavaScript

Colegiul Tehnic Dumitru Mangeron Bacu Prof. Ing. Bostan Mihaela

S-ar putea să vă placă și