Đọc truyện html toàn tập

♥ AzTruyen.Top - Trang đọc truyện hoàn toàn miễn phí!

html toàn tập

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

BÀI 1 : HTML cơ sở

1-Thành phần-Element: Mỗi một trang HTML được tạo bởi nhiều thành phần. Thành phần như một

hộp chứa từng nội dung của trang Web. Thành phần khai báo các đặc tính mà nội dung trong thành phần

sẽ dựa vào đó. Để đi vào chi tiết của thành phần, trước hết bạn cần nắm một số thành phần chính của

trang web sau đây:

 <html></html>: Bắt đầu và kết thúc của văn bản (bắt buộc có trong tất cả văn bản HTML).

 <head></head>: Bắt đầu và kết thúc phần lưu trữ các thông tin quan trọng của văn bản. P hần này

không hiển thị trên trình duyệt.

 <title></title>: Cặp thẻ này chứa tiêu đề của trang. Tiêu đề này nằm trong trong phần <head></head>

và được hiển thị trên cùng của trình duyệt. Khai báo <title></title> luôn có để Search Engine tìm trang.

 <meta></meta>:: Tag <meta> thường không cần khóa </meta>. Tag này dùng để khai báo các thông

tin chi tiết về trang. Các khai báo bày thường bắt đầu như: <meta>, hoặc <meta>. Các khai báo này cũng được dùng

cho Search Engine. (Nên có)

 <link></link>: Cặp Tag này dùng để liên kết tập tin ngòai vào trang Web, thường là tập tin Cascading

style sheet với phần mở rộng là css.

Ví dụ:

<LINK>

Khi khai báo như vậy Tag này không cần tag đóng </link>(sẽ đề cập trong phần CSS).

 <style></style>: Cặp Tag này dùng để nhúng phong cách Cascading Style Sheet. Có thể đặt trong

phần <head></head> hoặc đặt tại nơi phong cách được áp dụng.

Ví dụ:

<style>

p {font-family:tahoma;verdana;font -size:14px; color:#000000;}

</style>

 <script></script>: Cặp tag này dùng để nhúng ứng dụng Javascript, có thể đặt trong phần

<head></head> hoặc tại vị trí ứng dụng được gọi. (sẽ đề cập trong phần javascript).

Ví dụ:

for(x=0; x<5;>

 <body></body>: Đây là cặp tag chứa đựng nội dung của trang Web. Những gì hiển thị trên Browser

nằm trong cặp tag này. (Riêng với Frameset không cần khai báo)

 <frameset></frameset>: Được đặt ngay dưới cặp Tags: <head></head> . Với Frameset không cần

cặp Tags: <body></body>. Ví dụ tài liệu HTML này được trình bày theo kiểu Frame. (sẽ đề cập trong

các bài học)

 <isindex>: Thông báo trình duyệt rằng trang index có thể tìm được nằm tr ên server.

 <!doctype>: Mô tả bản HTML mà trang web định dạng theo đó. (không bắt buộc)

2-Thẻ-Tag: Thẻ cũng là một thành phần của trang. Đây chính là những gì bạn cần nhớ để biên tập trang

HTML. Các thẻ thường đi theo cặp và có cấu trúc như thành phần chính, nghĩa là cũng có thẻ mở và

đóng. Thẻ mở bắt đầu với dấu nhỏ hơn(<) rồi đến thành phần của thẻ rồi dấu lớn hơn (>) và thẻ đóng

cũng tương tự nhưng có thêm dấu chéo tới (/).

Ví dụ: để khai báo một đọan văn bản trong trang HTML, ta gõ vào: <p> nội dung đọan văn bản</p>.

Trong đó <p>: khai báo đọan văn bản sẽ hiển thị và </p>: đóng khai báo đọan văn bản.

Một số thẻ không có tag đóng, ví dụ như <br> dùng để xuống hàng hay <hr> dùng để vẽ một đường

ngang.

3-Thuộc tính-Attribues và Giá trị-Values:

Thuộc tính là một thành phần quan trọng trong HTML. Thuộc tính được sử dụng để định nghĩa đặc tính

của thành phần và được đặt trong tag mở của thành phần. Giá trị luôn đi kèm với thuộc tính để xác định

đặc tính của thành phần. Đơn giản là thuộc tính đặt tên cho đặc tính và giá trị mô tả đặc tính đó. Như

vậy, một thành phần thường có cấu trúc:

 Tag mở thành phần.

 Thuộc tính thành phần, dấu "=" và "Giá trị thành phần"

 Tag đóng thành phần.

Ví dụ: Để hiển thị chữ màu xanh, ta dùng cặp tag <font></font>. Và ta yêu cầu Browser bằng lệnh sau:

Trong đó: color: là thuộc tính, và giá trị ="blue" là giá trị của thuộc tính màu.

Lưu ý:

 Không phải các thuộc tính và giá trị đều áp dụng cho tất cả các thành phần. Ví dụ: nếu ta dùng

color="blue" trong thẻ <p>, trình duyệt sẽ bỏ qua thuộc tính và giá trị này và lấy

mặc nhiên của nó (thường là chữ màu đen).

 Luôn luôn khai báo giá trị trong dấu ngoặc kép (" ") mặc dù HTML, XHTML và XML không

yêu cầu.

 Font chữ và phong cách chọn trong chương trình biên tập HTML không có tác dụng trọng

Browser.

 Dùng phím Enter và phím Cách (space) để tạo khỏang cách các chữ cũng không có tác dụng.

HTML là ngôn ngữ Markup là vậy. Muốn trình diễn kiểu nào, phải khai báo Markup kiểu đó, và để

Markup phải dùng đến TAG.

Ok, trong bài học này bạn cần để ý đến 4 thành phần cơ bản của trang là:

 <html></html>.

 <head></head>.

 <title></title>.

 <body></body>.

Hãy bắt đầu với trang HTML đầu tiên của bạn.

II-Trang HTML đầu tiên của bạn:

1-Mở Notepad: Từ Windows, click Start/ chọn All Programs/ chọn Accessories/ Chọn Notepad, chương

trình Notepad mở ra như hình dưới:

Trong cửa sổ Notepad, click Format, chọn Word Wrap để chữ không tràn sang biên phải mà tự động

xuống hàng. Click Format một lần nữa, chọn Font, trong cửa sổ Font này, tìm chọn Tahoma nếu bạn

muốn hiển thị tiếng Việt khi gõ bằng Unikey hay bộ gõ tiếng Việt hỗ trợ Unicode.

2-Viết Codes vào NotePad:

Gõ vào Notepad các dòng codes sau đây:

<html>

<head>

<title>My first webpage</title>

</head>

<body>

Đây là trang Web đầu tiên của tôi!!!

</body>

</html>

3-Lưu trang Notepad Untilted:

Trước tiên, bạn nên tạo một thư mục để chứa các trang mà bạn tạo ra trong suốt quá trình thực hành, đặt

tên cho thư mục này là html. Nên để thư mục này là thư mục gốc C:\html.

Từ cửa sổ Notepad với File Untitled chứa các dòng codes bạn mới gõ vào, click File chọn Save as, cửa

sổ Save as mở ra, chọn dĩa chứa thư mục html như hình dưới:

1. Tại ô Filename: gõ vào tên file myfirstpage.html (nhớ rằng phần mở rộng là .html)

2. Tại ô Save as type: chọn All files

3. Tại ô Encoding chọn: UTF-8 (Unicode Transformation Format-8).

Xong click Save.

4-Mở trang myfirstpage.html với Internet Explorer:

1. Khởi động Internet Explorer: Trong Windows, click Start/ chọn Internet Explorer. Trình duyệt

IE được nạp vào. Bạn không cần phải kết nối Internet. Bỏ qua lưu ý: The page could not

display. Click trên thực đơn File, chọn Open: Cửa sổ Open mở ra: Xem hình:

2. Click Browse tìm đến thư mục html, file myfirstpage và click Open, bạn thấy trình duyệt tìm

được file, chẳng hạn như hình minh họa dưới:

3. Click OK, trang Web của bạn được IE mở như bên dưới: (ở đây chỉ trình bày một phần của trang

trên IE Browser):

Bạn xem lại các dòng codes, rồi bạn xem nội dung hiển thị của trang. Bạn thấy rằng dòng tựa đề hiển thị

trên cùng của Browser. Dòng này được khai báo trong cặp Tag thành phần <title></title> đặt trong

<head></head>.

Chỉ có câu: Đây là trang Web đầu tiên của tôi!!! mà bạn đặt giữa cặp tag <body></body> hiển thị. Đó

là chính là nội dung của trang Web.

Như vậy, bài thực hành này củng cố lại lý thuyết về các thành phần chính trong mục I của bài học. Để

thực hành, bạn hãy tạo một số trang và gõ vào thật nhiều chữ, bạn cũng có thể bấm phím cách để mở

rộng khỏang cách các chữ, nhấn phím Enter để xuống hàng. Sau đó lưu file (nhớ rằng phần mở rộng phải

là .html). Mở file bằng Browser, bạn xem các khỏang cách và xuống hàng mà bạn đã tạo trong Notepad

có hiển thị trên Browser không? Bài 4 sẽ giúp bạn làm đ ược điều này.

BÀI 2 : Tiêu Đề, Đọan Văn, Đọan Trích Dẫn, Xuống Hàng

Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để phân biệt với nội dung của văn bản.

Để tạo tiêu đề trong trang HTML sử dụng cặp tags (Thẻ):

I-Cặp Tags tiêu đề: Header (h) tag

Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để phân biệt với nội dung của văn bản. Để tạo

tiêu đề trong trang HTML sử dụng cặp tags (Thẻ): <hn

> </hn>

1-Cú pháp:

Trong đó:

 h: dùng để khai báo tag tiêu đề sẽ được dùng

 n: là số nguyên 1--> 6 luôn đi sau h để xác định kích thước chữ tiêu đề. Đơn vị tính: pixel. Theo thứ tự:

 h1: 20px

 h2: 18px

 h3:16px

 h4: 14px

 h5:12px

 h6: 10px

Lưu ý: Các giá trị trên chỉ tượng trưng cho khả năng của HTML. Với CSS, bạn có thể định dạng thẻ <H> và cho

giá trị độ lớn (pixels) tùy ý.

Tag đóng tiêu đề tương ứng với tag mở nhưng phải có thêm dấu /: </hn>

Xem ví dụ:

Viết: <h1>Đây là Header

1</h1> Hiển thị:

Đây là Header 1

Viết: <h2>Đây là Header

2</h2> Hiển thị:

Đây là Header 2

Viết: <h3>Đây là Header

3</h3> Hiển thị:

Đây là Header 3

Viết: <h4>Đây là Header

4</h4> Hiển thị:

Đây là Header 4

Viết: <h5>Đây là Header

5</h5> Hiển thị:

Đây là Header 5

Viết: <h6>Đây là Header

6</h6> Hiển thị:

Đây là Header 6

Thực hành: Mở Notepad hoặc coderunner gõ vào đọan code bên dưới:

<html> <head> <title>header</title> </head> <body>

<h1>Đây là Header 1</h1> <h2>Đây là header 2</h2>

<h3>Đây là Header 3</h3> <h4>Đây là Header 4</h4>

<h5>Đây là Header 5</h5> vh6>Đây là Header 6</h6>

</body> </html>

Lưu tập tin trên với tên heading.html. Dùng trình duyệt mở để xem kết quả.

2-Thuộc tính và giá trị thuộc tính của h:

Để canh biên trái phải, giữa, cho thẻ h chúng ta dùng thuộc tính đi kèm trong h là.

Cú pháp: &lthn>nội dung tiêu đề </hn>

Trong đó: "giá trị" được thay thế bằng:

 justify :canh đều 2 biên trái phải. Dùng trong trường tiêu đề dài hơn 2 dòng thì 2 biên trái phải đều nhau.

Khác với kiểu đánh máy chữ.

 left :canh trái (mặc nhiên, không cần khai báo)

 right :canh phải

 center :canh giữa

Ví dụ: <h2>Header này được canh giữa</h2>

Header này được canh giữa

<h2>Header này được canh phải</h2>

Header này được canh phải

<h2>Header này mặc nhiên là canh biên trái</h2>

Header này mặc nhiên canh biên trái

II-Cặp Tags Đọan Văn: Paragraph <p></p> Tag

Để hiển thị nội dung của một đọan văn bản ta sử dụng cặp tag: <p></p>. Khác với việc nhập nội dung trực tiếp

như trong bài 3, ngòai việc tự động xuống hàng, cách một dòng khi bắt đầu một đọan văn bản khác, cặp tags:

<p></p> còn có thể định dạng canh đều 2 biên, canh phải, canh giữa. Mặc nhiên, khỏang cách giữa các dòng trong

văn bản đã được thiết lập trong trình duyệt. Để định dạng khỏang cách giữa các hàng, các chữ cũng như nhiều

thuộc tính khác của <p> chúng ta phải dùng đến Cascading Style Sheet(CSS).

1-Cú pháp:

Ví dụ: Viết:

<p>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được

trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững và gọn gàng

hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng...

với CSS, bạn chỉ việc gán thuộc tính và giá trị rồi dùng chúng để định dạng cho tòan bộ trang web hoặc nhiều

trang Web trên cùng một server.</p>

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang

web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng

hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng...

Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở

rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

2-Thuộc tính và giá trị thuộc tính của <p>:

Cũng giống như với <h>, thuộc tính của <p> là align= và giá trị của align= là:

 center :canh giữa.

 justify:canh đều 2 biên

 left :hoặc không khai báo align: mặc nhiên

 right :canh biên phải.

Ví dụ: Đọan văn bản này được canh đều hai biên. Viết:

<p>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều

khiển được trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững

vàng và gọn gàng hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng

chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập

tin có phần mở rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.</p>

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang

web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng

hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng...

Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở

rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

Để ý: hai biên trái phải được canh thẳng đều, không lồi lõm theo kiểu đánh máy chữ.

Ví dụ: Đọan văn bản này được canh phải. Viết:

<p>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều

khiển được trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững

vàng và gọn gàng hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng

chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng element s và tags, rồi lưu chúng bằng 1 tập

tin có phần mở rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.</p>

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang

web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng

hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng...

Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở

rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

III-Cặp Tags Trích Đọan: <blockquote></blockquote>

1-Cú pháp:

<blockquote> Nội dung của trích đọan</blockquote>

Dùng cặp tag này khi muốn trích dẫn một đọan văn bản, và đọan văn bản sẽ thụt lề (indent) tùy theo số lần

<blockquote> mở và đóng. Mở bao nhiêu thì đóng bấy nhiêu.

Ví dụ: Viết:

<blockquote><blockquote>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa

thể điều khiển được trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang

web vững vàng và gọn gàng hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng

vào từng chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng

bằng 1 tập tin có phần mở rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên

Server.</blockquote></blockquote>

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang

web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng

hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng...

Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở

rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

2-Thuộc tính và giá trị thuộc tính của <blockquote></blockquote>:

Cặp tag này không có thuộc tính và giá trị trừ việc sử dụng trích dẫn ngay trong dòng bằng cú pháp: <q

xml:lang="xx"></q>. Và để ghi rõ trích dẫn từ một trang Web khác bạn dùng cú pháp <blockquote

cite="URL">

IV-Tag Xuống Hàng: Break <br> a line tag và chống xuống hàng <nobr>.

1-Tag xuống hàng:

Khi viết thẳng vào HTML không cần sử dụng Paragraph tag (p tag), bạn có thể sử dụng Tag: <br> để xuống hàng.

Tag này không có tag đóng..

Ví dụ: Viết:

Họ:<br> Tên: <br> Địa chỉ-email:<br>

Hiển thị trên trình duyệt:

Họ: Tên: Địa chỉ e-mail:

2-Tag chống xuống hàng: <nobr>

Tag này thường sử dụng trong một câu lệnh hay môt hành động dài của đọan mã Javascript. . Cú Pháp: <nobr>.

Bạn sẽ thấy việc sử dụng hữu hiệu tag này trong các đọan Javascript cao cấp.

3-Thuộc tính và giá trị thuộc tính của <br>

Tag này có một thuộc tính Clear dùng để ngăn việc xuống dòng tự động. Cú pháp: <br clear>

Tag này thường được dùng trong các đoạn Javascript như Rolling Text hoặc Crossmarque, khi đó lệnh xuống

hàng sẽ làm cho đoạn mã hiển thị không đúng.

V-Tạo khỏang trống: none breaking space

1-Cú pháp:

Để tạo khỏang trống giữa các chữ hoặc nội dung ta dùng . Không có đóng mở cho lệnh này.

Ví dụ: Viết:

Khi chưa biết CSS, muốn thụt lề tôi phải dùng bao nhiêu là như vậy.

Hiển thị trên trình duyệt:

Khi chưa biết CSS CSS, muốn thụt lề tôi phải dùng bao nhiêu là như vậy.

VI-Tag vẽ đường gạch ngang: H orizontal Rule (HR) tag

1-Cú pháp:

Để vẽ một đường ngang trong trang dùng tag: <hr>. Đây là một tag đơn và do đó không có Tag đóng.

2-Thuộc tính và giá trị thuộc tính của <hr>

Có 5 thuộc tính cho <hr> đó là:

 align= :Canh biên. Giá trị là: right,center, left (mặc nhiên)

 noshade :Khi muốn hiển thị đường ngang không có bóng mờ.

 size= :Độ dày của đừơng ngang. Giá trị: số 1,2 hoặc 3.

 width= :Độ rộng(độ dài chiều ngang). Giá trị là px hoặc %

 color= :Màu Dùng tên màu như red, green, blue hoặc hexadecimal như: #0000FF, #FFCC99...

Ví dụ: Viết:

<hr>

Hiển thị trên trình duyệt:

VII-Canh giữa nội dung: <center></center> tag

Khi không sử dụng <P> hoặc <blockquote> cho đọan văn bản, bạn có thể dùng cặp Thẻ

<center></center> để canh giữa nội dung

Ví dụ: Viết:

Hiển thị trên trình duyệt:

Canh giữa nội dung này

Cặp tag này cũng được dùng để canh ảnh, form vào giữa trang.

BÀI 3 : Định dạng chữ

Trong bài học này chúng ta sẽ nắm cách sử dụng các thẻ định dạng chữ Đậm, Nghiêng, Gạch

dưới... trong trang HTML.

I-Chữ Đậm: Bold (b) tag Để làm cho chữ đậm ta sử dụng cặp tag: <b> </b> 1-Cú pháp: a-Cặp Tags: : <b> </b>

<b> chữ cần làm đậm</b>. Trong đó:

 <b> :tag khai báo chữ đậm.

 </b> :tag đóng chữ đã được làm đậm. Nếu bạn sơ ý không đóng bằng tag này, chữ đậm sẽ ảnh hưởng lên

các nội dung khác trong văn bản.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<b>Đọan này sẽ Đậm</b> Đọan này sẽ Đậm

2-Thuộc tính và giá trị thuộc tính của: <b> </b>, <strong></strong>Các cặp tag này không có thuộc tính và giá trị.

II-Chữ Nghiêng: Italic (i) tag Để làm cho chữ nghiêng ta sử dụng cặp tag: <i> </i> hoặc <em> </em>

1-Cú pháp:

a-Cặp Tags:<i> chữ nghiêng</i>

Trong đó:

 <i> :tag khai báo chữ nghiêng.

 </i> :tag đóng chữ đã được làm nghiêng. Luôn có tag này.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<i>Đọan này sẽ nghiêng</i> Đọan này sẽ nghiêng

b-Cặp Tags: <em> </em> cũng được dùng để làm chữ nghiêng. Cú pháp và ví dụ tương tự, thay thế i

bằng em.

Ngòai ra chúng ta cũng có thể dùng cặp tags <address>Chữ nghiêng</address> để làm chữ nghiêng,

nhưng nội dung trong cặp tags này tự động xuống hàng.

Các cặp tags : <cite>chữ nghiêng</cite>, <dfn> Chữ nghiêng</dfn>, <var>Chữ nghiêng</var>, cũng có

tác dụng làm nghiêng chữ nhưng ít đựơc sử dụng như tags <i></i>

2-Thuộc tính và giá trị thuộc tính của: <i> </i>, <em> </em>

Các cặp tag này không có thuộc tính và giá trị.

III-Chữ Gạch Dưới: Underline (u) tag

Để làm cho chữ gạch dưới ta sử dụng cặp tag: <u> </u> và <ins> </ins>

1-Cú pháp:

a-Cặp Tags: <u> chữ cần gạch dưới</u>

Trong đó:

 <u> :tag khai báo gạch dưới.

 </u> :tag đóng chữ đã được gạch dưới. Luôn có.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<u>I like HTML</u> I like HTML

b-Cặp Tags:<ins> </ins> để chèn một đọan chữ có gạch dưới vào nội dụng:. Cú pháp tương tự.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

I like <ins>HTML</ins>

I like

HTML

2-Thuộc tính và giá trị thuộc tính của: <u> </u> và <ins> </ins>:

Các cặp tag này không có thuộc tính và giá trị.

IV-Chữ Gạch Giữa: Strike (strike) tag 1-Cú pháp:

Ta có thể viết: <strike>chữ gạch giữa</strike> hoặc <s>chữ gạch giữa</s>

Trong đó:

 <s> :tag khai báo gạch giữa.

 </s> :tag đóng chữ đã được gạch giữa.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<s>Giá cũ: 250.000 đồng</s> Giá cũ: 250.000 đồng

V-Chữ to hơn: Big (big) tag

Để làm cho chữ lớn hơn cỡ chữ hiện tại, ta sử dụng cặp tag: <big> </big>

1-Cú pháp:<big>Chữ to hơn</big>

Trong đó:

 <big> :tag khai báo làm chữ to hơn.

 </big> :tag đóng chữ đã được làm to.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<big>Chữ này to hơn</big> Chữ này to hơn

2-Thuộc tính và giá trị thuộc tính của: <big> </big>

Các cặp tag này không có thuộc tính và giá trị.

VI-Chữ nhỏ hơn: Small (small) tag

Để làm cho chữ nhỏ hơn cỡ chữ hiện tại, ta sử dụng cặp tag: <small> </small>

1-Cú pháp:<small>Chữ nhỏ hơn</small>

Trong đó:

 <small> :tag khai báo làm chữ nhỏ hơn.

 </small> : tag đóng chữ đã được làm nhỏ.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<small>Chữ này nhỏ

hơn</small>

Chữ này nhỏ hơn

2-Thuộc tính và giá trị thuộc tính của: <small> </small>

Các cặp tag này không có thuộc tính và giá trị.

Để thực hành, bạn hãy mở Notepad, sau đó viết các đoạn codes trong các bài ví dụ trên và lưu tập tin

format_text.html

BÀI 4 : Định dạng Font Chữ, Màu chữ, Cỡ chữ

Hướng dẫn định dạng chữ, màu chữ với thẻ <FONT>.

I-Font chữ: <font></font> tag

<font></font> tags dùng để khai báo font chữ, màu chữ và cỡ chữ sử dụng trong đọan văn bản hay tiêu

đề, hay một đọan trích dẫn... Khi khai báo <font> phải kèm theo thuộc tính và giá trị của nó.

Cú pháp:

Trong đó:

 <font> :khai báo font tag sẽ được dùng.

 Thuộc tính: Có 3 thuộc tính là: color, face và size.

 </font> :tag đóng.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<font >Chữ màu đỏ</font> Chữ màu đỏ

<font >Chữ màu xanh, mức 1

</font>

Chữ màu xanh, mức 1

<font >Chữ màu hồng, font

arial </font>

Chữ màu hồng, font arial

<font >Chữ màu chanh, font

tahoma, mức -1 </font>

Chữ màu chanh, font

tahoma, mức -1

II-Giá trị màu, font chữ và kích thước chữ của: <font></font> tag 1-Giá trị màu:

Có hai cách khai báo màu phổ biến đó là:

a-Sử dụng tên màu: gồm 16 tên. Khai báo như sau:

 <font > Màu aqua </font>

 <font > Màu black</font>

 <font > Màu blue</font>

 <font > Màu fuchsia</font>

 <font > Màu gray</font>

 <font > Màu green</font>

 <font > Màu lime</font>

 <font > Màu maroon</font>

 <font > Màu navy</font>

 <font > Màu olive</font>

 <font > Màu purple</font>

 <font > Màu red</font>

 <font > Màu silver</font>

 <font > Màu teal</font>

 <font > Màu white</font>

 <font > Màu yellow</font>

b-Sử dụng giá trị Hexadecimal: Cách khai báo: Luôn bắt đầu bằng dấu #.

Dưới đây là ví dụ biễu diễn 16 tên màu bằng giá trị Hex. Để có thêm nhiều màu bạn cần tham khảo Bảng

màu 1 trong mục lục. Ngòai ra, bạn cũng có thể sử dụng giá trị Hex trong bảng màu 2.

Ví dụ:

 <font > Màu aqua </font>

 <font > Màu black</font>

 <font > Màu blue</font>

 <font > Màu fuchsia</font>

 <font > Màu gray</font>

 <font > Màu green</font>

 <font > Màu lime</font>

 <font > Màu maroon</font>

 <font > Màu navy</font>

 <font > Màu olive</font>

 <font > Màu purple</font>

 <font > Màu red</font>

 <font > Màu silver</font>

 <font > Màu teal</font>

 <font > Màu white</font>

 <font > Màu yellow</font>

2-Font chữ:

3 Font chữ Unicode hỗ trợ dấu tiếng Việt cho Web phổ biến là: arial, verdana và tahoma. Dùng bộ gõ hỗ

trợ Unicode như Unikey và chọn lưu file là Unicode UTF-8 thì trình duyệt sẽ hiển thị dấu Tiếng Việt.

Khai báo như sau:

 <font > Font tahoma </font>

 <font > Font arial </font>

 <font > Font verdana </font>

3-Cỡ chữ:

 <font > Cỡ rất lớn </font>

 <font > Cỡ lớn </font>

 <font > Cỡ vừa </font>

 <font > Cỡ nhỏ </font>

 <font > Cỡ policy thẻ tín dụng </font>

 <font > Cỡ policy cho mướn xe </font>

III-Bài thực hành:

Mở Notepad và gõ vào bài thực hành sau:

<html>

<head>

<title>Fotmat_font</title>

</head>

<body>

<h2><font>Bài thực hành số

2</h2>

<p><font

size="+1">Với</font> <font> font tags </font>,

chúng ta có thể chọn được <font>màu cho

chữ</font>, kích thước cho font chữ như chữ <font>rất nhỏ</font>, chữ <font>font face

verdana</font>.</p>

</body>

</html>

BÀI 5 : Tạo danh sách (list)

Một vài ví dụ sử dụng thẻ HTML để trình bày Danh mục.

I-Danh sách không theo thứ tự: <ul> </ul> (Unordered List)

<ul> </ul> tags dùng để tạo danh sách không theo thứ tự, tag này gồm có thuộc tính và thành phần tạo

danh sách.

1-Cú pháp:

<li>Mục trong danh sách</li>

</ul>

Trong đó:

 <ul> :khai báo một danh sách sẽ được dùng.

 Thuộc tính: type=

 <li> :Thành phần khai báo mục của danh sách. Giá trị:

 </li> :Tag đóng mục. (Tag này là tùy chọn, không cần đóng cũng được.)

 </ul> :Tag đóng.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<ul>

</ul>

1. Mục 1

2. Mục 2

3. Mục 3

<ul>

1. Mục 1

2. Mục 2

5. Mục 5

6. Mục 6

7. Mục 7

</ul>

Mặc nhiên, khi một danh sách được khai báo thì mục đầu tiên sẽ tự động xuống 1 hàng vào thụt lề.

2-Giá trị thuộc tính của Tag:<ul> </ul>

 <ul> : Bắt đầu danh sách theo thứ tự 1,2,3.(mặc nhiên)

 <ul> : Danh sách bắt đầu là các chấm vuông đen.

 <ul> : Danh sách bắt đầu là vòng tròn rỗng.

 <ul> : Danh sách bắt đầu là 1 vòng tròn đen.

 <ul> :Danh sách bắt đầu số La Mã hoa.

 <ul> : Danh sách bắt đầu số La Mã thường.

 <ul> : Danh sách bắt đầu chữ cái Hoa.

 <ul> : Danh sách bắt đầu chữ thường.

Xem ví dụ:

Viết: Hiển thị trên trình duyệt:

<ul>

</ul>

1. Mục thứ tự 1

2. Mục thứ tự 2

3. Mục thứ tự 3

<ul>

<li>Mục với ô vuông đen.

</li>

</ul>

 Mục với ô vuông đen.

<ul>

<li>Mục với ô tròn rỗng.

</li>

</ul>

o Mục với ô tròn rỗng

<ul>

<li>Mục với ô tròn đen.

</li>

</ul>

 Mục với ô tròn đen

3-Tạo danh sách nhiều tầng: Để tạo danh sách nhiều tầng, bạn có thể lồng một danh sách vào trong một

danh sách. Xem ví dụ:

Viết: Hiển thị trên trình duyệt:

<ul>

<li>

<b>Chương 1:</b>

<ul>

<li>Bài Lý thuyết 1. </li>

<li>Bài Lý thuyết 2. </li>

<li>Bài Lý thuyết 3. </li>

</ul> </li>

<li>

<b>Chương 2:</b>

<ul>

<li>Bài Thực Hành 1.

</li>

<li>Bài Thực Hành 2.

</li>

<li>Bài Thực Hành 3.

</li>

</ul>

</li>

</ul>

1. Chương 1:

 Bài Lý thuyết 1.

 Bài Lý thuyết 2.

 Bài Lý thuyết 3.

2. Chương 2:

 Bài Thực Hành

II-Danh sách thứ tự: < ol> &< ol>(Ordered List)

<ol> </ol> Ordered List để tạo danh sách theo thứ tự số hoặc chữ. Cũng giống như khai báo của <ul>

</ul>, nhưng cặp tags này còn có thêm thuộc tính Start và giá trị.

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<ol>

<li>Order List hiễn thị mục với số thứ

tự.

<li>HTML không xếp thứ tự các mục.

<li>Nó chỉ thêm số thứ tự vào mỗi mục

<li>Bạn phải tự xếp thứ tự.

</ol>

1. Order List hiển thị mục với số thứ

tự.

2. HTML không xếp thứ tự các mục.

3. Nó chỉ thêm số thứ tự vào mỗi mục

4. Bạn phải tự xếp thứ tự.

<ol>

<li>Order List có thể dùng số La Mã.

<li>Order List có thể dùng chữ cái.

<li>Bạn bắt đầu bằng 10.

<li>Mục kế tiếp sẽ là XI.

</ol>

X. Order List có thể dùng số La Mã.

XI. Order List có thể dùng chữ cái.

XII. Bạn bắt đầu bằng 10.

XIII. Mục kế tiếp sẽ là XI, XII, XIII.

<ol>

<li>Order List có thể dùng chữ cái.

<li>Dùng chữ A để khai báo.

<li>Bắt đầu bằng chữ thứ 24.

<li>Chữ kế tiếp nó là X,Y,Z, AA.

</ol>

X. Order List có thể dùng chữ cái.

Y. Dùng chữ A để khai báo.

Z. Bắt đầu bằng chữ thứ 24.

AA. Chữ kế tiếp nó là X,Y,Z, AA.

Các giá trị thuộc tính của type=:

 < ol> :Bắt đầu bằng 10, kế tiếp là 11, 12, 13...

 < ol> : Danh sách bắt đầu là các chấm vuông đen.

 < ol> : Danh sách bắt đầu là vòng tròn rỗng.

 < ol> : Danh sách bắt đầu là 1 vòng tròn đen.

 < ol> :Danh sách bắt đầu số La Mã hoa, kế tiếp là VI, VII, VIII...

 < ol> : Danh sách bắt đầu số La Mã thường, kế tiếp là vi, vii, viii...

 < ol> : Danh sách bắt đầu chữ cái Hoa, kế tiếp là C, D, E....

 < ol> : Danh sách bắt đầu chữ t hường, kế tiếp là b,c,d...

Bạn cũng có thể tạo danh sách nhiều tầng sử dụng cặp Tags này hoặc kết hợp với Unodered List. Cách

tạo tương tự như ví dụ trong mục I.

III-Tạo Danh sách Định nghĩa:

Một ứng dụng tạo danh sách quan trọng là tạo danh sách các định nghĩa, giải thích thuật ngữ. Chúng ta

có 3 cặp tags để làm công việc này như sau:

1. < dl> < /dl> : Tags tạo danh sách định nghĩa. (Definition List)

2. < dt> < /dt> : Tags hiển thị thuật ngữ sẽ được định nghĩa. (Definition Term)

3. < dd> < /dd>: Tags hiển thị định nghĩa của thuật ngữ. (Definition Description)

Ví dụ:

Viết: Hiển thị trên trình duyệt:

<dl>

<dd>Hypertext Markup Language.</dd>

<dd>Cascading Style Sheet.</dd>

<dt>DHTML</dt>

<dd>Damamic Hypertext Markup

Language.</dd>

<dt>Element</dt>

<dd>Element được tạo bởi 2 Thẻ.</dd>

<dt>Attribute</dt>

<dd>Attribute mô tả đặc tính của

Element.</dd>

<dt>Value</dt>

<dd>Value xác định một giá trị của

Attribute.</dd>

</dl>

HTML

Hypertext Markup Language.

CSS

Cascading Style Sheet.

DHTML

Dymamic Hypertext Markup

Language.

Element

Element được tạo bởi 2 Thẻ.

Attribute

Attribute mô tả đặc tính của

Element.

Value

Value xác định một đặc tính của

Attribute.

BÀI 6 : Đặt ảnh lên trang Web

Thẻ <IMG> dùng để đặt ảnh lên trang Web.

Các tập tin ảnh với phần mở rộng .jpg và .gif được hỗ trợ bởi hầu hết các web Browser. Ngòai ra, một số

trình duyệt cũng chấp nhận tập tin .bmp và .png. Trong HTML, tag <IMG> không chỉ được dùng để đặt

ảnh lên Web mà còn dùng để chèn ảnh thay thế cho đọan chữ minh họa một liên kết. Chúng ta sẽ đề cập

đến các liên kết và các sử dụng ảnh làm liên kết trong bài sau.

1-Cú pháp:

<IMG>

Trong đó:

 IMG : dùng để khai báo một ảnh sẽ được chèn vào. (Viết tắt của Image: ảnh)

 SRC= :Khai báo đường dẫn đến file ảnh với tên của file ảnh cần chèn vào. (viết tắt của Source:

Nguồn)

 ALIGN= :Dùng để canh vị trí ảnh trong trang. (các giá trị là: right, top, left, bottom, và middle)

 BORDER= :Hiển thị viền bao quanh ảnh, giá trị giấu viền là 0.

 WIDTH= :Xác định chiều RỘNG của ảnh.

 HEIGHT= :Xác định chiều CAO của ảnh.

 ALT= :Đọan chữ thay thế cho ảnh trong trường hợp ảnh không hiển thị trên Web. (alt=Alternate:

Thay thế)

2-Ví dụ:

Giả sử bạn có một ảnh có tên là mypicture.jpg, Ảnh này có chiều rộng là 200px và chiều cao là 300px.

Bạn muốn đặt ảnh này lên Web. Sử dụng Thẻ <IMG>, bạn viết như sau:

<IMG>

-Nếu ảnh này nằm trong thư mục image và trang Web chứa ảnh của bạn ở ngòai thư mục này. Bạn chỉ

đường dẫn đến file ảnh này như sau:

<IMG>

-Nếu ảnh này đặt tại địa chỉ: http://www.thuvien-it.net/image/mypicture.jpg, Bạn chỉ đường dẫn đến

file ảnh này như sau:

<IMG

ALT="my picture">

Tuy nhiên file ảnh này chỉ hiển thị khi máy tính nơi bạn thực hành có kết nối Internet. Do vậy ứng dụng

này ít được sử dụng. Tốt hơn hết nên Download tập tin ảnh về máy trước.

-Trong trường hợp tập tin ảnh không có trong đường dẫn SRC=, dòng Text của ALT sẽ hiển thị thay thế:

Xem ví dụ dưới:

Lưu ý: Nên khai báo thuộc tính WIDTH và HEIGHT cho ảnh vì như vậy sẽ giúp trang Web hiển thị

nhanh hơn. Bởi vì, Browser sẽ tự động dành một khỏang trống bằng chiều rộng và chiều cao của ảnh

trước rồi tải các nội dung của trang. Sau đó sẽ tiếp tục tải ảnh vào. Ngòai ra giá trị mà bạn gán cho

WIDTH và HEIGHT khác với chiều rộng và chiều cao của ảnh cũng sẽ làm thay đổi hiển thị của ảnh

trong trang Web. Các bài thực hành bên dưới sẽ minh họa điều này.

3-Thực hành:

Với ảnh bên dưới đây có chiều rộng là 200px và chiều cao là 150px, lần lượt áp dụng các thuộc tính và

giá trị của thẻ <IMG> cho ảnh này. Trước hết bạn cần tải ảnh này về máy tính và đặt trong thư mục

html là thư mục chứa các tập tin Html mà bạn thực hành từ trứơc. Các bài thực hành này không đề cập

đến các cặp tag cần thiết để mở và đóng một trang HTML mà chỉ tập trung vào thẻ <IMG> Lưu ý:: để

canh ảnh vào giữa, chúng ta dùng cặp thẻ <center> </center> đặt trước và sau thẻ <IMG>

Thực hành 1: tag IMG đơn giản nhất

Viết: <IMG>

Xem kết quả.

Để đặt một ảnh vào giữa trang Web, khi ảnh không nằm trong một TD (sẽ đề cập trong bài 12), dùng cặp

thẻ: <center> </center>

Viết: <center><IMG></center>

Xem kết quả.

Thực hành 2: Dùng ALIGN để định ví trị cho ảnh:

Viết: <IMG>Ảnh này được canh

phải so với dòng chữ này, nội dung sẽ nằm bên trái của ảnh. Giống như

Wrap ảnh trong Word.

Xem kết quả.

Ảnh này được canh phải so với dòng chữ này, nội dung sẽ nằm bên trái

của ảnh. Giống như Wrap ảnh trong Word.

Viết: <IMG>Dòng chữ này nằm giữa so với vị trí của ảnh.

Xem kết quả.

Dòng chữ này nằm giữa so với vị trí của ảnh

Tương tự, bạn có thể thực hành với các vị trị: left, top, bottom

Thực hành 3: Dùng Border để thêm viền cho ảnh:

Viết: <IMG>

Xem kết quả.

Thực hành 4: Thu nhỏ ảnh bằng HEIGHT và WIDTH:

Để thu nhỏ ảnh bằngh Height và Width, bạn cần thu nhỏ theo tỉ lệ theo chiều rộng và chiều cao. Chẳng

hạn, ảnh trong ví dụ này có chiều rộng là 200px và chiều cao là 150px. Như vậy khi giảm chiều rộng

xuống 1/2 thì chiều cao cũng giảm 1/2 tương ứng. Tức là VÀ

Viết: <IMG>

Xem kết quả.

Bài học này bao trùm cách sử dụng Thẻ <IMG> để chèn ảnh vào trang Web. Đây là Thẻ duy nhất dùng

để hiển thị ảnh trên trang Web (Trừ ảnh làm nền với thẻ background). Do đó, bạn cần thực hành cách

dùng thẻ này thật nhiều lần để hiển thị ảnh trên trang theo ý muốn.

BÀI 7 : Hiển thị văn bản định dạng trước-Hiển thị lời giải thích

Đến bài học này bạn đã nắm được một số tag để trình bày một trang HTML... Nhưng có thể bạn sẽ hỏi

rằng nếu muốn giữ những đọan text đã được định dạng trước và không cần sử dụng các thẻ của HTML

thì có được không? Câu trả lời là Được và bạn có thể sử dụng Thẻ <pre> hoặc <xmp> để làm điều này.

I-Giữ lại định dạng của văn bản với cặp tags : <pre></pre>

1-Cú pháp:

<pre>Định dạng trước của văn bản <pre>

Trong đó:

 <pre> :khai báo giữ định dạng mặc nhiên của văn bản.

 </pre> :Tag đóng khai báo.

Ví dụ:

Vậy để hiển thị được các thành phần của trang HTML như <body>, <title>, thì làm sao.? Khi đó bạn

phải sử dụng đến ký tự riêng cho các dấu mở và đóng thành phần. Dưới đây là một số ví dụ:

Xem ví dụ:

Viết: Hiển thị trên trình duyệt:

<html>

<head>

<title>

<body>

</p>

™

<html>

<head>

<title>

<body>

<p>

™

Việc đưa tất cả các ký hiệu riêng cho HTML là một công việc mất rất nhiều thời gian và công sức nếu

không sử dụng công cụ hỗ trợ. Chẳng hạn để hiển thị ví dụ trên, trong Notepad, chúng ta phải viết phải

viết như sau:

&#38lt;html&#38gt; &#38lt;head&#38gt; &#38lt;titlel&#38gt; ........................................... I -Giữ lại

định dạng của văn bản với cặp tags : <xmp></xmp>

Cặp tag này hiện không được hỗ trợ rộng rãi bởi Browser nên được khuyến cáo là không nên sử dụng

nhiều. IE6, FireFox 7.5 hỗ trợ. Đặc điểm của tag này là hiển thị bất kỳ cái gì chứa bên trong nó.

1-Cú pháp:

<xmp>Định dạng trước của văn bản <xmp>

Trong đó:

 <xmp> :khai báo giữ định dạng mặc nhiên của văn bản.

 </xmp> :Tag đóng khai báo.

Xem ví dụ:

Viết: Hiển thị trên trình duyệt:

<xmp>

<ul>

<li>Hello

<ul>

<li>Hello

<li>Hi

<li>How are you?

</ul>

<ul>

<li>I don't know

<li>I don't care

<li>What is HTML?

</ul>

</xmp>

<li>Hi

<li>How are you?

</ul>

<ul>

<li>I don't know

<li>I don't care

<li>What is HTML?

</ul>

Do tính chất không được chấp nhận rộng rãi, Bạn phải cẩn thận khi sử dụng tag này để trình bày bài

hướng dẫn sử dụng HTML.

III-Hiển thị lời giải thích: <acronym></acronym>

Dùng <acronym></acronym> để hiển thị lời giải thích cho các chữ viết tắt bởi các chữ cái đầu. Ví dụ:

WTO= World Trade Organization. Bạn thử đưa chuột lên chữ WTO sẽ sẽ thấy hiệu lực của tag nà y.

1-Cú pháp:

Trong đó:

 <acronym> :Đặt ngay trước chữ viết tắt.

 title="lời giải thích" : Ghi giải thích của chữ viết tắt.

 </acronym> :Tag đóng khai báo sau chữ viết tắt.

Ví dụ:

Viết: Hiển thị:

HTML

CSS

ASP

Bạn thử đưa chuột lên từng từ viết tắt ở cửa sổ hiển thị, bạn sẽ thấy được hiệu ứng acronym mới dùng.

Ngòai ra bạn cũng có thể sử dụng cặp tag <abbr></abbr> để hiển thị lời giải thích. Cú pháp tương tự như

cặp tag Acronym nhưng chỉ hỗ trợ với Netscape Navigator và không được hỗ trợ bởi IE.

BÀI 8 : Thuộc tính cho thành phần BODY-Phần 1

Bài này sẽ giới thiệu 3 thuộc tính dùng cho thành phần BODY đó là chọn màu nền, dùng ảnh để làm

nền, màu chữ với các Thẻ: bgcolor=, background= , text= .

Mặc nhiên, nếu không khai báo màu nền và màu chữ trong thành phần BODY, Trình duyệt sẽ tự động

chọn màu trắng làm nền và màu đen cho chữ. Chúng ta có thể sử dụng một số thuộc tính dưới đây để

thiết lập màu nền, ảnh nền và màu chữ cho trang Web theo ý muốn.

I-Màu nền: bgcolor=

1-Cú pháp:

Trong đó:

 bgcolor= :khai báo màu nền cho Web(viết tắt của background color).

 color :Màu cho nền(dùng tên màu hoặc giá trị Hexadecimal).

Ví dụ: Đọan Code sau đây lấy màu xanh làm nền

Trang Web này dùng màu xanh làm nền và dược khai báo trong

thành phần BODY.

Thay vì sử dụng tên màu, bạn có thể thay thế bằng giá trị Hexadecimal (bạn nên sử dụng). Chẳng hạn,

màu xanh trong ví dụ trên có giá trị Hex là: #0000FF. Vậy bạn có thể viết như sau:

Thay vì dùng, chúng ta có thể dùng giá trị Hex,

bgcolor="#0000FF" cho màu xanh.

II-Dùng ảnh làm nền:

Để dùng ảnh làm nền cho thành phần , chúng ta có thể thay thế thuộc tính bgcolor bằng thuộc tính:

background=

1-Cú pháp:

Trong đó:

 background= :khai báo ảnh nền cho thành phần Body.

 imgname: nguồn và tên của ảnh nền.

Có 2 định dạng ảnh được hỗ trợ bởi phần lớn các Trình duyệt đó là ảnh GIF và JPG. Thông thường để

tạo ảnh nền, nên dùng JPG vì định dạng này cho ảnh chất lượng cao. Bạn phải khai báo đúng tên đường

dẫn đến ngăn lưu trữ file ảnh và đúng tên của tập tin ảnh (để ý tên tập là chữ viết thường hay viết hoa và

khai báo cho đúng). Không nhất thiết phải chọn một tập tin ảnh có kích thước lớn làm nền. Mặc nhiên,

khi chọn một ảnh cho nền, trình duyệt sẽ tự động trải ảnh này cho tòan bộ trang Web. Nghĩa là Browser

sẽ tạo ra một ảnh lớn làm nền từ file ảnh nhỏ bằng cách trải và đặt chúng nằm liền nhau. Nếu ảnh nền

không sử dụng hiệu ứng Seamless Tiding- một kỹ thuật làm liền viền như lót gạch hoa, thì giữa các ảnh

dàn trải sẽ xuất hiện các đường viền khiến chúng không liền nhau. Để tránh trường hợp này, bạn phải

dùng một chương trình xử lý ảnh để tạo ảnh liền viền. Xem bài Thực hành số 3-Bài 8 tài liệu hướng dẫn

sử dụng Paintshop Pro 8. Dưới đây là 2 đọan code sử dụng ảnh nền cho trang Web. Với 2 ảnh mẫu bên

dưới: Bạn nên lưu 2 file ảnh này vào thư mục chứa file thực hành.

Ảnh 1-Không liền viền. Ảnh 2-Liền viền.

Ví dụ: Đọan code dưới đây sử dụng ảnh làm nền.

Ảnh nền Cho Web không dùng hiệu ứng Seamless Tiding

Bạn dễ dàng nhận ra các đường nối giữa các ảnh nhỏ.

Ảnh nền Cho Web dùng hiệu ứng Seamless Tiding

Bạn khó nhận ra các đường nối giữa các ảnh nhỏ.

Sẽ thừa nếu bạn vừa dùng ảnh làm nền lại vừa dùng màu làm nền. Do vậy, chỉ 1 trong 2 chọn lựa nền

cho trang Web nói trên được dùng trong thành phần BODY .

III-Màu chữ: text=

Mặc nhiên, Browser sẽ chọn màu đen cho chữ. Trong bài 6, chúng ta cũng đã đề cập đến sử dụng Tag để

chọn màu cho chữ. Ngòai ra để thay đổi màu mặc nhiên của chữ, chúng ta còn có thể dùng thuộc tính

text="color" .

1-Cú pháp:

Trong đó:

 text= :khai báo chữ cho Web.

 color : Màu cho chữ(dùng tên màu hoặc giá trị Hexadecimal).

Ví dụ: Đọan code dưới đây sử dụng màu đen làm nền và màu trắng cho chữ.

Chữ màu trắng và nền màu đen.

BÀI 9 : Thuộc tính cho thành phần BODY-Phần 2

Trong bài 8, chúng ta đã nắm một số thuộc tính (properties) cho thành phần bao gồm: màu nền

(bgcolor=), ảnh nền (background=) và màu chữ (text=). Bài này chúng ta đề cập đến các thuộc tính còn

lại của bao gồm: Lề của trang Web (margin), màu của các đường liên kết (link).

I-Lề của trang HTML: topmargin= "",

1-topmargin:

Cú pháp

<body>

Trong đó:

 topmargin= :Khai báo khỏang cách trên cùng của trang Web so với trình duyệt. Giá trị là số

Pixels

2-leftmargin:

Cú pháp

<body>

Trong đó:

 leftmargin= :Khai báo khỏang cách trái phải của trang Web so với hai biên của trình duyệt. Giá

trị là số Pixels

3-Viết gộp 2 thẻ trong thành phần BODY:

<body>

4- Ví dụ: Đọan Code xác định khỏang cách trên cùng, khỏang cách 2 biên của trang Web với trình duyệt

bằng 5 pixels.

<body>

5-a Real World Example: Đọan Codes này xác định khỏang cách trên cùng của trang Web với trình

duyệt bằng 0 pixels.

<html>

<head>

<title>TEST MARGIN</title>

</head>

<BODY

leftmagrin="0">

<TABLE

border="1">

<TR>

<TD>Banner 1

</TD>

<TD>Banner

2 </TD>

<TD>Banner 3

</TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD><font

size="1"><b>Đặt Script giờ đăng nhập:</b></TD>

<TD><font

size="1"><b>Đặt Script ngày tháng năm</b></TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD>

<TABLE

border="1">

<TR>

<TD>Trang Chính</TD>

</TR>

<TR>

<TD>Giới thiệu</TD>

</TR>

<TR>

<TD>Tinhọc</TD>

</TR>

<TR>

<TR>

<TD>Tiếng Anh</TD>

</TR>

<TR>

</TR>

</TABLE>

</TD>

<TD

height="100%">

<br>

Welcome to My First HTML Page!<BR>

Đón chào bạn đến với TRang Web đầu tiên của tôi!

</CENTER>

</TD>

<TABLE

cellpadding="2">

<TR>

<TD>Truyện

dài</TD>

</TR>

<TR>

<TD>Truyện

ngắn</TD>

</TR>

<TR>

<TD>Truyện

cười</TD>

</TR>

<TR>

<TR>

</TR>

<TR>

<TD>Đăng ký

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<TABLE

height="20" cellpadding=0>

<TR>

Me.</TD>

</TR>

</TABLE>

</body>

</html>

Chép đọan codes này và dán vào Coderunner, Click nút Xem trang Web, bạn thấy rằng bây giờ trang

này phía trên cùng nằm sát với thực đơn trình duyệt. Không có khỏang trống nào. Với Leftmargin vì

chúng ta dùng độ rộng của <TABLE> là 600pixels nên không thấy được khỏang cách.

5-b Real World Example: Đọan Codes này xác định khỏang cách trên cùng và hai biên của trang Web

với trình duyệt bằng 0 pixels.

Đổi lại độ rộng của các bảng (table) trong đọan Codes trên là 100%. Chép đọan Codes dưới đây là lưu

vào Notepad với tên tập tin testmargin.html. Mở bằng trình duyệt hoặc Coderunner bạn sẽ thấy kết quả:

<html>

<head>

<title>TEST MARGIN</title>

</head>

<BODY

leftmargin="0">

<TABLE

cellpadding="0">

<TR>

<TD</TD>

<TABLE

border="1">

<TR>

<TD>Banner 1

</TD>

<TD>Banner

2 </TD>

<TD>Banner 3

</TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD><font

size="1"><b>Đặt Script giờ đăng nhập:</b></TD>

<TD><font

size="1"><b>Đặt Script ngày tháng năm</b></TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD>

<TABLE

border="1">

<TR>

<TD>Trang Chính</TD>

</TR>

<TR>

<TD>Giới thiệu</TD>

</TR>

<TR>

<TD>Tinhọc</TD>

</TR>

<TR>

<TR>

<TD>Tiếng Anh</TD>

</TR>

<TR>

</TR>

</TABLE>

</TD>

<TD

height="100%">

<br>

Welcome to My First HTML Page!<BR>

Đón chào bạn đến với TRang Web đầu tiên của tôi!

</CENTER>

</TD>

<TABLE

cellpadding="2">

<TR>

<TD>Truyện

dài</TD>

</TR>

<TR>

<TD>Truyện

ngắn</TD>

</TR>

<TR>

<TD>Truyện

cười</TD>

</TR>

<TR>

<TR>

</TR>

<TR>

<TD>Đăng ký

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<TABLE

height="20" cellpadding=0>

<TR>

Me.</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</body>

</html>

II-Màu của các liên kết trong HTML: link= "",,

Cho đến giờ chúng ta chưa học đến lệnh liên kết đến trang hoặc Website trong HTML. Tuy vậy, bài học

này cung cấp thông tin để bạn sử dụng cho các liên kết mà bạn sẽ học trong bài 18. Như bạn biết, ngòai

việc hiển thị thông tin trên trình duyệt, HTML còn cho phép chúng ta liên kết đến các trang HTML khác,

hoặc các Website khác... Để làm được, chúng ta phải sử dụng Thẻ liên kết(sẽ đề cập đến trong bài 18).

Mỗi một liên kết bao gồm màu chữ của Liên kết khi người dùng chưa Click chuột lên liên kết đó (Link

color). Màu chữ của Liên kết khi liên kết đã được Click và hiện tại trang liên kết đang mở (active link).

Và màu của liên kết cho biết rằng trang đó chúng ta đã xem(visited link). HTML chỉ cho chúng ta 3

thuộc tính đó. Ngòai ra, để thực sự điều khiển được thuộc tính của Liên kết, bạn phải dùng đến CSS.

CSS cho phép bạn tất cả các khả năng mà bạn cần để trang web trở nên sinh động hơn.

Trong HTML để khai báo màu của Link, bạn phải đặt các thuộc tính này trong thẻ <BODY>. Có 3 thuộc

tính mà bạn dùng là:

 link="giá trị màu" :Khai báo màu của chữ đại diện cho Liên kết. Giá trị màu có thể là tên màu

hoặc giá trị Hex.

 alink="giá trị màu" :Khai báo màu của chữ đại diện cho Liên kết khi liên kết này được click.

Giá trị màu có thể là tên màu hoặc giá trị Hex( alink viết tắt của Active Link: Liên kết đang họat

động)

 vlink="giá trị màu" :Khai báo màu của chữ đại diện cho L iên kết khi liên kết này được xem.

Giá trị màu có thể là tên màu hoặc giá trị Hex( vlink viết tắt của Visited Link: Liên kết đã được

xem.)

1-Cú pháp:

<BODY>

2-Ví dụ:

Để khai báo màu chữ của liên kết là Xanh, Active Link là màu Đỏ và Vlink là màu Tím, bạn viết như

<BODY>

Hoặc bạn có thể dùng giá trị HEX:

<BODY>

Tham khảo bảng màu với các giá trị Hex sẵn có.

Trong bài kế tiếp, bạn sẽ học cách đặt một liên kết trên trang HTML

BÀI 10 : Thực hành HTML và làm quen với biểu bảng

Bài thực hành này ôn lại một số codes đã học..., cách sử dụng màu cho trang Web. Qua đó bạn cũng làm

quen dần với biểu bảng và cách tạo một biểu bảng trong HTML trước khi chúng ta bắt đầu trong bài 11.

Hãy xem biểu bảng bên dưới...

Bảng 16 màu cơ bản

White Black Gray Silver

Aqua Navy Yellow Green

Red Fuchsia Blue Teal

Lime Olive Maroon Purple

Để thực hành, bạn hãy mở Notepad, chọn font chữ verdana hoặc tahoma, và gõ vào các dòng codes bên

dưới:

<html>

<head>

</head>

<body>

<h1><font>Bảng 16 màu cơ

bản</font></h1>

<table border=1

cellspacing="0">

<tr>

<td><font

color="blue">White</font></td>

<td> <font

color="white">Black</font></td>

<td> <font

color="white">Gray</font></td>

<td> <font

color="white">Silver</font></td>

</tr>

<tr>

<td><font

color="white">Aqua</font></td>

<td> <font

color="white">Navy</font></td>

<td> <font

color="white">Yellow</font></td>

<td> <font

color="white">Green</font></td>

</tr>

<tr>

<td><font

color="white">Red</font></td>

<td> <font

color="white">Fuchsia</font></td>

<td> <font

color="white">Blue</font></td>

<td> <font

color="white">Teal</font></td>

</tr>

<tr>

<td><font

color="blue">Lime</font></td>

<td> <font

color="white">Olive</font></td>

<td> <font

color="white">Maroon</font></td>

<td> <font

color="white">Purple</font></td>

</tr>

</table>

<p><i>Để sử dụng màu bạn chỉ việc khai báo thuộc tính

màu trong thành phần theo sau bởi dấu = <b>"tên

màu</b></i>.

</body>

</html>

Lưu tập tin này vào thư mục html với tên colorchart.html. Kết quả của bạn giống như tập tin html này,

click vào đây

BÀI 11 : Tạo biểu bảng trong HTML-Phần 1

Nếu bạn đã dùng chương trình bảng tính (Excel) hoặc sử dụng bảng (table) trong MS Word thì bạn dễ

dàng hiểu khái niệm về bảng và hình thức của chúng. Bảng là tập hợp của hàng và cột....

Giao tiếp giữa hàng và cột tạo ra các ô (cell). Dữ liệu chứa trong ô gọi là dữ liệu của bảng (table data). Bảng được

phát triển và đưa vào sử dụng trong HTML để hiển thị các thông tin theo cấu trúc. Cho đến nay bảng đã được sử

dụng rộng rãi trong thiết kế Web. Bảng dùng để định dạng bố cục của một trang, chia các phần của trang ra thành

từng khu vực nhỏ. Bạn thử truy cập một trang bất kỳ nào, rồi dùng lệnh View/Source của trình duyệt để xem

Source code của trang .Rõ ràng, bạn thấy trong trang này sử dụng nhiều thành phần bắt đầu bằng <table> và trong

thành phần này có nhiều thuộc tính và giá trị của thuộc tính dùng để định dạng cho Thẻ <table> đó .

Mỗi một bảng (table) gồm một hoặc nhiều hàng (tr= table row), trong một hàng gồm một hoặc nhiều ô (td =table

data). Một bảng chỉ có một hàng và một ô thường được dùng làm bảng chính bao quanh nội dung của trang Web.

Khi thiết kế bảng phức tạp, trong một ô có thể thêm vào các bảng nhỏ và các ô trong bảng nhỏ này có thể thêm

vào bảng nữa... Hoặc có thể hàng trên trong bảng chỉ 1 ô và hàng dưới là 2 ô, hàng dưới nữa là 3 ô...Hoặc hàng

bên trái gồm 4 hàng và hàng bên phải là một hàng... Việc sử dụng tag mở và đóng phải theo đúng trình tự nếu

không ô trong bảng sẽ không hiển thị như mong muốn.

I-Các thành phần để tạo một bảng:

Trước hết, trong HTML, để tạo một bảng, cần các cặp Thẻ thành phần sau đây:

 <table thuộc tính="giá trị" thuộc tính="giá trị"...></table>: Mở và đóng một bảng.

 <tr thuộc tính="giá trị" thuộc tính="giá trị" ...></tr>: Mở và đóng một hàng.

 <td thuộc tính="giá trị" thuộc tính="giá trị" ...></td>: Mở và đóng một ô.

Nhớ rằng giữa các thuộc tính trong bảng phải cách nhau bằng một khỏang cách( nhấn phím cách) và theo sau

chúng là dấu "="

1-Các thuộc tính của bảng (<table>) gồm:

 align=

 background=

 bgcolor=

 width=

 height=

 border=

 bordercolor =

 bordercolordark=

 bordercolorlight=

 cellpadding=

 cellspacing=

 frame=

 rules=

2-Các thuộc tính của hàng (<tr>) gồm:

 align=

 valign

 bgcolor=

 background=

3-Các thuộc tính của ô (<td>) gồm:

 align=

 valign=

 bgcolor=

 background=

 char=

 colspan=

 rowspan=

 nowrap=

 height =

 width=

Chúng ta sẽ lần lượt tìm hiểu cách dùng các thuộc tính và giá trị đi kèm chúng cho mỗi thành phần trong bảng

trong bài này và các bài kế tiếp về bảng.

II-Bắt đầu tạo một bảng đơn giản:

Trước tiên, để làm quen với bảng chúng ta thực hành tạo một số bảng đơn giản. Sau đó, chúng ta sẽ lồng các thuộc

tính cho từng thành phần như đã nêu trên.

1-Bảng đơn giản:

Một bảng đơn giản gồm các bước:

-Bắt đầu bảng gõ vào Thẻ <table>

-Bắt đầu một hàng đầu tiên trong bảng gõ vào: <tr>

-Bắt đầu một ô dữ liệu đầu tiên trong bảng gõ vào: <td>

-Nhập vào nội dụng của ô dữ liệu.

-Đóng ô dữ liệu này bằng Thẻ </td>

-Đóng hàng đầu tiên bằng Thẻ: </tr>

-Đóng bảng này bằng Thẻ: </table>

Lưu ý: Thẻ </table> là bắt buộc nếu bạn muốn trang Web hiển thị bảng trong Netscape Navigator.

a-Ví dụ 1:

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.

</td>

</tr>

</table>

</body>

</html>

Tìm hiểu cách viết của bảng trên:

1-<table>

2-<tr>

3-<td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.

4-</td>

5-</tr>

6-</table>

 Dòng 1: Bắt đầu một bảng

 Dòng 2: Bắt đầu 1 hàng.

 Dòng 3: Bắt đầu một ô, và trong ô phải chứa một nội dung nào đó. Nội dung có thể là Text, hoặc hình

ảnh. (trong ví dụ này là Text : Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột

 Dòng 4: Đóng ô dữ liệu

 Dòng 5: Đóng hàng trong bảng

 Dòng 6: Đóng bảng.

Cú pháp trên đây giúp bạn dễ theo dõi việc tạo một bảng. Khi đã quen với viết codes, các tag có thể nằm trên cùng

một hàng mà không cần phải xuống hàng như cách viết trên. Đọan codes trên đây có thể viết lại như sau:

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.

</td>

</tr>

</table>

</body>

</html>

Khi bạn xem ví dụ trên, bạn không thấy gì ngòai dòng: Đây là bảng đầu tiên, bảng này chỉ có một hàng và một

cột.. Vậy, bảng nằm ở đâu?. Nguyên nhân là với HTML, khi bạn không khai báo border= cho bảng thì trình duyệt

hiểu rằng, bảng đó sử dụng border=0. Vậy cũng với đọan code trên chúng ta hãy thêm border="5" vào bảng

xem sao. (5 pixels)

Ví dụ 2: Tạo viền cho bảng với thuộc tính

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Bảng này có viền lớn bằng 5 pixel.

</td>

</tr>

</table>

</body>

</html>

Rõ ràng, bây giờ bao quanh bảng là 1 khung màu xám. Bạn có thể cho khung này một chút màu được không? Câu

trả lời là bạn chỉ cần thêm vào trong thành phần <table>

Cũng với ví dụ trên bạn viết lại như sau:

Ví dụ 3: Thêm màu cho viền với thuộc tính

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Bảng này có viền = 5px và màu viền là vàng.

</td>

</tr>

</table>

</body>

</html>

Bạn đã tạo được một bảng có độ rộng của viền bằng 5px và màu của viền là vàng. Bạn có thể thực hành với các

giá trị màu và pixel khác nhau để quen dần.

Đến đây chắc bạn nghĩ rằng, có thể thêm màu cho viền thì cũng có thể thêm màu cho nền. Được mà, chỉ cần bạn

thêm thuộc tính bgcolor="màu" vào thành phần bảng (thuộc tính này bạn đã quen trong bài 9). Dùng ví dụ trên,

hãy thêm thuộc tính vào bảng. Như đọan codes bên dưới:

Ví dụ 4: Thêm màu màu nền cho bảng với thuộc tính

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Bảng này có viền = 5px và màu viền là vàng, màu nền đỏ.

</td>

</tr>

</table>

</body>

</html>

Nếu thêm màu nền, hẳn cũng có thể sử dụng ảnh nền cho bảng. Không sai, bạn có thể thay thế thuộc tính

bgcolor="màu" bằng thuộc tính. (Xem bài 9- Ảnh nền cho thành phần body). Khi

đó bạn phải có tập tin ảnh nền có phần mở rộng là .jpg hoặc gif).

Đến đây, bạn thấy rằng thuộc tính background= "", ngòai xác định màu nền và ảnh nền cho thành

phần body của trang, nó còn được dùng cho cả bảng, hàng( chỉ dùng bgcolor), và cột...Đây là mối quan hệ của

thuộc tính với thành phần, không chỉ trong HTML mà cả Javascript, CSS và nhiều ngôn ngữ khác có dùng ngôn

ngữ HTML. Và bạn càng ngạc nhiên khi thấy được sự giống nhau trong quan hệ của Thành phần-Thuộc tính hay

Đối tượng-Thuộc tính hay Đối tượng-Phương pháp trong nhiều ngôn ngữ lập trình. Cái cơ bản là chúng ta nhớ,

hình dung và sắp xếp chúng theo trật tự hợp lý.

Phần 1 đã giới thiệu những cơ bản nhất về bảng. Để khám phá tiếp cách dùng các thuộc tính còn lại và tạo những

bảng phức tạp, chúng ta sẽ tiếp tục với phần 13, 14, 15, 16.

BÀI 12 : Tạo biểu bảng trong HTML-Phần 2

Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu viền, màu nền, ảnh nền cho

bảng. Bạn cũng biết được bố cục một bảng bắt đầu bằng <table> , bên trong <table> là <tr>, bên trong

<tr> là <td>.

Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu viền, màu nền, ảnh nền cho

bảng. Bạn cũng biết được bố cục một bảng bắt đầu bằng <table> , bên trong <table> là <tr>, bên trong

<tr> là <td>. Để đóng <td> dùng Thẻ </td>, để đóng một hàng chứa <td> </td>, dùng Tag đóng </tr>.

Và để kết thúc bảng dùng tag đóng </table>.

Giải sử muốn tạo bảng có 2 hay nhiều hàng thì làm sao?

I-Tạo bảng đơn giản với nhiều hàng, nhiều cột:

Cũng như tạo bảng đơn giản với 1 hàng, để tạo nhiều hàng, ngay khi đóng hàng đầu tiên của bảng, bạn

tiếp tục mở một hàng mới bằng Tag <tr>, rồi cũng khai báo dữ liệu bằng các tag mở và đóng <td>

</td>.

1-Bảng nhiều hàng:

a-Ví dụ 1: Tạo bảng nhiều hàng.

Xem minh họa:

Dưới đây là đọan mã HTML cho minh họa trên.

Bạn nên thực hành gõ vào Notepad và lưu bằng tập

tin mở rộng .htm hoặc .html hơn là chép rồi dán.

<html>

<head>

<title>Bang nhieu hang</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td> <font>Đây là hàng 4 chữ màu lá chanh.</font></td>

</tr>

</table>

</body>

</html>

Bạn đừng bận tậm tại sao bảng thu hẹp chiều ngang. Đơn giản là chúng ta chưa khai báo độ rộng cho

bảng nên Trình duyệt tự động mở rộng hay thu hẹp bảng tùy theo nội dung chứa trong <td> </td>.

Trong ví dụ trên, mỗi một hàng mới được khai báo với Thẻ <tr>, và đóng bằng </tr>.

Bạn có thể thêm màu nền vào trong mỗi hàng( <tr> bằng cách chèn thuộc tính dùng

thuộc tính như bạn dùng trong Thẻ </table> hoặc <body>.

Cũng với ví dụ trên, ví dụ dưới đây là thêm màu nền vào <tr>.

b-Ví dụ 2: Thêm màu nền vào Thẻ

<tr>

Xem minh họa:

Đoạn mã HTML bên dưới:

<html>

<head>

<title>Bang nhieu hang</title>

</head>

<body>

<table>

<tr>

<td> <font>Đây là hàng 1 chữ màu vàng, nền màu đen.

</font> </td>

</tr>

<tr>

<td> <font>Đây là hàng 2 chữ màu đỏ, nền màu

xanh.</font></td>

</tr>

<tr>

<td> <font>Đây là hàng 3 chữ màu xanh, nền màu lá

chanh.</font></td>

</tr>

<tr>

<td> <font>Đây là hàng 4 chữ màu lá chanh, nền màu

nước biển.</font></td>

</tr>

</table>

</body>

</html>

Dù bạn đã khai báo màu nền trong Thẻ <tr>, bạn vẫn có thể thay đổi màu nền trong thẻ <td> bằng cách

thêm thuộc tính trong thẻ đó.

Tóm lại, bạn có thể thay đổi màu nền và ảnh nền cho Thẻ <table>, <tr>, <td> bằng thuộc tính:

bgcolor="tên màu" và. Lưu ý: Chỉ dùng thuộc tính bgcolor cho thẻ <tr>.

2-Tạo bảng nhiều cột:

Như đã nói, trong một hàng gồm một hoặc nhiều cột dữ liệu ( <td>). Do vậy chúng ta có thể tạo một

bảng với nhiều cột dữ liệu bằng cách chia <tr> với nhiều <td> </td>.

Ví dụ 1: Tạo bảng nhiều cột.

Lưu ý: Những ví dụ này không đề cập

đến màu nền, màu chữ hay màu viền.

Xem minh họa:

Mã HTML cho ví dụ trên.

<html>

<head>

<title>Bang nhieu hang, nhieu cot. </title>

</head>

<body>

<table>

<tr>

<td> Qúy I </td><td> Tháng giêng </td><td> Tháng 2 </td><td>

Tháng 3 </td>

</tr>

<tr>

<td> Tổng thu </td><td> 000000 </td><td> 000000 </td><td> 000000

</td>

</tr>

<tr>

</tr>

<tr>

<td> Còn lại </td><td> 000000 </td><td> 000000 </td><td> 000000

</td>

</tr>

</table>

</body>

</html>

Lưu ý: Với cách tạo bảng này số cột trong mỗi hàng đều bằng nhau, trường hơp bạn bỏ sót một <td>

</td> trong một hàng, bạn sẽ có kết quả như hình dưới:

II-Một số thuộc tính khác trong bảng:

Ví dụ 1: Đặt tiêu đề cho bảng:

Bạn có thể sử dụng Thẻ <thead>, <tbody> đểa đặt tiêu đề cho bảng. Dòng code này phải đặt đầu tiên

ngay sau khi thẻ <table>

được mở. Trong ví dụ dưới đây dùng tbody vừa đặt tiêu đề vừa canh giữa các thành

phần trong bảng.

Xem minh họa:

Đọan mã HTML cho minh họa trên. Nhớ là thực hành gõ vào Notepad và lưu bằng tập tin mở rộng

.htm hoặc .html để quen.

<html>

<head>

<title>Bang nhieu hang, nhieu cot. </title>

</head>

<body>

<table>

<tbody>Doanh Thu Qúy I năm 2005

<tr>

<td> Qúy I </td><td> Tháng giêng </td><td> Tháng 2 </td><td>

Tháng 3 </td>

</tr>

<tr>

<td> Tổng thu </td><td> 000000 </td><td> 000000 </td><td> 000000

</td>

</tr>

<tr>

</tr>

<tr>

<td> Còn lại </td><td> 000000 </td><td> 000000 </td><td> 000000

</td>

</tr>

</table>

</tbody>

</body>

</html>

Ví dụ 2: Che viền trong ngòai của bảng:

Thuộc tính có thể dùng để che viền ngòai của Table: Thuộc tính này được đặt trong Thẻ

<Table>.

Các giá trị vị trí của Thuộc tính Frame là:

 void: che dấu viền quanh bảng

 above: Chỉ hiển thị viền trên và trong

 below: Chỉ hiển thị viền dưới và trong

 hsides : Hiển thị viền trên và dưới

 vsides: Hiển thị viền 2 bên trái phải

 rhs: Hiển thị viền bên phải và trong

 lhs: Hiển thị viền bên trái và trong

 box, border: hiển thị viền trong tòan bảng.

Xem minh họa:

Ví dụ này sử dụng trong <table>

Ví dụ 3: Che viền trong của bảng:

Thuộc tính có thể dùng để che viền trong của Table: Thuộc tính này được đặt trong Thẻ

Table.

Các giá trị vị trí của Thuộc tính rules là:

 none: che viền trong của bảng.

 rows: Chỉ hiển thị viền ngang

 cols: Chỉ hiển thị viền đứng

Phần kế tiếp sẽ giới thiệu một số thuộc tính của bảng về độ rộng, chiều cao, canh biên... Kết thúc bài học

về bảng, bạn có thể sử dụng bảng để Layout một trang HTML hòan chỉnh.

BÀI 13 : Định chiều rộng và chiều cao cho bảng

Khi nói đến độ rộng Width= và chiều cao Height= của bảng, chúng ta phải lưu ý đến độ phân giải màn

hình. Có 2 giá trị để gán cho thuộc tính độ rộng và chiều cao trong thẻ: <table> đó là

Số Pixel và %.

Nếu bạn sử dụng Pixel cho bảng, tùy theo độ phân giải của màn hình mà trang Web của bạn được trải

đều ra hai biên hay có khuynh hướng bị thu hẹp lại vào giữa khi hiển thị trên màn hình có độ phân giải

cao. Thống kê cho thấy hiện có khỏang 50% mà hình máy tính vẫn sử dụng độ phân giải 800x600 pixels.

Cũng có nhiều màn hình hỗ trợ tốt 1024x768 pixels nhưng do người dùng đã quen thuộc với độ phân

giải thấp nên ngại thay đổi. Khi tăng độ phân giải, đối tượng trên màn hình có khuynh hướng thu nhỏ lại.

Ngược lại, khi giảm độ phân giải, đối tượng có khuynh hướng dãn ra. Do vậy, chọn Số pixels hay % cho

bảng chính bao tòan trang là tùy thuộc vào sự lựa chọn của bạn. Hiện có rất nhiều trang Web sử dụng

pixels và giới hạn chiều rộng của bảng là 770. Tất cả các trang của Thư viện IT sử dụng 100% chiều

rộng cho bảng chính. Khi dùng phần trăm và thiết kế tr ên màn hình 1024x768, trang có thể đẹp mắt với

bạn, nhưng nếu hiển thị trên màn hình độ phân giải thấp, các đối tượng có thể hiển thị không theo như

mong muốn.

I-Định chiều rộng và chiều cao cho bảng: Width= "",

Cú pháp:

<table> hoặc:

<table>

Trong đó:

 width= :Khai báo độ rộng cho bảng (giá trị là số Pixels hoặc %).

 height= :Khai báo chiều cao cho bảng (Giá trị là số Pixels hoặc %).

Ví dụ: Đọan code sau đây tạo một bảng có chiều rộng 500pxels và chiều cao 200pixels.

<html>

<head>

<title>Table 1</title>

</head>

<body>

<table>

<tr>

<td width=200>Ô này rộng 200 pixels </td>

<td width=300>Ô này rộng 300 pixels </td>

</tr>

<td>Ô này rộng 200 pixels </td>

<td>Ô này rộng 300 pixels </td>

</tr>

<td>Ô này rộng tương ứng </td>

</tr>

</table>

</body>

</html>

Kết quả như hình dưới:

này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng tương ứng Ô này rộng tương ứng

II-Định vị trí cho bảng và các dữ liệu trong ô:

1-Định vị trí cho bảng:

Để xác định vị trí của bảng, chúng ta dùng thuộc tính align= với các giá trị: left, center và right. Mặc

nhiên vị trí của hầu hết các thành phần là bên trái. Để canh bảng vào giữa, cũng với ví dụ trên, chúng ta

thêm vào trong thẻ <table>, như sau: <table

height="200">

Kết quả:

này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng tương ứng Ô này rộng tương ứng

Khi ta định dạng bảng sang phải, chúng ta có thể viết nội dung ở bên trái giống như Wrap trong

Word. Thay trong ví dụ

trên chúng ta được bảng và nội dung

như sau:

Bạn để ý nếu chúng ta dùng Thẻ <p để

viết thì nội dung sẽ hiện thị vào phần trống bên trái của bảng này như bạn đang thấy.

2-Định vị trí dữ liệu:

Trong 3 ví dụ trên, dữ liệu trong ô nằm về bên trái và mặc nhiên được đưa xuống giữa dòng. Để xác định

vị tri của dữ liệu trong ô, chúng ta sử dụng 2 thuộc tính cho ô đó là:

 align= giá trị cho align mặc nhiên là Left (trái). Để canh giữ dùng "center", canh phải dùng

"right".

 valign= giá trị cho valign là "top" (trên cùng), "bottom" (dưới cùng") và "middle" (giữa). (v viết

tắt của vertical: đứng). Ngòai ra còn có baseline, nhưng giá trị này ít được dùng.

Bây giờ, dùng lại đọan code trên nhưng chúng ta thêm vào align và valign cho các ô:

<html>

<head>

<title>Table 1</title>

</head>

<body>

<table>

<tr>

</tr>

</tr>

này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng 200 pixels Ô này rộng 300 pixels

Ô này rộng tương ứng Ô này rộng tương ứng

</tr>

</table>

</body>

</html>

Xem kết quả:

Canh giữa Canh biên phải

Canh giữa và trên Canh giữa và giữa

Canh giữa và dưới Canh phải và dưới

III-Khỏang cách các ô dữ liệu:

1-Khỏang cách giữa các ô dữ liệu: cellspacing=

Thuộc tính được dùnng để các định khỏang các giữa các ô dữ liệu trong bảng.

Thuộc tính này được đặt trong Thẻ <table> khi một bảng được khai báo. Ví dụ, để xác định khỏang cách

giữa các ô là 10px, ta khai báo như sau:

<table>

Chèn đọan codes này vào đọan codes mẫu trong ví dụ trên, thêm màu nền cho từng ô dữ liệu để dễ phân

biệt (dùng chẳng hạn), Chạy đọan codes này (trong Code Runner) ta thấy kết quả như

bên dưới:

Canh giữa Canh biên phải

Canh giữa và trên Canh giữa và giữa

Canh giữa và dưới Canh phải và dưới

Để ý rằng, giữa các ô dữ liệu giờ đây đã có một khỏang cách là 10 pixels. Hiển thị bằng một viền rộng

10pixels màu trắng.

2-Khỏang cách từ ô dữ liệu đến viền xung quanh: cellpadding=

Nếu bạn từng gói hàng, hẳn bạn phải dùng giấy mềm hoặc mút chèn xung quanh món hàng để bảo vệ

khỏi bị vỡ. Những gì bạn chèn xung quanh món hàng đến hộp bọc bên ngòai, trong HTML gọi đó là

padding: đệm, lót . Như vậy, cellpadding= là khỏang cách từ dữ liệu đến các viền xung quanh nó. Các

viền này được xác định trong Thẻ table. Cũng như cellspacing=, cellpadding= cũng được khai báo

trong thẻ Table.

Để thấy được kết quả của Cellpadding, chúng ta dùng đọan code bên dưới:

<table border=1

cellspacing="0">

<tr>

</tr>

<td>Canh giữa và trên

</td>

<td>Canh giữa và

giữa </td>

</tr>

<td>Canh giữa và

dưới </td>

<td>Canh phải và dưới

</td>

</tr>

</table>

Chạy đọan codes này (trong Code Runner), chúng ta có bảng sau:

Canh giữa Canh biên phải

Canh giữa và trên Canh giữa và giữa

Canh giữa và dưới Canh phải và dưới

Bây giờ, chèn thêm Cellpadding=20 vào Thẻ Table:

Thay thế đọan codes này cho đọan khai báo Table ở trên ví dụ trên và chạy lại (trong Code Runner), ta

có kết quả như sau:

Canh giữa Canh biên phải

Canh giữa và trên Canh giữa và giữa

Canh giữa và dưới Canh phải và dưới

Rõ ràng, dữ liệu trong ô đã được đệm 20pixels cho trái, phải, trên dưới, khiến cho độ cao của ô được nới

ra. Còn hai biên trái phải thì dữ liệu được đẩy thụt vào.

Tuy nhiên, khi dùng Cellpadding thì phần đệm sẽ được chèn vào 4 phía: trên, trái, dưới, phải. Và bạn

không thích như vậy. Bạn chỉ thích có thể điều khiển khỏang cách cho từng phía. Cascading Style She et

(CSS) sẽ giúp bạn làm điều này với thuộc tính padding-top, padding-left, padding-bottom, paddingright; Đây là một ví dụ Inline Embeded CSS trong một <TD>.

<TD>Dữ liệu trong ô </TD>

Hoặc viết gọn:

<TD">Dử liệu trong

ô</TD>

Các bài học về CSS sẽ trình bày chi tiết về định dạng Layout một trang Web.

IV-Sử dụng giá trị phần trăm cho bảng:

Lấy một đọan codes mẫu ở trên và thay đổi các giá trị Pixel cho Width= và Height= bằng số phần

trăm. Chẳng hạn, bạn muốn trang Web của bạn rộng bằng 70% của màn hình 1024x768 và cao 100%,

bạn khai báo như sau:

<table>

Bạn cũng có thể vừa dùng Pixels vừa dùng phần trăm cho độ rộng và chiều cao của bảng. Xem đọan

codes bên dưới:

<table border=1

cellspacing="0">

<tr>

</tr>

<td>Canh giữa và trên

</td>

<td>Canh giữa và

giữa </td>

</tr>

<td>Canh giữa và

dưới </td>

<td>Canh phải và dưới

</td>

</tr>

</table>

Đến đây về cơ bản, bạn đã nắm được cách sử dụng bảng. Với ham muốn nắm vững, nắm chắc, nắm kỹ

kiến thức đã học, bạn nên thực hành nhiều và thật nhiều lần. Bạn cũng có thể hình dung đến việc sắp xếp

các nội dung của trang Web thành một trật tự bằng cách sử dụng bảng. Trước khi bắt đầu Layout một

bảng hòan chỉnh, chúng ta còn một phần quan trọng trong thiết kế bảng phức tạp đó là Colspan và

Rowspan. Sẽ được đề cập trong bài 15.

Những thuộc tính như name=, id= không được đề cập trong đây vì chúng dùng cho các Scripting

Language. Cũng không mấy khó để dùng khi bạn đã nhuần nhuyễn HTML rồi đi tiếp qua CSS,

Javascript trước khi vào Server-Side Scripting và Advanced Programming.

BÀI 14 : Tạo biểu bảng trong HTML-Phần 4

Thuộc tính dùng để mở rộng một ô dữ liệu trong một cột bằng với số ô dữ liệu trong cột

đó. Thuộc tính ROWSPAN ="" dùng để mở rộng 1 ô dữ liệu trong một hàng bằng với với số hàng chứa

các ô còn lại.

Hãy xem bảng bên dưới-Ví Dụ 1:

BUSINESS 2ND QUARTER SALES SUMMARY.

Click here

to see

detailed

sales.

Month APR MAY JUN

Gross Sales 000000 000000 000000

Expenses 000000 000000 000000

Total 00000 00000 00000

METHOD OF PAYMENT.

Click here

to see

Monthly

transaction

statement.

Visa 000000 000000 000000

MasterCard 000000 000000 000000

Others 000000 000000 000000

Total 000000 000000 000000

Click here

to see

checks

deposited.

Personal

check

000000 000000 000000

Business

check

000000 000000 000000

Others 00000 00000 00000

Total 00000 00000 00000

EMPLOYEE PAYROLL.

Click here

for issued

checks.

EMP 1 000000 000000 000000

EMP 2 000000 000000 000000

EMP 3 000000 000000 000000

Total 000000 000000 000000

TAXABLE INTEREST

Net business Interest. 000000 000000 000000

Và đây là một ví dụ khác- Ví dụ 2:

BẢNG GIÁ THÁNG 3 NĂM 2006

Tên thiết bị Số lượng Giá Thành tiền

000115 Dĩa cứng 10 $120 $1200

000116 RAM 15 $50 $750

000117 CPU 5 $180 $900

Total $2850

I-Thuộc tính Colspan:

Thuộc tính này được đặt trong Thẻ <TD>.

1-Cú pháp:

<TD>

Trong đó:

 Colspan= :Khai báo sẽ mở rộng bao nhiêu cột so với số ô còn lại trong cột đó undefinedgiá trị là

số).

Ví dụ: Chúng ta hãy xem ví dụ số 2:

Trong ví dụ 2 chúng ta dùng một bảng có độ rộng =500pixels,,,

cellpadding="3",. Chúng ta viết như sau:

Bắt đầu một hàng, viết:

<TR>

Đến đây, như ví dụ minh họa 2, bạn thấy rằng hàng này chỉ chứa một ô dữ liệu, BẢNG GIÁ THÁNG 3

NĂM 2006. Như vậy có thể xem đây là một cột. Đếm số cột trong các hàng còn lại và lấy hàng có số cột

nhiều nhất. Trong ví dụ này là 5 cột. Như vậy để ô này trải rộng bằng 5 cột so với hàng đó, ta viết như

<TD colspan=5 align=center>BẢNG GIÁ THÁNG 3 NĂM 2006</td>

Đóng hàng này, viết:

</TR>

Như vậy, chúng ta có đọan Codes cho hàng đầu tiên như sau:

<TR>

<TD colspan=5 align=center>BẢNG GIÁ THÁNG 3 NĂM 2006</td>

</TR>

Trong hàng thứ 2, cột đầu tiên Tên thiết bị có độ rộng bằng 2 ô dữ liệu ở hàng dưới là ô mã số và thiết

bị(cùng trong một cột). Do đó chúng ta viết, bắt đầu một hàng mới:

<TR>

Bắt đầu một ô, ô này mở rộng bằng 2 ô nhỏ trong cùng một cột so với hàng dưới:

<TD colspan=2 align=center><b>Tên thiết bị</B></td>

Chúng ta viết tiếp các ô còn lại và đóng hàng này:

<td align=center><b>Số lượng</b></td>

<td align=center><b>Thành tiền</b></td>

</tr>

Đến đây chúng ta đã làm xong được 2 hàng trong bảng

<TR>

<TD colspan=5 align=center> BẢNG GIÁ THÁNG 3 NĂM 2006</td>

</TR>

<TR>

<TD colspan=2 align=center><b>Tên thiết bị</B></td>

<TD align=center><b>Số lượng</b></td>

<TD align=center><b>Thành tiền</b></td>

</tr>

Chúng ta tiếp tục với hàng thứ 3, 4, 5: Vì các hàng này có tổng số cột là 5 nên không có ô nào mở rộng.

Do đó chúng ta không dùng Colspan mà viết như sau:

Hàng thứ 3:

<TR>

</TR>

Viết tương tự cho hàng thứ 4 và 5 nhưng thay thế nội dung dữ liệu trong Ô.

Hàng thứ 6: Total

Hàng này có 2 ô dữ liệu. Ô đầu tiên là Total có độ rộng bằng 4 ô hàng trên, canh bên phải. Do vậy, ô

này phải dùng Colspan=4. Ô thứ 2 bằng với số ô trong cột - chỉ có 1 ô, nên không dùng Colspan. Và ta

viết hàng này như sau:

<TR>

<TD colspan=4 align=right>Total</TD>

</TR>

Cuối cùng để đóng bảng, ta dùng thẻ </TABLE>

Và đây là Codes cho bảng của ví dụ 2:

<TABLE align=center cellspacing = "2"

border=1>

<tr>

<td COLSPAN=5 align=center><b>BẢNG

GIÁ THÁNG 3 NĂM 2006</B></td>

</TR>

<tr>

<td COLSPAN=2 align=center><b>Tên thiết bị</b></td>

<td align=center><b>Số lượng</b></td>

<td align=center><b>Thành tiền</b></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td COLSPAN=4 align=right>Total</td>

</tr>

</TABLE>

II-Thuộc tính Rowspan:

Thuộc tính Rowspan ="" dùng để mở rộng 1 ô dữ liệu trong một hàng theo chiều cao bằng với với số

hàng chứa các ô còn lại.

Thuộc tính này được đặt trong Thẻ <TD>.

Để nắm được cách dùng Rowspan=, chúng ta xem lại ví dụ 1. Ví dụ 1 là một kết hợp sử dụng

COLSPAN và ROWSPAN. Bảng này sử dụng các thuộc tính và giá trị như bên dưới:

<TR>

Hãy để ý hàng nhiều ô dữ liệu nhất trong bảng VD 1 là 5 ô, tức bảng này có số cột cao nhất là 5 cột.

hàng đầu tiên của bảng:

BUSINESS 2ND QUARTER SALES SUMMARY là hàng chỉ có một cột dữ liệu. Và để cột này trải

bằng 5 ô dữ liệu trong hàng có số ô dữ liệu nhiều nhất ta viết:

<TD ALIGN=CENTER COLSPAN=5>BUSINESS 2ND QUARTER SALES

SUMMARY.</TD>

</TR>

Như vậy chúng ta có được hàng đầu tiên.

Trong hàng thứ 2, ô dữ liệu đầu tiên ( Click here to see detailed sales.) có chiều cao bằng 4 hàng gồm

chứa ô Month, Gross Sales, Expenses, Total và các ô kế tiếp qua phải...

Để mở rộng ô này có chiều cao bằng 4 hàng ta viết như sau:

<TR>

<TD ALIGN=CENTER ROWSPAN=4> Click here to see detailed sales.</TD>

Chúng ta tiếp tục viết cho 4 ô còn lại trong hàng này:

<TD ALIGN=CENTER><i>Month</i></TD>

</TR>

Cho 3 hàng còn lại (Mỗi hàng chỉ có 4 cột) chúng ta viết như sau:

<TR>

<TD ALIGN=CENTER><b>Gross Sales</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Expenses</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER ><b>Total</b></TD>

</TR>

Như vậy đến chúng ta được bảng với hàng sử dụng ROWSPAN:

<TR>

<TD ALIGN=CENTER COLSPAN=5>BUSINESS 2ND QUARTER SALES

SUMMARY.</TD>

</TR>

<TR>

<TD ALIGN=CENTER ROWSPAN=4> Click here to see detailed sales.</TD>

<TD ALIGN=CENTER><i>Month</i></TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Gross Sales</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Expenses</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER ><b>Total</b></TD>

</TR>

Và nếu đến đây bạn đóng bảng bằng cách thêm vào </TABLE> thì bạn có được bảng như minh họa

dưới:

BUSINESS 2ND QUARTER SALES SUMMARY.

Click here to

see detailed

sales.

Month APR MAY JUN

Gross

Sales

000000 000000 000000

Expenses 000000 000000 000000

Total 00000 00000 00000

Nhưng chúng ta phải hòan tất bảng VD 1, vì vậy bạn chưa thể đóng bảng tại đây mà sử dụng cấu trúc

viết trong hàng:

<TD ALIGN=CENTER ROWSPAN=4> Click here to see detailed sales.</TD>

để viết cho hàng METHOD OF PAYEMENT , EMPLOYEE PAYROLL và hàng TAXABLE

INTEREST.

Hàng cuối cùng dưới TAXABLE INTEREST, chúng ta dùng COLSPAN để mở rộng cột Net business

Interest.

Cấu trúc như sau:

<TR>

<TD ALIGN=CENTER COLSPAN=2><i>Net business Interest.</i></TD>

</TR>

Xong, chúng ta đóng bảng này bằng thẻ </TABLE>

Và đây là Source Codes cho bảng ví dụ 1:

<TABLE ALIGN=CENTER width=500 border=1 CELLSPACING=1

CELLPADDING=1>

<TR>

BUSINESS 2ND QUARTER SALES SUMMARY.</TD>

</TR>

<TR>

<TD ALIGN=CENTER ROWSPAN=4><i>Click

here to see detailed sales.</i></TD>

<TD ALIGN=CENTER><i>Month</i></TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Gross

Sales</b></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER

bgcolor="#FFFFFF"><b>Expenses</b></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER ><b>Total</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER COLSPAN=5><FONT

COLOR="WHITE">METHOD OF PAYMENT.</FONT></TD>

</TR>

<TR>

<TD ALIGN=CENTER ROWSPAN=5><i>Click

here to see Monthly TRansaction statement.</i></TD>

</TR>

<TR>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>MasterCard</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Others</b></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Total</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER ROWSPAN=4><i>Click

here to see checks deposited.</TD>

<TD ALIGN=CENTER><b>Personal

check</b></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Business

check</b></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Others</b></TD>

</TR>

<TR>

<TD ALIGN=CENTER><b>Total</b></TD>

<TD ALIGN=CENTER WIDTH=100>00000</TD><

</TR>

<TR>

<TD ALIGN=CENTER COLSPAN=5><font

color="white">EMPLOYEE PAYROLL.</FONT>

</TR>

<TR>

<TD ALIGN=CENTER ROWSPAN=4><i>Click

here for issued checks.</i></TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

<TD ALIGN=CENTER

WIDTH=100>000000</TD>

</TR>

<TR>

<TD ALIGN=CENTER ><b>Total</b></TD>

</TR>

<TD ALIGN=CENTER COLSPAN=5>TAXABLE

INTEREST</TD>

</TR>

<TR>

<TD ALIGN=CENTER COLSPAN=2><i>Net

business Interest.</i></TD>

</TR>

</TABLE>

Phần cuối cùng của các bài học về sử dụng bảng là một minh họa sử dụng bảng để Layout một trang

WEB.

BÀI 15 : Sử dụng Bảng Layout một trang Web

Qua bài 12,13,14,15, bạn đã nắm phần lớn các yêu cầu để tạo một bảng và thuộc tính để định dạng bảng.

Tuy nhiên, HTML vẫn chưa cho bạn đầy đủ những gì bạn muốn. Để thật sự định dạng bảng theo ý

muốn, bạn cần biết cách dùng Ngôn ngữ CSS...

Cascading Style Sheet cũng là một ngôn ngữ lập trình Web bởi vì nó cũng có những cú pháp riêng. Phần

minh họa dưới đây chủ yếu giúp bạn về cấu trúc, còn về phong cách, cần phải có CSS hỗ trợ (Sẽ đề cập

đầy đủ trong giáo trình CSS) và khả năng sáng tạo và thẩm mỹ của bạn.

Dưới đây là một bảng minh họa cấu trúc của trang Web theo Phong cách cân đối-Symmetrical

style:(truyền thống)

Banner 1 Banner 2 Banner 3

Đặt Script giờ đăng nhập: Đặt Script ngày tháng năm

Trang Chính

Giới thiệu

Tinhọc

Âm nhạc

Tiếng Anh

Kiến Thức

Welcome to My First

HTML Page!

Đón chào bạn đến với

TRang Web đầu tiên của

tôi!

Truyện dài

Truyện ngắn

Truyện cười

Thơ

Liên lạc

Đăng ký

Và đây là Source Codes để tạo bảng trên:

<html>

<head>

<title>My First Page</title>

</head>

<BODY>

<TABLE

cellpadding="0">

<TR>

<TD>Banner 1 </TD>

<TD>Banner 2 </TD>

<TD>Banner 3 </TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD><font

size="1"><b>Đặt Script giờ đăng nhập:</b></TD>

<TD><font

size="1"><b>Đặt Script ngày tháng năm</b></TD>

</TR>

</TABLE>

<TABLE

cellpadding="0">

<TR>

<TD>

<TABLE

bordercolor="silver">

<TR>

<TD>Trang Chính</TD>

</TR>

<TR>

<TD>Giới thiệu</TD>

</TR>

<TR>

<TD>Tinhọc</TD>

</TR>

<TR>

<TR>

<TD>Tiếng Anh</TD>

</TR>

<TR>

</TR>

</TABLE>

</TD>

<TD

height="100%">

<br>

Welcome to My First HTML Page!<BR>

Đón chào bạn đến với TRang Web đầu tiên của tôi!

</CENTER>

</TD>

<TABLE

bordercolor="#FFFFFF">

<TR>

<TD>Truyện dài</TD>

</TR>

<TR>

<TD>Truyện ngắn</TD>

</TR>

<TR>

<TD>Truyện cười</TD>

</TR>

<TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<TABLE

cellpadding=0>

<TR>

</TR>

</TABLE>

</body>

</html>

Đến đây, bạn đã nắm được cơ bản cách dùng bảng để định dạng một trang Web. Bạn có thể thay đổi độ

rộng của bảng =100%. Bạn cũng có thể thêm nhiều thành phần khác để trang thật sự theo ý muốn. Bạn

thực hành thật nhiều lần để nắm cách sử dụng. Sau đó bạn chạy đọan Code mới trong trình duyệt, bạn

thấy có một khỏang cách giữa các thực đơn của trình duyệt WEB (IE chẳng hạn) và trang web của bạn.

Lý do là chúng ta chưa xác định khỏang cách của trang với biên trình duyệt. Trong bài 17, chúng ta sẽ

học định dạng cho thành phần BODY(phần 2) để xác định khỏang cách này. Bài 18, chúng ta học các

liên kết đến các tập tin html khác hoặc trang Web khác và kích họat chương trình gửi mail. Đây chỉ là

những phần đơn giản của HTML. Ngòai ra, sử dụng Iframe, Frame và tạo Form trong HTML là những

phần quan trọng mà chúng ta cũng sẽ lần lượt khám phá.

HTML Tags

Bài này giới thiệu một số HTML Tags và các thuộc tính của chúng .

TAGS ATTRIBUTES DESCRIPTION: MÔ TẢ

<a></a> Để tạo liên kết hoặc chỉ mục liên kết(anchor)

href=

Chỉ định đến một địa chỉ URL hoặc một chỉ mục

liên kết(anchor) hoặc địa chỉ e-mail...

name=

Đánh dấu một vùng mà liên kết chỉ mục sẽ nhảy

đến (thường là trong 1 trang).

target=

Chỉ định 1 cửa sổ hoặc một khung để nội dung

trang liên kết sẽ hiển thị. (sử dụng nhiều với

frameset)

accesskey= Thêm phím bấm nhanh cho liên kết đến chỉ mục.

event Dùng để kích 1 script.

tabindex

Xác định thứ tự phím tab đi qua trong liên kết

hoặc thành phần của form.

<abbr></abbr> Giải thích nghĩa của các ký tự viết tắt.

title= Nội dung giải thích.

Giải thích nghĩa của các ký tự viết tắt bắt đầu

bằng chữ đầu: Ví dụ NATO, WHO, WTO.

title= Nội dung giải thích.

Định dạng địa chỉ mail của người thiết kế Web,

thường cho chữ nghiêng, xuống dòng tự động.

<applet></applet> Chèn chương trình Java Applets.

code Xác định địa chỉ URL của mã applets

width, height Xác định chiều rộng và cao của Applets.

area Xác định tọa độ của bản đồ ảnh..

accesskey=

Thêm phím bấm nhanh đến một vùng riêng biệt

trên bản đồ.

alt= Cung cấp thông tin về một vùng.

coords= Cung cấp tọa độ của một vùng trên bản đồ.

href=

Link đến một địa chỉ URL từ một vùng trong bản

đồ ảnh.

nohref=

Đánh dấu một vùng trên bản đồ không có liên

kết đến địa chỉ URL

shape=

Xác định hình dạng của một vùng trên bản đồ

(circle, rect và poly).

target=

xác định cửa sổ hay khung mà file liên kết sẽ

hiển thị trong đó.

<b></b> Làm chữ đậm lên.

base Xác định địa chỉ URL liên quan trọng frame.

href=

Xác định địa chỉ URL sẽ được dùng để truy cập

các địa chỉ URL liên quan.

target= Xác định đích cho các liên kết trên trang hiện tại.

basefont Xác định chuẩn font cố định cho chữ.

color= Xác định màu cố định cho chữ.

face= Xác định font cố định cho chữ.

size= Xác định kích thước cố định cho chữ.

bgsound Lồng nhạc nền vào trang.

loop= Xác định số lần mà bản nhạc sẽ lặp lại.

src= Xác định địa chỉ nguồn của bản nhạc.

<big></big> Làm cho chữ lớn hơn so với chữ xung quanh.

<blink></blink> Làm cho chữ ẩn hiện, nhấp nháy.

<blockquote></blockquote

Tạo một đọan trích dẫn thụt lề. Khỏang cách thụt

lề tùy vào số tag mở/đóng blockquote.

cite= Ghi địa chỉ nguồn trích dẫn (nếu có).

Khai báo phần nội dung chính(phần thân) của

trang web. Những gì nằm giữa tag mở/đóng body

sẽ hiển thị trên trình duyệt.

alink=

Xác định màu của một link đang tham khảo đến,

đang họat động(active link).

link=

Xác định màu của một link chưa được kích

họat.(new link).

vlink=

Xác định màu của một link đã được viếng thăm

(visited link).

background= Xác định ảnh nền cho tòan trang.

bgcolor= Xác định màu nền cho tòan trang.

leftmargin=

Xác định lề trái (là khỏang cách từ biên trái màn

hình đến lề trái của trang web)

toptmargin=

Xác định lề trên (là khỏang cách từ biên trên

màn hình đến lề trên của trang web).

text= Xác định màu của chữ.

br Dùng để xuống hàng (break a line)

clear Ngừng việc xuống hàng tự động.

button

Dùng để tạo nút bấm (button). Được sử dụng

nhiều trong Form-rất quan trọng.

accesskey= Thêm phím bấm nhanh cho nút.

disabled

Làm cho button có màu xám cho đến khi một sự

kiện khác xuất hiện .

event Liên kết button với một script. (Event handler)

name=

Xác định tên của button để tham khảo sự kiện

trong button (trong một hàm javascript).

type=

Dùng button như một thành phần của Form.

Thường trong input type=button value=

value=

Giá trị hiển thị của button. Ví dụ: <input

type=button name=getcode>

caption Dùng để tạo phụ đề (chú thích) cho bảng

align=

Dùng để xác định vị trí của caption trên hay dưới

bảng.

<center></center> Dùng canh giữa chữ, ảnh và các thành phần khác

Đánh dấu chữ là trích dẫn. Làm chữ nghiêng.

Nếu là giá trị, cite dùng để chỉ đường link đến

nguồn trích dẫn. Xem <blockquote>

<code</code Đánh dấu chữ là mã máy tính.

col

Kết hợp các cột trong một bảng thành một nhóm

không có cấu trúc

align= Xác định sự ngay hàng của cột trong nhóm cột.

valign=

Xác định sự ngay hàng(theo chiều dọc) của cột

trong nhóm cột

span= Xác định số cột trong một nhóm cột.

width= Xác định độ rộng của cột.

colgroup

Để kết hợp các cột trong một bảng thành một

bảng có cấu trúc

align= Xác định sự ngay hàng của cột trong nhóm cột..

valign=

Xác định sự ngay hàng(theo chiều dọc) của cột

trong nhóm cột

span= Xác định số cột trong một nhóm cột.

width=

Xác định độ rộng mặc định cho các thành phần

col đi kèm..

dd Đánh dấu một định nghĩa trong danh sách

<<del><del>

Hiển thị chữ với một đường gạch giữa như xóa.

Như strike hoặc s.

Chia trang thành các vùng hợp lý. Dùng nhiều

trong DHTML và CSS.

align= Canh biên trái, phải, giữa một vùng được chia .

class=

Cấp một tên cho mỗi class của các vùng phân

chia.

id=

Cấp 1 tên duy nhất cho một vùng phân chia riêng

biệt.

dl Tạo một danh sách định nghĩa.

Đánh dấu một thuật ngữ sẽ được định nghĩa

trong danh sách.

<em></em> Làm cho chữ nghiêng.Tương tự i.

embed Chèn file phim, nhạc và trang web.

align= Canh lề bộ điều khiển.

autostart=

Khởi động file nhạc, hay phim tự động khi được

nạp vào. Giá trị: True hoặc False

controls=

Dùng để hiển thị các nút điều khiển trên bộ điều

khiển.

loop= Xác định số lần mà file phim hay nhạc sẽ lặp.

src=

Xác định nguồn (địa chỉ URL) của file phim hay

nhạc.

width=

height=

Xác định kích thước của bộ điều khiển.

fieldset

Nhóm một tập hợp các thành phần của form lại

với nhau.

font

Dùng để thay đổi kích thước chữ, font chữ và

màu chữ.

color= Xác định màu chữ.

face Xác định lọai font chữ.

size Xác định kích thước chữ.

Dùng để tạo một đơn với các ô trống để người

dùng điền vào nội dung cần thiết.

action=

Cung cấp địa chỉ URL của file xử lý đơn. (CGI

Scripts chẳng hạn)

enctype Để upload các tập tin theo định dạng cho phép.

method= Xác định phương pháp mà đơn sẽ được xử lý.

frame Để tạo khung trong tập hợp khung.

border= Xác định độ dày của của viền quanh khung.

bordercolor= Xác định màu của viền.

frameborder= Xác định hiển thị hay giấu viền quanh khung.

framespacing= Thêm khỏang trống vào giữa các khung.

longdesc= Liên kết đến một tài liệu có nhiều thông tin.

name=

Đặt tên cho một khung để có thể dùng làm

target cho file trong liên kết.

noresize

Không cho phép người dùng thay đổi kích thước

của khung.

marginwidth=

marginheight=

Xác định lề trái phải, trên dưới của khung.

scrolling= Để hiển thị hay giấu thanh cuộn của khung.

src=

Xác định địa chỉ URL của file đầu tiên hiển thị

trong khung.

target=

Xác định khung (với tên) nào mà file trong một

liên kết sẽ mở vào đó.

title= Chỉ định mục đích của khung.

<frameset></frameset> Xác định một tập hợp khung .

border= Định độ dày của viền quanh khung.

bordercolor= Định màu cho viền khung.

cols= Định số khung và kích thước khung.

frameborder= Để hiển thị hay giấu viền khung.

framespacing= Để thêm khỏang cách giữa các khung.

rows= Để xác định số khung và kích thước các khung.

h1,h2,h3,h4,h5,h6 Dùng để tạo tiêu đề cho văn bản

align= Canh biên tiêu đề

Bắt đầu và kết thúc tạo phần đầu của trang là

nơi chứa title, meta, link, script tag.

<hr> Dùng để tạo đường kẽ ngang.

align= Canh biên cho đường kẽ.

noshade Hiển thị đường kẽ không có bóng mờ.

size= Xác định độ lớn của đường kẽ.

width= Xác định độ dài của đường kẽ.

color= Xác định màu của đường kẽ.

Bắt đầu và kết thúc một trang tài liệu viết bằng

HTML.

<i> Hiển thị chữ nghiêng.

align= Canh biên Inline frame.

frameborder= Hiển thị hoặc giấu viền.

height= Xác định chiều cao của iframe.

width=, height= Xác định kích thước của Iframe.

name=

Đặt tên của Iframe để dùng cho thuộc tính

target.

scrolling= Hiển thị hoặc giấu thanh cuộn

src= Xách định địa chỉ URL của trang đầu tiên.

img Chèn ảnh vào trang HTML.

align= Canh biên cho ảnh.

alt=

Hiển thị dòng văn bản thay thế trường hợp ảnh

không có.

border= Xác định độ dày của viền, nếu có.

hspace,vspace

Xác định khỏang cách trái phải, trên dưới của

ảnh.

src= Xác định địa chỉ nguồn của ảnh.

usemap=

Xác định bản đồ ảnh sẽ được dùng với ảnh được

tham chiếu.

width=, height=

Xác định kích thước của ảnh, giúp ảnh tải nhanh

hơn.

input Tạo các thành phần cho Form.

accesskey= Thêm phím bấm nhanh cho thành phần.

align= Canh biên cách thành phần.

checked

Đánh dấu một nút radio hoặc hộp check mặc

nhiên.

disabled

Vô hiệu các thành phần của Form cho đến khi

một sự kiện xảy ra.

event handler= Kích một sự kiện như Onclick=, Onchange=.

maxlength=

Xác định số chữ cao nhất có thể nhập vào thành

phần Form.

name=

Tên của thành phần mà dữ liệu sẽ được thu thập

khi tham chiếu.

size= Xác định độ rộng của hộp Text hoặc Password.

src= Xác định nguồn của ảnh đang họat động.

readonly

Chống thay đổi nội dung trong form từ khách

viếng thăm.

tabindex

Xác định thứ tự mà phím Tab sẽ di chuyển qua

các thành phần trong Form.

type= Xác định lọai thành phần của Form.

value= Xác định giá trị của thành.

ins

Đánh dấu chữ chèn vào với gạch dưới-Dùng để

gạch dưới.

TAGS/

ATTRIBUTES

DESCRIPTION: MÔ TẢ

kbd Đánh dấu chữ bàn phím.

label Gán nhãn cho thành phần của Form.

for= Xác định thành phần nào trong form sẽ được label.

layer Định vị thành phần.

legend Gán nhãn cho filedset.

align= Canh biên cho lời giải thích.

li Tạo bảng mục lục-danh sách.

type= Xác định ký tự nào bắt đầu danh sách.

value= Xác định giá trị đầu tiên của mục đầu tiên trong danh sách.

link Tạo bảng mục lục-danh sách.

href= Xác định địa chỉ nguồn của trang CSS.

media= Lưu ý mục đích của trang CSS.

title= Gán nhãn thay thế cho trang CSS.

type= Lưu ý lọai MIME của trang CSS

rel= Xác định trang CSS là chính hay trang thay thế.

map Tạo bản đồ ảnh hướng khách hàng

name= Đặt tên cho bản đồ để tham chiếu sau đó.

marquee Tạo chữu chạy.

behavior Điều khiển việc di chuyển của chữ(scroll, slide,alternate).

direction Điều khiển hướng di chuyển của chữ: trái qua phải hay phải qua trái.

loop Xác định vòng lặp.

scrollamount Xác định khỏang cách giữa các lần lặp.

scrolldelay Xác định khỏang thời gian giữa mỗi lần lặp.

meta Tag dùng để khai báo cho search engine.

content= Thêm thông tin về trang web.

http-equiv

Tạo nhảy đến trang khác, thiết lập ngôn ngữ cho các script, khai báo

encode.

name Khai báo thêm thông tin về trang Web

nobr Chống xuống hàng. Các ký tự sẽ nằm trên cùng 1 hàng.

noframes Cung cấp các thay thế cho frames.

noscript Cung cấp các thay thế cho script.

object Nhúng các đối tượng vào trang Web.

align= Canh biên đối tượng.

border= Tạo hoặc giấu viền quanh đối tượng.

classid= Xác định lọai đối tượng được nhúng

codebase Xác định địa chỉ URL cơ sở của đối tượng nguồn.

data Xác định nguồn của tập tin phim được nhúng.

hspace,

vspace

Xác định khỏang trống xung quanh đối tượng.

name Xác định tên của đối tượng.

standby Hiển thị đọan tin khi đối tượng đang đựơc tải.

type Lưu ý đối tượng là lọai MIME.

width,height Xác định kích thước của hộp đối tượng.

ol Tạo danh sáchc 1o thứ tự

type= Xác định ký tự bắt đầu trong mỗi mục.

start Xác định giá trị đầu tiên của mục đầu tiên.

optgroup Chia thực đơn thành thực đơn con

disabled Tắt khả năng lưa chọn thực đơn cho đến khi một sự kiện xuất hiện.

label Xác định cách chọn lựa hiển thị trên thực đơn.

option Tạo thực đơn các chọn lựa kiểu drop-down trong đơn (Form).

disabled Tắt khả năng chọn cho đến khi một sự kiện xuất hiện.

label Xác định cách chọn lựa hiển thị trên thực đơn.

name Đặt tên cho chọn lựa.

selected Xác định một chọn lựa được chọn mặc định.

value Xác định giá trị đầu của chọn lựa trong thực đơn.

P Tạo một đọan văn bản

align Canh biên cho đọan văn bản.

param Thiết lập thuộc tính cho một đối tượng

name= Xác định lọai đối tượng.

value= Thiết lập giá trị của thuộc tính được đặt tên.

pre Hiển thị chữ theo định dạng trước.

q Trích dẫn một đọan tin ngắn.

cite Cung cấp địa chỉ URL của nguồn trích dẫn.

s như strike Hiển thị chữ với một đường gạch giữa nhu xóa. Như strike hoặc del.

samp Hiển thị chữ theo font chữ monospace.

script Chèn các đọan script tự động vào trang.

charset Xác định bộ ký tự mà script được viết.

language Xác định ngôn ngữ mà đọan script viết.

src Tham chiếu vị trí của script.(địa chỉ URL của script).

type Xác định ngôn ngữ để script mà đọan script được viết.

select Tạo một thực đơn trong Form.

disabled Tắt khả năng cho đến khi một sự kiện xuất hiện.

name= Xác định dữ liệu được thu thập bởi thực đơn.

multiple Cho phép người dùng chọn nhiều lựa chọn cùng lúc.

size Xác định số mục sẽ hiển thị trong cửa sổ thực đơn.

small Giảm kích thước chữ so với kích thứơc của chữ xung quanh.

span Tạo phong cách riêng cho chữ với CSS.

class Đặt tên một phong cách riêng để tham chiếu.

Xác định những thành phần riêng biệt của HTML. Id thường được

dùng nhiều trong DHTML.

strike Viết tắt là s. Dùng để hiển thị đường gạch giữa chữ.

strong Dùng để làm đậm chữ (như tag ).

style Dùng để chèn đọan mã CSS vào trang. Xem phần CSS.

media Xác định mục đích của CSS.

type Xác định lọai MIME của CSS.

sub Dùng để hạ thấp chữ. Ví dụ như H2O

sup Dùng để nâng cao chữ. Ví dụ như (a+b)

+2ab+b

table Tạo biểu bảng trong tài liệu HTML.

align= Xác định vị trí của bảng trong trang (trái, phải hoặc giữa).

background

Xác định ảnh làm nền cho bảng.

bgcolor Xác định màu nền cho tòan bảng.

border Xác định độ rộng của khung.

bordercolor Xác định màu cho viền bảng.

bordercolord

ark

Xác định màu đậm hơn cho viền.

bordercolorli

ght

Xác định màu lợt hơn.

cellpadding=

Xác định khỏang cách giữa nội dung của các ô trong bảng với viền

bao quanh.

cellspacing= Xác định khỏang cách giữa các ô trong bảng.

frame Hiển thị viền bên ngòai.

height Xác định độ cao của bảng.

width Xác định độ rộng của bảng.

rules Hiển thị viền ở trong.

tbody Xác định phần body của bảng.

align Canh biên nội dung của body trong bảng.

td; th Tạo các ô hoặc ô tiêu đề riêng biệt trong bảng.

align, valign Canh nội dung trong ô theo chiều ngang hoặc đứng.

bgcolor= Chọn màu cho ô.

background

Chèn ảnh làm nền cho ô.

char Canh nội dung của ô phù hợp với ký tự.

colspan

Mở rộng một theo số cột trong bảng. Ví dụ bảng có 4 cột và có một

dòng chỉ là một cột thì dùng colspan=4 cho dòng đó.

rowspan

Mở rộng một ô hơn một dòng. Ví dụ bên phải của bảng là 5 ô và ô

bên trái có độ cao bằng 5 ô bên phải thì khai báo ô bên trái là

rowspan=5

nowrap Hiển thị nội dung trong ô trên một dòng.

width,

height

Xác định độ rộng và cao của ô.

textarea

Tạo một hộp chứa văn bản. Thường nội dung do người dùng nhập

vào. Sử dụng nhiều với Form.

accesskey Thêm phím nóng cho vùng text.

disabled

Làm chữ có màu xám lợt cho đến khi một sự kiện xuất hiện. Sự kiện

được kích bởi một bộ qủan lý sự kiện như onClick, onkeydown...

name

Xác định tên cho dữ liệu sẽ được tham chiếu trong ô textarea khi xử

lý với chương trình xử lý Form như CGI.

readonly

Khóa nội dung trong ô textarea để chỉ đọc và chép, không xóa hoặc

thay đổi được.

rows, cols Xác định bao nhiêu hàng và cột trong ô văn bản.

width,

height

Xác định độ rộng và cao của ô.

tfoot, thead Xác định tiêu đề trên dưới của bảng.

align, valign Canh tiêu đề của ô.

title

Đặt tên tiêu đề của trang để hiển thị trên browser cũng như cho

search Engine tìm trang.

Tạo hàng trong bảng. Trong một bảng có một hoặc nhiều hàng. Mỗi

một hàng có một hoặc nhiều td (table data) được xem là mỗi ô (cell)

trong bảng. Không giống như chương trình bảng tính có nhiều cột và

hàng. Trong HTML các td trong một hàng sẽ tạo nên cột.

align, valign Canh nội dung trong hàng theo chiều ngang hoặc đứng.

bgcolor Xác định màu nền cho hàng

background Xác định ảnh nền cho hàng.

tt Hiển thị chữ monospace.

u Hiển thị chữ gạch dưới (underline).

ul Tạo một unordered list (danh sách không theo thứ tự).

type

Chọn một ký tự bắt đầu một mục trong danh sách. Ký tự có thể là

Bạn đang đọc truyện trên: AzTruyen.Top

Trước Sau

Tags: