[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf

1
LẬP TRÌNH TRÊN NỀN WEB

2
Nội dung môn học
 Giới thiệu
 Ngôn ngữ HTML (HyperText Markup
Language )
 Style sheet (CSS)
 Java script
 ADO.NET (Ngôn ngữ lập trình C#)

Giới thiệu
 Internet là mạng máy tính lớn nhất trên
thế giới, được xem như là mạng của các
mạng.
 World Wide Web là một tập con của
Internet. World Wide Web gồm các Web
Servers có mặt khắp mọi nơi trên thế giới
 Web server chứa thông tin mà bất kỳ
người dùng nào trên thế giới cũng có thể
truy cập được
3

Giới thiệu (tiếp)
 Mạng là một nhóm các máy tính kết nối với
nhau. Internet là mạng của các mạng. Giao
thức TCP/IP (Transmission Control
Protocol/Internet Protocol) cung cấp việc kết
nối tất cả các máy tính trên thế giới.
4

 WWW hoạt động dựa trên 3 cơ chế để đưa các
tài nguyên có giá trị đến với người dùng. Đó là:

 Giao thức: Người dùng tuân theo các giao thức này
để truy cập tài nguyên trên Web. HyperText Transfer
Protocol(HTTP) là giao thức được WWW sử dụng.
 Địa chỉ: WWW tuân theo một cách thức đặt tên
thống nhất để truy cập vào các tài nguyên trên Web.
URL được sử dụng để nhận dạng các trang và các tài
nguyên trên Web.
 HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử
dụng để tạo các tài liệu có thể truy cập trên Web. Tài liệu
HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử
của HTML. File được lưu trên Web server với đuôi .htm
hoặc .html. 5

6
Ngôn ngữ HTML
 HTML là viết tắt của HyperText Markup Language (Ngôn ngữ
đánh dấu siêu văn bản).
 HyperText – Văn bản có thể kết nối đến văn bản khác.
 Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt
xác định được cách biểu diễn trang web đến người sử
dụng.
 Một tập tin HTML là một tập tin văn bản trong đó có chứa các
thẻ đánh dấu.
 Các thẻ đánh dấu này sẽ giúp trình duyệt Web xác định cách
trình bày trang Web.
 Một tập tin HTML phải có đuôi mở rộng là htm hoặc html.
 Một tập tin HTML có thể được viết trên một trình soạn thảo
văn bản đơn giản.

7
Các bước để soạn thảo một tập tin HTML?
 Nếu đang sử dụng hệ điều hành Windows, hãy mở trình
Notepad.
 Nếu là hệ điều hành Mac, hãy khởi động trình Simple Text.
 Trong OSX thì chọn trình TextEdit, nhưng phải có một số
thay đổi như sau: mở mục chọn “Format” và sau đó chọn
“Plain text” thay vì là “Rich text”.
 Mở cửa sổ “Preferences” phía dưới mục chọn “Text Edit” và
chọn “Ignore rich text commands in HTML files”.
 Lưu ý rằng nếu không có những thay đổi trên thì đoạn mã
HTML của bạn sẽ không thực hiện được.

8
 Gõ vào trình soạn thảo như sau:
 <html>
 <head>
 <title>Title of page</title>
 </head>
 <body>
 This is my first homepage. <b>This text is
bold</b>
 </body>
 </html>
 Lưu tập tin với tên "mypage.htm".

9
 Mở trình duyệt Internet đang sử dụng.
 Chọn mục “Open” (hoặc “Open Page”) trong mục
chọn File của trình duyệt.
 Một hộp thoại sẽ xuất hiện.dẫn
 Chọn “Browse” (hoặc “Choose File”) và chỉ đường
dẫn đến tập tin HTML đã tạo - "mypage.htm” – kích
chọn vào tập tin này và nhấn “Open”.
 Bây giờ ta có thể thấy một địa chỉ xuất hiện trong
hộp thoại, ví dụ như
"C:MyDocumentsmypage.htm”. Hãy kích chọn nút
OK và trình duyệt sẽ hiển thị trang Web.

10
Giải thích ví dụ
 Thẻ đầu tiên trong tài liệu HTML là <html>.
 Thẻ này sẽ báo cho trình duyệt biết bắt đầu tập tin HTML.
 Thẻ cuối cùng của tài liệu là </html>
 Thẻ này sẽ báo cho trình duyệt biết đã kết thúc tập tin HTML.
 Nội dung giữa cặp thẻ <head> và </head> là những thông tin header.
 Những thông tin header này sẽ không được hiển thị trong cửa sổ trình
duyệt.
 Trong cặp thẻ <title> sẽ là tiêu đề của trang. Tiêu đề này sẽ được hiển thị
trên thanh tiêu đề của trình duyệt.
 Giữa cặp thẻ <body> là nội dung của trang web sẽ được hiển thị trong
trình duyệt.
 Nội dung bên trong cặp thẻ <b> và </b> sẽ được in đậm.

11
Đuôi mở rộng là HTM hay HTML?
 Khi lưu một tập tin HTML, bạn có thể lưu với đuôi mở
rộng .htm hoặc .html.
 Trong ví dụ trước, ta đã lưu tập tin mypage với đuôi mở
rộng là .htm.
 Lí do có thể là do thói quen cũ, trước đây thông thường hầu
hết các phần mềm đều chỉ chấp nhận đuôi mở rộng gồm 3
chữ cái.
 Đối với các phần mềm mới sau này, bạn nên sử dụng đuôi
mở rộng là .html thì an toàn hơn.

12
Lưu ý với các trình soạn thảo HTML
 Bạn có thể dễ dàng soạn thảo các tập tin HTML với
các trình soạn thảo WYSIWYG (what you see is
what you get) như là FrontPage hay Dreamweaver
thay vì gõ trong một tập tin văn bản thông thường.
 Mặc dù vậy, nếu bạn muốn trở thành một người
phát triển web xuất sắc, thì lời khuyên là bạn nên
sử dụng trình soạn thảo văn bản thông thường để
ghi nhớ những cơ bản của HTML.

13
Các câu hỏi thường gặp
 H: Sau khi soạn thảo một tập tin HTML, tại sao tôi vẫn
không thấy được kết quả trong trình duyệt của mình?
 Đ: Hãy chắc chắn rằng tập tin của bạn đã được lưu với một tên gọi
và một đuôi mở rộng, như là "c:mypage.htm". Và cũng chắc chắn
rằng bạn phải chọn đúng tên này khi bạn mở nó trong trình duyệt.
 H: Tôi đã chỉnh sửa tập tin HTML, nhưng tại sao
những thay đổi này tôi không thấy được trên trình
duyệt?
 Đ: Trình duyệt chỉ là nơi nơi thể hiện trang web, vì vậy nó không có
nhiệm vụ phải đọc một trang web tới hai lần. Khi đã bạn thay đổi tập
tin của mình, thì trình duyệt không thể nào biết được.Hãy bấm nút
refresh/reload trên trình duyệt để trình duyệt thể hiện lại trang của
bạn.

14
 H: Tôi nên dùng trình duyệt nào?
 Đ: Bạn có thể dùng tất cả các trình duyệt, như là Internet Explorer,
Firefox, Netscape, hay Opera. Tuy nhiên, có một số ví dụ nâng cao
mà bạn cần phải dùng các phiên bản mới nhất của trình duyệt.
 Q: Máy tính của tôi có bắt buộc phải chạy Windows
hay không? Nếu là Mac thì có được không ?
 Đ: Bạn không nhất thiết phải chạy Windows. Bạn vẫn có thể dùng các
hệ điều hành khác, như Mac chẳng hạn.

15
Cấu trúc một tài liệu HTML
<html> 
<head> 
<title>…</title> <!–- Tiêu đề tài liệu -->
</head> 
<body> 
… <!–- Thân tài liệu -->
</body> 
</html>

16
Các thành phần cơ bản của trang Web
 Các trang web thông thường có hai thành phần:
 <head> … </head>
 <body> … </body>
 <head>
 <title>
 <body>
 Nội dung tài liệu
 Trong một tài liệu chỉ có thể có duy nhất một thẻ
<body> và một thẻ <head>.

17
Các thành phần của HTML

18
 Tài liệu HTML là những tập tin văn bản được cấu
thành từ các thành phần HTML.
 Các thành phần HTML được định nghĩa bằng cách
sử dụng các thẻ HTML.

19
Các thẻ HTML

Thẻ HTML được dùng để tạo nên các thành phần HTML.
 Thẻ HTML được bao quanh bởi hai ký tự < và >.
 Các ký tự này được gọi là các dấu ngoặt góc.
 Các thẻ HTML thông thường đi theo cặp, ví dụ như <b> và
</b>
 Thẻ thứ nhất trong cặp thẻ trên được gọi là thẻ bắt đầu, và
thẻ thứ hai được gọi là thẻ kết thúc.
 Đoạn văn bản bên trong cặp thẻ này là nội dung thành phần.
 Thẻ HTML không phân biệt chữ hoa chữ thường, <b> cũng
giống như <B>

20
Thẻ
 Các thẻ nằm bên trong < và >
 Ví dụ : <html> là một “thẻ html”
 Các thẻ thường đi theo cặp, một sẽ ở trước
và một ở sau đoạn văn bản.
 Ví dụ : <b>text</b>
 <b> là thẻ mở
 </b> là thẻ đóng
 Thẻ đóng có dạng: </tag>

21
Các thuộc tính của thẻ
 Mô tả các chi tiết của một thẻ
 Thông thường có dạng:
 Thuộc tính =“giá trị”
 Đặt trong thẻ như sau:
 <thẻ thuộc tính=“giá trị”>
 Một thẻ có thể có nhiều thuộc tính:
 <thẻ thuộc tính1=“giá trị1” thuộc tính2=“giá trị2”>
 Thẻ đóng không có thuộc tính

22
Các thành phần HTML
 Xem xét ví dụ sau đây:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

23
 Đây là một thành phần HTML:
<b>This text is bold</b>
Thành phần HTML được bắt đầu bởi một thẻ bắt đầu
element starts with a start tag: <b>
Nội dung của thành phần HTML là: This text is bold
Thành phần HTML kết thúc bằng một thẻ kết thúc: </b>
 Thẻ <b> được dùng để định nghĩa một thành
phần HTML sẽ được in đậm.

24
 Đây cũng là một thành phần HTML:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
 Thành phần này bắt đầu bởi thẻ <body>, và kết thúc bởi thẻ
</body>.
 Thẻ <body> được dùng để định nghĩa thành phần HTML
chứa nội dung của tài liệu HTML.

25
Tại sao chúng ta sử dụng chữ
thường để viết các thẻ?
 Chúng ta đã biết rằng các thẻ HTML không phân biệt chữ
hoa, chữ thường: <B> thì cũng giống như <b>. Nếu xem
mã nguồn của một trang web, thì bạn có thể thấy rằng hầu
hết các trang web đếu sử dụng chữ hoa để trình bày các thẻ.
Chúng ta thì luôn luôn dùng chữ thường. Vì sao vậy?
 Nếu bạn muốn sử dụng các chuẩn web cũ, thì bạn chắc chắn
phải dùng chữ thường. World Wide Web Consortium (W3C)
khuyến cáo sử dụng chữ thường trong HTML 4, và XHTML
(thế hệ tiếp theo của HTML) cũng yêu cầu chữ thường.

26
Các thuộc tính của thẻ
 Thẻ có thể có các thuộc tính. Các thuộc tính này sẽ cung cấp
thêm thông tin cho thành phần HTML. Thẻ sau định nghĩa
một bảng trong HTML: <table>. Khi thêm vào thuộc tính
border như sau, bạn có thể cho trình duyệt biết thêm là bảng
này không có đường viền: <table border="0">
 Thuộc tính luôn đi theo cặp tên/giá trị dưới dạng: tên=“giá
trị”.
 Thuộc tính phải luôn được đặt trong thẻ bắt đầu của một
thành phần HTML.

27
 Thuộc tính và giá trị thuộc tính cũng không phân biệt chữ
hoa-chữ thường.
 Tuy nhiên, World Wide Web Consortium (W3C) khuyến cáo
sử dụng chữ thường trong HTML 4, và XHTML (thế hệ tiếp
theo của HTML) cũng yêu cầu chữ thường.

28
Luôn dùng dấu trích dẫn cho giá trị thuộc tính
 Các giá trị thuộc tính nên luôn luôn đặt trong các dấu trích
dẫn. Thông thường người ta hay sử dụng dấu trích dẫn đôi,
nhưng dấu trích dẫn đơn vẫn được chấp nhận.
 Trong một số trường hợp đặc biệt, ví dụ như khi trong giá trị
thuộc tính lại có chứa dấu trích dẫn, thì trong trường hợp này
cần phải dùng dấu trích dẫn đơn:
 name='John "ShotGun" Nelson'

29
Các thẻ cơ bản trong HTML

30
 Các thẻ quan trọng nhất trong HTML là các thẻ dùng để định
nghĩa headings, paragraphs và line breaks.
 Cách tốt nhất để học HTML là làm việc với các ví dụ. Chúng
tôi đã xây dựng cho các bạn một trình soạn thảo HTML rất
tốt. Với trình soạn thảo này, bạn có thể soạn thảo mã nguồn
HTML, và kích vào nút kiểm tra để xem kết quả.

31
Các thẻ HTML cơ bản
Thẻ Mô tả
<html> Khai báo một tài liệu HTML.
<body> Khai báo phần thân cho tài liệu.
<h1 to h6> Khai báo header 1 đến header 6
<br> Chèn một ký tự kết thúc dòng.
<p> Khai báo một đoạn.
<hr> Kẻ một đường nằm ngang.
<!--> Chú thích.

32
Thẻ <html>
 Định nghĩa và cách sử dụng
 Thành phần này sẽ cho trình duyệt biết rằng đây là một
tài liệu HTML.

33
Thẻ <body>
 Dùng để khai báo phần nội dung của tài liệu.
 Nó chứa toàn bộ nội dung của tài liệu (như văn bản, hình
ảnh, màu sắc, đồ hoạ, …)

34
 Ví dụ
<html>
<head>
</head>
<body>
Nội dung của tài liệu ......
</body>
</html>

35
Các thuộc tính tuỳ chọn
Thuộc tính Giá trị Mô tả
background file_name Một hình ảnh dùng làm hình nền. Thường
dùng style để thay thế.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Màu nền của tài liệu. Thường dùng style
để thay thế.
text rgb(x,x,x)
#xxxxxx
colorname
Màu chữ trong tài liệu. Thường dùng style
để thay thế.

36
Một ví dụ rất đơn giản
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
The content of the body element is displayed
in your browser.
</body>
</html>

37
 Thuộc tính màu nền
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>

38
 Thuộc tính hình nền
<html>
<body background="background.jpg">
<h3>A background image!!!</h3>
<p>Both gif and jpg files can be used as
background images.</p>
</body>
</html>

39
Headings - Thẻ <h1> đến <h6>
 Headings được định nghĩa bằng các thẻ từ <h1> đến <h6>.
 <h1> : heading lớn nhất.
 <h6> : heading nhỏ nhất.
 Ví dụ
 <html>
<body>
<h1>h1 : This is a heading</h1>
<h5>h5: This is a heading</h5>
</body>
 </html>
 HTML sẽ tự động thêm một dòng trống vào trước và sau mỗi
heading.

40
Thẻ <br> - Ngắt dòng
 Thẻ <br> được dùng khi bạn muốn kết thúc một
hàng, nhưng không muốn bắt đầu một đoạn mới.
 Thẻ <br> chèn một ký tự ngắt dòng.
 Trong HTML, thẻ <br> không có thẻ kết thúc.
 Thẻ <br> sẽ ngắt dòng ngay tại vị trí mà nó được
đặt.
 Ví dụ
 This text contains<br>a line break
 Thẻ <br> là một thẻ rỗng. Nó không có thẻ đóng.

41
Thẻ <p> - Đoạn văn bản
 Các đoạn được khai báo bởi thẻ <p>.
 <p>This is a paragraph Tag</p>
 <p>This is another paragraph Tag</p>
 HTML sẽ tự động thêm một dòng trống vào
trước và sau mỗi đoạn.

42
Thẻ <hr>
 Thẻ <hr> sẽ vẽ một thước ngang.
 Ví dụ
 This is some text <hr> This is some text

43
Thẻ 
 Thẻ comment được dùng để chèn một chú thích vào mã nguồn.
 Trình duyệt sẽ không thực hiện các chú thích này.
 Bạn có thể dùng chú thích để giải thích mã lệnh, điều này sẽ giúp bạn
trong việc sửa mã lệnh trong những lần sau đó.
 Bạn cũng có thể đưa những thông tin riêng của chương trình vào bên
trong chú thích.
 Trong trường hợp này, người dùng sẽ không thấy được chúng nhưng
chương trình vẫn thấy được.
 Tốt hơn là hãy ghi chú thích bên trong các phần tử script và style để
ngăn chặn các trình duyệt cũ không hiển thị chúng, vì các trình duyệt
này không hỗ trợ script và style.

44
 Ví dụ
Mã nguồn Kết quả

<p>This is a regular paragraph</p>
This is a regular paragraph

45
Định dạng văn bản và các liên kết
trong HTML

46
Định dạng văn bản trong HTML
HTML định nghĩa rất nhiều phần tử cho phép
định dạng văn bản, như là in đậm hay in
nghiêng ký tự.

47
Các loại thẻ được dùng trong định dạng
văn bản
Thẻ Mô tả
<b> Khai báo chữ in đậm
<i> Khai báo chữ in nghiêng
<big> Khai báo cỡ chữ lớn
<small> Khai báo cỡ chữ nhỏ
<strong> Khai báo chữ đậm
<sub> Khai báo chỉ số dưới.
<sup> Khai báo chỉ số trên
Thẻ
Mô tả
<em>
Khai báo đoạn văn bản cần
nhấn mạnh
<ins>
Khai báo định dạng cho chữ
mới chèn thêm
<del> Khai báo chữ bị gạch xoá
<s>
Ít dùng, thường dùng thẻ
<del>
<strike>
Ít dùng, thường dùng thẻ
<del>
<u> Ít dùng, thường dùng style

48
Các thẻ <i> <b> <big> <small>

Định nghĩa và cách sử dụng
 Tất cả các phần tử sau đều để định dạng ký tự
 Các phần tử này không phải là ít dùng, nhưng kết quả hiệu ứng sẽ tốt
hơn nếu dùng style sheets.
<i> Tạo chữ in nghiêng
<b> Tạo chữ in đậm
<big> Tạo chữ cỡ lớn
<small> Tạo chữ cỡ nhỏ

49
 Ví dụ
<i>Italic text</i><br>
<b>Bold text</b><br>
<big>Big text</big><br>
<small>Small text</small><br>
Italic text
Bold text
Big text
Small text

50
Các thẻ <em> <strong>
 Tất cả các phần tử sau đều để định dạng cụm từ.
 Các phần tử này không phải là ít dùng, nhưng kết quả hiệu ứng sẽ tốt
hơn nếu dùng style sheets
 Example
<em> Nhấn mạnh đoạn văn bản
<strong> Nhấn mạnh bằng cách in đậm đoạn văn bản
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
Emphasized text
Strong text

51
Các thẻ <sub> và <sup>
 Thẻ <sub> khai báo ký tự dưới dạng chỉ số dưới.
 Thẻ <sup> khai báo ký tự dưới dạng chỉ số trên.
 Ví dụ
H <sub>2</sub>O
E=mc<sup>2</sup>
H2
O
E=mc2

52
Các thẻ <del>, <ins>
 Khai báo định dạng cho ký tự thêm vào.
 Khai báo định dạng cho ký tự bị xoá trong tài liệu.
 Ví dụ
a dozen is <del>20</del> <ins>12</ins>
pieces!
a dozen is 20 12 pieces!

53
Các thẻ <s> và <strike>
 Các thẻ <s> và <strike> dùng để khai báo ký tự gạch dưới và gạch
bỏ.
 Ví dụ
A new version is <s>not yet
available.</s>
now available!
<br> <br>
A new version is <strike>not yet
available.</strike> now available!
A new version is not yet available. now available!
A new version is not yet available. now available!

54
Thẻ <u>
 Thẻ <u> khai báo ký tự gạch dưới.
 Lưu ý: Nên tránh gạch dưới ký tự, vì nó sẽ làm cho người
dùng nhầm lẫn với các siêu liên kết.
 Ví dụ
A new version is <u>now available!</u> A new version is now available!

55
Liên kết trong HTML
HTML sử dụng siêu liên kết để kết nối đến
một tài liệu khác trên mạng

56
Thẻ liên kết
Thẻ Mô tả
<a> Khai báo một thẻ neo

57
Thẻ Anchor và thuộc tính Href
 HTML sử dụng thẻ <a> (anchor) để thiết lập kết nối đến
một tài liệu khác.
 Một thẻ neo có thể chỉ đến bất kỳ một nguồn nào trên
mạng, đó có thể là : một trang web, một hình ảnh, một tập
tin âm thanh, một bộ phim…
 Cú pháp để khai báo một thẻ neo như sau:
 <a href="url">Text to be displayed</a>

58
 Thẻ <a> được dùng để thiết lập một neo để liên kết,
thuộc tính href được dùng để xác định địa chỉ mà tài liệu
liên kết tới, và những từ giữa cặp thẻ đóng và thẻ mở của
thẻ này sẽ được hiển thị dưới dạng một siêu liên kết.
 Ví dụ
 <a href="http://www.yahoo.com/">Visit Yahoo!!</a>
 Dòng trên sẽ xuất hiện trong trình duyệt như sau:
 Visit Yahoo!!

59
Thuộc tính Target
 Với thuộc tính target, bạn có thể xác định vị trí mà tài liệu liên
kết tới sẽ được mở ra.
 Dòng sau sẽ mở tài liệu đích trong một cửa sổ trình duyệt mới:
 <a href="http://www.yahoo.com/" target="_blank">Visit Yahoo!!!
</a>

60
Thẻ Anchor và thuộc tính Name
 Thuộc tính name được dùng để thiết lập một neo được đặt
tên. Khi sử dụng neo này, chúng ta có thể thiết lập liên kết
đến một phần cụ thể trong trang web, thay vì là phải đọc từ
đầu đến cuối tài liệu để tìm phần đó.
 Sau đây là cú pháp của một thẻ neo được gắn tên:
 <a name="label">Text to be displayed</a>
 Thuộc tính name được dùng để thiết lập một neo được đặt
tên. Tên của neo có thể là bất kỳ ký tự nào.

61
 Dòng sau sẽ khai báo một neo được đặt tên:
 <a name="tips">Useful Tips Section</a>
 Lưu ý rằng neo được đặt tên sẽ không được hiển thị theo
một cách đặc biệt nào cả.
 Để kết nối trực tiếp đến phần chỉ định, hãy thêm một ký hiệu
# và tên của neo vào cuối của địa chỉ URL.
 Một siêu liên kết đến phần Tips bên trong tập tin
"html_links.asp" sẽ có dạng như sau:
 <a href="#tips">Jump to the Useful Tips Section</a>

63
Thiết lập một kết nối mailto

66
Nền
 Thẻ <body> có hai thuộc tính giúp xác định
thuộc tính cho nền.
 Nền có thể là màu nền hoặc hình nền.

67
Thuộc tính màu nền
 Thuộc tính bgcolor sẽ chỉ định màu nền cho trang HTML.
 Giá trị của thuộc tính này có thể là một số thập lục phân,
một giá trị RGB, hay một tên màu:
 <body bgcolor="#000000">
 <body bgcolor="rgb(0,0,0)">
 <body bgcolor="black">
 Tất cả các dòng trên đều thiết đặt màu nền là màu đen.

68
Thuộc tính hình nền
 Thuộc tính background xác định hình ảnh nền cho trang web.
 Giá trị của thuộc tính này là URL của hình ảnh mà bạn muốn
dùng làm hình nền.
 Nếu hình ảnh bạn chọn nhỏ hơn cửa sổ trình duyệt thì hình
ảnh này sẽ được lặp đi lặp lại cho đến khi nó đầy cửa sổ
trình duyệt.
 <body background="clouds.gif">
 <body background="http://www.yahoo.com/clouds.gif">
 URL có thể là địa chỉ tương đối (như dòng trên) hoặc tuyệt
đối (như dòng sau).

69
 Chú ý: Nếu muốn sử dụng một hình ảnh làm nền,
bạn nên lưu ý những điều sau:
 Hình nền liệu có làm chậm đi quá trình tải nhiều không?
 Hình nền liệu có phù hợp với những hình khác trong trang
không?
 Hình nền liệu có phù hợp với màu chữ trong trang không?
 Liệu hình nền bạn chọn có phù hợp khi đưa lên trang web
hay không?
 Hình nền có làm mất tiêu điểm của văn bản hay không?

70
Màu trong HTML
 Các màu được hiển thị bởi sự kết hợp giữa 3 màu cơ
bản là đỏ, xanh lục và xanh.
 Các giá trị màu
 Các màu trong HTML có thể được định nghĩa như là một
số thập lục phân cho sự kết hợp giữa 3 giá trị màu: Đỏ,
xanh lục và xanh.
 Giá trị nhỏ nhất có thể sử dụng là is 0 (thập lục phân là
#00) và giá trị lớn nhất là 255 (thập lục phân là #FF).
 Bảng sau thể hiện kết quả của sự kết hợp của 3 màu đỏ,
xanh lục và xanh:

71
Thẻ chèn hình ảnh và thuộc tính Src
 Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>.
 Thẻ <img> là thẻ rỗng, nghĩa là nó chỉ chứa các thuộc tính
và nó không có thẻ đóng.
 Để hiển thị một hình ảnh trên trang web, bạn phải dùng
thuộc tính src. Src là viết tắt của từ “source”. Giá trị của
thuộc tính này là địa chỉ URL của hình ảnh mà bạn chọn để
hiển thị.
 Cú pháp để định nghĩa một hình ảnh:
 <img src="url">

72
 URL chỉ đến vị trí lưu trữ hình ảnh. Một hình ảnh có
tên “boat.gif” nằm trong thư mục “images” trên
trang “www.yahoo.com” sẽ có địa chỉ URL là:
 URL: http://www.yahoo.com/images/boat.gif.
 Trình duyệt sẽ đặt hình ảnh ngay tại vị trí mà bạn
đặt thẻ chèn hình ảnh. Nếu bạn đặt thẻ chèn hình
ảnh giữa hai đoạn, thì trình duyệt trước tiên sẽ hiển
thị đoạn đầu, tiếp theo là hình ảnh, rồi mới đến
đoạn thứ hai.

73
 Hình ảnh và canh lề cho hình ảnh
 Thuộc tính ALIGN
 ALIGN = “TOP”
 ALIGN = “MIDDLE”
 ALIGN = “BOTTOM”
ALIGN = “LEFT”
ALIGN = “RIGHT”
<HTML>
<HEAD> <TITLE> image and character align setting </TITLE> </HEAD>
<BODY>
<IMG SRC = "fish.gif" ALIGN = “TOP”> top of image <P>
<IMG SRC = "fish.gif" ALIGN = “MIDDLE”> center of image<P>
<IMG SRC = "fish.gif" ALIGN = “BOTTOM”> bottom of image
</BODY>
</HTML>

74
<HTML>
<HEAD> <TITLE> Image and Character .. </TITLE> </HEAD>
<BODY >
<IMG SRC = "fish.gif" ALIGN = "LEFT“ >
image=left, <BR> character=right <P><BR> <BR>
<IMG SRC = "fish.gif" ALIGN = "RIGHT“ >
image=right, <BR> character=left <P>
</BODY>
</HTML>
<HTML>
<HEAD> <TITLE> image and character align setting </TITLE> </HEAD>
<BODY>
<IMG SRC = "fish.gif" ALIGN = “TOP”> top of image <P>
<IMG SRC = "fish.gif" ALIGN = “MIDDLE”> center of image<P>
<IMG SRC = "fish.gif" ALIGN = “BOTTOM”> bottom of image
</BODY>
</HTML>

76
2. Cách tạo đề mục trong HTML
HTML hỗ trợ cách tạo ra đề mục có đánh
số thự tự, không có số thứ tự và cách tạo
ra đề mục con.

77
The kind of List Tags
Tag Description
<ol> Tạo một đề mục có đánh số thứ tự.
<ul>
Tạo một đề mục không đánh số thứ
tự.
<li> Tạo một đề mục con

78
Tạo đề mục không đánh số thự tự
 Thẻ <ul>
 Thẻ <ul> tạo một danh sách đề mục không có số thứ
tự.
 Thẻ <li>
 Thẻ <li> bắt đầu tạo một danh sách đề mục.
 Thẻ <li> được sử dụng trong cả hai trường hợp đề
mục có và không có đánh số thứ tự.

79

Các kiểu đánh đề mục:
 disc : hình tròn màu đen (mặc định)
 circle : hình tròn màu trắng
 Square : hình chữ nhật màu đen
 Ví dụ
<ul>
<li type=“disc”> ul - unordered list</li>
<li type=“circle”>ol - ordered list</li>
<li type=“square”>dir - directory list (deprecated)</li>
<li>menu - menu list (deprecated)</li>
</ul>

80
 Một đề mục không có số thứ tự là một danh sách các mục.
Danh sách các mục này được đánh dấu bởi các dấu tròn
(thông thường là các hình tròn nhỏ màu đen).
 Một danh sách đề mục không có số thứ tự được bắt đầu với
thẻ <li>.
 <ul>
 <li>Coffee</li>
 <li>Milk</li>
 </ul>
 Và đây là những gì thể hiện trên trình duyệt :
 ᆞᆞ
Coffee
 ᆞᆞ
Milk
 Bên trong một danh sách đề mục, bạn có thể đưa vào một
đoạn văn bản, một ngắt dòng, các hình ảnh, liên kết hay các
thể loai khác.

81
Tạo đề mục có số thự tự
 Thẻ <ol>

Thẻ <ul> tạo một danh sách đề mục có đánh số thứ tự.
 Các kiểu đánh đề mục:
 A : Chữ in hoa
 a : Chữ thường
 I : Ký hiệu La Mã viết hoa
 i : Ký hiệu La Mã viết thường
 1 : Con số

82
 Ví dụ
<ol type="a" start="10">
<li>ul - unordered list</li>
<li>ol - ordered list</li>
<li>dir - directory list (deprecated)</li>
<li>menu - menu list (deprecated)</li>
</ol>

83
Thuộc tính của thẻ <ol>
 Thu c t
ộ ính START
 <OL STATR=“?”>
 ? : số bắt đầu
 Mặc định : 1
<HTML>
<BODY>
<OL START=“11” >
<LI> 축구
<LI> 축구
<LI> 축구
<LI> 축구
<LI> 축구
</OL>
</BODY>
</HTML>

84
 Thu c t
ộ ính VALUE:
 Định dạng: <LI VALUE=“?”>
? : Số (numeric)

85
Ví dụ : <li type=“?”>
<HTML>
<BODY>
Ordered List tag example
<OL>
<LI TYPE=“A”> Order is uppercase alphabetic
<LI TYPE=“a”> Order is lowercase alphabetic
<LI TYPE=“I”> Order is Greece uppercase character
<LI TYPE=“I”> Order is Greece lowercase character
<LI TYPE=“1”> Order is Numeric
</OL> <BR>
start number=10
<OL START=“10” >
<LI> First number = 10
<LI TYPE=“I”> next LI tag is Greece uppercase 11
<LI> next order ?
</OL>
</BODY>
</HTML>

86
 Một danh sách có số thứ tự cũng là một danh sách các đề mục. Danh
sách đề mục này được đánh số.
 Một danh sách có số thứ tự được bắt đầu với thẻ <ol>. Và mỗi mục trong
danh sách này được bắt đầu bởi thẻ <li>.
 <ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>
 Và đây là những gì thể hiện trên trình duyệt :
 1. Coffee
 2. Milk
 Bên trong một danh sách đề mục, bạn có thể đưa vào một đoạn văn bản,
một ngắt dòng, các hình ảnh, liên kết hay các thể loai khác.

87
Ví dụ - Thẻ <ul>
<html>
<head> <title> unordered list expression </title></head>
<body>
<h3> My Body.. </h3>
<ul type=“disc”>
<li> face
<li> hand
<li> foot
</ul>
<h3> Anamais.. </h3>
<ultype=“square”>
<li> cat
<li> dog
<li> turtle
</ul>
</body>
</html>

88
Ví dụ - Thẻ <ol>
<html>
<head> <title> Ordered list expression </title></head>
<body>
<h3> My Body.. </h3>
<ol >
<li> face
<li> hand
<li> foot
</ol>
<h3> Anamais.. </h3>
<ol type=“a” start=“2”>
<li> cat
<li> dog
<li> turtle
</ol>
</body>
</html>

90
Các loại thẻ sử dụng với bảng
Thẻ Mô tả
<table>
<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
Tạo một bảng
Khai báo phần header cho bảng
Tạo một hàng
Tạo một ô
Tạo một tiêu đề cho bảng
Tạo nhóm các cột
Khai báo các giá trị thuộc tính cho một hay nhiều cột trong
bảng
Định nghĩa phần đầu bảng
Định nghĩa phần thân của bảng
Định nghĩa phần cuối của bảng

91
Bảng
 Bảng được định nghĩa bởi thẻ <table>.
 Một bảng được chia thành các hàng (bằng cách
dùng thẻ <tr>), và mỗi hàng được chia thành các ô
dữ liệu (bằng cách dùng thẻ <td>).
 td là chữ viết tắt của "table data," tức là nội dung
của ô dữ liệu.
 Một ô dữ liệu có thể chứa văn bản, các hình ảnh,
danh sách, các đoạn, biểu mẫu, bảng,…

92
Các thuộc tính chức năng
Thuộc tính
Giá trị Mô tả
align left
center
right
Canh lề trong bảng. Thường dùng style để thay thế.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Định dạng màu nền cho bảng. Thường dùng style để
thay thế.
border pixels Quy định độ rộng của đường viền.
Lưu ý: Thiết đặt border="0“để hiển thị bảng không có
đường viền!
cellpadding pixels
%
Quy định khoảng cách từ thành bảng đến nội dung
trong bảng.
cellspacing pixels
%
Quy định khoảng cách giữa các ô.
width %
pixels
Quy định bề rộng của bảng.

93
Thẻ <tr>
 Tạo một hàng trong bảng.
 Các thuộc tính chức năng
align right
left
center
justify
char
Định dạng khoảng cách giữa các dòng trong
ô.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Quy định màu nền của ô. Thường dùng style
để thay thế.
valign top
middle
bottom
baseline
Quy định khoảng cách cho văn bản trong ô
theo chiều dọc.

94
Thẻ <td>
 Tạo một ô trong bảng.
 Các thuộc tính chức năng
align left
right
center
Quy định khoảng cách cho nội dung trong ô theo chiều
dọc.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Quy định màu nền của ô. Thường dùng style để thay
thế.

95
colspan number Chỉ ra số cột mà ô này nên nối
height pixels Quy định chiều cao của ô. Thường dùng style để
thay thế.
rowspan number Chỉ ra số hàng mà ô này nên nối.
valign top
middle
bottom
baseline
Quy định khoảng cách dọc cho nội dung trong ô.
width pixels
%
Quy định bề rộng của ô. Thường dùng style để
thay thế.

96
 Ví dụ
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
 Trình duyệt hiển thị như sau:

97
Các ô rỗng trong một bảng
 Các ô trong bảng nếu không có nội dung thì sẽ hiển thị
không thật tốt trong hầu hết các trình duyệt.
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>

98
 Chú ý rằng các ô rỗng trong bảng sẽ không được hiển thị
đường viền (Tuy nhiên, Mozilla Firefox thì có hiển thị)
 Để tránh điều này, hãy thêm vào các ô dữ liệu rỗng, để có
thể hiển thị được đường viền:
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>

99
Ví dụ cho các thẻ trong bảng
<TABLE border="3" cellspacing="1" cellpadding="2" width="400"
height="300">
<TR align="center" valign="top" height="150">
<TD width="150">Orange</TD>
<TD width="100">Apple</TD>
<TD>Banana</TD>
</TR>
<TR>
<TD align="left" valign="middle">Cat</TD>
<TD align="center" valign="bottom">Dog</TD>
<TD align="right" valign="middle">Turtle</TD>
</TR>
</TABLE>

100
Ví dụ cho thuộc tính ‘colspan’
<TABLE border="1" cellspacing="1" cellpadding="0"
width="300">
<TR align="center">
<TD colspan="3">Anamals</TD>
</TR>
<TR align="center">
<TD>Dog</TD>
<TD>Cat</TD>
<TD>Lion</TD>
</TR>
</TABLE>

101
Ví dụ cho thuộc tính ‘rowspan’
<TABLE border="1" cellspacing="1" cellpadding="0"
width="300">
<TR align="center">
<TD rowspan="3">Animals</TD>
<TD>Dog</TD>
</TR>
<TR align="center">
<TD>Cat</TD>
</TR>
<TR align="center">
<TD>Lion</TD>
</TR>
</TABLE>

102
 Thuộc tính của thẻ <TABLE>
<TABLE ALIGN= ? > : Thi t đ t ph ng th c canh l
ế ặ ươ ứ ề
(left, right, center)
<TABLE BGCOLOR= #!!!!!! > : Màu b ng
ả
<TABLE BORDER= ? > : Thi t đ t k
ế ặ ích th c đ ng vi n (pixel)
ướ ườ ề
<TABLE WIDTH= ? > : Thi t đ t chi u r ng cho b ng (pixel, %)
ế ặ ề ộ ả
<TABLE HIGHT= ? > : Thi t đ t chi u cao cho b ng (pixel, %)
ế ặ ề ả
<TABLE Cellspacing= ? > : Kho ng c
ả ách gi a c
ữ ác ô (pixel)
<TABLE Cellpadding= ? > : kho ng tr ng gi a n i dung v
ả ắ ữ ộ à đ ng vi n (pixel)
ườ ề

103
<HTML>
<HEAD> <TITLE> Spacing of the table </TITLE> </HEAD>
<BODY>
<CENTER> <BR>
<TABLE BORDER CELLSPACING="10">
<TR>
<TD>First Cell</TD>
<TD>Second Cell</TD>
</TR>
</TABLE>
<P>
<TABLE BORDER CELLPADDING="10">
<TR>
<TD>First Cell</TD>
<TD>Second Cell</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

104
 Canh lề trong bảng
 Cách dùng thuộc tính ALIGN
nh
Đị d ng: <TABLE ALIGN =
ạ “?"> ~ </TABLE>
( ? -> left, right, center)
<CENTER>
<TABLE> ~ </TABLE>
</CENTER>

105
<HTML>
<HEAD> <TITLE> TABLE </TITLE> </HEAD>
<BODY>
<BR>
<TABLE ALIGN = “LEFT” BORDER>
<TR> <TD>First Table</TD> </TR>
<TR> <TD>Left Alignment</TD> </TR>
</TABLE>
<TABLE ALIGN = “RIGHT” BORDER>
<TR> <TD>Second Table</TD> </TR>
<TR> <TD>Right Alignment</TD> </TR>
</TABLE>
<CENTER>
<TABLE BORDER>
<TR> <TD>Third Table</TD> </TR>
<TR> <TD>Center Alignment</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

106
 Canh lề ký tự bên trong ô
Format (Horizontal Alignment) :
<TR ALIGN = “LEFT" 또는 “ CENTER" 또는 “ RIGHT"> ~ </TR>
<TD ALIGN = “LEFT" 또는 “ CENTER" 또는 “ RIGHT"> ~ </TD>
<TH ALIGN = “LEFT" 또는 “ CENTER" 또는 “ RIGHT"> ~ </TH>
Format (Vertical Alignment) :
<TR VALIGN = “TOP" 또는 “ MIDDLE" 또는 “ BOTTOM"> ~ </TR>
<TD VALIGN = “TOP" 또는 “ MIDDLE" 또는 “ BOTTOM"> ~ </TD>
<TH VALIGN = “TOP" 또는 “ MIDDLE" 또는 “ BOTTOM">~ </TH>

107
Biểu mẫu và thông tin người dùng

108
Các loại thẻ dùng trong biểu mẫu (Form)
Thẻ Mô tả
<form> Tạo một biểu mẫu để người dùng nhập dữ liệu
<input> Tạo một trường nhập dữ liệu
<textarea>
Tạo một vùng văn bản (cho phép nhập nhiều dòng văn
bản)
<label> Tạo một nhãn cho một điều khiển
<fieldset> Tạo một fieldset
<legend> Tạo nhãn cho fieldset
<select> Tạo danh sách các mục chọn (một danh sách xổ xuống)
<optgroup> Tạo một nhóm các tuỳ chọn
<option> Tạo một tuỳ chọn trong danh sách các mục chọn
<button> Tạo một nút
<isindex> Ít dùng. Thường dùng <input> để thay thế

109
Thẻ <form>
 Phần tử form sẽ tạo ra một biểu mẫu cho phép người dùng
nhập vào dữ liệu
 Một biểu mẫu có thể chứa vùng văn bản (textfield), các hộp
kiểm (checkboxe), các nút radio (radio-button) và các thành
phần khác.
 Form được dùng để chuyển dữ liệu của người dùng đến một
URL xác định

110
Thuộc
tính
Giá trị Mô tả
method get
post
Phương thức HTTP để gởi dữ liệu đến địa chỉ URL xác
định. Mặc định là get.
• method="get": Phương thức này gởi nội dung của form
theo địa chỉ URL: URL?name=value&name=value.
• method="post": Phương thức này gởi nội dung của
form theo phần thân của yêu cầu
name form_name Khai báo một tên riêng cho form
target _blank
_self
_parent
_top
Vị trí sẽ mở URL đích URL.
• _blank : URL đích sẽ mở trong một cửa sổ mới
• _self : URL đích sẽ mở trong chính frame mà tại đó ta
kích chọn.
• _parent : URL đích sẽ mở trong frame chính.
• _top : URL đích sẽ mở trong toàn bộ phần thân của cửa
sổ.

111
Ví dụ
 Mã nguồn
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" value="Mickey" />
<br/>
Last name: <input type="text" name="lname" value="Mouse" />
<br/>
<input type="submit" value="Submit" />
</form> <p>
If you click the "Submit" button, you will send your input to a new page
called form_action.asp.
</p>
 Kết quả

112
Thẻ <input>
 Thẻ <input> định nghĩa bắt đầu một trường nhập mà người
dùng có thể đưa thông tin dữ liệu vào.
 Chú ý: Phần tử input là phần tử rỗng, nó chỉ chứa các thuộc
tính.
 Lời khuyên: Nên sử dụng phần tử label để khai báo một
nhãn cho một điều khiển form.

113
Thẻ <textarea>
 Định nghĩa một vùng văn bản (một điều khiển nhập liệu trên
nhiều dòng).
 Người sử dụng có thể nhập văn bản vào vùng văn bản.
 Trong một vùng văn bản, bạn có thể nhập một số lượng
không hạn chế các ký tự.
 Kiểu chữ mặc định trong vùng văn bản là kiểu chữ mặc định
cho trước.

114
 Mã nguồn
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input, and your browser does not
allow a textarea inside a
textarea.</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
 Kết quả

115
Thẻ <label>
 Khai báo một nhãn cho một điều khiển.
 Nếu bạn kích chọn văn bản trong phạm vi của phần tử label,
nó sẽ được xem là gắn liền với điều khiển..

Chú ý: Thuộc tính "for“ sẽ trói buộc một nhãn này vào một
phần tử khác. Thiết đặt giá trị của thuộc tính "for” bằng với
giá trị của thuộc tính "id“ của phần tử liên quan.

116
Ví dụ
 Mã nguồn
<p>Try clicking on the text labels:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Male</label><br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>
 Kết quả

117
Thẻ <fieldset>
 Phần tử fieldset tạo ra một hộp bao quanh các phần tử mà
nó chứa.
 Ví dụ
 Mã nguồn
 <fieldset>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>
 Kết quả

118
Thẻ <legend>
 Phần tử legend tạo một lời chú thích cho một fieldset.
 Ví dụ
 Mã nguồn
<fieldset>
<legend>Health information:</legend>
</fieldset>
 Kết quả

119
Fieldset bao quanh dữ liệu
 Mã nguồn
<html>
<body>
<fieldset>
<legend>Health information:</legend>
<form action="">
</form>
</fieldset>
<p>
<b>Note:</b> If there is no border around
the form, your browser does not support
fieldset.
</p>
</body>
</html>
 Kết quả

120
Thẻ <select>
 Phần tử select tạo ra một danh sách đổ
xuống.
 Lời khuyên: sử dụng thẻ này trong một phần tử
form để nhận thông tin từ người sử dụng.
 Ví dụ
 Mã nguồn
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel">Opel</option>
<option value ="audi">Audi</option>
</select>
 Kết quả

121
Thẻ <optgroup>
 Định nghĩa một nhóm các mục lựa chọn.
 Phần tử này cho phép bạn phân loại các lựa chọn.
 Khi bạn có một danh sách dài các tuỳ chọn, hãy nhóm những
lựa chọn có liên quan lại với nhau để dễ quản lý hơn.

122
 Ví dụ
 Mã nguồn
<select>
<optgroup label=“Hyundai Cars">
<option value =“Sonata"> Sonata </option>
<option value =“Avante"> Avante </option>
</optgroup>
<optgroup label=“Samsung Cars">
<option value =“SM5"> SM5 </option>
<option value =“SM7"> SM7 </option>
</optgroup>
</select>
 Kết quả

123
Thẻ <option>
 Phần tử option định nghĩa một mục chọn trong danh sách đổ
xuống.
 Chú ý: Thẻ <option> vẫn có thể được sử dụng mà không có
bất kỳ thuộc tính nào, tuy nhiên bạn nên luôn sử dụng thuộc
tính value, nó sẽ xác định những gì được gửi đến server.
 Chú ý: Sử dụng thẻ này chung với phần tử select, nếu dùng
một nơi nào khác thì nó sẽ trở nên vô nghĩa.

124
Ví dụ
 Mã nguồn
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel" selected="selected">Opel</option>
<option value ="audi">Audi</option>
</select>
 Kết quả

125
Thẻ <button>
 Tạo ra một nút bấm.Bên trong một phần tử button bạn có
thể nhập một nội dung nào đó, như văn bản hay hình ảnh
chẳng hạn.
 Đây chính là điểm khác biệt giữa phần tử này và nút được
tạo ra bởi phần tử input.
 Ví dụ
 Mã nguồn
<button>Click Me!</button>
 Kết quả

126
Ví dụ cho Checkboxes
 Checkboxes được sử dụng khi bạn muốn người dùng lựa chọn
một hay nhiều hơn các mục chọn của một số lượng giới hạn
các lựa chọn.
 Mã nguồn
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" /> <br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" /> <br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
</body>
</html>

128
Ví dụ cho nút Radio
 Nút Radio được sử dụng khi bạn muốn người dùng chỉ được
phép chọn một mục chọn trong giới hạn một số mục chọn.
 Mã nguồn
<html>
<body>
<form action="">
Male: <input type="radio" checked="checked“ name="Sex"
value="male"><br>
Female: <input type="radio“ name="Sex" value="female">
</form>
<p>When a user clicks on a radio-button, the button becomes checked, and all
other buttons with the same name become unchecked</p>
</body>
</html>

130
Ví dụ cho hộp Drop Down
 Ví dụ sau đây minh hoạ cách tạo một hộp drop-down đơn
giản với một giá trị đã được chọn trước.
 Mã nguồn
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

132
Ví dụ cho Textarea
 Ví dụ sau đây minh hoạ cách tạo một text-area (một điều
khiển cho phép nhập thông tin trên nhiều dòng).
 Một người sử dụng có thể nhập văn bản vào một text-area.
 Trong một text-area bạn có thể nhập một số lượng không
giới hạn các ký tự.

133
 Mã nguồn
<html>
<body>
<p>This example cannot be edited
because our editor uses a textarea
for input, and your browser does
not allow a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>.
 Kết quả

134
Thuộc tính Action của form và nút
Submit
 Khi người sử dụng kích chọn vào nút "Submit", nội dung của
form sẽ được gửi đến một tập tin khác. the content of the
form is sent to another file.
 Thuộc tính action của form khai báo tên của tập tin mà nội
dung được gửi đến.
 Tâp tin được định nghĩa trong thuộc tính action thông
thường sẽ có một số xử lý với thông tin được nhận.

135
Ví dụ
 Mã nguồn
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
 Kết quả

137
Cấu trúc cơ bản của Frame
 Với frame, bạn có thể hiển thị nhiều hơn một trang web
trong cùng một cửa sổ trình duyệt.
 Bạn không thể sử dụng các thẻ <body></body> cùng với
các thẻ <frameset></frameset>

Cấu trúc cơ bản
<HTML>
<HEAD><TITLE>Frame Structure</TITLE></HEAD>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

138
<FRAMESET> …</FRAMESET>

Thuộc tính chức năng của <FRAMESET>

Định dạng
 <FRAMESET ROWS=“?” FRAMEBORDER=?>…</FRAMESET> hay
 <FRAMESET COLS=“?” FRAMEBORDER=0>…</FRAMESET>
cols pixels
%
*
Định nghĩa số lượng và kích cỡ của
các cột trong một frameset
rows pixels
%
*
Định nghĩa số lượng và kích cỡ của
các hàng trong một frameset

139
Phương thức để thiết đặt kích thước cho
một frame (%)

Điều chỉnh theo phần trăm (%)
<FRAMESET ROWS=“50%,50%”> … </FRAMESET>
<FRAMESET COLS=“30%,70%”> … </FRAMESET>
<FRAMESET COLS=“20%,30%, 50%”> … </FRAMESET>
<FRAMESET COLS=“20%,30%,*”> … </FRAMESET>
 Kích thước của một trình duyệt web trở thành tiêu chuẩn để thiết
lập kích thước theo phần trăm.
• ROWS - Chiều cao của trình duyệt web: 100%
COLS- Chiều rộng của trình duyệt web: 100%
 “*” : nghĩa là toàn bộ chỗ trống còn lại.

140
<HTML>
<FRAMESET COLS=“20%,30%,50%” FRAMEBORDER=“1”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>
</HTML>
Ví dụ 1

141
một frame (pixel)
 Chúng ta thiết đặt kích thước cho frame bằng số.
 <FRAMESET COLS=“100,150,200”>… </FRAMESET>
 <FRAMESET COLS=“100,150,*”>… </FRAMESET>
 Kích thước tuyệt đối của frame không thay đổi nhưng
nó sẽ điều chỉnh lại kích thước của trình duyệt web.

142
<html>
<frameset rows="80,130,*" frameborder="1">
<frame src="">
<frame src="">
<frame src="">
</frameset>
</html>
Ví dụ 2

143
một frame (*)
 Phương thức để thiết đặt kích thước theo một tỷ lệ tương đối.
<FRAMESET ROWS=“1*,2*”>… </FRAMESET> : no1
<FRAMESET COLS=“2*,3*,*”>… </FRAMESET> : no2
<FRAMESET COLS=“100,1*,2*”>… </FRAMESET> : no3
 Tỷ lệ tương đối giữa các frame
 Giá trị tỷ lệ : được đánh dấu bởi “*”
 Truờng hợp là “no1” : Phân biệt hai frame trên và dưới. Kích thước của hai
frame này được phân theo tỷ lệ 1 : 2.
 Trường hợp “no2” : Phân thành 3 frame.
 Tỷ lệ là 2:3:1 kể từ frame bên trái.
 Trường hợp “no3” : Pha trộn các kích thước và có thể thiết đặt.
 Chúng ta không thể sử dụng ‘COLS’ cùng lúc với ‘ROWS’.

144
<html>
<frameset rows="1*,2*,3*" frameborder="1">
<frame src="">
<frame src="">
<frame src="">
</frameset>
</html>
Ví dụ 3

145
<FRAME>
 Được lồng bên trong cặp thẻ <FRAMESET> …
</FRAMESET>
 Thẻ này đánh dấu frame được chia để thiết đặt tài liệu.
 Không có thẻ đóng.
 Định dạng
<FRAME SRC=“?” NAME=“?” MARGINHEIGHT=“?”
MARGINWIDTH=“?” SCROLLING=“?” NORESIZE>

146
 Thuộc tính chức năng của thẻ <FRAME>
marginheight pixels Khai báo lề trên và lề dưới của frame
marginwidth pixels Khai báo lề trái và lề phải của frame
name frame_name Khai báo một tên riêng cho (để sử dụng trong các
script)
noresize noresize Khi được thiết đặt là noresize thì người sử dụng
không thể thay đổi kích thước của frame
scrolling yes
no
auto
Xác định có thanh cuộn hay không.
src URL Khai báo URL của tập tin sẽ hiển thị trong frame

147
Ví dụ 4
<HTML>
<FRAMESET ROWS="1*,2*,3*" FRAMEBORDER="1">
<FRAME SRC="top.html">
<FRAME SRC="middle.html">
<FRAME SRC="bottom.html">
</FRAMESET>
</HTML>

148
 Khai báo địa chỉ URL của tập tin sẽ hiển thị trong frame
 Ví dụ 5
<HTML>
<FRAMESET ROWS=“*,*” FRAMEBORDER=“1”>
<FRAME SRC= http://www.yahoo.com>
<FRAME SRC= http://www.amazon.com>
</FRAMESET>
</HTML>
Thuộc tính ‘SRC’

150
 MARGINHEIGHT
Khai báo lề trên và lề dưới của frame
 MARGINWIDTH
Khai báo lề trái và lề phải của frame
 NAME
Khai báo một tên riêng cho (để sử dụng trong các script)
Thuộc tính Marginheight, Marginwidth, Name

151
Ví dụ 6
<html>
<frameset rows="*,*" frameborder="1">
<frame src="a.html" marginwidth="50"
name="top">
<frame src="a.html" marginheight="50“
name="bottom">
</frameset>
</html>

152
Kết quả
Tên Frame:
“top”
MARGINWIDTH
Tên Frame:
“bottom”
MAGINHEIGHT

153
Thuộc tính Scrolling, Noresize
 Scrolling
Xác định có thanh cuộn hay không
 Các kiểu có thể có: “YES” , “NO” “AUTO”
 Noresize
Khi được thiết đặt là noresize thì người sử dụng không thể
thay đổi kích thước của frame

154
<html>
<frameset rows="100, 100, 100" frameborder="1">
<FRAME SRC="http://www.yahoo.com"
SCROLLING="no" Noresize>
<FRAME SRC="" SCROLLING="yes">
<FRAME SRC="http://www.amazon.com"
SCROLLING="auto">
</frameset>
</html
Ví dụ Scrolling, Noresize

155
<HTML>
<FRAMESET ROWS=“*,*” FRAMEBORDER=“1”>
<FRAME SRC=“” NAME=“TOP”>
<FRAMESET COLS=“*,*” FRAMEBORDER=“1”>
<FRAME SRC=“” NAME=“BLEFT” >
<FRMAE SRC=“” NAME=“BRIGHT” >
</FRAMESET>
</FRAMESET>
</HTML>
Ví dụ phân chia các Frame
Frame name :
TOP
Frame name :
BRIGHT
F
r
a
m
e
n
a
m
e
:
B
L
E
F
T

156
index.html
<html>
<frameset rows="20%,80%" frameborder="1">
<frame src="top.html" name="top">
<frameset cols="20%, 80%">
<frame src="menu.html" name="menu">
<frame src="introduction.html" name="main">
</frameset>
</frameset>
</html>
Liên kết đến frame được xác định trong tài liệu.

157
 top.html
<HTML>
<BODY>
<CENTER> Welcome to My Homepage </CENTER>
</BODY>
</HTML>
 menu.html
<HTML>
<HEAD>
<TITLE> Frame </TITLE>
</HEAD>
<BODY BGCOLOR=“#969696” TEXT=“WHITE”><BR>
Introduction <BR><BR>Search site
</BODY>
</HTML>
 Introduction.html
<HTML>
<BODY>
<CENTER> Hi!! <BR><BR> Have a Nice Day <BR> </CENTER>
</BODY>
</HTML>

158
Kết quả của Index.html
Top.html
Introduction.html
Menu.html

159
 Chúng ta thay đổi tập tin Menu.html như sau
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=“#00ff00” TEXT=“WHITE”><BR>
<a href="Introduction.html"> Inroduction </a> <BR><BR>
<a href="Search.html"> Search site </a>
</BODY>
</HTML>

160
Search.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<A HREF= “http://www.yahoo.com” > Yahoo </A> <BR>
<A HREF= “http://www.amazon.com” > Amazon </A> <BR>
<A HREF= “http://www.lycos.com” > Lycos </A> <BR>
</CENTER>
</BODY>
</HTML>

161
Kết quả của Index.html

162
‘search site’ click from
MENU frame
Kết quả của ‘search site’ kích chọn từ frame MENU

163
 <A HREF=“filename" TARGET=“frame name”>…..</A>
 Chúng ta thay đổi tập tin Menu.html như sau.
<HTML>
<HEAD>
<TITLE> Frame </TITLE></HEAD>
<BODY><BR>
<A HREF="introduction.html" TARGET=“MAIN">
Introduction</A> <BR><BR>
<A HREF=“Search.html" TARGET=“MAIN"> Search site </A>
</BODY>
</HTML>.
Thuộc tính Target

164
Chúng ta th c thi l i t p tin index.html
ự ạ ậ
frame MAIN
N i dung c a m t t
ộ ủ ộ ài li u liên k t
ệ ế
đ n s đ c hi n th t i frame
ế ẽ ượ ể ị ạ
MAIN khi nó đ c k
ượ ích ch n
ọ .

165
Thẻ <iframe>
 Frame nội tuyến : Phần tử iframe thiết lập
một frame nội tuyến chứa nội dung của một
tài liệu khác.

Định dạng
 <IFRAME SRC=“?” NAME=“?” MARGINHEIGHT=“?”
MARGINWIDTH=“?” FRAMEBORDER=“?”
SCROLLING=“?” WIDTH=“?” HEIGHT=“?”>

166
align left, right, top
Middle, bottom
Xác định cách sắp xếp iframe so với văn bản
xung quanh.
frameborder 1
0
Xác định có hay không hiển thị đường viền của
frame
height pixels, % Khai báo chiều cao của iframe
marginheight pixels Khai báo lề trên và lề dưới của iframe
marginwidth pixels Khai báo lề trái và lề phải của iframe
name frame_name Khai báo một tên riêng cho iframe (để sử dụng
trong script)
scrolling Yes, no, auto Khai báo thanh cuộn
src URL ĐỊa chỉ URL của tài liệu sẽ hiển thị trong iframe
width pixels, % Khai báo bề rộng của iframe

167
iframe.html
<HTML>
<HEAD><TITLE>Example</TITLE></HEAD>
<BODY>Lycos Site…<br>
<iframe src="http://www.lycos.com" frameborder=“1”
width="540" height="150" scrolling="yes"></iframe>
<br><br>Yahoo site…<br>
<iframe src="http://www.yahoo.com" frameborder=“0”
width="540" height="150" scrolling="no" ></iframe>
</BODY>
</HTML>

170
1. Thẻ Meta
 Phần tử Meta
 Là phần tử đầu tiên chứa các thông tin tổng quát (“thông
tin meta”) về tài liệu.
 HTML cũng có cả phần tử meta nằm bên trong phần tử
head. Mục đích của phần tử meta là cung cấp thông tin
meta về tài liệu.
 Hầu hết các phần tử meta thường được sử dụng để cung
cấp các thông tin liên quan đến trình duyệt hoặc công cụ
tìm kiếm như là mô tả nội dung của tài liệu.

171
Thẻ Meta
 Các thuộc tính
 author :
 Ví dụ <meta name=“author” content=“YounHee Kim”>
 copyright
 keyword :
 Ví dụ <meta name=“keywords” content=“html, css, javascript”>
 description : Trang trừu tượng
 generator : trình soạn thảo web
 reply-to : địa chỉ mail và tên

172
Thẻ Meta
 Từ khoá cho công cụ tìm kiếm
 Một số công cụ tìm kiếm trên WWW sẽ sử dụng các thuộc tính name
và content của thẻ meta để chú thích cho trang của bạn.
 Phần tử meta sau sẽ mô tả trang của bạn:
<meta name="description" content="Free Web tutorials on HTML, CSS,
XML, and XHTML">

Phần tử meta sau sẽ định nghĩa từ khoá cho trang của bạn:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML,
JavaScript, VBScript">

173
Thẻ Meta
 Mục đích của các thuộc tính name và content là mô tả
nội dung của một trang.
 Tuy nhiên, kể từ khi có quá nhiều trang web sử dụng
thẻ meta cho mục đích spam, như là lặp đi lặp lại các
từ khoá để tăng truy cập cho trang web, thì một số
công cụ tìm kiếm không còn sử dụng nó nữa.

174
 Các thuộc tính Meta không xác định
 Đôi khi bạn bắt gặp một số thuộc tính meta không xác
định, như là:
<meta name="security" content="low">
 Khi đó bạn chỉ có thể chấp nhận rằng đó là những thông
tin riêng của trang web hoặc của tác giả trang web, và
hầu như không liên quan đến bạn.
Thẻ Meta

175
Ví dụ cho thẻ meta
<html>
<head>
<meta http-equiv="Refresh“ content="5;url=http://www.w3schools.com">
</head>
<body>
<p>Sorry! We have moved! The new URL is:
<a href="http://www.w3schools.com">http://www.w3schools.com</a> </p>
<p>You will be redirected to the new address in five seconds.</p>
<p> If you see this message for more than 5 seconds, please click on the link above! </p>
</body>
</html>

176
 Cách sử dụng styles
 Khi trình duyệt đọc một style sheet (tờ mẫu), nó sẽ
định dạng tài liệu theo style sheet này.
 Có ba cách để chèn một style sheet:
 Style Sheet ngoại tuyến
 Style Sheet nội tuyến
2. Thẻ Styles

177
Thẻ Styles
 Style Sheet ngoại tuyến
 Một style sheet ngoại tuyến là sự lựa chọn lý tưởng khi
style được áp dụng cho nhiều trang. Với một style sheet
ngoại tuyến, bạn có thể thay đổi phong cách của toàn bộ
trang web bằng cách thay đổi một tập tin. Mỗi trang phải
liên kết đến style sheet bằng cách sử dụng thẻ <link>.
Thẻ <link> nằm bên trong phần head.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

178
 Style Sheet nội tuyến
 Một style sheet nội tuyến nên được sử dụng khi một tài
liệu đơn muốn có riêng một style. Bạn định nghĩa style
nội tuyến trong phần head với thẻ <style>.
<head>
<style type="text/css">
body {background-color: red} p {margin-left: 20px}
</style>
</head>
Thẻ Styles

179
Thẻ Styles
 Style nội tuyến
 Một style nội tuyến nên được sử dụng khi một style
riêng cần được áp dụng trên một phần riêng lẻ.
 Để sử dụng style nội tuyến bạn dùng thuộc tính style
bên trong thẻ tương ứng. Thuộc tính style có thể chứa
bất kỳ thuộc tính CSS nào. Ví dụ sau sẽ trình bày cách
thức để thay đổi màu săc và lề trái của đoạn văn bản:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

180
Ví dụ - Thẻ Styles
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>This is header h1</h1>
<h3>This is header h3</h3>
</body>
</html>

181
3. Scripts (Kịch bản)

Thẻ Script
Thẻ Mô tả
<script> Khai báo một script
<noscript> Khai báo một đoạn văn bản thay thế nếu script
không được thực thi
<object> Khai báo một đối tượng nhúng
<param> Khai báo các thiết lập (tham số) cho một đối tượng
<applet> Ít sử dụng. Thường dùng <object> để thay thế

182
Scripts
 Chèn m t Script v
ộ ào trang web
 M t script trong HTML đ c khai b
Ộ ượ áo b ng th <script>. Ch
ằ ẻ ú ý
r ng b n s ph i s d ng thu c t
ằ ạ ẽ ả ử ụ ộ ính type đ x
ể ác đ nh ngôn ng
ị ữ
script s d
ẽ ùng.
<html>
<head> </head>
<body>
<script type="text/javascript">
document.write("Hello World !!!")
</script>
</body>
</html>
 o n mã trên s cho ra k t qu nh sau:
Đ ạ ẽ ế ả ư
-> Hello World!

183
 Cách vận dụng trong các trình duyệt cũ
 Nếu một trình duyệt hoàn toàn không nhận biết được thẻ
<script>, nó sẽ hiển thị nội dung bên trong thẻ này như là
một đoạn văn bản lên trang web. Để ngăn chặn điều này,
bạn nên ẩn script vào thẻ chú thích. Một trình duyệt cũ
(không nhận biết được thẻ <script>) sẽ bỏ qua phần chú
thích mà không hiển thị nội dung của thẻ lên trang web,
trong khi đó một trình duyệt mới sẽ hiểu rằng đoạn script
đó phải được thi hành, mặc dù nó đã được đặt trong thẻ
chú thích.
Scripts

184
 Ví dụ
JavaScript:

</script>
VBScript:
<script type="text/vbscript">

</script>
Scripts

185
Scripts
 Thẻ <noscript>
 Ngpài cách sử dụng việc ẩn script vào bên trong một
chú thích, bạn cũng có thể sử dụng một thẻ
<noscript>.
 Thẻ <noscript> được sử dụng để khai báo một đoạn
văn bản thay thế nếu đoạn script không được thực
thi. Thẻ này được sử dụng cho các trình duyệt có thể
nhận biết được thẻ <script>, nhưng lại không hỗ trợ
thực thi phần thân của script. Trong trường hợp này
trình duyệt sẽ hiển thị nội dung bên trong thẻ
<noscript>. Tuy nhiên, nếu một trình duyệt có hỗ trợ
việc thực thi phần thân của script thì nó lại bỏ qua
thẻ <noscript>.

186
Scripts
 Ví dụ
JavaScript:

</script>
<noscript>Your browser does not support JavaScript!
</noscript>
VBScript:
<script type="text/vbscript">

</script>
<noscript>Your browser does not support VBScript!</noscript>

187
4. Thẻ Marquee
 Bạn có thể tạo ra một văn bản dạng cuộn (hoặc
tương tự như vậy) bằng cách sử dụng thẻ
<marquee>.

188
Thẻ Marquee
Chú ý rằng nếu bạn không thể thấy được ví dụ này,
thì có thể là do trình duyệt của bạn không hỗ trợ
thẻ marquee.
 Văn bản cuộn:
 Văn bản sau sẽ cuộn từ bên trái. Nếu muốn xem lại
hiệu ứng này thì bạn phải nạp lại (refresh) trang
web.
<marquee behavior="slide" direction="left">
Your slide-in text goes here
</marquee>
 Kết quả sẽ là:
Your slide-in text goes here

189
Thẻ Marquee
 Văn bản cuộn liên tiếp:
<marquee behavior="scroll" direction="left">
Your scrolling text goes here
</marquee>
 Văn bản cuộn từ trước và sau:
<marquee behavior="alternate">
Your bouncing text goes here
</marquee>
 Văn bản cuộn từ dưới lên:
<marquee behavior="scroll" direction="up">
Your upward scrolling text goes here
</marquee>

190
Thẻ Marquee
 Thay đổi tốc độ cuộn:
<marquee behavior="scroll" direction="left"
scrollamount="1">
Slow scroll speed
</marquee>
scrollamount="10">
Medium scroll speed
</marquee>
scrollamount="20">
Fast scroll speed
</marquee>

191
Thẻ Marquee
 Hình ảnh cuộn:
<marquee behavior="scroll" direction="left">
<img src="/pix/smile.gif" width="100" height="100"
alt="smile" />
</marquee>

[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf

More Related Content

Similar to [123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf

[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf