20012 baigiang html css

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN College of Information Technology Địa chỉ: Làng Đại học, Phường Hòa Quý, Quận Ngũ Hành Sơn, TP. Đà Nẵng Website: http://www.cit.udn.vn * Điện thoại: 0511.3667113

Tài liệu CÔNG NGHỆ WEB VÀ ỨNG DỤNG

(Phần 1)

Đà Nẵng, 01/2012

Công nghệ Web và ứng dụng

Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 2



MỤC LỤC CHƯƠNG 1: TỔNG QUAN ............................................................................................. 7

1.1 Một số khái niệm .........................................................................................................7 1.1.1 Internet: ...............................................................................................................7 1.1.2 World Wide Web.................................................................................................8 1.1.3 ISP.......................................................................................................................8 1.1.4 URL.....................................................................................................................9

1.2 Tổng quan về một hệ thống Web ...............................................................................10 1.2.1 Mô hình một hệ thống Web nói chung: ..............................................................10 1.2.2 Nguyên tắc hoạt động: .......................................................................................10

CHƯƠNG 2: NGÔN NGỮ HTML................................................................................. 13 2.1 Giới thiệu HTML ......................................................................................................13 2.2 Trình soạn thảo HTML ..............................................................................................13

2.2.1 Microsoft FrontPage ..........................................................................................13 2.2.2 Macromedia Dreamweaver MX .........................................................................14

2.3 Tạo trang HTML đầu tiên ..........................................................................................14 2.4 Cấu trúc trang HTML ................................................................................................17

2.4.1 Thẻ và cấu trúc thẻ.............................................................................................17 2.4.2 Màu sắc trong thiết kế web ................................................................................20 2.4.3 Thẻ chú thích .....................................................................................................21 2.4.4 Các thẻ định dạng trình bày................................................................................22 2.4.5 Form..................................................................................................................29 2.4.6 Bảng ..................................................................................................................41 2.4.7 Cấu trúc cơ bản của trang web ...........................................................................45 2.4.8 Thẻ DIV ............................................................................................................47 2.4.9 Danh sách ..........................................................................................................48 2.4.10 Các ký tự đặc biệt ..............................................................................................50 2.4.11 Thẻ hình ảnh <IMG>: ........................................................................................51 2.4.12 Sử dụng hình ảnh làm nền..................................................................................51 2.4.13 Applets: .............................................................................................................52 2.4.14 Nhúng phim và âm thanh vào trong trang web ...................................................54 2.4.15 Flash: .................................................................................................................55 2.4.16 Sử dụng điều khiển Microsoft Calendar trong trang web ....................................56 2.4.17 Frame ................................................................................................................56 2.4.18 Một số thẻ meta thông dụng ...............................................................................58 2.4.19 Thẻ DOCTYPE..................................................................................................59

2.5 Những lưu ý ..............................................................................................................59 2.5.1 Tạo chuẩn đánh dấu thẻ và tuân thủ nó...............................................................59

CHƯƠNG 3: CASCADING STYLE SHEETS (CSS).................................................... 61 3.1 Thế mạnh của CSS ....................................................................................................61 3.2 Các cách khai báo CSS trong tài liệu HTML..............................................................61 3.3 Cú pháp của CSS .......................................................................................................62 3.4 Các vấn đề về văn bản và cách định dạng văn bản .....................................................63 3.5 Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản ................................65 3.6 Đường viền và các thuộc tính của đường viền............................................................66 3.7 Thuộc tính đường bao ngoài (Outline) .......................................................................67 3.8 Các thuộc tính của margin .........................................................................................68 3.9 CSS padding..............................................................................................................69 3.10 Định danh trong CSS:................................................................................................69 3.11 Các thuộc tính cơ bản của CSS: .................................................................................69 3.12 Chuyển thẻ HTML và thuộc tính SANG CSS ............................................................71

CHƯƠNG 4: KỊCH BẢN TRÌNH KHÁCH................................................................... 76



4.1 Nhúng javascript vào file html................................................................................... 76 4.1.1 Sử dụng thẻ SCRIPT ......................................................................................... 76 4.1.2 Sử dụng một file nguồn JavaScript .................................................................... 77 4.1.3 Thẻ <NOSCRIPT> và </NOSCRIPT> .............................................................. 77

4.2 Hiển thị một dòng văn bản ........................................................................................ 78 4.3 Ghi chú mã lệnh ........................................................................................................ 78 4.4 Giao tiếp với người sử dụng ...................................................................................... 79 4.5 Biến trong JavaScript ................................................................................................ 80

4.5.1 Biến và phân loại biến ....................................................................................... 80 4.5.2 Kiểu dữ liệu....................................................................................................... 80 4.5.3 Kiểu nguyên (Interger) ...................................................................................... 81 4.5.4 Kiểu dấu phẩy động (Floating Point) ................................................................. 81 4.5.5 Kiểu logic (Boolean) ......................................................................................... 81 4.5.6 Kiểu chuỗi (String) ............................................................................................ 81

4.6 Biểu thức................................................................................................................... 81 4.7 Toán tử (Operator) .................................................................................................... 82

4.7.1 Gán ................................................................................................................... 82 4.7.2 So sánh.............................................................................................................. 82 4.7.3 Số học ............................................................................................................... 82 4.7.4 Chuỗi ................................................................................................................ 83 4.7.5 Logic................................................................................................................. 83 4.7.6 Bitwise .............................................................................................................. 83

4.8 Lệnh.......................................................................................................................... 84 4.8.1 Lệnh điều kiện:.................................................................................................. 84 4.8.2 Lệnh lặp ............................................................................................................ 84 4.8.3 while ................................................................................................................. 85 4.8.4 Switch ............................................................................................................... 85 4.8.5 Break................................................................................................................. 85 4.8.6 continue............................................................................................................. 86

4.9 Hàm (Functions) ....................................................................................................... 86 4.10 Các hàm có sẵn ......................................................................................................... 87

4.10.1 eval ................................................................................................................... 88 4.10.2 parseInt ............................................................................................................. 88 4.10.3 parseFloat .......................................................................................................... 89 4.10.4 escape và unescape ............................................................................................ 90

4.11 Biểu thức quy tắc ...................................................................................................... 90 4.12 Mảng (ARRAY)........................................................................................................ 90

4.12.1 Tạo một mảng trống .......................................................................................... 90 4.12.2 Xác định chiều dài ban đầu của mảng ................................................................ 92 4.12.3 Tạo và khởi tạo mảng trong cùng một dòng lệnh................................................ 92 4.12.4 Kích thước mảng length..................................................................................... 92 4.12.5 Các chức năng của đối tượng Array ................................................................... 92

4.13 Sự kiện...................................................................................................................... 94 4.14 Các đối tượng trong JavaScript.................................................................................. 96 4.15 Đối tượng Navigator ................................................................................................. 98 4.16 Đối tượng window .................................................................................................... 98 4.17 Đối tượng location .................................................................................................. 100 4.18 Đối tượng frame ...................................................................................................... 101 4.19 Đối tượng document................................................................................................ 101 4.20 Đối tượng anchors................................................................................................... 102 4.21 Đối tượng forms ...................................................................................................... 102 4.22 Đối tượng history .................................................................................................... 102 4.23 Đối tượng links ....................................................................................................... 103



4.24 Đối tượng math........................................................................................................103 4.25 Đối tượng date.........................................................................................................104 4.26 Đối tượng string ......................................................................................................105 4.27 Các phần tử của đối tượng form...............................................................................106

4.27.1 Phần tử button..................................................................................................107 4.27.2 Phần tử checkbox.............................................................................................108 4.27.3 Phần tử File Upload .........................................................................................109 4.27.4 Phần tử hidden .................................................................................................109 4.27.5 Phần tử Password.............................................................................................109 4.27.6 Phần tử radio....................................................................................................109 4.27.7 Phần tử reset ....................................................................................................111 4.27.8 Phần tử select...................................................................................................111 4.27.9 Phần tử submit .................................................................................................113 4.27.10 Phần tử Text.................................................................................................113 4.27.11 Phần tử Textarea ..........................................................................................114 4.27.12 Mảng elements[] ..........................................................................................114 4.27.13 Mảng form[] ................................................................................................114

4.28 Nhận và thiết lập giá trị của các điều khiển trên form...............................................115 4.28.1 Truy xuất .........................................................................................................115

4.29 Xem lại các lệnh và mở rộng ...................................................................................115 CHƯƠNG 5: KỊCH BẢN TRÌNH CHỦ....................................................................... 118

5.1 Giới thiệu ngôn ngữ lập trình web động ...................................................................118 5.2 Cài đặt và chạy ứng dụng ASP.................................................................................119

5.2.1 Web Server IIS ................................................................................................119 5.2.2 Cấu hình cho Website trên IIS..........................................................................120 5.2.3 Viết các file ASP .............................................................................................123 5.2.4 Dùng trình duyệt truy cập website....................................................................123

5.3 Tóm tắt các cú pháp VBScript .................................................................................125 5.3.1 Response.write.................................................................................................125 5.3.2 Biến .................................................................................................................125 5.3.3 Mảng ...............................................................................................................125 5.3.4 Ghép chuỗi ......................................................................................................126 5.3.5 Hàm có sẵn ......................................................................................................126 5.3.6 Các hàm chuyển đổi kiểu .................................................................................126 5.3.7 Các hàm format ...............................................................................................126 5.3.8 Các hàm toán học.............................................................................................126 5.3.9 Các hàm thao tác với chuỗi ..............................................................................126 5.3.10 Các hàm ngày tháng.........................................................................................127 5.3.11 Các hàm kiểm tra .............................................................................................128 5.3.12 Cấu trúc điều kiện if.........................................................................................128 5.3.13 Cấu trúc lựa chọn select ...................................................................................129 5.3.14 Cấu trúc lặp tuần tự For … Next ......................................................................130 5.3.15 Cấu trúc lặp DO WHILE….LOOP...................................................................131 5.3.16 Cấu trúc lặp WHILE….WEND........................................................................131 5.3.17 Cấu trúc lặp DO….LOOP UNTIL....................................................................131 5.3.18 Điều kiện and ,or, not.......................................................................................131 5.3.19 Thủ tục và hàm người dùng..............................................................................131 5.3.20 Thủ tục ............................................................................................................132 5.3.21 Hàm.................................................................................................................132 5.3.22 Sử dụng #include .............................................................................................133

5.4 Các đối tượng căn bản .............................................................................................136 5.4.1 Đối tượng Request ...........................................................................................136 5.4.2 Request.QueryString........................................................................................136



5.4.3 Request.Form .................................................................................................. 137 5.4.4 Response ......................................................................................................... 137 5.4.5 Response.Write ............................................................................................... 137 5.4.6 Response.Redirect ........................................................................................... 137 5.4.7 Response.End .................................................................................................. 137 5.4.8 Đối tượng Session ........................................................................................... 138 5.4.9 Đối tượng Application ..................................................................................... 138 5.4.10 File Global.asa................................................................................................. 139 5.4.11 Đối tượng Dictionary....................................................................................... 140 5.4.12 Đối tượng Server ............................................................................................. 140

5.5 Sử dụng Database với ASP...................................................................................... 141 5.5.1 Các cú pháp căn bản để truy xuất dữ liệu từ DB............................................... 141 5.5.2 Đối tượng Connection ..................................................................................... 141 5.5.3 Đối tượng Recordset........................................................................................ 142 5.5.4 Thêm, sửa, xóa dữ liệu trong DB: .................................................................... 143

5.6 Sử dụng tiếng Việt trong ASP ................................................................................. 144 5.6.1 Bảng mã Unicode ............................................................................................ 144 5.6.2 Mã hóa UTF-8................................................................................................. 145 5.6.3 CodePage và Charset ....................................................................................... 145

CHƯƠNG 6: PHỤ LỤC - VBSCRIPT REFERENCE.................................................146 6.1 Statements and Keywords ....................................................................................... 146 6.2 Operators ................................................................................................................ 146 6.3 VBScript Functions................................................................................................. 146

6.3.1 Type Checking Functions ................................................................................ 146 6.3.2 Typecasting Functions ..................................................................................... 147 6.3.3 Formatting Functions....................................................................................... 147 6.3.4 Math Functions................................................................................................ 148 6.3.5 Date Functions ................................................................................................ 148 6.3.6 String Functions .............................................................................................. 149 6.3.7 Other functions................................................................................................ 150 6.3.8 Control Structures............................................................................................ 150



CHƯƠNG 1: TỔNG QUAN

1.1 Một số khái niệm 1.1.1 Internet: Internet là một hệ thống thông tin toàn cầu bao gồm các mạng máy tính được liên kết

với nhau (a network of networks) với mục đích trao đổi và chia sẻ thông tin. Internet là mạng toàn cầu liên kết các máy tính thông qua hệ thống đường điện thoại và

cáp quang. Một số máy tính được nối liên tục vào Internet trong khi các máy khác chỉ ghé thăm một đôi lúc. Những máy tính nối thường xuyên vào mạng là những máy chứa vô số thông tin mà những người dùng mạng khác có thể truy cập.

Mạng máy tính: Mạng máy tính là tập hợp nhiều máy tính điện tử và các thiết bị đầu cuối được kết nối với

nhau bằng các thiết bị liên lạc nhằm trao đổi thông tin, cùng chia sẻ phần cứng, phần mềm và dữ liệu với nhau.

Mạng máy tính là một số máy tính được kết nối với nhau. Ở đây không đề cập đến số lượng các máy tính trong mạng. Hai máy tính được nối với nhau bằng một sợi dây mạng. Đó là một mạng máy tính. Các máy tính trong quầy internet đều được nối với một máy chủ (để dễ dàng quản lý, tính tiền). Đó là một mạng máy tính. Các máy tính của trường CĐ CNTT, của trường BK, KT, SP, NN được kết nối với nhau, tạo thành mạng máy tính của Đại học Đà Nẵng. Và khi các mạng máy tính này lại kết nối với nhau ở quy mô lớn, tạo thành hệ thống bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân, và các chính phủ trên toàn cầu – đó là internet.

- So sánh mạng máy tính – mạng truyền hình: Các mạng truyền hình gửi thông tin tương tự đến mọi trạm vào cùng lúc. Sự giao tiếp này

là một chiều, nghĩa là không có sự tương tác hai chiều. Trong mạng máy tính, mỗi thông điệp thường được dẫn đến một máy tính cụ thể nào đó.

Khác với mạng truyền hình, các mạng máy tính luôn hai chiều sao cho khi máy tính A gửi thông điệp đến máy tính B thì B có thể trả lời lại cho A.

- Internet cung cấp một khối lượng thông tin và dịch vụ khổng lồ. Phần chủ yếu nhất của mạng Internet là World Wide Web.

Các dịch vụ trên Internet: o Thư điện tử (E-mail)



o Trò chuyện trực tuyến (Chat) o Máy truy tìm dữ liệu (Search engine) o Các dịch vụ thương mại và chuyển ngân o Các dịch vụ về y tế (Chữa bệnh từ xa) o Các dịch vụ về giáo dục (Các lớp học ảo) o …

- Đại đa số các dịch vụ trên internet đều miễn phí. - Các cách thức thông thường để truy cập internet là quay số, băng rộng, không dây, vệ

tinh và qua điện thoại cầm tay.

1.1.2 World Wide Web - World Wide Web, gọi tắt là Web hoặc WWW, là một không gian thông tin toàn cầu

mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet.

Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet, chẳng hạn như dịch vụ thư điện tử.

Sở dĩ Web trở nên phổ biến vì nó cung cấp cho người sử dụng khả năng truy cập dễ dàng từ đó người sử dụng có thể khai thác các thông tin trên Net dưới dạng văn bản, hình ảnh thậm chí cả âm thanh và video. Vì thế, Web đôi khi còn được gọi là đa phương tiện của mạng Internet.

Để dùng Web, người sử dụng phải có trình duyệt Web như Netscape hoặc Microsoft Internet Explorer. Trình duyệt Web là một ứng dụng tương thích với máy tính của bạn, cho phép bạn nhìn thấy các trang Web trên màn hình máy tính.

Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng trình duyệt web (web browser) để xem siêu văn bản. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web. Quá trình này cho phép người dùng có thể lướt các trang web để lấy thông tin. Tuy nhiên độ chính xác và chứng thực của thông tin không được đảm bảo.

Phân biệt Internet và WWW: Internet và WWW không đồng nghĩa. Internet là một tập hợp các mạng máy tính kết nối với nhau bằng dây đồng, cáp quang, v.v..; còn WWW, hay Web, là một tập hợp các tài liệu liên kết với nhau bằng các siêu liên kết (hyperlink) và các địa chỉ URL, và nó có thể được truy nhập bằng cách sử dụng Internet.

Các trình duyệt web thông dụng: o Internet Explorer có sẵn trong Microsoft Windows, của Microsoft o Mozilla và Mozilla Firefox của Tập đoàn Mozilla o Netscape Browser của Netscape o Opera của Opera Software o Safari trong Mac OS X, của Apple Computer o Maxthon của MySoft Technology o Avant Browser của Avant Force.

1.1.3 ISP Internet Service Providers - Các nhà Cung cấp Dịch vụ Internet ISP cung cấp các kết nối vào Internet cho người dùng ở nhà hay các doanh nghiệp. Có

ISP cục bộ, vùng, quốc gia và toàn cầu. Trong hầu hết trường hợp, ISP cục bộ đều nối vào ISP vùng, mà đến lượt mình ISP vùng lại nối vào ISP quốc gia hay toàn cầu. Tuy nhiên, cũng có thể bỏ qua trật tự nầy để nối trực tiếp vào các điểm chuyển mạch của Internet. Nếu bạn nghĩ Internet như một đường ống dữ liệu lớn với nhiều ống dữ liệu nhỏ hơn được nối với nó, khi đó bạn có thể nghĩ được là ISP cục bộ như người gác cổng để vào Internet.

Nhà cung cấp dịch vụ internet là một công ty với những máy tính siêu nhanh thường xuyên nối vào Internet thông qua một đường truyền tốc độ cao. Công ty này sẽ bán cho bạn



quyền kết nối vào mạng và sử dụng một phần đường truyền của họ để đến với toàn mạng internet. Khi đã kết nối vào Internet bạn có thể truy nhập thông tin của mọi máy tính trên mạng. Bạn cũng có thể cung cấp những thông tin của riêng bạn để mọi người có thể truy nhập.

Để máy tính của bạn liên kết được với máy của ISP, bạn cần một modem, thiết bị dùng để chuyển từ tín hiệu số trong máy tính sang tín hiệu tương tự của đường điện thoại, và bạn cần một phần mềm giúp cho máy của bạn giao tiếp với những máy khác.

Các Nhà cung cấp dịch vụ Internet (IPS) tại Việt Nam gồm Tập đoàn Bưu chính Viễn thông Việt Nam (VNPT), Tổng Công ty Viễn thông Quân đội (Viettel), Công ty Viễn thông Điện lực (EVN Telecom), Công ty Cổ phần Bưu chính Viễn thông Sài Gòn (SPT), Công ty Netnam và một số công ty khác.

Việt Nam chính thức kết nối vào Internet từ ngày 19/11/1997.

1.1.4 URL - Tài nguyên (Resource) là một đối tượng trên internet nằm trên máy chủ. Đối tượng này

chính là các thư mục, các tập tin khác nhau, gồm tập tin văn bản, đồ họa, video và âm thanh. Vậy làm sao để truy xuất được đến các đối tượng này? Để truy xuất được các đối tượng (các tài nguyên), cần phải biết địa chỉ của đối tượng đó.

Đó chính là URL. Xét ví dụ sau. - Ví dụ về một URL:

http://tuyensinh.edu:80/diemthi/timkiem.aspx?sobaodanh=1234 \__/ \__________/ \_/\_________________/ \____________/ | | | | | GT MPV C ĐD TV

Ở đây, GT là giao thức, MPV là máy phục vụ, C là cổng, ĐD là đường dẫn, TV là truy vấn.

- Một URL gồm có nhiều phần: o Tên giao thức (ví dụ: http, ftp) o Tên miền (ví dụ: cit.udn.vn) o Chỉ định thêm cổng (có thể không cần) o Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (vídụ: thumuc/trang) o Các truy vấn (có thể không cần) o Chỉ định mục con (có thể không cần)

- URL, viết tắt của Uniform Resource Locator, được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL.

While it is hard to believe, given the millions, perhaps billions, of them out there, every document and resource on the Internet has a unique address, known as its uniform resource locator (URL; commonly pronounced "you-are-ell"). A URL consists of the document's name preceded by the hierarchy of directory names in which the file is stored (pathname), the Internet domain name of the server that hosts the file, and the software and manner by which the browser and the document's host server communicate to exchange the document (protocol ):

protocol://server_domain_name/pathname

Here are some sample URLs: http://www.kumquat.com/docs/catalog/price_list.html http://www.kumquat.com/ ftp://ftp.netcom.com/pub/

The first example is an absolute or complete URL. It includes every part of the URL format: protocol, server, and the pathname of the document. While absolute URLs leave nothing to the imagination, they can lead to big headaches when you move documents to another directory or server. Fortunately, browsers also let you use relative URLs and automatically fill in any missing portions with respective parts from the current document's base URL. The second example is the simplest relative URL of all; with it, the browser assumes that the price_list.html



document is located on the same server, in the same directory as the current document, and uses the same network protocol.

Relative URLs are also useful if you don't know a directory or document's name. The third URL example, for instance, points to kumquat.com's web home page. It leaves it up to the kumquat server to decide what file to send along. Typically, the server delivers the first file in the directory, one named index.html, or simply a listing of the directory's contents.

Although appearances may deceive, the last FTP example URL actually is absolute; it points directly at the contents of the /pub directory.

Các giới hạn của URL? Định dạng URL chỉ chấp nhận các ký tự sau trong chuỗi URL:

o Ký tự a đến z o Chữ số từ 0 đến 9 o Các dấu hiệu $ - + ! * ‘ ( ) , o Các ký tự đặc biệt được dành riêng cho các mục đích đặc biệt: ; / ? : @ = &

Không một ký tự nào khác được phép xuất hiện trong URL. Và các ký tự đặc biệt chỉ được dngf với vai trò riêng của chúng. Các ký tự nằm ngoài các quy tắc này phải được viết một cách đặc biệt, bằng cách mã hóa (chẳng hạn sử dụng hàm escape và unescape trong JavaScript).

1.2 Tổng quan về một hệ thống Web 1.2.1 Mô hình một hệ thống Web nói chung: Một hệ thống Web là một hệ thống cung cấp thông tin trên mạng Internet thông qua các

thành phần Máy chủ, trình duyệt và nội dung thông tin.

1.2.2 Nguyên tắc hoạt động: - Nguyên tắc hoạt động của phần lớn các ứng

dụng web được diễn ra như sau: 1. Người sử dụng sẽ thực hiện lời triệu gọi

