chuong3b html-091030201401-phpapp02
TRANSCRIPT
![Page 1: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/1.jpg)
Trình bày: Nguyễn Phú Trường
Chương III
![Page 2: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/2.jpg)
Table với thuộc tính cellpadding
Cellpadding : số khoảng trắng từ nội dung trong ô dữ liệu đến đường viền.
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông2
CÁC THẺ CƠ BẢN
![Page 3: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/3.jpg)
Table với thuộc tính cellspacing
Cellspacing : khoảng cách giữa các ô dữ liệu trong 1 bảng.
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông3
CÁC THẺ CƠ BẢN
![Page 4: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/4.jpg)
Table với số cột không bằng nhau
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông4
CÁC THẺ CƠ BẢN
![Page 5: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/5.jpg)
Dữ liệu trong Table
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông5
CÁC THẺ CƠ BẢN
![Page 6: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/6.jpg)
Thẻ danh sách (List)
Có 3 dạng danh sách chính
Danh sách có thứ tự (Ordered List) : <ol>
Danh sách không thứ tự (Unordered List) : <ul>
Danh sách định nghĩa (Definition Lists) : <dl>
Danh sách sẽ gồm nhiều phần tử
• Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li>
• Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>
Ngoài ra còn có các dạng: <menu> và <dir>
Có thể định nghĩa các danh sách lồng nhau
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông6
CÁC THẺ CƠ BẢN
![Page 7: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/7.jpg)
Thẻ danh sách (ví dụ)
Danh sách có thứ tự
với nhiều định dạng khác nhau
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông7
CÁC THẺ CƠ BẢN
![Page 8: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/8.jpg)
Thẻ danh sách (ví dụ)
Danh sách
không thứ tự
với nhiều định dạng khác nhau
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông8
CÁC THẺ CƠ BẢN
![Page 9: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/9.jpg)
Thẻ danh sách (ví dụ)
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông9
CÁC THẺ CƠ BẢN
![Page 10: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/10.jpg)
Thẻ Form
Lựa chọn dữ liệu nhập từ người sử dụng khi
truy xuất Web,
Thành phần trong Form: text fields, textarea
fields, drop-down menus, radio buttons,
checkboxes, etc.
Form được đánh dấu bởi thẻ: <form> …. </form>
• VD : <form name=“Fname" action=“Form-Action”
method=“GET|POST"> …</form>
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông10
CÁC THẺ CƠ BẢN
![Page 11: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/11.jpg)
Ví dụ về Text Field
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông11
![Page 12: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/12.jpg)
Ví dụ về Radio Button
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông12
![Page 13: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/13.jpg)
Ví dụ về Checkbox
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông13
![Page 14: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/14.jpg)
Ví dụ về Submit button
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông14
![Page 15: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/15.jpg)
Thẻ Form (ví dụ)
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông15
CÁC THẺ CƠ BẢN
![Page 16: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/16.jpg)
Thẻ Image
Thêm vào trang web những hình ảnh dưới định
dạng là *.gif hay *.jpg
Thẻ đánh dấu là : <image src=“URL”>
Các thuộc tính của thẻ Image
Width = number pixels / number %
Height = number pixels / number %
Align = “left/right/top/middle/bottom”
Alt=“Chuỗi đại diện khi không tải được hình”
Thẻ <map> và <area>: chia hình ra làm nhiều phần24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông16
CÁC THẺ CƠ BẢN
![Page 17: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/17.jpg)
Thẻ Image (ví dụ)
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông17
CÁC THẺ CƠ BẢN
![Page 18: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/18.jpg)
Thẻ Body - với thuộc tính
Nền của trang Web có thể được định dạng
Màu nền :
– <body bgcolor="#000000">
– <body bgcolor="rgb(0,0,0)">
– <body bgcolor="black">
Ảnh nền :
– <body background="clouds.gif">
– <body background=“http://www.diachi.net/hinh.jpg">
– <body background=“/bkground.jpg">
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông18
CÁC THẺ CƠ BẢN
![Page 19: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/19.jpg)
Thẻ Body - thuộc tính bgcolor
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông19
CÁC THẺ CƠ BẢN
![Page 20: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/20.jpg)
Thẻ Body - thuộc tính background
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông20
CÁC THẺ CƠ BẢN
![Page 21: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/21.jpg)
Thẻ Head: Giữa cặp thẻ <head> và </head> : thông tin về tiêu
đề, địa chỉ nền, styles, meta, font nền, …
Thông tin khai báo trong thẻ Head không được thểhiện ra trong nội dung trang Web.
VD :<head>
• <title> Tieu de trang Web </title>
• <link rel="stylesheet" type="text/css“ href="mystyle.css">
• <meta name="keywords" content="HTML">
• </head>
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông21
CÁC THẺ CƠ BẢN
![Page 22: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/22.jpg)
Thẻ Title
Cung cấp tên tiêu đề trên thanh tiêu đề của trình
duyệt khi thể hiện trang Web.
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông22
CÁC THẺ CƠ BẢN
![Page 23: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/23.jpg)
Thẻ Meta:
Cung cấp thông tin tổng quát về trang Web cho các
Search Engine lưu trữ.
Mô tả :
• <meta name="description" content=“Trang chu cua Website Khoa
CNTT – Truong DHCT">
Từ khóa tìm kiếm :
• <meta name="keywords" content=“University, Cantho,
Computer, Information Technology">
Chỉ định khi hiện trang Web: mở trang Web URL sau 5s
• <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn">
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông23
CÁC THẺ NÂNG CAO
![Page 24: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/24.jpg)
Thẻ Style
Xu hướng dùng Style Sheet (CSS) để định dạng
chung cho nhiều trang Web trong Website,
Có thể định dạng trong file ở ngoài,VD : <link rel="stylesheet" type="text/css“ href=“abc.css">
Có thể khai báo bên trong phần <head> trang Web,VD : <style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
Có thể sử dụng thẳng trong nội dung trang Web.VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p>
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông24
CÁC THẺ NÂNG CAO
![Page 25: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/25.jpg)
Thẻ script
Có thể nhúng vào trang Web những đoạn Script
viết bằng các ngôn ngữ như : JavaScript, VBScript,
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông25
CÁC THẺ NÂNG CAO
![Page 26: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/26.jpg)
Thẻ Font
Định font cho cả trang Web bằng thẻ <basefont>
Định font cho 1 đoạn văn bản bằng thẻ <font>
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông26
CÁC THẺ NÂNG CAO
![Page 27: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/27.jpg)
Thẻ Font
Thường sử dụng thuộc tính style để định dạng font
thay cho các tag cũ.
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông27
CÁC THẺ NÂNG CAO
![Page 28: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/28.jpg)
Nhiều thẻ HTML được định nghĩa,
Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ
cũ bằng các định dạng khác,
Có thể tham khảo từ : http://www.w3.org
Hiện nay, còn nhiều định dạng khác được sử dụng rất
nhiều trên Internet, chẳng hạn như :
• XML, XHTML
• WML
• Các kỹ thuật DHTML, CSS, ...
Ngày nay, thường sử dụng thuộc tính style để định dạng
font thay cho các tag cũ.
24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông28
KẾT LUẬN
![Page 29: Chuong3b html-091030201401-phpapp02](https://reader034.vdocuments.site/reader034/viewer/2022052621/557dab23d8b42a467c8b4be3/html5/thumbnails/29.jpg)