bẢng, l Ớp, multimedia, m Ẫu bi Ểu vÀ khung2014915822).pdf · nỘi dung . bộ môn h ệ...

Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin

BẢNG, LỚP, MULTIMEDIA, MẪU BIỂU VÀ KHUNG

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

1


� Bảng, � Lớp,� Multimedia,� Mẫu biểu,� Và khung

NỘI DUNG


BẢNG


� 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 của bảng.� <tr>…</tr>: Định nghĩa hàng của bảng. Các ô

tạo thành hàng, các hàng tạo thành bảng.� <th>…</th>: Định nghĩa tiêu đề cho cột� <Caption>…</Caption>: Định nghĩa tiêu đề bảng

BẢNG


� Chèn hàng và cột: Các thẻ <td> và <tr> theo thứ tựhàng và cột vào trong bảng.

BẢNG

<table border ="2"><caption >Tạo b ảng</ caption ><tr >

<td >Cell 1 </ td ><td >Cell 2 </ td ><td >Cell 3 </ td ><td >New column </ td >

</ tr ><tr >

<td >Cell 4 </ td ><td >Cell 5 </ td ><td >Cell 6 </ td >

</ tr ><td >

New Row</ td >

</ table >


� Xóa hàng và cột: Để xóa hàng, xóa thẻ <tr> cùngvới tất cả các thẻ <td> bên trong. Tương tự xóa cột

BẢNG

<table border ="2"><caption >Tạo b ảng</ caption ><tr >

<td >Cell 1 </ td ><td >Cell 2 </ td ><td >Cell 3 </ td ><td >New column </ td >

</ tr ><td >

New Row</ td >

</ table >


� Trộn ô:� Colspan: Kết hợp các cột thành một, thường dùng

với thẻ <th>� Rowspan: Kết hợp các dòng thành một, thường

dùng với thẻ <td>

BẢNG


� Tạo bảng:

BẢNG<table border ="2">

<caption >Tạo b ảng</ caption ><th colspan ="2"> Nhóm 1</ th ><th colspan ="2"> Nhóm 2</ th ><tr >

<td rowspan ="2"> Nhom dong </ td ><td >Cell 2 </ td ><td >Cell 3 </ td ><td >Cell 4 </ td >

</ tr ><tr >

<td >Cell 6 </ td ><td >Cell 7 </ td >

<td >Cell 8 </ td ></ tr ><tr >

<td >Cell 9 </ td ><td >Cell 10 </ td ><td >Cell 11 </ td ><td >Cell 12 </ td >

</ tr ></ table >


� Các thuộc tính định dạng:� border: Định dạng đường viền.� Width: Độ rộng bảng� Định dạng ô:

� Align: Canh lề ngang� Valign: Canh lề dọc� Cellspacing: Định nghĩa không gian giữa các ô� Cellpadding: Định nghĩa không gian giữa đường viền ô

với nội dung văn bản.

BẢNG


� Khái niệm lớp (Layer):� Layer hay là lớp là xét các thành phần HTML

theo chiều sâu nghĩa là bạn qui định đối tượngnày có đè chồng lên đối tượng kia hay không.

� Lớp được khai báo bởi thẻ <layer>:

<layer>... <layer>

LỚP


� Sử dụng lớp (Layer):<body bgcolor ="lavender">

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

<font color ="red"><H1> Layer 1 </ H1><p> Nội dung trong Layer 1 </ p></ font >

</ div ><p> Ngoài th ẻ DIV </ p><div >

<font color ="blue"><H1> Layer 1 </ H1><p> Nội dung trong Layer 1 </ p></ font >

</ div ></ layer >

</ body >

LỚP


� Multimedia có nhiều định dạng khácnhau. Hầu hết là những tứ ta có thểnghe và nhìn, như: Pictures, music,sound, videos, records, films,animations, ...� Video Formats: .avi, .wmv, .mpg, .mpeg,

.rm, .ram, .swf, .flv,...� Sound Formats: .mid, .midi, .mp3, .rm,

.ram, .wav, .wma

MULTIMEDIA


� Dùng thẻ <object>:� WAV Audio, MP4 Video

<object width="420" height="360"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B " codebase="http://www.apple.com/qtactivex/qtplugin.c ab"><param name="src" value="liar.wav"><param name="controller" value="true">

</object>

MULTIMEDIA


� Dùng thẻ <object>:� Adobe Flash Player - SWF Video

<object width="400" height="40"classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 "codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0, 0"><param name="SRC" value="bookmark.swf"><embed src="bookmark.swf" width="400" height="40"></embed>

</object>

MULTIMEDIA


� Dùng thẻ <object>:� Windows Media Player - Play WMV Movie

<object width="100%" height="100%"type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param name="url" value="3d.wmv"><param name="filename" value="3d.wmv"><param name="autostart" value="1"><param name="uiMode" value="full"><param name="autosize" value="1"><param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>

</object>

MULTIMEDIA


� Dùng thẻ <embed>:<embed height="50" width="100"

src="horse.mp3">

� Src: URL của file nhúng� Heigh: pixels, chiều cao� Width: pixels, độ rộng� Type: MIME_type của content nhúng.

MULTIMEDIA


� Dùng thẻ <audio>:<audio controls>

<source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">

<source src="horse.wav" type=" audio/wav">Your browser does not support the audio tag.

</audio>

Thẻ <audio> được cung cấp cho Internet Explorer 9+,

Firefox, Opera, Chrome, and Safari

MULTIMEDIA


� Dùng thẻ <video>:<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm"

type="video/webm"><object data="movie.mp4" width="320"

height="240"><embed src="movie.swf" width="320"

height="240"></object>

</video>

MULTIMEDIA


� Thẻ <Form>: Được sử dụng để tạo một vùngtrên trang như một mầu biểu, bao gồm cácthuộc tính:� Action=“URL” : Xác định vị trí của script sẽ xử lý

mẫu biểu hoàn chình và đã được gửi đi.� Method=“Post|Get): Xác định phương thức dữ

liệu được gửi đi.� Nếu GET: Trình duyệt tạo ra QueryString trong địa chỉ URL� Nếu POST: Dữ liệu trên biểu mẫu được gửi đến kịch bản

xử lý như một khối dữ liệu.

FORM


� Các phần tử nhập dữ liệu: Người dùng cóthể nhập dữ liệu thông qua các điều khiểnInput.� Các điều khiển này được sử dụng với phần tử

<Form>.� Cũng có thể sử dụng chúng bên ngoài biểu mẫuđể tạo giao diện người dùng.

FORM


� Các phần tử nhập dữ liệu:� Phần tử <Input> xác định loại điều khiển trên

biểu mẫu, gồm các thuộc tính:� Type : Xác định loại phần tử. Có thể lựa chọn một trong

các thành phần sau: Text, Password, CheckBox, Radio,Submit, Reset, File, Hidden và Button. Mặc định là Text.

� Name: Tên của điều khiển. Phạm vi hoạt động của thuộctính Name nằm trong phần tử Form.

� Value : Là thuộc tính tùy chọn (trừ Radio). Xác định giá trịkhởi tạo của điều khiển.

� Size: Xác định độ rộng ban đầu của điều khiển. Đối vớikiểu Text hay Password kích thước tính bằng ký tự, còn lạitính bằng pixels.

CÁC PHẦN TỬ INPUT


� Các phần tử nhập dữ liệu:� Phần tử <Input> xác định loại điều khiển trên

biểu mẫu, gồm các thuộc tính:� Maxlength : Xác định số ký tự lớn nhất có thể nhập vàođiều khiển Text và Password.

� Check: Xác định nút có được chọn hay không chọn đượcsử dụng trong điều khiển Radio và CheckBox.

� SRC=“URL”: Chỉ định đường dẫn file ảnh trong điều khiểninput dạng Image.



� Các phần tử nhập dữ liệu:� Nút bấm: Dạng nút lệnh

<input type= "button" value= "Back" name= "back" onclick= "window.history.go(-1);“ >

� Văn bản: Tạo điều khiển nhập văn bản mộtdòng, thuộc tính size xác định số ký tự có thểhiển thị trong điều khiển, maxlength xác định sốphần tử tối đa có thể nhập vào, value xác địnhgiá trị khời đầu:

<input type= "text" name="txtUsername"size= 20 maxlenght= 50>



� Các phần tử nhập dữ liệu:� CheckBox: Người dùng có thể lựa chọn một hoặc nhiều

CheckBox. Khi một phần tử được chọn thì cặp tên/giá trịđược nhận cùng với biểu mẫu.

<input type= "checkbox" value= "P" name="chkHow"checked> Newspaper

� Radio: Sử dụng tương tự như checkbox, nhưng radiothường được sử dụng 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



� Các phần tử nhập dữ liệu:� Submit: Khi người dùng nhấn vào nút Submit, biểu mẫuđược chuyển đến vị trí xác định trong thuộc tínhACTION. Cặp tên/giá trị của nút Submit được nhận cùngbiểu mẫu.

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

� Ảnh: Điều khiển này dùng để tạo ra một nút Submit dạngảnh:

<input type= "image" src= "gogo.gif"name="search" >



� Các phần tử nhập dữ liệu:� Reset: Khi người dùng nhấp vào nút này, các giá trị của

tất cả các điều khiển được tái thiết lập về các giá trị banđầu, được xác định trong các giá trị của thuộc tính:

<input type= "reset" name="back“ >

� Hidden: hidden là một dạng thẻ input dạng text nhưngkhông hiển thị trên trang Web, không cho phép ngườidùng nhập liệu, thay vào đó ta cần định nghĩa trước mộtgiá trị cụ thể cho thẻ này.

<input type= "hidden" name="txtFrom"value= "N” >



� Thẻ TextArea: Tạo ra vùng văn bản, gồmcác thuộc tính� Cols: Độ rộng của cột, số ký tự� Rows: Số hàng� Value: Giá trị của điều khiển

Trong trường hợp muốn gán giá trị mặc định ta khôngcần khai báo thêm thuộc tính value, thay vào đó giá trị cụthể sẽ khai báo giữa thẻ mở và thẻ đóng của textarea.

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

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

CÁC PHẦN TỬ


� Thẻ Select: Thẻ Select cho phép người dùng chọnphần tử trong tập các phần tử được định nghĩatrước. Thẻ Select có hai dạng tương tự như combobox và listbox.� Option: Thẻ Select chứa ít nhất một thẻ Option� OptGoup: Nhóm các lựa chọn vào một nhóm� Selected: Là thuộc tính logic cho phép chọn trước một

phần tử.� Lable: Xác định văn bản được hiển thị trên lựa chọn.



� Thẻ Select:- Khai báo thẻ select dạng combo box như sau:

<select name= "city" ><option value= "" selected> ..Select City .. </option>

<option value= "HCM">Ho Chi Minh </option><option value= "HAN" >Ha Noi </option><option value= "HUE" >Hue</option>

</select>- Khai báo thẻ select dạng listbox, ta khai báo bắt đầu từ select với tên là

multiple như sau:<select name= "industry" multiple >

<option value= "" selected> ..Select Industry.. </option><option value= "AUT" >Auto </option><option value= "MED">Medical </option><option value= "ENG">Engineering </option>

</select>



� Thẻ Lable: Được dùng để gán nhãn cho các điềukhiển.Để gán nhãn cần xác định thuộc tính ID củađiều khiển được gán nhãn.

<label for ="txtUsername"> Tên ñăng nh ập</ label ><input type ="text" name="txtUsername" size =20

maxlenght =50><LABLE for ="txtFullname"> Họ tên </ LABLE><input type ="text" name="txtFullname" value =""

size =20 maxlenght =50>



� Thẻ Frame: Mục đích chính của Frame là nhằmchia cửa sổ của trình duyệt ra là hai hay nhiềuvùng nhỏ hơn, để khi đó có thể tải các tài liệuHTML khác nhau vào trong các vùng.Để tạo các Frame sử dụng thẻ <frameset> </framset>. Thẻnày có hai thuộc tinh cơ bản là ROWS và COLS dùng đểmô tả số hàng và số cột chia thành frame.<frameset border= "False" frameboder= "0" rows= "80,*" >

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

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

<noframes>

FRAME


� Thẻ Frame:<html><head><title> Tao Frame </title></head><frameset border= "False" frameboder= "0" rows= "80,*" >

<frame name= "frame1" src= "frame1.htm" scolling= "no" noresize><frameset border= "False" frameboder= "0" cols= "80,*" >

<frame name= "frame2" src= "frame2.htm" scolling= "auto" noresize><frame name= "frame3" src= "vidu1_11.html" scolling= "auto"noresize>

</frameset></frameset>

<noframes><body></body>

</noframes></html>

FRAME


THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ trong TL[1] và tìm hiểu mở rộng về HTML5.

� Nên ý tưởng thiết kế các chức năng cho bài tập lớn

BÀI TẬP

bẢng, l Ớp, multimedia, m Ẫu bi Ểu vÀ khung2014915822).pdf · nỘi dung . bộ môn h ệ...

Documents