- Thực hành tạo web đơn giản bằng HTML. - Học sinh tham khảo thêm các file đính kèm (gồm bài tập có hướng dẫn)
THIẾT KẾ MỘT TRANG WEB BẰNG HTML
1. Thay đổi nền của trang Web
Đoạn mã sau để đăt màu nền màu xanh:
<BODY BGCOLOR="#00FFFF">
Chao cac ban !
</BODY>
Ta cũng có thể dùng một ảnh làm nền cho trang Web. Sau đây là một ví dụ thay BGCOLOR="#00FFFF":
<BODY BACKGROUND="swirlies.gif">
Chao cac ban !
</BODY>
2. Định dạng văn bản
a Xuống dòng, phân đoạn:
<BODY BGCOLOR="#CCFFDD">
Chao cac ban !
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Tag <BR> chỉ đứng một mình cuối dòng chứ không có tag kết thúc </BR>.
Muốn phân đoạn phải báo cho browser biết bằng cách bọc mỗi đoạn văn trong các tags <P></P> (viết tắt của chữ Paragraph) như sau:
<BODY BGCOLOR="#CCFFDD">
<P>Chao cac ban !</P>
<P>Chuc mung cac ban den voi trang Web cua toi !</P>
</BODY>
Vẽ thêm một đường ngang ngăn cách hai đoạn văn với tag <HR> như sau (HR là chữ viết tắt của Horizontal Ruler):
tag <HR> chỉ đứng một mình không có tag kết thúc tag </HR>.
b. Căn chỉnh dòng:
tag <DIV></DIV> với attribute ALIGN="RIGHT" hay ALIGN="CENTER" (DIV là chữ viết tắt của Division, tức là một phần):
<BODY BGCOLOR="#CCFFDD">
<DIV ALIGN="RIGHT">
<P>Chao cac ban !</P>
</DIV>
<HR>
<DIV ALIGN="CENTER">
<P>Chuc mung cac ban den voi trang Web cua toi !</P>
</DIV>
</BODY>
c. Sắp xếp nội dung:
Dùng các tags <UL></UL> (Unordered List, danh sách không thứ tự) hay <OL></OL> (Ordered List, danh sách có thứ tự) như trong ví dụ sau:
<BODY BGCOLOR="#CCFFDD">
<DIV ALIGN="RIGHT">
<P>
<UL>
<LI>Chao cac ban !</LI>
<LI>Hello !</LI>
</UL>
</P>
</DIV>
<HR>
<DIV ALIGN="CENTER">
<P>
<OL>
<LI>Chuc mung cac ban den voi trang Web cua toi !</LI>
<LI>Welcome to my Website !</LI>
</OL>
</P>
</DIV>
</BODY>
Trong một danh sách như trên thì mỗi đoạn hay yếu tố phải được bao bọc giữa các tags <LI></LI> (viết tắt của List Item, là yếu tố của danh sách).
Cách thức các tags được lồng vào nhau đều có ý nghĩa rõ ràng:
- <UL></UL> được lồng vào trong <P></P> vì List của chúng ta nằm trong một Paragraph.
- <P></P> lại được lồng vào trong <DIV ALIGN="RIGHT"></DIV> vì chúng ta muốn ép cả Paragraph này sang phải.
3. Thay đổi kiểu chữ
Dùng tag <BASEFONT>
<BODY BGCOLOR="#FFFFCC">
<BASEFONT FACE="ARIAL">
Chao cac ban !<BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Chúng ta đã dùng tag <BASEFONT> với attribute là FACE="ARIAL" để định loại font là Arial. Tag <BASEFONT> chỉ đứng một mình chứ không có tag kết thúc.
<BODY BGCOLOR="#FFFFCC">
<BASEFONT FACE="ARIAL" SIZE="4">
Chao cac ban !<BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Trong <BASEFONT> còn có attribute COLOR="#nnnnnn", trong đó #nnnnnn là mã số màu, dùng để định màu chữ trong trang Web.
<BODY BGCOLOR="#FFFFCC">
<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900">
Chao cac ban !<BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Tag <BASEFONT> quy định kiểu chữ dùng trong cả trang Web. Tuy nhiên, trong từng câu từng đoạn ta vẫn có thể thay đổi kiểu chữ được. Muốn vậy, hãy dùng tag <FONT></FONT> để bao câu hay đoạn văn ấy lại. Ví dụ:
<BODY BGCOLOR="#FFFFCC" >
<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900">
<FONT FACE="COURIER NEW">Chao cac ban !</FONT><BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Font chữ trong câu thứ nhất đã được thay đổi từ Arial thành Courier New, nhưng phần còn lại của trang Web vẫn dùng font Arial, là font quy định bởi <BASEFONT>.
Do không định cỡ chữ trong FONT, nên browser dùng giá trị quy định trong <BASEFONT> là 4. Nếu dùng attribute SIZE="+1" thì cỡ chữ được tăng thêm một mức so với cỡ chữ quy định trong <BASEFONT>, tức là bằng 5.
<BODY BGCOLOR="#FFFFCC" >
<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900">
<FONT FACE="COURIER NEW" SIZE="+1">Chao cac ban !</FONT><BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Còn nếu bạn viết SIZE="-2" thì cỡ chữ được giảm đi hai mức so với cỡ chữ trong <BASEFONT>. Cách xác định cỡ chữ như vậy gọi là tương đối. Còn cách định cỡ chữ kiểu như SIZE="3" trong phần đầu được gọi là tuyệt đối. Với tag FONT bạn muốn định cỡ chữ bằng cách nào cũng được. Cần nhớ là tương đối thì có dấu + hay -, còn tuyệt đối thì không có dấu.
Ta cũng có thể định màu chữ trong FONT với attribute COLOR="#nnnnnn".
<BODY BGCOLOR="#FFFFCC" >
<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900">
<FONT FACE="COURIER NEW" SIZE="+1" COLOR="#FF9900">Chao cac ban !</FONT><BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>
Có thể viết chữ nghiêng (Italic), chữ in đậm (Bold) hay gạch dưới (Underlined) với các tags <I></I>, <B></B> và <U></U>.
<BODY BGCOLOR="#FFFFCC">
<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900">
<FONT FACE="COURIER NEW" SIZE="+1" COLOR="#FF9900"><B>Chao cac ban !</B></FONT><BR>
<U>Chuc mung</U> cac ban den voi <B><I>trang Web</I></B> cua toi !
</BODY>
Tác giả: Trần Đắc Thắng