Đế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á.
84 trang |
Chia sẻ: aloso | Lượt xem: 2409 | Lượt tải: 5
Bạn đang xem trước 20 trang tài liệu HTML toàn tập, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
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 MARGINBanner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập:Đặt Script ngày tháng nămTrang ChínhGiới thiệuTinhọcÂm nhạcTiếng AnhKiến ThứcWelcome 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àiTruyện ngắnTruyện cườiThơ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 MARGINBanner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập:Đặt Script ngày tháng nămTrang ChínhGiới thiệuTinhọcÂm nhạcTiếng AnhKiến ThứcWelcome 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àiTruyện ngắnTruyện cườiThơ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ảnBảng 16 màu cơ bảnWhite Black Gray SilverAqua Navy Yellow GreenRed Fuchsia Blue TealLime 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 tienBả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 tienBả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 tienBả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 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 ô:
Table 1Canh 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
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 cellspacing="số pixels" đượ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ẻ 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: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 bgcolor="yellow" 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:
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
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 Sheet (CSS) sẽ giúp bạn làm điều này với thuộc tính padding-top, padding-left, padding-bottom, padding-right; Đây là một ví dụ Inline Embeded CSS trong một .Dữ liệu trong ô Hoặc viết gọn:Dử liệu trong ô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: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:
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
Đế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 COLSPAN="" 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: Colspan="số ô trong cột"Thuộc tính này được đặt trong Thẻ .1-Cú pháp: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, align="center", cellspacing="2", cellpadding="3", border="1". Chúng ta viết như sau: Bắt đầu một hàng, viết:Đế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ư sau: BẢNG GIÁ THÁNG 3 NĂM 2006Đóng hàng này, viết:Như vậy, chúng ta có đọan Codes cho hàng đầu tiên như sau:BẢNG GIÁ THÁNG 3 NĂM 2006Trong 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:
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:
Tên thiết bịChúng ta viết tiếp các ô còn lại và đóng hàng này:Số lượngGiáThành tiềnĐến đây chúng ta đã làm xong được 2 hàng trong bảng
BẢNG GIÁ THÁNG 3 NĂM 2006Tên thiết bịSố lượngGiáThành tiềnChú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:000115Dĩa cứng10$120$1200Viế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:
Total$2850Cuối cùng để đóng bảng, ta dùng thẻ Và đây là Codes cho bảng của ví dụ 2:
BẢNG GIÁ THÁNG 3 NĂM 2006Tên thiết bịSố lượngGiáThành tiền000115Dĩa cứng10$120$1200000116RAM15$50$750000117CPU5$180$900Total$2850
II-Thuộc tính Rowspan: Rowspan="số hàng chứa ô"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ẻ .
Để 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:
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:BUSINESS 2ND QUARTER SALES SUMMARY.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: Click here to see detailed sales.
Chúng ta tiếp tục viết cho 4 ô còn lại trong hàng này:
MonthAPRMAYJUNCho 3 hàng còn lại (Mỗi hàng chỉ có 4 cột) chúng ta viết như sau:Gross Sales000000000000000000Expenses000000000000000000Total000000000000000
Như vậy đến chúng ta được bảng với hàng sử dụng ROWSPAN:
BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales.MonthAPRMAYJUNGross Sales000000000000000000Expenses000000000000000000Total000000000000000
Và nếu đến đây bạn đóng bảng bằng cách thêm vào 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: Click here to see detailed sales.để 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:Net business Interest.000000000000000000
Xong, chúng ta đóng bảng này bằng thẻ
Và đây là Source Codes cho bảng ví dụ 1:
BUSINESS 2ND QUARTER SALES SUMMARY.Click here to see detailed sales.MonthAPRMAYJUNGross Sales000000000000000000Expenses000000000000000000Total000000000000000METHOD OF PAYMENT.Click here to see Monthly TRansaction statement.Visa000000000000000000MasterCard000000000000000000Others000000000000000000Total000000000000000000Click here to see checks deposited.Personal check000000000000000000Business check000000000000000000Others000000000000000Total000000000000000EMPLOYEE PAYROLL.Click here for issued checks.EMP 1000000000000000000EMP 2000000000000000000EMP 3000000000000000000Total000000000000000000TAXABLE INTERESTNet business Interest.000000000000000000
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ý
All rights reserved-Copyrighted by Me.
Và đây là Source Codes để tạo bảng trên:
My First PageBanner 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ứcWelcome 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.
Đế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Ả
Để 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.
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.
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 đó.
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.
Làm cho chữ lớn hơn so với chữ xung quanh.
Làm cho chữ ẩn hiện, nhấp nháy.
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ụ:
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.
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
<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
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.
dt
Đánh dấu một thuật ngữ sẽ được định nghĩa trong danh sách.
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.
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.
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.
Hiển thị chữ nghiêng.
Bắt đầu và kế thúc một Inline frame.
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.
id
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)2=a2+2ab+b2
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.
bordercolordark
Xác định màu đậm hơn cho viền.
bordercolorlight
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.
tr
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à : square (vuông), circle(tròn) và disc (tròn đen).
wbr
Tạo một hàng trống tùy ý.
Các file đính kèm theo tài liệu này:
- HTML toàn tập.doc