Bài giảng Lập trình mạng: Phần 1 cung cấp cho người học những kiến thức như: Lịch sử phát triển của Internet; Tổ chức của Internet; Một số dịch vụ cơ bản trên Internet; Giới thiệu chung về HTML; Cấu trúc trang HTML; Sử dụng ký tự đặc biệt trong tài liệu HTML;...Mời các bạn cùng tham khảo!
MỤC LỤC CHƢƠNG MỞ ĐẦU 1.1 Lịch sử phát triển Internet .1 1.2 Tổ chức Internet 1.3 Quản lý Internet 1.4 Một số dịch vụ Internet .4 1.4.1 Giao thức SMTP, POP3 .4 1.4.2 Giao thức truyền file - FTP (File Transfer Protocol) 1.4.3 Dịch vụ mạng thơng tin tồn cầu WWW (World Wide Web) 10 1.4.4 Giao thức HTTP (HyperText Transfer Protocol) 10 1.4.5 Giao thức Chat 11 1.4.6 URL (Uniform Resource Locator) 11 1.4.7 Web Browser 12 1.4.8 Web Server 16 1.5 Khai thác dịch vụ Internet 16 Câu hỏi Bài tập 19 Chƣơng 2: NGÔN NGỮ HTML 20 2.1 Giới thiệu chung HTML .20 2.1.1 Lịch sử HTML 20 2.1.2 Khái niệm HTML .22 2.1.3 Các đặc điểm HTML .23 2.2 Cấu trúc trang HTML 24 2.3 Thẻ cấu trúc thẻ .26 2.4 Thẻ 27 2.5 Thẻ .27 2.6 Sử dụng ký tự đặc biệt tài liệu HTML .28 2.7 Sử dụng siêu liên kết 28 2.7.1 Giới thiệu siêu liên kết URL .28 2.7.2 Sử dụng siêu liên kết 30 2.7.3 Điều hƣớng quanh Web site 35 2.8 Các thẻ mức đoạn 36 2.8.1 Thẻ P 36 2.8.2 Các thẻ định dạng đề mục 37 2.8.3 Thẻ xuống dòng BR 38 2.8.4 Thẻ ADDRESS 38 2.8.5 Thẻ BLOCKQUOTE .39 2.8.6 Thẻ PRE 39 2.9 Thẻ khối SPAN, DIV 40 2.10 Các thẻ định dạng ký tự thƣờng dùng 40 2.11 Danh sách .41 2.11.1 Danh sách không thứ tự 41 2.11.2 Danh sách có thứ tự .42 2.11.3 Danh sách định nghĩa 44 2.12 Sử dụng font 45 2.13 Sử dụng màu sắc 45 2.14 Sử dụng hình ảnh tài liệu HTML 46 2.14.1 Chèn hình ảnh vào tài liệu HTML 46 2.14.2 Chèn ảnh động vào vào tài liệu HTML 47 2.14.3 Chèn âm vào tài liệu HTML 47 2.14.4 Chèn Video vào tài liệu HTML .48 2.14.5 Chèn Java Applets 49 2.15 Cách tạo bảng 49 2.15.1 Thẻ dùng để tạo bảng .50 2.15.2 Chèn hàng cột 51 2.15.3 Xóa hàng cột .52 2.15.4 Trộn ô .52 2.15.5 Định dạng cho ô .54 2.16 Lớp (Layer) 54 2.16.1 Khái niệm lớp 54 2.16.2 Sử dụng lớp .55 2.17 Giới thiệu biểu mẫu 56 2.17.1 Sử dụng biểu mẫu 57 2.17.2 Phần tử FORM .57 2.17.3 Các phần tử nhập HTML 57 2.17.4 Tạo biểu mẫu 59 2.18 Khung (Frame) .61 2.19 Phần tử IFRAME .63 2.20 Định dạng CSS 64 2.20.1 Khái niệm CSS 64 2.20.2 Các loại style, mức độ ƣu tiên style sử dụng 65 2.20.3 Các khai báo sử dụng CSS 67 2.20.4 Định dạng CSS 73 2.21 Công cụ thiết kế Web .74 2.21.1 Tổng quan loại công cụ 74 2.21.2 Công cụ soạn thảo 75 2.21.3 Công cụ tạo xử lý ảnh tĩnh 77 2.21.4 Công cụ Flash, tạo xử lý ảnh động 77 2.21.5 Công cụ Download, Upload trang Web 78 Câu hỏi Bài tập 80 Chƣơng 3: LẬP TRÌNH SCRIPT .83 3.1 Javascript 83 3.1.1 Giới thiệu Javascript 83 3.1.2 Nhúng Javascript trang web 83 3.1.3 Cách đặt biểu thức cho thuộc tính thẻ HTML 85 3.1.4 Dùng Javascript cho trình xử lí kiện 86 3.1.5 Các kiểu liệu .86 3.1.6 Các toán tử .88 3.1.7 Các biểu thức 90 3.1.8 Khai báo biến, mảng 91 3.1.9 Cách lệnh điều kiện 92 3.1.10 Các lệnh lặp 93 3.1.11 Hàm (function) .95 3.1.12 Các đối tƣợng Javascript 97 3.2 Vbscript 109 3.2.1 Giới thiệu Vbscript 109 3.2.2 Nhúng VBscript trang web 109 3.2.3 Cách đặt biểu thức cho thuộc tính thẻ HTML 110 3.2.4 Dùng VBscript cho trình xử lí kiện 110 3.2.5 Các kiểu liệu 111 3.2.6 Các toán tử 112 3.2.7 Các biểu thức 113 3.2.8 Khai báo biến, mảng 113 3.2.9 Cách lệnh điều kiện 116 3.2.10 Các lệnh lặp 118 3.2.11 Hàm (function) thủ tục Procedure 120 Câu hỏi Bài tập 126 Chƣơng 4: LẬP TRÌNH ASP 128 4.1 IIS (Internet Information Server) 128 4.1.1 Giới thiệu IIS 128 4.1.2 Cài đặt IIS 129 4.1.3 Thực file ASP IIS 131 4.2 ASP (Active Server Page) 132 4.2.1 Giới thiệu ASP 132 4.2.2 Hoạt động ASP 133 4.2.3 Cú pháp ASP 134 4.2.4 Khai báo ngôn ngữ Script ASP 134 4.2.5 Khai báo biến ASP 135 4.2.6 Phạm vi hoạt động biến 136 4.2.7 Các biến phiên biến ứng dụng 137 4.2.8 Khai báo thủ tục, hàm cách gọi 137 4.2.9 Liên kết nhiều tệp tệp 139 4.3 Các đối tƣợng ASP 141 4.3.1 Đối tƣợng Request 141 4.3.2 Đối tƣợng Response 147 4.3.3 Đối tƣợng Cookies 155 4.3.4 Đối tƣợng Session 156 4.3.5 Đối tƣợng Application 164 4.3.6 Đối tƣợng Server 165 4.3.7 Đối tƣợng ASPError 170 4.4 Tập tin Global.asa 173 4.5 Đối tƣợng Dictionary 175 4.5.1 Tạo đối tƣợng Dictionary 175 4.5.2 Các thuộc tính đối tƣợng Dictionary 175 4.5.3 Các phƣơng thức đối tƣợng Dictionary 177 4.6 Đối tƣợng FileSystemObject 181 4.6.1 Tạo đối tƣợng FileSystemObject 181 4.6.2 Các thuộc tính đối tƣợng FileSystemObject 181 4.6.3 Các phƣơng thức đối tƣợng FileSystemObject 181 4.7 Đối tƣợng AdRotator 188 4.7.1 Tạo đối tƣợng AdRotator 188 4.7.2 Các thuộc tính đối tƣợng AdRotator 189 4.7.3 Các phƣơng thức đối tƣợng AdRotator 190 4.8 Kết nối sở liệu 190 4.8.1 Kết nối với sở liệu 191 4.8.2 Các đối tƣợng ADO 192 4.8.3 Tập hợp Errors 198 4.8.4 Stored Procedure truyền tham số 199 Câu hỏi Bài tập 203 CHƢƠNG MỞ ĐẦU 1.1 Lịch sử phát triển Internet Tiền thân mạng Internet ngày mạng ARPANET Vào năm 1960 quan Bộ Quốc phòng Mỹ, quan quản lý dự án nghiên cứu phát triển (ARPA) đề nghị liên kết địa điểm vào tháng năm 1968 Bốn địa điểm Viện Nghiên cứu Stanford, Trƣờng Đại học tổng hợp California Los Angeles, đại học Santa Barbara trƣờng Đại học tổng hợp Utah Đó mạng liên khu vực (Wide area Network) hay mạng Wan đƣợc xây dựng (mặc dù nhỏ nhiều so với mạng WAN ngày nay) Bốn địa điểm đƣợc nối thành mạng vào năm 1969 đánh dấu đời Internet ngày nay, mạng đƣợc biết đến dƣới tên ARPANET hình thành Nếu xét thời gian thuật ngữ Internet xuất lần đầu vào khoảng năm 1974 Lúc mạng đƣợc gọi ARPANET Năm 1983, giao thức TCP/IP thức đƣợc coi nhƣ chuẩn ngành quân Mỹ, tất máy tính nối với ARPANET phải sử dụng chuẩn Năm 1984, ARPANET đƣợc chia thành hai phần : Phần thứ đƣợc gọi ARPANET- dành cho việc nghiên cứu phát triển; phần thứ hai đƣợc gọi MILNET- mạng dùng cho mục đích quân Giao thức TCP/IP ngày thể rõ điểm mạnh mình, quan trọng khả liên kết mạng khác cách dễ dàng Chính điều với sách mở cửa cho phép mạng dùng cho nghiên cứu thƣơng mại kết nối đƣợc với ARPANET, thúc đẩy việc tạo siêu mạng (SuperNetwork) Nhƣng năm 1980 ARPANET đƣợc đánh giá mạng trụ cột mạng Internet Mốc lịch sử quan trọng Internet đƣợc chọn vào thập kỷ 1980, tổ chức khoa học quốc gia Mỹ NSF thành lập mạng liên kết trung tâm máy tính lớn với gọi NSFNET Nhiều doanh nghiệp chuyển từ ARPANET sang NSFNET sau gần 20 năm hoạt động, ARPANET khơng cịn hiệu ngừng hoạt động vảo khoảng năm 1990 Sự hình thành mạng backbone NSFNET mạng vùng khác tạo môi trƣờng thuận lợi cho phát triển Internet Tới năm 1995, NSFNET thu lại thành mạng nghiên cứu cịn Internet tiếp tục phát triển Với khả kết nối mở nhƣ thế, Internet trở thành mạng lớn giới, mạng mạng Ngày thấy Internet xuất lĩnh vực : thƣơng mại, chínhh trị, quân sự, nghiên cứu, giáo dục, văn hố, xã hội , từ dịch vụ Internet không ngừng phát triển tạo cho nhân loại kỷ nguyên : Kỷ nguyên thƣơng mại điện tử Internet Theo chuyên gia tin học,Internet đƣợc xem nhƣ mạng mạng (Network of network).Các mạng đƣợc nối vào Internet mạng cục (LAN—Local Area Network , kết nối máy tính phạm vi hẹp, thƣờng đƣợc sử dụng nội quan hay tổ chức), mạng địa phƣơng (MAN—Metropolitan Area Network, kết nối máy tính phạm vi thành phố), mạng miền rộng (WAN—Wide AreaNetwork, kết nối phạm vi quốc gia hay nhiều quốc gia châu lục) Trên Internet thông tin đƣợc cung cấp qua dịch vụ World Wide Web (mạng toàn cầu) viết tắt www hay Web; Web gồm có nhiều trang, gọi trang web (web site), trang chứa thông tin chủ đề riêng biệt Internet chứa khối lƣợng thơng tin khổng lồ cho phép máy nối mạng truy nhập khai thác sở liệu thuộc nhiều lĩnh vực Ngoài thuật ngữ khác Intranet hay đƣợc sử dụng với nghĩa mạng máy tính đƣợc thiết lập phạm vi quan nhằm chia sẻ thông tin qua việc sử dụng Internet.Intranet bị ngăn cách với Internet tƣờng lửa (firewall); Firewall máy chủ đứng chắn Intranet giới bên ngồi, theo dõi thơng tin vào, ngăn cản phá rối, đánh cắp tài liệu mật hay tìm đến website bị cấm Internet 1.2 Tổ chức Internet Internet liên mạng, tức mạng mạng Vậy vấn đề kết nối hai mạng Để kết nối hai mạng với nhau, có hai vấn đề cần giải Về mặt vật lý, hai mạng kết nối với có máy tính kết nối với hai mạng Việc kết nối đơn lý chƣa thể làm cho hai mạng trao đổi thơng tin với Vậy vấn đề thứ hai máy kết nối đƣợc mặt vật lý với hai mạng phải hiểu đƣợc hai giao thức truyền tin đƣợc sử dụng hai mạng gói thơng tin hai mạng đƣợc gửi qua thông qua Máy tính đƣợc gọi internet gateway hay router Khi kết nối trở nên phức tạp hơn, máy gateway cần phải biết sơ đồ kiến trúc mạng kết nối Ví dụ hình sau cho thấy nhiều mạng đƣợc kết nối router Nhƣ vậy, router R1 phải chuyển tất gói thơng tin đến máy nằm mạng Net Net Với kích thƣớc lớn nhƣ mạng Internet, việc routers định việc chuyển gói thơng tin cho máy mạng trở nên phức tạp Để routers thực đƣợc cơng việc chuyển số lớn gói thơng tin thuộc mạng khác ngƣời ta đề quy tắc là: Các routers chuyển gói thơng tin dựa địa mạng nơi đến, dựa địa máy máy nhận Nhƣ vậy, dựa địa mạng nên tổng số thông tin mà router phải lƣu giữ sơ đồ kiến trúc mạng tuân theo số mạng Internet số máy Internet Trên Internet, tất mạng có quyền bình đẳng cho dù chúng có tổ chức hay số lƣợng máy chênh lệch Giao thức TCP/IP Internet hoạt động tuân theo quan điểm sau: Tất các mạng Internet nhƣ Ethernet, mạng diện rộng nhƣ NSFNET back bone hay liên kết điểm - điểm hai máy đƣợc coi nhƣ mạng Điều xuất phát từ quan điểm thiết kế giao thức TCP/IP để liên kết mạng có kiến trúc hồn toàn khác nhau, khái niệm "mạng" TCP/IP bị ẩn phần kiến trúc vật lý mạng Đây điểm giúp cho TCP/IP tỏ mạnh Nhƣ vậy, ngƣời dùng Internet hình dung Internet làm mạng thống hai máy Internet đƣợc nối với thông qua mạng Hình vẽ sau mơ tả kiến trúc tổng thể Internet 1.3 Quản lý Internet Thực chất Internet không thuộc quyền quản lý Nó khơng có giám đốc, khơng có ban quản trị Chúng ta tham gia khơng tham gia vào Internet, quyền thành viên Mỗi mạng thành phần có giám đốc hay chủ tịch, quan phủ hãng điều hành, nhƣng khơng có tổ chức chịu trách nhiệm toàn Internet Hiệp hội Internet (Internet Socity - ISOC) hiệp hội tự nguyện có mục đích phát triển khả trao đổi thơng tin dựa vào công nghệ Internet Hiệp hội bầu Internet Architecture Board IAB (Uỷ ban kiến trúc mạng) Ban có trách nhiệm đƣa hƣớng dẫn kỹ thuật nhƣ phƣơng hƣớng để phát triển Internet IAB họp định kỳ để bàn vấn đề nhƣ chuẩn, cách phân chia tài nguyên, địa Mọi ngƣời Internet thể nguyện vọng thông qua uỷ ban kỹ thuật Internet (Internet Engineering Task Force ƣ IETF) IETF tổ chức tự nguyện, có mục đích thảo luận vấn đề kỹ thuật hoạt động Internet Nếu vấn đề đƣợc coi trọng, IETF lập nhóm kỹ thuật để nghiên cứu vấn đề gọi Nhóm đặc trách nghiên cứu phát triển Internet (Internet Researching Task Force) viết tắt IRTF Trung tâm thông tin mạng ( Network Information Center - NIC ) gồm có nhiều trung tâm khu vực nhƣ APNIC - khu vực Châu Á - Thái Bình Dƣơng NIC chịu trách nhiệm phân tên địa cho mạng máy tính nối vào Internet 1.4 Một số dịch vụ Internet 1.4.1 Giao thức SMTP, POP3 Chuẩ n Internet cho E -mail là Simple Mail Transport Protocol (SMTP) SMTP là nghi thƣ́c cấ p ƣ́ng du ̣ng (application-level) dùng để điều khiển dịch vụ thông điệp thông qua mạng TCP/IP SMTP đƣơ ̣c nói rõ RFC 321 822 SMTP sƣ̉ du ̣ng cổ ng TCP 25 Bên ca ̣nh SMTP, hai nghi thƣ́c khác dùng để phân phát mail đế n client là POP IMAP4 MIME (Multipurpose Internet Mail Extensions) bổ sung thêm cho SMTP để cho phép gắ n kèm các thông ệp đa phƣơng tiện (không phải là văn bản ) bên thông điê ̣p SMTP chuẩ n MIME sƣ̉ du ̣ng mã hóa Base 64 để chuyển file phức tạp sang ASCII MIME đƣơ ̣c mô tả các RFC 2045-2049 Các lệnh SMTP thƣờng sử dụng: Lênh Ý nghĩa HELO Sƣ̉ du ̣ng để đinh ̣ danh máy gƣ̉i với máy nhâ ̣n Lê ̣nh này phải kèm với tên máy tiń h của máy gƣ̉i Trong nghi thƣ́c mở rô ̣ng (ESMTP), lê ̣nh EHLO thay cho lê ̣nh này MAIL - Khởi ta ̣o mô ̣t phiên gƣ̉i mail Đối số bao gồm trƣờng ―FROM‖ và địa email ngƣời gửi RCPT Đinh ̣ danh ngƣời nhâ ̣n thông điê ̣p Đi kèm với ―TO‖ và điạ chỉ email DATA ngƣời nhâ ̣n Thông báo bắ t đầ u gƣ̉i dƣ̃ liê ̣u thƣ̣c sƣ̣ của mail (phầ n thân của message) Dƣ̃ liê ̣u kế t thúc bằ ng mô ̣t dòng trố ng và mô ̣t dấ u chấ m (.) RSET Hủy (reset) phiên gƣ̉i mail hiê ̣n hành VRFY NOOP Sƣ̉ du ̣ng để xác nhâ ̣n mô ̣t ngƣời nhâ ̣n mail Viế t tắ t của ―no operation‖, lê ̣nh này không làm gì cả QUIT Đóng kế t nố i SEND Báo cho host nhận biết message phải đƣơ ̣c gƣ̉i đế n mô ̣t terminal khác HELP Yêu cầ u thông tin trơ ̣ giúp tƣ̀ host nhâ ̣n Ví dụ truyền thơng SMTP: Sau kết nối ngƣời gửi (trình khách) ngƣời nhận (trình chủ) đƣợc thiết lập, việc làm sau việc hoàn toàn hợp lệ, phiên giao dịch dùng giao thức SMTP Trong hội thoại dƣới đây, trình khách gửi đƣợc đánh dấu chữ C: đứng trƣớc, trình chủ gửi đƣợc đánh dấu S: Các hệ thống máy tính thiết lập kết nối, cách dùng dòng lệnh phần mềm telnet, máy khách Chẳng hạn: telnet www.example.com 25 khởi động kết nối SMTP từ máy gửi thông điệp đến máy chủ www.example.com S: 220 www.example.com ESMTP Postfix C: HELO mydomain.com S: 250 Hello mydomain.com C: MAIL FROM: S: 250 Ok C: RCPT TO: S: 250 Ok C: DATA S: 354 End data with . C: Subject: test message C: From: sender@mydomain.com C: To: friend@example.com C: Hello, C: This is a test C: Goodbye S: 250 Ok: queued as 12345 C: QUIT S: 221 Bye Các mã trạng thái SMTP Khi mô ̣t sending host gƣ̉i mô ̣t lê ̣nh SMTP đế n receiving host , host nhâ ̣n trả về mô ̣t mã trạng thái cho máy gửi biết điều xảy Danh sách bên dƣới là code đƣơ ̣c nhóm theo số đầ u tiên (5xx là lỗi, 4xx lỗi ta ̣m thời, 1xx-3xx thành công): Ý nghĩa Mã 211 Trả lời trợ giúp, trạng thái hệ thống 214 Help message 220 Dịch vụ sẳn sàng (Service ready) 221 250 Đóng kế t nố i Hành động yêu cầu đƣợc chấp nhận 251 Ngƣời sƣ̉ du ̣ng không ở ma ̣ng cu ̣c bô ̣, chuyể n đế n 354 Bắ t đầ u nhâ ̣p mail 421 Dịch vụ không sẵn sàng 450 Hành động không chấp nhận, mailbox bâ ̣n 451 Hành động bị hủy, lỗi cu ̣c bô ̣ 452 Hành động không chấp nhận, thiế u không gian lƣu trƣ̃ 500 Không hiểu lệnh lỗi cú pháp 501 Lỗi cú pháp ở tham số 502 Lê ̣nh không đƣơ ̣c hỗ trơ ̣ 503 Sai thƣ́ tƣ̣ các lê ̣nh 504 Tham số của lê ̣nh không đƣơ ̣c hỗ trơ ̣ 550 Hành động không chấp nhận, mailbox không có 551 Không phải là ngƣời sƣ̉ dụng cục 552 Hủy lê ̣nh vƣơ ̣t quá không gian lƣu trƣ̃ 553 Hành động không chấp nhận, tên mailbox không cho phép 554 Phiên dao dich ̣ bi ̣lỗi Post Office Protocol (POP) POP cho phép các mail client (UA – User Agent) máy cục kết nố i vào pop server (MTA – Message Transfer Agent) lấy mail máy tính cục nơi mà ngƣời sử dụng có Ví dụ 2.25: sau cho biết cách sử dụng thuộc tính backgroundcolor để định màu cho trang web, thành phần h1, h2 lần lƣợt xanh lơ, đỏ cam Body { background-color:cyan } H1{ background-color:red } H2{ background-color:orange } Ảnh (thuộc tính background-image): Việc sử dụng ảnh giúp trang web trông sinh động bắt mắt Để chèn ảnh vào thành phần trang web sử dụng thuộc tính background-image Bây làm ví dụ minh họa để xem thuộc tính backgroundimage hoạt động Đầu tiên tìm ảnh mà thích, lấy ảnh logo blog Sau đó, viết CSS để đặt logo làm ảnh trang web nhƣ sau: body { background-image:url(logo.png) } Thuộc tính font-family Thuộc tính font-family có cơng dụng định nghĩa danh sách ƣu tiên font đƣợc dùng để hiển thị thành phần trang web Theo đó, font đƣợc liệt kê danh sách đƣợc dùng để hiển thị trang web Nếu nhƣ máy tính truy cập chƣa cài đặt font font thứ hai danh sách đƣợc ƣu tiên…cho đến có font phù hợp Có hai loại tên font đƣợc dùng để định font-family: family-names generic families + Family-names: Tên cụ thể font Ví dụ: Arial, Verdana, Tohama,… + Generic families: Tên họ gồm nhiều font Ví dụ: sans-serif, serif,… Khi lên danh sách font dùng để hiển thị trang web chọn font mong muốn trang web đƣợc hiển thị để đặt vị trí ƣu tiên Tuy nhiên, font không thông dụng nên cần định thêm số font thông dụng dự phần 68 nhƣ Arial, Tohama hay Times New Roman đƣợc đề nghị đặt vào danh sách font generic families (thƣờng có độ ƣu tiên thấp nhất) Thực theo cách đảm bảo trang web hiển thị tốt hệ thống Ví dụ 2.26: sau viết CSS để quy định font chữ dùng cho trang web Times New Roman, Tohama, sans-serif, font chữ dùng để hiển thị tiêu đề h1, h2, h3 Arial, Verdana font họ serif body { font-family:”Times New Roman”,Tohama,sans-serif } h1, h2, h3 { font-family:arial,verdana,serif } Mở trang web trình duyệt kiểm tra kết Chúng ta thấy phần tiêu đề đƣợc ƣu tiên hiển thị font Arial, máy khơng có font font Verdana đƣợc ƣu tiên kế font thuộc họ serif Thuộc tính font-style: Thuộc tính font-style định nghĩa việc áp dụng kiểu in thƣờng (normal), in nghiêng (italic) hay xiên (oblique) lên thành phần trang web Trong ví dụ 2.27 bên dƣới thử thực áp dụng kiểu in nghiêng cho thành phần h1 kiểu xiên cho h2 Ví dụ 2.27: H1{ font-style:italic; } H2{ font-style:oblique; } Thuộc tính font-variant: Thuộc tính font-variant đƣợc dùng để chọn chế độ bình thƣờng small-caps font chữ Một font small-caps font sử dụng chữ in hoa có kích cỡ nhỏ in hoa chuẩn để thay chữ in thƣờng Nếu nhƣ font chữ dùng để hiển thị khơng có sẵn font small-caps trình duyệt chữ in hoa để thay Trong ví dụ 2.28 sau sử dụng kiểu small-caps cho phần h1 Ví dụ 2.28 : h1 { font-variant:small-caps } Thuộc tính font-weight: 69 Thuộc tính font-weight mơ tả cách thức thể font chữ dạng bình thƣờng (normal) hay in đậm (bold) Ngồi ra, số trình duyệt hỗ trợ mô tả độ in đậm số từ 100 – 900 Thử in đậm phần p: p{ font-weight:bold } Thuộc tính font-size: Kích thƣớc font đƣợc định thuộc tính font-size Thuộc tính nhận giá trị đơn vị đo hỗ trợ CSS bên cạnh giá trị xx- small, x-small, small, medium, large, x-large, xx-large, smaller, larger Tùy theo mục đích sử dụng website lựa chon đơn vị phù hợp Ví dụ trang web phục vụ chủ yếu ngƣời già, thị lực hay ngƣời dùng sử dụng hình máy tính chất lƣợng cân nhấc sử dụng đơn vị qui đổi nhƣ em hay % Nhƣ đảm bảo font chữ trang web ln kích thƣớc phù hợp Thuộc tính text-align : Thuộc tính text-align giúp thêm canh chỉnh văn cho thành phần trang web Cũng tƣơng tự nhƣ lựa chọn canh chỉnh văn trình soạn thảo văn thơng dụng nhƣ MS Word, thuộc tính có tất giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) justify (canh đều) Trong ví dụ 2.29 sau thực canh phải thành phần h1, h2 canh thành phầnVí dụ 2.29: h1, h2 { text-align:right } p{ text-align:justify } Thuộc tính letter-spacing: Thuộc tính letter-spacing đƣợc dùng để định khoảng cách ký tự đoạn văn Muốn định khoảng cách ký tự thành phần h1, h2 7px thành phần
5px viết CSS sau: Ví dụ 2.30 70 h1, h2 { letter-spacing:7px } p { letter-spacing:5px } Thuộc tính text-decoration: Thuộc tính text-decoration giúp thêm hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), hiệu ứng đặc biệt văn nhấp nháy (blink) Pseudo-classes For Links Một thành phần quan trọng website liên kết Cũng nhƣ đối tƣợng văn thơng thƣờng, hồn tồn áp dụng thuộc tính định dạng học trƣớc nhƣ định font chữ, gạch chân, màu chữ cho liên kết Hơn nữa, CSS cung cấp điều khiển đặc biệt đƣợc gọi pseudo- classes Pseudoclasses cho phép xác định hiệu ứng định dạng cho đối tƣợng liên kết trạng thái xác định nhƣ liên kết chƣa đƣợc thăm (a:link), rê chuột lên liên kết (a:hover), liên kết đƣợc thăm (a:visited) hay liên kết đƣợc kích hoạt – giữ nhấn chuột (a:active) Với điều khiển pseudo- classes với thuộc tính CSS học chắn mang lại nhiều ý tƣởng trang trí liên kết cho trang web Sau tiến hành số ví dụ để tìm hiểu thêm khả trang trí cho liên kết dựa pseudo-classes Ví dụ áp dụng màu sắc khác cho trạng thái liên kết: liên kết chƣa thăm có màu xanh lá; liên kết mouse over có màu đỏ tƣơi; liên kết thăm có màu đỏ Ví đụ 2.31: a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } 2) Tạo sử dụng lớp (class) Nhƣ biết lệnh CSS định dạng cho nhiều thành phần HTML trang web (các thẻ HTML) Nhƣng có thiết kế 71 mong muốn số thành phần có định dạng khác nhƣ khác màu sắc, đƣờng viền, size chữ … Ví dụ 2.32 : ta viết CSS sau: p {color: black; font-size: 12px} Khi tất thành phần p có màu đen, kích cỡ size 12px Nhƣng muốn số thành phần p có màu xanh, số thành phần p khác lại có màu vàng Class ID đƣợc gắn thêm vào thẻ HTML giúp ta có thêm lựa chọn để giải vấn đề Lúc class id trở thành CSS selector Class hay gọi lớp dùng để lớp đối tƣợng có chung thuộc tính Các đối tƣợng class có tính thừa kế lẫn nhau, trang HTML Chúng ta có nhiều đối tƣợng thuộc class Ví dụ sau minh chứng cho tính thừa kế việc định nghĩa nhiều đối tƣợng thuộc class Để tạo áp dụng Class đơn giản thêm thuộc tính Class = ―Tên class‖ vào thẻ tƣơng ứng Để định nghĩa class sử dụng (.Tên class ) nhƣ selector Ví dụ 2.32: Ta định dạng cho thành phần p có màu xanh, thành phần p có màu vàng Và thành phần p đƣợc hiển thị bình thƣờng nhƣ sau:
Đoạn văn hiển thị bình thƣờng màu đen
Đoạn văn hiển thị màu xanh
Đoạn văn hiển thị màu vàng
Nhƣ cần phải định nghĩa lớp class blue yellow Để định nghĩa lớp ta làm nhƣ sau: blue{ color: blue} yellow{ color: yellow} 3) Tạo sử dụng định danh (id) id index(chỉ số) đƣợc dùng để xác định đối tƣợng Do trang HTML đối tƣợng có id, có đối tƣợng trở lên có id giống trang điều có nghĩa trang khơng validate HTML Cách sử dụng id hoàn toàn giống class, ta thay dấu dấu # trƣớc tên id định nghĩa Ví dụ 2.33:Đoạn văn hiển thị màu đỏ
#red{ color: red} 72 Sự khác biệt lớn class Id ID nhất, class có nhiều Trong trang web khơng thể tồn hai id có tên Nhƣng sử dụng nhiều css có tên cho thành phần khác Điểm khác biệt thứ class id sử dụng nhiều class cho thành phần đó, cịn id Đoạn mã sau cho thấy cách sử dụng class có tên bor top cho thành phần p 2.20.4 Định dạng CSS Nhƣ phần giới thiệu, css giúp trình bầy tài liệu HTML sinh động, đẹp mắt, với thuộc tính phong phú đa dạng css giúp định dạng, chỉnh tài liệu trang web cách đơn giản chuyên nghiệp áp dụng cho tồn website Phần nghiên cứu thuộc tính hay dùng css giúp định dạng chỉnh tài liệu html Trong phần tìm hiểu số ví dụ cụ thể dùng css định dạng tài liệu html nhƣ định dạng văn bản, định dạng hình ảnh, … Định dạng văn Các đoạn văn văn web cần phải đƣợc trình bầy thống nhƣ màu chữ, cỡ chữ, kiểu chữ, lề, khoảng cách dịng … Ví dụ 2.34: sau tạo css giúp chỉnh đoạn văn tài liệu HTML p { font-family: Times New Roman; font-size: 14pt; text-align: justify; line-height: 150%; text-indent: 6; margin-top: ; color:#008080 } Định dạng hình ảnh Ví dụ 2.35: sau định dạng kích thƣớc hình ảnh chèn vào trang web img { clip:rect(50px 218px 155px 82px); } Tạo đƣờng viền Ví dụ 2.36: định dạng đƣờng viền có bo góc rounded_corner { -moz-border-radius:10px; 73 -webkit-border-radius:10px; width:400px; height:100px; background-color:#000; } Định dạng liên kết Ví dụ 2.37: định dạng cho văn liên kết web a{ border:1px solid #000; font-size:14px } a:link { color:#00FF00; } a:hover { background-color:#00BFF3; color:#FF00FF; font-size:1.2em; text-decoration:blink } a:visited { background-color:#FFF568; color:#FF0000; text-decoration:none } a:active { color:#662D91; font-variant:small-caps } 2.21 Công cụ thiết kế Web 2.21.1 Tổng quan loại cơng cụ Ngày có nhiều cơng cụ hỗ trợ việc thiết kế xây dựng website Nhờ có cơng cụ mà việc tạo website trở nên trực quan hơn, đơn giản hơn, trang web trở nên đẹp Hiện có nhiều loại công cụ khác đƣợc giới thiệu với nhiều loại tính khác với mức độ chuyên nghiệp khác Việc lựa chọn công cụ tùy thuộc tào khả trình độ ngƣời thiết kế nhiên thấy hầu hết cơng cụ thuộc vào nhóm cơng cụ sau: 74 - Công cụ soạn thảo - Công cụ tạo xử lý ảnh tĩnh - Công cụ tạo xử lý ảnh động - Công cụ download, upload trang web 2.21.2 Công cụ soạn thảo Các công cụ soạn thảo giúp cho dễ dàng tạo trang web việc kích chuột lựa chọn đối tƣợng, chƣơng trình tự động giúp sinh mã nguồn HTML để tạo trang web tƣơng ứng Các chƣơng trình cịn giúp dễ dàng tạo bố cục trang cách trực quan Ngồi chƣơng trình cịn hỗ trợ việc viết mã nguồn html để tạo trang web hay lập trình ngơn ngữ khác nhƣ javascript, vbscript Hiện có cơng cụ đƣợc nhiều ngƣời lựa chọn sử dụng Microsoft FontPage Adobe Dreamweaver Microsoft FontPage Microsoft Frontpage phần mềm thiết kế web chuyên nghiệp hãng phần mềm Microsoft Phần mềm đƣợc kèm với Office, bao gồm tính vƣợt trội nhƣng lại dễ sử dụng Với Frontpage dễ dàng tạo trang web đơn, web site, dùng để cập nhật cho trang web có sẵn mà khơng cần có kiến thức nhƣ Java, lập trình chí ngơn ngữ HTM Vì Frontpage biến việc thiết kế web đơn giản nhƣ ta soạn thảo văn Microsoft Word Hình 2.24 Microsoft Fontpage sử dụng thiết kế 75 Hình 2.25 Microsoft Fontpage soạn thảo mã nguồn Dreamweaver Là phần mềm thiết kế Web chuyên nghiệp, Tƣơng thích với nhiều đối tƣợng nhúng (Flash, Shockwave, Active X, …), Hỗ trợ công cụ thiết kế trang Web động hiệu Cũng nhƣ Frontpage, Dreamweaver cho phép dễ dàng tạo thiết kế trang web hay website hình thức thiết kế trực quan nhƣ word vết lệnh ngôn ngữ lập trình nhƣ HTML, javascript, vbscript, php, asp… 76 Hình 2.26 Màn hình soạn thảo trang web DreamWeaver 2.21.3 Cơng cụ tạo xử lý ảnh tĩnh Hình ảnh phần thiếu đƣợc trang web, hình ảnh giúp ta mơ tả nội dung cách sinh động, đơn giản dễ hiểu Ngày có nhiều cơng cụ giúp ta xử lý hình ảnh nhƣ, lắp gép, tạo chỉnh sửa ảnh, công cụ dễ làm, chuyên nghiệp đƣợc nhiều ngƣời lựa chọn phần mềm Photoshop Adobe Photoshop phần mềm xử lý ảnh chuyên nghiệp Photoshop cho phép ngƣời sử dụng tút sửa ảnh (retouching), ghép ảnh (composing), phục chế ảnh (restoration), tô màu tranh ảnh (painting)… cách dễ dàng hiệu Phần mềm công cụ thiếu nhiếp ảnh gia, nhà thiết kế đồ hoạ, thiết kế web biên tập video Ngoài Adobe Photoshop CS4 phối hợp tốt với phần mềm khác hãng Adobe nhƣ: - Phần mềm vẽ trang trí minh họa Adobe Illustrator - Phần mềm chữ trình bày Adobe InDesign - Phần mềm tạo hình ảnh động Adobe Flash - Phần mềm thiết kế trang web Adobe Dreamweaver 2.21.4 Công cụ Flash, tạo xử lý ảnh động Ảnh động thiếu đƣợc trang web chẳng hạn nhƣ banner, logo, hay đoạn phim web Việc đƣa ảnh động vào web giúp cho trang web sinh động hơn, đẹp dễ chuyển tải nội dung hơn, thực mô trực quan sinh động Flash phần mềm cho phép tạo xủ lý ảnh động cho trang web tốt Adobe Flash (trƣớc Macromedia Flash trƣớc FutureSplash), hay gọi cách đơn giản Flash, đƣợc dùng để chƣơng trình sáng tạo đa phƣơng tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player Chƣơng trình điện tốn đƣợc viết phân phối Adobe Systems (công ty mua Macromedia) Flash dùng kỹ thuật đồ họa vectơ đồ họa điểm (raster graphics) Ngồi Flash cịn có ngơn ngữ văn lệnh riêng gọi ActionScript có khả truyền tải luồng âm hình ảnh Đúng từ Macromedia Flash nên đƣợc dùng để chƣơng trình tạo tập tin Flash Cịn từ Flash Player nên đƣợc dành để ứng dụng có nhiệm vụ thi hành hay hiển thị tập tin Flash Tuy vậy, chữ Flash đƣợc dùng để hai chƣơng trình nói 77 Flash công cụ để phát triển ứng dụng nhƣ thiết kế phần mềm mô Sử dụng ngôn ngữ lập trình ActionScript để tạo tƣơng tác, hoạt cảnh phim Điểm mạnh Flash nhúng file âm thanh, hình ảnh động Ngƣời lập trình chủ động lập điều hƣớng cho chƣơng trình Flash xuất đa dạng file kiểu html, exe, jpg, để phù hợp với ứng dụng ngƣời sử dụng nhƣ Web, CD, … Các tập tin Flash, thƣờng thƣờng mang phần mở rộng swf thị chƣơng trình duyệt trang Web hay ứng dụng Flash Player Các tập tin Flash thƣờng hoạt họa, quảng cáo hay thành phần trang trí trang Web Gần Flash đƣợc sử dụng để tạo ứng dụng Internet phong phú Với kích thƣớc tƣơng tự, tập tin Flash chứa nhiều thơng tin tập tin hình dạng GIF hay dạng JPEG 2.21.5 Công cụ Download, Upload trang Web Với ngƣời làm web việc trao đổi thông tin mạng cần thiết chẳng hạn nhƣ phải upload toàn liệu lên web, hay Download tài liệu Hiện có nhiều cơng cụ giúp thực việc truyền file Một công cụ CuteFTP Professional CuteFTP Professional phần mềm để chuyển files qua nhiều giao thức internet máy tính Chúng ta tới máy tính nơi internet cách an toàn hiệu Chức Connection Wizard tích hợp phần mềm hƣớng dẫn kết nối tới site fxp vài giây giao diện thân thiện phần mềm giúp Chúng ta chuyển file dễ dàng Chúng ta ngƣời sử dụng Kể việc xuất trang web, download hình ảnh kỹ thuật số, phần mềm, file nhạc chuyển file có dung lƣợng lớn văn phịng chi nhánh 78 Hình 2.27 Giao diện chƣơng trình CuteFTP Professional CuteFTP Professional cung cấp công cụ đơn giản mà mạnh mẽ để giải thách thức phức tạp quản lý liệu giúp hoàn tất yêu cầu HIPAA, GLBA Sarbanes-Oxley - CuteFTP Professional đƣợc giới chuyên môn đánh giá cao độ an tồn tiện ích mang lại vận chuyển files Đƣợc bình chọn đứng thứ toptenreviews 2007… - Tƣơng thích với Windows 98/ME/NT/2000/XP - Tƣơng thích với Windows 2003 & IIS6 - Dễ dàng với RFC 959, 2228, 2389, 2289 & - Dễ dàng với OpenSSL Libraries 0.9.7d - Dễ dàng với ZLIB Libraries 1.2.1 - Dễ dàng với với phƣơng thức chuyển thông tin (Secure Shell) - Khởi động nhanh (Delay Loaded Components) 79 Câu hỏi Bài tập chƣơng Tiêu đề trang Web có mức chính? Nêu thuộc tính thẻ Paragraph () Hãy tạo trang web đơn giản có sử dụng tiêu đề mức thẻ Paragraph (
) Tạo trang web đơn giản tự giới thiệu mình, tuổi, làm gì, sở thích bạn Áp dụng học trên, tạo danh sách nhƣ sau: Top level Top level Second Level o Fact o Fact Top level Áp dụng học trên, tạo bảng giống nhƣ sau: Tổng kết năm học 2003 - 2004 Thống kê HS giỏi HS HS trung bình Lớp 1A 35 Lớp 1B 20 10 12 Lớp 1C 25 20 Hãy cho biết ảnh dƣới đƣợc nhúng vào tài liệu HTML? Viết đoạn code đƣợc dùng để nhúng ảnh Tạo trang web chèn ảnh cho ảnh nằm phía bên trái, đoạn văn nằm bên phải Tạo trang web chèn ảnh cho ảnhh đƣợc đoạn văn nằm bên dƣới 80 Tạo trang khác giới thiệu chi tiết có liên kết tới trang giới thiệu 10 Chèn ảnh vào trang giới thiệu cho click vào ảnh trang giới thiệu chi tiết đƣợc mở Yêu cầu: ảnh thứ sử dụng đƣờng dẫn tuyệt đối, ảnh thứ hai sử dụng đƣờng dẫn tƣơng đối tới trang cần liên kết 11 Tạo trang thứ ba có chèn đoạn Video clips trang 12 Sửa trang giới thiệu tóm tắt cho trang ảnh bất kỳ, trang giới thiệu chi tiết có màu xanh nƣớc biển nhạt 13 Dùng thẻ IFRAME để nhúng trang thứ vào trang giới thiệu tóm tắt (trang chủ) 14 Tạo trang web dùng để đăng nhập có giao diện nhƣ hình dƣới (sử dụng FORM) 15 Tạo file css để đặt mặc định kiểu font màu cho phần giới thiệu bạn 16 Hãy tạo trang web cho phép đăng ký thông tin ngƣời dùng mạng theo mẫu sau: 17 Hãy tạo trang web cho phép nhập thơng tin hàng hóa nhƣ sau: 81 18 Hãy thiết kế website giải trí có bố cục nhƣ sau Top Left Main Bottom Trong đó: - Phần top hiển thị nội dung trang banner.htm - Phần left hiển thị nội dung trang login.htm - Phần Right hiển thị nội dung trang menuright.htm - Phần Bottom hiển thị nội dung trang address.htm - Phần main hiển thị trang liên kết đến 82 Right ...2 .11 Danh sách . 41 2 .11 .1 Danh sách không thứ tự 41 2 .11 .2 Danh sách có thứ tự .42 2 .11 .3 Danh sách định nghĩa 44 2 .12 Sử dụng font... 11 3 3.2.8 Khai báo biến, mảng 11 3 3.2.9 Cách lệnh điều kiện 11 6 3.2 .10 Các lệnh lặp 11 8 3.2 .11 Hàm (function) thủ tục Procedure 12 0 Câu hỏi Bài. .. 12 6 Chƣơng 4: LẬP TRÌNH ASP 12 8 4 .1 IIS (Internet Information Server) 12 8 4 .1. 1 Giới thiệu IIS 12 8 4 .1. 2 Cài đặt IIS 12 9 4 .1. 3 Thực file