Tự học HTML từ A-->Z

Trong chuyên mục 'Thủ thuật Máy tính' đăng bởi Newsun, 16/1/2009. — 19.291 Lượt xem

  1. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8. Tạo Liên kết bằng Anchors

    Mục đích của bài này chỉ cung cấp cho ta những thông tin bổ sung... Vì thế bài này nhanh và khá dễ hiểu!
    Thế nào làURL?

    Sức mạnh thật sự của web là khả năng tạo ra những liên kết siêu văn bản (hypertext link) đến các thông tin liên quan. Những thông tin này có thể là những trang web khác, những hình ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của Gopher server, một trình log-in vào máy tính ở xa (remote computer), hay một tập hợp các phần mềm, hay một "ftp" site.
    WWW sử dụng một cách định địa chỉ gọi là URL, hay Uniform Resource Locator (đôi khi còn gọi là "Universal Resource Locator"), để chỉ ra vị trí của những mục như vậy. Những liên kết này thường được biểu diễn bằng những chữ màu xanh có gạch dưới và được gọi là anchor.
    Trong những bài học tiếp theo chúng ta sẽ:
    • Xem lại khái niệm của URL
    • Tìm và chép URL từ web browser vào tài liệu văn bản HTML của bạn.
    • Viết một anchor HTML để liên kết đến tài liệu trong cùng thư mục với tài liệu đầu tiên.
    • Viết một anchor HTML để liên kết đến tài liệu khác thư mục với tài liệu đầu tiên.
    • Viết một anchor HTML để liên kết đến một trang web khác trên Internet.
    • Viết một anchor HTML để liên kết đến Gopher Server.
    • Viết một anchor HTML để liên kết đến một phần khác của cùng một tài liệu.
    • Liên kết với một hình ảnh như một "hyperlink" đến tài liệu khác.
    Ồ! Nghe như có nhiều việc phải làm! Đừng lo lắng, mọi thứ điều không phức tạp như bạn nghĩ. Sau cùng, nếu không có hypertext thì chúng ta không thể gọi tài liệu này là Soạn thảo HTML mà phải gọi là Soạn thảo TML
    Đến phần tiếp theo....

    Dùng URLs để kết nối các tài liệu thông qua liên kết siêu văn bản
     
  2. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8a. Liên kết đến tập tin cục bộ

    Tài liệu của tôi có thể nói chuyện với tài liệu của tôi được không? Được chứ, ít nhất là chúng có thể liên kết với nhau được!
    Mục đích

    Sau bài học này, bạn có thể:
    • Tạo liên kết đến tài liệu HTML trong cùng directory/folder với tài lệu chính của bạn.
    • Tạo liên kết để hiển thị một hình ảnh.
    • Tạo liên kết đến một tập tin trong một directory/folder khác với tài liệu chính của bạn.
    • Tổ chức lại cấu trúc web của bạn.
    Bài học

    Bây giờ, bạn sẽ đi bước đầu tiên của "anchoring" bằng cách tạo ra một liên kết siêu văn bản đến một trang web thứ hai. Những liên kết này được gọi là "cục bộ" (local) bởi vì chúng cùng ở trên một máy tính và là tài liệu đang làm việc của bạn (chúng không cần phải thám hiểm trên Internet). Bạn sẽ thay đổi một chút về sự phát triển web site của bạn (bạn có thấy rằng điều này tạo ra một cái gì đó hơi khác một chút với từ "home gape" không?).
    Lưu ý : Nếu bạn chưa có tài liệu từ bài trước, hãy download một bản sao.
    Liên kết đến Tập tin cục bộ

    Liên kết anchor đơn giản nhất là liên kết để mở tập tin HTML khác trong cùng một thư mục với trang web đang được thể hiện. Dạng HTML để làm việc này là:
    <a href="filename.htm">text that responds to link</a>Hãy xem chữ "a" là anchor còn "href" là "hypertext reference.
    Tên tập tin phải là một tập tin HTML khác. Bất cứ văn bản nào xuất hiện sau ký hiệu > và trước ký hiệu </a> sẽ là "siêu văn bản", nó được hiển thị bằng gạch dưới và "hyper".
    Hãy theo những bước sau để xây dựng một Anchor trong tài liệu HTML của bạn để liên kết đến một tập tin cục bộ:
    1. Mở văn bản HTML của bạn , volc.htm, trong trình soạn thảo.
    2. Đầu tiên, dưới tiêu đề Volcanic Places in the USA đánh vào đoạn văn để giới thiệu về hai núi lửa để sử dụng cho các phần kế tiếp. Listed below are two places in the United States that are considered "active" volcanic areas.
    3. Bên dưới tiêu đề "Mount St. Helens", đánh: On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm"> detailed observations</a> on the mechanics of highly explosive eruptions.
      Đoạn văn "detailed observations" sẽ tạo liên kết cho người xem đến một tài liệu HTML thứ hai gọi là msh.htm. Tập tin HTML chưa có; chúng ta sẽ tạo ra nó trong các bước (5) và (6).
    4. Lưu và đóng tài liệu HTML của bạn
    5. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn.
    6. Nhập các dòng sau trong màn hình mới: <html> <head> <title>Mount St Helens</title> </head> <body> <h1>Mount St Helens</h1> The towering pine trees of this once-quiet mountain were toppled over like toys. </body> </html>
    7. Lưu tập tin này với tên msh.htm trong cùng một directory/folder với tài liệu HTML của bạn (Volc.htm).
    8. Reload Volc.htm trong web browser.
    9. Kiểm tra liên kết siêu văn bản tại các từ "detailed observations". Khi được chọn, nó phải kết nối đến trang mới về Mount St. Helens.
    Liên kết Anchor đến một hình ảnh

    Trong bài 7a, chúng ta đã xét cách trình bày một hình ảnh "inline" trong trang Web. Với tag anchor, bạn cũng có thể tạo ra một liên kết để hiển thị một tập tin hình ảnh. Khi chọn một liên kết anchor , hình ảnh sẽ được download và trình bày riêng trong một trang trống hoặc cũng có thể web browser của bạn tự động gọi một trình ứng dụng để hiển thị hình ảnh.
    Liên kết anchor đơn giản nhất là liên kết đến một tập tin trong cùng một directory/folder với tài liệu gọi nó. Dạng để tạo một liên kết siêu văn bản đến một hình ảnh giống như liên kết đến một tài liệu HTML khác ở trên
    <a href="filename.gif">text that responds to link</a>trong đó filename.gif là tên của tập tin hình ảnh GIF.
    Bây giờ theo những bước sau để thêm một liên kết với một tập tin hình ảnh trong tài liệu của bạn:
    1. Trước hết, bạn cần chép một bản sao tập tin hình ảnh GIF từ Trung tâm Download Hình ảnh Bài 8a.
    2. Mở tập tin msh.htm trong trình soạn thảo.
    3. Điều chỉnh đoạn văn bản để tạo liên kết tới hình ảnh Mount St. Helens. The towering pine trees of this once-quiet mountain were <a href="msh.gif">toppled over like toys</a>.
    4. Lưu lại tập tin msh.htm và Reload trong web browser của bạn.
    5. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3)
    6. Một bức ảnh cây cối bị thổi ngã sẽ được thể hiện
    Những liên kết đến các thư mục khác

    Tag Anchor cũng có thể tạo liên kết đến một tài liệu HTML hoặc tập tin hình ảnh trong một directory/folder khác có liên quan tới tài liệu mà có chứa anchor. Ví dụ như, trong bài của chúng ta , chúng ta có thể lưu trữ tất cả các tập tin hình ảnh trong một directory/folder riêng gọi là pictures. Khi bạn tạo ngày càng nhiều tập tin HTML, sẽ tốt hơn khi giữ các tập tin hình ảnh trong một vùng riêng biệt. Hãy làm điều sau:
    1. Trong hệ thống của bạn tạo một sub-directory/folder pictures trong cùng vị trí lưu trữ tập tin Volc.htm.
    2. Chuyển tập tin msh.gif đến sub-directory/folder mới này.
    3. Mở tập tin msh.htm trong trình soạn thảo.
    4. Điều chỉnh tag anchor cho hình ảnh cần đọc: The towering pine trees of this once-quiet mountain were <a href="pictures/msh.gif">toppled over like toys</a>.
      Chú ý: Với HTML bạn có thể hướng dẫn web browser của bạn mở mọi tài liệu/hình ảnh tại thư mục cấp thấp hơn tài liệu hiện tại bằng cách sử dụng ký tự "/" để chỉ ra thư mục con gọi là "pictures."
    5. Lưu trữ tài liệu HTML và reload lại trong browser của bạn
    Nếu tất cả đều tốt, việc liên kết trong câu mô tả các cây bị thổi ngã sẽ gọi đến tập tin hình ảnh đang có trong directory/folder pictures.
    Liên kết Anchor đến thư mục cấp cao hơn

    Loại liên kết chúng ta vừa thực hiện được gọi là các liên kết "tương đối" (relative link), nghĩa là một Web browser có thể xây dựng lại đầy đủ URL dựa trên vị trí hiện hành của trang HTML và những thông tin liên kết trong các tag <a href=...>. Điều này rất tốt bởi vì bạn có thể xây dựng tất cả các trang web của bạn trên cùng một máy tính, kiểm tra chúng, và di chuyển chúng vào một máy khác, tất cả các liên kết tương đối vẫn giữ nguyên hiệu ứng.
    Trong bài học chúng ta đã biết làm thế nào để xây dựng một siêu liên kết (hyperlink) đến một tài liệu lưu trữ trong một thư mục thấp hơn trang HTML đang làm việc. Lưu ý rằng bạn cũng có thể xây dựng một liên kết đến một thư mục cao hơn bằng cách sử dụng HTML sau:
    <a href="../../home.htm">return to home</a>Mỗi một lần xuất hiện của "../", URL của liên kết anchor báo cho web browser đi đến một directory/folder cao hơn một cấp tương ứng với trang hiện tại; trong trường hợp cụ thể này có nghĩa là lên hai cấp thư mục và tìm tập tin home.htm.
    Trong ví dụ của chúng ta, hãy xét trường hợp khi thư mục con pictures không cùng ở trong directory/folder với tập tin volc.htm mà ở cao hơn một cấp
    [​IMG] Trong phần trước chúng ta đã tạo liên kết từ volc.htm tới tập tin msh.gif trong thư mục con:
    <img src= "pictures/msh.gif">Bây giờ, chúng ta muốn tổ chức lại cấu trúc web để thư mục pictures ở một mức cao hơn. Liên kết sẽ được viết như sau:
    <img src= "../pictures/msh.gif">Vì vậy web browser tìm kiếm thư mục pictures được lưu trữ cao hơn một mức so với tập tin volc.htm.
    Sự tiện lợi của cấu trúc này là dễ dàng lưu lại một số lượng lớn hình ảnh trong directory/folder cao hơn để có thể dùng chung trong những trang web khác. Chúng ta có thể thực hiện một bài học khác về địa mạo (điểm đặc trưng tự nhiên của bề mặt quả đất) và sử dụng những hình ảnh được lưu trữ trong directory/folder này.
    Bây giờ đã đến lúc tổ chức lại các tập tin HTML của chúng ta. Để thực hiện được điều này bạn cần làm quen với việc di chuyển tập tin và thư mục trên máy tính của bạn. Hãy đọc một cách cẩn thận! Bạn có thể cảm thấy khá phức tạp, nhưng chẳng bao lâu nữa tất cả đều rõ ràng thôi!
    1. Đầu tiên, tạo directory/folder mới có tên là volcano (một lời khuyên là nên giữ các tên tập tin ở dạng chữ nhỏ).
    2. Di chuyển hai tập tin HTML volc.htm và msh.htm vào trong directory/folder mới này.
    3. Di chuyển directory/folder pictures (cùng với tập tin msh.gif bên trong) đến cùng cấp với directory/folder mới volcano. Tương tự, di chuyển tập tin lava.gif mà chúng ta tạo ra trong bài 7a vào thư mục các hình này.
    4. Như vậy toàn bộ thư mục (workarea) bây giờ gồmhai thư mục con - một để giữ các tập tin HTML (volcano) và một giữ các hình ảnh (pictures): + workarea (directory) + pictures (directory) msh.gif volc.gif + volcano (directory) volc.htm msh.htm
    5. Chúng ta đã di chuyển một số thứ do vậy bây giờ chúng ta phải cập nhật lại các liên kết anchor trong các tập tin HTML. Trước hết, hãy xem lại liên kết cục bộ trong tập tin volc.htm: <h3>Mount St Helens</h3> On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm">detailed observations</a> on the mechanics of highly explosive eruptions.<B>
      Chú ý: Vì tập tin msh.htm vẫn ở cùng thư mục với volc.htm, chúng ta không cần thay đổi gì cả trong tập tin HTML này! Bạn có thấy sự liên kết tương đối là một tính chất rất hay của HTML không?​
      </B>
    6. Nhưng bây giờ hãy xem lại liên kết đến hình Mt. St Helens đã tạo ra trong tập tin msh.htm: The towering pine trees of this once-quiet mountain were <a href="pictures/msh.gif">toppled over like toys</a>.Mở tập tin này trong trình soạn thảo văn bản và điều chỉnh liên kết như sau:
      The towering pine trees of this once-quiet mountain were <a href="../pictures/msh.gif">toppled over like toys</a>.Liên kết tương đối này báo cho web browser xét lên một cấp so với directory/folder hiện hành (volcano) rồi tìm directory/folder có tên (pictures) mà ở đó có chứa ảnh msh.gif
    7. Cuối cùng, bạn cần điều chỉnh lại tag <img...> tag để hiển thị hình ảnh tiêu đề. Mở tập tin volc.htm trong trình soạn thảo và sửa đổi dòng ngay sau tag <body>: <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259>
    8. Lưu lại tập tin của bạn. Bạn nên Mở lại tập tin volc.htm trong web browser của bạn và thử lại liên kết đến msh.htm và liên kết đến hình Mount St Helens.
    Thêm một sự thay đổi nhỏ nữa

    Bước thay đổi nhỏ cuối cùng này có thể không rõ ràng, ngưng chúng tôi sẽ cố gắng giải thích ngắn gọn. Điều cuối cùng bạn nên làm trong bài này là đổi tên tập tin từ volc.htm thành index.htm
    Tại sao vậy? Hãy xem như bạn đã kết thúc bài này và sẵn sàng đưa web site của bạn vào World Wide Web server để mọi người cùng xem. Và chúng ta hãy giả thiết rằng địa chỉ Internet của server này tại Big University là:
    http://www.bigu.edu/Và tập tin của bạn được cất vào thư mục sau:
    --= top level of server: www.bigu.edu /courses /science /geologynhư vậy URL cho Volcano Web có thể là:
    http://www.bigu.edu/courses/science/...lcano/volc.htmỒ, khá dài nhỉ? Bây giờ là những lời giải thích như đã hứa -- trên nhiều WWW server bạn có thể chỉ định một tên chuẩn gọi là trang web "mặc nhiên" (default) cho một thư mục và trên nhiều hệ thống tên đó là .... index.htm. Điều này có nghĩa rằng địa chỉ Internet:
    http://www.bigu.edu/courses/science/geology/volcano/tương đương với
    http://www.bigu.edu/courses/science/...cano/index.htmĐiều này có thể làm cho bạn nghĩ là đã tiết kiệm được nhiệu năng lượng trong việc xóa bớt 20 ký tự từ URL! Thực tế, nó làm cho URL của bạn có vẻ chuyên nghiệp hơn. Nếu bạn nói có một Home page là Longhorn Cheese,
    http://www.cheese.com/longhorn/có vẻ ít rườm ra hơn là
    http://www.cheese.com/longhorn/longhorn.htmkhi để cho mọi người đọc URL của bạn và thử đánh vào browser của họ.
    Kiểm tra lại công việc của bạn

    So sánh trang web với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Trước hết bạn sẽ thấy trang Volcano Web. Khi bạn click vào siêu văn bản tại detailed observations, web browser của bạn sẽ hiển thị một trang mới. Cuối cùng, khi bạn click vào toppled over like toys, web browser của bạn sẽ hiển thị trong một cửa sổ một tập tin hình ảnh được cất trong một sub-directory/folder.
    Sử dụng button back của browser hai lần để quay về trang này. Nếu trang web của bạn khác với mẫu, xem lại văn bản bạn đánh vào trong trình soạn thảo văn bản.
    Xem lại
    1. Các bước nào được sử dụng để tạo một liên kết trong tài liệu của bạn đến một tập tin cục bộ?
    2. Những bước nào được sử dụng để tạo một liên kết khi muốn hiển thị hình ảnh trong cửa sổ riêng biệt?
    3. Làm thế nào để tạo một liên kết đến một tập tin trong một directory/folder thấp hơn tài liệu chính của bạn? cao hơn?
    4. Ý nghĩa của tập tin có tên index.htm trên một WWW server là gì?
    Thực tập tự do

    Tạo một tài liệu HTML sử dụng các định dạng HTML mà bạn đã quen biết đến giai đoạn này. Trở về trang đầu tiên và tạo một anchor để liên kết đến trang mới này.
    Đi đến phần tiếp theo....

    Wow! Làm việc nhiều quá! Trong bài học tiếp theo bạn sẽ xét làm thế nào để HTML liên kết đến những tài nguyên "ở đâu đó" trong Internet.
     
  3. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8b. URLs - Con trỏ đến Internet

    URL? Earl? Yurl? hurl? gyrl?
    Đến lúc để liên kết đến Big Wide Web sử dụng sơ đồ định địa chỉ của web.
    Mục đích

    Sau khi hoàn tất bài này bạn có thể:
    • Nhận dạng chức năng của Uniform Resource Locators (URLs).
    • Nhân biết cấu trúc của một URL.
    • Kiểm tra URL trong liên kết siêu văn bản của bất kỳ trang web nào.
    Bài học

    Chú ý: Trong bài này, bạn sẽ không cần tập tin văn bản HTML của bạn. Một bài học không cần gắng sức!
    URL là gì?

    WWW sử dụng Uniform Resource Locator (URL) để tìm vị trí của những tập tin và tài liệu của các máy tính trên Internet. Trên màn hình browser của bạn, URL cho tài liệu này được thể hiện ở phần phần trên của cửa sổ browser. URL bao gồm:
    • Một sự định dạng loại Internet server;
    • Một địa chỉ Internet; và
    • Một đường dẫn tập tin (file path) chỉ tới mục đang xem.
    URL là thứ bạn cần để xây dựng một liên kết từ trang web bạn tạo ra đến những phần thông tin khác trên Internet. Để biết chi tiết hơn, hãy xem Curling Up To URLs (v0.2)
    Cấu trúc URL như thế nào?

    Cấu trúc của một URL là:
    type://in.ter.net.address/directory/sub-directory/.../filename"type" chỉ ra loại của Internet server được truy xuất:
    http Một World Wide Web server. "HTTP" tượng trưng cho HyperText Transfer Protocol.
    gopher Một Internet Gopher site, thư mục các tập tin và thông tin theo dạng thực đơn.
    ftp Một anonymous File Transfer Protocol (FTP) site, truy tìm các tập tin.
    telnet Khởi tạo một trình Telnet để log on từ xa tới một máy tính khác. Khi chọn, web browser sẽ khởi động chương trình Telnet và kết nối tới site được chỉ định .
    WAIS Wide Area Indexed Server- một site dò tìm các tài liệu theo chủ đề được xác định bằng các từ khóa.
    file Một tập tin trên máy cục bộ (đĩa cứng, đĩa mềm, file server nội bộ).Sau Type luôn luôn là "://" và địa chỉ Internet của máy từ xa. Sau đây là cấu trúc của địa chỉ này:
    host.domain.domain.domainVí dụ như:
    machine.department.college.edu 123.45.6.78 office.company.com agency.branch.gov machine.organization.country Nếu URL chỉ đến mức chính của host này ("home page" của nó), thì URL được kết thúc bằng một dấu "/". Nến bạn liên kết tới một thư mục con hoặc một tập tin, bạn phải thêm chính xác đường dẫn tới nó bằng cách sử dụng dấu "/".
    Chú ý: Hầu hết các server đều kiểm tra ngữ pháp! Và cũng kiểm tra dạng chữ hoa hay chữ thường! Các tên tập tin trên các máy UNIX có phân biệt chữ hoa và chữ thường, điều này có nghĩa là tập tin có tên SpiffyText.htmlà khác với tập tin spiffytext.htm
    Tạo kinh nghiệm với URLs

    Chú ý rằng URL có thể tạo liên kết đến mọi site, thư mục, thư mục con, tập tin văn bản, hình ảnh, digital movie, hay tập tin âm thanh trên mọi Internet site đã cài đặt cho phép truy xuất tự do. Cách tốt nhất để xem các URL khác nhau là di chuyển chuột của bạn qua các liên kết siêu văn bản trong trang web nào đó- nếu bạn nhìn vào bên dưới web browser của bạn, nó sẽ trình bày URL mà bạn muốn nối đến khi bạn click vào liên kết đó. Bạn có thể vào một site lớn như Yahoo và "nhìm trộm" các URL (bạn có thấy URL của Yahoo khi bạn di chuyển mouse qua liên kết trong câu vừa rồi không?)
    Còn bây giờ là một cách rất dể để chép lại một URL của một liên kết trong một trang bất kỳ. Trước hết bạn mở thực đơn "bí mật" từ một liên kết siêu văn bản nào đó trong một trang web (Ấn và giữ chuột trong Macintosh; ấn và giữ button phải của chuột trong Windows và Unix). Từ thực đơn này, chọn Copy This Link Location (hay chức năng tương tự). Sau khi thả button chuột ra, chuyển đến một trình soạn thảo văn bản nào đó và chọn Paste từ thực đơn Edit. Hay quá! Bạn đã lấy được một URL từ một liên kết trong trang web (với cách này bạn có thể chép một URL ngay cả khi bạn chưa tham quan trang mà nó liên kết đến!)
    Xem lại
    1. Mục đích của URL cho World Wide Web?
    2. Nơi nào thấy được URL trên một màn hình WWW?
    3. Cấu trúc cơ bản của một URL?
    4. Làm thế nào để thấy được URL của một liên kết siêu văn bản sẽ nhảy đến?
    Thực tập tự do

    Tìm vài site trên Internet mà bạn cảm thấy thích. Với mỗi site, ghi lại URL của nó đã được trình bày gần trên đỉnh của cửa sổ browser. Thử xem bạn có thực hiện được việc chép và dán (copy and paste) các URL vào một tài liệu văn bản hay không. Bạn sẽ sử dụng danh sách này để thêm các liên kết từ các trang web của riêng bạn đến các site mà bạn đã tìm thấy.
    Đi đến phần tiếp theo ....

    Bạn sẽ dùng URL trong các tag anchor để tạo liên kết đến Internet cho trang Volcano Web của bạn.
     
  4. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8c. Liên kết đến các site Internet bên ngoài

    Bạn nên làm tươi lại cỗ máy của bạn bằng cách chạm vào Information SuperHighway, được không? Ở đây chúng ta sẽ mở rộng cách sử dụng của các tag anchor để tạo ra liên kết đến các tài nguyên có sẵn trên Internet.
    Mục đích

    Sau bài học này bạn có thể:
    • Tạo một anchor để liên kết đến một Internet site.
    • Chép nhanh URL của một site và sử dụng nó trong tài liệu HTML của bạn.
    Bài học

    Lưu ý: Nếu bạn chưa có tài liệu bài học trước, bạn có thể download ngay bây giờ.
    HTML cho các Anchor đến Internet

    Tạo liên kết đến một site trên Internet bao gồm những điều chúng ta đã xét trong bài Liên kết với tập tin cục bộ (Bài 8a) cùng với bài về URLs (Bài 8b). Dạng HTML đầy đủ cho một liên kết anchor đến một mục trên Internet là:
    <a href="URL">Text to Activate Link</a>Trong đó URL giữa hai dấu nháy là dạng đầy đủ của Uniform Resource Locator, cho biết địa chỉ của Internet site mà bạn muốn gởi đến người đọc. Chuổi Text to Activate Link là dòng chữ sẽ được hiển thị như là siêu văn bản trong web browser thường (nhưng không phải luôn luôn) có dạng gạch dưới và màu xanh. Khi người đọc click trên siêu văn bản này, web browser sẽ liên kết chúng với Internet site được chỉ định bởi URL. Nên nhớ rằng một URL có thể là một liên kết đến một World Wide Web (WWW) server khác, Gopher server, FTP site, hoặc bất kỳ một tập tin văn bản, hình ảnh, âm thanh, video trên các server này.
    Bây giờ chúng ta sẽ thêm một liên kết siêu văn bản đến site của NASA là site có thông tin về các núi lửa trên Sao hỏa (planet Mars). Theo những chỉ dẫn sau để thêm liên kết anchor vào tài liệu HTML của bạn:
    1. Mở tập tin index.htm của bạn trong trình soạn thảo văn vản.
    2. Bên dưới tiêu đề Volcanic Places on Mars, nhập văn bản sau: <a href="http://bang.lanl.gov/solarsys/mars.htm">Mars</a> has its fair share of volcanic landforms, including the largest known volcano in the solar system,<a href="http://bang.lanl.gov/solarsys/raw/mars/olympus.gif">Olympus Mons</a>
      Chú ý: Chúng ta đã tạo sự liên kết đến hai loại thông tin khác nhau. Siêu liên kết (hyperlink) đầu tiên nối đến một trang web mô tả thông tin về Sao hỏa. Cái thứ hai là liên kết đến một ảnh GIF nhỏ của núi lửa Martian.
    3. LưuReload trong web browser của bạn.
    Một cách dễ dàng để nhập các URL trong tag Anchor

    Như là bạn đã thấy trong các trang web, URL của trang hiện tại có thể thấy được ở phần trên của cửa sổ web browser (bạn có thể tìm kiếm thực đơn để Trình bày URL). Ví dụ như, trong tài liệu này, URL trông giống như sau:
    http://www.mcli.dist.maricopa.edu/tut/tut8c.htmlBạn có thể sử dụng chuột để chọn và chép lại một URL từ phần trình bày trong web browser rồi sau đó dán nó vào trong tag anchor của tài liệu HTML. Điều này hiệu quả hơn là viết URL ra giấy rất nhiều (đôi lúc khá dài!).
    Bây giờ chúng ta sẽ thêm một số liên kết tới các site khác mà chúng ta sẽ liệt kê ra trong phần References của bài Volcano. Một trong các site có thể cung cấp thông tin liên quan là US Geological Survey.
    Theo những bước sau:
    1. Mở tài liệu HTML index.htm trong trình soạn thảo
    2. Dưới tiêu đề "References", nhập: <ul><li> <a href="">Educational Resources from theUSGS</a></ul>
      Chú ý: Chúng ta đã tạo ra liên kết siêu văn bản và vẫn cần phải thêm vào một URL giữa hai dấu nháy.
    3. Nối đến US Geological Survey Education Index trong cửa sổ browser của bạn.
    4. Từ trang web, sử dụng chuột để chọn URL đang được hiển thị trong vùng trình bày URL.
    5. Từ thực đơn Edit, chọn Copy URL.
    6. Bây giờ , trở lại tài liệu HTML của bạn index.htm
    7. Click mouse vào giữa hai dấu nháy mà bạn đã đánh vào ở bước #2 và Dán vào tài liệu bạn đã chép trong bước #5. Tag anchor cuối cùng giống như sau: <a href="http://info.er.usgs.gov/education/index.html"> Educational Resources from the USGS</a>
      Chú ý: Bạn vừa thiết lập xong một cấu trúc HTML sử dụng Danh sách Không có thứ tự, với mỗi mục là một liên kết siêu văn bản đến một site có cung cấp thông tin về núi lửa. Để xem lại các danh sách, hãy chọn Bài 6.
    Như là phần thực tập thêm, hãy vào các site Internet dưới đây với các tài liệu về Địa chất (Geology) và/hay núi lửa (Volcanoes). Chép các URL và xây dựng ít nhất hai site trong phần Reference:
    Các Site có Thông tin về Núi lửa: Alaska Volcano Observatory * Cascades Volcano Observatory * Michigan Tech Volcanoes Page * NASA Earth Observing System (EOS) IDS Volcanology Team * NASA Facts: Volcanoes and Global Climate Change * Smithsonian Global Volcanism Program * Volcano Listserv * Volcano Watch Newsletter * JASON Project VI: Island Earth
    Các Site có Thông tin về các Tai họa Tự nhiên (Natural Hazard): Disaster Information * Emergency Preparedness Information eXchnage (EPIX) * NGDC Natural Hazards Data
    Các Site có Thông tin Tổng quát về Địa chất: Earth Resources Observation Systems (EROS) Data Center * EINet Galaxy * Environmental Internet Catalog * NASA Internet Connections * NOAA Environmental Information Server * Planet Earth Home Page * Rice University * United States Geological Survey * Whole Internet Catalog * WWW Virtual Library Kiểm tra lại công việc của bạn

    So sánh trang web của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết không nối đến đúng site ở xa, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Chú ý rằng danh sách các tham khảo của bạn có thể không giống như trong ví dụ mẫu.
    Xem lại
    1. Địa chỉ cho một mục trên Internet là gì?
    2. Những bước nào cần cho việc tạo một liên kết anchor đến NASA Internet Site?
    3. Cách nhanh nào được dùng để đưa một URL vào trong liên kết anchor?
    4. Hãy nói cho bạn bè về các liên kết khác mà bạn đưa vào tài liệu của bạn.
    Thực tập tự do

    Tạo các liên kết anchor từ trang web của bạn để nối đến vài địa chỉ URL mà bạn khám phá được.
    Đi đến bài tiếp theo....

    Trong bài kế bạn sẽ tạo liên kết để kết nối những phần khác nhau trong một tài liệu HTML .
     
  5. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8d. Liên kết Các phần của một Trang

    Bạn đã biết làm thế nào để liên kết tới những trang web khác là những trang do bạn tạo ra hay là những trang có trên Internet. Nếu bạn muốn kết nối tới một phần dược chỉ định bên trong một tài liệu thì sao? BẠN CÓ THỂ LÀM ĐƯỢC ĐIỀU NÀY!
    Mục đích

    Sau bài này bạn có thể:
    • Tạo một dấu hiệu tham khảo ẩn cho một phần riêng biệt bên trong một tập tin HTML.
    • Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML.
    • Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML khác.
    • Tạo một bảng mục lục siêu văn bản cho một trang web.
    Bài học

    Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ. Anchor được đặt tên

    Một anchor được đặt tên (named anchor) là một dấu hiệu tham khảo ẩn cho một phần đặc biệt nào đó của tập tin HTML của bạn. Nó được sử dụng để tạo liên kết tới một phần khác của cùng trang khi trang đó dài, hoặc để đánh dấu mục của một trang khác. Lấy ví dụ, trong trang bạn đang xem, tôi có thể tạo ra một dấu ẩn gọi là "check" để đánh dấu tiêu đề "Kiểm tra lại công việc của bạn" bên dưới. Sau đó, tôi viết một liên kết anchor để kết nối tới mục này trong tài liệu này. Một khi bạn click trên một liên kết đến anchor được đặt tên này, web browser của bạn sẽ chuyển đến chỗ để dòng này nằm trên đỉnh của màn hình.
    Sau đây là một ví dụ để bạn có thể thử ngay bây giờ. Đi đến Kiểm tra lại công việc của bạn. Khi đến đó, bạn sẽ thấy một liên kết để trở lại mục này.
    Dạng HTML cho việc tạo anchor được đặt tên là:
    <a name="NAME">Text to Link To</a> hay với liên kết bạn vừa thử ở trên: <a name="check">Kiem tra lai cong viec cua ban</a>Chú ý sự khác biệt với liên kết anchor <a href=... chúng ta đã xét trong bài 8a. Viết một liên kết tới một Anchor được đặt tên

    Khi bạn muốn tạo một liên kết siêu văn bản (hay một "liên kết anchor", xem bài 8a) tới một anchor được đặt tên, sử dụng dạng HTML sau: <a href="#xxxxx">Text to act as hypertext</a>hay liên kết bạn vừa thử để đến phần dưới của tài liệu này: Di den <a href="#check">Kiem tra lai cong viec cua ban</a>Kí hiệu "#" chỉ cho web browser của bạn tìm trong tài liệu HTML một anchor được đặt tên là "xxxxxx" hay trong ví dụ của chúng ta là "check". Khi bạn chọn hay click trên siêu văn bản, nó mang phần của tài liệu có chứa anchor được đặt tên lên đỉnh của màn hình. Thêm Anchor được đặt tên vào bài Volcano Web

    Bây giờ chúng ta sẽ xây dựng một bảng mục lục cho bài của chúng ta để nó sẽ xuất hiện ở đầu trang Volcano web. Các phần tử trong bảng mục lục sẽ là các tiêu đề mà chúng ta đã tạo ra và sẽ hoạt động như một liên kết siêu văn bản đến một phần riêng biệt trong bài chúng ta. Bước đầu tiên là tạo một anchor được đặt tên cho mỗi mục tiêu đề trong bài Volcano Web:
    1. Mở tập tin index.htm trong trình soạn thảo văn bản
    2. Tìm tiêu đề Introduction. Chuyển đổi nó từ: <h2>Introduction</h2>thành: <h2><a name="intro">Introduction</a></h2>
      Chú ý: Bạn vừa đánh dấu dòng chứa mục tiêu đề "Introduction" với một dấu tham khảo ẩn có anchor được đặt tên là "intro"
    3. Theo cách tương tự, thay đổi tất cả các tags <h2> cho các phần khác: <h2><A NAME="term">Volcano Terminology</A></h2> <h2><A NAME="usa">Volcanic Places in the USA</A></h2> <h2><A NAME="mars">Volcanic Places on Mars</A></h2> <h2><A NAME="project">Research Project</A></h2>
    4. Nếu bạn Reload liền trong web browser của bạn, bạn sẽ không nhìn thấy bất kỳ sự thay đổi nào; các tag anchor được đặt tên thêm vào đều được dấu khi người sử dụng xem trang.
    Thêm liên kết tới một Anchor Được đặt tên trong Cùng một Tài liệu

    Bây giờ chúng ta sẽ xây dựng một bảng mục lục sẽ xuất hiện trên đầu màn hình. Chúng ta sử dụng một danh sách không có thứ tự (xem lại bài 6 về danh sách) để tạo nó:
    1. Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
    2. Bên dưới câu đầu tiên trong tiêu đề Volcano Web thêm những dòng sau: <hr><B>In this Lesson...</B><ul><i><li>Introduction<li>Volcano Terminology<li>Volcanic Places in the USA<li>Volcanic Places on Mars<li>Research Project</i></ul>
      Chú ý: Bảng mục lục này được đánh dấu trên và dưới bằng tag <hr>. Kiểu chữ Nghiêng được dùng cho các mục. Ở đây chúng ta chỉ mới đánh vào tên các mục. Sau này chúng ta sẽ thêm vào để các liên kết hoạt động được.
    3. LưuReload trong web browser của bạn.
    Cuối cùng , chúng ta muốn làm cho mỗi mục của danh sách hoạt động như một liên kết siêu văn bản tới một phần khác của tài liệu. Để làm điều này, chúng ta sẽ sử dụng một biến thể của liên kết anchor cơ bản trong bài 8a. Thay vì liên kết tới một tập tin khác, chúng ta liên kết tới một trong những anchor được đặt tên (các dấu ẩn bạn đã tạo ra ở trên) bên trong cùng một tập tin HTML. Chúng ta chỉ định một anchor được đặt tên bằng cách đặt kí hiệu "#" trước tên của dấu tham khảo:
    1. Mở tập tin index.htm trong trình soạn thảo
    2. Đến mục đầu tiên trong phần mục lục. Thay đổi nó từ: <li>Introductionthành: <li><A HREF="#intro">Introduction</A>
    3. Bây giờ bạn nên điền các liên kết khác để đoạn văn này trông giống như sau: <hr><B>In this Lesson...</B><ul><i><li><A HREF="#intro">Introduction</A><li><A HREF="#term">Volcano Terminology</A><li><A HREF="#usa">Volcanic Places in the USA</A><li><A HREF="#mars">Volcanic Places on Mars</A><li><A HREF="#project">Research Project</A></i></ul>
    4. LưuReload vào trong web browser của bạn. Khi bạn click trên một mục của bản mục lục, phần tương ứng sẽ hiện ra trên đỉnh của màn hình.
    Thêm Liên kết tới Anchor Được đặt tên trong Tài liệu Khác

    Bạn có thể tạo một liên kết nhảy đến một phần được đánh dấu bởi một anchor được đặt tên của một tài liệu HTML khác. HTML xây dựng một liên kết tới một anchor được đặt tên trong một tài liệu HTML cục bộ khác có dạng:
    <a href="file.htm#NAME">Text to activate link</a>và nếu là tài liệu trên web site khác thì có dạng: <a href="http://www.cheese.org/pub/recipe.htm#colby"> Colby Cheese</a>Trong bài 8a chúng ta đã tạo ra một liên kết siêu văn bản từ Mount St. Helens đến msh.htm là một tập tin riêng biệt. Bây giờ, chúng ta sẽ thêm một liên kết trong tài liệu thứ hai để trở lại phần nguyên thủy trong trang Volcano chính.
    1. Mở tập tin msh.htm trong trình soạn thảo
    2. Gần cuối trang HTML (nhưng phải trên </body>) thêm như sau: <hr><a href="index.htm#usa">Return to <i>Volcano Web</i></a>
      Chú ý: Chúng ta có sử dụng kiểu chữ Nghiêng với tag <i>...</i> bên trong văn bản được đánh dấu bởi anchor được đặt tên là "usa".
      LưuReload vào web browser của bạn. Khi click vào một vị trí của siêu văn bản ở cuối trang msh.htm, bạn sẽ phải thấy qua trở lại mục "Volcanic Plases in the USA" của bài Volcano Web.
    Trong trường hợp đang xét liên kết chỉ là tên của một tập tin HTML khác, index.htm, trong cùng thư mục với tập tin msh.htm. Tuy nhiên, bạn có thể sử dụng một URL đầy đủ (xem bài 7) để liên kết tới một anchor được đặt tên trong một tập tin HTML có trên một máy khác ở xa. Ví dụ như, để tạo một liên kết đến phần "Introduction" của tập tin HTML cất trong MCLI WWW server, cách viết nên là: <a href= http://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro> Introduction to Volcano Web</a>Dấu tham khảo "#anchor_name" được gắn thêm vào cuối của URL. Kiểm tra lại công việc của bạn

    So sánh công việc của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết anchor được đặt tên không hoạt động đúng, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Ví dụ sử dụng liên kết để trở lại phần mô tả anchor được đặt tên...
    Xem lại
    1. Làm thế nào nhận dạng một anchor được đặt tên?
    2. Những bước nào tạo một liên kết tới một phần khác trong cùng một tài liệu?
    3. Làm thế nào hiệu chỉnh một liên kết anchor để nối đến một anchor được đặt tên trong một tài liệu HTML khác?
    4. Làm thế nào tạo một bảng mục lục cho một trang web?
    5. Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?
    Thực tập tự do

    Tạo các anchors được đặt tên cho các tiêu đề trong trang web và xây dựng một mục lục để liên kết đến những mục con này. Đi đến phần tiếp theo ....

    Trong bài kế tiếp bạn sẽ học cách làm một hình ảnh như là một liên kết siêu văn bản.
     
  6. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8đ. Liên kết Các phần của một Trang

    Bạn đã biết làm thế nào để liên kết tới những trang web khác là những trang do bạn tạo ra hay là những trang có trên Internet. Nếu bạn muốn kết nối tới một phần dược chỉ định bên trong một tài liệu thì sao? BẠN CÓ THỂ LÀM ĐƯỢC ĐIỀU NÀY!
    Mục đích

    Sau bài này bạn có thể:
    • Tạo một dấu hiệu tham khảo ẩn cho một phần riêng biệt bên trong một tập tin HTML.
    • Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML.
    • Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML khác.
    • Tạo một bảng mục lục siêu văn bản cho một trang web.
    Bài học

    Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.
    Anchor được đặt tên

    Một anchor được đặt tên (named anchor) là một dấu hiệu tham khảo ẩn cho một phần đặc biệt nào đó của tập tin HTML của bạn. Nó được sử dụng để tạo liên kết tới một phần khác của cùng trang khi trang đó dài, hoặc để đánh dấu mục của một trang khác. Lấy ví dụ, trong trang bạn đang xem, tôi có thể tạo ra một dấu ẩn gọi là "check" để đánh dấu tiêu đề "Kiểm tra lại công việc của bạn" bên dưới. Sau đó, tôi viết một liên kết anchor để kết nối tới mục này trong tài liệu này. Một khi bạn click trên một liên kết đến anchor được đặt tên này, web browser của bạn sẽ chuyển đến chỗ để dòng này nằm trên đỉnh của màn hình.
    Sau đây là một ví dụ để bạn có thể thử ngay bây giờ. Đi đến Kiểm tra lại công việc của bạn. Khi đến đó, bạn sẽ thấy một liên kết để trở lại mục này.
    Dạng HTML cho việc tạo anchor được đặt tên là:
    <a name="NAME">Text to Link To</a> hay với liên kết bạn vừa thử ở trên:
    <a name="check">Kiem tra lai cong viec cua ban</a>Chú ý sự khác biệt với liên kết anchor <a href=... chúng ta đã xét trong bài 8a.
    Viết một liên kết tới một Anchor được đặt tên

    Khi bạn muốn tạo một liên kết siêu văn bản (hay một "liên kết anchor", xem bài 8a) tới một anchor được đặt tên, sử dụng dạng HTML sau:
    <a href="#xxxxx">Text to act as hypertext</a>hay liên kết bạn vừa thử để đến phần dưới của tài liệu này:
    Di den <a href="#check">Kiem tra lai cong viec cua ban</a>Kí hiệu "#" chỉ cho web browser của bạn tìm trong tài liệu HTML một anchor được đặt tên là "xxxxxx" hay trong ví dụ của chúng ta là "check". Khi bạn chọn hay click trên siêu văn bản, nó mang phần của tài liệu có chứa anchor được đặt tên lên đỉnh của màn hình.
    Thêm Anchor được đặt tên vào bài Volcano Web

    Bây giờ chúng ta sẽ xây dựng một bảng mục lục cho bài của chúng ta để nó sẽ xuất hiện ở đầu trang Volcano web. Các phần tử trong bảng mục lục sẽ là các tiêu đề mà chúng ta đã tạo ra và sẽ hoạt động như một liên kết siêu văn bản đến một phần riêng biệt trong bài chúng ta.
    Bước đầu tiên là tạo một anchor được đặt tên cho mỗi mục tiêu đề trong bài Volcano Web:
    1. Mở tập tin index.htm trong trình soạn thảo văn bản
    2. Tìm tiêu đề Introduction. Chuyển đổi nó từ: <h2>Introduction</h2>thành: <h2><a name="intro">Introduction</a></h2>
      Chú ý: Bạn vừa đánh dấu dòng chứa mục tiêu đề "Introduction" với một dấu tham khảo ẩn có anchor được đặt tên là "intro"
    3. Theo cách tương tự, thay đổi tất cả các tags <h2> cho các phần khác: <h2><A NAME="term">Volcano Terminology</A></h2> <h2><A NAME="usa">Volcanic Places in the USA</A></h2> <h2><A NAME="mars">Volcanic Places on Mars</A></h2> <h2><A NAME="project">Research Project</A></h2>
    4. Nếu bạn Reload liền trong web browser của bạn, bạn sẽ không nhìn thấy bất kỳ sự thay đổi nào; các tag anchor được đặt tên thêm vào đều được dấu khi người sử dụng xem trang.
    Thêm liên kết tới một Anchor Được đặt tên trong Cùng một Tài liệu

    Bây giờ chúng ta sẽ xây dựng một bảng mục lục sẽ xuất hiện trên đầu màn hình. Chúng ta sử dụng một danh sách không có thứ tự (xem lại bài 6 về danh sách) để tạo nó:
    1. Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
    2. Bên dưới câu đầu tiên trong tiêu đề Volcano Web thêm những dòng sau: <hr><B>In this Lesson...</B><ul><i><li>Introduction<li>Volcano Terminology<li>Volcanic Places in the USA<li>Volcanic Places on Mars<li>Research Project</i></ul>
      Chú ý: Bảng mục lục này được đánh dấu trên và dưới bằng tag <hr>. Kiểu chữ Nghiêng được dùng cho các mục. Ở đây chúng ta chỉ mới đánh vào tên các mục. Sau này chúng ta sẽ thêm vào để các liên kết hoạt động được.
    3. LưuReload trong web browser của bạn.
    Cuối cùng , chúng ta muốn làm cho mỗi mục của danh sách hoạt động như một liên kết siêu văn bản tới một phần khác của tài liệu. Để làm điều này, chúng ta sẽ sử dụng một biến thể của liên kết anchor cơ bản trong bài 8a. Thay vì liên kết tới một tập tin khác, chúng ta liên kết tới một trong những anchor được đặt tên (các dấu ẩn bạn đã tạo ra ở trên) bên trong cùng một tập tin HTML. Chúng ta chỉ định một anchor được đặt tên bằng cách đặt kí hiệu "#" trước tên của dấu tham khảo:
    1. Mở tập tin index.htm trong trình soạn thảo
    2. Đến mục đầu tiên trong phần mục lục. Thay đổi nó từ: <li>Introductionthành: <li><A HREF="#intro">Introduction</A>
    3. Bây giờ bạn nên điền các liên kết khác để đoạn văn này trông giống như sau: <hr><B>In this Lesson...</B><ul><i><li><A HREF="#intro">Introduction</A><li><A HREF="#term">Volcano Terminology</A><li><A HREF="#usa">Volcanic Places in the USA</A><li><A HREF="#mars">Volcanic Places on Mars</A><li><A HREF="#project">Research Project</A></i></ul>
    4. LưuReload vào trong web browser của bạn. Khi bạn click trên một mục của bản mục lục, phần tương ứng sẽ hiện ra trên đỉnh của màn hình.
    Thêm Liên kết tới Anchor Được đặt tên trong Tài liệu Khác

    Bạn có thể tạo một liên kết nhảy đến một phần được đánh dấu bởi một anchor được đặt tên của một tài liệu HTML khác. HTML xây dựng một liên kết tới một anchor được đặt tên trong một tài liệu HTML cục bộ khác có dạng:
    <a href="file.htm#NAME">Text to activate link</a>và nếu là tài liệu trên web site khác thì có dạng:
    <a href="http://www.cheese.org/pub/recipe.htm#colby"> Colby Cheese</a>Trong bài 8a chúng ta đã tạo ra một liên kết siêu văn bản từ Mount St. Helens đến msh.htm là một tập tin riêng biệt. Bây giờ, chúng ta sẽ thêm một liên kết trong tài liệu thứ hai để trở lại phần nguyên thủy trong trang Volcano chính.
    1. Mở tập tin msh.htm trong trình soạn thảo
    2. Gần cuối trang HTML (nhưng phải trên </body>) thêm như sau: <hr><a href="index.htm#usa">Return to <i>Volcano Web</i></a>
      Chú ý: Chúng ta có sử dụng kiểu chữ Nghiêng với tag <i>...</i> bên trong văn bản được đánh dấu bởi anchor được đặt tên là "usa".
      LưuReload vào web browser của bạn. Khi click vào một vị trí của siêu văn bản ở cuối trang msh.htm, bạn sẽ phải thấy qua trở lại mục "Volcanic Plases in the USA" của bài Volcano Web.
    Trong trường hợp đang xét liên kết chỉ là tên của một tập tin HTML khác, index.htm, trong cùng thư mục với tập tin msh.htm. Tuy nhiên, bạn có thể sử dụng một URL đầy đủ (xem bài 7) để liên kết tới một anchor được đặt tên trong một tập tin HTML có trên một máy khác ở xa. Ví dụ như, để tạo một liên kết đến phần "Introduction" của tập tin HTML cất trong MCLI WWW server, cách viết nên là:
    <a href= http://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro> Introduction to Volcano Web</a>Dấu tham khảo "#anchor_name" được gắn thêm vào cuối của URL.
    Kiểm tra lại công việc của bạn

    So sánh công việc của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết anchor được đặt tên không hoạt động đúng, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo.
    Ví dụ sử dụng liên kết để trở lại phần mô tả anchor được đặt tên...
    Xem lại
    1. Làm thế nào nhận dạng một anchor được đặt tên?
    2. Những bước nào tạo một liên kết tới một phần khác trong cùng một tài liệu?
    3. Làm thế nào hiệu chỉnh một liên kết anchor để nối đến một anchor được đặt tên trong một tài liệu HTML khác?
    4. Làm thế nào tạo một bảng mục lục cho một trang web?
    5. Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?
    Thực tập tự do

    Tạo các anchors được đặt tên cho các tiêu đề trong trang web và xây dựng một mục lục để liên kết đến những mục con này.
    Đi đến phần tiếp theo ....

    Trong bài kế tiếp bạn sẽ học cách làm một hình ảnh như là một liên kết siêu văn bản.
     
  7. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    8e. Liên kết Siêu Hình ảnh

    [​IMG] Không phải chỉ có văn bản mới làm được "hyper"... hãy mở rộng khả năng cho các trang web của bạn để các hình ảnh hoạt động như một siêu liên kết (hyperlink) (Thử click vào hình hộp!).

    Mục đích

    Sau bài này bạn có thể:
    • Chèn một button hình trong trang web của bạn để nó liên kết tới một tài liệu HTML khác.
    • Chèn một hình ảnh nhỏ hoạt động như là một "tem thư" (postage stamp) để liên kết đến việc trình bày một bản sao lớn của hình ảnh đó.
    Bài học

    Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.
    Button siêu liên kết

    Từ những bài học trước bạn đã dễ dàng (hy vọng là vậy) trong việc tạo ra siêu văn bản, tức là đoạn văn bản trong tài liệu của bạn cho phép người xem nối đến những thông tin có liên quan. Bạn cũng có thể làm cho hình ảnh inline (xem bài 7a) hoạt động theo cách giống như "hyper" này. Nếu bạn nhớ lại, trong bài học mới đây chúng ta đã liên kết một đoạn văn bản trong trang Volcano Web, index.htm, đến trang thứ hai là msh.htm để miêu tả Mount St. Helens. Bây giờ trong trang web này chúng ta muốn thêm một button mà khi được click vào sẽ đưa người đọc trở về bài học chính.
    Cách để làm được điều này là đặt các tag HTML sao cho các hình ảnh inline ở bên trong phần siêu văn bản của tag anchor:
    <a href="fileX.htm"> <img src="graphic.gif"> Go to Document X</a>Trong trang web của bạn HTML này sẽ hiển thị một hình ảnh inline và đoạn chữ Go to Document X. Cả hai sẽ hoạt động như một siêu liên kết; khi nhấn vào đoạn chữ hay vào hình ảnh sẽ báo cho web browser đi đến tập tin HTML fileX.htm. Riêng hình ảnh cũng có thể là một siêu liên kết. Nói chung, trong World Wide Web, một "HyperGraphic" sẽ được bao quanh bởi một hộp màu tương ứng với loại màu sử dụng cho siêu văn bản trong trang web của bạn, nhờ đó bạn biết rằng nó "hoạt động" (active).
    Chú ý: Nhiều browser hiện nay có thể thay đổi màu của siêu văn bản và một số bỏ đi việc trình bày đường bao quanh các liên kết HyperGraphic. Nói chung, bạn có thể xác định một vùng siêu liên kết trong một trang web bằng cách xem sự thay đổi của dấu nháy (cursor) khi nó băng qua một vùng "nóng" (hot). Thông thường dấu nháy sẽ chuyển từ dấu mũi tên sang một bàn tay khi nó băng qua một liên kết hoạt động (active link). Từ quan điểm của một nhà thiết kế, chúng tôi đề nghị khi bạn sử dụng một hình ảnh như là một siêu liên kết thì nên thêm một liên kết bằng văn bản hoặc là sử dụng thêm ALT= attribute trong tag <IMG...> để phục vụ cho trường hợp người xem tắt việc nạp các hình ảnh.
    Bây giờ chúng ta sẽ tạo ra một button hình ảnh "hyper". Trước hết, bạn cần chép một bản sao của button mũi tên từ Trung tâm Download Hình ảnh Bài 8e.
    Bạn nên có một bản sao của tập tin hình ảnh ở đâu đó trên máy của bạn (Bạn nên cất lại nó vào trong folder/directory pictures trong vùng làm việc của bạn).
    Tiếp theo, thêm vào HTML để button hoạt động được:
    1. Mở tập tin HTML thứ hai msh.htm trong trình soạn thảo văn bản.
    2. Ở dưới cùng, điều chỉnh dòng cuối thành: <hr><a href="index.htm"> <img src="../pictures/left.gif"> Return to <i>Volcano Web</i></a>
      Lưu ý : Tag hình ảnh inline (<img...>) hoàn toàn nằm trong anchor giữa > đánh dấu kết thúc URL và </a> đánh dấu sự kết thúc của siêu văn bản. Ngoài ra cũng chú ý tag <i> được sử dụng trong siêu văn bản để nhấn mạnh tiêu đề của bài. Và cuối cùng, chúng ta đã sử dụng tag <hr> để tạo một dòng thẳng trên hình button (xem tag này trong bài 4).
    3. Lưu trữ tập tin HTML.
    4. Trở về web browser, Open Local từ thực đơn File để đọc tập tin "msh.htm".
    5. Chọn Reload từ thực đơn File để điều chỉnh các thay đổi.
    6. Thử siêu liên kết đến trang Mount St. Helens và button mới để trả bạn lại trang Volcano Web.
    Các hình ảnh "Tem thư"

    Trước đây, chúng tôi có đề nghị không nên sử dụng các hình ảnh inline lớn trong trang web của bạn bởi vì người sử dụng phải mất thời gian chờ đợi để hình ảnh được download vào máy tính của họ. Một cách khác ở đây là tạo một bảng sao bé nhỏ của hình ảnh, hay được gọi là "tem thư" (postage stamps) để trình bày như là hình ảnh inline. Sau đó sử dụng những bước tương tự như trên bạn có thể làm cho "tem thư" hoạt động như một siêu liên kết đến hình với kích thước thật của nó. Theo cách này hình ảnh lớn thật sự chỉ được download nếu người xem quyết định muốn coi nó.
    Trước hết bạn cần sao chép hai tập tin ảnh từ Trung tâm Download Hình ảnh Bài 8e. (Các tập tin này nên được cất vào folder/directory pictures trong vùng làm việc của bạn).
    Sau đó, tạo các liên kết tem thư trong tập tin văn bản chính:
    1. Mở tập tin index.htm trong trình soạn thảo
    2. Dưới tiêu đề Long Valley đánh vào: This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [View the full size image] -- </a> This seismometer measures earthquakes associated with subsurface volcanic forces.
      Hình ảnh inline, stamp.gif, hoạt động như một siêu liên kết đến hình lớn hơn, seismo.jpg. Khi người sử dụng click trên "tem thư" hay trên đoạn văn "View the full size image --", browser của bạn sẽ trình bày ảnh lớn trong một cửa sổ riêng hay trong một trang trắng.
    3. LưuReload trong web browser của bạn.
    Kiểm tra lại công việc của bạn

    So sánh trang web của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Lỗi thường gặp là sự khác biệt khi đánh vần tên tập tin và mã HTML cho liên kết anchor, hoặc là không có tập tin hình ảnh tại thư mục chỉ định. Nếu bạn thấy một biểu tượng hình với dấu chấm hỏi:

    [​IMG]thì thường có nghĩa là HTML không tìm thấy tập tin có trong tag <img> hoặc là ảnh không thuộc dạng GIF hay JPEG.
    Xem lại

    Những vấn đề ôn lại của bài này là:
    1. Làm thế nào tạo một button hình ảnh trong trang web của bạn?
    2. Liên kết "tem thư" tiện lợi như thế nào khi thêm hình ảnh vào trang web của bạn?
    3. Làm thế nào tạo ra liên kết "tem thư" trong tài liệu của bạn?
    Thực tập tự do

    Thêm các button để liên kết hai trang web lẫn nhau.
    Đi đến phần tiếp theo ....

    Sử dụng tag preformat để tạo một bảng trong bài Volcano của bạn.
     
  8. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    9. Preformatted Text

    Làm thế nào bạn có thể hiển thị được những đoạn văn trong đó có xét đến các khoảng trắng và dấu xuống dòng?
    display text where space and carriage return characters count?Mục đích

    Sau bài học này bạn có khả năng:
    • Tạo một bảng các văn bản đã được định biên
    • Điều khiển vị trí của văn bản trên một trang khi tab và khoảng cách được xét đến
    Bài học

    Lưu ý: Nếu bạn không có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.
    Trong những bài học trước chúng ta đã biết là một Web browser sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng. Trong bài này, chúng ta sẽ xét một ví dụ mà ở đó ta sẽ trình bày văn bản thành các cột ngay hàng với nhau.
    Tag preformat hướng dẫn cho Web browser trình bày văn bản chính xác như khi bạn đánh vào trong văn bản HTML, bao gồm cả việc thể hiện các khoảng trắng, các tab, và cả dấu xuống dòng. Một browser tiêu biểu sẽ hiển thị văn bản như vậy theo kiểu:

    m o n o s p a c e dMột ví dụ cho việc sử dụng tag preformat là:
    <pre> We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. </pre>Không có các tag <pre> và </pre>, thì đoạn HTML trên sẽ được trình bày như sau:
    We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. ​
    Với tag preformat, sẽ dễ hơn khi trình soạn thảo bạn đang sử dụng có thể trình bày trong một phông mono-spaced (như là "Courier" hay "Monoco"); nếu không bạn cần phải đếm kỹ số khoảng trắng để chỉnh cột các đoạn văn (và bạn sẽ khá mệt khi làm chuyện đó).
    Với bài Volcano của chúng ta, chúng ta muốn thêm vào một bảng bên dưới phần Introduction để liệt kê ra một vài núi lửa nổi tiếng, khi nào nó đã hoạt động lại, và mức độ hoạt động của nó. Để làm điều này:
    1. Mở tập tin HTML thứ hai, index.htm trong trình soạn thảo văn bản.
    2. Dưới phần cuối cùng của Introduction, đặt một tiêu đề mức 4 (<h4>) với dòng chữ: Volumes of Some Well-Known Volcanic Eruptions (Nếu bạn không nhớ cách tạo tiêu đề, hãy xem bài 3).
    3. Bên dưới tiêu đề này, nhập chính xác văn bản sau (có thể thuận lợi hơn khi sử dụng chức năng cắt và dán từ trang web này!): <pre> Eruption Date Volume in km^3 -------- ---- -------------- Paricutin, Mexico 1943 1.3 Mt. Vesuvius, Italy 79 A.D. 3 Mount St. Helen, Washington 1980 4 Krakatoa, Indonesia 1883 18 Long Valley, California pre-historic 500 - 600 Yellowstone, Wyoming pre-historic 2400</pre>
      Trong ví dụ này, chúng ta sử dụng các khoảng trắng để làm cho cột đầu tiên được chỉnh biên trái (left justified) còn hai cột kia được chỉnh biên giữa (center-justified). Các dấu trừ để nhấn mạnh cột tiêu đề.
    4. Lưu trữReload trong web browser của bạn.
    Kiểm tra lại công việc của bạn

    So sánh trang Web của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Nếu các cột không được chỉnh đúng, có lẽ bạn đánh thiếu hay thừa các khoảng trắng.
    Xem lại

    Những vấn đề ôn lại của bài này là:
    1. Tag preformat làm thay đổi cách browser thông dịch HTML như thế nào?
    2. Trong những trường hợp nào có thể bạn cần sử dụng tag này?
    Thông tin bổ sung

    Bạn vẫn có thể sử dụng các tag HTML bên trong văn bản đã được đánh dấu bởi tag preformat. Ví dụ như chúng ta có thể thêm một liên kết siêu văn bản và vài tag định kiểu khác bên trong cặp tag <pre>...</pre>: HTMLKết quả<pre>This tutorial is copyright1995, 1996 <B>Be sure to tell all of your friends about it!</B> <i>We Welcome Your Feedback</i>fondly,<A HREF="http://www.mcli.dist.maricopa.edu/">mcli</A></pre>This tutorial is copyright1995, 1996 Be sure to tell all of your friends about it! We Welcome Your Feedbackfondly,mcli
    Chú ý rằng các tag HTML không được xem như là khoảng trắng; chúng được bỏ qua trong vùng preformat.
    Một số tác giả của trang web sử dụng tag <pre>...</pre> với các ký tự xuống dòng bên trong để thêm những dòng trắng giữa văn bản và hình ảnh trong trang web của họ- nhất là trong trường hợp họ cần nhiều dòng trắng hơn so với tag . Ví dụ như: HTMLKết quảCheese was long sinceabolished from the Orient.<pre></pre>...until Sir Longhorn arrived with thegreat Cheese Crusade of 1167.Cheese was long since abolished from the Orient. ...until Sir Longhorn arrived with the great Cheese Crusade of 1167.
    Thực tập tự do

    Thêm vào một bảng hay một sơ đồ trong tài liêu HTML của bạn sử dụng tag preformat.
    Đi đến phần tiếp theo....

    Sử dụng những ký tự đặc biệt [SIZE=+4]âccèđt.... [/SIZE]trong trang Web của bạn
     
  9. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    10. Các kí tự đặc biệt

    Làm thế nào để bạn nói...
    >>>Ỉ đ Þĩßÿ ?
    Chú ý:Nếu các ký tự trên không thể hiện các dấu nhấn hay các dấu phụ, thì có nghĩa là web browser của bạn không hổ trợ bộ ký tự ISO. Bạn nên bỏ qua bài này
    Mục đích

    Sau phần này bạn có thể:
    • Sử dụng mã HTML cho những kí tự ISO Latin 1 để hiển thị những dấu nhấn cho những chữ không phải tiếng Anh (non-english letter).
    • Viết những kí tự < and > trong HTML khi bạn cần nó trong một tài liệu. Thêm những khoảng trắng trong những chữ và từ trong một tài liệu
    Bài học

    Lưu ý: Nếu bạn không có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.
    Các dấu nhấn

    Đôi khi có thể bạn cần sử dụng một kí tự đặc biệt trong một tài liệu HTML, một dấu nhấn hay một dấu phụ. Các dấu này đã được biết đến theo ISO. Những kí tự đặc biệt như vậy được đánh dấu trong HTML dưới dạng:
    &xxxx;Trong đó XXXX là tên mã (code name) cho kí tự đặc biệt đó.
    Ví dụ, trong phần "Terminology" của bài Volcano, chúng ta muốn thêm một sự giải thích cho một thuật ngữ kỹ thuật để mô tả một loại riêng biệt của tiến trình bùng nổ của núi lửa. Thuật ngữ đó là nuee ardente xuất phát từ một từ tiếng Pháp với nghĩa là "đám mây nóng rực" (glowing cloud) nhưng để phát âm đúng chúng ta cần một dấu nhấn "sắc" (acute), để từ đó xuất hiện là nuée ardente. Trong trường hợp này, chúng ta thay thế chữ e đầu tiên trong nuee bằng mã HTML của chữ "e" có dấu nhấn sắc &eacute;:
    nu&eacute;e ardente Để tham khảo, hãy xem danh sách các ký tự ISO.
    Bây giờ chúng ta sẽ thêm một câu vào tài liệu HTML của chúng ta mà câu đó có sử dụng một ký tự có dấu nhấn:
    1. Mở tập tin HTML là index.htm trong trình soạn thảo văn bản.
    2. Bên dưới danh sách thuật ngữ của phần Volcanology Terminology thêm vào: The term <I>nu&eacute;e ardente,</I> or "glowing cloud" was first used by La Croix (1904) in his description of the volcanic flows he observed in the 1902 eruption of Mt Pel&eacute;e, a historically active volcano on the island of Martinique.
      Chú ý: Chúng ta đã sử dụng dấu nhấn sắc cho hai ký tự "e" trong câu này. Trông có vẻ lạ quá! Hãy chắc chắn rằng bạn đã thay ký tự bằng chuỗi đã viết ở trên để hiển thị được cùng ký tự đó với dấu nhấn.
    3. LưuReload lại tập tin HTML.
    Escape Sequences của HTML

    HTML cho dấu nhấn là một ví dụ của một lớp các tag tổng quát hơn được gọi là escape sequences. Trong quá trình nhập văn bản HTML cho đến giờ, bạn có thể tự hỏi chúng ta sẽ làm gì khi cần sử dụng một dấu < (nhỏ hơn) hoặc một dấu > (lớn hơn)? Hai ký tự này cũng với dấu & (và) có một ý nghĩa đặc biệt trong HTML và không thể sử dụng như một ký tự đánh vào được. Thay vì đánh trực tiếp chúng, hãy sử dụng escape sequences:
    &lt; thay cho < &gt; thay cho > &amp; thay cho &Bây giờ chúng ta hãy áp dụng các ký hiệu này trong bài Volcano của chúng ta. Trong bài trước: chúng ta đã thêm một bảng liệt kê vài núi lửa cùng với khối lượng vật chất đã phun ra từ chúng. Chúng ta nói rằng một trong những số liệu (500-600) cho Long Valley là không được chính xác lắm (thông thường đây là các giá trị gần đúng), và chúng ta muốn sửa đổi trị này thành >450 & <700. Để làm điều này:
    1. Mở tập tin HTML index.htm trong trình soạn thảo
    2. Bên dưới tiêu đề Volumes of Some Well-Known Volcanic Eruptions, tìm dòng Long Valley trong bảng: Long Valley, California pre-historic 500 - 600và đổi nó thành: Long Valley, California pre-historic &gt;450 &amp; &lt;700
      Chú ý: Mặc dầu chúng ta sử dụng escape sequences bên trong một preformatted text, hãy chú ý một web browser vẫn thông dịch đúng và hiển thị các ký tự đặc biệt này. Như vậy, escape sequences có thể sử dụng trong mọi phần của một tài liệu HTML kể cả các tiêu đề và liên kết anchor.
    3. LưuReload tập tin HTML
    Những khoảng trống thêm vào

    Như bạn đã thấy một web browser sẽ bỏ qua tất cả những khoảng trắng không liên quan trong tập tin HTML của bạn. Tuy nhiên, có những lúc thật sự chúng ta muốn có nhiều hơn một khoảng trắng . Khi nào vậy? Một vài người thích có hai khoảng trắng theo sau một dấu chấm hết câu. Nếu bạn muốn thụt vào câu đầu tiên của mỗi đoạn văn bạn sẽ làm sao? Làm thế nào để có một từ đơn ở vị trí cách xa phần còn lại? Một mã HTML dành cho việc thêm vào một kí tự trắng là kí tự đặc biệt được gọi là "khoảng trắng không bị phá hủy" (non-breaking space):
    &nbsp;Sau đây là một vài ví dụ về cách sử dụng khoảng trắng không bị phá hủy:
    HTMLKết quả<B>
    Khoảng trắng không bị phá hủy được dùng để trải dài các ký tự trong một từ​
    </B>
    <b><tt>C &nbsp; H &nbsp; E &nbsp; E &nbsp; S &nbsp; E</tt></b>C H E E S E <B>
    Hai khoảng trắng không bị phá hủy được dùng để thụt các câu đầu của đoạn văn vào trong​
    </B>
    &nbsp; &nbsp; When Sir Longhornhad tragically died, no one was left tocarry on his tradition. There was much sadness in the land. And no cheese.&nbsp; &nbsp; But then the young geniusSheila Colby discovered the missingingredient. And once again, cheese was plentiful. When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.
    <B>
    Một khoảng trắng nữa được thêm vào sau cuối mỗi câu​
    </B>
    &nbsp; &nbsp; When Sir Longhornhad tragically died, no one was left tocarry on his tradition. &nbsp; There was much sadness in the land. &nbsp; And no cheese.&nbsp; &nbsp; But then the young geniusSheila Colby discovered the missingingredient. &nbsp; And once again, cheese was plentiful. When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.

    Có thể bạn muốn có kinh nghiệm với các cách sử dụng khác nhau cho khoảng trắng không bị phá hủy. Bây giờ, chúng ta sẽ không sửa các tài liệu HTML của chúng ta, nhưng nếu muốn, bạn có thể thêm những mã để làm thụt đầu dòng các câu mở đầu của tất cả các đoạn văn qua việc sử dụng hai lần mã khoảng trắng không bị phá hủy.
    Kiểm tra lại công việc của bạn

    So sánh trang Web của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Hãy bảo đảm bạn viết đúng các escape sequence với ký tự & và ;
    Thông tin bổ sung

    Dưới đây là một vài kí tự đặc biệt có thể hữu ích cho bạn:
    TênHTMLKết quảCopyright&copy;©Trademark&reg;®Xem lại

    Những vấn đề nên xem lại trong bài này:
    1. Trong HTML, cách nào để hiển thị kí tự tiếng Đức "umlaut" (ü)?
    2. Điều gì sẽ xảy ra nếu bạn không sử dụng một escape sequence cho < and >?
    3. Tại sao cần một escape sequence cho kí tự &?
    4. Làm thế nào có thể thụt các đoạn văn vào trong?
    Thực tập tự do

    Trong văn bản HTML của riêng bạn, thêm vào một từ nước ngoài mà từ đó cần một dấu nhấn đặt biệt, hay thêm vào một biểu thức toán học có sử dụng dấu < hay dấu >. Hoặc là bạn có thể thêm các khoảng trắng để thụt các đoạn văn vào trong.
    Đến phần kế tiếp ....

    Xây dựng một danh mục sách sử dụng một danh sách mô tả.
     
  10. Newsun

    Newsun Believe in Good Thành viên thân thiết

    Tham gia:
    11/11/2008
    Bài viết:
    9.537
    Lượt thích:
    45.838
    Kinh nghiệm:
    113
    Nghề nghiệp:
    Sinh Viên
    Trường:
    ĐH KHTN
    11. Danh sách mô tả

    Danh sách mô tả (Descriptive List) là một dạng đặc biệt của danh sách:
    • danh sách
      • danh sách
        • danh sách...
    Mục đích

    Sau bài học này bạn có thể:
    • Xây dựng danh sách các mục cùng với khối văn bản mô tả nó được thụt vào trong.
    • Tạo một danh mục sách bằng danh sách mô tả.
    Bài học

    Lưu ý: Nếu bạn không có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.
    Trong bài 6 chúng ta đã biết cách để tạo hai loại danh sách: có thứ tự <ol>...</ol> và không có thứ tự <ul>...</ul>. Bây giờ, chúng tôi sẽ giới thiệu một dạng thứ ba, danh sách mô tả. Không giống như những loại danh sách chúng ta đã thấy trước đây, danh sách mô tả đánh dấu các mục của nó không phải là một dấu chấm hoặc một số mà bằng dạng trình bày thụt vào trong của nó.
    Dạng của tag danh sách mô tả là :
    <dl><dt> description title1<dd> description description1<dt> description title2<dd> description description2 : : :<dt> description titleN<dd> description descriptionN</dl> Tag <dl> .... </dl> chứa trong nó nhiều cặp tiêu đề mô tả (description title) <dt> và sự mô tả (description) <dd> Một Web browser sẽ tạo thành một danh sách với mỗi mô tả được trình bày thụt vào so với tiêu đề của nó.
    Khi nhìn trong Web browser ví dụ trên sẽ trông giống như sau:
    description title1 description description1 description title2 description description2 : : description titleN description descriptionN ​
    Một danh sách mô tả có thể được sử dụng như là một tự điển (glossary) các định nghĩa, nhưng trong ví dụ chúng ta, chúng ta sẽ dùng nó để tạo một thư mục sách ngắn cho bài Volcano Web:
    1. Mở tập tin HTML index.htm trong trình soạn thảo.
    2. Sau danh sách không có thứ tự của tiêu đề References nhập như sau : <h3>Bibliography</h3>Check your library for these books:<dl><dt>Cas, R.A.F. and Wright, J. V. (1987). <dd><I>Volcanic Successions: Modern and Ancient.</I> London: Allen &amp; Unwin.<dt>La Croix, A. (1904)<dd><I>La Montagna Pel&eacute;e et ses &Eacute;ruptions.</I>Paris: Masson<dt>Lipman, P.W. and Mullineaux (eds). (1981)<dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>U.S. Geological Survey Professional Paper 1250.</dl>
      Chú ý: Chúng ta đã sử dụng một số Ký tự Đặc biệt cho dấu và ("&") trong tham khảo đầu tiên và dấu nhấn cho tham khảo thứ hai. Nếu bạn chưa quen với các ký tự đặc biệt của HTML, xem lại bài 10
    3. Lưu trữReload trong Web browser của bạn.
    Kiểm tra lại công việc của bạn

    So sánh tài liệu của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu tài liệu của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Đừng quên các tag <dl>... </dl> để đánh dấu toàn danh sách. Lỗi thường gặp là quên chuyển đổi các tag <dt> và <dd>
    Xem lại

    Xem lại những chủ đề sau:
    1. Danh sách mô tả khác với danh sách có thứ tự và danh sách không có thứ tự ở những điểm nào?
    2. Trong trường hợp nào bạn có thể phải sử dụng trong một danh sách mô tả?
    3. Sự khác nhau giữa tag <dt> và tag <dd>?
    Thực tập tự do

    Sử dụng danh sách mô tả để thêm một bảng thuật ngữ hay một danh mục sách trong trang HTML của riêng bạn.
    Một số thông tin thêm

    Bạn có thể thêm các danh sách có thứ tự và không có thứ tự vào bên trong một danh sách mô tả. Lấy ví dụ, chúng ta sẽ tạo một một danh sách các nhóm khoáng chất chính. Mỗi nhóm có sự mô tả các tính chất của chúng, cùng với một danh sách con các khoáng chất và chúng được sử dụng trong xã hội như thế nào. Chúng ta muốn nó có dạng như sau (chỉ trình bày một ít):
    Oxides Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations
    • Hematite (iron ore)
    • Magnetite (iron ore, magnetic mineral)
    • Corundum (gemstone, abrasive)
    Sulfates Metal ions combine with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules
    • Gypsum (plaster)
    • Barite (drilling mud)
    Dạng HTML cho kết quả trên có dạng:
    <dl><dt><b>Oxides</b><dd>Combinations of metal ions with Oxygen, comprises the majorores extracted in mining operations <ul> <li>Hematite (iron ore) <li>Magnetite (iron ore, magnetic mineral) <li>Corundum (gemstone, abrasive) </ul><dt><b>Sulfates</b><dd>Metal ions combines with the Sulfate ion (SO4), atomicstructure sometimes can allow bonding of water molecules <ul> <li>Gypsum (plaster) <li>Barite (drilling mud) </ul></dl>Đi đến phần tiếp theo....

    Thêm một thông tin về "chữ ký" (signature) cùng với một liên kết để gởi e-mail.
     
Đang tải...

Chia sẻ cùng bạn bè

Đang tải...
TOP