HyperText Markup Language 2006/2007 - Mihaela Brut [1]
Elemente de bază HTML este un limbaj de adnotare Marcajele adaugă hipertext şi informaţii de formatare <title> Introducere în HTML </title> 2006/2007 - Mihaela Brut [2] Începutul elem. title Textul care va fi formatat Sf. Elem. title Titluri: <h1>capitol</h1>, <h2>subcapitol</h2>,..., <h6>secţiune</h6>,
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> 2006/2007 - Mihaela Brut [3] <body> </body> </html>
Caractere speciale HTML include entităţi speciale descriu caracterele internationale şi speciale; Forma generală: 2006/2007 - Mihaela Brut [4] & semnul & sign denotă un caracter special marcaj de sfârşit codul caracterului (în acest caz, codul pt. & )
Hiperlegături <a href= index.html > Cuprins </a> 2006/2007 - Mihaela Brut [5] Elem. Anchor Descriere Atribut al Elem. Anchor Sfârşit de elem. Va fi creată o hiperlegătură către index.html
HTML 2006/2007 - Mihaela Brut [6] Forţarea trecerii la linie nouă: <p>e-mail-ul meu este:<br /> mihaela@infoiasi.ro<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>
HTML 2006/2007 - Mihaela Brut [7] 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; }
Asocierea de text imaginilor: HTML <p><img src= "compkey.jpg" align="right"> Imagine afişată la dreapta textului.</p> 2006/2007 - Mihaela Brut [8] <p><img src="comp-mse.gif" align="left"> Imagine afişată <br clear="all /> în interiorul textului.</p>
HTML hărţi senzitive 2006/2007 - Mihaela Brut [9] 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
HTML hărţi senzitive 2006/2007 - Mihaela Brut [10] <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>
Formulare Un formular Web permite interacţiunea cu utilizatorii 2006/2007 - Mihaela Brut [11] Exemple de utlizare: Chestionare on-line Formulare pentru trimitere e-mail Guest Books
Formulare Metode de transmitere a datelor spre server: 2006/2007 - Mihaela Brut [12] GET datele din formular sunt incluse in URLul de destinatie ca sir de introgare POST URL-ul destinaţie arată obişnuit, fără elemente suplimentare adaugate la sfirsitul adresei Web
Formulare 2006/2007 - Mihaela Brut [13] 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
Atributul type text 2006/2007 - Mihaela Brut [14] <form method="..." action="..."> <input type="text" size="30" value="text initial" name="subiect" /> </form> password
Atributul type 2006/2007 - Mihaela Brut [15] 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="...">
Atributul type 2006/2007 - Mihaela Brut [16] 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>
Atributul type File 2006/2007 - Mihaela Brut [17] <p> Dati un nume de fisier sau alegeti unul:</p> <form action="..." method="..."> <input type="file" name="fisier" size="30" /> </form>
Select 2006/2007 - Mihaela Brut [18] <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>
TextArea 2006/2007 - Mihaela Brut [19] <form name="impresii"> <p>trimiteti-ne parerile dumneavoastra:</p> <textarea name="scrisoare" rows="3" cols="25">... </textarea> </form>
2006/2007 - Mihaela Brut [20] 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%">
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"; 2006/2007 - Mihaela Brut [21] // 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("mihaela@infoiasi.ro", "Impresii", $mesaj, "from:". $email);
prelucrare.php - Ex. 1 2006/2007 - Mihaela Brut [22] // 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>
<?php // Halip Ilie, 2006 prelucrare.php - Ex. 2 @ $_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']; 2006/2007 - Mihaela Brut [23] 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>";
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('lupuroshu@yahoo.com', 'Formularul!', $text); 2006/2007 - Mihaela Brut [24] echo "<br><br>un e-mail a fost trimis la lupuroshu@yahoo.com in legatura cu acest formular. Asteptati un raspuns in mai putin de 24 de ore."; echo "Continutul mail-ului:<br>"; echo "<b>". str_replace("\n","<br>",$text). "</b>";?>
Întrebări? 2006/2007 - Mihaela Brut [25]