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

WRITING HTML (Soạn thảo HTML) được soạn ra để giúp các thầy giáo tạo các nguồn tài liệu học tập mà những tài liệu này có tham khảo thông tin trên internet. Các bài học trong tài liệu này sẽ giúp bạn tự tạo ra một bài giảng được gọi là Volcano Web. Tuy nhiên, tài liệu hướng dẫn này còn có thể được dùng cho những người muốn sáng tạo ra những trang Web.
Khi đến phần kết thúc tài liệu này, bạn có thể xây dựng một chuỗi các trang Web được liên kết với nhau cho bất kỳ một chủ đề nào, trong đó bao gồm cả việc định dạng văn bản, hình ảnh, và những Hypertext liên kết tới những trang Web khác trên Internet.
Bạn ngạc nhiên ư ? Vậy thì bạn có thể nhìn thấy những gì bạn sẽ tạo được sau khi đọc qua tài liệu này bằng cách hoàn tất phần Kỹ năng cơ bản (từ bài 1-14) hoặc là phần Nâng cao (từ bài 1-23).
Để cho việc thực thi nhanh chóng, bạn có thể download để lưu trữ lại tất cả các tập tin được sử dụng trong tài liệu này vào máy của bạn. Hầu hết các bài học đều có thể thực hiện trên đĩa cục bộ.

Tại sao phải tạo những trang Web?


Bởi vì mọi người cũng làm như vậy ? Không phải đâu.
World Wide Web không chỉ cho phép bạn truy xuất thông tin văn bản mà còn có thể truy xuất hình ảnh, âm thanh, hoặc là video trên toàn thế giới.
Vói sự bùng nổ nhanh chóng của nó, Web đang dần dần trở thành một phần trong thế giới công việc (và cả giải trí) của chúng ta. Khi đó, hàng ngày bạn sẽ không thể nào tiếp tục công việc trong ngày khi chưa sử dụng một URL. (Nếu bạn chưa biết về URL, bạn sẽ hiểu được nó thông qua tài liệu này).

Mục đích


TÀI LIỆU NÀY BAO GỒM những bước đi cho việc viết những tập tin HTML và đưa ra những ví dụ minh họa cho việc tạo ra những trang Web. Trong những bài học sau này bạn sẽ:

• Tìm hiểu và sử dụng những quy ước định dạng của HTML.
• Tạo và sửa đổi những tài liệu HTML bằng cách sử dụng một trình soạn thảo đơn giản.
• Viết một chuỗi các trang Web bao gồm các thông tin, hình ảnh, cùng với những liên kết Hypertext đến những tài liệu khác trên Internet.

HTML là gì ?


THẬT LÀ ĐƠN GIẢN, HTML, hay HyperText Markup Language, là một sự định dạng để báo cho Web browser làm thế nào để hiển thị một trang Web. Những tài liệu thật sự là những trang văn bản với những Tag đặc biệt hoặc những đoạn mã để một Web browser biết làm thế nào để thông dịch và hiển thị nó trên màn hình của bạn.

Hãy sẵn sàng ...


TÀI LIỆU NÀY GIẢ SỬ rằng bạn có một ít hiểu biết cơ bản về cách sử dụng các thực đơn, các button và các liên kết hypertext của Web browser. Để biết thêm về Web, hãy đọc WWW Frequently Asked Questions (FAQ).
Bạn cũng cần một chương trình soạn thảo văn bản có khả năng tạo ra những những văn bản trơn (plain text) chẳng hạn như là Simple text cho Macintosh hoặc NotePad cho Windows. Chúng tôi nhấn mạnh rằng bạn nên sử dụng những chương trình soạn thảo đơn giản nhất khi học theo giáo trình này và sau đó thì có thể sử dụng các phần mềm soạn thảo HTML. Nếu bạn sử dụng một trình xử lý văn bản tương tự như Microsoft Word hay Word Perfect thì phải lưu trữ các tập tin ở dạng văn bản ASCII. Bạn cũng nên làm quen với việc chuyển qua lại giữa các ứng dụng khác nhau cũng như cách sử dụng chuột để cắt và dán các đoạn văn bản.
Nếu bạn đã download các tập tin của tài liệu, bạn có thể thực hiện hầu hết các bài học trên ổ đĩa cục bộ của các bạn.
Chúng tôi đề nghị rằng bạn nên đi qua những bài học này theo một trình tự định sẵn. Tuy nhiên tại bất kỳ thời điểm nào bạn cũng có thể trở về phần mục lục (index) để đến một bài học khác. Nếu muốn in trang bạn đang xem, thật dể dàng ! Chỉ việc chọn Print từ thực đơn File của Web browser.
Để tiện lợi, tất cả thực đơn và các mục sẽ được trình bày ở dạng in đậm. Tất cả những văn bản mà bạn cần đánh vào từ bàn phím sẽ được trình bày ở dạng chữ đánh máy (typewriter style).
Trong mỗi bài học, bạn có thể so sánh công việc của bạn với tập tin HTML mẫu của bài học đó mà chúng tôi sẽ để ở cuối mỗi bài.

Hãy ghi nhớ ...


MỌI THỨ BẠN TẠO ĐƯỢC trong tài liệu này được thiết kế để sử dụng cho bất kỳ máy tính để bàn (desktop) nào, tức là nó không phụ thuộc vào sự truy xuất đối với Web server hoặc sự lập trình đặc biệt nào. Bản thân nó đã nói lên tất cả.
Dưới đây là một vài chỉ dẫn có thể giúp ích cho bạn :

1. Sử dụng chức năng Favorites hay Bookmark của Web browser để đánh dấu lại những trang bài học nhờ đó bạn có thể dễ dàng đi tới những bài học khác.
2. Chúng tôi viết ra những chỉ dẫn chung đối với mọi Web browser. Đôi khi những tên thực đơn hay những chức năng này có thể khác đi với Web browser mà bạn đang sử dụng.
3. Tài liệu này sẽ minh họa cho các bạn làm thế nào để tạo ra những trang Web mà bạn đã nhìn thấy. Nó sẽ khôâng chỉ cho bạn làm thế nào để người khác có thể nhìn thấy chúng. Để làm được điều này bạn cần một nhà cung cấp dịch vụ Internet (Internet Service Provider, ISP) để cung cấp cho bạn chỗ lưu trữ trên Web server.
4. Chúng tôi chưa cung cấp đến các bạn hết các tài liệu liên quan có trong Yale C/AIM WWW Style Manual và Sun Microsystem's Guide to Web Style.
5. Sử dụng trang tóm tắt các tag như một tài liệu tham khảo. Bạn có thể đọc được nó bằng cách sử dụng liên kết hypertext tại đầu mỗi trang bài học.
6. Nếu bạn cảm thấy có trở ngại, trước hết hãy đọc thêm từ FAQ (Frequently Asked Questions).

Người thực hiện


ĐÂY LÀ MỘT ĐỀ ÁN của Maricopa Center for Learning and Instruction (MCLI) do Alan Levine, một instructional technologist tại Maricopa Community Colleges thiết kế. Tom Super đã hổ trợ thiết kế phần hướng dẫn và nhiều người khác đã giúp đỡ các góp ý, sữa lỗi.



Đã đến lúc bắt đầu!


KHI BẠN ĐÃ SẴN SÀNG, hãy đến mục lục hoặc bắt đầu với bài đầu tiên. Chúc bạn nhiều may mắn !

0. Tiêu chuẩn của HTML

Đối với bất cứ một vấn đề gì, luôn luôn có những luật để tuân theo. Thật may mắn, với HTML những luật này rất ít và những gì mà HTML cung cấp thì rất là lớn...
Mục đích

Ở đây chỉ là sự giới thiệu về một vài khái niệm liên quan đến HTML. Sau bài học này bạn có thể:

• Diễn tả phần quan trọng của những tiêu chuẩn HTML.
• Nhận biết được sự khác nhau giữa HTML 2.0 và HTML 3.0

Bài học

HTML, hayHyperText Markup Language, là một sự định dạng để Web browser hiển thị những tài liệu multimedia. Bản thân những tài liệu chỉ là những tập tin văn bản đơn giản (ASCII) với những tag hoặc những đoạn mã đặc biệt mà một Web browser biết cách thông dịch và hiển thị nó trên màn hình của bạn.
Giới thiệu về những tiêu chuẩn

World Wide Web thật là thú vị - Nó ở khắp mọi nơi.
Hãy nhớ rằng những thứ tạo ra Web (và Internet nói chung) là phù hợp với những luật được công nhận để hầu hết loại máy tính có thể giao tiếp và chia xẻ thông tin với nhau.

Tất cả những gì mà chúng ta sẽ học trong tài liệu này là sự trợ giúp để tạo ra những tài liệu phù hợp với HTML standards.. Khi sử dụng HTML tiêu chuẩn, các bài làm của bạn sẽ "chia xẻ được" (share-able) một cách rộng rãi trong sự phát triển nhanh chóng của mạng trong tương lai. Tiêu chuẩn được sử dụng hiện nay là HTML 2.0 được hỗ trợ bởi hầu hết các Web browser.
Hiện nay, sau khi NetScape và Microsoft giới thiệu về một vài đặc điểm được coi như là vượt xa hơn những tiêu chuẩn chung của HTML trước đó, một số đặc điểm phức tạp hơn sẽ được đưa vào phiên bản HTML 3.2. Những đặc điểm này chỉ có thể được hỗ trợ bởi một số Web browser nhất định.
Điều này có nghĩa là gì ? Nếu bạn tính đến chuyện làm cho trang Web của bạn trông thấy có sức thu hút mạnh mẽ trong Netscape hoặc Explorer, thì những trang Web này có thể trở nên có vẻ rất tồi trong những Web browser khác. Hãy nhớ rằng những người đọc trang Web của bạn có thể không những đang sử dụng một loại Web browser khác mà kích cỡ màn hình và phông chữ cũng có thể không giống như trên hệ thống mà bạn sử dụng để thiết kế các trang web.
Sau cùng, có thể không phải chỉ có một mình bạn xem những trang Web mà bạn đã mất nhiều thời gian để thiết kế ra! Điều quan trọng ở đây là làm một thứ gì đó để cho mọi người cùng xem. Vì thế phần đầu tiên của những bài học sẽ đưa bạn lướt qua những đặc điểm của HTML đã được chấp nhận rộng rãi. Từ đó, bạn có thể quyết định sử dụng những đặc điểm "tốt nhất".
Những vấn đề cần được xem lại

1. HTML là gì?
2. Tại sao ta phải quan tâm đến sự khác nhau trong những tiêu chuẩn HTML?

Đi đến bài tiếp theo....

Đã đến lúc bắt đầu viết những trang Web đầu tiên! Bạn đã sẵn sàng chưa? Trong bài học kế tiếp bạn sẽ biết làm thế nào để sử dụng ba cửa sổ để viết những dòng HTML đầu tiên. Hãy bắt đầu ...

1. Tạo tài liệu HTML đầu tiên

Bạn sắp bước vào một cuộc hành trình sẽ biến bạn từ một Internet Surfer trở thành một Internet Author of Multimedia!
Mục đích

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

• Nhận ra ý nghĩa và mục đích của những tag HTML.
• Mở ra một Workspace cho việc tạo những tài liệu HTML.
• Sử dụng một trình soạn thảo văn bản để tạo cấu trúc HTML đơn giản cho bất kỳ trang Web nào.
• Chèn những lời chú thích không được hiển thị vào trong các tập tin HTML.
• Mở tài liệu của bạn bằng Web browser để thấy nó được hiển thị như thế nào.

Bài học

Bây giờ bạn đã biết HTML là gì, chúng ta hãy bắt đầu sử dụng nó.
Tag HTML là gì ?

Khi một Web browser hiển thị một trang chẳng hạn như trang bạn đang xem ở đây, Web browser sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những tag được đánh dấu bởi ký hiệu < và > . Dạng chung của một tag HTML là :

<tag_name>string of text</tag_name>

Lấy ví dụ, tiêu đề của phần này sử dụng tag header :

Tag HTML la gi?

Tag này báo cho Web browser hiển thị dòng chữ Tag HTML là gì? ở dạng của mức độ tiêu đề thứ ba (chúng ta sẽ xét kỹ hơn những tag này ở những bài sau). Những Tag HTML báo cho Web browser biết khi nào cần in đậm một dòng văn bản, in ngiêng nó, làm cho nó trở thành một header, hoặc làm cho nó là một Hypertext liên kết tới một trang Web khác. Điều quan trọng cần nhớ là trong tag kết thúc,
có chứa ký tự "/". Ký tự "/" này báo cho Web browser biết là hiệu ứng của tag được kết thúc tại đây. Rất nhiều tag HTML được đi theo một cặp như thế này. Nếu bạn quên ký tự "/", Web browser sẽ tiếp tục thể hiện hiệu ứng của tag trong phần còn lại của văn bản và tạo ra các kết quả không mong muốn (để có kinh nghiệm, sau này bạn có thể thử xem).
LƯU Ý: một Web Browser không quan tâm tới việc bạn sử dụng chữ hoa hay chữ thường. Lấy ví dụ : ...

thì không khác gì với ...


Không giống như việc lập trình, nếu bạn có một lỗi trong trang HTML, hệ thống của bạn sẽ không bị "Crash"; trang Web của bạn sẽ vẫn nhìn thấy được, nhưng ... sai. Có thể nhanh chóng và dễ dàng vào bên trong trang HTML và sữa chữa lại nội dung của nó.
Browser của bạn tuy nhỏ nhưng lại có một bộ từ vựng mở. Thật là thú vị với HTML khi browser của bạn không biết làm cái gì với tag đã cho, nó sẽ bỏ qua tag đó! Lấy ví dụ, trong tài liệu mà bạn đang xem đây, tag header cho phần này thật sự được viết như sau :

<wiggle></wiggle>

Tag HTML la gi?

nhưng vì browser của bạn có thể không hỗ trợ tag <wiggle> (do tôi tự đặt ra, có thể trong tương lai nó sẽ làm cho văn bản có dạng sóng khi thể hiện), nó sẽ bỏ qua và vẫn tiếp tục với những tag nào mà nó hiểu được. Nếu tôi là người viết ra một web browser mới, tôi sẽ quyết định thêm tag <wiggle> vào phần mềm của tôi.
Mở ra Workspace của bạn

Để hoàn tất những bài học trong phần hướng dẫn này, bạn sẽ tạo một cửa sổ web thứ hai (điều này cho phép bạn giữ cửa sổ này với những lời chỉ dẫn của bài học và một cửa sổ như là một vùng làm việc của bạn "Workspace"); và thêm một cửa sổ thứ ba là trình soạn thảo văn bản.
Lưu ý: Đây là nơi rất tốt để lưu ý với bạn rằng chúng tôi sẽ cung cấp những chỉ dẫn chẳng hạn như là tên thực đơn và tên tập tin nhưng những tên này có thể khác đi phụ thuộc vào Web browser mà bạn đang sử dụng.
Vì vậy, bạn hãy cố thích ứng với việc chuyển qua lại giữa các chương trình và cửa sổ trên máy của bạn. Một cách khác là hãy in ra các lời chỉ dẫn trong bài học (nhưng thật sự chúng tôi không muốn tổ chức các bài hướng dẫn này theo một cấu trúc cây). Dưới đây là các bước để tạo ra workspace của bạn :

1. Từ thực đơn File của web browser, chọn New Window hoặc New Web Browser. Một cửa sổ web thứ hai sẽ xuất hiện. Hãy sử dụng cửa sổ thứ nhất như là một "sách chỉ dẩn" (textbook) và cửa sổ thứ hai như là vùng làm việc của bạn (workspace) để hoàn tất những bài học HTML.
   Lưu ý: Lý do duy nhất để có hai cửa sổ ở đây là bạn có thể đọc những chỉ dẫn từ bài học và cũng có thể xem tài liệu mà bạn đang làm việc. Bạn cũng có thể đưa vào boomark trang web này và trở lại nó vào mọi lúc sử dụng thực đơn Go hay History.
2. Kế tiếp, bạn cần chuyển ra khỏi web browser và mở một chương trình soạn thảo văn bản.
   Lưu ý: Bạn cần phải chuyển qua lại giữa các cửa sổ để hoàn tất các bài học. Điều này có thể gây ra khó chịu phụ thuộc vào kích cỡ của màn hình bạn đang sử dụng. Bạn có thể chỉnh lại kích thước các cửa sổ để chúng cùng được trình bày trên màn hình để dễ dàng làm việc với chúng.Nếu bạn sử dụng một chương trình xử lý văn bản để tạo HTML của bạn , hãy chắc chắn rằng dạng lưu trữ là văn bản (hoặc ASCII).

Nếu bây giờ bạn mới bắt đầu, chúng tôi NHẤN MẠNH lại đề nghị bạn sử dụng một trình xử lý văn bản đơn giản như - SimpleText hay TeachText của Macintosh hay NotePad của Windows. Tại sao không nên sử dụng sự trợ giúp điêu luyện của các trình xử lý văn bản HTML? Thực tế sự thiết kế của tài liệu mong muốn các bạn hiểu được những khái niệm cần thiết rồi SAU ĐÓ mới sử dụng đến sự trợ giúp mà các trình xử lý văn bản HTML mang lại.
Cũng vì vậy, sẽ giúp cho bạn được nhiều hơn khi bạn tạo ra một directory/folder mới trong máy của bạn để giữ lại các kết quả bạn tạo ra. Bạn có thể gọi nó là workarea hay myspace hay bất kỳ từ nào bạn thích; hãy lưu lại tất cả các tập tin mà bạn tạo ra trong vùng này. Điều này sẽ làm cho cuộc sống của bạn tốt hơn ... ít nhất là trong khi làm việc với tài liệu này!
Tạo tài liệu HTML của bạn

Một tài liệu HTML gồm hai phần riêng biệt, phần đầu (head) và phần thân (body). Phần đầu chứa đựng những thông tin về tài liệu và không được hiển thị lên màn hình. Phần thân thì chứa đựng mọi thứ được trình bày lên màn hình như là một phần của trang Web.
Cấu trúc cơ bản của một trang HTML là:
<!-- header info used to contain extra information about this document, not displayed on the page --> <!-- all the HTML for display --> : : : : : : Dòng đầu tiên hết:
thì không cần thiết lắm, nhưng là mã để báo cho browser biết phiên bản nào của HTML được sử dụng trong trang hiện thời. Để có nhiều thông tin hơn, hãy xem trang W3C Reference Specification.
Toàn bộ công việc để thành lập một trang HTML nằm trong cặp tag .... Bên trong nó là cặp tag ...và sau đó là .... Trang Web của bạn có thể được hiển thị tốt trên hầu hết máy tính mà không cần những tag này. Tuy nhiên bằng cách sử dụng chúng, trang Web của bạn sẽ hoàn toàn tương thích với chuẩn quốc tế của HTML và chắc chắn rằng sẽ tương thích với những Web browser khác trong tương lai.
Đây là một thói quen tốt giống như là việc bạn đánh răng hằng ngày vậy.
Cũng lưu ý rằng những tag chú thích được bao bởi <!-- blah blah blah -->. Dòng văn bản giữa những tag này KHÔNG được hiển thị trong trang Web nhưng để đặt những thông tin có thể hữu ích cho chính bạn hoặc bất kỳ người nào cần phải xem dạng HTML của những trang Web. Khi trang Web của bạn trở nên phức tạp (giống như bạn sẽ thấy sau này khi thêm vào các bảng, frame và những vấn đề khác của hơn 20 bài học), những chú thích này sẽ trở nên hữu ích khi bạn cần cập nhật một trang Web mà bạn đã tạo ra cách đây khá lâu.
Sau đây là những bước tiếp theo cho việc tạo file HTML đầu tiên. Bạn vẫn sẵn sàng chứ?

1. Nếu chưa mở, hãy mở trình soạn thảo văn bản của bạn.
2. Chuyển đến trình soạn thảo văn bản.
3. Bạn hãy nhập những dòng văn bản sau (không cần đánh vào phím RETURN cuối mỗi dòng, web browser sẽ tự động điều chỉnh lại các văn bản): <!-- written for the Writing HTML Tutorial by Lorrie Lava, February 31, 1999 --> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results.
   Lưu ý: Hãy tìm vị trí của cặp tag . Nó được đặt ở trong phần ...và như vậy nó sẽ không được nhìn thấy trên màn hình phải không. Nó được dùng làm gì? Tag KHÔNG được hiển thị trên trang Web; bạn sẽ nhìn thấy nó trong thanh tiêu đề của cửa sổ Web browser.
   
   Những vấn đề cần được xem lại
   1. Tag HTML là gì?
   2. Dòng chữ của tag title được hiển thị ở đâu?
   3. Những bước để tạo một tài liệu HTML đơn giản?
   4. Làm thế nào để tạo nên một tag chú thích?
   5. Làm thế nào hiển thị được tài liệu HTML trong một Web browser?
   Thực tập tự do
   
   Hãy nghĩ về một chủ đề cho trang web của bạn. Bây giờ hãy tạo một tập tin văn bản HTML của riêng bạn có sử dụng tag
   Hãy giữ lại tập tin này để bạn có thể thêm vào nó trong các bài sau.
   Đi đến bài tiếp theo....
   
   Trang Web đầu tiên của bạn đến đây đã hoàn tất!
   Nhưng nói một cách khách quan, nó khá ngắn và không phải là sống động lắm! Trong bài tiếp theo bạn sẽ điều chỉnh và cập nhật trang Web của bạn.

2. Điều chỉnh một tài liệu HTML

Bây giờ bạn đã có tài liệu HTML đầu tiên của bạn, bạn sẽ học cách điều chỉnh tài liệu và nhìn thấy sự cập nhật trong tài liệu của bạn.
Mục đích

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

• Mở lại workspace cho trang Web của bạn.
• Thực hiện các thay đổi trong tài liệu HTML bằng cách sử dụng trình soạn thảo.
• Nạp lại tài liệu trong Web browser để thấy được sự thay đổi.

Bài học

Mở lại workspace của bạn

Lưu ý: Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.
Để hoàn tất bài học này bạn cần tạo nên cửa sổ thứ hai và mở lại cửa sổ soạn thảo văn bản bạn đã sử dụng trong bài học trước. Sau đây là những bước cần thiết để làm công việc đó:

1. Nếu chưa có, tạo cửa sổ mới bằng cách chọn New Window từ thực đơn File .
2. Sử dụng Open File... từ thực đơn File để tìm và mở lại tập tin HTML bạn đã tạo ra trong ví dụ trước.
3. Mở lại chương trình soạn thảo văn bản.
4. Trong chương trình soạn thảo, mở tập tin ("Volc.htm") bạn đã tạo ra trong bài học trước.
   Chú ý: Nếu bạn sử dụng Windows, tập tin của bạn nên có tên là "VOLC.HTM". Từ nay chúng tôi xem như bạn dễ dàng mở được workspace của bạn.

Tạo sự thay đổi trong tài liệu HTML.

1. Chuyển đến cửa sổ trình soạn thảo.
2. Sau đoạn văn bản bạn đã đánh từ bài học trước, nhấn ENTER một vài lần và đánh thêm đoạn văn sau: A volcano is a location where magma, or hot melted rock from within a planet, reaches the surface. It may happen violently, in a massive supersonic explosion, or more quietly, as a sticky, slow lava flow. Lưu ý rằng đoạn văn bản này phải ở trên những tag </body> và </html> nằm ở cuối tập tin HTML.
3. Chọn Save từ thực đơn File để cập nhật sự thay đổi trong tập tin HTML của bạn.

Nạp lại tài liệu trong Web Browser

Trở lại browser workspace của bạn, nơi mà phiên bản trước của tập tin được hiển thị. Lưu ý rằng những dòng chữ bạn mới nhập vào chưa được nhìn thấy. Để thấy được sự thay đổi , sử dụng button Reload hoặc thực đơn có trong web browser của bạn. Yêu cầu này ra lệnh cho Web browser đọc lại cùng một tập tin HTML và hiển thị lại nó cùng với các sự thay đổi đã được tạo ra. Bạn sẽ nhìn thấy những dòng chữ bạn mới nhập vào.
Lưu ý rằng Web browser sẽ bỏ qua những dòng trống mà bạn đã nhập. Mặc dầu vậy, có thể bạn vẫn muốn sử dụng những dòng trắng (blank line), những khoảng trắng, và cả những tag chú thích mà chúng ta đã thấy trong bài 1 để làm cho tập tin HTML của bạn dễ đọc hơn trong trình soạn thảo văn bản.
Sử dụng Drag và Drop!

Có thể có một cách dễ dàng hơn để nạp và xem các trang HTML của bạn. Bạn cần phải sắp xếp lại trong máy của bạn để có thể nhìn thấy icon cho các tập tin HTML của bạn bên ngoài cửa sổ web browser. Sau đó click và drag icon của tập tin "Volc.htm" hay "Volc.htm" thẳng vào cửa sổ web browser của bạn. Đúng vậy! trang của bạn sẽ được hiển thị nếu máy tính của bạn có hổ trợ hoạt động drag và drop (Chúng tôi biết chắc rằng Macintosh System 7.5 và Windows 95 có hổ trợ hoạt động này.)
Kiểm tra công việc của bạn

Hãy so sánh tài liệu của bạn với ví dụ mẫu sẵn có. Nếu trang Web của bạn trông khác với mẫu, hãy xem lại văn bản mà bạn đã đánh vào trong trình soạn thảo văn bản. Hãy chắc chắn rằng nó phù hợp với những chỉ dẫn trong đoạn Tạo sự thay đổi trong tài liệu của bạn của bài này.

Xem lại

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

1. Làm thế nào để mở lại workspace của bạn?
2. Những bước nào được sử dụng để thay đổi nội dung tài liệu HTML của bạn?
3. Làm thế nào hiển thị và nhìn thấy sự thay đổi trong Web browser?

Thực tập tự do

Tương tự như trong bài học, hãy điều chỉnh tài liệu HTML riêng của bạn đã tạo ra trong bài học vừa rồi. Thêm một vài câu và hãy kiểm tra trong browser của bạn khi nạp lại nó.
Đi đến phần tiếp theo....

Bây giờ bạn đã biết về quá trình soạn thảo, chúng ta sẽ thêm những tiêu đề to và có sức hấp dẫn hơn vào tài liệu HTML của bạn.

3. Sáu mức tiêu đề

Như là bạn đã nhìn thấy trong trang Web này, các phần tiêu đề ("Sáu mức tiêu đề", "Mục đích", "Mục Lục", ...) xuất hiện ở những kích cỡ khác nhau và, có lẽ ở cả những phông chữ và màu sắc khác nhau nữa. HTML cung cấp những đoạn mã cho việc thiết kế phần tiêu đề theo sáu mức độ khác nhau. Browser tự xác định chính xác phông chữ và kích cỡ để hiển thị.
Mục đích

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

• Nhận dạng được những mức độ khác nhau của các tiêu đề trong HTML và các tag liên quan tới chúng.
• Đặt những mức tiêu đề khác nhau vào trong tài liệu HTML và nhìn thấy sự thay đổi của chúng trong browser của bạn.

Bài học

Những tiêu đề của HTML

Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tag tiêu đề (heading tag). Dạng các tag tiêu đề của HTML là:
<hN>Text to Appear in Heading</hN>N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :
Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Các mức độ tiêu đề được sắp xếp từ 1 (quan trọng nhất) đến 6 (ít quan trọng nhất). Các tiêu đề nên có tính tương đối, đánh số thứ tự và đặt tại các vị trí tương tự nhau.
Đặt những tiêu đề HTML vào tài liệu của bạn

Lưu ý: Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Đến cửa sổ soạn thảo văn bản.
3. Mở lại tập tin HTML đã tạo trong bài 2, "Volc.htm".
4. Trước hết, chúng ta sử dụng tag <h1> để trình bày tiêu đề như là header lớn nhất, <H1>. Nhâp dòng sau vào phần thân của HTML và sau các tag </head><body>: <h1>Volcano Web</h1>
5. Bên dưới những dòng văn bản đã nhập, tạo những đề mục khác nhau cho những phần sau này của trang Volcano Web của bạn.Nhập những tiêu đề sau trong phần thân của trang Web của bạn (chú ý một số sử dụng </h3> còn một số sử dụng </h2>):
   <h2>Introduction</h2> <h2>Volcano Terminology</h2> <h2>Volcanic Places in the USA</h2> <h3>Mount St Helens</h3> <h3>Long Valley</h3> <h2>Volcanic Places on Mars?</h2> <h2>Research Project</h2> <h3>References</h3>
6. Lưu trữ (save) lại sự thay đổi trong trình soạn thảo.
7. Trở lại web browser của bạn, Mở và Nạp lại tập tin HTML.
   Chú ý rằng trên máy tính bạn đang sử dụng hiện nay, bạn có thể cài đặt cho browser của bạn phông và/hay kích thước của các tiêu đề. Ví dụ như, bạn có thể có một browser thể hiện tag h1 theo phông Times có 36 điểm; tag h2 theo phông Helvetica có 24 điểm, v.v... Các mã HTML chỉ đưa ra các loại của tiêu đề (từ h1 đến h6); còn việc thể hiện chúng thì được điều khiển bởi người sử dụng thông qua trình web browser.

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

So sánh công việc của bạn với ví dụ mẫu sẵn có. Nếu có một vài tiêu đề xuất hiện không đúng, hãy kiểm tra lại tag bắt đầu và tag kết thúc của mỗi tiêu đề.
Như là một phần bài tập đề nghị, hãy nhìn xem chuyện gì sẽ xảy ra khi bạn có một lỗi đánh máy sai. Mở lại tài liệu HTML của bạn trong chương trình soạn thảo và xoá đi ký tự "/" trong tag kết thúc <h1> , sau đề mục Volcano Web:
<h1>Volcano Web<h1>[missing "/" -----------^^^]Lưu trữ sự thay đổi và nạp lại trong Web browser. Không có sự kết thúc đúng đắn của tag h1, browser của bạn sẽ thông dịch phần văn bản tiếp theo như là một phần của tiêu đề! Sau khi thử xong bạn nên trở lại tài liệu của bạn và thêm lại dấy / như ban đầu.
Xem lại

1. Những mức độ khác nhau của tiêu đề trong HTML là gì?
2. Những tag liên quan đến những mức độ này là gì?
3. Những bước nào được sử dụng trong việc đặt tiêu đề vào trong tài liệu HTML ?
4. Những gì xảy ra nếu bạn quên dấu "/" tại cuối của một tag tiêu đề?

Thực tập tự do

Hãy thêm vào ít nhất ba tiêu đề với các cấp độ khác nhau vào tài liệu WWW của riêng bạn.
Đi đến phần tiếp theo....

Phân chia văn bản thành nhiều đoạn văn.

4. Chia văn bản ra thành nhiều đoạn

Cho đến bây giờ bạn đã tạo và sửa đổi tài liệu HTML, và chắc bạn đã cảm thấy thoải mái với việc soạn thảo và nạp lại văn bản trong Web browser. Vì vậy bây giờ bạn sẽ cảm thấy dễ dàng với bài học nhanh này: thêm vào các dấu chia đoạn văn (paragraph break). Mục đích

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

• Nhận dạng những tag chia đoạn trong HTML.
• Chép một đoạn văn bản từ Web page và dán (paste) nó vào một tài liệu khác.
• Chèn các dấu chia đoạn vào trong văn bản HTML và nhìn sự thay đổi trong Web browser của bạn.

Bài học

Chia đoạn trong HTML

Trước đây chúng ta đã biết rằng một Web browser sẽ bỏ qua tất cả ký tự XUỐNG DÒNG (carriage returns) được đánh trong trình soạn thảo. Nhưng, khi browser nhìn thấy tag chia đoạn, nó chèn một dòng trống và bắt đầu một đoạn mới. Mã HTML cho công việc chèn một sự chia đoạn là : Lưu ý rằng tag này là một đặc biệt vì nó không cần tag kết thúc; vì thế bạn không cần sử dụng: Trong bài sau chúng ta sẽ thấy trường hợp tag có sử dụng tag để kết thúc. Cũng lưu ý rằng tag <h> có sự gắn liền với sự chia đoạn nên không cần thiết đặt tag trước một tag tiêu đề như ví dụ dưới đây:
<h2>Blah Blah Blah Blah</h2>Chèn các dấu chia đoạn

Lưu ý : Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.Hãy theo sự chỉ dẫn dưới đây để chèn và xem lại một sự ngắt đoạn trong tài liệu HTML của bạn.

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Đi đến cửa sổ soạn thảo văn bản.
3. Mở tài liệu làm việc của bạn Volc.htm trong trình soạn thảo văn bản (nếu nó chưa được mở).
4. Trước hết chúng ta di chuyển câu ("A volcano is ...") đến dưới tiêu đề Introduction. Hãy sử dụng chuột để cắt và dán đoạn văn bản này vào vị trí thích hợp.
5. Sau những câu này, chúng ta muốn thêm vào một đoạn nữa. Nhưng thay vì phải đánh lại nó, từ trang Web này hãy sử dụng chuột để chọn và chép (copy) vào clipboard các đoạn văn: Volcanoes have been a part of earth's history long before humans. Compare the history of human beings, a few million years in the making, to that of the Earth, over four billion years in the making.
6. Bây giờ, hãy trở lại tài liệu HTML trong trình soạn thảo và dán (paste) nó vào sau những câu có sẵn bên trong đề mục <h2>Introduction</h2>.
7. Lưu trữ sự thay đổi trong trình soạn thảo.
8. Trở lại Web browser của bạn.
9. Nếu tài liệu của bạn chưa có, sử dụng lệnh Open Local... từ thực đơn File để mở tài liệu.
10. Chọn Reload từ thực đơn File. Bây giờ bạn sẽ nhìn thấy hai câu của phần Introduction. Bây giờ chúng ta muốn đặt một dấu phân đoạn giữa các câu này.
11. Một lần nữa trở lại tài liệu HTML trong trình soạn thảo.
12. Sau câu thứ hai của phần <h2>Introduction</h2> (tức là câu có kết thúc là " as a sticky, slow lava flow.") nhấn RETURN (thật ra không cần thiết nhưng điều này làm cho bản HTML dễ đọc hơn khi bạn làm việc với nó), và bây giờ hãy nhập tag phân đoạn như sau : Lúc này đoạn văn bản trông giống như sau: <h2>Introduction</h2> A volcano is a location where magma, or hot melted rock from within a planet, reaches the surface. It may happen violently, in a massive supersonic explosion, or more quietly, as a sticky, slow lava flow. Volcanoes have been a part of earth's history long before humans. Compare the history of human beings, a few million years in the making, to that of the Earth, over four billion years in the making.
13. Lưu trữ sự thay đổi trong trình soạn thảo.
14. Trở lại Web browser và nạp lại tài liệu. Hai câu của mục introduction bây giờ sẽ ở trên hay đoạn văn khác nhau.

Những dạng phân đoạn khác