(request) đến máy chủ Web. Cách đơn giản nhất của hành động này là người sử dụng dung trình duyệt web gõ địa chỉ tên miền cần truy cập (http://www.cit.udn.vn) gửi yêu cầu đến máy chủ web.

2. Máy chủ Web sẽ xem xét và thực hiện các yêu cầu từ phía trình duyệt của người dùng, chẳng hạn như lấy các giá trị truy vấn, thực hiện các phép toán, truy xuất cơ sở dữ liệu…

3. Máy chủ Web sau khi tính toán xong sẽ đưa ra một trang kết quả “thuần HTML” để trả lại cho phía trình duyệt máy khách.

4. Tại máy khách, trình duyệt sẽ đọc trang HTML nhận được và hiển thị ra trên màn hình.



- Người dung sẽ trở nên trong suốt với những gì diễn ra đằng sau trình duyệt web. Họ không cần biết máy chủ phải thực hiện những phép tính gì, có phải kết nối cơ sơ dữ liệu không… Người dùng chỉ cần thấy trên trình duyệt là một trang web sống động, với những thông tin cần thiết, và tất nhiên, là càng nhanh càng tốt.

- Trong trường hợp Web tĩnh thì máy chủ web sẽ lấy thông tin lưu sẵn trên máy chủ dạng thư mục, files và gửi lại theo yêu cầu của máy khách.

- Trường hợp web động phải dụng các ngôn ngữ lập trình web như ASP, PHP, JSP, … để kết nối và khai thác cơ sở dữ liệu.



CHƯƠNG 2: NGÔN NGỮ HTML

2.1 Giới thiệu HTML HTML (hay Hypertext Markup Language-Ngôn ngữ liên kết siêu văn bản) là ngôn ngữ

đánh dấu chuẩn dùng lập trình các tài liệu World Wide Web, tài liệu là các tập tin văn bản đơn giản. Ngôn ngữ HTML dùng các thẻ hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và graphics ,và đáp lại những thao tác của người dùng bởi các thao tác ấn phím và nhắp chuột. Hầu hết các Web browser, đặc biệt là Microsoft Internet Explorer và Netscape Navigator, nhận biết các thẻ của HTML vượt xa những chuẩn HTML đặt ra.

Trang HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, phần mềm đọc email , hay một thiết bị không dây như một chiếc điện thoại di động.

2.2 Trình soạn thảo HTML Bạn có thể soạn thảo mã lệnh HTML trên bất kỳ trình soạn thảo văn bản nào, như

notepad, word, WordPad… Chúng ta sẽ tìm hiểu một số công cụ soạn thảo HTML hữu ích:

2.2.1 Microsoft FrontPage Microsoft đã phát triển một công cụ soạn thảo HTML khá phổ biến với tên gọi FrontPage.

FrontPage cung cấp cho các nhà phát triển web một số công cụ về JavaScript hỗ trợ trong việc tạo ra một website tương tác. FrontPage đã từng được thừa nhận là công cụ phát triển HTML và JavaScript hàng đầu.



FrontPage còn chứa nhiều đặc điểm hữu dụng, bao gồm những khả năng như thiết kế một cấu trúc website trước khi tạo bất kỳ một trang web nào, cấu hình tính an toàn cho website, thiết lập kiểu trên toàn site và tạo ra các hình ảnh biểu ngữ (banner) tùy biến.

2.2.2 Macromedia Dreamweaver MX Macromedia Dreamweaver MX là một trình soạn thảo HTML và JavaScript rất phổ biến

trong cộng đồng các nhà phát triển web chuyên nghiệp. Nó cung cấp nhiều đặc điểm, bao gồm khả năng soạn thảo hầu hết các ngôn ngữ lập trình phía máy chủ phổ biến như ASP, JSP và PHP, cung cấp một số thành phần JavaScript được xây dựng sẵn, tích hợp tốt với cơ sở dữ liệu và tuân thủ các chuẩn như HTML và XML.

Nếu bạn đang bắt đầu học HTML, tốt hơn hết, hãy sử dụng Notepad.

2.3 Tạo trang HTML đầu tiên Bạn hãy cùng thử tạo một trang HTML đầu tiên với sự trợ giúp của notepad. Bạn nên có

một thư mục (folder) để chứa các ví dụ mà bạn tạo ra. Bước 1: Tạo mới 1 file Text document

đặt tên là vidu1.htm



Bước 2: Mở vidu1.htm bằng chương trình Notepad

Bước 3: Nhập vào đoạn mã HTML như sau và lưu lại:

<html> <head>

<title>Hello</title> </head> <body>

Đây là trang web đầu tiên của tôi. </body>

</html>

Bước 4: Mở file vidu1.htm để xem kết quả



Có thể bạn sẽ gặp phải thông báo rằng các ký tự mà bạn sử dụng là Unicode (các ký tự Tiếng Việt trong ví dụ này), trong khi file vidu1.htm được lưu với mã ANSI.

Nếu bạn không có điều chỉnh gì, thì một số chữ trong Tiếng Việt sẽ không hiển thị đúng,

như sau:

Trong trường hợp này, bạn hãy chọn Menu File Save As, trên hộp thoại Save

As chọn Encoding là UTF-8. Lưu lại.

Bạn hãy làm các bước tương tự với những ví dụ sau này.



2.4 Cấu trúc trang HTML Một tài liệu HTML gồm hai phần riêng biệt, phần đầu (head) và phần thân (body). Phần

đầu chứa đựng những thông tin về tài liệu và không được hiển thị lên màn hình. Phần thân thì chứa đựng mọi thứ được trình bày lên màn hình như là một phần của trang Web.

Ví dụ 2.2-1 <html>

<head> <title>Tiêu đề trang web</title>

</head> <body>

Thân trang web </body>

</html>

2.4.1 Thẻ và cấu trúc thẻ Như vậy, một trang HTML bao gồm nội dung trang và các thẻ quy định cách hiển thị. Khi trình duyệt (web browser) hiển thị nội dung 1 trang web nó sẽ tìm kiếm trong đó

những đoạn mã đặc biệt là các thẻ được đánh dấu bởi ký hiệu < và >, và căn cứ vào đó để thể hiện. Cú pháp tổng quát của 1 thẻ: <tên_thẻ thuộc_tính_1=giá_trị_1 thuộc_tính_2=giá_trị_2 >Văn bản </tên_thẻ>

hoặc đơn giản hơn là: <tên_thẻ>Chuỗi văn bản</tên_thẻ>

Phần thẻ là một mã xác định hiệu ứng mà bạn yêu cầu. Ví dụ, cho thẻ nét đậm là <B>. Cho nên nếu bạn muốn câu “Trường Cao đẳng Công nghệ Thông tin” xuất hiện theo kiểu chữ đậm (bold), bạn phải đưa dòng sau đây vào tài liệu của mình:

<b>Trường Cao đẳng Công nghệ Thông tin</b>.

Ví dụ: Ví dụ 2.2.1-1 <html>

<head> <title>Ví dụ</title>

</head> <body>

Chữ thường <b>Chữ đậm</b>

</body> </html>

Kết quả:



Thẻ đầu tiên (<b>) báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theo bằng phông chữ đậm, liên tục cho đến thẻ </b>. Dấu gạch chéo (/) xác định đó là thẻ kết thúc, và báo cho trình duyệt ngưng hiệu ứng đó. HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê, liên kết, và nhiều thứ nữa.

Vì sao trên trình duyệt không xuống dòng như trong mã nguồn? Trình duyệt sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư

thừa trong tập tin HTML của bạn. Vì vậy, để hiển thị văn bản ở một dòng mới, bạn hãy thêm vào thẻ xuống dòng là <br>.

Mỗi thẻ đều có tên thẻ, đôi khi được bổ sung thêm một danh sách tùy chọn các thuộc tính, tất cả được đặt giữa dấu < và dấu >. Thẻ đơn giản nhất là các thẻ chỉ chứa tên thẻ, ví dụ như thẻ <head> hay thẻ <b>. Những thẻ phức tạp hơn chứa một hoặc nhiều thuộc tính, quy định cho tính chất của thẻ đó.

Ví dụ: <font color=red size=14>Đoạn văn màu đỏ, cỡ chữ 14</font>

Tên thẻ: font Thuộc tính: color (màu sắc) và size (cỡ chữ)

Ví dụ 2.2.1-2 <html>

<head> <title>Ví dụ</title>

</head> <body>

Chữ thường <font color=red size=7>Đoạn văn màu đỏ, cỡ chữ 14</font>

</body> </html>

Trên thực tế, khi dùng định dạng HTML thuần túy, thay vì CSS, kích thước phông chữ HTML được thay đổi từ 1 đến 7 với 1 là nhỏ nhất và 7 là lớn nhất. Nếu bạn đặt kích thước lớn hơn 7, trình duyệt sẽ tự động hiểu là 7 (lớn nhất)

Theo tiêu chuẩn của ngôn ngữ HTML, thẻ và các thuộc tính sẽ không có sự phân biệt chữ hoa và chữ thường. Điều đó có nghĩa là không có sự khác nhau về kết quả khi sử dụng một trong các thẻ sau: <head>, <Head>, <HEAD>, hay thậm chí <HeAd>, những thẻ này là tương đương nhau. Tuy nhiên, bạn nên sử dụng toàn bộ chữ thường trong thẻ HTML một cách nhất quán vì đó là điều bắt buộc trong chuẩn XHTML.



Bạn nên tạo cho mình thói quen tuân theo các chuẩn để trang web của mình có thể hoạt động tốt nhất cho hiện tại và tương lai.

Các thuộc tính, nếu có, sẽ được đặt tiếp theo sau tên thẻ, và chúng được phân cách nhau bởi một hay nhiều ký tự trắng, ký tự tab, hoặc ký tự xuống dòng (enter). Thứ tự của các thuộc tính không quan trọng.

Giá trị của thuộc tính, nếu có, sẽ được đặt ngay sau dấu bằng (=) sau tên thuộc tính. Bạn có thể thêm vào các ký tự trắng trước và sau dấu bằng, chẳng hạn như: width=6, width = 6, width =6 đều có ý nghĩa giống nhau. Tốt nhất là không nên thêm các ký tự trắng vào trước và sau dấu bằng. Khi đó mã HTML sẽ dễ đọc hơn, và dễ dàng phân biệt được các cặp thuộc tính/giá trị trong một thẻ có nhiều thuộc tính.

Nếu giá trị của thuộc tính là một từ hay một số (không có dấu cách space), bạn có thể đặt nó ngay sau dấu bằng. Trong trường hợp ngược lại, giá trị của thuộc tính phải được đặt giữa cặp dấu nháy đơn hoặc kép.

Thành phần kết thúc của thẻ không chứa bất kỳ một thuộc tính nào. Các thẻ có thể được đặt lồng vào nhau và cùng tác động lên đoạn văn bản được đặt

trong nó. Ví dụ:

Dòng văn bản này <b> in đậm <i>và in nghiêng</i><b>

Một số thẻ không có thành phần kết thúc. Chẳng hạn như thẻ xuống dòng <br>, thẻ hiển thị hình ảnh <img>, …

Thẻ <HTML></HTML>: Thẻ <HTML> ở đầu trang web tĩnh và </HTML> ở cuối trang.

Trang web được bắt đầu và kết thúc bởi thẻ này. Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>. Thẻ này không làm gì khác ngoài

nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các mã HTML. Tương tự, dòng cuối trong tài liệu của bạn luôn luôn là thẻ </HTML>, tương đương như Hết.

Thẻ <HEAD></HEAD>: Thẻ <HEAD> đánh dấu phần đầu của trang HTML, được đặt ngay sau thẻ <HTML>. Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Mặc dù bạn có thể đặt một số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là tên trang. Thẻ <HEAD> có thể bỏ qua.

Trong phần lớn trường hợp, phần đầu trang sẽ chứa: o Tiêu đề của trang (<title>) o Định nghĩa bảng kiểu (<style> và <link>) o Dữ liệu meta, chẳng hạn như các từ khóa tìm kiếm <meta> o Các hàm JavaScript (<script>)

Thẻ tiêu đề <TITLE></TITLE>: Thẻ <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 (web browser: Internet Explorer hoặc Netscape Navigator). Thẻ này chỉ hợp lệ khi đưa vào bên trong phần <HEAD>

Thẻ thân trang <BODY></BODY>: dùng chỉ định bắt đầu và kết thúc phần nội dung trang web.



HTML Kết quả

Ví dụ 2.2.1-3 <html> <head> <title>Welcome</title> </head> <body> Chào các bạn! </body> </html>

Nếu bạn mở thẻ, hãy đóng thẻ Tuy có một số thẻ HTML là thực thể độc lập, nhưng đa phần được cặp đối với thẻ đầu và

cuối. Ví dụ <html> là thẻ cặp đôi, do đó bạn cần bổ sung thẻ đóng </html> ở cuối hồ sơ (trang

web). Tương tự nếu bạn bắt đầu với đoạn in nghiêng bằng <i> (thẻ in nghiêng), thì phải kết thúc với </i>.

Trong trường hợp, nếu bạn xác định nhầm dấu chéo ngược thay vì dấu chéo thuận, như <\html>, hoặc một số biến thể khác, trình duyệt sẽ không hiểu và bỏ qua thẻ đóng. Khi điều này xảy ra, thuộc tính được xác định trong thẻ mở tiếp tục vượt qua điểm mà bạn muốn ngừng. Trong nhiều tình huống, việc quên thẻ đóng có thể làm bhongf hoàn toàn trang web.

2.4.2 Màu sắc trong thiết kế web Màu sắc được sử dụng trong thiết kế web thông

thường được biểu diễn với việc sử dụng Mô hình màu RGB;

Mô hình màu RGB sử dụng mô hình bổ sung trong đó ánh sáng đỏ, xanh lá cây và xanh lam được tổ hợp với nhau theo nhiều phương thức khác nhau để tạo thành các màu khác. Từ viết tắt RGB trong tiếng Anh có nghĩa là đỏ (red), xanh lá cây (green) và xanh lam (blue), là ba màu gốc trong các mô hình ánh sáng bổ sung.

Biểu diễn một màu dưới dạng: #rrggbb - là giá trị hexadecimal (thập lục) red-green-

blue Như vậy dải màu sẽ có giá trị từ: #000000 đến #FFFFFF, tất cả gồm có 256 x 256 x 256

= 16.777.216 màu. Tên của các màu được sử dụng trong HTML: Những màu cơ bản sẽ được gán một tên riêng. Khi đó, trong mã HTML, để thể hiện màu

đỏ, thay vì sử dụng mã màu #FF0000, ta dùng tên của màu đó là “red”. Chuẩn HTML 4.01 định nghĩa 16 tên màu sau đây:

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal

aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF

gray #808080 green #008000 lime #00FF00 maroon #800000

navy #000080 olive #808000 purple #800080 red #FF0000

silver #C0C0C0 teal #008080 white #FFFFFF yellow #FFFF00

Các màu sắc cầu vồng nằm theo thứ tự đỏ, da cam, vàng, lục, lam, chàm, tím. Quay trở lại với thẻ thân trang <BODY>. Bạn có thể xác lập màu nền cho trang web thông

qua thuộc tính BGCOLOR (background color) của thẻ này. Bạn hãy nhớ lại cấu trúc của một thẻ HTML, trong đó bao gồm tên thẻ và các thuộc tính.

Để xác lập màu nền là màu đỏ, sử dụng: <body bgcolor=”#FF0000”>


hoặc: <body bgcolor=red>


…và thêm chữ màu trắng: <body bgcolor=red text=white>


Ví dụ 2.2.1-4 <html>

<head> <title>VD Màu nền</title> </head> <body bgcolor=red text=white> Trang này có màu nền là ĐỎ<br> Và chữ màu TRẮNG </body>

</html>

2.4.3 Thẻ chú thích

Thẻ chú thích :

Giống như bất cứ một ngôn ngữ lập trình nào khác, một trang mã HTML sẽ trở nên khó hiểu, thậm chí cả đối với người viết ra chúng, nếu như trong đó không có một dòng chú thích

nào. Bởi vậy, khi viết trang HMTL, bạn nên thêm vào những dòng chú thích cần thiết về những gì bạn đang làm.

Ðể thêm những dòng chú thích trong trang HTML, sử dụng cú pháp sau: 

Tất cả những gì nằm trong phần chú thích, nghĩa là nằm giữa cặp thẻ đặc biệt , sẽ không được trình duyệt hiển thị. Cho phép có khoảnh trắng giữa -- và >, nhưng không được có khoảng trắng giữa <! và --.

Mặc dù đoạn văn bản chú thích không được hiển thị trên trình duyệt, nhưng bất cứ người nào cũng có thể đọc được nó khi mở xem mã nguồn của trang HTML (vào View Source). Bởi vậy, hãy thận trọng với những gì bạn viết trong những dòng chú thích.

2.4.4 Các thẻ định dạng trình bày

Thẻ tiêu đề:

Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những thẻ tiêu đề (heading tag). Dạng các thẻ tiêu đề của HTML là:

<hN>Dòng tiêu đề</hN>

N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Cỡ tiêu đề nhỏ dần từ <h1> đến <h6>.

Thẻ Tiêu đề được sử dụng trong trường hợp nào? Nó tương tự như việc đặt Heading trong Microsoft Word. Chẳng hạn trong tài liệu mà các bạn đang xem, chúng ta có thể sử dụng thẻ tiêu để <h1> cho tên của Chương 1, Chương 2, … Sử dụng thẻ tiêu đề <h2> cho tên của các mục 1.1, 1.2… của Chương 1, và cứ tương tự như thế.

Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :

HTML Kết quả

Ví dụ 2.2.1-5 <html> <head> <title>Heading</title> </head> <body>  <h1>Dòng tiêu đề 1</h1> <h2>Dòng tiêu đề 2</h2> <h3>Dòng tiêu đề 3</h3> <h4>Dòng tiêu đề 4</h4> <h5>Dòng tiêu đề 5</h5> <h6>Dòng tiêu đề 6</h6> </body> </html>

Thẻ ngắt dòng <br> (xuống dòng không sang đoạn mới):

Để ngắt dòng trong HTML, chúng ta dùng thẻ ngắt dòng <br />. Giống như các thẻ khác, thẻ ngắt dòng có thể xuất hiện bất kỳ nơi nào trong văn bản, ở cuối dòng muốn ngắt. Đối với thẻ ngắt dòng <br />, không có thẻ đóng </br>.

Bạn cần lưu ý rằng, dòng tiếp theo vẫn ở cùng đoạn văn bản so với dòng trước nó.

Thẻ ngắt đoạn <p></p> (xuống dòng sang đoạn mới):

Để ngắt đoạn văn bản và chuyển sang đoạn văn bản (paragraph) mới, ta dùng thẻ <p>. Thành phần </p> cuối đoạn không nhất thiết phải có. Có thể chỉ định các thuộc tính của thẻ này như sau:

<p align=align-type>

Trong đó, align = align-type dùng chỉ định canh đoạn mới.

align-type = left (canh trái), right (canh phải) center (canh giữa). justify (canh đều 2 bên)

HTML Kết quả

Ví dụ 2.2.1-6 <html> <head> <title>Paragraph</title> </head> <body>  Con cóc trong hang<br> Con cóc nhảy ra <p align="center"> Con cóc nhảy ra<br> Con cóc ngồi đó</p> <p align="right"> Con cóc ngồi đó<br> Con cóc nhảy đi.</p> </body> </html>

Thẻ thêm đường thẳng nằm ngang <hr>:

Sử dụng thẻ <hr> để thêm đường thẳng nằm ngang trong trang web. Thẻ này được định nghĩa như sau:

<hr align=align-type color=color noshade size=n width=m />

Trong đó: - align=align-tpye: canh lề cho đường thẳng ngang, align-type có thể là left, right, center - color=color: màu đường thẳng ngang - noshade: không có bóng - size=n: độ đậm của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị pixel. Ví dụ 2.2.1-7 <html> <head> <title>Paragraph</title> </head> <body> <p align="left">Đoạn văn bản 1<br>Canh trái</p>



<hr align="center" color="#FF0000" noshade size="3" width="200" /> <p align="right">Đoạn văn bản 2<br>Canh phải</p> <hr align="left" color="black" size="2" width=”20%” /> </body> </html>

Chú ý <hr align="left" color="black" size="2" width=”20%” />

Trong trường hợp thuộc tính chiều rộng được chỉ định bằng phần trăm ( ví dụ width=20%), thì giá trị chiều rộng bằng 20% chiều rộng hiện tại của trình duyệt. Như vậy chiều rộng của đường thẳng nằm ngang thay đổi phụ thuộc vào bề rộng trình duyệt. Bạn hãy thay đổi và kiểm tra.

Thẻ in đậm <b></b>:

Hiển thị văn bản đậm theo physical type

Thẻ in nghiêng <i></i>:

Hiển thị văn bản nghiêng theo physical type

Thẻ gạch dưới <u></u>:

Hiển thị văn bản gạch dưới theo physical type

Thẻ gạch giữa <s></s>:

Hiển thị văn bản gạch giữa (strikeout) theo physical type

Ví dụ 2.2.1-8 <html> <head> <title>Text</title> </head> <body> Dòng thứ 1: thông thường<br>

<b>Dòng thứ 2: đậm</b><br> <i>Dòng thứ 3: nghiêng</i><br> <u>Dòng thứ 4: gạch dưới</u><br> <s>Dòng thứ 5: gạch giữa</s><br>



<i><b>Dòng thứ 6: vừa đậm vừa nghiêng</b></i><br> <i><u>Dòng thứ 7: vừa nghiêng vừa gạch dưới</u></i>

</body> </html>

Thẻ đậm logic type <STRONG></STRONG>:

Hiển thị văn bản đậm theo logic type

Thẻ nghiêng logic type <EM></EM>:

Hiển thị văn bản nghiêng theo logic type

Thẻ gạch ngang logic type <STRIKE></STRIKE>:

Hiển thị văn bản gạch dưới theo logic type

Thẻ chỉ số logic type <SUB></SUB>:

Hiển thị văn bản dạng chỉ số theo logic type

Thẻ mũ logic type <SUP></SUP>:

Hiển thị văn bản dạng mũ theo logic type Ví dụ: <html> <head> <title>Thẻ số mũ – chỉ số</title> </head> <body> (x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = 1 </body> </html>



Thẻ định font chữ cơ sở <BASEFONT></BASEFONT>:

Dùng thẻ <basefont> để chỉ định kiểu chữ, cỡ chữ, màu sắc cho các văn bản không đị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 định là 3. color=color: màu văn bản face=name: tên font

Thẻ font chữ <FONT></FONT>:

Thẻ <font> được dùng để chỉ định kiểu chữ, cỡ chữ, màu sắc cho phần văn bản mà nó tác động. Ðịnh nghĩa như sau:

<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. Thêm

dấu cộng + hoặc trừ - phía trước để chỉ định việc tăng hoặc giảm kích thước so với kích thước đã định trong basefont.

color=color: màu văn bản face=name: tên font

Ví dụ 2.2.1-9 <html> <head> <title>Text</title> </head> <body> <basefont size="3"></basefont>

<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 là 3 + 1 = 4</font></p> <p><font size="+2">Kích thước văn bản là 3 + 2 = 5</font></p> <p><font size="-1">Kích thước văn bản là 3 - 1 = 2</font></p>

</body> </html>

Một số font unicode thường được dùng: face=arial, Times New Roman, …



Ký tự định dạng trước ()

Chúng ta đã biết là một Web browser sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng.

Kiểu ký tự định dạng trước cho phép bạn có thể bảo toàn các dấu cách và dấu xuống dòng trong trang văn bản HTML giống như khi bạn gõ vào trong quá trình soạn thảo. Điều đó có nghĩa là bạn không nên sử dụng các thẻ <BR> cũng như <P> trong đoạn ký tự định dạng trước.

Browser sử dụng phông chữ bề rộng cố định (fixed-width font) để hiển thị nội dung trong phần ký tự định dạng trước. Thông thường, đó là phông hệ thống đang được sử dụng trong máy tính của bạn.

Kiểu ký tự định dạng trước rất có ích trong trường hợp dấu cách là không thể thiếu được, chẳng hạn như khi thể hiện một đoạn mã chương trình

Kiểu ký tự định dạng trước được bắt đầu bằng thẻ <PRE> và kết thúc bằng thẻ </PRE>. Ví dụ 2.2.1-10 <html> <head> <title>Text</title> </head> <body> <p>This is a function: </p> function fcompare(a, b) { if (a > b) return a; else return b; } </body> </html>

Ví dụ 2.2.1-11 <html> <head> <title>Text</title> </head> <body> <pre> <p>This is a function: </p> function fcompare(a, b) { if (a > b) return a; else return b; } </pre> </body> </html>

Thẻ liên kết:

Liên kết siêu văn bản (Hyperlinks) Liên kết siêu văn bản (Hyperlinks hay gọi tắt là link) là công cụ cơ bản để “di chuyển” trên

WWW. Hyperlinks được dùng để di chuyển đến các điểm khác nhau được đánh dấu trên trang



web, được dùng để tải các tập tin, hay có thể mở một trang web được đặt trên một máy chủ web khác.

Dùng thẻ <a> để xác lập một liên kết. Cấu trúc như sau: <a href=”địa_chỉ_liên_kết (url)”>Miêu tả liên kết</a>

Ví dụ:

<a href=”http://cit.ud.edu.vn/Albums.aspx”>Albums ảnh Trường CĐ CNTT</a>

Trong ví dụ này, nếu bạn bấm chuột vào dòng “Albums ảnh Trường CĐ CNTT”, bạn sẽ được chuyển đến địa chỉ “http://cit.ud.edu.vn/Albums.aspx”, tức là trình duyệt sẽ mở trang Albums ảnh tương ứng.

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

Thuộc tính href chỉ định địa chỉ liên kết, dòng văn bản sau dấu “=” là địa chỉ đối tượng liên kết. Dòng văn bản giữa cặp thẻ đóng/mở <a> và </a> thường dùng để miêu tả liên kết, hoặc có thể là một đoạn văn bất kỳ. Khi người duyệt web bấm chuột vào dòng này, trình duyệt sẽ chuyển đến đối tượng liên kết.

Lưu ý: Có thể sử dụng: <a href="mailto:địa_chỉ_email"> Liên kết này sẽ kích hoạt chương trình Mail và tự động điền địa chỉ vào mục To giùm bạn.

Bạn có thể khai báo luôn cả chủ đề thư (?subject). Ví dụ:

<a href="mailto:[email protected]?subject=Góp ý">Vào đây để gửi ý kiến của bạn</a>

o name Thuộc tính name cho phép bạn đánh dấu vị trí để làm đích cho các tài liệu khác liên kết

qua. Ví dụ:

<a name=”top”>Đầu trang</a>

Ở cuối trang web có thể đặt liên kết đến đầu trang như sau: <a href=”#top”>Lên đầu trang</a>

Và các trang web khác có thể liên kết với trang này ngay tại vị trí đã được đánh dấu (đầu trang) bằng liên kết:

<a href=”trangchu.html#top”>Chuyển đến đầu trang chủ</a>

Màu của liên kết: Trong trang web, bạn thấy liên kết nào cũng màu xanh, gõ vào thì thành màu trắng, sau

khi gõ thì màu xám. Ðiều đó được thực hiện bởi các đoạn code sau (trong body tag): <body bgcolor="white" link="blue" alink="white" vlink="gray">

(alink= active link, vlink= visited link)

Ví dụ <body style="font-size:25" bgcolor="white" link="blue" alink="red" vlink="gray"> <a href="http://www.cit.udn.vn">Trường CĐ CNTT</a><br> <a href="http://dut.udn.vn">Trường Đại học Bách khoa</a><br> <a href="http://edt.udn.vn">Trường Đại học Kinh tế</a><br> </body>



2.4.5 Form Khi viết một trang web, bạn muốn không chỉ cung cấp thông tin cho người đọc, mà còn

muốn giao tiếp với họ và thu nhận các thông tin phản hồi. Để làm được điều đó, bạn cần dùng Form (biểu mẫu).

Forms are the most popular way to make web pages interactive. Like forms on paper, a form on a web page allows the user to enter requested information and submit it for processing. (Fortunately, forms on a web page are processed much faster.)



Form chứa một hay nhiều ô nhập dữ liệu (text-input box), nút bấm (clickable button), nút

lựa chọn (checkbox), hình ảnh (image)…, tất cả được đặt trong thẻ <form>. Bạn có thể tạo ra nhiều form trong một trang HTML, và mỗi form chứa những thành phần bên trong khác nhau. Trong các thành phần của một form, thì nhãn (label) là thành phần thường được dùng nhất, vì nó có chức năng chú thích, diễn giải hay hướng dẫn cho người dùng để họ có thể điền đúng vào các thành phần của form. Và đối với một số thành phần của form, bạn có thể sử dụng các câu lệnh và sự kiện của JavaScript để tạo ra các hiệu ứng đa dạng cho form, chẳng hạn như kiểm tra tính đúng đắn của dữ liệu đã được người dùng nhập vào form.

Người dùng điền đầy đủ thông tin vào các trường của form, sau đó bấm chuột vào một nút nhấn (button) đặt biệt (Submit button), hoặc đơn giản là bấm phím Enter, để gửi tất cả những thông tin đó lên máy chủ (server). Trình duyệt sẽ làm nhiệm vụ đóng gói các thông tin và gửi đi. Tại máy chủ, những thông tin nhận được từ người duyệt web sẽ được phân tích, xử lý và trả lời lại cho phía người duyệt web, thông thường là một trang HTML. Trang HTML có chức năng “trả lời” này đôi khi chỉ đơn giản là một câu cảm ơn (trong trường hợp lấy ý kiến người dùng chẳng hạn), hay là một lời hướng dẫn làm thế nào để nhập đúng thông tin vào các trường trên form (trong trường hợp thông tin nhập vào không hợp lệ).

Form có thể được đặt ở bất kỳ đâu trong phần thân (nghĩa là giữa cặp thẻ <body> và </body>) của trang HTML, với thẻ bắt đầu là thẻ <form>, và thẻ kết thúc tương ứng là thẻ </form>.

Để sử dụng form, cần phải xác định ít nhất 2 thuộc tính. Một thuộc tính để quy định dữ liệu được gửi đi đâu, thuộc tính kia quy định phương thức gửi dữ liệu là gì.

Ví dụ 2.2.5-1: <html> <head> <title>Login</title> </head> <body> <form action="Vd2_2_5-2.htm" method="get" name=”form1”> Họ: <input type="text" name="FirstName" /><br /> Tên: <input type="text" name="LastName" /><br> <input type="submit" value="Đăng nhập" /> </form> </body> </html>



Điền thông tin và bấm vào “Đăng nhập”:

Thuộc tính action Thuộc tính action là thuộc tính bắt buộc phải có khi sử dụng form. Nó xác định đường dẫn

URL của ứng dụng sẽ tiếp nhận và xử lý dữ liệu nhập vào từ form. Nói cách khác, thuộc tính action sẽ chỉ ra rằng, dữ liệu được nhập vào từ form, sau khi nhấn Submit, sẽ được gửi đi đâu.

Thẻ <form> với thuộc tính action có thể được thiết lập như sau: <form action=”http://ts.edu.vn/diemthi.aspx”> ……… </form>

Ví dụ trên chỉ ra rằng, trình duyệt cần phải gửi tất cả dữ liệu được nhập vào form đến trang diemthi.aspx theo địa chỉ url trong thuộc tính action.

Thuộc tính method Bên cạnh action, thì method cũng là một thuộc tính bắt buộc khi dùng thẻ <form>. Thuộc

tính method chỉ rõ phương thức mà trình duyệt sẽ gửi dữ liệu của form đến máy chủ để xử lý. Có 2 phương thức là GET và POST.

Với phương thức POST, trình duyệt sẽ gửi dữ liệu qua 2 bước: đầu tiên, dựa vào địa chỉ URL được xác định bởi thuộc tính action, trình duyệt sẽ kết nối với ứng dụng được chỉ định để xử lý dữ liệu trên form. Ứng dụng này được đặt tại máy chủ. Một khi kết nối được thiết lập, trình duyệt mới gửi dữ liệu lên máy chủ.

Với GET, cách thức gửi dữ liệu từ form lên máy chủ sẽ được thực hiện theo một cách khác. Việc kết nối với máy chủ và việc gửi dữ liệu được thực hiện cùng một lúc. Trình duyệt sẽ nối dữ liệu lấy từ form vào địa chỉ URL trong thuộc tính action, và gửi lên máy chủ.

Chú ý rằng, với phương thức POST, trình duyệt sẽ đóng gói tất cả dữ liệu nhập và từ form và gửi lên máy chủ. Còn với phương thức GET, dữ liệu nhập vào sẽ được nối vào địa chỉ URL để gửi đi.

Dưới đây là một ví dụ sử dụng form với với thuộc tính method là GET <form method=”GET” action="http://ts.edu.vn/diemthi.aspx"> ... </form>

Việc nhắp chuột vào một siêu liên kết (hyperlink) trong một trang web, thông điệp email hay tài liệu khác, việc gõ một địa chỉ vào thanh địa chỉ của một trình duyệt và nhấn Enter, hay nhấn chuột vào các nút liên kết (button links) hay Favorites trong trình duyệt, tất cả đều sử



dụng phương thức GET. Cách duy nhất gửi các giá trị đến máy chủ từ những hành động này là qua chuỗi truy vấn (QueryString) được gắn thêm vào URL.

POST hay GET? Vậy trong trường hợp nào thì dùng POST, trong trường hợp nào dùng GET? - Để dữ liệu được truyền một cách tốt nhất, hãy dùng phương thức GET cho những form

có ít trường dữ liệu. - Chiều dài của chuỗi URL bị giới hạn, nên nếu dùng phương thức GET thì dữ liệu có

nguy cơ bị tràn và bị cắt bớt. Dùng phương thức POST cho phép gửi dữ liệu của form với nhiều trường, hay với những đoạn văn bản dài. Nghĩa là POST không bị giới hạn về kích thước lượng thông tin gửi đi.

- Trong những trường hợp đòi hỏi sự bảo mật về dữ liệu, hãy dùng POST. GET đưa các giá trị tường minh vào trong URL và sẽ được ghi lại trong file log khi đi qua các server.

Ở ví dụ 2.2.5-1, sử dụng phương thức GET, sau khi bấm vào nút “Đăng nhập” bạn sẽ thấy kết quả:

Nếu dùng phương thức POST:

Các thành phần thường được sử dụng trong form Để nhập dữ liệu vào form như văn bản, danh sách, chọn lựa,... chúng ta sử dụng các thẻ

<input>. Use the <input> tag to define any one of a number of common form "controls," as they

are called in the HTML 4 and XHTML standards, including text fields, multiple-choice lists, clickable images, and submission buttons. Although there are many attributes for the <input> tag, only the type and name attributes are required for each element (only type for a submission or reset button; see the following explanation). And as we describe in detail later, each type of input control uses only a subset of the allowed attributes. Additional <input> attributes may be required based upon which type of form element you specify.

Các thành phần của form gồm: Text boxes, Password boxes, Checkboxes, Option (Radio) buttons, Submit, Reset, File, Hidden and Image. Các thành phần này sẽ được chỉ định thông qua thuộc tính TYPE của thẻ <INPUT> </INPUT>.

o Text boxes



Ví dụ:

HTML Kết quả

<form … > First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>

o Password

Ví dụ:



HTML Kết quả

<form … > User: <input type="text" name="user" value=”Your name”> <br> Password: <input type="password" name="pw"> </form>

o Hidden

o Check Box

HTML Kết quả



<form … > I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br> I have a car: <input type="checkbox" name="vehicle" value="Car"><br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>

o Radio Button

HTML Kết quả

<form … > <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

o File Upload



o Submit

HTML

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>



o Image Submit Button

o Reset

o Text Area

HTML Kết quả



<form action="…" method=post> Your comments:<br> <textarea name="comments" cols=30 rows=4></textarea> <input type=submit value="submit"> </form>

o Select

o Drop Down List

o List Box

o Option



Notice the </option> end tags. They are not usually included in standard HTML

documents but must appear in XHTML.

HTML Kết quả

<form action="…" method=post> I enjoy: <select name=”hobby”> <option value=”hobby1”>Programming</option> <option value=”hobby2”>Swimming</option> <option value=”hobby3”>Reading</option> <option value=”hobby4”>Eating</option> <option value=”hobby5”>Sleeping</option> </select> <input type=submit value="Submit"> </form>

Bây giờ, bạn hãy thử tạo một form đơn giản sau (Ví dụ 2.2.5-11):



Ví dụ 2.2.5-11 <html> <head> <title>Example</title> </head> <body > <form action="xuly.asp" method=”post”> <h1>ĐĂNG KÝ TÀI KHOẢN</h1> <h2>Thông tin cá nhân</h2> Họ và tên: <input type="text" name="hoten" size="40"><br> Giới tính: <select name=”gioitinh”> <option value=”nam”>Nam</option> <option value=”nu”>Nữ</option> </select> <br> Địa chỉ: <input type="text" name="diachi" size="100"><br> Bạn muốn liên lạc bằng: <input type="radio" name="lienlac" value="email"> Email <input type="radio" name="lienlac" value="phone"> Phone<br> Sở trường: <input type="checkbox" name="sotruong" value="dabong">Đá bóng <input type="checkbox" name="sotruong" value="vannghe">Văn nghệ <input type="checkbox" name="sotruong" value="giaotiep">Giao tiếp <input type="checkbox" name="sotruong" value="hoctap">Học tập<br> <h2>Tài khoản</h2> Tên đăng nhập: <input type="text" name="tendangnhap"><br>



Mật khẩu: <input type="password" name="matkhau"><br> <input type=”submit” value="Submit"> </form> </body> </html>

2.4.6 Bảng Một bảng bao gồm nhiều dòng và nhiều cột, tạo thành ma trận các ô. Để tạo ra một bảng, chúng ta sử dụng cặp thẻ <table></table> Mỗi cặp thẻ <tr></tr> tạo ra một dòng trong bảng, và trong dòng ấy chúng ta có thể sử

dụng nhiều cặp thẻ <td></td> để tạo ra các ô, tương ứng với các cột.

<table>

<tr> <td> Ô 11 </td>

<td> Ô 12 </td>

<td> Ô 13 </td>

</tr>

<tr> <td> Ô 21 </td>

<td> Ô 22 </td>

<td> Ô 23 </td>

</tr>

<tr> <td> Ô 31 </td>

<td> Ô 32 </td>

<td> Ô 33 </td>

</tr>

</table>

Để đóng khung cho bảng, sử dụng thuộc tính border.

HTML Kết quả

Ví dụ 2.2.7-1 <html> <head> <title>Table</title> </head> <body> <table border="1"> <tr> <td>Ô 11</td> <td>Ô 12 </td> </tr> <tr> <td>Ô 21</td> <td>Ô 22 </td> </tr> </table> </body> </html>

Chiều rộng mặc định của bảng sẽ là chiều rộng lớn nhất của dòng rộng nhất trong bảng.

Ðể chỉ định chiều rộng các bảng, sử dụng thuộc tính WIDTH để quy định chiều rộng. Ví dụ:

<table border=”1” width=”100%”> hay <table border=”1” width=”400px”>



Ðể thêm tiêu đề cho bảng, sử dụng thẻ <CAPTION></CAPTION>. Mặc định tiêu đề của bảng nằm ở trên và canh 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.

Ðể thêm vào các ô trải dài trên nhiều cột, dòng khác, dùng thuộc tính COLSPAN=n và ROWSPAN=n.

HTML Kết quả

Ví dụ 2.2.7-2 <html> <head> <title>Table</title> </head> <body> <table border="1" width="100%"> <caption align="right"> Bảng điểm</caption> <tr> <td rowspan="3">Học kỳ I</td> <td colspan="2">Kết quả thi</td> </tr> <tr> <td>Văn</td> <td>Toán</td> </tr> <tr> <td>10</td> <td>9</td> </tr> </table> </body> </html>

Một số thuộc tính của thẻ <table>, thẻ <tr> và thẻ <td>:

<TABLE ALIGN=align-type BACKGROUND=url BGCOLOR=color-type BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n%>

Trong đó: ALIGN=align-type: lề của bảng, có giá trị là LEFT,

RIGHT hoặc 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 ô, đơn vị pixel WIDTH=n: độ rộng của bảng, n tính theo % hoặc

pixel

<TR ALIGN=align-type BACKGROUND=url BGCOLOR=color-type VALIGN=v-align-type>

Trong đó: ALIGN=align-type: lề của các ô trong dòng, có giá

trị là LEFT, RIGHT hoặc 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.



<TD ALIGN=align-type BACKGROUND=url BGCOLOR=color-type COLSPAN=n ROWSPAN=n VALIGN=v-align-type>

Trong đó: ALIGN=align-type: lề văn bản trong ô, có giá trị là

LEFT, RIGHT hoặc CENTER BACKGROUND=url: chỉ định ảnh nền cho ô BGCOLOR=color-type: màu nền của ô COLSPAN=n: ô trải rộng trên n cột ROWSPAN=n: ô trải dài trên n hàng VALIGN=v-align-type: lề theo chiều dọc cho văn

bản trong các ô. Giá trị có thể là: TOP, BOTTOM, MIDDLE.

Quay trở lại với ví dụ 2.2.5-11, bạn hãy sử dụng cấu trúc bảng để có thể hiển thị dữ liệu

của trang được rõ ràng và đẹp hơn.

<html> <head> <title>Example</title> </head> <body > <form action="…" method=post>



<table width="100%" border="0"> <tr> <td colspan="2"><h1>ĐĂNG KÝ TÀI KHOẢN</h1></td> </tr> <tr> <td colspan="2"><h2>Thông tin cá nhân</h2></td> </tr> <tr> <td>Họ và tên:</td> <td><input type="text" name="hoten" size="40"></td> </tr> <tr> <td>Giới tính: </td> <td><select name=”gioitinh"> <option value=”nam”>Nam</option> <option value=”nu”>Nữ</option> </select> </td> </tr> <tr> <td>Địa chỉ:</td> <td><input type="text" name="diachi" size="70"></td> </tr> <tr> <td>Bạn muốn liên lạc bằng: </td> <td><input type="radio" name="lienlac" value="email"> Email <input type="radio" name="lienlac" value="phone"> Phone </td> </tr> <tr> <td>Sở trường:</td> <td><input type="checkbox" name="sotruong" value="dabong">Đá bóng <input type="checkbox" name="sotruong" value="vannghe">Văn nghệ <input type="checkbox" name="sotruong" value="giaotiep">Giao tiếp <input type="checkbox" name="sotruong" value="hoctap">Học tập </td> </tr> <tr> <td colspan="2"><h2>Tài khoản</h2></td> </tr> <tr> <td>Tên đăng nhập:</td> <td><input type="text" name="tendangnhap"></td> </tr> <tr> <td>Mật khẩu:</td> <td><input type="password" name="matkhau"></td> </tr> <tr> <td></td> <td align="right"><input type=submit value="Submit"></td> </tr> </table>



</form> </body> </html>

Hãy trang điểm cho trang web của bạn sống động hơn…

2.4.7 Cấu trúc cơ bản của trang web Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và

cũng có trang chứa nhiều cột, dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để làm layout.

Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...

Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang (menu), trong phần này có thể chứa thêm các liên kết con (sub navigation).

Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).

Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.

Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...

Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...



Theo cách truyền thống, người ta vẫn sử dụng bảng để tạo bố cục (cấu trúc) cho các trang web, ví dụ: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Danh sach</title> </head> <body> <table width="100%" height="100%" border="2"> <tr height="100"> <td colspan="3">top</td> </tr> <tr> <td width="200">left</td> <td>Đây là nội dung của trang web</td> <td width="100">right</td> </tr> <tr height="50"> <td colspan="3">bottom</td> </tr> </table> </body> </html>

2.4.8 Thẻ DIV

Giới thiệu

Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.

Có thể chứa hầu hết các thẻ trong HTML/XHTML.



Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>.

Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>. Một số khu vực khuyên sử dụng thẻ <div></div>: Header, global navigation, page body,

content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web) Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ

<div></div> để tiện cho việc điều khiển. Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text,

một image, một liên kết, một button,... nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.

Ví dụ khối sau có nền màu xanh: <div style="color:#00FF00">

<h3>This is a header</h3> <p>This is a paragraph.</p>

</div>

Ví dụ Thiết kế giao diện với Div và CSS

Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website (xem ví dụ tại mục 2.4.7). Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại. Hướng dẫn thiết kế giao diện với thẻ div và CSS trình bày tại cuối Chương 3.

2.4.9 Danh sách HTML cung cấp một tập hợp phong phú các thẻ để hiển thị danh sách theo từng mục

đích, như danh sách thứ tự, danh sách không thứ tự, danh sách định nghĩa… o Danh sách không thứ tự (Unordered List): <ul>

Thẻ <ul>…</ul> báo cho trình duyệt biết rằng, nội dung chứa trong nó là là một danh sách không đánh số thứ tự. Mỗi mục trong danh sách liên kết được chứa trong một cặp thẻ <li>mục</li>.

Đặc trưng của danh sách không thứ tự là trình duyệt tự động trình bày mỗi mục trên một dòng mới, đồng thời thêm vào đầu mỗi mục một bullet để đánh dấu.

Có thể dung đặc tính type để chọn kiểu bullet. Có 3 kiểu: disc (hình đĩa), circle (hình tròn), square (hình vuông) Ví dụ 2.2.6-1 <html> <head> <title>Danh sach</title> </head> <body> <ul type="square"> <li>Ðây là mục 1 trong danh sách.</li> <li>Ðây là mục 2 trong danh sách.</li> <li type="circle">Ðây là mục 3 trong danh sách.</li> <li type="disc">Ðây là mục 4 trong danh sách. </li> </ul> </body> </html>



o Danh sách thứ tự (Ordered List): <ol> Danh sách thứ tự bắt đầu bằng thẻ <ol> với cấu trúc:

<OL START=n TYPE=order-type>

Mỗi mục trong danh sách thứ tự được chứa trong cặp thẻ <li> và </li>. Các thuộc tính của thẻ <ol>: 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:

o A: sử dụng ký tự lớn A, B, C,... o a: sử dụng ký tự nhỏ a, b, c,... o I: sử dụng số La Mã lớn I, II, III,... o i: sử dụng số La Mã nhỏ i, ii, iii,... o 1: sử dụng số 1, 2, 3,...

HTML Kết quả

Ví dụ 2.2.6-1 <html> <head> <title>Danh sach</title> </head> <body> <OL TYPE=I> <LI>Mục I <LI>Mục II <LI>Mục III </OL> </body> </html>

Kiểu chỉ số của mỗi mục trong danh sách thứ tự có thể thay đổi thông qua thuộc tính

type. Chỉ định chỉ số cho một mục bất kỳ thong qua thuộc tính value.

HTML Kết quả



Ví dụ 2.2.6-3 <html> <head> <title>Danh sach</title> </head> <body> <ol> <li>Item number 1</li> <li>And the second</li> <li value=9> Jump to number 9</li> <li>And continue with 10...</li> </ol> </body> </html>

o Danh sách các định nghĩa (Definition List): <dl> Danh sách các định nghĩa được sử dụng với cặp thẻ <dl> và </dl>. Dùng <DT> để chỉ định mẫu cần định nghĩa, và <DD> để chỉ định định nghĩa cho mẫu xác

định bởi <DT>.

HTML Kết quả

Ví dụ 2.2.6-4 <html> <head> <title>Danh sach</title> </head> <body> <DL> <DT>Bàn phím <DD>Một thiết bị vào thường xuyên nhất cho mọi máy tính. Bàn phím bao gồm toàn bộ các phím chữ cái, số, dấu, ký hiệu và các phím điều khiển. <DT>Chuột <DD>Một thiết bị đầu vào có một hoặc nhiều nút ấn điều khiển, được chứa trong một vỏ hộp có kích thước cỡ lòng bàn tay, và được thiết kế sao cho bạn có thể di chuyển nó trên mặt bàn, cạnh bàn phím. </DL> </body> </html>

2.4.10 Các ký tự đặc biệt Ngôn ngữ chứa nhiều ký tự đặc biệt (các ký tự có dấu) mà bạn đôi khi vẫn dùng, đặc biệt

khi muốn trình bày tài liệu trong ngôn ngữ không phải tiếng Anh. Bạn có thể đưa vào các ký tự đặc biệt trong mã lệnh HTML bằng những thẻ đặc biệt gọi là thực thể (entity) hoặc tham chiếu thực thể (entity reference).

Không như những thẻ đã tìm hiểu, thực thể ký tự đặc biệt không nằm gọn trong dấu <>. Thay vào đó, nó luôn bắt đầu bằng dấu & và kết thúc bằng dấu chấm phẩy (;). Hầu hết các thực thể đều khá dễ nhớ, như trong bảng sau:

Ký tự Mã lệnh HTML Ý nghĩa

& & Ký hiệu &

< < Dấu nhỏ hơn



> > Dấu lớn hơn

© © Biểu tượng bản quyền

Ký tự trắng (space)

Nếu bạn muốn thêm một số ký tự trắng (phím space) vào giữa các từ, hãy sử dụng mã của ký tự trắng là

2.4.11 Thẻ hình ảnh <IMG>: Trong phần trước, chúng ta đã đề cập đến cách trình bày chữ trong trang web. Ðể làm

cho trang web sinh động hơn, hấp dẫn hơn, bạn có thể đưa thêm tranh ảnh vào. Có những trang web liên quan đến số liệu, đồ thị và đồ thị cũng là một dạng ảnh (images). Sau đây là cách đưa một bức ảnh vào trong trang web.

