Trang chủ
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]
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:
- 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.
- 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.
- 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 hot melted 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. - 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.
- Trong trình soạn thảo, tạo một tập tin mới gọi là temp.htm
- 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):
HTML Ghi chú <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><p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p>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: http://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ó - Đế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:
Tên Tập tin Mục Ghi chú intro.htm Introduction Vì đâ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.htm Volcano Terminology usa.htm Volcanic Places in the USA mars.htm Volcanic Places on Mars proj.htm Research 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 - 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>.
- 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><HR> <ADDRESS> <B><A HREF="index.htm"> Volcano Web</A> : <A HREF="usa.htm"> Volcanic Places in the USA</A> : Mount St. Helens</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://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:- 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?
- Đ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?
- 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.
