Bài giảng Lập trình web

Chia sẻ: Nguyen Lan | Ngày: | Loại File: PDF | Số trang:90

Thêm vào BST

Báo xấu

123
lượt xem 24
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Lập trình Web là xu hướng mới đang được sử dụng ngày càng phổ biến. Có 2 loại lập trình Web: lập trình Web để chạy trên máy client và lập trình Web để chạy trên máy Server.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Lập trình web

1
CHÖÔNG 0 : GIÔÙI THIEÄU VEÀ WEB I. World Wide Web _ WWW : WWW thöøông ñöïôc goïi laø taét laø Web. Web laø moät maïng maùy tính coù qui moâ toaøn theá giôùi. Taát caû caùc maùy tính trong Web coù theå truyeàn thoâng vôùi nhau. Taát caû caùc maùy tính söû duïng moät nghi thöùc chuaån goïi HTTP. Thoâng tin Web ñöïôc caát giöõ trong nhöõng taøi lieäu goïi laø nhöõng trang Web. Nhöõng trang Web laø nhöõng taäp tin caát giöõ trong nhöõng maùy tính goïi laø nhöõng server Web. Nhöõng maùy tính ñoïc nhöõng trang Web ñöïôc goïi nhöõng Web clients.Nhöõng Web client xem nhöõng trang vôùi moät chöông trình goïi laø moät trình duyeät Web hay Web browser. Moät trình duyeät taûi moät trang Web töø server thoâng qua moät yeâu caàu HTTP chuaån chöùa moät ñòa chæ trang URL. Taát caû caùc trang Web chöùa ñöïng nhöõng leänh ñeå trình baøy. Trình duyeät trình baøy trang thoâng qua vieäc ñoïc nhöõng leänh naøy. Nhöõng leänh trình baøy chung nhaát ñöïôc goïi theû HTML. II. HTML : HTML vieát taét cuûa “Hyper Text Markup Language”. Moät file HTML laø moät taäp tin vaên baûn chöùa ñöïng theû ñaùnh daáu. Theû ñaùnh daáu noùi cho trình duyeät Web laøm sao ñeå trình baøy trang. Moät file HTML coù theå ñöïôc taïo ra baèng caùch söû duïng moät chuöông trình soaïn thaûo vaên baûn ñôn giaûn nhö notepad, textpad, … 1. Theû HTML : Nhöõng theû HTML ñöïôc söû duïng ñeå ñaùnh daáu nhöõng phaàn töû HTML. Nhöõng theû HTML ñöïôc bao bôûi hai kí töï ''. Nhöõng theû HTML khoâng phaûi phaân bieät chöõ thöôøng, chöõ hoa Theû HTML chi laøm 2 nhoùm chính : . Theû ñieàu khieån (theû roãng) : chæ goàm moät theû duy nhaát. . Theû noäi dung (phaàn töû HTML) : bao goàm moät caëp theû. Theû ñaàu tieân trong moät caëp laø theû môû , theû (thöù) hai laø theû ñoùng. Vaên baûn giöõa theû môû vaø theû ñoùng laø noäi dung Ví duï : 2
Title of page This is my first homepage.This text is bold 2. Thuoäc tính theû Nhöõng theû coù theå coù nhöõng thuoäc tính Nhöõng thuoäc tính coù theå cung caáp theâm caùc thoâng tin veà nhöõng phaàn töû HTML treân trang web. Nhöõng thuoäc tính luoân luoân ôû daïng "teân = giaù trò" Ví duï: < body bgcolor ="red "> … Theû ñònh nghóa noäi dung trang HTML .Vôùi moät thuoäc tính bgcolor ñöïôc theâm, chuùng ta coù theå noùi vôùi trình duyeät raèng neàn trang caàn phaûi ñoû. 3
CHÖÔNG 1 : HTML I Caáu truùc toång quaùt cuûa moät trang Web II Phaàn Header 1. Theû 2. Theû 3. Theû III Phaàn Body 1. Caùc theû hoå trôï cho ñònh daïng vaên baûn a. Ñònh daïng cho caùc ñoaïn vaên: ñònh nghóa vaên baûn in ñaäm < big > ñònh nghóa vaên baûn in lôùn < em > ñònh nghóa vaên baûn ñöïôc nhaán maïnh ñònh nghóa vaên baûn nghieâng < small > ñònh nghóa vaên baûn nhoû < strong > ñònh nghóa vaên baûn ñaäm < sub > ñònh nghóa vaên baûn subscripted (chæ soá ) < sup > ñònh nghóa vaên baûn superscripted (soá muõ) ñònh nghóa vaên baûn gaïch döùôi. < h1 >-< h6 > ñònh nghóa heading 1 tôùi heading 6 Nhöõng heading ñöïôc ñònh nghóa töø theû < h1 > ñeán theû < h6 >. < h1 > ñònh nghóa heading lôùn nhaát. 4
< h6 > ñònh nghóa heading nhoû nhaát. HTML töï ñoäng theâm moät doøng traéng tröùôc vaø sau moät heading. ñònh nghóa moät ñoaïn (paragraph) HTML töï ñoäng theâm moät doøng traéng theâm tröùôc vaø sau moät ñoaïn. < address > ñònh nghóa moät phaàn töû ñòa chæ < bdo > ñònh nghóa höùông vaên baûn noäi dung < blockquote > ñònh nghóa moät trích daãn daøi < tt > ñònh nghóa vaên baûn ñieän baùo < pre > ñònh nghóa vaên baûn ñöïôc taïo khuoân tröùôc. duøng ñeå xuoáng haøng Theû < br > ñöïôc söû duïng khi baïn muoán keát thuùc moät doøng, nhöng khoâng muoán khôûi ñoäng paragraph môùi. < br > Theû laø moät theû roång. Noù khoâng coù theû ñoùng. ñònh nghóa moät chuù thích trong maõ nguoàn HTML Theû chuù thích ñöïôc söû duïng ñeå cheøn moät chuù thích trong maõ nguoàn HTML.Moät chuù thích seõ ñöïôc boû qua bôûi trình duyeät. Chuù yù : caàn moät daáu'!' chæ sau moùc môû. b. Ñöôøng keû ngang : < hr size = “ ñoä daøy “ width = “ chieàu roäng “ align = “ höôùng “ [noshare ] > chieàu roäng : pixels, % höôùng : [right | left | center] noshare : taïo boùng c. Ñònh daïng danh saùch : + Danh saùch khoâng ñaùnh soá thöù töï Moät danh saùch khoâng thöù töï laø moät danh muïc. Moät danh saùch khoâng thöù töï baét ñaàu vôùi theû < ul > Moãi phaân töû danh saùch baét ñaàu vôùi theû < li >. 5
Beân trong moät phaân töû danh saùch chuùng ta coù theå ñaët chia ñoaïn, xuoáng doøng, nhöõng aûnh, nhöõng moái lieân keát, danh saùch khaùc ,v.v. < UL type =”[ disc | square | circle ] ” > < LI > item < / UL> Ví duï : < UL > < LI > item 1 < LI > item 2 < / UL > + Danh saùch ñöôïc ñaùnh soá thöù tö Moät danh saùch coù thöù töï cuõng laø moät danh muïc. Nhöõng phaân töû danh saùch ñöïôc ñaùnh daáu vôùi nhöõng soá. Moät danh saùch ñöïôc saép thöù töï baét ñaàu vôùi theû < ol > Moãi phaân töû danh saùch baét ñaàu vôùi theû < li >. Beân trong moät phaân töû danh saùch chuùng ta coù theå ñaët chia ñoaïn, xuoáng doøng, nhöõng aûnh, nhöõng moái lieân keát, danh saùch khaùc ,v.v. ï < OL start = value type =”[ 1 | a | A | i | I ] ” > < LI value = “ gia tr i “ > item < / UL> Ví duï : < OL type = 1> < LI > item 1 < LI > item 2 < LI value= 100> item 3 < LI > item 4 < / OL > + Danh saùch töï ñònh nghóa Moät danh saùch töï ñònh nghóa khoâng phaûi laø danh muïc haøng hoùa. Danh saùch naøy laø moät danh saùch nhöõng phaàn töû vaø giaûi thích nhöõng phaàn töû ñoù. Moät danh saùch töï ñònh nghóa baét ñaàu vôùi theû < dl > . Moãi phaàn töû baét ñaàu vôùi theû < dt >. Moãi giaûi thích baét ñaàu vôùi theû < dd >. Beân trong moät phaân töû danh saùch chuùng ta coù theå ñaët chia ñoaïn, xuoáng doøng, nhöõng aûnh, nhöõng moái lieân keát, danh saùch khaùc ,v.v. 6
< DL> < DT > Tieâu ñeà < DD > ñònh nghóa Ví du : < DL > < DT > RAM < DD > Read Access Memory < /DL > d. Thöïc theå kyù töï : Vaøi kí töï coù moät nghóa ñaëc bieät beân trong HTML, nhö kyù töï ' greater than > > & ampersand & & " quotation mark " " ' apostrophe ' 7
Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £ ¥ Yen ¥ ¥ § section § § © copyright © © ® registered trademark ® ® × multiplication × × ÷ division ÷ ÷ 2. Hình aûnh Trong HTML, hình aûnh ñöïôc ñònh nghóa vôùi theû < img >.Theû < img > laø theû roãng. Cuù phaùp : < img src=” teân hình “ align = “value “ alt = “chuù thích” width = “ value” height=”value” hspace =”value” vspace = ” value” > src : URL cuûa aûnh chuùng ta muoán trình baøy treân trang web align = [ top | bottom | middle | left | right ] ( default = middle ) width / height : ñònh kích thöôùc hình aûnh hspace / vspace : khoaûng caùch giöõa hình vaø chöõ ( ñôn vò pixels ) alt : ñöïôc söû duïng ñeå ñònh nghóa moät "chuù thích" cho moät aûnh. + Image Map Image Map baét buoäc phaûi coù height vaø width < img src = “teân hình” alt = “chuù thích” width = “value” height = “value” USEMAP = “ # teân map “ > < /map > coords : danh saùch caùc ñoái soá phuï thuoäc vaøo shape rect : 4 ñoái soá (left – top – right – bottom ) circle : 3 ñoái soá ( x, y , r ) polygon : 2 * n ñoái soá Ví duï : < map name = “vietnam” > 8
< area href=”hanoi.htm” shape = rect coords=”100,100,200,200” > < area href=”hue.htm” shape = circle coords=”300,300,20” > < area href=”hcm.htm” shape=polygon coords=”400,400,410,410,500,420” > < / map> 3. Sieâu lieân keát HTML söû duïng theû < a > ( anchor) ñeå taïo ra moät moái lieân keát tôùi taøi lieäu khaùc. Moät anchor coù theå chæ tôùi baát kyø taøi nguyeân naøo treân Web : moät trang HTML, moät aûnh, moät aâm thanh saép xeáp, moät movie, v.v. Cuù phaùp 1: noäi dung href : ñöïôc söû duïng ñeå höùông vaøo taøi lieäu caàn lieân keát , vaø noäi dung cuûa theû anchor seõ ñöï ôc trình baøy nhuö moät hyperlink. target : ñònh nghóa nôi taøi lieäu ñöïôc lieân keát seõ ñöïôc môû. target =" _blank " Taûi taøi lieäu môùi trong moät cöûa soå môùi target =" _self " Taûi taøi lieäu môùi trong cuøng cöûa soå. target =" _parent " Taûi taøi lieäu môùi trong cöûa soå cha (frame) target =" _top " Taûi taøi lieäu môùi trong toaøn boä cöûa soå trình duyeät. Cuù phaùp 2:
Chuù yù : neân söû duïng ñöôøng daãn töông ñoái trong caùc sieâu lieân keátNeân + Ñöôøng daãn töông ñoái ../ : veà thö muïc cha MY FOLDER H I. htm A D. htm E. htm B F. htm C G. htm - Töø F.htm ñeán D.htm < A href=” ../ A / D.htm ” > - Töø I.htm ñeán F.htm < A href=”.. / .. / C / F.htm” > 4. Table Nhöõng baûng ñöïôc ñònh nghóa vôùi theû . Moät baûng ñöïôc chia vaøo trong nhöõng haøng vôùi theû , vaø moãi haøng ñöïôc chia caét thaønh caùc ñôn vò vôùi theû . Moät ñôn vò coù theå chöùa ñöïng nhöõng vaên baûn, nhöõng aûnh, nhöõng danh saùch, nhöõng ñoaïn, nhöõng form, thanh ngang, table khaùc, v.v. Moät baûng toång quaùt coù daïng nhö sau : < TABLE > < TR > // doøng < TD > a < / TD > < TD > b < / TD > < / TR > < TR > < TD > c < / TD > < TD > d < / TD > 10
< / TR > < / TABLE > a. Caùc thuoäc tính cuûa theû TABLE Cuù phaùp : frame : keát hôïp vôùi thuoäc tính border ñeå ñònh daïng khung cuûa table. Frame ñaët ngay beân phaûi cuûa table, coù caùc giaù trò sau void : khoâng coù khung above : canh treân below : canh döôùi lhs : canh traùi rhs : canh phaûi hsides : canh treân vaø döôùi vsides : canh traùi vaø phaûi box : canh 4 beân (default ) border : ñoä daøy cuûa khung _ Neáu chuùng ta khoâng chæ roõ moät thuoäc tính border table seõ ñöïôc trình baøy maø khoâng coù khung. width : chieàu roäng cuûa table height : chieàu cao cuûa table bgcolor : maøu neàn cuûa table cellspacing : khoaûng caùch giöõa caùc Cells cellpadding : khoaûng caùch giöõa caùc döõ lieäu vaø vaùch rules : [ cols | rows | all | groups ] ñònh daïng ñöôøng phaân caùch caùc cell b. Nhoùm caùc Cell Nhoùm caùc cell baèng 2 thuoäc tính colspan & rowspan cuûa theû < TD > colspan : nhoùm caùc cell theo coät. rowspan : nhoùm caùc cell theo haøng. Ví duï 1 : < TABLE border = 1 > < TR > < TD ROWSSPAN = 4 > < / TD > < TD > < / TD > < / TR > < TR > 11
< TD > < / TD > < / TR > < TR > < TD > < / TD > < / TR > < TR > < TD > < / TD > < / TR > < /TABLE > Keát quaû Ví duï 2 : < TABLE border = 1 > < TR > < TD COLSPAN = 2 > < / TD > < / TR > < TR > < TD > < / TD > < TD > < / TD > < / TR > < TR > < TD > < / TD > < TD > < / TD > < / TR > < /TABLE > Keát quaû Ví duï 3 : < TABLE border = 1 > < TR > < TD COLSPAN = 2 > < / TD > < TD COLSPAN = 2 > < / TD > < / TR > < TR > < TD ROWSPAN = 2> < / TD > < TD > < / TD > < TD > < / TD > 12
< TD > < / TD > < / TR > < TR > < TD ROWSPAN = 2 > < / TD > < TD COLSPAN = 2 > < / TD > < / TR > < TR > < TD > < / TD > < TD > < / TD > < TD > < / TD > < / TR > < /TABLE > Keát quaû b. Caùc theû hoå trôï cho baûng + Theû : teân cuûa table Cuù phaùp : < caption align = [ top | bottom ] > teân table < / CAPTION > Ví duï: < TABLE border = 1 > < CAPTION ALIGN = bottom > TABLE 1 < / CAPTION > < TR > < TD > a < / TD > < TD > b < / TD > < / TR > < /TABLE > + Theû : töïa ñeà cho caùc coät ( in ñaäm ) Xuaát hieän treân moãi trang in neáu daøi hôn 1 trang. Söû duïng theû töông töï nhö söû duïng theû Ví duï: < TABLE border = 1 > < TH > < TD > coät 1 < / TD > 13
< TD > coät 2 < / TD > < / TH > < TR > < TD > a < / TD > < TD > b < / TD > < / TR > < /TABLE > + Theû : nhoù caùc coät Cuù phaùp : Caùc thuoäc tính ñöôïc thieát laäp trong seõ aûnh höôûng ñeán caùc coät lieân quan Xeùt table sau : Hoï vaø teân Ñòa chæ Baäc löông NVA 1.78 LVB 2:2 PTC 4.0 < TR > < TD > NVA < / TD > < TD > < / TD > < TD ALIGN = right > 1.78 < / TD > < / TR > < TR > < TD > LVB < / TD > < TD > < / TD > < TD ALIGN = right > 2.2 < / TD > < / TR > Ñeå traùnh laëp laïi nhieàu laàn duøng theû < TABLE border = 1 RULES = COLS> < COLGROUP SPAN = 1 ALIGN = right > < TH > < TD > Hoï teân < / TD > < TD > Ñòa chæ < / TD > < TD > Baäc löông < / TD > < / TH > < TR > < TD > NVA < / TD > 14
< TD > < / TD > < TD > 1.78 < / TD > < / TR > < TR > < TD > LVB < / TD > < TD > < / TD > < TD > 2.2 < / TD > < / TR > < TR > < TD > PTC < / TD > < TD > < / TD > < TD > 4.0 < / TD > < / TR > < /TABLE > Chuù yù : Nhöõng cell khoâng coù noäi dung naøo chuöa ñöïôc trình baøy toát trong ña soá caùc trình duyeät. Nhöõng border xung quanh boä cell roãng bò bieán maát .Ñeå traùnh ñieàu naøy, theâm moät khoaûng traéng (& nbsp;) vaøo caùc cell troáng 5. Form : - Form laø cô cheá cho pheùp nhaän thoâng tin phaûn hoài töø ngöôøi söû duïng - Döõ lieäu seõ ñöôïc truyeàn ñeán WebServer ñeå xöû lyù vaø goïi/ taïo ra moät trang HTML traû lôøi Cuù phaùp : < form method=[ get | post ] action= URL [name=”teân form”] [target=”teân cöûa soå”]> Caùc thaønh phaàn cuûa Form < / FORM > get : nhöõng thoâng tin leân header post : nhöõng thoâng tin trong Body Caùc thaønh phaàn cuûa Form bao goàm 3 loaïi theû chính < textarea > Item 1 Item 2 ---MySite--- < select > Item 3 < input > 15
TextBox User Name Password ********* Checkbox Radio Reset Reset Submit Submit Button File Hidden Image a. Theû : Cung caáp moät hoäp vaên baûn cho pheùp ngöôøi söû duïng coù theå nhaäp vaøo nhieàu doøng vaên baûn Cuù phaùp : Noäi dung < / textarea> ame : teân ñeå xaùc ñònh textarea trong form rows : soá doøng trong textarea cols : soá coät trong textarea wrap : xaùc ñònh caùch xöù lyù döõ lieäu tröôùc khi göûi . off : (default ) göûi noäi dung vaên baûn boû qua caùc kyù töï xuoáng doøng . virtual : cho pheùp nhaäp kyù töï xuoáng doøng nhöng khoâng göûi ñi . physical : göûi noäi dung vaên baûn bao goàm caû kyù töï xuoáng doøng b. Theû : Cung caáp caùc coâng cuï giôùi haïn thoâng tin phaûn hoài Cuù phaùp : < input type=”loaïi input” name=teân value =“noäi dung” > type : xaùc ñònh loaïi coâng cuï (checkbox, radio, button …) name : teân ñeå xaùc ñònh coâng cuï trong form value : noäi dung cuûa input 16
+ Textbox : cho pheùp chæ nhaäp moät doøng vaên baûn. Ña soá caùc trình duyeät, ñoä roäng maëc ñònh cuûa tröôøng vaên baûn laø 20 kí töï. type = “text” size= kích thöôùc cuûa text box (tính theo soá kyù töï) maxlength= soá kyù töï toái ña ñöôïc nhaäp value = vaên baûn xuaát hieän trong textbox. + Password: töông töï nhö textbox nhöng noäi dung nhaäp ñöôïc che baèng maët naï (daáu ‘*’). type = “password” + Checkbox : danh saùch caùc tuøy choïn type = “checkbox” checked : caùc tuøy choïn ñöôïc choïn löïa maëc ñònh + Radio button : gom nhoùm danh saùch caùc löïa choïn ( chæ cho pheùp choïn 1 löïa choïn maø thoâi ) type = “radio” checked : tuøy choïn maëc ñònh Caùc löïa choïn trong cuøng moät nhoùm seõ coù cuøng teân Ví duï < input type=”radio” name=”gioitinh” value = 1 checked > Nam < input type=”radio” name=”gioitinh” value = 0 > Nu Gioi tinh : Nam Nu + Hidden : truyeàn ngaàm caùc giaù trò ñeán Web Server & Script ( duøng ñeå xöû lyù ) type = “ Hidden “ + Reset button : xoùa döõ lieäu trong Form type = “reset” + Submit button : göûi döõ lieäu töø Form leân Server type = “ Submit” c. Theû Duøng ñeå taïo Combo box vaø ListBox Cuù phaùp < select name=”teân” size =number [multiple]> löïa choïn 17
………… name : teân ñònh danh size = 1 : COMBOBOX > 1 : LISTBOX multiple (size > 1) cho pheùp löïa choïn nhieàu doøng Löu yù : + Giaù trò nhaäp vaøo cho Form caàn phaûi ñöôïc laøm cho coù hieäu löïc treân trình duyeät, baèng caùc ñoaïn maõ client Script . Vieäc kieåm tra giaù trò treân trình duyeät coù thôøi gian taùc ñoäng nhanh hôn, vaø giaûm bôùt söï truyeàn taûi treân server. + Chuùng ta caàn phaûi xem xeùt vieäc kieåm tra giaù trò treân server neáu döõ lieäu ñöôïc cheøn vaøo vaøo trong moät cô sôû döõ lieäu. + Moät toát caùch ñeå kieåm tra giaù trò treân Form laø seõ göûi giaù trò cho chính Form ñoù tröôùc, thay vì nhaûy tôùi moät trang khaùc. Ngöôøi duøng seõ nhaän ñöôïc nhöõng thoâng baùo loãi treân cuøng moät trang chöùa Form. Vieäc naøy seõ khaùm phaù loãi deã daøng hôn . 18
IV. Frame Vôùi frame, chuùng coù theå trình baøy nhieàu taøi lieäu HTML trong cuøng cöûa soå trình duyeät.Moãi taøi lieäu HTML ñöïôc goïi moät khung, vaø moãi khung ñoäc laäp nhöõng khung khaùc. Moãi taøi lieäu coù theå caäp nhaät rieâng bieät. Nhöõng söï baát lôïi vieäc söû duïng frame : . Nguôøi phaùt trieån Web phaûi theo doõi nhieàu taøi lieäu HTML hôn . Khoù khaên ñeå in toaøn boä trang Frame thích hôïp cho caùc loaïi giao dieän sau : . Lieân keát chæ muïc . Nhöõng thaønh phaàn giao dieän coá ñònh . Giao dieän daïng hình xem aûnh hay taøi lieäu Single Page Master Page ( Frame) Top.htm Table Left.htm Right.htm - Maøn hình chæ xuaát hieän moät trang duy nhaát - Maøn hình xuaát hieän nhieàu trang - Coù theû - Khoâng coù theû < BODY > - Caäp nhaät 1 vuøng ó caäp nhaät - Caäp nhaät töøng vuøng rieâng bieät toaøn trang * Trình baøy trang web thoâng thöôøng Site Navigation ( Bannner – Logo – Button …) Section Content Tools Navigation ( noäi dung töøng trang rieâng leû ( Coâng cuï trôï ( aûnh höôøng treân ) giuùp ) töøng nhoùm trang moät ) 19
* Moät trang frame toång quaùt coù daïng sau : < html > < head > ………… < / head > < frameset rows = “number | % | * ” cols = “number | % | * ” > < frame src=“URL” name = “teân” scrolling = “yes | no | auto” noresize marginwidth = number marginheight = number > ………… rows, cols : soá doøng, coät trình baøy trong moät frameset src : trang htm caàn load trong khung scrolling : coù thanh scroll bar hay khoâng nosize : khoâng cho pheùp thay ñoåi kích thöôùc khung marginwidth : chieàu roäng 2 caïnh treân vaø döôùi marginheight : chieàu roäng 2 caïnh traùi vaø phaûi a. Töø 1 trang ñôn -> frame Duøng sieâu lieân keát thoâng thöôøng trong trang ñôn ñeå goïi ñeán frame Ví duï : Master page b. Töø 1 frame -> trang ñôn Duøng sieâu lieân keát coù thuoäc tính TARGET = “_top ” Ví du :ï single page c. Töø 1 vuøng aûnh höôûng ñeán vuøng khaùc Duøng sieâu lieân keát coù thuoäc tính TARGET vôùi giaù trò laø teân cuûa vuøng bò taùc ñoäng. Ví duï : Trang 2 20