Để phân chia những phần chính của một trang Web, sử dụng hard rule hay còn gọi là tag hr . Tag này sẽ chèn một đường thẳng giống như bạn nhìn thấy ngay trên phần tiêu đề của mục này. Dạng HTML cho tag hard rule là:
<hr>Bây giờ chúng ta hãy sử dụng nó! Đặt một tag hr ngay trên tiêu đề Introduction. Công việc này giúp cho việc tách câu mở đầu của bài học ra khỏi những phần đi sau nó. Và cuối cùng, tag <br> sẽ đẩy văn bản xuống dòng mới như tag nhưng không chèn thêm một dòng trống. Bạn có thể phải sử dụng tag này khi tạo một danh sách (list), khi viết những dòng của một bài thơ, v.v... Hãy so sánh sự khác nhau giữa việc sử dụng tag <br> và tag trong hai ví dụ sau đây:
Chỉ sử dụng các tag HTMLKết quảAnd then, we could all seeat once the brilliant purpose of the paragraph tag.Moving on...the more tags you write, the better you will feel?And then, we could all see at once the brilliant purpose of the paragraph tag. Moving on...
the more tags you write, the better you will feel?
Sử dụng cả tag và tag <br>HTMLKết quảAnd then, we could all see<br> at once the brilliant purpose<br>of the paragraph tag.Moving on...<br>the more tags you write,<br> the better you will feel?And then, we could all see
at once the brilliant purpose
of the paragraph tag. Moving on...
the more tags you write,
the better you will feel?
Tag <br> còn có thể được sử dụng cho những cách trình bày khác nhau cho phần tiêu đề của bạn. Nếu như bạn chú ý, bạn sẽ nhận thấy là các tag tiêu đề <h1>, <h2>, ... tự động chèn thêm các dòng trắng trên và dưới dòng chữ của tag tiêu đề. Một vài tác giả của những trang Web thích tự điều khiển những dòng trắng này. Tên đề mục dùng tag tiêu đềHTMLKết quảand in the end it was all for naught.<h4>header tag</h4>Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.and in the end it was all for naught. The New Cheese Edict

Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production. Tên đề mục dùng tag <b> và <br>HTMLKết quảand in the end it was all for naught.<b>The New Cheese Edict</b><br>Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.and in the end it was all for naught. The New Cheese Edict
Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.
Ở đây sự khác nhau có vẻ tầm thường quá, nhưng thực tế điều này tạo ra các khả năng để sau này chúng ta học cách tạo ra tiêu đề có màu và kích cỡ khác nhau. Ví dụ như hãy xem trang Web Pages That Don't Look Like Web Pages
Kiểm tra lại công việc của bạn

Nếu bạn thích, hãy so sánh trang Web bạn đang thực hiện với ví dụ mẫu. Nếu tài liệu bạn tạo ra khác với ví dụ mẫu, hãy kiểm tra lại cách bạn đánh vào các dấu chia đoạn . Hãy chắc chắn rằng bạn đã làm đúng theo sự hướng dẫn trong mục Chèn các dấu chia đoạn của bài này. Xem lại

1. Tag HTML nào dùng cho việc phân đoạn?
2. Những bước nào bạn sử dụng cho việc chèn thêm một sự phân đoạn trong tài liệu của bạn?
3. Làm thế nào trình bày và nhìn thấy được sự thay đổi đó trong Web browser ?
4. Điểm thêm*- Tag <hr> là gì? Tag <br> là gì?

Thực tập tự do

Sử dụng paragraph, tag hard rule, hay tag br để tạo ra các đề mục hay đoạn văn trong tài liệu của bạn. Đi đến phần tiếp theo....

Bạn có nhớ phông chữ đầu tiên không ?
Làm thế nào để thêm một kiểu mẫu... (style) khác vào văn bản của bạn.

5. Làm việc với các kiểu mẫu (Style)

Giống như một trình soạn thảo văn bản, HTML có thể báo cho Web browser hiển thị một phần nào đó của văn bản ở dạng in nghiêng hoặc in đậm hoặc ở dạng in kết hợp cả hai chế độ.
Mục đích

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

• Nhận dạng các tag HTML cho các kiểu mẫu văn bản: Đậm, nghiêng, hoặc ở dạng chữ đánh máy (mono-spaced).
• Nhập văn bản trong tài liệu HTML theo nhiều kiểu mẫu khác nhau và nhìn thấy sự thay đổi của chúng trong Web browser của bạn.

Bài học

Các tag Style của HTML

HTML cung cấp một vài tag cho việc định dạng style cho văn bản. Hãy thận trọng và suy nghĩ cẩn thận trước khi dùng những kiểu này để định dạng cho văn bản; sử dụng quá nhiều có thể làm cho văn bản trở nên khó đọc hơn ... Các tag StyleHTMLKết quả<b>This is Bold...</b> This is Bold <i>This is Italic...</i>This is Italic <tt>This is Typewriter...</tt>This is Typewriter Lưu ý rằng bạn có thể kết hợp các tag này để định dạng miễn là chúng được lồng vào nhau một cách chính xác, ví dụ như cả hai tag bắt đầu và kết thúc in nghiêng đều phải ở bên trong các tag in đậm. Cũng lưu ý là thứ tự các tag không quan trọng. <i><b>This is Bold ANDItalic</b></i><b><i>And So is This</i></b>This is Bold AND Italic And So is This
Hơn nữa, bạn có thể áp dụng những kiểu vào trong phần tiêu đề. Lưu ý về cách đặt các tag style đóng và mở xung quanh những từ muốn tạo kiểu còn những tag đề mục thì bao quanh toàn bộ đề mục. blah blah blah<h2><i>New</i> and <tt>Improved!</tt></h2>blah blah blahblah blah blah New and Improved!

blah blah blah
Áp dụng Style vào trong tài liệu của bạn

Lưu ý: Nếu bạn chưa có tài liệu từ các bài học trước, bạn có thể download ngay bây giờ.
Theo những bước sau để áp dụng các tag style cho văn bản HTML của bạn:

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Trở lại tài liệu HTML "Volc.htm" của bạn trong chương trình soạn thảo.
3. Tìm từ "volcano" trong câu đầu tiên của phần Introduction. Chúng ta sẽ làm từ này trở nên in đậm để đánh dấu đây là từ quan trọng.
4. Chèn thêm các tag để làm từ này trở nên in đậm : <b>volcano</b>
5. Bây giờ chúng ta sẽ sửa đổi đoạn văn thứ hai với những tag in đậm và in ngiêng để nhấn mạnh. Hãy thêm tag <b>...</b> và <i>...</i> quanh từ billion đó để đoạn này trông giống như sau : Volcanoes have been a part of earth's history long before humans. Compare the history of human beings, a few million years in the making, to that of the Earth, over four <b><i>billion</i></b> years in the making.
6. Cuối cùng, chúng ta sẽ sử dụng tag typewriter để chỉ ra một từ đặc biệt. Bên dưới đề mục Volcano Terminology, nhập vào đoạn sau: The study of volcanoes, or <tt>Volcanology</tt>, includes many odd terms.
7. Lưu trữ trong trình soạn thảo và Reload trong Web browser của bạn.

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

Hãy xem Ví dụ mẫu để nhìn thấy sự thay đổi. Điều quan trọng khi sử dụng các tag style là sự kết thúc đúng đắn các tag này bằng tag </> thích hợp. Nếu không, tất cả phần văn bản còn lại sẽ bị tác động của kiểu đã chọn. Khi nhìn sẽ có vẻ kỳ quặc.

Xem lại

1. Các tag style của HTML là gì?
2. Những tag nào được sử dụng cho việc định dạng các kiểu mẫu văn bản?
3. Những bước nào bạn sử dụng cho việc áp dụng kiểu vào trong tài liệu HTML ?
4. Điểm thêm*- Các tag này tạo ra tiện lợi khi tạo trang web như thế nào?

Thực tập tự do

Thử sử dụng các tag style để làm đậm, làm nghiêng, và dùng kiểu chữ đánh máy typewriter vào văn bản trong trang web của bạn. Hãy quan sát khi bạn có thể sử dụng thành công tổ hợp các kiểu mẫu.
Đi đến phần tiếp theo....

Làm thế nào để đặt một danh sách các mục (list of items) lại với nhau, thể hiện chúng ở cả dạng số (numbered fashion) và dạng dấu chấm (bulleted fashion).

6. Danh sách, Danh sách, và Danh sách

Danh sách được dùng để trình bày các mục thông tin thành một dạng dễ đọc hơn. Chẳng hạn như, ngay sau phần tiêu đề kế tiếp dưới đây có một danh sách.
Mục đích

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

• Nhận dạng được mã cho việc tạo thành những danh sách có thứ tự (ordered list), không có thứ tự (unordered list) và danh sách lồng nhau (nested list) của một trang web.
• Đặt những loại danh sách khác nhau vào trong tài liệu HTML và nhìn thấy sự thay đổi của chúng trong trang Web.

Bài học

Có rất nhiều trang Web trình bày danh sách các mục. Có những mục bắt đầu bằng một "bullet" (unordered) hoặc là một danh sách có đánh số theo thứ tự (ordered). Những danh sách này được định dạng dễ dàng trong HTML, và chúng cũng có thể được lồng vào nhau (danh sách trong danh sách) tạo thành một dạng phân cấp tài liệu. Danh sách cũng được sử dụng cho việc tạo một bảng chỉ mục hay là một bảng nội dung của một dãy các tài liệu hoặc các chương.
Danh sách không có thứ tự

Danh sách không có thứ tự (unordered list) sử dụng tag ul được xuất hiện như là một danh sách các mục với những dấu "bullet" hoặc những ký hiệu đánh dấu ở trước. Ký hiệu dùng để đánh dấu tùy thuộc vào từng loại phiên bản của Web browser và phông để trình bày các ký tự thông thường (ví dụ như, trong Macintosh các bullet là ký tự option-8 của phông Times có dạng là một hình vuông nhỏ, còn trong Geneva nó lại là một dấu chấm tròn lớn).
Sau đây là ví dụ cho một danh sách không có thứ tự:
My Unordered List:

• Item 1
• Item 2
• Item 3

Và dạng HTML cho kết quả trên là:
<B>My Unordered List:</B> <ul> <li> Item 1 <li> Item 2 <li> Item 3 </ul>Các tag <ul> đánh dấu sự bắt đầu và kết thúc của danh sách, còn tag <li> chỉ ra từng mục cho một danh sách.
Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà browser sẽ đánh số thứ tự cho mỗi mục trong danh sách, thường là bắt đầu bằng "1." Lưu ý rằng, sự khác nhau đó chính là do một thay đổi nhỏ từ tag ul thành tag ol. Lấy ví dụ tương tự như ví dụ trên:
My Ordered List:

1. Item 1
2. Item 2
3. Item 3

Và dạng HTML cho ví dụ trên là:
<B>My Ordered List:</B> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol>Danh sách lồng nhau

Danh sách có thứ tự và danh sách không có thứ tự có thể lồng vào nhau theo nhiều mức độ khác nhau tùy thuộc vào từng loại Web browser. Vấn đề bạn cần quan tâm chính ở đây là việc kiểm tra rằng mỗi danh sách được kết thúc một cách chính xác và trật tự lồng vào nhau là đúng.
Bước đầu bạn có vẻ thấy phức tạp với các tag <ol> <li> </ul> <li>, nhưng hãy cố gắng nhớ cấu trúc cơ bản như sau :
<ul> <ol> <li> <li> <li> <li> </ul> </ol>Sau đây là một ví dụ với một danh sách không có thứ tự với các mức danh sách con khác của nó:
Nested Unordered List

• This is the first item
• This is the second item
  • This is the first sub item of the second item
    • And this is a sub item of a sub item
    • Getting lost yet?
  • This is the second sub item of the second item
  • This is the third sub item of the second item
• This is the third item

Hãy chú ý sự thay đổi của các dấu đánh dấu cho các mức khác nhau của danh sách.
Và đây là đoạn mã HTML cho ví dụ trên:
<ul><B>Nested Unordered List</B> <li>This is the first item <li>This is the second item <ul> <li> This is the first sub item of the second item <ul> <li> And this is a sub item of a sub item <li> Getting lost yet? </ul> <li> This is the second sub item of the second item <li> This is the third sub item of the second item </ul> <li>This is the third item </ul>Những danh sách lồng nhau - Trộn chúng lại với nhau

Bạn không những có thể lồng các danh sách có thứ tự vào trong danh sách có thứ tự mà còn có thể trộn lẫn các loại danh sách. Đừng quá ngạc nhiên! Bắt đầu HTML trông có vẻ hơi ngớ ngẩn, nhưng bạn hãy xem thử cách mà các danh sách lại có những danh sách khác bên trong của nó.
Lấy ví dụ, danh sách có thứ tự dưới đây bao gồm một danh sách không có thứ tự bên trong nó:
Nested Unordered List

1. This is the first item
2. This is the second item
   • This is the first sub item of the second item
     1. An this is a numbered sub item of a sub item
     2. An this is another numbered subItem of a sub item
     3. Getting lost yet?
   • This is the second sub item of the second item
   • This is the third sub item of the second item
3. This is the third item

Và đây là đoạn mã HTML cho ví dụ trên. Hãy chú ý sự sắp xếp trong cách viết HTML để dễ đọc hơn:
<B>Nested Unordered List</B> <ol> <li>This is the first item <li>This is the second item <ul> <li> This is the first sub item of the second item <ol> <li> An this is a numbered subItem of a sub item <li> An this is another numbered sub item of a sub item <li> Getting lost yet? </ol> <li> This is the second sub item of the second item <li> This is the third sub item of the second item </ul> <li>This is the third item </ol>Đặt những danh sách vào trong tài liệu HTML của bạn

Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, hãy download ngay bây giờ.
Sử dụng tag list, bạn sẽ thêm một danh sách có thứ tự và một danh sách không có thứ tự vào trang web Volcano Web của bạn.

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Mở lại tài liệu HTML trong trình soạn thảo.
3. Bên dưới đề mục Volcano Terminology chúng ta sử dụng một danh sách không có thứ tự để trình bày một số thuật ngữ kỹ thuật được sử dụng trong việc nghiên cứu núi lửa. Hãy đến mục này trong tài liệu HTML của bạn.
4. Trước hết thêm câu sau : How many do you know?
5. Và bây giờ, hãy đánh vào dạng HTML để tạo ra danh sách các thuật ngữ: <ul> <li>caldera <li>vesicularity <li>pahoehoe <li>rheology <li>lahar </ul>
6. Bây giờ chúng ta sử dụng một danh sách có thứ tự để xác định những phần yêu cầu của bài học chúng ta đang xây dựng. Bên dưới đề mục Research Project, thêm những dòng sau (Hướng dẫn: lúc này bạn nên sử dụng chức năng cắt và dán từ trong trang web trừ phi bạn có thích thú và muốn tự đánh lại đoạn văn bản!): Your mission is to find information and report on a volcano, other than the ones listed above, that has erupted in the last 100 years. Your reports must include: <ol> <li>Type of volcano <li>Geographic location <li>Name, distance, and population of nearest major city <li>Dates of most recent and most destructive eruptions. <li>Other events associated with the recent eruptions (earthquakes, floods, mudslides, etc) </ol> Then, write a one page description on the major hazards to humans in the vicinity of this volcano. Speculate on what you would do if you were in charge of minimizing the risk to the population.
7. 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

Có thể bạn muốn so sánh tài liệu của bạn với ví dụ mẫu cho phần bạn vừa làm. Nếu danh sách của bạn khác với danh sách trong ví dụ mẫu, hãy kiểm tra lại những gì bạn đã đánh trong trình soạn thảo. Hãy chắc chắn rằng nó phù hợp với các hướng dẫn trong mục Đặt những danh sách vào trong tài liệu HTML của bạn trong bài này.
Xem lại

1. Danh sách có giá trị như thế nào trong trang Web ?
2. Tag HTML nào được dùng cho danh sách không có thứ tự?
3. Tag HTML nào được dùng cho danh sách có thứ tự?
4. Phải làm thế nào để tạo ra danh sách lồng nhau ?
5. Những bước nào được sử dụng trong việc thêm một danh sách vào tài liệu HTML của bạn?

Thực tập tự do

Có thể bạn muốn có kinh nghiệm trong việc chuyển đổi một danh sách có thứ tự thành một danh sách không có thứ tự. Đồng thời bạn cũng muốn thêm một danh sách có thứ tự hay không có thứ tự vào trong tài liệu WWW của bạn. Hãy chắc chắn rằng nó được thể hiện đúng trong browser của bạn. Bạn có tạo được các danh sách có danh sách con không ?
Đi đến phần tiếp theo ....

Hãy làm thêm gì đó để không chỉ có chữ -- thêm hình ảnh vào trang Web của bạn.

7. Thêm hình ảnh vào trang Web

Việc gởi một văn bản thông qua Internet chỉ là một cách cũ của thư tín điện tử. Người ta đã làm được điều đó trong nhiều thập kỷ! Khi bạn có thể bao gồm cả hình ảnh, thông báo của bạn sẽ trở nên nhiều thông tin hơn. Có phải là một bức hình sẽ đáng giá hơn cả ngàn từ không ?
Mục đích

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

• Nhận ra những dạng hình ảnh cho World Wide Web.
• Thảo luận về những điểm chính để cân nhắc khi chèn hình ảnh vào tài liệu WWW.
• Download một tập tin hình ảnh về hệ thống của bạn.
• Sử dụng đúng những dạng HTML cho việc chèn hình ảnh trong trang web của bạn.

Bài học

Bạn sẽ cảm thấy thoải mái với bài học này! Bài này chỉ giới thiệu sơ qua về hình ảnh cho WWW. Nhưng chúng tôi muốn bạn hoạt động một chút.
Các dạng hình ảnh của Web

