Lessons III : Tạo tài liệu HTML đầu tiên

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:

 <h3>Tag HTML la gi?</h3> 

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,

 </tag_name> 

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ụ : <h3>...</h3> thì không khác gì với <H3>...</H3>

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><h3>Tag HTML la gi?</h3></wiggle> 

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 NotePadcủ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ânthì 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à:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <!-- header info used to contain extra information about this document, not displayed on the page --> </head> <body> <!-- all the HTML for display --> : : : : : : </body> </html>

Dòng đầu tiên hết:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

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 <html>...</html>. Bên trong nó là cặp tag <head>...</head> và sau đó là <body>...</body>. 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):
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>Volcano Web</title> </head> <!-- written for the Writing HTML Tutorial by Lorrie Lava, February 31, 1999 --> <body> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. </body> </html> 

    Lưu ý: Hãy tìm vị trí của cặp tag <title>...</title>. Nó được đặt ở trong phần <head>...</head> 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 <title> được sử dụng để nhận dạng của mỗi tài liệu và cũng được hiển thị trên thanh tiêu đề của cửa sổ browser. Trong bài 3 bạn sẽ học cách làm thế nào để một tiêu đề xuất hiện trực tiếp trên trang web của bạn.

    Cũng lưu ý rằng chúng ta sẽ chèn thêm vào những tag chú thích về tác giả và ngày mà trang Web được tạo thành. Bạn có thể viết bất kỳ câu gì giữa những tag chú thích và những câu này chỉ được nhìn thấy khi người đọc xem dạng HTML nguồn của trang Web.

  4. Lưu trữ tài liệu thành tập tin được gọi là "Volc.htm"và giữ nó trong directory/folder mà bạn sử dụng cho tài liệu này. Cũng nhớ là nếu bạn sử dụng một trình xử lý văn bản để tạo dạng HTML thì nhớ chắc chắn là bạn lưu trữ lại dưới dạng văn bản trơn (hay ASCII).

    Chú ý: Với Windows, bạn phải cất lại các tập tin HTML với phần mở rộng là .HTM, như vậy tập tin của bạn tên là VOLC.HTM. Không có vấn đề gì đâu! Web browser đủ thông minh để biết rằng các tập tin có phần mở rộng là .HTM là một tập tin HTML.

    Bằng cách sử dụng phần mở rộng như trên, một Web browser sẽ biết đọc những file này theo dạng HTML và sẽ hiển thị chính xác nó trong trang Web.

Hiển thị tài liệu của bạn trong một Web browser

  1. Trở về cửa sổ web browser mà bạn sử dụng làm workspace. (Nếu bạn chưa có cửa sổ web browser thứ hai này, chọn New Window hoặc New Browser từ thực đơn File).
  2. Chọn Open File… trong thực đơn File.
  3. Sử dụng hộp thoại để tìm và mở file bạn đã tạo ra: "Volc.htm"
  4. Bạn sẽ nhìn thấy dòng chữ “Volcano Web” trong thanh tiêu đề của cửa sổ workspace còn trong trang Web ở dưới là câu “In this lesson …” mà bạn đã viết trong phần <body>.

Kiểm tra lại 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ó. Sau khi xem xong mẫu, sử dụng button backtrên Web browser để trở về lại trang này.

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

Lỗi thường được thấy nhất là: “Tôi không nhìn thấy tiêu đề !” Ðiều này không đúng! Dòng chữ bên trong tag <title>...</title> 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 <title>và một vài câu giới thiệu. Lưu trữ tập tin HTML và nạp lại vào web browser của bạn. Bạn cũng có thể tạo ra một directory/folder khác cho tập tin này để nó không bị trộn lẫn với các trang volcano mà bạn sẽ tạo ra trong tài liệu này

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.

 

ÐẾN …. | Mục Lục | Bài trước: “Các tiêu chuẩn của HTML” | Bài kế tiếp: “Ðiều chỉnh một tài liệu HTML.” |

 


Soạn thảo HTML Bài 1: Tạo tài liệu HTML đầu tiên

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

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

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

  1. Leave a comment

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: