Kỹ năng lập trình web bct

Để việc trao đổi thông tin trong mạng Internet thực hiện được, mỗi máy tính trong mạng cần phải được cấp một định danh Identify để phân biệt các máy với nhau, mỗi máy được gán cho một nh

Trang 1

MỤC LỤC

Chương 1 5

GIỚI THIỆU VỀ MẠNG INTERNET 5

& CÁC DỊCH VỤ CỦA MẠNG INTERNET 5

I SƠ LƯỢC VỀ MẠNG INTERNET 5

I.1 Lịch sử mạng Internet 5

I.2 Một số khái niệm liên quan đến mạng Internet 5

II CÁC DỊCH VỤ CƠ BẢN CỦA MẠNG INTERNET 7

II.1 World Wide Web 7

II.2 Thư điện tử (E-mail) 9

II.3 Truyền tải tệp tin (FTP) 10

II.4 Tán gẫu (Chat) 10

II.5 Điện thoại Internet 10

III- MỘT SỐ WEBSITE HỮU ÍCH 10

III.1 Tra cứu thông tin 10

III.2 Thư viện phần mềm 10

III.3 Nghiên cứu, khoa học, giáo dục 10

Chương 2 11

HTML VÀ CÁC THẺ CƠ BẢN 11

I GIỚI THIỆU VỀ HTML 11

II CẤU TRÚC MỘT TƯ LIỆU HTML 11

II.1 Thẻ HTML 11

II.2 Cấu trúc một tư liệu HTML 12

III MỘT SỐ THẺ CƠ BẢN 12

III.1 Các thẻ trong phần đầu của tư liệu HTML 12

III.2 Các thẻ trong phần thân của tư liệu HTML 14

Chương 3 23

BẢNG, KHUNG VÀ BIỂU MẪU 23

I BẢNG (TABLE) 23

I.1 Vai trò của bảng trong thiết kế web 23

I.2 Tạo bảng 23

I.3 Một ứng dụng của bảng 25

II FRAME (Khung) 25

II.1 Cơ bản về frame 26

II.2 Thẻ FrameSet 26

II.3 Thẻ Frame 27

II.4 Thẻ Iframe (Inline Frame) 27

III.FORM (biểu mẫu) 28

III.1 Các thuộc tính của thẻ <FORM> 28

III.2 Thẻ <INPUT> 28

III.3 Các trường văn bản (text field) 29

III.4 Nút bấm (button), hộp kiểm (check box) và nút chọn lựa 30

III.5 Các phần tử lựa chọn (Selection) 33

IV NHỮNG LỜI KHUYÊN CỦA W3C 34

V TỔNG KẾT CHƯƠNG 34

Chương 4 36

Trang 2

CSS 36

I GIỚI THIỆU VỀ CSS 36

I.1 Lịch sử: 36

I.2 Những thuận lợi và trở ngại khi sử dụng CSS: 36

II CÚ PHÁP CSS 37

II.1 Sử dụng CSS trong tư liệu HTML 37

II.2.Xếp chồng và Kế thừa 39

II.3 Kiểu động 40

II.4 Lớp (Class) 41

II.5 ID (ID Selector) 43

II.6 Tạo thẻ HTML tùy biến 44

III SỬ DỤNG CSS 46

III.1 Đơn vị đo trong CSS 46

III.2 Định dạng văn bản với bảng kiểu 46

III.3 Định dạng phần tử theo kiểu dáng 47

III.4 Trình bày trang theo bảng kiểu 49

III.5 Định dạng những phần tử khác của trình duyệt 50

IV TỔNG KẾT CHƯƠNG 53

Chương 5 54

CĂN BẢN VỀ JAVASCRIPT 54

I GIỚI THIỆU 54

II CĂN BẢN VỀ JAVASCRIPT 54

II.1 Bộ chữ viết Từ khóa Tên 54

II.2 Kiểu dữ liệu 55

II.3 Hằng và Biến 56

II.4 Các toán tử 57

II.5 Các biểu thức quy tắc (Regular Expressions) 59

III CÁC CÂU LỆNH CỦA JAVASCRIPT 61

III.1 Câu lệnh 61

III.2 Câu lệnh điều kiện 62

III.3 Lệnh lặp 63

III.4 Câu lệnh try-catch 65

III.5 Câu lệnh throw 65

IV CĂN BẢN VỀ HÀM TRONG JAVASCRIPT 65

IV.1 Định nghĩa hàm 65

IV.2 Lời gọi hàm 66

IV.3 Những tính chất của hàm 67

V CÁC ĐỐI TƯỢNG JAVASCRIPT 67

V.1 Các đối tượng của người sử dụng định nghĩa 67

V.2 Các đối tượng dựng sẵn trong JavaScript 68

V.3 Các hàm định nghĩa trước trong JavaScript 72

V.4 SỬ DỤNG CÁC SCRIPT TRONG TỆP TIN TƯ LIỆU HTML 72

VII XÂY DỰNG SCRIPT CHẠY TRÊN NHIỀU TRÌNH DUYỆT 73

VIII TỔNG KẾT CHƯƠNG 74

Chương 6 75

MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT 75

I KHÁI NIỆM 75

II CÁC ĐỐI TƯỢNG CỦA MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT 75

II.1 Đối tượng window 76

Trang 3

II.2 Mô hình sự kiện (Event model) 77

II.3 Đối tượng history 80

II.4 Đối tượng location 80

II.5 Đối tượng navigator 81

II.6 Đối tượng screen 81

II.7 Đối tượng document 81

III DHTML (Dynamic HTML) 89

III.1 Khái niệm 89

III.2 Các phương pháp truy cập đến một đối tượng trên tư liệu HTML 89

III.3 Các đặc điểm của DHTML 90

IV TỔNG KẾT CHƯƠNG 93

Chương 7 95

CĂN BẢN VỀ PHP 95

I GIỚI THIỆU 95

II CĂN BẢN PHP 95

II.1 Yêu cầu 95

II.2 Thông dịch trang PHP 95

II.3 Kịch bản (script) 96

II.4 Ghi chú trong PHP 97

II.5 In kết quả trên trang PHP 97

III CÚ PHÁP PHP 98

III.1 Khai báo biến 98

III.2 Kiểu dữ liệu 99

III.3 Kiểu Array 100

III.4 Kiểu đối tượng 102

III.5 Tầm vực của biến 102

IV HẰNG TRONG PHP 103

IV.1 Khai báo và sử dụng hằng 103

IV.2 Kiểm tra hằng 104

V TOÁN TỬ VÀ BIỂU THỨC TRONG PHP 104

V.1 Toán tử trong PHP 104

V.2 Các biểu thức cơ bản trong PHP: 106

VI TỔNG KẾT 108

Chương 8 109

XỬ LÝ FORM – XỬ LÝ FILE 109

I PHƯƠNG THỨC GET VÀ POST 109

I.1 Phương thức GET 109

I.2 Phương thức POST 109

II QUY TRÌNH LÀM VIỆC FILE TRONG PHP 110

II.1 Đóng, mở 1 file trong PHP 110

II.2 Đọc và ghi file trong PHP 111

III TỔNG KẾT 112

Chương 9 113

XỬ LÝ CHUỖI – MẢNG – DATETIME 113

I XỬ LÝ CHUỖI 113

I.2 Định dạng chuỗi 113

I.2 Hàm chuyển đổi chuỗi 114

I.3 Hàm tách hay kết hợp chuỗi 114

I.4 Tìm kiếm và thay thế chuỗi 116

Trang 4

II LÀM VIỆC VỚI MẢNG DỮ LIỆU 117

II.1 Mảng một chiều 117

II.2 Mảng hai chiều 118

III KIỂU DATETIME 119

IV KẾT LUẬT 121

Chương 10 122

MySQL 122

I GIỚI THIỆU CƠ SỞ DỮ LIỆU MYSQL 122

II KIỂU DỮ LIỆU CỦA CƠ SỞ DỮ LIỆU MYSQL 122

II.1 Loại dữ liệu numeric 122

II.2 Loại dữ liệu Datet and Time 123

II.3 Loại dữ liệu String 123

III PHÁT BIỂU SQL 124

III.1 Nhóm phát biểu SQL 124

III.2 Phát biểu SQL thao tác dữ liệu 124

III.3 Các hàm thông dụng trong MySQL 130

III.4 Phát biểu SQL dạng Select với AS 132

III.5 Phát biểu SQL dạng Select với Limit N , M 133

III.6 Phát biểu SQL dạng SELECT với DISTINCT 134

III.7 Nhập dữ liệu bằng phát biểu SQL dạng Insert 135

III.8 Phát biểu SQL dạng UPDATE 137

III.9 Phát biểu SQL dạng DELETE 138

IV PHÁT BIỂU SQL DẠNG JOIN 138

IV.1 Khái niệm về quan hệ 138

IV.2 Khái niệm về mệnh đề JOIN 139

IV.3 Mệnh đề INNER JOIN 140

IV.4 Mệnh đề Left Join 142

IV.5 Mệnh đề Right Join 143

IV.6 Phép toán hợp (union) 143

IV.7 SQL dạng thay đổi và định nghĩa cơ sở dữ liệu 144

V KẾT CHƯƠNG 147

Chương 11 148

PHP VÀ DATABASE 148

I KẾT NỐI CƠ SỞ DỮ LIỆU 148

II THÊM MẨU TIN 148

III CẬP NHẬT MẨU TIN 150

IV XOÁ MẨU TIN 151

V TRUY VẤN DỮ LIỆU 152

VI LIỆT KÊ DỮ LIỆU 153

VIII CẬP NHẬT NHIỀU MẨU TIN 158

IX KẾT LUẬN 159

Trang 5

Chương 1

GIỚI THIỆU VỀ MẠNG INTERNET

& CÁC DỊCH VỤ CỦA MẠNG INTERNET

I SƠ LƯỢC VỀ MẠNG INTERNET

I.1 Lịch sử mạng Internet

Mạng Internet là mạng máy tính lớn nhất trên toàn cầu Internet hay gọi tắt là NET được xem

là mạng của các mạng (network of networks) dùng để trao đổi thông tin trên toàn thế giới, còn gọi là Siêu xa lộ thông tin (Information Superhighway)

Ngày nay mạng Internet là một mạng công cộng kết nối hàng trăm triệu máy tính trên toàn thế giới Về mặt vật lý, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của mạng viễn thông công cộng; về mặt kỹ thuật, mạng Internet sử dụng tập các giao thức TCP/IP do Vinton Gray Cerf và Robert Kahn xây dựng từ năm 1973 tại Trường Đại học Stanford Hai mô phỏng của công nghệ mạng

Internet là Intranet và Extranet

Từ năm 1969, Bộ Quốc phòng Mỹ đã xây dựng mạng ARPANET, (ARPA là từ viết tắt của

Advanced Research Projects Agency), ý tưởng ban đầu của mạng Arpanet là dùng để trao đổi thông

tin giữa các cơ quan chính phủ và các trung tâm nghiên cứu của các trường đại học Mỹ Điều đặc biệt

ở mạng này là mạng vẫn hoạt động khi một phần của nó bị phá hủy trong các trường hợp chiến tranh hoặc thiên tai Sau đó mạng ARPANET chia làm hai mạng:

 MILINET chỉ dùng cho các mục đích quân sự

 Một mạng mới gọi là ARPANET dùng cho các mục đích phi quân sự

Đến năm 1972, một mạng khác là CSNET (Computer Science Research Network) được nối

với ARPANET CSNET được tạo ra để liên kết các mạng độc lập khác Tại thời điểm này được xem

là ngày khai sinh ra mạng INTERNET Vào năm 1980, tổ chức National Science Foundation đã xây

dựng mạng NSFNET để liên kết đến các mạng chính, đây là mạng có tốc độ cao, dùng để kết nối các siêu máy tính trung tâm của NSF

Công nghệ mạng ngày càng phát triển, nhiều mạng mới được hình thành và kết nối với mạng ARPANET, CSNET và NSFNET Tất cả mạng này kết nối với nhau và trở thành một mạng có tên gọi

là INTERNET Cuối cùng hai mạng Arpanet và Csnet ngưng họat động, mạng Nsfnet trở thành mạng chính nối kết các mạng khác trên Internet

(Có thể tham khảo về lịch sử Internet tại các địa chỉ : http://support.vnn.vn, tài liệu bằng Tiếng Việt; http://www.isoc.org/internet/history, đây là web site của tổ chức Internet Society do

V.Cerf sáng lập từ năm 1992, có nhiều thông tin phong phú về Internet)

Vint Cerf , nhà phát minh giao thức TCP/IP Vint Cerf được xem như là một trong những nhà khoa học lỗi lạc cuối thế kỷ XX Năm 1973, trong khi làm việc tại DARPA với Bob Kahn, Cerf đã phát triển giao thức TCP/IP, đây là giao thức chuẩn trên mạng máy tính để truyền/nhân thông tin trên Internet, Ông được xem như là cha đẻ của mạng Internet Hiện nay ông là Chủ tịch ICANN (Internet Corporation For Assigned Names and Numbers,Tổ chức mã số và tên miền quốc tế) một pháp nhân phi lợi nhuận có trụ sở ở Marina Del Ray, California (Mỹ)

Nguồn: http://www.icann.org

I.2 Một số khái niệm liên quan đến mạng Internet

I.2.1 Kiến trúc Client-Server

Khái niệm Client-Server đề cập đến mối quan hệ logic giữa các máy tính trên mạng Trong mạng client-server các máy tính được chia thành các máy server và các máy client, các quá trình xử lý được phân bổ cho cả máy server lẫn máy client, với mỗi máy có một vai trò chuyên biệt

Trang 6

Server là máy tính chuyên dụng, có khả năng xử lý mạnh, lưu trữ lớn Chức năng chủ yếu của server là quản lý và lưu giữ các nguồn tài nguyên mà một máy tính khác trên mạng có thể truy cập, ngoài ra server có nhiệm vụ kiểm sóat sự truy cập và bảo mật dữ liệu Tùy theo chức năng xử lý , ta

có các loại : file server, web file server, database server, mail server, Server chạy trình chủ (server

program)

Client là máy tính truy cập dữ liệu từ server, client chạy trình khách (client program) chịu trách nhiệm về giao diện người sử dụng, và một số quá trình xử lý Client là các máy tính thông thường được kết nối với Server qua mạng Client gởi các yêu cầu của người sử dụng đến server, server xử lý yêu cầu và gởi kết quả về cho client Mạng Internet là một mạng có kiến trúc client-server

Mô hình kiến trúc client-server

Kiến trúc client-server có nhiều ưu điểm, nhất là tính bảo mật và an toàn thông tin nhờ vào các tính năng:

 Các tài nguyên mạng được quản lý tập trung

 Có thể tạo ra các cấp kiểm soát chặt chẽ trong việc truy cập file dữ liệu

 Giảm nhẹ việc quản lý trên các máy client

 Bảo mật và backup dữ liệu

 Có thể mở rộng hệ thống khi cần

Tuy nhiên mô hình này cũng có nhược điểm: giá thành cao, server trở thành điểm tối yếu của

hệ thống, có nghĩa là khi server bị hư hỏng thì toàn bộ hệ thống không thể họat động

I.2.2 Địa chỉ IP

Các máy tính trong mạng Internet/ Intranet trao đổi thông tin với nhau theo chuẩn truyền

thông gọi là giao thức TCP/IP Đây là giao thức cung cấp dịch vụ truyền các gói dữ liệu (IP

datagrams) theo địa chỉ IP bằng cách chọn đường (routing) trong mạng thông qua cổng kết nối

(geteway) Để việc trao đổi thông tin trong mạng Internet thực hiện được, mỗi máy tính trong mạng cần phải được cấp một định danh (Identify) để phân biệt các máy với nhau, mỗi máy được gán cho một nhóm số gọi là địa chỉ IP (IP Address) hay nói cách khác địa chỉ IP dùng xác định đối tượng nhận

và gởi thông tin trên Internet Địa chỉ IP gồm 4 nhóm số thập phân có giá trị từ 0 đến 255, phân các nhau bằng dấu chấm (.)

Ví dụ : 203.162.115.53 là địa chỉ IP của Web server của Đại học Đà Nẵng

Trên thực tế, địa chỉ IP hiện tại (IP version 4) có 32 bit chia thành 4 octet (mỗi octet có 8 bit),

các octet tách biệt nhau bằng dấu chấm (.)

Ví dụ : 11001011 01100010 01010011.00110101

Để tiện việc quản lý và phân phối địa chỉ, người ta chia các địa chỉ IP thành 3 phần :

Class ID Network ID Host ID

Các địa chỉ IP được chia thành 5 lớp tùy theo giá trị của 3 byte đầu tiên: A,B,C,D,E Riêng lớp D và E, Tổ chức Internet đang để dành cho các mục đích khác, không phân phối Địa chỉ IP tự nó không chứa thông tin về mô tả mạng, subnet đi kèm với mỗi địa chỉ cung cấp thông tin này

Trang 7

Class Vùng địa chỉ lý thuyết Số mạng sử dụng

tối đa

Số máy chủ trên từng mạng

