Giáo trình Thiết kế và lập trình Web - Nguyễn Duy Linh
Thiết kế và lập trình Web
MỤC LỤC
1. Giới thiệu về Internet và dịch vụ World Wide Web..............................................................3
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
1. Soạn thảo siêu văn bản ........................................................................................................13
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
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
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
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
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
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
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
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
126
Số host trong mạng
A
B
C
16.777.214
65534
16.382
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
Thiết kế và lập trình Web
D
E
Không phân
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
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:
Các domain của một số quốc gia trên thế giới
Domain
au
Quốc gia tƣơng ứng
Úc
at
be
ca
fi
Áo
Bỉ
Canada
Phần lan
fr
Pháp
CHLB Đức
de
it
Ý
jp
vn
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
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
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
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:
Một số Website thông dụng của Việt Nam
Đài tiếng nói Việt Nam
Đà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
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
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
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
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
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 “<” và “>”. Hầu hết các lệnh đƣợc thể hiện bằng
một cặp hai thẻ: thẻ mở (<KEYWORD>) và thẻ đóng (</KEYWORD>).
<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
đó.
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
Thiết kế và lập trình Web
<! - - dòng chú thích --- >
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:
<HTML>
<HEAD><TITLE> . . .</TITLE></HEAD>
<BODY>
. . . . .
</BODY>
</HTML>
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:
<HTML>
<HEAD>
<TITLE>Ví dụ về trang Hello World !!!</TITLE>
</HEAD>
<BODY>
Hello World !!!
<Hr>
</BODY>
</HTML>
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à <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 đề.
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
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: <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.
Thuộc tính ngầm định là "Left".
Ví dụ:
<P align=”Justify>
nội dung của đoạn văn
</P>
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.
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
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ụ: <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>
Phối hợp các thuộc tính:
Ví dụ: <FONT size=+1 face=”.VnTime” color=”#rrggbb”> . . . </FONT>
4. Danh sách và bảng trong HTML
4.1. Danh sách
a. Thẻ <UL> và </UL> (Unordered List): là bộ thẻ danh sách không thứ tự, nó có dạng:
<UL>
<LI> . . .first list Item
<LI> . . .second list Item
</UL>
Trong đó <LI> 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
Thiết kế và lập trình Web
Ví dụ:
<UL>
<LI type=disc>Phần một
<LI type=square>Phần hai
<LI type=circle>Phần ba
</UL>
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.
Ví dụ:
<OL>
<LH>Danh sách</LH>
<LI>Phần một
<LI>Phần hai
<LI>Phần ba
</OL>
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
<TABLE BORDER=n
CELLSPACING=n
Description
TABLE - là bắt đầu bảng
-
-
-
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=n
BGCOLOR=”#rrggbb”>
-
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
<CAPTION> ...</CAPTION>
<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>
<TH> ...</TH>
- 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
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ẻ <TR>, <TH>, <TD>
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ẻ <TR>, <TH>, <TD>
- Dùng để đặt độ rộng của ô, bảng. Thuộc tính này
dùng kèm các thẻ <TABLE>, <TD>
WIDTH=n%
COLSPAN=n
ROWSPAN=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ẻ: <TD>, <TH>.
- 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ẻ: <TD>, <TH>.
Ví dụ: để có một bảng sau đây trên trình duyệt
Danh sách cán bộ
TT
1
Họ và tên
Ngày sinh
20/10/1981
10/10/1982
Trần Văn Ba
Trần Văn Nam
2
Ta có thể viết đoạn mã nhƣ sau:
<TABLE BORDER=1>
<Caption>Danh sách cán bộ</Caption>
<TR>
<TD>TT</TD><TD>Họ và tên</TD><TD>ngày sinh</TD>
</TR>
<TR>
<TD>1</TD><TD>Trần Văn Ba</TD><TD>20/10/1981</TD>
</TR>
<TR>
<TD>2</TD><TD>Trần Văn Nam</TD><TD>10/10/1982</TD>
</TR>
</TABLE>
5. Đƣa hình ảnh vào tài liệu
Cú pháp:
<IMG SRC=”URL” ALT=”alternative text” Width=n HEIGHT=n
ALIGN=”Top | Middle | Left | Right” HSPACE=n VSPACE=n BORDER=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
18
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
SRC=”URL”
ALT=”đoạn chữ
thay thế”
Mô tả
Chú thích
Địa chỉ nơi có tệp ảnh
Đoạn chữ hiển thị thay
thế cho ảnh
Các tệp ảnh dạng .BMP, GIF, JPG, ..
Nên có vì không phải lúc nào cũng hiển
thị đƣợc ảnh
WIDTH=n
Đặt chiều rộng, chiều
cao của khung ảnh
Vị trí đặt ảnh
Đảm bảo cho text nạp và hiển thị trƣớc
HEIGHT=n
ALIGN=”Top |
Middle | Left |
Right”
Canh lề ảnh
VSPACE=n
HSPACE=n
BORDER=n
Viền trống xung quanh
khung ảnh
Dùng kèm với align để tạo viền trống
xung quanh ảnh
Độ đậm hay thanh mảnh Có thể đặt BORDER=0 nêu muốn loại
của khung ảnh khi ảnh
cũng là đầu mối liên kết
bỏ khung viền
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:
<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ị.
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
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:
<A HREF=”URL”>nhóm từ làm đầu mối</A>
Đị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ụ:
<A HREF=”http://www.hotmail.com”>hotmail</A>
<A HREF=”http://www.yahoo.com”>Yahoo</A>
Đị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.
<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.
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
Thiết kế và lập trình Web
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
<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:
bộ thẻ
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.
_ Button: Tạo nút chọn
_ Hiden: Vùng văn bản ẩn, nó không giống nhƣ Password. Đây là vùng dữ liệu không
hiển thị trên trang Web.
_ Checkbox: Dùng để đặt các hộp trên đó, trên đó dùng để kiểm tra trạng thái ON
Biên soạn: Nguyễn Duy Linh, Khoa Kỹ thuật – Công nghệ, Trường Đại học Quảng Bình
21
Tải về để xem bản đầy đủ
75 trang
20020
Free
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế và lập trình Web - Nguyễn Duy Linh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_thiet_ke_va_lap_trinh_web_nguyen_duy_linh.pdf
