Lessons XXII : Gộp lại (Lumping) hay Phân mảnh (Splitting)

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.

map of new lesson 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.htmmsh.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 hot melted rock from within a planet, reaches the surface. :

     : <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):
    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 nextback để đế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ó
  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:
    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
  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 USResearch 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.htmtrong 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> <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:

  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!

ÐẾN…. | Mục Lục | Bài trước: “Blockquote” | Bài kế: “HTML tiêu chuẩn và nâng cao” |

Soạn thảo HTML Bài 14: Gộp lại hay Phân mảnh

?1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine –}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut14.html

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: