-Lecture05_How to Make a Web Page

7/18/2019 -Lecture05_How to Make a Web Page

http://slidepdf.com/reader/full/-lecture05how-to-make-a-web-page 1/29

Cum să faci o PaginăWeb:

Un curs intensiv deprogramare HTML



Fişierul HTML Un fişier HTML este un fişier tet

obişnuit! de obicei cu etensia "#tml

sau "#tm" Un fişier HTML poate fi uşor creat şi

modificat cu orice editor de tet

familiar" $stfel de editoare includ note pad şi

%ord pad"



&tructura de 'a(ă: tet şietic#ete Un fişier HTML este )n fond doar tet! cu

diferite comen(i de formatare! numiteetic#ete! dispersate prin el"

Cele mai multe comen(i au o etic#etă de )nceput! cuprinsă )ntre * +! şi o etic#etăde final cuprinsă )ntre *, +"

-ntre aceste două etic#ete este plasat tet.şi alte etic#ete/! care este atunciformatat )n concordan0ă cu comandaspecificată de etic#ete"



&tructura unei pagini 1 pagină este structurată )n păr0i

diferite! fiecare separată prin diferite

etic#ete de )nceput şi sf2rşit: #tml!#ead! title! bod3! şi antete"



4emplul 5*#tml+*#ead+*title+ Hi t#ere6 *,title+

*,#ead+

*bod3+*#5+ M3 first #omepage *,#5+HTML is fun once 3ou get t#e #ang of it6

*,bod3+*,#tml+

http://example1.html/









4tic#ete de Formatare aTetului Pentru tet )ngroşat se folosesc etic#etele

*b+ şi *,b+" Pentru tet )nclinat se folosesc etic#etele

*i+ şi *,i+ Pentru tet mare se folosesc etic#etele

*big+ şi *,big+" Pentru tet mic se folosesc etic#etele

*small+ şi *,small+" Pentru sf2rşit de linie se inserea(ă

etic#eta *br+ .nu are etic#etă de sf2rşit/"



4emplul 7*#tml+*bod3+T#is is normal" *br+

*b+T#is is bold"*,b+ *br+*i+T#is is italics"*,i+ *br+*big+T#is is big"*,big+ *br+*small+T#is is small"*,small+

*,bod3+*,#tml+










$dăugarea #3perlin89urilor Pentru a adăuga un #3perlin8! se

folosesc etic#etele:

*a #ref ;adresa %eb sau caleafişierului aici< +! * ,a+" =e eemplu! *a #ref

;#ttp:,,%%%"%as#ingtonpost"com< + ne%spaper *,a+

va crea o legătură numită ;ne%spaper< cu site9ul %ebWas#ington Post"



$dăugarea >maginilor Pentru a adăuga o imagine se

foloseşte etic#eta

*img src ;adresa %eb sau caleaimagine aici<+"

?u eistă etic#etă de sf2rşit pentru

imagini"



4emplul @*#tml+C#ec8 out m3 *a #ref ;#ttp:,,%%%"cs"3ale"edu<+

sc#ool *,a+" *br+*br+1r ta8e a loo8 at t#e #urricane6 *br+*img src ;storm"Apg<+*,#tml+



http://www.cs.yale.edu/










Crearea Listelor &e poate crea o listă cu buline:*ul+

*li+ 'eautiful =a3 *,li+*li+ M3sterious Wa3s *,li+*li+ W#ere t#e &treets Have ?o

?ame*,li+*,ul+



Liste! continuare &au una cu numere:*ol+

*li+ Ferrero*,li+*li+ Boddic8*,li+*li+ Federer*,li+*,ol+



4emplul *#tml+*p+&ongs:*ul+*li+ 'eautiful =a3 *,li+

*li+ M3sterious Wa3s *,li+*li+ W#ere t#e &treets Have ?o ?ame*,li+*,ul+

Top MenDs Tennis Pla3ers:*ol+*li+ Ferrero*,li+*li+ Boddic8*,li+*li+ Federer*,li+*,ol+*,p+*,#tml+










Fundalul şi culoarea tetului Pentru a scimba fundalul sau

culoarea tetului se foloseşte

etic#eta:*bod3 bgcolor ;red< tet ;%#ite<+" &au dacă vrem să punem o po(ă pe

fundal folosim aceeaşi etic#etă dar:*bod3 bac8ground ;bear"Apg<+"



4emplul E










4ditoare HTML Cu aceste comen(i po0i .şi ar trebui/

să cree(i o pagină personală de

)nceput6 4ste distractiv şi nu foarte dificil" -n mod alternativ!po0i evita scrierea

directă HTML folosind programespeciale ca ?etscape Composer"



-ntrebări



'a(ele Formularului Web



Ce este un formular %eb Un formular %eb este o pagină %eb )n care utili(atorul poate introduce

informa0ii" =atele introduse suntatunci procesate de un programnumit script! care face ceva

folositor"



-nceputul unui FormularWeb 1 sec0iune de formular %eb )ncepe

cu etic#eta:

*form action ;location of script <met#od ;post< +"

Gi se termină cu etic#eta: *,form+"



Crearea unei linii deintroducere de tet Comanda pentru o linie de introducere a

tetului este de forma: *input t3pe;tet< name ;boo8<

si(e=“54”>. $ceasta va crea o linie de introducere

atetului cu aceeaşi lungime de E de

caractere" &criptul va fi dat de intrare ca tetetic#etat ;boo8<"



'utoane Badio 'utoane Badio :*input t3pe ;radio< name ;class t3pe< value ;fu((3<+

Humanities

*br+*input t3pe ;radio< name ;class t3pe< value ;tec#ie<+&ciences

$cesta va crea două butoane! dintrecare utili(atorul poate alege unul"

'utoanele specifică un c2mp numit ;class t3pe< care va fi folosit decătre script"



Casetele de &electare

Comandă foarte asemănătoarecu butoanele radio:

*input t3pe ;c#ec8bo< name ;bro< value ;<+'rot#er*br+*input t3pe ;c#ec8bo< name ;sis< value ;<+ &ister

$ici! utili(atorul poate selectamai multe casete! mai degrabădec2t una singură"



$legerea din Liste Pentru a crea o listă:*select multiple name ;maAor<+*option value ;cs<+ Computer &cience *,option+*option value ;econ<+ 4conomics *,option+*option value ;eng<+ 4nglis# *,option+*option value ;#ist<+ Histor3 *,option+*option value ;mat#<+ Mat#ematics *,option+

*option value ;p#3s<+ P#3sics *,option+*,select+



4tc" 4istă alte tipuri de intrări! inclu(2nd

meniurile care )nlătură şi casetele de

introducere a tetului! care sunteplicate )n pagina %eb atrubuităHW5"



'utonul de trimitere Foarte esen0ial: trebuie să creăm un

buton de trimitere"

Utili(atorul ac0ionea(ă acest butonpentru a9şi trimite informa0ia"$ceasta este )ndeplinită prin linia de

cod: *input t3peIsubmitI valueI&endm3 info6I+



$sambl2ndu9le : 4emplul J*#tml+*form action

;#ttp:,,lab"(oo"cs"3ale"edu,cs5EJ,cgi9

bin,sendform"cgi< met#od ;post< +4mail $ddress:*input t3pe;tet< name ;to< si(e=“54”>

*br+

*input t3peIsubmitI value;&end m3 info6I+*,form+*,#tml+











4emplu de 4lemente ale Formularului











-ntrebări

-Lecture05_How to Make a Web Page

Documents

Transcript of -Lecture05_How to Make a Web Page