Banme Bantim


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 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à:


<!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>Volcan
    




Bài này đến từ Banme Bantim
https://center.banme.vn

URL của bài này là:
https://center.banme.vn/Sections/viewarticle/0/47/