intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Giáo trình Thiết kế và lập trình web - ThS. Nguyễn Duy Linh

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

Thêm vào BST
Báo xấu
19
lượt xem 10
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình Thiết kế và lập trình web cung cấp cho người đọc những kiến thức như: Những khái niệm căn bản về hệ thống mạng internet; ngôn ngữ đánh dấu siêu văn bản HTML hypertext markup language); thiết kế giao diện với HTML và CSS. 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: Giáo trình Thiết kế và lập trình web - ThS. Nguyễn Duy Linh

  1. TRƯỜNG ĐẠI HỌC QUẢNG BÌNH KHOA KỸ THUẬT - CÔNG NGHỆ THÔNG TIN GIÁO TRÌNH (Lưu hành nội bộ) THIẾT KẾ VÀ LẬP TRÌNH WEB (Dành cho sinh viên hệ ĐH CNTT) Tác giả biên soạn: ThS. Nguyễn Duy Linh Năm 2020
  2. Thiết kế và lập trình Web MỤC LỤC CHƯƠNG I: NHỮNG KHÁI NIỆM CĂN BẢN VỀ HỆ THỐNG MẠNG INTERNET . 1 1. Giới thiệu về Internet và dịch vụ World Wide Web .............................................................. 3 2. Những khái niệm cơ bản về World Wide Web, mô hình Client – Server ............................. 5 3. Mô hình Client – Server ........................................................................................................ 9 4. Mô hình Web Client – Server .............................................................................................. 10 5. Giao thức HTTP (HyperText Transfer Protocol) ................................................................ 11 6. Phân loại Web ...................................................................................................................... 11 CÂU HỎI VÀ BÀI TẬP CHƯƠNG I ..................................................................................... 12 CHƯƠNG II: NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML HYPERTEXT MARKUP LANGUAGE) ...................................................................................................... 13 1. Soạn thảo siêu văn bản ........................................................................................................ 13 2. Trình bày trang trong HTML............................................................................................... 14 Các thẻ của khối văn bản: ........................................................................................................ 15 3. Trình bày kiểu chữ ............................................................................................................... 16 4. Danh sách và bảng trong HTML ......................................................................................... 16 5. Đưa hình ảnh vào tài liệu ..................................................................................................... 18 6. Các mối liên kết siêu văn bản .............................................................................................. 19 7. Khái niệm chung về FORM................................................................................................. 21 8. Khung - FRAMES ............................................................................................................... 22 9. Bộ thẻ tương tác với ngôn ngữ JAVA: ................................................................................ 24 CÂU HỎI VÀ BÀI TẬP CHƯƠNG II ................................................................................... 25 CHƯƠNG III: THIẾT KẾ GIAO DIỆN VỚI HTML VÀ CSS ........................................ 27 1. Định dạng theo Cascade Style Sheet (CSS) ........................................................................ 27 2. Sử dụng HTML và CSS tạo giao diện ................................................................................. 27 CHƯƠNG IV: NGÔN NGỮ LẬP TRÌNH PHP ................................................................. 37 1. PHP là gì? ............................................................................................................................ 37 2. FILE PHP ............................................................................................................................ 37 3. Tại sao phải dùng PHP?....................................................................................................... 37 4. Cú pháp căn bản của PHP.................................................................................................... 38 5. Khai báo biến trong PHP ..................................................................................................... 39 6. Các phép toán trong PHP..................................................................................................... 39 7. Các câu lệnh rẽ nhánh .......................................................................................................... 40 8. Các câu lênh lặp ................................................................................................................... 44 9. Kiểu dữ liệu trong PHP ....................................................................................................... 46 10. FORM ................................................................................................................................ 50 11. Hàm trong PHP .................................................................................................................. 51 12. Khái niệm cơ bản về Cookie và session trong PHP .......................................................... 56 CÂU HỎI VÀ BÀI TẬP CHƯƠNG IV .................................................................................. 61 CHƯƠNG V: PHP VÀ DATABASE ................................................................................... 62 1. Hệ quản trị cơ sở dữ liệu Mysql .......................................................................................... 62 2. Khai báo kết nối cơ sở dữ liệu ............................................................................................. 65 3. Thêm mẩu tin ....................................................................................................................... 66 4. Cập nhật mẩu tin .................................................................................................................. 69 5. Xoá mẩu tin ......................................................................................................................... 70 6. Truy vấn dữ liệu .................................................................................................................. 71 CÂU HỎI VÀ BÀI TẬP CHƯƠNG V ................................................................................... 72 TÀI LIỆU THAM KHẢO ..................................................................................................... 76 Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 2
  3. Thiết kế và lập trình Web CHƯƠNG I: NHỮNG KHÁI NIỆM CĂN BẢN VỀ HỆ THỐNG MẠNG INTERNET 1. Giới thiệu về Internet và dịch vụ World Wide Web 1.1. Nguồn gốc của Internet Tiền thân của Internet là mạng ARPANET, mạng máy tính được xây dựng bởi Bộ Quốc Phòng Mỹ để thử nghiệm độ tin cậy của mạng và vừa có mục đích kết nối các cơ sở ngiên cứu quân sự. ARPANET khởi đầu với quy mô nhỏ nhưng đã nhanh chống phát triển trên khắp nước Mỹ. Những năm đầu thập kỷ 80, các nhà khoa học tìm cách cải tiến mạng máy tính trên nhằm đưa vào mục đích dân sự và thương mại hoá, mạng này được gọi là Internet. Mục đích của Internet nhằm liên kết tất cả các máy tính thuộc nhiều chủng loại khác nhau, từ PC đến MACINTOSH, từ trạm làm việc với các máy mini đến siêu máy tính. Sự kết nối vật lý giữa các máy tính dựa trên cơ sở hạ tầng truyền thông sẵn có như đường dây điện thoại thông thường, cáp quang, vệ tinh viễn thông, cáp tivi. Để các máy tính trong mạng có thể giao tiếp và trao đổi thông tin với nhau thì phải đưa ra giao thức chung trên toàn mạng. Một giao thức chỉ đơn giản là tập các luật mà các máy tính sử dụng để trao đổi thông tin. Với sự phát triển mạng hiện nay thì có rất nhiều giao thức chuẩn trên mạng ra đời nhằm đáp ứng nhu cầu phát triển này. Các giao thức chuẩn được sử dụng rộng rãi nhất hiện nay như: TCP/IP, SNA của IBM, OSI, ISDN… Tuy nhiên giao thức được sử dụng rộng rãi nhất hiện nay trên mạng vẫn là giao thức TCP/IP (Transmission Control Protocol/ Internet Protocol), giao thức này cho phép dữ liệu được gửi dưới dạng các gói (Packet) thông tin nhỏ. Thường thì TCP/IP được dùng để chỉ một nhóm các giao thức có liên quan đến TCP và IP như UDP (User Datagram Protocol), FTP (File Transfer Protocol), TELNET (Terminal Emulation Protocol)… Internet hiện đang liên kết hàng ngàn mạng máy tính thuộc các công ty, cơ quan nhà nước, các trung tâm nghiên cứu khoa học, trường đại học không phân biệt khoảng cách địa lý trên toàn thế giới. Đó chính là kho chứa dữ liệu khổng lồ của nhận loại. Internet có khoảng 30 triệu người dùng và số lượng này tăng 10 – 15% mỗi tháng. Internet là mạng máy tính lớn nhất trên toàn thế giới hay chính xác hơn là mạng của các mạng. Do sự phát triển quá nhanh và quá rộng trên toàn thế giới, mạng Internet đã không có một người quản trị chung, tuy nhiên một số tài nguyên trên mạng Internet lại chỉ được phép là duy nhất, chẳng hạn như địa chỉ IP, số hiệu mạng, tên miền,… Vì thế tổ chức mạng Internet cần phải được phân cấp quản lý để tránh xung đột cả về kỹ thuật lẫn quyền lợi giữa các thành viên tham gia vào mạng. Một tổ chức cần thiết đã được ra đời để quản Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 3
  4. Thiết kế và lập trình Web lý và phân bố các tài nguyên chung , đó là InterNIC (International Network Information Commitee), hay hiệp hội thông tin mạng quốc tế, có trụ sở tại Mỹ. Hiệp hội này có quyền hạn phân chia tài nguyên cho các NIC khu vực. Chẳng hạn như APNIC (Asia Pacific Network Information Center) là trung tâm của khu vực Châu Á – Thái Bình Dương, ARIN (American Registry For Internet Number) là trung tâm của khu vực Châu Mỹ, biển Caribe và một phần Châu Phi và RIPENCC (Reseaxu IP Européens Network Coordination Center) là trung tâm của khu vực Châu Âu và xung quanh. Một quốc gia khi muốn sử dụng Internet, tuỳ theo khu vực đều phải thực hiện việc đăng ký với các tổ chức này. Một siêu mạng chẳng có ai quản lý cụ thể, nhưng lại được tổ chức hết sức chặt chẽ, bởi về mặt kỹ thuật , chỉ có một tài nguyên là duy nhất, nếu ai muốn sử dụng thì phải thực hiện việc đăng ký thông qua các NIC khu vực. 1.2. Dịch vụ World Wide Web Xuất phát từ ý tưởng tạo ra một loại siêu văn bản thông minh Hypertext, lần đầu tiên năm 1965 trong một bài viết Ted Nelson đã mạnh dạn đưa ra ý tưởng về một lại “siêu văn bản”. Tuy vậy phải đến năm 1980, ý tưởng đó mới thực sự được tin học hoá nhờ một kỹ sư trẻ tuổi người Anh là Tim Berner – Lee và khi đó Tim đã xây dựng một chương trình trên máy tính xách tay mô tả sự liên kết hai chiều bất kỳ của đồ thị. Ban đầu chỉ với mục tiêu giúp cho các đồng nghiệp của mình thuận lợi hơn trong công tác tra cứu tài liệu. Năm 1990 Tim cùng với Robert Calliau đưa ra một dự án xây dựng hệ thống thông tin toàn cầu dựa trên khái niệm liên kết siêu văn bản. Thuật ngữ World Wide Web (gọi tắt là Web) được dùng để mô tả dự án và công bố lần đầu tiên vào 8 – 1991. Thực chất Web là một khái niệm hơn là một hệ thống cụ thể vì nó không là một hệ thống có tên, một chương trình hay một thủ tục đặc biệt nào. Công nghệ Web dùng để xử lý các trang dữ liệu đa phương tiện và truy nhập trên mạng diện rộng như Intranet, Internet. Bản chất của Web là sự kết hợp giữa Internet, siêu văn bản và thông tin đa phương tiện. Mặc dù Web có thể tồn tại không cần Internet nhưng công nghệ Web có được sự thành công như ngày hôm nay chính là nhờ sự kết hợp hoàn hảo với hệ thống Internet. Tuy ra đời muộn hơn so với các dịch vụ khác của Internet nhưng Web lại có tốc độ phát triển như vũ bão và chính nhờ dịch vụ Web mà Internet trở nên hấp dẫn hơn, lôi cuốn hơn và thu hút sự quan tâm của nhiều người. Giao diện đồ hoạ của Web cho phép người sử dụng không cần hiểu biết sâu về sắc về tin học cũng có thể sử dụng thành thạo được. nhờ có liên kết mà họ có thể đi từ trang thông tin này đến trang thông tin khác mà không cần biết nó nằm ở đâu trên mạng. Sự ra đời của Web đã xoá nhoà đi khoảng cách về địa lý, ranh giới giữa các quốc gia, giúp con người có thể tiếp xúc với những thông tin mới Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 4
  5. Thiết kế và lập trình Web nhất trên toàn thế giới. Các khả năng chủ yếu của Internet hiện nay chủ yếu dựa vào World Wide Web. Mặt khác trình duyệt Web bây giờ không chỉ làm chức năng cho xem tư liệu HTML mà còn tích hợp các dịch vụ khác của Internet như E – mail, FTP,… Như vậy, người sử dụng chỉ cần thông qua giao diện Web có thể thao tác ứng dụng mọi dịch vụ của Internet. Những khả năng vượt trội của hệ thống World Wide Web  Cho phép hiển thị thông tin cần truy tìm theo giao diện đồ họa, hơn hẳn những dòng văn bản buồn tẻ trước đây.  Web cho phép ta có thể đi vào mội ngõ ngách trên Internet, những điểm chứa cơ sở dữ liệu gọi là Website.  Web giúp cho ngành dịch vụ, giải trí một phương tiện tuyệt vời, tạo điều kiện cho việc xuất bản tạp chí, sách báo một cách nhanh chống dễ dàng.  Web ngày nay hỗ trợ đắc lực cho các công ty trong việc kinh doanh như quảng cáo, tiếp thị, nghiên cứu thị trường, bán hàng… 2. Những khái niệm cơ bản về World Wide Web, mô hình Client – Server 2.1. Địa chỉ trên Web 2.1.1. Địa chỉ IP Để có thể truyền tin giữa các máy trên mạng, mỗi máy tính trên mạng TCP/IP cần phải có một địa chỉ xác định gọi là địa chỉ IP. Hiện tại chúng ta đang sử dụng địa chỉ IPv4 (IP Address Version 4). IPv4 có 32 bit địa chỉ với khả năng lý thuyết có thể cung cấp một không gian dịa chỉ là 2 32 = 4294967296 đại chỉ. Các địa chỉ IP được chia thành 2 phần, một phần để xác định mạng (Network ID) và một phần để xác định Host (Host ID). Các lớp mạng (Network Class) xác định số bit được dành cho mỗi phần mạng và phần host. Có 5 lớp mạng là A, B, C, D, E trong đó 3 lớp đầu được dùng cho mục đích thông thường, còn hai lơp D và E được dùng cho những mục đích đặc biệt và tương lai. Cấu trúc địa chỉ IPv4 có dạng: Network ID Host ID Cấu trúc địa chỉ IP Lớp mạng Số mạng Số host trong mạng A 126 16.777.214 B 16.382 65534 C 2.097.150 254 Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 5
  6. Thiết kế và lập trình Web D Không phân E Không phân Phân lớp địa chỉ IP Không phải tất cả các số hiệu mạng (Network ID) đều có thể dùng được. Một số địa chỉ được dùng cho mục đích riêng biệt. Ví dụ như địa chỉ 127.0.0.0 để dùng cho địa chỉ vòng phản hồi (loopback). Các lớp A, B, C có khuôn dạng địa chỉ như sau: Khuôn dạng địa chỉ IP lớp A, B, C - Lớp A có số mạng ít nhất, nhưng môic mạng lại có nhiều host thích hợp với các tổ chức lớn có nhiều máy tính. - Lớp B có số mạng và số host vừa phải. - Lớp C có nhiều mạng nhưng mỗi mạng lại có 254 host, thích hợp với tổ chức có ít máy tính. Để dễ cho người sử dụng người ta thường biểu diễn địa chỉ IP dưới dạng số nguyên chấm thập phân. Mỗi đại chỉ IP sẽ được biểu diễn 4 nhóm, mỗi nhóm 8 bit có giá trị từ 0 – 255 và được phân cách nhau bởi dâu chấm (.). Ví dụ một địa chỉ IP của một máy chủ là: 192.168.101.1 Trên mạng Internet việc quản lý và phân phối địa chỉ IP là do NIC (Network Information Center) đảm nhiệm. Vừa qua Việt Nam đã được trung tâm Internet tại Châu Á – Thái Bình Dương phân cho khoảng 70 lớp địa chỉ IP. 2.1.2. Dịch vụ tên miền (DNS – Domain Name Service) Địa chỉ IPv4 dù biểu diễn dưới dạng số nhị phân 32 bit hay dạng số nguyên cách nhau bởi dấu chấm đều rất khó nhớ với người sử dụng. Do đó, trên mạng Internet người ta đã xây dựng một dịch vụ đó là dịch vụ tên miền (DNS – Domain Name Service). DNS cho phép người sử dụng Internet có thể truy cập đến một máy tính bằng tên của nó thay vì bằng địa chỉ IP. Đây là một phương pháp quản lý các tên bằng cách giao trách nhiệm phân cấp cho các nhóm tên. Mỗi cấp trong hệ thống gọi là một miền (Domain), các miền được phân tách Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 6
  7. Thiết kế và lập trình Web bởi dấu chấm. Số lượng domain trong 1 tên có thể thay đổi nhưng thường có nhiều nhất là 5 domain. Domain cấp cao nhất là cấp quốc gia, mỗi quốc gia được gắn một tên miền riêng gồm hai chữ cái. trong từng quốc gia lại được chia thành các domain và tiếp tục đi xuống. Có thể mô tả theo hình dưới đây: Sơ đồ phân cấp của các Domain Các domain của một số quốc gia trên thế giới Domain Quốc gia tương ứng au Úc at Áo be Bỉ ca Canada fi Phần lan fr Pháp de CHLB Đức it Ý jp Nhật bản vn Việt Nam Domain của mộ số quốc gia Các Domain của các quốc gia Domain phạm vi sử dụng gov Các tổ chức chính phủ edu Các cơ sở giáo dục com Các tổ chức kinh doanh, thương mại mil Các tổ chức quân sự org Các tổ chức khác net Các tài nguyên mạng int Các tổ chức quốc tê Domain của một quốc gia nào đó Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 7
  8. Thiết kế và lập trình Web 2.1.3. Địa chỉ Website Địa chỉ của một website được biết đến nhờ các URL (Uniform Resource Location – Bộ định vị tài nguyên thống nhất). Một URL thường có cấu trúc như sau: protocol://host.domain/directory/filename  protocol: giao thức TCP/IP sử dụng để tìm tài nguyên HTTP (HyperText Transfer protocol). HTTP là giao thức chuẩn được dùng để giao tiếp giữa máy trạm và máy chủ.  host.domain: tên máy chủ nơi trang Web đó tồn tại.  directory: tên thưc mục ảo chứa trang Web. Thư mục ảo ở đây được định nghĩa sẵn trên máy chủ nó tham chiếu đến một thư mục vật lý nằm trên máy chủ.  Filename: tên của trang Web. Các trang web lưu trữ trên máy chủ là các file có phần đuôi mở rộng là HTM, HTML, ASP, PHP… Ví dụ một số địa chỉ Web thông dụng: http://home.vnn.vn http://vdc.com.vn http://media.vdc.com.vn http://www.vnn.vn http://tintuc.vnn.vn http://khoahoc.vnn.vn http://cntt.vnn.vn http://user.vnn.vn/cggi-bin/tttn.cgi http://tintuc.vnn.vn/forum http://dienhoa.vnn.vn http://health.vnn.vn Một số Website thông dụng của Việt Nam http://www.vov.org.vn Đài tiếng nói Việt Nam http://vtv.org.vn Đài truyền hình Việt Nam http://www.laodong.com.vn Báo lao động điện tử 2.2. Web Server Web Server là một phần mềm đóng vai trò phục vụ. Khi được khởi động, nó được nạp vào bộ nhớ và xử lý các yêu cầu từ máy con gửi đến. Quá trình này gọi là Listen và quá trình này cũng phải phân biệt là yêu cầu gửi đến từ cổng nào (chẳng hạn thường thì HTTP dùng cổng 80, FTP dùng cổng 21…). Các yêu cầu có thể được gửi đến từ Web Browser từ máy trạm của người dùng hoặc cũng có thể được gửi đến từ một Web Browser khác và ta gọi chung các đối tượng gửi yêu cầu đến là khách hàng (Client). Các yêu cầu đối với Web Server thường là về Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 8
  9. Thiết kế và lập trình Web một tư liệu hoặc thông tin nào đó. Sau khi nhận được yêu cầu nó phân tích xem thông tin hay tư liệu mà khách hàng cần là gì, trong trường hợp khách hàng chỉ yêu cầu lấy một trang Web tĩnh thì nó sẽ tìm lấy trang Web đó và gửi trả lại cho khách hàng theo một dạng giao thức nào đó (thường vẫn là giao thức HTTP). Trường hợp có yêu cầu trang Web động thì một số chương trình trên Web Server sẽ được kích hoạt mở và xử lý thông tin cần thiết sau đó sẽ trả lại cho khách hàng các thông tin đã xử lý dưới dạng trang Web tĩnh. 2.3. Web Client Người dùng cuối dùng một trình ứng dụng gọi là trình duyệt Web (Web Browser) để kết nối và gửi yêu cầu tới máy chủ Web Server. Sau khi gửi các yêu cầu thông tin từ máy trạm lên máy chủ, Web Browser sẽ đợi câu trả lời và các thông tin từ máy chủ trả về và hiển thị thông tin đó dưới dạng trang Web cho người sử dụng. Có nhiều loại Web Browser khác nhau:  Netscape Navigator  Internet Explorer  Lynx trong Unix  Mosaic Hầu hết các Web Browser đều hỗ trợ mặc định một số kiểu tệp đặc trưng cho internet như: HTM, HTML, ASP. CGI, GIF, BMP, IPG…Đối với một số trình duyệt (Web Browser) thế hệ mới còn cho phép mở rộng khả năng tương tác của các trang Web bằng cách hỗ trợ thêm Java, JavaScript và VBScript. 3. Mô hình Client – Server Thuật ngữ Server được dùng cho những chương trình thi hành như một dịch vụ trên toàn mạng. Các chương trình Server này chấp nhận tất cả các yêu cầu hợp lệ đến từ mọi nơi trên mạng, sau đó nó thực hiện nhiệm vụ của mình và trả kết quả cho máy Client yêu cầu. Một chương trình được coi là Client khi nó gửi các yêu cầu đến Server và chờ đợi câu trả lời từ Server. Các chương trình Server và Client nói chuyện với nhau bằng các thông điệp (messages) thông qua một cổng truyền thông liên tác IPC (InterProcess Communication). Để một Server và một Client nói chuyện được với nhau thì giữa chúng cần có một chuẩn để nói chuyện gọi là giao thức. Giao thức này có thể tuân theo các giao thức chuẩn thông dụng hoặc có thể do chúng ta quy định. Do đó nếu một chương trình Client nào đó muốn lấy thông tin từ Server thì chương trình đó cần tuân theo giao thức của Server đó đưa ra. Máy chứa chương trình Server được gọi là máy chủ hay máy Server còn máy chứa chương trình Client được gọi là máy trạm hay máy Client. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 9
  10. Thiết kế và lập trình Web Mô hình Client – Server tổng quát Đây là một mô hình tổng quát nhất, trên thực tế thì một Server có thể được nói tới nhiều Server khác nhằm làm việc hiệu quả và nhanh hơn. Khi nhận được một yêu cầu từ Client, Server này có thể gửi yêu cầu này tới một Server khác ví dụ: Database Server, vì bản thân nó không thể xử lý yêu cầu này được. thông thường chương trình Client và Server được thi hành trên hai máy khác nhau. Cho dù lúc nào Server cũng ở trạng thái sẵn sàng chờ nhận yêu cầu từ phía Client nhưng trên thực tế một quá trình liên tác qua lại giữa Client và Server lại bắt đầu từ phía Client. Mô hình Client – Server đưa lại rất nhiều lợi ích cho người dùng mà ở các mô hình cũ không làm được đặc biệt trong vấn đề truy cập từ xa nhưng nhược điểm chính của mô hình này là vấn đề an toàn bảo mật vì thông tin có thể bị lộ khi truyền đi trong mạng. 4. Mô hình Web Client – Server Mô hình Client – Server được ứng dụng trong Web được gọi là mô hình Web Client – Server. Giao thức chuẩn HTTP được dùng để giao tiếp giữa Web Client và Web Server. Web Client: Các trình duyệt có vai trò như Client khi cần xem một trang Web cụ thể nào đó thì trình duyệt Web sẽ gửi yêu cầu cho Web Server để lấy nội dung trang Web đó. Web Server: khi nhận được yêu cầu từ một Web Client, Web Server sẽ trả về nội dung file cho trình duyệt, nếu có lỗi Web Server sẽ báo lỗi cho trình duyệt. Hoạt động: Tất cả các gói tin nhận và trả lời giữa Web Server và Client đều tuân theo giao thức chuẩn HTTP. Mô hình hoạt động như sau: Khi người sử dụng yêu cầu một trang web bằng cách đánh vào địa chỉ của trang đó trên mạng thì trình duyệt sẽ gửi yêu cầu đó lên Web Server theo định dạng của giao thức chuẩn HTTP. Web Server nhận được yêu cầu nó sẽ tự xử lý thông tin hoặc gửi cho bộ phận khác có khả năng xử lý (Database Server, CGI…) rồi chờ lấy kết quả đẻ gửi về cho trình duyệt. Dữ liệu được gửi về cho trình duyệt cũng được định dạng theo HTTP. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 10
  11. Thiết kế và lập trình Web Trình duyệt nhận dữ liệu và hiển thị lên màn hình. Trong trang vừa nhận được người dùng có thể yêu cầu một trang khác bằng cách nhấn vào các Hyperlink và quá trình xử lý và tương tác diễn ra tương tự như khi người sử dụng đánh vào địa chỉ trang ban đầu. 5. Giao thức HTTP (HyperText Transfer Protocol) HTTP mà giao thức mà Client dùng để liên lạc với Server. Mọi giao thức truyền thông đều yêu cầu có một chương trình tương ứng trên Server để “nghe” các yêu cầu trên mạng do các Client truyền đến. Ví dụ FTP có một FTP Daemon nghe trên một số cổng khác nhau. Như vậy khi Web Server hoạt động sẽ có nhiều Daemon khác nhau cùng hoạt động và sẵn sàng tiếp nhận các yêu cầu đến từ trên mạng. Có một sự khác biệt khá quan trọng giữa HTTP và các giao thức khác đó là HTTP không duy trì các kết nối cố định. Sau khi Server hoàn thành việc phục vụ yêu cầu lấy thông tin của Client nó chấm dứt kết nối với Client. Khi Web Browser từ Client yêu cầu thông tin mới thì một kết nối mới sẽ được tiếp tục. 6. Phân loại Web Theo quan điểm của Martin Rennhackkawp (Tạp chí DBMS 5/97) cho rằng có thể phân loại thành 3 loại: Web tĩnh, Form Page và Web động. 6.1. Web tĩnh (Static Web) Các trang Web tĩnh đơn giản là các văn bản được xây dựng sẵn trên Server và hình dáng nguyên thủy của nó như thế nào khi được hiển thị ở Web Browser của Client nó thể hiện nguyên si như vậy. Các đối tượng nằm trong trang Web tĩnh là bất biến và nó là như nhau đối với mọi Web Browser, nội dung của nó chỉ có thể thay đổi bởi tác giả. Điều này có ưu và nhược điểm rõ ràng: Nhược điểm: do thông tin cố định cho nên không đáp ứng được những yêu cầu thông tin mang tính thời gian thực. Ưu điểm: thông tin bên trong trnag Web là cố định cho nên thời gian Download nhanh hơn. 6.2. Form page Về mặt bản chất thì Form page là một trường hợp đặc biệt của Web tĩnh nhưng nó cho phép nhận yêu cầu từ người sử dụng như khai báo một số thông tin cần thiết thông qua Forrm. Forrm là một tập hợp một số các Control cơ bản như Textbox, Radio button, Checkbox, Textarea, Combobox, Listbox… Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 11
  12. Thiết kế và lập trình Web 6.3. Web động (dynamic Web) Đặc điểm nổi bật của Web động là có khả năng tương tác với cơ sở dữ liệu đặt trên Server. Với những trang Web động người dùng có thể từ xa xem, cập nhật thông tin một cách trực tuyến. Hoạt động của Web này như sau: Đầu tiên người dùng gửi yêu cầu về dữ liệu thông qua Web Browser tới Web Server theo một giao thức nào đó thường là HTTP. Web Server nhận yêu cầu từ phía Client và tạo móc nối với cơ sở dữ liệu. Có rất nhiều kiểu móc nối cơ sở dữ liệu như: CGI, API, ASP,… Sau khi lấy được thông tin cần thiết từ cơ sở dữ liệu Web Server gửi cho Client những thông tin cần thiết và Web Browser có trách nhiệm hiển thị lên màn hình những thông tin này. CÂU HỎI VÀ BÀI TẬP CHƯƠNG I 1.1 Nêu lịch sử ra đời của Internet và hiểu biết của bạn về mạng Internet? 1.2 Nêu hiểu biết của bạn về dịch vụ World Wide Web? 1.3 Trình bày hiểu biết của bạn về địa chỉ IPv4: cấu trúc, các lớp mạng, cách đánh địa chỉ IP? 1.4 Thế nào là dịch vụ tên miền? 1.5 Nêu cấu trúc của địa chỉ Website? 1.6 Thế nào là Web Server, Web Client? 1.7 Trình bày mô hình Client – Server 1.8 Nêu nguyên tắc hoạt động của mô hình Web Client – Web Server? 1.9 Người ta có thể phân Web thành mấy loại. Nêu hiểu biết của bạn về các loại trên? Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 12
  13. Thiết kế và lập trình Web CHƯƠNG II: NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML HYPERTEXT MARKUP LANGUAGE) 1. Soạn thảo siêu văn bản 1.1. Trang mã nguồn HTML và trang Web Trang mã nguồn HTML là một tệp văn bản bình thường gồm các kí tự ASCII, có thể được tạo ra bằng bất cứ bộ soạn thảo văn bản nào. Theo qui ước, tất cả các tệp mã nguồn của siêu văn bản phải có đuôi là .html hoặc .htm. Khi dùng trình duyệt (brower) đọc nội dung trang mã nguồn và hiển trị nó lên màn hình máy tính thì ta thường gọi là trang Web. Vậy trang Web không tồn tại trên đĩa cứng của máy tính. Nó là cái thể hiện của trang mã nguồn qua xử lý của trình duyệt Hiện nay có nhiều công cụ soạn thảo siêu văn bản mạnh như MicroSoft Word 97, FrontPage 2000 , Visual InterDev 6.0 . . . với giao diện trực quan và tự động sinh mã HTML, cho phép soạn thảo siêu văn bản không khác gì so với soạn thảo thông thường. Tuy nhiên, việc tìm hiểu cú pháp của HTML, nắm vững ý nghĩa các thẻ khác nhau vẫn rất cần thiết để có thể tạo ra các trang Web sinh động, tương tác với các ứng dụng cơ sở dữ liệu sau này. 1.2. Các thẻ HTML là gì? Các thẻ (Tag) dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng để chèn một mối liên kết đến các trang khác, một đoạn chương trình khác. Mỗi thẻ gồm từ khoá (KEYWORD) bao bọc bởi 2 dấu “”. Hầu hết các lệnh được thể hiện bằng một cặp hai thẻ: thẻ mở () và thẻ đóng (). Đoạn văn chịu sự tác động của lệnh Nhiều thẻ có kèm các thuộc tính bắt buộc hay không bắt buộc, cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh. 1.3. Vài qui tắc chung a/ Nhiều dấu cách liền nhau cũng chỉ có tác dụng như một dấu. Phải sử dụng thẻ để thể hiện nhiều dấu dãn cách liền nhau. b/ Các từ khoá không phân biệt chữ hoa và chữ thường c/ Qui tắc viết các kí tự đặc biệt trong HTML là tên_qui_định của kí tự nằm giữa dấu & và dấu nháy kép “. Cách viết: & tên_qui_định “ d/ Có thể chèn các dòng chú thích vào trang mã nguồn bằng cách đặt giữa cặp dấu chú thích . Trình duyệt sẽ bỏ qua không xem xét đến phần mã nằm giữa cặp dấu đó. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 13
  14. Thiết kế và lập trình Web 1.4. Cấu trúc của một tài liệu HTML Mọi tài liệu HTML đều có khung cấu trúc như sau: . . . ..... Giữa cặp thẻ tiêu đề . . . là dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi trình duyệt đọc tài liệu. Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào đó. Toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của trang . . . . Các dòng văn bản, hình ảnh, âm thanh, video, các mối liên kết . . . tạo nên trang Web đều phải nằm ở đây. Ví dụ: trang web hiển thị lên màn hình trình duyệt dòng “Hello World !!!” Nội dung chương trình: Ví dụ về trang Hello World !!! Hello World !!! 2. Trình bày trang trong HTML 2.1. Các mức đầu đề trong HTML Mở đầu trang văn bản là đầu đề cần làm nổi bật. Các phần của văn bản như chương, tiết, mục . . . Các thẻ định nghĩa đầu đề là và (Tag Header). Trong bộ thẻ này có thêm tính chất "Align" dùng để căn lề các mức đầu đề, có các giá trị: _ "Left": dùng căn lề trái cho dòng tiêu đề. _ "Right": dùng căn lề phải cho dòng tiêu đề. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 14
  15. Thiết kế và lập trình Web _ "Center": dùng để đưa dòng tiêu đề vào giữa. _"Justify": dùng để sắp xếp đầu đề trên một dòng văn bản. Đầu đề này có sáu cỡ văn bản: Từ H1 đến H6, kiểu H1 là kiểu to nhất và giảm dần đến H6 là kiểu nhỏ nhất. Ví dụ: để có dòng tiêu đề với cỡ chữ là to nhất ta dùng cú pháp: Truong ĐH Quang Binh . 2.2. Các thẻ trình bày trang trong HTML  Thẻ và (paragraph): dùng để phân các khối văn bản bằng một dòng trống trước khi nó tiếp tục, kèm theo bộ thẻ này nó có tính chất "Align" với 4 giá trị _ "Left": Browser sẽ đặt đoạn văn bản tiếp theo về phía bên trái. _"Right": Browser sẽ đặt đoạn văn bản tiếp theo về phía bên phải. _"Center": Browser sẽ đặt đoạn văn bản tiếp theo vào giữa trang. _"Justify": Browser sẽ đặt đoạn văn bản tiếp theo trên một hàng. Thuộc tính ngầm định là "Left". Ví dụ: nội dung của đoạn văn Các thẻ của khối văn bản: Để thêm vào một vài kiểu định dạng theo ý tác giả, HTML đã đưa vào một số thẻ sau:  Thẻ và : hoặc viết ngắn gọn và , bộ thẻ này giống như bộ thẻ paragraph. Thay vì bộ thẻ paragraph thêm vào dòng trống trước đoạn văn bản, thì bộ thẻ Blockquote này nó thêm vào cả trước, sau, trái, phải của tài liệu và có thể hiển thị một dạng font khác.  Thẻ và : Đây là thẻ địa chỉ nó cho khối văn bản nằm trong thẻ này có một dạng định dạng khác. Thường bộ thẻ này nằm cuối của tài liệu, dùng để ghi lại địa chỉ của E_mail hoặc các biệt hiệu của tác giả.  Thẻ và : Thường được dùng trong các trường hợp giống như khối địa chỉ khi cần ghi trên những dòng khác nhau, thẻ này có thể được dùng để ngắt trong một dòng văn bản mà không cần chèn các dòng trống.  Thẻ và : Đây là thẻ định dạng cho đoạn văn bản. Trong thẻ này kèm theo thuộc tính "Width=n". Giá trị mặc định là 80 kí tự. Trong đoạn thẻ này có thể sử dụng các kí tự ASCII nghệ thuật. Như vậy ta có thể sử dụng để lập các bảng.  Thẻ : (hr_horizontal Rule) sẽ cho đường kẻ ngang chạy suốt cửa sổ màn hình. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 15
  16. Thiết kế và lập trình Web Thẻ này có tính chất là: - Width=n%: thay đổi độ dài đường kẻ , chiếm n% độ rộng màn hình - Size=n: thay đổi độ đậm hay mảnh của đường kẻ. N là số pixel - Align=”Left | Center | Right” căn trái, căn giữa hay căn phải đường kẻ Ví dụ: 3. Trình bày kiểu chữ 3.1. Các thẻ trình bày chữ  Thẻ và hoặc và : In chữ đậm  Thẻ và hoặc và : in chữ nghiêng  Thẻ và : in chữ gạch chân  Thẻ và : in chỉ số trên  Thẻ và : in chỉ số dưới 3.2. Các thuộc tính của Font chữ Cặp thẻ . . . cho phép thay đổi kiểu, màu và kích thước của chữ.  Thuộc tính SIZE: thay đổi kích thước của chữ, có thể chọn tập kích thước từ 1 đến 7 hoặc dùng SIZE=+/-n , trong đó +/-n chỉ ra mức thay đổi muốn. Ví dụ: . . .  Thuộc tính COLOR: thuộc tính này xác định màu chữ đè lên màu chữ được đặt bởi thẻ Ví dụ: . . .  Thuộc tính FACE: cho phép xác định kiểu chữ Ví dụ: . . .  Phối hợp các thuộc tính: Ví dụ: . . . 4. Danh sách và bảng trong HTML 4.1. Danh sách a. Thẻ và (Unordered List): là bộ thẻ danh sách không thứ tự, nó có dạng: . . .first list Item . . .second list Item Trong đó có các thuộc tính sau, xác định kiểu hạt đậu ở đầu dòng: “disc”, “square” hoặc “circle”. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 16
  17. Thiết kế và lập trình Web Ví dụ: Phần một Phần hai Phần ba b. Thẻ và (Ordered List): là thẻ chứa một danh sách thứ tự. Phần nhiều là giống như một danh sách không thứ tự, nhưng nó thay nút đầu bằng những con số được sử dụng một cách tự động và tăng dần với mỗi phần tử. Trong đó và là đầu danh sách. Ví dụ: Danh sách Phần một Phần hai Phần ba 4.2. Trình bày bảng trong HTML Có thể tạo ra bảng biểu sử dụng các thẻ sau đây: TAG/Attribute Description các ô trong bảng - CELLPADDING - Dùng để định khoảng cách trong ô với các đường bao - GBCOLOR - đặt màu nền trong bảng ... - dùng để đặt tựa đề cho bảng . . . Dùng để chèn một dòng trống vào bảng đồng thời dùng để báo cho browser biết dữ liệu là dữ liệu cuối để kết thúc dòng này. . . . - Dùng để đặt dữ liệu cho mỗi ô. ... - Dùng cho ô ở phần đầu của dòng hoặc cột, cho phép hiển thị dòng văn bản mới với font chữ đậm để làm Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 17
  18. Thiết kế và lập trình Web tiêu đề cho cột hoặc dòng đó. ALIGN="Left, Right, Center" - Dùng để căn lề theo chiều ngang của ô. Thuộc tính này dùng kèm bên các thẻ , , Valign="Top, Midle, Bottom, - Dùng để căn lề chữ trong ô theo chiều đứng. Thuộc Base, Line" tính này dùng kèm bên các thẻ , , WIDTH=n% - Dùng để đặt độ rộng của ô, bảng. Thuộc tính này dùng kèm các thẻ , COLSPAN=n - Dùng để hợp nhất số cột lại thành một, thuộc tính này dùng cho các thẻ: , . ROWSPAN=n - Dùng để hợp nhất số dòng lại thành một. Thuộc tính này dùng cho các thẻ: , . Ví dụ: để có một bảng sau đây trên trình duyệt Danh sách cán bộ TT Họ và tên Ngày sinh 1 Trần Văn Ba 20/10/1981 2 Trần Văn Nam 10/10/1982 Ta có thể viết đoạn mã như sau: Danh sách cán bộ TTHọ và tênngày sinh 1Trần Văn Ba20/10/1981 2Trần Văn Nam10/10/1982 5. Đưa hình ảnh vào tài liệu Cú pháp: Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 18
  19. Thiết kế và lập trình Web Các thuộc tính được mô tả theo bảng sau: Thuộc tính Mô tả Chú thích SRC=”URL” Địa chỉ nơi có tệp ảnh Các tệp ảnh dạng .BMP, GIF, JPG, .. ALT=”đoạn chữ Đoạn chữ hiển thị thay Nên có vì không phải lúc nào cũng hiển thay thế” thế cho ảnh thị được ảnh WIDTH=n Đặt chiều rộng, chiều Đảm bảo cho text nạp và hiển thị trước HEIGHT=n cao của khung ảnh ALIGN=”Top | Vị trí đặt ảnh Canh lề ảnh Middle | Left | Right” VSPACE=n Viền trống xung quanh Dùng kèm với align để tạo viền trống HSPACE=n khung ảnh xung quanh ảnh BORDER=n Độ đậm hay thanh mảnh Có thể đặt BORDER=0 nêu muốn loại của khung ảnh khi ảnh bỏ khung viền cũng là đầu mối liên kết Việc chèn ảnh hoạt hình vào trang Web không có gì khác so với chèn ảnh bình thường. Tạo ảnh hoạt hình là một trong những cách tốt nhất thu hút sự chú ý của người đọc. Việc tạo ảnh hoạt hình cũng khá đơn giản. Nguyên lý chung là cho trình diễn một loại ảnh tĩnh gần tương tự nhau, mỗi ảnh sẽ là một trạng thái trong hoạt cảnh muốn trình diễn. Có nhiều công cụ làm sẵn cho phép tạo ảnh hoạt hình. Một trong số các công cụ đó là Ulead GIF Animator. Ví dụ: để đưa một ảnh lưu trên đĩa trong thư mục C:\HOMEPAGE với tên file “anh1.gif” ta có thể viết: 6. Các mối liên kết siêu văn bản 6.1. Có hai loại liên kết: a. Liên kết ngoài - External Links Để liên kết đến một tài liệu khác , ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 19
  20. Thiết kế và lập trình Web Nên cố gắng chọn các từ làm đầu mối sao cho gợi tả và tự nhiên như một thành phần hữu cơ của câu văn. Tránh lặp đi lặp lại “click here” khi tạo đầu mối liên kết. Cú pháp để chọn ra một mối liên kết tới tài liệu khác – liên kết ngoài - là như sau: nhóm từ làm đầu mối  Địa chỉ tuyệt đối Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích. Ví dụ: hotmail Yahoo  Địa chỉ tương đối Nếu liên kết đến một tệp ở ngay trên máy chủ thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường dẫn đến thư mục nơi chứa tệp đích. . . . Ví dụ: Vi du 1 b. Liên kết nội tại - Internal Link Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng. Để làm điều này, cần đánh dấu điểm đích (book mark) của liên kết bằng thẻ neo . Trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng . Ví dụ: trong liên kết nội tại dưới đây đã tạo một book mark ở đầu trang với tên là TOP. Thẻ neo liên kết ở dòng dưới có dạng Về đầu trang 6.2. Chèn tệp âm thanh vào tài liệu Để chèn một đoạn âm thanh vào tài liệu HTML ta cũng theo đúng qui tắc tạo mối liên kết thông thường. Trong thẻ neo, tại địa chỉ URL bây giờ là địa chỉ của tệp âm thanh. Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình 20
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
3=>0