HyperText Markup Languagemihaela/teach/psw/curs02psw.pdf · 2006/2007 - Mihaela Brut [2] Proiectare situri Web Elemente de bază • HTML este un limbaj de adnotare • Marcajele

2006

/200

7 -

Mih

aela

Bru

t[1

]

Proiectare situri Web

HyperText Markup Language

2006

/200

7 -

Mih

aela

Bru

t[2

]


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

]


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

]


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

]


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

]


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

]


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

]


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

]


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]


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]


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]


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]


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]


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]


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]



• 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]



• 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]


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]


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]


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]


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]


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>");

}?><hr size="1" width="75%"></body></html>

2006

/200

7 -

Mih

aela

Bru

t[2

3]


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]


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]


Întrebări?

Documents

HyperText Markup Languagemihaela/teach/psw/curs02psw.pdf · 2006/2007 - Mihaela Brut [2] Proiectare situri Web Elemente de bază • HTML este un limbaj de adnotare • Marcajele