Bài giảng Thiết kế trang Web - ĐH Nha Trang

Chia sẻ: Ermintrudetran Ermintrudetran | Ngày: | Loại File: PDF | Số trang:153

Thêm vào BST

Báo xấu

41
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Thiết kế trang Web cung cấp cho người học những kiến thức như: Tổng quan về Internet và dịch vụ World Wide Web; Ngôn ngữ đánh dấu siêu văn bản HTML 4.01 và XHTML 1.0; Ngôn ngữ định dạng CSS2; Ngôn ngữ lập trình JavaScript. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Thiết kế trang Web - ĐH Nha Trang

TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN – BỘ MÔN HỆ THỐNG THÔNG TIN BÀI GIẢNG THIẾT KẾ TRANG WEB  Tổng quan về Internet và WEB  HTML  CSS  JavaScript NHA TRANG 2014
LỜI NÓI ĐẦU Bài giảng Thiết kế trang web được biên soạn làm tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập và nghiên cứu. Trong bài giảng này, nội dung được viết theo hướng trang bị cho người học kiến thức nền tảng về kỹ thuật, kỹ năng xây dựng, thay đổi giao diện, điều khiển hoạt động trang web theo các chuẩn khác nhau. Các chủ đề chính của bài giảng bao gồm  Tổng quan về Internet và dịch vụ World Wide Web  Ngôn ngữ đánh dấu siêu văn bản HTML 4.01 và XHTML 1.0  Ngôn ngữ định dạng CSS2  Ngôn ngữ lập trình JavaScript Bên cạnh phần lý thuyết còn có các bài tập thực hành kèm theo để người học luyện tập, vận dụng những kiến thức đã học vào thực tế, tăng cường khả năng tự học, đáp ứng được yêu cầu đổi mới phương pháp học tập theo học chế tín chỉ. Dù có nhiều cố gắng trong công tác biên soạn nhưng bài giảng chắc chắn sẽ có ít nhiều sai sót. Chúng tôi mong nhận được các ý kiến đóng góp của các đồng nghiệp cũng như của sinh viên để hoàn thiện bài giảng trong những lần xuất bản tiếp theo. KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN
MỤC LỤC CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB ..................................... 1 1. Internet .................................................................................................................................. 1 1.1. Khái niệm ........................................................................................................................ 1 1.2. Lịch sử............................................................................................................................. 1 1.3. Địa chỉ IP và tên miền .................................................................................................... 2 1.3.1. Địa chỉ IP .............................................................................................................................2 1.3.2. Tên miền (Domain name) ....................................................................................................3 1.4. Nhà cung cấp dịch vụ Internet ........................................................................................ 4 1.4.1. IAP (Internet Access Provider) ............................................................................................4 1.4.2. ISP (Internet Service Provider) ............................................................................................4 1.4.3. ICP (Internet Content Provider) ...........................................................................................4 2. World Wide Web .................................................................................................................. 5 2.1. Khái niệm ........................................................................................................................ 5 2.2. Các thành phần của web ................................................................................................. 5 2.2.1. Siêu văn bản (HyperText) ....................................................................................................5 2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML).......................5 2.2.3. Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP) ........................5 2.2.4. Trình duyệt (web browser)...................................................................................................6 2.2.5. URL (Uniform Resource Locator) .......................................................................................6 2.3. Mô hình tương tác Client-Server trong một ứng dụng Web ........................................... 7 2.3.1. Khái niệm ứng dụng web .....................................................................................................7 2.3.2. Mô hình client-server ...........................................................................................................7 2.4. Một số tổ chức quản lý chuẩn và công nghệ web ........................................................... 8 2.4.1. W3C - The World Wide Web Consortium ..........................................................................9 2.4.2. ECMA - European Computer Manufacturers Association ..................................................9 2.4.3. OASIS – Organization for the Advancement of Structured Information Standards ............9 CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML) ........................................... 10 1. Giới thiệu HTML ................................................................................................................ 10 2. Đặc điểm của HTML .......................................................................................................... 10 3. Cấu trúc của văn bản HTML ............................................................................................ 11 3.1. Cấu trúc của HTML element ........................................................................................ 11
3.2. Cấu trúc của văn bản HTML ........................................................................................ 13 3.2.1. HTML section ....................................................................................................................13 3.2.2. Header section....................................................................................................................13 3.2.3. Body section.......................................................................................................................13 4. Các thẻ thuộc HTML element ........................................................................................... 14 4.1. Phân loại HTML element .............................................................................................. 14 4.1.1. Element khối (block-level element) ...................................................................................14 4.1.2. Element dòng (inline element) ...........................................................................................14 4.2. Các thẻ cơ bản .............................................................................................................. 15 4.2.1. Thẻ heading........................................................................................................................15 4.2.2. Thẻ Paragraph ....................................................................................................................16 4.2.3. Thẻ ...........................................................................................................................16 4.2.4. Thẻ ........................................................................................................................17 4.2.5. Thẻ ngắt dòng ............................................................................................................17 4.2.6. Đường kẻ ngang .................................................................................................................17 4.2.7. Các thẻ định dạng văn bản .................................................................................................19 4.3. Liên kết .......................................................................................................................... 22 4.3.1. Liên kết địa chỉ tuyệt đối ...................................................................................................22 4.3.2. Liên kết địa chỉ tương đối ..................................................................................................22 4.3.3. Liên kết nội tại ...................................................................................................................23 4.4. Bảng biểu (Table) ......................................................................................................... 23 4.5. Danh sách (List)............................................................................................................ 25 4.5.1. Danh sách không đánh số thứ tự ........................................................................................25 4.5.2. Danh sách đánh số thứ tự ...................................................................................................26 4.5.3. Danh sách định nghĩa .........................................................................................................27 4.6. Hình ảnh ....................................................................................................................... 28 4.7. Multimedia .................................................................................................................... 28 4.8. Khung (frame) ............................................................................................................... 28 4.9. Biểu mẫu (form) ............................................................................................................ 30 4.9.1. Thẻ ........................................................................................................................31 a) Text & password .............................................................................................................................. 31 b) Radio button ..................................................................................................................................... 31 c) Checkbox .......................................................................................................................................... 32 d) Hidden .............................................................................................................................................. 32
e) Button ............................................................................................................................................... 32 f) Image ................................................................................................................................................ 33 g) File ................................................................................................................................................... 33 4.9.2. Combo box (drop-down menu) ..........................................................................................33 4.9.3. TextArea ............................................................................................................................34 4.10. Các thẻ bổ sung thông tin cho trang web ................................................................... 35 4.10.1. Thẻ ......................................................................................................................35 a) Meta Content Type ........................................................................................................................... 35 b) Meta Content Language (hoặc Meta Language) .............................................................................. 35 c) Meta Description .............................................................................................................................. 36 d) Meta Keywords ................................................................................................................................ 36 e) Meta Author ..................................................................................................................................... 36 f) Meta Refresh ..................................................................................................................................... 36 4.10.2. Thẻ .....................................................................................................................36 4.10.3. Thẻ ......................................................................................................................37 4.10.4. Thẻ ........................................................................................................................37 5. Khai báo chuẩn HTML ...................................................................................................... 38 5.1. Khái niệm ...................................................................................................................... 38 5.2. Khai báo ........................................................................................................................ 38 5.2.1. HTML 4.01 ........................................................................................................................38 a) HTML 4.01 Strict ............................................................................................................................. 38 b) HTML 4.01 Transitional .................................................................................................................. 39 c) HTML 4.01 Frameset ....................................................................................................................... 39 5.2.2. XHTML 1.0 .......................................................................................................................39 a) XHTML 1.0 Strict ............................................................................................................................ 39 b) XHTML 1.0 Transitional ................................................................................................................. 39 c) XHTML 1.0 Frameset ...................................................................................................................... 39 5.2.3. XHTML 1.1 .......................................................................................................................40 5.2.4. HTML5 ..............................................................................................................................40 6. XHTML ............................................................................................................................... 40 6.1. Khái niệm ...................................................................................................................... 40 6.2. Các thay đổi về cú pháp trong XHTML so với HTML .................................................. 40 7. Giới thiệu HTML5 .............................................................................................................. 42 CHƯƠNG 2: CASCADING STYLE SHEET (CSS)................................................................ 43 1. Giới thiệu CSS..................................................................................................................... 43
2. Mục đích sử dụng CSS ....................................................................................................... 43 3. Cú pháp CSS ....................................................................................................................... 43 3.1. Selector ......................................................................................................................... 43 3.1.1. Universal selector...............................................................................................................44 3.1.2. Type selector ......................................................................................................................44 3.1.3. Id selector ...........................................................................................................................45 3.1.4. Class selector .....................................................................................................................45 3.1.5. Descendant selector ...........................................................................................................46 3.1.6. Child selector .....................................................................................................................46 3.1.7. Adjacent sibling selector ....................................................................................................46 3.1.8. Attribute selector ................................................................................................................47 3.1.9. Pseudo elements và Pseudo classes ...................................................................................48 a) Pseudo elements ............................................................................................................................... 48 b) Pseudo classes .................................................................................................................................. 48 3.2. Property ........................................................................................................................ 49 3.3. Value ............................................................................................................................. 50 4. Đơn vị CSS .......................................................................................................................... 50 4.1. Đơn vị đo chiều dài ....................................................................................................... 50 4.2. Đơn vị màu sắc ............................................................................................................. 51 5. Nhúng mã CSS vào file HTML ......................................................................................... 51 5.1. Kiểu thuộc tính (Inline Style) ........................................................................................ 51 5.2. Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet) ........................... 52 5.3. Liên kết ngoài (External Style Sheet) ............................................................................ 53 5.3.1. Sử dụng thẻ .............................................................................................................53 5.3.2. Sử dụng @import ...............................................................................................................54 5.4. Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML ..................................... 57 6. Các định dạng CSS cơ bản ................................................................................................ 57 6.1. Background ................................................................................................................... 57 6.1.1. Màu nền .............................................................................................................................57 6.1.2. Ảnh nền ..............................................................................................................................57 Định dạng background rút gọn ....................................................................................................59 6.2. Font ............................................................................................................................... 59 6.2.1. Thuộc tính font-family .......................................................................................................59
6.2.2. Thuộc tính font-style ..........................................................................................................59 6.2.3. Thuộc tính font-variant ......................................................................................................59 6.2.4. Thuộc tính font-weight ......................................................................................................60 6.2.5. Thuộc tính font-size ...........................................................................................................60 Định dạng font rút gọn .................................................................................................................60 6.3. Text................................................................................................................................ 60 6.3.1. Màu chữ (thuộc tính color) ...............................................................................................60 6.3.2. Thuộc tính text-indent ........................................................................................................60 6.3.3. Thuộc tính text-align ..........................................................................................................61 6.3.4. Thuộc tính vertical-align ....................................................................................................61 6.3.5. Thuộc tính letter-spacing ...................................................................................................61 6.3.6. Thuộc tính text-decoration .................................................................................................62 6.3.7. Thuộc tính text-transform ..................................................................................................62 6.4. Box model ..................................................................................................................... 62 6.4.1. Margin ................................................................................................................................63 6.4.2. Padding ..............................................................................................................................63 6.4.3. Border ................................................................................................................................64 a) border-width ..................................................................................................................................... 64 b) border-color ...................................................................................................................................... 64 c) boder-style ........................................................................................................................................ 64 6.4.4. Width & Height..................................................................................................................65 a) Thuộc tính width, max-width, min-width ......................................................................................... 65 b) Thuộc tính height, max-height, min-height ...................................................................................... 65 6.5. Float & clear ................................................................................................................ 66 6.5.1. Thuộc tính float ..................................................................................................................66 6.5.2. Thuộc tính clear .................................................................................................................67 6.6. Position ......................................................................................................................... 68 6.7. Lớp (Layers).................................................................................................................. 69 7. Giới thiệu CSS3................................................................................................................... 70 CHƯƠNG 3: JAVASCRIPT ...................................................................................................... 71 1. Giới thiệu JavaScript ......................................................................................................... 71 2. Đặc điểm của JavaScript.................................................................................................... 71 3. Mục đích sử dụng JavaScript ............................................................................................ 72 4. Nhúng mã JavaScript vào file HTML .............................................................................. 72
4.1. Sử dụng thẻ .................................................................................................... 72 4.2. Dùng file chứa mã JavaScript ...................................................................................... 74 4.3. Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý sự kiện ................................... 74 4.4. Thẻ ............................................................................................................. 75 5. Khai báo cơ bản trong JavaScript .................................................................................... 76 5.1. Biến ............................................................................................................................... 76 5.1.1. Khai báo .............................................................................................................................76 5.1.2. Quy tắc đặt tên biến ...........................................................................................................76 5.1.3. Phạm vi của biến ................................................................................................................76 5.2. Hằng.............................................................................................................................. 77 6. Các kiểu dữ liệu trong JavaScript..................................................................................... 78 6.1. Kiểu số nguyên .............................................................................................................. 78 6.2. Kiểu số thực (kiểu số dấu chấm động) .......................................................................... 78 6.3. Kiểu Logical (hay boolean) ........................................................................................... 79 6.4. Kiểu chuỗi (String) ........................................................................................................ 79 6.5. Kiểu null ........................................................................................................................ 80 6.6. Kiểu undefined (không xác định) .................................................................................. 80 7. Toán tử trong JavaScript ................................................................................................... 80 7.1. Toán tử gán ................................................................................................................... 80 7.2. Toán tử số học............................................................................................................... 81 7.3. Toán tử so sánh ............................................................................................................. 82 7.4. Toán tử logic ................................................................................................................. 83 7.5. Toán tử thao tác trên bit................................................................................................ 84 7.5.1. Các toán tử logic thao tác bit .............................................................................................84 7.5.2. Các toán tử dịch của thao tác bit.........................................................................................85 7.6. Toán tử điều kiện .......................................................................................................... 85 8. Các cấu trúc điều khiển ..................................................................................................... 86 8.1. Rẽ nhánh if .................................................................................................................... 86 8.2. Rẽ nhánh switch ............................................................................................................ 87 8.3. Cấu trúc lặp for............................................................................................................. 88 8.4. Cấu trúc lặp while......................................................................................................... 90 8.5. Các cấu trúc chuyển điều khiển trong vòng lặp ........................................................... 90 8.5.1. Cấu trúc label .....................................................................................................................90
8.5.2. Cú pháp break ....................................................................................................................91 8.5.3. Cấu trúc continue ...............................................................................................................91 8.6. Quản lý lỗi .................................................................................................................... 92 9. Hàm ...................................................................................................................................... 92 9.1. Khái niệm ...................................................................................................................... 92 9.2. Xây dựng hàm tự định nghĩa ......................................................................................... 93 9.3. Một số hàm thông dụng được hỗ trợ bởi JavaScript .................................................... 94 9.3.1. alert ....................................................................................................................................94 9.3.2. prompt ................................................................................................................................94 9.3.3. confirm ...............................................................................................................................95 9.3.4. eval .....................................................................................................................................95 9.3.5. isNaN .................................................................................................................................95 9.3.6. parseInt...............................................................................................................................96 9.3.7. parseFloat ...........................................................................................................................96 9.3.8. setTimeout và clearTimeout ..............................................................................................96 9.3.9. setInterval và clearInterval .................................................................................................96 10. Đối tượng trong JavaScript ............................................................................................. 97 10.1. Các đối tượng xây dựng sẵn của JavaScript .............................................................. 98 10.1.1. Đối tượng String ..............................................................................................................98 a) Thuộc tính......................................................................................................................................... 98 b) Phương thức ..................................................................................................................................... 98 10.1.2. Đối tượng mảng (Array) ................................................................................................101 a) Thuộc tính....................................................................................................................................... 101 b) Phương thức ................................................................................................................................... 101 10.1.3. Đối tượng Date...............................................................................................................103 10.1.4. Đối tượng Math ..............................................................................................................104 a) Thuộc tính....................................................................................................................................... 105 b) Phương thức ................................................................................................................................... 105 10.1.5. Đối tượng Number .........................................................................................................106 10.2. Đối tượng do người dùng tự định nghĩa ................................................................... 107 10.2.1. Xây dựng đối tượng .......................................................................................................107 10.2.2. Sử dụng đối tượng..........................................................................................................107 10.2.3. Phát triển kế thừa ...........................................................................................................108 10.2.4. Bổ sung thuộc tính hoặc phương thức cho đối tượng ....................................................108
10.3. Đối tượng trình duyệt................................................................................................ 109 10.3.1. window...........................................................................................................................109 a) Thuộc tính....................................................................................................................................... 109 b) Phương thức ................................................................................................................................... 109 10.3.2. location...........................................................................................................................110 a) Thuộc tính....................................................................................................................................... 110 b) Phương thức ................................................................................................................................... 110 10.3.3. history ............................................................................................................................111 10.3.4. document ........................................................................................................................111 a) Thuộc tính....................................................................................................................................... 111 b) Phương thức ................................................................................................................................... 111 c) Thay đổi nội dung của Element ...................................................................................................... 112 d) Thay đổi giá trị thuộc tính của Element ......................................................................................... 113 e) Thay đổi định dạng của Element .................................................................................................... 113 10.3.5. form................................................................................................................................114 a) Thuộc tính của form ....................................................................................................................... 114 b) Phương thức của form .................................................................................................................... 114 c) Các thuộc tính trên mảng element .................................................................................................. 114 11. Xử lý sự kiện ................................................................................................................... 115 11.1. Khái niệm .................................................................................................................. 115 11.2. Xử lý sự kiện cho các thẻ HTML ............................................................................... 115 11.3. Một số sự kiện phổ biến ............................................................................................ 116 11.3.1. Sự kiện trên chuột ..........................................................................................................116 11.3.2. Sự kiện trên bàn phím ....................................................................................................116 11.3.3. Sự kiện trên form ...........................................................................................................116 11.4. Đăng ký sự kiện ......................................................................................................... 117 12. Làm việc với cookie ........................................................................................................ 118 12.1. Khái niệm .................................................................................................................. 118 12.2. Thiết lập cookie ......................................................................................................... 118 12.3. Đọc cookie ................................................................................................................ 119 TÀI LIỆU THAM KHẢO ........................................................................................................ 120 PHỤ LỤC ................................................................................................................................... 121 1. Các thẻ HTML 4.01, XHTML 1.0 ................................................................................... 121 2. Các thẻ mới trong HTML5 .............................................................................................. 123
3. Thuộc tính CSS2 ............................................................................................................... 125 4. Thuộc tính mới trong CSS3 ............................................................................................. 127 BÀI TẬP THỰC HÀNH ........................................................................................................... 129 1. Phần HTML và CSS ......................................................................................................... 129 2. Phần JavaScript ................................................................................................................ 140
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB Chương này giới thiệu các khái niệm liên quan đến mạng Internet, dịch vụ World Wide Web, ngôn ngữ siêu văn bản và cách thức hoạt động của 1 trang web. 1. Internet 1.1. Khái niệm Internet là một liên mạng máy tính toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết hàng triệu máy tính trên thế giới thông qua cơ sở hạ tầng viễn thông. Internet là mạng của các mạng máy tính. Trong mạng này, các máy tính và thiết bị mạng giao tiếp với nhau bằng một ngôn ngữ thống nhất. Đó là bộ giao thức TCP/IP (Transmision Control Protocol – Internet Protocol). 1.2. Lịch sử Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Kỳ khởi xướng vào năm 1969. Mạng ARPANET khởi đầu là mạng kết nối giữa Bộ Quốc phòng Hoa Kỳ với các nhà thầu nghiên cứu khoa học và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hành các nghiên cứu khoa học được tài trợ. 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. Nếu một trong những liên kết mạng bị phá hủy do chiến tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên kết khác. Vào đầu năm 1980 giao thức TCP/IP được phát triển và nhanh chóng trở thành giao thức mạng chuẩn được dùng trên mạng ARPANET. Hệ điều hành được dùng trên mạng lúc này là BSD UNIX cũng được tích hợp để sử dụng giao thức TCP/IP. Hệ điều hành này nhanh chóng trở thành một công cụ hữu hiệu để phát triển mạng máy tính. Với các công nghệ mới này số lượng mạng máy tính đã phát triển nhanh chóng. ARPANET thành công vang dội và mọi trường đại học tại Hoa Kỳ đều muốn gia nhập vào mạng này. Với việc mở rộng đối tượng tham gia vào mạng, ARPANET bắt đầu trở nên khó quản lý hơn. Do đó nó đã được chia làm hai mạng: MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn, dành cho các mục đích phi quân sự. ARPANET nhanh chóng trở nên quá tải do sự phát triển của số lượng các máy tính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi. Quỹ Khoa học Quốc gia Hoa Kỳ (National Science Foundation - NSF) đã lập nên mạng NSFNET vào năm 1986, một mạng riêng và nhanh hơn nhiều của mình. NSF đã thiết lập một chuỗi các mạng khu vực nhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nối các mạng khu vực này với NSFNET. NSFNET đã dần thay thế cho ARPANET và sau này trở thành mạng Internet. Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độc lập với nhau kết nối vào nó, các mạng này có thể truyền thông với nhau thông qua phương thức truyền gói dữ liệu (packet switching) và qua kiến trúc mạng mở (open-architecture networking). Kiến trúc mạng mở nghĩa là các mạng con có thể có giao diện, cấu trúc của riêng nó. Điều này giải thích tại sao ngày nay chúng ta có thể kết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì. Trang 1
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà phát triển nhận thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọi đối tượng người dùng. Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thống menu đơn giản để truy cập đến các tập tin. Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mới trong việc sử dụng Internet. Tim Berners-Lee là người đã phát triển các giao thức nền tảng cho World Wide Web (WWW) vào năm 1992. Ông cũng chính là người đã tạo ra ngôn ngữ đánh dấu siêu văn bản (HTML: Hypertext Markup Language) – ngôn ngữ để viết nên các trang Web. Từ đây, với dịch vụ World Wide Web, Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người dùng máy tính. Về mặt vật lý, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễn thông hiện có. Về mặt kỹ thuật, Internet sử dụng tập giao thức nền tảng gọi là TCP/IP (Transmission Control Protocol / Internet Protocol). Với TCP trước đây, khi định nghĩa về Internet, IP không phải là một bộ phận trong thiết kế. Trong quá trình phát triển, Danny Cohen ở Đại học Nam California (University of Southern California-USC) cho rằng các chức năng hướng kết nối của TCP là không cần thiết đối với một số kiểu truyền dữ liệu và chúng tạo ra phí tổn phát sinh. Ông đề nghị tách TCP ra để thỏa mãn yêu cầu "đúng giờ hơn là chính xác". Điều cần thiết là tìm cách lấy dữ liệu nhanh chóng để chuyển sang hệ thống khác. Như vậy, TCP trở thành TCP và IP. Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trên thế giới. Internet, cùng với những mặt tốt hoặc xấu của nó mà người ta đang sử dụng hoặc phải đối mặt, đã trở thành một phần quan trọng của đời sống con người. 1.3. Địa chỉ IP và tên miền 1.3.1. Địa chỉ IP Ngày nay, mạng Internet được phát triển rộng khắp trên toàn thế giới. Để có thể khai thác và sử dụng các dịch vụ và ứng dụng trên mạng Internet chúng ta cần phải xác định được vị trí của máy tính cung cấp dịch vụ và ứng dụng. Vị trí của các máy tính trên mạng được xác định bởi địa chỉ IP. Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin trên Internet. Nói một cách khác địa chỉ IP dùng để xác định một máy tính trong mạng Internet dựa trên giao thức TCP/IP. Địa chỉ IP đang được sử dụng hiện tại là thế hệ địa chỉ IPv4 có 32 bit chia thành 4 Octet, mỗi Octet có 8 bit, tương đương với 1 byte được đếm từ trái qua phải từ bit 1 đến bit 32, các Octet tách biệt nhau bằng dấu chấm "." và biểu hiện ở dạng thập phân đầy đủ là 12 chữ số. Ví dụ: địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu thành 140.186.81.1 Hiện nay một số quốc gia đã đưa vào sử dụng địa chỉ IPv6 nhằm mở rộng không gian địa chỉ và sử dụng những ứng dụng và tính năng mới của IPv6, địa chỉ IPv6 gồm 128 bit dài gấp 4 lần so với độ dài của địa chỉ IPv4. Nói cách khác chính xác hơn là địa IPv4 có khả nǎng cung cấp 232 = 4,294,967,296 địa chỉ, còn địa chỉ IPv6 có khả nǎng cung cấp tới 2128 địa chỉ. Trang 2
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 1.3.2. Tên miền (Domain name) Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việc truy cập đến các tài nguyên trên mạng. Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System – DNS) để khắc phục trở ngại này. Hệ thống DNS được sinh ra để gán cho mỗi địa chỉ IP dạng số một tên dạng chữ tương ứng, dễ nhớ. Các tên dạng chữ này được gọi là tên miền. Các tên miền này thường có ý nghĩa liên quan đến các dịch vụ được cung cấp. Hệ thống tên miền trên mạng Internet có nhiệm vụ chuyển đổi tên miền sang địa chỉ IP và ngược lại từ địa chỉ IP sang tên miền. Ví dụ: Địa chỉ IP của tên miền www.google.com là 74.125.31.147 Hệ thống tên miền được phân bố theo cấu trúc hình cây, tên miền cấp cao nhất là tên miền gốc (ROOT) được thể hiện bằng dấu ".". Root gov mil com net edu Top level domain cnn Second level domain news products contact Sub domain Một số tên miền cấp 1 dùng chung phổ biến: o COM (commercial): mọi đối tượng, cá nhân, doanh nghiệp. o EDU (education): các tổ chức giáo dục. o GOV (government): các tổ chức chính phủ. o ORG (organization): các tổ chức hoạt động trong lĩnh vực chính trị, văn hoá, xã hội. o NET (network): các tổ chức hoạt động trong lĩnh vực thiết lập và cung cấp các dịch vụ trên mạng. o INT (International): các tổ chức quốc tế. o MIL (military): các tổ chức quân sự. o Tên miền quốc gia (us, vn, uk, …). Hệ thống tên miền cấp 1 này không phải là bất biến. Hiện nay ngày càng có thêm nhiều tên miền cấp 1 được thông qua và cho phép sử dụng. Trang 3
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 1.4. Nhà cung cấp dịch vụ Internet Để có thể khai thác và sử dụng các dịch vụ Internet, cần có các nhà cung cấp dịch vụ Internet. Có thể liệt kê như sau: 1.4.1. IAP (Internet Access Provider) IAP là nhà cung cấp dịch vụ đường truyền để kết nối với Internet (còn gọi là IXP – Internet Exchange Provider). Nếu hiểu Internet như một siêu xa lộ thông tin thì IAP là nhà cung cấp phương tiện để đưa người dùng vào xa lộ. Nói cách khác IAP là kết nối người dùng trực tiếp với Internet. IAP có thể thực hiện cả chức năng của ISP nhưng ngược lại thì không. Một IAP thường phục vụ cho nhiều ISP khác nhau. 1.4.2. ISP (Internet Service Provider) ISP là nhà cung cấp dịch vụ Internet cấp quyền truy cập Internet qua mạng viễn thông và các dịch vụ như: Email, Web, FTP, Telnet, Chat. Để có thể truy nhập và sử dụng các dịch vụ của Internet, người sử dụng phải đăng ký với nhà cung cấp dịch vụ này. ISP được cấp cổng truy cập vào Internet bởi IAP. 1.4.3. ICP (Internet Content Provider) ICP là nhà cung cấp dịch vụ nội dung thông tin Internet, cung cấp các thông tin về: kinh tế, giáo dục, thể thao, chính trị, quân sự,… (thường xuyên cập nhật thông tin mới theo định kỳ) đưa lên mạng. Trang 4
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 2. World Wide Web 2.1. Khái niệm Word Wide Web (được gọi tắt là Web) - là mạng lưới nguồn thông tin cho phép mọi người khai thác thông tin qua một số công cụ hoặc là chương trình hoạt động dưới các giao thức mạng. World Wide Web là một trong số các dịch vụ của Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện và dễ dàng. 2.2. Các thành phần của web 2.2.1. Siêu văn bản (HyperText) Siêu văn bản là một loại văn bản thông thường nhưng lại có tham chiếu (hyperlink – liên kết) tới các văn bản khác. Người sử dụng có thể truy cập từ tài liệu này đến tài liệu khác thông qua các tham chiếu. Trang web (webpage) là một siêu văn bản được hiển thị trên màn hình máy tính hoặc thiết bị điện tử (ví dụ như điện thoại di đông) bởi phần mềm ứng dụng trình duyệt (web browser). Webpage được truy cập trên mạng Internet thông qua địa chỉ gọi là Uniform Resource Locator (URL). Website là tập hợp các tài liệu web (webpage, file định dạng CSS, các script, hình ảnh, âm thanh…) có liên quan với nhau, được đặt tại ít nhất một máy phục vụ web (web server) 2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) Là ngôn ngữ đánh dấu cơ bản để tạo ra các trang web. Ngôn ngữ HTML định nghĩa các phần tử đánh dấu để mô tả cấu trúc và nội dung của trang web trên trình duyệt cũng như cách thức kết nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, …). Văn bản HTML là các tập tin có phần mở rộng .html hay .htm. Ta có thể tạo các file HTML bằng bất kỳ bộ xử lý văn bản nào. Hiện nay, phiên bản HTML 4.01 là phiên bản chuẩn mới nhất được công nhận. Ngoài ra HTML5 là phiên bản đang được phát triển với nhiều tính năng vượt trội so với các phiên bản trước. Bên cạnh HTML, XHTML (Extensible HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản mở rộng) là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. 2.2.3. Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP) Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên Internet. Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi và nhận các trang HTML. Giao thức này cung cấp cách thức để xử lý các yêu cầu và kết quả phản hồi giữa máy khách (client) và máy chủ (server). Giữa máy khách và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway. Hypertext Transfer Protocol Secure (HTTPS) là một sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL (Secure Socket Layer) hay TLS (Transport Layer Security). Thông tin truyền tải giữa máy khách và máy chủ được mã hóa.cho phép trao đổi thông tin một cách bảo mật trên Internet. Trang 5
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 2.2.4. Trình duyệt (web browser) Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng. Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web. Thông qua trình duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web. Máy chủ dịch vụ web sẽ gửi kết quả trả về trình duyệt để hiển thị cho người dùng. Một số trình duyệt thông dụng hiện nay: Internet Explorer (IE), FireFox, Google Chrome, Safari, Opera Internet Explorer FireFox Google Chrome Safari 2.2.5. URL (Uniform Resource Locator) URL là địa chỉ tham chiếu đến 1 tài nguyên trên Internet. Tài nguyên có thể là 1 trang web, 1 hình ảnh, tập tin multimedia,… URL có cấu trúc phân cấp giống như folder và file trên máy tính. protocol://host_name[:port_num][/path][/file_name][?query]  protocol: một trong các giao thức trên Internet, ví dụ: http, ftp, …  host_name: tên máy chủ  port_num: cổng giao tiếp. Ví dụ: Dịch vụ World Wide Web với giao thức http sử dụng cổng 80, nếu là giao thức https thì sử dụng cổng 443.  path và file_name: đường dẫn đến tập tin tài nguyên.  query: giới hạn tài nguyên truy xuất từ tập tin hoặc thao tác trên kết quả (ví dụ như sắp xếp) Trang 6
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Ví dụ: URL dạng đầy đủ http://www.example.com/factory/item.php?product=1234&sort=price&print=1 URL dạng không đầy đủ www.google.com.vn 2.3. Mô hình tương tác Client-Server trong một ứng dụng Web 2.3.1. Khái niệm ứng dụng web Ứng dụng Web là loại ứng dụng Internet cho phép cho phép các máy khách (client) sử dụng trình duyệt Web để truy cập và xem thông tin hoặc thực hiện tác vụ cụ thể nào đó được cung cấp bởi máy phục vụ (web server). Một điểm cần lưu ý là tại một thời điểm nào đó có thể có nhiều người sử dụng cùng đồng thời truy cập một trang web hoặc cùng thực hiện một tác vụ, như vậy có nghĩa là mọi ứng dụng Web đều có khả năng quản lý và phục vụ đa phiên. 2.3.2. Mô hình client-server Trong mô hình tương tác này, một ứng dụng Web có thể được xem gồm 2 phần:  Client Bên phía client, người dùng (user) sử dụng trình duyệt web để gửi yêu cầu (request) đến Server bằng cách gõ địa chỉ của trang web cần đến vào thanh địa chỉ của trình duyệt. Kết quả nhận được sau đó sẽ được hiển thị trên cửa sổ của trình duyệt  Server Về phía Server, máy phục vụ web khởi chạy một ứng dụng web tương ứng để xử lý yêu cầu của người sử dụng, kết quả là ứng dụng web sinh ra một trang HTML trả lại cho trình duyệt, sau Trang 7
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG đó trình duyệt sẽ hiển thị kết quả cho người dùng. Trong mô hình tương tác này, cả hai (Client & Server) cùng sử dụng chung một giao thức truyền thông siêu văn bản HTTP. Một máy phục vụ thường được cài các phần mềm chuyên dụng và có thể dùng cho một hay nhiều mục đích o Web server o File server o Application server o Database server o Mail server …  Chú ý: Phân biệt trang web tĩnh và trang web động  Trang web tĩnh + Trang web tĩnh tương tác yếu với người dùng, nội dung của trang web không bị thay đổi theo thời gian cho đến khi người lập trình thay đổi code của trang web. + Trang web tĩnh thường được viết bằng thuần HTML hoặc XHTML  Trang web động + Trang web động tương tác mạnh với người dùng, nội dung trang web bị thay đổi tùy theo ngữ cảnh người dùng yêu cầu. + Trang web động được xây dựng bằng HTML (XHTML) kết hợp với các ngôn ngữ kịch bản dành cho server (ASP, PHP, Java,…) + Trang web động thường có yêu cầu truy xuất dữ liệu từ database. 2.4. Một số tổ chức quản lý chuẩn và công nghệ web Để làm cho Internet trở thành nơi tốt hơn cho cả những người phát triển web và người dùng cuối cùng, cả trình duyệt và những nhà thiết kế web cần thiết phải tuân thủ theo các chuẩn web. Khi những nhà phát triển tuân theo các chuẩn web, việc phát triển web sẽ được đơn giản hóa. Khi đó, người phát triển có thể dễ dàng hiểu những cách viết mã khác. Sử dụng các chuẩn web giúp đảm bảo rằng trang web hiển thị chính xác trên các trình duyệt khác nhau, mà không phải thường xuyên tốn thời gian viết lại. Những trang web tuân theo chuẩn sẽ dễ dàng được các cỗ máy tìm kiếm truy cập và lập chỉ mục hơn, dễ dàng chuyển đổi định dạng hơn, và dễ dàng tiếp cận các mã chương trình (như JavaSrcipt) Trang 8
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Một số tổ chức quản lý các chuẩn web: 2.4.1. W3C - The World Wide Web Consortium W3C là một tổ chức quốc tế phi chính phủ thiết lập các chuẩn cho World Wide Web. Được thành lập năm 1994 bởi nhà sáng lập và lãnh đạo hiện nay Tim Berners-Lee, người sáng tạo ra HTTP và HTML. Mỗi chuẩn của W3C đi qua bốn giai đoạn: Phác thảo (Working Draft), Chỉnh sửa cuối cùng (Last Call), Chuẩn đủ tư cách ứng cử (Candidate Recommendation), Trình chuẩn (Proposed Recommendation) trước khi được gọi là Chuẩn chính thức (Recommendation). Các nhà công nghiệp phần mềm được tự quyết định có theo tiêu chuẩn hay không. Thông thường, nhiều trong số họ theo các tiêu chuẩn này. Việc tuân thủ chuẩn W3C sẽ giúp:  Trang web thân thiện hơn với các Search Engine  Trang web được hỗ trợ tốt trên nhiều trình duyệt, không mất nhiều thời gian để chỉnh sửa và tối ưu hóa cho từng trình duyệt.  Trang web được tải nhanh hơn.  Các thiết bị hiển thị website di động như điện thoại IPad đều dựa trên chuẩn W3C. Do đó, trang web sẽ được hiển thị tốt hơn trên các thiết bị này 2.4.2. ECMA - European Computer Manufacturers Association ECMA thành lập năm 1961, nhằm mục đích đáp ứng nhu cầu chuẩn hóa ngôn ngữ máy tính và các mã đầu vào/đầu ra. ECMA không phải là một tổ chức chuẩn hóa chính thức, mà là một hiệp hội các công ty phối hợp với các tổ chức chính thức khác như International Organization for Standardization (ISO) và the European Telecommunications Standards Institute (ETSI). Với các nhà phát triển web, chuẩn quan trong nhất là ECMAScript, một dạng chuẩn hóa của JavaScript. 2.4.3. OASIS – Organization for the Advancement of Structured Information Standards OASIS hướng tới sự an toàn các ứng dụng web bằng việc đưa ra các chuẩn về xác thực, trao quyền và an toàn dịch vụ web như: Security Assertion Markup Language (SAML), eXtensible Access Control Markup Language (XACML), Service Provisioning Markup Language (SPML), Web Services Security,… Trang 9