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

Video Information

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ấthì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!

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. 

Ở đâu có thể tìm thấy những tiêu chuẩn HTML được sử dụng ở đây? ​

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 đơnFile .
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 h1theo 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....

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ụcChè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 inkế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ể downloadngay 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 JPEGkhô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ạiGraphics File Compression. Nếu bạn muốn có một cuốn sách lớn, hãy xemDesigning 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 trongbà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.