web abc
Bai 1
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.
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à :
CODE
<tag_name>string of text</tag_name>
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).
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à:
CODE
<!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:
CODE
<!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.
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):
CODE
<!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.
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>.
Lấy ví dụ, tiêu đề của phần này sử dụng tag header :
CODE
<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
CODE
</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ụ :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 :
<h3>...</h3>
CODE
<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.
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.
Mở lại workspace của bạn
Để 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 đơn File .
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ạ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:
CODE
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.
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.)
Bạn đang đọc truyện trên: Truyen247.Pro