Tài liệu Ngôn ngữ HTML và CSS pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.01 MB, 32 trang )
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 1
NGÔN NGỮ HTML
I. Giới thiệu:
HTML, viết đầy đủ là Hyper Text Markup Language – Ngôn ngữ đánh dấu
siêu vă bản, là ngôn ngữ nền tảng của Web.
HTML được thiết kế bởi các nhà vật lý học tại viện CERN. Cùng với trình
duyệt Mosaic và World Wide Web, HTML đã giúp mang đến một bộ mặt mới cho
Internet. Internet đã trở nên dễ sử dụng hơn và có thể đến với đông đảo người dùng
trên toàn thế giới thông qua các trang web.
HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập
ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML”. Khi một trang web được tải
về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển
thị.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE></HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
II. Các khái niệm chung:
1. Tài liệu HTML:
Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu
là .htm hoặc .html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web
biết cách hiển thị nội dung đó.
Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn
giản như Notepad hay TextPad.
2. Cấu trúc của một tài liệu HTML:
Tài liệu HTML được chia làm 3 phần, cụ thể như sau:
a.HTML section
Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML>
Cặp tag này định nghĩa phạm vi của văn bản HTML.
b. Header section
Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD>
CHƯƠNG
2
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 2
Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web,
các từ khóa dùng để tìm kiếm và nhận diện trang web, …. Những thông tin này
không được hiển thị trên trang web.
c.Body section
Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY>
Phần này chứa nội dung của trang web và các tag quy định định dạng của nội
dung đó.
3. Thành phần HTML (HTML elements):
Hầu hết các thành phần HTML đều có tag bắt đầu và tag kết thúc tương ứng.
Dưới đây là cấu trúc chung của một thành phần HTML:
<tag_name>string of text</tag_name>
Trong đó <tag_name> là tag bắt đầu, string of text là nội dung của thành phần
HTML và </tag_name> là tag kết thúc.
Các tag HTML có thể được nhập liệu không phân biệt chữ hoa hoặc chữ
thường. Tuy nhiên, cũng cần lưu ý là tổ chức W3C đề nghị dùng chữ thường trong
phiên bản HTML 4, và XHTML (HTML thế hệ kế tiếp) bắt buộc phải dùng chữ
thường cho tag.
4. Thuộc tính của tag HTML
Các thẻ HTML có thể có thuộc tính. Thuộc tính cung cấp thêm thông tin cho
một thành phần HTML.
Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table>. Với một thuộc
tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung :
<table border="0">
Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value".
Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML.
Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ
thường.
Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy. Thông thường
người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận.
III. Các tag HTML cơ bản:
1. Heading:
Các cấp heading được định nghĩa với các thẻ từ <h1> đến <h6>. <h1> định
nghĩa heading lớn nhất. <h6> định nghĩa heading nhỏ nhất.
HTML tự động thêm vào các dòng trống trên và dưới heading.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 3
<BODY>
<H1>Introduction to HTML</H1>
<H2>Introduction to HTML</H2>
<H3>Introduction to HTML</H3>
<H4>Introduction to HTML</H4>
<H5>Introduction to HTML</H5>
<H6>Introduction to HTML</H6>
</BODY>
</HTML>
2. Paragraph:
Đoạn văn bản được định nghĩa bởi thẻ <p>.
HTML tự động thêm vào các dòng trống trên và dưới đoạn.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = “lavender”>
<p>This is a paragraph</p>
<p align=”center”>This is another paragraph</p>
</BODY>
</HTML>
3. Ngắt dòng (line break):
Thẻ <br> được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt
đầu một đoạn mới. Thẻ <br> sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML.
<br> là một thẻ rỗng. Nó không có thẻ đóng.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY>
<p>This <br> is a para<br>graph with line breaks</p>
</BODY>
</HTML>
4. Đường kẻ ngang (Horizontal Rule):
Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web.
Trong HTML, thẻ <hr> không có thẻ đóng.
Dưới đây là những thuộc tính của thẻ này:
Thuộc tính
Giá trị
Ý nghĩa
align
center
left
right
Chỉ định trạng thái canh lề đường kẻ
ngang.
noshade
noshade
Khi được set, thuộc tính này quy định
đường kẻ ngang sẽ được vẽ bằng 1 màu
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 4
Thuộc tính
Giá trị
Ý nghĩa
duy nhất. Khi không được set, đường kẻ
ngang sẽ được phối bằng 2 màu
size
pixels
%
Chiều cao của đường kẻ ngang
width
pixels
%
Độ rộng của đường kẻ ngang
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<HR noshade size = 5 align = center width =
50%>
<HR size = 15 align = left width = 80%>
<P>This is going to be real fun
<H2>Using another heading</H2>
<P ALIGN=center> Another paragraph element
</BODY>
</HTML>
5. Chú thích trong HTML
Chúng ta dùng thẻ comment để thêm các đoạn chú thích vào HTML source
code. Trình duyệt web sẽ bỏ qua dòng chú thích này.
Cú pháp:
<! This is a comment >
6. Một số lưu ý
Khi viết văn bản HTML, chúng ta không thể đoan chắc văn bản đó sẽ được
hiển thị thế nào trong một trình duyệt khác. Mặt khác, văn bản sẽ được định dạng
lại mỗi khi người dùng thay đổi kích thước cửa sổ trình duyệt. Đừng định dạng văn
bản bằng cách thêm vào các khoảng trắng hoặc những dòng trống vào văn bản web.
HTML sẽ xóa bớt những khoảng trắng được nó coi là dư. Một dãy khoảng
trắng liên tiếp bất kỳ sẽ được coi là một khoảng trắng duy nhất. Ngoài ra, trong
HTML, một dòng mới sẽ được coi là một khoảng trắng.
Việc sử dụng các thẻ <p> để thêm vào các dòng trống cũng là một thói quen
xấu. Thay vào đó, hãy dùng thẻ <br>.
Thẻ <p> có thể được sử dụng mà không có thẻ kết thúc </p>. Tuy nhiên, phiên
bản HTML kế tiếp sẽ không cho phép bỏ qua bất kỳ thẻ kết thúc nào.
IV. Các tag HTML định dạng:
1. Các tag định dạng văn bản:
Tag
Ý nghĩa
<b>
Tô đ
ậ
m văn b
ả
n
<big>
Định nghĩa văn bản có size lớn hơn bình thường
<em>
Định nghĩa văn bản được nhấn mạnh (emphasized)
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 5
Tag
Ý nghĩa
<i>
Làm cho văn b
ả
n nghiêng
<small>
Định nghĩa văn bản có size nhỏ hơn bình thường
<strong>
Tô đậm văn bản
<sub>
Định nghĩa chỉ số dưới
<sup>
Đ
ị
n
h ngh
ĩa ch
ỉ
s
ố
trên
<ins>
Định nghĩa văn bản được “thêm vào”
<del>
Định nghĩa văn bản đã bị xóa
<s>
Đ
ị
nh ngh
ĩa văn b
ả
n đ
ã b
ị
xóa. Nên dùng <del> thay cho tag này.
<strike>
Đ
ị
nh ngh
ĩa văn b
ả
n đ
ã b
ị
xóa. Nên dùng <del> thay cho tag này.
<u>
Gạch dưới văn bản
Ví dụ:
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small><br>
This text contains<sub>subscript</sub><br>
This text contains<sup>superscript</sup><br>
This text contains <ins>inserted</ins>
text<br>
This text contains <del>deleted</del>
text<br>
This text contains <s>deleted</s> text<br>
This text contains <strike>deleted</strike>
text<br>
This text contains <u>underlined</u>
text<br>
</body>
</html>
Kết quả:
2. Một số tag khác:
Tag
Ý ngh
ĩa
<pre>
Định nghĩa văn bản được định dạng sẵn
<blockquote>
Tạo vùng chú thích dài
<
q
>
T
ạ
o vùng chú thích ng
ắ
n
Ví dụ:
<html><body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying
computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre></body></html>
Kết quả:
Ví dụ:
<html>
<body>
Kết quả:
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 6
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a
long quotation. This is a long
quotation. This is a long quotation.
This is a long quotation.
</blockquote>
Here comes a short quotation:
<q>
This is a short quotation
</q>
<p>
With the block quote element, the
browser inserts line breaks and
margins, but the q element does not
render as anything special.
</p>
</body>
</html>
V. Các ký tự đặc biệt:
Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn (<)
cho biết điểm bắt đầu của một thẻ HTML. Phần dưới đây trình bày cách chèn những
ký tự này vào nội dung trang web như những ký tự thông thường khác.
Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand (&), phần tên
thực thể được quy định trước hoặc dấu # và số hiệu thực thể (cũng được quy định
trước), và cuối cùng là dấu chấm phẩy (;).
Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong
văn bản HTML.
Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường.
Result
Description
Entity Name
Entity Number
non-breaking space
 
<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
"
quotation mark
"
"
'
apostrophe
' (does not work in IE)
'
¢ cent ¢ ¢
£ pound £ £
¥
yen
¥
¥
§ section § §
© copyright © ©
® registered trademark ® ®
×
multiplication
×
×
;
÷ division ÷ ÷
VI. Siêu liên kết (hyperlink):
Siêu liên kết thường được dùng để liên kết đến một tài liệ khác trên web.
Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 7
1. Cú pháp:
<a href="url">Text to be displayed</a>
Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tính
href được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bản
nằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = “lavender”>
<a href=" World Wide Web Consortium!</a>
</BODY>
</HTML>
2. Thuộc tính target:
Thuộc tính target xác định liên kết sẽ được mở ra ở đâu. Ví dụ sau đây sẽ mở
trang Vietnamnet trong một cửa sổ trình duyệt mới
<a href=" target="_blank">Visit Vietnamnet!</a>
3. Thuộc tính name:
Thuộc tính name được sử dụng để tạo một điểm dừng trong trang web. Khi sử
dụng điểm dừng chúng ta có thể nhảy tới một vị trí cụ thể trên trang web thay vì để
người dùng phải cuộn trang và tìm nội dung mình muốn xem.
Dưới đây là cú pháp để tạo nên một điểm dừng:
<a name="label">Text to be displayed</a>
Với label là tên của điểm dừng muốn tạo. Điểm dừng sẽ được tạo tại vị trí đặt
tag <a>.
Chẳng hạn, để tạo một điểm dừng có tê là Chapter1, ta thực hiện như sau:
<A NAME=“Chapter1”> Chapter 1</A>
Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau:
- Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa
điểm dừng:
<A HREF=“#Chapter1”> Go to Chapter 1</A>
- Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang
web chứa điểm dừng:
<A HREF=“URL#Chapter1”> Go to Chapter 1</A>
Với URL là địa chỉ của trang web chứa điểm dừng.
4. Liên kết đến địa chỉ email:
Ví dụ:
<html>
<body>
<p>
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 8
This is a mail link:
<a href="mailto:?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>
Ví dụ:
<html>
<body>
<p>
This is another mailto link:
<a
href="mailto:?cc=&bcc=andso
&subject=Summer%20Party&body=You%20are%20invited%
20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>
VII. Bảng biểu:
1. Quy định chung:
Bảng trong HTML được định nghĩa bởi thẻ <table>. Một bảng được chia thành
các dòng (với thẻ <tr>), và mỗi dòng lại được chia thành các data cell (được định
nghĩa bởi thẻ <td>). Chữ td thay thế cho cụm từ "table data". Một data cell có thể
chứa text, image, list, paragraph, form, horizontal rule, table, …
Ví dụ:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2. Một số thuộc tính của bảng:
- BORDER=“x” : kích thước viền
- BGCOLOR: màu nền
- ALIGN: canh chỉnh
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 9
- WIDTH, HEIGHT : kích thước
- CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô
- CELLSPACING: khoảng cách giữa các ô trong bảng
- ROWSPAN, COLSPAN: trộn các dòng hoặc cột
- <TR>: dòng, <TD> cột, <TH>: heading
- <CAPTION>: tiêu đề mô tả bảng
Hình 4: Biểu diễn thuộc tính của table
VIII. Tạo danh sách:
Ví dụ:
<H3>Những kiến thức căn bản về HTML</H3>
<OL>
<LI>Cấu trúc tập tin HTML</LI>
<UL>
<LI>Cấu trúc tập tin HTML</LI>
<LI>Các Tag HTML</LI>
</UL>
<LI>Các Tag cơ bản</LI>
<UL>
<LI>Định dạng văn bản</LI>
<LI>Định dạng hình ảnh</LI>
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 10
<LI>Đỉnh dạng liên kết</LI>
</UL>
<LI>Ví dụ </LI>
<UL>
<LI>Code</LI>
<LI>Minh họa</LI>
</UL>
</OL>
Dưới đây là kết quả của đoạn code trên:
IX. Chèn hình ảnh:
1. Quy định chung:
Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>.
Thẻ <img> là một thẻ rỗng. Điều này có nghĩa là thẻ <img> chỉ chứa các thuộc
tính và không có thẻ kết thúc.
Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src. Src là
viết tắt của chữ "source". Giá trị của thuộc tính src là URL của hình ảnh chúng ta
muốn hiển thị trên trang.
Cú pháp chung như sau:
<img src="url">
2. Thuộc tính ALT:
Thuộc tính "alt" báo cho người đọc trang web biết nội dung của hình ảnh trong
trường hợp trình duyệt không thể hiển thị hình ảnh đó. Trình duyệt sẽ hiển thị
“alternate text” tha vì hiển thị hình ảnh.
Cú pháp chung:
<img src="url" alt=”alternate text”>
3. Ví dụ:
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 11
Ví dụ 1:
<html>
<body>
<p>
An image from another folder:
<img src="/images/netscape.gif"
width="33" height="32">
</p>
<p>
An image from W3Schools:
<img
src=" />
</p>
</body>
</html>
Kết quả:
Ví dụ 2:
<html>
<body
background="background.jpg">
<h3>Look: A background
image!</h3>
<p>Both gif and jpg files can
be used as HTML
backgrounds.</p>
<p>If the image is smaller
than the page, the image will
repeat itself.</p>
</body>
</html>
Kết quả:
Ví dụ 3:
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif"
width="65" height="38">
</a>
</p>
</body>
</html>
Kết quả:
Ví dụ 4:
<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 12
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or
"name" (browser dependant) attribute in
the map element, therefore we have added both the "id" and "name" attributes to
the map element.</p>
</body>
</html>
X. Frame:
Khi sử dụng frame, chúng ta có thể hiển thị nhiều hơn một tài liệu HTML
trong một cửa sổ trình duyệt. Mỗi tài liệu HTML được gọi là một frame, và mỗi
frame thì độc lập với những frame còn lại.
Hình 10: Một số dạng frame
1. Thẻ Frameset:
Thẻ <frameset> định nghĩa cách thức chia cửa sổ trình duyệt thành các frame.
- Thuộc tính ROWS và COLS quy định kích cỡ các frame trong tập hợp frame.
- Mỗi thuộc tính chứa một danh sách các đối số quy định độ rộng ngăn cách
nhau bằng dấu phẩy. Đối số này có thể là pixels, là %, hoặc là độ rộng tương
đối.
- Độ rộng tương đối được thể hiện dưới dạng i* với i là số nguyên
Chẳng hạn: ROWS="3*,*" (* được hiểu là 1*) sẽ cho kết quả là dòng đầu có
độ cao gấp 3 lần so với dòng thứ hai.
- ROWS quy định chiều cao của dòng, tính từ trên xuống.
- COLS quy định độ rộng của cột, tính từ trái qua phải.
- Nếu ROWS hoặc COLS bị bỏ qua (không khai báo), giá trị mặc định sẽ là
100%
- Nếu cả hai thuộc tính đều được chỉ định, một lưới sẽ được thiết lập từ trái
qua phải - và sau đó là từ trên xuống.
2. Thẻ Frame:
Thẻ <frame> chỉ định tài liệu HTML nào sẽ được đặt vào frame.
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 13
Ví dụ:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Thuộc tính của <FRAME …>:
- NAME=“tên_frame”: đặt tên cho frame
- SRC=“URL” : địa chỉ trang web được hiển thị
- TARGET: xác định frame mặc định cho các hyperlink trong frame này
- BORDER=“x” : xác định kích thước đường viền
- SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar
- NORESIZE: không cho phép hiệu chỉnh kích thước frame window
3. Ví dụ chung:
<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
<FRAME NAME="Photo1" SRC="Row1_Column1.html">
<FRAME NAME="Photo2" SRC="Row1_Column2.html">
<FRAME NAME="Photo3" SRC="Row1_Column3.html">
<FRAME NAME="Caption1" SRC="Row2_Column1.html">
<FRAME NAME="Caption2" SRC="Row2_Column2.html">
<FRAME NAME="Caption3" SRC="Row2_Column3.html">
<NOFRAMES>
<BODY>
<H1>Table of Contents</H1>
<UL>
<LI> <A HREF="Row1_Column1.html">Photo 1</A></LI>
<LI> <A HREF="Row1_Column2.html">Photo 2</A></LI>
<LI> <A HREF="Row1_Column3.html">Photo 3</A></LI>
</UL>
</BODY>
</NOFRAMES>
</FRAMESET>
XI. Form:
1. Giới thiệu:
Một HTML form là một vùng trên văn bản HTML có chứa các đối tượng đặc
biệt gọi là control (chẳng hạn như checkbox, radio button, menu, ) và nhãn của
các control đó. Người dùng "hoàn tất" nội dung trên form bằng cách thay đổi giá trị
của các control này (nhập văn bản, chọn các mục trình đơn, …). Sau đó, người dùng
submit form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạn
như một Web server, mail server, ).
Mọi form phải được bắt đầu bằng 1 tag <form>. Tag <form> có thể được đặt ở
bất kỳ đâu trong phần body của văn bản HTML. Form phải được kết thúc bằng tag
</form>.
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 14
Dưới đây là một ví dụ đơn giản về form. Trên form này có các nhãn (label),
radio button, và push button.
<FORM action=" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
2. Các thuộc tính của form:
- NAME: tên form
- METHOD: phương thức truyền dữ liệu (GET/POST)
- ACTION: chương trình/trang web xử lý dữ liệu của form.
3. Các thành phần nhập liệu (Control):
Người dùng tương tác với form thông qua các control.
Mỗi control có một tên, được xác định bởi thuộc tính name của control đó.
Tên của một đối tượng trên form có phạm vi hiệu lực chỉ trong form đó.
Mỗi control đều có “giá trị ban đầu” và “giá trị hiện thời”. Những giá trị này
đều được lưu dưới dạng chuỗi.
Ban đầu, giá trị hiện thời của control được thiết lập bằng với giá trị ban đầu.
Sau đó, giá trị hiện thời có thể sẽ bị thay đổi do chỉnh sửa của người dùng hoặc do
các đoạn script.
Khi form được “reset”, giá trị của các control lại được set về giá trị ban đầu.
Nếu một control không có giá trị ban đầu, tác động của việc reset form trên control
đó là không xác định.
Để yêu cầu người dùng nhập liệu trên form, ta sử dụng tag <input…. />
4. Thuộc tính của các thành phần nhập liệu trên form:
- TYPE : loại INPUT
- NAME: tên
- VALUE: giá trị của INPUT
- SIZE: kích cỡ
- MAXLENGTH: độ dài tối đa của chuỗi được nhập vào
- CHECKED: có check sẵn
5. Các thành phần nhập liệu trên form:
a.Text và Password:
Ví dụ :
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 15
<form action="">
Username: <INPUT TYPE="TEXT"
NAME="USRNAME"
VALUE=binhdt SIZE="20"
MAXLENGTH="128">
<br>
Password: <INPUT TYPE="PASSWORD"
NAME="USRPASSWORD"
VALUE="123456" SIZE="20">
</form>
Kết quả:
b. Radio Button:
Ví dụ :
<form>
<input type="radio" name="sex"
value="male"> Male
<br>
<input type="radio" name="sex"
value="female"> Female
</form>
Kết quả:
c.Checkbox:
Ví dụ :
<form>
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>
Kết quả:
d. Dropdown Listbox:
Ví dụ :
Occupation: <select size="1"
name="occupation">
<option selected
value="0">Other</option>
<option value="1">Engineer</option>
<option value="2">Teacher</option>
<option value="3">Doctor</option>
<option value="4">Worker</option>
</select>
Kết quả:
e.Text Area:
Ví dụ :
<form>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
Kết quả:
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 16
f. Push Button:
Ngoài button thông thường, form còn hỗ trợ 2 button đặc biệt: Submit và Reset.
Button Submit có chức năng chuyển dữ liệu đi còn button Reset giúp thiết lập các
đối tượng nhập liệu trên form về trạng thái mặc định.
Ví dụ :
<form action="">
<input type="button" value="Hello
world!">
<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET"
VALUE="Reset">
</form>
Kết quả:
XII. Một số thiết lập khác:
1. Background Sound:
Để thiết lập nhạc nền cho trang web, đặt dòng code sau ở phần head của văn
bản HTML:
<bgsound src="link_đến_file_nhạc" loop="-1">
Thuộc tính loop có giá trị là -1 cho biết bản nhạc sẽ được lặp vô hạn. Chấp
nhận các định dạng MID, WAV, RAM, RA, AIF, …
2. Chuyển hướng trang web tự động:
Để cho phép tự động chuyển sang trang web khác, đặt dòng code sau ở phần
head của văn bản HTML:
<META HTTP-EQUIV=“refresh” CONTENT=“x”; URL=“file.htm”>
Với x là số giây delay trước khi chuyển sang trang mới, URL chứa địa chỉ
trang web muốn chuyển tới.
3. Thiết lập encoding cho trang web:
Để thiết lập encoding dạng Unicode cho trang, đặt dòng code sau ở phần head
của văn bản HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 17
CASCADING STYLE SHEETS
I. Giới thiệu:
1. Giới thiệu chung
Khi Cascading Style Sheets (CSS) được giới thiệu lần đầu tiên vào cuối năm
1996, công nghệ này đã đem đến một vận hội mới cho những người phát triển web.
CSS cho phép thiết kế trang tinh xảo hơn, đẹp hơn tất cả những gì họ đã từng biết,
cũng như giúp cho việc phát triển và bảo trì những site lớn, phức tạp trở nên dễ
dàng hơn. CSS cũng đơn giản hóa việc làm cho trang web có thể được truy cập bởi
càng nhiều người càng tốt, bất kể họ dùng thiết bị gì để đọc trang web, bất kể công
nghệ gì họ sử dụng.
Kể từ đó, web đã có nhiều thay đổi. Trình duyệt web đã được tích hợ vào đện
thoại di động, và người ta duyệt web cả từ vô tuyến truyền hình cũng như máy chơi
game. HTML đã trở thành chuẩn được chấp nhận rộng rãi. CSS cũng đã trở thành
một công nghệ vững mạnh, được hỗ trợ tốt và dễ sử dụng để tạo lập giao diện cho
trang web.
Nói một cách ngắn gọn, CSS cung cấp một phương cách hữu hiệu để người
thiết kế web có thể tách biệt giao diện của trang web ra khỏi nội dung của trang
web đó. Chúng ta sẽ cùng tìm hiểu cách thức làm điều này như thế nào, và tại sao
nên làm như thế.
2. CSS là gì?
Cascading Style Sheets (CSS) là một ngôn ngữ làm việc với các văn bản
HTML để xác định cách thức nội dung được hiển thị. Cách thức hiển thị được xác
định bởi các style được đặt trực tiếp trong các tag HTML, hoặc trong phần head của
văn bản HTML, hoặc lưu trên một file có phần kiểu là .css.
Trong style sheet chứa các style rule. Mỗi rule chỉ thị cách thức định dạng một
thành phần cụ thể trên văn bản HTML, chẳng hạn paragraph, h1, …
Nhiều file HTML có thể liên kết đến cùng một file CSS.
3. Cascading có nghĩa gì?
Có ba dạng style sheet có thể tác động đến việc hiển thị nội dung của văn bản
HTML trên trình duyệt. Đó là:
• Browser style sheet: Trình duyệt á dụng style sheet lê tất cả văn bản
web. Mặc dù những style sheet này có thể có khác biệt nhau tùy theo
trình duyệt, chúng vẫncó những điểm chung, chẳng hạn như quy định
text có màu đen, siêu liên kết có màu xanh, và liên kết đã được nhấn
CHƯƠNG
3
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 18
vào thì có màu tía. Tất cả những quy định này được gọi chung là
browser style sheet mặc định.
• User style sheet: Người dùng là bất kỳ ai đó ghé thăm web site. Hầu
hết trình duyệ hiện nay đều cho phép người dùng thiết lập style sheet
của riêng họ trong trình duyệt. Những style sheet này sẽ có mức ưu tiên
sử dụng cao hơn browser style sheet mặc định.
• Author style sheet: Là style sheet do người phát triển web site tạo lập.
Khi chúng ta áp dụng một style sheet lên một trang web, chúng ta đã sử
dụng author style sheet. Những style sheet này sẽ có mức ưu tiên sử
dụng cao hơn user style sheet.
Việc phân tầng ưu tiên sử dụng style sheet này chính là ý nghĩa của cascading
(phân tầng).
4. Ưu điểm của CSS:
Sử dụng CSS có một số lợi điểm sau:
• Dễ bảo trì: Sức mạnh của CSS nằm ở chỗ một file CSS có thể được sử
dụng để điều khiển cách thức hiển thị của nhiều vă bản HTML khác
nhau. Việc thay đổi gia diện của site giờ đây chỉ đơn giản là sửa đổi một
file CSS duy nhất thay vì phải chỉnh sửa nhiều file HTML như trước kia.
• Kích cỡ file nhỏ hơn: CSS cho phép người thiết kế loại bỏ toàn bộ
phần định dạng khỏi văn bản HTML, kể cả layout table, spacer image,
nhưng hình ảnh trang trí, font, màu sắc, độ rộng, chiều cao, hình nền.
Việc hiển thị được điều khiển bới các CSS file. Điều này có thể làm
giảm rõ rệt kích thước của các tập tin HTML.
• Tăng cường khả năng truy cập: CSS buộc người phát triển web phải
chú ý đến cấu trúc, kết quả là trang web sẽ được dịch dễ dàng hơn trên
trình duyệt, điều này hiệu quả nhất là đối với những người dùng có thị
lực kém. Những người dùng như vậy có thể dễ dàng chỉ định style sheet
của riêng họ cho cả site, chẳng hạn với size chữ lớn hơn và màu sắc có
độ tương phản cao hơn. Thêm vào đó, CSS có thể định nghĩa những
style sheet có thể xác định âm lượng và ngữ điệu của văn bản sẽ được
đọc cho người mù bằng trình duyệt text-to-speech
• Khả năng định dạng phong phú hơn: CSS cho phép chỉ định nhiều
định dạng văn bản phong phú hơn so với HTML, chẳng ạn độ rộng
của lề , khoảng cách giữa các ký tự, chiều cao dòng,
browser
style sheet
user
style sheet
author
style sheet
Web page
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 19
• Hỗ trợ in ấn tốt hơn: CSS có thể được định nghĩa cho nhiều đối tượng
kết xuất khác nhau. Chúng ta có thể tạo một bộ CSS rule để người dùng
xem trang web online, và một bộ khác để tạo bản dùng để in.
5. Style sheet làm việc như thế nào?
Style sheet là một tập hợp các chỉ thị đề nghị cách thức web browser hiển thị
nội dung của trang. Lưu ý là "đề nghị" chứ không phải "yêu cầu", vì CSS không bắt
buộc trình duyệt phải hiển thị trang web theo một cách cụ thể nào đó, nó chỉ đề nghị
trình duyệt cách thức hiển thị nội dung mà thôi.
Hình 11: Sử dụng style sheet để tách biệt phần nội dung với phần hiển thị
II. Sử dụng style rule
Mỗi Cascading Style Sheet, kể cả dưới dạng .css file hay được nhúng trong
văn bản HTML, là một tập hợp các chỉ thị gọi là style rule.
1. Cấu trúc của style rule
Mỗi style rule bao gồm:
- Một selector, dùng để xác định các đối tượng được áp dụng style được
quy định bởi style rule
- Một danh sách các thuộc tính (property) và giá trị của thuộc tính đó.
2. Khai báo style rule
Một khai báo style rule thường có dạng sau:
Hình 12: Rule set structure
Chúng ta cũng có thể khai báo style rule trên cùng một dòng, ví dụ như sau:
h2 { font-style: italic; text-align: center; color: navy; }
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 20
Dưới đây là ví dụ về một đoạn CSS có nhiều khai báo:
h1
{
text-align: center;
color: navy;
}
h2
{
font-style: italic;
text-align: center;
color: navy;
}
p
{
color: maroon;
}
Ngoài ra, cũng có thể kết hợp nhiều selector với nhau trong cùng một khai báo,
như trong trường hợp dưới đây
h1, h2
{
text-align: center;
color: navy;
}
Lưu ý: Chúng ta có thể thêm các đoạn chú thích vào CSS. Phần chú thích phải
được bắt đầu bằng cặp dấu /* và kết thúc bằng cặp dấu */
3. Sử dụng shorthand property:
Shorthand property cho phép giá trị của nhiều thuộc tính có thể được chỉ định
trên một thuộc tính duy nhất. Shorthand property cũng dễ viết và bảo trì hơn. Chúng
còn làm cho tập tin CSS ngắn gọn và súc tích hơn.
Ví dụ, một thẻ HTML là <h2> có thể được định dạng bằng các thuộc tính font-
style, font-variant, font-weight, font-size, line-height, and font-family. Thay vào đó,
chúng ta có thể dùng một shorthand property duy nhất là font.
Hai khai báo dưới đây là tương đương nhau:
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}
h2
{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 21
}
Giá trị của shorthand property font bao gồm font-style, font-variant, font-
weight, font-size, line-height, và font-family. Tuy nhiên, chúng ta không nhất thiết
phải chỉ định tất cả các giá trị này khi khai báo style rule.
Giả sử, với thẻ <p>, có thể người thiết kế web chỉ muốn chỉ định giá trị font-
size và font-family. Trong trường hợp đó, font-style, font-variant, font-weight, và
line-height không được chỉ định khi khai báo rule. Kết quả là những thuộc tính đó
sẽ được gán giá trị mặc định.
p
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
}
Dưới đây là một số ví dụ khác
Ví dụ:
h1
{
border-width: 1px;
border-style: solid;
border-color: gray;
}
Ví dụ:
p
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
Tương đương với
p
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding: 1em 2em 3em 4em;
}
Ví dụ:
h1
{
border: 1px solid gray;
background: yellow url(tint.jpg) repeat-y 100% 0;
}
ul
{
list-style: square inside;
}
Thuộc tính background kết hợp các thuộc tính background-color, background-
image, background-repeat, background-attachment, và background-position.
h1
{
border: 1px solid gray;
}
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 22
Thuộc tính list-style kết hợp các thuộc tính list-style-type, list-style-position, và
list-style-image.
III. Sử dụng selector
Selector là một trong những thành phần quan trọng nhất của CSS vì nó được
dùng để "select" các tag HTML trên trang, từ đó tiến hành định dạng trang.
Chúng ta cùng tìm hiểu về selector qua đoạn mã HTML sau:
<body>
<div id="content">
<h1>
Heading here
</h1>
<p class="intro">
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor <a href="#">sit</a> amet.
</p>
</div>
<div id="nav">
<ul>
<li><a href="#" class="intro">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
<div id="footer">
Lorem ipsum dolor <a href="#">sit</a> amet.
</div>
</body>
Có một lưu ý về thẻ <div>. Thẻ <div> thường được dùng để thêm cấu trúc vào
văn bản HTML. Cho dù thẻ <div> là một block level element, nó không thêm gì
vào định dạng của đối tượng nằm trong nó.
Trong ví dụ ở trên, thẻ <div> được dùng để phân chia các vùng nội dung. Sau
đó, các vùng này có thể được định dạng bởi CSS.
1. Type Selectors:
Type selector còn được gọi là HTML element selector. Type selector sẽ chọn
bất kỳ thành phần HTML nào trên trang có tag giống với selector.
Trong đoạn mã ở trên, có bảy thành phần HTML có thể được sử dụng làm type
selector, bao gồm <body>, <div>, <h1>, <p>, <ul>, <li>, and <a>.
Chẳng hạn, để chọn tất cả tag <li> trên trang, chúng ta sử dụng selector <li>
trong CSS như trong đoạn mã CSS dưới đây:
li { color: blue;}
2. Class Selectors:
Class selector có thể được sử dụng để chọn bất kỳ HTML element nào có
thuộc tính class và thuộc tính này đã được gán giá trị.
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 23
Trong đoạn mã HTML ở trên, có hai HTML element có thuộc tính class: <p
class="intro"> và <a href="#" class="intro">.
Để thiết lập định dạng cho tất cả đối tượng thuộc về class intro, chúng ta sử
dụng selector .intro trong mã CSS theo phương cách như sau:
.intro
{
font-weight: bold;
}
Chúng ta cũng có thể chỉ định những trường hợp cụ thể của một class bằng
cách kết hợp type selector và class selector. Chẳng hạn, chúng ta muốn định dạng
<p class="intro"> và <a href="#" class="intro"> riêng rẽ. Điều này có thể thưc
hiện được theo cách sau:
p.intro
{
color: red;
}
a.intro
{
color: green;
}
3. ID Selectors
ID selector khá giống với class selector. có thể được sử dụng để chọn bất kỳ
HTML element nào có thuộc tính id và thuộc tính này đã được gán giá trị. Tuy
nhiên, mỗi ID chỉ có thể được sử dụng duy nhất 1 lần trên cùng một văn bản HTML,
trong khi có thể có nhiều thành phần thuộc về cùng một class.
Trong đoạn mã HTML ở trên, ID được dùng để xác định các phần nội dung,
đó là content, nav (navigation), và footer. Có ba ID: <div id="content">, <div
id="nav">, và <div id="footer">. Để chỉ định định dạng cho <div id="nav">,
chúng ta dùng selector #nav như sau:
#nav
{
color: blue;
}
4. Descendant Selectors
Descendant selector được dùng để chọn những thành phần ở mức con của một
thành phần khác.
Chẳng hạn, trong đoạn mã HTML ở trên, có ba thẻ <a> ở mức con của thẻ <li>.
Để định dạng chỉ ba thẻ <a> này mà không ảnh hưởng đến tất cả các thẻ <a> còn
lại, một descendant selector có thể được sử dụng. Selector này nhắm đến tất cả thẻ
<a> nằm bê trong thẻ <li>:
li a
{
color: green;
}
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 24
Descendant selector không bắt buộc các đối tượng phải có mối quan hệ cha-
con trực tiếp . Ví dụ, thẻ <a> cũng nằm ở mức con của thẻ <div id="nav"> như đối
với thẻ <li>. Điều này có nghĩa là #nav a cũng có thể được sử dụng làm selector.
#nav a
{
color: red;
}
Descendant selector cũng có thể chỉ định nhiều cấp để xác định cụ thể đối
tượng sẽ được áp định dạng:
#nav ul li a
{
color: green;
}
5. Universal Selectors
Universal selector được sử dụng để xác định những thành phần bất kỳ. Chẳng
hạn, để thiết lập lề và độ dời của mọi thành phần về giá trị 0, selector * có thể được
sử dụng, như dưới đây:
*
{
margin: 0;
padding: 0;
}
Universal selector cũng có thể được dùng để chọn tất cả thành phần nằm bên
trong một thành phần khác. Đoạn mã dưới đây sẽ chọn tất cả các thành phần nằm
bên trong thẻ <p>:
p *
{
color: red;
}
6. Một số dạng selector nâng cao:
a.Child selector
Child selector được dùng để chọn những thành phần là con trực tiếp của một
thành phần khác(thành phần cha). Child selector không chọn tất cả thành phần ở các
mức con khác nhau mà chỉ chọn những thành phần ở mức con trực tiếp. Lấy ví dụ,
chúng ta muốn chọn thẻ <em> ở mức con trực tiếp của thẻ <div>, nhưng không
chọn những thẻ <em> tuy vẫn là con của <div> nhưng đã phải qua ít nhất một mức
trung gian.
div > em
{
color: blue;
}
Child selector không được hỗ trợ bởi Windows Internet Explorer 5, 5.5, và 6,
nhưng được hỗ trợ bởi hầu hết trình duyệt khác.
b. Adjacent sibling selector
Thiết kế Web
Biên soạn: Đặng Thanh Bình Trang 25
Adjacent sibling selector sẽ chọn một thành phần ở ngay bên dưới một thành
phần khác trong văn bản HTML. Ví dụ, chúng ta muốn định dạng tag <h3>, nhưng
chỉ là những tag <h3> nằm ngay dưới một tag <h2>. Đây là một ví dụ thường được
sử dụng vì nó có ứng dụng thực tế. Thường thì có quá nhiều khoảng cách giữa văn
bản dùng tag <h2> với văn bản dùng tag <h3> khi chúng xuất hiện ngay cạnh nhau.
Selector được khai báo như sau:
h2 + h3
{
margin: -1em;
}
Adjacent sibling selector không được hỗ trợ bởi Windows Internet Explorer 5,
5.5, và 6, nhưng được hỗ trợ bởi hầu hết trình duyệt khác.
IV. Sử dụng style trong thiết kế trang web
Có ba cách để sử dụng style sheet trên một trang HTML:
• Inline styles
• Header styles
• External style sheets
1. Inline styles
Inline styles có thể được áp dụng trực tiếp vào các tag HTML bằng cách dùng
thuộc tính style. Tuy nhiên, nên tránh sử dụng inline styles vì những quy định về
style được thêm vào từng thẻ HTML. Điều này đi ngược lại mục đích chính của
CSS là áp dụng cùng một style cho càng nhiều trang web càng tốt bằng cách sử
dụng external style sheets.
Dưới đây là một ví dụ về inline styles:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Lesson 4</title>
</head>
<body>
<p style="font-family: arial, helvetica, sans-serif; margin:
1em;padding: 1em; background-color: gray; width: 10em;">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit
</p>
</body>
</html>
2. Header styles
Các CSS rule có thể được đặt ở phần <head> của văn bản web bằng cách dùng
thẻ <style>. Giống như inline styles, header styles cũng nên được tránh vì quy định
về style được đưa trực tiếp vào văn bản HTML thay vì dùng các tập tin CSS.
