›
›

Giáo trình Giới thiệu mạng Internet - Đại học Khoa học Tự nhiên TP.HCM

pdf 143 trang hoanguyen 4300
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Giới thiệu mạng Internet - Đại học Khoa học Tự nhiên TP.HCM", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_gioi_thieu_mang_internet_dai_hoc_khoa_hoc_tu_nhie.pdf

Nội dung text: Giáo trình Giới thiệu mạng Internet - Đại học Khoa học Tự nhiên TP.HCM

  1. Giới thiệu mạng Internet
  2. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Chương 1 Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP, GIỚI THIỆU MẠNG INTERNET Java Servlet, 1. SƠ LƯỢC VỀ MẠNG INTERNET 1.1. Lịch sử mạng Internet Mạng Internet xuất phát từ mạng ARPANET của Mỹ và ngày nay đã trở thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới. Mạng máy tính toàn cầu Internet có thể được xem như là mạng của tất cả các mạng (network of networks), trong đó người dùng tại bất cứ máy tính nào đều có thể truy cập tới các thông tin của các máy khác (nếu được phép). Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Mục đích chính của mạng này là tạo cơ sở cho các máy tính nghiên cứu của các trường đại học có thể kết nối và trao đổi với nhau. Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi một phần của nó bị phá hủy trong các trường hợp chiến tranh hoặc thiên tai. Ngày nay mạng Internet là một mạng công cộng kết nối hàng Hình 1.1 – Mô hình mạng Internet trăm triệu người trên thế giới. Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của các mạng viễn thông công 1.2. Một số kiến thức liên quan đến mạng Internet cộng đang tồn tại (public telecommunication networks). Về mặt kĩ 1.2.1. Địa chỉ IP (IP Address) thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission Control Protocol/Internet Protocol). Hai mô phỏng của Địa chỉ IP là một con số 32-bit dùng để xác định đối tượng nhận công nghệ mạng Internet là intranet and extranet cũng sử dụng các và gửi thông tin trên Internet. Khi bạn yêu cầu một trang HTML hay giao thức này. gửi e-mail, địa chỉ IP của bạn sẽ được gửi đi cùng các gói tin đến địa chỉ IP của người nhận. Một khi người nhận nhận được yêu cầu của Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước bạn, họ sẽ căn cứ trên địa chỉ IP mà bạn gửi kèm để gửi kết quả trả ngoặc mới trong việc sử dụng Internet. Cho tới năm 1990 các dịch về. vụ cơ bản của Internet vẫn chỉ là e-mail, listserv, telnet, và ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát triển Để đơn giản hóa người ta phân con số này thành 4 con số 8 bit các giao thức cho World Wide Web (WWW). Trong khi tìm kiếm viết cách nhau bởi dấu chấm “.”. Vì mọi máy là một phần của mạng cách để liên kết các tài liệu khoa học lại với nhau, anh ta đã tạo ra nên người ta chia địa chỉ IP thành 2 phần là phần mô tả mạng Hypertext Markup Language (HTML), một tập con của Standard (network) mà máy đó thuộc về và phần mô tả máy (local host). Nếu Generalized Markup Language (SGML). tất cả các bit của vùng mô tả máy bằng 0, thì địa chỉ IP dùng để mô tả địa chỉ mạng (network address); Nếu tất cả các bit của vùng mô tả máy bằng 1, thì địa chỉ IP này chính là địa chỉ broadcast (broadcast Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 3 4
  3. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org address); Nếu không thuộc hai trường hợp trên, địa chỉ IP này dùng để mô tả địa chỉ máy (host address). Địa chỉ IP tự nó không chứa thông tin về phần nào mô tả mạng, phần nào mô tả máy mà thành phần subnet mask đi kèm với mỗi địa chỉ sẽ cung cấp thông tin này. Theo qui ước, vùng các bit 1 xác định vùng mô tả mạng, và vùng các bit 0 xác định vùng mô tả máy. Trong subnet mask chỉ gồm 2 dãy liên tục các bit 1 và dãy liên tục các bit 0 nằm liên tiếp nhau tính từ trái sang. Các địa chỉ IP được phân thành 3 lớp A, B, C tùy theo giá trị của 3 bytes đầu tiên. Theo đó thì: Class Available Network # of # of Hosts Default Address Networks Subnet A 1 - 126 126 16.7 million 255.0.0.0 B 128.xxx – 191.xxx 16.384 65.536 255.255.0.0 C 192.xxx.xxx – 2.097.152 256 255.255.255.0 223.xxx.xxx Việc phân chia địa chỉ IP trên Internet do ICANN chịu trách nhiệm. Địa chỉ IP thường được quản lí bởi các nhà cung cấp dịch vụ Internet (ISP – Internet Service Provider). Các địa chỉ IP này thường được gọi nôm na là địa chỉ IP thực. Nếu bạn muốn thiết lập một website mà người dùng Internet có thể truy cập vào được, ít nhất máy chủ chứa website phải có địa chỉ IP thực. Nếu bạn không có địa chỉ IP thực, bạn phải sử dụng dịch vụ webhosting để thuê chỗ đặt website trên các máy chủ có địa chỉ IP thực được kết nối với Internet. Hình 1.2 - Minh họa thiết lập giao thức TCP/IP 1.2.2. Tên miền (Domain name) Tên miền có thể được xem như là tên giao dịch của công ty hay tổ chức trên Internet. Tên miền của các công ty thương mại thường có dạng yourcompany.com. Ví dụ, công ty Intel sẽ lấy tên là miền là intel.com; công ty Microsoft lấy tên miền là microsoft.com; Việc đưa ra khái niệm tên miền giúp cho việc truy cập đến các tài nguyên trên Internet dễ dàng hơn. Việc ánh xạ qua lại giữa tên miền và địa chỉ IP của máy phục vụ được thực hiện bởi DNS Server. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 5 6
  4. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Ví dụ một địa chỉ www.intel.com cho ta một số thông tin sau: đây hàng năm. Nếu hết thời hạn sở hữu mà bạn không trả chi phí, tên là địa chỉ của một máy thuộc tổ chức sở hữu tên miền intel.com miền này có thể bị người khác mua lại (và sẽ rất khó khăn khi bạn (chính là công ty Intel). Địa chỉ IP của máy này sẽ là muốn đòi lại tên miền này từ tay người khác). Trên Internet hiện nay 192.102.198.160 (sử dụng chương trình nslookup để tra) và máy có nhiều người thường mua trước các tên miền của các công ty mà này có tên là “www” (thông thường là máy cung cấp dịch vụ web). họ dự đoán sẽ nổi tiếng nhưng chưa lập trang web. Sau này khi các Phần "com" trong tên miền mô tả mục đích của tổ chức (trong công ty này cần tên miền, họ sẽ bán lại với giá rất đắt. Tuy nhiên, trường hợp này là "commercial" – thương mại) và được gọi là tên bạn vẫn có thể mua trước tên miền mà chưa cần lập website. miền cấp 1 (top-level domain name). Phần ngay trước dấu “.” trong tên miền trên thông thường là tên của tổ chức (ví dụ như intel) được gọi là tên miền cấp 2 (second-level domain name). Tên miền cấp 3 thông thường được dùng để định nghĩa một máy phục vụ cụ thể nào đó và toàn bộ chúng sẽ được ánh xạ tới một địa chỉ Internet. Tên miền cấp 1 bao gồm các mã quốc gia của các nước tham gia Internet được quy định bằng hai chữ cái theo tiêu chuẩn ISO - 3166 như Việt nam là VN , Anh quốc là UK, Nhật bản là JP, và 7 lĩnh vực dùng chung, trong đó có 5 dùng chung cho toàn cầu và 2 chỉ dùng ở Mỹ. Năm tên miền cấp 1 dùng chung là: • .com: công ty thương mại (commercial). Hình 1.3 – Phân cấp của các tên miền • .edu: các trường học, tổ chức giáo dục (education). 2. CÁC DỊCH VỤ CƠ BẢN CỦA MẠNG INTERNET • .net: các mạng (network) 2.1. World Wide Web (WWW) • .int: các tổ chức quốc tế (international organizations) Đây là dịch vụ thông dụng nhất trên Internet. Để sử dụng dịch vụ • .org: các tổ chức khác (other organizations). này, người dùng cần có một trình duyệt web thường được gọi là browser. Hai trình duyệt thông dụng nhất hiện nay là Internet Hai tên miền cấp 1 chỉ dùng ở Mỹ là: Explorer của công ty Microsoft và Netscape Navigator của công ty • .gov: các tổ chức chính phủ (government). Netscape. Để truy cập vào một trang web, bạn cần phải biết địa chỉ (URL - • .mil: các tổ chức quân sự (military). Uniform Resource Locator) của trang web đó . Ví dụ, để truy cập vào Một địa chỉ IP có thể được ánh xạ cho nhiều tên miền. Điều này trang web của công ty Microsoft, bạn gõ vào: cho phép nhiều cá nhân, công ty và các tổ chức chia sẻ cùng một Do dịch vụ này sử dụng giao thức Internet server. HTTP (Hypertext Transfer Protocol) nên mỗi địa chỉ trang web luôn được bắt đầu là http:// Do tầm quan trọng của tên miền nên một trong các bước đầu tiên của việc xây dựng website là thiết lập tên miền bằng cách mua từ các công ty được uỷ quyền bán tên miền ( Các tên miền có đuôi là .com rất thông dụng trong các giao dịch quốc tế. Ngoài ra, các công ty Việt nam cũng thường hay lấy tên miền có đuôi là .com.vn. Để sở hữu tên miền, bạn phải trả chi phí Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 7 8
  5. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Giao thức thường dùng để gửi/nhận e-mail là SMTP(Simple Mail Transfer Protocol)/POP3 (Post Office Protocol 3). Để sử dụng dịch vụ email, bạn cần phải có: • Địa chỉ email. Một địa chỉ email thường có dạng name@domainname. Ví dụ, trong địa chỉ email duyld@yahoo.com, duyld đóng vai trò là tên, yahoo.com là tên miền. • Địa chỉ email được quản lí bởi mail server. Tại Việt Nam, các nhà cung cấp dịch vụ email thường là các ISP như VDC, FPT, SaigonNet. Do đó, tên miền trong các địa chỉ email của bạn thường là: hcm.vnn.vn, hn.vnn.vn, hcm.fpt.vn, fpt.vn, saigonnet.vn, Tuy nhiên, có rất nhiều website trên Internet cung cấp dịch vụ email miễn phí. Thông dụng nhất vẫn là Yahoo, Hotmail, • Tên đăng nhập và mật khẩu để truy cập vào hộp thư: Điều này đảm bảo rằng chỉ có bạn mới có thể đọc và gửi các thư của chính mình. Hình 1.4 – Dùng IE để truy cập trang web công ty Microsoft 2.3. Truyền, tải tập tin - FTP Trong mỗi trang web mà bạn truy cập vào, bạn có thể thấy được FTP (File Transfer Protocol) là dịch vụ dùng để trao đổi các tập văn bản, hình ảnh, âm thanh, được trang trí và trình bày hết sức tin giữa các máy tinh trên Internet với nhau. FTP thường được dùng đẹp mắt. Ngoài ra, để có thể di chuyển tới các trang web khác, bạn để tải các trang web từ những người thiết kế đến các máy chủ. Nó có thể sử dụng các hyperlink (siêu liên kết). Do con trỏ chuột thường cũng thường được dùng để tải các chương trình và các tập tin khác thay đổi hình dạng ngang qua một đối tượng có chứa hyperlink nên từ các máy chủ trên mạng. đây là cách đơn giản để nhận diện chúng. Một số chương trình FTP với giao diện đồ họa thân thiện hữu ích Sự ra đời của www thực sự là một bước ngoặt lớn của mạng hiện nay là: Internet bởi vì nó tạo cơ hội cho bạn truy cập đến một kho thông tin khổng lồ với hàng triệu triệu trang web. Điều này mở ra nhiều cơ hội • WS_FTP ( và thách thức lớn cho công việc của bạn trong hiện tại và tương lai. • CuteFTP ( 2.2. Thư điện tử - Email • FTP Explorer ( E-mail (electronic mail) là dịch vụ trao đổi các thông điệp điện tử bằng mạng viễn thông. Các thông điệp này thường được mã hóa 2.4. Tán gẫu - Chat dưới dạng văn bản ASCII. Tuy nhiên bạn cũng có thể gửi các tập tin Dịch vụ tán gẫu cho phép người dùng có thể trao đổi trực tuyến hình ảnh, âm thanh cũng như các tập tin chương trình kèm theo với nhau qua mạng Internet. Cách thông dụng nhất là trao đổi bằng email. E-mail là một trong những dịch vụ nguyên thủy của Internet và văn bản. Nếu đường truyền tốt, bạn có thể trò chuyện tương tự như được sử dụng rất rộng rãi. Chiếm phần lớn thông lượng trên mạng nói chuyện điện thoại. Internet là e-mail. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 9 10
  6. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Các chương trình hỗ trợ tán gẫu thông dụng hiện nay là: Google ( • AOL Instant Messenger • Yahoo Messenger Các chương trình này không những hỗ trợ tán gẫu qua văn bản thông thường mà còn hỗ trợ trò chuyện bằng âm thanh (voice chat) và hình ảnh (webcam) 3. KHAI THÁC CÁC TÀI NGUYÊN CỦA MẠNG INTERNET 3.1. Một số website hữu ích 3.1.1. Tra cứu thông tin Yahoo ( Altavista ( Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 11 12
  7. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 3.1.2. Thư viện phần mềm ZDNet ( 3.1.3. Nghiên cứu, khoa học, giáo dục Codeguru ( CNet ( CodeProject ( Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 13 14
  8. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org MSDN ( ProgrammersHeaven ( 3.1.4. Mua bán trực tuyến Expert exchange ( Amazon ( Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 15 16
  9. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org eBay ( 3.2. Một số công cụ khai thác tài nguyên Internet 3.2.1. Teleport Pro ( Công cụ rất hữu ích cho phép tải toàn bộ website. Điều này giúp chúng ta xem website offline ngay trên máy của mình, tiết kiệm thời gian truy cập Internet. Teleport Pro hoạt động hoàn toàn tự động, chương trình tự chia làm nhiều nhánh hoạt động đồng thời (multithreaded). Ngoài ra chương trình này còn có chế độ tự động tải theo lịch (schedule) Yahoo Shopping ( Hình 1.5 - Màn hình giao diện của Teleport Pro 3.2.2. FlashGet ( FlashGet là công cụ nhằm hỗ trợ cho tải các tập tin trên Internet và quản lí chúng một cách hiệu quả. Thông thường, việc tải một tập tin từ Internet không thành công do đường truyền chậm hay một sự cố nào đó. FlashGet đặc biệt hiệu quả ở hai khả năng đó là tải các tập tin lớn và quản lí các tập tin đã tải về để phục vụ cho nhu cầu cập nhật hoặc tải lại sau này. FlashGet tải các tập tin bằng cách chẻ nhỏ (split) các tập tin thành các phần nhỏ và tải các phần này đồng thời. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 17 18
  10. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Điều này tận dụng tối đa đường truyền rảnh và giảm thời gian tải nhấn nút Validate để loại bỏ các links; các websites không còn hoạt một tập tin rất đáng kể. Trong trường hợp đường truyền chậm hoặc động và nút Refine để tinh chỉnh kết quả tìm kiếm hơn nữa. hay bị đứt quãng nửa chừng, FlashGet duy trì được trạng thái hiện hành các tập tin này để có thể tiếp tục tải một khi đường truyền hoạt Kết quả tìm thấy được trình bày trong cửa sổ bên dưới trong động tốt trở lại. những ô theo thứ tự mức độ liên quan với chủ đề tìm kiếm, có tên và địa chỉ các trang web, thứ tự, ngày tìm được và hệ thống dò tìm nào FlashGet tích hợp với các trình duyệt để một khi bạn click vào đã tìm được, và vài dòng văn bản mô tả các trang web đó. Các font một hyperlink có tải tập tin, chương trình FlashGet sẽ tự động bật chữ và màu sắc trong các ô này có thể được điều chỉnh theo ý lên và tự động tải tập tin về. người dùng. Kết quả được tự động lưu lại để sau này xem lại hoặc để cập nhật (update), tức là tìm kiếm lại nhưng chỉ tìm những thông tin mới nên có kết quả rất nhanh. Khi có kết quả, Copernic đề nghị ta xem bằng trình duyệt có sẵn được gọi là Results Explorer, hoặc khi ta nhấn vào nút Results. Lúc này kết quả tìm thấy được trình bày chi tiết hơn và đẹp hơn dưới dạng HTML.Trong Results Explorer, các địa chỉ tìm được có thể được duyệt, tải về một cách dễ dàng thuận tiện, và được lưu lại để sau này xem lại. Nếu bạn sử dụng Internet Explorer, nút Search trên Tool Bar sẽ được Copernic sử dụng, và như thế trong khi lướt trên Internet bất cứ lúc nào bạn cũng có thể nhấn nút Search để tìm kiếm thông tin bằng Copernic. 4. MỘT SỐ THUẬT NGỮ THÔNG DỤNG • Internet: Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế giới. Tập các giao thức được dùng gọi chung là TCP/IP. • Intranet: Mạng cục bộ có kiến trúc tương tự mạng Internet. Hình 1.6 - Màn hình giao diện của FlashGet • Website: Tập hợp các trang web. Website của các tổ chức 3.2.3. Copernic ( hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này. Copernic là phần mềm tìm kiếm thông minh và đa năng vì nó cho phép người dùng điều khiển nhiều máy tìm kiếm (search engines) • Webpage: Là trang web. Có thể hiển thị các thông tin dưới cùng một lúc để tìm kiếm thông tin mà mình yêu cầu. Copernic có dạng văn bản, hình ảnh, âm thanh, thể sử dụng đến 1000 máy tìm kiếm nổi tiếng và quan trọng nhất • Web browser: Trình duyệt web, dùng để hiển thị các trang trên Internet. web. Các web browser thông dụng hiện nay là Internet Copernic tìm kiếm cùng một lúc trên tất cả các máy tìm kiếm Explorer của công ty Microsoft và Netscape Navigator của trong nhóm nên có kết quả rất nhanh.Trong khi tìm kiếm nó tự động công ty Netscape. loại bỏ các kết quả trùng lặp. Khi có kết quả, người dùng có thể • Homepage: Trang chủ hay còn gọi là trang nhà. Thường là trang đầu tiên (mặc định) khi truy cập một website. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 19 20
  11. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org • Hyperlink: siêu liên kết. Dùng để liên kết các trang web và 5.3. Tải tập tin bằng email dịch vụ của các website trên Internet. Thông thường trong các mạng mà kết nối không được duy trì • IAP (Internet Access Provider): Nhà cung cấp đường truyền liên tục, việc tải một tập tin qua giao thức ftp hầu như rất khó khăn. Internet. Tuy nhiên bạn có thể vẫn tải được tập tin lưu ở ftp server thông qua email với sự trợ giúp của một FTPMail Server. Có thể tóm tắt như • ISP (Internet Service Provider): Nhà cung cấp dịch vụ sau : Internet. Thông thường, bạn phải thông qua một ISP nào đó để đăng kí dịch vụ truy cập Internet qua mạng điện thoại. Các 5.3.1. Hoạt động của FTPMail Server: nhà cung cấp ISP hiện nay tại Việt Nam là VDC, FPT, SaigonNet, NetNam, Thay vì bạn phải kết nối trực tuyến tới FTP server (theo email của bạn là host.domain) và thực hiện các lệnh tải tập tin về (cách • Search engines: Máy tìm kiếm. Do số lượng các trang web này thường ít khi thành công vì đường kết nối của chúng ta quá trên Internet rất lớn nên các máy tìm kiếm sẽ hỗ trợ cho bạn chậm), FTPMail server sẽ nhận yêu cầu của bạn qua email dưới khi cần truy tìm các trang web liên quan tới vấn đề mà bạn dạng các lệnh của giao thức ftp, sau đó nó sẽ truy cập tới FTP quan tâm trong tập hợp khổng lồ các trang web này. Các máy server mà bạn yêu cầu để tải tập tin về. Cuối cùng nó sẽ chuyển tập tìm kiếm thông dụng hiện nay là Yahoo, Google, Altavista, tin sau khi tải về thành dạng email rồi gửi về cho bạn. • HTTP, FTP, SMTP, POP3, : Đây là các giao thức được 5.3.2. Các bước để thực hiện: dùng cho các dịch vụ web, ftp, email trên Internet. Bạn cần phải biết địa chỉ của FTPMail Server để gửi yêu cầu đến 5. MỘT SỐ CÂU HỎI THƯỜNG GẶP đó, ví dụ bạn có thể sử dụng địa chỉ sau ftpmail@ftp.sunet.se. Các địa chỉ khác có thể là: ftpmail@doc.ic.ac.uk, ftpmail@ieunet.ie, 5.1. Cách lưu một trang web từ Internet ftpmail@ftp.uni-stuttgart.de , bitftp@vm.gmd.de. Cách 1: Nếu bạn dùng trình duyệt Internet Explorer từ 5.0 trở lên Bạn phải tìm hiểu cách viết các lệnh ftp để yêu cầu FTPMail hãy chọn chức năng Favorites/Add to Favorites sau đó đánh dấu server tải tập tin về: có thể làm điều này bằng cách gửi email tới chọn vào Make available offline. Khi đó toàn bộ trang Web cùng các FTPMail Server, phần body gõ help. Các lệnh cơ bản là OPEN, DIR, tập tin đi kèm sẽ được tải về. Lần sau, bạn chỉ cần vào lại Favorites GET, QUIT, và chọn trang đã tải về. Ðối với các tập tin có kích thước lớn, FTPMail Server sẽ tự động Cách 2: Nếu bạn muốn lưu tất cả các thành phần của trang web "chẻ" (split) ra thành các mảnh nhỏ và kết quả là bạn sẽ nhận được (bao gồm hình ảnh, ) dưới dạng một tập tin thì trong hộp thoại rất nhiều email kết quả. Ðể có được tập tin mà bạn đã yêu cầu, cần Save As, chọn dòng Save As Type là Web Archive, single file phải "nối" (merge) các kết quả này lại. Nếu sử dụng Outlook (*.mht). Express, chương trình này sẽ tự động làm cho bạn. 5.2. Làm thế nào để sau khi check mail xong, mail vẫn Các FTPServer Mail thường rất bận, nên sau khi gửi yêu cầu đi còn trên server bạn phải kiên nhẫn nhờ kết quả trả về (nếu chậm có thể vài ngày). Sau khi check mail bằng Outlook Express mà mail vẫn không bị Ví dụ sau minh họa việc tải một tập tin thông qua FTP Mail xóa trên mail server.Bạn vào Outlook Express chọn menu Server bằng cách gửi email đến địa chỉ ftpmail@ftp.sunet.se với nội Tools/Accounts. Chọn account mà bạn đã setup để nhận email từ dung sau: Yahoo. Chọn mục Properties/Advanced. Trong mục Delivery, check vào ô Leave a copy of messages on server. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 21 22
  12. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org open ftp.ets.org cd /pub/toefl mode binary uuencode get 993007listb.pdf quit Lệnh open đầu tiên sẽ yêu cầu FTP Mail Server kết nối với FTP Server ftp.ets.org. Lệnh tiếp theo cd /pub/toefl yêu cầu chuyển đến thư mục có tập tin cần tải. Lệnh mode binary yêu cầu server truyền dữ liệu theo dạng nhị phân thay vì dạng văn bản ASCII. Lệnh uuencode yêu cầu server mã hóa dữ liệu trước khi truyền đi. Lệnh get yêu cầu server chuyển cho tập tin cần lấy về và lệnh quit chấm dứt kết nối với server ftp.ets.org. Sau khi FTP Mail Server kết nối với FTP Server để thực hiện các lệnh trên xong, tập tin lấy về sẽ được FTP Mail Server chuyển về cho bạn qua đường email. 5.4. Phòng chống các virus bằng Norton AntiVirus Hiện nay, virus lây lan qua đường email rất nhanh. Do đó để có thể bảo vệ hệ thống của bạn khỏi bị các virus lây qua email, bạn nên cài đặt chương trình phòng chống virus thông dụng nhất hiện nay là Hình 1.7 - Màn hình giao diện của phần mềm Norton Antivirus 2001 Norton Antivirus. Đặc điểm của chương trình này là nó có thể kiểm 5.5. Phòng chống virus lây lan qua đường email tra virus toàn bộ các email tải về máy của bạn trước khi bạn đọc nó. Khi gặp virus, chương trình sẽ tự động thông báo hoặc diệt ngay tùy Đây là một mẹo vặt giúp tránh lây virus qua đường email khi máy theo yêu cầu của bạn. của bạn bị nhiễm virus. Lưu ý là nó không giúp cho máy bạn tránh bị nhiễm worm nhưng nó giúp ngăn chặn việc sử dụng sổ địa chỉ email Do virus mới xuất hiện ngày càng nhiều, nên bạn phải thường của bạn để lây tiếp cho những người khác. xuyên tải các cập nhật mới nhất về các virus mới tại website của công ty Symantec sở hữu phần mềm này. Đầu tiên, mở Address Book ra và chọn New Contact tương tự hoặc cho chạy như thêm vào một tên mới. Trong cửa sổ, thay vì đánh tên của bạn chương trình Live Update để tự động cập nhật các thay đổi mới nhất bè, gõ vào: !000 (dấu chấm than và 3 số không). của phần mềm này. Ở cửa sổ bên dưới, nơi mà thay vì gõ địa chỉ email của bạn bè, gõ vào dòng chữ sau: WormAlert. Sau cũng, hoàn tất công việc bằng cách click Add, Enter và Ok "!000" sẽ được đặt đầu tiên trong Address Book và nó được đánh số 1. Đây sẽ là "người" đầu tiên mà con Worm sẽ bắt đầu lây. Nhưng người này lại có địa chỉ email là "WormAlert", không đúng quy cách nên nó không thể phát tán thông qua việc gởi cho những người tiếp theo có địa chỉ trong Address Book của bạn. Khi email không được gởi đi, bạn sẽ nhận lại một thông báo ngay lập tức trong Inbox. Như vậy, nếu bạn nhận được một email Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 23 24
  13. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org nói rằng "Email addressed to WormAlert could not be delivered", bạn Để gửi email bằng tiếng Việt, trong các ứng dụng như Yahoo biết ngay là "Worm" đang nằm ngay trong máy bạn. Mail, Hotmail, Outlook, Outlook Express, bạn phải thực hiện như sau: 5.6. Sử dụng Internet trong học tập Khi sử dụng các máy tìm kiếm như Yahoo, Altavista, trong • Trong Hotmail: Đặt chế độ Rich Text Editor ON trong mục việc tìm các trang web, một trong các những điều bất tiện cho chúng chọn bên trái ngay trên phần nội dung của email ta là số kết quả trả về quá nhiều. Để có thể tìm kiếm hiệu quả hơn trong lĩnh vực tin học, bạn có thể vào một trong 2 site giúp tra cứu thuật ngữ tin học đó là: và . Ngoài việc giải thích nghĩa của mỗi thuật ngữ Tin học, các bạn sẽ tìm được ở đây các liên kết tới các site chứa thông tin liên quan. Ví dụ, nếu bạn muốn tìm các site chứa các hướng dẫn lập trình, cũng như các kĩ thuật, về ASP, bạn hãy vào một trong hai site trên gõ từ cần tìm kiếm là ASP. Trong trang giải thích thuật ngữ về ASP, bạn sẽ nhận được các liên kết tới các site cần thiết để tìm hiểu về ASP. 5.7. Dùng tiếng Việt Unicode trong các email client Để xem được tiếng Việt Unicode trong các email gửi đến các địa chỉ email Yahoo, Hotmail, bạn phải đặt Encoding của trình duyệt là UTF-8 (Chọn View/Encoding/UTF-8). Hình 1.9 – Thiết lập chế độ hỗ trợ tiếng Việt Unicode trong Hotmail • Trong Yahoo Mail: Đặt chế độ Color and Graphics trong mục Compose khi soạn thảo email. Hình 1.8 – Thiết lập Encoding là UTF-8 trong trình duyệt IE Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 25 26
  14. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org CÂU HỎI 1. Hãy cho biết các dịch vụ Internet thông dụng và các giao thức được sử dụng cho các dịch vụ này. 2. Tìm hiểu cách phân lớp trong địa chỉ IP. Hãy cho biết các địa chỉ IP của Việt Nam thuộc lớp nào. 3. Tại sao cần phải có sự ánh xạ giữa tên miền và địa chỉ IP? Hãy cho biết tên của dịch vụ thực hiện việc này. 4. Cho biết các tên miền được dùng thông dụng hiện nay. 5. Tìm hiểu một số công ty được ủy quyền cấp tên miền trên Internet. 6. Chỉ ra một lợi ích của mạng Internet mà bạn hay công ty của bạn đã hoặc có thể có được. Hình 1.10 – Thiết lập chế độ hỗ trợ tiếng Việt Unicode trong Yahoo Mail 5.8. Chat tiếng Việt trong Yahoo Messenger Trên Windows NT/2000/XP, sử dụng UniKey 3.55 ( ta có thể chat bằng tiếng Việt Unicode trong Yahoo Messenger. Để thực hiện, hãy chọn bảng mã Vietnamese Locale CP 1258 trong UniKey. Để dùng CP 1258 máy của bạn cần cài đặt hỗ trợ tiếng Việt của Windows Vietnamese locale. Với Windows XP, hãy Control Panel/ Regional and Language Options/Languages/ Details. Sau đó, nếu trong hộp thoại "Text Services and Input languages" chưa thấy Vietnamese keyboard trong đó thì chọn "Add", sau đó chọn Input Language là Vietnamese. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 27 28
  15. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org THỰC HÀNH • Lưu các trang web lại dưới dạng các tập tin để lần sau có thể theo dõi trên máy. • Dùng chức năng Work Offline để xem lại các trang web đã 1. MỘT SỐ THAO TÁC CƠ BẢN SỬ DỤNG MẠNG truy cập mà không cần kết nối lại Internet. INTERNET • Khai báo proxy server nếu máy kết nối Internet thông qua 1.1. Kết nối proxy. Để kết nối được mạng Internet, cần chuẩn bị các bước sau: 2. THIẾT LẬP DỊCH VỤ EMAIL TRONG OUTLOOK EXPRESS • Modem (internal hoặc external). Để thiết lập dịch vụ này, bạn thực hiện các bước sau: • Đường điện thoại. Khởi động Outlook Express. Vào mục Tools/Accounts /Add/Mail • Đăng kí dịch vụ với các nhà cung cấp dịch vụ Internet để biết được số điện thoại truy cập, tên đăng nhập và mật khẩu. Tại Màn hình sau sẽ hiện ra. Bạn điền vào Họ và tên. Tên này sẽ Việt Nam, bạn có thể đăng kí với các nhà cung cấp sau VDC, được dùng để hiển thị trong mục From trong các email mà bạn gửi FPT, SaiGonNet, . Sau khi đăng kí xong, bạn sẽ được nhận đi. một số tên đăng nhập, mật khẩu và số điện thoại mà bạn sẽ quay số từ máy của bạn vào máy chủ của nhà cung cấp dịch vụ. • Đối với VDC, có thể sử dụng các dịch vụ VNN1260, VNN1269, VNN-1260P. Dịch vụ VNN1269 là dịch vụ được dùng khá phổ biến hiện nay với số điện thoại quay vào là 1269, tên đăng nhập là vnn1269, mật khẩu là vnn1269. Sau khi đăng kí xong, vào mục Network Connections để tạo một kết nối với nhà cung cấp dịch vụ. Tham khảo thêm tại: 1.2. Sử dụng Internet Explorer để truy cập web Sau khi kết nối Internet thành công, hãy sử dụng Internet Explorer để thực hiện các thao tác sau: • Truy cập các website đã được đề cập ở trên; • Lần theo các hyperlink để truy cập đến các trang liên kết. • Lưu các trang trên lại trong Favorites. Lần sau, sử dụng Favorites để có thể chuyển đến nhanh chóng các trang web này. • Refresh (yêu cầu lại) các trang web mỗi khi truy cập trang web Sau khi điền xong, bạn nhấn nút Next. Màn hình sau sẽ hiện ra. gặp lỗi do đường truyền. Bạn hãy điền vào địa chỉ email của mình. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 29 30
  16. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Sau khi điền xong, bạn nhấn nút Next. Màn hình sau sẽ hiện ra. Sau khi điền xong, bạn nhấn nút Next. Màn hình sau sẽ hiện ra. Bạn hãy điền vào địa chỉ SMTP và POP3 mail server. Bạn hãy điền tên đăng nhập và mật khẩu dùng để truy xuất đến mail server. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 31 32
  17. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Sau khi điền xong, bạn nhấn nút Next. Màn hình sau sẽ hiện ra. Bạn hãy nhấn nút Finish để kết thúc việc thiết lập. 3. ĐĂNG KÍ DỊCH VỤ EMAIL MIỄN PHÍ • • • • • 4. THAM KHẢO CÁC TRANG WEB SAU 4.1. Các site bán hàng • • • • Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 33 34
  18. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 4.2. Các site giải trí 5. CHIA SẺ ĐƯỜNG KẾT NỐI INTERNET • Một đơn vị (ví dụ như một công ty nhỏ, một quán cafe Internet, ) muốn kết nối với Internet. Để tiết kiệm, đơn vị này chỉ muốn sử • dụng một đường kết nối bằng điện thoại cho tất cả các thành viên • muốn truy cập Internet. Giải pháp đề nghị như sau: • Thiết lập một mạng máy tính nối các các máy của đơn vị. Các máy trạm cài đặt hệ điều hành Windows 9x, hoặc Windows 2000, sử • dụng giao thức TCP/IP. • Cài đặt một phần mềm hỗ trợ ví dụ như WinGate • ( ngay tại máy có gắn modem, kết nối với Internet. 4.3. Các site thông tin và báo điện tử của Việt Nam Thiết lập các thông số trong WinGate. Phần mềm này cung cấp • các khả năng như sau: • • Cho phép chia sẻ kết nối Internet. Hệ thống sẽ tự động quay số mỗi khi có yêu cầu kết nối Internet và sẽ tự động ngắt khi • không còn yêu cầu nào nữa. • • Cho phép kiểm soát các website truy cập. Bạn có thể cấm các • thành viên truy cập các website mà bạn không cho phép. • • • • • 4.4. Tham khảo các site về lao động việc làm tại VN • • • • • Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 35 36
  19. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Chương 2 THIẾT LẬP WEBSITE 1. CÀI ĐẶT WEBSERVER WebServer là chương trình cung cấp dịch vụ www. Một webserver có thể phục vụ cho nhiều website. Port mặc định cho dịch vụ web là 80. Có nhiều phần mềm hỗ trợ webserver. Trên môi trường của Microsoft, thông dụng nhất vẫn là IIS (Internet Information Server) với các phiên bản chạy trên hệ điều hành WindowsNT 4.0 và Windows 2000. Ngoài ra các máy sử dụng hệ điều hành Win9x, Microsoft cũng hỗ trợ cài đặt webserver thông qua phần mềm PWS (Personal Web Server). 1.1. Cài đặt IIS trên Windows/XP 2000 Server và Windows 2000/XP Professional Để cài đặt IIS trên hệ điều hành Windows 2000 Server hay Hình 2.1 - Màn hình Control Panel/Add Remove Programs Windows 2000 Professional, bạn vào mục Start/Settings/Control Panel/Add Remove Programs. Chọn mục Add/Remove Windows Trong cửa sổ Windows Components Wizard, chọn checkbox Components. Internet Information Services. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 37 38
  20. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 2.3 - Màn hình quản trị và cấu hình IIS Hình 2.2 - Màn hình cài đặt các Windows Components 1.2. Cài đặt Personal Web Server (PWS) trên Win 98 Các dịch vụ mặc định được cài là Web Server, FTP Server, Để cài đặt Personal Web Server trên hệ điều hành Windows 98, Virtual SMTP Server. bạn vào thư mục \Add-ons\pws trên đĩa CD dùng để cài đặt hệ điều hành này hoặc đĩa CD có phần NT Option Pack. Tìm và chạy tập tin Sau khi cài đặt xong, các thư mục mặc định sau sẽ được tạo ra: setup.exe. \Inetpub\ \Inetpub\wwwroot \systemroot\Help\iisHelp \systemroot\system32\inetsrv systemroot là thư mục system32 trong thư mục cài đặt Windows Để quản trị và cấu hình các dịch vụ này, bạn hãy chạy chương trình Internet Services Manager trong mục Start/Programs/Administrative Tools. IIS cài đặt trên Windows 2000 Professional có một số giới hạn so cài đặt trên với Windows 2000 Server như chỉ được tạo một website, số kết nối bị giới hạn, Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 39 40
  21. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 2.4 - Màn hình cài đặt Personal Web Server Hình 2.5 - Các lựa chọn các thành phần khi cài PWS Chọn các thành phần chính của Personal Web Server từ màn hình như hình 2.5. Sau khi cài đặt thành công xong, hãy chạy cài thêm phiên bản mới nhất của ADO để có thể hỗ trợ tốt nhất cho các thao tác trên cơ sở dữ liệu (ví dụ MDAC 2.6). Để quản lí và cấu hình webserver này, hãy chạy chương trình Personal Web Manager. Hình 2.6 – Màn hình quản trị và cấu hình PWS Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 41 42
  22. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 1.3. Các cách thức truy cập đến website Sau khi đã cài xong webserver, để truy cập đến website ta dùng các cách sau: • • • http:// ví dụ: • http:// ví dụ: • http:// ví dụ: 2. CẤU HÌNH WEBSERVER 2.1. Các thông số chính Các thông số mặc định chính cho webserver là tên mô tả website (description), địa chỉ IP và port gán cho website. Port mặc định cho website là 80. Nếu bạn sử dụng một port khác, ví dụ như port 81 cho website, bạn phải ghi rõ trong đường dẫn URL. Ví dụ: . Ngoài ra, còn có các thông số liên quan đến số lượng các kết nối đồng thời (connections), đến định dạng và nơi lưu trữ tập tin nhật kí (log file) ghi lại quá trình truy cập website. IIS mặc định thiết lập thư mục C:\InetPub\wwwroot là home directory cho website có tên là Default WebSite. Hình 2.7 - Màn hình thiết lập các thông số cho website 2.2. Thư mục Home Directory Mỗi website phải có một home directory. Nó có thể được xem như là thư mục gốc của cây thư mục web bởi vì nó được ánh xạ với tên của máy chủ chứa website. Giả sử, nếu một máy có tên là www.microsoft.com và home directory là C:\Website\Microsoft, khi đó để truy cập tới một tập tin, ví dụ như Search.htm đặt trong thư mục C:\Website\Microsoft, bạn phải gõ vào đường dẫn sau: Nếu trong thư mục C:\Website\Microsoft, bạn tạo một thư mục con có tên là C:\Website\Microsoft\Products, thì để truy cập tới tập tin windowsnt.htm trong thư mục này, bạn phải gõ vào đường dẫn như sau: Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 43 44
  23. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org IIS mặc định thiết lập thư mục C:\InetPub\wwwroot là home Một thư mục ảo có một tên đại diện (alias). Đây là tên mà người directory cho website có tên là Default WebSite. dùng sẽ gõ vào trong đường dẫn khi muốn truy cập đến thư mục Để xem, hiệu chỉnh thư mục home directory cho một website bạn này. Do đó, khi tạo một thư mục ảo, bạn cần phải cung cấp 2 thông click phải chuột vào website rồi chọn Properties. Sau đó chọn mục tin, đó là tên đại diện của thư mục ảo và đường dẫn vật lí của thư Home Directory mục này. Trong ví dụ sau, giả sử bạn đã thiết lập được một website có tên là www.is-edu.hcmuns.edu.vn, bảng sau sẽ minh họa việc ánh xạ giữa các thư mục vật lí và đường dẫn tương ứng khi muốn truy cập đến chúng Physical Location Alias URL Path C:\InetPub\wwwroot (Home Directory) edu.hcmuns.edu.vn C:\InetPub\wwwroot\ Scripts Scripts edu.hcmuns.edu.vn/Scripts/ D:\WebForum Forum edu.hcmuns.edu.vn/Forum/ Trong Internet Services Manager, các biểu tượng tượng trưng cho thư mục ảo sẽ khác với các biểu tượng tượng trưng cho thư mục thực trong hiển thị cây thư mục của một website. 2.4. Tập tin truy cập mặc định (Default document) Để truy cập tới một trang web trên webserver, bạn phải chỉ định tên tập tin trong đường dẫn URL, ví dụ như: Tuy nhiên trong một số trường hợp, bạn không cần phải chỉ định tên tập tin trong đường dẫn URL mà vẫn nhận được trang web. Điều này thực hiện được do cơ chế tập tin mặc định được thiết lập trên webserver. Tập tin truy nhập mặc định là tập tin sẽ được webserver trả về khi người dùng không chỉ định tên tập tin cụ thể trong đường dẫn URL. Ví dụ, nếu bạn chỉ gõ đường dẫn trong ô Address của trình duyệt, bạn vẫn truy cập được vào trang Hình 2.8 - Màn hình thiết lập thông số cho Home Directory chủ của Mircrosoft dù không chỉ định tập tin chứa trang web này. 2.3. Thư mục ảo (Virtual Directory) Điều này có được là do webserver trả về tập tin mặc định (trong trường hợp này là trang chủ của Microsoft ) cho tất cả các yêu cầu Để truy cập tới các thư mục không nằm trong thư mục home không chỉ định tên tập tin. directory, bạn phải tạo một thư mục ảo. Một thư mục ảo là một thư mục mà về mặt vật lí nó không cần phải nằm trong thư mục home Các tập tin truy nhập mặc định thường có tên là default.htm, directory nhưng lại có dạng như thư mục thật trên đường dẫn truy default.asp, index.htm, index.asp, Tuy nhiên IIS cho phép bạn cập. định nghĩa bất kì tên tập tin nào là tập tin mặc định, đồng thời cho phép người dùng khai báo nhiều tập tin mặc định cùng lúc. Khi một Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 45 46
  24. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org yêu cầu gửi đến webserver mà không chỉ định tên tập tin, IIS sẽ tìm 2.5. Đặt nhiều website trên một web server (multiple kiếm trong danh mục các tập tin mặc định đã được khai báo, tập tin hosting) tồn tại đầu tiên sẽ được trả về cho trình duyệt máy client. Ví dụ nếu bạn định nghĩa default.htm, default.asp là các tập tin mặc định, thì Trong IIS, bạn có thể thiết lập cấu hình cho nhiều website cùng khi trên thư mục hiện hành không có tập tin default.htm mà chỉ có hoạt động. Phần này sẽ đề cập đến vấn đề là làm thế nào để nhiều tập tin default.asp, tập tin default.asp sẽ được gửi trả về cho trình website có thể sử dụng cùng một port (giả sử port 80). duyệt. Để thực hiện điều này, bạn chỉ cần định rõ tên miền của website Để xem và hiệu chỉnh các tập tin mặc định, hãy chọn mục và tên port. Hai thông tin này sẽ giup IIS xác định duy nhất một Properties của website. Sau đó chọn mục Documents. website. Bạn vào mục Advance trong mục xác định các thông số chính Web site (xem 2.1). Xem ví dụ sau: Hình 2.10 - Màn hình thiết lập nhiều website cùng hoạt động Hình 2.9 - Màn hình thiết lập danh sách các tập tin mặc định Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 47 48
  25. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 3. MỘT SỐ VẤN ĐỀ LIÊN QUAN ĐẾN AN TOÀN 3.1. Thiết lập quyền truy cập Để thiết lập quyền truy cập vào website cũng như các thư mục và tập tin trên website, bạn vào mục Properties của website rồi chọn Directory Security, Hình 2.12 - Màn hình thiết lập hạn chế theo tên miền, địa chỉ IP 3.2. Nhật kí sử dụng (website logging) Bạn có thể lưu lại dấu vết của các truy cập tới website của bạn trong tập tin nhật kí. Để yêu cầu các thông tin nào của vết truy cập sẽ được lưu lại, bạn chọn mục Properties của Log File. Hình 2.11 - Màn hình thiết lập quyền truy cập Để thiết lập hạn chế hay mở rồng quyền truy cập vào website theo vùng tên miền, địa chỉ IP, bạn chọn mục IP address and domain name restrictions Hình 2.13 - Màn hình chỉ định các thông số được lưu trong logfile Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 49 50
  26. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 4. MỘT SỐ CÂU HỎI THƯỜNG GẶP Các địa chỉ được sắp xếp theo chức năng hỗ trợ, rất tiện cho việc đánh giá ưu, nhược điểm của từng nhà cung cấp dịch vụ. Với 4.1. Không truy cập được trang web chức năng “Tìm kiếm nâng cao”, bạn sẽ dễ dàng tìm được nhà cung Sau khi cài đặt xong IIS/PWS nhưng thử địa chỉ cấp dịch vụ thỏa các yêu cầu của bạn. Ngoài ra bạn còn có thể đăng vẫn không chạy được. Trong trường hợp này hãy kiểm tra ký nhận bản tin qua e-mail giới thiệu về các dịch vụ webhosting mới webserver đã được khởi động (Start) hay chưa hoặc kiểm tra trong nhất. Internet Explorer mục Tools/Internet Options/Connections/LAN Sau đây là một số địa chỉ cho phép đặt các trang web viết bằng settings để xem lại các thiết lập của Proxy server. các ngôn ngữ ASP, PHP, JSP: 4.2. Lỗi The page cannot be found • ASP: Khi truy cập một trang web mà gặp thông báo lỗi như sau: , • JSP: The page cannot be found • PHP: The page you are looking for might have been removed, had its name Sau khi đăng kí xong, bạn sẽ được cung cấp một địa chỉ để truy changed, or is temporarily unavailable cập vào website của mình. Thông thường các freeserver chỉ cung Điều này có nghĩa rằng trang web mà bạn yêu cầu truy cập cấp dịch vụ giới hạn và chèn quảng cáo vào các trang web của không tồn tại trên máy chủ. Hãy kiểm tra lại địa chỉ trang web. website của bạn. 4.3. Lỗi You are not unauthorized to view this page 4.5. Làm thế nào để tải một website lên máy chủ Khi truy cập một trang web mà gặp thông báo lỗi như sau: Việc đưa trang web lên mạng thông thường bằng một trong hai cách sau: You are not authorized to view this • Dùng dịch vụ FTP. Nghĩa là nhà cung cấp sẽ cung cấp cho page bạn một tài khoản để đăng nhập vào FTP server chứa trang web. Lúc đó, bạn sẽ dùng kết nối vào FTP server này thông You might not have permission to view this directory or page using the qua các phần mềm FTP Client như Windows Commander, credentials you supplied. WS-FTP. Cách này thì rất thuận tiện và đơn giản, do đó được Điều này có nghĩa rằng bạn không được phép truy cập trang sử dụng rất phổ biến. Tuy nhiên dịch vụ này lại hầu như web mà bạn đang yêu cầu truy cập. Hãy kiểm tra lại địa chỉ trang không được hỗ trợ khi bạn đăng kí miễn phí. web và quyền truy cập mà bạn đang sử dụng. • Tại các website hosting cho phép người dùng sử dụng giao 4.4. Các địa chỉ cho phép đặt trang web (web hosting) diện web của họ để upload tập tin lên. Tuy nhiên cách này bị miễn phí hạn chế ở chỗ kích thước tập tin bạn upload trong 1 lần và số lượng tập tin được upload đồng thời. Nếu bạn có khoảng 100 Hãy truy cập vào website khi bạn tập tin thì việc upload sẽ rất vất vả. cần tìm kiếm một máy chủ để đặt trang web của mình. Website này liên kết đến hàng trăm địa chỉ cung cấp dịch vụ lưu trữ trang web 4.6. Dùng cơ sở dữ liệu trên các máy chủ miễn phí miễn phí. Thông thường các máy chủ miễn phí (freeserver) không bao giờ hỗ trợ cơ sở dữ liệu (CSDL) như SQL Server, Oracle cả, đơn giản là Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 51 52
  27. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org phải trả chi phí về phần mềm. Thậm chí khi bạn trả tiền cho thuê chỗ (web hosting), cũng phải trả thêm tiền mới được hỗ trợ SQL Server, CÂU HỎI Oracle, . Do đó, hầu hết các freeserver chỉ hỗ trợ tối đa cho bạn là Access như Brinkster mà thôi, hoặc là các CSDL miễn phí khác như MySQL, 1. Hãy cho biết vai trò của các phần mềm như IIS và PWS. Thông thường do người dùng không được quyền thao tác trên 2. Phân biệt thư mục vật lí và thư mục ảo. Ý nghĩa của thư mục ảo. máy chủ thuê (server hosting) nên các ứng dụng web không thể sử 3. Cho biết các tập tin mặc định thông dụng đối với các website. dụng các system DSN mà phải kết nối CSDL dưới dạng DSN-less. Cách khai báo này cũng khá đơn giản, bạn có thể tham khảo bất cứ 4. Làm thế nào để hạn chế các đối tượng được truy cập đến một tài liệu hướng dẫn lập trình kết nối web với CSDL nào. tập tin hay một thư mục nào đó. Nếu bạn dùng Access thì trong phần đường dẫn đến tập tin .mdb 5. Làm thế nào để hạn chế các máy tính được phép truy xuất đến phải dùng Server.MapPath để ánh xạ thư mục gốc của webroot, website. không được dùng đường dẫn tuyệt đối dạng: C:\mywebsite\db. 6. Làm thế nào để có thể phát hiện các sự xâm nhập trái phép của các tin tặc vào máy chủ của bạn. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 53 54
  28. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org THỰC HÀNH 2. ĐĂNG KÍ WEBSITE MIỄN PHÍ TẠI FREESERVERS Freeservers cho phép bạn đặt website của bạn lên server của họ miễn phí. Tuy nhiên dịch vụ này chỉ cho phép trang web tĩnh, do đó 1. CÀI ĐẶT VÀ CẤU HÌNH WEBSERVER các trang web chứa các mã ASP, PHP, không thực hiện được Cài đặt IIS hay PWS lên máy của bạn. Sau đó thực hiện tuần tự Vào địa chỉ để đăng kí website các bước cấu hình sau: miễn phí với địa chỉ truy cập có dạng • Thay đổi thư mục Home Directory: Tạo trên máy một thư mục để chứa website, ví dụ: C:\MyWebSite và cấu hình sao cho thư mục HomeDirectory của Website trỏ về thư mục này thay cho thư mục mặc định là C:\InetPub\wwwroot • Truy cập theo đường dẫn đến thư mục vật lí: Tạo thư mục BookStore trong thư mục C:\MyWebSite. Sau đó unzip tập tin BookStore.zip nằm trong AppSamples\BookStore của đĩa CD vào thư mục này. Truy cập ứng dụng BookStore từ địa chỉ: • Tạo thư mục ảo: Tạo một thư mục RealEstate ở ngoài thư mục C:\MyWebSite, ví dụ như D:\RealEstate. Tiếp theo unzip tập tin RealEstate.zip nằm trong thư mục AppSamples\RealEstate của đĩa CD vào thư mục này. Sau đó tạo một thư mục ảo, lấy tên là RealEstate sao cho trỏ đến thư mục D:\RealEstate. Truy cập ứng dụng RealEstate từ địa chỉ: • Kiểm tra web server có hỗ trợ ASP hay không: Tạo thư mục D:\MyApp, sau đó tạo một thư mục ảo có tên là MyApp trỏ đến thư mục này. Tạo một tập tin default.asp với nội dung trong D:\MyApp rồi chạy thử bằng cách gõ vào địa chỉ: • Cấu hình tập tin mặc định: Kiểm tra xem các tập tin mặc định của website là gì. Sau đó cấu hình để cho website truy cập các tập tinh mặc định theo thứ tự sau: default.asp, index.asp, default.htm, index.htm. Nếu là IIS cài đặt trên webserver, cấu hình FTP server sao cho các user khi kết nối với server sẽ được chuyển đến thư mục C:\MyWebSite. Cấu hình IIS sao cho có thể hosting đồng thời nhiều website. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 55 56
  29. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Gõ vào địa chỉ mà bạn dự định đăng kí tại ô yourname. Sau đó click Go. Màn hình tiếp theo sẽ hiện ra, bạn chọn mục cuối cùng 100% Free Hosting Option và click vào SignUp Nếu đăng kí thành công, màn hình sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xây dựng website của mình. Sau đó bạn hãy điền vào các thông tin liên quan cần thiết như Họ tên, mật khẩu, email, Cuối cùng gõ vào chuỗi kí tự theo yêu cầu giống bên trái để chắc rằng bạn đã đồng ý với các qui định của FreeServers khi cung cấp dịch vụ miễn phí này. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 57 58
  30. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 3. CÀI ĐẶT WEBSERVER IIS HỖ TRỢ PHP Vào trang chọn trong mục Windows Binaries/PHP 4.3.1 installer để tải phần mềm mới nhất về. Thực hiện chương trình php-4.3.1-installer.exe để chương trình tự cài đặt và cấu hình webserver IIS hỗ trợ PHP. Chú ý rằng phải cài IIS trước khi cài PHP và trong màn hình setup của PHP, chọn webserver tương ứng với webserver đang cài trên máy của bạn (mặc định là Microsoft IIS 4 or higher) 4. ĐĂNG KÍ DỊCH VỤ ĐẶT TRANG WEB MIỄN PHÍ Hãy vào các địa chỉ web hỗ trợ đặt trang web miễn phí được đề cập trong phần 4.4 để đăng kí. Thông thường các bước tuần tự như sau: Để kiểm tra việc cài đặt có thành công hãy không, hãy vào trình • Điền vào các thông tin đăng kí, tên đăng nhập, mật khẩu, địa quản lí webserver IIS là Internet Information Services, chọn phần chỉ email để chương trình gửi thông tin yêu cầu xác nhận Web Sites. Trong mục Home Directory, chọn Configuration, kiểm tra đăng kí. xem trong Application Mappings có khai báo trình xử lí trang php hay không như hình sau: • Sau khi đăng kí thành công, bạn sẽ được cung cấp một nơi lưu trữ trên máy chủ và địa chỉ trang web để truy cập đến nơi này. • Để đưa website mình đã thiết kế lên, bạn sử dụng các dịch vụ tải tập tin của nơi hỗ trợ, có thể là theo cách dùng FTP hoặc dùng trình duyệt. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 59 60
  31. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Chương 3 Mặc dù lúc soạn thảo bạn có thể ngắt dòng, hay thêm nhiều khoảng trắng vào nhưng khi hiển thị, ba đoạn trên đều cho kết quả THIẾT KẾ TRANG WEB như nhau là: The browser will ignore new lines and extra spaces in the text Khi bắt đầu soạn thảo một trang web, các tag cơ bản sau sẽ 1. GIỚI THIỆU VỀ HTML đóng vai trò là khung cho việc định nghĩa một trang HTML. Xét ví dụ của một trang HTML đơn giản sau: HTML là ngôn ngữ dùng để xây dựng trang web. Nó mô tả cách thức mà dữ liệu được hiển thị thông qua tập các kí hiệu đánh dấu thường được gọi là tag. Các tag này được bao quanh bởi các dấu “ ”. Ví dụ: , , là các tag HTML. Title of the web page Một trang web thông thường gồm có hai thành phần chính đó là: dữ liệu của trang web (ví dụ như văn bản, hình ảnh, âm thanh, ) và các tag HTML dùng để mô tả cách thức mà các dữ liệu này được An example of a simple web page. hiển thị. Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ vào các tag HTML để định dạng dữ liệu được hiển thị. Ví dụ sau cho thấy, cùng một dữ liệu là dòng văn bản “This is webpage”. Tuy nhiên nếu có thêm định dạng của tag ở dòng thứ hai, hình • : Định nghĩa phạm vi của văn bản HTML. thức hiển thị dữ liệu sẽ khác. • : Định nghĩa các mô tả về trang HTML. Mã HTML Hiển thị trên trình duyệt Các thông tin này sẽ không hiển thị dưới dạng nội dung của This is webpage This is webpage trang web. This is webpage This is webpage • : Mô tả tiêu đề của trang. Tiêu đề của trang web thường được hiển thị như là tiêu đề của cửa sổ hiển thị Hầu hết các tag của HTML đều có tag bắt đầu và tag kết thúc trang web. Thông tin này cũng có thể được dùng bởi một số tương ứng. Tag kết thúc tương ứng với một tag chỉ khác ở chỗ có máy tìm kiếm để xây dựng chỉ mục các trang web. thêm kí tự “/”. Ví dụ: tag có tag kết thúc tương ứng là . • : Xác định vùng “thân” của trang web. Đây là phần mà các dữ liệu cùng với các tag HTML sẽ được dùng Các tag không phân biệt chữ thường và chữ hoa. Nghĩa là các để định dạng nội dung của trang web. tag , và là như nhau. Một tag thông thường bao gồm hai thành phần: tên của tag Trong quá trình đọc trang web để hiển thị, trình duyệt sẽ bỏ qua (dùng để cho biết tag này định nghĩa cái gì) và thuộc tính của tag các khoảng trắng thừa và các dấu ngắt dòng giữa văn bản dữ liệu (dùng để cho biết dữ liệu được hiển thị như thế nào). Ví dụ sau minh và các tag. Đó chính là lí do mà ba đoạn sau sẽ cùng được hiển thị họa việc thay đổi các thuộc tính FACE và SIZE của tag như nhau. Mã HTML Hiển thị trên trình duyệt Đoạn 1 Đoạn 2 Đoạn 3 This is This is webpage The browser will The browser The browser will a web page ignore new lines will ignore new lines ignore new lines This is a web page the text the text spaces in the text Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 61 62
  32. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 2. MỘT SỐ TAG CƠ BẢN CỦA HTML 2.2. Định dạng văn bản 2.1. Định dạng trang 2.2.1. Định dạng phân đoạn Định dạng trang thông thường bao gồm các thông tin về tiêu đề Tag được dùng để định dạng phân đoạn (paragraph). trang, bảng mã kí tự được dùng, màu nền, ảnh nền, từ khóa. Thuộc tính thường gặp là ALIGN dùng để canh chỉnh dữ liệu trong phân đoạn là LEFT (trái), RIGHT (phải) CENTER (canh giữa) hoặc Để đặt tiêu đề cho trang web, ta dùng tag , ví dụ muốn JUSTIFY (canh đều hai bên). Ví dụ sau minh họa việc hiển thị khi có tiêu đề của trang web thiết kế là “Chào mừng các bạn đến với đặt các thuộc tính canh chỉnh cho tag bằng cách lần lượt gán trang web này”, ta dùng: Chào mừng các bạn đến với thuộc tính ALIGN trong tag này các giá trị “LEFT”, “CENTER”, trang web này “RIGHT”: Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập các This is webpage thông số cho tag . Ví dụ thiết lập sau: This is webpage EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> This is webpage cho biết trang web sẽ dùng bảng mã Unicode-UTF-8. Ta có thể đặt màu nền, ảnh nền cũng như màu chữ cho toàn bộ trang web bằng cách đặt các thuộc tính BGCOLOR, BACKGROUND và TEXT tương ứng trong tag . Ví dụ sau đặt màu nền cho trang web là màu đỏ, màu chữ là màu trắng: . Ví dụ sau minh họa một trang web có các định dạng trang đã trình bày ở trên: Hình 3.1 – Các thuộc tính canh chỉnh của tag Trong một phân đoạn, việc ngắt dòng trong lúc soạn thảo không một phân đoạn thông qua tag . Ví dụ: Chào mừng các bạn đến với trang web này Họ tên: Lê Đình Duy Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên Hình 3.2 – Không thể xuống dòng như thiết kế Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 63 64
  33. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Để hiển thị mỗi mục trên mỗi dòng, ta phải chỉnh lại đoạn mã 2.2.2. Định dạng chữ HTML trên bằng cách thêm vào cuối mỗi mục tag như sau: Tag để định dạng font chữ, màu sắc, kích thước, của văn bản. Các thuộc tính của tag này thường là: FACE: loại font Họ tên: Lê Đình Duy chữ, SIZE: kích thước, COLOR: màu chữ. Ngoài ra, để định dạng Nghề nghiệp: Giảng viên chữ in đậm ta dùng tag , in nghiêng dùng tag , gạch dưới Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên dùng tag . Thuộc tính COLOR dùng trong các tag thường được định nghĩa bằng tên qui ước (ví dụ như RED: màu đỏ, BLUE: màu xanh da trời, ) hoặc mã RGB dưới dạng 3 chữ số hệ 16 bắt đầu bằng dấu # (ví dụ như #FF0000). Ví dụ sau định dạng đoạn văn bản với font Tahoma, in đậm, kích thước +2 (10pt) Thuật xử thế của người xưa Để có kết quả hiển thị là: Thuật xử thế của người xưa 2.3. Định dạng hình ảnh Hình 3.3 – Dùng tag khi muốn xuống dòng Tag được dùng để chèn một ảnh hoặc một video clip vào Ngoài ra, ta cũng có thể dùng đường kẻ ngang với tag để trong một trang web. Các định dạng tập tin ảnh và video sau được tạo sự phân cách giữa các thành phần trong trang web. Thuộc tính hỗ trợ trên Internet Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, thường gặp là ALIGN (dùng để canh chỉnh vị trí của đường này) và *.mov, *.mpg, *.mpeg, *.png, *.wmf, COLOR (màu sắc). Đối với trang web không chứa hình ảnh, thì nội dung văn bản sẽ Nội dung của trang web được hiển thị sau này nằm toàn bộ trong trang web. Tuy nhiên với trang web có chứa hình ảnh, hình ảnh sẽ là một tập tin độc lập với Cập nhật năm 2003. Mọi ý kiến, góp ý xin liên hệ Webmaster. tập tin chứa trang web. Tag dùng trong trang web để thông báo cho trình duyệt đọc tập tin ảnh và hiển thị tại vị trí đặt tag này. Ví dụ, một trang web muốn hiển thị hình ảnh linh vật biểu tượng Seagames 22 sau đoạn văn bản “Linh vật Seagames 22”, phải bao gồm hai tập tin; Một tập tin hình ảnh về linh vật, ví dụ linhvat.gif. Tập tin còn lại chứa đoạn văn bản “Linh vật Seagames 22” và tag như sau: Linh vật Seagames 22 Hình 3.4 – Phân cách bằng tag Các thuộc tính chính bao gồm: SRC (tên tập tin hình ảnh), WIDTH, HEIGHT (kích thước ảnh), BORDER (đường viền khung quanh ảnh), ALT (văn bản thay thế dùng khi không hiển thị), ALIGN Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 65 66
  34. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org (canh chỉnh), Thuộc tính ALT cũng được dùng khi ta muốn đưa Mã HTML Ý nghĩa chuột đến hình ảnh và có dòng chữ như tooltip hiển thị bên dưới. Tag sẽ đóng vai trò như là HREF="mailto:duyld@yahoo.com" “dấu hiệu” (anchor) hyperlink. Thông thường, con trỏ chuột sẽ thay > Email me nghĩa bởi TARGET đoạn văn bản này. Một số giá trị có thể được dùng để gán cho thuộc tính TARGET Một hyperlink cho phép liên kết tới một vị trí khác ngay bên trong của tag 2.5. Định dạng một số kí tự đặc biệt HTML sử dụng các kí tự đặc biệt (ví dụ như “ ” để đánh dấu các tag, ), do đó để hiển thị các kí tự đặc biệt này, ta phải Dấu # trong mục HREF là dấu hiệu của liên kết nội. dùng các nhóm kí tự thay thế sau: Để liên kết tới các trang web khác, điền địa chỉ URL của trang Kí tự cần hiển thị Mã thay thế web vào mục HREF. Xem các ví dụ sau: > Mã HTML Ý nghĩa & & ¢, #, ¥ ¢, £, ¥ cùng thư mục ÷, ° ÷, ° Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 67 68
  35. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 2.6. Chuyển hướng trang tự động (Automatic redirect) Để định nghĩa một trang sẽ tự động chuyển sang một địa chỉ khác sau một khoảng thời gian định trước, ta chèn ngay sau tag một tag như sau: Trang web chứa tag trên sẽ tự động chuyển sang trang mới sau khoảng thời gian là 3 giây. 3. ĐỊNH DẠNG BẢNG BIỂU Tag được dùng để định dạng bảng cùng với các tag , để định dạng các dòng, cột. Các dòng, cột trong bảng Hình 3. 6 – Minh họa một bảng đơn giản thường được gọi là cell. Để trộn (merge)/tách (split) các dòng hoặc cột lại với nhau ta Các thuộc tính thường dùng là: BORDER (định nghĩa đường dùng các thuộc tính tương ứng là ROWSPAN hoặc COLSPAN. Ví viền, nếu đặt giá trị là 0 thì sẽ không có đường viền), BGCOLOR dụ sau minh họa trong một bảng vừa có sự trộn/tách trên dòng và (màu nền), ALIGN (canh chỉnh), WIDTH (chiều rộng, có thể theo % cột: của kích thước cửa sổ hoặc pixel), CELLPADDING (khoảng cách giữa nội dung và đường biên của cell), CELLSPACING (khoảng cách giữa các cell). Đoạn mã HTML sau minh họa một bảng dữ liệu gồm có 2 dòng, 2 cột, kích thước là 300 pixel, khoảng cách giữa nội Mã nhóm dung và đường biên của cell là 5: MSSV WIDTH="300"> Họ và tên MSSV Họ và tên Nhóm 01 9901234 Trần Đức 9901234 Văn Trần Đức Vũ 9901235 Hoàng Minh Vũ Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 69 70
  36. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org nào sẽ xử lí dữ liệu nhập từ form), METHOD (phương thức chuyển dữ liệu), NAME (tên của form – dùng cho các xử lí sau này). Người dùng nhập dữ liệu cho form thông qua các ô nhập liệu (thường gọi là các controls) như textbox, checkbox, radio button, push button, dropdown listbox, Các ô nhập liệu này được đặt trong phần bao quanh bởi cặp tag và . Khi form được submit, dữ liệu mà người dùng nhập vào trong các ô nhập liệu này sẽ được chuyển đến chương trình xử lí form theo dạng = . Chính vì vậy mà thuộc tính NAME là thuộc tính rất quan trọng khi khai báo các ô nhập liệu này. Một khi form được submit, các dữ liệu sẽ được chuyển đến cho Hình 3. 7 – Minh họa một bảng có trộn/tách các cột chương trình xử lí form theo dạng = . Người ta dùng dấu “&” để ngăn cách dữ liệu của 2 control Có hai cách để thiết lập bề rộng (WIDTH) của một cell hoặc một khác nhau. Ví dụ sau minh họa một form và dữ liệu khi submit có bảng, đó là tính theo % và tính theo pixel. Trong nhiều trường hợp, dạng: việc đặt theo % sẽ làm cho kích thước bảng thay đổi tùy theo dữ liệu và độ phân giải của màn hình máy người dùng, do đó để đảm bảo +Duy&EMAIL=ledduy@yahoo.com&btnSubmit=Update tính nhất quán trong hiển thị dữ liệu của bảng, nên chọn cách tính theo pixel. Trong thiết kế trang web, các bảng biểu đóng vai trò rất quan Full Name: của trang web. Hiện nay, các phần mềm hỗ trợ soạn thảo trang web Email: cách tốt nhất là kết hợp cả hai. Nghĩa là, ngoài việc sử dụng các phần mềm này để phát sinh bảng biểu một cách trực quan, ta phải sử dụng mã HTML để can thiệp khi các phần mềm này không đáp ứng nổi các trình bày phức tạp nhất là khi có các bảng vừa lồng vào nhau, các dòng cột trộn/tách nhiều lần, 4. FORM VÀ CÁC THÀNH PHẦN CỦA FORM Form thường được dùng như là công cụ hỗ trợ nhập liệu cho các ứng dụng trên Web, tương tự như các hộp thoại (dialog) trong các ứng dụng trên Windows. Hoạt động của form thông thường là: Hình 3. 8 – Cách dữ liệu được chuyển đến trình xử lí form ứng dụng hiển thị form để yêu cầu nhận thông tin từ người dùng, người dùng điền các thông tin và kết thúc việc nhập liệu bằng cách submit form. Sau đó dữ liệu sẽ được chuyển đến các chương trình Một số kí tự đặc biệt sẽ được chuyển đổi trước khi dữ liệu được xử lí tương ứng. chuyển đi: Tag được dùng để thiết lập một form nhập liệu. Các thuộc tính chính là: ACTION (được dùng để chỉ định chương trình Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 71 72
  37. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org định thuộc tính TYPE=”RESET” trong tag . Trong khi đó nút Kí tự nhập vào Kí tự thay thế được chuyển đi nhấn SUBMIT là nút nhấn dùng để kết thúc việc nhập liệu của form. Để tạo nút nhấn dạng này, ta chỉ định thuộc tính TYPE=”SUBMIT” khoảng trắng + trong tag . = %3D dấu xuống dòng (line feed) %0A Giá trị gán cho thuộc tính VALUE chính là nhãn của nút nhấn. về ðầu dòng (carriage return) %0D Ví dụ sau minh họa việc tạo ra hai nút nhất Submit và Reset: % %25 & %38     radio button, ta dùng tag và đặt giá trị tương ứng với các loại ô nhập liệu cho thuộc tính TYPE. 4.1. Hộp văn bản (TextBox) 4.3. Radio button Dùng để nhập dữ liệu trên một dòng. Để tạo ô nhập liệu dạng Dùng để chọn duy nhất một trong tập các lựa chọn được liệt kê. này, ta chỉ định thuộc tính TYPE=”TEXT” trong tag . Ví dụ Để tạo ra một nhóm các radio button, ta phải chỉ định thuộc tính sau minh họa mã HTML dùng để tạo ra một ô nhập liệu dạng hộp TYPE=”RADIO” trong tag của các radio button và các văn bản, có tên là USRNAME, kích thước là 25 kí tự, giá trị mặc định radio buttuon này phải có cùng giá trị của thuộc tính NAME. là ledduy: Khi form được submit, dữ liệu của radio button được chọn (giá trị Username: radio button này. Để đặt một radio button là mặc định, ta thêm vào thuộc tính Thuộc tính SIZE dùng để chỉ số kí tự hiển thị trong ô nhập liệu CHECKED. Ví dụ: (đây cũng chính là chiều rộng của ô nhập liệu). Thuộc tính MAXLENGTH dùng để chỉ số kí tự tối đa có thể được nhập. Ví dụ sau minh họa lựa chọn giới tính (Sex) thông qua hai radio button Nam (Male) và Nữ (Female): Khi muốn chỉ định dữ liệu nhập vào control dưới dạng mật khẩu (nghĩa là các kí tự nhập vào sẽ không được hiển thị mà thay vào đó Sex: Male Female Password: 4.4. Checkbox 4.2. Nút nhấn (Button) Dùng để chọn một hoặc nhiều trong tập các lựa chọn được đề nghị. Khi chỉ định thuộc tính TYPE=”BUTTON” trong tag ta sẽ tạo được một nút nhấn nói chung. Khi ta chỉ định thuộc tính TYPE=”CHECKBOX” trong tag , ta sẽ tạo ra được một ô nhập liệu kiểu checkbox. Tương Trong form thông thường có hai loại nút nhấn đặc biệt đó là nút tự như radio button, khi một checkbox được check, giá trị trả về của nhấn SUBMIT và nút nhấn RESET. Nút nhấn RESET là nút nhấn mà nó tương ứng với giá trị của thuộc tính VALUE. khi người dùng nhấn chuột vào, các dữ liệu của các ô nhập liệu khác khác đều được đặt về giá trị mặc định lúc khởi tạo. Để tạo ta sẽ chỉ Để đặt một check box là ON, ta thêm vào thuộc tính CHECKED. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 73 74
  38. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Ví dụ sau minh họa một nhóm các checkbox dùng để lấy thông viên sẽ được lưu trữ trong một ô nhập liệu của form có kiểu là tin về các ngôn ngữ được chọn: HIDDEN. Thông tin này sẽ không được hiển thị trên màn hình của Language: English Để tạo một ô nhập liệu có kiểu là HIDDEN, ta chỉ định thuộc tính như ví dụ sau: VALUE="FR">French CHECKED>Japanese Mỗi khi form được submit, ngoài các ô nhập liệu đã được hiển thị trên màn hình, ta cũng sẽ có thêm một ô nhập liệu có tên là “USRID” 4.5. Dropdown listbox và giá trị là “ledduy” được chuyển đến cho trình xử lí Dùng để lựa chọn Ta sử dụng tag để tạo. Mỗi mục 4.7. Vùng văn bản (TextArea) của dropdown listbox sẽ được định nghĩa bằng tag . Ví Dùng để nhập dữ liệu trên nhiều dòng. Để tạo ô nhập liệu dạng dụ sau minh họa việc chọn một nghề nghiệp đã được liệt kê sẵn: này ta dùng tag . Dữ liệu nằm giữa cặp tag Occupation: và chính là giá trị trả về của control Other dạng này. Ví dụ: Engineer Other information: Teacher COLS="20"> Doctor Thuộc tính ROWS và COLS dùng để chỉ số dòng và cột của Worker vùng dữ liệu nhập. Để đặt một mục chọn trong dropdown listbox là mặc định, ta Ví dụ sau minh họa một form nhập liệu gồm có đầy đủ các ô thêm vào thuộc tính SELECTED. nhập liệu đã kể ở trên: Để tạo một multi-select listbox ta đặt thêm thuộc tính SIZE và MULTIPLE vào trong tag . Username: Khi form được submit, dữ liệu của tương ứng với mục chọn (giá Password: ) trong dropdown VALUE="123456" SIZE="20"> listbox sẽ được chuyển đi cùng với tên của dropdown listbox này. Ví Sex: Male trả về của ô nhập liệu này sẽ là 4. Female 4.6. Ô dữ liệu ẩn (Hidden field) Language: English Dùng để lưu trữ các thông tin của form cần thiết cho chương French nào. Ta lấy ví dụ form cập nhật thông tin một sinh viên. Các thông tin Japanese sinh, sẽ được hiển thị trên các ô nhập liệu của form. Tuy nhiên để Occupation: chương trình xử lí form cập nhật này có thể biết cần cập nhật sinh Other viên nào, cần phải có thêm thông tin về Mã số sinh viên (giả sử đóng Engineer vai trò là khóa chính trong cơ sở dữ liệu). Thông tin về Mã số sinh Teacher Doctor Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 75 76
  39. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Worker   Other information:     Hình 3.10 - Minh họa frame Tag định nghĩa cách tổ chức của các frame. Tag định nghĩa chi tiết từng frame. Các thuộc tính của tag là: ROWS (định nghĩa số frame được phân theo chiều dọc), COLS (định nghĩa số frame được phân theo chiều ngang), FRAMEBORDER (định nghĩa đường viền khung của các frame con, giá trị là YES hoặc NO) Hình 3. 9 – Minh họa một form nhập liệu Các thuộc tính cơ bản của tag là: SRC (địa chỉ URL 5. FRAME của trang web sẽ hiển thị trong frame), NAME (tên của frame, có thể Nội dung hiển thị trên trình duyệt có thể được tích hợp từ nhiều dùng trong thành phần TARGET của hyperlink), BORDER (đường cửa sổ khác nhau, mỗi cửa sổ chứa một URL tương ứng với một viền khung, nếu không muốn có đường viền thì đặt giá trị này về 0), trang web. Ví dụ sau cho ta thấy có ba cửa sổ, một cửa sổ chứa MARGINHEIGHT, MARGINWIDTH (canh chỉnh lề), SCROLLING (có thực đơn nằm ngang, một cửa sổ chứa thực đơn bên trái và một hiển thị scrollbar hay không, các giá trị thường dùng là YES, NO, cửa sổ chứa nội dung bên phải. Trong trường hợp này chúng ta AUTO), NORESIZE (không cho phép người dùng hiệu chỉnh kích dùng tag và để định nghĩa. thước của frame window) Để định nghĩa các frame lồng nhau ta dùng các tag lồng nhau Ví dụ sau minh họa định nghĩa của trang web trên: Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 77 78
  40. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 6.2. Các cách sử dụng style sheets Welcome to IS-EDU Site Có 3 cách sử dụng style sheets tùy vào nhu cầu thiết kế: • Bằng cách liên kết (linking) đến một tập tin chứa các style tập tin chứa các style sheet này mà thôi. HTML. Cách này cho phép bạn thay đổi cách trình bày của ban đầu. • Bằng cách thêm các inline styles vào trang HTML. Cách này cho phép bạn thay đổi một cách nhanh chóng cách thể hện của từng tag, hoặc nhóm các tag hoặc một khối thông tin trên trang web. 6. CASCADING STYLE SHEET (CSS) Sử dụng style sheet giúp cho người soạn thảo trang web dễ 6.3. Cú pháp cơ bản: dàng hơn trong thiết kế và hiệu chỉnh các trang web đồng thời đảm Cả hai kiểu linked and embedded style sheets đều chứa một bảo tính nhất quán trong trình bày của website. hoặc nhiều định nghĩa style. Một định nghĩa style (style definition) gồm có một HTML tag, sau đó là danh sách các thuộc tính của tag Một style sheet là một mẫu định dạng (template) của các HTML tag. Khái niệm style sheet trong các trang Web rất tương tự với khái đó được đặt bên trong các dấu “{“ và “}”. Mỗi thuộc tính được xác định bằng tên thuộc tính, theo sau là dấu “:” và giá trị của thuộc tính. niệm templates trong MS Word. Bạn có thể thay đổi sự trình bày của Các thuộc tính được phân cách với nhau bởi dấu “;” . Ví dụ sau minh một văn bản Word thông qua việc thay đổi các style trong văn bản này. Một cách tương tự, bạn có thể thay đổi sự trình bày của các họa một style definition gán cho tag : FONT{font-size: trang Web bằng cách thay đổi các style sheet được gán cho các 15pt; font-weight: bold} HTML tag. Sau định nghĩa một style mới, để dùng nó trong các tag, ta gán tên style cho thuộc tính class trong tag đó. Ví dụ sau minh họa một 6.1. Các lợi ích của style sheet: style có tên là txtInputText, sau đó được dùng để chỉ định font chữ Sử dụng được các thuộc tính như leading, margins, indents, cho dropdown listbox: point sizes, and text background colors trong trang web. Đây là các thuộc tính mà các tag HTML không hỗ trợ trực tiếp. Thay đổi thuộc tính của từng trang web hoặc toàn bộ các trang Test đến định dạng trong các tậpt in HTML. Ví dụ, nếu ta đã dùng tag với thuộc tính FACE=Arial để chỉ định font chữ cho các văn một trong toàn bộ các trang web nếu ta muốn đổi tất cả các > văn bản này sang font chữ khác, ví dụ như Tahom a. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 79 80
  41. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Tuổi Trẻ BODY {font: 10pt "Arial"} Lao Ðộng H1 {font: 15pt/17pt "Arial"; Thanh Niên font-weight: bold; color: maroon} H2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} P {font: 10pt/12pt "Arial"; color: black} > 6.4. Liên kết đến một Style Sheet Để có thể sử dụng cùng một style sheet cho bất kì trang web nào của site, trước tiên bạn phải tạo một tập tin .css lưu trữ các định nghĩa style, sau đó trong bất kì các trang web nào muốn sử dụng các style sheet này, bạn phải tiến hành thủ tục liên kết. Ví dụ, nếu bạn có một tập tin style sheet có tên là MYSTYLES.CSS đặt tại địa chỉ để liên kết vào trang web của 6.6. Sử dụng Inline Styles mình, bạn thêm các dòng sau nằm giữa tag Các định nghĩa Inline style ảnh hưởng trực tiếp đến tag hiện hành. Chúng được nhúng vào bên trong tag bằng cách sử dụng Title of article tham số STYLE . Ví dụ: TYPE="text/css"> Tuổi Trẻ Lao Ðộng Thanh Niên 6.5. Nhúng một STYLE Block vào trang HTML Để nhúng a style sheet, bạn thêm block vào đầu trang web giữa tag và . Cách này cho phép bạn thay đổi trình bày của chỉ trang web hiện tại mà thôi. Theo sau tag là bất kì định dạng nào và kết thúc bởi tag . Ví dụ sau định nghĩa các style cho các tag , , , và : Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 81 82
  42. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org THỰC HÀNH 1. SỬ DỤNG PHẦN MỀM SWISH ĐỂ TẠO CÁC HIỆU Hình 3. 12 – Cửa sổ View Window ỨNG ĐỒ HỌA ĐƠN GIẢN Sau khi cài đặt xong, phải đăng kí sử dụng. Một đăng kí sử dụng Phần mềm Swish cho phép tạo các hiệu ứng động từ đơn giản hợp lệ sẽ làm mờ đi mục Purchase trong màn hình làm việc của đến phức tạp. Kểt quả cuối cùng của ứng dụng này là tập tin .swf có Swish. thể chạy được trên các trình duyệt có cài đặt sẵn Macromedia Flash Player. 1.2. Thiết lập các thông số cơ bản cho movie Đối tượng chính khi soạn thảo một hiệu ứng động trên Swish Trong tab General, hiệu chỉnh các thông số liên quan đến chiều được gọi là Movie (đoạn phim). Một movie là tập hợp của nhiều rộng, chiều cao, màu nền, tốc độ hiển thị của các khung hình của Scene (phân cảnh) khác nhau, mỗi scence bao gồm tập hợp các movie. Lưu ý rằng, ta cũng có thể hiệu chỉnh chiều rộng và chiều cao Objects (đối tượng). Hai đối tượng chính được hỗ trợ trong phiên bằng cách dùng chuột hiệu chỉnh View Window. bản Swish 1.51 là Text Objects (tập các kí tự) và Image Objects (hình ảnh). Các đối tượng của scence có thể hoạt hình (animate) thông qua việc thiết lập các Effects (hiệu ứng). Các hiệu ứng đã được lập trình sẵn để có thể sinh ra các Frames (khung hình) tương ứng. 1.1. Cài đặt Swish Cài đặt Swish từ đĩa CD. Khởi động ứng dụng Swish. Màn hình làm việc chính xuất hiện cùng với View Window Hình 3. 13 – Hiệu chỉnh các thông số cơ bản của movie 1.3. Tạo lập một movie đơn giản Ngay khi khởi động, ứng dụng tự động tạo ra một scence mới có tên là Scene1. Nếu muốn chèn thêm scene khác, hãy nhấn nút bên trái nút hình chữ T trên thanh công cụ hoặc chọn trên thực đơn Modify/Insert Scene. Ta chèn một đối tượng văn bản vào scene bằng cách nhấn nút hình chữ T trên thanh công cụ hoặc chọn trên thực đơn Hình 3. 11 – Màn hình làm việc chính của Swish Modify/Insert Text. Trong trường hợp có nhiều đối tượng văn bản Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 83 84
  43. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org trong cùng một scene, để thiết lập thứ tự, ta chọn đối tượng rồi nhấn các nút mũi tên lên hoặc mũi tên xuống cho đến khi đạt được vị trí mong muốn. Để thay đổi vị trị mặc định của văn bản vừa hiện ra, click vào nó trong cửa sổ View Window và kéo đến vị trí mong muốn. Ví dụ ta kéo đoạn văn bản về phía phải của View Window: Hình 3. 14 – Thay đổi vị trí của văn bản vừa chèn vào Để thay đổi nội dung đoạn văn bản, chọn tab Text trong màn Hình 3. 16 – Thiết lập các hiệu ứng cho các đối tượng hình làm việc chính và thay thế nó. Chúng ta cũng có thể thay đổi font chữ, kích thước, màu sắc, kiểu chữ (bold, italic, ). Đối với một số hiệu ứng, sẽ có hộp thoại yêu cầu bạn nhập các thuộc tính của hiệu ứng. Nếu muốn giữ các thuộc tính mặc định, hãy chọn OK khi màn hình thiết lập hiệu ứng hiện ra. Ví dụ: Hình 3. 15 – Hiệu chỉnh nội dung và các thuộc tính của văn bản Để thêm vào các hiệu ứng cho đối tượng nào trong scene, chọn Timeline Tab và click trên đối tượng cần đặt hiệu ứng, sau đó nhấn nút Add Effect Hình 3. 17 – Thiết lập các thông số cho một hiệu ứng Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 85 86
  44. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Để xem thử sự trình diễn của các hiệu ứng, ta nhấn nút Play Movie trên Toolbar. Muốn dừng để tiếp tục hiệu chỉnh, nhấn nút Stop. Sau khi làm xong, ta nhấn nút Save Movie trên thanh công cụ hoặc chọn trên thực đơn File/Save. Tập tin sẽ được lưu với phần mở rộng là .swi. Sau này, muốn hiệu chỉnh, ta có thể mở lại tập tin này. Để kiểm tra movie sau này sẽ thực hiện như thế nào trên trình duyệt, nhấn vào nút Test In Browser nằm ngoài cùng trên thanh công cụ. 1.4. Đưa các movie vào trang web Để đưa movie vừa tạo vào trang web, trước tiên phải kết xuất movie ra dạng .swf bằng cách nhấn nút SWF trên thanh công cụ hoặc chọn trên thực đơn File/Export to SWF. Hình 3. 19 – Màn hình Export Thao tác này sẽ đưa vào clipboard một đoạn mã HTML dùng để mô tả movie vừa rồi như sau: Sau đó, dán đoạn code HTML này vào vị trí cần chèn movie trên Hình 3. 18 – Kết xuất ra tập tin .swf trang web mà đang soạn thảo (chú ý sử dụng View HTML). Sau đó, nhấn vào tab Export, click vào copy HTML to Clipboard Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 87 88
  45. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Thuộc tính quan trọng nhất là Movie URL. Nếu ta đặt movie ở thư mục khác với thư mục của trang web hiện hành, ta phải chỉ định đường dẫn đến movie trong ô nhập liệu này Hình 3. 20 – Dán đoạn mã HTML mô tả movie vào trang web 1.5. Đặt lại các thông số của movie trong FrontPage Chuyển qua View Normal, click phải chuột lên đối tượng rồi chọn ActiveX Control Properties Hình 3. 22 – Các thuộc tính của movie 2. SỬ DỤNG PHẦN MỀM BUTTON STUDIO ĐỂ TẠO CÁC NÚT NHẤN DẠNG ĐỒ HỌA ĐƠN GIẢN Button Studio là phần mềm hỗ trợ thiết kế và tạo các button một cách nhanh chóng và dễ dàng. Các button được tạo ra có thể được dùng cho các trang web, presentations, hay các ứng dụng cần dùng chúng. Bước đầu tiên nên chọn hình dáng của nút nhấn bằng cách chọn vào tab Shape. Sau đó ta chọn kích thước và định vị của văn bản trong nút nhấn bằng cách chọn vào nút Size+Positioning. Không nên chọn Auto Size vì lúc đó kích thước của nút nhấn sẽ phụ thuộc vào nội dung văn bản hiển thị trên đó. Hình 3. 21 – Đặt lại thông số cho movie trên trang web Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 89 90
  46. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 3. 23 – Màn hình làm việc của phần mềm Button Studio Hình 3. 25 – Thiết lập kích thước và định vị Hình 3. 24 – Các dạng nút nhấn được hỗ trợ sẵn Hình 3. 26 – Văn bản hiển thị trên nút nhấn Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 91 92
  47. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Sau đó sang tab Text để gõ nội dung văn bản sẽ hiển thị trên nút Giả sử muốn tạo một đối tượng đồ họa Headings, ta click vào nhấn. Đồng thời thiết lập các thuộc tính của văn bản như là font chữ, biểu tượng Headings. Màn hình hỗ trợ tạo các Heading xuất hiện. kích thước, màu sắc. Sau khi làm xong, ta có thể lưu thiết kế lại dưới dạng tập tin .bs bằng cách chọn thực đơn File/Save As. Sau này muốn sửa lại, ta có thể mở tập tin và tiếp tục chỉnh sửa. Để có thể dùng được trên trang web, ta phải chọn chức năng Export trên thực đơn ra các dạng tập tin hình ảnh .gif, .jpg. 3. SỬ DỤNG PHẦN MỀM XARA WEBSTYLE ĐỂ TẠO CÁC HIỆU ỨNG ĐỒ HỌA Xara WebStyle là phần mềm hỗ trợ tạo các hiệu ứng đồ họa từ đơn giản đến phức tạp để có thể đưa vào trang web một cách nhanh nhất. Xara WebStyle có thể được dùng để tạo các Headings, banners, nút nhấn, ảnh nền, Hình 3. 28 – Màn hình hỗ trợ tạo các Headings Nhấn vào nút Style bên tay trái, các mẫu Headings được xây dựng sẵn sẽ hiện ra. Chọn một mẫu, ví dụ như Web Style. Để thay đổi văn bản của Heading, ta nhấn vào nút Text và gõ vào đoạn văn bản ví dụ như: Welcome to Ho Chi Minh City. Ta có thể thay đổi font chữ, đặt chữ in đậm, in nghiêng tùy thích ở đây. Các nút tiếp theo là Color và Texture cho phép hiệu chỉnh màu và mẫu tô của văn bản. Sau đó, ta có thể thiết lập bóng bằng cách nhấn vào nút Shadow. Mục Themes cho phép lưu lại các thiết lập về kiểu, màu sắc, tạo bóng, kể trên để có thể dùng lại cho thiết kế tương tự sau này. Hình 3. 27 – Màn hình làm việc của Xara WebStyle Mục Save để kết xuất đối tượng ra tập tin ảnh .GIF hoặc .JPG Để tạo đối tượng nào, hãy click vào đối tượng đó. Ví dụ như dùng trong trang web Heading, Buttons, Bullets, Background. Trong màn hình tạo từng đối tượng nếu muốn trở về màn hình chính thì chọn nút Graphic Type. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 93 94
  48. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 3. 29 – Hiệu chỉnh văn bản của Heading Hình 3. 31 – Thiết lập shadow Hình 3. 30 – Thiết lập texture Hình 3. 32 – Kết xuất ra tập tin ảnh dùng trong trang web Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 95 96
  49. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 4. SỬ DỤNG PHẦN MỀM BANNERSHOP GIF ANIMATIOR ĐỂ TẠO CÁC ẢNH ĐỘNG Bannershop GIF Animator là phần mềm hỗ trợ tạo các ảnh web động. Các ảnh web động được lưu dưới định dạng .GIF có thể được dùng trong các trang web và các chương trình khác. Hình 3. 34 – Tạo ra các frame và chèn ảnh vào các frame Hình 3. 33 – Màn hình làm việc của BannerShop Gif Animator Để tạo một ảnh web động, trước tiên hãy thiết lập các thông số của frame như kích thước, màu nền, bằng cách chọn trên thực đơn Animation/Frame Size, Frame/Set Background Color phù hợp với các kích thước các ảnh sẽ được chèn vào từng frame. Hình 3. 35 – Các hiệu ứng của frame Sau đó, chọn trên thực đơn chức năng Image/Import Image để chèn các ảnh vào từng frame một. Sau khi làm xong một frame, hãy Sau khi thực hiện xong việc đặt hiệu ứng cho các frame, nhấn chọn trên thực đơn chức năng Frame/Insert New Frame để chèn nút F9 hoặc chọn trên thực đơn chức năng Animation/Play thêm một frame mới rồi lại tiếp tục chèn ảnh vào từng frame này. Animation để xem kết quả. Tiếp theo ta thiết lập các hiệu ứng Animation cho các frame. Cuối cùng, ta chọn trên thực đơn chức năng File/Save Intro Animation để chỉ hiệu ứng lúc bắt đầu hiển thị frame. Outro Document để lưu thiết kế trên lại dưới dạng tập tin .bsd. Tập tin này Animation để chỉ hiệu ứng kết thúc frame trước khi chuyển sang sau đó có thể mở lại để hiệu chỉnh. Chọn chức năng File/Save Gif frame mới Animation để kết xuất ra tập tin .gif dùng trong các ứng dụng web. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 97 98
  50. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 5. MỘT SỐ THAO TÁC CƠ BẢN KHI THIẾT KẾ TRANG mục, ví dụ như C:\MyWebSite. Trong thư mục này, tổ chức một số WEB BẰNG MICROSOFT FRONTPAGE thư mục con như images dùng để lưu các hình ảnh, db dùng để lưu các tập tin cơ sở dữ liệu, 5.1. Giới thiệu về FrontPage Sau khi tạo xong thư mục có cấu trúc như trên, trong FrontPage MS FrontPage cùng với Macromedia Dreamweaver MX hiện ta tạo mới một website trỏ đến thư mục C:\MyWebSite bằng cách đang là các phần mềm hỗ trợ thiết kế web thông dụng nhất hiện nay. chọn trên thực đơn chức năng File/New/Page or Web/Empty Web, Chức năng chính của các phần mềm này là hỗ trợ người dùng tạo sau đó gõ vào đường dẫn C:\MyWebSite trong ô của mục các trang web một cách dễ dàng mà không cần thiết phải biết nhiều Options/Specify the location of the new web kiến thức về HTML. Khi khởi động, màn hình làm việc của MS FrontPage như sau: Hình 3. 37 – Tạo mới một website Hình 3. 36 – Màn hình làm việc của MS FrontPage Với việc tạo website này, mỗi khi ta soạn thảo mới bất kì tập tin nào, mặc định nó sẽ được lưu trong thư mục này. Ngoài ra, ta có thể Ở bên tay trái là cửa sổ Views. Để xem cấu trúc của các website chỉ định bảng mã UTF-8 là bảng mã được dùng mặc định khi tạo dưới dạng các tập tin và cây thư mục, ta click vào biểu tượng mới các tập tin bằng cách chọn trên thực đơn chức năng Tools/Web Folders. Để làm việc với một trang web, ta click vào biểu tượng Settings/Language. Page. Click vào biểu tượng Hyperlinks sẽ cho ta hình dung ra sự liên kết giữa tập tin hiện hành với các tập tin khác. 5.2. Tổ chức website Để thuận tiện cho việc xuất bản (publish) website sau này, trước tiên nên tập trung tất cả các thành phần của website vào một thư Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 99 100
  51. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org • Sử dụng frames, bảng biểu, để xếp đặt (layout) các thành phần của trang web • Tạo và thêm vào các thành phần của trang web như văn bản (text), đồ họa (graphics), bảng biểu, hyperlink, form, banner, • Định dạng văn bản bằng cách dùng các style hoặc style sheets • FrontPage tự động tạo ra các tag khi ta thực hiện các thao tác trên trong tab Normal. Tuy nhiên để đạt hiệu quả cao trong việc thiết kế trang web, cần kết hợp với các kiến thức về HTML và chỉnh sửa trong tab HTML • Thử nghiệm trang web bằng cách chọn tab Preview, hoặc nút Preview in Browser Một số lưu ý khác: • Không nên dùng font mặc định (default font) khi thiết kế trang web vì nó sẽ bị phụ thuộc và thiết lập cấu hình của trình duyệt ở phía người dùng • Trang chủ của website nên đặt là default.htm hoặc default.asp. Hình 3. 38 – Thiết lập bảng mã mặc định cho toàn bộ các trang của website là UTF-8 5.3. Các thao tác chính khi soạn thảo một trang web Để tạo mới một trang web, chọn chức năng File/New/Page or Web/Blank Page. Ở bên dưới trang web, ta thấy 3 tab là Normal, HTML và Preview cho ta nhìn trang web đang thiết kế ở 3 góc độ khác nhau. Tab Normal cho thấy trang web ở góc độ thiết kế, tab HTML cho thấy mã HTML của thiết kế ở tab Normal và tab Preview cho xem trước kết xuất thực sự của trang web trên trình duyệt. Để thiết kế các trang web nhất quán và hiệu quả nên thực hiện tuần tự các bước bắt đầu thiết kế một trang web trong MS FrontPage • Đặt các thuộc tính chung cho toàn bộ trang web như bảng mã dùng là UTF-8, tiêu đề trang, màu nền, Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 101 102
  52. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Thực hành: Gõ vào một đoạn văn bản, sau đó thực hiện định dạng theo các bước sau: • Dùng chuột đánh dấu chọn một nhóm các từ, sau đó thực hiện định dạng font chữ, kích thước chữ, màu chữ, hiệu ứng chữ (như in đậm, in nghiêng, gạch dưới). • Dùng chuột đánh dấu chọn toàn bộ phân đoạn, sau đó thực hiện định dạng font, border and shading, canh chỉnh (alignment). • Chuyển sang tab HTML để xem các tag và các thuộc tính tương ứng được FrontPage phát sinh. • Gõ vào các đoạn văn bản, sau đó sử dụng nút Bullets hoặc nút Numbering để đặt các đoạn văn bản này về định dạng Bullets hoặc Numbering. Thay đổi thuộc tính của Bullets và Numbering vừa tạo ra 5.5. Dùng style và style sheet để định dạng 5.5.1. Sử dụng inline style Để chèn các inline style vào các đối tượng của trang web, ta click phải chuột lên đối tượng đó, chọn mục Properties, sau đó chọn Hình 3. 39 – Các thuộc tính chung cho một trang web Style. Ví dụ: 5.4. Định dạng văn bản (text) và phân đoạn (paragraph) Một phân đoạn là một khối văn bản được phân định với các phân đoạn khác bằng phím Enter khi soạn thảo. Nếu chỉ muốn xuống dòng mà không muốn chuyển sang phân đoạn khác thì dùng phím Shift+Enter. Một phân đoạn sẽ được bao quanh bởi cặp tag , xuống dòng tương ứng với tag , khoảng trắng tương ứng với 6 kí tự:   Ta có thể định dạng theo nhóm các từ được đánh dấu chọn hoặc định dạng cho toàn bộ văn bản. Các định dạng cơ bản bao gồm: font chữ, kích thước, màu sắc, in đậm/nghiêng, gạch dưới, canh chỉnh trái/phải/giữa/đều hai bên. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 103 104
  53. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 3. 41 – Tạo các style cho trang web Hình 3. 40 – Sử dụng Inline Style 5.5.2. Sử dụng embeded style Để sử dụng embeded style, ta thực hiện tuần tự các bước sau: • Tạo ra các style cho trang web hiện hành bằng cách chọn trên thực đơn chức năng Format/Style. • Chọn mục New để tạo mới một style, sau đó điền vào các thông tin cho style. Ví dụ: gõ vào ô Name (selector) là txtTitle, sau đó chọn mục Format để định dạng cho style có tên txtTitle với Font là Tahoma, kích thước 18pt, màu đỏ, in đậm, • Để áp dụng style vừa tạo vào một đối tượng trong trang web, đánh dấu đối tượng rồi chọn mục Normal, tìm mục có tên txtTitle Hình 3. 42 – Tạo mới một style Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 105 106
  54. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Hình 3. 44 – Liên kết một tập tin .css vào trang web 5.6. Chèn hình ảnh và ảnh động Flash vào trang web Định dạng ảnh thông dụng cho thiết kế các trang web là GIF và JPEG. Ảnh GIF tuy bị giới hạn ở 256 màu nhưng cho phép tạo các Hình 3. 43 – Áp dụng style vào một đối tượng trong trang web hoạt hình (gif animation), ảnh JPEG cho phép ảnh dùng hơn 256 màu và kích thước khá nhỏ. Các phần mềm Button Studio, Banner 5.5.3. Sử dụng Linking style Gif Animation, Paint Shop Pro, Adobe Photoshop là các phần mềm Để sử dụng linking style, ta thực hiện tuần tự các bước sau: thông dụng để tạo và xử lí các ảnh dùng cho thiết kế web. • Tạo mới tập tin dạng CSS bằng cách chọn trên thực đơn chức Ảnh động Flash là các tập tin dạng .swf, có ưu điểm là kích năng File/New/Page or Web/Normal Style Sheet. Giả sử lưu thước nhỏ trong khi có thể mô tả được nhiều hoạt hình, được dùng tập tin này lại với tên mystyle.css khá thông dụng trong thiết kế web hiện nay. Phần mềm Macromedia Flash MX, Swish là các phần mềm thông dụng để tạo các ảnh động • Tạo mới các style như trong bước embeded style trên rồi lưu này. lại. Để chèn một tập tin ảnh vào trang web, chọn chức năng • Trong tập tin mypage.htm, để dùng các style được định nghĩa Insert/Picture/From File FrontPage sẽ tạo ra tag dạng . Để hiển thị văn bản dạng tooltip khi đưa chuột đến hình ảnh, hãy đặt giá trị cho thuộc tính ALT của tag IMG hoặc chỉnh trong Picture Properties/General/Alternative presentations Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 107 108
  55. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org Để tạo một hyperlink, đánh dấu đoạn văn bản hoặc hình ảnh được dùng để mô tả sự liên kết, rồi chọn trên thực đơn chức năng Insert/Hyperlink (hoặc nhấn Ctrl+K). Hộp thoại mô tả hyperlink xuất hiện: Hình 3. 46 – Thiết lập hyperlink Ta có thể đặt hyperlink sao cho liên kết đến các thành phần trong cùng một trang, hoặc đến trang khác trong cùng một website, hoặc đến trang của website khác. Ngoài ra, ta cũng có thể dùng hyperlink để tạo ra các hộp thoại tải dữ liệu về, hoặc khởi động trình gửi email, Thực hành: Hình 3. 45 – Dùng thuộc tính ALT • Hyperlink liên kết đến một trang web khác trong cùng website. Ví dụ hãy tạo trong tập tin default.htm một button Giới thiệu, Để chèn một ảnh động Flash, ta phải chèn một đoạn mã mô tả sao cho khi người dùng nhấn vào nó, trang web Intro.htm sẽ nằm trong cặp tag , như đã hướng dẫn hiển thị ra để giới thiệu về nhóm hoặc công ty nào đó. trong phần sử dụng phần mềm Swish. Lưu ý rằng, cần chép ảnh vào thư mục chỉ định, ví dụ là images, • Hyperlink liên kết đến một trang web của website khác. Ví dụ trong thư mục của website trước khi tiến hành thao tác chèn ảnh. hãy tạo trong tập tin default.htm một button Liên kết, sao cho khi người dùng nhấn vào nó, trang web về môn học này 5.7. Chèn hyperlink vào trang web sẽ hiển thị. Hyperlink được dùng để kết nối các trang web từ trang này sang trang khác. Khi người dùng click vào hyperlink, trang web liên kết sẽ • Trong trường hợp sử dụng frame, phải chỉ định tên frame mà được hiển thị trên trình duyệt. trang web liên kết sẽ được hiển thị. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 109 110
  56. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org • Hyperlink cho phép gọi trình gửi email để tạo email. Ví dụ hãy tạo trong tập tin default.htm một button Góp ý, sao cho khi người dùng nhấn vào nó, chương trình gửi email sẽ xuất hiện để gửi email về địa chỉ ldduy@fit.hcmuns.edu.vn • Hyperlink cho phép hiển thị cửa sổ Save để một tập tin về máy người dùng. Ví dụ hãy tạo trong tập tin default.htm một button Font tiếng Việt, sao cho khi người dùng nhấn vào nó, một hộp thoại lưu tập tin sẽ hiện lên để yêu cầu tải tập tin FontViet.zip về 5.8. Sử dụng bảng biểu Ngoài chức năng thông thường là hiển thị dữ liệu dưới dạng bảng, bảng biểu còn thường được dùng cho việc sắp đặt (layout) các thành phần trong trang web. Để chèn một bảng biểu vào trang web, chọn trên thực đơn chức năng Table/Insert. Các thông số cần lưu ý: • Border: Để không hiển thị đường viền chọn Border size là 0. • Width: Để đảm bảo table không bị resize khi độ phân giải màn hình của máy người dùng thay đổi, đặt kích thước của table dưới dạng pixel bằng cách chọn radio button In pixels • Cell padding dùng để chỉnh khoảng cách từ đường viền đến văn bản trong một cell • Cell spacing dùng để chỉnh khoảng cách giữa các cell • Background dùng để chỉnh màu nền của table • Canh chỉnh trong mỗi Cell Properties: Horizontal alignment Hình 3. 47 – Các thuộc tính của một bảng dùng để chỉnh các canh chỉnh theo chiều ngang. Ví dụ như Left, Right, Center, Justify. Vertical alignment dùng để chỉnh 5.9. Chèn các web components các canh chỉnh theo chiều dọc. Ví dụ như Top, Middle, Bottom 5.9.1. Thời gian cập nhật (Time stamp) • Chỉnh border của từng cell: vào Cell Properties/Style/Border Chọn Insert/Date and Time. Sau đó chọn định dạng ngày tháng và thời gian phù hợp với nhu cầu. Lưu ý: FrontPage không hỗ trợ tốt khi thao tác trên các bảng phức tạp dạng như nhiều bảng lồng nhau, có nhiều cell merge và split. Do đó, cần kết hợp với sự hiểu biết của các tag HTML về TABLE để xử lí sao cho đạt được hiệu quả tối ưu. Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org 111 112