203.162.7.0 Ở Việt Nam, cơ quan VNNIC (Vietnam Internet Network Inforrmation Center) thuộc Bộ Bưu chính-Viễn thông chịu trách nhiệm quản lý tên miền, địa chỉ IP (xem http://www.vnnic.net.vn)

Do sự cạn kiệt địa chỉ IP theo IPv4(sử dụng 32 bit); hiện nay tại nhiều nước đã dùng IPv6 (sử dụng 128 bit) để cấp phát địa chỉ IP

I.2.3 Tên miền (Domain name)

Do địa chỉ IP là một dãy số, không có tính gợi nhớ, trong mạng Internet người ta thường sử

dụng Dịch vụ tên miền (Domain Name Service) cho các máy trong mạng Mỗi tên miền có dạng :

Trong đó : Host là tên máy, Domain là tên của một tổ chức mạng lớn, như các Cty đa quốc

gia, các quốc gia, Subdomain là tên một tổ chức nhỏ hơn trong domain Ví dụ : các tên miền www.ud.edu.vn, www.yahoo.com, www.google.com

Tên miền cấp 1 bao gồm các mã quốc gia của các nước tham gia Internet được quy định bằng

2 chữ cái theo tiêu chuẩn ISO-3166, ví dụ Việt Nam là vn, Nhật bản là jp, Pháp là fr, Anh quốc là uk, CHLB Nga là ru và 5 lĩnh vực dùng chung toàn cầu:

.com : (commercial) công ty thương mại

.edu : (education) các trường học, tổ chức giáo dục

.net : (network) các mạng

.int : (international organizations) các tổ chức quốc tế

.org : (other organizations) các tổ chức khác

II CÁC DỊCH VỤ CƠ BẢN CỦA MẠNG INTERNET

II.1 World Wide Web

II.1.1 Lịch sử

World Wide Web (gọi tắt là Web) là hệ thống các server trên Internet hỗ trợ riêng cho những

tư liệu được định dạng bằng ngôn ngữ đánh dấu gọi là HTML (HyperText Markup Language) Những

tư liệu này cho phép liên kết đến các tư liệu khác như các tệp tin đồ họa, âm thanh, video Chú ý rằng không phải tất cả các server trên Internet là World Wide Web, do vậy Web không đồng nghĩa với Internet, tuy rằng Web là một tập con của Internet, là một ứng dụng quan trọng nhất trên Internet

(Theo http://www.webopedia.com )

Web ra đời từ một dự án nghiên cứu tại Trung tâm nghiên cứu hạt nhân Châu Âu (CERN, Thụy Sĩ) vào năm 1989 do Berners-Lee lãnh đạo Dự án này phát triển giao thức truyền và nhận các tệp tin siêu văn bản theo mô hình client-server gọi tắt là HTTP (HyperText Transfer Protocol), sau đó công bố thư viện chương trình nguồn của giao thức này cho các nhà phát triển khác để xây dựng các phần mềm duyệt Web

Web dựa trên ba cơ chế để có thể cho phép người sử dụng truy cập đến các nguồn tài nguyên trên web, đó là:

 Giao thức (Protocols) HTTP

Host.Subdomain.Domain

Trang 8

 Địa chỉ (Address) còn gọi là URL (Uniform Resourse Locators), được sử dụng để định danh

(identify) các trang web và các nguồn tài nguyên trên web

Một URL cơ bản gồm một scheme (chỉ đến giao thức được sử dụng), tên máy chủ, đường dẫn và

tên tệp tin như sau:

Scheme Tên Web server Đường dẫn Tên tệp tin

Trong trường hợp URL kết thúc với dấu gạch xéo tới (slash, /) mà không có tên tệp tin nằm sau, sẽ chỉ đến tệp tin mặc định trong thư mục cuối cùng (trong ví dụ này là web) Một số tệp tin mặc định là index.htm hay default.htm

Các scheme (sơ đồ) khác như: ftp để truyền tệp tin trên mạng, gopher dùng để tìm thông tin, news

để gởi và nhận tin trong nhóm, mailto để gởi email, file để dẫn đến một tệp tin trong đĩa cứng cục bộ

 HTML là ngôn ngữ chủ đạo để xây dựng các trang web

Tổ chức World Wide Web Consortium (W3C) do Tim Berners-Lee lãnh đạo, có nhiệm vụ phát triển và chuẩn hóa các công nghệ về Web Website của tổ chức này là www.w3c.org

Berners - Lee bên phần mềm

Web Browser đầu tiên,

trước cả Netscape

TIỂU SỬ TIM BERNERS-LEE

Sinh ngày 9-6-1955 tại London

1976 tốt nghiệp Đại học Oxford, Anh quốc

1980 làm việc cho CERN, viết “Enquire”

1989 đề xuất dự án siêu văn bản toàn cầu gọi là “World Wide Web”

1991 web khởi sự hoạt động trên Internet

1993 Trường đại học Illinois tung ra phần mềm browser Mosaic

1994 gia nhập MIT, lãnh đạo tổ hợp W3

II.1.2 Các khái niệm liên quan:

Webpage : trang web, trên www thông tin được hiển thị dưới dạng trang web , một webpage

có thể chứa đựng văn bản đã được định dạng, hình ảnh, âm thanh, video Một trang web còn chứa các

siêu liên kết (hyperlink), siêu liên kết cho phép người sử dụng truy cập đến một trang web khác trong

cùng website hay trên các website khác

HTML Document: là một tệp tin văn bản mã ASCII được viết bằng ngôn ngữ HTML, tệp tin

tư liệu HTML được gọi là mã nguồn (source code) của một webpage Tệp tin tư liệu HTML có phần

mở rộng htm hay html

Website : Một vị trí trên WWW, mỗi wesite có một trang chủ (home page) là trang web đầu

tiên mà người sử dụng gặp đầu tiên khi truy cập vào website, trang chủ đóng vai trò như là mục lục chỉ đến các tư liệu khác trong website hay địa chỉ của các website liên quan Một website còn chứa các thư mục, các tệp tin, các trang web khác Website của các tổ chức hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này

Web browser: Trình duyệt web, là một phần mềm ứng dụng dùng để định vị và hiển thị các

trang web.Có 2 loại web browser: trình duyệt dựa trên văn bản, chỉ hiển thị các thông tin dưới dạng văn bản như Lynx; trình duyệt đồ họa, hỗ trợ hypermedia như âm thanh, hình ảnh, video các web

Trang 9

browser đồ họa thông dụng hiện nay: Microsoft Internet Explorer, Netscape Navigator, Mozilla

Firefox, Opera

Web browser còn gọi là web client

Web editor: trình soạn thảo web, là một phần mềm soạn thảo các trang web

Các phần mềm FrontPage, Dreamwever là các phần mềm soạn thảo trang web một cách trực quan.Các phần mềm Edit Plus, HTML Kit cho phép trực tiếp tạo ra các tệp tư liệu HTML

Search Engines :Máy tìm kiếm , là chương trình tìm kiếm các tư liệu trên WWW dựa và các

từ khóa và trả về danh sách các tư liệu phù hợp với từ khóa Các máy tìm kiếm họat động dựa vào các Spider (con nhện) để có thể thu thập các tư liệu cần thiết, một số máy tìm kiếm khác sử dụng Indexer (người lập mục lục) dựa trên các từ chứa trong các tư liệu

Web portal: một trong những ứng dụng web quan trọng hiện nay, nhất là ứng dụng trong

lĩnh vực chính phủ điện tử Web portal còn được gọi là cổng thông tin (portal) bao gồm một mãng các nguồn tài nguyên và dịch vụ như e-mail, forums, máy tìm kiếm và các dịch vụ trực tuyến (online

service) khác Web portal đầu tiên trên thế giới là AOL; tại Việt Nam các web portal là:

www.hanoi.gov.vn (cổng thông tin của UBND thành phố Hà Nội), www.hochiminhcity.gov.vn (cổng

thông tin của UBND thành phố Hồ Chí Minh), www.egov.gov.vn (cổng thông tin của Chính phủ Việt

Nam)

Những ứng dụng web (web-base applications) là những chương trình ứng dụng dựa trên cơ

sở Internet và công nghệ web: E-commerce, E-learning, E-Supermarket, On-line courses

Webblog (còn gọi là blog) là một ứng dụng dựa trên nền tảng của web, còn gọi là trang web

cá nhân dùng để tạo nhật ký trực tuyến, có thể trao đổi thông tin Ngày nay có nhiều hãng phần mềm cũng đã xây dựng các server phục vụ xây dựng webblog

Ví dụ : http://www.blogvietnam.net là một webblog

RSS là từ viết tắt của Really Simple Syndication (dịch vụ cung cấp thông tin cực kỳ đơn giản),

dịch vụ này cho phép người sử dụng tìm kiếm thông tin cần quan tâm và đăng ký để được gửi thông tin đến trực tiếp Ngày nay khối lượng web site ngày càng nhiều, việc duyệt web để tìm kiếm thông tin cần thiết khá mất thời gian, giờ đây ta có thể sử dụng tiện ích này thông qua một dịch vụ cung cấp thông tin mới gọi là RSS

Hiện nay, dịch vụ RSS ngày càng phổ biến Các trang web như BBC, CNN, New York Times,

Tuổi trẻ, Thanh niên, Người lao động đang cung cấp RSS Để sử dụng dịch vụ này ta cần phải có

một phần mềm đọc và hiển thị tệp tin RSS (viết bằng ngôn ngữ XML), các phần mềm đó gọi là RSS Feed hoặc New Feed Hiện tại có một số trình duyệt đã tích hợp sẵn tính năng đọc tin RSS như Firefox, Opera, Safati Nếu dùng Microsoft Internet Explorer có thể cài đặt một plug-in hỗ trợ đọc

RSS như Pluck (tải từ http://www.pluck.com)

Web server và địa chỉ của web server : các trang web mà người sử dụng có thể truy cập

được trên Internet được lưu trữ trên một máy tính đặc biệt được gọi là Web server Mỗi web server được định danh bằng một địa chỉ có dạng:

www.tenwebsite.kiểuwebsite.mãquốcgia

Riêng đối với các web server đặt tại Mỹ không có mã quốc qua Một địa chỉ website được xem như là một URL

II.2 Thư điện tử (E-mail)

E-mail là dịch vụ trao đổi thông điệp điện tử bằng mạng viễn thông Các thông điệp này thường được mã hóa dưới dạng văn bản ASCII, tuy nhiên ta có thể gởi những tệp tin hình ảnh, âm thanh, chương trình kèm theo e-mail Giao thức thường dùng để nhận và gửi e-mail là SMTP (Simple Mail Transfer Protocol) và POP3 (Post Office Protocol version 3) Để sử dụng dịch vụ e-mail cần phải có:

 Đia chỉ email, có dạng name@domainname, ví dụ education@dng.vnn.vn

 Địa chỉ email được quản lý bởi mail server: như Yahoo, HotMail

 Tên đăng nhập (Login name) và mật khẩu (password) truy cập hộp thư (mail box)

Trang 10

II.3 Truyền tải tệp tin (FTP)

FTP (File Transfer Protocol) là dịch vụ dùng để trao đổi tệp tin giữa các máy tính trên mạng

Internet với nhau FTP thường được dùng để tải các tệp tin từ người thiết kế Web lên các Web server,

nó cũng được dùng để tải các tệp tin từ các máy chủ trên mạng

Các chương trình FTP: WS_FTP, CuteFTP, FTP Explorer

II.4 Tán gẫu (Chat)

Dịch vụ chat cho phép người sử dụng có thể trao đổi trực tuyến với nhau qua mạng Internet,

nội dung trao đổi có thể là văn bản, lời nói

Các phần mềm hỗ trợ chat thông dụng hiện nay: AOL Instant Messenger, Yahoo Messenger

II.5 Điện thoại Internet

Còn được gọi là ứng dụng VoIP (Voice over Internet Protocol), hiện nay có hai sản phẩm khác nhau, gọi là Internet phone, một sản phẩm của Intel và một của VocalTec Ltd VoIP là một dạng

tổ hợp giữa phần cứng và phần mềm cho phép người sử dụng gọi điện thoại cho nhau qua đường

truyền trung gian là Internet bằng cách gởi các gói dữ liệu tiếng nói (voice data in packets) theo giao

thức IP Các ứng dụng Internet phone: Cooltalk, NetMetting

III- MỘT SỐ WEBSITE HỮU ÍCH

III.1 Tra cứu thông tin

 Các Search Engine: Google (http://www.google.com, http://scholar.google.com), AltaVista (http://www.altavista.com), Yahoo (http://www.yahoo.com), VNSeek (http://www.vnseek.vn)

 Tự điển trực tuyến : Wikipedia (http://en.wikipedia.org) và Webopedia (http://www.webopedia.com)

III.2 Thư viện phần mềm

ZDNet (www.zdnet.com), Cnet(http://download.cnet.com)

III.3 Nghiên cứu, khoa học, giáo dục

 Codeguru (http://www.codeguru.com), MSDN (http://msdn.microsoft.com)

 http://cntt.dhsph.edu.vn: Khoa CNTT Trường ĐHSP Hà Nội

 http://www.is-edu.hcmuns.edu.vn, Khoa CNTT Trường ĐH KHTN-ĐHQG tp HCM

1 Phân biệt các khái niệm Intranet và Internet

2 Site map là gì ? Trong những home page của các website sau, home page nào có liên kết đến site map : http://www.nhandan.org.vn, http://edu.net.vn

3 Nêu những đặc tính của hai trình duyệt mới nhất : Internet Explorer 7.0 và FireFox 3.0

4 Tìm hiểu thêm về khái niệm blog (một trong những dịch vụ web hiện đại, có thể tra cứu thông tin tại http://www.webopedia.com và http://www.wikipedia.com)

5 Tìm hiểu chức năng và website của hai tổ chức VNNIC và ICANN

6 Tại sao nói tên miền là một tài sản (giống như thương hiệu là một tài sản)

7 Cho biết website cá nhân của Donald E.Knuth, tác giả của bộ sách nổi tiếng "Nghệ thuật lập trình

máy tính" (The Art of Computer Programming)

1 Ban điều hành đề án 112; Giáo trình thiết kế và quản trị Web, tổng quan Portal; Hà Nội, 2004

2 Công ty Lạc Việt; Những tính năng cơ bản của hệ thông tin nội bộ- Intranet portal (tài liệu huấn

luyện sử dụng mạng Intranet của ĐHĐN), 2004

3 Tìm hiểu về Intranet và Internet, http://support.vnn.vn, 2005

Trang 11

tả tài liệu tổng quát SGML (Standard Generalized Markup Language) do hãng IBM đề xướng từ năm

1960 HTML không phải là một ngôn ngữ lập trình, nó cung cấp các chỉ thị định dạng để phục vụ cho

việc trình bày văn bản và các đối tượng khác như hình ảnh, video, các plug-in

Để tham khảo tất cả các thẻ của phiên bản HTML 4.01, là phiên bản HTML mới nhất được chuẩn hóa vào năm 1999 bởi W3C, có thể tìm trong hai địa chỉ có uy tín sau :

Trang World Wide Web Consortium HTML Specifications (đặc tả ngôn ngữ HTML của tổ

chức W3C): http://www.w3.org/TR/html401/

Trang Web của W3Schools, tại web site này ta có thể tìm thấy tất cả các hướng dẫn tự học về

thiết kế web đựa trên nền tảng của HTML, xHTML, XML và WAP: http://www.w3schools.com/html/

Xu thế phát triển của các ngôn ngữ trên Web đang dần nghiêng về ngôn ngữ XML

(eXtensible Markup Language), cũng là một ngôn ngữ con của SGML XML là một ngôn ngữ mô tả

cấu trúc dữ liệu trên Web, cho phép người sử dụng xây dựng các thẻ riêng của mình, một trong những

ứng dụng quan trọng của XML là chuyển đổi dữ liệu giữa các ứng dụng để trao đổi thông tin trên nền

của Web, khác với HTML là ngôn ngữ trình bày dữ liệu trên Web

II CẤU TRÚC MỘT TƯ LIỆU HTML

Tư liệu HTML (HTML Document) là một tệp tin văn bản mã ASCII được viết bằng ngôn

ngữ HTML, tệp tin tư liệu HTML được gọi là mã nguồn (source code) của một web page Tệp tin tư liệu HTML có phần mở rộng htm hay html (Các webserver dùng hệ điều hành UNIX bắt buộc phần

mở rộng tư liệu HTML phải là html) Phiên bản HTML hiện nay là HTML 4.01 do W3C xây dựng

đặc tả, tuy nhiên có một vài thẻ một trong hai trình duyệt IE và NN không sử dụng

II.1 Thẻ HTML

Các lệnh của HTML được gọi là các thẻ (tag), các thẻ báo cho trình duyệt web cần phải làm điều gì ngoài việc thể hiện văn bản lên màn hình Các thẻ gồm các phần tử đặt trong cặp dấu < và >

Có hai loại thẻ: thẻ chứa (container tag)và thẻ rỗng (empty tag) Các lệnh của HTML có thể viết bằng

ký tự hoa hoặc thường đều được

II.1.1 Thẻ chứa

Gồm một phần tử thẻ mở (openning tag) và một phần tử thẻ đóng (closing tag) Thẻ mở bắt đầu bằng dấu < và tiếp ngay sau là tên thẻ, các thuộc tính được cách nhau bằng một khỏang trắng và cuối cùng là dấu > Thẻ đóng tương tự như thẻ mở chỉ khác một chỗ có dấu / nằm giữa dấu < và tên thẻ Các dữ liệu được đặt giữa thẻ mở và thẻ đóng Các thuộc tính của một thẻ là tùy chọn, được khai báo trong thẻ mở và thuộc tính được bao lại trong cặp dấu nháy kép (") Cú pháp tổng quát như sau:

<tên_thẻ thuộctính1=giátrị1 thuộctính2=giátrị2 >Nội dung </tên_thẻ>

Các ví dụ :

1) <TITLE> Trang Web đầu tay </TITLE>

Thẻ mở là <TITLE>, dữ liệu là Trang Web đầu tay, thẻ đóng là </TITLE>, chú ý rằng thẻ TITLE không có thuộc tính Thẻ này báo cho trình duyệt hiển thị dòng Trang Web đầu tay trên thanh

tiêu đề của cửa sổ trang web

2) <FONT color=”blue” face=".Vn3DH" size="2">Khoa Tin hoc</FONT>

Trang 12

Thẻ mở là <FONT>, các thuộc tính và giá trị được gán cho mỗi thuộc tính được khai báo bên

trong thẻ mở là : thuộc tính color và giá trị blue, thuộc tính size và giá trị 2; dữ liệu là Khoa Tin học;

thẻ đóng là </FONT> Thẻ này báo cho trình duyệt hiển thị dòng Khoa Tin học trên trang web với font “.Vn3DH”, cở 2 (tương đương với font size 10pt), màu xanh

II.2 Cấu trúc một tư liệu HTML

Xem xét một tư liệu HTML sau đây ( trích trang chủ của mạng EDU.NET, Bộ Giáo dục&Đào tạo )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN">

<HTML>

<HEAD>

<TITLE>Education and Training Network</TITLE>

<HTML> < Th ẻ đị nh ngh ĩ a m ộ t t ư li ệ u HTML

<HEAD> < Th ẻ báo hi ệ u b ắ t đầ u ph ầ n đầ u

<!- Các thẻ khác thuộc về phần đầu của tư liệu HTML

</HEAD> < Th ẻ k ế t thúc ph ầ n đầ u t ư li ệ u HTML

<BODY> < Th ẻ báo hi ệ u b ắ t đầ u ph ầ n thân

<!- Nội dung trang Web và các thẻ phần thân của tư liệu HHTM

</BODY> < Th ẻ báo hi ệ u k ế t thúc ph ầ n thân

<HTML> < Th ẻ k ế t thúc m ộ t t ư li ệ u HTML

Để ghi chú trong tư liệu HTML ta để nội dung ghi chú trong cặp ký hiệu <!- và > Ví dụ:

<!- Đây là trang web thử nghiệm > Trình duyệt sẽ bỏ qua mà không thông dịch nội dung này

Trang 13

Đây là loại thẻ rỗng, hỗ trợ việc bổ sung thông tin về trang web, thẻ này cho phép ta tự do đặt

nhiều thông tin vào liệu HTML Các thuộc tính của thẻ này xác định một cặp name/value kết hợp với

tư liệu HTML, trong nhiều trường hợp, các giá trị này phục vụ cho web server dùng trong việc xác định kiểu nội dung để gởi đến trình duyệt Sau đây là những cách dùng thông dụng:

Thẻ này quy định bộ mã ký tự Unicode Tiếng việt trong trang Web

Thẻ này xác định thời gian hết hiệu lực của trang web là ngày 31.12.2005

Với hai thẻ này, web server sẽ gởi đến browser phần HTTP header có nội dung bao gồm các

thông tin:

Content-type : text/html

Charset : utf-8

Expires : 31 Dec 05

Thẻ này cung cấp các từ khóa cho các Search Engin tìm thấy trang web, tuy nhiên nhiều Search Engin

có cơ chế tìm kiếm khác, không phụ thuộc vào keywords

Thẻ này cho phép ta đặt liên kết trực tiếp đến một địa chỉ khác, sau khoảng thời gian 5 giây trình duyệt sẽ chuyển sang đọc trực tiếp trang web có địa chỉ nằm trong tham số URL

Thẻ này báo cho trình dụyêt cứ 10 giây thì làm tươi trang web lại một lần

III.1.3 Thẻ <BASE>

Đây là thẻ rỗng, gồm các thuộc tính:

HREF : chỉ định địa chỉ cơ bản cho các mối liên kết là địa chỉ gốc để truy

cập các địa chỉ khác Ví dụ <BASE HREF = ”http://www.ud.edu.vn/scripts”>

TARGET : chỉ định các frame mặc nhiên, hay một cửa sổ để nạp các đối tượng liên kết, các giá trị của thuộc tính TARGET: tên cửa sổ do người sử dụng định nghĩa (hay tên frame), _blank , _self, _top và _parent (Chúng ta sẽ nghiên cứu kỹ cách sử dụng thuộc tính này trong chương II)

Ví dụ: <BASE TARGET=_blank> , thẻ nầy chỉ định mọi đối tượng liên kết được nạp trong một cửa sổ mới

III.1.4 Thẻ <SCRIPT>

Đây là thẻ chứa, dùng để chứa các hàm viết bằng ngôn ngữ kịch bản JavaScript, Jscript hay Vbscript Thuộc tính này có thuộc tính LANGUAGE chỉ ra ngôn ngữ kịch bản được sử dụng trang trang web Ví dụ:

// Khai báo các bi ế n dùng chung, h ằ ng s ố

function Banner(url,pic,pos) {

// Các l ệ nh c ủ a hàm

Trang 14

 TEXT : xác định màu văn bản

Hai thuộc tính trên ít khi được sử dụng, ta dùng kỹ thuật CSS để thay thế trong việc định dạng trang web hiệu quả hơn

 BACKGROUND : xác định ảnh nền của trang web

 TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, BOTTOMMARGIN :

xác định lề của trang Web, đơn vị tính là pixel

Thẻ <P> : Sử dụng cặp thẻ <P> và </P> để chứa một đọan văn bản Khi gặp

thẻ này trình duyệt sẽ tạo ra một dòng mới và tách biệt hai đọan liên tiếp bằng một dòng trống

Thuộc tính của thẻ <P> : ALIGN, các giá trị : "left", "right", "center" và "justify"

Thẻ <BR> : đây là thẻ rỗng để ngắt dòng (break line)

Trang 15

III.2.4 Các đoạn văn bản được định dạng sẵn

Thẻ PRE : đây là thẻ chứa, nhằm hiển thị một đọan văn bản mà người sử

dụng muốn giữ các khoảng cách, xuống dòng như mong muốn (không sử dụng ký tự &nbsp và thẻ

<br>) Ngoài ra, ta có thể sử dụng các thẻ khác để định dạng trang web

Thẻ <XMP> : sử dụng giống như thẻ <PRE>, nhưng có sự khác biệt :

Các thẻ HTML khác không có hiệu lực trong paragraph nằm trong cặp thẻ <XMP>

Trình duyệt hiển thị văn bản theo font mặc đinh

Thẻ đóng </XMP> không tạo xuống dòng

Không sử dụng cho table

Ta thường dùng thẻ <XMP> trong việc minh họa nội dung các thẻ HTML trong trang Web

mà không dùng các ký tự đặc biệt, các tiện ích tạo source HTML dùng kỹ thuật này để cho phép người sử dụng copy các đọan mã HTML và paste vào tư liệu HTML của mình

Size = "n" : xác định độ dày của đường kẻ, tính bằng pixel

Width ="n": xác định chiều dài của đường kẻ, tính bằng pixel hay % độ rộng màn hình

Align = "left" | "center" | "right" : căn lề của đường kẻ

NoShade : Không đổ bóng mờ

Ví dụ :

<BODY>

<CENTER> <B>Hypertext Markup Language </B></CENTER>

Trang 16

<B> Ch ữ đậ m (Bold)

<I> Ch ữ nghiêng (Italic)

<U> Ch ữ g ạ ch d ướ i (Underline)

<UL> : danh sách không có th ứ t ự (unordered lists )

<OL> : danh sách có th ứ t ự (ordered lists)

<DL> : danh sách đị nh ngh ĩ a (definition lists )

Thẻ <UL> và <OL> : Các thuộc tính là TYPE để quy định cách hiển thị của

danh sách, các giá trị của thuộc tính TYPE :

"a" : đ ánh d ấ u th ứ t ự b ằ ng ch ữ th ườ ng

"A" : đ ánh d ấ u th ứ t ự b ằ ng ch ữ in hoa

"i" : đ ánh d ấ u th ứ t ự b ằ ng ch ữ i, ii, iii,

"I" : đ ánh d ấ u th ứ t ự b ằ ng ch ữ I, II, III,

<LI> De muc II.1

<LI> De muc II.2

</OL>

</UL>

Thẻ <DL> : dùng tạo một danh sách định nghĩa hay danh sách từ điển chú

giải Phần thuật ngữ được đánh dấu bằng thẻ <DT> và </DT>, phần giải thích được đánh dấu bằng thẻ

<DD> Cac dinh nghia ca chu giai ve thuat ngu 2 </DD>

<!- Cac thuat ngu khac >

</DL>

III.2.8 Siêu liên kết (Hyperlink) và hình ảnh (Image)

Hyperlink là một lệnh cho phép ta đặt một hotspot (điểm nóng) trên một hypertext của trang web dùng để đi đến một địa chỉ (địa chỉ này có thể là một anchor, một tài nguyên trên web) khi click lên hotspot này

Trang 17

Để chèn một hình ảnh vào trang web, ta sử dụng thẻ <IMG>, đây là thẻ rỗng, thẻ này không tạo sự ngắt dòng.Hầu hết các trình duyệt đều có thể hiển thị các kiểu tệp tin ảnh thông dụng, chủ yếu

ở các dạng GIF, JPG, JPEG Cú pháp :

Các thuộc tính khác:

ALT ="Lời chú thích", dùng để chú thích cho hình ảnh hay ứng dụng liên kết với hình ảnh

(giống như screen tip text) Khi hình ảnh này không hiển thị được trên trang web, thì lời giải thích này

sẽ hiển thị bên cạnh ký hiệu  màu đỏ (nếu là IE) hay (nếu là NN)

HEIGHT, WIDTH = "n" tính bằng pixel hay "n%", quy định kích thứớc ảnh

HSPACE, VSPACE ="n" tính bằng pixel, quy định khỏang trống xung quanh hình ảnh BORDER = "n", quy định đường kẻ bao quanh hình ảnh, giá trị từ 0-6

ALIGN ="left" | "right" | "center"

Ví dụ :

<IMG SRC = "icannlogo.gif" BORDER = "1"

WIDTH = "100" HEIGHT = "60" HSPACE="12" VSPACE="12"

ALIGN="left" ALT="ICANN LOGO">

Chèo lái gu ồ ng máy đ i ề u hành

</P>

Điểm neo (Anchor, trong FrontPage gọi là Bookmark) xác định một vị trí trong trang web

hoặc một một vị trí trong trang web khác mà người sử dụng có thể tham chiếu đến

Để định nghĩa một điểm neo ta sử dụng thẻ <A> với cú pháp như sau:

<A NAME = "#anchor_name"> văn bản </a>, phần nội dung giữa cặp thẻ <a> và </a> trong trường hợp này là không nhất thiết

Tạo một hyperlink để tham chiếu đến một tài nguyên trên web, ta sử dụng thẻ <A> với cú

pháp :

Thuộc tính: TARGET ="Window_name","_blank", "_self", "_top" và "_parent" chỉ nơi hiển thị của trang web chỉ định Thẻ <A> không tạo sự xuống dòng

Ví dụ : Giả sử ta có tệp sub.htm

<!- sub.htm >

<BODY>

<!- N ộ i dung trang web >

<A HREF="top"> V ề đầ u trang </A> <BR> <!- Liên k ế t đế n anchor top

>

<A HREF ="index.htm"> V ề trang ch ủ </A> <!- Liên k ế t đế n trang ch ủ >

<!- N ộ i dung ph ầ n cu ố i >

</BODY>

và index.htm (trang chủ) như sau:

<!- index.htm >

Trang 18

</P>

S ử d ụ ng hình ả nh để t ạ o hyperlink

<!- Các n ộ i dung khác >

Nhận xét : trong ví dụ trên ta thay cho link text là thẻ <IMG> để

hiển thị hình ảnh dùng làm link đến tệp HTML webcourse.htm

Phần tử IMG là một thẻ với thuộc tính USEMAP để tham chiếu đến phần tử MAP sẽ được

dùng

Phần tử MAP chứa các phần tử AREA, mỗi phần tử AREA này giúp xác định vị trí trên bản

đồ ảnh (dùng thuộc tính SHAPE, CORDS) và một liên kết đến một URL

Thuộc tính SHAPE có giá trị là "rect", "circle" hay "polygone" tương ứng với một vùng hình

chữ nhật, hình tròn, đa giác trên bản đồ

Thuộc tính COORDS có các giá trị tùy thuộc vào giá trị

của thuộc tính SHAPE

Đối với hình đa giác thì các giá trị là tọa độ các đỉnh

Đối với vòng tròn thì các giá trị là tọa độ tâm và bán

kính

Việc xác định tọa độ này khá khó khăn nếu thực hiện

không có trợ giúp bằng một trình sọan thảo web trực quan

FrontPage và Dreamwever đều có công cụ tạo bản đồ ảnh rất tốt

Hình bên cạnh minh họa việc tạo một bản đồ ảnh với

phần mềm FrontPage 2000

Chú ý : khi sử dụng hình ảnh cần chú ý đến dung lượng

tệp tin hình ảnh sẽ ảnh hưởng đến tốc độ truyền dữ liệu và hiển

Trang 19

thị hình ảnh và dạng tệp tin hình ảnh mà web hiện đang hỗ trợ (GIF, JPG, JPEG ,BMP, DIB, TIFF, TIP và PCX)

III.2.9 Chèn âm thanh và ảnh động vào trang web

Hầu hết các trình duyệt không hỗ trợ trực tiếp các tệp tin multimedia như các tệp tin âm

thanh, họat hình, video Để xem hoặc chạy các tệp tin này trong môi trường web cần có các ứng dụng

helper Một số ứng dụng helper như FlashMX của Macromedia, RealOnePlayer của RealNetworks

chỉ yêu cầu phần mềm, các sound player đòi hỏi cả phần mềm lẫn phần cứng Sau đây là một số kiểu tệp tin multimedia mà ta sẽ gặp trên các trang web

Các kiểu tệp tin âm thanh có phần mở rộng: WAV, AU, MID, AIFF

Các kiểu tệp tin họat hình, phim có phần mở rộng : AVI, MOV, MPG

Riêng các tệp medie có phần mở rộng RM, vốn là định dạng của RealNetworks không được

hỗ trợ bởi Windows Media Player

Tạo âm thanh nền cho trang web: đây là tính năng chỉ có trong Internet Explorer Cú pháp :

Nhúng tệp multimedia và trang web : ta sử dụng thẻ <EMBED>, đây là loại thẻ rỗng Thẻ

* WIDTH =”n”, HEIGHT = “h” tính bằng pixel, xác định kích cở của form điều khiển

* AUTOSTART= “false” | “true”, để âm thanh không tự động / tự động phát ra khi truy cập đến trang web được nhúng tệp media

* LOOP =”n” để xác định tệp media được tự động mở ra n lần

* LOOP =”true” để mở tệp media cho đến khi ấn nút

Stop

Riêng các tệp media thuộc có phần mở rộng RM có một

vài sự khác biệt, nếu sử dụng RealOnePlayer, thẻ EMBED có cú

pháp cơ bản:

<EMBED scr=”mediafile.rm”

TYPE=”audio/x-pr-realaudio-plugin” >

Nếu bạn sử dụng RealPlayer ,thì việc nhúng tệp media

vào trang web có kỹ thuật tương đối đặc biệt Xem thêm thông

tin về các phương thức truy cập đến các tệp media (dạng streaming và non-streaming) tại địa chỉ:

www.real.com/devzone/library/stream/

III.2.9 Chèn các đối tượng ActiveX và Applet

 ActiveX Control là một kỹ thuật đặc trưng của Microsoft, cho phép người sử dụng một

plug-in để mở một đối tượng nhúng tương thích với công nghệ của Windows, nếu plug-in đó chưa được cài đặt trên client thì nó cho phép người sử dụng download từ web site được chỉ định Để nhúng một ActiveX Control vào trang web, ta sử dụng thẻ <OBJECT> với cú pháp cơ bản:

Trang 20

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/

swflash.cab#version=6,0,29,0"

width="303" height="305">

<embed src="file:///C:/webtest/Clock.swf" quality="high"

Lưu ý rằng việc xác định các CLASSID khá phức tạp, chúng ta cần đến một trình sọan thảo web trực quan như FrontPage hay Dreamwever

 Appelet là những chương trình nhỏ viết bằng ngôn ngữ lập trình Java có thể chạy trong

trình duyệt (với điều kiện trình duyệt hỗ trợ Java; nếu không, ta có thể download và cài đặt phần mềm

Java™ Web Start từ www.sun.com/download/)

Đây là một trong những kỹ thuật web đặt trưng của Sun hiện nay, điểm nổi bật của nó là tính bảo mật cao Để chèn một applet vào trang web ta sử dụng thẻ <APPLET> với cú pháp:

<APPLET code=”applet.class”

WIDTH= "n"

HEIGHT="n"

Your browser does not support Java applets

</APPLET>

Ví dụ : menu điều khiển trang chủ của web site Đại học Đà Nẵng là một applet với mã nguồn

HTML được trích như sau:

< APPLET code = "slidem.class" align = "bottom"

height = "210" width = "150" >

< paramname = "bgcolor" value = "255,255,255" >

< param name = "delay" value = "5" >

< param name = "jumpsize" value = "2" >

OpenCube Inc." >

< param name = "subindent1" value = "10"

</APPLET>

Để xây dựng các applet, có thể tham khảo trong tài liệu "Lập trình Web với ngôn ngữ Java"

của Trần Văn Lăng, nxb Thống kê, 2002

Một trong những kỹ thuật thiết kế web đang được quan tâm hiện nay hiện nay là kỹ thuật tạo

các file Flash với tính đơn giản, dễ xây dựng, tương thích với các trình duyệt IE, NN hơn là viết các

applet

III.2.10 Tạo Marquee

Marquee là một dòng chữ chạy, ta sử dụng thẻ <MARQUEE>, thẻ này vốn là một thẻ độc quyền của

IE, nhưng hiện nay được hỗ trợ bởi FireFox 1.0 và Netscape 8.0 Cú pháp cơ bản như sau:

Trang 21

- Behavior = "scroll" | "slide" | "alternate" ,Kiểu scroll nếu muốn dòng chữ bắt đầu ở cạnh này và biến mất ở cạnh kia của màn hình, kiểu slide nếu muốn bắt đầu ở cạnh này và dừng lại khi dòng chữ chạm vào cạnh kia của màn hình, kiểu alternate nếu dòng chữ bắt đầu ở cạnh này và trượt trở lại khi

dòng chữ chạm vào cạnh kia của màn hình

- Direction =" left" | "right" | "up" | "down", Chỉ định phía dòng chữ sẽ hiện ra Hai giá trị "up" và

"down" thích hợp cho việc tạo ra các marque trôi từ dưới lên được viết bằng JavaScript

- Loop ="n" | "infinite", chỉ số lần dòng chữ chạy qua màn hình

- ScrollAmount="n", chỉ số khoảng trống tính theo pixel giữa mỗi lần dịch chuyển của dòng chuyển

- ScrollDelay="n", xác định thời gian (phần nghìn giây) trước khi dòng chữ xuất hiện trở lại

Các thuộc tính khác: Height, Width, Hspace, Vspace, Align, Bgcolor cũng được sử dụng

Đây có phải là một tư liệu HTML không? và nội dung hiển thị trên cửa sổ trình duyệt là gì ?

3 Cho biết thẻ HTML quan trọng nhất, không có nó thì không thể xây dựng một website được

4 Thẻ MARQUEE vốn là một thẻ độc quyền của IE, nhưng đã được NN chấp nhận từ phiên bản 7.1, hãy sử dụng thẻ này để tạo một đọan quảng cáo gồm các dòng trôi dần từ dưới lên trên

5 Xem xét home page của BKAV (Bách khoa AntiVirus), có liên kết : DownLoad Bkav, (giả sử trình phòng, diệt

virus có tên bkavHome.exe), hãy viết thẻ HTML để khi người sử dụng click vào liên kết sẽ cho phép download tệp chương trình về lưu trữ ở máy client

6 Xem xét trang web sau đây có tên myfirstpage.html, bạn cần phải đưa lên server những file nào để đảm bảo trang web hiển thị đúng như mong muốn:

<HTML><HEAD><TITLE> My First Page </TITLE> </HEAD>

<P> On happy joy I have a page on the web! </P>

<A href="otherpage.html"> Click here for other page </A>

</BODY></HTML>

7 Tạo một trang web liên kết đến các website các trường đại học trong cả nước

1 Nhóm tác giả ELICOM; Ngôn ngữ HTML 4.0; Nxb Thống kê, Hà Nội, 2004

2 Nguyễn Đình Hóa, HTML và Thiết kế trang web, Viện CNTT Đại học quốc gia Hà Nôi, 2001

3 Dave Raggett, Arnaud Le Hord; HTML 4.01 Specification; W3C, 2004

4 Aptech Wordwide; HTML, DHTML and JavaScript; 2004

5 http://academ.hvcc.edu/~kantopet/; last updated April, 2005

Trang 23

Chương 3

BẢNG, KHUNG VÀ BIỂU MẪU

I BẢNG (TABLE)

I.1 Vai trò của bảng trong thiết kế web

Table phục vụ hai chức năng chính trong thiết kết web: trình bày thông tin dưới dạng cột báo chí, quản lý các cách trình bày tư liệu web Với bảng, chúng ta có thể chia trang web thành các vùng khác nhau và trình bày thông tin lên các vùng đó Hiện nay, bảng là công cụ chính để thiết kế các trang web Trong mỗi ô của bảng ta có thể đặt các thông tin như : văn bản, hình ảnh, biểu mẫu (form), đường kẻ ngang, video, hyperlink, đặt biệt là có thể đặt một bảng khác vốn là kỹ thuật thông dụng hiện nay

Table là tập hợp các thông tin hay dữ liệu được sắp xếp trong các cột (column) và dòng (row)

có liên quan với nhau Phần tử cơ bản của bảng là ô (cell)

 Đặt bảng vào giữa trang web : sử dụng thuộc tính ALIGN với giá trị CENTER

 Dàn văn bản xung quanh bảng: sử dụng thuộc tính ALIGN với giá trị LEFT (bảng ở bên

trái văn bản) hoặc RIGHT (bảng ở bên phải văn bản) Đây là kỹ thuật để trình bày ảnh và lời chú thích luôn luôn đi đôi với nhau

clear="left">, <BR clear="right"> hay <BR clear="all">

 Định dạng bảng, ta sử dụng các thuộc tính sau đây:

- Border : xác định độ rộng của đường biên của bảng, có giá trị từ 0-6

- BorderColor: Xác định màu của đường biên của bảng và các ô

- BorderColorLight, BorderColorDark: xác định đường biên màu tô bóng của mỗi ô

Thông thường, để tạo sự hài hòa về màu sắc ta chọn BorderColor có giá trị cùng với BorderColorDark và BorderColorLight cùng tông màu với màu nền trang web

- Bgcolor: xác định màu nền của bảng, giá trị là một tên màu hay một số hexa,

Thuộc tính này không còn được W3C khuyên dùng, thay vào đó bằng bảng kiểu (style sheet)

- Background : xác định ảnh nền của bảng, giá trị là tên một tệp tin hình ảnh

Trang 24

- CellSpacing : xác định khoảng cách giữa các ô của bảng

- CelPadding : xác định khoảng cách nội dung trong mỗi ô tới các dường biên dọc của nó

- Style : đây là một kỹ thuật của CSS mà ta sẽ nghiên cứu ở chương sau, dùng để định dạng nội dung trong mỗi ô như Font color, Font style

Ví dụ :

<HTML>

<HEAD><TITLE>Trung tâm Tin h ọ c ABC</TITLE></HEAD>

1.2.4 Cú pháp và cách sử dụng thẻ <TR> và <TD>

 Thẻ <TR> xác định một phần tử chứa nhiều ô của một dòng, các thuộc tính khai báo trong

thẻ <TR> có tác dụng trên toàn bộ các ô của dòng, nếu các ô không có khai báo gì khác Các thuộc

tính của thẻ <TR> : BgColor, BorderColor, BorderColorDark, BorderColorLight, Align, vAlign

- Align = "left" | "right" | "center", xác định cách căn lề giữa nội dung của các ô so với hai biên dọc của mỗi ô

Trang 25

- vAlign ="baseline" | "bottom" | "middle" | "top", xác định cách căn lề giữa nội dung của các ô so với hai biên ngang của mỗi ô

 Thẻ <TD> có các thuộc tính như thẻ <TR>, ngoài ra thẻ này có các thuộc tính riêng : Width xác định độ rộng của ô, giá trị của thuộc tính này là một số nguyên dương tính bằng pixel hay

tỷ lệ % so với độ động của bảng

Nghiên cứu thêm TFOOT, THEAD, CAPTION, TBODY trong phần bài tập

I.3 Một ứng dụng của bảng

Nhiều trang web hiện nay dùng bảng để thể hiện banner, menu và nội dung từng đề mục được

chọn, ví dụ các trang web của VietNamNet, VNExpress, Tuoitre Online,v.v , ví dụ web site của báo

Tuổi trẻ điện tử, các layout (bố cục) cơ bản sử dụng bảng như sau:

Các nội dung đặt tại mỗi ô của bảng có thể do các kịch bản (script) được viết bằng một ngôn ngữ kịch bản nào đó xác định Đọan mã của trang web được lược trích như sau :

<HTML>

<HEAD>

<TITLE>Tu ổ i Tr ẻ Online</TITLE>

</HEAD>

<TABLE height=100 cellSpacing=0 cellPadding=0 align=center width=100%>

Hiện nay người ta ưa dùng ngôn ngữ kịch bản trình chủ để chèn nội dung vào các ô của table

Vấn đề sẽ được trình bày ở hai chương cuối của giáo trình này

II FRAME (Khung)

Khung là một cửa sổ nằm trong cửa sổ trình duyệt, ta có thể chia cửa sổ trình duyệt thành từng cửa sổ con để hiển thị nhiều trang web cùng một lúc Cách dùng khung thông dụng nhất là đặt menu điều hướng (navigation menu) trên một khung, còn nội dung trên một khung khác, đây là phương pháp thông dụng để tổ chức web site sao cho dễ truy cập và khám phá Khung cũng là công

cụ tốt để xây dựng các giáo trình điện tử do tính dễ thiết kế, bảo trì.Tuy nhiên dùng frame để trình bày trang web có một số trở ngại :

- Frame tuy được hỗ trợ bởi nhiều trình duyệt (IE, NN đều hỗ trợ), nhưng có một số trình duyệt khác và ngôn ngữ XHTML 1.0 không hỗ trợ

- Tốc độ hiển thị chậm, do phải mở nhiều trang web cùng lúc

Trang 26

II.1 Cơ bản về frame

Xây dựng tư liệu frame : là bước đầu tiên để tạo các frame trong trang web, đó là việc tạo ra

một tư liệu frame (frame document) không chứa nội dung, tư liệu này báo cho trình duyệt chia cửa sổ

thành các frame và hiển thị trang web nào trong mỗi frame Cú pháp cơ bản như sau:

<HTML>

<HEAD> <TITLE> FrameSet </TITLE> </HEAD>

<FRAMESET các thuộ c tính c ủ a FrameSet>

<FRAME src="tệ p tin t ư li ệ u HTML" name ="tên frame">

Thuộc tính rows xác định có bao nhiêu cột (mỗi cột là một frame) trong cửa sổ trình duyệt và

độ rộng của mỗi frame Giá trị của thuộc tính rows là một danh sách các độ rộng của các frame tính từ bên trái sang phải, độ rộng này có thể là một giá trị tuyệt đối, tính bằng số pixel hoặc tỷ lệ % so với cửa sổ của trình duyệt, tuy nhiên nên hạn chế sử dụng giá trị tuyệt đối vì độ phân giải mỗi máy của client có thể khác nhau, thông thường ta chỉ gán giá trị tuyệt đối cho độ rộng của frame chứa menu để

cố định độ rộng, hầu hết các trang web sử dụng frame đều làm theo cách này.Ta có thể sử dụng ký hiệu * để chỉ động rộng còn lại của frame cuối cùng Tương tự thuộc tính cols xác định số dòng (mỗi dòng là một frame)

Trong một FrameSet có thể lồng một FrameSet khác

Ví dụ 1: tệp tư liệu frame để chia cửa sổ trình duyệt thành 2 cột:

<FRAME name = fr1 src="menu.html"> Menu Content

</FRAMESET>

Nhận xét: cửa sổ trình duyệt được chia thành 2 cột với độ rộng cột bên trái là 25%, cột bên

phải là phần còn lại (được biểu thi bằng ký hiệu *) của cửa sổ trình duyệt (tức 75%)

Ví dụ 2: tệp tư liệu frame để chia cửa sổ trình duyệt thành 2 dòng, dòng thứ nhì được chia

thành 2 cột

<FRAMESET rows="79,*">

<FRAMESET cols="167,*" name="vbalFrameset">

Trang 27

II.3 Thẻ Frame

Các thuộc tính của thẻ <FRAME> gồm có :

 Name : tên của khung hiện thời, đặt tên sao cho gợi nhớ

 Src: xác định vị trí của tệp tin tư liệu HTML đầu tiên nằm trong khung khi trang web chứa khung được nạp

 Target: xác định nơi hiển thị của trang web được xác định qua thuộc tính Src

 Thông thường, nội dung các trang web được hiển thị trong khung bên phải, ta sử dụng thẻ <BASE target=tên-khung> khai báo trong phần đầu tệp HTML

 Noresize: có hai giá trị "yes" hay "no", quy định cửa sổ khung được/ không được thay đổi kích thước

 Scrolling: có các giá trị "auto", "yes" và "no", xác định cửa sổ có thanh cuộn hay không

 FrameBorder : xác định đường viền của khung, có hai giá trị là 0 và 1, giá trị mặc định là 1

 MarginWidth: xác định khoảng cách từ nội dung tới biên trái và biên phải của khung, đơn vị tính là pixel

 MarginHeight: xác định khoảng cách từ nội dung tới biên trên và biên dưới của khung, đơn vị tính

là pixel

II.4 Thẻ Iframe (Inline Frame)

Thẻ iFrame có chức năng chèn một frame vào một trang web, trong khung này hiển thị nội dung một trang web khác được chỉ định Thẻ này được hỗ trợ bởi IE và FireFox

Cú pháp:

N ộ i dung khác thay th ế n ế u trình duy ệ t không h ỗ tr ợ th ẻ Iframe

</IFRAME>

Các thuộc tính của thẻ Iframe : name, width và height

Nếu trình duyệt không hỗ trợ thẻ Iframe, có thể dùng thẻ <OBJECT> (IE và FireFox đều hỗ trợ thẻ này) với cú pháp như sau:

<OBJECT data="tệ p tin t ư li ệ u html">

width="n" width="m" type ="text/html">

N ộ i dung khác thay th ế n ế u trình duy ệ t không h ỗ tr ợ th ẻ OBJECT

Trang 28

III.FORM (biểu mẫu)

Biểu mẫu dùng để tạo một trang web tương tác, thông qua thao tác trỏ và click lên các đối tượng của biểu mẫu, biểu mẫu còn dùng để tập hợp các kiểu dữ liệu từ trang web để gởi đến web server thông qua các trường nhập liệu, nút điều khiển v.v

Biểu mẫu gồm có 2 phần:

 Phần cấu trúc gồm có các field (trường), label (nhãn),button (nút nhấn)

 Script (kịch bản) xử lý thông tin

Các phần tử của biểu mẫu phải được đặt trong cặp thẻ <FORM> và </FORM>

III.1 Các thuộc tính của thẻ <FORM>

Thẻ <form> có hai thuộc tính bắt buộc: method và action Ngoài ra, nó còn có thuộc tính name

để định danh form trong trang web, giúp việc truy cập đến các phần tử của form được dễ dàng

III.1.1 Thuộc tính method

Thuộc tính method xác định dữ liệu từ form được truyền đi như thế nào, có hai phương thức truyền dữ liệu là post và get

 Phương thức post : truyền dữ liệu đến web server trong dạng thức HTTP, đây là phương

 Phương thức get : truyền dữ liệu đến web server trong chuổi vấn tin (query string) đính

kèm đến một URL Ví dụ, trong một ứng dụng thương mại điện tử, khi người dùng chọn một món hàng :

http://www.bookonline.com/AddToCart.asp?bookCode=012309&qty=2

Chúng ta sẽ nghiên cứu kỹ các sử dụng hai phương thức này trong chương 7

III.1.2 Thuộc tính action

Thuộc tính action xác định nơi gởi dữ liệu của form, có thể là một trang ASP ( hay JSP, PHP ) trên web server có chức năng xử lý dữ liệu do client gởi đến như ví dụ trên, hay một địa chỉ e-mail: Ví dụ :

<FORM action="post" action="mailto:education@dng.vnn.vn"

Thẻ <INPUT> dùng để định nghĩa các trường dữ liệu (cũng còn được gọi là các control) của

form, thẻ này có ba thuộc tính cơ bản: type, name hay id và value; các thuộc tính này lần lượt xác định

kiểu trường dữ liệu, tên của trường và giá trị của trường Có 9 kiểu trường dữ liệu của form gồm: text

box, password box, hidden box, check box, radio button, text area, file, select box và button

Các thuộc tính cơ bản của thẻ <INPUT> : Type, Name, Value Tùy theo kiểu field mà ta có các thuộc tính khác sẽ

Trang 29

 Type: xác định một trong chín kiểu trường dữ liệu nêu trên

 Name: xác định định danh của điều khiển trong form

 Value: đây là thuộc tính tùy chọn, xác định giá trị khởi đầu của điều khiển

 TabIndex: xác định thứ tự của phần tử nhận được tiêu điểm thông qua bàn phím Giá trị của TabIndex là một số nguyên dương

 Size : xác định số ký tự lớn nhất có thể nằm trong phần tử text hay password

 Checked : đây là thuộc tính logic, chỉ nút radio hay checkbox ở chế độ bật

 Src: dùng khi nhập vào một ảnh, xác định vị trí (location) của ảnh Gán giá trị cho thuộc tính này

theo cú pháp: Src="URL"

III.3 Các trường văn bản (text field)

Các trường văn bản trong biểu mẫu bao gồm các dạng: textbox, password box, text area và file Các thuộc tính và cách sử dụng như sau:

III.3.1 Text box

Tạo một hộp văn bản đơn dòng (one-line textbox) để người sử dụng nhập liệu Cú pháp:

<INPUT type = "text"> Các thuộc tính khác: name, size, maxLength, value

III.3.2 Text area box

Tạo một hộp văn bản có thể cuộn được (scrolling text box) để nhập nhiều dòng văn bản Cú pháp:

</TEXTAREA>

Trong đó m, n là một số nguyên dương chỉ kích thước của hộp văn bản (số dòng, số ký tự ), thuộc tính wrap nhận giá trị logic chỉ tính chất của văn bản có được "bao bọc" hay không khi ký tự cuối dòng chạm đến biên phải của hộp văn bản, nếu wrap nhận giá trị ON thì số ký tự trên một dòng bằng giá trị của thuộc tính cols thì sẽ ngắt xuống dòng khác

III.3.3 Password box

Tạo một hộp văn bản đơn dòng, khi người dùng gõ vào mật khẩu, dòng mật khẩu sẽ không hiển thị trên màn hình mà hiển thị dưới dạng các dấu sao (*) hay dấu chấm tròn ()

Cú pháp : <INPUT type = "text"> Các thuộc tính khác: name, size, maxLength

III.3.4 Thẻ <INPUT type="file">

Phần tử nầy cho phép người dùng gõ tên một tệp tin hay chọn một tệp tin từ phương tiện trữ tin để gởi đến server Phần tử này xác định một hộp văn bản và một nút browse để mở một cửa sổ liệt

kê các file và thư mục trên máy tính để chọn file Thẻ này có thuộc tính accept để xác định mặt nạ tìm kiếm tệp tin Ví dụ:

<INPUT type = "file" accept ="text/*"> , xác định cho việc duyệt file chỉ thực hiện trên các tệp văn bản như text/plain, text/html, text/css, text/js

Ví dụ tổng hợp:

<HTML>

<HEAD>

<META

Trang 30

http-equiv="Content-Type" content="text/html; charset=utf-8">

<TITLE>Yeu cau giai dap bai tap lap trinh WEB</TITLE>

Ghi chú : để sắp xếp thẳng hàng các trường (field) cần sử dụng bảng (table)

III.4 Nút bấm (button), hộp kiểm (check box) và nút chọn lựa.

III.4.1 Nút bấm

Là một nút hình chữ nhật được dùng để thực hiện một hành động khi người sử dụng click lên

nút này, đôi khi ta gọi chúng là những nút bấm hành động (action buttons), giá trị của thuộc tính value

thiết lập chuổi ký tự xuất hiện trên nủ nhấn Tùy thuộc vào kiểu của nút bấm ta có hình dáng và cách

sử dụng khác nhau:

<INPUT type="button"> : được sử dụng như một nút lệnh (command button), nút này được gắn với một hàm viết bằng JavaScript để thực hiện một hành động xác định khi có một sự kiên (event) tác động lên nút này Trong ví dụ sau đây, khi click lên nút OK sẽ xuất hiện một hộp cảnh báo :

<FORM>

<INPUT type = "button" name = "alert"

value = "OK"

onClick="alert('B ạ n đ ã click lên nút OK!);">

</FORM>

Nếu sử dụng như một nút lệnh và không cần truy xuất đến tên,

giá trị của nút bấm, ta có thể không dùng cặp thẻ <form> và

</form>

<INPUT type = "submit"> : được sử dụng như một nút lệnh submit, có chức năng đệ trình tập giá trị của các trường trong form vào vị trí xác định đã khai báo trong thuộc tính action (là một URL chỉ một trang ASP,JSP hay PHP trên web server, có chức năng xử lý dữ liệu được gởi từ client) Ngược lại nút reset có chức năng khởi tạo lại các giá trị của các trường trong form

Trang 31

Ví dụ :

<HTML>

<HEAD>

<META http-equiv = "Content-Type"

content = "text/html; charset = utf-8">

Số báo danh : <INPUT type = "text"

name ="sbd" size="10" value=" "> <br>

Họ và tên : <INPUT type = "text" name ="hoten" size="30" value=" ">

<TD width="79%"><B>Document Object Model</B>

<BR>Tham kh ả o Mô hình đố i t ượ ng t ư li ệ u c ủ a Mozilla

III.4.2 Hộp kiểm (Check box)

Hộp kiểm được dùng trong trường hợp người sử dụng được phép chọn nhiều chọn lựa trong số các chọn lựa được cung cấp

Cú pháp : <INPUT type = "checkbox">

Các thuộc tính khác:

Name : Đặt tên hoặc truy xuất tên của checkbox

Value: Đặt giá trị hoặc truy xuất giá trị của checkbox

Checked : Đặt hoặc truy xuất trạng thái được chọn/không chọn của checkbox

Khi chọn phần tử checkbox, cặp tên/giá trị được nhận với biểu mẫu

Trang 32

III.4.3 Nút chọn lựa (Radio button)

Nút chọn lựa được dùng trong trường hợp người sử dụng được phép chọn một chọn lựa trong số các

chọn lựa được cung cấp khi các nút lựa chọn được đặt cùng tên Cú pháp : <INPUT type = "button">

Các thuộc tính tương tự như hộp kiểm đã nêu trên

Ví dụ :

<HTML>

<HEAD>

<TITLE>Trung tam Tin hoc ABC</TITLE>

</HEAD>

<BODY>

<H3>Vui lòng điền vào phiếu thăm dò này Cám ơn!</H3>

<FORM name="fr1" method="POST"

action="http://www.abc.com/gather.asp">

Họ và tên <INPUT type="text" name="T1" size="35"> <BR>

Địa chỉ <INPUT type="text" name="T2" size="43"> <BR>

Các khóa học tham dự

<INPUT type="checkbox" name="C1" value="TVP">Tin học Văn phòng<BR>

<INPUT type="checkbox" name="C2" value="VBN">Visual Basic.NET<BR>

Chất lượng giảng dạy

<INPUT type="radio" name="R1" value="R1" checked >Rất tốt

<INPUT type="radio" name="R1" value="R1">Tốt

<INPUT type="radio" name="R1" value="R1">Trung bình

<INPUT type="radio" name="R1" value="R1">Chưa tốt

<BR>

</FORM>

Trang 33

</BODY>

</HTML>

III.5 Các phần tử lựa chọn (Selection)

Tất cả các phần tử của biểu mẫu đã đề cập là các phần tử nhập (input), hai phần tử kế tiếp là

select box, có chức năng tạo ra một hộp danh sách thả xuống (drop-down list box) hay còn gọi là một menu thả xuống (drop-down menu), cho phép người sử dụng chọn một hay nhiều mục lựa chọn từ danh sách các đề mục đề nghị Cú pháp:

<SELECT name = "name" size = "n" multiple>

<OPTION value = "value" selected > Tên đề mục 1

<OPTION value = "value" > Tên đề mục 2

</SELECT>

Các thuộc tính:

Name : Đặt tên hoặc truy xuất tên của lựa chọn

Size: là chiều cao của menu, tính bằng số hàng chữ

Multiple: là thuộc tính cho phép người sử dụng chọn nhiều đề mục trong menu (bằng cách giữ phím Shift và click lên mục chọn)

Selected : là thuộc tính để đề mục (option) được chọn mặc định

Value : xác định dữ liệu của (các) mục được chọn để gởi đến server

Ví dụ sau đây minh họa cho việc truy cập đến các web site khác thông qua Drop-down Menu và việc

sử dụng biểu mẫu phải gắn liền với các script (nghiên cứu ở chương 5, 6) để xử lý dữ liệu ở phía client hay gởi đến web server

<HTML>

function chon(dia_chi) {window.location=dia_chi;}

//Truy c ậ p đế n URL cho l ạ i trong chu ổi dia_chi

Khoa CNTT tr ườ ng Đ HSP Hà N ộ i</OPTION>

H ọ c vi ệ n B ư u chính-Vi ễ n thông Hà N ộ i</OPTION>

Tr ườ ng Đạ i h ọ c K ỹ thu ậ t-Công ngh ệ - Đ HQG HN</OPTION>

Đạ i h ọ c Ngo ạ i ng ữ -Tin h ọ c tp HCM</OPTION>

Khoa CNTT- Đạ i h ọ c dân l ậ p KT-CN tp HCM </OPTION>

</OPTGROUP>

Khoa CNTT- Đạ i h ọ c C ầ n Th ơ </OPTION>

Trang 34

</OPTGROUP>

</SELECT>

</FORM>

Giải thích: Khi người sử dụng chọn một đề

mục từ menu, giá trị từ option tương ứng được gán

cho thuộc tính this.options[this.selectedIndex].value

và truyền giá trị cho tham số dia_chi của hàm

chon

Thẻ đóng </OPTION> là tùy chọn

IV NHỮNG LỜI KHUYÊN CỦA W3C

W3C không những là một tổ chức định

chuẩn các công nghệ thiết kế web, ngôn ngữ

HTML, CSS v.v mà còn đưa ra những tiêu chuẩn thiết kế web sao cho hiệu quả cũng như đưa ra những công cụ thẩm định tiêu chuẩn website tại các địa chỉ :

Bộ chỉ dẫn thiết kế web : http://www.w3c.org/wai/bcase/benefits.html

Bộ công cụ thẩm định web : http://www.w3c.org/wai/er/existingtools.html

• Công thức cơ bản, ngắn gọn do W3C đưa ra :

Thiết kế trang web dễ truy cập = dễ có khách hàng

• Sau đây là 9 nguyên tắc cơ bản do W3C đề xuất để cải thiện tốc độ truy cập

website, dể sử dụng, thân thiện

 Hình ảnh và họat ảnh : Sử dụng thuộc tính ALT để mô tả chức năng của mỗi yếu tố hình ảnh

 Truyền thông đa phương tiện : Cung cấp lời chú thích và đầu đề cho nội dung âm thanh và mô

tả cho nội dung video

 Liên kết siêu văn bản: Sử dụng văn bản sao cho đọc nghe êm tai, kể cả khi chúng không có ngữ cảnh Chẳng hạn, tránh cụm từ “Nhắp chuột vào đây”

 Tổ chức trang : Sử dụng tựa đề, danh sách và một cấu trúc nhất quán Dùng tờ mẫu dạng xếp

tầng (template with CSS) để dàn trang và tạo kiểu dáng bất kỳ khi nào có thể

 Đồ thị và biểu đồ : Tóm tắt hoặc sử dụng thuộc tính LongDesc

 Tập lệnh, ứng dụng ký sinh và plug-in : Cung cấp nội dung thay thế trong trường hợp những tính năng động không thể truy cập được hoặc không hỗ trợ

 Không sử dụng khung, nhưng sử dụng những tiêu đề có ý nghĩa

dữ liệu đến Server Để thực hiện việc truyền thông dữ liệu cần phải có các kịch bản (script) viết bằng một ngôn ngữ kịch bản để xử lý (nghiên cứu ở chương 5,6,7)

1 Để trình bày một table có chiều rộng bằng 80% chiều rộng cửa sổ trình duyệt, ta có hai biện pháp : dùng thẻ

<DIV> với thuộc tính align=center hoặc dùng thẻ <CENTER> Hãy so sánh hiệu quả sử dụng hai thẻ này trên các trình

duyệt khác nhau

Trang 35

2 So sánh tốc độ hiển thị một trang web chứa một bảng có độ rộng khai báo bằng giá trị tương đối với một trang web khác cũng chứa một bảng như vậy nhưng khai báo độ rộng bằng giá trị tuyệt đối (tính bằng pixel)

3 Nghiên cứu và phân biệt các giá trị của thuộc tính target: _blank, self, top, parent

4 Hãy tạo một form chứa các thành phần nhập dữ liệu khác nhau (cần sử dụng table để gióng thẳng cột các đối tượng trên form)

Xem danh mục tài liệu tham khảo tại Chương 2

Trang 36

Thuật ngữ style sheet, có nghĩa là một khuôn mẫu (template) áp dụng cho một tư liệu HTML

để quy định sự hiển thị tư liệu này như thế nào trong trình duyệt bằng cách ấn định giá trị cho vài

thuộc tính tới tất cả các phần tử trong trang web cùng một lúc Do vậy, sử dụng CSS cho phép người

thiết kế tách biệt nội dung trang web và định dạng của nó

- Tiết kiệm thời gian trong việc định dạng hoặc hiệu chỉnh định dạng trang web do đặc tính ấn định

giá trị cho vài thuộc tính tới tất cả các phần tử trong trang web cùng một lúc và tính chất tách biệt nội dung và định dạng

- Kiểu dáng dễ dàng thay đổi, thay vì thay đổi các thuộc tính các thẻ một cách thủ công tại nhiều nơi trong tư liệu HTML thì chúng ta chỉ thay đổi ở một nơi duy nhất là phần định dạng bằng CSS (bằng cách nhúng hay liên kết, sẽ trình bày ở các phần sau)

- Cho phép tạo một số hiệu ứng mà HTML không làm được, ta có thể sử dụng CSS với JavaScript

để tạo nên những hiệu ứng động trên trang web (mà IE gọi là DHTML)

- Sử dụng CSS cho phép người sử dụng tải trang web nhanh hơn trong trường hợp dùng bảng kiểu liên kết, do tệp tin CSS đã được tải nên trong các trang web tải lần sau trong cùng một website trình duyệt chỉ cần tải phần nội dung

Trang 37

II CÚ PHÁP CSS

II.1 Sử dụng CSS trong tư liệu HTML

Một kiểu dáng (style) là một quy tắc, hoặc một lệnh, chỉ thị cho trình duyệt làm sao để trình bày một phần tử HTML riêng biệt Những kiểu có thể đứng một mình hoặc có thể được tổ chức trong

những bảng kiểu (stylesheets)

Một kiểu dáng được tạo nên bởi một tên thẻ và một hoặc nhiều định nghĩa kiểu (hay khai báo

kiểu) xác định phương thức mà các phần tử HTML sẽ được hiển thị Một định nghĩa gồm một thuộc tính, một dấu hai chấm và một hoặc nhiều giá trị Thuộc tính và giá trị này được quy định bởi W3C

trong các đặc tả về CSS

II.1.1 Kiểu tại chỗ (Inline Styles)

Kiểu tại chỗ (hay cục bộ) được áp dụng cho một thẻ riêng biệt trên trang web, ta có thể áp dụng kiểu tại chỗ cho bất kỳ thẻ nào trên trang web bằng cách dùng thuộc tính STYLE, thuộc tính này chỉ ảnh hưởng đến thẻ chứa đựng nó mà thôi Cú pháp:

<Tên thẻ HTML STYLE = "định nghĩa kiểu1; định nghĩa kiểu2; ">

- Dùng kiểu tại chỗ để mở rộng khả năng định dạng của một thẻ HTML Trong ví dụ trên, thẻ <H2>

có "thêm khả năng" định dạng về font, cở chữ và màu sắc

- Tên thuộc tính và giá trị của thuộc tính trong định nghĩa kiểu có thể khác với tên thuộc tính và giá trị của một thẻ HTML

- Tiêu đề 1 và Tiêu đề 2 cùng được định dạng bởi thẻ <H2>, nhưng hiển thị khác nhau trên trình duyệt, do sự quy định bởi kiểu đã khai báo

- Ta có thể gộp các giá trị của thuộc tính font trong định nghĩa kiểu như sau:

- Cấu trúc của kiểu tại chỗ được phân tích như sau:

Thẻ HTML Thuộc tính Định nghĩa thứ nhất Định nghĩa thứ 2

<H2 style = "font: 'Arial' '20'; color: 'blue'> Tiêu đề 1</H2>

Thuộc tính : Các giá trị của thuộc tính

II.1.2 Bảng kiểu (StyleSheets)

Một bảng kiểu bao gồm một hoặc nhiều định nghĩa kiểu Bảng kiểu có thể được chứa trong tệp tin tư liệu HTML hay được lưu giữ trong một tệp tin bên ngoài tệp tin tư liệu HTML Một định

nghĩa cho một kiểu bao gồm một selector (bộ chọn), tiếp theo sau là khối khai báo kiểu theo cú pháp

sau:

SELECTOR { khai báo kiểu1; khai báo kiểu2; }

Ví dụ : BODY{font-family:"Arial"; font-size:"12pt"; color:"navy"}

Selector là một chuổi ký tự xác định khai báo kiểu áp dụng trên một phần tử HTML, selector

là một đề mục mà kiểu sẽ được áp dụng Các selector có thể là : Tên một thẻ HTML, đây là trường hợp được sử dụng nhiều nhất, Lớp (class), Id, Giả lớp (pseudo-class) Để kích họat những định nghĩa

kiểu, ta phải kèm theo chúng như là một phần của bảng kiểu toàn cục hoặc bảng kiểu liên kết

Trang 38

 Bảng kiểu toàn cục (hay bảng kiểu được nhúng vào, bảng kiểu bên trong) được kèm theo

như là một phần của tệp tin tư liệu HTML Loại bảng kiểu này được xác định biên giới của nó trong tệp tin tư liệu HTML bằng cặp thẻ <STYLE> và </STYLE>, được đặt trong phần đầu của tệp tin tư liệu HTML

Cú pháp một định nghĩa kiểu trong bảng kiểu :SELECTOR{ khai báo kiểu }

Ví dụ :

<HTML>

<STYLE>

body{background-color:"#F3F3F3"; color:"navy";

font:"12pt 'Times New Roman'"; margin-top:10pt; margin-left:10pt}

div{font:"italic 12pt"}

p{ text-align:"justify"; text-indent:"8pt"; font:"11pt" "Arial", "Verdana"}

H3,H4{font-family:"Verdana"; color:"blue"; background:"silver"}

Trang 39

- Kiểu tại chỗ của thẻ <H2> áp dụng lên phần tử NGỤ NGÔN được bổ sung thêm thuộc tính align,

và thuộc tính color được thay là red, chồng lên giá trị blue đã khai báo ở bảng kiểu toàn cục

Như vậy: các giá trị của các thuộc tính trong kiểu cục bộ sẽ chồng lên kiểu toàn cục

 Bảng kiểu liên kết

Bảng kiểu toàn cục chỉ được áp dụng cho một trang web, để mở rộng việc áp dụng một bảng

kiểu cho nhiều trang web, thậm chí cho toàn thể các trang web trong một website ta sử dụng bảng

kiểu liên kết hay bảng kiểu bên ngoài

Bảng kiểu liên kết là một tệp tin văn bản mã ASCII, có phần mở rộng CSS, chứa các khai báo kiểu Tệp tin này có thể được tham chiếu, hay được liên kết bởi tệp tin tư liệu HTML bằng cách sử dụng thẻ <LINK>

Các thuộc tính của thẻ <LINK>:

 href:địa chỉ của tệp css

 rel : mối quan hệ của tài liệu liên kết tới tài liệu hiện thời (tệp HTML), trong trường hợp này thì tài liệu liên kết chính là tệp css

 type:kiểu tư liệu MIME (Multipart Internet Mail Extension) của tư liệu được liên kết, trong trường

hợp này là tệp css

Giả sử ta có tệp tin CSS có tên styles.css, được chứa trong cùng thư mục với tệp tin tư liệu HTML sau đây, và ta sử dụng bảng kiểu liên kết cho trang web này với khai báo như sau:

<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">

</HEAD>

<BODY>

<!- Nội dung trang web >

</BODY></HTML>

Chú ý rằng, nếu ta tổ chức website bởi nhiều thư mục thì giá trị của thuộc tính HREF của thẻ

<LINK> nên là một địa chỉ tương đối

Riêng đối với trình duyệt IE, ta có thể sử dụng lệnh @import để tạo một liên kết đến một bảng kiểu

Nhận xét : Ta có thể áp dụng nhiều bảng kiểu cho một tư liệu HTML, do đặc tính đó nên gọi

là bảng kiểu xếp chồng Tuy nhiên, để giải quyết xung đột giữa các bảng kiểu, trình duyệt sẽ quyết

định quyền ưu tiên cho các bảng kiểu đó mà ta sẽ nghiên cứu ở phần sau

II.2.Xếp chồng và Kế thừa

II.2.1 Xếp chồng (Cascading)

Cascading Style Sheets có tên như vậy do cách nó thiết lập quyền ưu tiên cho những định

nghĩa kiểu áp dụng trên những phần tử của trang web Để hiểu về quyền ưu tiên này, ta xem xét mối quan hệ giữa các thẻ HTML qua sơ đồ bên cạnh Có những phần tử HTML chứa phần tử khác (đối tượng con), ví dụ phần tử <BODY> là phần tử lớn nhất, phần tử <H1>, <P> được chứa trong phần tử

<BODY> v.v Các quyền ưu tiên dựa trên các nguyên tắc:

Trang 40

- Thứ tự ưu tiên lần lượt cho các kiểu : tại chỗ, toàn cục, liên kết

- Những kiểu dáng được áp dụng lần cuối ưu tiên hơn những kiểu áp dụng trước đó Nếu muốn tăng độ ưu tiên cho một định nghĩa kiểu đặt biệt, cần thêm khai báo important sau giá trị của thuộc tính cần ưu tiên, như sau:

H3{color : red!important; font-family:arial}

II.2.2 Kế thừa (Inheritance)

Căn cứ mối quan hệ phân cấp giữa các thẻ HTML được xét trong bối cảnh sử dụng trong một

tư liệu HTML, các phần tử con sẽ thừa hưởng tất cả các thuộc tính của phần tử con, còn những thuộc tính riêng của phần tử con vẫn được giữ nguyên hoặc phủ chồng lên thuộc tính cùng tên của phần tử cha

Ví dụ :

<HTML>

<STYLE>

body{ color:blue; margin-left:20pt}

p{ font: normal 12pt 'Times New Roman';

Trong ngữ cảnh sử dụng trên, ta có mối

quan hệ cha con giữa các phần tử HTML như

sau:

Các kiểu động được cài đặt trong IE, được hưởng cơ chế kế thừa, theo đó định dạng cho phần

tử bên ngoài (phần tử cha) được dùng làm cơ sở cho việc định dạng phần tử bên trong (phần tử con)

II.3 Kiểu động

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

Tiêu đề	Kỹ năng lập trình web bct
Thể loại	Sản phẩm học thuật