SlideShare a Scribd company logo
1 of 7
Download to read offline
Soạn thảo HTML | Giới thiệu | FAQ | Alumni | Các Tag | Mục Lục | Bài trước | Bài kế |


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.
   3.
   4.           Listed below are two places in the United States that
   5.           are considered "active" volcanic areas.
   6. Bên dưới tiêu đề "Mount St. Helens", đánh:
   7.
   8.           On May 18, 1980, after a long period of rest, this quiet
   9.           mountain in Washington provided <a href="msh.htm">
   10.          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).

   11. Lưu và đóng tài liệu HTML của bạn
   12. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn.
   13. Nhập các dòng sau trong màn hình mới:
   14.          <html>
   15.          <head>
   16.          <title>Mount    St Helens</title>
   17.          </head>
   18.          <body>
   19.          <h1>Mount St    Helens</h1>
   20.          The towering    pine trees of this once-quiet mountain
   21.          were toppled    over like toys.
   22.          </body>
   23.          </html>
   24. 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).
   25. Reload Volc.htm trong web browser.
   26. 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.
   4.            The towering pine trees of this once-quiet mountain
   5.            were <a href="msh.gif">toppled over like toys</a>.
   6. Lưu    lại tập tin msh.htm và Reload trong web browser của bạn.
   7. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3)
   8. 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:
   5.           The towering pine trees of this once-quiet mountain
   6.           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."

   7. 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

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):
   5.                 + workarea (directory)
   6.
   7.                        + pictures (directory)
   8.                             msh.gif
   9.                             volc.gif
   10.
   11.                       + volcano (directory)
   12.                            volc.htm
   13.                            msh.htm
   14. 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:
   15.       <h3>Mount St Helens</h3>
   16.       On May 18, 1980, after a long period of rest, this quiet
   17.       mountain in Washington provided <a href="msh.htm">detailed
   18.       observations</a> on the mechanics of highly explosive
   19.       eruptions.

         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?

   20. 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:
   21.       The towering pine trees of this once-quiet mountain
   22.       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
23. 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>:
   24.      <img alt="A Lesson on:" src="../pictures/lava.gif"
                                         width=300 height=259>

   25. 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
            /geology
như vậy URL cho Volcano Web có thể là:
     http://www.bigu.edu/courses/science/geology/volcano/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/geology/volcano/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.htm
khi để 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.

ĐẾN.... | Mục Lục | Bài trước: "Tạo Liên kết với Anchors" | Bài kế: "URLs-Con trỏ đến Internet" |



Writing HTML Bài 8b: Liên kết đến tập tin cục bộ
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut8a.html

More Related Content

Viewers also liked

Charity in the family and society
Charity in the family and societyCharity in the family and society
Charity in the family and societyMatthew Huish
 
Info bio-edward-olive-english
Info bio-edward-olive-englishInfo bio-edward-olive-english
Info bio-edward-olive-englishEdward Olive
 
Bilingual Project IES Fernández Vallín Info
Bilingual Project IES Fernández Vallín Info Bilingual Project IES Fernández Vallín Info
Bilingual Project IES Fernández Vallín Info María Menéndez
 
How can god bless our church? 6. Worship with joy
How can god bless our church? 6. Worship with joyHow can god bless our church? 6. Worship with joy
How can god bless our church? 6. Worship with joyMatthew Huish
 
Nuoi cua dong_2
Nuoi cua dong_2Nuoi cua dong_2
Nuoi cua dong_2Buu Dang
 
realitivistic relativity 2.0
  realitivistic relativity 2.0  realitivistic relativity 2.0
realitivistic relativity 2.0Mohamed Yaser
 
Creating conversations
Creating conversationsCreating conversations
Creating conversationsMatthew Huish
 
Como añadir iconos de social media en la firma de tu email
Como añadir iconos de social media en la firma de tu  emailComo añadir iconos de social media en la firma de tu  email
Como añadir iconos de social media en la firma de tu emailEsmeralda Diaz-Aroca
 
