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:

Mở tập tin index.htm của bạn trong trình soạn thảo văn vản.
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.
Lưu và Reload 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.html

Bạ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:

Mở tài liệu HTML index.htm trong trình soạn thảo
Dưới tiêu đề "References", nhập:
```
<ul>
<li> <a href="">Educational Resources from the
USGS</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.
Nối đến US Geological Survey Education Index trong cửa sổ browser của bạn.
Từ trang web, sử dụng chuột để chọn URL đang được hiển thị trong vùng trình bày URL.
Từ thực đơn Edit, chọn Copy URL.
Bây giờ , trở lại tài liệu HTML của bạn index.htm
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

Địa chỉ cho một mục trên Internet là gì?
Những bước nào cần cho việc tạo một liên kết anchor đến NASA Internet Site?
Cách nhanh nào được dùng để đưa một URL vào trong liên kết anchor?
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 .

Huỳnh Phúc Huy 's Blog

Saturday, September 28, 2013

HTML cơ bản - Phần 13