Bài giảng Nhập môn HTML và thiết kế Web: Bài 4 - Bảng, lớp, Multimedia, mẫu biểu và khung

Mời các bạn tham khảo bài giảng Bài giảng Nhập môn HTML và thiết kế Web: Bài 4 do Chu Thị Hường biên soạn sau đây để bổ sung thêm kiến thức về bảng, lớp, Multimedia, mẫu biểu và khung. Với các bạn quan tâm tới lĩnh vực này thì đây là tài liệu hữu ích.

Trang 1

NH P MÔN HTML VÀ THI T K WEB

B%NG, L(P, MULTIMEDIA, M,U BI-U

VÀ KHUNG

Trang 3

B%NG

Trang 4

T o b/ng: Dùng th= <table>… </table>, trong th= <table> ta ñ nh nghĩa các th=:

<td> …</td>: Đ nh nghĩa m!t ô, ñây là ñơn v cơb/n cLa b/ng

<th>…</th>: Đ nh nghĩa tiêu ñN cho c!t

<Caption>…</Caption>: Đ nh nghĩa tiêu ñN b/ng

Trang 5

Chèn hàng và c!t: Các th= <td> và <tr> theo thP tQhàng và c!t vào trong b/ng.

Trang 6

Xóa hàng và c!t: Đ8 xóa hàng, xóa th= <tr> cùngv0i tUt c/ các th= <td> bên trong Tương tQ xóa c!t

Trang 7

Tr!n ô:

Colspan: KVt hWp các c!t thành m!t, thư ng dùngv0i th= <th>

Rowspan: KVt hWp các dòng thành m!t, thư ngdùng v0i th= <td>

B%NG

dùng v0i th= <td>

Trang 9

Cellspacing: Đ nh nghĩa không gian gi]a các ô

Cellpadding: Đ nh nghĩa không gian gi]a ñư ng viNn ô v0i n!i dung văn b/n.

Trang 10

Khái ni_m l0p (Layer):

Layer hay là l0p là xét các thành phcn HTMLtheo chiNu sâu nghĩa là b n qui ñ nh ñei tưWngnày có ñè chfng lên ñei tưWng kia hay không

L0p đưWc khai báo bgi th= <layer>:

L(P

Biên so n: Chu Th Hư ng – B! môn HTTT – Khoa CNTT

L0p đưWc khai báo bgi th= <layer>:

Trang 11

Si djng l0p (Layer):

< body bgcolor ="lavender">

< layer id ="layer1" bgcolor ="aqua">

Trang 12

Multimedia có nhiNu ñ nh d ng khác

nhau Hcu hVt là nh]ng tP ta có th8

nghe và nhìn, như: Pictures, music,

Sound Formats: mid, midi, mp3, rm,

.ram, wav, wma

Trang 13

Dùng th= <object>:

WAV Audio, MP4 Video

classid="clsid:02BF25D588C1784B238BC808D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

MULTIMEDIA

</object>

Trang 14

Dùng th= <object>:

Adobe Flash Player q SWF Video

</embed>

</object>

Trang 15

Dùng th= <object>:

Windows Media Player q Play WMV Movie

type="video/x8ms8asf" url="3d.wmv" data="3d.wmv"

classid="CLSID:6BF52A528394A811d38B153800C04F79FAA6">

MULTIMEDIA

Trang 16

Dùng th= <object>:

Windows Media Player q Play WMV Movie

type="video/x8ms8asf" url="3d.wmv" data="3d.wmv"

classid="CLSID:6BF52A528394A811d38B153800C04F79FAA6">

MULTIMEDIA

Trang 17

Dùng th= <embed>:

Src: URL cLa file nhúng

Heigh: pixels, chiNu cao

Trang 18

Dùng th= <audio>:

MULTIMEDIA

Your browser does not support the audio tag.

</audio>

Th= <audio> ñưWc cung cUp cho Internet Explorer 9+, Firefox, Opera, Chrome, and Safari

Trang 19

Th= <Form>: ĐưWc si djng ñ8 t o m!t vùng trên trang như m!t mcu bi8u, bao gfm các thu!c tính:

Action=“URL” : Xác ñ nh v trí cLa script sv xi lý m6u bi8u hoàn chình và ñã ñưWc gii ñi.

FORM

m6u bi8u hoàn chình và ñã ñưWc gii ñi.

Method=“Post|Get): Xác ñ nh phương thPc d] li_u ñưWc gii ñi.

NVu GET: Trình duy_t t o ra QueryString trong ñ a chz URL NVu POST: D] li_u trên bi8u m6u ñưWc gii ñVn k ch b/n

xi lý như m!t khei d] li_u.

Trang 20

Các phcn ti nh{p d] li_u: Ngư i dùng có th8 nh{p d] li_u thông qua các ñiNu khi8n Input.

Các ñiNu khi8n này ñưWc si djng v0i phcn ti

Trang 22

ñiNu khi8n Text và Password.

Check: Xác ñ nh nút có ñưWc ch\n hay không ch\n ñưWc

si djng trong ñiNu khi8n Radio và CheckBox.

SRC=“URL”: Chz ñ nh ñư ng d6n file /nh trong ñiNu khi8n input d ng Image.

Trang 23

Các phcn ti nh{p d] li_u:

Nút bUm: D ng nút l_nh

<input type= "button" value= "Back" name=

"back" onclick= "window.history.go(81);“ >

Văn b/n: T o ñiNu khi8n nh{p văn b/n m!t

CÁC PH~N T• INPUT

Văn b/n: T o ñiNu khi8n nh{p văn b/n m!tdòng, thu!c tính size xác ñ nh se ký tQ có th8hi8n th trong ñiNu khi8n, maxlength xác ñ nh sephcn ti tei ña có th8 nh{p vào, value xác ñ nhgiá tr kh i ñcu:

<input type= "text" name= "txtUsername"

size= 20 maxlenght= 50 >

Trang 24

CheckBox: Ngư i dùng có th8 lQa ch\n m!t ho€c nhiNu

CheckBox Khi m!t phcn ti ñưWc ch\n thì c€p tên/giá tr

ñưWc nh{n cùng v0i bi8u m6u.

<input type= "checkbox" value= "P" name= "chkHow"

checked> Newspaper

Radio: Si djng tương tQ như checkbox, nhưng radio

thư ng ñưWc si djng trong t{p các giá tr l\a tr‚ nhau.

Các radio trong cùng nhóm ph/i cùng tên:

<input type= "radio" value= "M" name= "rdGender"

checked> Male

<input type= "radio” value= "F“ name= "rdGender“

> Female

Trang 25

Submit: Khi ngư i dùng nhUn vào nút Submit, bi8u m6u ñưWc chuy8n ñVn v trí xác ñ nh trong thu!c tính ACTION C€p tên/giá tr cLa nút Submit ñưWc nh{n cùng bi8u m6u.

<input type= "submit" value= "Save"

Trang 26

Reset: Khi ngư i dùng nhUp vào nút này, các giá tr cLa tUt c/ các ñiNu khi8n ñưWc tái thiVt l{p vN các giá tr ban ñcu, ñưWc xác ñ nh trong các giá tr cLa thu!c tính:

<input type= "hidden" name= "txtFrom"

value= "N” >

Trang 27

Th= TextArea: T o ra vùng văn b/n, gfm các thu!c tính

Cols: Đ! r!ng cLa c!t, se ký tQ

Rows: Se hàng

Value: Giá tr cLa ñiNu khi8n

CÁC PH~N T•

Value: Giá tr cLa ñiNu khi8n

Trong trư ng hWp muen gán giá tr m€c ñ nh ta không ccn khai báo thêm thu!c tính , thay vào ñó giá tr cj th8 sv khai báo gi]a th= mg và th= ñóng cLa

<textarea name= ”txtRequire” cols= ”20”

rows= ”3” > Please enter here … </textarea>

Trang 28

Th= Select: Th= cho phép ngư i dùng ch\nphcn ti trong t{p các phcn ti ñưWc ñ nh nghĩa

Option: Th= Select chPa ít nhUt m!t th= Option

OptGoup: Nhóm các lQa ch\n vào m!t nhóm

Selected: Là thu!c tính logic cho phép ch\n trư0c m!t phcn ti.

Lable: Xác ñ nh văn b/n ñưWc hi8n th trên lQa ch\n.

Trang 29

Th= Select:

q Khai báo th= d ng combo box như sau:

<option value= "" selected> Select City </option>

< option value= "" selected> Select Industry </option>

<option value= "MED" > Medical </option>

<option value= "ENG" > Engineering </option>

</select>

Trang 30

Th= Lable: ĐưWc dùng ñ8 gán nhãn cho các ñiNukhi8n.Đ8 gán nhãn ccn xác ñ nh thu!c tính ID cLañiNu khi8n ñưWc gán nhãn.

< label for ="txtUsername"> Tên ñăng nhRp </ label >

< input type ="text" name ="txtUsername" size =20

maxlenght =50>

< LABLE for ="txtFullname"> HS tên </ LABLE >

< input type ="text" name ="txtFullname" value =""

size =20 maxlenght =50>

Trang 31

Th= Frame: Mjc ñích chính cLa Frame là nh•mchia cia s† cLa trình duy_t ra là hai hay nhiNuvùng nh‡ hơn, ñ8 khi ñó có th8 t/i các tài li_uHTML khác nhau vào trong các vùng.

Đ8 t o các Frame si djng th= <frameset> </framset> Th=

FRAME

Đ8 t o các Frame si djng th= <frameset> </framset> Th= này có hai thu!c tinh cơ b/n là ROWS và COLS dùng ñ8

mô t/ se hàng và se c!t chia thành frame.

<frame name="frame1" src="frame1.htm" scolling="no"

noresize>

<frame name="frame2" src="frame2.htm" scolling="auto"

noresize>

Trang 32

Trang 33

TH%O LU N – CÂU H‰I

Định dạng
Số trang	34
Dung lượng	1,76 MB