Bài giảng - Giáo án: Tài liệu thiết kế Web dùng ngôn ngữ PHP

Bài 1 NGÔN NGỮ HTML 2
Bài 2 DANH SÁCH VÀ FORM 16
Bài 3 CASCADING STYLE SHEET (CSS) 24
Bài 4 GIỚI THIỆU JAVASCRIPT 28
Bài 5 CÁC ĐỐI TƯỢNG JAVASCRIPT 41
Bài 6 ĐỐI TƯỢNG SỰ KIỆN 53
Bài 7 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER 64
Bài 8 THÊM NỘI DUNG ĐỘNG VÀO TRANG HTML 67
Bài 9 HÀM VÀ SỬ DỤNG LẠI MÃ 79
Bài 10 LÀM VIỆC VỚI KIỂU DỮ LIỆU MẢNG 83
Bài 11 LÀM VIỆC VỚI CHUỖI 91
Bài 12 SESSION – COOKIES 98
Bài 13 MySQL 110
Bài 14 TRUY CẬP CƠ SỞ DỮ LIỆU MYSQL TỪ PHP 124
Bài 15 HIỂN THỊ VÀ PHÂN TRANG 128
Bài 16 UPDATE DỮ LIỆU 136
Page 1.
Bài 1 NGÔN NGỮ HTML
1.1 Giới Thiệu
HTML (Hypertext Markup Language) là một sự định dạng dựa trên ngôn ngữ đánh dấu
chuẩn (GML - General Markup Language). Ngôn ngữ GML được tạo ra từ năm 1969, từ ý
tưởng đơn giản là tách biệt nội dung và hình dạng của tài liệu. Định dạng của HTML cho
phép trình duyệt Web hiển thị các tài liệu, các tài liệu này bao gồm cả Media. Bản thân một
tài liệu HTML chỉ là những tập tin văn bản đơn giản (ASCII) với những thẻ (tag) hoặc những
dòng mã đặc biệt mà một trình duyệt web biết cách thông dịch và hiển thị trên màn hình.
Phần lớn các chuẩn về trình duyệt và các công nghệ liên quan đến Web đều được phát triển
bởi World Wide Web Consortium (W3C) - một tổ chức chuẩn độc lập được thành lập vào
năm 1994. Ta có thể tìm kiếm các thông tin của W3C và công việc của tổ chức này tại
Website: www.w3c.org.
Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này
đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị

rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế
các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình
duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet
Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này
đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị
rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế
các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình
duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet
1.2 Các Thành Phần Của Trang HTML
1.2.1 Thẻ HTML.
Khi một trình duyệt web hiển thị một trang HTML, trình duyệt sẽ đọc file HTML này và tìm
kiếm những đoạn mã đặc trưng trong file gọi là thẻ (tag). Các thẻ HTML được đánh dấu bởi
ký hiệu "< "và ">". Dạng chung của một thẻ HTML là:
<tag_name thuộc_tính1="giá trị 1" thuộc_tính2 = "giá trị 2" > Chuỗi văn bản, Media
</tag_name>
Ví dụ: <B> HTML </B>
Thẻ này (<B>) báo cho trình duyệt hiển thị đoạn văn bản HTML là chữ in đậm. Các thẻ
HTML báo cho trình duyệt biết khi nào thì cần in đậm, in nghiêng văn bản, làm văn bản trở
thành HEADER, liên kết đến một trang khác, …
- Trong thẻ HTML <tag_name> thì giữa "<" và tag_name phải được viết liền (giữa
chúng không có khoảng trắng).
- Thông thường một thẻ HTML đều có một thẻ đóng </tag_name>. Trong thẻ đóng có
chứa ký tự "/", ký tự này báo cho trình duyệt biết hiệu lực của thẻ này kết thúc tại đây.
Hầu hết các thẻ HTML đều có thẻ kết thúc.
Page 2.
- Mỗi thẻ HTML có thể có một, nhiều hoặc không có thuộc tính. Mỗi thuộc tính có thể
có các giá trị hoặc không có các giá trị. Nếu có giá trị thì các giá trị này thường được
đặt trong cặp dấu ngoặc kép.
- Các thẻ HTML có thể được viết bằng chữ thường hay chữ hoa. Trình duyệt web
không phân biệt định dạng này.

- Không giống như lập trình trong các ngôn ngữ khác, với trang HTML, nếu có một lỗi,
trang Web vẫn được hiển thị mặc dù có thể không đúng ý đồ của nhà thiết kế.
- Trình duyệt web có các bộ từ vựng các tag mở, do vậy đôi khi một tag được nhận biết
bởi trình duyệt này nhưng lại không được nhận ra bởi trình duyệt khác. Khi trình
duyệt không hiểu một tag nào đó, nó sẽ tự động bỏ qua tag đó và chỉ thông dịch phần
còn lại.
1.2.2 Cấu Trúc Của Một Trang Tài Liệu HTML
Một tài liệu HTML tổng quát được trình bày như sau:
<HTML>
<HEAD>
Nội dung header
</HEAD>
<BODY>
nội dung BODY
</BODY>
</HTML>
- Một tài liệu HTML gồm 2 phần riêng biệt. Phần đầu (HEAD) và phần thân (BODY).
Phần đầu chứa những thông tin về tài liệu và không được hiển thị trên màn hình. Phần
thân chứa tất cả các thành phần là những thứ được hiển thị như là một phần của trang
web.
- Toàn bộ công việc để tạo một trang HTML nằm trong cặp thẻ <HTML> và
</HTML>. Bên trong cặp thẻ này là cặp thẻ <HEAD></HEAD> và
<BODY></BODY>. Trang web của chúng ta có thể vẫn hiển thị tốt mà không cần
các thẻ này, tuy nhiên bằng cách sử dụng chúng, trang web của ta sẽ đảm bảo hoàn
toàn tương thích với chuẩn quốc tế của HTML và chắc chắn sẽ tương thích với các
trình duyệt web khác ở hiện tại cũng như ở tương lai. Đây cũng là một thói quen tốt.
- Các chú thích HTML được bao bởi <! và >. Dòng văn bản giữa cặp thẻ này không
được hiển thị trong trang web. Khi dịch, trình duyệt sẽ bỏ qua các thành phần nằm
trong cặp dấu chú thích <! và >. Việc đặt những chú thích là rất hữu ích đối với
các trang web phức tạp.

- Trình duyệt web bỏ qua các khoảng trắng đầu dòng, những dòng trống. Do vậy khi
viết thẻ HTML, ta có thể canh chỉnh các thẻ, tạo các dòng trống ngăn cách các chú
thích, … sao cho dễ quản lý mà không sợ ảnh hưởng đến nội dung, hình thức hiển thị
của trang Web. Các chuẩn HTML qui định, mỗi ký tự xuống hàng sẽ được xem như
một khoảng trắng. Một chuỗi các ký tự khoảng trắng được xem như một khoảng
trắng.
- Một trang HTML cơ bản được đặt tên với phần mở rộng là HTM hoặc HTML. Trình
duyệt sẽ nhận biết các tài liệu HTML qua các phần mở rộng của file.
Page 3.
1.3 Các Thẻ Cơ Bản.
1.3.1 Các Định Dạng Văn Bản.
1.3.1.1 Những Tiêu Đề
Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tsg tiêu
đề (heading tag). Dạng các tag tiêu đề của HTML là:
<Hx> Text Appear in Heading </Hx>
x là một số có giá trị từ 1 đến 6 chỉ định kích cỡ của tiêu đề. Các tiêu đề được sắp xếp từ
(quan trọng nhất) đến 6 (ít quan trọng nhất). Các dòng hiển thị các giá trị cho các heading từ
1 đến 6 như sau.
a)
Mã HTML cho hiển thị trên là:
<html>
<body>
<h1> Heading Level 1</h1> <! Giá trị kích cỡ lớn nhất >
<h2> Heading Level 2</h2>
<h3> Heading Level 3</h3>
<h4> Heading Level 4</h4>
<h5> Heading Level 5</h5>
<h6> Heading Level 6</h6><! Giá trị kích cỡ nhỏ nhất >
</Body>
</HTML>

Thẻ này có một thuộc tính là align có các giá trị: Left, Right, Center dùng để cách chỉnh văn
bản về bên trái, phải, giữa của trình duyệt.
Ví dụ <H2 align="center"> Heading 2 - Center </H2>
1.3.1.2 Chia Đoạn Văn Bản Và Xuống Dòng
Một trình duyệt web sẽ bỏ qua tất cả các ký tự xuống dòng (carriage returns) được đánh trong
trình soạn thảo. Tuy nhiên khi trình duyệt gặp 2 thẻ <BR> và <P> nó sẽ xuống dòng để bắt
đầu một dòng mới. Sự khác biệt giữa 2 thẻ này là <BR > sẽ xuống dòng, <P> sẽ chèn một
dòng trống và xuống dòng, hơn nữa thẻ <BR> không có thẻ kết thúc trong khi <P> có thể có
và thẻ <P> còn có thuộc tính giống như thẻ Heading là align để cho phép canh chỉnh văn bản
trong đoạn. Nếu không có thẻ </P> thì đoạn văn bản trong thẻ <P> cũng bị chấm dứt khi gặp
thẻ <P> mới.
Thẻ <P> còn có một thuộc tính khác là align có các giá trị left (mặc định), center và right cho
phép canh chỉnh văn bản trong đoạn trong cửa sổ trình duyệt.
Tạo đường kẻ
Thẻ <HR> sẽ tạo một đường kẻ ngang qua trang Web. Có hai thuộc tính thường dùng là size
và width. Thuộc tính size sẽ xác định kích thước của đường thẳng (tính bằng pixel) với giá trị
mặc định là 2 và width kiểm soát chiều rộng đường kẻ. Ta có thể thiết lập giá trị cho
WIDTH theo pixel hay theo tỷ lệ % của cửa sổ trình duyệt. Thẻ này không có thẻ kết thúc.
Làm việc với các kiểu mẫu (Style)
HTML cung cấp một số thẻ cho việc định dạng văn bản như in đậm, nghiêng, … Có thể liệt
kê một số thẻ cơ bản như sau:
HTML tag Kết quả
<B> This is Bold…<B> (vi) This is Bold…
Page 4.
<I> This is Italic …</I> (vii) This is Italic …
<tt> This is Typewriter …</tt> This is Typewriter …
<U> This is Underline </U> a. This is Underline
Ta cũng có thể kết hợp các tag này để định dạng, miễn chúng được lồng vào nhau một cách
chính xác. Ta cũng có thể áp dụng các kiểu mẫu vào trong các tiêu đề.
1.3.1.3 Một Số Thẻ Fortmatting Khác

- <Blockquote>: Chèn một khối văn bản được trình bày thụt vào trong so với phần thân
văn bản. Theo cách viết truyền thống, một đoạn trích dẫn của ba hay nhiều câu được
làm nổi bật hơn so với đoạn văn bản chính bằng cách trình bày như một khối văn bản
thụt vào trong (indented block of text). Với trang HTML, đưa văn bản vào cặp thẻ
<Blockquote> … text … </Blockquote>để tạo chức năng này.
- <Address>: Thông thường trong các trang Web, tại phần cuối (footer) thường có vùng
cung cấp thông tin về tác giả và tài liệu. Đoạn văn bản này thường được đặt trong các
dòng trong thẻ <address>, khi đó nó sẽ được hiển thị với kiểu chữ in nghiêng. Các
thông tin hữu ích cần mô tả ngắn gọn trong footer thường là:
Tiêu đề hay chủ đề trang hiện tại.
Ngày tạo và ngày cập nhật.
Chủ quyền.
Tên email, tác giả trang web.
Tên và liên kết tới văn bản nguồn gốc tổ chức.
- Thẻ <BaseFont>: Ta sử dụng tag này để thiết lập font chữ mặc định cho toàn bộ trang
web và không có thẻ kết thúc. Thẻ này có các thuộc tính là face="font chữ",
size="kích thước" của chữ. Kích thước văn bản có giá trị từ 1 (nhỏ nhất) đến 7 (lớn
nhất). Tất cả các đoạn văn bản không nằm trong thẻ font nào sẽ sử dụng font chữ của
thẻ fontbase. Thẻ này cũng chỉ hết hiệu lực khi gặp thẻ fontbase khác.Thẻ này còn có
tác dụng tốt trong thiết lập lại kích thước của font chữ theo tính tương đối của thẻ
font.
- Thẻ <font>: dùng để thiết lập các thuộc tính về font chữ được hiển thị trên trang web.
Các thuộc tính của thẻ này bao gồm:
size: Kích cỡ của chữ. Giá trị thuộc tính này có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất).
Ví dụ: <font size="6">.
Ngoài cách thiết lập giá trị dạng tuyệt đối cho font chữ như trên, ta còn có thể thiết lập
giá trị tương đối bằng cách dựa vào giá trị kích cỡ đã có sẵn trước đó bằng cách thêm
dấu "+" (tăng) hoặc "-" (giảm) vào trước giá trị của thuộc tính size. Ví dụ: <font
size="+2"> sẽ tăng kích thước của font chữ lên 2 giá trị so với font chữ hiện tại. Thiết
lập thuộc tính dạng tương đối này sẽ rất hữu ích khi ta thay đổi kích thước font chữ so

với giá trị trong thẻ basefont. Ví dụ nếu ta muốn tăng kích cỡ font chữ của trang lên 1
đơn vị, ta chỉ cần thay đổi lại giá trị trong thẻ basefont (thường được sử dụng một lần
trong một trang) mà không cần thay đổi lại trong tất cả các thẻ font của trang.
Face: Tên của font chữ được xác định để hiển thị văn bản trên trình duyệt.
Color: Màu sắc của font chữ. Ta sử dụng thuộc tính này khi cần thiết lập màu riêng
biệt cho đoạn văn bản trong thẻ font. Thông thường màu văn bản được xác định trong
thẻ <body> hoặc sử dụng màu mặc định của trình duyệt. Giá trị của thuộc tính này
cũng giống như tất cả các thuộc tính xác định màu sắc khác của trang web, đó là ta có
thể sử dụng các màu hằng hoặc các giá trị của hệ màu RGB theo dạng số hexa để thiết
lập một màu sắc nhất định.
Page 5.
Các ví dụ về thẻ font.
Ví dụ 1
<html>
<body>
<font size="4" color="red" face="vni-times">Font size:4 - color:red - face:vni-times<br>
<font size=6 color="#ff0000" face="arial">Font size:6 - color: ff0000 - face:arial</font><br>
<font size="-2">Font size:2 - color:red - face:vni-times</font><br>
Font size:4 - color:red - face:vni-times</font>
</body>
</html>
Ví dụ 2
<html>
<body>
<basefont face="vni-times" size=6>
<font size=1> Font size=1</font><br>
<font size=2> Font size=2</font><br>
<font size=3> Font size=3</font><br>
<font size=4> Font size=4</font><br>
<font size=5> Font size=5</font><br>

<font size=6> Font size=6</font><br>
<font size=7> Font size=7 chữ</font><br>
Ngoài thẻ font<p>
<hr width=50% align=left>
<basefont size=4 face="vni-times">
Ngoài thẻ<br>
<font size=6>
font size=6<br>
</font>
ngoài thẻ
<font size="+3">font size=7</font><br>
<font size="-2">font size=2</font>
</body>
</html>
- <Pre>: Hiển thị dạng chữ đánh máy và giữ nguyên các khoảng trắng và dấu xuống
dòng.
- <Sub>: Văn bản trong thẻ này sẽ được viết dưới dạng Subscript. Đây là văn bản được
in hơi thấp hơn dòng chữ thường.
- <Sup>: Văn bản trong thẻ này sẽ được viết dưới dạng Supperscript. Đây là văn bản
được in hơi cao hơn dòng chữ thường.
- <Big> và <Small>: Đoạn văn bản nằm trong thẻ sẽ có font-size dạng chữ lớn hoặc
nhỏ tương ứng.
- <Marquee>: Văn bản nằm giữa hai thẻ này sẽ chạy qua chạy lại tuỳ theo các giá trị
thuộc tính được thiết lập. Một số thuộc tính của Marquee là:
Direction: Có giá trị bằng Left hoặc Right là hướng chuyển động của văn bản.
ScrollDelay: Giá trị nguyên dương này là số mili giây văn bản ngừng trước khi
chuyển động tiếp. Giá trị càng nhỏ, chuyển động càng nhanh.
Behavior: Loại chuyển động của text. Scroll, Slide, Alternate
Page 6.
Align With text: Đoạn văn bản được canh chỉnh trong vùng diện tích của marquee. Có

3 giá trị: Top, Middle, Bottom.
Loop: Giá trị nguyên thiết lập số chu kỳ chuyển động của đoạn văn bản.
Ví dụ
<Marquee align="middle" direction="right" scrolldelay="60">
Chào mừng bạn đã đến website của chúng tôi
</Marquee>
1.3.2 Chèn Hình Ảnh Vào Trang HTML
Có nhiều hình ảnh được hỗ trợ trên Internet như: *.PICT, *.GIF, *.TIFF, *.BMP, *.JPG,
*.JPEG… và các hình ảnh này độc lập với flatform. Tuy nhiên dạng chuẩn hiển thị trong một
trang web là GIF (Graphics Interchange Format). GIF nén các thông tin của hình ảnh (làm
giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để chuyển qua mạng Internet.
Kỹ thuật nén dạng GIF có hiệu quả cao nhất khi hình ảnh có những vùng liên tục cùng màu
và việc nén càng lớn khi có sự lặp lại màu theo chiều đứng. Một dạng hình ảnh khác thường
hay được sử dụng trong web là JPG hoặc JPEG (được đặt tên sau khi nhóm Joint
Photographic Engineering Group thiết kế ra dạng này). Kỹ thuật nén JPEG rất có hiệu quả
với các ảnh chụp có màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh. Tuỳ thuộc vào
chất lượng ảnh, JPEG cung cấp các hệ số nén về kích thước rất ấn tượng.
- Có nhiều chương trình đồ hoạ có sẵn chức năng lưu trữ tập tin theo dạng tuỳ chọn. Ta
nên lưu theo hai loại và so sánh kích thước và chất lượng ảnh để quyết định sử dụng
hình này loại nào. Một vài tiện ích cho đồ hoạ cho phép các chuyển đổi này như:
GIFConverter, WinGif…
- Khi thiết kế trang web có hình, nên lưu ý để trang thiết kế có dung lượng không lớn
quá. Dung lượng của trang được tính gộp tất cả các hình chèn vào trang chứ không
phải chỉ tính phần văn bản HTML.
- Thường khi thiết kế web, ta tạo một thư mục riêng để lưu trữ các hình ảnh cho phép
quản lý dễ dàng toàn bộ Web Site.
- Để chèn một hình ảnh vào trang web, sử dụng thẻ <IMG >. Thẻ này không có thẻ kết
thúc. Trong thẻ này có nhiều thuộc tính như sau:
SRC: có giá trị là đường dẫn của file hình ảnh. Đường dẫn này thường được xác định
là các đường dẫn tương đối hoặc đường dẫn đầy đủ từ một website khác. Với đường

dẫn tương đối, để truy cập đến thư mục cấp cha ta sử dụng hai dấu chấm và dấu
xổ :" /".
Ví dụ:
<IMG SRC="Images/h1.gif"> Chèn hình h1.gif trong thư mục con Images.
<IMG SRC=" /Images/h1.gif"> Chèn h1.gif từ thư mục ngang hàng với thư mục hiện hành
tên là Images.
<IMG SRC="www.microsoft.com/images/h1.gif"> Chèn hình h1.gif trong thư mục images
của website có domain là microsoft.com .
Các thuộc tính khác:
Align: có các giá trị top, middle, bottom (mặc định), left, center, right sẽ điều khiển vị trí của
văn bản so với hình ảnh trong hàng.
Page 7.
Alt="text": là đoạn văn bản hiển thị tại vị trí hình trong các trường hợp: khi người sử dụng
trình duyệt không hỗ trợ hình, tắt việc trình bày hình ảnh trong trình duyệt, khi hình chưa
được tải xong, Khi đưa con trỏ vào vùng hình ảnh.
Width, Height: Có giá trị là các số nguyên, là giá trị xác định chiều rộng và chiều cao của
hình theo pixels. Ta có thể đưa các giá trị kích thước này khác với kích thước thật của hình
ảnh, tuy nhiên có thể hình ảnh sẽ bị biến dạng hoặc xuất hiện những khối màu ngoài vùng
kích thước thật. Thông thường, khi không xác định chiều rộng và chiều cao, trình duyệt sẽ
hiển thị một hình ảnh đồ hoạ thay thế mặc định với một kích thước cố định cho đến khi nó tải
xuống xong hình ảnh cần hiển thị. Sau đó hình ảnh sẽ được thay đổi đến kích thước của hình
chính. Điều này sẽ làm cho nội dung trong cửa sổ được định vị lại. Khi xác định hai thuộc
tính này thì trình duyệt dành một chỗ trên màn hình trước khi ảnh được tải xuống. Điều này
có thể làm trang web được thể hiện một cách chính xác và nhanh chóng hơn.
Hspace: Khoảng cách tính bằng pixel của văn bản xuất hiện xung quanh tới hai biên dọc của
hình ảnh.
Vspace: Giống như thuộc tính trên nhưng tính theo chiều đứng.
Border: thiết lập đường biên cho ảnh tính theo pixel. Nếu không muốn thấy biên, ta cho giá
trị bằng 0.
1.3.3 Màu Sắc Và Cấu Trúc Cho Nền

- Trong một trình duyệt web, ta được sử dụng các màu của hệ thống để tạo màu cho
văn bản và cho nền của trang web. Mỗi màu được xác định dựa trên các giá trị Red-
Green-Blue (RGB) của nó. Ba số này có gía trị (viết theo hệ thập phân) từ 0 tới 255,
mỗi số thể hiện cường độ của thành phần màu theo thứ tự Red-Green-Blue. Giá trị
lớm nhất của cả 3 (255-255-255) sẽ cho ra màu trắng và giá trị nhỏ nhất (0-0-0) sẽ
cho ra màu đen. Tất cả các màu được biểu diễn bởi bộ ba RGB khác nhau.
- Các màu được thiết lập trong tài liệu HTML bằng các số hexa có dạng #xxyyzz.
Trong đó x, y, z là các giá trị từ 0 đến F. xx là giá trị của màu red, yy là của màu
Green và zz là màu Blue.
- Ta cũng có thể sử dụng các màu hằng số cơ bản được định nghĩa sẵn mà trình duyệt
có thể hiểu được như: Blue, Green, Yellow, …
- Thẻ BODY cho phép ta thêm vào các thuộc tính về màu sắc của trang web.
<Body bgcolor="#xxxxxx" text="#xxxxxx" Link="#xxxxxx" Vlink = "#xxxxxx">
Trong đó mỗi giá trị x có giá trị từ 0 đến F.
Bgcolor = màu nền.
Text: Màu của văn bản trong phần thân trang web.
Link: Màu sắc của các liên kết siêu văn bản. Màu mặc định là Blue.
Vlink (Visitted Link): Màu sắc của một mục siêu liên kết đã được xem. Màu mặc định là
Purple (tím).
Ví dụ:
<html>
<body bgcolor="Green" text="#FF0000" link="blue" vlink="F0F0F0" >
Mau sau trong trang web <br>
<a href="#"> link 1 </A><br>
<B><A href="#">link 2</a></B>
</Body>
</HTML>
Page 8.
Với thẻ BODY, ta còn có thể thay đổi nền trang web bằng một hình ảnh qua thuộc tính
background. Ta cũng có thể chèn vào một ảnh nhỏ và trình duyệt sẽ "lợp" các bản sao liên tục

các hình này vào trang web.
<Body background="h1.gif">.
Một số điều cần chú ý:
Kích thước hình cần chèn: Nên sử dụng các hình có kích thước càng nhỏ càng tốt.
Hãy lựa chọn hình và màu văn bản sao cho có độ tương phản cao.
Nếu trong thẻ Body có cả 2 thuộc tính bgcolor và background, khi hình nền trang
chưa load xong, trang sẽ có màu bgcolor và màu sẽ chuyển thành hình nền khi trang
nạp xong hình.
1.3.4 Sử Dụng Hyperlink
- Sức mạnh thật sự của Web là khả năng tạo ra những siêu liên kết (hyperlink) đến các
thông tin liên quan. Những thông tin này có thể là những trang Web khác, những hình
ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của gopher server,
một trình log-in vào máy tính ở xa (remote computer), một tập hợp các phần mềm,
FTP site.
- WWW sử dụng một cách đánh địa chỉ gọi là URL (Uniform Resorce Locator) để chỉ
ra những vị trí của những mục như vậy. Những liên kết này thường được biểu diễn
bởi những chữ màu xanh có gạch dưới và được gọi là anchor.
- Thẻ <A> sẽ dùng để tạo các liên kết và có dạng như sau:
<A href=URL target=name> Text link, media </A>
Ta có thể xem a là anchor, href là hypertext Reference.
- Thuộc tính target: Target có giá trị được thiết lập như trong bảng dưới.
Giá trị Ý nghĩa
Name Nạp trang Web vào trong cửa sổ hay frame có tên là name.
_blank Nạp trang Web vào cửa sổ mới không có tên.
_parent Nạp trang web vào cửa sổ cha của trang hiện hành.
_self Giá trị mặc định. Nạp trang web vào cửa sổ hiện hành.
_top Nạp trang web vào cửa sổ cao nhất.

Nếu thiết lập một tên trong target mà chưa được mở (trình duyệt không biết), khi đó
trình duyệt sẽ tạo một cửa sổ mới (giống như _blank) để nạp trang liên kết, cửa sổ này

được đặt tên là giá trị name mới tạo. Giá trị của của sổ này có ích trong trường hợp sử
dụng các mã kích bản như javascript. Các giá trị hằng trong cột giá trị bảng trên phải
viết bằng chữ thường.
- Thuộc tính href: Đường dẫn của đối tượng được liên kết tới. Các giá trị của URL
trong thuộc tính href. Ta có thể phân chia ra làm 2 loại liên kết. Liên kết đến các file
trong cùng một website và liên kết đến các file trong website khác.
Liên kết trong cùng website: Mọi giá trị URL đều là đường dẫn tương đối (ralative
link - đường dẫn tính từ thư mục hiện hành, thư mục chứa liên kết đang soạn thảo)
hoặc đường dẫn tính từ Domain. Tuy nhiên thường ít khi sử dụng đường dẫn từ
domain name do không thuận tiện vì khi thiết kế ta thường chưa biết được địa chỉ
Website chính thức. Khi sử dụng đường dẫn tương đối, với các liên kết tới thư mục
cấp cao hơn, ta sử dụng cặp giá trị " /".
Page 9.
Liên kết đến một file trong Website khác: Ta sử dụng đường dẫn URL tính từ domain
name.
Liên kết đến một bookmark trong cùng trang hay tơí một bookmark của trang khác:
Bookmark là một vị trí được đánh dấu trong trang web. Từ một vị trí, ta có thể liên
kết đến vị trí đã được đánh dấu này. Bình thường, khi liên kết tới trang, vị trí đầu tiên
của trang sẽ được hiển thị ngay tại phần đầu cửa sổ trình duyệt mặc dù trang cần hiển
thị dài hơn vùng cửa sổ. Tuy nhiên, khi ta liên kết đến bookmark, vị trí của bookmark
sẽ được hiển thị trong vùng bắt đầu của cửa sổ mặc dù trang có nội dung hiển thị vượt
quá vùng cửa sổ trình duyệt. Để liên kết đến bookmark, ta thêm dấu # và tên
bookmark ngay sau giá trị của URL. Để tạo một bookmark, ta sử dụng thẻ <A> tại vị
trí cần tạo theo qui tắc sau: <A name="tênbookmark">text</A>.
Để dễ hình dung, giả sử ta có cây thư mục như hình sau. Cây thư mục này là một Web
site có domain là: www.abc.com.
Trang f12.htm có nội dung như sau:
F12.htm
<html>
<body>

something here.
<a name="chapter1"></a>
something


<a name="chapter2" >chapter2</a>

</body>
</html>
Bảng ví dụ sau sẽ sử dụng thẻ <A> để liên kết đến các thành phần khác.
Code HTML Mã trong file Ý nghĩa
<A href=”#chapter1”> Chöông 1</A>
F12.htm
- Liên kết nội đến vị trí có
bookmark tên là chapter1
trong cùng trang.
<A href=”f12.htm#chapter1”>
<IMGsrc=” /images/h1.gif”></A> F11.htm
- Liên kết là hình h1.gif đến
trang f121.htm tại vị trí
bookmark có tên chapter1
trong cùng thư mục.
Page 10.
<a href=”folder1/f11.htm”> click </a> Index.htm Liên kết đến trang f11.htm
<Ahref=” /folder2/folder21/f211.htm”> link
</A>
F11.htm Liên kết đến trang f211.htm
<a href=” /f21.htm” target=_blank> trang
f21 </a>
F211.htm

Liên kết đến trang f21.htm
và sẽ nạp f21.htm vào cửa sổ
mới nếu click vào liên kết
này.
<a href=”a.zip”>download </a> F211.htm
Hiển thị cửa sổ để download
tập tin a.zip
<A href=”www.microsoft.com”
Target=_blank> Microsoft </A>
Liên kết đến trang chủ của
máy chủ Microsoft. Trang
web được nạp vào cửa sổ
mới
<A href=”
download </A>
- Hiển thị cửa sổ tải tập tin
theo giao thức fpt
<A href=”mailto:”> My
Email </A>
- Hiển thị trình soạn thảo thư
để gửi tới địa chỉ xác định
trong href.
1.3.5 Frame
Bằng cách dùng frame (khung), ta có thể ngắt trang web thành các vùng riêng biệt (cửa sổ) và
thể hiện các tập tin HTML khác nhau trong mỗi vùng. Với cách này, mỗi vùng có thể chuyển
sang trang web khác trong khi các vùng khác vẫn không thay đổi.
Ta có thể tạo khung bằng cách dùng một hồ sơ định nghĩa tập khung - một tập tin HTML chỉ
chứa các thông tin về cách thức phân chia trang web và các tập tin sẽ được hiển thị trong mỗi
vùng tương ứng. Ví dụ.
<HTML>

<HEAD>
<TITLE> Frame</TITLE>
</HEAD>
<FRAMESET COLS="50%,70,*">
<FRAME SRC="1.htm">
<FRAME SRC="2.htm">
<FRAME SRC="3.htm">
</FRAMESET>
</HTML>

Tập khung trong đoạn mã trên trỏ tới 3 hồ sơ trong html là:1.htm, 2.htm và 3.htm. Phía trong
thẻ <FRAMESET> có thuộc tính COLS, ám chỉ rằng trang sẽ được chia thành nhiều cột, 3
giá trị của thuộc tính này sẽ xác định 3 cột: cột đầu tiên sẽ có chiều rộng bằng với 50% cửa sổ
trình duyệt, cột thứ hai có chiều rộng là 70 pixel và cột thứ ba sẽ có chiều rộng bằng với phần
còn lại của cửa sổ trình duyệt (được thể hiện bởi biểu tượng * ). Nếu ta thiết lập kích thước
của khung bằng cách dùng tỉ lệ phần trăm, chúng sẽ co giãn tùy theo cửa sổ trình duyệt.
Trong hình ta thấy các thanh phân cách giữa các cột, người dùng có thể kéo các thanh này để
thay đổi kích thước của cột. Quay trở lại với đoạn mã, chú ý rằng phía trong tập khung, có
các thẻ <FRAME>. Các thẻ này xác định các tập tin HTML mà trình duyệt sẽ hiển thị trong
mỗi trình duyệt của khung.
Page 11.
Các Thẻ tạo frame và thuộc tính:
Thẻ: Frameset: Tạo một frame.
Thuộc tính:
- cols="gtrị 1, giá trị 2, …": Phân chia một frame thành các vùng con có số cột (cols) là
số các giá trị trong cols.
- rows="gtrị 1, giá trị 2, …" : Phân chia một frame thành các vùng con có số dòng
(rows) là số các giá trị trong rows.
- FRAMEBORDER, FRAMESPACING:
Thẻ Frame: Lồng trong frameset, xác định dữ liệu cho vùng cửa sổ hiện tại.

Thuộc tính:
- SRC: Xác định đường dẫn đến trang cần nạp
- Name: Tên của frame. Sử dụng cho thuộc tính target của các liên kết.
- Scrooling: (yes, no, auto): Xác định việc hiển thị thanh cuộn.
<HTML>
<HEAD>
<TITLE>Embedding Frame</TITLE>
</HEAD>
<FRAMESET ROWS="50,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="1.htm" NAME="frame1" SCROLLING="no">
<FRAMESET COLS="20%,80%" FRAMEBORDER="1" FRAMESPACING="1">
<FRAME SRC="2.htm" NAME="frame2" SCROLLING="yes">
<FRAME SRC="3.htm" NAME="frame3" SCROLLING="auto">
</FRAMESET>
</FRAMESET>
</HTML>
Gửi nội dung giữa các khung
Việc có thể gửi nội dung của một khung từ bất kỳ khung nào đã mở ra một loạt các khả năng.
Giả sử rằng ta muốn tạo một thanh di chuyển. Để thực hiện điều này, các liên kết trong tập tin
chứa thanh di chuyển phải có khả năng gửi nội dung đến các khung khác trong tập khung đó.
Đoạn mã sau tạo ra một tập khung với một thanh di chuyển đơn giản.
<HTML>
<FRAMESET COLS="25%,75%" FRAMEBORDER="1" FRAMESPACING="1">
<FRAME SRC="nav.htm" NAME="NavFrame" SCROLLING="yes">
<FRAME SRC="1.htm" NAME="ContentFrame" SCROLLING="auto">
</FRAMESET>
</HTML>
Tập khung trong đoạn mã giới thiệu một tập tin HTML mới có tên là nav.htm với một loạt
các liên kết trong đó. Tập tin nav.htm có nội dung như sau:
<HTML>

<BODY>
<A HREF="1.htm" TARGET="ContentFrame">Go to Frame 1</A><BR>
Page 12.
<A HREF="2.htm" TARGET="ContentFrame">Go to Frame 2</A><BR>
<A HREF="3.htm" TARGET="ContentFrame">Go to Frame 3</A><BR>
</BODY>
</HTML>
Những vấn đề cần quan tâm khi sử dụng frame
- Vì nhiều trình duyệt cũ không hỗ trợ khung, ta có thể cần phải quan tâm tới thẻ
<NOFRAMES> trong các trang web của mình. Các trình duyệt không hỗ trợ khung sẽ
chỉ hiển thị phần văn bản nằm giữa cặp thẻ <NOFRAMES> và </NOFRAMES>. Văn
bản này có thể bao gồm bất kỳ những gì từ một con trỏ chỉ đến một phiên bản không
dùng khung trong site của ta cho đến một lời đề nghị nhã nhặn người dùng nâng cấp
trình duyệt của họ.
- Tất cả liên kết dẫn đến vị trí ngoài site của ta cần phải thiết lập thuộc tính TARGET
với giá trị _top. Nếu khác đi, người dùng sẽ có cảm giác như họ bị rơi vào một cái bẫy
trong một tập khung của ta.
Làm việc với khung có thể là một thách thức. Khi được sử dụng cẩn thận, khung có thể
cải tiến đáng kể về khả năng di chuyển và phong cách website của ta.
1.3.6 Tables
Một trang web được tổ chức tốt sẽ dễ dàng thu hút người đọc và giúp họ dễ dàng tìm kiếm
thông tin mà họ muốn. Các bảng và khung là những công cụ có giá trị cho việc tổ chức thông
tin. Với bảng, ta có thể chia các phần khác nhau của trang web thành các vùng và đặt các
thông tin khác nhau vào các vùng đó. Ta sẽ cảm thấy rằng các bảng sẽ rất hữu dụng cho nhiều
công việc khác nhau, từ trình bày dữ liệu theo dạng cột và hàng cho đến việc định vị chính
xác các mục trên một trang web.
Căn bản về bảng
Bảng được đánh dấu bằng các thẻ <TABLE> và </TABLE>. Trong các thẻ này, ta sử dụng
các thẻ định nghĩa hàng của bảng, <TR> và </TR>. Trong mỗi hàng, ta lại định nghĩa các ô
của bảng bằng các thẻ <TD> và </TD>. Đoạn mã sau giới thiệu một trang web chứa một

bảng cơ bản. Ta có thể thấy bảng được tạo ra bởi đoạn mã này trong hình dưới.
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>R1, D1</TD>
<TD>Row 1, Data 2</TD>
</TR>
<TR>
<TD>Row 2, Data 1</TD>
<TD>This is Row 2, Data Column 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Page 13.
Việc thiết lập thuộc tính BORDER với giá trị 1 sẽ tạo ra đường biên dày 1 pixel xung quanh
mỗi ô của bảng cũng như xung quanh bảng. Nếu ta tăng giá trị này, chiều dày của đường biên
sẽ tăng lên, tuy nhiên đường kẻ giữa các ô được giữ nguyên chiều dày 1 pixel. Khi tạo bảng,
ta có thể thụt đầu dòng như trong đoạn mã trên để phân tách một cách trực quan các mức
khác nhau của bảng. Các thẻ <TD> được thụt vào sâu hơn so với các thẻ <TR> và các thẻ
<TR> được thụt sâu hơn so với các thẻ <TABLE>. Không nhất thiết phải sử dụng việc trình
bày thụt đầu dòng, tuy nhiên nên dùng kỹ thuật này phục vụ như một công cụ dò lỗi hữu
dụng, đặc biệt là trong các bảng phức tạp.
Các thuộc tính khác của bảng
- bgcolor: Xác định màu màu nền của toàn bộ bảng (hoặc các ô). Mặc định, nền của
bảng là trong suốt. Nếu ta thiết lập màu nền khác với màu nền của ô trong bảng thì
màu nền của ô đó sẽ được ưu tiên cao hơn. Giá trị của Bgcolor cũng có thể là một
màu hằng hoặc các cặp số Hexa theo hệ màu RGB.
- BACKGROUND cho phép ta hiển thị một hình ảnh phía sau một ô hay toàn bộ bảng;

ta chỉ việc thiết lập thuộc tính này trỏ đến một hình ảnh mong muốn.
- Border: Xác định độ dày của biên. Giá trị của nó là một số nguyên.
- Width, height: Xác định kích thước bảng. Giá trị của các thuộc tính này có thể là
tương đối (%), ví dụ 50%, hay tuyệt đối (tính bằng một số nguyên là pixel).
- Align: Canh chỉnh bảng: ó các giá trị: right, left, center.
- …
Tạo các ô với các kích thước khác nhau
- ROWSPAN: Ghép nhiều ô trong dòng thành một ô.
- COLSPAN: Ghép nhiều ô trong cột thành một ô.
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="2" ALIGN="center">Row 1, Data 1</TD>
</TR>
<TR>
<TD>Row 2, Data 1</TD>
<TD>Row 2, Data 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Thuộc tính COLSPAN xác định chiều rộng của một ô tính theo cột. Một ô thông thường điền
đầy trong một cột. Việc thiết lập giá trị của COLSPAN là 2 làm cho ô trải rộng thêm hai cột;
thiết lập giá trị 4 sẽ làm cho ô trải rộng trên 4 cột. Trong ví dụ, việc thiết lập giá trị
COLSPAN thành 2 làm cho ô tương ứng sẽ có chiều rộng bằng 2 ô trong các hàng kế cận.
Cũng cần chú ý rằng thuộc tính ALIGN đã được thiết lập để canh giữa nội dung của ô. Thuộc
tính có 3 giá trị:Left (mặc định), Center và Right. Kỹ thuật thiết lập chiều rộng, canh giữa nội
dung của ô như thế này thường rất hữu dụng khi ta tạo các tiêu đề cột của bảng.

ví dụ sử dụng cả hai thuộc tính ROWSPAN và COLSPAN trên một bảng.
Page 14.
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="4" ALIGN="center"><B>Fruit Sales</B></TD>
</TR>
<TR>
<TD>nbsp;</TD>
<TD> nbsp;</TD>
<TD>Store 1</TD>
<TD>Store 2</TD>
</TR>
<TR>
<TD ROWSPAN="2">Apples</TD>
<TD>Day1</TD><TD>40</TD><TD>25</TD>
</TR>
<TR>
<TD>Day2</TD><TD>30</TD><TD>30</TD>
</TR>
<TR>
<TD ROWSPAN="2">Oranges</TD>
<TD>Day1</TD><TD>40</TD><TD>25</TD>
</TR>
<TR>
<TD>Day2</TD><TD>30</TD><TD>30</TD>
</TR>
</TABLE>
</BODY>

</HTML>
Page 15.
Bài 2 DANH SÁCH VÀ FORM
2.1 Danh Sách (List)
HTML có một tập các thẻ cho phép tạo ra các danh sách dạng phân cấp. Có hai dạng danh
sách: không có thứ tự và có thứ tự. Các danh sách không có thứ tự là danh sách dạng nút,
trong khi đó danh sách có thứ tự thường là danh sách có đánh số. Ta cũng có thể kết hợp hai
loại này để tạo ra danh sách phức tạp hơn.
Danh sách không có thứ tự (unordered list).
Đầu tiên hãy xem xét hai danh sách không có thứ tự. Đoạn mã cho các danh sách này xuất
hiện trong đoạn mã 2-1. Hình 2-1 thể hiện các danh sách được phân cách bởi một đường kẻ
ngang.
đoạn mã 2.1
<HTML>
<BODY>
<UL>This is at the first level.
<UL>This is at the second level.</UL>
<UL>This is at the second level.
<UL> This is at the third level.</UL>
</UL>
<UL>This is at the second level.</UL>
</UL>
<HR>
<UL Type="Disc">This is the first level header.
<LI>This is the first level-1 item in the list.
<LI>This is the second level-1 item in the list.
<UL>
<LI>This is the first level-2 item in the list.
<LI>And this is the second level-2 item in the list.
</UL>

<LI>This is the third level-1 item in the list.
</UL>
</BODY>
</HTML>
Page 16.
Danh sách đầu tiên trong đoạn mã trên được cấu tạo chỉ dùng các thẻ danh sách không có thứ
tự, <UL> và </UL>. Bằng cách đặt một tập các thẻ danh sách không có thứ tự trong một thẻ
danh sách khác, chúng ta có thể nhúng các danh sách trong một danh sách khác để tạo ra một
loạt các văn bản được đặt thụt đầu dòng. Chú ý rằng mỗi thẻ <UL> mở có một thẻ </UL>
đóng tương ứng.
Danh sách kế tiếp trong đoạn mã cũng bắt đầu với một thẻ danh sách không có thứ tự, <UL>.
Một thẻ đóng, </UL>, là cần thiết và nó xuất hiện ở cuối của danh sách, nằm gần ở cuối tập
tin. Bất kì những gì giữa hai thẻ này được xem là thành phần của danh sách. Danh sách này
chứa đựng các mục dạng nút, được bắt đầu bởi thẻ mục danh sách, <LI>. Thẻ kết thúc </LI>
không đòi hỏi những gì bắt gặp trước khi một mục khác bắt đầu hay trước khi kết thúc danh
sách được xem là thành phần của một mục trong danh sách. Một danh sách khác được nhúng
vào trong danh sách này. Chú ý rằng danh sách được nhúng vào này được thụt đầu dòng và
các nút của nó có một dạng khác. Chỉ có 3 mức nhúng đầu tiên có các dạng nút khác nhau.
Bắt đầu với mức thứ ba, tất cả các danh sách sử dụng chung một kiểu nút. Chú ý rằng mức
thứ hai không có bất kỳ văn bản nào sau thẻ <UL>. Các văn bản tiêu đề như vậy là tuỳ chọn.
Trong thẻ <UL> có một thuộc tính TYPE. Thuộc tính này qui định rõ loại nút được hiển thị.
Type có các giá trị Disc (hình tròn đặc - mặc định cho cấp cao nhất), Circle (hình tròn) và
Square (hình vuông).
Danh sách có thứ tự
Các mục của một danh sách có thứ tự được hiển thị với các con số thay vì các nút. Sử dụng
thẻ <OL> (Order List) để thiết lập một danh sách có thứ tự, như được thể hiện trong đoạn mã
sau. Hình ảnh thể hiện cách mà trình duyệt hiển thị đoạn mã này.
<HTML>
<HEAD><TITLE> Danh sách có thứ tự</TITLE>
</HEAD>

<BODY>
<OL>
<LI>This is the first level-1 item in the list.
<LI>This is the second level-1 item in the list.
<OL>
Page 17.
<LI>This is the first level-2 item in the list.
<LI>And this is the second level-2 item in the list.
</OL>
<LI>This is the third level-1 item in the list.
</OL>
</BODY>
</HTML>
Danh sách trong đoạn mã này bắt đầu với một thẻ danh sách có thứ tự <OL>. Như trong
trường hợp với danh sách không có thứ tự, một thẻ đóng </OL> là cần thiết. Mỗi mục trong
danh sách bây giờ được bắt đầu bằng một con số thay vì một nút. Chú ý rằng một danh sách
thứ hai được nhúng trong danh sách thứ nhất và việc đánh số được bắt đầu từ 1 trong danh
sách thứ hai.
Các danh sách phức hợp
Thẻ <OL> hỗ trợ một thuộc tính có tên là TYPE. Thuộc tính này kiểm soát xem các mục
trong danh sách được bắt đầu với một số, một chữ cái hay một con số La Mã. Một thuộc tính
khác là Start (mặc định là 1) được gán các giá trị nguyên sẽ xác định giá trị xuất phát của con
số hay chữ cái. Đoạn mã kế sau minh hoạ thuộc tính TYPE cũng như việc trộn lẫn các thẻ
<OL> và <UL>. Kết quả thể hiện của đoạn mã này trong hình . Bằng cách kết hợp các danh
sách có thứ tự và danh sách không có thứ tự và bằng cách sử dụng thuộc tính TYPE, ta có thể
trình bày các thông tin phân cấp phức tạp.
<HTML>
<BODY>
<OL TYPE="1" Start=1>
<LI>This uses numbers.

<OL TYPE="A" >
<LI>This uses uppercase letters.
<OL TYPE="a">
<LI>This uses lowercase letters.
<OL TYPE="I">
<LI>This uses uppercase roman numerals.
<OL TYPE="i">
<LI>This uses lowercase roman numerals.
<LI>This also uses lowercase roman numerals.
</OL>
</OL>
</OL>
</OL>
<UL>
<LI>Here is a bullet.
Page 18.
</UL>
</OL>
</BODY>
</HTML>
Bảng giá trị của thuộc tính TYPE thẻ <OL>
TYPE Loại ký tự hiển thị
1 1, 2, 3, …
a a, b, c, …
A A, B, C, …
i i, ii, iii, …
I I, II, III, …
Nếu thay dòng đầu tiên sau thẻ <BODY> ví dụ trên bằng dòng:
<OL TYPE="1" Start=3>
ta sẽ được kết quả hiển thị như hình dưới.

2.2 Biểu Mẫu
2.2.1 Giới Thiệu
Biểu mẫu cho phép thực hiện tương tác giữa người dùng và máy chủ. Khái niệm chung này là
máy chủ thể hiện một biểu mẫu cho người dùng thông qua một trang web để yêu cầu bất kì
thông tin nào, chẳng hạn như tên, địa chỉ, số điện thoại, tuổi….Người dùng sẽ điền vào biểu
mẫu và sau đó gửi nó lên máy chủ. Một biểu mẫu có thể chứa một loạt các phần tử, bao gồm
các trường văn bản cho đến các hộp kiểm, danh sách thả xuống….
2.2.2 Cách Thức Sử Dụng Các Kiểu Trường Nhập Dữ Liệu
2.2.2.1 Thẻ Form
Phần tử FORM định nghĩa một biểu mẫu. Tất cả các phần tử tương tác của một biểu mẫu
(trường văn bản, hộp chọn lựa…) phải được đặt giữa thẻ <FORM> và </FORM>. Thẻ
<FORM> cũng hỗ trợ một số thuộc tính.
Thuộc tính NAME của thẻ <FORM > xác định tên cho biểu mẫu. Thuộc tính này giúp cho
việc truy cập dữ liệu trên biểu mẫu được dễ dàng hơn và đặc biệt hữu dụng khi ta có nhiều
biểu mẫu trên trang web và sử dụng các ngôn ngữ lập trình phía client (javascript, Vbscript).
Ta nên tạo các gía trị Name cho Form (và các thành phần khác trong form) là những tập các
ký tự không có khoảng trắng và dấu tiếng việt.
Các thuộc tính thẻ form:
- ACTION: xác định URL (một script phía server) mà theo đó biểu mẫu sẽ gửi thông
tin của nhóm (các thành phần trong form) khi người dùng nhấp chuột vào nút Submit.
- METHOD xác định cách thức biểu mẫu sẽ được gửi lên máy chủ. Có hai tuỳ chọn
chuẩn: GET và POST. Phương thức Get chỉ cho phép gửi dữ liệu hạn chế (512 byte).
- Enctype: Xác định cơ chế sử dụng để mã hóa dữ liệu nội dung của Form. Ta chỉ cần
xác lập ở chế độ mặc định trừ khi khi ta tạo một form cho phép gửi một file lên
Server. Lúc đó giá trị của thuộc tính Enctype là "Multipart/form-data" và Method của
Form phải là POST.
Page 19.
2.2.2.2 Thẻ Input
Tạo một thành phần của form. Có nhiều thành phần, được xác định khác nhau bởi thuộc tính
type trong thẻ INPUT.

Thành phần textbox: Nhập dữ liệu trên một dòng: Input type="text". Thành phần này có các
thuộc tính: type, name, value, SIZE, , MAXLENGTH.
Thành phần Password: Giống text, nhưng dữ liệu nhập vào hiển thị dấu *. Input
type="password". Các thuộc tính: type, name, value…
Các nút chọn Radio: Input type="radio". Thành phần để người sử dụng có thể chọn hay bỏ
lựa chọn. Có các thuộc tính: type, name, value, checked (xác định nút có chọn mặc định
không. Thuộc tính này không cần gán giá trị). Các nút radio thường nhóm thành một nhóm,
các nút trong một nhóm chỉ được phép chọn một nút. Để tạo thành một nhóm, các nút phải có
cùng giá trị name.
Các nút checkbox: Input type="checkbox". Về chức năng giống radio tuy nhiên có thể chọn
nhiều hay không chọn nút nào trong nhóm.
Upload file. input type=file. Các thành phần khác giống textbox, sử sụng khi cần upload 1
file lên server thông qua from.
Thành phần hidden: input type=hidden. Giống textbox, nhưng không hiển thị trên màn hình.
Thường đóng vai trò như một biến truyền dữ liệu.
Nút submit: input type=submit. Sử dụng gửi form tới script đã xác định trong thuộc tính
action của form.
Nút reset: Type = Reset. Sử dụng xóa form về trạng thái ban đầu Các thuộc tính khác giống
submit.
Nút button: Một nút hình dạng giống submit nhưng không có hành động nào khi click vào.
Nó thường được sử dụng trong kết hợp với javascript để bắt các sự kiện và thực thi một số
hành động nào đó. Các thuộc tính khác giống submit.
2.2.2.3 Textarea
Giống text box, dùng để nhập liệu nhưng nhập được trên nhiều hàng. Thẻ này có thẻ đóng và
có cú pháp như sau:
<textarea cols=n rows=m> </textarea>
Thuộc tính: cols, rows: Kích thước textarea.
2.2.2.4 Listbox
Chọn dữ liệu từ danh sách đã có.
Thẻ: Kết hợp 2 thẻ <select > và <option>. Mỗi thẻ option là một lựa chọn. Thành phần dữ

liệu trong thuộc tính value của thẻ option sẽ được gửi theo form, cón thành phần giữa hai thẻ
mở và đóng của option là thành phần được thấy bởi người sử dụng.
<select name= s>
Page 20.
<option value=v1> Giá trị 1 </option>
<option value=v2> Giá trị 2 </option>
</select>
2.2.3 Một Số Thẻ HTML Quan Trọng Khác
2.2.3.1 Thẻ META (trong phần head).
Việc cung cấp ngữ cảnh là một trong những vai trò của thẻ META. Thẻ này cũng có thể dùng
để cung cấp một số dịch vụ không trực tiếp liên quan đến nội dung của trang web. Dưới đây
là danh sách về công việc mà ta có thể thực hiện với các thẻ META cùng với đoạn mã tương
ứng:
- Buộc trang web tự cập nhật sau một thời gian xác định (tính theo giây):
<META HTTP- EQUIV="REFRESH" CONTENT="5">
- Tải toàn bộ kí tự không phải tiếng Anh cho hồ sơ (ví dụ tiếng Nhật như trong ví dụ).
Bộ ký tự này sẽ chỉ hiển thị nếu nó được hỗ trợ và được cài đặt trên máy tính của
người dùng:
<META HTTP-EQUIV="REFRESH" CONTENT="text/html;
CHARSET= window-51932">
- Buộc trang web này không chứa trong bộ đệm của máy khách hàng. Một số trình
duyệt có thể không hỗ trợ đặc điểm này:
<META NAME="Pragma" CONTENT="No-Cache">
- Báo hiệu rằng nội dung của hồ sơ đã không còn hiệu lực tại một thời điểm trong quá
khứ và điều này ngăn không cho đọc lại trang từ trên bộ đệm của máy khách hàng:
<META HTTP-EQUIV="Expires"
CONTENT="Thurday, 18-jan 96 16:26:30 GMT">
- Chuyển người dùng đến một trang web khác sau một khoảng thời gian:
<META HTTP-EQUIV="REFERSH"
CONTENT="5; URL=http:/www.microsoft.com">

- Đưa vào các từ khoá, lời mô tả, loại hồ sơ và thời gian cần ghé thăm lại - các thông tin
cần cho nhiều động cơ tìm kiếm trên web:
<META NAME="keywords" VALUE="DHTML, CSS, ActiveX, HTML, JScript">
<META NAME="description" VALUE="Description of DHTML">
<META NAME="type" VALUE="User Manual">
<META NAME="revisit-affer" VALUE="10 days">
Các thẻ META luôn được đặt ở đầu phần tử HEAD trong một tập tin. Ta cần biết rằng nhiều
động cơ tìm kiếm sẽ bỏ qua thẻ META của ta nếu lặp đi lặp lại quá nhiều lần. Bằng cách
dùng các từ đồng nghĩahay mô tả nhiều đề mục trong thẻ META loại keywords là một chính
sách nói chung là đúng.
Nhiều người dùng thẻ META với thuộc tính NAME để ghi thông tin về trang web. Ví dụ, thẻ
META với thuộc tính NAME với các giá trị ISBN, Author và Title có thể được dùng để ghi
thông tin về một cuốn sách. Một số động cơ tìm kiếm có khả năng tìm kiếm các thẻ META
tuỳ biến này.
Page 21.
2.2.4 Các Thẻ SPAN và DIV
Các thẻ <SPAN> và <DIV> được xem như là các thẻ chứa (thẻ mang). Chúng rất hữu dụng
trong việc phân chia các khối văn bản với phần xung quanh nó mà không làm ảnh hưởng đến
định dạng của riêng nó. Các thẻ này thường được dùng với các định dạng style sheet CSS và
đang được ưa chuộng trong thiết kế layout của những trang web phức tạp.
SPAN là một phần tử dòng, có nghĩa là nó có thể tham gia vào đoạn văn bản và không tạo ra
một ngắt dòng. Một số phần tử nhúng trong dòng khác là B (in đậm), U (gạch dưới), và I ( in
nghiêng). Mỗi phần tử này sẽ tham gia vào đoạn văn mà không tạo ra một ngắt dòng. Ngược
lại, DIV là phần tử khối. Thẻ DIV sẽ không tham gia vào đoạn văn. Thay vì vậy, phần tử DIV
được xem như một khối văn bản riêng biệt và trở thành một đoạn văn của riêng nó. Một số
phần tử khối thông dụng khác là P (đoạn văn), HR (đường kẻ ngang), TABLE và các phần tử
danh sách chẳng hạng như UL (danh sách không có thứ tự), OL (danh sách có thứ tự) và LI
(mục của danh sách). Đoạn mã sau minh họa một số cách dùng cơ bản về kiểu với các thẻ
SPAN và DIV. Chú ý rằng hai dòng mã tương tự nhau nhưng tạo ra kết quả hoàn toàn khác
nhau trong trình duyệt.

<HTML>
<BODY>
Here is <SPAN STYLE="font:bold 14pt">some text</SPAN> in a SPAN.
<HR>
Here is <DIV STYLE="font:bold 14pt">some text</DIV> in a DIV.
</BODY>
</HTML>
2.2.5 Các Thực Thể Ký Tự
Một thực thể ký tự chỉ là một mã biểu thị một ký tự. Mỗi ký tự có thể được hiển thị trên màn
hình có một thực thể ký tự tương ứng. Các thực thể ký tự sẽ hữu dụng khi ta muốn hiển thị
một ký tự mà ta khó nhập được từ bàn phím hoặc khó hiển thị theo cách thông thường. Ví dụ,
giả sử ta muốn hiển thị ký tự "<" trong trình duyệt. Ký tự này thường được dùng để đánh dấu
phần bắt đầu của một thẻ HTML và nếu được nhập như một ký tự trong phần văn bản, nó có
thể gây nhầm lẫn cho trình duyệt. Trình duyệt thường xem nó và văn bản đứng sau là một thẻ
HTML và sẽ bỏ qua "thẻ" này nếu nó không nhận biết được. Vì vậy, ta có thể dùng một thực
thể ký tự để biểu thị cho ký tự này và tránh được các vấn đề có thể xảy ra. Khái niệm này
được minh hoạ trong đoạn mã ví dụ và kết quả thể hiện của nó trong hình dưới.
<HTML>
<BODY>
Display in bold that X is less than Y: <B> X&lt;Y </B>.
This paragraph uses a character entity.
<HR>
Display in bold that X is less than Y: <B> X<Y </B>.
This paragraph does not use a character entity.
</BODY>
</HTML>

Đoạn thứ nhất sử dụng thực thể ký tự cho ký tự "<" (&lt;). Đoạn thứ hai sử dụng bản thân ký
tự "<". Trong ví dụ này, mọi thứ giữa ký tự "<" và phần kết thúc của thẻ đóng </B> được
Page 22.

xem như nằm phía trong của một thẻ HTML và như vậy nó không được hiển thị. Ngoài ra,
thẻ đóng </B> cũng không được xử lý đúng. Như vậy, phần còn lại của văn bản sẽ được hiển
thị ở dạng in đậm.
Một thực thể ký tự bao gồm 3 phần. Phần đầu tiên là ký tự "&". Ký tự này báo cho trình
duyệt biết rằng một thực thể ký tự bắt đầu từ đây. Phần kế tiếp có thể là một con số, được đặt
trước bởi ký tự "#", hoặc một tên gọi xác định cho một thực thể ký tự đặc biệt. Tất cả các
thực thể ký tự đều có một con số định danh, trong khi đó thì một số thực thể ký tự thường
dùng có một tên cho trước và thường được gọi là thực thể được đặt tên. Thực thể ký tự "<"
trong ví dụ nêu trên là một ví dụ điển hình. Nó có thể được xác định hoặc với #60 hoặc với lt.
Phần cuối cùng của thực thể ký tự là dấu ";". Ký tự này đánh dấu phần kết thúc của một thực
thể ký tự. Trong bảng sau liệt kê một vài trong số các thực thể ký tự thường dùng nhất. Các
giá trị số cho các thực thể ký tự được lấy từ tập ký tự Unicode phiên bản 2.0 (chính xác hơn
là theo chuẩn ISO 10646), một bảng có hàng chục ngàn ký tự của toàn thế giới
Dạng hiển thị Định danh số Thực thể Ghi chú
& &amp;
“ &#34; &quot; Dấu nháy kép
© &#169; &copy; Bản quyền
> &#62; &gt;
< &#60; &lt;
&#160; &nbsp; Ký tự khoảng trắng
® &#174; &reg; Nhãn hiệu đăng ký
™ &#153; &trade;
± &#177; &plusmn; Dấu cộng/trừ
Page 23.
Bài 3 CASCADING STYLE SHEET (CSS)
3.1 Giới Thiệu
Định nghĩa về bảng kiểu xếp chồng (css) sử dụng để tách biệt format trang và nội dung của
trang web. Với CSS, ta có thể biến đổi mọi thứ từ kích cỡ, kiểu, màu sắc của văn bản cho đến
khoảng cách giữa các chữ cái và các dòng, đường biên và phần đệm xung quanh phần tử, vị
trí chính xác của đối tượng trên trang

3.2 Kiểu Tại Chỗ
Kiểu tại chỗ là kiểu được áp dụng cho một thẻ riêng biệt trên trang web. Ta có thể áp dụng
một kiểu tại chỗ cho bất kỳ thẻ nào trên trang bằng cách dùng thuộc tính STYLE. Như
những thuộc tính khác, STYLE chỉ ảnh hưởng đến thẻ chứa nó.

<HTML>
<BODY>
<SPAN STYLE="font-weight: bold; font-style: italic">
This text is in a SPAN.</SPAN><BR>
This text is not in a SPAN.
</BODY>
</HTML>
3.3 Bảng Kiểu
Một bảng kiểu bao gồm một hoặc nhiều định nghĩa kiểu (hay còn gọi là qui tắc kiểu). Bảng
kiểu có thể chứa trong phạm vi một hồ sơ web hoặc được giữ trong một tập tin bên ngoài hồ
sơ đó. Một định nghĩa cho một kiểu bao gồm một selector, tiếp theo sau bởi khối khai báo
như trong ví dụ sau:
SPAN {font-weight: bold; font-size: italic}
Trong phần lớn các trường hợp, một selector chính là một thẻ HTML. Trong ví dụ trên, Span
chính là một selector, vì vậy tất cả những thẻ Span có trong hồ sơ sẽ tuân theo những qui tắc
đã định trong định nghĩa kiểu này.
Khối khai báo theo sau selector và nằm trong cặp dấu ngoặc móc {}. Khối này là một danh
sách những khai báo kiểu, được phân cách bằng những dấu chấm phẩy.
3.4 Bảng Kiểu Toàn Cục
Bảng kiểu toàn cục (hoặc bảng kiểu được nhúng vào) được kèm theo như là một phần của hồ
sơ HTML. Loại bảng kiểu này xác định biên giới của nó bằng thẻ mở <STYLE> và thẻ đóng
</STYLE>, nó thường được đặt trong phần head của trang HTML.
Ví dụ:
<HTML>
<HEAD>

<STYLE>
H1 {font-size: 16pt; font-weight: bold; color: red}
H2 {font-style: italic; font-size: 24pt; color: green}
SPAN {font-weight: bold; font-style: italic}
</STYLE>
</HEAD>
<BODY>
Page 24.
<SPAN>This text is in a SPAN.</SPAN>
<H1>This text is in an H1.</H1>
<H2>This text is in an H2.</H2>
</BODY>
</HTML>
Hiển thị trong trình duyệt:

Nếu muốn một phiên bản cụ thể của một phần tử được định nghĩa khác đi so với những gì đã
được định nghĩa trong bảng kiểu toàn cục, có thể ghi đè bảng kiểu bằng cách sử dụng kiểu
tại chỗ cho phần tử đặc biệt này.
<HTML>
<HEAD>
<STYLE>
H1 {font-size: 16pt; font-weight: bold; color: red}
H2 {font-style: italic; font-size: 24pt; color: green}
SPAN {font-weight: bold; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<SPAN>This text is in a SPAN.</SPAN>
<H1>This text is in an H1.</H1>
<H2>This text is in an H2.</H2>

<H2 STYLE="font-size: 36pt">This is modified H2 text.</H2>
</BODY>
</HTML>
3.5 Bảng Kiểu Liên Kết
Khả năng định dạng được đề cập trong những phần trước không chỉ dừng lại ở mức độ của
một trang web đơn mà còn có thể kiểm soát kiểu trên nhiều trang web hay có thể trên toàn bộ
website bằng cách sử dụng bảng kiểu liên kết. Một bảng kiểu liên kết (hay bảng kiểu bên
ngoài) chỉ đơn giản là một tập tin văn bản, bao gồm những định nghĩa kiểu. Tập tin này được
lưu với phần mở rộng là CSS. Tập này (nằm ngoài tập tin HTML) có thể được tham chiếu
hoặc liên kết bởi văn bản HTML bằng cách sử dụng thẻ <LINK> của trang HTML.
Ví dụ: Đầu tiên, sử dụng notepad để soạn thảo tập tin có nội dung như sau:
H1 {font-size: 16pt; font-weight: bold; color:red}
H2 {font-style: italic; font-size:24pt ; color:green}
SPAN {font-weight: bold; font-style: italic}
Lưu tập tin với tên bất kỳ có phần mở rộng là CSS (ví dụ: style.css). Cũng cần chú ý rằng,
bảng kiểu liên kết này không kèm theo các thành phần <Style> và </Style> (tức trong file
CSS không có các thẻ này).
Bây giờ tập tin tạo một file HTML chứa một liên kết đến bảng kiểu bên ngoài đã định nghĩa.
Page 25.