1 Notiuni introductive
( Internet ,Web, HTML, URL, editor, servicii, legislatie )
3 Tabele
( necesitate, tag-uri specifice, proprietati { linii, coloane} )
4 Formulare
( necesitate, notiuni generale, elementele unui formular, campuri de editare,
obiecte { butoane, casete de validare, campuri de editare, liste de selectie,
butoane radio} )
6 Cadre
( necesitate, integrarea cadrelor intr-o pagina Web )
I.Notiuni introductive
( Internet ,Web, HTML, URL, editor, servicii, legislatie )
• Internetul isi are originea in anul 1969, aparut datorita unui proiect
experimental in cadrul unei agentii din Departamentrul de Aparare al US.
Proiectul initial lega calculatoarele de la Univ. of California din Los Angeles
(UCLA), institutul Stanford (SRI) din Menlo Park si Universitatea Utah din
Salt Lake City. In proiectul initial al ARPAnet se asigurau doar 3 servicii de
comunicatie: conectarea la distanta - telnet (Remote login), transferul de
fisiere si tiparirea la distanta.
in 1972, cand se ajunsese la o retea cu 37 de calculatoare, a fost
introdus si serviciul de posta electronica - e-mail;
in 1973, sistemul TCP/IP este propus ca un standard pentru ARPAnet. El
este insa acceptat ca protocol standard doar la 1 Ianuarie 1983, cand
ARPAnet ajunsese sa asigure conectarea a 500 de centre.
in 1990 ARPAnet dispare (dupa ce toate organizatiile care erau
conectate au trecut la NSFNET. La randul sau NSFNET isi inceteaza
activitatea in 1995 cand accesul la Internet ajunge sa fie asigurat de
firme comerciale pentru intreaga lume.
in 1990 Tim Berners-Lee, fizician la CERN Geneva, dezvolta
protocoalele de comunicatie pentru World Wide Web, creind si limbajul
HTML (Hypertext Markup Language). Chiar daca era initial un proiect
destinat cercetatorilor din fizica atomica si subatomica, descoperirile
sale au facut rapid epoca, pentru multa lume Internetul devenind
sinonim cu World Wide Web-ul.
primele pagini Web vizibile "in lume" sunt raportate in
decembrie 1991, la laboratorul de fizica de la Stanford Linear
Accelerator Center (SLAC). Unii considera ca moment al aparitiei
Web-ului doar anul 1994, cand a fost lansat pe piata primul
navigator performant
3
World Wide Web abreviat WWW; numit scurt şi web, care în engleză
înseamnă "reţea" ,este un sistem de documente şi informaţii de tip hipertext
legate ele între ele care pot fi accesate prin reţeaua mondială de Internet
Continut pagina
//------------------------------------------------
6
sau:
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
</body>
</html>
(a) Tag-urile sunt niste marcaje sau etichete pe care limbajul HTML le
foloseste alaturi de texte pentru a ajuta browser-ul de internet sa
afiseze corect continutul paginii web.
Nota:
• nu toate tag-urile accepa atribut ( daca accepta atribut, atunci este
necesara si o valoare a atributului )
• in HTML nu toate tag-urile cer ‘ inchiderea’ tagului prin </ tag>
• exista tag-uri singulare : <tag> ( fara eticheta de deschidere si
inchidere, fiindca nu contin nici o informatie)
8
<htmlL> cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii
spunem browser-ului ca este vorba de un fisier HTML pentru a il putea
afisa.
<head> intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse
informatii folositoare pentru browser-ul de internet
<body> (b) odata cu acest tag incepe continutul paginii web. Tot ce vei
scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre
browser, pe ecranul monitorului.
</body> ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea
ce vei scrie dupa acest tag nu va mai fi afisat.
Indicatii si exemple
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<body bgcolor="#aacc00">
<font color="#0000ff" size="6"> Fundal si font </font>
<br>
<hr COLOR="#FF0000" width="25% "size="5%"
align="left">
<br>
<font color="#FF0000"> Am schimbat culoarea fontului
</font>
<hr>
</body>
EDITARE </html>
DESCHIDERE PAGINA
SALVARE
VIZUALIZARE PAGINA
12
3. LINK - URI
Pentru o evidentiere a cuvintelor cautate, acestea apar in pagina cu alta culoare chiar de la incarcarea
paginii, pe cand cuvintele initiale isi schimba culoarea fontului dupa ce s-a efectuat click ctre link.
• referinte spre fisiere de orice tip ( aflate in directorul in care este salvata
codul sursa al paginii ) (foto 3)
<a href="nomenclator.pdf">Nomenclator</a> sau <a href="produs1.jpg">Foto produs
1</a>
1. 2.
3.
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<hr>
14
<body bgcolor="#CCCCCC">
<hr COLOR="#FF0000" width="75%" size="2%" align="left">
<font color="#0000ff" size="6">
<h2 align="center">SOLUTI SI PROIECTE
<a href="nomenclator.pdf"><br align="center">
<font color="00ffff" size="3">Nomenclator</font>
</a</h2>
<h3 align="left"> ERP <a href="produs1.jpg">
<font color="00ffff" size="3"> Foto1</font></a>
<h3> eLearning <a href="produs2.jpg">
<font color="00ffff" size="3"> Foto2</font></a>
<h3> eTraining <a href="produs3.jpg">
<font color="00ffff" size="3"> Foto3</font></a>
</font>
<hr COLOR="#FF0000" width="50%" size="2%" align="left">
</body>
</html>
Nota:
ptr un spatiu in pagina, se foloseste caracterul special
propunem sa va creati propriile coduri pentru a va familiariza cu
atributele si valorile acestora din tabelul prezentat.
4. LISTE
Cod
15
foto
cod
foto
• Nota:
Pentru caractere speciale in html, se pot consulta pegini web, ca de ex:
http://profs.info.uaic.ro/~val/char_spec.html
Pentru coduri de culori se pot consulta pegini web, ca de ex:
http://html.ice-t.ro/tutoriale/culori.html
16
2. sunete care care sa fie audiate direct din pagina web , se folosesc fisiere
de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.
<HTML><HEAD>
<TITLE>Fisier video</TITLE></HEAD>
<BODY><EMBED src="c:\windows\clock.avi"
width="150" height="150" loop="2">
</BODY>
</HTML>
III.Tabele
( necesitate, tag-uri specifice, proprietati { linii, coloane} )
• Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe
tabele.
de pixeli tabelului
vspace numar de Spatiu pe verticala in jurul tabelului
pixeli
width procent Latimea tabelului
numar de
pixeli
<TD> Celula de table
align left Alinierea continutului celulei pe
center orizontala
right
background URL Imaginea de fond pentru celula
bgcolor cod Culoarea fondului pentru celula
culoare
nume
culoare
colspan numar Numarul de coloane pe care se
intinde
celula
height numar de Inaltimea celulei
pixeli
rowspan numar Numarul de linii pe care se intinde
celula
valign top Alinierea continutului celulei pe
middle verticala
bottom
width numar de Latimea celulei
pixeli
<TR> Rand tabel
align left Alinierea continutului celulelor
center pe orizontala
right
bgcolor cod Culoarea fondului pentru tot randul
culoare
nume
culoare
Valign top Alinierea continutului celulelor pe
middle verticala
bottom
Indicatii si exemple
• Se ‘ construieste ‘ un tabel cu 4 randuri si 3 coloane ( <TR> este utilizata
de 4 ori,
Iar eticheta <TD> este folosita pentru fiecare rand de cate 3 ori ).
Tabelul retine pe prima coloana un sir de caractere, pe a doua si a treia
coloana cate un link ( cod 1 )
19
foto 1
Foto 2
cod 2
21
• Cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul
unei pagini
web. Folosind tabelele, putem adauga o imagine sau un text oriunde in
pagina web..
• In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie
sa retinem
inca doua atribute foarte importante ale tag-ului <TD>: COLSPAN (numarul
de coloane pe care se intinde celula) si ROWSPAN (numarul de linii pe care
se intinde celula).
cod 3 foto 3
cod 4 foto 4
22
Obs:
td rowspan = "x"> inseamna ca celula respectiva se va
"intinde" vertical peste celulele de dedesubtul ei
IV.Formulare
( necesitate, notiuni generale, elementele unui formular, campuri de editare,
obiecte { butoane, casete de validare, campuri de editare, liste de selectie,
butoane radio} )
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare
sunt:
• SIZE, care reprezinta latimea campului de editare
• MAXLENGTH, specifica numarul maxim de caractere care pot fi introduse
in campul de editare
• VALUE, valoarea initiala a campului de editare
Nota:
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<font color="#ff00cc"><b>
Va rog sa introduceti in cos : </b></font><BR>
<INPUT TYPE="checkbox" NAME="optiunea1">
Multifunctional Lexmark X9575, A4 <BR>
<INPUT TYPE="checkbox" NAME="optiunea2">
Monitor LCD Samsung 2223NW, 22" <BR>
<INPUT TYPE="checkbox" NAME="optiunea3">
Sistem de navigatie Mio Moov330e<BR>
<INPUT TYPE="checkbox" NAME="optiunea4">
HDD extern Western Digital Passport Essential 160GB<BR>
</body>
</html>
Nota:
spre deosebire de butoanele radio, casetele de validare permit selectarea mai multor optiuni.
• casetele de fisiere :
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru
atributul TYPE al tag-ului <INPUT>, valoarea "file". Exemplu:
<INPUT TYPE="file" NAME="file">
• liste de selectie :
O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa
aleaga una sau mai multe optiuni dintr-o lista. Listele de selectie pot fi
introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si
</SELECT>;
Atributele cele mai folosite pentru tag-ul <SELECT> sunt:
• NAME, atribuie listei de selectie un nume
25
<SELECT>
<OPTION value=Alba>Alba</OPTION>
<OPTION value=Arad>Arad</OPTION>
<OPTION value=Arges>Arges</OPTION>
<OPTION value=Bacau>Bacau</OPTION>
<OPTION value=Bihor>Bihor</OPTION>
<OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION>
<OPTION value=Botosani>Botosani</OPTION>
<OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Braila>Braila</OPTION>
<OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Buzau>Buzau</OPTION>
<OPTION value=Caras-Severin>Caras-Severin</OPTION>
<OPTION value=Calarasi>Calarasi</OPTION>
<OPTION value=Cluj>Cluj</OPTION>
<OPTION value=Constanta>Constanta</OPTION>
<OPTION value=Covasna>Covasna</OPTION>
<OPTION value=Dambovita>Dambovita</OPTION>
</SELECT>
utilizator si apoi acestea sa se trimita catre un fisier forma.php ( script php aflat
pe server ) care va interpreta datele din formular.
• Forma generala a unui formular este:
<form action="fisier_de_prelucrare_date.php"
method="metoda_trimitere">
campuri de culegere date (input, checkbox, radio, textarea, etc)
</form>
unde:
fisier_de_prelucrare_date.php: este fisierul propriu zis, care preia
datele trimise prin GET sau POST, le prelucreaza si le trimite mai departe
(pe mail) adica un server web care "stie" php
metoda_trimitere: poate fii GET sau POST (nu intru in detaliu pentru
ce se foloseste fiecare? de obicei pentru trimitere se foloseste metoda
POST).
Indicatii si exemple
(Cod 1) (Foto1)
<html>
<head>
<title></title>
</head>
<body>
<form method="get" action="forma.php">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right">Prenume: </td>
<td><input type="text" name="prenume" value=""
/></td>
</tr>
<tr>
<td align="right">Nume: </td>
<td><input type="text" name="nume"
value="" /></td>
</tr>
<tr>
<td align="right">Varsta:
</td><td><input type="text" name="varsta"
size="2" value="" /></td>
</tr>
<tr>
<td align="right" valign="middle">Hobby-uri: </td>
<td> Citit
<input type="checkbox" name="hobby"
value="citit" />
Sport
<input type="checkbox" name="hobby"
value="sport" />
Filme
<input type="checkbox" name="hobby"
value="filme" />
</td>
</tr>
<tr>
<td align="right">Tara in care v-ati nascut:</td>
<td>
<select name="tara">
<option value="ro">Romania</option>
27
<option value="fr">Franta</option>
<option value="de">Germania</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><br /><br />
<input type=”submit” name=”btnSubmit”
value=”Trimite Formular”></td>
</tr>
</table>
</form>
</body>
</html>
• Ne propunem acum sa realizam un formular complex, care sa
evidentieze tipurile de obiecte ce se pot introduce intr-un formular pe care il
vom salva cu numele script.html
(cod 2)
</form>
( foto 2 )
28
( cod 3 ) ( foto 3 )
<form method="post"
action="mailto:youremail@email.com"> Nume: <input
type="text" size="10" maxlength="40"
name="name"> <br />
</form>
echipa de cel putin doi oameni care au doua profesii distincte. O persoana se
ocupa de "cum arata" website-ul respectiv, acea persoana realizeaza deci
designul website-ului (de obicei in Adobe Photoshop), si are profesia de
"designer". Designerul se poate ocupa si de animatii (Macromedia Flash),
banere, sau alte elemente vizuale legate de website. Cealalta persoana este
programatorul web, este cel care transpune grafica in HTML si CSS.
Programatorul web este responsabil si cu realizarea scripturilor in
JavaScript. Apoi, pentru website-urile complexe, dinamice, programatorul web
este cel care se ocupa de programarea in limbajele de scripting server-side, si
de baze de date (ex: PHP si MySQL). De multe ori insa, daca designerul este
specializat doar in design web, e foarte probabil sa stie foarte bine si sa
lucreze eficient in HTML si CSS, iar programatorul web sa se ocupe de
JavaScript, si programarea server-side.
• Principalul program preferat pentru grafica web este Adobe Photoshop.
• JPG, GIF, PNG cele 3 formate standard pentru imaginile folosite
in web.
JPG
JPG sau JPEG este un format realizat special pentru imagini complexe de tip
fotografii sau alte imagini care au multe culori.
GIF
GIF se preteaza la imagini simple, cu putine culori. GIF este un format care
suporta si animatie, de aceea, multe din bannerele animate existente pe web
au format GIF. Animatiile mai lungi, mai complexe au inceput sa se realizeze
in Flash.
PNG
PNG este cel mai recent format suportat in Web. Formatul PNG a fost realizat
pentru a rezolva limitarile formatului GIF .
originala.
hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu
invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu
invizibil, de 5 pixel, in pârtile verticale ale imaginii.
Indicatii si exemple
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="C:\modern_house.jpg" align="top"
width="100" height="120" border="4"
hspace="10" vspace="7"></img>
</body>
</html>
ToEmail:
<input name="email" type="text"><br>
FromEmail:
<input name="from type="text"><br>
Subject:
<input name="subject"type="text"><br>
Message:
<textarea name="message" rows="10"
cols="30"></textarea>
<input
type="image"src="imagine.jpg"
lign="top"width="100"weight="30"
border="4"hspace="10"hspace="7"
value="submit" />
</form>
<html>
<head>
<title>Prima mea pagina web</title>
<body>
<TABLE BORDER=5 CELLSPACING=6
CELLPADDING=10
BGCOLOR="#ADEADA" ALIGN=center>
<CAPTION ALIGN=top>Tabelul
II</CAPTION>
<TR BGCOLOR="#00AA00"
ALIGN=right>
<TH>Coloana1</TH>
<TH>Coloana 2</TH>
</TR>
<TR><TD>Celula 1.1</TD>
<TD><img src="im1.jpg"
align="top" width="100" height="120"
border="4"
hspace="10"vspace="7"/></TD>
</TR>
<TR>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
</TABLE>
32
</body>
</head>
6.Cadre
( necesitate, integrarea cadrelor intr-o pagina Web )
De ex:
• Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia
mai multe procente atributului ROWS, dar avand grija ca suma lor sa nu
depaseasca 100%. La fel se procedeaza si pentru impartirea unei pagini
web in cadre verticale singura deoasebire fiind aceea ca in locul
atributului ROWS se foloseste atributul COLS. Nu uita de tag-ul de
incheiere </FRAMESET>
2.
<FRAME SRC="numelepaginii.html">
scrolling - poate avea valorile yes, no, auto si se refera la prezenta scroll-
ului
name - denumeste frame-ul. Este folosit pentru a realiza un link din alt frame
catre o pagina care sa se incarce in acest frame, sau mai este folosit in
scripturi. In linkul din primul frame se foloseste atributul target pentru a
34
Indicatii si exemple
<html>
</frameset>
</html>
• Sa se realizeze o pagina web care sa contina trei cadre orizontale , iar intr-
unul din cadre, sa se incarce o imagine .Toate cadrele vor avea scroll
( care va permite vizualizarea intregii imagini incarcate in cadru , chiar
daca dimensiunea initiala a cadrului nu permite ).
<html>
</html>
• Sintaxa CSS este formata din reguli, numite reguli CSS. O regula CSS este
formata din 2 parti:
1. Un selector , care defineste elementele HTML pe care se aplica regula
2. Una sau mai multe declaratii care definesc cum arata elementul
respectiv
<style type=”text/css”>
</style>
Exemplul2 - selector de tip clasa , care poate formata orice element care
este etichetat cu clasa respectiva .
36
.title {
font-size: 11px;
color: #ff5f00;
font-weight: bold;
In exemplul2, numele clasei este .title , , iar ce este cuprins intre accolade,
reprezinta declaratii.
<head>
<title></title>
</style>
</head>
<body >
<p > Selector CSS tip HTML</p>
Fara cod CSS
<table class="title">
<tr>
<td>c11</td>
<td>c12</td>
<td>c13</td>
</tr>
<tr>
<td>c21</td>
37
<td>c22</td>
<td>c23</td>
</tr>
</table>
<h1> Selector CSS tip HTML
</body>
</html>
Nota: Acest curs nu prezinta decat cateva din elementele de baza ale
codului CSS si necesitatea "foilor de stil". Cursul doreste prin aceste
noutati sa va orienteze spre un studiu complementar care sa va
invate cum sa adaugati si sa folositi CSS in paginile dv. web.
Scripturile Web sunt deseori folosite in codul unei pagini in HTML pentru a
da mai multa animatie, sau pur si simplu pentru una dintre multele aplicatii
care sunt facilitate de aceste scripturi.
1.
38
<script type="text/javascript">
<!--script
-->
</script>
2.
De ce să folosiţi script-uri PHP?
Scripturile PHP sunt întotdeauna incluse între două taguri PHP, conform
aceleaşi scheme ca şi în HTML. Astea spun serverului să preia information
dintre ele şi să o interpreteze ca expresie din PHP. Există trei forme diferite
de marcare a expresiilor - comenzilor PHP, şi anume:
<?
comenzi PHP
?>
<?php
comenzi PHP
php?>
<script language="php">
comenzi PHP
</script>
3.
De ce să folosiţi script-uri C #?
Unul din cele mai importante obiective ale Microsoft pentru C# : este
suport pentru RAD (Rapid Application Development).
Aplicatiil einternet trebuie sa fie dezvoltate in timp internet; un nou limbaj
trebuie sa fie usor de invatat si depanat, si trebuie produce cod care se poate
modifica usor. In timp ce VB si Delphi exceleaza in aceste domenii, C++ nu a
fost tocmai un succes. Limbajul in sine este complex si greu de manuit, si
putine biblioteci C++ ofera interfete simple. In plus, managementul manual
al memoriei si modelul de type-casting complex fac depanarea la C++ foarte
dificila. In plus, cum se va arata in continuare C++ nu protejeaza inerent
impotriva potentialelor probleme cauzate de incompatibilitati ale
versiunilor.Cu tot efortul depus de Microsoft si Borland, C++ nu este potrivit
40
Nota: Acest curs nu prezinta decat cateva din elementele de baza ale
codului CSS si necesitatea "foilor de stil". Cursul doreste prin aceste
noutati sa va orienteze spre un studiu complementar care sa va
invate cum sa adaugati si sa folositi CSS in paginile dv. web.
• Parteneri
• Contact
• Cariera