Sử dụng thẻ <img> để thêm hình ảnh vào trang web <IMG ALIGN=align-type ALT=text SRC=url BORDER=n HEIGTH=n WIDTH=n HSPACE=n VSPACE=n>

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ị 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 đường dẫn tới ảnh - BORDER=n: đườ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ụ:

<IMG SRC="images/pic1.gif" ALT="[các nội dung]" ALIGN=MIDDLE HSACE=5 VSPACE=5>Nội dung</A>

Chỉ riêng <img src="myphoto.jpg"> đã đủ để đưa một bức ảnh vào trang web. Những

thuộc tính khác chỉ nhằm mục đích định dạng trình bày cách hiển thị của bức ảnh. Một số lưu ý khi sử dụng ảnh trên trang web:

o Ảnh cho vào trang web nên save dưới dạng .GIF, .JPG hoặc PNG o Không nên to quá, đây không nói đến kích thước (cm) mà nói đến kính cỡ file

(số KB). o Khi upload trang web, nhớ upload cả ảnh. o Tên của các file nên sử dụng chữ thường, không nên sử dụng chữ hoa. Ví dụ:

myphoto.jpg chứ không Myphoto.jpg.

2.4.12 Sử dụng hình ảnh làm nền

Nền cho cả trang web:

<html> <head> <title>Welcome</title> </head> <body background="images/nenchat.jpg" text="blue"> <h2>Welcome to College of Information Technology!</h2> <h4>www.cit.udn.vn</h4> </body> </html>



Nền cho bảng biểu:

<html> <head> <title>Welcome</title> </head> <body text="blue"> <h2>www.cit.udn.vn/forums</h2> <table border="1" width="100%"> <tr> <td rowspan="2" background="images/1.gif" style="background-repeat: repeat-x">Học kỳ I</td> <td>Văn</td> <td>Toán</td> </tr> <tr> <td>10</td> <td>9</td> </tr> </table> </body> </html>

2.4.13 Applets: Applet là chương trình Java nhỏ được thiết kế để chạy phía trong một trình duyệt web.

Trên Internet ngày nay, applet thường được sử dụng để cung cấp các bản tin chứng khoán, các biểu đồ và đồ thị tương tác, trò chơi ô chữ và chát.

Để xem cách chèn Java applet vào trang web như thế nào, chúng ta cùng xem xét một ví dụ đơn giản của một mã lệnh Java nào đó. Mã lệnh dưới đây cần được lưu ở dạng tập tin văn bản với tên gọi là HelloWorld.java



HelloWorld.java /* Chương trình Java */ import java.applet.Applet; import java.awt.Graphics; public class HelloWorld extends Applet { public voi paint(Graphics g) { g.drawString(“Hello World!”, 75, 75); } }

Vì chương trình Java cần được biên dịch, chúng ta sẽ biên dịch mã lệnh này thông qua

một trình biên dịch trước khi nó có thể được dùng phía trong trang web. Quá trình biên dịch sẽ chuyển đổi tập tin văn bản .java thành tập tịn nhị phân .class. Tập tịn .class này có thể được thực hiện trên bất kỳ máy tính nào có JVM, vì các tập tin nhị phân Java chứa mã lệnh không phụ thuộc vào hệ điều hành.

Trong HTML, các chương trình Java được thêm vào trong trang web bằng cách sử dụng thẻ <applet>. Mặc dù <applet> không phải là thành phàn của chuẩn HTML 4.01, nhưng cả Nescape và IE đề hỗ trợ nó. Ví dụ, mã lệnh HTML sau sẽ nhúng một Java applet vào trong trang web:

<applet code=”HelloWorld.class” width=”250” height=”150” id=”myapplet”> </applet>

Bằng cách sử dụng mã lệnh này, trình duyệt web sẽ tải Java applet có tên là HelloWorld.class và sẽ dành riêng một vùng trên màn hình với kích thước 250x150 cho nó.

Ðể xem được applet, máy của người xem phải có Java Virtual Machine cài đặt sẵn. Ví dụ:

CalculatorApplet.html <html> <head>

<title>A Calculator</title> </head>



<body> <h1>Here is a calculator. Goodluck!</h1>

<applet code="CalculatorApplet.class" width="180" height="180"> </applet>

</body> </html>

2.4.14 Nhúng phim và âm thanh vào trong trang web Việc nhúng phim và âm thanh vào trong trang web được xử lý một cách hoàn toàn khác

với việc nhúng Java applet. Trước hết, thẻ <applet> không thể dùng để nhúng các dạng tập tin này vào trong trang web.

Cách đầu tiên để chèn một tập tin multimedia vào trong trang web là sử dụng thẻ <embed>. Việc sử dụng thẻ <embed> chắc chắn là dễ dùng hơn thẻ <object>, tuy nhiên khi dùng thẻ này, hãy nhớ rằng nó không phải là thành phần của chuẩn chính thức.

<embed src=”mymovie.avi” autostart=”true” loop=”true” width=”160” height=”130”></embed>

Với thẻ <embed>, chúng ta có thể truyền tất cả các tham số cho plug-in bằng cách dùng các thuộc tính phía trong của thẻ. Không có thẻ <param> phía trong thẻ <embed>. Bản thân thẻ <embed> hỗ trợ ba tham số - src, width, height. URL của nội dung được nhúng vào sẽ được truyền thông qua thuộc tính src. Khỏng không gian phía trong trình duyệt dành riêng cho đối tượng được nhúng vào sẽ được truyền thông qua thuộc tính width và height.

Chúng ta cũng có thể sử dụng thẻ chính thức <object> để nhúng phim vào trong trang web. Thẻ <object> phức tạp hơn đôi chút, đặc biệt là do các plug-in được tham chiếu bằng cách sử dụng một con số thập lục phân khá dài.

<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height="60"id="Player1" width="320" align="top" >

<param name="URL" value="Jasmin.avi" > </object >



2.4.15 Flash:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>citForum</title></head> <body > <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="550" height="420"> <param name="movie" value="Fallout.swf"> <param name="quality" value="high"> </object> </body></html>



2.4.16 Sử dụng điều khiển Microsoft Calendar trong trang web <html> <head> <title>My Calendar</title> </head> <body> <object id="myCalendar" width="480" height="190" classid="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"> <param name="Year" value="2008"> <param name="Month" value="2"> <param name="Day" value="26"> </object> </body> </html>

Các bạn có thể truyền vào ngày, tháng, năm. Nếu không, calendar sẽ hiển thị ngày hiện

tại.

2.4.17 Frame Sử dụng tag <FRAMESET> và </FRAMESET> để chia cửa sổ trình duyệt thành nhiều

cửa sổ con frame. Tag <FRAMESET> được dùng kèm với tag <FRAME> để định nghĩa 1 frame.

Figure 11-1 (shown in Section 11.3.1.2) is a simple example of a frame display. It shows how the document window may be divided into columns and rows of individual frames separated by rules and scrollbars. Although it is not immediately apparent in the example, each frame in the window contains an independent document. Frames may contain any valid content the browser is capable of displaying, including XHTML documents and multimedia. If the frame's contents include a hyperlink that the user selects, the new document's contents — even another frame document — may replace that same frame, another frame's content, or the entire browser window.

Frames are enabled with a special frame document. Its contents do not get displayed. Rather, the frame document contains extension tags that tell the browser how to divide its main display window into discrete frames and what documents go inside the frames.

The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. You can, however, direct one frame's document to load new content into another frame. That's done by attaching a name to a frame and targeting the named frame with a special attribute for the hyperlink <a> tag.



You need to know only three tags to create a frame document: <frameset>, <frame>, and <noframes>. <temp>

o Frameset - Cols Frames là sáng kiến của [Netscape] bắt đầu từ Navigator version 2.0. [Microsoft] Internet

Explorer (version 3.0 trở lên) cũng đọc được Frames. Dùng Frames, bạn có thể chia một window ra làm nhiều phần riêng biệt, không phụ thuộc vào nhau và có thể chứa những nội dung khác nhau. Từ Frame này có thể thay đổi nội dung của Frame kia. Như vậy website của bạn sẽ được bố cục rõ ràng hơn, tiện lợi hơn và người xem có thể tìm được cái mình tìm nhanh chóng hơn. Ai hay sử dụng Windows Explorer sẽ thấy được tác dụng tương tự của Frames.

Khi chia window, bạn sẽ có ít nhất 2 Frames. Những Frames này được gọi là một Frame-Set. Một trang sử dụng Frames có cấu trúc cơ bản như sau:

<html> <frameset> </frameset> </html>

Ðể chia một window ra làm hai phần theo chiều dọc, phần bên trái chiếm 30%, phần bên phải 70% chiều rộng của window ta làm như sau:

<html> <frameset cols="30%,70%"> <frame name ="ben trai" src="trai.htm"> <frame name ="ben phai" src="phai.htm"> </frameset> </html>

o Frameset – Rows Tương tự như vậy ta chia theo chiều ngang, nhưng lần này chia làm 3 phần (30%, 50%

và * là phần còn lại của màn hình): <html> <frameset rows="30%,50%,*"> <frame name ="tren" src="tren.htm"> <frame name ="duoi" src="duoi.htm"> <frame name ="con_lai" src="conlai.htm"> </frameset> </html>

o Frameset - Giải thích - cols (columns) chia window theo chiều dọc. Các giá trị 30% , 70% có thể được thay bằng

số pixels như 150 , 500 - rows cho phép chia theo chiều ngang. 30%, 50% là chiều cao của hai Frames đầu. Dấu *

cho biết chiều cao của Frame thứ 3 là phần còn lại của window.

<frame name ="ben trai" src="trai.htm"> tên và nội dung của frame bên trái. Bạn cứ tưởng tượng, bạn tạo được một khung ảnh có hai ngăn (tương tự như một frameset), mỗi ngăn chứa một bức ảnh (đây là một trang web). Frame bên trái tên là "trai" và chứa trang "trai.htm". Tương tự như vậy với "ben phai", "phai.htm", "tren", "tren.htm", "duoi", "duoi.htm", "con_lai", "conlai.htm"

o .Frames - Navigation Menu Như vậy ta đã có được những bức ảnh trong khung. Nhưng mục đích chính của Frames

không phải là làm thế nào để có nhiều trang trong một window mà là làm thế nào để dùng link của Frame này thay đổi nội dung của Frame kia. Bây giờ ta hãy thử dùng trang "trai.htm" làm navigation để thay đổi nội dung Frame "phai". Khi đó ta phải dùng thêm một dòng code nữa trong trang "trai.htm".

<base target="ben phai">



Bạn hãy click "xem vi du" sau đó dùng chuột phải click vào trang "trai.htm" trong frame "trai" để xem html-code.

o Frameset in Frameset Và một ví dụ nữa sẽ cho thấy khả năng của Frames. Trong ví dụ này, đầu tiên ta chia

window ra làm 2 phần sau đó lại chia phần thứ 2 ra làm đôi. Code của nó như sau:

<html> <frameset rows="20%,70%"> <frame src="tren.htm" name="ben tren"> <noframe> <frameset cols="20%,80%"> <frame src="trai.htm" name="ben trai"> <frame src="phai.htm" name="ben phai"> </frameset> <body> This page uses frames but your browser doesn't support them. Please download a higher version and visit me again. Thanks anyway! </body> </html>

Bạn thấy đấy, ta đã chia window ra làm 4 Frames nhưng chỉ thấy có 3. Ðó là tác dụng của tag <noframe> Hiện nay số lượng browser không biết Frames hầu như không còn nữa, nhưng để chắc chắn, ta hãy viết thêm một phần <body> và chú thích rằng browser của người đọc không biết frames, nếu không người đó sẽ chẳng đọc được một chữ gì khi đến thăm homepage của bạn.

Ngoài ra còn một số đặc tính khác của Frames như:

scrolling="no" (nếu bạn viết như vậy trong tag <frameset>, người đọc sẽ không thể scroll để đọc tiếp nếu như trang html có cỡ to hơn Frame chứa nó).

frameborder="0" (frame không có khung) framespacing="0" (tương tự như trong table) noresize (không cho phép người đọc thay đổi kích cỡ của window)

</temp> 2.4.18 Một số thẻ meta thông dụng Một cách tùy chọn, bạn có thể xác định một số từ khóa cho hồ sơ để giúp các máy tìm

kiếm trên Internet có thể tìm ra website của mình. Các từ khóa và một mô tả ngắn gọn của trang web có thể được xác định bằng cách dùng thẻ <meta>. Ví dụ, bạn có thể mô tả cho website của Trường Cao đẳng Công nghệ thông tin như sau:

<meta name=”description” content=”Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng”> <meta name=”keywords” content=”Trường Cao đẳng Công nghệ thông tin, College of Information Technology, Đại học Đà Nẵng, University of Danang, tuyển sinh, cao đẳng”>

Khi được sử dụng để xác định phần mô tả trang và từ khóa, thẻ <meta> chấp nhận hai thuộc tính: name và content. Trong mã lệnh trên, thẻ <meta> đầu tiên thiết lập phần mô tả cho trang web – thường đây là một hoặc hai câu được hiển thị bởi các máy tìm kiếm trên Internet để cung cấp cho người dùng một mô tả chính xác về những gì họ mong đợi từ trang web này.

Thẻ <meta> thứ hai trong ví dụ trên định nghĩa một số từ khóa – các từ hoặc cụm từ được phân cách bằng dấu phẩy để giúp cho các máy tìm kiếm trong việc tạo chỉ mục cho trang web. Một số máy tìm kiếm Internet xếp hạng các trang web với các thẻ <meta> này cao hơn so với các trang web cùng loại nhưng không có thẻ <meta>.



2.4.19 Thẻ DOCTYPE Chúng ta sử dụng khai báo DOCTYPE để miêu tả ngôn ngữ, phiên bản và kiểu ngôn

ngữ. Việc sử dụng thẻ DOCTYPE được yêu cầu để có hồ sơ hợp chuẩn. Thẻ DOCTYPE được đặt trong phần đầu của hồ sơ, phía trên thẻ mở <html>

Chúng ta sẽ cùng xem xét đoạn mã lệnh sau với việc khai báo thẻ DOCTYPE cho DTD transitional (DTD – Document Type Definition – Một DTD là danh sách gồm các phần tử, thuộc tính, ký tự, màu sắc và những yêu cầu có liên quan của một ngôn ngữ hoặc nhiều ngôn ngữ) của HTML 4.01:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html14/loose.dtd>