Có vô số dạng tập tin hình ảnh cho máy tính: PICT, GIF, TIFF, rồi thì EPS, BMP, PCX, JPEG ... Cách đọc của nó giống như một bài thơ bí ẩn. Một bài thơ tồi.
Cách thức để cho Web browser hiển thị hình ảnh là một sự định dạng của HTML để chỉ ra vị trí của tập tin hình ảnh sao cho sự định dạng đó có thể thông dịch được trong các máy tính khác nhau. Ví dụ như, thông tin theo dạng đó được nhận bởi máy Macintosh thì browser sẽ hiển thị hình ảnh theo dạng hình ảnh của máy Macintosh. Tuy nhiên, khi cũng thông tin đó gởi cho browser trên Windows, nó được hiển thị theo chế độ đồ họa của Windows.
Theo thuật ngữ kỹ thuật, chúng ta sẽ nói rằng dạng hình ảnh là độc lập với platform (platform independent). Bản thân HTML cũng là độc lập với platform vì các ký tự văn bản trơn của nó đều có thể hiểu được trong mọi máy tính.
Dạng chuẩn có thể hiển thị trong một trang web là GIF hay Graphics Interchange Format. GIF nén các thông tin của hình ảnh (giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để có thể truyền qua Internet. Kỹ thuật nén theo GIF là kỹ thuật nén có hiệu quả cao nhất khi hình ảnh có những vùng liên tục có cùng một màu, và việc nén càng lớn hơn khi có sự lặp lại màu theo chiều đứng. Dạng hình ảnh khác sử dụng trong web là JPEG (được đặt tên sau khi Joint Photographic Engineering Group thiết kế ra dạng này). Trước đây, các ảnh JPEG không được hiển thị trong cùng trang mà được hiển thị trong một cửa sổ khác nhờ vào một chương trình "trợ giúp" được cài đặt thêm vào. Nhưng hiện nay hầu hết các browser đều hổ trợ việc hiển thị ảnh JPEG ngay trong trang web.
Kỹ thuật nén JPEG rất có hiệu quả với các ảnh chụp mà màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh (các ảnh "grainy"). Tùy thuộc vào sự thỏa hiệp với chất lượng ảnh, JPEG cung cấp các loại hệ số nén về kích thước thật là có ấn tượng, đôi khi đạt đến 10 (tức là tập tin 1500KB giảm còn 150KB).
Để có nhiều thông tin hơn về các dạng tập tin này, hãy xem trang SITO tại Graphics File Compression. Nếu bạn muốn có một cuốn sách lớn, hãy xem Designing Web Graphics của Lynda Weinman.
Rất nhiều chương trình xử lý đồ thị có sẵn chức năng lưu trữ tập tin theo dạng GIF. Nếu không, dưới đây là một vài chương trình/trình tiện ích shareware để thực hiện việc chuyển đổi. Bạn có thể tìm thấy chúng tại các site như shareware.com, Jumbo , hay Yahoo.
Vài trình tiện ích cho Đồ HọaMacintoshWindows

• GIFConverter
• GraphicConverter
• clip2gif
• PhotoGIF
  (plugin for PhotoShop)

• WinGif 1.4
• Lview 3.1
• PaintShop Pro

Vài điểm cần biết khi sử dụng Đồ họa

Với tài liệu này, bạn không cần thiết phải sử dụng một trong các chương trình xử lý đồ họa nói trên. Chúng tôi sẽ trình bày đến các bạn cách để lưu trữ lại một bản sao của bất kỳ hình ảnh nào bạn nhìn thấy trên trang web.
Tuy vậy, vì bạn bắt đầu phát triển các trang web của bạn, bạn cũng nên làm quen với cách tạo ra các hình ảnh ở dạng GIF hay JPEG. Nếu trang web của bạn có thêm hình ảnh, bạn nên chú ý các vấn đề sau đây:

• Tăng số lượng và kích thước của hình ảnh có thể xem tốt hơn trên máy tính, nhưng chúng cũng làm cho người sử dụng phải chờ đợi hình ảnh được gởi thông qua mạng (cũng giống như có được bao nhiêu người trong chúng ta có máy Sun SparcStation tại nhà?) Chúng tôi đề nghị nên giữ kích thước của hình ảnh ít hơn 100K (với chúng tôi thì ít hơn 50B). Càng nhỏ càng tốt.
• Cũng với một ghi chú tương tự, không phải mọi người trong chúng ta đều có màn hình 21 inch! Nên giữ các hình ảnh không rộng hơn 480 điểm và không cao hơn 300 điểm để tránh cho người sử dụng phải scroll hay định lại kích thước cửa sổ browser của họ.
• Nhiều cấp độ màu làm cho ảnh có vẻ đẹp hơn nhưng với các hình GIF chúng sẽ không nén được nhiều như các khối cùng màu và đôi khi chúng không ghép nhóm được
• Một số chương trình xử lý hình ảnh có chế độ "no dithering" khi chuyển sang dạng GIF -- việc này có thể làm giảm "sự hỗn độn" (noise) trong các khối nền.
• Nhiều tông màu tối trên máy Macintosh không thể hiển thị được trên máy Windows.
• Thay vì hiển thị tất cả các hình ảnh trong trang web, có thể tạo liên kết chúng như là các hình ảnh bên ngoài để chúng chỉ được nạp về khi người xem click vào hypertext liên kết (điều này được xét kỹ hơn sau này trong bài 8a và trong bài 8d). Nếu bạn có nhiều hình cần trình bày, hãy thử chia nhỏ trang web của bạn thành một chuỗi các trang liên kết nhau.
• Một hình ảnh nhỏ (như là một "bullet" nhỏ) có thể xuất hiện nhiều lần trong một trang mà chỉ bị chậm rất ít thời gian cho mỗi lần sử dụng lại ảnh đó.
• Hiện nay nhiều browser "cache" được các hình ảnh (cất chúng lại trong máy của bạn), điều này có nghĩa là khi sử dụng cùng một tập tin trong nhiều trang web sẽ làm cho chúng được nạp vào từ ngay trên máy tính của chính bạn chứ không phải từ trên Internet.
• Điều quan trọng nhất, hãy chắc chắn rằng các hình ảnh là những thứ tạo thêm nghĩa cho tài liệu HTML của bạn.

Bạn có thể thiết kế ra một trang web đẹp, có nhiều hình ảnh lớn, được nạp dễ dàng từ máy tính của bạn, nhưng mà nó lại có thể chịu cảnh chậm thê thảm với các người xem sử dụng một modem tốc độ thấp qua một mạng rất bận rộn. Mạng là chỗ lúc nào cũng bị bận.
Lưu trử và Thêm Hình ảnh vào Trang Web của Bạn

Để đến được bài kế tiếp, đầu tiên bạn cần chép lại một bản sao hình ảnh của sự bùng nổ của núi lữa (hãy xem các dung nham nóng bỏng của nó!).
Chỉ cần theo các hướng dẫn trong Trung tâm Download Hình ảnh của Bài 7 rồi sau đó trở lại đây để hoàn tất bài học này
Kiểm tra lại công việc của bạn

Hãy kiểm tra để biết rằng tập tin "lava.gif" được cất vào cùng một directory/folder với tập tin văn bản HTML của bạn "Volc.htm". Nếu nó không có, hãy kiểm tra lại bạn có cất nhầm vào một directory/folder khác không. Nếu đúng như vậy, chuyển nó vào lại đúng vị trí.
Xem lại

1. Hai dạng ảnh nào được sử dụng cho World Wide Web?
2. Làm thế nào để các tập tin hình ảnh được trình bày trên các máy tính khác nhau?
3. Vài điểm lưu ý nào cần xét đến khi thêm hình ảnh vào các trang web?
4. Làm thế nào để bạn cất lại hình ảnh dung nham để sử dụng trong tài liệu WWW của bạn?

Thực tập tự do

Lướt trên web và tìm một vài hình ảnh. Thử download ít nhất một hình ảnh có thể hữu ích cho trang của bạn. Vài nơi bạn có thể thử là: Yahoo Picture Archive, SpriteLib, hay Rob's Multimedia Lab
Đi đến phần tiếp theo....

Bạn đã có hình ảnh... Bây giờ, bạn làm thế nào trong HTML để thể hiện hình ảnh trong trang web của bạn?

7a. Hình ảnh Inline

Toán học trong WWW là:
Text + Pictures = Multimedia Multimedia + WWW = Global HyperMediaBạn có đồng ý không?
Mục đích

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

• Đặt một hình ảnh vào trong tài liệu HTML của bạn.
• Chọn lựa cách xắp sếp hình ảnh với văn bản bao quanh.
• Sửa đổi tag chèn hình ảnh để phục vụ cho người sử dụng dùng browser không có hình ảnh.
• Chỉ định chiều của hình ảnh.

Bài học

Chúng ta hãy nhìn xem làm thế nào để thêm các hình ảnh giống như "chữ M lớn" vào trong một trang web ...
Tag HTML cho Inline Graphics

Một hình ảnh "inline" được xuất hiện bên trong văn bản của trang web, giống như hình "chữ M lớn" này.
Dạng HTML cho tag hình ảnh inline là:
<img src="filename.gif">trong đó filename.gif là tên của một tập tin GIF để ở cùng directory/folder với tài liệu HTML. Từ "inline" có nghĩa là web browser sẽ hiển thị hình ảnh ngay trong văn bản.
Hãy chú ý các văn bản theo ngay sau "chữ M lớn" ở trên. Nếu chúng ta muốn "chữ M lớn" ở riêng trên một dòng thì sao? Để một hình ảnh xuất hiện trên một dòng riêng biệt,

chỉ cần thêm một tag paragraph trước và sau tag image:
<img src="filename.gif"> Sự sắp xếp trong hàng của văn bản và Inline Graphics

Tag <img...> có thể thêm thuộc tính để điều khiển vị trí của văn bản so với hình ảnh trong hàng. Thuộc tính align được thêm vào trong tag <img....> có thể đem lại những hiệu quả sau:
1. align=top
<img align=top src="filename.gif">is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State... 2. align=middle
<img align=middle src="filename.gif"> is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State... 3. align=bottom (mặc định)
<img align=bottom src="filename.gif">[ is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State...
Chú ý cách sắp xếp văn bản trên mỗi dòng...(có thể thu hẹp hay mở rộng bề rộng của cửa sổ browser WWW để xem rõ sự thay đổi). Với HTML 2.0, bạn không thể có những khối văn bản ngay bên cạnh hình ảnh. Trong những bài học sau, chúng ta sẽ xem cách tạo ra những hiệu quả đó.Đặt một hình ảnh vào trong tài liệu HTML của bạn

Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download ngay bây giờ. Bạn cũng cần có hình GIF từ Trung tâm Download Hình ảnh Bài 7.
Trong bài tập này, bạn sẽ thêm hình ảnh giới thiệu núi lửa trong trang web của bạn.

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Mở lại tài liệu volc.htm trong trình soạn thảo văn bản.
3. Bên trên mục <h1>Volcano Web</h1> đánh vào: <img src="lava.gif">Dạng HTML này sẽ thêm trên đỉnh trang web của bạn hình ảnh dung nham mà bạn đã download trong bài trước.
4. Lưu trữ và reload trong web browser của bạn.

Trong việc đặt hình ảnh, bạn có thể tự hỏi tại sao chúng ta không cần đặt một tag sau hình ảnh. Điều này không cần thiết bởi vì văn bản theo sau nó là một tiêu đề. Một web browser luôn luôn chèn một dấu ngắt đoạn trước và sau một tag <h1,h2,h3...>.
Thuộc tính alt="..."

Nếu trang web của bạn sẽ được xem bởi một người sử dụng browser dạng văn bản (text-only browser, ví dụ như lynx), họ sẽ không có khả năng để xem bất kỳ những hình ảnh inline nào. Hoặc đôi khi người sử dụng tắt đi việc trình bày hình ảnh inline để tiết kiệm thời gian download qua các kết nối mạng chậm. Một thuộc tính của tag <img...> cho phép thay vào vị trí của hình ảnh bằng một chuổi văn bản mô tả nó.
Bình thường khi gặp trường hợp này, một người sử dụng text-browser sẽ thấy một vị trí giữ chỗ (place holder) để phần đầu trang web của chúng ta trông giống như sau:

[IMAGE] Volcano WebIn this lesson you will use the Internet to research information on volcanoes and then write a report on your results. -----------------------------------------------------------------In this Lesson... Cách trình bày này giúp người sử dụng biết rằng có một hình ảnh được chen vào đầu của trang này. Bạn có thể sửa đổi tag <img> để thay vì trình bày một vị trí giữ chỗ như trên, browser sẽ hiển thị một dòng văn bản. Lấy ví dụ trong bài của chúng ta, chúng ta có thể thêm "A lesson on:" bằng cách điều chỉnh lại tag <img...> như sau:
<img alt="A Lesson on:" src="lava.gif">Thuộc tính alt="..." thay vị trí giữ chỗ bằng một dòng văn bản để cho một text-browser (hay khi tắt việc hiển thị hình ảnh), bài của chúng ta sẽ xuất hiện như sau:
A Lesson On Volcano WebIn this lesson you will use the Internet to research information on volcanoes and then write a report on your results. -----------------------------------------------------------------In this Lesson... Bây giờ hãy điều chỉnh tương tự như trên vào trang HTML của bạn cho tag <img> có hình núi lửa.
Thuộc tính chiều cao và chiều rộng

Một khả năng khác mà bạn có thể muốn thêm vào tag <img...> là hai thuộc tính để xác định kích cở hình ảnh tính bằng số điểm (pixel). Tại sao vậy? Thông thường web browser của bạn phải tự xác định những kích cở này khi nó đọc hình ảnh; việc nạp trang của bạn có thể nhanh hơn nếu bạn chỉ định những thông số này trong HTML.
Dạng để thêm những thông số này là:
<img src="filename.gif" width=X height=Y >trong đó X là chiều rộng và Y là chiều cao của hình ảnh tính theo điểm.
Bạn có thể sử dụng nhiều chương trình tiện ích để xác định những giá trị số này. Một cách khác để tìm những kích cở của hình ảnh là nạp nó vào trong browser của bạn (bạn có thể sử dụng chức năng kéo và thả - drag and drop - biểu tượng của hình ảnh vào trong browser của bạn), khi đó chiều cao và chiều rộng sẽ được hiển thị trên thanh tiêu đề của browser.
Với ví dụ của chúng ta trong bài học này, hình lava.gif có 300 điểm chiều rộng và 259 điểm chiều cao. Vì vậy bạn nên điều chỉnh trong tập tin volc.htm thành:

<img alt="A Lesson on:" src="lava.gif" width=300 height=259> Chú ý: Thứ tự các thuộc tính trong tag <img> không quan trọng. Thông thường chúng ta sẽ tự hỏi có thể thay đổi những kích cở của hình ảnh bằng cách đưa vào những số khác với kích cở thật của hình ảnh không. Câu trả lời là được nhưng kết quả nhận được thì không thể biết trước. Nếu bạn cho những số lớn hơn (để làm cho hình lớn hơn) kết quả là một hình có các "khối màu" ("blocky" picture). Nếu bạn cho những số bé hơn (để làm cho hình nhỏ hơn) kết quả có thể làm biến dạng hình ảnh. Bạn có thể tự làm thử để có kinh nghiệm. Với chúng tôi, đó là một sự sai lầm!
Kiểm tra lại công việc của bạn

Bạn có thể so sánh công việc của bạn với ví dụ mẫuđể biết tài liệu này nên xuất hiện như thế nào. Nếu tài liệu của bạn không giống như ví dụ mẫu, kiểm tra lại xem bạn đã đánh vào dạng hình ảnh trong trình soạn thảo như thế nào. Hãy chắc chắn rằng bạn đã đánh vào theo sự hướng dẫn trong phần Đặt một hình ảnh vào trong tài liệu HTML của bạn của bài này.
Nếu bạn thấy một biểu tượng hình với một dấu chấm hỏi trước hết hãy kiểm tra lại xem tập tin HTML và hình ảnh GIF có cùng ở trên một folder/directory không. Sau đó, bạn cũng nên chắc chắn rằng tên tập tin bạn đánh trong tag <img... > là tương ứng với tên của tập tin GIF. Chú ý: Một số hệ thống máy tính (UNIX) có phân biệt dạng chữ hoa và chữ thường (case sensitive) trong tên tập tin, điều này có nghĩa rằng tập tin "lava.GIF" KHÔNG phải là "lava.gif". Một số máy tính khác (Macintosh) lại xem chúng là cùng một tập tin. Ngay cả khi máy tính của bạn không có sự khác biệt như vậy, chúng tôi vẫn đề nghị bạn nên xét lại dạng chữ trong cách đặt tên tập tin và các tham khảo chúng trong HTML của bạn. (Nhiều WWW servers ở trên UNIX).Xem lại

1. Dạng HTML cho một hình ảnh inline là gì?
2. Tag nào bạn phải thêm vào trước một tag hình ảnh để nó xuất hiện trên một dòng riêng?
3. Làm thế nào để thêm hình ảnh núi lửa vào tài liệu của bạn?
4. Thuộc tính alt="...." làm gì? Thuộc tính height="...." là gì?

Thực tập tự do

Thêm một hình ảnh inline vào trang web của bạn bằng cách sử dụng một hình GIF đang có trong máy của bạn hoặc một hình được download từ Internet.
Đi đến bài tiếp theo....

Tạo liên kết đến các tài liệu và tập tin khác mà bạn tạo ra giống như trên Internet.

8. Tạo Liên kết bằng Anchors

Mục đích của bài này chỉ cung cấp cho ta những thông tin bổ sung... Vì thế bài này nhanh và khá dễ hiểu!
Thế nào làURL?

Sức mạnh thật sự của web là khả năng tạo ra những liên kết siêu văn bản (hypertext link) đến các thông tin liên quan. Những thông tin này có thể là những trang web khác, những hình ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của Gopher server, một trình log-in vào máy tính ở xa (remote computer), hay một tập hợp các phần mềm, hay một "ftp" site.
WWW sử dụng một cách định địa chỉ gọi là URL, hay Uniform Resource Locator (đôi khi còn gọi là "Universal Resource Locator"), để chỉ ra vị trí của những mục như vậy. Những liên kết này thường được biểu diễn bằng những chữ màu xanh có gạch dưới và được gọi là anchor.
Trong những bài học tiếp theo chúng ta sẽ:

• Xem lại khái niệm của URL
• Tìm và chép URL từ web browser vào tài liệu văn bản HTML của bạn.
• Viết một anchor HTML để liên kết đến tài liệu trong cùng thư mục với tài liệu đầu tiên.
• Viết một anchor HTML để liên kết đến tài liệu khác thư mục với tài liệu đầu tiên.
• Viết một anchor HTML để liên kết đến một trang web khác trên Internet.
• Viết một anchor HTML để liên kết đến Gopher Server.
• Viết một anchor HTML để liên kết đến một phần khác của cùng một tài liệu.
• Liên kết với một hình ảnh như một "hyperlink" đến tài liệu khác.

Ồ! Nghe như có nhiều việc phải làm! Đừng lo lắng, mọi thứ điều không phức tạp như bạn nghĩ. Sau cùng, nếu không có hypertext thì chúng ta không thể gọi tài liệu này là Soạn thảo HTML mà phải gọi là Soạn thảo TML
Đến phần tiếp theo....

Dùng URLs để kết nối các tài liệu thông qua liên kết siêu văn bản

8a. Liên kết đến tập tin cục bộ

Tài liệu của tôi có thể nói chuyện với tài liệu của tôi được không? Được chứ, ít nhất là chúng có thể liên kết với nhau được!
Mục đích

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

• Tạo liên kết đến tài liệu HTML trong cùng directory/folder với tài lệu chính của bạn.
• Tạo liên kết để hiển thị một hình ảnh.
• Tạo liên kết đến một tập tin trong một directory/folder khác với tài liệu chính của bạn.
• Tổ chức lại cấu trúc web của bạn.

Bài học

Bây giờ, bạn sẽ đi bước đầu tiên của "anchoring" bằng cách tạo ra một liên kết siêu văn bản đến một trang web thứ hai. Những liên kết này được gọi là "cục bộ" (local) bởi vì chúng cùng ở trên một máy tính và là tài liệu đang làm việc của bạn (chúng không cần phải thám hiểm trên Internet). Bạn sẽ thay đổi một chút về sự phát triển web site của bạn (bạn có thấy rằng điều này tạo ra một cái gì đó hơi khác một chút với từ "home gape" không?).
Lưu ý : Nếu bạn chưa có tài liệu từ bài trước, hãy download một bản sao.
Liên kết đến Tập tin cục bộ

Liên kết anchor đơn giản nhất là liên kết để mở tập tin HTML khác trong cùng một thư mục với trang web đang được thể hiện. Dạng HTML để làm việc này là:
<a href="filename.htm">text that responds to link</a>Hãy xem chữ "a" là anchor còn "href" là "hypertext reference.
Tên tập tin phải là một tập tin HTML khác. Bất cứ văn bản nào xuất hiện sau ký hiệu > và trước ký hiệu </a> sẽ là "siêu văn bản", nó được hiển thị bằng gạch dưới và "hyper".
Hãy theo những bước sau để xây dựng một Anchor trong tài liệu HTML của bạn để liên kết đến một tập tin cục bộ:

1. Mở văn bản HTML của bạn , volc.htm, trong trình soạn thảo.
2. Đầu tiên, dưới tiêu đề Volcanic Places in the USA đánh vào đoạn văn để giới thiệu về hai núi lửa để sử dụng cho các phần kế tiếp. Listed below are two places in the United States that are considered "active" volcanic areas.
3. Bên dưới tiêu đề "Mount St. Helens", đánh: On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm"> detailed observations</a> on the mechanics of highly explosive eruptions. Đoạn văn "detailed observations" sẽ tạo liên kết cho người xem đến một tài liệu HTML thứ hai gọi là msh.htm. Tập tin HTML chưa có; chúng ta sẽ tạo ra nó trong các bước (5) và (6).
4. Lưu và đóng tài liệu HTML của bạn
5. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn.
6. Nhập các dòng sau trong màn hình mới: <html> <head> <title>Mount St Helens</title> </head> <body> <h1>Mount St Helens</h1> The towering pine trees of this once-quiet mountain were toppled over like toys. </body> </html>
7. Lưu tập tin này với tên msh.htm trong cùng một directory/folder với tài liệu HTML của bạn (Volc.htm).
8. Reload Volc.htm trong web browser.
9. Kiểm tra liên kết siêu văn bản tại các từ "detailed observations". Khi được chọn, nó phải kết nối đến trang mới về Mount St. Helens.

Liên kết Anchor đến một hình ảnh

Trong bài 7a, chúng ta đã xét cách trình bày một hình ảnh "inline" trong trang Web. Với tag anchor, bạn cũng có thể tạo ra một liên kết để hiển thị một tập tin hình ảnh. Khi chọn một liên kết anchor , hình ảnh sẽ được download và trình bày riêng trong một trang trống hoặc cũng có thể web browser của bạn tự động gọi một trình ứng dụng để hiển thị hình ảnh.
Liên kết anchor đơn giản nhất là liên kết đến một tập tin trong cùng một directory/folder với tài liệu gọi nó. Dạng để tạo một liên kết siêu văn bản đến một hình ảnh giống như liên kết đến một tài liệu HTML khác ở trên
<a href="filename.gif">text that responds to link</a>trong đó filename.gif là tên của tập tin hình ảnh GIF.
Bây giờ theo những bước sau để thêm một liên kết với một tập tin hình ảnh trong tài liệu của bạn:

1. Trước hết, bạn cần chép một bản sao tập tin hình ảnh GIF từ Trung tâm Download Hình ảnh Bài 8a.
2. Mở tập tin msh.htm trong trình soạn thảo.
3. Điều chỉnh đoạn văn bản để tạo liên kết tới hình ảnh Mount St. Helens. The towering pine trees of this once-quiet mountain were <a href="msh.gif">toppled over like toys</a>.
4. Lưu lại tập tin msh.htm và Reload trong web browser của bạn.
5. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3)
6. Một bức ảnh cây cối bị thổi ngã sẽ được thể hiện

Những liên kết đến các thư mục khác

Tag Anchor cũng có thể tạo liên kết đến một tài liệu HTML hoặc tập tin hình ảnh trong một directory/folder khác có liên quan tới tài liệu mà có chứa anchor. Ví dụ như, trong bài của chúng ta , chúng ta có thể lưu trữ tất cả các tập tin hình ảnh trong một directory/folder riêng gọi là pictures. Khi bạn tạo ngày càng nhiều tập tin HTML, sẽ tốt hơn khi giữ các tập tin hình ảnh trong một vùng riêng biệt. Hãy làm điều sau:

1. Trong hệ thống của bạn tạo một sub-directory/folder pictures trong cùng vị trí lưu trữ tập tin Volc.htm.
2. Chuyển tập tin msh.gif đến sub-directory/folder mới này.
3. Mở tập tin msh.htm trong trình soạn thảo.
4. Điều chỉnh tag anchor cho hình ảnh cần đọc: The towering pine trees of this once-quiet mountain were <a href="pictures/msh.gif">toppled over like toys</a>. Chú ý: Với HTML bạn có thể hướng dẫn web browser của bạn mở mọi tài liệu/hình ảnh tại thư mục cấp thấp hơn tài liệu hiện tại bằng cách sử dụng ký tự "/" để chỉ ra thư mục con gọi là "pictures."
5. Lưu trữ tài liệu HTML và reload lại trong browser của bạn

Nếu tất cả đều tốt, việc liên kết trong câu mô tả các cây bị thổi ngã sẽ gọi đến tập tin hình ảnh đang có trong directory/folder pictures.
Liên kết Anchor đến thư mục cấp cao hơn

Loại liên kết chúng ta vừa thực hiện được gọi là các liên kết "tương đối" (relative link), nghĩa là một Web browser có thể xây dựng lại đầy đủ URL dựa trên vị trí hiện hành của trang HTML và những thông tin liên kết trong các tag <a href=...>. Điều này rất tốt bởi vì bạn có thể xây dựng tất cả các trang web của bạn trên cùng một máy tính, kiểm tra chúng, và di chuyển chúng vào một máy khác, tất cả các liên kết tương đối vẫn giữ nguyên hiệu ứng.
Trong bài học chúng ta đã biết làm thế nào để xây dựng một siêu liên kết (hyperlink) đến một tài liệu lưu trữ trong một thư mục thấp hơn trang HTML đang làm việc. Lưu ý rằng bạn cũng có thể xây dựng một liên kết đến một thư mục cao hơn bằng cách sử dụng HTML sau:
<a href="../../home.htm">return to home</a>Mỗi một lần xuất hiện của "../", URL của liên kết anchor báo cho web browser đi đến một directory/folder cao hơn một cấp tương ứng với trang hiện tại; trong trường hợp cụ thể này có nghĩa là lên hai cấp thư mục và tìm tập tin home.htm.
Trong ví dụ của chúng ta, hãy xét trường hợp khi thư mục con pictures không cùng ở trong directory/folder với tập tin volc.htm mà ở cao hơn một cấp
Trong phần trước chúng ta đã tạo liên kết từ volc.htm tới tập tin msh.gif trong thư mục con:
<img src= "pictures/msh.gif">Bây giờ, chúng ta muốn tổ chức lại cấu trúc web để thư mục pictures ở một mức cao hơn. Liên kết sẽ được viết như sau:
<img src= "../pictures/msh.gif">Vì vậy web browser tìm kiếm thư mục pictures được lưu trữ cao hơn một mức so với tập tin volc.htm.
Sự tiện lợi của cấu trúc này là dễ dàng lưu lại một số lượng lớn hình ảnh trong directory/folder cao hơn để có thể dùng chung trong những trang web khác. Chúng ta có thể thực hiện một bài học khác về địa mạo (điểm đặc trưng tự nhiên của bề mặt quả đất) và sử dụng những hình ảnh được lưu trữ trong directory/folder này.
Bây giờ đã đến lúc tổ chức lại các tập tin HTML của chúng ta. Để thực hiện được điều này bạn cần làm quen với việc di chuyển tập tin và thư mục trên máy tính của bạn. Hãy đọc một cách cẩn thận! Bạn có thể cảm thấy khá phức tạp, nhưng chẳng bao lâu nữa tất cả đều rõ ràng thôi!

1. Đầu tiên, tạo directory/folder mới có tên là volcano (một lời khuyên là nên giữ các tên tập tin ở dạng chữ nhỏ).
2. Di chuyển hai tập tin HTML volc.htm và msh.htm vào trong directory/folder mới này.
3. Di chuyển directory/folder pictures (cùng với tập tin msh.gif bên trong) đến cùng cấp với directory/folder mới volcano. Tương tự, di chuyển tập tin lava.gif mà chúng ta tạo ra trong bài 7a vào thư mục các hình này.
4. Như vậy toàn bộ thư mục (workarea) bây giờ gồmhai thư mục con - một để giữ các tập tin HTML (volcano) và một giữ các hình ảnh (pictures): + workarea (directory) + pictures (directory) msh.gif volc.gif + volcano (directory) volc.htm msh.htm
5. Chúng ta đã di chuyển một số thứ do vậy bây giờ chúng ta phải cập nhật lại các liên kết anchor trong các tập tin HTML. Trước hết, hãy xem lại liên kết cục bộ trong tập tin volc.htm: <h3>Mount St Helens</h3> On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm">detailed observations</a> on the mechanics of highly explosive eruptions.<B> Chú ý: Vì tập tin msh.htm vẫn ở cùng thư mục với volc.htm, chúng ta không cần thay đổi gì cả trong tập tin HTML này! Bạn có thấy sự liên kết tương đối là một tính chất rất hay của HTML không?</B>
6. Nhưng bây giờ hãy xem lại liên kết đến hình Mt. St Helens đã tạo ra trong tập tin msh.htm: The towering pine trees of this once-quiet mountain were <a href="pictures/msh.gif">toppled over like toys</a>.Mở tập tin này trong trình soạn thảo văn bản và điều chỉnh liên kết như sau:
   The towering pine trees of this once-quiet mountain were <a href="../pictures/msh.gif">toppled over like toys</a>.Liên kết tương đối này báo cho web browser xét lên một cấp so với directory/folder hiện hành (volcano) rồi tìm directory/folder có tên (pictures) mà ở đó có chứa ảnh msh.gif
7. Cuối cùng, bạn cần điều chỉnh lại tag <img...> tag để hiển thị hình ảnh tiêu đề. Mở tập tin volc.htm trong trình soạn thảo và sửa đổi dòng ngay sau tag <body>: <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259>
8. Lưu lại tập tin của bạn. Bạn nên Mở lại tập tin volc.htm trong web browser của bạn và thử lại liên kết đến msh.htm và liên kết đến hình Mount St Helens.

Thêm một sự thay đổi nhỏ nữa

Bước thay đổi nhỏ cuối cùng này có thể không rõ ràng, ngưng chúng tôi sẽ cố gắng giải thích ngắn gọn. Điều cuối cùng bạn nên làm trong bài này là đổi tên tập tin từ volc.htm thành index.htm
Tại sao vậy? Hãy xem như bạn đã kết thúc bài này và sẵn sàng đưa web site của bạn vào World Wide Web server để mọi người cùng xem. Và chúng ta hãy giả thiết rằng địa chỉ Internet của server này tại Big University là:
https://www.bigu.edu/Và tập tin của bạn được cất vào thư mục sau:
--= top level of server: www.bigu.edu /courses /science /geologynhư vậy URL cho Volcano Web có thể là:
https://www.bigu.edu/courses/science/...lcano/volc.htmỒ, khá dài nhỉ? Bây giờ là những lời giải thích như đã hứa -- trên nhiều WWW server bạn có thể chỉ định một tên chuẩn gọi là trang web "mặc nhiên" (default) cho một thư mục và trên nhiều hệ thống tên đó là .... index.htm. Điều này có nghĩa rằng địa chỉ Internet:
https://www.bigu.edu/courses/science/geology/volcano/tương đương với
https://www.bigu.edu/courses/science/...cano/index.htmĐiều này có thể làm cho bạn nghĩ là đã tiết kiệm được nhiệu năng lượng trong việc xóa bớt 20 ký tự từ URL! Thực tế, nó làm cho URL của bạn có vẻ chuyên nghiệp hơn. Nếu bạn nói có một Home page là Longhorn Cheese,
https://www.cheese.com/longhorn/có vẻ ít rườm ra hơn là
https://www.cheese.com/longhorn/longhorn.htmkhi để cho mọi người đọc URL của bạn và thử đánh vào browser của họ.
Kiểm tra lại công việc của bạn

So sánh trang web với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Trước hết bạn sẽ thấy trang Volcano Web. Khi bạn click vào siêu văn bản tại detailed observations, web browser của bạn sẽ hiển thị một trang mới. Cuối cùng, khi bạn click vào toppled over like toys, web browser của bạn sẽ hiển thị trong một cửa sổ một tập tin hình ảnh được cất trong một sub-directory/folder.
Sử dụng button back của browser hai lần để quay về trang này. Nếu trang web của bạn khác với mẫu, xem lại văn bản bạn đánh vào trong trình soạn thảo văn bản.
Xem lại

1. Các bước nào được sử dụng để tạo một liên kết trong tài liệu của bạn đến một tập tin cục bộ?
2. Những bước nào được sử dụng để tạo một liên kết khi muốn hiển thị hình ảnh trong cửa sổ riêng biệt?
3. Làm thế nào để tạo một liên kết đến một tập tin trong một directory/folder thấp hơn tài liệu chính của bạn? cao hơn?
4. Ý nghĩa của tập tin có tên index.htm trên một WWW server là gì?

Thực tập tự do

Tạo một tài liệu HTML sử dụng các định dạng HTML mà bạn đã quen biết đến giai đoạn này. Trở về trang đầu tiên và tạo một anchor để liên kết đến trang mới này.
Đi đến phần tiếp theo....

Wow! Làm việc nhiều quá! Trong bài học tiếp theo bạn sẽ xét làm thế nào để HTML liên kết đến những tài nguyên "ở đâu đó" trong Internet.

8b. URLs - Con trỏ đến Internet

URL? Earl? Yurl? hurl? gyrl?
Đến lúc để liên kết đến Big Wide Web sử dụng sơ đồ định địa chỉ của web.
Mục đích

Sau khi hoàn tất bài này bạn có thể:

• Nhận dạng chức năng của Uniform Resource Locators (URLs).
• Nhân biết cấu trúc của một URL.
• Kiểm tra URL trong liên kết siêu văn bản của bất kỳ trang web nào.

Bài học

Chú ý: Trong bài này, bạn sẽ không cần tập tin văn bản HTML của bạn. Một bài học không cần gắng sức!
URL là gì?

WWW sử dụng Uniform Resource Locator (URL) để tìm vị trí của những tập tin và tài liệu của các máy tính trên Internet. Trên màn hình browser của bạn, URL cho tài liệu này được thể hiện ở phần phần trên của cửa sổ browser. URL bao gồm:

• Một sự định dạng loại Internet server;
• Một địa chỉ Internet; và
• Một đường dẫn tập tin (file path) chỉ tới mục đang xem.

URL là thứ bạn cần để xây dựng một liên kết từ trang web bạn tạo ra đến những phần thông tin khác trên Internet. Để biết chi tiết hơn, hãy xem Curling Up To URLs (v0.2)
Cấu trúc URL như thế nào?

Cấu trúc của một URL là:
type://in.ter.net.address/directory/sub-directory/.../filename"type" chỉ ra loại của Internet server được truy xuất:
http Một World Wide Web server. "HTTP" tượng trưng cho HyperText Transfer Protocol.
gopher Một Internet Gopher site, thư mục các tập tin và thông tin theo dạng thực đơn.
ftp Một anonymous File Transfer Protocol (FTP) site, truy tìm các tập tin.
telnet Khởi tạo một trình Telnet để log on từ xa tới một máy tính khác. Khi chọn, web browser sẽ khởi động chương trình Telnet và kết nối tới site được chỉ định .
WAIS Wide Area Indexed Server- một site dò tìm các tài liệu theo chủ đề được xác định bằng các từ khóa.
file Một tập tin trên máy cục bộ (đĩa cứng, đĩa mềm, file server nội bộ).Sau Type luôn luôn là "://" và địa chỉ Internet của máy từ xa. Sau đây là cấu trúc của địa chỉ này:
host.domain.domain.domainVí dụ như:
machine.department.college.edu 123.45.6.78 office.company.com agency.branch.gov machine.organization.country Nếu URL chỉ đến mức chính của host này ("home page" của nó), thì URL được kết thúc bằng một dấu "/". Nến bạn liên kết tới một thư mục con hoặc một tập tin, bạn phải thêm chính xác đường dẫn tới nó bằng cách sử dụng dấu "/". Chú ý: Hầu hết các server đều kiểm tra ngữ pháp! Và cũng kiểm tra dạng chữ hoa hay chữ thường! Các tên tập tin trên các máy UNIX có phân biệt chữ hoa và chữ thường, điều này có nghĩa là tập tin có tên SpiffyText.htmlà khác với tập tin spiffytext.htmTạo kinh nghiệm với URLs

Chú ý rằng URL có thể tạo liên kết đến mọi site, thư mục, thư mục con, tập tin văn bản, hình ảnh, digital movie, hay tập tin âm thanh trên mọi Internet site đã cài đặt cho phép truy xuất tự do. Cách tốt nhất để xem các URL khác nhau là di chuyển chuột của bạn qua các liên kết siêu văn bản trong trang web nào đó- nếu bạn nhìn vào bên dưới web browser của bạn, nó sẽ trình bày URL mà bạn muốn nối đến khi bạn click vào liên kết đó. Bạn có thể vào một site lớn như Yahoo và "nhìm trộm" các URL (bạn có thấy URL của Yahoo khi bạn di chuyển mouse qua liên kết trong câu vừa rồi không?)
Còn bây giờ là một cách rất dể để chép lại một URL của một liên kết trong một trang bất kỳ. Trước hết bạn mở thực đơn "bí mật" từ một liên kết siêu văn bản nào đó trong một trang web (Ấn và giữ chuột trong Macintosh; ấn và giữ button phải của chuột trong Windows và Unix). Từ thực đơn này, chọn Copy This Link Location (hay chức năng tương tự). Sau khi thả button chuột ra, chuyển đến một trình soạn thảo văn bản nào đó và chọn Paste từ thực đơn Edit. Hay quá! Bạn đã lấy được một URL từ một liên kết trong trang web (với cách này bạn có thể chép một URL ngay cả khi bạn chưa tham quan trang mà nó liên kết đến!)
Xem lại

1. Mục đích của URL cho World Wide Web?
2. Nơi nào thấy được URL trên một màn hình WWW?
3. Cấu trúc cơ bản của một URL?
4. Làm thế nào để thấy được URL của một liên kết siêu văn bản sẽ nhảy đến?

Thực tập tự do

Tìm vài site trên Internet mà bạn cảm thấy thích. Với mỗi site, ghi lại URL của nó đã được trình bày gần trên đỉnh của cửa sổ browser. Thử xem bạn có thực hiện được việc chép và dán (copy and paste) các URL vào một tài liệu văn bản hay không. Bạn sẽ sử dụng danh sách này để thêm các liên kết từ các trang web của riêng bạn đến các site mà bạn đã tìm thấy.
Đi đến phần tiếp theo ....

Bạn sẽ dùng URL trong các tag anchor để tạo liên kết đến Internet cho trang Volcano Web của bạn.

8c. Liên kết đến các site Internet bên ngoài

Bạn nên làm tươi lại cỗ máy của bạn bằng cách chạm vào Information SuperHighway, được không? Ở đây chúng ta sẽ mở rộng cách sử dụng của các tag anchor để tạo ra liên kết đến các tài nguyên có sẵn trên Internet.
Mục đích

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

• Tạo một anchor để liên kết đến một Internet site.
• Chép nhanh URL của một site và sử dụng nó trong tài liệu HTML của bạn.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu bài học trước, bạn có thể download ngay bây giờ.
HTML cho các Anchor đến Internet

Tạo liên kết đến một site trên Internet bao gồm những điều chúng ta đã xét trong bài Liên kết với tập tin cục bộ (Bài 8a) cùng với bài về URLs (Bài 8b). Dạng HTML đầy đủ cho một liên kết anchor đến một mục trên Internet là:
<a href="URL">Text to Activate Link</a>Trong đó URL giữa hai dấu nháy là dạng đầy đủ của Uniform Resource Locator, cho biết địa chỉ của Internet site mà bạn muốn gởi đến người đọc. Chuổi Text to Activate Link là dòng chữ sẽ được hiển thị như là siêu văn bản trong web browser thường (nhưng không phải luôn luôn) có dạng gạch dưới và màu xanh. Khi người đọc click trên siêu văn bản này, web browser sẽ liên kết chúng với Internet site được chỉ định bởi URL. Nên nhớ rằng một URL có thể là một liên kết đến một World Wide Web (WWW) server khác, Gopher server, FTP site, hoặc bất kỳ một tập tin văn bản, hình ảnh, âm thanh, video trên các server này.
Bây giờ chúng ta sẽ thêm một liên kết siêu văn bản đến site của NASA là site có thông tin về các núi lửa trên Sao hỏa (planet Mars). Theo những chỉ dẫn sau để thêm liên kết anchor vào tài liệu HTML của bạn:

1. Mở tập tin index.htm của bạn trong trình soạn thảo văn vản.
2. Bên dưới tiêu đề Volcanic Places on Mars, nhập văn bản sau: <a href="https://bang.lanl.gov/solarsys/mars.htm">Mars</a> has its fair share of volcanic landforms, including the largest known volcano in the solar system,<a href="https://bang.lanl.gov/solarsys/raw/mars/olympus.gif">Olympus Mons</a> Chú ý: Chúng ta đã tạo sự liên kết đến hai loại thông tin khác nhau. Siêu liên kết (hyperlink) đầu tiên nối đến một trang web mô tả thông tin về Sao hỏa. Cái thứ hai là liên kết đến một ảnh GIF nhỏ của núi lửa Martian.
3. Lưu và Reload trong web browser của bạn.

Một cách dễ dàng để nhập các URL trong tag Anchor

Như là bạn đã thấy trong các trang web, URL của trang hiện tại có thể thấy được ở phần trên của cửa sổ web browser (bạn có thể tìm kiếm thực đơn để Trình bày URL). Ví dụ như, trong tài liệu này, URL trông giống như sau:
https://www.mcli.dist.maricopa.edu/tut/tut8c.htmlBạn có thể sử dụng chuột để chọn và chép lại một URL từ phần trình bày trong web browser rồi sau đó dán nó vào trong tag anchor của tài liệu HTML. Điều này hiệu quả hơn là viết URL ra giấy rất nhiều (đôi lúc khá dài!).
Bây giờ chúng ta sẽ thêm một số liên kết tới các site khác mà chúng ta sẽ liệt kê ra trong phần References của bài Volcano. Một trong các site có thể cung cấp thông tin liên quan là US Geological Survey.
Theo những bước sau:

1. Mở tài liệu HTML index.htm trong trình soạn thảo
2. Dưới tiêu đề "References", nhập: <ul><li> <a href="">Educational Resources from theUSGS</a></ul> Chú ý: Chúng ta đã tạo ra liên kết siêu văn bản và vẫn cần phải thêm vào một URL giữa hai dấu nháy.
3. Nối đến US Geological Survey Education Index trong cửa sổ browser của bạn.
4. Từ trang web, sử dụng chuột để chọn URL đang được hiển thị trong vùng trình bày URL.
5. Từ thực đơn Edit, chọn Copy URL.
6. Bây giờ , trở lại tài liệu HTML của bạn index.htm
7. Click mouse vào giữa hai dấu nháy mà bạn đã đánh vào ở bước #2 và Dán vào tài liệu bạn đã chép trong bước #5. Tag anchor cuối cùng giống như sau: <a href="https://info.er.usgs.gov/education/index.html"> Educational Resources from the USGS</a> Chú ý: Bạn vừa thiết lập xong một cấu trúc HTML sử dụng Danh sách Không có thứ tự, với mỗi mục là một liên kết siêu văn bản đến một site có cung cấp thông tin về núi lửa. Để xem lại các danh sách, hãy chọn Bài 6.

Như là phần thực tập thêm, hãy vào các site Internet dưới đây với các tài liệu về Địa chất (Geology) và/hay núi lửa (Volcanoes). Chép các URL và xây dựng ít nhất hai site trong phần Reference:
Các Site có Thông tin về Núi lửa: Alaska Volcano Observatory * Cascades Volcano Observatory * Michigan Tech Volcanoes Page * NASA Earth Observing System (EOS) IDS Volcanology Team * NASA Facts: Volcanoes and Global Climate Change * Smithsonian Global Volcanism Program * Volcano Listserv * Volcano Watch Newsletter * JASON Project VI: Island Earth
Các Site có Thông tin về các Tai họa Tự nhiên (Natural Hazard): Disaster Information * Emergency Preparedness Information eXchnage (EPIX) * NGDC Natural Hazards Data
Các Site có Thông tin Tổng quát về Địa chất: Earth Resources Observation Systems (EROS) Data Center * EINet Galaxy * Environmental Internet Catalog * NASA Internet Connections * NOAA Environmental Information Server * Planet Earth Home Page * Rice University * United States Geological Survey * Whole Internet Catalog * WWW Virtual Library 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 tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết không nối đến đúng site ở xa, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Chú ý rằng danh sách các tham khảo của bạn có thể không giống như trong ví dụ mẫu.
Xem lại

1. Địa chỉ cho một mục trên Internet là gì?
2. Những bước nào cần cho việc tạo một liên kết anchor đến NASA Internet Site?
3. Cách nhanh nào được dùng để đưa một URL vào trong liên kết anchor?
4. Hãy nói cho bạn bè về các liên kết khác mà bạn đưa vào tài liệu của bạn.

Thực tập tự do

Tạo các liên kết anchor từ trang web của bạn để nối đến vài địa chỉ URL mà bạn khám phá được.
Đi đến bài tiếp theo....

Trong bài kế bạn sẽ tạo liên kết để kết nối những phần khác nhau trong một tài liệu HTML .

8d. Liên kết Các phần của một Trang

Bạn đã biết làm thế nào để liên kết tới những trang web khác là những trang do bạn tạo ra hay là những trang có trên Internet. Nếu bạn muốn kết nối tới một phần dược chỉ định bên trong một tài liệu thì sao? BẠN CÓ THỂ LÀM ĐƯỢC ĐIỀU NÀY!
Mục đích

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

• Tạo một dấu hiệu tham khảo ẩn cho một phần riêng biệt bên trong một tập tin HTML.
• Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML.
• Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML khác.
• Tạo một bảng mục lục siêu văn bản cho một trang web.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ. Anchor được đặt tên

Một anchor được đặt tên (named anchor) là một dấu hiệu tham khảo ẩn cho một phần đặc biệt nào đó của tập tin HTML của bạn. Nó được sử dụng để tạo liên kết tới một phần khác của cùng trang khi trang đó dài, hoặc để đánh dấu mục của một trang khác. Lấy ví dụ, trong trang bạn đang xem, tôi có thể tạo ra một dấu ẩn gọi là "check" để đánh dấu tiêu đề "Kiểm tra lại công việc của bạn" bên dưới. Sau đó, tôi viết một liên kết anchor để kết nối tới mục này trong tài liệu này. Một khi bạn click trên một liên kết đến anchor được đặt tên này, web browser của bạn sẽ chuyển đến chỗ để dòng này nằm trên đỉnh của màn hình.
Sau đây là một ví dụ để bạn có thể thử ngay bây giờ. Đi đến Kiểm tra lại công việc của bạn. Khi đến đó, bạn sẽ thấy một liên kết để trở lại mục này.
Dạng HTML cho việc tạo anchor được đặt tên là:
<a name="NAME">Text to Link To</a> hay với liên kết bạn vừa thử ở trên: <a name="check">Kiem tra lai cong viec cua ban</a>Chú ý sự khác biệt với liên kết anchor <a href=... chúng ta đã xét trong bài 8a. Viết một liên kết tới một Anchor được đặt tên

Khi bạn muốn tạo một liên kết siêu văn bản (hay một "liên kết anchor", xem bài 8a) tới một anchor được đặt tên, sử dụng dạng HTML sau: <a href="#xxxxx">Text to act as hypertext</a>hay liên kết bạn vừa thử để đến phần dưới của tài liệu này: Di den <a href="#check">Kiem tra lai cong viec cua ban</a>Kí hiệu "#" chỉ cho web browser của bạn tìm trong tài liệu HTML một anchor được đặt tên là "xxxxxx" hay trong ví dụ của chúng ta là "check". Khi bạn chọn hay click trên siêu văn bản, nó mang phần của tài liệu có chứa anchor được đặt tên lên đỉnh của màn hình. Thêm Anchor được đặt tên vào bài Volcano Web

Bây giờ chúng ta sẽ xây dựng một bảng mục lục cho bài của chúng ta để nó sẽ xuất hiện ở đầu trang Volcano web. Các phần tử trong bảng mục lục sẽ là các tiêu đề mà chúng ta đã tạo ra và sẽ hoạt động như một liên kết siêu văn bản đến một phần riêng biệt trong bài chúng ta. Bước đầu tiên là tạo một anchor được đặt tên cho mỗi mục tiêu đề trong bài Volcano Web:

1. Mở tập tin index.htm trong trình soạn thảo văn bản
2. Tìm tiêu đề Introduction. Chuyển đổi nó từ: <h2>Introduction</h2>thành: <h2><a name="intro">Introduction</a></h2> Chú ý: Bạn vừa đánh dấu dòng chứa mục tiêu đề "Introduction" với một dấu tham khảo ẩn có anchor được đặt tên là "intro"
3. Theo cách tương tự, thay đổi tất cả các tags <h2> cho các phần khác: <h2><A NAME="term">Volcano Terminology</A></h2> <h2><A NAME="usa">Volcanic Places in the USA</A></h2> <h2><A NAME="mars">Volcanic Places on Mars</A></h2> <h2><A NAME="project">Research Project</A></h2>
4. Nếu bạn Reload liền trong web browser của bạn, bạn sẽ không nhìn thấy bất kỳ sự thay đổi nào; các tag anchor được đặt tên thêm vào đều được dấu khi người sử dụng xem trang.

Thêm liên kết tới một Anchor Được đặt tên trong Cùng một Tài liệu

Bây giờ chúng ta sẽ xây dựng một bảng mục lục sẽ xuất hiện trên đầu màn hình. Chúng ta sử dụng một danh sách không có thứ tự (xem lại bài 6 về danh sách) để tạo nó:

1. Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
2. Bên dưới câu đầu tiên trong tiêu đề Volcano Web thêm những dòng sau: <hr><B>In this Lesson...</B><ul><i><li>Introduction<li>Volcano Terminology<li>Volcanic Places in the USA<li>Volcanic Places on Mars<li>Research Project</i></ul> Chú ý: Bảng mục lục này được đánh dấu trên và dưới bằng tag <hr>. Kiểu chữ Nghiêng được dùng cho các mục. Ở đây chúng ta chỉ mới đánh vào tên các mục. Sau này chúng ta sẽ thêm vào để các liên kết hoạt động được.
3. Lưu và Reload trong web browser của bạn.

Cuối cùng , chúng ta muốn làm cho mỗi mục của danh sách hoạt động như một liên kết siêu văn bản tới một phần khác của tài liệu. Để làm điều này, chúng ta sẽ sử dụng một biến thể của liên kết anchor cơ bản trong bài 8a. Thay vì liên kết tới một tập tin khác, chúng ta liên kết tới một trong những anchor được đặt tên (các dấu ẩn bạn đã tạo ra ở trên) bên trong cùng một tập tin HTML. Chúng ta chỉ định một anchor được đặt tên bằng cách đặt kí hiệu "#" trước tên của dấu tham khảo:

1. Mở tập tin index.htm trong trình soạn thảo
2. Đến mục đầu tiên trong phần mục lục. Thay đổi nó từ: <li>Introductionthành: <li><A HREF="#intro">Introduction</A>
3. Bây giờ bạn nên điền các liên kết khác để đoạn văn này trông giống như sau: <hr><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>
4. Lưu và Reload vào trong web browser của bạn. Khi bạn click trên một mục của bản mục lục, phần tương ứng sẽ hiện ra trên đỉnh của màn hình.

Thêm Liên kết tới Anchor Được đặt tên trong Tài liệu Khác

Bạn có thể tạo một liên kết nhảy đến một phần được đánh dấu bởi một anchor được đặt tên của một tài liệu HTML khác. HTML xây dựng một liên kết tới một anchor được đặt tên trong một tài liệu HTML cục bộ khác có dạng:
<a href="file.htm#NAME">Text to activate link</a>và nếu là tài liệu trên web site khác thì có dạng: <a href="https://www.cheese.org/pub/recipe.htm#colby"> Colby Cheese</a>Trong bài 8a chúng ta đã tạo ra một liên kết siêu văn bản từ Mount St. Helens đến msh.htm là một tập tin riêng biệt. Bây giờ, chúng ta sẽ thêm một liên kết trong tài liệu thứ hai để trở lại phần nguyên thủy trong trang Volcano chính.

1. Mở tập tin msh.htm trong trình soạn thảo
2. Gần cuối trang HTML (nhưng phải trên </body>) thêm như sau: <hr><a href="index.htm#usa">Return to <i>Volcano Web</i></a> Chú ý: Chúng ta có sử dụng kiểu chữ Nghiêng với tag <i>...</i> bên trong văn bản được đánh dấu bởi anchor được đặt tên là "usa". Lưu và Reload vào web browser của bạn. Khi click vào một vị trí của siêu văn bản ở cuối trang msh.htm, bạn sẽ phải thấy qua trở lại mục "Volcanic Plases in the USA" của bài Volcano Web.

Trong trường hợp đang xét liên kết chỉ là tên của một tập tin HTML khác, index.htm, trong cùng thư mục với tập tin msh.htm. Tuy nhiên, bạn có thể sử dụng một URL đầy đủ (xem bài 7) để liên kết tới một anchor được đặt tên trong một tập tin HTML có trên một máy khác ở xa. Ví dụ như, để tạo một liên kết đến phần "Introduction" của tập tin HTML cất trong MCLI WWW server, cách viết nên là: <a href= https://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro> Introduction to Volcano Web</a>Dấu tham khảo "#anchor_name" được gắn thêm vào cuối của URL. Kiểm tra lại công việc của bạn

So sánh công việc của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết anchor được đặt tên không hoạt động đúng, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Ví dụ sử dụng liên kết để trở lại phần mô tả anchor được đặt tên...
Xem lại

1. Làm thế nào nhận dạng một anchor được đặt tên?
2. Những bước nào tạo một liên kết tới một phần khác trong cùng một tài liệu?
3. Làm thế nào hiệu chỉnh một liên kết anchor để nối đến một anchor được đặt tên trong một tài liệu HTML khác?
4. Làm thế nào tạo một bảng mục lục cho một trang web?
5. Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?

Thực tập tự do

Tạo các anchors được đặt tên cho các tiêu đề trong trang web và xây dựng một mục lục để liên kết đến những mục con này. Đi đến phần tiếp theo ....

Trong bài kế tiếp bạn sẽ học cách làm một hình ảnh như là một liên kết siêu văn bản.

8đ. Liên kết Các phần của một Trang

Bạn đã biết làm thế nào để liên kết tới những trang web khác là những trang do bạn tạo ra hay là những trang có trên Internet. Nếu bạn muốn kết nối tới một phần dược chỉ định bên trong một tài liệu thì sao? BẠN CÓ THỂ LÀM ĐƯỢC ĐIỀU NÀY!
Mục đích

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

• Tạo một dấu hiệu tham khảo ẩn cho một phần riêng biệt bên trong một tập tin HTML.
• Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML.
• Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML khác.
• Tạo một bảng mục lục siêu văn bản cho một trang web.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.
Anchor được đặt tên

Một anchor được đặt tên (named anchor) là một dấu hiệu tham khảo ẩn cho một phần đặc biệt nào đó của tập tin HTML của bạn. Nó được sử dụng để tạo liên kết tới một phần khác của cùng trang khi trang đó dài, hoặc để đánh dấu mục của một trang khác. Lấy ví dụ, trong trang bạn đang xem, tôi có thể tạo ra một dấu ẩn gọi là "check" để đánh dấu tiêu đề "Kiểm tra lại công việc của bạn" bên dưới. Sau đó, tôi viết một liên kết anchor để kết nối tới mục này trong tài liệu này. Một khi bạn click trên một liên kết đến anchor được đặt tên này, web browser của bạn sẽ chuyển đến chỗ để dòng này nằm trên đỉnh của màn hình.
Sau đây là một ví dụ để bạn có thể thử ngay bây giờ. Đi đến Kiểm tra lại công việc của bạn. Khi đến đó, bạn sẽ thấy một liên kết để trở lại mục này.
Dạng HTML cho việc tạo anchor được đặt tên là:
<a name="NAME">Text to Link To</a> hay với liên kết bạn vừa thử ở trên:
<a name="check">Kiem tra lai cong viec cua ban</a>Chú ý sự khác biệt với liên kết anchor <a href=... chúng ta đã xét trong bài 8a.
Viết một liên kết tới một Anchor được đặt tên

Khi bạn muốn tạo một liên kết siêu văn bản (hay một "liên kết anchor", xem bài 8a) tới một anchor được đặt tên, sử dụng dạng HTML sau:
<a href="#xxxxx">Text to act as hypertext</a>hay liên kết bạn vừa thử để đến phần dưới của tài liệu này:
Di den <a href="#check">Kiem tra lai cong viec cua ban</a>Kí hiệu "#" chỉ cho web browser của bạn tìm trong tài liệu HTML một anchor được đặt tên là "xxxxxx" hay trong ví dụ của chúng ta là "check". Khi bạn chọn hay click trên siêu văn bản, nó mang phần của tài liệu có chứa anchor được đặt tên lên đỉnh của màn hình.
Thêm Anchor được đặt tên vào bài Volcano Web

Bây giờ chúng ta sẽ xây dựng một bảng mục lục cho bài của chúng ta để nó sẽ xuất hiện ở đầu trang Volcano web. Các phần tử trong bảng mục lục sẽ là các tiêu đề mà chúng ta đã tạo ra và sẽ hoạt động như một liên kết siêu văn bản đến một phần riêng biệt trong bài chúng ta.
Bước đầu tiên là tạo một anchor được đặt tên cho mỗi mục tiêu đề trong bài Volcano Web:

1. Mở tập tin index.htm trong trình soạn thảo văn bản
2. Tìm tiêu đề Introduction. Chuyển đổi nó từ: <h2>Introduction</h2>thành: <h2><a name="intro">Introduction</a></h2> Chú ý: Bạn vừa đánh dấu dòng chứa mục tiêu đề "Introduction" với một dấu tham khảo ẩn có anchor được đặt tên là "intro"
3. Theo cách tương tự, thay đổi tất cả các tags <h2> cho các phần khác: <h2><A NAME="term">Volcano Terminology</A></h2> <h2><A NAME="usa">Volcanic Places in the USA</A></h2> <h2><A NAME="mars">Volcanic Places on Mars</A></h2> <h2><A NAME="project">Research Project</A></h2>
4. Nếu bạn Reload liền trong web browser của bạn, bạn sẽ không nhìn thấy bất kỳ sự thay đổi nào; các tag anchor được đặt tên thêm vào đều được dấu khi người sử dụng xem trang.

Thêm liên kết tới một Anchor Được đặt tên trong Cùng một Tài liệu

Bây giờ chúng ta sẽ xây dựng một bảng mục lục sẽ xuất hiện trên đầu màn hình. Chúng ta sử dụng một danh sách không có thứ tự (xem lại bài 6 về danh sách) để tạo nó:

1. Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
2. Bên dưới câu đầu tiên trong tiêu đề Volcano Web thêm những dòng sau: <hr><B>In this Lesson...</B><ul><i><li>Introduction<li>Volcano Terminology<li>Volcanic Places in the USA<li>Volcanic Places on Mars<li>Research Project</i></ul> Chú ý: Bảng mục lục này được đánh dấu trên và dưới bằng tag <hr>. Kiểu chữ Nghiêng được dùng cho các mục. Ở đây chúng ta chỉ mới đánh vào tên các mục. Sau này chúng ta sẽ thêm vào để các liên kết hoạt động được.
3. Lưu và Reload trong web browser của bạn.

Cuối cùng , chúng ta muốn làm cho mỗi mục của danh sách hoạt động như một liên kết siêu văn bản tới một phần khác của tài liệu. Để làm điều này, chúng ta sẽ sử dụng một biến thể của liên kết anchor cơ bản trong bài 8a. Thay vì liên kết tới một tập tin khác, chúng ta liên kết tới một trong những anchor được đặt tên (các dấu ẩn bạn đã tạo ra ở trên) bên trong cùng một tập tin HTML. Chúng ta chỉ định một anchor được đặt tên bằng cách đặt kí hiệu "#" trước tên của dấu tham khảo:

1. Mở tập tin index.htm trong trình soạn thảo
2. Đến mục đầu tiên trong phần mục lục. Thay đổi nó từ: <li>Introductionthành: <li><A HREF="#intro">Introduction</A>
3. Bây giờ bạn nên điền các liên kết khác để đoạn văn này trông giống như sau: <hr><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>
4. Lưu và Reload vào trong web browser của bạn. Khi bạn click trên một mục của bản mục lục, phần tương ứng sẽ hiện ra trên đỉnh của màn hình.

Thêm Liên kết tới Anchor Được đặt tên trong Tài liệu Khác

Bạn có thể tạo một liên kết nhảy đến một phần được đánh dấu bởi một anchor được đặt tên của một tài liệu HTML khác. HTML xây dựng một liên kết tới một anchor được đặt tên trong một tài liệu HTML cục bộ khác có dạng:
<a href="file.htm#NAME">Text to activate link</a>và nếu là tài liệu trên web site khác thì có dạng:
<a href="https://www.cheese.org/pub/recipe.htm#colby"> Colby Cheese</a>Trong bài 8a chúng ta đã tạo ra một liên kết siêu văn bản từ Mount St. Helens đến msh.htm là một tập tin riêng biệt. Bây giờ, chúng ta sẽ thêm một liên kết trong tài liệu thứ hai để trở lại phần nguyên thủy trong trang Volcano chính.

1. Mở tập tin msh.htm trong trình soạn thảo
2. Gần cuối trang HTML (nhưng phải trên </body>) thêm như sau: <hr><a href="index.htm#usa">Return to <i>Volcano Web</i></a> Chú ý: Chúng ta có sử dụng kiểu chữ Nghiêng với tag <i>...</i> bên trong văn bản được đánh dấu bởi anchor được đặt tên là "usa". Lưu và Reload vào web browser của bạn. Khi click vào một vị trí của siêu văn bản ở cuối trang msh.htm, bạn sẽ phải thấy qua trở lại mục "Volcanic Plases in the USA" của bài Volcano Web.

Trong trường hợp đang xét liên kết chỉ là tên của một tập tin HTML khác, index.htm, trong cùng thư mục với tập tin msh.htm. Tuy nhiên, bạn có thể sử dụng một URL đầy đủ (xem bài 7) để liên kết tới một anchor được đặt tên trong một tập tin HTML có trên một máy khác ở xa. Ví dụ như, để tạo một liên kết đến phần "Introduction" của tập tin HTML cất trong MCLI WWW server, cách viết nên là:
<a href= https://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro> Introduction to Volcano Web</a>Dấu tham khảo "#anchor_name" được gắn thêm vào cuối của URL.
Kiểm tra lại công việc của bạn

So sánh công việc của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết anchor được đặt tên không hoạt động đúng, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo.
Ví dụ sử dụng liên kết để trở lại phần mô tả anchor được đặt tên...
Xem lại

1. Làm thế nào nhận dạng một anchor được đặt tên?
2. Những bước nào tạo một liên kết tới một phần khác trong cùng một tài liệu?
3. Làm thế nào hiệu chỉnh một liên kết anchor để nối đến một anchor được đặt tên trong một tài liệu HTML khác?
4. Làm thế nào tạo một bảng mục lục cho một trang web?
5. Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?

Thực tập tự do

Tạo các anchors được đặt tên cho các tiêu đề trong trang web và xây dựng một mục lục để liên kết đến những mục con này.
Đi đến phần tiếp theo ....

Trong bài kế tiếp bạn sẽ học cách làm một hình ảnh như là một liên kết siêu văn bản.

8e. Liên kết Siêu Hình ảnh

Không phải chỉ có văn bản mới làm được "hyper"... hãy mở rộng khả năng cho các trang web của bạn để các hình ảnh hoạt động như một siêu liên kết (hyperlink) (Thử click vào hình hộp!).

Mục đích

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

• Chèn một button hình trong trang web của bạn để nó liên kết tới một tài liệu HTML khác.
• Chèn một hình ảnh nhỏ hoạt động như là một "tem thư" (postage stamp) để liên kết đến việc trình bày một bản sao lớn của hình ảnh đó.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.
Button siêu liên kết

Từ những bài học trước bạn đã dễ dàng (hy vọng là vậy) trong việc tạo ra siêu văn bản, tức là đoạn văn bản trong tài liệu của bạn cho phép người xem nối đến những thông tin có liên quan. Bạn cũng có thể làm cho hình ảnh inline (xem bài 7a) hoạt động theo cách giống như "hyper" này. Nếu bạn nhớ lại, trong bài học mới đây chúng ta đã liên kết một đoạn văn bản trong trang Volcano Web, index.htm, đến trang thứ hai là msh.htm để miêu tả Mount St. Helens. Bây giờ trong trang web này chúng ta muốn thêm một button mà khi được click vào sẽ đưa người đọc trở về bài học chính.
Cách để làm được điều này là đặt các tag HTML sao cho các hình ảnh inline ở bên trong phần siêu văn bản của tag anchor:
<a href="fileX.htm"> <img src="graphic.gif"> Go to Document X</a>Trong trang web của bạn HTML này sẽ hiển thị một hình ảnh inline và đoạn chữ Go to Document X. Cả hai sẽ hoạt động như một siêu liên kết; khi nhấn vào đoạn chữ hay vào hình ảnh sẽ báo cho web browser đi đến tập tin HTML fileX.htm. Riêng hình ảnh cũng có thể là một siêu liên kết. Nói chung, trong World Wide Web, một "HyperGraphic" sẽ được bao quanh bởi một hộp màu tương ứng với loại màu sử dụng cho siêu văn bản trong trang web của bạn, nhờ đó bạn biết rằng nó "hoạt động" (active). Chú ý: Nhiều browser hiện nay có thể thay đổi màu của siêu văn bản và một số bỏ đi việc trình bày đường bao quanh các liên kết HyperGraphic. Nói chung, bạn có thể xác định một vùng siêu liên kết trong một trang web bằng cách xem sự thay đổi của dấu nháy (cursor) khi nó băng qua một vùng "nóng" (hot). Thông thường dấu nháy sẽ chuyển từ dấu mũi tên sang một bàn tay khi nó băng qua một liên kết hoạt động (active link). Từ quan điểm của một nhà thiết kế, chúng tôi đề nghị khi bạn sử dụng một hình ảnh như là một siêu liên kết thì nên thêm một liên kết bằng văn bản hoặc là sử dụng thêm ALT= attribute trong tag <IMG...> để phục vụ cho trường hợp người xem tắt việc nạp các hình ảnh.
Bây giờ chúng ta sẽ tạo ra một button hình ảnh "hyper". Trước hết, bạn cần chép một bản sao của button mũi tên từ Trung tâm Download Hình ảnh Bài 8e.
Bạn nên có một bản sao của tập tin hình ảnh ở đâu đó trên máy của bạn (Bạn nên cất lại nó vào trong folder/directory pictures trong vùng làm việc của bạn).
Tiếp theo, thêm vào HTML để button hoạt động được:

1. Mở tập tin HTML thứ hai msh.htm trong trình soạn thảo văn bản.
2. Ở dưới cùng, điều chỉnh dòng cuối thành: <hr><a href="index.htm"> <img src="../pictures/left.gif"> Return to <i>Volcano Web</i></a> Lưu ý : Tag hình ảnh inline (<img...>) hoàn toàn nằm trong anchor giữa > đánh dấu kết thúc URL và </a> đánh dấu sự kết thúc của siêu văn bản. Ngoài ra cũng chú ý tag <i> được sử dụng trong siêu văn bản để nhấn mạnh tiêu đề của bài. Và cuối cùng, chúng ta đã sử dụng tag <hr> để tạo một dòng thẳng trên hình button (xem tag này trong bài 4).
3. Lưu trữ tập tin HTML.
4. Trở về web browser, Open Local từ thực đơn File để đọc tập tin "msh.htm".
5. Chọn Reload từ thực đơn File để điều chỉnh các thay đổi.
6. Thử siêu liên kết đến trang Mount St. Helens và button mới để trả bạn lại trang Volcano Web.

Các hình ảnh "Tem thư"

Trước đây, chúng tôi có đề nghị không nên sử dụng các hình ảnh inline lớn trong trang web của bạn bởi vì người sử dụng phải mất thời gian chờ đợi để hình ảnh được download vào máy tính của họ. Một cách khác ở đây là tạo một bảng sao bé nhỏ của hình ảnh, hay được gọi là "tem thư" (postage stamps) để trình bày như là hình ảnh inline. Sau đó sử dụng những bước tương tự như trên bạn có thể làm cho "tem thư" hoạt động như một siêu liên kết đến hình với kích thước thật của nó. Theo cách này hình ảnh lớn thật sự chỉ được download nếu người xem quyết định muốn coi nó.
Trước hết bạn cần sao chép hai tập tin ảnh từ Trung tâm Download Hình ảnh Bài 8e. (Các tập tin này nên được cất vào folder/directory pictures trong vùng làm việc của bạn).
Sau đó, tạo các liên kết tem thư trong tập tin văn bản chính:

1. Mở tập tin index.htm trong trình soạn thảo
2. Dưới tiêu đề Long Valley đánh vào: This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [View the full size image] -- </a> This seismometer measures earthquakes associated with subsurface volcanic forces. Hình ảnh inline, stamp.gif, hoạt động như một siêu liên kết đến hình lớn hơn, seismo.jpg. Khi người sử dụng click trên "tem thư" hay trên đoạn văn "View the full size image --", browser của bạn sẽ trình bày ảnh lớn trong một cửa sổ riêng hay trong một trang trắng.
3. Lưu 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 để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Lỗi thường gặp là sự khác biệt khi đánh vần tên tập tin và mã HTML cho liên kết anchor, hoặc là không có tập tin hình ảnh tại thư mục chỉ định. Nếu bạn thấy một biểu tượng hình với dấu chấm hỏi:

thì thường có nghĩa là HTML không tìm thấy tập tin có trong tag <img> hoặc là ảnh không thuộc dạng GIF hay JPEG.
Xem lại

Những vấn đề ôn lại của bài này là:

1. Làm thế nào tạo một button hình ảnh trong trang web của bạn?
2. Liên kết "tem thư" tiện lợi như thế nào khi thêm hình ảnh vào trang web của bạn?
3. Làm thế nào tạo ra liên kết "tem thư" trong tài liệu của bạn?

Thực tập tự do

Thêm các button để liên kết hai trang web lẫn nhau.
Đi đến phần tiếp theo ....

Sử dụng tag preformat để tạo một bảng trong bài Volcano của bạn.

9. Preformatted Text

Làm thế nào bạn có thể hiển thị được những đoạn văn trong đó có xét đến các khoảng trắng và dấu xuống dòng?
display text where space and carriage return characters count?Mục đích

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

• Tạo một bảng các văn bản đã được định biên
• Điều khiển vị trí của văn bản trên một trang khi tab và khoảng cách được xét đến

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ờ.
Trong những bài học trước chúng ta đã biết là một Web browser sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng. Trong bài này, chúng ta sẽ xét một ví dụ mà ở đó ta sẽ trình bày văn bản thành các cột ngay hàng với nhau.
Tag preformat hướng dẫn cho Web browser trình bày văn bản chính xác như khi bạn đánh vào trong văn bản HTML, bao gồm cả việc thể hiện các khoảng trắng, các tab, và cả dấu xuống dòng. Một browser tiêu biểu sẽ hiển thị văn bản như vậy theo kiểu:

m o n o s p a c e dMột ví dụ cho việc sử dụng tag preformat là:
<pre> We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. </pre>Không có các tag <pre> và </pre>, thì đoạn HTML trên sẽ được trình bày như sau: We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. Với tag preformat, sẽ dễ hơn khi trình soạn thảo bạn đang sử dụng có thể trình bày trong một phông mono-spaced (như là "Courier" hay "Monoco"); nếu không bạn cần phải đếm kỹ số khoảng trắng để chỉnh cột các đoạn văn (và bạn sẽ khá mệt khi làm chuyện đó).
Với bài Volcano của chúng ta, chúng ta muốn thêm vào một bảng bên dưới phần Introduction để liệt kê ra một vài núi lửa nổi tiếng, khi nào nó đã hoạt động lại, và mức độ hoạt động của nó. Để làm điều này:

1. Mở tập tin HTML thứ hai, index.htm trong trình soạn thảo văn bản.
2. Dưới phần cuối cùng của Introduction, đặt một tiêu đề mức 4 (<h4>) với dòng chữ: Volumes of Some Well-Known Volcanic Eruptions (Nếu bạn không nhớ cách tạo tiêu đề, hãy xem bài 3).
3. Bên dưới tiêu đề này, nhập chính xác văn bản sau (có thể thuận lợi hơn khi sử dụng chức năng cắt và dán từ trang web này!): <pre> Eruption Date Volume in km^3 -------- ---- -------------- Paricutin, Mexico 1943 1.3 Mt. Vesuvius, Italy 79 A.D. 3 Mount St. Helen, Washington 1980 4 Krakatoa, Indonesia 1883 18 Long Valley, California pre-historic 500 - 600 Yellowstone, Wyoming pre-historic 2400</pre> Trong ví dụ này, chúng ta sử dụng các khoảng trắng để làm cho cột đầu tiên được chỉnh biên trái (left justified) còn hai cột kia được chỉnh biên giữa (center-justified). Các dấu trừ để nhấn mạnh cột tiêu đề.
4. 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 để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Nếu các cột không được chỉnh đúng, có lẽ bạn đánh thiếu hay thừa các khoảng trắng.
Xem lại

Những vấn đề ôn lại của bài này là:

1. Tag preformat làm thay đổi cách browser thông dịch HTML như thế nào?
2. Trong những trường hợp nào có thể bạn cần sử dụng tag này?

Thông tin bổ sung

Bạn vẫn có thể sử dụng các tag HTML bên trong văn bản đã được đánh dấu bởi tag preformat. Ví dụ như chúng ta có thể thêm một liên kết siêu văn bản và vài tag định kiểu khác bên trong cặp tag <pre>...</pre>: HTMLKết quả<pre>This tutorial is copyright1995, 1996 <B>Be sure to tell all of your friends about it!</B> <i>We Welcome Your Feedback</i>fondly,<A HREF="https://www.mcli.dist.maricopa.edu/">mcli</A></pre>This tutorial is copyright1995, 1996 Be sure to tell all of your friends about it! We Welcome Your Feedbackfondly,mcli Chú ý rằng các tag HTML không được xem như là khoảng trắng; chúng được bỏ qua trong vùng preformat.Một số tác giả của trang web sử dụng tag <pre>...</pre> với các ký tự xuống dòng bên trong để thêm những dòng trắng giữa văn bản và hình ảnh trong trang web của họ- nhất là trong trường hợp họ cần nhiều dòng trắng hơn so với tag . Ví dụ như: HTMLKết quảCheese was long sinceabolished from the Orient.<pre></pre>...until Sir Longhorn arrived with thegreat Cheese Crusade of 1167.Cheese was long since abolished from the Orient. ...until Sir Longhorn arrived with the great Cheese Crusade of 1167.
Thực tập tự do

Thêm vào một bảng hay một sơ đồ trong tài liêu HTML của bạn sử dụng tag preformat.
Đi đến phần tiếp theo....

Sử dụng những ký tự đặc biệt [SIZE=+4]âccèđt.... [/SIZE]trong trang Web của bạn

10. Các kí tự đặc biệt

Làm thế nào để bạn nói...
>>>Ỉ đ Þĩßÿ ?
Chú ý:Nếu các ký tự trên không thể hiện các dấu nhấn hay các dấu phụ, thì có nghĩa là web browser của bạn không hổ trợ bộ ký tự ISO. Bạn nên bỏ qua bài nàyMục đích

Sau phần này bạn có thể:

• Sử dụng mã HTML cho những kí tự ISO Latin 1 để hiển thị những dấu nhấn cho những chữ không phải tiếng Anh (non-english letter).
• Viết những kí tự < and > trong HTML khi bạn cần nó trong một tài liệu. Thêm những khoảng trắng trong những chữ và từ trong một tài liệu

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ờ.
Các dấu nhấn

Đôi khi có thể bạn cần sử dụng một kí tự đặc biệt trong một tài liệu HTML, một dấu nhấn hay một dấu phụ. Các dấu này đã được biết đến theo ISO. Những kí tự đặc biệt như vậy được đánh dấu trong HTML dưới dạng:
&xxxx;Trong đó XXXX là tên mã (code name) cho kí tự đặc biệt đó.
Ví dụ, trong phần "Terminology" của bài Volcano, chúng ta muốn thêm một sự giải thích cho một thuật ngữ kỹ thuật để mô tả một loại riêng biệt của tiến trình bùng nổ của núi lửa. Thuật ngữ đó là nuee ardente xuất phát từ một từ tiếng Pháp với nghĩa là "đám mây nóng rực" (glowing cloud) nhưng để phát âm đúng chúng ta cần một dấu nhấn "sắc" (acute), để từ đó xuất hiện là nuée ardente. Trong trường hợp này, chúng ta thay thế chữ e đầu tiên trong nuee bằng mã HTML của chữ "e" có dấu nhấn sắc &eacute;:
nu&eacute;e ardente Để tham khảo, hãy xem danh sách các ký tự ISO.
Bây giờ chúng ta sẽ thêm một câu vào tài liệu HTML của chúng ta mà câu đó có sử dụng một ký tự có dấu nhấn:

1. Mở tập tin HTML là index.htm trong trình soạn thảo văn bản.
2. Bên dưới danh sách thuật ngữ của phần Volcanology Terminology thêm vào: The term <I>nu&eacute;e ardente,</I> or "glowing cloud" was first used by La Croix (1904) in his description of the volcanic flows he observed in the 1902 eruption of Mt Pel&eacute;e, a historically active volcano on the island of Martinique. Chú ý: Chúng ta đã sử dụng dấu nhấn sắc cho hai ký tự "e" trong câu này. Trông có vẻ lạ quá! Hãy chắc chắn rằng bạn đã thay ký tự bằng chuỗi đã viết ở trên để hiển thị được cùng ký tự đó với dấu nhấn.
3. Lưu và Reload lại tập tin HTML.

Escape Sequences của HTML

HTML cho dấu nhấn là một ví dụ của một lớp các tag tổng quát hơn được gọi là escape sequences. Trong quá trình nhập văn bản HTML cho đến giờ, bạn có thể tự hỏi chúng ta sẽ làm gì khi cần sử dụng một dấu < (nhỏ hơn) hoặc một dấu > (lớn hơn)? Hai ký tự này cũng với dấu & (và) có một ý nghĩa đặc biệt trong HTML và không thể sử dụng như một ký tự đánh vào được. Thay vì đánh trực tiếp chúng, hãy sử dụng escape sequences:
&lt; thay cho < &gt; thay cho > &amp; thay cho &Bây giờ chúng ta hãy áp dụng các ký hiệu này trong bài Volcano của chúng ta. Trong bài trước: chúng ta đã thêm một bảng liệt kê vài núi lửa cùng với khối lượng vật chất đã phun ra từ chúng. Chúng ta nói rằng một trong những số liệu (500-600) cho Long Valley là không được chính xác lắm (thông thường đây là các giá trị gần đúng), và chúng ta muốn sửa đổi trị này thành >450 & <700. Để làm điều này:

1. Mở tập tin HTML index.htm trong trình soạn thảo
2. Bên dưới tiêu đề Volumes of Some Well-Known Volcanic Eruptions, tìm dòng Long Valley trong bảng: Long Valley, California pre-historic 500 - 600và đổi nó thành: Long Valley, California pre-historic &gt;450 &amp; &lt;700 Chú ý: Mặc dầu chúng ta sử dụng escape sequences bên trong một preformatted text, hãy chú ý một web browser vẫn thông dịch đúng và hiển thị các ký tự đặc biệt này. Như vậy, escape sequences có thể sử dụng trong mọi phần của một tài liệu HTML kể cả các tiêu đề và liên kết anchor.
3. Lưu và Reload tập tin HTML

Những khoảng trống thêm vào

Như bạn đã thấy một web browser sẽ bỏ qua tất cả những khoảng trắng không liên quan trong tập tin HTML của bạn. Tuy nhiên, có những lúc thật sự chúng ta muốn có nhiều hơn một khoảng trắng . Khi nào vậy? Một vài người thích có hai khoảng trắng theo sau một dấu chấm hết câu. Nếu bạn muốn thụt vào câu đầu tiên của mỗi đoạn văn bạn sẽ làm sao? Làm thế nào để có một từ đơn ở vị trí cách xa phần còn lại? Một mã HTML dành cho việc thêm vào một kí tự trắng là kí tự đặc biệt được gọi là "khoảng trắng không bị phá hủy" (non-breaking space):
&nbsp;Sau đây là một vài ví dụ về cách sử dụng khoảng trắng không bị phá hủy:
HTMLKết quả<B> Khoảng trắng không bị phá hủy được dùng để trải dài các ký tự trong một từ</B>
<b><tt>C &nbsp; H &nbsp; E &nbsp; E &nbsp; S &nbsp; E</tt></b>C H E E S E <B> Hai khoảng trắng không bị phá hủy được dùng để thụt các câu đầu của đoạn văn vào trong</B>
&nbsp; &nbsp; When Sir Longhornhad tragically died, no one was left tocarry on his tradition. There was much sadness in the land. And no cheese.&nbsp; &nbsp; But then the young geniusSheila Colby discovered the missingingredient. And once again, cheese was plentiful. When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.
<B> Một khoảng trắng nữa được thêm vào sau cuối mỗi câu</B>
&nbsp; &nbsp; When Sir Longhornhad tragically died, no one was left tocarry on his tradition. &nbsp; There was much sadness in the land. &nbsp; And no cheese.&nbsp; &nbsp; But then the young geniusSheila Colby discovered the missingingredient. &nbsp; And once again, cheese was plentiful. When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.

Có thể bạn muốn có kinh nghiệm với các cách sử dụng khác nhau cho khoảng trắng không bị phá hủy. Bây giờ, chúng ta sẽ không sửa các tài liệu HTML của chúng ta, nhưng nếu muốn, bạn có thể thêm những mã để làm thụt đầu dòng các câu mở đầu của tất cả các đoạn văn qua việc sử dụng hai lần mã khoảng trắng không bị phá hủy.
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 tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Hãy bảo đảm bạn viết đúng các escape sequence với ký tự & và ;
Thông tin bổ sung

Dưới đây là một vài kí tự đặc biệt có thể hữu ích cho bạn:
TênHTMLKết quảCopyright&copy;©Trademark&reg;®Xem lại

Những vấn đề nên xem lại trong bài này:

1. Trong HTML, cách nào để hiển thị kí tự tiếng Đức "umlaut" (ü)?
2. Điều gì sẽ xảy ra nếu bạn không sử dụng một escape sequence cho < and >?
3. Tại sao cần một escape sequence cho kí tự &?
4. Làm thế nào có thể thụt các đoạn văn vào trong?

Thực tập tự do

Trong văn bản HTML của riêng bạn, thêm vào một từ nước ngoài mà từ đó cần một dấu nhấn đặt biệt, hay thêm vào một biểu thức toán học có sử dụng dấu < hay dấu >. Hoặc là bạn có thể thêm các khoảng trắng để thụt các đoạn văn vào trong.
Đến phần kế tiếp ....

Xây dựng một danh mục sách sử dụng một danh sách mô tả.

11. Danh sách mô tả

Danh sách mô tả (Descriptive List) là một dạng đặc biệt của danh sách:

• danh sách
  • danh sách
    • danh sách...

Mục đích

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

• Xây dựng danh sách các mục cùng với khối văn bản mô tả nó được thụt vào trong.
• Tạo một danh mục sách bằng danh sách mô tả.

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ờ.
Trong bài 6 chúng ta đã biết cách để tạo hai loại danh sách: có thứ tự <ol>...</ol> và không có thứ tự <ul>...</ul>. Bây giờ, chúng tôi sẽ giới thiệu một dạng thứ ba, danh sách mô tả. Không giống như những loại danh sách chúng ta đã thấy trước đây, danh sách mô tả đánh dấu các mục của nó không phải là một dấu chấm hoặc một số mà bằng dạng trình bày thụt vào trong của nó.
Dạng của tag danh sách mô tả là :
<dl><dt> description title1<dd> description description1<dt> description title2<dd> description description2 : : :<dt> description titleN<dd> description descriptionN</dl> Tag <dl> .... </dl> chứa trong nó nhiều cặp tiêu đề mô tả (description title) <dt> và sự mô tả (description) <dd> Một Web browser sẽ tạo thành một danh sách với mỗi mô tả được trình bày thụt vào so với tiêu đề của nó.
Khi nhìn trong Web browser ví dụ trên sẽ trông giống như sau: description title1 description description1 description title2 description description2 : : description titleN description descriptionN Một danh sách mô tả có thể được sử dụng như là một tự điển (glossary) các định nghĩa, nhưng trong ví dụ chúng ta, chúng ta sẽ dùng nó để tạo một thư mục sách ngắn cho bài Volcano Web:

1. Mở tập tin HTML index.htm trong trình soạn thảo.
2. Sau danh sách không có thứ tự của tiêu đề References nhập như sau : <h3>Bibliography</h3>Check your library for these books:<dl><dt>Cas, R.A.F. and Wright, J. V. (1987). <dd><I>Volcanic Successions: Modern and Ancient.</I> London: Allen &amp; Unwin.<dt>La Croix, A. (1904)<dd><I>La Montagna Pel&eacute;e et ses &Eacute;ruptions.</I>Paris: Masson<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> Chú ý: Chúng ta đã sử dụng một số Ký tự Đặc biệt cho dấu và ("&") trong tham khảo đầu tiên và dấu nhấn cho tham khảo thứ hai. Nếu bạn chưa quen với các ký tự đặc biệt của HTML, xem lại bài 10
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 tài liệu của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu tài liệu của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Đừng quên các tag <dl>... </dl> để đánh dấu toàn danh sách. Lỗi thường gặp là quên chuyển đổi các tag <dt> và <dd>
Xem lại

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

1. Danh sách mô tả khác với danh sách có thứ tự và danh sách không có thứ tự ở những điểm nào?
2. Trong trường hợp nào bạn có thể phải sử dụng trong một danh sách mô tả?
3. Sự khác nhau giữa tag <dt> và tag <dd>?

Thực tập tự do

Sử dụng danh sách mô tả để thêm một bảng thuật ngữ hay một danh mục sách trong trang HTML của riêng bạn.
Một số thông tin thêm

Bạn có thể thêm các danh sách có thứ tự và không có thứ tự vào bên trong một danh sách mô tả. Lấy ví dụ, chúng ta sẽ tạo một một danh sách các nhóm khoáng chất chính. Mỗi nhóm có sự mô tả các tính chất của chúng, cùng với một danh sách con các khoáng chất và chúng được sử dụng trong xã hội như thế nào. Chúng ta muốn nó có dạng như sau (chỉ trình bày một ít):
Oxides Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations

• Hematite (iron ore)
• Magnetite (iron ore, magnetic mineral)
• Corundum (gemstone, abrasive)

Sulfates Metal ions combine with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules

• Gypsum (plaster)
• Barite (drilling mud)

Dạng HTML cho kết quả trên có dạng:
<dl><dt><b>Oxides</b><dd>Combinations of metal ions with Oxygen, comprises the majorores extracted in mining operations <ul> <li>Hematite (iron ore) <li>Magnetite (iron ore, magnetic mineral) <li>Corundum (gemstone, abrasive) </ul><dt><b>Sulfates</b><dd>Metal ions combines with the Sulfate ion (SO4), atomicstructure sometimes can allow bonding of water molecules <ul> <li>Gypsum (plaster) <li>Barite (drilling mud) </ul></dl>Đi đến phần tiếp theo....

Thêm một thông tin về "chữ ký" (signature) cùng với một liên kết để gởi e-mail.