2006
/200
7 -
Mih
aela
Bru
t[1
]
Proiectare situri Web
HyperText Markup Language
2006
/200
7 -
Mih
aela
Bru
t[2
]
Proiectare situri Web
Elemente de bază• HTML este un limbaj de adnotare• Marcajele adaugă hipertext şi informaţii de formatare
<title> Introducere în HTML </title>
Începutul elem. Sf. Elem. titletitle
Textul care va fi formatat
• Titluri: <h1>Capitol</h1>, <h2>Subcapitol</h2>, ..., <h6>Secţiune</h6>,
2006
/200
7 -
Mih
aela
Bru
t[3
]
Proiectare situri Web
Struct. Doc.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title> Ionescu Andreea </title>
</head>
<body></body>
</html>
2006
/200
7 -
Mih
aela
Bru
t[4
]
Proiectare situri Web
Caractere speciale
• HTML include entităţi speciale descriucaracterele internationale şi speciale;
• Forma generală:
&
semnul “&” sign denotă un caracter special marcaj de sfârşit
codul caracterului (în acest caz, codul pt. ‘&’)
2006
/200
7 -
Mih
aela
Bru
t[5
]
Proiectare situri Web
Hiperlegături
<a href=“index.html”> Cuprins </a>
Elem. AnchorDescriere
Atribut al Elem. AnchorSfârşit de elem.
Va fi creată o hiperlegătură către ‘index.html’
2006
/200
7 -
Mih
aela
Bru
t[6
]
Proiectare situri Web
HTML
• Forţarea trecerii la linie nouă:<p>E-mail-ul meu este:<br /> [email protected]<br />, însă nu garantez că răspund.</p>
• Spaţii indestructibile: Coca Cola• Hiperlegături interne:<a href="#1">Construire prez.</a>...<a id="1" name="1"></a><h5>CONSTRUIREA PREZENTĂRII</h5>
2006
/200
7 -
Mih
aela
Bru
t[7
]
Proiectare situri Web
HTML• Text preformatat:<pre>
<style>input {width: 100px;}
</style></pre>
• Evidenţiere – prin asocierea de proprietăţi de stil: pre{ border-bottom: solid thin navy 1px;
border-top: solid thin navy 1px;width: 100%; font-family: "Courier New", monospace;font-size: 10pt;
}
2006
/200
7 -
Mih
aela
Bru
t[8
]
Proiectare situri Web
HTML• Asocierea de text imaginilor:<p><img src= "compkey.jpg"align="rightalign="right"> Imagine afişată la dreapta textului.</p>
<p><img src="comp-mse.gif" align="left"align="left"> Imagine afişată<br clear="all“ />în interiorultextului.</p>
2006
/200
7 -
Mih
aela
Bru
t[9
]
Proiectare situri Web
HTML | hărţi senzitive• Punctul de reper: colţul stânga sus• Se pot defini zone de 3 forme:
– rect: left-x, top-y, right-x, bottom-y– circle: center-x, center-y, radius– poly: x1,y1, ... xn,yn
• Atributul nohref:permite suprapuneri de zone senzitive
2006
/200
7 -
Mih
aela
Bru
t[1
0]
Proiectare situri Web
HTML | hărţi senzitive<p align="center">
<img src="pages.gif" width="384" height="245"alt="site map" usemap="#sitemap" border="0“ />
<map name="sitemap"><area shape="circle" coords="186,44,45"
href="Overview.html" alt="Start“ /><area shape="circle" coords="42,171,45"
href="Style.html" alt="Style“ /><area shape="circle" coords="186,171,45"
alt="Web Page Design“ /><area shape="circle" coords="318,173,45"
href="Advanced.html" alt="Advanced“ /></map>
</p>
2006
/200
7 -
Mih
aela
Bru
t[1
1]
Proiectare situri Web
Formulare
• Un formular Web permite interacţiuneacu utilizatorii
• Exemple de utlizare:– Chestionare on-line– Formulare pentru trimitere e-mail– Guest Books
2006
/200
7 -
Mih
aela
Bru
t[1
2]
Proiectare situri Web
Formulare
Metode de transmitere a datelor spre server:
• GET –datele din formular sunt incluse in URL-ul de destinatie ca sir de introgare
• POST –URL-ul destinaţie arată obişnuit, fără elemente suplimentare adaugate la sfirsituladresei Web
2006
/200
7 -
Mih
aela
Bru
t[1
3]
Proiectare situri Web
Formulare
• form: method, action• input: type, name, value, checked,
disabled, size, maxlength, readonly– type: text, password, hidden, checkbox,
radio, button, submit, image, reset, file• option • select • textarea
2006
/200
7 -
Mih
aela
Bru
t[1
4]
Proiectare situri Web
Atributul “type”
• text
<form method="..." action="..."><input type="text" size="30" value="Text initial" name="subiect" />
</form>
• password
2006
/200
7 -
Mih
aela
Bru
t[1
5]
Proiectare situri Web
Atributul “type”• Checkbox<form method="..." action="...">
<h5 align="center">Ma abonez la stiri:<input type="checkbox" name= "stiri"
checked= "checked " />Mesajele vor fi filtrate: <input
type="checkbox" name="filtru" /></h5></form>• Radio Button<form method="..." action="...">
2006
/200
7 -
Mih
aela
Bru
t[1
6]
Proiectare situri Web
Atributul “type”
• submit • image: <input type=“image” src=“cauta.gif” alt=“Cauta”>• reset<form method="GET" action="http://www.infoiasi.ro/.../search.cgi">
<p> Cauta în cadrul paginilor<b>Facultatii de Informatica:</b></p>
<input name="termeni" size="35" maxlength="50" value=“” /> <br />
<input type="submit" value="Cauta" /><input type="reset" value="Sterge” />
</form>
2006
/200
7 -
Mih
aela
Bru
t[1
7]
Proiectare situri Web
Atributul “type”
• File <p> Dati un nume de fisier sau alegeti
unul:</p><form action="..." method="...">
<input type="file" name="fisier" size="30" /> </form>
2006
/200
7 -
Mih
aela
Bru
t[1
8]
Proiectare situri Web
Select<form name="formular"><p>Protocoale:<select name="protocoale" size="1">
<option value="" selected=“selected">--nimic? --
</option><option value="http" >HTTP</option><option value="smpt" >SMTP</option><option value="ftp" >FTP</option>
2006
/200
7 -
Mih
aela
Bru
t[1
9]
Proiectare situri Web
TextArea
<form name="impresii"><p>Trimiteti-ne parerile dumneavoastra:</p><textarea name="scrisoare" rows="3" cols="25">...</textarea>
</form>
2006
/200
7 -
Mih
aela
Bru
t[2
0]
Proiectare situri Web
prelucrare.php - Ex. 1 <html><head>
<title>Prelucrarea unui formular cu PHP</title></head><body bgcolor="white" text="navy"><?php
if (!$nume || !$email){
?><h4 style="color:red" align="center">Eroare: Nu ati specificat numele sau adresa!</h4><p align="center">Corectati <a href="javascript:history.go(-1)">formularul</a></p>
<?}else {
?><h4 style="color: green;" align="center">Formularul introdus </h4><hr size="1" width="75%">
2006
/200
7 -
Mih
aela
Bru
t[2
1]
Proiectare situri Web
prelucrare.php - Ex. 1<? // se creaza un mesaj pt. a fi expediat prin e-mail$mesaj = "";// data curenta$mesaj .= "<impresie data=\"". date("d M Y, G:i");$mesaj .= "\" client = \"" . $REMOTE_HOST . "(" . $REMOTE_ADDR . ")\">\n";
// concateneaza numele, adresa, ocupatia si impresiile$mesaj .= "<nume email=\"" . $email . "\">" . $nume . "</nume>\n";$mesaj .= "<ocupatia>" . $ocupatia . "</ocupatia>\n";$mesaj .= "<virsta>" . $virsta . "</virsta>\n";
// exista impresii?if ($impresii)
$mesaj .= "<text>\n" . $impresii . "\n</text>\n</impresie>\n";
// trimite e-mail-ul (adresa, subiect, corp-mesaj, destinatar)mail("[email protected]", "Impresii", $mesaj, "from:". $email);
2006
/200
7 -
Mih
aela
Bru
t[2
2]
Proiectare situri Web
prelucrare.php - Ex. 1// scrie si ntr-un fisier$f = fopen("ex/impresii.xml", "a");if (!$f)
echo ("<p>Eroare la deschiderea fisierului!</p>");else {
fputs ($f, $mesaj);fclose ($f);
}// scrie si in pagina (convertin NL cu <br>),// dar tagurile XML nu vor fi recunoscute de navigator$mesaj_html = nl2br($mesaj);echo ("<center>$mesaj_html</center>");
}?><!-- final de pagina --><hr size="1" width="75%"></body></html>
2006
/200
7 -
Mih
aela
Bru
t[2
3]
Proiectare situri Web
prelucrare.php - Ex. 2<?php// © Halip Ilie, 2006
@ $_nume = $HTTP_POST_VARS['nume'];@ $_ocupatia = $HTTP_POST_VARS['ocupatia'];@ $_virsta = $HTTP_POST_VARS['virsta'];@ $_foto = $HTTP_POST_VARS['foto'];@ $_email = $HTTP_POST_VARS['email'];@ $_impresii = $HTTP_POST_VARS['impresii'];
echo "Ati introdus:<br>";echo "Numele: <b>".$_nume."</b><br>";echo "Ocupatia: <b>".$_ocupatia."</b><br>";echo "Varsta: <b>".$_virsta."</b><br>";echo "Fotografia: <b>".$_foto."</b><br>";echo "E-mail: <b>".$_email."</b><br>";echo "Impresii: <b>".$_impresii."</b><br>";
2006
/200
7 -
Mih
aela
Bru
t[2
4]
Proiectare situri Web
prelucrare.php - Ex. 2$text = "Ai primit un mesaj de la $_nume, un/o
$_ocupatia de $_virsta ani. E-mail-ul sau este$_email.\n\nImpresiile sale sunt: $_impresii.";
mail('[email protected]', 'Formularul!', $text);
echo "<br><br>Un e-mail a fost trimis la [email protected] in legatura cu acestformular. Asteptati un raspuns in mai putin de 24 de ore.";
echo "Continutul mail-ului:<br>";echo "<b>" . str_replace("\n","<br>",$text) .
"</b>";?>
2006
/200
7 -
Mih
aela
Bru
t[2
5]
Proiectare situri Web
Întrebări?
Top Related