Microsoft PowerPoint - curs02psw

Mărimea: px

Porniți afișarea la pagina:

Download "Microsoft PowerPoint - curs02psw"

Dariana Ardelean
4 ani în urmă
Vzualizari:

1 HyperText Markup Language 2006/ Mihaela Brut [1]

2 Elemente de bază HTML este un limbaj de adnotare Marcajele adaugă hipertext şi informaţii de formatare <title> Introducere în HTML </title> 2006/ 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>,

3 Struct. Doc. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html> <head> <title> Ionescu Andreea </title> </head> 2006/ Mihaela Brut [3] <body> </body> </html>

4 Caractere speciale HTML include entităţi speciale descriu caracterele internationale şi speciale; Forma generală: 2006/ Mihaela Brut [4] & semnul & sign denotă un caracter special marcaj de sfârşit codul caracterului (în acest caz, codul pt. & )

5 Hiperlegături <a href= index.html > Cuprins </a> 2006/ 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

6 HTML 2006/ Mihaela Brut [6] Forţarea trecerii la linie nouă: <p> -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>

7 HTML 2006/ 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; }

8 Asocierea de text imaginilor: HTML <p><img src= "compkey.jpg" align="right"> Imagine afişată la dreapta textului.</p> 2006/ 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

left-x, top-y, right-x, bottom-y circle: center-x, center-y,

9 HTML hărţi senzitive 2006/ 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

10 HTML hărţi senzitive 2006/ 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>

11 Formulare Un formular Web permite interacţiunea cu utilizatorii 2006/ Mihaela Brut [11] Exemple de utlizare: Chestionare on-line Formulare pentru trimitere Guest Books

12 Formulare Metode de transmitere a datelor spre server: 2006/ 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

13 Formulare 2006/ 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

14 Atributul type text 2006/ 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=".

15 Atributul type 2006/ 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.

16 Atributul type 2006/ Mihaela Brut [16] submit image: <input type= image src= cauta.gif alt= Cauta > reset <form method="get" action=" <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

17 Atributul type File 2006/ 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=

18 Select 2006/ 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

19 TextArea 2006/ Mihaela Brut [19] <form name="impresii"> <p>trimiteti-ne parerile dumneavoastra:</p> <textarea name="scrisoare" rows="3" cols="25">... </textarea> </form>

20 2006/ 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!$ ) {?> <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%">

21 prelucrare.php - Ex. 1 <? // se creaza un mesaj pt. a fi expediat prin $mesaj = ""; // data curenta $mesaj.= "<impresie data=\"". date("d M Y, G:i"); $mesaj.= "\" client = \"". $REMOTE_HOST. "(". $REMOTE_ADDR. ")\">\n"; 2006/ Mihaela Brut [21] // concateneaza numele, adresa, ocupatia si impresiile $mesaj.= "<nume =\"". $ . "\">". $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 -ul (adresa, subiect, corp-mesaj, destinatar) mail("mihaela@infoiasi.ro", "Impresii", $mesaj, "from:". $ );

22 prelucrare.php - Ex / 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>"); }?>  <hr size="1" width="75%"> </body> </html>

23 <?php // Halip Ilie, 2006 prelucrare.php - Ex. $_nume = $_ocupatia = $_virsta = $_foto = $_ = $_impresii = $HTTP_POST_VARS['impresii']; 2006/ 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 " <b>".$_ ."</b><br>"; echo "Impresii: <b>".$_impresii."</b><br>";

24 prelucrare.php - Ex. 2 $text = "Ai primit un mesaj de la $_nume, un/o $_ocupatia de $_virsta ani. -ul sau este $_ .\n\nimpresiile sale sunt: $_impresii."; mail('lupuroshu@yahoo.com', 'Formularul!', $text); 2006/ Mihaela Brut [24] echo "<br><br>un 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>";?>

25 Întrebări? 2006/ Mihaela Brut [25]

Documente similare

TAG-uri HTML Marcaje de baza: <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare

TAG-uri HTML Marcaje de baza: BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url Definește un fișier