Giáo trình thiết kế web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.19 MB, 98 trang )
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
THIẾT KẾ WEB
NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG
(Lưu hành nội bộ)
Dùng cho đào tạo: Trung cấp
Nam Định, năm 202….
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
THIẾT KẾ WEB
NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG
(Lưu hành nội bộ)
CHỦ BIÊN: LÊ HỮU TOẢN
Nam Định, năm 202….
LỜI GIỚI THIỆU
Trong những năm gần đây, cùng với sự phát triển của Cơng nghệ thơng tin thì
mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là
internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại. Để phục
vụ việc học tập và nghiên cứu của sinh viên Công nghệ thông tin, trường Cao đẳng Công
nghiệp Nam Định, chúng tơi biên soạn giáo trình Thiết kế Web. Giáo trình bao gồm 4
chương, mỗi chương đều có phần kiến thức lý thuyết, câu hỏi và phần thực hành cụ thể:
Bài 1. Tổng quan về WWW và ngôn ngữ HTML
Bài 2. Thiết kế trang Web
Bài 3: Microsoft FrontPage
Bài 4. Scripts trong trang web
Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web tĩnh từ
cơ bản đến nâng cao bằng công nghệ HTML, CSS và Script. Được biên soạn với phương
châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên những
kiến thức cơ bản phục vụ cho nghiên cứu, thiết kế ứng dụng Web.
Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập và nghiên cứu của sinh viên
trường Cao đẳng Công nghiệp Nam Định. Do thời gian có hạn nên trong phạm vi cuốn
giáo trình, khơng thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế
Web. Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cơ để tài liệu
hồn chỉnh hơn.
Nam Định, 27 tháng 04 năm 20..
Chủ biên
1
MỤC LỤC
LỜI GIỚI THIỆU ..........................................................................................................1
MỤC LỤC .....................................................................................................................2
DANH MỤC BẢNG, HÌNH VẼ ...................................................................................5
Bài 1. TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML.........................................6
1.1. KHÁI NIỆM CƠ BẢN VỀ WEB ...........................................................................6
1.1.1. Giới thiệu về world wide web .............................................................................6
1.1.1.1. Internet ..............................................................................................................6
1.1.1.2. Địa chỉ IP ..........................................................................................................7
1.1.1.3. Tên miền (Domain name) ................................................................................8
1.1.1.4. World Wide Web (WWW) ...............................................................................9
1.1.2. Giao thức truyền siêu văn bản ...........................................................................10
1.1.3. Web tĩnh, Web động. .........................................................................................11
1.1.3.1. Trang web .......................................................................................................11
1.1.3.2. Web tĩnh .........................................................................................................12
1.1.3.3. Web động ........................................................................................................12
1.1.4. Ngơn ngữ kịch bản. ...........................................................................................13
1.2. NGƠN NGỮ HTML ............................................................................................13
1.2.1. Giới thiệu HTML...............................................................................................13
1.2.2. Cấu trúc trang HTML ........................................................................................13
1.2.3. Thẻ và cấu trúc thẻ ............................................................................................14
1.2.3.1. Các thẻ chính của trang web ...........................................................................14
1.2.3.2. Thẻ định dạng kí tự .........................................................................................16
1.2.3.3. Thẻ đường kẻ ngang .......................................................................................18
1.2.3.4. Chèn hình ảnh .................................................................................................19
1.2.3.5. Định dạng đoạn...............................................................................................20
1.2.3.6. Tạo bảng (Table) ............................................................................................21
1.2.3.7. Tạo liên kết (Hyperlink) .................................................................................22
1.2.3.8. Tạo khung (Frame) .........................................................................................22
1.2.3.9. Tạo Form ........................................................................................................23
TÓM TẮT NỘI DUNG ...............................................................................................26
BÀI TẬP ......................................................................................................................27
BÀI THỰC HÀNH ......................................................................................................28
HƯỚNG DẪN TỰ HỌC Ở NHÀ ...............................................................................37
NỘI DUNG THẢO LUẬN .........................................................................................38
2
Bài 2. THIẾT KẾ TRANG WEB ................................................................................40
2.1. TỔNG QUAN .....................................................................................................40
2.2. TRANG VÀ VĂN BẢN TRÊN TRANG ............................................................40
2.3. BẢNG BIỂU (TABLE) VÀ TRANG KHUNG (FRAME) .................................42
2.4. MULTIMEDIA TRÊN TRANG WEB ................................................................47
2.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG WEB.......................................................48
TÓM TẮT NỘI DUNG ...............................................................................................50
BÀI TẬP ......................................................................................................................50
BÀI THỰC HÀNH ......................................................................................................51
HƯỚNG DẪN TỰ HỌC Ở NHÀ ...............................................................................57
NỘI DUNG THẢO LUẬN CHƯƠNG 2 ....................................................................58
Bài 3. MICROSOFT FRONTPAGE ...........................................................................59
3.1. TỔNG QUAN ......................................................................................................59
3.2. TRANG VÀ VĂN BẢN TRÊN TRANG ............................................................60
3.3. TẠO BẢNG (Table) VÀ TRANG KHUNG (FRAME) ......................................61
3.3.1. Làm việc với bảng .............................................................................................61
3.3.2. Làm việc với khung Frame ................................................................................62
3.4. MULTIMEDIA TRÊN TRANG WEB ................................................................64
3.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG ................................................................66
3.6. KHUNG NHẬP - FORM ....................................................................................67
3.6.1. Các đối tượng của Form ....................................................................................67
3.6.2. Thuộc tính đối tượng .........................................................................................67
3.7 LIÊN KẾT .............................................................................................................68
3.7.1 Liên kết trang ......................................................................................................68
3.7.2 Liên kết địa chỉ web ...........................................................................................68
3.7.3 Liên kết email .....................................................................................................68
3.7.4 Liên kết bản đồ ảnh ............................................................................................68
TÓM TẮT NỘI DUNG ...............................................................................................70
BÀI TẬP ......................................................................................................................70
BÀI THỰC HÀNH ......................................................................................................71
NỘI DUNG THẢO LUẬN CHƯƠNG 3 ....................................................................74
Bài 4. SCRIPT TRONG TRANG WEB......................................................................76
4.1. TỔNG QUAN VỀ SCRIPT TRONG TRANG WEB ..........................................76
4.2. CƠ BẢN VỀ JAVASCRIPT ................................................................................76
4.2.1. Khái niệm JavaScript .........................................................................................76
4.2.2. Một số đối tượng có sẵn trong JavaScript .........................................................77
3
4.2.3 Xây dựng hàm xử lý sự kiện ..............................................................................84
4.3. CƠ BẢN VỀ VBSCRIPT ....................................................................................86
4.3.1. Khái niệm VBScript ..........................................................................................86
4.3.2. Hàm và thủ tục trong VBScript .........................................................................86
4.3.3. Đối tượng trong VBScript .................................................................................90
TÓM TẮT NỘI DUNG CHƯƠNG 4 .........................................................................92
BÀI TẬP ......................................................................................................................93
BÀI THỰC HÀNH ......................................................................................................94
HƯỚNG DẪN TỰ HỌC .............................................................................................94
NỘI DUNG THẢO LUẬN .........................................................................................95
TÀI LIỆU THAM KHẢO ...........................................................................................96
4
DANH MỤC BẢNG, HÌNH VẼ
Hình 1- 1. Mơ hình mạng Internet ..................................................................................... 7
Hình 1- 2. Minh họa thiết lập giao thức TCP/IP .................................................................. 8
Hình 1- 3. Phân cấp các tên miền ......................................................................................... 9
Hình 1- 4. Thống kê các trình duyệt được sử dụng ............................................................ 10
Hình 1- 5. Tiêu đề của trang web xuất hiện trên trình duyệt .............................................. 14
Hình 1- 6. Tiêu đề của hình ảnh khi di chuột ..................................................................... 20
Hình 1- 7. Form đăng kí thơng tin.................................................................................28
Hình 1- 8. Mơ tả bài thực hành 1........................................................................................ 28
Hình 1- 9. Mơ tả bài thực hành 2........................................................................................ 29
Hình 1- 10. Mơ tả bài thực hành số 3 ................................................................................. 30
Hình 1- 11. Mơ tả bài thực hành số 4 ................................................................................. 31
Hình 1- 12. Mơ tả bài thực hành số 5 ................................................................................. 33
Hình 1- 13. Mơ tả bài thực hành số 6 ................................................................................. 34
Hình 1- 14. Mô tả bài thực hành số 7 ................................................................................. 36
Hình 1- 15. Mơ tả bài thực hành số 10 ............................................................................... 37
Bảng 1- 1. Thuộc tính thẻ <body> ..................................................................................... 20
Bảng 1- 2. Kích thước Font chữ ......................................................................................... 21
Bảng 1- 3. Các kiểu chữ trong HTML ............................................................................... 22
Bảng 1- 4. Các dạng hiển thị văn bản trên web .................................................................. 22
Bảng 1- 5. Kí tự đặc biệt..................................................................................................... 23
Bảng 1- 6. Đánh chỉ số đầu cho đoạn văn bản ................................................................... 24
Bảng 1- 7. Đặt kí hiệu đầu đoạn văn bản ........................................................................... 25
Bảng 1- 8. Cấu trúc thẻ làm việc với bảng ......................................................................... 26
5
Bài 1. TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML
MỤC TIÊU:
- Trình bày được các khái niệm cơ bản về web: www, http, url,...
- Phân tích được ưu điểm, nhược điểm của phương pháp lập trình web tĩnh và lập
trình web động.
- Trình bày được khái niệm về ngơn ngữ kịch bản.
- Thiết kế được giao diện một số trang web cơ bản: đăng kí, đăng nhập, hiển thị
thơng tin bằng các thẻ HTML cơ bản.
1.1. KHÁI NIỆM CƠ BẢN VỀ WEB
1.1.1. Giới thiệu về world wide web
1.1.1.1. Internet
Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced
Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Ngày nay Internet đã trở
thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới. Mạng máy tính tồn
cầu Internet có thể được xem như là mạng của tất cả các mạng (Network of networks),
trong đó người dùng tại bất cứ máy tính nào đều có thể truy cập tới các thông tin của
các máy khác (nếu được phép).
Mục đích chính lúc này của mạng là kết nối và trao đổi thơng tin giữa các máy tính
nghiên cứu của các trường đại học. Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn
có thể 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.
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 người trê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
các mạng viễn thông công cộng đang tồn tại (Public telecommunication networks). Về
mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission
Control Protocol/Internet Protocol). Hai mô phỏng của công nghệ mạng Internet là
intranet and extranet cũng sử dụng các giao thức này.
Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước ngoặt mới trong
việc sử dụng Internet. Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là email,
listserv, telnet và ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát
triển các giao thức cho World Wide Web (WWW). Trong khi tìm kiếm cách để liên kết
các tài liệu khoa học lại với nhau, anh ta đã tạo ra HyperText Markup Language
(HTML), một tập con của Standard Generalized Markup Language (SGML).
Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm
thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway
Interface (CGI), ASP, JSP, PHP, Java Servlet....
6
Hình 1- 1. Mơ hình mạng Internet
1.1.1.2. Địa chỉ IP
Địa chỉ IP là một dãy số 32-bit dùng để xác định đối tượng nhận và gửi thông tin
trên Internet. Khi người dùng yêu cầu một trang HTML hay gửi e-mail, địa chỉ IP của
máy tính sẽ được gửi đi cùng các gói tin đến địa chỉ IP của người nhận. Khi máy tính
nhận được yêu cầu, sẽ căn cứ trên địa chỉ IP kèm theo để gửi kết quả trả về.
Để đơn giản hóa người ta phân dãy địa chỉ 32-bit này thành 4 con số 8 bit viết cách
nhau bởi dấu chấm “.”. Vì mọi máy là một phần của mạng nên người ta chia địa chỉ IP
thành 2 phần:
+ Phần mơ tả mạng (network) mà máy đó thuộc về.
+ Phần mô tả máy (local host): Nếu tất cả các bit của vùng mơ tả máy bằng 0, thì
địa chỉ IP dùng để mô tả địa chỉ mạng (network address); Nếu tất cả các bit của vùng mô
tả máy bằng 1, thì địa chỉ IP này chính là địa chỉ broadcast (broadcast address); Nếu
không thuộc hai trường hợp trên, địa chỉ IP này dùng để mô tả địa chỉ máy (host address)
Địa chỉ IP tự nó khơng chứa thơng tin về phần nào mô tả mạng, phần nào mô tả máy
mà thành phần subnet mask đi kèm với mỗi địa chỉ sẽ cung cấp thông tin này. Theo qui
ước, vùng các bit 1 xác định vùng mô tả mạng, và vùng các bit 0 xác định vùng mô tả
máy. Trong subnet mask chỉ gồm 2 dãy liên tục các bit 1 và dãy liên tục các bit 0 nằm
liên tiếp nhau tính từ trái sang.
Việc phân chia địa chỉ IP trên Internet do ICANN chịu trách nhiệm. Địa chỉ IP
thường được quản lí bởi các nhà cung cấp dịch vụ Internet (ISP – Internet Service
Provider). Các địa chỉ IP này thường được gọi là địa chỉ IP thực. Nếu người dùng muốn
thiết lập một website để các máy tính sử dụng Internet có thể truy cập vào được, ít nhất
máy chủ chứa website phải có địa chỉ IP thực. Nếu khơng có địa chỉ IP thực, người dùng
phải sử dụng dịch vụ webhosting để thuê chỗ đặt website trên các máy chủ có địa chỉ
IP thực được kết nối với Internet.
7
Hình 1- 2. Minh họa thiết lập giao thức TCP/IP
1.1.1.3. Tên miền (Domain name)
Tên miền có thể được xem như là tên giao dịch của công ty hay tổ chức trên
Internet. Tên miền của các công ty thương mại thường có dạng yourcompany.com. Ví
dụ, cơng ty Intel sẽ lấy tên là miền là intel.com; công ty Microsoft lấy tên miền là
microsoft.com ...
Việc đưa ra khái niệm tên miền giúp cho việc truy cập đến các tài nguyên trên
Internet dễ dàng hơn. Việc ánh xạ qua lại giữa tên miền và địa chỉ IP của máy phục vụ
được thực hiện bởi DNS Server.
Ví dụ: Một địa chỉ www.intel.com cho ta một số thông tin sau:
+ Đây là địa chỉ của một máy thuộc tổ chức sở hữu tên miền intel.com.
+ Địa chỉ IP của máy này sẽ là 192.102.198.160.
+ Phần "com" trong tên miền mơ tả mục đích của tổ chức (trong trường hợp
này là "commercial" – thương mại) và được gọi là tên miền cấp 1 (top-level domain
name).
+ Phần ngay trước dấu “.” trong tên miền trên thông thường là tên của tổ chức (ví
dụ như intel) được gọi là tên miền cấp 2 (second-level domain name). Tên miền cấp 3
thông thường được dùng để định nghĩa một máy phục vụ cụ thể nào đó và tồn bộ chúng
sẽ được ánh xạ tới một địa chỉ Internet.
Một địa chỉ IP có thể được ánh xạ cho nhiều tên miền. Điều này cho phép nhiều cá
nhân, công ty và các tổ chức chia sẻ cùng một Internet server. Do tầm quan trọng của
tên miền nên một trong các bước đầu tiên của việc xây dựng website là thiết lập tên
miền bằng cách mua từ các công ty được ủy quyền bán tên miền. Các tên miền có đi
là “.com” rất thơng dụng trong các giao dịch quốc tế. Ngoài ra, các cơng ty Việt nam
cũng thường hay lấy tên miền có đuôi là “.com.vn”.
8
Hình 1- 3. Phân cấp các tên miền
1.1.1.4. World Wide Web (WWW)
World Wide Web là một không gian thông tin tồn cầu cho phép người dùng có thể
truy cập (đọc và viết) qua các máy tính có nối mạng internet. Đây là dịch vụ thông dụng
nhất trên Internet. Để sử dụng dịch vụ này, người dùng cần có một trình duyệt web
(Web browser). Một số trình duyệt thơng dụng là Google Chrome, I nt er ne t E xp lo re r
và Mozilla Firefox...
Để truy cập vào một trang web, người dùng cần phải biết địa chỉ URL (Uniform
Resource Locator) của trang web đó.
Trong mỗi trang web mà máy tính truy cập vào, người dùng có thể thấy được văn
bản, hình ảnh, âm thanh...được trang trí và trình bày hết sức đẹp mắt. Ngồi ra, để có
thể di chuyển tới các trang web khác, trên mỗi trang đều sử dụng các siêu liên kết
(Hyperlink).
9
Hình 1- 4. Thống kê các trình duyệt được sử dụng
1.1.2. Giao thức truyền siêu văn bản
Giao thức truyền siêu văn bản (HyperText Transfer Protocol - HTTP) được ứng
dụng để truyền tải tài liệu, các tệp siêu văn bản giữa máy chủ Web (Web server) và máy
khách Web (Web client) thơng qua một trình duyệt Web. Cụ thể hơn, HTTP là một giao
thức ở tầng ứng dụng trong các hệ thống thông tin phân tán, cộng tác, siêu phương tiện
(Hypermedia), cho phép một máy khách gửi yêu cầu thông qua tệp siêu văn bản đến máy
chủ và nhận đáp ứng từ máy chủ.
Nhà khoa học máy tính người Anh Tim Berners-Lee và nhóm dự án “World Wide
Web” là những người đầu tiên được công nhận phát minh ra HTTP cùng với ngôn ngữ
đánh dấu siêu văn bản HTML.
Cho đến nay, giao thức HTTP gồm có ba phiên bản là:
- Phiên bản HTTP 0.9: Được Hiệp hội web toàn cầu (World Wide Web - W3C)
công bố năm 1991. Đây là giao thức đơn giản để truyền dữ liệu thô trên Internet.
- Phiên bản HTTP 1.0: Được định nghĩa vào năm 1996 trong tài liệu kỹ thuật và tổ
chức về Internet (Request For Comments - RFC) do nhóm chuyên trách kỹ thuật Internet
ban hành (Internet Engineering Task Force - IETF). Tại phiên bản này cho phép gửi nhận
các thông điệp định dạng kiểu giao thức mở rộng thư Internet đa chức năng
(Multipurpose Internet Mail Extensions - MIME), như kiểu văn bản phi cấu trúc (Text),
kiểu hình ảnh (Image), kiểu âm thanh (Audio), kiểu phim (Video), kiểu ứng dụng
(Application), chứa các thông tin mô tả về dữ liệu được truyền và các tham số chỉnh sửa
theo yêu cầu/đáp ứng. Tuy nhiên, phiên bản này không tác động nhiều đến các proxy
phân cấp, bộ nhớ đệm, nhu cầu kết nối liên tục hay đến các máy chủ lưu trữ ảo. Proxy là
một chương trình trung gian hoạt động vừa như một máy chủ và vừa như một máy khách
nhằm mục đích thực hiện các yêu cầu thay cho các máy khách khác.
- Phiên bản HTTP 1.1: Lần đầu tiên được công bố vào tháng 01 năm 1997 và sau đó
được cập nhật tại RFC vào tháng 07 năm 1999. HTTP 1.1 có các yêu cầu nghiêm ngặt
hơn HTTP 1.0 để đảm bảo tính tin cậy khi thực hiện các tính năng của nó.
HTTP cho phép một tập các phương thức hoặc câu lệnh (methods/commands) và
các tiêu đề mở - đóng (open - ended header) để chỉ ra mục đích của một yêu cầu. HTTP
được xây dựng trên nguyên tắc tham chiếu được cung cấp bởi định danh tài nguyên thống
10
nhất (Uniform Resource Identifier - URI), hoặc định vị tài nguyên thống nhất (Uniform
Resource Locator - URL) hay tên tài nguyên thống nhất (Uniform Resource Name URN), nhằm chỉ ra nguồn tài nguyên áp dụng phương thức. Thông điệp được gửi theo
định dạng tương tự với định dạng sử dụng thư Internet theo quy định của MIME.
HTTP cũng được sử dụng như một giao thức chung để truyền thông giữa tác nhân
người dùng (User Agent - UA) và các proxy, gateway (một máy chủ hoạt động như một
điểm trung gian đối với máy chủ khác, tiếp nhận các yêu cầu từ máy khách với vai trò
như một máy chủ gốc) đến các hệ thống Internet khác, gồm cả các hệ thống hỗ trợ giao
thức truyền thư đơn giản (Simple Mail Transfer Protocol – SMTP), giao thức truyền tin
tức liên mạng (Network News Transfer Protocol – NNTP), giao thức truyền tệp tin (File
Tranfer Protocol – FTP), giao thức Gopher (được thiết kế chính để tìm kiếm và lưu trữ tài
liệu phân tán) và WAIS (hệ thống tìm kiếm theo mơ hình khách – chủ sử dụng tiêu chuẩn
ANSI Z39.50). Bằng cách này, HTTP cho phép truy cập siêu phương tiện đến các tài
nguyên sẵn có từ các ứng dụng đa dạng.
Giao thức HTTP là một giao thức có dạng yêu cầu/đáp ứng. Khi một máy khách gửi
một yêu cầu đến máy chủ gồm phương thức yêu cầu (GET, POST, HEAD,…), URL,
phiên bản giao thức, kèm với thông điệp kiểu MIME gồm các tham số chỉnh sửa của yêu
cầu, thông tin máy khách và nội dung chính thơng qua kết nối đến máy chủ. Máy chủ sẽ
đáp ứng bằng dòng trạng thái, gồm phiên bản giao thức thông điệp và mã thông báo
thành công hay lỗi, kèm với thông điệp kiểu MIME có chứa thơng tin về máy chủ, các
thơng tin thêm về đối tượng và nội dung chính của đối tượng.
An toàn bảo mật của giao thức HTTP phiên bản 1.1 cũng là một vấn đề hết sức
quan trọng đối với các nhà phát triển ứng dụng, nhà cung cấp thông tin và người dùng
cuối. Các vấn đề an toàn bảo mật cần xem xét bao gồm:
- Bảo vệ thông tin cá nhân (lạm dụng thông tin đăng nhập máy chủ, truyền thơng tin
nhạy cảm, mã hóa thơng tin nhạy cảm ở dạng URI, vấn đề riêng tư khi kết nối để nhận
các tiêu đề),
- Các tấn công tệp tin và tên đường dẫn, hệ thống tên miền (Domain Name System
– DNS) giả, các tiêu đề giả, các vấn đề sắp xếp nội dung, vấn đề xác thực và máy khách
không hoạt động, vấn đề về proxy và cache, các tấn cơng từ chối dịch vụ trên proxy.
Do đó, để đảm bảo an tồn khi truyền thơng trên mạng, có thể sử dụng HTTPS
(Hypertext Transfer Protocol Security).
HTTP được ứng dụng trong các phần mềm máy chủ Web và trong các trình duyệt
Web để trao đổi thông tin giữa máy chủ Web và máy khách Web trên môi trường mạng.
1.1.3. Web tĩnh, Web động.
1.1.3.1. Trang web
- Website là một ứng dụng chạy trên mạng (Client – Server) và được chia sẻ khắp
toàn cầu qua mạng Internet.
- Trang web là một tệp tin văn bản chứa những thẻ HTML hoặc những đoạn mã đặc
biệt mà trình duyệt web (Web Browser) có thể hiểu và thông dịch được. Tệp tin thường
được lưu với phần mở rộng là .html hoặc .htm.
- Địa chỉ web (Uniform Resource Locator - URL): một địa chỉ tham chiếu đến một
file cụ thể trong tài nguyên mạng. Địa chỉ web có 2 dạng:
+ Địa chỉ tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc một tệp tin
bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên tệp tin.
11
+ Địa chỉ tương đối: mô tả ngắn gọn địa chỉ tệp tin kết nối có cùng đường
dẫn với tập tin hiện hành.
1.1.3.2. Web tĩnh
Website tĩnh là website chỉ bao gồm các trang web khơng có cơ sở dữ liệu đi kèm.
- Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML…
- Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít thay đổi
và cập nhật.
- Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm
quen với môi trường Internet.
* Ưu điểm:
- Thiết kế đồ hoạ đẹp: Trang Web tĩnh thường được trình bày ấn tượng và cuốn hút
hơn trang web động về phần mỹ thuật đồ hoạ vì chúng ta có thể hồn tồn tự do trình bày
các ý tưởng về đồ hoạ và mỹ thuật trên tồn diện tích từng trang web tĩnh.
- Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web tĩnh
nhanh hơn các trang web động vì khơng mất thời gian trong việc truy vấn cơ sở dữ liệu
như các trang web động.
- Thân thiện hơn với các máy tìm kiếm (search engine): Bởi vì địa chỉ URL của các
trang *.html, *.htm… trong web tĩnh không chứa dấu chấm hỏi (?) như trong web động.
- Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với website
động vì khơng phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho website và chi
phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí yêu cầu hệ điều hành tương thích.
* Nhược điểm:
- Khó khăn trong việc thay đổi và cập nhật thông tin: Muốn thay đổi và cập nhật
thông tin của trang website tĩnh cần biết về ngơn ngữ HTML, sử dụng được các chương
trình thiết kế đồ hoạ và thiết kế web cũng như các chương trình đưa file lên server.
- Thơng tin khơng có tính linh hoạt, khơng thân thiện với người dùng: Do nội dung
trên trang web tĩnh được thiết kế cố định nên khi nhu cầu về thông tin của người truy cập
tăng cao thì thơng tin trên website tĩnh sẽ khơng đáp ứng được.
- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một website tĩnh
hầu như là phải làm mới lại website.
1.1.3.3. Web động
Web động là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm xử
lý dữ liệu và phát triển web.
- Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng
truy vấn tới một trang web. Trang web được gửi tới trình duyệt gồm những câu chữ, hình
ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa.
- Web động thường được phát triển bằng các ngơn ngữ lập trình bậc cao như PHP,
ASP, ASP.NET, Java, CGI, Perl, và sử dụng các hệ quản trị cơ sở dữ liệu như Access,
MySQL, MS SQL, Oracle, DB2.
- Thông tin trên web động dễ dàng được cập nhật thường xuyên thông qua việc sử
dụng các công cụ cập nhật của các phần mềm quản trị web. Thông tin luôn được cập nhật
trong một cơ sở dữ liệu và người dùng Internet có thể xem những chỉnh sửa đó ngay lập
tức.
12
- Web động có tính tương tác với người sử dụng cao: Với web động, người dùng dễ
dàng quản trị nội dung và điều hành website của mình thơng qua các phần mềm hỗ trợ
mà khơng nhất thiết phải có kiến thức nhất định về ngơn ngữ html, lập trình web.
- Dễ dàng thay đổi hoặc kế thừa những kết quả đã có: chẳng hạn một ứng dụng đã
có sẵn những cơ sở dữ liệu như cơ sở dữ liệu sản phẩm, nhân sự, khách hàng hay bất kỳ
cơ sở dữ liệu nào đó và muốn đưa thêm giao diện web vào để người dùng nội bộ hay
người dùng Internet đều có thể sử dụng chương trình chỉ với trình duyệt web của mình.
- Hầu hết tất cả các website thương mại điện tử, các website của các tổ chức, doanh
nghiệp hoạt động chuyên nghiệp…trên môi trường Internet đều sử dụng cơng nghệ web
động. Có thể nói web động là website của giới chuyên nghiệp hoạt động trên môi trường
Internet.
1.1.4. Ngôn ngữ kịch bản.
Ngôn ngữ kịch bản (Script language) là một ngơn ngữ lập trình hỗ trợ viết kịch bản
(script). Các chương trình được viết cho ngơn ngữ kịch bản có thể được thực thi thơng
qua lời gọi từ các tác vụ thay vì chạy thủ cơng bởi người dùng.
Kịch bản có thể được viết và thực hiện mà khơng cần biên dịch (compile) và liên
kết (linked). Khác với các ngơn ngữ thơng thường, chương trình viết ra cần biên dịch
thành mã máy trước khi đến tay người dùng, chương trình viết bằng ngơn ngữ kịch bản
thường được chạy trực tiếp từ mã nguồn hoặc bytecode, do đó người sử dụng hồn tồn
xem và đổi mã nguồn của chương trình.
1.2. NGƠN NGỮ HTML
1.2.1. Giới thiệu HTML
Ngơn ngữ đánh dấu siêu văn bản (HyperText Markup Language - HTML) không
phải một ngôn ngữ lập trình, mà là các quy ước được xây dựng để thiết kế Web, giúp tạo,
chia sẻ các tài liệu điện tử tích hợp đa phương tiện qua Internet và được hiển thị bởi
những trình duyệt Web. HTML cho phép áp dụng siêu liên kết tới tài liệu và trình bày tài
liệu với định dạng phù hợp với hệ thống hiển thị văn bản.
- HyperText: Là một từ hay một cụm từ dùng để tạo liên kết giữa các trang web.
- Markup: Là cách định dạng văn bản để trình duyệt hiểu và thơng dịch được.
- Language: Là tập hợp những quy luật để định dạng văn bản trên trang web.
Một trang Web dạng trang HTML là một tập tin văn bản ASCII nên có thể soạn
thảo bằng bất kỳ một phần mềm nào như Notepad, Wordpad, Microsoft Word...Ngoài ra
có rất nhiều phần mềm chuyên hỗ trợ cho việc thiết kế và quản lý Website dễ dàng như
Microsoft FrontPage, DreamWaver, Coffecup HTML Editor, NotePad++...
1.2.2. Cấu trúc trang HTML
Trang HTML được cấu trúc bởi các thẻ (Tag), mỗi thẻ có một hay nhiều thuộc tính
(Attribute). Nội dung một trang HTML sẽ đặt giữa hai thẻ <HTML>…</HTML> và
thường được chia làm 2 phần:
- Phần đầu (Header): Đặt giữa 2 thẻ <HEAD>...</HEAD>, chứa các thông tin tổng
quát về trang Web như thông tin hiển thị trên thanh tiêu đề trình duyệt, bảng mã sử
dụng…và các thông tin này không được hiển thị trên trình duyệt.
- Phần thân (Body): Nội dung chính của trang web đặt giữa cặp thẻ <BODY> và
</BODY>.
Chú ý:
13
- Thẻ chú thích: <!-- nội dung cần chú thích --> nội dung nằm giữa thẻ này sẽ
được bỏ qua, khơng hiển thị lên trên trình duyệt.
- Phần lớn các thẻ HTML có dạng với chức năng quy định cách thức hiển thị của
các thành phần lên trên trang web:
<Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…>Chuỗi văn bản</Thẻ>
hoặc đơn giản là: <Thẻ>Chuỗi văn bản</Thẻ>
- Một số phần tử khơng có bất kỳ nội dung nào kèm theo và được gọi là phần tử
trống, có dạng <Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…/> hay </Thẻ>
- Các thẻ không phân biệt hoa thường, và có thể lồng vào nhau.
- Để xây dựng một trang HTML có thể sử dụng các phần mềm soạn thảo như
NotePad, Notepad++, FrontPage...để soạn thảo các nội dung và lưu thành các định dạng
như HTML, HTM...
- Một trang HTML được biên dịch bằng các trình duyệt như Explorer, Firefox...
Ví dụ: Trang HTML đơn giản
<HTML>
<HEAD>
<!-- Đây là phần đầu trang -->
<TITLE>Siêu thị SuperMarket</TITLE>
</HEAD>
<BODY>
<!-- Đây là phần thân trang -->
<P ALIGN="center">
<B>Welcome to SuperMarket</B></P>
</BODY>
</HTML>
1.2.3. Thẻ và cấu trúc thẻ
1.2.3.1. Các thẻ chính của trang web
- Thẻ <HTML></HTML>: Quy định phần bắt đầu và kết thúc của trang web tĩnh.
- Thẻ <HEAD></HEAD>: Đánh dấu điểm bắt đầu của phần đầu của trang web
đồng thời quy định một số kiểu cách của trang web như tiêu đề, font chữ, nhạc nền...
- Thẻ <TITLE></TITLE>: Chỉ định tiêu đề của của trang web. Tiêu đề này sẽ
xuất hiện trên thanh tiêu đề của trình duyệt. Thẻ này chỉ hợp lệ khi đặt trong cặp thẻ
<HEAD>.
Hình 1- 5. Tiêu đề của trang web xuất hiện trên trình duyệt
14
- Thẻ <BGSOUND>: Thiết lập nhạc nền cho trang web. Thẻ này được đặt trong
phần đầu trang. Ðịnh nghĩa như sau:
<BGSOUND SCR=url LOOP=n>
Trong đó:
Url: Đường dẫn tới tập tin nhạc (các định dạng là wav, au, midi…)
N: Số lần lặp lại bài nhạc. Nếu n= -1 hoặc infinite thì sẽ lặp đến khi đóng trang
Web.
Ví dụ: Đặt nhạc nền cho trang Web.
<HTML>
<HEAD>
<TITLE>Nhạc nền </TITLE>
<BGSOUND SCR="sound/maitruongxua.wav" LOOP=-1>
</HEAD>
<BODY> Bạn đang nghe bài hát “Mái trường xưa”</BODY>
</HTML>
- Thẻ <BODY></BODY>: Thẻ này dùng chỉ định điểm bắt đầu và kết thúc phần
thân trang Web. Thẻ này được định nghĩa như sau:
Bảng 1- 1. Thuộc tính thẻ <body>
Thuộc tính
Diễn giải
BACKGROUND =url
Chỉ định ảnh nền cho trang Web.
Url là địa chỉ và tên tập tin làm ảnh nền.
BGCOLOR=color
Chỉ định màu nền cho trang web. color là màu dạng
#nnnnnn với n:0,1,...,F, hoặc là tên các màu đã quy định
trước như: aqua, black, fuchsia, gray, green, lime, maroon,
navy, olive, purple, silver, teal, white, yellow, red, blue…
BGPROPERTIES=FIXED
Chỉ định ảnh nền trang web không cuộn khi cuộn thanh
cuộn
LEFTMARGIN=n
Chỉ định lề trái trang Web, n là 1 số nguyên dương tính
theo đơn vị đo lường: mm, cm, pixel.
LINK=color
Chỉ định màu cho các Hyperlink khi chưa được xem .
TEXT=color
Chỉ định màu văn bản trong trang Web.
TOPMARGIN=n
Chỉ định lề trên trang Web, n là 1 số nguyên dương tính
theo đơn vị đo lường: mm, cm, pixel.
15
VLINK=color
Chỉ định màu cho các Hyperlink khi đã được xem.
Ví dụ 1: Đặt màu nền và màu chữ cho trang web
<BODY BGCOLOR=YELLOW TEXT=#800000>
HTML là ngơn ngữ đánh dấu
</BODY>
Ví dụ 2: Định dạng trang web: màu chữ, ảnh nền, căn trên, căn trái, màu liên kết.
<HTML>
<HEAD>
<TITLE>Web demo</TITLE></HEAD>
...............................................................
</BODY> </HTML>
1.2.3.2. Thẻ định dạng kí tự
- Thẻ <BASEFONT></BASEFONT>: Chỉ định phông chữ, cỡ chữ, màu chữ cho
các văn bản khơng được định dạng.
<BASEFONT SIZE=n FACE=name COLOR=color>
Trong đó:
SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7. Giá trị mặc nhiên là 3.
FACE=name: Tên phông chữ.
COLOR=color: Màu chữ.
- Thẻ <FONT></FONT>: Chỉ định phông chữ, cỡ chữ, màu văn bản:
<FONT SIZE=n FACE=name COLOR=color>
Trong đó:
SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7.
FACE=name: Tên phông chữ.
COLOR=color: Màu chữ.
Bảng 1- 2. Kích thước Font chữ
HTML
Kết quả
<BASEFONT SIZE=3>
<FONT SIZE=5> Kích thước văn bản là 5</font>
<P><FONT SIZE=+1>Kích thước văn bản
</P></FONT>
<P><FONT SIZE=+2>Kích thước văn bản
</P></FONT>
<P><FONT SIZE=-1>Kích thước văn bản
16
là
Kích thước văn bản là 5
4 Kích thước văn bản là 4
là
5 Kích thước văn bản là 5
là
2
Kích thước văn bản là 2
</P></FONT>
- Thẻ <B></B>: Hiển thị văn bản kiểu chữ in đậm.
- Thẻ <I></I>: Hiển thị văn bản kiểu chữ nghiêng.
- Thẻ <U></U>: Hiển thị văn bản kiểu chữ gạch dưới.
- Thẻ <S></S>: Hiển thị văn bản kiểu chữ gạch giữa.
Bảng 1- 3. Các kiểu chữ trong HTML
HTML
Kết quả
Dòng chữ này thường
Dòng chữ này thường
<B>Dòng chữ này đậm</B>
Dòng chữ này đậm
<I>Dòng chữ này nghiêng</I>
Dòng chữ này nghiêng
<FONT COLOR="#800000" FACE="Verdana">Đoạn văn Ðoạn văn thứ nhất màu
thứ nhất màu đỏ có phơng là Verdana.</FONT><P>
đỏ có phơng là Verdana.
<FONT COLOR="black" FACE="Verdana">Ðoạn văn thứ Ðoạn văn thứ hai màu
hai màu đen có phơng là Verdana.</FONT></P>
đen có phơng là Verdana.
<B><I>Dịng chữ này vừa đậm vừa nghiêng</I></B>
Dòng chữ này vừa đậm
vừa nghiêng
<P ALIGN="center"><FONT FACE="Verdana">Ðoạn căn Ðoạn căn trái
trái</FONT>
<P ALIGN="center"><FONT FACE="Verdana">Ðoạn căn
Ðoạn căn giữa
giữa</FONT>
<P ALIGN="right"><FONT FACE="Verdana">Ðoạn căn
Ðoạn căn phải
phải</FONT>
- Thẻ <STRONG></STRONG>:Hiển thị văn bản đậm theo logic type
- Thẻ <EM></EM>: Hiển thị văn bản nghiêng theo logic type
- Thẻ <STRIKE></STRIKE>: Hiển thị văn bản gạch dưới theo logic type
- Thẻ <SUB></SUB>: Hiển thị văn bản dạng chỉ số (A2)
- Thẻ <SUP></SUP>: Hiển thị văn bản dạng mũ theo (A2)
+ Thẻ <SMALL> </SMALL>: Hiển thị thu nhỏ chữ
+ Thẻ <BIG> </BIG>: Hiển thị phóng lớn chữ
17
Bảng 1- 4. Các dạng hiển thị văn bản trên web
HTML
Kết quả
Dịng này thơng thường
Dịng này thơng thường
<STRONG>Dịng này đậm</STRONG>
Dịng này đậm
<EM>Dòng này nghiêng</EM>
Dòng này nghiêng
<STRIKE>Dòng này gạch giữa</STRIKE>
Dòng này gạch giữa
<STRONG><EM>Dòng này vừa đậm vừa nghiêng
</EM></STRONG>
Dòng này vừa đậm vừa
nghiêng
<EM><U>Dòng
dưới</U></EM>
này
vừa
nghiêng
vừa
gạch Dòng này vừa nghiêng
vừa gạch dưới
H<sub>2</sub>SO<sub>4</sub>
H2SO4
x<sup>y</sup>
x
y
+ Thẻ <BR></BR>: Ngắt xuống dòng mới nhưng vẫn thuộc cùng một đoạn hiện
hành. Thẻ </BR> khơng nhất thiết phải có.
+ Ký tự đặc biệt: Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt, bao gồm
cả ký hiệu < (nhỏ hơn) và > (lớn hơn), bởi những ký hiệu này được dùng để chỉ các thẻ
nên không thể dùng chúng như trong HTML. Những ký tự đặc biệt như vậy được đánh
dấu trong HTML dưới dạng: &XXXX;
Trong đó XXXX là tên mã (Code Name) cho ký tự đặc biệt đó:
Bảng 1- 5. Kí tự đặc biệt
Một số ký tự đặc biệt
HTML
<
>
>
<
&
&
"
"
Khoảng trống
Ví dụ: Một số kí tự đặc biệt thường gặp
HTML
Kết quả
<b> C H E E S C H E E S E
E</b>
1.2.3.3. Thẻ đường kẻ ngang
- Thẻ <HR>: Kẻ thêm đường thẳng nằm ngang trong trang Web. Thẻ được định
nghĩa như sau:
<HR ALIGN=align-type COLOR=color NOSHADE SIZE=n WIDTH=m>
Trong đó:
ALIGN=align-type: căn lề cho đường kẻ ngang. Align-type có thể là: left, right, hay
18
center.
COLOR=color: màu đường thẳng ngang
NOSHADE: khơng có bóng đổ
SIZE=n : độ dày của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị
đo lường được thiết lập.
Ví dụ: Thiết lập đường kẻ
Kết quả
HTML
NOSHADE SIZE=3 WIDTH=200>
SIZE=2 WIDTH=150>
COLOR=black
1.2.3.4. Chèn hình ảnh
- Thẻ <IMG>: Thêm hình ảnh vào trang Web.
Trong đó:
ALIGN=align-type: Lề cho ảnh hay cho văn bản bao quanh ảnh. Giá trị có thể là
TOP, MIDDLE, BOTTOM, LEFT, RIGHT.
ALT=text: Văn bản hiển thị khi di chuyển Mouse đến hình ảnh, hay thay thế cho
hình ảnh khi chức năng “Show Picture” trong trình duyệt bị tắt.
SRC=url: Chỉ định địa chỉ hình ảnh.
BORDER=n: Độ dày đường viền ảnh. Nếu ảnh được dùng cho Hyperlink thì
đường viền có màu trùng với màu Hyperlink. Nếu ảnh khơng dùng cho hyperlink thì
đường viền khơng hiển thị.
HEIGTH=n, WIDTH=n: Chỉ độ cao và độ rộng của ảnh. Ðơn vị bằng pixel.
HSPACE=n, VSPACE=n: Chỉ định khoảng cách từ ảnh đến văn bản quanh nó
theo chiều ngang và dọc.
Ví dụ: Chèn hình ảnh và hiển thị văn bản: “Viettel khởi động chương trình “Tơi
sinh viên 2014””khi di chuột vào ảnh
<A HREF="index.htm">
ALT="Viettel khởi động chương trình “Tơi sinh viên 2014” "ALIGN=MIDDLE HSPACE=5 VSPACE=5> </A>
</A></P>
19
Hình 1- 6. Tiêu đề của hình ảnh khi di chuột
1.2.3.5. Định dạng đoạn
- Thẻ <P></P>: Ngắt văn bản sang đoạn (Paragraph) mới. Thẻ </P> cuối đoạn
không nhất thiết phải có.
<P ALIGN=align-type> Đoạn văn bản </P>
ALIGN=align-type: Chỉ định kiểu căn đoạn. Align-type có thể: left, right hoặc
center.
- Thẻ <OL>: Tự động đánh số đầu mỗi đoạn.
Bảng 1- 6: Đánh chỉ số đầu cho đoạn văn bản
Kết quả
HTML
<OL START=1 TYPE=1>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3 </OL>
1.
2.
3.
Yếu tố 1
Yếu tố 2
Yếu tố 3
Trong đó:
START=n: chỉ định chỉ số bắt đầu
TYPE=order-type: chỉ định kiểu chỉ số. Có thể là một trong các giá trị sau:
A: sử dụng ký tự lớn A,B,C,...
a: sử dụng ký tự nhỏ a,b,c,...
I: sử dụng số La Mã lớn I,II,III,...
i: sử dụng số La Mã nhỏ i,ii,iii,...
1: sử dụng số 1,2,3,...
- Thẻ <UL>: tự động đặt ký hiệu đầu mỗi đoạn trong danh sách.
Bảng 1- 7: Đặt kí hiệu đầu đoạn văn bản
Kết quả
HTML
<UL>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</UL>
§ Yếu tố 1
§ Yếu tố 2
§ Yếu tố 3
- Thẻ tạo khối trích dẫn <BLOCKQUOTE> </BLOCKQUOTE>: Khối trích dẫn
được dùng trong các trường hợp sử dụng các trích dẫn mở rộng. Tồn khối trích dẫn sẽ
20
được căn lề thụt vào cả ở hai phía và tạo thành một khối riêng so với các đoạn khác.
1.2.3.6. Tạo bảng (Table)
- Thẻ <TABLE> </TABLE>: Tạo một bảng trên trang web.
Trong đó:
ALIGN=align-type: Lề của bảng theo chiều ngang, có giá trị là “left” hoặc “right”,
“center”.
BACKGROUND=url: Chỉ định ảnh nền của bảng
BGCOLOR=color-type: Màu nền của bảng
BORDER=n: Đường viền bảng, n tính bằng pixel
CELLPADDING=n: Khoảng cách từ ô tới nội dung của ô.
WIDTH=n: độ rộng của bảng.
- Thẻ <TR></TR>: Thẻ cho phép tạo dòng trong một bảng
Trong đó:
ALIGN=align-type: Lề của các ơ trong dịng, có giá trị là “left” hoặc “right”,
“center”.
BACKGROUND=url: Chỉ định ảnh nền của dòng.
BGCOLOR=color-type: Màu nền của dòng
VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ơ trên dịng. Giá
trị có thể là: top, bottom, middle.
- Thẻ <TD></TD>: Sử dụng để tạo ơ trong các dịng của bảng.
Trong đó:
ALIGN=align-type: Lề văn bản trong ơ, có giá trị là left, right hay center.
BACKGROUND=url: Chỉ định ảnh nền cho ô.
BGCOLOR=color-type: Màu nền của ô.
COLSPAN=n: Trộn n ô gần nhau theo hàng ngang.
ROWSPAN=n: Trộn n ô gần nhau theo hàng dọc.
VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô.
- Thẻ <TH>: tương tự như TD chỉ khác là văn bản được in đậm, căn giữa
Bảng 1- 8: Cấu trúc thẻ làm việc với bảng
Thẻ
ý nghĩa
<TABLE>
Tạo bảng
<TR>
Tạo dòng
21
<TD>
Tạo ô
<TH>
Tạo ô tiêu đề (Chữ in đậm, căn giữa)
<CAPTION> Mặc định tiêu đề của bảng nằm ở trên và căn lề giữa.
Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính
ALIGN bên trong CAPTION.
Ví dụ: Tạo một bảng thơng tin
<TABLE BORDER=1 WIDTH=100%>
<CAPTION> Bảng thơng tin</CAPTION>
<TR><TD> Ơ 11<TD> Ơ 12
<TR><TD> Ơ 21<TD>Ơ 22
</TABLE>
Ví dụ: Tạo bảng và thực hiện trộn 2 ô trong bảng
<TABLE BORDER=1 WIDTH=100%>
<CAPTION> Tạo bảng và trộn ơ </CAPTION>
<TR><TD>Ơ 11<TD COLSPAN=2>
Ơ 12 trải dài trên 2 ô
<TR><TD>Ô 21<TD>Ô 22<TD>Ô 23
</TABLE>
1.2.3.7. Tạo liên kết (Hyperlink)
- Thẻ <a> </a>: tạo liên kết để đến các trang web khác.
<A HREF=url>Chuỗi diễn giải Hyperlink</A>
Url: Là địa chỉ trang Web cần liên kết đến
Ví dụ: Tạo các liên kết đến trang Web trên Internet
<A HREF="">Website Microsoft</A>
<A HREF="index.htm">Liên kết đến trang chủ index.htm</A>
<A HREF=”../../default.htm”>Welcome to Siêu thị SuperMarket </A>
<A HREF=”images/quangcao.gif”>Welcome to Sieu Thi Bai Tho</A>
<A HREF="sample.htm" TARGET="viewer">Liên kết đến trang sample.htm</A>
Chú ý:
- Ngoài việc tạo liên kết cho các đoạn text ra có thể liên kết hình ảnh.
<A HREF=""><IMG SRC="images/bullet.gif">
Click vào ảnh này để liên kết đến trang Web của Microsoft </A>
- Liên kết để gửi thư điện tử
<A HREF=Dia_Chi_E-mail>Chuỗi diễn giải liên kết gởi E-mail</A>
Ví dụ: <A HREF="mailto:"> </A>
1.2.3.8. Tạo khung (Frame)
- Thẻ <FRAMESET> <FRAME>: Sử dụng để chia màn hình cửa sổ trình duyệt
22
thành nhiều khung (Frame). Thẻ <FRAMESET> được kết hợp với thẻ <FRAME> để
định nghĩa một khung.
- Thẻ <IFRAME>: Để chèn khung vào bên trong trang Web.
Ví dụ: Tạo trang Web có tên là home.htm chứa 2 khung, khung bên trái chứa nội
dung trang Web page_1.htm và khung bên phải chứa nội dung trang Web page_2.htm.
<HTML><HEAD>
<TITLE>Trang web có 2 khung</TITLE></HEAD>
<FRAMESET COLS="150,*">
SCROLLING="no">
<FRAME NAME="noidung" SRC="page_2.htm">
</FRAMESET></HTML>
- Mỗi khung có 1 tên, ở ví dụ trên khung trái có NAME="mucluc" và khung phải có
NAME="noidung".
- SRC=url: Để chỉ định trang Web hiển thị trên khung
- Ðể các liên kết trong Frame “mucluc” liên kết đến các trang page_1.htm,
page_2.htm và sẽ hiển thị trong khung noidung, ta chỉ định:
<FRAME NAME=”mucluc” TARGET="noidung" SRC="page_1.htm">
hoặc là trong từng liên kết có khai báo thuộc tính TARGET:
<A HREF="page_2.htm" TARGET=”noidung”>page 2</A>
hoặc là trang Web page_1.htm trong phần đầu <HEAD></HEAD> có khai báo sau:
<BASE TARGET="noidung">
- Ðể khơng xuất hiện thanh cuộn và đường viền khung, thêm thuộc tính
SCROLLING="no" và FRAMEBORDER=0 vào thẻ <FRAME>
1.2.3.9. Tạo Form
- Thẻ <FORM>: Được sử dụng để định nghĩa một Form trong trang Web, chứa các
đối tượng để tương tác với người dùng.
<FORM METHOD="POST" ACTION=url NAME=tên>
trong đó:
+ ACTION=url: Chỉ định địa chỉ trang sẽ chuyển đến khi người dùng click vào
nút Submit.
+ METHOD: Chỉ định phương thức gửi dữ liệu. Có giá trị bằng POST hoặc GET.
+ NAME: Tên của form.
- Thẻ <INPUT>: Định nghĩa các đối tượng trên Form. Bao gồm các thuộc tính:
+ TYPE="text": Chỉ định loại đối tượng trên Form, có thể nhận các giá trị:
- Text: Hộp nhập dữ liệu
- Hidden: Hộp nhập dữ liệu ẩn. (khơng nhìn thấy)
- Password: Hộp nhập mật khẩu. Thơng tin nhập vào giấu bằng kí tự *.
- Radio: Tạo các nút lựa chọn. (Chọn một trong nhiều)
- Checkbox: Tạo các nút lựa chọn đánh dấu. (Chọn nhiều trong nhiều)
- File: Hộp chọn tập tin, hiển thị hộp thoại để chọn tập tin
23