Our joy & privilege - Eddie Hartley
Our joy & privilege - Eddie HartleyOur joy & privilege - Eddie Hartley
Our joy & privilege - Eddie HartleyMatthew Huish
 
Bao cao benh_tri_95_phan_tram_nguoi_benh_tri
Bao cao benh_tri_95_phan_tram_nguoi_benh_triBao cao benh_tri_95_phan_tram_nguoi_benh_tri
Bao cao benh_tri_95_phan_tram_nguoi_benh_triBuu Dang
 
How can I control my criticising?
How can I control my criticising?How can I control my criticising?
How can I control my criticising?Matthew Huish
 

Viewers also liked (14)

Charity in the family and society
Charity in the family and societyCharity in the family and society
Charity in the family and society
 
Info bio-edward-olive-english
Info bio-edward-olive-englishInfo bio-edward-olive-english
Info bio-edward-olive-english
 
Bilingual Project IES Fernández Vallín Info
Bilingual Project IES Fernández Vallín Info Bilingual Project IES Fernández Vallín Info
Bilingual Project IES Fernández Vallín Info
 
Ca chinh
Ca chinhCa chinh
Ca chinh
 
How can god bless our church? 6. Worship with joy
How can god bless our church? 6. Worship with joyHow can god bless our church? 6. Worship with joy
How can god bless our church? 6. Worship with joy
 
Nuoi cua dong_2
Nuoi cua dong_2Nuoi cua dong_2
Nuoi cua dong_2
 
realitivistic relativity 2.0
  realitivistic relativity 2.0  realitivistic relativity 2.0
realitivistic relativity 2.0
 
2011 Solutions and Results
2011 Solutions and Results2011 Solutions and Results
2011 Solutions and Results
 
Creating conversations
Creating conversationsCreating conversations
Creating conversations
 
Como añadir iconos de social media en la firma de tu email
Como añadir iconos de social media en la firma de tu  emailComo añadir iconos de social media en la firma de tu  email
Como añadir iconos de social media en la firma de tu email
 
Our joy & privilege - Eddie Hartley
Our joy & privilege - Eddie HartleyOur joy & privilege - Eddie Hartley
Our joy & privilege - Eddie Hartley
 
Bao cao benh_tri_95_phan_tram_nguoi_benh_tri
Bao cao benh_tri_95_phan_tram_nguoi_benh_triBao cao benh_tri_95_phan_tram_nguoi_benh_tri
Bao cao benh_tri_95_phan_tram_nguoi_benh_tri
 
How can I control my criticising?
How can I control my criticising?How can I control my criticising?
How can I control my criticising?
 
Voor Frank
Voor FrankVoor Frank
Voor Frank
 

Similar to 2007410121116 tut8a

Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnNhóc Nhóc
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 
Html coban
Html coban Html coban
Html coban Cá Cơm
 
Huong dan su dung drupal6.2
Huong dan su dung drupal6.2Huong dan su dung drupal6.2
Huong dan su dung drupal6.2Thao Trinh
 
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợp
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợpSức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợp
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợpTuyet Tam
 
Asp net mvc3 music store egroups vn
Asp net mvc3 music store   egroups vnAsp net mvc3 music store   egroups vn
Asp net mvc3 music store egroups vnNguyen Van Hung
 
Bai tap lap trinh web voi joomla csau
Bai tap   lap trinh web voi joomla csauBai tap   lap trinh web voi joomla csau
Bai tap lap trinh web voi joomla csauGiang Nguyễn
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầuTin Học KEY
 
Bai giang cua Le trung Nghia
Bai giang cua Le trung NghiaBai giang cua Le trung Nghia
Bai giang cua Le trung Nghiaepicnat
 
Your personal-learning-network-toolkit.2016
Your personal-learning-network-toolkit.2016Your personal-learning-network-toolkit.2016
Your personal-learning-network-toolkit.2016nghia le trung
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon htmlTrần Đức Anh
 
Bao cao web cake php
Bao cao web cake phpBao cao web cake php
Bao cao web cake phplaonap166
 
Tai lieu co ban html
Tai lieu co ban htmlTai lieu co ban html
Tai lieu co ban htmlmanhdat270192
 

Similar to 2007410121116 tut8a (20)

Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
Html coban
Html coban Html coban
Html coban
 
Huong dan su dung drupal6.2
Huong dan su dung drupal6.2Huong dan su dung drupal6.2
Huong dan su dung drupal6.2
 
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợp
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợpSức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợp
Sức mạnh của jsf 2, phần 2 tạo khuôn mẫu và các thành phần phức hợp
 
Asp control
Asp controlAsp control
Asp control
 
Asp net mvc3 music store egroups vn
Asp net mvc3 music store   egroups vnAsp net mvc3 music store   egroups vn
Asp net mvc3 music store egroups vn
 
Bai tap lap trinh web voi joomla csau
Bai tap   lap trinh web voi joomla csauBai tap   lap trinh web voi joomla csau
Bai tap lap trinh web voi joomla csau
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu
 
Wordpress
WordpressWordpress
Wordpress
 
Bai giang cua Le trung Nghia
Bai giang cua Le trung NghiaBai giang cua Le trung Nghia
Bai giang cua Le trung Nghia
 
Your personal-learning-network-toolkit.2016
Your personal-learning-network-toolkit.2016Your personal-learning-network-toolkit.2016
Your personal-learning-network-toolkit.2016
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon html
 
Bao cao web cake php
Bao cao web cake phpBao cao web cake php
Bao cao web cake php
 
Tai lieu co ban html
Tai lieu co ban htmlTai lieu co ban html
Tai lieu co ban html
 
Tai lieu html
Tai lieu htmlTai lieu html
Tai lieu html
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Dropbox
DropboxDropbox
Dropbox
 

More from Buu Dang

HỒ SƠ NĂNG LỰC OQUAA
HỒ SƠ NĂNG LỰC OQUAAHỒ SƠ NĂNG LỰC OQUAA
HỒ SƠ NĂNG LỰC OQUAABuu Dang
 
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấp
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấpChuyên đề quy trình lựa chọn và quản lý nhà cung cấp
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấpBuu Dang
 
20 cach de lam khach hang yeu ban hon
20 cach de lam khach hang yeu ban hon20 cach de lam khach hang yeu ban hon
20 cach de lam khach hang yeu ban honBuu Dang
 
60 popular vintage i phone 6 plus cases covers that you'll love
60 popular vintage i phone 6 plus cases covers that you'll love60 popular vintage i phone 6 plus cases covers that you'll love
60 popular vintage i phone 6 plus cases covers that you'll loveBuu Dang
 
Top biggest i phone 6 touch cases collection
Top biggest i phone 6 touch cases collectionTop biggest i phone 6 touch cases collection
Top biggest i phone 6 touch cases collectionBuu Dang
 
Zazzle's 60 popular i phone 6 cases
Zazzle's 60 popular i phone 6 casesZazzle's 60 popular i phone 6 cases
Zazzle's 60 popular i phone 6 casesBuu Dang
 
Zazzle's 60 popular iphone 6 cases
Zazzle's 60 popular iphone 6 casesZazzle's 60 popular iphone 6 cases
Zazzle's 60 popular iphone 6 casesBuu Dang
 
Danh ba postal code Vietnam day du - ma buu cuc
Danh ba postal code Vietnam day du - ma buu cuc Danh ba postal code Vietnam day du - ma buu cuc
Danh ba postal code Vietnam day du - ma buu cuc Buu Dang
 
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...Buu Dang
 
Che bien cac phu pham giet mo
Che bien cac phu pham giet moChe bien cac phu pham giet mo
Che bien cac phu pham giet moBuu Dang
 
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa  Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa Buu Dang
 
Thanh phan gia tri dinh duong thuc an gia suc gia cam
Thanh phan gia tri dinh duong thuc an gia suc gia camThanh phan gia tri dinh duong thuc an gia suc gia cam
Thanh phan gia tri dinh duong thuc an gia suc gia camBuu Dang
 
Tieu chuan an hang ngay cho de cuu
Tieu chuan an hang ngay cho de cuuTieu chuan an hang ngay cho de cuu
Tieu chuan an hang ngay cho de cuuBuu Dang
 
Nhu cau axit amin trong khau phan an cho lon thit
Nhu cau axit amin trong khau phan an cho lon thitNhu cau axit amin trong khau phan an cho lon thit
Nhu cau axit amin trong khau phan an cho lon thitBuu Dang
 
Nhu cau dinh duong cho gia suc nhai lai
Nhu cau dinh duong cho gia suc nhai laiNhu cau dinh duong cho gia suc nhai lai
Nhu cau dinh duong cho gia suc nhai laiBuu Dang
 
Nhu cau dinh duong cho ga
Nhu cau dinh duong cho gaNhu cau dinh duong cho ga
Nhu cau dinh duong cho gaBuu Dang
 
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy san
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy sanMot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy san
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy sanBuu Dang
 
Tiêu hóa ca cua xanh
Tiêu hóa ca cua xanhTiêu hóa ca cua xanh
Tiêu hóa ca cua xanhBuu Dang
 
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...Buu Dang
 
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...Buu Dang
 

More from Buu Dang (20)

HỒ SƠ NĂNG LỰC OQUAA
HỒ SƠ NĂNG LỰC OQUAAHỒ SƠ NĂNG LỰC OQUAA
HỒ SƠ NĂNG LỰC OQUAA
 
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấp
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấpChuyên đề quy trình lựa chọn và quản lý nhà cung cấp
Chuyên đề quy trình lựa chọn và quản lý nhà cung cấp
 
20 cach de lam khach hang yeu ban hon
20 cach de lam khach hang yeu ban hon20 cach de lam khach hang yeu ban hon
20 cach de lam khach hang yeu ban hon
 
60 popular vintage i phone 6 plus cases covers that you'll love
60 popular vintage i phone 6 plus cases covers that you'll love60 popular vintage i phone 6 plus cases covers that you'll love
60 popular vintage i phone 6 plus cases covers that you'll love
 
Top biggest i phone 6 touch cases collection
Top biggest i phone 6 touch cases collectionTop biggest i phone 6 touch cases collection
Top biggest i phone 6 touch cases collection
 
Zazzle's 60 popular i phone 6 cases
Zazzle's 60 popular i phone 6 casesZazzle's 60 popular i phone 6 cases
Zazzle's 60 popular i phone 6 cases
 
Zazzle's 60 popular iphone 6 cases
Zazzle's 60 popular iphone 6 casesZazzle's 60 popular iphone 6 cases
Zazzle's 60 popular iphone 6 cases
 
Danh ba postal code Vietnam day du - ma buu cuc
Danh ba postal code Vietnam day du - ma buu cuc Danh ba postal code Vietnam day du - ma buu cuc
Danh ba postal code Vietnam day du - ma buu cuc
 
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...
Bao cao nghien cuu su dung cam gao hieu qua lam thuc an chan nuoi thuc an thu...
 
Che bien cac phu pham giet mo
Che bien cac phu pham giet moChe bien cac phu pham giet mo
Che bien cac phu pham giet mo
 
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa  Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa
Nghiên cứu quy trình công nghệ lên men bã dứa làm thức ăn cho bò sữa
 
Thanh phan gia tri dinh duong thuc an gia suc gia cam
Thanh phan gia tri dinh duong thuc an gia suc gia camThanh phan gia tri dinh duong thuc an gia suc gia cam
Thanh phan gia tri dinh duong thuc an gia suc gia cam
 
