Bài 1: Những khái niệm căn bản về mạng máy tính

Mục đích và yêu cầu:

- Nắm được các khái niệm cơ bản nhất về mạng máy tính.
- Biết cách cài đặt giao thức TCP/IP và web server.

Yêu cầu:
- Một tờ giấy trắng
- Một gói café + 1 cốc nước nóng, hoặc một ít chè xanh.
- Bộ cài Windows.
- Bộ cài XAMPP.

Bắt đầu:
Bước 1: Ghi vào tờ giấy dòng chữ: "Đang bận làm việc, không tiếp khách, chỉ tiếp bạn gái " rồi
dán trước cửa hoặc trên bàn làm việc
Bước 2: Pha một cốc café.
Bước 3: Bắt đầu với những khái niệm:

I. Khái niệm cơ bản:

1. Mạng máy tính: Là 2 hay nhiều máy tính được kết nối với nhau.
2. Máy chủ - Máy khách:

Trong mạng máy tính, máy chủ (hay còn gọi là server) là một máy tính được sử dụng để các máy
tính khác truy cập. Các máy tính truy cập vào 1 máy chủ được gọi là máy khách.

Như vậy, 1 máy tính trong mạng có thể vừa là 1 máy chủ (khi có máy khác truy cập đến nó), vừa
là một máy khách (nếu nó truy cập đến một máy tính khác). Vì vậy đừng nên nghĩ rằng máy chủ
là 1 cái gì đó cao siêu cho mệt óc

3. Giao thức mạng:

Các máy tính trên mạng "nói chuyện" với nhau thông qua một ngôn ngữ đặc biệt gọi là các giao
thức mạng. Có rất nhiều giao thức khác nhau, mỗi giao thức có 1 nhiệm vụ riêng. Ở đây tôi tạm
chia ra làm 2 nhóm giao thức:
- Giao thức truyền dữ liệu, chuyên dùng để vận chuyển dữ liệu giữa 2 máy tính.
- Giao thức xử lý dữ liệu, có nhiệm vụ xử lý dữ liệu nhận được từ giao thức truyền dữ liệu

Túm lại: Không nên phát hoảng khi nghe thấy 2 từ giao thức. Chẳng qua nó chỉ là 1 dạng ngôn
ngữ để trao đổi với nhau mà thôi. Và bạn cứ yên chí rằng nếu thích, bạn có thể tự định nghĩa ra
một cái giao thức nào đó. Chẳng hạn như các chương trình chat của Yahoo, hay các chương trình
remote trojan… Chúng tự đẻ ra các giao thức riêng dựa trên nền giao thức TCP/IP đấy.

4. Chùm giao thức TCP/IP

Giao thức TCP/IP là 1 giao thức được sử dụng để truyền dữ liệu giữa 2 máy tính. Theo giao thức
này, mỗi máy tính sẽ có 1 địa chỉ xác định trên mạng gọi là địa chỉ IP. Địa chỉ IP là một cụm chữ
số có dạng a.b.c.d (a,b,c,d là các số từ 0 đến 255). VD: 174.178.0.1.
Giao thức TCP/IP chỉ có nhiệm vụ duy nhất là truyền dữ liệu giữa 2 máy tính và đảm bảo giữ
nguyên vẹn dữ liệu khi truyền đi. Ngoài ra nó chẳng cần biết dữ liệu đó là gì và được xử lý như
thế nào.

Dựa trên khả năng vận chuyển của giao thức TCP/IP, người ta xây dựng nên một nhóm các giao
thức khác chuyên xử lý dữ liệu nhận được từ TCP/IP, gọi là chùm giao thức TCP/IP hay họ giao
thức TCP/IP.

Để phân chia các giao thức con trong chùm giao thức TCP/IP, người ta sử dụng một khái niệm
khác gọi là Cổng giao thức. Đây là 1 con số nguyên từ 0 đến 32767 thì phải :p. Mỗi giao thức
con trong chùm giao thức sẽ chiếm hữu một cổng riêng. Thông thường thì mỗi chương trình ứng
dụng trên server sẽ chịu trách nhiệm mở một cổng TCP/IP, định nghĩa giao thức cho cổng đó, và
sau đó là lắng nghe các yêu cầu từ máy khách và xử lý các yêu cầu đó.

Như vậy, trong hệ giao thức TCP/IP, một máy khách sẽ truy cập thành công đến máy chủ nếu
như nó có địa chỉ IP và cổng đang mở của dịch vụ trên máy chủ.

Chẳng hạn: Với 1 máy chủ quản lý web (web server), chúng ta cần phải có một ứng dụng web
gọi là web server. Ứng dụng này sẽ mở 1 cổng (mặc định là 80) và xử lý các tín hiệu đến từ cổng
đó.

Bây giờ hãy nhấp 1 ngụm café cho tỉnh táo đã

II. Trang Web tĩnh và Trang Web động

1. Trang web tĩnh và trang web động

Bạn đã từng xây dựng một trang Web và đưa nó lên mạng? Trang web của bạn thật là thú vị (ít
nhất là theo ý nghĩ của bạn) và tất nhiên bạn muốn tham khảo ý kiến của người đọc? Chẳng nhẽ
bạn lại cho số điện thoại và yêu cầu người góp ý phải gọi điện đến? Hic… Đảm bảo sẽ chẳng có
ma nào thèm gọi điện.
Bạn muốn "xin" một ít thông tin về người duyệt Web… hic. Làm cách nào bây giờ???
Vâng, đó chính là nhược điểm của cái gọi là trang web tĩnh. Đó là các trang Web không cho
phép bạn có thể tương tác với người dùng (chẳng hạn như là trao đổi hay thu thập các thông tin
từ phía người dùng). Nó là các trang web có đuôi *.htm thông thường. Ngược lại, các trang Web
động cho phép bạn nhận thông tin từ người dùng, xử lý thông tin đó, và có thể đáp trả lại các yêu
cầu của họ. Xem ra nó cũng linh động ra phết đấy chứ?
Để làm được điều đó, tất nhiên là bạn phải … theo dõi các bài viết này

2. Lập trình Script

Các trang web nguyên thuỷ sử dụng ngôn ngữ định dạng chuẩn là HTML (HyperText Markup
Language). HTML chuẩn chỉ bao gồm các cặp thẻ đánh dấu để định khuôn dạng của tài liệu. Tuỳ
theo tên thẻ là gì mà trình duyệt sẽ tự động hiểu và làm các công việc do thẻ đó quy định. Chẳng
hạn như cặp thẻ <B>….</B> quy định đoạn văn bản trong đó sử dụng chữ đậm. Vì vậy, trên
thực tế người ta không coi nó là một ngôn ngữ (vì nó chẳng liên quan gì đến những thứ mà ta
hay gặp trong lập trình như biến, câu lệnh rẽ nhánh, lặp…). Cũng chính vì nguyên nhân này, nó
phải tự mở rộng bằng cách cho phép "nhúng" vào bản thân nó một số đoạn mã lệnh chương trình
đặc biệt, người ta thường gọi chúng là các đoạn mã Script hay các đoạn mã nhúng . Ngôn ngữ
sử dụng trong các đoạn mã lệnh đó gọi là các ngôn ngữ Script. Các ngôn ngữ script thường đơn
giản và không có nhiều sức mạnh như các ngôn ngữ "kinh điển" cùng tên, hay nói cách khác,
chúng là một phần rất nhỏ của một ngôn ngữ nào đó được tích hợp vào trình duyệt để thực hiện
một số thao tác nhất định.
Chi tiết về ngôn ngữ HTML đã có đầy rẫy trên Internet, cũng như ở các hiệu sách, nên chúng
không được nhắc lại ở đây. Nếu các bạn chưa biết gì về nó thì bạn phải tìm đọc các tài liệu về
HTML trước khi tiếp tục theo dõi khoá học này.

Lập trình Script ở máy khách

Như tên gọi của nó, lập trình script ở máy khách là viết các đoạn script chạy trên máy khách. Các
đoạn mã này được máy chủ gửi kèm trong tài liệu, đưa về máy khách và được thực hiện ở đây.
Trong tài liệu gửi về trình duyệt, các đoạn mã này thường được tìm thấy trong cặp thẻ <Script
language ="xxxxxx">…</Script>.
Có nhiều ngôn ngữ script phía máy khách. Nổi tiếng hơn cả là Javascript. Kế đến là VbScript và
PerlScript.
Vì tài liệu này chủ yếu tập trung vào PHP - một ngôn ngữ script chạy trên máy chủ, nên chi tiết
những ngôn ngữ này không được nhắc đến trong tài liệu. Riêng về JavaScript, các bạn có thể tìm
thấy các tài liệu tiếng Việt qua trang tìm kiếm Vinaseek.com. Nếu có thời gian, tôi khuyên các
bạn nên tìm hiểu về chúng. Rất nhiều xảo thuật bắt mắt có thể tìm thấy trong các đoạn mã này.

Lập trình Script ở máy chủ

Trái ngược với lập trình Script ở máy khách (thực thi mã lệnh ở máy khách), lập trình script ở
máy chủ cho phép thực thi các đoạn mã ngay ở trên máy chủ. Không như các đoạn mã script
hoạt động ở máy khách, các tài liệu có chứa các đoạn mã script phía máy chủ thường được lưu ở
các file tài liệu có đuôi mở rộng riêng biệt, và các đoạn mã thi hành trên máy chủ cũng phải được
đặt trong một cặp thẻ đặc biệt tuỳ theo quy định của chương trình xử lý. Chú ý rằng đối với mỗi
loại ngôn ngữ server script sẽ có một chương trình xử lý riêng. Chẳng hạn các đoạn mã ASP
thường được đặt trong các file *.asp, và chúng được xử lý bằng file ASP.dll.
Chi tiết về cách thức hoạt động của loại này, có thể tóm tắt như sau:
- Bước 1: Client gửi yêu cầu đến máy chủ
- Bước 2: Web server kiểm tra xem yêu cầu đó cần loại tài liệu nào. Nếu đó là loại tài liệu có
chứa các đoạn mã server script, nó sẽ triệu gọi chương trình xử lý tương ứng với loại tài liệu đó
- Bước 3: Chương trình xử lý sẽ thực thi các đoạn mã server script trong tài liệu đó, và trả kết
quả (thường là dưới khuôn dạng HTML) về cho web server.
- Bước 4: Web server trả kết quả tìm được cho Client và ngắt kết nối.
Bây giờ, 5 phút dành cho café. Ơ nhưng mà hết café rồi, hix, thôi đi ngủ vậy
Thế giới Internet
Ở bài trước, các bạn đã biết một số khái niệm liên quan tới mạng máy tính. Để có một Website
trên Internet, bước đầu, bạn cần phải thiết kế và lập trình Website, chạy thử trên máy cá nhân.
Nếu thấy "ngon" và muốn đưa lên Internet, bạn cần phải đăng ký thuê một tên miền, một mảnh
"đất" (host) trên Internet, upload Website và tiếp đó, quảng cáo Website cho mọi người. Nếu
Website của bạn có nhiều lượt truy cập, bạn có quyền đặt các quảng cáo trên Website để kiếm
xiền

Bài viết này tập trung vào việc làm rõ các khái niệm có liên quan.

Tên miền

Ở bài trước, các bạn đã biết đến khái niệm địa chỉ IP (địa chỉ của một máy tính trên mạng, với
bản IPV4 có dạng x.y.z.t, trong đó x,y,z,t là một số nguyên từ 0 đến 255.

Tuy nhiên, địa chỉ IP là một dòng số không dễ nhớ tí nào. Ngay cả thần đồng toán học như
Lương Thế Vinh chắc cũng chỉ nhớ được đến vài trăm cái địa chỉ IP như vậy là cùng . Vì vậy
người ta đã phát minh ra một cái tên dễ chịu (dễ nhớ) hơn, đó chính là tên miền hay domain. Nói
ngắn gọn thì tên miền là một cái tên được viết bằng ngôn ngữ tự nhiên, sử dụng tập ký tự
[a..z,0..9,.,-] để chỉ đến một địa chỉ IP xác định. Ví dụ: phpvn.org

Để xác định một cái địa chỉ IP nào đó dựa trên tên miền, người ta phải sử dụng một hệ thống
máy chủ để ánh xạ từ tên miền thành IP.

Tên miền được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Chúng ta xác định số cấp lần
lượt từ phải sang trái bắt đầu từ 1, trong đó cấp lớn hơn là con của cấp nhỏ hơn
Ví dụ: cntt.dhsphn.edu.vn gắn với 203.162.18.59 trong đó:
vn: Nước Việt Nam (Cấp 1)
edu: Tổ chức giáo dục (Cấp 2)
dhsphn: Tên cơ quan (Cấp 3)
cntt: đơn vị nhỏ trong cơ quan (Cấp 4)

Đặc biệt: Tên localhost luôn được gắn với địa chỉ IP 127.0.0.1.

Hệ thống tên miền trên Internet

Hệ thống tên miền trên internet được quản lý thống nhất bởi một tổ chức quốc tế và được điều
khiển thông qua hệ thống máy chủ quản lý tên miền cấp cao nhất (TLD hay Top Level Domain).

Khi NSD gõ một địa chỉ URL vào ô address trên trình duyệt, nếu như phần đầu của địa chỉ này
xác định một địa chỉ IP, trình duyệt sẽ kết nối tới máy chủ có địa chỉ IP đó. Trong trường hợp
phần đầu của URL xác định một tên miền, tên miền này sẽ được gửi đến hệ thống máy chủ TLD,
từ đó qua các dịch vụ cung cấp domain uỷ quyền để tra địa chỉ IP tương ứng với tên miền. Sau
khi đã tìm thấy địa chỉ IP, hệ thống máy chủ TLD sẽ trả IP về cho trình duyệt và trình duyệt tiếp
tục kết nối tới máy chủ có IP đã nhận được để "đòi" thông tin.
Các tên miền được cung cấp tới tay người dùng thông qua các đại lý cho thuê tên miền, và
thường theo dạng thuê bao tên miền hàng năm.

Các dạng đuôi thông dụng:

• .com: Commercial: Dành cho các tổ chức thương mại, doanh nghiệp.
• .net (Network): Dành cho các nhóm làm việc trên mạng hoặc các trang web chung chung
(VD: noigiaitri.net ).
• .org (Organization): Dành cho các tổ chức nói chung (phi thương mại). vd: phpvn.org
• .gov (Government): Dành cho các cơ quan hành chính
• .edu (Education): Dành cho các tổ chức giáo dục
• .Các hệ thống tên miền cấp quốc gia khác (VD: .vn, .cn, .sg…)

Host

Thuật ngữ host ám chỉ một không gian lưu trữ trên hệ thống máy chủ và các dịch vụ kèm theo.

Chất lượng của host được đánh gía thông qua:

• Lượng băng thông được sử dụng hàng tháng (Tính theo GB/month hay MB/month)
• Chất lượng của máy chủ/hệ thống máy chủ (CPU, RAM…)
• Băng thông của máy chủ.
• Dung lượng ổ cứng chia sẻ
• Số lượng các host đặt trên cùng một hệ thống máy chủ
• Các dịch vụ kèm theo (email, web, ftp, hỗ trợ php, mysql…)
• Khả năng hỗ trợ số lượng user cùng truy cập đồng thời
• ...

Các dạng host

• Cụm máy chủ: Bao gồm nhiều máy chủ (từ vài máy chủ tới hàng ngàn máy chủ) cùng
làm việc song song. Đây là hệ thống với giá thành cực đắt, có thể lên tới hàng triệu dollar
như các "nông trại" máy chủ của Google. Hệ thống này có thể phục vụ cho hàng triệu
lượt truy cập cùng lúc.
• Máy chủ riêng (Dedicated Server) hay còn gọi là dạng thuê bao máy chủ riêng biệt, có
giá thành tương đối cao (hàng trăm dollar/tháng). Các máy chủ này có thể phục vụ hàng
trăm lượt truy cập đồng thời tuỳ thuộc vào cấu hình máy chủ.
• Máy chủ riêng ảo (VPS hay Virtual Private Server): Bao gồm một hoặc một số máy chủ
thực sự được chia thành nhiều máy chủ ảo. Loại này rẻ hơn máy chủ riêng (khoảng vài
chục dollar/tháng), tuy nhiên hiệu năng kém hơn do phải chia sẻ cho nhiều người dùng.
• Web hosting: Một khoảng không gian lưu trữ đặt trên một máy chủ nào đó. Theo khái
niệm này, một máy chủ có thể chia thành hàng ngàn Web Hosting. Đây là loại dịch vụ rẻ
 nhất, hiệu suất kém nhất do phải chia sẻ năng lực máy chủ cho quá nhiều người sử dụng
(vài dollar/tháng). Có một số loại hosting miễn phí, chủ yếu là để thử nghiệm dịch vụ
hoặc để quảng cáo, song rất dễ bị chết. Nếu bạn định làm một trang Web nghiêm chỉnh,
hãy từ bỏ ý định sử dụng host miễn phí.

Tải files lên host

Để tải file từ máy lên host, chúng ta có thể sử dụng các công cụ quản lý host (như CPanel) hoặc
sử dụng chương trình FTP

Quảng bá Website

Khi chúng ta đã có một Website trên Internet, chúng ta cần đăng ký Website vào các máy tìm
kiếm trong nước và thế giới (search engine) như: Google, Yahoo… Tiếp đó cần xây dựng các
chiến lược để nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. (VD: Alexa,
Google Rank…) Việc nâng cao thứ hạng Website sẽ giúp người sử dụng dễ dàng tìm đến
Website của chúng ta.

Một trong những chiến lược nhằm nâng cao thứ hạng Website là tối ưu từ khoá cho các hoạt
động tìm kiếm của search engine (SEO – Search Engine Otimization): Tối ưu tứ khoá liên quan
tới tên miền, tiêu đề, các trường mô tả từ khoá… (sẽ được học trong HTML).

Các bạn có thể tìm kiếm các nhà cung cấp các dịch vụ đăng ký tên miền, webhosting, các thủ
thuật SEO hay các công cụ đo đếm lượng truy cập (web hit counter) tại địa chỉ:
http://forwebmaster.intro.vn.
Bài 2: Cài đăt web server Apache, MySQL và PHP
Cài đăt web server Apache, MySQL và PHP.

1. Cài đặt giao thức TCP/IP

Các dịch vụ web server dựa trên nền giao thức TCP/IP. Vì vậy trước khi cài đặt server, ta phải
tiến hành cài đặt giao thức TCP/IP.

Để cài đặt giao thức TCP/IP, ta vào Control Panel, chọn Network. Nếu thấy dòng chữ TCP/IP đã
xuất hiện trong ô Configuration, tức là giao thức TCP/IP đã được cài đặt trên máy. Còn nếu
không, ta kích chuột vào Add. Hộp thoại Select Component hiển thị ra. Kích chọn tiếp Protocol
-> Add. Trong danh sách bên trái, chọn Microsoft. Sau đó sang danh sách bên phải, chọn
TCP/IP. Bấm Enter để bắt đầu quá trình cài đặt.

Trong quá trình cài đặt, nếu máy tính của bạn chưa có card mạng thì hệ thống sẽ yêu cầu cài một
trình điều khiển card mạng nào đó. Đừng lo, cứ chọn đại theo chỉ dẫn sẽ xong thôi.

Sau khi cài đặt xong, mở cửa sổ Command Prompt ra. Gõ lệnh
C:\ping 127.0.0.1
Nếu thấy có 4 dòng chữ có dạng:
Reply from 127.0.0.1: byte = xx time<xx ms TTL =xxx
Reply from 127.0.0.1: byte = xx time<xx ms TTL =xxx
Reply from 127.0.0.1: byte = xx time<xx ms TTL =xxx
Reply from 127.0.0.1: byte = xx time<xx ms TTL =xxx

tức là giao thức TCP/IP đã được cài đặt thành công.

Ghi chú: Dãy số 127.0.0.1 chính là địa chỉ IP mặc định của chính máy tính bạn đang sử dụng.
Bạn cũng có thể sử dụng cái tên localhost thay cho địa chỉ IP 127.0.0.1 để truy cập vào máy tính
của chính mình.

2. Cài đặt web server, PHP, MySQL:

Công cụ cài đặt ở đây được tôi lựa chọn là XAMPP - Bộ công cụ cài đặt trọn gói bao gồm Web
server Apache, bộ xử lý PHP, và CSDL My SQL. Các bạn có thể tham khảo chi tiết phần mềm
tại: http://www.apachefriends.org.

Trước khi cài đặt và vận hành hệ thống, hãy ngắt toàn bộ các website mặc định của IIS/PWS, và
tắt luôn dịch vụ nếu các bạn đã từng cài các webserver này. Nếu các bạn đang chạy Apache và
MySQL thì cũng gỡ bỏ (uninstall) đi.

Các bạn tiến hành cài đặt XAMPP vào một thư mục nào đó (chẳng hạn ở đây tôi chọn là
c:\xampp).

Sau khi cài đặt xong, các bạn đã có thể vận hành Apache, PHP và MySQL.
Để vận hành hệ thống, các bạn vào thư mục của hệ thống (c:\xampp theo ví dụ trên), chạy file
xampp-control.exe. Tiếp đó start các dịch vụ Apache và MySQL lên. Nếu quá trình khởi động
thành công, khi gõ địa chỉ http://localhost hoặc http://127.0.0.1 vào trình duyệt thì sẽ hiển thị
trang chủ XAMPP.

3. Một số thông tin về hệ thống:

- Thư mục tài liệu: Là thư mục gốc của Apache. Mọi địa chỉ URL gửi lên server sẽ được phân
tích thành đường dẫn tương ứng với đường dẫn của thư mục gốc ảo trên. Theo mặc định, thư
mục này được lưu trong thư mục cài đặt XAMPP với tên là htdocs (VD trên máy của tôi là
C:\xampp\htdocs
- Thư mục dữ liệu của MySQL: Nằm trong thư mục /mysql/data. Trong thư mục này, MySQL sẽ
lưu trữ các CSDL (Database) dưới dạng các thư mục, mỗi bảng trong CSDL được ghi trong một
file riêng biệt.
- Để thao tác với CSDL MySQL, các bạn có thể mở trình duyệt và vào trang
http://localhost/phpmyadmin/ . Chữ Localhost đã được giải thích ở trên.
- Để xem các thông tin của hệ thống, các bạn mở trang http://localhost/phpinfo.php

Căn bản về HTML

HTML: HyperText Markup Language. Đây là một ngôn ngữ đơn giản được sử dụng trong các tài
liệu siêu văn bản. Đừng choáng. Nó cũng chỉ là các tài liệu văn bản bình thường nhưng có chứa
các thành phần đặc biệt gọi là các thẻ (hoặc các cặp thẻ) đánh dấu. Dựa theo các cặp thẻ này mà
trình duyệt có thể biết được nó phải thực hiện cái gì. Bản chất của HTML không phải là một
ngôn ngữ lập trình nên các bạn cũng chẳng cần lo lắng đến những thuật toán lằng nhằng. Nó chỉ
là một "ngôn ngữ" để đánh dấu văn bản thôi.

Ví dụ đơn giản:
Hãy lấy một ví dụ đơn giản như sau:
<B>Xin chào, tôi là LGVT</B>
Các bạn chú ý: dòng chữ Xin chào, tôi là LGVT được đặt trong cặp chữ "<B>" và "</B>" Cặp
chữ này chính là ký hiệu của một cặp thẻ trong ngôn ngữ HTML, mà khi biên dịch ra, trình duyệt
sẽ hiểu là: Khi gặp thẻ "<B>", nó phải có trách nhiệm in tất cả các chữ sau đó thành chữ đậm cho
đến khi gặp thẻ "</B>".

Các bạn có thể hiểu các thẻ trong HTML như là các từ khoá trong Pascal vậy. Cũng đừng nên lo
lắng quá, vì bản thân HTML chỉ có khoảng hơn 20 thẻ thông dụng thôi.

Trong HTML, các thẻ có thể tồn tại đơn lẻ, hoặc tồn tại dưới dạng một cặp thẻ. Nếu tồn tại dưới
dạng 1 cặp thì thẻ bắt đầu gọi là thẻ mở và thẻ kết thúc gọi là thẻ đóng. Các bạn có thể hình dung
thẻ mở như từ khoá Begin và thẻ đóng như từ khoá End trong khối câu lệnh của Pascal vậy.

VD: Thẻ <img> là 1 thẻ đơn (không có thẻ đóng), có nhiệm vụ thông báo cho trình duyệt hiển
thị một hình ảnh nào đó.

Cặp thẻ <font></font> là 1 cặp thẻ, bắt đầu bằng thẻ <font> và kết thúc bằng thẻ </font>. Cặp
thẻ này quy định font chữ, màu chữ, kích cỡ chữ của đoạn văn bản nằm giữa.
Để soạn thảo một file HTML, các bạn có thể sử dụng bất kỳ trình soạn thảo nào, chẳng hạn như
NotePad hay thậm chí Turbo Pascal cũng được. miễn là sau đó các bạn Save As dưới dạng đuôi
*.htm. Còn để mở file này thì cứ việc kích đúp chuột vào đó, trình duyệt sẽ tự động mở ra cho
bạn. Tất nhiên cũng có nhiều chương trình soạn thảo cho phép sinh tự động mã HTML, nhưng để
cho các bạn nắm vững ngôn ngữ này, tôi yêu cầu các bạn phải tự soạn bằng tay trên NotePad.
Các ví dụ dưới đây mang tính chất tham khảo, các bạn có thể copy và lưu chúng dưới dạng file
.htm.

Cấu trúc của 1 thẻ trong HTML bao gồm:

- Dấu "<". Nếu là thẻ đóng thì sẽ bắt đầu bằng "</"
- Tên thẻ
- Các tham số khác nếu có. Nếu là thẻ đóng thì không cần tham số.
- Dấu ">".

Cấu trúc của một file HTML có dạng:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
phần thân tài liệu
</BODY>
</HTML>

Toàn bộ nội dung chính của trang HTML được đặt trong cặp thẻ <BODY></BODY>

3. Các thẻ xử lý font chữ:

a. Thẻ Meta:
Thẻ này có nhiều thuộc tính khác nhau và cũng làm nhiều nhiệm vụ khác nhau. Tuy nhiên ở đây tôi chỉ
nói về cách ứng dụng thẻ này để hiển thị các đoạn mã tiếng Việt.

Trước đây các loại font chữ tiếng Việt rất phong phú, điều này khiến cho người sử dụng tiếng Việt trên
thế giới phải than trời ầm ỹ cả lên. Rất may là tại thời điểm này, hầu hết các font chữ tiếng Việt thời "đồ
đá" không còn được ứng dụng trong thiết kế web nữa, thay vào đó là các chuẩn quốc tế Unicode.
Ở đây tôi xin giới thiệu 2 chuẩn Unicode tiếng Việt phổ biến và cách sử dụng thẻ meta cho từng trường
hợp cụ thể:
- Mã UTF-8: Là mã font Unicode rút gọn (biểu diễn font chữ theo kiểu 8 bit. Khi ta khai báo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-8. Và khi bạn
gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF-8.

Chẳng hạn, để trình duyệt hiển thị đúng bài thơ:

Trung thu là tết thiếu nhi
Tại sao người lớn lại đi chơi nhiều
Chơi nhiều thì sẽ làm liều
Làm liều lại đẻ ra nhiều thiếu nhi.

Thì đoạn mã HTML do ta sinh ra phải có dạng:

<HTML>
<BODY>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi
nhiều thà sẽ là m liều<BR>Là m liều lại đẻ ra nhiều thiếu nhi.<BR></p>
</BODY>
</HTML>
Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng việt theo kiểu UTF-8
(sử dụng bảng mã Unicode UTF-8), nhưng sẽ hơi khó chịu một tí .

- Mã UTF-16 bít: Là mã font Unicode 16 bít. Ta phải khai báo như sau:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-16 bit. Và
khi bạn gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF-
16 bít trên.

Chẳng hạn, để trình duyệt hiển thị đúng bài thơ:

Trung thu là tết thiếu nhi

Tại sao người lớn lại đi chơi nhiều
Chơi nhiều thì sẽ làm liều
Làm liều lại đẻ ra nhiều thiếu nhi.

Thì đoạn mã HTML do ta sinh ra phải có dạng:

<HTML>
<BODY>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif">
Trung thu l#224; t#7871;t thi#7871;u nhi<BR>T#7841;i sao ng#432;#7901;i l#7899;n l#7841;i #273;i
ch#417;i nhi#7873;u.<BR>Ch#417;i nhi#7873;u th#236; s#7869; l#224;m li#7873;u<BR>L#224;m
li#7873;u l#7841;i #273;#7867; ra nhi#7873;u thi#7871;u nhi<BR></p>
</BODY>
</HTML>
Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng Việt theo chuẩn này với
hệ thống bảng mã Unicode UCS2

Chú ý:
1: Một số chương trình soạn thảo có hỗ trợ chế độ hiển thị mã tiếng Việt trong quá trình soạn thảo. Khi đó
nếu các bạn mở chế độ mã HTML mà vẫn đọc được tiếng Việt như thường thì các bạn cứ ung dung gõ
tiếng Việt theo kiểu Unicode thông thường là được. Còn nếu nó hiển thị ra các ký tự loằng ngoằng thì các
bạn phải đoán mò ra dạng chuẩn mã hoá font của nó và sử dụng chế độ gõ chữ tương ứng.
2: Trong tài liệu này tôi sẽ đánh tiếng Việt thông thường, các bạn sẽ phải chịu trách nhiệm xử lý mã tiếng
Việt trong các đoạn ví dụ.

b) Cặp thẻ <font>…</font>

Cặp thẻ này quy định tên font, màu sắc, kích cỡ font. Nó có những thuộc tính sau:
Face: Tên của font, chẳng hạn: Arial, .VnTime, Times New Roman
Size: Kích cỡ của font, bé nhất là 1.
Color: Màu sắc cùa font, bao gồm dấu # và 6 chữ số hex tiếp theo quy định mã màu RGB
Ví dụ:
<HTML>
<BODY>
<p align ="center"><font face="Arial" size="5" color="#800000">Tết trung thu</font></p>
<p align="left" style="margin-left : 30"><font size ="2" name ="Verdana">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></font></p>
</body></html>

c. Các thẻ định dạng chữ nghiêng, đậm, gạch chân:

- Định dang chữ đậm:
Cặp thẻ <B>…</B> xác định đoạn văn bản ở giữa sẽ bị in đậm. Cặp thẻ này không có tham số kèm theo.
- Định dang chữ nghiêng:
Cặp thẻ <i>…</i> xác định đoạn văn bản ở giữa sẽ bị in nghiêng. Cặp thẻ này không có tham số kèm
theo.
- Định dang chữ gạch chân:
Cặp thẻ <u>…</u> xác định đoạn văn bản ở giữa sẽ bị gạch chân. Cặp thẻ này không có tham số kèm
theo.
Ví dụ:
<HTML>
<BODY>
<p align ="center"><font face="Arial" size="5" color="#800000"><B><I>Tết trung
thu</font></I></B></p>
<p align="left" style="margin-left : 30"><font size ="2" name ="Verdana">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></font></p>
</body></html>
Bây giờ chúng ta lần lượt đi qua các cặp thẻ hay sử dụng nhất. Xin nói thêm: thẻ có cấu trúc:
<tên_thẻ thuộc_tính1="gia_tri1" thuộc_tính2="gia_tri2">. Tất nhiên các bạn có thể bỏ một số
thuộc tính đi (lúc đó, các thuộc tính bị bỏ đi sẽ được đặt ngầm định bởi trình duyệt, rất khó chịu)

1. Các thẻ xử lý đoạn

a). Thẻ phân chia đoạn
Trong HTML, các đoạn tài liệu, văn bản, hình ảnh… được phân chia bằng cặp thẻ <P>văn
bản</P>
Thẻ <P> có 1 số thuộc tính sau:
Align: Thuộc tính này sẽ chứa 1 trong 3 giá trị:
- center: Đoạn tài liệu sẽ được canh chỉnh vào giữa
- left: Đoạn tài liệu sẽ được canh chỉnh theo lề trái
- right: Đoạn tài liệu sẽ được canh chỉnh theo lề phải
- justify: Đoạn tài liệu sẽ được canh chỉnh theo hai bên
Ví dụ:
<HTML>
<BODY>
<p align ="justify"> Thử một tí</p>
</BODY>
</HTML>

Style: Thuộc tính này sẽ quy định khoảng cách lề của đoạn. Trong thuộc tính này lại có các thuộc
tính con, tuy nhiên các thuộc tính con này được đặt cách nhau bằng dấu chấm phẩy. Tất nhiên
các bạn cũng có thể loại bỏ thuộc tính con:
- margin-left : x (x là số nguyên chỉ định chiều rộng của lề trái)
- margin-right : y (y là số nguyên chỉ định chiều rộng của lề phải)
- margin-top: z (z là số nguyên chỉ định chiều rộng của lề trên)
- margin-bottom: t(t là số nguyên chỉ định chiều rộng của lề dưới)
- line-height: u% (u: khoảng cách giữa các dòng tính theo đơn vị 100 %)
Ví dụ:
<HTML>
<BODY>
<p align ="center" style ="margin-left: 10; margin-right: 5; margin-top: 6; margin-bottom: 6">
Thử hai tí. Tí thứ 2 này xác định đoạn văn bản căn giữa, có lề trái = 10, lề phải bằng 5, lề trên =
6, lề dưới = 6. Hết tí thứ 2.</p>
<p align ="left" > Thử ba tí. Tí thứ 3 này xác định đoạn văn bản căn trái, các lề đặt theo mặc
định của trình duyệt</p>
<p align ="left" style="line-height: 150%" > Thử ba tí. Tí thứ 3 này xác định đoạn văn bản căn
trái, các lề đặt theo mặc định của trình duyệt</p>

</BODY>
</HTML>

b. Thẻ xuống dòng

Trong HTML, các ký tự xuống dòng không được sử dụng. Để ngắt một dòng nào đó, ta dùng thẻ
<BR>. Đây là 1 thẻ đơn:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>

</BODY>
</HTML>

Chú ý:
Một cặp thẻ khác cũng được sử dụng để canh chỉnh đoạn tài liệu hay bảng biểu:
- <center>…</center>: Xác định canh chỉnh một đoạn tài liệu hoặc bảng biểu vào giữa trang.

2. Các thẻ liên kết:

a. Thẻ liên kết với hình ảnh:

Trong HTML, chúng ta không thể chèn trực tiếp toàn bộ ruột gan của một file hình ảnh, mà ta
phải chỉ dẫn đến hình ảnh đặt bên ngoài. Để làm điều này, ta dùng thẻ <img>. Đây là 1 thẻ đơn.
Thẻ này có một số thuộc tính sau:
- Src: Xác định địa chỉ URL của hình ảnh:
- align: Xác định kiểu canh lề:
- right: Canh theo lề phải
- left:Canh theo lề trái
- center:Canh theo lề giữa.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" align = "right">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>

</BODY>
</HTML>
- border: Xác định chiều dày của viền bao quanh ảnh.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" border ="5">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>
</BODY>
</HTML>

b. Thẻ liên kết trang web.

Để tạo một liên kết tới một trang web khác, ta dùng cặp thẻ <a></a>. Cặp thẻ này có các thuộc
tính sau:
Href: Địa chỉ URL của trang web cần liên kết tới. bạn đã có một bookmark trên trang web, bạn
có thể trỏ đến vị trí của bookmark bằng cách dùng thuộc tính href với dấu # và tên bookmark.
name: Xác định tên của bookmark (điểm liên kết trong nội tại trang web).
Ví dụ, ta có 2 trang web:
Trang thứ nhất có địa chỉ là "tettrungthu.htm", có nội dung sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" border ="5">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm
liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>
</BODY>
</HTML>

Trang thứ 2 có tên là danhsachthovui.htm, có nội dung sau:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
Tet trung thu
</p>
</BODY>
</HTML>
Giả sử ta muốn thêm một liên kết với file "tettrungthu.htm" vào chữ Tet trung thu trong file
danhsachthovui.htm, ta phải chèn cặp thẻ <a>...</a> như sau:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<a href ="tettrungthu.htm">Tet trung thu</a>
</p>
</BODY>
</HTML>
Chú ý: cả 2 file này phải được đặt cùng thư mục. Trong trường hợp đặt khác thư mục các bạn
phải ghi rõ đường dẫn đến file kia.

4. Các cặp thẻ xử lý bảng:

Các bảng trong HTML được định nghĩa như sau:
Định nghĩa 1 bảng bởi cặp thẻ <table></table>
Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.
Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>
Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:
<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:

<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng
khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng
tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để
gộp các ô trống trong cùng 1 hàng lại với nhau.

Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:
<table>
<tr>
<td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Một số thuộc tính có liên quan:

Thẻ Table:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).

