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:
|
<html>
<head>
<title>My First Page</title>
</head>
<BODY BGCOLOR="#FFFFFF" text="#000000">
<TABLE align="center" width="600" height="50" border="1" cellpadding="0" cellspacing="0">
<TR>
<TD align="center" width="140" bgcolor="lime">Banner 1 </TD>
<TD align="center" width="320" bgcolor="yellow">Banner 2 </TD>
<TD align="center" width="140" bgcolor="lime">Banner 3 </TD>
</TR>
</TABLE>
<TABLE align="center" WIDTH="600" HEIGHT="20" cellpadding="0" cellspacing="0" border="1">
<TR bgcolor="#FF00FF">
<TD align="center" HEIGHT="20"><font color="blue" size="1"><b>Đặt Script giờ đăng nhập:</b></TD>
<TD align="center" HEIGHT="20"><font color="blue" size="1"><b>Đặt Script ngày tháng năm</b></TD>
</TR>
</TABLE>
<TABLE align="center" width="600" cellspacing="0" cellpadding="0">
<TR>
<TD align="left" WIDTH="140" VALIGN="TOP">
<TABLE cellpadding="2" cellspacing="2" width="140" border="1" bordercolor="silver">
<TR>
<TD BGCOLOR="#FFCC99">Trang Chính</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99">Giới thiệu</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99">Tinhọc</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99">Âm nhạc</TD>
<TR>
<TD BGCOLOR="#FFCC99">Tiếng Anh</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99">Kiến Thức</TD>
</TR>
</TABLE>
</TD>
<TD BGCOLOR="#99FFFF" VAlign="tOP" width="320" height="100%" align="center">
<br>
<br>
<CENTER>
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>
<TD valign=top BGCOLOR="#FFCC99" WIDTH="140">
<TABLE WIDTH="140" border="1" cellspacing="2" cellpadding="2" bordercolor="#FFFFFF">
<TR>
<TD BGCOLOR="#FFCC99" align="right">Truyện dài</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99" align="right">Truyện ngắn</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99" align="right">Truyện cười</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99" align="right">Thơ</TD>
<TR>
<TD BGCOLOR="#FFCC99" align="right">Liên lạc</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC99" align="right">Đăng ký </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE ALIGN="CENTER" Border="1" width="600" height="20" cellpadding=0 bgcolor="#8DCFF4">
<TR>
<TD align="Center"><b>All rights reserved-Copyrighted by Me.</TD>
</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á.
Bạn có thể thực hành bài học này Ở ĐÂY