Đây không phải là HTML, mà là cấu trúc SGML. Chúng ta có thể biên dịch khai báo DOCTYPE này như sau: Kiểu hồ sơ đang đề cập là một hồ sơ HTML. Nó là PUBLIC, có nghĩa là DTD mà nó đề

cập là luôn có hiệu lực cho mọi người sử dụng. Hồ sơ HTML này được tạo và cài đặt tại W3C, đang đề cập đến DTD transitional của HTML 4.01, bằng tiếng Anh cũng như được định vị tại đường dẫn URL thường có trên dòng thứ hai của câu khai báo.

2.5 Những lưu ý 2.5.1 Tạo chuẩn đánh dấu thẻ và tuân thủ nó Một vấn đề quan trọng trong việc quản lý phương diện mã lệnh của việc thiết kế Web là

các biến thể xuất hiện trong cách thức định dạng việc đánh dấu. Điều này không có nghĩa là nó sẽ hiển thị như thế nào, mà có gnhiax là bản thân mã lệnh được định dang như thế nào phía sau màn hình. Những người tạo ra hồ sơ của họ một cách thủ công thường phát triển các cách thức như thụt lề bảng và danh sách, viết các phần tử theo dạng chữ in hoa, thuộc tính theo dạng chữ thường và không đặt thuộc tính trong dấu nháy. Do có nhiều sự không nhất quán trong phấn mềm xuất bản Web, nên những gì bạn có sẽ là những phần tử hỗn độn.

Những “chiến thuật” định dạng HTML: Thụt lề cho ô bảng: Đối với các bảng có tổ chức, việc thụt lề rất hữu ích khi làm việc với những phần tử lông

nhau của bảng. Điều này cung cấp khoảng trống và cho phép một người làm việc đánh dấu nhanh chóng tìm thấy dữ liệu hoặc vấn đề cụ thể trong chính mã lệnh.



<table> <tr> <td>nội dung</td> </tr>

</table>

Thụt lề các mục của danh sách và các danh sách lồng nhau Cũng giống với các ô bảng lồng nhau, việc thụt lề cho cá danh sách lồng nhau có thể rất

hữu dụng trong việc sửa chữa và tìm kiếm nội dung cần chỉnh sửa một cách hiệu quả hơn. <ul>

<li>Ý 1</li> <li>Ý 2</li>

<ul>

Quản lý dạng chữ HTML không phân biệt dạng chữ. Trước khi có XHTML, dạng chữ trong HTML không

liên quan với nhau, nên bạn thường có một phần hỗn độn gồm nhiều dạng chữ, thậm chí trong cùng một hồ sơ. XHTML phần biệt dạng chữ và chúng ta nên sử dụng dạng chữ thường tại thời điểm này, ngay cả khi sử dụng HTML. Nếu cần nâng cấp thành XHTML trong tương lai, quá trình sẽ dễ dàng và ít tốn thời gian hơn.

Luôn đóng tất cả các thẻ Việc quên đóng một thẻ nào đó sau khi mở không những không đúng cú pháp HTML mà

có thể còn làm giao diện của bạn hiển thị không đúng. Đối với các cặp thẻ phải luôn có thẻ đóng Ví dụ: <p> thì phải có </p>, <div> phải có </div>,… Đối với các thẻ đơn thì phải có dấu / (slash) ở cuối Ví dụ: <br />, <img />, <hr />… Luôn đặt thuộc tính alt cho thẻ <img> Giá trị của thuộc tính Alt trong thẻ <img> sẽ được hiển thị thay thế khi link hình ảnh không

tồn tại. Ngoài ra còn có tác dụng đối với SEO cho website. Chuẩn XHTML bắt buộc bạn phải đặt thuộc tính Alt cho tất cả các hình ảnh trong trang

web. Ví dụ về thẻ <img> hợp lệ

<img src="logo.gif" alt="Logo" />

Quản lý các dấu nháy Những vấn đề liên quan đến dấu nháy và giá trị thuộc tính trong HTML tương tự với

những vấn đề của dạng chữ. HTML ít hạn chế hơn so với XHTML về các quy tắc dấu nháy. Trong khi không bao giờ bị sai trong HTML khi đặt dấu nháy quanh giá trị thuộc tính, nhưng bạn có thể gây lỗi khi không đặt dấu nháy. Vì thế, hãy đặt dấu nháy cho mọi thuộc tính, thậm chí trong HTML, nơi mà các quy tắc về dấu nháy khá tùy ý.

Trong HTML bạn có thể viết như sau: <body bgcolor=black text=”white”>

Nó vẫn hoạt động. Nhưng bạn có thể có một dấu nháy mở nhưng quyên dấu nháy đóng và khi đó sẽ xuất hiện lỗi. Lỗi này có thể làm bạn mất hàng giờ để sửa chữa. Bằng cách đặt dấu nháy với mọi giá trị thuộc tính, bạn có thể giảm thiểu hoặc thậm chí có thể loại bỏ vấn đề này.

Sử dụng ghi chú Việc ghi chú thích hợp các vùng cụ thể trong hồ sơ có nghĩa là bạn hoặc đồng nghiệp có

thể tìm thấy vùng đó nhanh chóng hơn. Bạn cũng có thể cung cấp thông tin về nội dung, chỉ dẫn cho tác giả khác hoặc chuyên gia về nội dung và giấu thông tin mà đôi khi cần đến sau này.

Chú ý quan trọng ở đây là chỉ sử dụng khi cần thiết. Lam dụng việc ghi chú cho một site có thể gây ra rắc rối giống như việc không có ghi chú.



CHƯƠNG 3: CASCADING STYLE SHEETS (CSS)

CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức

World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ, . . ..

3.1 Thế mạnh của CSS - Tách riêng phần định dạng ra khỏi nội dung trang web. - CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Nó

giúp bạn tiết kiệm công sức rất nhiều trong việc thiết kế giao diện. - Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng

(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung, chỉnh sửa giao diện. Kích thước của file .html cũng được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều lần (cache), do đó giúp trang web được load nhanh hơn.

- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau.

3.2 Các cách khai báo CSS trong tài liệu HTML. Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là CSS cục bộ, CSS nội tuyến

và CSS ngoại tuyến:

CSS cục bộ

Viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.

Ví dụ <p style="font-size: 16pt; color: blue">Đoạn văn bạn sẽ bị ảnh hưởng khi khai báo CSS cục bộ.</p>

CSS nội tuyến

CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt trong phần <head> của tài liệu HTML.

Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.

<style> h1,h2,h3 {font-size: 14px;} p {color:blue;} </style>

CSS ngoại tuyến

Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế. và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.

Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website



thì chỉ cần chỉnh sửa file CSS này thay vì phải chỉnh sửa tất cả các file html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu quả mà CSS đem lại.

Để khai báo css ngoại tuyến, ta chỉ cần tạo một file có phần mở rộng là “.css”, ví dụ style.cs, sau đó chèn đoạn code sau trong phần <head></head> của trang web.

<link href="style.css" rel="stylesheet" type="text/css" />

Ví dụ <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css” /> </head> <body> </body> </html>

Thứ tự ưu tiên trong CSS

Đôi khi trong thiết kế của mình bạn sẽ sử dụng không chỉ 1, mà 2 hay thậm chí là 3 kiểu khai báo CSS đã nói trên, lúc đó ta sẽ phải cần nắm bắt đến thứ tự ưu tiên của CSS.

Thứ tự ưu tiên trong CSS như sau: CSS cục bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt. Để hiểu hơn về thự tự ưu tiên của CSS ta xét ví dụ sau: Giả sử trong tài liệu HTML ta có mã HTML như sau

<p>Nội dung sẽ được hiển thị theo khai báo của CSS</p>

Và khai báo CSS như sau CSS cục bộ

<p style="color="red">...</p>

CSS nội tuyến có mã như sau p{ color: green }

CSS ngoại tuyến như sau p{ color: black }

Thì lúc này đoạn văn bản được hiện thị với màu đỏ. Bởi vì ta thấy thành phần được khai báo CSS cục bộ lên sẽ được ưu tiên hơn CSS nội tuyến và CSS ngoại tuyến.

Tương tự như thế, khi ở ví dụ trên nếu ta không khai báo CSS cục bộ thì đoạn văn bản sẽ được hiện thị là màu xanh lá cây. Bởi vì CSS nội tuyến được ưu tiên hơn, tiếp theo nếu CSS nội tuyến không được khai báo thì CSS ngoại tuyến mới có tác dụng.

3.3 Cú pháp của CSS Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính

(property), phần nhãn (value). selector {property: value}

Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép p {font-family: "sans serif"}

Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;).

p {text-align:center;color:red}

Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt.

p { text-align: center;



color: black; font-family: arial

3.4 Các vấn đề về văn bản và cách định dạng văn bản Thuộc tính CSS text cho phép bạn hoàn toàn có thể quản lí được các thuộc tính của văn

bản, bạn có thể quản lí được sự ẩn hiện của nó, thay đổi màu sắc, tăng hoặc giảm khoảng cách giữa các ký tự trong một đoạn, căn chỉnh việc dóng hàng (align),...

Các thuộc tính của text mà CSS hỗ trợ

Đặt màu cho một đoạn văn bản

Để đặt màu cho một đoạn văn bản chúng ta có thể dùng thuộc tính: color: #mã màu; p { color: #333333; }

Đặt màu nền cho đoạn văn bản.

Bạn có thể đặt màu nền (background) cho đoạn văn bản bằng thuộc tính background-color: #mã màu;

p { background-color: #FFFF00; }

Căn chỉnh khoảng cách giữa các ký tự.

Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tínhletter-spacing: khoảng cách;

h3 { letter-spacing: 2em; } h1 { letter-spacing: -3em; }

Căn chỉnh khoảng cách giữa các dòng.

Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản.

p { line-height: 150%; // line-height: 15px; }

Dóng hàng

Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí; p { text-align: left; /* left | center | right */ }

Trang hoàng thêm cho đoạn văn bản.

Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc tính text-decoration: thuộc tính;

h3 { text-decoration: underline; /* Gạch chân */



} h2 { text-decoration: line-through; /* Gạch ngang */ } h1 { text-decoration: overline; /* kẻ trên */ }

Chỉnh vị trí của đoạn văn bản (indent).

Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dòng văn bản theo chiều ngang. h1 { text-indent: -2000px; /* text-indent: 30px; */ }

Điều kiển các ký tự trong một đoạn văn bản.

Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;

p.uppercase { text-tranform: uppercase; } p.lowercase { text-tranform: lowercase; } p.capitalize { text-tranform: capitalize; }

Đặt hướng cho đoạn văn bản.

Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể điều khiển bởi thuộc tính direction: hướng;

div.rtl { direction: rtl; /* Right to left */ } div.ltr { direction: ltr; /* Left to right */ }

Tăng khoảng cách giữa các từ.

Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; word-spacing: 30px;

Làm mất tác dụng của đường bao của một thẻ HTML.

Để làm mất tác dụng đường bao của một thẻ HTML chúng ta dùng thuộc tính white-space: giá trị;

p { white-space: nowrap; }

Thuộc tính white-space sẽ làm cho toàn bộ đoạn văn bản ở trên một dòng.



3.5 Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản Các thuộc tính về font chữ sẽ cho phép bạn thay đổi họ font (font family), độ đậm

(boldness), kích thước (size) và kiểu font (style).

Đặt font cho đoạn văn bản.

Để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử dụng thuộc tính font-faily:

p { font-family: Arial, Tahoma, Verdana, sans-serif; }

Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.

Đặt đoạn văn bản sử dụng font nhãn caption.

p.caption { font: caption; }

Đặt kích thước font cho đoạn văn bản.

Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề có kích thước của chữ khác nhau, chúng ta có thể sử dụng thuộc tính font-size:

h1 { font-size: 20px; } h3 { font-size: 12px; }

Định lại kích thước font bằng thuộc tính font-size-ajust:

p { font-size-ajust: 0.60; }

Đặt kiểu font cho đoạn văn bản.

Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style: p { font-style: italic; /* normal | italic | oblique */ }

Muốn hiển thị font ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ sử dụng thuộc tínhfont-variant. Thuộc tính này có hai giá trị normal và small-caps

p { font-variant: normal; /* normal | small-caps */ }

Đặt độ đậm nhạt của font.

Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số)

h3 { font-weight: bold; }



Khai báo các thuộc tính font ở dạng shorthand.

p { font: italic small-caps 900 12px arial; }

3.6 Đường viền và các thuộc tính của đường viền Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn

viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,...

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là: border-color, border-width, border-style

Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color: div.color { border-color: #CC0000; }

Đặt chiều rộng cho đường viền (border)

Nếu muốn đặt chiều rộng của đường viền ta sẽ đặt giá trị cho thuộc tính border-width: div.borerwidth { border-width: 2px; }

Hoặc sử dụng các giá trị: thin, medium, thick, length

03Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.

div.borderstyle { border-style: solid; }

Các kiểu đường viền: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng: border-top, border-right, border-bottom, border-left Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

STT Phía Thuộc tính

1 top border-top-color: border-top-width: border-top-style:

2 right border-right-color: border-right-width: border-right-style:

3 bottom border-bottom-color: border-bottom-width: border-bottom-style:

4 left border-left-color: border-left-width: border-left-style:



Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với độ rộng bằng 1, kiểusolid và màu là #CC0000

div.border { border: 1px solid #CC0000; }

3.7 Thuộc tính đường bao ngoài (Outline) Thuộc tính Outline sẽ vẽ một đường bao ngoài toàn bộ một phần tử HTML, đối với phần

tử có đường viền (border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự như đường viền bạn có thể đặt cho nó các thuộc tính về màu săc, độ lớn và kiểu.

Có một điều cần chú ý là các thuộc tính của đường bao này có thể không được hỗ trợ trên IE

Đặt thuộc màu cho đường bao

Nếu muốn đặt màu cho đường bao chúng ta có thể sử dụng thuộc tính outline-color: p { outline-color: #CC0000; }

Đặt độ rộng cho đường bao.

Tương tự như đường viền, để đặt độ rộng cho đường bao chúng ta đặt giá trị độ lớn cho thuộc tính outline-width:

p { outline-width: 2px; }

Chọn kiểu đường bao

Để chọn kiểu cho đường bao chúng ta sẽ đặt lần lượt các giá trị cho thuộc tính outline-style:

p { outline-style: dotted; }

Các kiểu đường viền: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Để cho gọn chúng ta cũng có thể viết các giá trị của thuộc tính Outline dưới dạng shorthand như sau:

div.outline { outline: 1px solid #000; }



3.8 Các thuộc tính của margin

Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.

Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là 8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể đặt margin mặc định cho toàn bộ các phần tử.

Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta đặt giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.

Tương ứng với 4 phía ta có 4 thuộc tính: margin-top, margin-right, margin-bottom, margin-left Để cho gọn chúng ta cũng có thể việt thuộc tính margin dưới dạng shorthand

div.margin { margin: 10px 4px 5px 9px; /* top | right | bottom | left*/ }



3.9 CSS padding CSS padding sẽ định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con

hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này. Cũng giống như margin thuộc tính padding cũng tương ứng với 4 phía của phần tử.

Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng đó là: padding-top, padding-right, padding-bottom, padding-left: Các giá trị có thể gán cho các thuộc tính này là : % hoặc length Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand.

div.padding { padding: 5px 3px 2px 8px; }

3.10 Định danh trong CSS: Tên: ID=”ten” khi style trong css thì cấu trúc là: #ten{thuộc tính định dạng}. Định dạng kiểu

này chỉ có hiệu lực cho những tag nào có ID=”ten”. Tag: cấu trúc: tên_tag{thuộc tính định dạng}: định dạng chỉ có tác dụng với các tag có tên

như khai báo. Class: Cấu trúc: .tenclass{thuộc tính định dạng}: khi muốn áp dụng cho đối tượng nào đó

thi ta khai báo ví dụ:

<div class="tenclass">Noi dung</div>

Cách khai báo này sẽ tiện lợi có thể sử dụng lại nhiều lần.

3.11 Các thuộc tính cơ bản của CSS:

Type:

o Font : Font chữ. Mỗi lần 3 font để dự phòng máy user không có font. Có thể thêm.

o Size : Cỡ chữ o Weight : độ dày font. Thường dùng Normal và Bold. Các giá trị 100-900 diễn tả

độ dày nhưng không phải browser nào cũng hỗ trợ. o Style (Italic và Oblique là như nhau): nghiêng o Variant : Bình thường hoặc Small-Cap (hoa nhỏ) o Line Height: độ cao hàng chữ trong paragraph. Có thể dùng % (>100% là giãn

ra, Case: capitalize: chữ hoa đầu từ, uppercase: toàn chữ hoa, lowercase: toàn chữ thường

o Decoration: cách gạch ngang o Underline: gạch dưới chữ o Strikethrough: gạch giữa chữ o Overline: gạch đầu chữ o None: không gạch (thường dùng với liên kết) o Color: màu chữ. Có thể chọn từ bảng màu hiện ra hoặc trích màu từ đối tượng

khác, trong trang web khác

Background

o Background color: màu nền. Có thể chọn từ bảng màu hiện ra hoặc trích màu từ đối tượng khác, trong trang web khác

o Background image: ảnh nền o Repeat: cách lặp lại ảnh nền (repeat-x, repeat-y, repeat: 2 chiều)



o Attachment: (fixed, scroll) ảnh nền sẽ cuộn theo chữ hay cố định. Mặc định là scroll.

o Horizontal position, Vertical position: vị trí ảnh nền theo chiều ngang/dọc.

Block:

o Word Spacing: Khoảng cách giữa các từ (một inch bằng 72 point. Một pica bằng 12 point, ems là đơn vị đo tương đối, 1 ems = default font size. Ví dụ brower đang hỗ trợ cỡ font mặc định là 14 pixel thì mỗi ems= 14 pixel.)

o Letter Spacing: Khoảng cách giữa các ký tự o Vertical Alignment: Đưa chữ lên (super), hạ chữ xuống (sub) nhưng không làm

nhỏ cỡ chữ Có thể gõ 90% (số>0) để đưa chữ lên, -90% (số âm) để hạ chữ xuống) Chọn top, bottom, middle để canh nội dung cell trong table Chọn baseline để canh theo chân hàng chữ

o Text-top, text-bottom: canh hình o Text Align: canh chữ, left, right, center, justify o Text Indent: canh hàng đầu tiên của paragraph, số dương: thụt vào, số âm: thụt

ra o Whitespace: normal, pre, nowrap: bình thường, giữ nguyên định dạng, không

wraptext o Display:

block: đối tượng là khối tách biệt với những cái khác ở trên và dưới nó. Giống paragraph. Có thể apply cho link để toàn chiều rộng có thể click thay vì user chỉ click vào

text của link inline: các đối tượng có giá trị này sẽ nằm cùng 1 hàng. Vd: các li cùng 1 hàng, để làm

menu ngang thay vì dọc (không gán cho ul) none: đối tượng không xuất hiện.

Box:

o Width: độ rộng o Height: độ cao o Float: (left, right) Cho đối tượng trôi qua trái hoặc qua phải o Clear: Thuộc tính ngược với float: left, right, both, none. o Padding: Khoảng cách từ lề của đối tượng với nội dung bên trong o Margin: Khoảng cách từ lề của đối tượng với những đối tượng bên ngoài

Border:

o Style: kiểu đường viền. (Bỏ qua same for all để chỉ định riêng từng đường viền) o Width: độ dày. Có thể dùng thick, medium, thin hoặc 1 con số o Color: Màu đường viền.

List:

o Type: Kiểu bullet (disc: tròn đen; circle: tròn trắng; square: vuông; decimal: 1 2 3; lower-roman: i ii, iii; upper-roman: I II III; lower

o Alpha: a b c; upper-alpha: A B C) o Bullet image: hình dùng thay thế ký tự bullet o Position: vị trí của ký hiệu bullet (ở ngoài hay bên trong lề trái của các item)

Định dạng các liên kết:



o A:link: định dạng cho tất cả liên kết chưa được nhắp trong trang o A:visited: định dạng cho tất cả liên kết đã được nhắp trong trang o A:hover: định dạng cho liên kết trong trang đang được đưa chuột vào o A:active: định dạng cho liên kết trong trang đang được nhắp (chưa nhả chuột) o A: định dạng cho tất cả liên kết trong trang o #menu A:link: định dạng cho tất cả liên kết chưa được nhắp trong vùng có tên là

menu o #menu A:visited: định dạng cho tất cả liên kết đã được nhắp trong vùng có tên là

menu o #menu A:hover: định dạng cho liên kết đang được đưa chuột vào trong vùng có

tên là menu o #menu A: định dạng cho tất cả liên kết trong vùng có tên là menu o .menu A:link: định dạng cho tất cả liên kết chưa được nhắp trong vùng có class

là menu o .menu A:visited: định dạng cho tất cả liên kết đã được nhắp trong vùng có class

là menu o .menu A:hover: định dạng cho liên kết đang được đưa chuột vào trong vùng có

class là menu o .menu A: định dạng cho tất cả liên kết trong vùng có class là menu o .tieudetin:link: định dạng cho liên kết có class là tieudetin, chưa được nhắp o .tieudetin:visited: định dạng cho liên kết có class là tieudetin, đã được nhắp o .tieudetin:hover: định dạng cho liên kết có class là tieudetin, đang được đưa

chuột vào o .tieudetin: định dạng cho liên kết có class là tieudetin

3.12 Chuyển thẻ HTML và thuộc tính SANG CSS

HTML Elements

HTML Elements: Translations to CSS HTML CSS Deprecated <APPLET> N/A Y <B> font-weight <BASEFONT> font-size, font-family Y <BIG> font-size <BLINK> text-decoration: blink; <CENTER> margin-left: auto; margin-right: auto; Y <DIR> UL+style Y <EM> font-style: italic; <FONT> font-family, font-size Y <HR> border-top: solid; <I> font-style: italic; <ISINDEX> N/A Y <MENU> UL+style Y <STRIKE> text-decoration: line-through; Y <S> text-decoration: line-through; Y <SMALL> font-size <STRONG> font-weight: bold;



HTML Elements: Translations to CSS HTML CSS Deprecated <SUB> vertical-align: sub; <SUP> vertical-align: sup; <TT> font-family: monospace; <U> text-decoration: underline; Y

HTML Attributes

HTML Attributes: Translations to CSS

HTML Attribute of HTML Element CSS Deprecated

align see file float, text-align Y

alink <BODY> A:active Y

background <BODY><TD> background Y

bgcolor <BODY> background-color Y

clear <BR> clear Y

compact <LIST> display: compact Y

face, size <FONT> font-family: Arial; Y

link <BODY> A:link Y

noshade <HR> CSS default is solid Y

start <LIST> content: counter Y

text <BODY> color Y

type <LIST> list-style-type Y

value <LIST> LI:before Y

vlink <BODY> A:visited Y

width <HR> width Y

Ví dụ Thiết kế giao diện với Div và CSS

Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website (xem ví dụ tại mục 2.4.7). Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại.

Ví dụ dưới đây sẽ hướng dẫn cách thiết kế một giao diện với thẻ div kết hợp với các thuộc tính của CSS. Cấu trúc giao diện chúng ta sẽ thiết kế gồm có header, footer và 2 cột có kích thước cố định (fixed column) như hình bên dưới.



Đầu tiên chúng ta cần viết mã HTML như sau: <html> <head> <meta http-equiv="content-type" content="text/html;

charset=utf-8" /> <title>Thiết kế giao diện với Div</title> <link href="style.css" media="screen" rel="stylesheet" /> </head> <body> <div id="mainWap"> <div id="header"> <h1>Header</h1> </div> <div id="left"> Nội dung cột trái... </div> <div id="right"> Nội dung cột phải... </div> <div class="clr"></div> <div id="footer"> Nội dung footer... </div> </div> </body> </html>

Lưu file lại với tên div.htm. Trong đoạn mã trên, trước tiên chúng ta đã tạo ra một thẻ div lớn bao quanh toàn bộ

trang web với id=”mainWap”. Bạn nên thực hiện việc này trong các thiết kế tiếp theo của mình. Ví dụ bây giờ bạn muốn toàn bộ trang web của bạn được canh bên phải màn hình, thay vì phải đi căn chỉnh từng thành phần sang phải thì bạn chỉ cần canh thẻ div này sang phải, toàn bộ các thành phần khác trong nó sẽ được canh phải theo thẻ div lớn. Đây cũng là cách để bạn quản lý độ lớn của Box tốt hơn.



Tiếp theo ta sẽ tạo các thành phần header, left, right, footer bên trong thẻ div lớn này với các id tương ứng.

Ta thêm vào thành phần <div class=”clr”></div> trước footer, ta sẽ xem phần này sau khi viết CSS.

Tạo một file style.css và lưu vào cùng thư mục chứa file div.htm. Chúng ta sẽ viết mã CSS trong file này.

Trong phần này có sử dụng Margin và Padding, tuy nhiên có thể mỗi trình duyệt lại hiểu các giá trị này theo một kiểu, nên để tránh phiền toái việc đầu tiên chúng ta nên làm là reset 2 giá trị này về 0 với lệnh sau:

*{ margin: 0; padding: 0 }

Tiếp theo chúng ta sẽ quy định cho độ rộng của toàn bộ trang là 950px và canh giữa màn hình bằng các viết mã cho thẻ div lớn bao quanh mà chúng ta đã tạo ra ban đầu.

#mainWap{ width: 950px; margin: 0 auto; }

Khi ta sử dụng

margin: 0 auto;

thì thẻ div lớn sẽ được canh giữa màn hình. Theo hình trên ta thấy, thành phần header cách thành phần left và right 1 khoảng 10px,

đó chính là margin-bottom của header đối left và right. Và ta sẽ viết mã cho header như sau: #header{ background: green; margin-bottom: 10px; padding: 10px; }

Tiếp theo để left và right tạo thành 2 cột nằm song song ta cần sử dụng đến thuộc tính

Float để cố định 2 thành phần này, đồng thời gán cho chúng một kích thước (width) nào đó. Đầu tiên ta có cố định thành phần left về bên trái và gán thuộc tính width = 200px. Mã CSS như sau:

#left{ float: left; width: 200px; background: #f98000; padding: 10px; min-height: 450px; }

Lúc này thành phần left sẽ được di chuyển về tận cùng bên trái của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

200px + 10px left padding + 10px right padding = 220px; (1) Tiếp theo ta viết mã CSS cho thành phần right như sau:

#right{ float: right; width: 700px; padding: 10px; background: #e4e4e4; min-height: 450px;



}

Lúc này thành phần right sẽ được di chuyển về tận cùng bên phải của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

700px + 10px left padding + 10px right padding = 720px; (2) Như ta đã biết khi thuộc tính float được khai báo cho một thành phần nào đó thì thành

phần đó sẽ bị dịch chuyển tận cùng về phía bên trái nếu được float:left và bên phải nếu được float:right so với thành phần mẹ và tạo khoảng trống cho các thành phần khác di chuyển lên lấp đầy khoảng trống nếu còn.

Kết hợp (1) và (2) ta thấy rằng: Thành phần left được float left và có độ rộng 220px, như vậy nó được cố định về bên trái và tạo ra khoảng trống còn lại trong thẻ div mẹ là:

950 (độ rộng thẻ div bao quanh) – 220 (left) = 730px; Như vậy đủ độ lớn để thành phần right (720px) di chuyển lên nằm song song với thành

phần left và tạo thành 2 cột. Đương nhiên nó được cố định về bên phải vì có float:right. Độ lớn của left và right = 220 + 720 = 940px, như vậy ta thấy còn dư 10px trong thẻ div

bao quanh. Đó chính là khoảng cách 10px giữa left và right (như trên hình). Khi sử dụng float, các thành phần bên dưới luôn luốn có xu hướng di chuyển lên trên. Và

ở đây thì thành phần footer cũng vậy, nó tràn lên phía trên, và đó không phải là điều mà chúng ta mong muốn.

Do đó đây là lúc chúng ta cần sử dụng đến thuộc tính clear cho thành phần <div class=”clr”> nằm trước footer để ngăn cho footer không tràn lên trên.

.clr{clear: both;}

Và cuối cùng là CSS cho thành phần footer có khoảng cách 10px so với left và right, đó chính là margin-top của footer:

#footer{ background: green; margin-top: 10px; padding: 10px; }

Thuộc tính min-height

Ở trên chúng ta có sử dụng thuộc tính min-height trong 2 thành phần left và right. Mục đích của việc này là để quy định chiều cao tối thiểu của một thành phần nào đó khi độ lớn về chiều cao của các thành phần bên trong nó chưa thực sự đủ lớn như mong muốn của chúng ta. Nói đơn giản hơn, bây giờ trong các thành phần left và right chưa có nội dung gì cả, nhưng mình vẫn muốn nó có độ cao là 450px, lúc đó mình sẽ thêm thuộc tính min-height:450px. Khi độ cao của các thành phần bên trong nó vượt quá giá trị min-height, thì độ cao của một thành phần nào đó sẽ bằng tổng độ cao của các thành phần bên trong nó.

Chú ý: thuộc tính này không hoạt động trong trình duyệt Internet Explorer.

20012 baigiang html css

Documents