Trang chủ
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ày
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 :
- 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.
- 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).
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à:
<!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ứ?
- Nếu chưa mở, hãy mở trình soạn thảo văn bản của bạn.
- Chuyển đến trình soạn thảo văn bản.
- 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.
- 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
- 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).
- Chọn Open File... trong thực đơn File.
- Sử dụng hộp thoại để tìm và mở file bạn đã tạo ra: "Volc.htm"
- 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 back trê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
- Tag HTML là gì?
- Dòng chữ của tag title được hiển thị ở đâu?
- Những bước để tạo một tài liệu HTML đơn giản?
- Làm thế nào để tạo nên một tag chú thích?
- Làm thế nào hiển thị được tài liệu HTML trong một Web browser?
