Giáo trình thiết kế và lập trình web dùng cho sinh viên hệ đh

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… Inter

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 2015

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

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 Intern et

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

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 Wid e 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

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:

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

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

Ý Nhật bản 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

edu com mil org net int

Các tổ chức chính phủ Các cơ sở giáo dục Các tổ chức kinh doanh, thương mại Các tổ chức quân sự

Các tổ chức khác Các tài nguyên mạng Các tổ chức quốc tê

Domain của một quốc gia nào đó

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

Một số Website thông dụng của Việt Nam

http://www.laodong.com.vn Báo lao động điện tử

2.2 Web S erver

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ề

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 Cli ent

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:

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

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

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 (S tati c 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 p age

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…

6.3 Web đ ộng (dynami c 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?

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

<KEYWORD> Đoạn văn chịu sự tác động của lệnh </KEYWORD>

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 <! - và -> Trình duyệt sẽ bỏ qua không xem xét đến phần mã nằm giữa cặp dấu

đó

<! - - dòng chú thích - >

1.4 Cấu trú c của một tài li ệu HT ML

Mọi tài liệu HTML đều có khung cấu trúc như sau:

Giữa cặp thẻ tiêu đề <TITLE> </TITLE> 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 <BODY>

</BODY> 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:

Các thẻ định nghĩa đầu đề là <Hn> và </Hn> (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 đề

_ "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: <H1 align=”center”>Truong ĐH Quang Binh </H1>

2.2 Các thẻ trình bày trang trong HTML

 Thẻ <P> và </P> (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

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ẻ <Blockquote> và </Blockquote>: hoặc viết ngắn gọn <BQ> và </BQ>, 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ẻ <ADDRESS> và </ADDRESS>: Đâ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ẻ <BR> và </BR>: 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ẻ <PRE> và </PRE>: Đâ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 <PRE> để lập các bảng

 Thẻ <hr> : (hr_horizontal Rule) sẽ cho đường kẻ ngang chạy suốt cửa sổ màn hình

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ụ: <HR Width=80% align=”left” size=2>

3 Trình bày kiểu chữ

3.1 Các thẻ trình bày chữ

 Thẻ <Strong> và </Strong> hoặc <B> và </B>: In chữ đậm

 Thẻ <EM> và </EM> hoặc <I> và </I>: in chữ nghiêng

 Thẻ <U> và </U>: in chữ gạch chân

 Thẻ <Sup> và </Sup>: in chỉ số trên

 Thẻ <Sub> và </Sub>: in chỉ số dưới

3.2 Các thuộc tính của Font chữ

Cặp thẻ <FONT> </FONT> 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ụ: <FONT size=+1> </FONT>

 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ẻ

<BODY>

Ví dụ: <FONT Color=”#rrggbb”> </FONT>

 Thuộc tính FACE: cho phép xác định kiểu chữ

Ví dụ: <FONT face=”.VnTime”> </FONT>

b Thẻ <OL> và </OL> (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 đó <LH> và </LH> là đầu danh sách

- BORDER - đặt khung nổi bao quanh các ô

- CELLSPACING - dùng để đặt khoảng cách giữa 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

<CAPTION> </CAPTION> - dùng để đặt tựa đề cho bảng

<TR> </TR> 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

<TD> </TD> - Dùng để đặt dữ liệu cho mỗi ô

<TH> </TH> - 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

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ẻ <TR>, <TH>, <TD> Valign="Top, Midle, Bottom,

<IMG SRC=”URL” ALT=”alternative text” Width=n HEIGHT=n

ALIGN=”Top | Middle | Left | Right” HSPACE=n VSPACE=n BORDER=n>

Các thuộc tính được mô tả theo bảng sau:

Đảm bảo cho text nạp và hiển thị trước

của khung ảnh khi ảnh cũng là đầu mối liên kết

Có thể đặt BORDER=0 nêu muốn loại

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:

<IMG SRC=”C\HOMEPAGE\anh1.gif” ALT=”ảnh trường ĐH Quảng Bình” Width=200 HEIGHT=200

ALIGN=”Middle” HSPACE=4 VSPACE=4 BORDER=0>

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ị

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:

<A HREF=”URL”>nhóm từ làm đầu mối</A>

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ụ:

<A HREF=”http://www.hotmail.com”>hotmail</A>

<A HREF=”http://www.yahoo.com”>Yahoo</A>

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

<A HREF=”path & filename”> </A>

Ví dụ:

<A HREF=”example1.htm”>Vi du 1 </A>

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 <A Name=”tên điểm đích”>

Trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng <tên_điểm_đích>

<A HREF=”#tên_điểm_đích”>

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 <A HREF=”#Top”>Về đầu trang</A>

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

Dưới đây là một ví dụ về chèn tệp âm thanh vào tài liệu Khi nhấn chuột tại mối liên kết tệp âm thanh sẽ được phát lại

<A HREF=”sounds/hawaii.au”>Welcome to Hawaii ! </A>

- Tạo âm thanh nền - Embedding Sound Files

Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể nhúng âm thanh vào tài liệu, nghĩa là tạo âm thanh nền phát ra khi bắt đầu hiển thị trang tài liệu

Để nhúng âm thanh vào tài liệu ta dùng thẻ như ví dụ sau đây:

<EMBED SRC=”Sounds/hakuna.mid” height=50 width=200 autostart=true Loop=true>

6.3 Chèn tệp video

Việc chèn tệp video vào tài liệu hoàn toàn tương tự chèn tệp âm thanh vào tài liệu

7 Khái niệm chung về FORM

Bộ thẻ <FORM> và </FORM>: Giống như thẻ <BODY>, trong bộ thẻ

<FORM> </FORM > có chứa các thành phần của thẻ HTML để tạo nên trang Web Trong thẻ <FORM> có chứa các thuộc tính tác động:

Action: là thuộc tính tác động đến tên của chương trình mà ta sẽ dùng để thực hiện

form khi Form được gửi tới Server

Method: Dùng để qui định cách thức gửi dữ liệu từ Client tới Server, thuộc tính

này cung cấp cho ta hai phương pháp:

 Get: Đây là thuộc tính mặc định, dữ liệu gửi tới Server được gộp vào cùng với URL

khi truyền đi Đặc điểm của phương thức này là dữ liệu gửi đi nhanh nhưng có độ dài hạn chế, không an toàn khi dữ liệu dài vì sẽ bị tự động cắt bớt

 Post: Cho phép gửi dữ liệu có độ dài không hạn chế và an toàn hơn

Các thành phần của Form

 Thẻ <INPUT>: Là một phần tử đặc biệt được tạo trong thẻ <Form> Cho phép ta nhập

các thông tin để gửi tới một chương trình trên Server Thẻ này có 5 thuộc tính

Thuộc tính Type: Dùng để điều khiển vùng nhập liệu, thuộc tính này có các giá trị sau: _ Text: Vùng nhập liệu là văn bản chuẩn (mặc định)

_ Number: Cho phép vùng nhập liệu vào là số

_ Password: Là vùng văn bản có mặt nạ khi nhập liệu

_ Submit: Là nút mà người dùng có thể tác động trên đó để thực hiện form

_ Reset: Là nút mà khi người dùng tác động đến, toàn bộ dữ liệu trên form sẽ bị xoá hết

Thuộc tính Name: Là tên duy trì vùng dữ liệu khi nó được gọi lại từ một chương trình, thường dùng trong các Script

Thuộc tính Size: Dùng để quy định độ dài vùng nhập dữ liệu

Thuộc tính Maxlength: Là độ dài tối đa của vùng nhập liệu

Thuộc tính Value: Là giá trị mặc định cho một thành phần trên FORM

 Thẻ <TextArea> và </TextArea>

Dùng để tạo ra văn bản rộng lớn không hạn chế số dòng trên trang Web Vùng này sẽ

tự động thêm vào thanh cuốn khi cần thiết Bộ thẻ này thường dùng cho những trường memo của form và văn bản trong bộ thẻ này là mặc định cho TextArea TextArea cung cấp cho các thuộc tính sau:

Name: Dùng để đặt tên cho Textarea

Row: Số lượng dòng cần hiển thị

Col: Số lượng cột cần hiển thị

 Thẻ <Select> và </Select>: Cho phép người sử dụng tạo các menu Popup Trong bộ thẻ

này nó cung cấp thêm một số thẻ bên trong kèm theo các thuộc tính sau:

Thuộc tính Name: Dùng để đặt tên cho menu

Thuộc tính Size: Bố trí dòng được hiển thị trên trang Web Browser

Thuộc tính Multiple: Cho phép lựa chọn nhiều dòng

 Thẻ <Option>: Là kí hiệu cho phép lựa chọn một hay nhiều dòng cùng lúc khi thẻ

_ Rows: Đặt chiều cao của các dòng trong Frameset

Giá trị của Cols và Rows được tính bằng phần trăm của cửa sổ hiện thời, hoặc số pixel

 Thẻ <Frame>: Dùng để đặt nội dung cho các cửa sổ của Frameset Trong thẻ này có các

_ Scrolling: Đây là thuộc tính điều khiển thanh cuốn của Frame, có 3 giá trị:

+ Yes: Thanh cuốn luôn luôn xuất hiện trong Frame thậm chí lúc Frame không đầy + No: Thanh cuốn sẽ không có trên Frame, trường hợp này sẽ gây nguy hiểm nếu dữ liệu dài hơn Frame

+ Auto: Trường hợp này là mặc định, nếu browser thấy cần thiết

_ Noresize: Thuộc tính này dùng để hạn chế người dùng sửa chữa kích thước khung

Thẻ <NoFrame> và </NoFrame>: Bộ thẻ này dùng hỗ trợ cho các Browser không có

hỗ trợ Frame lúc đó nội dung này sẽ được hiển thị

</HEAD>

<FRAMESET cols="200,*" BORDER=0 frameborder="0">

<FRAME NAME="menu-win" SRC="mainlnk.htm" SCROLLING="No"

CELLPADDING="0" CELLSPACING="0" NORESIZE>

<FRAMESET ROWS="100,*" MARGINWIDTH="0" MARGINHEIGHT="0"

BORDER=0>

<FRAME NAME="header-win" SRC="Header.htm" SCROLLING="No"

CELLPADDING="0" CELLSPACING="0" NORESIZE>

<FRAME NAME="body-win" SRC="dc.htm" SCROLLING="Auto"

CELLPADDING="0" CELLSPACING="0" NORESIZE>

</FRAMESET>

</FRAMESET>

</HTML>

9 Bộ thẻ tương tác với ngôn ngữ JAVA:

Thẻ <Applet> và </Applet>: Dùng để gói một chương trình áp dụng chạy trên Java

Thông thường bộ thẻ này được sử dụng cho các chương trình hình ảnh sống động và kết hợp

âm thanh Ưu điểm lớn nhất của bộ thẻ này là có thể tạo ra các chương trình áp dụng chạy với tốc độ nhanh Những chương trình này được điều khiển bằng các thông số thiết lập trên ngôn ngữ HTML Nó có thể kết hợp các âm thanh, hình ảnh một cách dễ dàng Trong thẻ này có các tính chất sau:

_ Code: Dùng để gọi tên chương trình Java áp dụng

_ Width và Height: Là độ rộng và độ cao của cửa sổ chương trình

_ Codebase: Là thư mục chứa chương trình mà ta sẽ chạy

_ Align: Là thuộc tính điều khiển vị trí của sổ chương trình

_ Vspace và Hspace: Là khoảng không theo chiều đứng và theo chiều ngang bao lấy cửa sổ chương trình áp dụng

Thẻ <Param>: Được sử dụng trong bộ Tag <Applet>, Tag này có thể không có hoặc có rất nhiều, tuỳ theo chương trình áp dụng

Ví dụ: giả sử đã có một chương trình “Helloworld.java” ta đã biên dịch thành tệp

“Helloworld.class”, muốn nhúng vào trang web ta có đoạn chương trình sau:

<APPLET CODE=”Helloworld.class” WIDTH=150 HEIGHT=25>

</APPLET>

CÂU HỎI VÀ BÀI TẬP CHƯƠNG II

2.1 Thế nào là trang mã nguồn và trang Web?

2.2 Cấu trúc của một tài liệu HTML Các thẻ HTML là gì?

2.3 Ý nghĩa của các thẻ trình bày trang trong HTML ?

2.4 Nêu các thuộc tính của thẻ <FONT> </FONT> ?

2.5 Trình bày cách dùng các thẻ danh sách và bảng ?

2.6 Muốn đưa ảnh vào tài liệu HTML ta dùng ảnh nào? Nêu các thuộc tính của thẻ đó ? 2.7 Có những loại liên kết nào trong một tài liệu HTML? Muốn tạo liên kết ta dùng thẻ nào? Cho ví dụ?

2.8 Có các thuộc tính nào tác động trong FORM? Ý nghĩa của các thuộc tính đó?

2.9 Nêu các thành phần của FORM?

2.10 Cách sử dụng thẻ <FRAMESET> </FRAMESET> để chia màn hình trình duyệt thành các phần riêng biệt Viết đoạn mã để chia màn hình trình duyệt thành các Frame có dạng sau:

Head-win (150 pixel) Menu1-win

(200 pixel)

(150 pixel)

2.11 Sử dụng các thẻ HTML, viết trang web theo mẫu sau:

2.12 Viết trang mã nguồn để chia màn hình trình duyệt thành các Frame có dạng sau:

Frame 1: Tiêu đề trang web

Frame 2:

Mục tin chính

Frame 3: Nội dung chi tiết

200 pixel

120 pixel

Trình bày ý nghĩa các thuộc tính của các thẻ đã sử dụng trong mã nguồn

2.13 Sử dụng các thẻ HTML, viết trang web theo mẫu sau:

Phiếu thăm dò

2.14 Xây dựng trang web có nội dung sau:

2.15 Xây dựng trang Web tĩnh tạo danh sách lớp học của bạn

2.16 Xây dựng trang Web giới thiệu về bản thân

CHƯƠNG III: THIẾT KẾ GIAO DIỆN VỚI HTML VÀ CSS

1 Định dạng theo Cascade Style Sheet (CSS)

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các

tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML

CSS dùng để tạo cho trang web có tính thống nhất về kiểu chữ, độ rộng, màu,

tại các vị trí khác nhau và đồng thời khi muốn thay đổi kiểu chữ, màu thì không

phải chỉnh sửa lại toàn bộ các trang web của web site mà chỉ chỉnh sửa thành phần

điều khiển

2 Sử dụng HTML và CSS tạo giao diện

2.1 Cú pháp CSS

Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau

Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau:

+ Trong HTML: <body bgcolor=”#00BFF3”>

+ Trong CSS: body { background-color:#00BFF3; }

Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu đã học qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS

Cú pháp CSS cơ bản: Selector{ property:value; }

Trong đó:

+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày Nó là các tag

HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau)

Ví dụ: body, h2, p, img, #title, #content, username,…

Trong CSS ngoài viết tên selector theo tên tag, class, id Chúng ta còn có thể viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là

#entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong

#entry

Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ như thẻ img và thẻ a cùng có class tên visitors nhưng đây lại là hai đối tượng khác nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm Nên nếu khi viết CSS ta ghi là visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần

Nên trong trường hợp này, nếu có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ nên ghi là img visitors thôi

Một lối viết tên selector nữa đó là dựa trên tên các thuộc tính có trong HTML Ví

dụ trong HTML ta có đoạn mã như vầy: <input name=”Search” type=”Text” value=”Key Word”> Để áp dụng thuộc tính CSS cho riêng ô tìm kiếm này chúng ta sẽ dùng selector input[name=”Search”]

Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu

đỏ

+ Property: Chính là các thuộc tính quy định cách trình bày Ví dụ: background- color,

font-family, color, padding, margin,…

Mỗi thuộc tính CSS phải được gán một giá trị Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector

Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }

Để dễ đọc hơn, nên viết mỗi thuộc tính CSS ở một dòng Tuy nhiên, nó sẽ làm tăng dung

và màu sắc Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS:

Đơn vị chiều dài

Đơn vị Mô tả Đơn vị Mô tả

in thường của font hiện hành

Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x

RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với

nhau tạo ra vô số màu

Khai báo ở đâu sử dụng ở đấy

Cách sử dụng : Dùng thuộc tính Style cho các thẻ như là : <h1>, <p>, <div>,

Cách khai báo : Style="tên: giá_trị; tên: giá_trị; "

Ví dụ: Khai báo Style cho thẻ tạo đoạn văn bản <p>

<p align="center" style="margin-top: 0; margin-bottom: 0; color:blue"> Ví

dụ về sử dụng Inline Style cho thẻ tạo đoạn p </p>

2.3.2 H eader S tyl e

Khai báo:

Toàn bộ Style được khai báo trong thẻ <Style> </Style> nằm trong phần <header>

</header> của trang web

Dữ liệu trong </Tên_thẻ> sẽ có định dạng do class là Tên_class quy định

Ví dụ về khai báo và sử dụng header style :

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Bái giảng thiết kế Web</title>

</STYLE>

</head>

<body>

<p align="center"><b><font color="#008000">SỬ DỤNG INLINE STYLE</font></b></p>

<p align="center" style="margin-top: 0; margin-bottom: 0; color:blue">Ví dụ về sử dụng Inline Style cho thẻ tạo đoạn p </p>

<p align="center"><b><font color="#008000">SỬ DỤNG HEADER

<link href="tên_file.css" rel="stylesheet" type="text/css">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Bài giảng thiết kế Web</title>

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

<body>

<p align="center">

<b><font color="#008000">SỬ DỤNG EXTERNAL STYLE CHO THẺ LI</font></b>

<ul>

<li class=class_li_file_css> Môn học 1

<li class=class_li_file_css> Môn học 2

<li class=class_li_file_css> Môn học 3

und background Thuộc tính rút gọn cho tất cả

các thuộc tính nền

background-color background-image background-repeat background-attachment background-position

background-color Thiết lập màu nền cho đối

background-repeat Thiết lập chế độ lặp ảnh nền repeat

repeat-x repeat-y no-repeat

x y

F o

font-style Thiết lập chế độ in nghiêng,

xiên hay bình thường

normal

italic oblique

font-variant Thiết lập font bình thường

100 – 900

x-small small medium large x-large xx-large smaller larger

<length>

%

font-family Thiết lập loại font hiển thị

trang web/ đối tượng web

family-name generic-family

T e x

t

text-indent Thiết lập khoảng thụt đầu

letter-spacing Thiết lập khoảng cách giữa

overline line-through blink

upper lower capitalize Pseudo-

classes

Ma rgi

n

lập margin

margin-top margin-right margin-bottom margin-left

lập padding

padding-top padding -right padding -bottom padding -left

Bo rd

er

các thiết lập border cho một thành phần

border-width border-color border-style

medium thick

border-top-width Thiết lập độ rộng viền phía

trên

<border-width>

border-top-color Thiết lập màu viền phía trên <border-color>

border-top-style Thiết lập kiểu viền phía trên <border-style>

border-right-width Thiết lập độ rộng viền phải <border-width>

border-right-color Thiết lập màu viền phải <border-color>

border-right-style Thiết lập kiểu viền phải <border-style>

border-bottom-width Thiết lập độ rộng viền bên

dưới

<border-width>

border-bottom-color Thiết lập màu viền bên dưới <border-color>

border-bottom-style Thiết lập kiểu viền bên dưới <border-style>

border-left-width Thiết lập độ rộng viền trái <border-width>

border-left-color Thiết lập màu viền trái <border-color>

border-left-style Thiết lập kiểu viền trái <border-style>

W id

min-width Thiết lập chiều rộng tối thiểu

cho một đối tƣợng

<length>

%

He igh

right none

tƣợng liên quan với đối tƣợng floated

left righ

t bot

h non

CHƯƠNG IV: NGÔN NGỮ LẬP TRÌNH PHP

1 PHP là gì?

PHP viết tắt bởi cụm từ Personal Home Page do Rasmus Lerdorf phát minh ra, được công

bố và phát triển từ năm 1994 Lúc đầu chỉ là một bộ đặc tả Perl Được sử dụng để lưu dấu vết của người dùng trên các trang web Sau đó, Rasmus Lerdorf đã phát triển PHP như là một máy đặc tả (Scripting engine) Vào giữa năm 1997, PHP đã được phát triển nhanh chóng trong sự yêu thích của nhiều người PHP đã không còn là một dự án cá nhân của Rasmus Lerdorf và đã trở thành một công nghệ web quan trọng Zeev Suraski và Andi Gutmans đã hoàn thiện việc phân tích cú pháp cho ngôn ngữ để PHP3 ra đời vào tháng 6 năm 1998 (phiên bản này có phần mở rộng là *.PHP3) Ngay sau đó PHP4 ra đời (phiên bản này không phải có phần mở rộng *.PHP4 mà là *.PHP) PHP bây giờ được gọi là PHP HyperText PreProcesor PHP là ngôn ngữ đặc tả chạy ở phía Server để tạo lập các trang web động

Cú pháp của PHP tương tự như ngôn ngữ Perl và C PHP chạy trên các phần mềm Web Server như Apacche, Microsoft’ IIS

PHP là ngôn ngữ đặc tả chạy ở phía Server (Server-side), giống như ASP

PHP thực hiện ở phía Server

PHP hỗ trợ kết nối với nhiều cơ sở dữ liệu như MySQL, SQL Server, Informix, Oracle,

Sybase, Solid, PostgreSQL, Generic ODBC, etc,

PHP là phần mềm nguồn mở

PHP có thể sử dụng download tự do

2 FILE PHP

Các file PHP là các file văn bản chứa các thẻ HTML và các đặc tả (script)

Các file PHP trả lại cho trình duyệt duới dạng HTML

File PHP có phần mở rộng *.PHP

3 Tại sao phải dùng PHP?

PHP chạy trên nền các hệ điều hành như Windows, Linux, Unix,

PHP chạy và được dịch trên hầu hết các phần mềm Web server như Apache, IIS,

PHP có thể download miễn phí từ địa chỉ: www.php.net

PHP dễ học, dễ dùng và chạy hiệu quả trên phía Server

Để cài đặt và làm việc với PHP ta có thể download phần mềm tại các địa chỉ:

Cú pháp chính trong PHP tương tự như cú pháp trong ngôn ngữ lập trình C

Một đoạn chương trình PHP có thể viết độc lập trên một trang hoặc nhúng vào tài liệu, nó

được bắt đầu bởi <?PHP và kết thúc bởi ?>

Cụ thể:

<?php Các lệnh PHP;

?>

Khi lập trình PHP phải chú ý các qui tắc như sau:

 Cuối câu lệnh phải có dấu ;

 Biến trong PHP có tiền tố là $

 Mỗi phương thức đều bắt đầu bởi { và kết thúc bởi }

 Khi khai báo biến thì không có kiểu dữ liệu

 Sử dụng dấu // hoặc # ở đầu dòng của mỗi câu chú thích

 Sử dụng /* và */ cho mỗi đoạn ghi chú

 Khai báo biến có phân biệt chữ hoa và chữ thường

Ví dụ: Đoạn chương trang in ra dòng thông báo “Hello World !!! “

<HTML>

<BODY>

<?php // Đây là đoạn chương trình in ra thông báo “Hello World !!!”

echo “Hello World !!!”; /* in ra trình duyệt Hello World !!!” */

?>

</BODY>

</HTML>

Hoặc cũng có thể chỉ viết: