HTML
20
2004/2005 - Mihaela Brut [1] Proiectare situri Web HyperText Markup Language
-
Upload
dorin-pirnog -
Category
Documents
-
view
97 -
download
1
description
HTML
Transcript of HTML
2004
/200
5-
Mih
aela
Bru
t[1
]
Proiectare situri Web
HyperText Markup Language
2004
/200
5-
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>,
2004
/200
5-
Mih
aela
Bru
t[3
]
Proiectare situri Web
Struct. Doc.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><html>
<head><title> Ionescu Andreea </title>
</head>
<body></body>
</html>
2004
/200
5-
Mih
aela
Bru
t[4
]
Proiectare situri Web
Caractere speciale
• HTML include entităţi speciale descriucaracterele internationale şi speciale;
• Forma generală:
& amp;
semnul “&” sign denotă un caracter special marcaj de sfârşit
codul caracterului (în acest caz, codul pt. ‘&’)
2004
/200
5-
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’
2004
/200
5-
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="#3">Construire prez.</a>...<a id="1" name="1"></a><h5>CONSTRUIREA PREZENTĂRII</h5>
2004
/200
5-
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;
}
2004
/200
5-
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>
2004
/200
5-
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
2004
/200
5-
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>
2004
/200
5-
Mih
aela
Bru
t[1
1]
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
/200
5-
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 sfirsitul adresei Web
2004
/200
5-
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
2004
/200
5-
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<form method="..." action="...">
<input type="password" size="20" name="parola" maxlength="25"></form>
• hidden: <input type=“hidden” name=“adresa” value=“[email protected]” >
2004
/200
5-
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="parola" checked>
Mesajele vor fi filtrate: <input type="checkbox" name="parola" ></h5></form>
• Radio• Button<form method="..." action="...">Alege-ti :</br><input type="radio" name="domeniu" value="auto" checked=“checked”>
SOAP si .Net </br><input type="radio" name="domeniu" value="manual">
SOAP si Perl</br></br><input type="button" name="buton" value="Continua" >
</form>
2004
/200
5-
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 deInformatica:</b></p><input name="termeni" size="35"
maxlength="50" value=""></br><input type="submit" value="Cauta" ><input type="reset" value="Sterge">
</form>
2004
/200
5-
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>
2004
/200
5-
Mih
aela
Bru
t[1
8]
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
/200
5-
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>
2004
/200
5-
Mih
aela
Bru
t[2
0]
Proiectare situri Web
Întrebări?
