Trang Chính
Tổng số bài gửi
Điểm(xu)
Like
Giới tính
Châm ngôn sống
Bài thứ nhất giới thiệu cho bạn những khái niêm chung nhất về HTML, làm thế nào để thiết kế một webpage đơn giản, cấu trúc của một webpage,... Bài viết được trích từ một dự á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. Nguyên bản dài hơn 20 trang web, tôi đã rút ngắn lại 3 trang để các bạn có thể nhanh chóng học được HTML. Sau đây là nguyên văn định nghĩa về HTML trên dự á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.
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> tring of text </tag>
Lấy ví dụ, tiêu đề của phần này sử dụng tag header :
<h3>Tag HTML là gì ?</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 heaer, 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 đâỵ Rất nhiều tag HTML được đi theo một cặp như thế nàỵ 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 là gì?</h3></wiggle>
nhưng vì browser của bạn có thể không hỗ trợ tag (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.
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>
<hea>
<!-- heaer info use to contain extra information about
this document, not displaye on the page -->
</hea>
<boy>
<!-- all the HTML for display -->
: :
: :
: :
</boy>
</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ọị Để 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àỵ 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.
LƯU Đ: Đâ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 <!-- trong này là chú thích -->. 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âụ
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. (bạn có thể dùn Notepad hay bất cứ trình soạn thảo văn bản nào, tôi thì tôi dùng EditPlus)
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 bạn, ngày tháng năm -->
<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 sau 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à "ten.htm" hoặc "ten.html" và giữ nó trong directory/folder mà bạn sử dụng cho tài liệu nàỵ 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à ten.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.
5. 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 workspacẹ (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 Filẹ.. trong thực đơn Filẹ
Sử dụng hộp thoại để tìm và mở file bạn đã tạo ra: "ten.htm" hay "ten.html"
Lưu ý : 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 "ten.htm" hay "ten.html" 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.
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>.
Như vậy là bạn vừa tạo ra một webpage rồi đấy, tuy đơn giản song đây chỉ là mở đầu. Hãy lặp lại những bước trên và thay đổi những gì bạn cho là thay đổi được, nếu trang web gặp lỗi, hãy làm lại trên trình soạn thảo văn bản và save lại rồi lại xem lại thành quả của bạn. Hẹn gặp lại ở bài sau !
nếu Các bác thấy Được Thì cho xin ý kiến để viết thêm :
