Lập trình web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.85 MB, 86 trang )
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
LẬP TRÌNH WEB
NGÀNH/CHUN NGÀNH: CƠNG NGHỆ THƠNG TIN
(Lưu hành nội bộ)
Dùng cho đào tạo: Cao đẳng
Nam Định, năm 2020
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
LẬP TRÌNH WEB
NGÀNH/CHUN NGÀNH: CƠNG NGHỆ THƠNG TIN
(Lưu hành nội bộ)
CHỦ BIÊN: LÊ HỮU TOẢN
Nam Định, năm 2020
LỜI GIỚI THIỆU
Trong những năm gần đây, cùng với sự phát triển của Cơng nghệ thơng tin thì
mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là
internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại. Để phục
vụ việc học tập và nghiên cứu của sinh viên Công nghệ thông tin, trường Cao đẳng Công
nghiệp Nam Định, chúng tơi biên soạn giáo trình Lập trình Web. Giáo trình bao gồm 4
chương, mỗi chương đều có phần kiến thức lý thuyết, câu hỏi và phần thực hành cụ thể:
Chương 1. Tổng quan về lập trình Web
Chương 2. Cấu hình dịch vụ Web
Chương 3: Ngơn ngữ PHP
Chương 4. Lập trình Web động với PHP
Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web động từ
cơ bản đến nâng cao bằng công nghệ HTML và ngôn ngữ PHP. Được biên soạn với
phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên
những kiến thức cơ bản phục vụ cho nghiên cứu, thiết kế ứng dụng Web.
Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập và nghiên cứu của sinh viên
trường Cao đẳng Công nghiệp Nam Định. Do thời gian có hạn nên trong phạm vi cuốn
giáo trình, khơng thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế
Web. Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cơ để tài liệu
hồn chỉnh hơn.
Nam Định, 27 tháng 04 năm 20..
Chủ biên
Lê Hữu Toản
MỤC LỤC
LỜI GIỚI THIỆU ............................................................................................................ 1
MỤC LỤC ....................................................................................................................... 1
DANH MỤC BẢNG, HÌNH VẼ ..................................................................................... 3
BÀI 1. TỔNG QUAN VỀ LẬP TRÌNH WEB ............................................................... 4
1.1. KHÁI NIỆM CƠ BẢN VỀ WEB ............................................................................. 4
1.1.1. WWW .................................................................................................................... 4
1.1.1.1. Internet ................................................................................................................ 4
1.1.1.2. Địa chỉ IP ............................................................................................................ 5
1.1.1.3. Tên miền (Domain name) .................................................................................. 6
1.1.1.4. World Wide Web (WWW) ................................................................................. 7
1.1.2. Webpage ................................................................................................................ 8
1.1.3. Trình duyệt ............................................................................................................ 9
1.1.4. Địa chỉ web, tên miền. ......................................................................................... 11
1.2. GIỚI THIỆU CẤU TRÚC HTML VÀ THẺ HTML ............................................. 12
1.2.1. Cấu trúc trang web............................................................................................... 12
1.2.2. Các thẻ HTML thông dụng.................................................................................. 13
1.2.3 Các thẻ HTML đặc biệt ........................................................................................ 20
TÓM TẮT NỘI DUNG ................................................................................................. 25
BÀI TẬP ........................................................................................................................ 26
BÀI THỰC HÀNH ........................................................................................................ 27
HƯỚNG DẪN TỰ HỌC Ở NHÀ ................................................................................. 36
NỘI DUNG THẢO LUẬN ........................................................................................... 37
BÀI 2. CẤU HÌNH DỊCH VỤ WEB ............................................................................ 39
2.1. LẬP TRÌNH WEB ĐỘNG .................................................................................... 39
2.1.1 Khái niệm Web động ............................................................................................ 39
2.1.2 Sự khác nhau giữa Web động và Web tĩnh .......................................................... 39
2.1.3 Ngơn ngữ lập trình Web động .............................................................................. 40
2.2. WEB SERVER ....................................................................................................... 41
2.2.1. IIS ........................................................................................................................ 41
2.2.2. APACHE ............................................................................................................. 42
2.3. CƠ SỞ DỮ LIỆU ................................................................................................... 42
2.3.1. Cơ sở dữ liệu MySQL. ........................................................................................ 42
2.3.2. Cơ sở dữ liệu Access ........................................................................................... 45
2.3.3. Cơ sở dữ liệu SQL Server ................................................................................... 50
2.4. CÀI ĐẶT, CẤU HÌNH PHP, MYSQL, APACHE. ............................................... 51
BÀI TẬP ........................................................................................................................ 52
BÀI THỰC HÀNH ........................................................................................................ 52
HƯỚNG DẪN TỰ HỌC Ở NHÀ ................................................................................. 52
NỘI DUNG THẢO LUẬN CHƯƠNG 2 ...................................................................... 52
Bài 3. NGÔN NGỮ PHP ............................................................................................... 53
3.1. BIẾN, HẰNG, TOÁN TỬ, VÀ CÁC CẤU TRÚC ĐIỀU KHIỂN ....................... 53
1
3.1.1. Biến, hằng ............................................................................................................ 53
3.1.2. Các toán tử ........................................................................................................... 54
3.1.3. Cấu trúc điều khiển .............................................................................................. 57
3.2. HÀM TRONG PHP ................................................................................................ 60
3.2.1. Khái niệm ............................................................................................................ 60
3.2.2. Các hàm thường dùng .......................................................................................... 60
3.2.3. Xây dựng hàm ..................................................................................................... 62
TÓM TẮT NỘI DUNG ................................................................................................. 65
BÀI TẬP ........................................................................................................................ 65
BÀI THỰC HÀNH ........................................................................................................ 65
NỘI DUNG THẢO LUẬN ........................................................................................... 65
Bài 4. LẬP TRÌNH WEB ĐỘNG VỚI PHP ................................................................. 66
4.1. NHÚNG TẬP TIN VÀ MÃ PHP VÀO TRANG HTML ...................................... 66
4.2. ĐỐI TƯỢNG TRONG PHP ................................................................................... 67
4.2.1. Session ................................................................................................................. 67
4.2.2. Cookies ................................................................................................................ 68
4.2.3 Application ........................................................................................................... 70
4.3. THAO TÁC VỚI CƠ SỞ DỮ LIỆU (MYSQL) ................................................... 71
4.3.1. Kết nối cơ sở dữ liệu............................................................................................ 71
4.3.2. Truy xuất dữ liệu ................................................................................................. 71
4.3.3. Thêm mới dữ liệu ................................................................................................ 73
4.3.3. Sửa, xoá dữ liệu ................................................................................................... 74
4.4. MỘT SỐ ỨNG DỤNG ........................................................................................... 74
4.4.1 Ứng dụng thương mại điện tử .............................................................................. 74
4.4.2 Ứng dụng quản lý tin tức ...................................................................................... 77
TÓM TẮT NỘI DUNG ................................................................................................. 82
BÀI TẬP ........................................................................................................................ 82
BÀI THỰC HÀNH ........................................................................................................ 82
HƯỚNG DẪN TỰ HỌC ............................................................................................... 82
NỘI DUNG THẢO LUẬN ........................................................................................... 82
TÀI LIỆU THAM KHẢO ............................................................................................. 83
2
DANH MỤC BẢNG, HÌNH VẼ
Hình 1- 1. Mơ hình mạng Internet ..................................................................................... 5
Hình 1- 2. Minh họa thiết lập giao thức TCP/IP .................................................................. 6
Hình 1- 3. Phân cấp các tên miền ......................................................................................... 7
Hình 1- 4. Thống kê các trình duyệt được sử dụng .............................................................. 8
Hình 1- 5. Tiêu đề của trang web xuất hiện trên trình duyệt .............................................. 13
Hình 1- 6. Tiêu đề của hình ảnh khi di chuột ..................................................................... 19
Hình 1- 7. Form đăng kí thơng tin.................................................................................28
Hình 1- 8. Mơ tả bài thực hành 1........................................................................................ 27
Hình 1- 9. Mơ tả bài thực hành 2........................................................................................ 28
Hình 1- 10. Mơ tả bài thực hành số 3 ................................................................................. 29
Hình 1- 11. Mơ tả bài thực hành số 4 ................................................................................. 30
Hình 1- 12. Mơ tả bài thực hành số 5 ................................................................................. 32
Hình 1- 13. Mơ tả bài thực hành số 6 ................................................................................. 33
Hình 1- 14. Mô tả bài thực hành số 7 ................................................................................. 35
Hình 1- 15. Mơ tả bài thực hành số 10 ............................................................................... 36
Bảng 1- 1. Thuộc tính thẻ <body> ..................................................................................... 20
Bảng 1- 2. Kích thước Font chữ ......................................................................................... 21
Bảng 1- 3. Các kiểu chữ trong HTML ............................................................................... 22
Bảng 1- 4. Các dạng hiển thị văn bản trên web .................................................................. 22
Bảng 1- 5. Kí tự đặc biệt..................................................................................................... 23
Bảng 1- 6. Đánh chỉ số đầu cho đoạn văn bản ................................................................... 24
Bảng 1- 7. Đặt kí hiệu đầu đoạn văn bản ........................................................................... 25
Bảng 1- 8. Cấu trúc thẻ làm việc với bảng ......................................................................... 26
3
BÀI 1. TỔNG QUAN VỀ LẬP TRÌNH WEB
MỤC TIÊU:
- Trình bày được các khái niệm cơ bản về web: www, http, url,...
- Phân tích được ưu điểm, nhược điểm của phương pháp lập trình web tĩnh và lập
trình web động.
- Trình bày được khái niệm về ngơn ngữ kịch bản.
- Thiết kế được giao diện một số trang web cơ bản: đăng kí, đăng nhập, hiển thị
thơng tin bằng các thẻ HTML cơ bản.
1.1. KHÁI NIỆM CƠ BẢN VỀ WEB
1.1.1. WWW
1.1.1.1. Internet
Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced
Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Ngày nay Internet đã trở
thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới. Mạng máy tính tồn
cầu Internet có thể được xem như là mạng của tất cả các mạng (Network of networks),
trong đó người dùng tại bất cứ máy tính nào đều có thể truy cập tới các thơng tin của
các máy khác (nếu được phép).
Mục đích chính lúc này của mạng là kết nối và trao đổi thông tin giữa các máy tính
nghiên cứu của các trường đại học. Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn
có thể hoạt động khi một phần của nó bị phá hủy trong các trường hợp chiến tranh hoặc
thiên tai.
Ngày nay mạng Internet là một mạng công cộng kết nối hàng trăm triệu người trên
thế giới. Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của
các mạng viễn thông công cộng đang tồn tại (Public telecommunication networks). Về
mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission
Control Protocol/Internet Protocol). Hai mô phỏng của công nghệ mạng Internet là
intranet and extranet cũng sử dụng các giao thức này.
Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước ngoặt mới trong
việc sử dụng Internet. Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là email,
listserv, telnet và ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát
triển các giao thức cho World Wide Web (WWW). Trong khi tìm kiếm cách để liên kết
các tài liệu khoa học lại với nhau, anh ta đã tạo ra HyperText Markup Language
(HTML), một tập con của Standard Generalized Markup Language (SGML).
Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm
thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway
Interface (CGI), ASP, JSP, PHP, Java Servlet....
4
Hình 1- 1. Mơ hình mạng Internet
1.1.1.2. Địa chỉ IP
Địa chỉ IP là một dãy số 32-bit dùng để xác định đối tượng nhận và gửi thông tin
trên Internet. Khi người dùng yêu cầu một trang HTML hay gửi e-mail, địa chỉ IP của
máy tính sẽ được gửi đi cùng các gói tin đến địa chỉ IP của người nhận. Khi máy tính
nhận được yêu cầu, sẽ căn cứ trên địa chỉ IP kèm theo để gửi kết quả trả về.
Để đơn giản hóa người ta phân dãy địa chỉ 32-bit này thành 4 con số 8 bit viết cách
nhau bởi dấu chấm “.”. Vì mọi máy là một phần của mạng nên người ta chia địa chỉ IP
thành 2 phần:
+ Phần mơ tả mạng (network) mà máy đó thuộc về.
+ Phần mô tả máy (local host): Nếu tất cả các bit của vùng mơ tả máy bằng 0, thì
địa chỉ IP dùng để mô tả địa chỉ mạng (network address); Nếu tất cả các bit của vùng mô
tả máy bằng 1, thì địa chỉ IP này chính là địa chỉ broadcast (broadcast address); Nếu
không thuộc hai trường hợp trên, địa chỉ IP này dùng để mô tả địa chỉ máy (host address)
Địa chỉ IP tự nó khơng chứa thơng tin về phần nào mô tả mạng, phần nào mô tả máy
mà thành phần subnet mask đi kèm với mỗi địa chỉ sẽ cung cấp thông tin này. Theo qui
ước, vùng các bit 1 xác định vùng mô tả mạng, và vùng các bit 0 xác định vùng mô tả
máy. Trong subnet mask chỉ gồm 2 dãy liên tục các bit 1 và dãy liên tục các bit 0 nằm
liên tiếp nhau tính từ trái sang.
Việc phân chia địa chỉ IP trên Internet do ICANN chịu trách nhiệm. Địa chỉ IP
thường được quản lí bởi các nhà cung cấp dịch vụ Internet (ISP – Internet Service
Provider). Các địa chỉ IP này thường được gọi là địa chỉ IP thực. Nếu người dùng muốn
thiết lập một website để các máy tính sử dụng Internet có thể truy cập vào được, ít nhất
máy chủ chứa website phải có địa chỉ IP thực. Nếu khơng có địa chỉ IP thực, người dùng
phải sử dụng dịch vụ webhosting để thuê chỗ đặt website trên các máy chủ có địa chỉ
IP thực được kết nối với Internet.
5
Hình 1- 2. Minh họa thiết lập giao thức TCP/IP
1.1.1.3. Tên miền (Domain name)
Tên miền có thể được xem như là tên giao dịch của công ty hay tổ chức trên
Internet. Tên miền của các công ty thương mại thường có dạng yourcompany.com. Ví
dụ, cơng ty Intel sẽ lấy tên là miền là intel.com; công ty Microsoft lấy tên miền là
microsoft.com ...
Việc đưa ra khái niệm tên miền giúp cho việc truy cập đến các tài nguyên trên
Internet dễ dàng hơn. Việc ánh xạ qua lại giữa tên miền và địa chỉ IP của máy phục vụ
được thực hiện bởi DNS Server.
Ví dụ: Một địa chỉ www.intel.com cho ta một số thông tin sau:
+ Đây là địa chỉ của một máy thuộc tổ chức sở hữu tên miền intel.com.
+ Địa chỉ IP của máy này sẽ là 192.102.198.160.
+ Phần "com" trong tên miền mơ tả mục đích của tổ chức (trong trường hợp
này là "commercial" – thương mại) và được gọi là tên miền cấp 1 (top-level domain
name).
+ Phần ngay trước dấu “.” trong tên miền trên thông thường là tên của tổ chức (ví
dụ như intel) được gọi là tên miền cấp 2 (second-level domain name). Tên miền cấp 3
thông thường được dùng để định nghĩa một máy phục vụ cụ thể nào đó và tồn bộ chúng
sẽ được ánh xạ tới một địa chỉ Internet.
Một địa chỉ IP có thể được ánh xạ cho nhiều tên miền. Điều này cho phép nhiều cá
nhân, công ty và các tổ chức chia sẻ cùng một Internet server. Do tầm quan trọng của
tên miền nên một trong các bước đầu tiên của việc xây dựng website là thiết lập tên
miền bằng cách mua từ các công ty được ủy quyền bán tên miền. Các tên miền có đi
là “.com” rất thơng dụng trong các giao dịch quốc tế. Ngoài ra, các cơng ty Việt nam
cũng thường hay lấy tên miền có đuôi là “.com.vn”.
6
Hình 1- 3. Phân cấp các tên miền
1.1.1.4. World Wide Web (WWW)
World Wide Web là một không gian thông tin tồn cầu cho phép người dùng có thể
truy cập (đọc và viết) qua các máy tính có nối mạng internet. Đây là dịch vụ thông dụng
nhất trên Internet. Để sử dụng dịch vụ này, người dùng cần có một trình duyệt web
(Web browser). Một số trình duyệt thơng dụng là Google Chrome, I nt er ne t E xp lo re r
và Mozilla Firefox...
Để truy cập vào một trang web, người dùng cần phải biết địa chỉ URL (Uniform
Resource Locator) của trang web đó.
Trong mỗi trang web mà máy tính truy cập vào, người dùng có thể thấy được văn
bản, hình ảnh, âm thanh...được trang trí và trình bày hết sức đẹp mắt. Ngồi ra, để có
thể di chuyển tới các trang web khác, trên mỗi trang đều sử dụng các siêu liên kết
(Hyperlink).
7
Hình 1- 4. Thống kê các trình duyệt được sử dụng
1.1.2. Webpage
a. Trang web
- Website là một ứng dụng chạy trên mạng (Client – Server) và được chia sẻ khắp
toàn cầu qua mạng Internet.
- Trang web là một tệp tin văn bản chứa những thẻ HTML hoặc những đoạn mã đặc
biệt mà trình duyệt web (Web Browser) có thể hiểu và thông dịch được. Tệp tin thường
được lưu với phần mở rộng là .html hoặc .htm.
- Địa chỉ web (Uniform Resource Locator - URL): một địa chỉ tham chiếu đến một
file cụ thể trong tài nguyên mạng. Địa chỉ web có 2 dạng:
+ Địa chỉ tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc một tệp tin
bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên tệp tin.
+ Địa chỉ tương đối: mô tả ngắn gọn địa chỉ tệp tin kết nối có cùng đường
dẫn với tập tin hiện hành.
b. Web tĩnh
Website tĩnh là website chỉ bao gồm các trang web khơng có cơ sở dữ liệu đi kèm.
- Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML…
- Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít thay đổi
và cập nhật.
- Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm
quen với môi trường Internet.
* Ưu điểm:
- Thiết kế đồ hoạ đẹp: Trang Web tĩnh thường được trình bày ấn tượng và cuốn hút
hơn trang web động về phần mỹ thuật đồ hoạ vì chúng ta có thể hồn tồn tự do trình bày
các ý tưởng về đồ hoạ và mỹ thuật trên tồn diện tích từng trang web tĩnh.
- Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web tĩnh
nhanh hơn các trang web động vì khơng mất thời gian trong việc truy vấn cơ sở dữ liệu
như các trang web động.
8
- Thân thiện hơn với các máy tìm kiếm (search engine): Bởi vì địa chỉ URL của các
trang *.html, *.htm… trong web tĩnh không chứa dấu chấm hỏi (?) như trong web động.
- Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với website
động vì khơng phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho website và chi
phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí yêu cầu hệ điều hành tương thích.
* Nhược điểm:
- Khó khăn trong việc thay đổi và cập nhật thông tin: Muốn thay đổi và cập nhật
thông tin của trang website tĩnh cần biết về ngôn ngữ HTML, sử dụng được các chương
trình thiết kế đồ hoạ và thiết kế web cũng như các chương trình đưa file lên server.
- Thơng tin khơng có tính linh hoạt, khơng thân thiện với người dùng: Do nội dung
trên trang web tĩnh được thiết kế cố định nên khi nhu cầu về thông tin của người truy cập
tăng cao thì thơng tin trên website tĩnh sẽ khơng đáp ứng được.
- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một website tĩnh
hầu như là phải làm mới lại website.
c. Web động
Web động là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm xử
lý dữ liệu và phát triển web.
- Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng
truy vấn tới một trang web. Trang web được gửi tới trình duyệt gồm những câu chữ, hình
ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa.
- Web động thường được phát triển bằng các ngơn ngữ lập trình bậc cao như PHP,
ASP, ASP.NET, Java, CGI, Perl, và sử dụng các hệ quản trị cơ sở dữ liệu như Access,
MySQL, MS SQL, Oracle, DB2.
- Thông tin trên web động dễ dàng được cập nhật thường xuyên thông qua việc sử
dụng các công cụ cập nhật của các phần mềm quản trị web. Thông tin luôn được cập nhật
trong một cơ sở dữ liệu và người dùng Internet có thể xem những chỉnh sửa đó ngay lập
tức.
- Web động có tính tương tác với người sử dụng cao: Với web động, người dùng dễ
dàng quản trị nội dung và điều hành website của mình thơng qua các phần mềm hỗ trợ
mà khơng nhất thiết phải có kiến thức nhất định về ngơn ngữ html, lập trình web.
- Dễ dàng thay đổi hoặc kế thừa những kết quả đã có: chẳng hạn một ứng dụng đã
có sẵn những cơ sở dữ liệu như cơ sở dữ liệu sản phẩm, nhân sự, khách hàng hay bất kỳ
cơ sở dữ liệu nào đó và muốn đưa thêm giao diện web vào để người dùng nội bộ hay
người dùng Internet đều có thể sử dụng chương trình chỉ với trình duyệt web của mình.
- Hầu hết tất cả các website thương mại điện tử, các website của các tổ chức,
doanh nghiệp hoạt động chuyên nghiệp…trên môi trường Internet đều sử dụng công nghệ
web động. Có thể nói web động là website của giới chuyên nghiệp hoạt động trên mơi
trường Internet.
1.1.3. Trình duyệt
Trình duyệt web là một ứng dụng phần mềm để truy cập thông tin trên World Wide
Web. Mỗi trang web, hình ảnh và video riêng lẻ được xác định bằng một URL riêng biệt,
cho phép các trình duyệt truy xuất và hiển thị chúng trên thiết bị của người dùng mới.
Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một trang web có thể
hiển thị khác nhau trên các trình duyệt khác nhau.
9
Các trình duyệt web phổ biến nhất là Chrome, Firefox, Internet Explorer và
Microsoft Edge(Edge Chromuim).
Trình duyệt web đầu tiên, được gọi là WorldWideWeb, được phát minh vào năm
1990 bởi Sir Tim Berners-Lee. Sau đó ơng đã tuyển dụng Nicola Pellow để viết Line
Mode Browser,hiển thị các trang web trên các thiết bị đầu cuối; nó được phát hành vào
năm 1991. Năm 1993 là một năm đầy ấn tượng với việc phát hành Mosaic, được cơng
nhận là "trình duyệt phổ biến đầu tiên trên thế giới".Giao diện đồ họa sáng tạo của nó làm
cho hệ thống World Wide Web dễ sử dụng và do đó người dùng trung bình dễ tiếp cận
hơn. Điều này, đến lượt nó, đã làm bùng nổ sự bùng nổ Internet của những năm 1990 khi
Web phát triển với tốc độ rất nhanh. Marc Andreessen, lãnh đạo của Mosaic, đã sớm
thành lập cơng ty riêng của mình, Netscape, đã phát hành Netscape Navigator bị ảnh
hưởng bởi Mosaic vào năm 1994. Navigator nhanh chóng trở thành trình duyệt phổ biến
nhất.
Microsoft ra mắt Internet Explorer vào năm 1995, dẫn đến một cuộc chiến trình
duyệt với Netscape. Microsoft đã có thể đạt được một vị trí thống trị vì hai lý do: nó đi
kèm Internet Explorer với hệ điều hành Windows phổ biến của họ và nó là phần mềm
miễn phí mà khơng có giới hạn sử dụng. Cuối cùng, thị phần của Internet Explorer đạt
hơn 95% vào năm 2002. Năm 1998, tuyệt vọng để duy trì tính cạnh tranh, Netscape
chuyển đổi thành Mozilla Foundation để tạo ra một trình duyệt mới sử dụng mơ hình
phần mềm nguồn mở. Cơng trình này phát triển thành Firefox, lần đầu tiên được Mozilla
phát hành vào năm 2004. Firefox đã đạt 28% thị phần trong năm 2011.
Apple phát hành trình duyệt Safari của họ năm 2003. Nó vẫn là trình duyệt thống trị
trên nền tảng của Apple, mặc dù nó khơng bao giờ trở thành một yếu tố ở nơi khác.
Người tham gia chính cuối cùng vào thị trường trình duyệt là Google. Nó là trình
duyệt Chrome, ra mắt vào năm 2008, đã là một thành cơng lớn. Nó dần dần chiếm thị
phần từ Internet Explorer và trở thành trình duyệt phổ biến nhất trong năm 2012. Nó vẫn
chiếm ưu thế kể từ đó.
Về mặt cơng nghệ, các trình duyệt đã mở rộng đáng kể khả năng HTML, CSS,
JavaScript và đa phương tiện từ những năm 1990. Một lý do là cho phép các trang web
phức tạp hơn, chẳng hạn như các ứng dụng web. Một yếu tố khác là sự gia tăng đáng kể
kết nối băng thông rộng, cho phép mọi người truy cập vào nội dung web chuyên sâu dữ
liệu, chẳng hạn như phát trực tuyến trên YouTube, điều này không thể thực hiện được
trong thời đại modem dial-up
*) Tính năng
Tất cả các trình duyệt chính đều cho phép người dùng mở nhiều trang cùng một lúc,
trong các cửa sổ khác nhau hoặc trong các tab khác nhau của cùng một cửa sổ. Họ cũng
hỗ trợ việc sử dụng các tiện ích mở rộng để thêm hoặc sửa đổi hoạt động của trình duyệt
theo nhiều cách khác nhau.
Các tính năng giao diện người dùng phổ biến của trình duyệt:
+ Các nút Back và forward để quay lại trang trước đó đã truy cập hoặc chuyển tiếp
tới trang tiếp theo.
+ Một nút refresh hoặc reload để tải lại trang hiện tại.
+ Một nút stop để hủy tải trang. (Trong một số trình duyệt, nút dừng được hợp nhất
với nút reload.)
+ Một nút home để quay lại trang chủ của người dùng.
+ Một thanh địa chỉ để nhập URL của một trang và hiển thị nó.
10
+ Thanh tìm kiếm để nhập cụm từ vào cơng cụ tìm kiếm. Trong một số trình duyệt,
thanh tìm kiếm được hợp nhất với thanh địa chỉ.
1.1.4. Địa chỉ web, tên miền.
Địa chỉ website hay còn gọi là domain, được định nghĩa là dòng chữ mà người dùng
nhập vào các trình duyệt trên mạng Internet để truy cập đến website của bạn. Mỗi website
đều phải có domain riêng với đặc tính rõ ràng, dễ nhớ và đặc biệt là khơng được trùng lặp
với các địa chỉ trang web khác. Theo thuật ngữ chuyên ngành, địa chỉ của website được
gọi là tên miền. Trước khi website đi vào hoạt động thì cần phải có đăng ký tên miền và
hosting.
Lợi ích mà địa chỉ website mang lại?
Thứ nhất, địa chỉ website được ví như là một cơng cụ để khách hàng vào bên trong
website của bạn. Điều này giúp khách hàng truy cập vào trang web của bạn nhanh chóng
và dễ dàng.
Thứ hai, bạn có thể tạo một hệ thống email theo tên miền cho doanh nghiệp ví dụ
như , , hay ,.. Bởi vậy,
các hoạt động công ty trở nên chuyên nghiệp, uy tín hơn và củng cố thêm niềm tin cho
khách hàng ghé thăm web của bạn.
Thứ ba, địa chỉ website giúp bạn tiếp cận và mở rộng thị trường thông qua Google.
Đây là một trong những trang giao diện được người dùng sử dụng nhiều nhất. Do đó địa
chỉ trang web sẽ giúp doanh nghiệp của bạn tiếp cận khách hàng toàn cầu với tốc độ
mạnh mẽ chỉ bằng một cái click chuột.
Cuối cùng, địa chỉ website không giới hạn thời gian hoạt động. Mang đến cho
doanh nghiệp của bạn khách hàng tiềm năng mọi lúc mọi nơi.
Các thành phần của một địa chỉ website
Giao thức
Giao thức mạng được gọi là địa chỉ IP, bao gồm:
• Giao thức truyền siêu văn bản (HTTP) hỗ trợ người dùng truy cập vào các trang
web bảo mật (HTTPS), chuyên sử dụng cho các trang web thương mại điện tử
hoặc cổng thông tin yêu cầu mọi người phải đăng nhập.
• Giao thức truyền tệp (FTP) được sử dụng để gửi email và truyền tệp.
11
Các giao thức được tách ra khỏi phần còn lại của địa chỉ website bởi dấu hai chấm. Một
số trình duyệt như Firefox hoặc Chrome không hiển thị giao thức trong thanh địa chỉ.
Bên cạnh đó, trình duyệt Opera chỉ xuất hiện khi bạn nhấp vào thanh địa chỉ.
Đường dẫn và tên tệp
Đường dẫn nghĩa là cho bạn biết trình duyệt sẽ mở thư mục hoặc tệp nào và được phân
biệt chữ hoa, chữ thường. Nếu khơng có đường dẫn nào được chỉ định, thì “Trang chủ”
hoặc tệp “index.html” sẽ được hiển thị.
Với bài viết trên, Bizfly đã giúp bạn hiểu rõ hơn về địa chỉ website. Đừng quên truy cập
Bizfly.vn để cập nhật thêm những thơng tin về gói dịch vụ thiết kế website chun
nghiệp, uy tín tồn diện phù hợp với mọi lĩnh vực doanh nghiệp nhé.
1.2. GIỚI THIỆU CẤU TRÚC HTML VÀ THẺ HTML
1.2.1. Cấu trúc trang web
Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language - HTML) khơng
phải một ngơn ngữ lập trình, mà là các quy ước được xây dựng để thiết kế Web, giúp tạo,
chia sẻ các tài liệu điện tử tích hợp đa phương tiện qua Internet và được hiển thị bởi
những trình duyệt Web. HTML cho phép áp dụng siêu liên kết tới tài liệu và trình bày tài
liệu với định dạng phù hợp với hệ thống hiển thị văn bản.
- HyperText: Là một từ hay một cụm từ dùng để tạo liên kết giữa các trang web.
- Markup: Là cách định dạng văn bản để trình duyệt hiểu và thơng dịch được.
- Language: Là tập hợp những quy luật để định dạng văn bản trên trang web.
Một trang Web dạng trang HTML là một tập tin văn bản ASCII nên có thể soạn
thảo bằng bất kỳ một phần mềm nào như Notepad, Wordpad, Microsoft Word...Ngồi ra
có rất nhiều phần mềm chuyên hỗ trợ cho việc thiết kế và quản lý Website dễ dàng như
Microsoft FrontPage, DreamWaver, Coffecup HTML Editor, NotePad++...
Trang HTML được cấu trúc bởi các thẻ (Tag), mỗi thẻ có một hay nhiều thuộc tính
(Attribute). Nội dung một trang HTML sẽ đặt giữa hai thẻ <HTML>…</HTML> và
thường được chia làm 2 phần:
- Phần đầu (Header): Đặt giữa 2 thẻ <HEAD>...</HEAD>, chứa các thông tin tổng
quát về trang Web như thơng tin hiển thị trên thanh tiêu đề trình duyệt, bảng mã sử
dụng…và các thông tin này không được hiển thị trên trình duyệt.
- Phần thân (Body): Nội dung chính của trang web đặt giữa cặp thẻ <BODY> và
</BODY>.
Chú ý:
- Thẻ chú thích: <!-- nội dung cần chú thích --> nội dung nằm giữa thẻ này sẽ
được bỏ qua, không hiển thị lên trên trình duyệt.
- Phần lớn các thẻ HTML có dạng với chức năng quy định cách thức hiển thị của
các thành phần lên trên trang web:
<Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…>Chuỗi văn bản</Thẻ>
hoặc đơn giản là: <Thẻ>Chuỗi văn bản</Thẻ>
- Một số phần tử khơng có bất kỳ nội dung nào kèm theo và được gọi là phần tử
trống, có dạng <Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…/> hay </Thẻ>
- Các thẻ không phân biệt hoa thường, và có thể lồng vào nhau.
12
- Để xây dựng một trang HTML có thể sử dụng các phần mềm soạn thảo như
NotePad, Notepad++, FrontPage...để soạn thảo các nội dung và lưu thành các định dạng
như HTML, HTM...
- Một trang HTML được biên dịch bằng các trình duyệt như Explorer, Firefox...
Ví dụ: Trang HTML đơn giản
<HTML>
<HEAD>
<!-- Đây là phần đầu trang -->
<TITLE>Siêu thị SuperMarket</TITLE>
</HEAD>
<BODY>
<!-- Đây là phần thân trang -->
<P ALIGN="center">
<B>Welcome to SuperMarket</B></P>
</BODY>
</HTML>
1.2.2. Các thẻ HTML thông dụng
- Thẻ <HTML></HTML>: Quy định phần bắt đầu và kết thúc của trang web tĩnh.
- Thẻ <HEAD></HEAD>: Đánh dấu điểm bắt đầu của phần đầu của trang web
đồng thời quy định một số kiểu cách của trang web như tiêu đề, font chữ, nhạc nền...
- Thẻ <TITLE></TITLE>: Chỉ định tiêu đề của của trang web. Tiêu đề này sẽ
xuất hiện trên thanh tiêu đề của trình duyệt. Thẻ này chỉ hợp lệ khi đặt trong cặp thẻ
<HEAD>.
Hình 1- 5. Tiêu đề của trang web xuất hiện trên trình duyệt
- Thẻ <BGSOUND>: Thiết lập nhạc nền cho trang web. Thẻ này được đặt trong
phần đầu trang. Ðịnh nghĩa như sau:
<BGSOUND SCR=url LOOP=n>
Trong đó:
Url: Đường dẫn tới tập tin nhạc (các định dạng là wav, au, midi…)
N: Số lần lặp lại bài nhạc. Nếu n= -1 hoặc infinite thì sẽ lặp đến khi đóng trang
Web.
Ví dụ: Đặt nhạc nền cho trang Web.
13
<HTML>
<HEAD>
<TITLE>Nhạc nền </TITLE>
<BGSOUND SCR="sound/maitruongxua.wav" LOOP=-1>
</HEAD>
<BODY> Bạn đang nghe bài hát “Mái trường xưa”</BODY>
</HTML>
- Thẻ <BODY></BODY>: Thẻ này dùng chỉ định điểm bắt đầu và kết thúc phần
thân trang Web. Thẻ này được định nghĩa như sau:
Bảng 1- 1. Thuộc tính thẻ <body>
Thuộc tính
Diễn giải
BACKGROUND =url
Chỉ định ảnh nền cho trang Web.
Url là địa chỉ và tên tập tin làm ảnh nền.
BGCOLOR=color
Chỉ định màu nền cho trang web. color là màu dạng
#nnnnnn với n:0,1,...,F, hoặc là tên các màu đã quy định
trước như: aqua, black, fuchsia, gray, green, lime, maroon,
navy, olive, purple, silver, teal, white, yellow, red, blue…
BGPROPERTIES=FIXED
Chỉ định ảnh nền trang web không cuộn khi cuộn thanh
cuộn
LEFTMARGIN=n
Chỉ định lề trái trang Web, n là 1 số nguyên dương tính
theo đơn vị đo lường: mm, cm, pixel.
LINK=color
Chỉ định màu cho các Hyperlink khi chưa được xem .
TEXT=color
Chỉ định màu văn bản trong trang Web.
TOPMARGIN=n
Chỉ định lề trên trang Web, n là 1 số nguyên dương tính
theo đơn vị đo lường: mm, cm, pixel.
VLINK=color
Chỉ định màu cho các Hyperlink khi đã được xem.
Ví dụ 1: Đặt màu nền và màu chữ cho trang web
<BODY BGCOLOR=YELLOW TEXT=#800000>
HTML là ngơn ngữ đánh dấu
</BODY>
Ví dụ 2: Định dạng trang web: màu chữ, ảnh nền, căn trên, căn trái, màu liên kết.
14
<HTML>
<HEAD>
<TITLE>Web demo</TITLE></HEAD>
...............................................................
</BODY> </HTML>
*) Thẻ định dạng kí tự
- Thẻ <BASEFONT></BASEFONT>: Chỉ định phơng chữ, cỡ chữ, màu chữ cho
các văn bản không được định dạng.
<BASEFONT SIZE=n FACE=name COLOR=color>
Trong đó:
SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7. Giá trị mặc nhiên là 3.
FACE=name: Tên phông chữ.
COLOR=color: Màu chữ.
- Thẻ <FONT></FONT>: Chỉ định phông chữ, cỡ chữ, màu văn bản:
<FONT SIZE=n FACE=name COLOR=color>
Trong đó:
SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7.
FACE=name: Tên phơng chữ.
COLOR=color: Màu chữ.
Bảng 1- 2. Kích thước Font chữ
HTML
Kết quả
<BASEFONT SIZE=3>
<FONT SIZE=5> Kích thước văn bản là 5</font>
<P><FONT SIZE=+1>Kích thước văn bản
</P></FONT>
<P><FONT SIZE=+2>Kích thước văn bản
</P></FONT>
<P><FONT SIZE=-1>Kích thước văn bản
</P></FONT>
là
Kích thước văn bản là 5
4 Kích thước văn bản là 4
là
5 Kích thước văn bản là 5
là
2 Kích thước văn bản là 2
- Thẻ <B></B>: Hiển thị văn bản kiểu chữ in đậm.
- Thẻ <I></I>: Hiển thị văn bản kiểu chữ nghiêng.
- Thẻ <U></U>: Hiển thị văn bản kiểu chữ gạch dưới.
- Thẻ <S></S>: Hiển thị văn bản kiểu chữ gạch giữa.
Bảng 1- 3. Các kiểu chữ trong HTML
HTML
Kết quả
Dòng chữ này thường
Dòng chữ này thường
15
<B>Dòng chữ này đậm</B>
<I>Dòng chữ này nghiêng</I>
<FONT COLOR="#800000" FACE="Verdana">Đoạn văn
thứ nhất màu đỏ có phơng là Verdana.</FONT><P>
<FONT COLOR="black" FACE="Verdana">Ðoạn văn thứ
hai màu đen có phơng là Verdana.</FONT></P>
<B><I>Dịng chữ này vừa đậm vừa nghiêng</I></B>
Dòng chữ này đậm
Dòng chữ này nghiêng
Ðoạn văn thứ nhất màu
đỏ có phơng là Verdana.
Ðoạn văn thứ hai màu
đen có phơng là Verdana.
Dịng chữ này vừa đậm
vừa nghiêng
<P ALIGN="center"><FONT FACE="Verdana">Ðoạn căn Ðoạn căn trái
trái</FONT>
<P ALIGN="center"><FONT FACE="Verdana">Ðoạn căn
Ðoạn căn giữa
giữa</FONT>
<P ALIGN="right"><FONT FACE="Verdana">Ðoạn căn
Ðoạn căn phải
phải</FONT>
- Thẻ <STRONG></STRONG>:Hiển thị văn bản đậm theo logic type
- Thẻ <EM></EM>: Hiển thị văn bản nghiêng theo logic type
- Thẻ <STRIKE></STRIKE>: Hiển thị văn bản gạch dưới theo logic type
- Thẻ <SUB></SUB>: Hiển thị văn bản dạng chỉ số (A2)
- Thẻ <SUP></SUP>: Hiển thị văn bản dạng mũ theo (A2)
+ Thẻ <SMALL> </SMALL>: Hiển thị thu nhỏ chữ
+ Thẻ <BIG> </BIG>: Hiển thị phóng lớn chữ
16
Bảng 1- 4. Các dạng hiển thị văn bản trên web
HTML
Kết quả
Dịng này thơng thường
Dịng này thơng thường
<STRONG>Dịng này đậm</STRONG>
Dịng này đậm
<EM>Dòng này nghiêng</EM>
Dòng này nghiêng
<STRIKE>Dòng này gạch giữa</STRIKE>
Dòng này gạch giữa
<STRONG><EM>Dòng này vừa đậm vừa nghiêng
</EM></STRONG>
Dòng này vừa đậm vừa
nghiêng
<EM><U>Dòng
dưới</U></EM>
này
vừa
nghiêng
vừa
gạch Dòng này vừa nghiêng
vừa gạch dưới
H<sub>2</sub>SO<sub>4</sub>
H2SO4
x<sup>y</sup>
x
y
+ Thẻ <BR></BR>: Ngắt xuống dòng mới nhưng vẫn thuộc cùng một đoạn hiện
hành. Thẻ </BR> khơng nhất thiết phải có.
+ Ký tự đặc biệt: Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt, bao gồm
cả ký hiệu < (nhỏ hơn) và > (lớn hơn), bởi những ký hiệu này được dùng để chỉ các thẻ
nên không thể dùng chúng như trong HTML. Những ký tự đặc biệt như vậy được đánh
dấu trong HTML dưới dạng: &XXXX;
Trong đó XXXX là tên mã (Code Name) cho ký tự đặc biệt đó:
Bảng 1- 5. Kí tự đặc biệt
Một số ký tự đặc biệt
HTML
<
>
>
<
&
&
"
"
Khoảng trống
Ví dụ: Một số kí tự đặc biệt thường gặp
HTML
Kết quả
<b> C H E E S C H E E S E
E</b>
*) Thẻ đường kẻ ngang
- Thẻ <HR>: Kẻ thêm đường thẳng nằm ngang trong trang Web. Thẻ được định
nghĩa như sau:
<HR ALIGN=align-type COLOR=color NOSHADE SIZE=n WIDTH=m>
Trong đó:
ALIGN=align-type: căn lề cho đường kẻ ngang. Align-type có thể là: left, right, hay
17
center.
COLOR=color: màu đường thẳng ngang
NOSHADE: khơng có bóng đổ
SIZE=n : độ dày của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị
đo lường được thiết lập.
Ví dụ: Thiết lập đường kẻ
Kết quả
HTML
NOSHADE SIZE=3 WIDTH=200>
SIZE=2 WIDTH=150>
COLOR=black
*) Chèn hình ảnh
- Thẻ <IMG>: Thêm hình ảnh vào trang Web.
Trong đó:
ALIGN=align-type: Lề cho ảnh hay cho văn bản bao quanh ảnh. Giá trị có thể là
TOP, MIDDLE, BOTTOM, LEFT, RIGHT.
ALT=text: Văn bản hiển thị khi di chuyển Mouse đến hình ảnh, hay thay thế cho
hình ảnh khi chức năng “Show Picture” trong trình duyệt bị tắt.
SRC=url: Chỉ định địa chỉ hình ảnh.
BORDER=n: Độ dày đường viền ảnh. Nếu ảnh được dùng cho Hyperlink thì
đường viền có màu trùng với màu Hyperlink. Nếu ảnh khơng dùng cho hyperlink thì
đường viền khơng hiển thị.
HEIGTH=n, WIDTH=n: Chỉ độ cao và độ rộng của ảnh. Ðơn vị bằng pixel.
HSPACE=n, VSPACE=n: Chỉ định khoảng cách từ ảnh đến văn bản quanh nó
theo chiều ngang và dọc.
Ví dụ: Chèn hình ảnh và hiển thị văn bản: “Viettel khởi động chương trình “Tơi
sinh viên 2014””khi di chuột vào ảnh
<A HREF="index.htm">
ALT="Viettel khởi động chương trình “Tơi sinh viên 2014” "ALIGN=MIDDLE HSPACE=5 VSPACE=5> </A>
</A></P>
18
Hình 1- 6. Tiêu đề của hình ảnh khi di chuột
*) Định dạng đoạn
- Thẻ <P></P>: Ngắt văn bản sang đoạn (Paragraph) mới. Thẻ </P> cuối đoạn
không nhất thiết phải có.
<P ALIGN=align-type> Đoạn văn bản </P>
ALIGN=align-type: Chỉ định kiểu căn đoạn. Align-type có thể: left, right hoặc
center.
- Thẻ <OL>: Tự động đánh số đầu mỗi đoạn.
Bảng 1- 6: Đánh chỉ số đầu cho đoạn văn bản
Kết quả
HTML
<OL START=1 TYPE=1>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3 </OL>
1.
2.
3.
Yếu tố 1
Yếu tố 2
Yếu tố 3
Trong đó:
START=n: chỉ định chỉ số bắt đầu
TYPE=order-type: chỉ định kiểu chỉ số. Có thể là một trong các giá trị sau:
A: sử dụng ký tự lớn A,B,C,...
a: sử dụng ký tự nhỏ a,b,c,...
I: sử dụng số La Mã lớn I,II,III,...
i: sử dụng số La Mã nhỏ i,ii,iii,...
1: sử dụng số 1,2,3,...
- Thẻ <UL>: tự động đặt ký hiệu đầu mỗi đoạn trong danh sách.
Bảng 1- 7: Đặt kí hiệu đầu đoạn văn bản
Kết quả
HTML
<UL>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</UL>
§ Yếu tố 1
§ Yếu tố 2
§ Yếu tố 3
- Thẻ tạo khối trích dẫn <BLOCKQUOTE> </BLOCKQUOTE>: Khối trích dẫn
được dùng trong các trường hợp sử dụng các trích dẫn mở rộng. Tồn khối trích dẫn sẽ
19
được căn lề thụt vào cả ở hai phía và tạo thành một khối riêng so với các đoạn khác.
1.2.3 Các thẻ HTML đặc biệt
*). Tạo bảng (Table)
- Thẻ <TABLE> </TABLE>: Tạo một bảng trên trang web.
Trong đó:
ALIGN=align-type: Lề của bảng theo chiều ngang, có giá trị là “left” hoặc “right”,
“center”.
BACKGROUND=url: Chỉ định ảnh nền của bảng
BGCOLOR=color-type: Màu nền của bảng
BORDER=n: Đường viền bảng, n tính bằng pixel
CELLPADDING=n: Khoảng cách từ ơ tới nội dung của ô.
WIDTH=n: độ rộng của bảng.
- Thẻ <TR></TR>: Thẻ cho phép tạo dịng trong một bảng
Trong đó:
ALIGN=align-type: Lề của các ơ trong dịng, có giá trị là “left” hoặc “right”,
“center”.
BACKGROUND=url: Chỉ định ảnh nền của dòng.
BGCOLOR=color-type: Màu nền của dòng
VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ơ trên dịng. Giá
trị có thể là: top, bottom, middle.
- Thẻ <TD></TD>: Sử dụng để tạo ô trong các dịng của bảng.
Trong đó:
ALIGN=align-type: Lề văn bản trong ơ, có giá trị là left, right hay center.
BACKGROUND=url: Chỉ định ảnh nền cho ô.
BGCOLOR=color-type: Màu nền của ô.
COLSPAN=n: Trộn n ô gần nhau theo hàng ngang.
ROWSPAN=n: Trộn n ô gần nhau theo hàng dọc.
VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô.
- Thẻ <TH>: tương tự như TD chỉ khác là văn bản được in đậm, căn giữa
Bảng 1- 8: Cấu trúc thẻ làm việc với bảng
Thẻ
<TABLE>
ý nghĩa
Tạo bảng
20
<TR>
Tạo dịng
<TD>
Tạo ơ
<TH>
Tạo ơ tiêu đề (Chữ in đậm, căn giữa)
<CAPTION> Mặc định tiêu đề của bảng nằm ở trên và căn lề giữa.
Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính
ALIGN bên trong CAPTION.
Ví dụ: Tạo một bảng thơng tin
<TABLE BORDER=1 WIDTH=100%>
<CAPTION> Bảng thơng tin</CAPTION>
<TR><TD> Ơ 11<TD> Ô 12
<TR><TD> Ô 21<TD>Ô 22
</TABLE>
Ví dụ: Tạo bảng và thực hiện trộn 2 ô trong bảng
<TABLE BORDER=1 WIDTH=100%>
<CAPTION> Tạo bảng và trộn ơ </CAPTION>
<TR><TD>Ơ 11<TD COLSPAN=2>
Ơ 12 trải dài trên 2 ơ
<TR><TD>Ơ 21<TD>Ơ 22<TD>Ơ 23
</TABLE>
*). Tạo liên kết (Hyperlink)
- Thẻ <a> </a>: tạo liên kết để đến các trang web khác.
<A HREF=url>Chuỗi diễn giải Hyperlink</A>
Url: Là địa chỉ trang Web cần liên kết đến
Ví dụ: Tạo các liên kết đến trang Web trên Internet
<A HREF="">Website Microsoft</A>
<A HREF="index.htm">Liên kết đến trang chủ index.htm</A>
<A HREF=”../../default.htm”>Welcome to Siêu thị SuperMarket </A>
<A HREF=”images/quangcao.gif”>Welcome to Sieu Thi Bai Tho</A>
<A HREF="sample.htm" TARGET="viewer">Liên kết đến trang sample.htm</A>
Chú ý:
- Ngoài việc tạo liên kết cho các đoạn text ra có thể liên kết hình ảnh.
<A HREF=""><IMG SRC="images/bullet.gif">
Click vào ảnh này để liên kết đến trang Web của Microsoft </A>
- Liên kết để gửi thư điện tử
<A HREF=Dia_Chi_E-mail>Chuỗi diễn giải liên kết gởi E-mail</A>
Ví dụ: <A HREF="mailto:"> </A>
21
*). Tạo khung (Frame)
- Thẻ <FRAMESET> <FRAME>: Sử dụng để chia màn hình cửa sổ trình duyệt
thành nhiều khung (Frame). Thẻ <FRAMESET> được kết hợp với thẻ <FRAME> để
định nghĩa một khung.
- Thẻ <IFRAME>: Để chèn khung vào bên trong trang Web.
Ví dụ: Tạo trang Web có tên là home.htm chứa 2 khung, khung bên trái chứa nội
dung trang Web page_1.htm và khung bên phải chứa nội dung trang Web page_2.htm.
<HTML><HEAD>
<TITLE>Trang web có 2 khung</TITLE></HEAD>
<FRAMESET COLS="150,*">
SCROLLING="no">
<FRAME NAME="noidung" SRC="page_2.htm">
</FRAMESET></HTML>
- Mỗi khung có 1 tên, ở ví dụ trên khung trái có NAME="mucluc" và khung phải có
NAME="noidung".
- SRC=url: Để chỉ định trang Web hiển thị trên khung
- Ðể các liên kết trong Frame “mucluc” liên kết đến các trang page_1.htm,
page_2.htm và sẽ hiển thị trong khung noidung, ta chỉ định:
<FRAME NAME=”mucluc” TARGET="noidung" SRC="page_1.htm">
hoặc là trong từng liên kết có khai báo thuộc tính TARGET:
<A HREF="page_2.htm" TARGET=”noidung”>page 2</A>
hoặc là trang Web page_1.htm trong phần đầu <HEAD></HEAD> có khai báo sau:
<BASE TARGET="noidung">
- Ðể không xuất hiện thanh cuộn và đường viền khung, thêm thuộc tính
SCROLLING="no" và FRAMEBORDER=0 vào thẻ <FRAME>
*). Tạo Form
- Thẻ <FORM>: Được sử dụng để định nghĩa một Form trong trang Web, chứa các
đối tượng để tương tác với người dùng.
<FORM METHOD="POST" ACTION=url NAME=tên>
trong đó:
+ ACTION=url: Chỉ định địa chỉ trang sẽ chuyển đến khi người dùng click vào
nút Submit.
+ METHOD: Chỉ định phương thức gửi dữ liệu. Có giá trị bằng POST hoặc GET.
+ NAME: Tên của form.
- Thẻ <INPUT>: Định nghĩa các đối tượng trên Form. Bao gồm các thuộc tính:
+ TYPE="text": Chỉ định loại đối tượng trên Form, có thể nhận các giá trị:
- Text: Hộp nhập dữ liệu
- Hidden: Hộp nhập dữ liệu ẩn. (khơng nhìn thấy)
- Password: Hộp nhập mật khẩu. Thơng tin nhập vào giấu bằng kí tự *.
- Radio: Tạo các nút lựa chọn. (Chọn một trong nhiều)
22
