Tự học HTML từ A-->Z

12. Danh thiếp Địa chỉ và Liên kết E-Mail

Trong bài này bạn sẽõ tạo ra một trang web đúng mốt -- tóm lược bằng một đoạn cuối! Hãy để cho mọi người gởi đến bạn một e-mail ngay từ trong trang Web của bạn!
Mục đích

Sau bài học này bạn có thể:

• Thêm một đoạn cuối (stylized footer) vào cuối trang Web.
• Tạo một liên kết siêu văn bản để gởi e-mail

Bài học

Lưu ý: Nếu bạn không có tài liệu từ những bài học trước bạn có thể download ngay bây giờ.
Một đặc điểm đáng giá của những trang Web là "footer" ở cuối của một trang để cung cấp thông tin về tác giả và tài liệu, có thể là ngày được cập nhật cuối cùng, cũng như là để gởi tới tác giả một thông báo bằng e-mail.
Đây chính là nơi để đặt tag address mà trong đó khối văn bản được in trong dòng mới dưới kiểu chữ nghiêng.
Thật là một ý tưởng hay để trong footer có một mô tả ngắn gọn, thông tin và quan hệ giữa những trang Web của bạn. Môt vài thông tin hữu ích là:

• Tiêu đề hay chủ đề của trang hiện thời.
• Ngày nó được tạo ra và cập nhật.
• Chủ quyền thích đáng.
• Tên và e-mail cho tác giả của trang Web.
• Tên và liên kết siêu văn bản tới nguồn gốc/tổ chức.

Như là một ví dụ, bạn hãy nhìn footer ở cuối mỗi trang Web của tài liệu hướng dẫn này. Trong quá trình sáng tạo ra những kiểu riêng của bạn, hãy nhìn thử những trang Web khác để thu thập thêm những ý kiến. Bắt chước vẫn là cách tốt nhất để tiến bộ!
Dạng HTML của tag address trông giống như sau :
<address> text text text text text text text text text text text text text text text text text text </address> Lưu ý rằng tất cả những HTML khác bên trong tag address đều hợp lệ, vì thế chúng ta có thể sửa đổi nó với những tag in đậm, ngắt dòng và một tag liên kết siêu văn bản:

HTMLKết quả<address><b>Page Title</b><br>Last Updated February 31, 1999<br>Web Page by Alan Levine (levine@maricopa.edu) <br><a href="https://www.mcli.dist.maricopa.edu/">Maricopa Community Colleges</a><br></address> Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
Bây giờ, giả sử một người nào đó đang đọc trang Web của bạn và muốn gởi cho bạn một lời phê bình về trang Web của bạn. Họ sẽ phải viết ra địa chỉ e-mail, nạp một chương trình khác, và gởi cho bạn một thông báo. Có thể gởi e-mail từ trong web browser của bạn được không? Được chứ, hầu hết các web browser hiện nay đều có thể làm điều này!
Cách để làm điều này là tạo một liên kết siêu văn bản với loại là mailto trong URL (hãy xem lại bài 8b). Tạo một liên kết siêu văn bản như sau:
<a href="mailto:levine@maricopa.edu">send an e-mail to alan</a>Khi nhấn vào dòng chữ send an e-mail to alan, Web browser sẽ mở ra một màn hình để bạn có thể soạn một thông báo và gởi nó đến cho tôi. Hơn nữa, bạn còn có thể thêm một dòng chủ đề mặc nhiên (subject) cho thông báo e-mail:
<a href="mailto:levine@maricopa.edu? subject=hi from lesson 12"> send an e-mail to alan</a>Hãy thử đi! Hãy gởi cho tôi một thông báo! send an e-mail to alan
Lưu ý rằng bạn có thể làm cho bất kỳ một dòng chữ (hay hình ảnh) nào hoạt động như là một liên kết siêu văn bản. Vì vậy trong ví dụ vừa rồi, chúng ta sẽ sửa đổi HTML để có một địa chỉ internet tạo liên kết cho việc gởi e-mail.
HTMLKết quả<address><b>Page Title</b><br>Last Updated February 31, 1999<br>Web Page by Alan Levine <A HREF="mailto:levine@maricopa.edu">(levine@maricopa .edu)</A> <br><a href="https://www.mcli.dist.maricopa.edu/">Maricopa Community Colleges</a><br></address> Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
Và cuối cùng chúng tôi đề nghị rằng bạn cũng nên đặt URL của trang vào trong footer. Tại sao vậy? Khi một ai đó in ra trang Web của bạn nhưng chưa viết lại hoặc lưu lại URL trong bookmark, có URL trên trang giấy cho phép một sự tham khảo bằng tay. Chỉ việc điều chỉnh ví dụ trên một chút (hãy chú ý đoạn HTML này ở dưới tag <address>...</address>): <address><b>Page Title</b><br>Last Updated February 31, 1999<br>Web Page by Alan Levine <A HREF="mailto:levine@maricopa.edu">(levine@maricopa .edu)</A> <br><a href="https://www.mcli.dist.maricopa.edu/">Maricopa Community Colleges</a><br></address><tt>URL: https://www.mcli.dist.maricopa.edu/tut/</tt>Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
URL: https://www.mcli.dist.maricopa.edu/tut/
Bây giờ đã đến lúc thêm một footer vào trang file HTML của bạn. Đối với ví dụ này, chúng tôi giả sử rằng bạn là "Lorrie Lava" một Nhà nghiên cứu núi lửa tại Big University (hoàn toàn tự do nếu bạn muốn đưa thông tin của bạn vào vị trí dưới đây):

1. Mở tập tin HTML index.htm trong trình soạn thảo của bạn.
2. Tại cuối trang Web (nhưng trên những tag </body></html>), thêm: <HR><address><B>Volcano Web</B> <br>created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></address><tt>URL: https://www.bigu.edu/web/index.htm</tt>
   Lưu ý: Chúng ta đã sử dụng một vài tag HTML mà đã được xét đến trong các bài trước. Cũng nên lưu ý đến tag ở cuối trang; điều này chắc chắn rằng dòng cuối của văn bản luôn luôn được thấy rõ.
3. Lưu trữ và Reload tập tin HTML.

Kiểm tra lại công việc của bạn

So sánh tài liệu của bạn với ví dụ mẫu. Nếu tài liệu của bạn trông khác với mẫu, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo.
Xem lại

Xem lại những chủ đề sau:

1. Tag address dùng để làm gì?
2. Tag address phải ở cuối một trang phải không?
3. Làm thế nào bạn tạo một tag để gởi e-mail đến bạn? hoặc đến một người khác? hoặc cùng với dòng chủ đề?

Thực tập tự do

Thêm một danh thiếp địa chỉ cùng với liên kết e-mail vào tài liệu HTML của riêng bạn.
Đến bài tiếp theo....

Vẫn còn một cách khác để chia đoạn những phần văn bản dài! Đó là BLOCKQUOTE.

13. Blockquote !

Vẫn còn một tag HTML đơn giản khác để sắp xếp lại văn bản của bạn: Tag <blockquote> hỏi các tag và <br> "Chúng ta làm gì đây?". Các tag này trả lời "Không rõ lắm, nhưng anh rất khác biệt so với chúng tôi!"Mục đích

Sau bài học này bạn có khả năng:

• Chèn một khối văn bản được trình bày thụt vào trong so với phần thân văn bản.
• Áp dụng những tag định kiểu bên trong một văn bản được blockquote.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ những bài học trước, hãy download ngay bây giờ.
Theo cách viết truyền thống, một đoạn trích dẫn của ba hoặc nhiều câu được làm nổi bật so với đoạn văn bản chính bằng cách trình bày như một khối văn bản được thụt vào bên trong (indented block of text). HTML cũng có khả năng này bằng cách sử dụng tag <blockquote>....</<blockquote>:
<blockquote>"This is a long quotation from a very famous person. Since it isso long and interesting, it should really be set off from therest of the text. This indicates clearly that the quote is fromsomeone other than the writer."</blockquote>Được nhìn thấy như sau : "This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer." Bây giờ chúng ta sẽ áp dụng tất cả những gì của HTML chúng ta đã học trước đây vào bên trong tag <blockquote>, chẳng hạn như trong ví dụ sau đây:
<blockquote><H2>A Manifesto</H2>This is a <B>long</B> quotation from a <A HREF="https://www.mcli.dist.maricopa.edu/alan/">very famous person</A>. Since it is so long and interesting, it should really be<pre> set off</pre>from the rest of the text.<I>This indicates</I>:<ul> <li>clearly that <li>the quote is from <li>someone other than the writer.</ul></blockquote>cho kết quả như sau: A Manifesto

This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set offfrom the rest of the text. This indicates:

• clearly that
• the quote is from
• someone other than the writer.

Chúng ta hãy thêm một đoạn trích dẫn vào trang Volcano Web. Chúng ta sẽ sử dụng blockquote trong phần của nhà tự nhiên học người La mã Pliny, người đã chứng kiến sự hoạt động lại của núi lửa Vesuvius vào năm 79 sau công nguyên.

1. Mở tập tin HTML index.htm trong trình soạn thảo.
2. Bên dưới đề mục <h1>Volcano Web</h1>, thêm những dòng sau : <BLOCKQUOTE> <B><I> "Nature raves savagely, threatening the lands" </I></B><br> -- <A HREF="https://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. </BLOCKQUOTE> Chú ý: hãy xem cách chúng ta sử dụng kết hợp cả in đậm và in nghiêng (xem bài 5) để làm sáng lên đoạn trích dẫn. Cách để sang dòng mới với tag <br> (xem bài 4). Chúng ta cũng tạo siêu liên kết cho "Pliny the Elder" đến một web site khác có nhiều thông tin hơn về Pliny và các quan sát của ông ta. Cũng nên chú ý cách tag <blockquote> thêm dấu ngắt đoạn trước và sau khối văn bản.
   Và cuối cùng, Các CHÚ Ý (giống như bạn đang xem) mà chúng tôi đã sử dụng trong các bài đều dùng đến tag <blockquote>!
   
3. Lưu trữ và Reload tập tin HTML.

Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu. Nếu tài liệu của bạn trông khác với mẫu, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo.
Xem lại

Xem lại những vấn đề sau :

1. Tag <blockquote> dùng để làm gì?
2. Tại sao không cần tag trước một blockquote?

Thực tập tự do

Hãy tạo kinh nghiệm với việc sử dụng tag <blockquote> trong trang Web của bạn. Đừng có nghĩ rằng tag này chỉ sử dụng cho việc trích dẫn. Nó có thể khá hiệu quả để làm cho sự trình bày trang web của bạn thêm đa dạng. Tag <blockquote> là một trong các cách để làm cho nhiều trang web không phải là những đoạn văn dài dòng vô vị.
Một vài tác giả sử dụng hai (hoặc nhiều hơn) tag <blockquote> lồng vào nhau để tạo ra hiệu ứng chừa lề. Ví dụ như:
<BLOCKQUOTE> <BLOCKQUOTE> <BLOCKQUOTE>"Oh, for more tags," he lamented. Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in creatively use of the number of tags." </BLOCKQUOTE> /BLOCKQUOTE></BLOCKQUOTE>Được hiển thị như sau: "Oh, for more tags," he lamented. Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in creatively use of the number of tags."
Đến phần tiếp theo....

Phân chia một trang Web đơn thành "các đoạn" liên kết với nhau ....

14. Gộp lại (Lumping) hay Phân mảnh (Splitting)

Bạn đã làm được một home page! Một việc lớn! (Nhưng này bạn! Đây mới chỉ là công việc giống như Hercule thôi!) BÂY GIỜ, những người bạn của tôi ơi, đây là lúc để chuyển một "trang" văn bản dài thành những đoạn thông tin của "web" được nối với nhau.
Mục đích

Sau bài này, bạn có thể:

• Chuyển một trang web đơn thành một chuỗi các trang được liên kết với nhau
• Tạo ra một trang mẫu (template) cho nhiều trang web
• Xây dựng các đặc tính hoa tiêu (navigational feature) để nối nhiều trang web lại với nhau

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ những bài học trước, hãy download ngay bây giờ.
Bạn làm một người gộp lại hay là một người chia mảnh? Không phải? Hay cả hai?
Để tổ chức thông tin, đôi lúc tốt hơn hết là "gộp" chúng lại với nhau; đôi lúc tốt hơn hết lại là "chia" chúng thành các phần riêng biệt. Kéo lên xuống trong các trang web dài thường tạo ra sự chán nản. Khi dài, một trang web cần tốn nhiều thời gian để nạp từ mạng xuống nếu so sánh với việc chia nó thành những trang nhỏ hơn.
Trong nhiều trường hợp, bạn có thể xác định những điểm luận lý để "chia" thông tin thành nhiều trang web. Tuy nhiên, điều này không có một công thức chung, và ý kiến cũng không giống nhau. Bạn nên tạo sự cân bằng giữa các trang bằng cách chia nội dung thành các phần đều nhau để tránh cho người đọc phải click quá nhiều khi muốn đến một nội dung nào đó. Cũng là một điều quan trọng khi xây dựng các liên kết siêu văn bản hay các manh mối dễ nhìn thấy bên trong trang web giúp người đọc tìm được thông tin cần thiết.
Trước đây chúng ta vừa tạo được một trang web với một liên kết đến một trang ngắn hơn. Trong bài 8d chúng ta đã tạo ra một danh sách các liên kết như là một mục lục để nối chúng đến các anchor được đặt tên cho các phần khác nhau của bài Volcano Web. Sự phân đoạn theo cách như vậy có thể được xem là các điểm ngắt để phân mảnh một trang đơn dài thành các trang con.
Cho đến giờ chúng ta đã tạo ra một thư mục gọi là volc trong đó có chứa hai tập tin HTML (trang bài học index.htm và trang thứ hai msh.htm). Chúng ta cũng đã tạo ra một thư mục thứ hai là pictures để giữ các tập tin hình ảnh.
Bây giờ chúng ta sẽ phân chia tập tin Volcano Web đơn thành một chuỗi các trang web được liên kết với nhau như trong sơ đồ này. Điểm vào của nó là trang mục lục/bìa tại index.htm trong đó có liên kết đến tất cả các phần khác của bài học:

• Introduction
  [intro.htm]
• Volcano Terminology
  [term.htm]
• Volcanic Places in the USA
  [usa.htm]
• Volcanic Places on Mars
  [mars.htm]
• Research Project
  [proj.htm]

Mỗi phần của bài học sẽ liên kết ngược lại phần mục lục và trang trước của nó. Cũng nên chú ý đến liên kết hai chiều giữa usa.htm và msh.htm

Chú ý: Để hoàn thành bài học này, chúng ta cần tạo thêm một số tập tin mới và cũng phải thực hiện nhiều lần thao tác chép/dán từ tập tin bạn đang làm việc. Hãy chắc chắn rằng bạn biết rõ cách chuyển qua lại giữa các chương trình và cửa sổ tài liệu khác nhau trên máy của bạn.
Điều đầu tiên chúng ta cần làm là tạo một tập tin index.htm mới, được sử dụng làm trang "bìa" của bài Volcano Web:

1. Trước hết tạo một bản sao của tập tin index.htm và đặt tên là old.htm hay là một tên nào tương tự như vậy.
2. Bây giờ mở lại tập tin index.htm nguyên gốc trong trình soạn thảo. Từ điểm này trở đi, đây sẽ là bài mới của chúng ta.
3. Chúng ta sẽ sử dụng lại hình ảnh, lời mở đầu, và bảng mục lục trong trang đầu tiên này. Để làm điều đó, chúng ta sẽ xóa đi các phần cần "cắt" ra khỏi trang web. Xóa bỏ đoạn từ Introduction đến References, tức là mọi thứ trong:
   <hr><h2><A NAME="intro">Introduction</A></h2>A <b>volcano</b> is a location where magma, or hotmelted rock from within a planet, reaches the surface. :và :<dt>Lipman, P.W. and Mullineaux (eds). (1981)<dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>U.S. Geological Survey Professional Paper 1250.</dl>Bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết trang nên như thế nào tại điểm này.
4. Bây giờ tìm đoạn văn có "In this Lesson..." Trước đây, chúng ta đã dùng các liên kết siêu văn bản đến anchor được đặt tên (tức là <a name="term">..</a>) trong cùng một tài liệu (xem bài 8a). Bây giờ chúng ta sẽ điều chỉnh các liên kết anchor này để liên kết đến một trang web khác (mà chúng ta sẽ tạo ra dưới đây). Tìm đoạn có dạng:
   <B>In this Lesson...</B> <ul><i> <li><A HREF="#intro">Introduction</A> <li><A HREF="#term">Volcano Terminology</A> <li><A HREF="#usa">Volcanic Places in the USA</A> <li><A HREF="#mars">Volcanic Places on Mars</A> <li><A HREF="#project">Research Project</A></i> </ul>và điều chỉnh thành: <B>In this Lesson...</B> <ul><i> <li><A HREF="intro.htm">Introduction</A> <li><A HREF="term.htm">Volcano Terminology</A> <li><A HREF="usa.htm">Volcanic Places in the USA</A> <li><A HREF="mars.htm">Volcanic Places on Mars</A> <li><A HREF="proj.htm">Research Project</A></i> </ul>Bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết trang nên như thế nào tại điểm này.
   Chú ý: Bạn cần hiểu rõ sự khác nhau giữa một liên kết có dạng: <a href="#quest">go to questions</a>với một liên kết khác có dạng: <a href="quest.htm">go to questions</a>

Việc kế tiếp cần làm là tạo các tập tin riêng cho các phần trong bài của chúng ta. Sẽ dễ dàng hơn khi trước hết chúng ta tạo ra một tập tin mẫu (template file) rồi sau đó hiệu chỉnh cho các trang web khác nhau.

1. Trong trình soạn thảo, tạo một tập tin mới gọi là temp.htm
2. Trong tập tin này, đánh vào đoạn HTML sau (nếu muốn, bạn có thể chép lại một tập tin ví dụ mẫu): [SIZE=+1]HTMLGhi chú[/SIZE]<html><head><title>XXXXXXXX</title> </head><body>HEAD: Trong phần đầu của mỗi tài liệu, XXXXXXXX là tên của phần đó <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="xxxx.htm">back</A> / <A HREF="xxxx.htm">next</A></H5>NAVIGATION: Tại đỉnh mỗi trang chúng ta sử dụng một tiêu đề nhỏ (h=5) để tạo ra các liên kết hoa tiêu (navigation link). Điểm Index để trở về trang bìa chính. Liên kết next và back để đến trang kế tiếp và trang trước. Bạn sẽ phải điền lại tên tập tin thích hợp cho xxxx.htm. Hãy chú ý cách này tạo ra một hướng dẫn nhỏ cho mỗi trang web. <h2>XXXXXXXX</h2> : : :HEADER: Sử dụng tiêu đề mức 2 cho các mục của trang. <hr><ADDRESS><b><A HREF="index.htm">Writing HTML</A> : XXXXXXXX </b>created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A> <br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></ADDRESS>ADDRESS FOOTER: Chú ý cách footer chỉ ra tên của trang chính (với một liên kết ngược về nó) cùng với đoạn văn chỉ ra tên của phần hiện tại XXXXXXXX. Đặt tên trang ở đây tạo ra một hướng dẫn nhỏ cho thấy vị trí của nó trong cấu trúc web mà chúng ta đã tạo ra. <tt>URL: https://www.bigu.edu/web/xxxxxxxx.htm</tt><p<body></html>URL: Cần điều chỉnh dòng này để chỉ ra URL của tài liệu tương ứng với tên tập tin xxxxxxxx.htm của nó
3. Đến đây, bạn cần tạo ra 5 bản sao của tập tin mẫu và thực hiện các điều chỉnh thích hợp trong từng mẫu: [SIZE=+1]Tên Tập tinMụcGhi chú[/SIZE]intro.htmIntroductionVì đây là mục đầu tiên, xóa đi dòng <A HREF="xxxx.htm">back</A> trong phần hoa tiêu term.htmVolcano Terminology usa.htmVolcanic Places in the USAmars.htmVolcanic Places on Mars proj.htmResearch Project Vì đây là mục cuối cùng, xóa đi dòng <A HREF="xxxx.htm">next</A> trong phần hoa tiêu
4. Bây giờ, hãy mở tập tin index.htm cũ (mà chúng ta đổi tên là old.htm) trong trình soạn thảo. Với mỗi tập tin mới tạo, bạn cần chép lại (copy) đoạn HTML phía dưới đề mục <h2>...</h2> và dán (paste) vào tập tin mới tương ứng. Chú ý rằng trong Volcanic Places in the US và Research Projects cả hai đều có các mục con sử dụng tiêu đề <h3>...</h3>.
5. Cuối cùng, bạn cần điều chỉnh liên kết trong tập tin msh.htm. Trước đây, nó quay về một anchor được đặt tên trong bài chính (mục Volcanic Places in the US) còn bây giờ nó cần liên kết đến tập tin usa.htm. Mở tập tin msh.htm trong trình soạn thảo và điều chỉnh: <a href="usa.htm"> <img src="../pictures/left.gif" alt="** "> Return to <i>Volcano Web</i></a>Cũng để cho tương đồng, bạn nên điều chỉnh lại phần footer như sau: <HR><ADDRESS><B><A HREF="index.htm">Volcano Web</A> : <A HREF="usa.htm">Volcanic Places in the USA</A> : Mount St. Helens</B> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></ADDRESS><tt>URL: https://www.bigu.edu/web/msh.htm</tt><body></html>

Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu. Nếu tài liệu của bạn trông khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo. Trong bài này chúng ta đã tạo ra nhiều tập tin do vậy rất dễ có lỗi do đánh sai.
Xem lại

Các vần đề nên xem lại với bài này:

1. Cho biết vài tiện lợi của các trang web ngắn so với một trang web dài?
2. Điều gì xảy ra nếu chúng ta không sửa lại liên kết siêu văn bản trong tập tin msh.htm?
3. Các đặc tính hoa tiêu mà chúng ta đã đưa vào bài là gì?

Thông tin bổ sung

Về nguyên tắc, trang web của bạn sẽ dễ đọc hơn khi các liên kết siêu văn bản đồng nhất vào nội dung của văn bản quanh nó. Điều này trở nên quan trọng hơn khi bạn tạo ra nhiều trang web có các siêu văn bản liên kết lẫn nhau. Hãy so sánh:
In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.
với
In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. (Click here to see a picture of Mount St. Helens) However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. (Click here to see a seismometer) However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.
Các dòng "Click here..." không làm phá hủy ý nghĩa của dòng văn bản, nhưng đoạn liên kết "here" không có quan hệ gì với mục liên quan. Như là một đề nghị, tránh viết các đoạn tương tự như "click here to return to the home page". Thay vì vậy chỉ viết rõ một liên kết, tức là <a href="home.htm">Home Page</a> - bản thân việc click đã được hiểu ngầm khi sử dụng web browser.
Thực tập tự do

Hãy xem lại trang web bạn đang thực hiện. Nó có quá dài không? Có thể có những đoạn mà bạn có thể "tách" trang không? Hãy tạo ra trang bìa/mục lục và các liên kết thích hợp cho phần liên kết hoa tiêu giữa chúng. Sau đó tạo mẫu cho các "trang con".
Bây giờ hãy yêu cầu các bạn hay đồng nghiệp của bạn xem các trang web của bạn. Họ có thích cách "phân" trang hay "ghép" nhóm của bạn không? Họ có dễ dàng biết được cách để xem thông tin của bạn không?
Đến phần tiếp theo....

BÂY GIỜ chúng ta trở thành người yêu thích HTML nâng cao ... Hãy thắt dây an toàn!

15. HTML "tiêu chuẩn" và "nâng cao"

Hãy xét đến một thực tế của HTML
--nhiều điều bạn có thể thực hiện hơn nhưng chúng cũng làm cho HTML trở thành không thỏa "tiêu chuẩn" hơn.
Mục đích

Đây là một bài học ngắn và không cần thực tập gì hết! Sau bài này bạn có khả năng:

• Quyết định khi nào dùng những đặc điểm của HTML mà có thể không hoạt động được cho tất cả web browser.

Bài học

Trong bài 0, chúng ta đã giới thiệu về HTML "tiêu chuẩn". Trong những bài học tiếp theo trong tài liệu này sẽ chỉ cho bạn cách sử dụng một số tag HTML khác mà có thể không thấy được trên tất cả các Web browser. Ở đây chúng ta chỉ xem qua một vài ý tưởng trước khi bạn bước vào những bài sau.
Trước hết chúng ta hãy xem sơ qua về lịch sử của nó.
Cách đây khá lâu ("trong một thiên hà rất xa?")... vào khoảng năm 1990, World Wide Web là hệ thống được xây dựng trên văn bản có nền tảng dựa trên ngôn ngữ HyperText Markup Language. Các tag và sự thông dịch của nó dựa trên những chuẩn (HTML 1.0) đặt bởi một tổ chức quốc tế (international committee). Đây chính là chìa khóa để cho "Web" trở nên "phổ biến" (world wide) bởi vì theo những tiêu chuẩn này, thông tin hoàn toàn độc lập với hệ thống máy tính dùng để xem nó.
Ngay cả khi NCSA Mosaic xuất hiện một cách đột ngột vào năm 1993 như là một web browser đồ thị đầu tiên, những tiêu chuẩn vẫn được dựa trên ký tự và được cập nhật thành HTML 2.0.
Web trở nên phổ biến,
phổ biến rộng rãi,
phổ biến một cách điên rồ.
Những nhà lập trình bắt đầu xây dựng những Web browser có cung cấp những chức năng giống như Mosaic (bởi vì họ phải hổ trợ tất cả các tính chất của HTML có trong tiêu chuẩn quốc tế). Một nhóm người trong đó có các nhà phát triển Mosaic đã thành lập một công ty mới có biểu tượng là "Mozilla" ("Mosaic" + "Godzilla"?) và tạo ra một web browser mới tên là NetScape.
Netscape đã nhanh hơn so với NCSA Mosaic. Tuy nhiên, nó phát triển trong đại chúng vì nó chứa đựng tất cả những tính chất của HTML 2.0 CỘNG với nhiều tag thêm vào cho những thứ mà bạn không thể thực hiện được trong HTML 2.0. Phần "mở rộng" (extensions) hay "nâng cao" này (enhancements) đã là nguyên nhân (và vẫn là một nguyên nhân) của sự tranh cãi lớn giữa những người làm ra chuẩn HTML và những người thích các đặc điểm mà Netscape thêm vào.
Mozilla Netscape đã hết sức phổ biến và nhanh chóng chiếm lĩnh 3/4 thị trường Web browser. Bây giờ, trong HTML, bạn có thể đặt màu nền cho trang của bạn, tạo bảng, đặt văn bản quanh hình ảnh, và còn nhiều nữa. Bạn cũng đã từng nhìn thấy những trang web có câu "This page optimized for NetScape". Nhiều Web browser khác đã bắt đầu hổ trợ những đặc tính của Netscape "HTML 2.0+". Cùng với các dịch vụ giúp đỡ trực tuyến được mở ra trên Web, thị trường browser ngày càng trở nên đông đúc (và hỗn độn).
Ủy ban quốc tế đã đối đầu với một tình thế lưỡng nan, cùng với việc thị trường trở nên rộng lớn là việc đòi hỏi những tag "không chuẩn" trở nên một phần của HTML. Khi những qui tắc cho HTML 3.0 được phát triển, họ bắt đầu đưa vào hầu hết (nhưng không phải là tất cả) những tag đã được Netscape giới thiệu. Tuy vậy, quá trình chuẩn hoá xem ra là quá chậm đối với nhiều người.
Và cuộc chiến trở nên lớn hơn khi vào năm 1996 Microsoft đã giới thiệu những tag HTML riêng biệt của họ. Như vậy HTML có trở thành một mớ hỗn độn không? Để biết thêm thông tin về sự cạnh tranh này, chúng tôi đề nghị bạn tham khảo đến HTML 3.0 and NetScape. Những hoạt động gần đây nhất được đề nghị là của HTML 3.2, mà trong đó chứa đựng hầu hết các đặc điểm được hổ trợ bởi những nhà sản xuất lớn trên thị trường hiện nay, đó là Netscape và Microsoft. Các phát biểu gần đây nhất là sự thảo luận về các chuẩn nên được hổ trợ trong tất cả các browser.
Nhưng những điều đó thì có ý nghĩa gì với bạn? Đó là điều quan trọng nhất, khi bạn là một nhà thiết kế trang Web, bạn cần phải biết loại browser nào mà người đọc sẽ phải sử dụng. Có lẽ bạn là một thầy giáo trong một trường học hoặc bạn đang làm việc trong một công ty mà tất cả mọi người đang sử dụng cùng một loại browser nào đó. Vậy thì bạn có chắc chắn rằng các tag đặc biệt bạn đang sử dụng là không có vấn đề không.
Tuy nhiên, thông thường bạn vẫn "xuất bản" (publishing) các trang Web vào một Internet server mà không có ý kiến gì về loại browser sẽ được sử dụng. Bạn có thể thêm những khuyến cáo đặc biệt trong trang Web của bạn. Bạn có thể tuân theo một cách chặt chẽ với những chuẩn được hổ trợ rộng rãi bởi tất cả các Web browser. Ngay cả khi bạn sử dụng những tag đặc biệt, cũng có vài cách thông dụng để không gây ra sự tàn phá nào cho những người sử dụng các browser khác.
Điều quan trọng nhất ... không phải là việc quan tâm đến trang đó trông như thế nào trên hệ thống của bạn! Người đọc có thể có những Web browser khác nhau, có những phông chữ khác nhau, sử dụng những tham khảo màu khác nhau, kích cở màn hình khác nhau.. tất cả những thứ đó có thể gây ra sự hiển thị khác nhau về kích thước, về dạng trình bày so với máy của bạn. Nếu bạn có thể thử trang Web trên các máy tính khác nhau, hãy phóng to và thu nhỏ cửa sổ của browser, chuyển đổi phông chuẩn.
Thật là may mắn, thiết kế nguyên thủy của HTML rất thoáng và dễ tha thứ cho một số các luật - nếu một browser bắt gặp một tag mà nó không biết xử lý hay trình bày như thế nào, nó dễ dàng bỏ qua các tag này.

Ví dụ như, xem như là browser của tôi có hổ trợ tag <drip>...</drip>. Nghĩa của nó là đoạn văn bên trong sẽ xuất hiện bình thường rồi sau đó từ từ "rơi" xuống đáy của trang (người biên tập - TÔI THÌ LÀM CHO NÓ ĐI LÊN!), một hiệu ứng lạ lùng cho trang web của tôi:
<drip><H2 align=center>Welcome</H2></drip> to my sloppy home page!. Look out for the puddles!hoạt động của nó tạo ra một sự duyên dáng trên browser tự tạo của tôi. Trên browser của bạn không có hổ trợ đặc tính này, bạn sẽ thấy:
Welcome

to my sloppy home page!. Look out for the puddles!
Khi browser của bạn không hổ trợ tag này nó chỉ hoàn toàn băng qua tag mà không tạo ra sự phá hủy hay thông báo sai nào.
Đó là một ý tưởng thông minh, đúng không?
Khi chúng ta tiếp tục các bài học nâng cao này, các hướng dẫn hơi dài và phức tạp hơn. Nhưng bạn sẽ tiếp tục, đồng ý chứ!
Xem lại

1. Tại sao bạn phải quan tâm đến các tiêu chuẩn của HTML ?
2. Trường hợp nào bạn cảm thấy thoải mái khi sử dụng HTML không chuẩn?
3. Điều gì xảy ra nếu một web browser bắt gặp một tag mà nó không hiểu ?

Đến phần tiếp theo....

Làm sống động trang bằng cách thêmmàu hay một tập tin mảng màu (texture file) vào "phía sau" nội dung.

16. Màu sắc và Cấu trúc cho Nền

Đừng bao giờ để cho trang Web của bạn có một màu xám xịt! Hãy đặt m à u S ắ c hoặc bố trí một cấu trúc nền nào đó "phía sau" phần văn bản.
Mục đích

Sau bài học này bạn có khả năng:

• Tạo một màu nền cố định cho trang Web.
• Tính được mã dưới hệ thập lục phân cho một giá trị màu.
• Thay đổi màu của văn bản và những mục liên kết siêu văn bản.
• Tạo một cấu trúc nền từ một tập tin hình ảnh.

Bài học

Lưu ý: Nếu bạn không có tài liệu của bạn từ bài học trước, hãy download ngay bây giờ.
Nền (background) của trang Web - chính là phần nền. Khi chúng ta thêm những màu sắc khác nhau hoặc ngay cả những mẫu nền, bạn nên nhớ để nó không ảnh hưởng đến việc đọc của phần văn bản. Với các trang trong tài liệu hướng dẫn này, chúng tôi sử dụng một màu trắng cố định cho nền để tạo ra sự rõ ràng và phông nền không gây ra ảnh hưởng đến nội dung.
Với một vài bổ sung cho tag <body> (được giới thiệu trong bài 1), bạn có thể tạo ra màu nền cho trang Web của bạn. Nhưng trước khi chúng tôi chỉ cho bạn cách tạo ra màu sắc thích thú như vậy, chúng ta phải nói sơ qua các giá trị màu RGB (red green blue) và sự thể hiện của chúng dưới dạng số "thập lục phân".
"Hex-Dec" và cơ bản về màu sắc

Trong một web browser, bạn được tùy ý sử dụng 256 màu của hệ thống để tạo màu cho văn bản và nền. Mỗi một màu được xác định dựa trên các giá trị Red- Green- Blue (RGB) của nó, ba số này có giá trị từ 0 đến 255, mỗi một số thể hiện cường độ của thành phần màu Red, Green, hay Blue cho màu đang xét. Giá trị lớn nhất của cả ba (R=255, G=255, B=255) cho ra màu trắng và giá trị nhỏ nhất (R=0, G=0, B=0) cho ra màu đen. Tất cả những màu khác được biểu diễn bởi các bộ ba RGB khác nhau.
Tiếp theo đây là một phần phức tạp. Thay vì xác định một màu theo dạng tương tự như "102,153,255" thì mỗi số được chuyển từ dạng biểu diễn theo cơ số hệ mười (là những số đếm hàng ngày dùng các ký số 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) sang dạng biểu diễn theo cơ số hệ thập lục phân (dùng các ký số 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Tại sao vậy? Vì máy tính dễ sử dụng và dể hiểu số hệ thập lục phân hơn. Vì vậy đối với màu cho ví dụ trên, chúng ta sẽ viết trong dạng số thập lục phân là: "6699FF". Trong ví dụ này, "66" là trị của màu Red, "99" là trị của màu Green, và "FF" là trị của màu Blue.
Sau đây là một vài ví dụ trị hệ thập lục cho các màu khác nhau:
Màu mẫuMã 16xx oo xx FFCCCCxx oo xx 3300FFxx oo xx 33FF66xx oo xx AA0000xx oo xx 663300xx oo xx 9900FFxx oo xx 000077xx oo xx FFFF00xx oo xx EEEEEExx oo xx 888888xx oo xx 444444xx oo xx 000000Nhưng, đừng lo sợ về việc chuyển đổi hệ thống số đếm! Có rất nhiều công cụ trong đó bạn chỉ cần click vào một bảng màu và chúng sẽ cho biết cách biểu diễn ở hệ thập lục phân. Rất nhiều công cụ màu như vậy có thể tìm thấy trong Yahoo. Nhưng tốt hơn thế nữa, bây giờ rất nhiều browser hổ trợ nhanh chóng cho 16 màu sau (chúng là các màu của VGA trên Windows):
xx oo xx aquaxx oo xx blackxx oo xx bluexx oo xx fuchsiaxx oo xx grayxx oo xx greenxx oo xx limexx oo xx maroonxx oo xx navyxx oo xx olivexx oo xx purplexx oo xx redxx oo xx silverxx oo xx tealxx oo xx whitexx oo xx yellow
Màu nền cố định
Chú ý: Trước hết bạn có thể thử kiểm tra để biết được browser của bạn có hổ trợ những màu nền cố định không (solid color background).
Với Volcano Web của chúng ta, điều đầu tiên chúng ta sẽ làm là thêm một màu nền vào tập tin index.htm. Trong HTML để thêm một màu nền cố định cần điều chỉnh tag <body> như sau:
<body bgcolor=#XXXXXX>trong đó XXXXXX là dạng biểu diễn thập lục phân (được chỉ định bởi dấu # ở phía trước) của màu được chỉ định.
Nếu bạn nhớ lại, hình chúng ta sử dụng trong phần mở đầu là hình núi lửa trên một nền đen - vì vậy nếu chúng ta cũng sử dụng màu đen cho màu nền của trang Web, hình ảnh sẽ rất hòa hợp với trang Web của chúng ta:

1. Mở tập tin index.htm trong trình soạn thảo.
2. Tìm tag <body> và thay đổi nó thành : <body bgcolor=#000000>
3. Lưu trữ và Nạp tập tin HTML trong Web browser của bạn

Nếu bạn thực hiện chính xác những điều trên, browser của bạn sẽ đổi màu nền thành một màu đen cố định. Nhưng bạn có thể nhận thấy là bạn không thể nhìn thấy được văn bản của bạn. Tại sao vậy? À, bởi vì màu mặc định cho chữ cũng là màu đen, do đó bạn biết rằng bạn có những chữ màu đen trên một nền đen! May mắn thay, chúng ta có thêm những khả năng khác trong tag body để thay đổi màu của chữ và những siêu văn bản:
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>trong đó các giá trị XXXXXX sẽ xác định:

• BGCOLOR = màu sắc của nền (mặc định là màu xám - grey)
• TEXT = màu của chữ trong thân văn bản (mặc định là đen - black)
• LINK = Màu sắc của một mục liên kết siêu văn bản (mặc định là xanh - blue)
• VLINK = Màu sắc của một mục siêu văn bản đã xem (mặc định là tím - purple)

Bây giờ bạn có thể thêm các giá trị màu này để thay đổi tag thành:
<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>Tag này sẽ cho nền màu đen, chữ màu vàng, siêu văn bản màu xanh dương sáng, và siêu văn bản đã xem màu đỏ .
Chú ý : thứ tự của các mục trong tag <BODY> không quan trọng.
Bây giờ bạn nên sửa đổi các tag <BODY> trong tất cả các tập tin HTML của bạn (cách nhanh và dễ dàng là chép và dán ví dụ trên cho mỗi tag <BODY>).
Cấu trúc nền
Lưu ý: Trước hết có lẽ bạn hãy thử kiểm tra xem web browser của bạn có hổ trợ cấu trúc nền không.
Màu sắc cố định tạo thêm vài biến đổi khác nhau cho trang Web - nhưng bạn có thể đi xa hơn nữa bằng cách thêm cấu trúc nền (textured background). Bạn sử dụng một tập tin hình ảnh nhỏ (dạng GIF hay JPEG) và browser sẽ "lợp" vào trang web các bản sao liên tục nhau của hình ảnh này. Vài điều bạn cần phải nhớ là:

• Kích cở tập tin: Việc thêm một cấu trúc nền đòi hỏi một hình ảnh nữa phải được download. Chúng tôi đề nghị tập tin hình ảnh nên có kích thước nhỏ hơn 10k.
• Khả năng đọc: Hãy chọn lựa! Rất nhiều tập tin sắp đặt nền làm cho người đọc cảm thấy khó nhìn thấy chữ. Cố gắng sử dụng những màu rất sáng (với chữ rất tối) hoặc những màu thật tối (với chữ rất sáng) - có nghĩa là hãy chọn độ tương phản cao giữa nền và chữ.
• Hiệu quả: trong các web browser đầu tiên có sử dụng màu nền, trang sẽ chưa xuất hiện cho tới khi nào màu nền đã được nạp xuống - do sự kết nối chậm, người đọc có thể phải chờ hình ảnh nền một thời gian dài trước khi nhìn thấy được một thông tin nào đó trên màn hình! Tuy nhiên, các web browser sau này download nền cuối cùng do đó trước tiên trang sẽ có màu xám, tiếp theo là văn bản và hình ảnh xuất hiện, và cuối cùng là nền. HÃY GHI NHỚ! Thời gian nạp trang sẽ chậm hơn nữa (nếu xét với các loại modem thế hệ cũ) khi trang của bạn được đọc từ server.

Trong phần này của bài học, chúng tôi sẽ tạo cơ hội để bạn có kinh nghiệm với ba hình nền khác nhau. Dạng HTML cho việc thêm một tập tin hình nền là :
<body background="bgfile.gif">trong đó bgfile.gif là tên của tập tin hình ảnh (có thể sử dụng URL đầy đủ hay tương đối - xem bài 8a).
Dưới đây chúng ta sẽ liệt kê tên của ba tập tin nền. Bạn có thể download từng cái (nếu bạn không biết cách download hình ảnh từ một trang web, xin tham khảo bảng trợ giúp Download Hình ảnh) của chúng tôi. Bạn nên cất các tập tin hình ảnh trong directory/folder pictures trong vùng làm việc của bạn:
Blue Tile [bg.gif] Một mẫu hình vuông được lặp lại:
HTML: <body background="../pictures/bg.gif">
Tập tin ví dụ có nền Blue Tile
Volcano Text [vtext.gif] Văn bản lớn có màu xám sáng:
HTML: <body background="../pictures/vtext.gif">
Tập tin ví dụ với nền là Volcano Text
Legal Paper [paper.gif] Giấy có kẻ hàng
HTML: <body background="../pictures/paper.gif">
Tập tin ví dụ với nền là Legal Paper Bạn cũng có thể sửa đổi màu của văn bản trong trang Web như chúng tôi đã làm trong ví dụ trên. Lấy ví dụ, nếu bạn muốn chữ màu ĐỎ cho nền Giấy có kẻ hàng, chúng ta có thể viết lại HTML sau:
<body background="../pictures/paper.gif" text=##AA0000>sẽ cho chúng ta chữ đỏ trên giấy vàng.
Chú ý: Có nhiều web browser có khả năng thay đổi màu mặc định - đôi khi một người sử dụng có thể có sự ưa thích một tập các màu mà những màu này sẽ làm ảnh hưởng đến tập màu bạn đã chọn. Vì vậy, chúng tôi đề nghị khi sử dụng một tag nền bất kỳ nào (màu cố định hay tập cấu trúc nền) thì bạn cũng nên bao gồm các màu "bình thường" - màu đen cho phần chữ văn bản, màu xanh dương cho liên kết siêu văn bản và màu tím cho các liên kết đã xem : <BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE>
Nếu bạn muốn tìm vài ví dụ về các tập tin cấu trúc nền, hãy xem Kai's Power Tips Background Archives
Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu. Nếu trang của bạn trông khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo. Chúng ta sẽ giữ lại các tập tin mẫu với màu đen cố định mà chúng ta đã thêm vào ở phần đầu của bài này.
Xem lại

Xem lại những vấn đề sau:

1. Làm thế nào để thêm màu nền đồng nhất cho trang Web?
2. Tại sao mã màu lại được viết trong dạng mã khó hiểu như #EE66CC?
3. Làm thế nào để thêm màu cho văn bản trong trang Web?
4. Giữa <body bgcolor=#FFFFFF>và <body background="tiles.gif">khác nhau như thế nào?

Thực tập tự do

Thêm một màu nền cố định hay một tập tin cấu trúc nền cho (các) trang web của bạn. Hỏi vài người khác xem họ có đọc được văn bản với màu nền bạn đã chọn không.
Đến phần tiếp theo....

Tag khó chịu và đáng ghét nhất của HTML vẫn còn ở phía trước...

17. Đừng làm cho chữ nhấp nháy!

Bạn muốn tạo một sự chú ý có ấn tượng trong trang Web của bạn phải không? Hãy dựa vào nội dung của nó hơn là tạo sự chú ý bằng cách làm cho nó trở nên nhấp nháy một cách rẻ tiền...
Mục đích

Sau bài học này bạn sẽ:

• Không bao giờ sử dụng tag nhấp nháy (blink tag).

Bài học

Lần đầu tiên khi NetScape đưa ra web browser của họ, họ thêm vào đó một tag với mục đích là để nhấn mạnh những từ hoặc những cụm từ quan trọng. Tag này làm cho chúng nhấp nháy trên trang Web.
Cấu trúc của tag nhấp nháy khủng khiếp này như sau :
<blink>Wow</blink>là một dấu hiệu mà những người có kinh nghiệm xem trên web sẽ nói "tránh xa trang này đi - người viết ra trang web này chỉ mới học HTML từ miếng giấy bọc kẹo cao su."
Không nói nhiều đến các lý do rất đần độn về việc sử dụng nó, hãy tránh tất cả những gì giống như sau:
Đây là một vùng NÓNG TRÊN Web Trừ phi bạn muốn xây dựng một dòng nhếch nhác cho các trang web... Vâng, đây là quan điểm soạn thảo của chúng tôi. Cứ tiếp tục và Hãy tranh cãi.
Đến phần tiếp theo....

18. Trang trí cho Văn bản

Bạn không chỉ có thể thêm màu sắc cho nền mà còn có thể thêm màu sắc, đổi KÍCH THƯỚC, và ngay cả phông chữ cho các phần xác định của văn bản! Bạn phải trả hết bao nhiêu đây?
Nhưng HÃY CHỜ MỘT CHÚT! Bây giờ bạn có thể viết chữ ở trên và ở dưới như với những công thức hóa học và toán như sau:
CO2 + SO4-2
3x2 - 2y-1/2 = 4z
Mục đích

Sau bài học này bạn có thể:

• Thay đổi kích cở của một phần văn bản được chỉ định trong một trang Web.
• Thay đổi màu sắc của một phần văn bản được chỉ định trong một trang Web.
• Tạo chữ viết trên và dưới cho văn bản trong một trang Web.
• Chỉ định phông cho những phần văn bản trong một trang Web.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.
Với HTML do NetScape và HTML 3.0 giới thiệu, bạn có thêm một vài khả năng định dạng nữa cho văn bản của bạn. Đặc biệt nhất là, bạn có thể định những kích cở chữ cũng như màu sắc khác nhau cho văn bản. Khi sử dụng một cách đúng đắn, sự định dạng văn bản có thể làm nổi bật cách trình bày trang Web. Khi sử dụng một cách tự do, chúng có thể tạo ra các trang web trông rất hỗn độn.
Bạn cũng có thể tạo ra chữ viết trên và dưới được sử dụng trong biểu thức toán học, công thức hóa học, hoặc đánh dấu các ghi chú.
Trong bài này chúng tôi sẽ giới thiệu với bạn những tính chất này cùng với vài ví dụ mà bạn sẽ sử dụng để sửa đổi trang Volcano Web. Trước hết có thể bạn muốn tham khảo đến trang kiểm tra phông chữ để biết được web browser của bạn có hổ trợ những tag được sử dụng trong bài học này không.
Kích cở phông chữ

Tag ... do NetScape giới thiệu có thể được sử dụng để đặt lại kích cở của phông chữ từ N là 1 (nhỏ nhất) tới 7 (lớn nhất) với cở 3 là kích cở bình thường:

• Cở phông = 1
  Cở phông = 2
  Cở phông = 3 -- cở chữ thường
  Cở phông = 4
  Cở phông = 5
  Cở phông = 6
  Cở phông = 7
  Cần nhớ rằng kích cở thật của chữ còn phụ thuộc vào phông chữ trên máy tính do người sử dụng đã chọn cho web browser của họ -- bạn đang điều chỉnh lại kích cở tương đối so với phông mặc định mà họ đã chọn.
  Chú ý: Nếu một web browser không hổ trợ cho tag <font>, bạn có thể thử những tag của HTML 3.0: <BIG>...</BIG> <SMALL>...</SMALL>sẽ cho bạn ít loại kích cở hơn nhưng vẫn có thể hữu ích cho những browser đó.
  Dạng HTML cho tag chỉnh cở phông là: blah blah blahtrong đó N=1 tới 7. Tag phông có thể được sử dụng chung với những tag định kiểu chữ khác (bài 5) hay bên trong các tag tiêu đề (bài 3). Một cách sử dụng khác của tag font là tạo ra một sự thay đổi kích cở tương đối:
  blah blah blah blah blah blahtức là, các giá trị +N hoặc-N cho biết độ dịch chuyển (offset) so với kích cở phông hiện tại. Chúng thường được sử dụng cùng với một tag khác: <basefont size=5>để thay đổi cở phông cơ bản (base font size) từ giá trị mặc định của nó là 3 thành một giá trị khác. Có thể bạn phải làm điều này trong một trang Web mà có hầu hết các văn bản với cở lớn hơn hoặc nhỏ hơn cở phông chuẩn. Với cách này, nếu bạn cần điều chỉnh một phần nhỏ của trang, bạn có thể sử dụng tag chỉnh cở phông tương đối như trên. Điểm mạnh của việc sử dụng tag chỉnh cở phông tương đối (ví dụ như SIZE=4) so với tag chỉnh cở phông tuyệt đối (ví dụ như size=5) là chúng ta có thể dễ dàng thay đổi cở của TẤT CẢ văn bản trong trang đó bằng một tag <basefont>.
  Chú ý: tag <basefont> không có tag đóng lại - nó vẫn là cở phông cơ sở cho đến khi một tag <basefont> khác xuất hiện.
  Trước hết chúng ta sẽ sử dụng tag chỉnh cở phông để sửa đổi tiêu đề của trang mở đầu:
  1. Mở tập tin index.html trong trình soạn thảo của bạn.
  2. Trước đây chúng ta đã sử dụng một tag tiêu đề <h1>..</h1> để định dạng cho tiêu đề cho trang này. Bây giờ chúng ta sẽ sử dụng vài tag chỉnh cở phông thay thế tạo một tiêu đề có cở hỗn hợp. Thay đổi dòng:
     <h1>Volcano Web</h1>thành: <B>VOLCANO WEB</B>Hãy nhìn cẩn thận chúng ta đã làm gì - V bây giờ đã tăng cở lên 4 đơn vị so với giá trị cơ bản, còn những ký tự khác (bây giờ dưới dạng chữ hoa) tăng lên 3 đơn vị so với giá trị cơ bản. Điều này tạo thành một cách trình bày của CHỮ HOA NHỎ (SMALL CAPS). Cũng lưu ý rằng chúng ta đã thêm tag <b>...</b> để làm tiêu đề nổi bật lên. Và cuối cùng, bởi vì chúng ta không sử dụng tag tiêu đề để tag này tự tạo ra sự ngắt dòng như mặc định, chúng ta phải thêm tag trong tiêu đề ở trên để ép buộc nó xuống dòng mới (sau này bạn sẽ thấy không cần vì dòng HTML kế tiếp là một <BLOCKQUOTE> và nó tự thêm sự ngắt dòng của nó - xem bài 13).
  3. Tiếp theo, chúng ta muốn làm lời chú thích của Pliny nổi bật hơn một chút nữa, vì thế chúng ta sẽ tăng nó lên thêm một cở nữa: <B><I>"Nature raves savagely, threatening the lands"</I></B><br>
  4. Lưu trữ và Nạp lại trong Web browser của bạn.
  Trước khi tiếp tục, chúng ta sẽ sử dụng tag chỉnh cở phông để sửa đổi hai trang Web khác trong bài của chúng ta. Đó là trang Volcanic Places in the USA (tập tin usa.html) và Research Project (tập tin proj.html) đang sử dụng tag <h2>...</h2> cho tiêu đề chính và tag <h3>...</h3> cho các phần đề mục con. Đến trình soạn thảo và thay đổi mỗi sự xuất hiện của tag: <h3>blah blah blah</h3>thành : <B>blah blah blah</B><br>Lưu ý là tag luôn luôn thêm một dòng mới cho văn bản theo sau và tag <br> tạo một ngắt dòng (không có dòng trắng) cho văn bản theo sau. Bạn có nhìn thấy được sự khác nhau giữa việc sử dụng tag <font> và tag <hN> cho phần tiêu đề không? Sự định dạng khác nhau này rất tinh tế, nhưng nó cung cấp cho bạn - tác giả của trang Web - một cách nhìn mới trong việc thiết kế trang Web. Nhưng nhớ rằng nếu browser của người đọc không hổ trợ tag chỉnh cở phông, tất cả chúng sẽ được nhìn thấy ở cở chữ bình thường.
  
  Hai Phương pháp để tạo Tiêu đề<h3>...</h3><b>
  ...</b><br>...before the next great innovation that rocked the world of rotten milk. History of Longhorn Cheese
  
  Longhorn cheese was first discovered by Alister Longhorn in 1754 when he... ...before the next great innovation that rocked the world of rotten milk. History of Longhorn Cheese
  Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...
  Màu của font
  
  Trong bài 16, chúng tôi đã giới thiệu những tag định màu sắc cho văn bản trong toàn bộ trang Web cùng với việc biểu diễn giá trị màu trong HTML. Bạn cũng có thể thêm những thuộc tính vào tag để định màu một đoạn văn bản xác định bằng cách sử dụng mã hệ thập lục phân hoặc tên của 16 màu:
  ...
  ...
  ...
  ...
  ...
  ... Chúng ta sẽ không đi sâu vào những rắc rối của tag màu, nhưng như là một ví dụ, chúng ta sẽ đổi màu của đoạn VOLCANO WEB mà chúng ta đã xét trong trang bìa. Nếu bạn vẫn còn nhớ, chúng ta đã sử dụng màu cho văn bản của trang này là màu vàng và chúng ta sẽ thay màu khác cho phần tiêu đề:
  1. Mở tập tin index.htm trong trình soạn thảo.
  2. Điều chỉnh dòng chứa chữ VOLCANO WEB thành như sau: <B>V OLCANO WEB</B>
  3. Lưu trữ và Reload trong Web browser.
  Chú ý: Các thuộc tính size và color có thể ở trong cùng một tag <font>. Ở đây kết quả làm cho chữ "V" có màu viôlét sáng và tăng cở hơn một đơn vị so với các chữ khác.
  Chữ trên và chữ dưới (Superscript and Subscript)
  
  HTML 3.0 cho phép bạn viết các biểu thức toán học, công thức hóa học, hoặc những biểu thức khác với superscript và/hay subscript. Những tag mới này nâng cao/hạ xuống đoạn văn bản "script" một nửa dòng và giảm bớt cở của nó một đơn vị. Dạng HTML cho những tag này là:
  
  Superscripts / SubscriptsHTMLKết quả^...superscript_...subscriptBây giờ chúng ta sẽ sử dụng các tag này cho trang Introduction của chúng ta:
  1. Mở tập tin intro.htm trong trình soạn thảo.
  2. Trước hết chúng ta sẽ sử dụng subscript để viết một vài công thức hóa học. Sau câu cuối cùng của đoạn 2 ("Compare the history of human beings...'), thêm câu sử dụng subscript sau: Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N₂), carbon dioxide (CO₂), and ammonia (NH₄).
  3. Bây giờ chúng ta sẽ sử dụng superscripts để biểu thị một trị lập phương. Bên dưới bảng được tạo ra bằng tag <pre>...</pre>, thêm câu sau: Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km³ in erupted volume) than ones observed by humans.
  4. Nếu bạn chú ý cột thứ ba của bảng, trước đây chúng ta sử dụng "km^3" để chỉ ra "km3". Mặc dầu đoạn văn này ở bên trong tag preformat, chúng ta vẫn có thể sử dụng tag superscript. Đổi: Volume in km^3thành Volume in km³
  Dạng phông (font face)
  
  Trong tiêu chuẩn HTML 3.2 hiện nay có thêm vài thông số cho tag để chỉ ra dạng phông dùng cho việc hiển thị. Chức năng này có thể không làm việc trên nhiều browser, vì thế bạn có thể thử kiểm tra xem browser của bạn có hổ trợ đổi dạng phông không. HTML cho việc chỉ định một dạng phông là:
  some textNếu browser của người đọc hổ trợ đặc tính font FACE và họ có một danh sách các phông đã được cài đặt sẵn trên máy tính của họ, thì văn bản sẽ được hiển thị theo dạng phông được chỉ định. Ngược lại, browser sẽ sử dụng cùng một phông với phần còn lại của trang web. Nếu bạn quyết định sử dụng một dạng phông, bạn nên sử dụng các dạng phông chuẩn hoặc là chắc chắn rằng các máy tính của người dùng đã cài đặt thêm dạng phông đó.
  Bây giờ chúng ta sẽ điều chỉnh tag cho trang tiêu đề để từ "Volcano Web" xuất hiện ở một dạng font khác:
  1. Mở tập tin index.htm trong trình soạn thảo.
  2. Sửa đổi dòng chứa đoạn văn VOLCANO WEB thành: <B>V OLCANO WEB</B>
  3. Lưu trữ và Reload trong Web browser .
  Chú ý: Chúng ta chỉ định cho browser chọn phông Arial với Windows, Helvetica cho Macintosh và/hay các máy tính chưa được cài đặt phông Arial. Sử dụng tính chất này của HTML với sự thận trọng! Nghệ thuật sử dụng dạng phông khác hoàn toàn với sự lạm dụng chúng!
  Kiểm tra lại công việc của bạn
  
  So sánh trang web của bạn với ví dụ mẫu để biết dạng hiển thị của nó. Nếu trang của bạn khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã đánh trong trình soạn thảo. Xem lại
  
  Xem lại những chủ đề sau:
  1. Làm thế nào thay đổi cở và màu sắc của một phần văn bản trong một trang Web?
  2. Bạn có thể sử dụng dạng HTML nào nếu browser không hỗ trợ tag <font>...?
  3. Làm thế nào bạn tạo được subscript trong HTML?
  4. Làm thế nào tạo được một khối văn bản để được trình bày dưới một dạng phông xác định?
  Thông tin bổ sung
  
  Dưới đây là hai kiểu nữa được cho phép trong HTML 3.2 và có thể đang được chấp nhận trong web browser của bạn. Các tag Định kiểuHTMLKết quả<u>This is Underline...</u>This is Underline
  <strike>This is Strike-through...</strike>This is Strike-through
  Và cuối cùng, có một điểm tế nhị về màu sắc của văn bản mà một lúc nào đó bạn có thể thấy sự hữu ích. Trong bài 16, chúng ta đã học cách sử dụng tag <body> để tạo màu cho nền, văn bản, và các liên kết. Nếu chúng ta tô màu một khối văn bản với tag <font> , nó sẽ chỉ tác động lên phần thân văn bản, mà không tác động lên các liên kết siêu văn bản - có nghĩa là chúng vẫn được giữ màu xanh mặc định hoặc là màu được xác định trong tag <body>. Màu Liên kết Mặc địnhHTMLKết quảIt was a long time after the sad death of <A HREF="https://www.longhorn.org/sir/">Sir Longhorn</A> that someone was able to recreate his formula.It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula. Chúng ta có thể thay đổi màu của liên kết siêu văn bản bằng cách đặt các tag bên trong một liên kết anchor. Lưu ý rằng điều này chỉ có hiệu quả cho các liên kết chưa được xem; một khi bạn đã thấy trên màn hình trang tương ứng của liên kết, nó sẽ được tô bởi màu liên kết đã xem, tức là màu tím mặc định: Màu Liên kết được Sửa đổiIt was a long time after the sad death of <A HREF="https://www.longhorn.org/sir/">Sir Longhorn</A> that someone was able to recreate his formula.It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.
  Thực tập tự do
  
  Thử tìm kinh nghiệm với các tag <font>... trong trang web riêng của bạn. Cũng nên xem thử nó hoạt động như thế nào bên trong các tag <hN>...</hN>. Tìm kinh nghiệm với việc sử dụng các phông khác nhau, ngay cả với các phông lung tung! Tìm vài chỗ mà bạn nghĩ rằng bạn có thể cần superscript hay subscript. Một ví dụ có thể là các chú thích - bạn có thể đánh mã số hay ký tự cho chúng, sau đó làm cho mỗi chú thích thành một liên kết siêu văn bản đến một vùng chú thích (hay đến một trang riêng có các ghi chú chung):
  ... and after Linberger and Gordon's 1963 study12 on the effects of temperature on cheese maturation, Gange and Walters (1964)13 as well as Colby (1969)14 reached the same conclusion. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
  12.Linberger and Gordon's experiments were controversial because of their radical techniques of temperature control.
  13.Gange and Walters actually did not reach the same conclusion until their results had been verified by J.D. Smith. For more information see, Cheese Abtracts 1964, pp.234-239
  14.Colby never received appropriate recongition for his pioneering work in the cheese field, and died penniless.
  Đến bài tiếp theo....
  
  Các thước kẻ to? Thước kẻ lớn? Thước kẻ cầm tay? Thêm thông số cho <hr>

19. Easy Hard Rules

Bạn có bị lúng túng không? Đây chỉ là một trong các thông số tạo ra
để phân chia những phần khác nhau của một trang Web.
Mục đích

Sau bài học này bạn có thể:

• Tạo những đường hard rule với độ dày mỏng khác nhau.
• Tạo những đường hard rule với chiều rộng khác nhau.
• Tạo những đường hard rule không có bóng mờ.

Bài học

Lưu ý: Chúng ta sẽ không sửa đổi trang Web của chúng ta trong bài học này - vì thế bạn có thể xem lại và quyết định sử dụng nó nếu bạn muốn có kinh nghiệm với nó. Trước hết bạn có thể xem qua trang kiểm tra để xem web browser của bạn có hổ trợ những tag trong bài này hay không.
Sự mở rộng đầu tiên cho HTML của Netsacpe là cung cấp một vài thông số định dạng cho tag <hr> (Hard Rule) - xem bài 4). Mặc nhiên, NetScape Browser tự động hiển thị một đường thẳng đậm ba chiều, có bóng mờ trông tốt hơn là một đường thẳng trong các web browser trước đó.
Độ dày của đường

