Proiectare situri Web

HyperText Markup Language
2004/2005 - Mihaela Brut [1]

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. title
2004/2005 - Mihaela Brut [2]

Sf. Elem. title Textul care va fi formatat

• Titluri:

<h1>Capitol</h1>, <h2>Subcapitol</h2>, ..., <h6>Secţiune</h6>,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title> Ionescu Andreea </title> </head> 2004/2005 .Proiectare situri Web Struct. Doc.Mihaela Brut [3] <body> </body> </html> .

‘&’) . codul pt. semnul “&” sign denotă un caracter special marcaj de sfârşit codul caracterului (în acest caz.Mihaela Brut [4] & amp.Proiectare situri Web Caractere speciale • HTML include entităţi speciale descriu caracterele internationale şi speciale. • Forma generală: 2004/2005 .

2004/2005 . Anchor Sfârşit de elem. Anchor Descriere Atribut al Elem.html”> Cuprins </a> Elem.Proiectare situri Web Hiperlegături <a href=“index.Mihaela Brut [5] Va fi creată o hiperlegătură către ‘index.html’ .

Cola • Hiperlegături interne: <a href="#3">Construire prez..Mihaela Brut [6] • Spaţii indestructibile: Coca&nbsp.ro<br />. însă nu garantez că răspund..</p> 2004/2005 . <a id="1" name="1"></a> <h5>CONSTRUIREA PREZENTĂRII</h5> .</a> .Proiectare situri Web HTML • Forţarea trecerii la linie nouă: <p>E-mail-ul meu este:<br /> mihaela@infoiasi.

Mihaela Brut [7] . font-size: 10pt./style&gt. width: 100%.} &lt. font-family: "Courier New". border-top: solid thin navy 1px.Proiectare situri Web HTML • Text preformatat: <pre> &lt. monospace. } 2004/2005 .style&gt. </pre> • Evidenţiere – prin asocierea de proprietăţi de stil: pre{ border-bottom: solid thin navy 1px. input {width: 100px.

jpg" align="right"> Imagine afişată la align="right dreapta textului.Proiectare situri Web HTML • Asocierea de text imaginilor: <p><img src= "compkey.gif" align="left"> Imagine afişată <br clear="all"> &icirc.</p> 2004/2005 .n interiorul textului.Mihaela Brut [8] <p><img src="comp-mse.</p> .

Mihaela Brut [9] • Atributul nohref: permite suprapuneri de zone senzitive . bottom-y – circle: center-x. right-x. radius – poly: x1.yn 2004/2005 ..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. xn.y1.. center-y. . top-y.

html" alt="Start"> <area shape="circle" coords="42.45" href="Style.gif" width="384" height="245" alt="site map" usemap="#sitemap" border="0"> <map name="sitemap"> <area shape="circle" coords="186.171.44.html" alt="Advanced"> </map> </p> 2004/2005 .45" href="Advanced.Mihaela Brut [10] .45" alt="Web Page Design"> <area shape="circle" coords="318.173.171.Proiectare situri Web HTML | hărţi senzitive <p align="center"> <img src="pages.html" alt="Style"> <area shape="circle" coords="186.45" href="Overview.

Proiectare situri Web Formulare • Un formular Web permite interacţiunea cu utilizatorii • Exemple de utlizare: – Chestionare on-line – Formulare pentru trimitere e-mail – Guest Books 2004/2005 .Mihaela Brut [11] .

Mihaela Brut [12] . fără elemente suplimentare adaugate la sfirsitul adresei Web 2004/2005 .Proiectare situri Web Formulare Metode de transmitere a datelor spre server: • GET –datele din formular sunt incluse in URLul de destinatie ca sir de introgare • POST –URL-ul destinaţie arată obişnuit.

reset. name.Mihaela Brut [13] – type: text. radio. checkbox. hidden. submit. password. readonly 2004/2005 . maxlength. checked.Proiectare situri Web Formulare • form: method. image. size. value. action • input: type. file • option • select • textarea . disabled. button.

" action=".....Mihaela Brut [14] • password <form method=".ro” > ...."> <input type="password" size="20" name="parola" maxlength="25"> </form> • hidden: <input type=“hidden” name=“adresa” value=“web@infoiasi.Proiectare situri Web Atributul “type” • text <form method="."> <input type="text" size="30" value="Text initial" name="subiect"> </form> 2004/2005 .." action=".

Proiectare situri Web Atributul “type” • Checkbox <form method="......" action=".Net </br> <input type="radio" name="domeniu" value="manual"> SOAP si Perl</br></br> <input type="button" name="buton" value="Continua" > </form> ." action="...Mihaela Brut [15] • Radio • Button <form method="."> <h5 align="center">Ma abonez la stiri: <input type="checkbox" name="parola" checked> Mesajele vor fi filtrate: <input type="checkbox" name="parola" ></h5> </form> 2004/2005 .."> Alege-ti :</br> <input type="radio" name="domeniu" value="auto" checked=“checked”> SOAP si .

Proiectare situri Web Atributul “type” • submit • image: <input type=“image” src=“cauta.Mihaela Brut [16] <form method="GET" action="http://www..gif” alt=“Cauta”> • reset 2004/2005 ./search.cgi"> <p> Cauta &icirc.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> ..infoiasi.ro/.

.."> <input type="file" name="fisier" size="30"> </form> 2004/2005 .Mihaela Brut [17] .." method=".Proiectare situri Web Atributul “type” • File <p> Dati un nume de fisier sau alegeti unul:</p> <form action="..

Proiectare situri Web Select <form name="formular"> <p>Protocoale: <select name="protocoale" size="1"> <option value="" selected>-.nimic? --</option> <option value="" >HTTP</option> <option value="" >SMTP</option> <option value="" >FTP</option> </select> </form> 2004/2005 .Mihaela Brut [18] .

Proiectare situri Web TextArea <form name="impresii"> <p>Trimiteti-ne parerile dumneavoastra:</p> <textarea name="scrisoare" rows="3" cols="25">.Mihaela Brut [19] ... </textarea> </form> 2004/2005 .

Mihaela Brut [20] .Proiectare situri Web Întrebări? 2004/2005 .

Sign up to vote on this title
UsefulNot useful