Giáo trình HTML toàn tập
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.
Bạn đang xem trước 20 trang tài liệu Giáo trình HTML toàn tập, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
ị ả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ẻ hoặc để làm điều này.
I-Giữ lại định dạng của văn bản với cặp tags : 1-Cú pháp:
Định dạng trước của văn bản
Trong đó:
:khai báo giữ định dạng mặc nhiên của văn bản.
:Tag đóng khai báo.
Ví dụ:
Vậy để hiển thị được các thành phần của trang HTML như , , 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>
®
©
™
®
©
™
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:
<html> <head> <titlel> ........................................... I-Giữ lại định dạng của văn bản với cặp tags :
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:
Định dạng trước của văn bản
Trong đó:
:khai báo giữ định dạng mặc nhiên của văn bản.
:Tag đóng khai báo.
Xem ví dụ:
Viết:
Hiển thị trên trình duyệt:
Hello
Hi
How are you?
I don't know
I don't care
What is HTML?
Hello
Hi
How are you?
I don't know
I don't care
What is HTML?
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:
Dùng để 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:
Chữ viết tắt
Trong đó:
:Đặ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.
:Tag đóng khai báo sau chữ viết tắt.
Ví dụ:
Viết:
Hiển thị:
HTML
CSS
VB
ASP
HTML
CSS
VB
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 để 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 bgcolor="blue", 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= "", leftmargin="" 1-topmargin: Cú pháp
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
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:
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.
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.
TEST MARGIN 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ý All rights reserved-Copyrighted by Me.
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 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ả:
TEST MARGIN 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ý All rights reserved-Copyrighted by Me.
II-Màu của các liên kết trong HTML: link= "", alink="", vlink=""
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ẻ . 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 Liê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:
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ư sau:
Hoặc bạn có thể dùng giá trị HEX:
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:
Tạo bảng màu 16 màu cơ bản Bảng 16 màu cơ bản White Black Gray Silver Aqua Navy Yellow Green Red Fuchsia Blue Teal Lime Olive Maroon Purple Để 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 = "tên màu.
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 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ẻ đó .
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:
: Mở và đóng một bảng.
: Mở và đóng một hàng.
: 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 () 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 () gồm:
align=
valign
bgcolor=
background=
3-Các thuộc tính của ô () 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ẻ
-Bắt đầu một hàng đầu tiên trong bảng gõ vào:
-Bắt đầu một ô dữ liệu đầu tiên trong bảng gõ vào:
-Nhập vào nội dụng của ô dữ liệu.
-Đóng ô dữ liệu này bằng Thẻ
-Đóng hàng đầu tiên bằng Thẻ:
-Đóng bảng này bằng Thẻ:
Lưu ý: Thẻ 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:
Bang dau tien Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.
Tìm hiểu cách viết của bảng trên:
1-
2-
3-Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.
4-
5-
6-
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:
Bang dau tien Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.
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 border="số pixel"
Bang dau tien Bảng này có viền lớn bằng 5 pixel.
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 bordercolor="màu" vào trong thành phần
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 bordercolor="màu"
Bang dau tien Bảng này có viền = 5px và màu viền là vàng.
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 bgcolor="red" 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 bgcolor="màu"
Bang dau tien Bảng này có viền = 5px và màu viền là vàng, màu nền đỏ.
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 background="taptinanh.gif". (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= "", bgcolor="" 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 , bên trong là , bên trong là .
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 , bên trong là , bên trong là . Để đóng dùng Thẻ , để đóng một hàng chứa , dùng Tag đóng . Và để kết thúc bảng dùng tag đóng .
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 , rồi cũng khai báo dữ liệu bằng các tag mở và đóng .
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.
Bang nhieu hang Đây là hàng 1 chữ màu vàng. Đây là hàng 2 chữ màu đỏ. Đây là hàng 3 chữ màu xanh. Đây là hàng 4 chữ màu lá chanh.
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 .
Trong ví dụ trên, mỗi một hàng mới được khai báo với Thẻ , và đóng bằng . Bạn có thể thêm màu nền vào trong mỗi hàng( bằng cách chèn thuộc tính dùng thuộc tính bgcolor="tên màu" như bạn dùng trong Thẻ hoặc .
Cũng với ví dụ trên, ví dụ dưới đây là thêm màu nền vào .
b-Ví dụ 2: Thêm màu nền vào Thẻ Xem minh họa:
Đoạn mã HTML bên dưới:
Bang nhieu hang Đây là hàng 1 chữ màu vàng, nền màu đen. Đây là hàng 2 chữ màu đỏ, nền màu xanh. Đây là hàng 3 chữ màu xanh, nền màu lá chanh. Đây là hàng 4 chữ màu lá chanh, nền màu nước biển.
Dù bạn đã khai báo màu nền trong Thẻ , bạn vẫn có thể thay đổi màu nền trong thẻ bằng cách thêm thuộc tính bgcolor="tên màu" trong thẻ đó.
Tóm lại, bạn có thể thay đổi màu nền và ảnh nền cho Thẻ , , bằng thuộc tính: bgcolor="tên màu" và background="taptinanh". Lưu ý: Chỉ dùng thuộc tính bgcolor cho thẻ . 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 ( ). 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 với nhiều .
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.
Bang nhieu hang, nhieu cot. Qúy I Tháng giêng Tháng 2 Tháng 3 Tổng thu 000000 000000 000000 Chi 000000 000000 000000 Còn lại 000000 000000 000000
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 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ẻ , đểa đặt tiêu đề cho bảng. Dòng code này phải đặt đầu tiên ngay sau khi thẻ được mở. Trong ví dụ dưới đây dùng tbody align="center" 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.
Bang nhieu hang, nhieu cot. Doanh Thu Qúy I năm 2005 Qúy I Tháng giêng Tháng 2 Tháng 3 Tổng thu 000000 000000 000000 Chi 000000 000000 000000 Còn lại 000000 000000 000000
Ví dụ 2: Che viền trong ngòai của bảng:
Thuộc tính Frame="vị trí" có thể dùng để che viền ngòai của Table: Thuộc tính này được đặt trong Thẻ . 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 Frame="void" trong Ví dụ 3: Che viền trong của bảng:
Thuộc tính rules="vị trí" 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ẻ: đó 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= "", Height="" Cú pháp: hoặc: 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.
Table 1 Ô 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
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 align="center" vào trong thẻ , như sau: 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 Align="right" trong ví dụ trên chúng ta được bảng và nội dung như sau:
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
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 g
Các file đính kèm theo tài liệu này:
HTMLtoantap.doc
