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ị
- 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.
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
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>
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
- 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 đặ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>
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>
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>
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;
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>
<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>
<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.
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ữ
- Đư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.
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ú
& &
“ " " Dấu nháy kép
© © © Bản quyền
> > >
< < <
  Ký tự khoảng trắng
® ® ® Nhãn hiệu đăng ký
™ ™ ™
± ± ± 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
<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>
Copyright: Tài liệu đại học ©