Ví dụ: Đoạn HTML sau đây trình diễn phần đầu của trang web phpvn.org:
Code:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">

<span style="font-family: Verdana,

sans-serif; font-size: 140%; ">PHP Vietnam Programmers</span>
</td>
<td align="right" class="catbg">
<img
src="http://www.phpvn.org/Themes/default/images/smflogo.gif" style="margin:
2px;" alt="" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0"
>

<tr>
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> Hello
<b>Admin</b></span>
</td>
<td class="titlebg2" height="32" align="right">
<span class="smalltext">January 27,
2007, 06:25:29 PM</span>
<a href="#" onclick="shrinkHeader(!
current_header); return false;"><img id="upshrink"
src="http://www.phpvn.org/Themes/default/images/upshrink.gif" alt="*"
title="Shrink or expand the header." align="bottom" style="margin: 0 1ex;"
/></a>

</td>
</tr>
<tr id="upshrinkHeader">
<td valign="top" colspan="2">
<table width="100%" class="bordercolor"
cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>
<td colspan="2"
width="100%" valign="top" class="windowbg2"><span class="middletext">
<a
href="http://www.phpvn.org/index.php?action=unread">Show unread posts since
last visit.</a> <br />

<a
href="http://www.phpvn.org/index.php?action=unreadreplies">Show new replies
to your posts.</a><br />
Total time
logged in: 20 hours and 1 minutes.<br /> </span>
</td>
</tr>
</table>
</td>
</tr>

</table>

Cách sử dụng mẫu biểu trong HTML:

Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể
là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ...

Mẫu biểu được bắt đầu bằng thẻ <form> và kết thúc bởi thẻ </form>. Giữa 2 cặp thẻ này, các
bạn có thể sử dụng các cặp thẻ HTML khác.
Thẻ form có một số thuộc tính sau:
- method
Thuộc tính này có 2 giá trị POST hoặc GET, để xác định dữ liệu gửi lên theo kiểu POST hay
GET.
Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô
Address dưới dạng các căp tên=giá_tri. Nhược điểm của kiểu này là toàn bộ cái URL và xâu
tên=giá_trị kia sẽ bị giới hạn dưới 255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi
nhiều dữ liệu hơn, người ta đã sinh ra kiểu POST. Với kiểu này, dữ liệu sẽ không bị giới hạn
chiều dài 255 ký tự của chuỗi địa chỉ do không bị gộp vào chuỗi địa chỉ. Kiểu POST cũng
thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô
Address (password chẳng hạn).
Ví dụ:
<form method = "post"> Thử một tí
</form>
- action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tính
này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó
trình duyệt sẽ tải lại nội dung mới).
Ví dụ:
<form method = "post" action ="thu2ti.php"> Thử hai tí
</form>
Tuy nhiên, 2 ví dụ trên chưa có ý nghĩa gì, vì chúng ta chưa trang bị các thành phần cơ bản của
form như ô văn bản, nút bấm...