Khả năng đầu tiên để tạo ra những đường có độ dày khác nhau bằng cách sử dụng thông số:
<hr size=N>trong đó N là độ dày của đường tính bằng số điểm. Chúng ta hãy xem vài ví dụ để thấy được hiệu ứng (trong trang có nền trắng như trang này hiệu quả không được rõ lắm):

<hr SIZE=4> same as <hr> : <hr size=8> :
<hr SIZE=40> :

Chiều rộng của đường

Thông số định dạng khác cho tag <hr> là điều chỉnh độ rộng của đường - không cần thiết phải trải nó ngang ra toàn bộ trang. Bạn có thể làm điều này bằng cách sử dụng dạng sau:
<hr width=X> <hr width=Z%>Trong đó X là số điểm của chiều rộng còn Z là tỷ lệ phần trăm của trang hiện hành. Thông thường, chúng tôi đề nghị sử dụng dạng tỷ lệ phần trăm vì nó sẽ tự điều chỉnh theo độ rộng cửa sổ browser đang được người đọc sử dụng (vài người sử dụng màn hình có độ phân giải cao trong khi các người khác chỉ có màn ảnh 13").
Sau đây là một vài ví dụ (hãy xem cách chúng ta thêm luôn tag size):
<hr width=80 SIZE=40> : <hr width=80% SIZE=40> :
Chú ý: Thử co vào và/hay dãn ra độ rộng cửa sổ web browser của bạn để thấy sự khác nhau giữa việc chỉ định chiều rộng theo số điểm tuyệt đối (width=80) so với chỉ định theo tỷ lệ phần trăm của trang web (width=80%)
<hr width=40% SIZE=40> :
<hr width=5% SIZE=40> :
Không có bóng

Cuối cùng, có thể có trường hợp mà bạn không muốn bóng ba chiều trên tag <hr>. Nó chỉ đơn giản như sau:
<hr width=80% size=6 noshade> :
Xem lại

Xem lại những chủ đề sau :

1. Làm thế nào thay đổi độ dày của một hard rule?
2. Làm thế nào thay đổi chiều rộng của một hard rule?
3. Thuộc tính noshade bên trong tag <hr> tạo ra hiệu ứng gì?

Thực tập tự do

Tạo kinh nghiệm bằng một vài thuộc tính cho <hr> trong các trang web của bạn.
Đến phần tiếp theo....

Chuyển văn bản về trái... không! về phải... không! vào giữa...

20. Xét thêm về Sự Chỉnh lề

Tại sao bạn chỉ ở bên trái?

Mục đích

Sau bài học này bạn có thể:

• Tạo văn bản được canh vào giữa trang.
• Sắp xếp chung hình ảnh và văn bản.
• Tạo văn bản được chỉnh lề bên phải.

Bài học

Chú ý: Nếu bạn chưa có tài liệu từ những bài học trước, bạn có thể download bây giờ. Bạn cũng có thể xem qua trang kiểm tra để biết web browser của bạn có hổ trợ những tag được sử dụng trong bài này hay không.
Sự chỉnh lề văn bản

Khi mà Web ngày càng phát triển, ngày càng xuất hiện thêm các yêu cầu cho việc điều khiển cách trình bày của trang. Một trong những ý muốn đó là định dạng văn bản sao cho nó được sắp xếp ngay giữa trang, hơn là chỉ được canh lề bên trái.
Đây là một trong những đặc tính khác hẳn giữa NetScape so với HTML "tiêu chuẩn". NetScape đã giới thiệu tag mở rộng <center>...</center> - tag này sắp xếp mọi thứ bên trong nó ở ngay giữa trang web. Dường như nó gây ra ấn tượng hơn? Vậy thì, bạn hãy nói với một nhà làm chuẩn rằng sự chỉnh lề hàng là một đặc tính. Dạng HTML tổng quát cho sự sắp xếp vào giữa là một sự biến đổi của tag :
blah blah blah <img src="file.gif"><br> blah blah Lưu ý rằng ở đây có tag đóng . Mỗi lần bạn muốn canh giữa một vài đoạn văn bản, bạn đánh dấu chúng bằng ...
Hiện nay, hầu hết các loại browser và chuẩn HTML 3.2 đều hổ trợ tag <center>...</center> của NetScape. Nhớ rằng nếu browser không hổ trợ một tag, nó chỉ việc bỏ qua.
Để thấy được hiệu quả của việc canh giữa, hãy so sánh trong ví dụ dưới đây:

Không canh GiữaCheese In History

Cheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

return to the cheese home page

Được canh GiữaCheese In History

Cheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

return to the cheese home page
Giờ đây chúng ta sẽ sửa đổi trang bìa của chúng ta (index.htm) bằng cách sử dụng tag canh giữa trên danh sách các phần của bài học. Chúng ta cũng sẽ tạo một vài thay đổi để cải thiện sự trình bày của nó.

1. Mở tập tin index.htm trong trình soạn thảo.
2. Tìm phần sau: <B>In this Lesson...</B> <ul> <i> <li><A HREF="intro.htm">Introduction</A> <li><A HREF="term.htm">Volcano Terminology</A> <li><A HREF="usa.htm">Volcanic Places in the USA</A> <li><A HREF="mars.htm">Volcanic Places on Mars</A> <li><A HREF="proj.htm">Research Project</A> </i> </ul>và thay thế nó bằng đoạn HTML sau: <i> <A HREF="intro.htm">Introduction</A><br> <A HREF="term.htm">Volcano Terminology</A><br> <A HREF="usa.htm">Volcanic Places in the USA</A><br> <A HREF="mars.htm">Volcanic Places on Mars</A><br> <A HREF="proj.htm">Research Project</A><br> </i>
3. Lưu trữ và Nạp lại trong Web browser của bạn.

Chú ý: Hãy nhìn một cách cẩn thận những thay đổi mà chúng ta đã thực hiện. Toàn bộ phần này được bao quanh trong tag .. của sự chỉnh lề. Danh sách không có thứ tự mà chúng ta đã xây dựng trong bài 6 được canh vào giữa một cách lổ chổ - các dấu bullet sẽ bị lộn xộn. Vì thế chúng ta sẽ bỏ đi cấu trúc <ul> <li> ... <li> ... </ul>. Các tag <br> ở cuối mỗi dòng sẽ tạo một ngắt dòng. Và cuối cùng, chúng ta thêm một tag <font>... để tăng cỡ văn bản. Nếu muốn bạn có thể sử dụng tag <center>...</center> thay cho tag ...

Bạn có thể muốn so sánh tập tin HTML của bạn đối với ví dụ mẫu để biết được nó nên xuất hiện như thế nào.
Mọi tag tiêu đề (header) <hN>...</hN> đều có thể canh giữa bằng cách thêm một thuộc tính như sau:
<hN align=center>blah blah blah</hN>Bây giờ chúng ta sẽ sử dụng thuộc tính này để canh giữa tựa đề của mỗi trang Web:

1. Mở tất cả file HTML của bạn trong trình soạn thảo.
2. Với mỗi một trang, sửa chữa lại văn bản xuất hiện ở gần đỉnh trong tag <h1> hay tag <h2> theo như ví dụ dưới đây cho tập tin intro.htm, thay đổi từ: <h2>Introduction</h2>thành <h2 align=center>Introduction</h2>
3. Lưu trữ và Reload trong Web browser của bạn.

Chú ý: Cũng có một thuộc tính chỉnh lề cho tag <hr> phù hợp với các thông số khác mà chúng ta đã xem trong bài 19 "Easy Hard Rules". Khi bạn chỉ định một chiều rộng ngắn hơn cho một hard rule, bạn cũng có thể chỉ định canh lề cho nó về bên phải hay bên trái (theo mặc định các hard rule được canh vào giữa trang): <hr size=8 width=60% align=right>sẽ tạo ra:
trong khi sử dụng canh lề trái <hr size=8 width=60% align=left>sẽ cho kết quả là:
Sự sắp xếp giữa Hình ảnh và Văn bản

Trong bài 7a chúng ta đã xét cách đặt hình ảnh vào trong trang Web của chúng ta và đã thấy rằng có thể có một dòng văn bản được sắp xếp ở trên hoặc cuối một hình ảnh. Tuy nhiên, cho đến tận bây giờ, chúng ta chưa thể có một khối văn bản và một hình ảnh inline nằm cạnh nhau.
Với việc thêm thuộc tính align vào tag <img> giờ đây bạn có thể có chỉ định hình ảnh tự sắp về bên trái hay bên phải của trang. Nhưng hơn thế nữa chúng ta có thể có các văn bản HTML khác "lấp đầy" những khoảng trống quanh hình. HTML để thực hiện điều này là:
<img src="filename.gif" align=right> <img src="filename.gif" align=left>Hãy so sánh hai ví dụ sau đây:

không có thuộc tính align
align=bottom
Cheese In History

Cheese was been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.
có văn bản đi theo
align=left Cheese In History

Cheese was been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. Hãy co dãn cửa sổ browser của bạn để thấy các hiệu ứng trong trang của bạn với việc sắp xếp hình ảnh/văn bản.
Thêm một điều lưu ý nữa. Có khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh. Có một thuộc tính cho tag <br> để xoá đi sự sắp xếp, ví dụ như:
<br clear=left> <br clear=right> <br clear=all>sẽ "xóa" bất kỳ sự sắp xếp nào đã được cài đặt trong tag <img> trước đó. Chúng tôi đề nghị bạn luôn luôn sử dụng những tag này bởi vì sự sắp xếp sẽ phụ thuộc rất nhiều vào phông chữ trên browser của người đọc và độ rộng cửa sổ browser của họ.
Bây giờ chúng ta sẽ trở lại trang index.htm để định dạng lại phần mở đầu. Hình trông có vẻ đẹp, nhưng nó lại chiếm quá nhiều hàng trước khi các văn bản được trình bày. Chúng ta sẽ sử dụng sự sắp xếp hình ảnh/văn bản để đặt văn bản kế cận bên hình ảnh.

1. Mở tập tin index.htm trong trình soạn thảo.
2. Tìm phần sau: <img alt="A Lesson on:" src="../pictures/lava.gif"> <B>V OLCANO WEB</B> <BLOCKQUOTE> <B><I>"Nature raves savagely, threatening the lands"</I></B><br> -- <A HREF="https://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. </BLOCKQUOTE> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results.và thay nó bằng: <img alt="A Lesson on:" src="../pictures/lava.gif" align=left> <B><I> "Nature raves savagely, threatening the lands" </I></B><br> -- <A HREF="https://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <B>V OLCANO WEB</B> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. <br clear=left>
3. Lưu trữ và Nạp lại trong Web browser của bạn.

Chú ý: Mọi thứ ở giữa tag <img... align=left> và tag <br clear=left> sẽ được sắp chung với hình ảnh - hình ở bên trái và phần HTML trong các vị trí trống còn lại.Chúng ta cũng để câu trích dẫn lên đầu để gây sự chú ý. Với dạng trình bày này, tag <blockquote> không còn có hiệu quả nữa, do vậy nó được xóa bỏ.

Nếu muốn, bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết tại đây nên trình bày như thế nào.
Chỉnh lề (Justification)/Sắp xếp (Alignment) văn bản

Chúng ta sẽ thêm một tag sắp xếp nữa là tag "divisions" ..., được giới thiệu trong HTML 3.0. Tất cả văn bản bên trong tag này được chỉnh lề dựa vào thuộc tính align:
... ... ...Lưu ý rằng thuộc tính center có hiệu quả giống như tag <center>...</center> của NetScape.
Bây giờ chúng ta sẽ sử dụng tag này để làm cho đoạn văn bản trong phần ghi chú mở đầu của trang bìa được chỉnh lề ở bên phải của trang:

1. Mở tập tin index.htm trong trình soạn thảo.
2. Thêm tag and như dưới đây: <B><I> "Nature raves savagely, threatening the lands" </I></B><br> -- <A HREF="https://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <B>V OLCANO WEB</B>
3. Lưu trữ và Reload trong Web browser của bạn.

Kiểm tra lại công việc của bạn

So sánh trang Web của bạn với ví dụ mẫu để xem nó nên xuất hiện như thế nào. Nếu trang của bạn khác với mẫu hay các liên kết siêu văn bản không hoạt động đúng, kiểm tra lại văn bản bạn đánh vào trong trình soạn thảo.
Xem lại

Xem lại những chủ đề sau :

1. Làm thế nào để cho một phần nào đó trong trang web của bạn được canh vào giữa?
2. Cách nào đúng nhất để làm cho một hình ảnh được sắp xếp bên lề phải của trang Web?
3. Làm cách nào bạn tạo ra một văn bản được chỉnh lề phải?

Đến phần tiếp theo....
<!-- / message --><!-- Gioi thieu qua yahoo --><!-- / Gioi thieu qua yahoo --><!-- sig -->

22. Xét thêm về Hình ảnh và Danh sách

[SIZE=+1]Hãy làm bốc hơi thoát ra khỏi những hộp dễ gây tức giận bao quanh các button hình ảnh và[/SIZE]

• [SIZE=+1]
• biểu diễn
• những
• bullet[/SIZE]

1. [SIZE=+1]
2. cộng thêm với
3. việc thay đổi
4. kiểu số
5. và
6. giá trị các
7. phần tử trong danh sách[/SIZE]

Mục đích

Sau bài học này bạn có thể:

• Tạo một hình ảnh siêu liên kết không có đường viền xung quanh.
• Viết HTML cho một danh sách không có thứ tự sử dụng các dấu bullet khác nhau.
• Tạo một danh sách có thứ tự được đánh số bằng chữ hoa hay chữ thường, hoặc là những số La mã lớn hoặc nhỏ.
• Sửa đổi một danh sách có thứ tự để bắt đầu đánh số từ một trị dương bất kỳ.

Bài học

Lưu ý: Nếu bạn không có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ. Bạn cũng có thể xem qua trang kiểm tra để biết browser của bạn có hổ trợ các tag được sử dụng trong bài này không.

Không có Đường viền trên Hình ảnh Siêu liên kết

Trong bài 8e chúng ta đã biết làm thế nào để một hình ảnh hoạt động như một siêu liên kết đến những trang Web khác hay đến một bản sao lớn hơn của hình ảnh. Chúng ta nhận thấy là browser đặt một hộp đường viền quanh hình ảnh, để cho biết rằng đó là một "hyper" như các mục siêu văn bản khác.
hoạt động như bất kỳ một liên kết siêu văn bản nào khác.
Tuy nhiên, cái hộp đôi lúc tạo ra sự cản trở, nhất là trong trường hợp chúng ta có một hình có sẵn đường viền không vuông vức. Người sử dụng về nguyên tắc vẫn xác định được một hình ảnh là "hyper" nếu dạng dấu nháy thay đổi khi di chuyển chuột băng qua hình ảnh (nó thường chuyển thành hình "bàn tay" khi ở trên một liên kết hoạt động được).
Bạn có thể "bỏ đi" hộp bao quanh bằng cách thêm thuộc tính vào tag <img...> như sau:
<a href="bigpict.gif"><img src="lilpict.gif" border=0>Trong ví dụ này, hình ảnh lilpict.gif hoạt động như một siêu liên kết đến một hình ảnh lớn hơn là bigpict.gif. Thuộc tính border=0 không có nghĩa gì cả nếu như tag <img..> không ở bên trong một tag <a href=...</a> khác.
Chúng ta đã có hai chỗ trong bài Volcano Web của chúng ta có hình ảnh inline siêu liên kết - Bạn có nhớ ở đâu không?
Cái đầu tiên trong tập tin usa.htm, trong đó một hình ảnh nhỏ của máy đo địa chấn liên kết đến một hình ảnh lớn hơn. Cái thứ hai là dấu mũi tên trong trang msh.htm để quay lại phần bài học.

1. Mở cả hai tập tin usa.htm và msh.htm trong trình soạn thảo.
2. Tìm ra nơi mà chúng ta đã đặt hình ảnh nhỏ có liên kết đến thứ khác.
3. Sửa đổi mỗi tag <img src=....> để nó là một siêu liên kết và có chứa một thuộc tính border=0 . Lấy ví dụ, trong tập tin msh.htm nó sẽ trông giống như sau: <a href="usa.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a>
4. Lưu trữ và Nạp lại các tập tin usa.htm và msh.htm trong browser của bạn.
5. Nếu các hình nhỏ không còn đường viền và vẫn nối đến đúng nơi cần thiết khi bạn click vào, công việc của bạn coi như đã xong.

Các bullet cho Danh sách Không có Thứ tự

Trong bài 6 chúng ta đã tạo các danh sách không có thứ tự <ul>...</ul>. Web browser tự động đặt một dấu bullet phía trước mỗi mục của danh sách - và dấu bullet sẽ tự thay đổi nếu chúng ta tạo một danh sách nữa bên trong một danh sách. Với vài loại browser bạn có thể chỉ định trong HTML một trong ba loại bullet sẽ sử dụng bằng cách thêm thuộc tính vào tag <ul>:
<ul type=xxxx>trong đó xxxx có thể là:

• type=circle
• type=square
• type=disc [bullet mặc định cho danh sách cấp ngoài cùng]

Hơn thế nữa! Bạn có thể thay đổi loại bên trong một danh sách bằng cách đặt một thuộc tính type trong tag <li>: HTMLNó nhìn thấy như thế nào<ul type=square><li>this is item 1<li>this is item 2<li>this is item 3<li type=circle> Hey! how about these bullets?<li>this is another item<li>and one more<li type=disc> Hey! how about these bullets?</ul>

• this is item 1
• this is item 2
• this is item 3
• Hey! how about these bullets?
• this is another item
• and one more
• Hey! how about these bullets?

Lưu ý rằng loại được chỉ định trong tag <li type=xxxx> vẫn được sử dụng cho tất cả các tag <li> tiếp theo cho đến khi nào một loại bullet khác được chọn.
Bây giờ, chúng ta sẽ thay đổi loại bullet trong trang Research Projects của chúng ta (tập tin proj.htm).

1. Mở tập tin proj.htm trong trình soạn thảo.
2. Dòng đầu tiên trong tập tin này là một danh sách có thứ tự <ol>...</ol> nhưng bây giờ chúng ta đổi nó thành một danh sách không có thứ tự với bullet circle. Sửa đổi lại HTML cho danh sách đầu tiên thành: <ul type=circle> <li>Type of volcano <li>Geographic location <li>Name, distance, and population of nearest major city <li>Date of most recent eruption and date of most destructive eruption <li>Other events associated with the last eruption (earthquakes, floods, mudslides, etc) </ul>
3. Lưu trữ và Nạp lại tập tin của bạn trong browser. Bạn có thể so sánh trang Web của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào tại đây.

Các kiểu và Giá trị cho Danh sách Có thứ tự

Khi chúng ta tạo ra một danh sách có thứ tự <ol>...</ol> lần đầu tiên trong bài 6, chúng ta đã thấy cách browser tự động đánh số thứ tự cho các mục do tag <li> chỉ định. Chúng ta sẽ làm gì khi chúng ta không muốn sử dụng các số Ả rập (1,2,3...)? Tốt thôi, đây là câu trả lời, sử dụng thuộc tính type=x bên trong các tag <ol> và <li>:
Số Ả RậpChữ HoaChữ ThườngSố La Mã LớnSố La Mã Nhỏ<ol type=1><ol type=A><ol type=a><ol type=I><ol type=i>

1. Tôi đầu tiên!
2. Tôi thứ hai!
3. Tôi thứ ba!
4. Tôi thứ tư!
5. Tôi thứ năm!

1. Tôi đầu tiên!
2. Tôi thứ hai!
3. Tôi thứ ba!
4. Tôi thứ tư!
5. Tôi thứ năm!

1. Tôi đầu tiên!
2. Tôi thứ hai!
3. Tôi thứ ba!
4. Tôi thứ tư!
5. Tôi thứ năm!

1. Tôi đầu tiên!
2. Tôi thứ hai!
3. Tôi thứ ba!
4. Tôi thứ tư!
5. Tôi thứ năm!

1. Tôi đầu tiên!
2. Tôi thứ hai!
3. Tôi thứ ba!
4. Tôi thứ tư!
5. Tôi thứ năm!

Chúng ta đã thấy một ví dụ của việc sử dụng danh sách có thứ tự bên trong một danh sách có thứ tự khác khi trình bày trang - với thuộc tính type chúng ta có thể có những trang với dạng trình bày chuẩn như:

1. Cheese in Pre-Historic time
   1. Africa
      1. Afar Triangle
      2. East Coast
   2. Asia
   3. Europe
      1. France
         1. Cave paintings depicting cheese harvesting
         2. Burial rituals inferred from dried cheese remnants
      2. British Isles
   4. North America
2. Cheese in the Middle Ages
   1. King Arthur's Longhorn
   2. Sharp Cheddar for the Crusades
3. Cheese in the Space Age

Một thứ khác chúng ta có thể làm với danh sách có thứ tự là để nó bắt đầu đếm từ một giá trị không phải là 1. Để làm điều này chúng ta thêm thuộc tính start=y vào tag <ol>. Lưu ý rằng ngay cả chúng ta sử dụng các thuộc tính type=x khác, chúng ta vẫn chỉ định được giá trị bắt đầu y theo dạng như "2, 3, 10, 100, ...". Hãy xem vài ví dụ sau: Số Ả RậpChữ HoaChữ ThườngSố La Mả LớnSố La Mả Nhỏ<ol type=1
start=11><ol type=A
start=11><ol type=a
start=11><ol type=I
start=11><ol type=i
start=11>

1. Tôi thứ 11!
2. Tôi thứ 12!
3. Tôi thứ 13!
4. Tôi thứ 14!
5. Tôi thứ 15!

1. Tôi thứ 11!
2. Tôi thứ 12!
3. Tôi thứ 13!
4. Tôi thứ 14!
5. Tôi thứ 15!

1. Tôi thứ 11!
2. Tôi thứ 12!
3. Tôi thứ 13!
4. Tôi thứ 14!
5. Tôi thứ 15!

1. Tôi thứ 11!
2. Tôi thứ 12!
3. Tôi thứ 13!
4. Tôi thứ 14!
5. Tôi thứ 15!

1. Tôi thứ 11!
2. Tôi thứ 12!
3. Tôi thứ 13!
4. Tôi thứ 14!
5. Tôi thứ 15!

Và cuối cùng bạn có thể thay đổi thứ tự số bên trong một danh sách bằng cách thêm thuộc tính value=z vào tag <li>. Hãy xem ví dụ sau: HTMLNó xem Như thế nào<ol type=A start=5><i>Important Cheese Laws</i><br><li>Cheese Curing Act of 1905<li>Milk Content Ruling of 1923<li value=12>Cheese Import Tariff of 1942<li>Cheese Freshness Codes of 1942<li value=1>Cheese Values Act of 1789

1. Important Cheese Laws
2. Cheese Curing Act of 1905
3. Milk Content Ruling of 1923
4. Cheese Import Tarif of 1942
5. Cheese Freshness Codes of 1942
6. Cheese Values Act of 1789

Không thể nói rõ lắm (nhất là trong ví dụ này) khi nào bạn có thể cần phải sử dụng các tag này - chỉ cần nhớ rằng bạn có khả năng làm điều đó khi viết trang web của bạn. Chúng ta sẽ minh họa thêm một lần nữa trong trang Research Projects (tập tin proj.htm). Nếu bạn nhớ lại trong bài về bảng chúng ta đã chia danh sách không có thứ tự của những site cần tham khảo thành hai cột. Hãy đổi nó thành một danh sách có thứ tự và sử dụng thuộc tính type để liệt kê chúng, sử dụng chữ thường để đánh số thứ tự. Vì thật sự chúng ta có đến hai danh sách, hãy xem cách tại sao chúng ta quyết định sử dụng thuộc tính start.

1. Mở tập tin proj.htm trong trình soạn thảo.
2. Hãy tìm bảng chúng ta đã tạo dưới phần References. Thay đổi cả hai tag <ul> và </ul> thành tag <ol type=a> và </ol>
3. Bây giờ chúng ta đã có 5 mục trong danh sách thứ nhất, vì thế chúng ta muốn danh sách thứ 2 bắt đầu đánh số từ 6. Sửa đổi tag <ol> thành: <ol type=a start=6>
4. Lưu trữ và Nạp lại trong browser của bạn. So sánh trang của bạn với trang mẫu để xem danh sách của bạn nên xuất hiện như thế nào. Cột các mục đầu tiên được đánh thứ tự từ "a" đến "e" còn cột thứ hai từ "f" đến "k"

Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào. Nếu trang của bạn khác với mẫu, kiểm tra lại các văn bản bạn đã đánh trong trình soạn thảo.
Xem lại

Xem lại những chủ đề sau :

1. Làm thế nào bỏ được hộp liên kết bao quanh một hình ảnh khi hình ảnh này là một siêu liên kết?
2. Làm thế nào thay đổi dấu bullet cho một danh sách không có thứ tự ?
3. Browser có sử dụng cùng một dấu bullet cho tất cả các danh sách không? Nếu không, làm thế nào để đổi dấu bullet cho các danh sách con?
4. Bạn có thể tạo một danh sách mà mỗi mục được đánh thứ tự bằng một số La mã không?

Thực tập tự do

Hãy tạo kinh nghiệm với các kiểu dấu bullet và đánh số thứ tự khác nhau cho danh sách trong trang web riêng của bạn. Bạn có nghĩ ra vài cách cố định cho các tính chất này không? Bạn có thể tạo ra cách trình bày phức tạp như dạng trình bày "chuẩn" không? Mọi điều về tag
<ol>...</ol>bây giờ trở nên khá phức tạp!
Đến phần tiếp theo....

Click và đến các phần được liên kết khác nhau trong cùng một hình ảnh...

23. Bản đồ Hình ảnh Liên kết

Hãy làm cho các phần khác nhau trong một hình ảnh inline hoạt động như một liên kết dựa trên bản đồ hình ảnh của client ...
Mục đích

Sau bài học này bạn có thể:

• Hiểu được sự khác nhau giữa tiến trình về phía server (server-side process) và tiến trình về phía client (client-side process).
• Tạo được một hình ảnh inline có những phần khác nhau làm siêu liên kết tới những trang Web, hình ảnh, và những site khác trên Internet.

Bài học

Lưu ý : Nếu bạn chưa có tài liệu từ những bài trước, hãy download ngay bây giờ. Bạn cũng có thể xem trước trang kiểm tra để biết browser của bạn có hổ trợ những tag được sử dụng trong bài này không.
Trong bài 7a chúng ta đã biết làm thế nào để viết HTML cho việc đặt một hình ảnh inline trong trang Web, và trong bài 8e chúng ta cũng đã biết rằng có thể làm cho toàn bộ hình ảnh hoạt động như là một siêu liên kết đến một mục có liên quan khác. Từ những ngày đầu tiên của Web, đã có một cách để những phần khác nhau trong một hình ảnh inline trở thành siêu liên kết -- được biết dưới tên gọi là "Bản đồ hình ảnh liên kết" (clickable image map).
Nhưng mãi cho đến thời gian gần đây, bản đồ hình ảnh liên kết vẫn đòi hỏi một vài thứ được xử lý từ trên web server. Đây là cách hoạt động của nó:

1. Người đọc xem trang có bản đồ hình ảnh liên kết và... nhấn vào phần thấp nhất bên phải của hình ảnh.
2. Web browser nói, "À! Tôi đã nhận được một sự nhấn chuột trên hình này! Tôi gởi một thông báo đến Web server - một người nào đó đã click vào tọa độ này của hình."
3. Web server nói, "Hmmm. Tôi đã nhận được các tọa độ của hình này - Các tọa độ này được dò tìm trong một tập tin do tập tin HTML qui định... Tập tin này nói, Được rồi, các tọa độ này được tìm thấy trong một vùng chữ nhật và hãy gởi đến người xem URL này của tôi" Rồi server gởi thông tin này lại cho web browser.
4. Web browser nói, "Đồng ý! server đã nói hãy đến URL này - Chúng ta đi đến đó!"

Đây là một tiến trình về phía server; một tiến trình khá hiệu quả và server có thể xử lý nó trong vài phần giây. Nhưng nó cũng có nghĩa là sử dụng một bản đồ hình ảnh liên kết luôn luôn phải truy xuất vào server.
Spyglass là browser đầu tiên có khả năng xử lý việc tính toán và truyền chính xác URL dựa trên các tọa độ mà việc này được thực hiện ngay bên trong phần HTML của trang. Đây là một tiến trình về phía client. Tất cả việc làm chúng ta vừa nói ở trên bây giờ chỉ được giải quyết nhờ vào browser và phần HTML của trang! Để biết thêm chi tiết về bản đồ hình ảnh, hãy xem Imagemap Help Page (IHiP).
Dạng HTML cho một bản đồ hình ảnh liên kết về phía client (client-side clickable image map) là:
<img src="image.gif" usemap="#map_name">trong đó image.gif là tên tập tin hình ảnh và map_name là một liên kết anchor (xem bài 8d) ở đâu đó trong cùng tập tin HTML và có dạng:
<map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2> : : </map>Mỗi dòng trong tag <map>...</map> xác định một vùng "nóng" khác nhau dựa trên các toạ độ được chỉ định bằng coords=. Trị x1,y1 cho biết tọa độ tính theo chiều ngang và chiều cao của điểm ở góc trên bên trái (tính tương đối so với góc trên bên trái của toàn hình ảnh), còn x2,y2 cho biết tọa độ tính theo chiều ngang và chiều cao của điểm ở góc dưới bên phải. URL1, URL2, ... là các URL (hoặc tên tập tin cục bộ) cho vùng tương ứng khi được click. Chú ý: Để chỉ định các tọa độ cho vùng nóng, bạn cần sử dụng một vài loại chương trình đồ họa. Yahoo có vài trình tiện ích khác giúp bạn làm việc này dễ dàng hơn. Với bài này, chúng tôi sẽ cung cấp sẵn các tọa độ chính xác cho bạn.
Trong bài này chúng ta sẽ thêm vào trang Volcano Terminology (tập tin term.htm) một hình ảnh chỉ ra các các núi lửa khác nhau đã hoạt động lại. Mỗi vị trí trong hình sẽ tạo siêu liên kết đến một web site bên ngoài. Ngoài ra chúng ta sẽ tạo thêm hai liên kết nữa đến các tập tin riêng (cục bộ).

1. Trước tiên, bạn cần chép lại một bản sao của tập tin ảnh dùng Trung tâm Download Hình ảnh Bài 23. Cất tập tin này thành volc.jpg và chắc chắn rằng bạn đã lưu nó vào trong subdirectory/folder pictures.
2. Mở tập tin term.htm trong trình soạn thảo.
3. Phía dưới đoạn cuối cùng ("...a historically active volcano on the island of Martinique. "), thêm đoạn HTML sau: There are many different types of volcanic eruptions and landforms. They can be classified according to the degree of "explosiveness" and the height of the eruption column:<center>Investigate each type by clicking on a picture<br><img src="../pictures/volc.jpg" usemap="#volcmap" border=0></center> Chú ý: Chúng ta đã thêm vào một hình ảnh inline cùng với việc tham khảo một tập các tọa độ kết hợp với tên "volcmap". Tag <center>...</center> đưa hình ảnh vào giữa trang (xem bài 20). Thuộc tính border=0 bên trong tag <img> hủy bỏ việc thể hiện hộp bao quanh hình ảnh siêu liên kết.
   
4. Kế tiếp chúng ta sẽ thêm đoạn HTML cho các tọa độ của bản đồ liên kết. Đoạn này có thể để bất kỳ chỗ nào trong tài liệu HTML - nó là phần HTML không được hiển thị trong web browser. Chúng tôi đề nghị đặt nó ngay dưới phần HTML bạn đã thêm vào trong bước vừa rồi: <map name="volcmap"><area shape="rect" href="https://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" coords="48,46,204,153"><area shape="rect" href="explode.html" coords="0,66,26,227"><area shape="rect" href="height.html" coords="95,283,378,309"><area shape="rect" href="https://www.geo.mtu.edu/volcanoes/pinatubo/" coords="321,154,468,261"><area shape="rect" href="https://www.geo.mtu.edu/~boris/STROMBOLI_main.html" coords="172,155,318,274"><area shape="rect" href="https://www.soest.hawaii.edu/hvo/" coords="36,155,168,276"><area shape="rect" href="https://www.geo.mtu.edu/volcanoes/santamaria/" coords="90,3,343,123"></map> Chú ý: Bạn nên biết rằng 5 trong 7 vùng được định nghĩa kết nối đến các site internet ở xa. Hai cái còn lại đến các tài liệu cục bộ mà chúng ta sẽ tạo ra trong bước kế tiếp.
   
5. Cất lại tập tin term.htm.
6. Bây giờ chúng ta sẽ tạo ra hai tập tin HTML nữa được liên kết từ image map. Tạo ra một tài liệu mới trong trình soạn thảo và đặt vào đó: <html><head><title>Explosiveness</title></head><BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88><H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5><h1 align=center>Explosiveness</h1>The <b>explosiveness</b> of an observed volcanic eruption is estimated by the calculated force of the eruption. Experiments have shown that when water comes in contact with hot magma, the eruption is much stronger- this is known as <b>hydro-volcanism</b>.For pre-historic eruptions, the explosiveness is estimated by the degree of fragmentation of small volcanic particles. A more explosive eruption will "shatter" volcanic tephra much more then a less explosive eruption.<a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a><HR><ADDRESS><B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Explosiveness</B> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></ADDRESS><tt>URL: https://www.bigu.edu/web/explode.htm</tt></body></html>Cất lại tài liệu này trong cùng thư mục với các tập tin HTML khác và gọi nó là explode.htm
7. Bây giờ tạo tài liệu thứ hai và đưa vào đó: <html><head><title>Height of Eruption Column</title></head><BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88><H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5><h1 align=center>Height of Eruption Column</h1>The <b>height</b> of a volcanic eruption cloud (in kilometers) is taken from direct observation or from estimates based upon historic accounts. For pre-historic eruptions, this scale is calculated based upon the <b>dispersal</b> of the volcanic products- i.e how far and wide they are scattered. Volcanic eruptions that have very tall columns will spread tephra far and wide.<a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a><HR><ADDRESS><B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Height of Eruption Column</B> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></ADDRESS><tt>URL: https://www.bigu.edu/web/height.htm</tt></body></html>Cất lại tài liệu này trong cùng thư mục với các tập tin HTML và gọi nó là height.htm
8. Bây giờ mở tập tin term.htm trong browser của bạn. Hình các núi lửa khác nhau sẽ xuất hiện và khi bạn di chuyển chuột qua các vùng khác nhau của hình ảnh hay vài chỗ cuối trang, dấu nhắc sẽ phải chuyển thành hình "bàn tay", tại đó URL của vùng "nóng" cũng phải được hiển thị.

Bạn nên kiểm tra trang web của bạn với ví dụ mẫu để biết trang bản đồ hình ảnh liên kết nên được thấy như thế nào.
Điều cần xem lại

Cần nhớ rằng đây không phải là sự phát triển mới của HTML, bạn nên nghĩ đến việc có những người xem sử dụng một web browser không hổ trợ client-side image maps. Tài liệu của NetScape cho vài ví dụ để xử lý trường hợp này. Nếu bạn sử dụng bản đồ hình ảnh liên kết về phía server, bạn có thể dùng nó cho các browser không hổ trợ việc thông dịch về phía client, khi đó nó phải tham khảo đến server. Chúng tôi đã sử dụng cách này cho bản đồ hình ảnh liên kết của chúng tôi tại Maricopa Community Colleges.
Với trường hợp của chúng ta, chúng ta có thể tạo một trang đặc biệt để thông báo cho các web browser không có hổ trợ bản đồ hình ảnh liên kết về phía client:

1. Trước hết chúng ta cần tạo một tập tin HTML mới gọi là nomap.htm. Mở tập tin này trong trình soạn thảo và đưa vào đó: <html><head><title>No Image Map Available</title></head><BODY BGCOLOR = #000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88><H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5><h1 align=center>Sorry!</h1>Apparently your web browser does not support client-side image maps. You can still reach the information by following these links:<ul><li><A HREF="explode.htm">Explosiveness</A><li><A HREF="height.htm">Height of Eruption Column</A><li><A HREF="https://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" >Surtseyan</A><li><A HREF="https://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Plinian</A><li><A HREF="https://www.soest.hawaii.edu/hvo/">Hawaiian</A><li><A HREF="https://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Strombolian</A><li><A HREF="https://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A></ul><a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to<i>Volcano Web</i></a><HR><ADDRESS><B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : No Image Map</B> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>Volcanic Studies, <A HREF="https://www.bigu.edu/">Big University</A><TT>last modified: April 1, 1995</TT></ADDRESS><tt>URL: https://www.bigu.edu/web/nomap.htm</tt></body></html>Cất lại tập tin này với tên nomap.htm Chú ý: Hãy xem cách chúng ta cung cấp cho người xem cùng một loại thông tin như trong bản đồ hình ảnh liên kết. Một trang web tốt không giới hạn bớt thông tin đối với một người nào cả vì họ có quyền sử dụng các loại browser khác nhau.
   
2. Bây giờ mở tập tin term.htm trong trình soạn thảo.
3. Tìm dòng sau: <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>và thay nó thành
   <a href="nomap.htm"> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> </a> Chú ý: Bạn có thể phân tích thêm về HTML này - nếu web browser có thể hiểu bản đồ hình ảnh liên kết về phía client, nó sẽ thực hiện điều đó. Ngược lại, toàn bộ hình ảnh là một siêu liên kết đến trang nomap.htm page.
   
4. Cất lại tập tin này và Nạp lại nó vào web browser của bạn.

Kiểm tra lại Công việc của Bạn

So sánh các trang web của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào. Nếu các trang của bạn khác với trang mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại các văn bản bạn đã đánh vào trong trình soạn thảo.
Xem lại

Các vấn đề nên xem lại cho bài này:

1. Sự khác nhau giữa bản đồ hình ảnh liên kết về phía client và bản đồ hình ảnh liên kết về phía server?
2. Tag <map>...</map> dùng làm gì?
3. Bạn giải quyết như thế nào khi một web browser không hiểu bản đồ hình ảnh liên kết về phía client?

Thông tin bổ sung

Chú ý rằng sự tham khảo các thông tin tọa độ trong tag <map>...</map> không nhất thiết phải ở trong cùng một tài liệu HTML. Thuộc tính usemap= có thể liên kết đến một tập tin HTML khác - ví dụ như:
<img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3">trong đó maps.htm có thể là một tập tin chứa các tag <map>...</map> cho một vài tập tin. Bạn có thể làm được điều này không?
Hãy xét trường hợp bạn tạo ra vài (hay nhiều) trang mà ở trên đỉnh của trang có một hình với vài button liên kết đến các trang khác. Nếu bạn sử dụng cách này, bạn có thể tham khảo đến chỉ một hình và một tập tin có các tọa độ. Khi bạn phải thay đổi thanh hoa tiêu của bạn (một hình mới? một sự thay đổi URL cho một button?) bạn chỉ cần điều chỉnh một tập tin! (so sánh với việc thay đổi các tag <map>...</map> nếu chúng được thêm vào mỗi trang web).
Thực tập tự do

Tìm chỗ trong trang web của bạn có thể thêm vào một clickable image map trong bài hay trong phần hoa tiêu. Đừng bao giờ vứt bỏ ngay bản cũ! Bạn phải làm thử vài lần để xác định được các vùng "nóng" (bạn có thể phỏng đoán nếu bạn thật sự liều mạng). Theo các ví dụ trong bài này để viết HTML cho bản đồ hình ảnh liên kết.
Đến phần kế tiếp....

Đủ rồi! Đến dòng cuối cùng rồi!
<!-- / message --><!-- Gioi thieu qua yahoo --><!-- / Gioi thieu qua yahoo --><!-- sig -->