Tieu chuan an hang ngay cho de cuu
Tieu chuan an hang ngay cho de cuuTieu chuan an hang ngay cho de cuu
Tieu chuan an hang ngay cho de cuu
 
Nhu cau axit amin trong khau phan an cho lon thit
Nhu cau axit amin trong khau phan an cho lon thitNhu cau axit amin trong khau phan an cho lon thit
Nhu cau axit amin trong khau phan an cho lon thit
 
Nhu cau dinh duong cho gia suc nhai lai
Nhu cau dinh duong cho gia suc nhai laiNhu cau dinh duong cho gia suc nhai lai
Nhu cau dinh duong cho gia suc nhai lai
 
Nhu cau dinh duong cho ga
Nhu cau dinh duong cho gaNhu cau dinh duong cho ga
Nhu cau dinh duong cho ga
 
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy san
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy sanMot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy san
Mot so dac tinh cua bot ca dung trong san xuat thuc an nuoi thuy san
 
Tiêu hóa ca cua xanh
Tiêu hóa ca cua xanhTiêu hóa ca cua xanh
Tiêu hóa ca cua xanh
 
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...
đáNh giá giá trị dinh dưỡng trong khô dầu đậu tương và đậu tương nguyên dầu k...
 
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...
ảNh hưởng của chế độ dinh dưỡng và phương thức cho ăn đến hiệu quả chăn nuôi ...
 

2007410121116 tut8a

  • 1. Soạn thảo HTML | Giới thiệu | FAQ | Alumni | Các Tag | Mục Lục | Bài trước | Bài kế | 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".
  • 2. 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. 3. 4. Listed below are two places in the United States that 5. are considered "active" volcanic areas. 6. Bên dưới tiêu đề "Mount St. Helens", đánh: 7. 8. On May 18, 1980, after a long period of rest, this quiet 9. mountain in Washington provided <a href="msh.htm"> 10. 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). 11. Lưu và đóng tài liệu HTML của bạn 12. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn. 13. Nhập các dòng sau trong màn hình mới: 14. <html> 15. <head> 16. <title>Mount St Helens</title> 17. </head> 18. <body> 19. <h1>Mount St Helens</h1> 20. The towering pine trees of this once-quiet mountain 21. were toppled over like toys. 22. </body> 23. </html> 24. 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). 25. Reload Volc.htm trong web browser. 26. 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.
  • 3. 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. 4. The towering pine trees of this once-quiet mountain 5. were <a href="msh.gif">toppled over like toys</a>. 6. Lưu lại tập tin msh.htm và Reload trong web browser của bạn. 7. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3) 8. 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: 5. The towering pine trees of this once-quiet mountain 6. 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." 7. 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.
  • 4. 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 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
  • 5. đọ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): 5. + workarea (directory) 6. 7. + pictures (directory) 8. msh.gif 9. volc.gif 10. 11. + volcano (directory) 12. volc.htm 13. msh.htm 14. 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: 15. <h3>Mount St Helens</h3> 16. On May 18, 1980, after a long period of rest, this quiet 17. mountain in Washington provided <a href="msh.htm">detailed 18. observations</a> on the mechanics of highly explosive 19. eruptions. 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? 20. 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: 21. The towering pine trees of this once-quiet mountain 22. 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
  • 6. 23. 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>: 24. <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259> 25. 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 /geology như vậy URL cho Volcano Web có thể là: http://www.bigu.edu/courses/science/geology/volcano/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/geology/volcano/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.htm khi để 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,
  • 7. 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. ĐẾN.... | Mục Lục | Bài trước: "Tạo Liên kết với Anchors" | Bài kế: "URLs-Con trỏ đến Internet" | Writing HTML Bài 8b: Liên kết đến tập tin cục bộ ©1995, 1996 Maricopa Center for Learning and Instruction (MCLI) Maricopa County Community College District, Arizona The Internet Connection at MCLI is Alan Levine --} Comments to levine@maricopa.edu URL: http://www.mcli.dist.maricopa.edu/tut/tut8a.html