Các thẻ nhập vào (input)

Thẻ input có một số thuộc tính, mỗi thuộc tính sẽ quy định những chức năng riêng:
- name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.
- Value: Xác định giá trị đặt trước cho thẻ.
- type:
Thuộc tính này có một số giá trị sau:

* submit: Sẽ xác định một nút bấm (submit) mà khi kích chuột vào đó, form sẽ tự động kích
hoạt và gửi dữ liệu đi
* text: Hiển thị một ô văn bản cho phép người sử dụng nhập văn bản
* password: Hiển thị ô văn bản để nhập password.
* hidden: Tạo một biến ẩn, ta có thể dùng nó để lưu trữ các dữ liệu "ẩn" khỏi người dùng, tất
nhiên nếu họ biết View source lên thì chịu.

Ví dụ: đoạn mã sau sinh ra một form có 1 ô văn bản, một ô nhập mật khẩu và 1 nút bấm:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login"
name="B1"></p>
</form>

Thẻ tạo hộp chọn xổ xuống:

Danh sách sổ xuống là một ô danh sách cho phép bạn kích chọn 1 mục trong danh sách sẵn có.
Để tạo một hộp chọn sổ xuống, ta phải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:
<Select name =xxx>
<option value = gia_trí1>nội dung 1</option>
<option value = gia_trí2>nội dung 2</option>
<option value = gia_trí3>nội dung 3</option>
.....
<option value = gia_trín>nội dung n</option>
</select>
Trong đó:
Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh sách sổ xuống.
Các thẻ option xác định giá trị của tên biến trong thẻ select nếu được chọn. Giá trị sẽ được gán
vào biến nằm trong thuộc tính value của thẻ option.

Ví dụ:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login"
name="B1"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
</form>

Khi người dùng kích chọn Male, giá trị 1 sẽ được chuyển vào biến sex (được định nghĩa trong
thẻ Select>).

Các thẻ lựa chọn radio:

Các thẻ này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép
kích chọn 1 trong các nút đó.
Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút
radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
<input type="radio" value="" name="R1">

Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:

<input type=radio name="switcher" value="OFF" >Tắt

<input type=radio name="switcher" checked value="TELEX" >Telex
<input type=radio name="switcher" value="VNI"> VNI

Thẻ nhập khối văn bản

Thẻ input với thuộc tính type = text chỉ cho phép ta hiển thị ra một ô văn bản nhỏ (hiện được 1
dòng). Để hiện ra một ô soạn thảo lớn, có thể hiển thị nhiều dòng đồng thời, ta phải dùng thẻ
textarea:
<textarea name =xxx>Giá trị mặc định của khối văn bản </textarea>

Còn một số cặp thẻ khác, nhưng ít nhất thì tôi cũng không nhớ ra tại thời điểm này. Các bạn có
thể vào FrontPage, sau đó sử dụng menu Insert/Form để chèn các thành phần này vào, sau đó các
bạn có thể vào xem và thay đổi các thuộc cơ bản của chúng. Còn bây giờ, chúng ta quay lại với
việc lấy dữ liệu của PHP:

Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $HTTP_POST_VARS[].
Mảng này có chỉ số chính là tên của các phần tử trong form và giá trị là nội dung giá trị do người
sử dụng nhập vào các phần tử có tên tương ứng. Chẳng hạn với mẫu biểu sau:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
<input type="submit" value="Gui di" name="B1">
</form>

CSS: Cascading Style Sheet - Định kiểu trình bày trang HTML

(copyright (c) by dvc102 - Faculty of Informatic Technology, Hanoi National University of

Education)
Nội dung chủ yếu của bài được dịch từ http://www.w3schools.com/css/default.asp , phần còn lại
từ... một số nguồn khác và trong đầu

Trước khi đọc bài này các bạn cần có kiến thức cơ bản về WWW, HTML cùng những kỹ năng
cơ bản nhất để làm một trang web

CSS là gì?
- CSS: Cascading Style Sheet: Đây là những mẫu để quy định cách thức thể hiện các thẻ HTML.
Bạn có thể xem ví dụ về cách thức thể hiện các thẻ này ở
http://www.w3schools.com/css/demo_default.htm
- CSS có 3 cách sử dụng:
+ Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)
+ Định nghĩa trong 1 trang web (Internal Style Sheet)
+ Định nghĩa thành 1 file CSS riêng (External Style Sheet)
- Style được đưa vào HTML 4.0 để giải quyết một số vấn đề.
- CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Bạn có thể định nghĩa nhiều style vào một thẻ HTML
Style (mẫu định dạng) giải quyết một số vấn đề chung:
- Ta biết rằng các thẻ HTML chuẩn được thiết kế để định nghĩa nội dung của một văn bản. Đầu
tiên các thẻ HTML hỗ trợ cách viết "Đây là tiêu đề", "Đây là đoạn", "Đây là bảng".... bằng cách
sử dụng các thẻ <H1>, <P>, <TABLE>... Cách bố trí văn bản này được qui định bởi trình duyệt
web và không có bất cứ một thẻ nào để định dạng văn bản.
- Đến các trình duyệt thế hệ sau đặc biệt là Nescape và Internet Explorer tiếp tục đưa thêm vào
các thẻ HTML mới cùng các thuộc tính định dạng riêng của mình (như các thẻ <FONT> và
thuộc tính Color...). Do đó ngày càng khó để tạo ra được một web site khi mà nội dung của nó bị
tách rời khỏi cách bố trí.
- Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm
vào trong HTML 4.0
- Cả hai trình duyệt lớn là Nescape Và Internet Explorer đều hỗ trợ CSS.
CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Style trong phiên bản HTML 4.0 (phiên bản chúng ta đang dùng) qui định cách thức thể hiện
các thẻ HTML tương tự như thẻ <FONT> hay thuộc tính COLOR trong HTML 3.2. Style
thường được lưu trong các file nằm ngoài trang web. Chúng giúp bạn có thể thay đổi cách thức
định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. Chỉ khi bạn muốn
thay đổi lại toàn bộ màu sắc, cách định dạng của các tiêu đề, nội dung bạn mới hiểu rõ tác dụng
thực sự của CSS.
- CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web
với chỉ duy nhất 1 lần thay đổi tại một vị trí. Là một người thiết kế web, bạn có thể định nghĩa 1
file CSS cho các thẻ HTML và áp dụng nó vào nhiều trang web mà bạn muốn. Để thay đổi tổng
thể các trang web này bạn chỉ đơn giản là thay đổi file CSS và tất cả các trang đã áp dụng sẽ
được thay đổi một cách tự động.
Bạn có thể định nghĩa nhiều style vào một thẻ HTML
CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style
có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong 1 trang web hoặc ở trong
một file CSS bên ngoài.
Thứ tự áp dụng các định dạng
Như trên đã nói, ta có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu bạn
áp dụng nhiều cách định dạng cho 1 thẻ HTML?
Theo một cách chung nhất ra có thể nói các style của bạn sẽ được "xếp tầng" (cascade). Việc xếp
tầng này tuân theo thứ tự sau: (Số 1 là ưu tiên nhất, số 4 là kém ưu tiên nhất).
1. Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
2. Internal Style (Style được qui định trong phần <HEAD> của 1 trang HTML )
3. External Style (style được qui định trong file CSS ngoài)
4. Browser Default (thiết lập mặc định của trình duyệt)
Như vậy ta thấy các thiết lập trong 1 thẻ HTML có mức ưu tiên cao nhất, Những gì được định
nghĩa ở đây sẽ bị bỏ qua tất cả các định nghĩa khác (như trong thẻ <HEAD>, File CSS ngoài,...)

Cú pháp của CSS

Cú pháp của CSS được tạo nên bởi 3 thành phần:
- Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
- Thuộc tính (Property)
- Giá trị (Value)
Cú pháp của CSS được thể hiện như sau:

Selector {
Property1: Value1;
Property2: Value2;
}
- Selector thường là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà bạn
muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó được
phân cách bởi dấu hai chấm ( . Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu chấm
phảy ( . Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu ngoặc
nhọn ({})
Ví dụ

body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/

hay:
p {text-align: center} /*tất cả các thẻ <P> trong trang HTML sẽ được canh giữa.*/
hay định nghĩa nhiều thuộc tính:
p
{
text-align: center;
color: red;
font-family: arial
}

Nhóm các thẻ

Trong trường hợp bạn muốn định nghĩa nhiều thẻ giống nhau bạn có thể nhóm các thẻ lại. Ví dụ
dưới đây sẽ nhóm tất cả các thẻ Header lại và định nghĩa chúng sẽ có màu xanh:

h1,h2,h3,h4,h5,h6
{
color: green
}

Tạo các lớp

Bằng việc tạo ra các lớp, bạn có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ
HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web.
Các lớp gắn với 1 thẻ cụ thể
Ví dụ: Trên trang web của bạn có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa
và đoạn văn canh lề phải. Khi đó bạn có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này
như sau:

p.trai {text-align: left}

p.phai {text-align: right}
p.giua {text-align: center}

Tiếp theo, trong trang HTML bạn sử dụng như sau:

<p class="trai">Đoạn văn này được canh lề trái.</p>

<p class="phai">Đoạn văn này được canh lề phải.</p>
<p class="giua">Đoạn văn này được canh lề giữa.</p>

Chú ý:
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết bạn cần phải cẩn thận
trong việc sử dụng chữ hoa, chữ thường.
- Trong trang HTML, bạn chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này
mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.
Ví dụ về sử dụng lớp sai:

<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>

Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là ta không sử
dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt động:

<td class="trai">Ví dụ này không hoạt động</td>

Các lớp không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ):
Rất đơn giản, bạn có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên
trang web bằng cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)
Ví dụ:
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào

.giua{text-align="center"}

và trong trang HTML ta sử dụng như sau:

<p class="giua">Đoạn văn này được canh lề giữa.</p>

<td class="giua">Câu này cũng được canh lề giữa.</p>

Tạo các định danh (ID)

Tương tự như các lớp, các định danh cũng cho phép chúng ta chia các thẻ thành nhiều loại khác
nhau. Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở
nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ và
tên của định danh phải là duy nhất trên 1 trang web.
Các ví dụ:
1. Đoạn mã dưới đây có thể áp dụng cho thẻ <P> có ID là para1

p#para1
{
text-align: center;
color: red
}

Khi sử dụng như sau:

<P id="para1">Đoạn văn bản</p>

2. Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz:

*#xyz {color: green}

Khi sử dụng:

<p id="xyz">Đoạn văn bản</P>

3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ <P> đầu tiên:

p#wer345 {color: green}

Khi sử dụng:

<p id="wer345">Đoạn văn bản</p>

Và đoạn dưới đây không có hiệu lực:

<h1 id="wer345">Đoạn văn bản không được áp dụng</p>

Chú thích trong CSS

Bạn có thể bổ xung các chú thích cho đoạn mã của mình trong CSS. Các đoạn chú thích sẽ được
trình duyệt bỏ qua. Đoạn chú thích được tạo ra tương tự như trong C++ (đặt bắt đầu bởi /* và kết
thúc bởi */)
Ví dụ:

/* Đây là đoạn chú thích*/

p
{
text-align: center;
/* Và đây là một đoạn chú thích khác */
color: black;
font-family: arial
}

Tạm thời thế đã, bây giờ chúng ta sẽ xem 2 ví dụ về dùng CSS dưới đây. Trong các ví dụ này ở
khung phái trên bên trái là đoạn mã HTML của trang web, khung bên phải là mã CSS và ở phía
dưới là kết quả.
Ví dụ 1: http://www.w3schools.com/css/showit.asp?filename=ex1
Ví dụ 2: http://www.w3schools.com/css/showit.asp?filename=ex2

Cách dùng CSS

Hai bài trên đã giới thiệu với bạn cách viết các mã định dạng CSS. Bài này sẽ hướng dẫn bạn
cách sử dụng các mã đã được tạo ra.
Làm thế nào để chèn một đoạn mã CSS vào trang web
- Khi trình duyệt web đọc trang web của bạn nó sẽ định dạng trang web theo cách CSS đã qui
định cho nó.
- Theo như bài đầu tiên đã đề cập, chúng ta có tất cả 3 loại CSS dó đó chúng ta cũng sẽ có 3 cách
để chèn CSS vào trang web của mình.

Với External Style ( Sử dụng file CSS được định nghĩa thành 1 file riêng)

Sử dụng External Style là một cách lý tưởng khi ta cần phải định dạng nhiều trang web theo một
mẫu thống nhất. Với External Style chúng ta có thể thay đổi dáng vẻ của một trang web chỉ với
việc thay đổi duy nhất 1 file. Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ
<LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>, với thuộc tính href sẽ trỏ đến file .CSS
bên ngoài.
Ví dụ:

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

Nếu một trang web có đoạn mã trên thì khi hiển thị trang web trình duyệt sẽ đọc các style được
định nghĩa trong file mystyle.css và định dạng văn bản theo nó. Nếu tên file của bạn không phải
là mystyle.css thì bạn chỉ cần đổi tên của file thành tên file của bạn.

Một file CSS có thể được viết ra từ bất kì trình soạn thảo văn bản nào. Trong file CSS chỉ chứa
các định dạng, không bao gồm các thẻ HTML. Một tệp CSS nên ghi với phần mở rộng là .CSS
Ví dụ dưới đây thể hiện toàn bộ nội dung của một file CSS.

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Với Internal Style (Định nghĩa các style sheet ngay trong trang web)

Trong trường hợp mỗi trang web của bạn sử dụng các định dạng khác nhau, bạn hãy dùng
Internal Style Sheet. Để định nghĩa Internal Style Sheet bạn sử dụng thẻ <STYLE> đặt bên trong
thẻ <HEAD>.
Ví dụ:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Trình duyệt sẽ đọc đoạn mã này và định dạng trang web theo nó.

Chú ý:

- Thông thường trình duyệt sẽ bỏ qua đoạn mã mà nó không thể hiểu nổi. Điều đó có nghĩa là với
các trình duyệt cũ chúng sẽ bỏ qua thẻ <STYLE>. Tuy nhiên nó không bỏ qua nội dung bên
trong thẻ này. Điều đó có nghĩa là phần thông tin định nghĩa style của bạn sẽ bị "phơi" hết lên
trang web. Do đó để giải quyết vấn đề này bạn hãy sử dụng chú thích của HTML để bao quanh
các mã định nghĩa CSS. Đoạn mã trên được sửa lại thành như sau:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

Với Inline Style (style được qui định ngay trong mỗi thẻ HTML)

Khi sử dụng Inline Style Sheet là bạn đã đánh mất đi những tác dụng to lớn của CSS với việc
trộn lẫn mã định dạng với nội dung trang. Bạn chỉ nên sử dụng phương pháp này trong một số
trường hợp rất đặc biệt mà cách định dạng thẻ chỉ áp dụng duy nhất 1 lần trong 1 trang web.

Sử dụng phương pháp này bạn đưa ngay những mã định dạng vào thẻ HTML cần thiết. Các mã
định dạng này có thể bao gồm mọi thứ có thể dùng trong Internal Style Sheet và External Style
Sheet.
Đoạn mã dưới đây sẽ thay đổi màu sắc và lề của một đoạn trong trang web.

<p style="color: sienna; margin-left: 20px">

This is a paragraph
</p>

Sử dụng nhiều Style Sheet

Nếu cùng một thẻ được định nghĩa ở nhiều nơi thì thẻ này sẽ kế thừa tất cả các thuộc tính đã
được định nghĩa ở tất cả các vị trí. Nếu như các thuộc tính định nghĩa xung đột nhau chúng sẽ
được lấy theo thứ tự ưu tiên đã đề cập đến ở bài 1.
Ví dụ:
Một file style sheet ngoài được định nghĩa thẻ <H3> như sau:

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Sau đó một trang web sử dụng file CSS ở trên trong nó lại có phần định nghĩa cho thẻ <H3> như
sau:

h3
{
text-align: right;
font-size: 20pt
}

Và kết quả thẻ <H3> sẽ được định nghĩa là kết hợp của 2 định nghĩa trên và là:

color: red;
text-align: right;
font-size: 20pt