HTML nâng cao - Phần 8

Xét thêm về Hình ảnh và Danh sách

 

Hãy làm bốc hơi 

thoát ra khỏi những hộp dễ gây tức giận  bao quanh các button hình ảnh và

biểu diễn những bullet

cộng thêm với việc thay đổi kiểu số và giá trị các phần tử trong danh sách

Mục đích

Sau bài học này bạn có thể:

• Tạo một hình ảnh siêu liên kết không có đường viền xung quanh.
• Viết HTML cho một danh sách không có thứ tự sử dụng các dấu bullet khác nhau.
• Tạo một danh sách có thứ tự được đánh số bằng chữ hoa hay chữ thường, hoặc là những số La mã lớn hoặc nhỏ.
• Sửa đổi một danh sách có thứ tự để bắt đầu đánh số từ một trị dương bất kỳ.

---

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ờ. Bạn cũng có thể xem qua trang kiểm tra để biết browser của bạn có hổ trợ các tag được sử dụng trong bài này không.

Không có Đường viền trên Hình ảnh Siêu liên kết

Trong bài 8e chúng ta đã biết làm thế nào để một hình ảnh hoạt động như một siêu liên kết đến những trang Web khác hay đến một bản sao lớn hơn của hình ảnh. Chúng ta nhận thấy là browser đặt một hộp đường viền quanh hình ảnh, để cho biết rằng đó là một "hyper" như các mục siêu văn bản khác.

hoạt động như bất kỳ một liên kết siêu văn bản nào khác.

Tuy nhiên, cái hộp đôi lúc tạo ra sự cản trở, nhất là trong trường hợp chúng ta có một hình có sẵn đường viền không vuông vức. Người sử dụng về nguyên tắc vẫn xác định được một hình ảnh là "hyper" nếu dạng dấu nháy thay đổi khi di chuyển chuột băng qua hình ảnh (nó thường chuyển thành hình "bàn tay" khi ở trên một liên kết hoạt động được).

Bạn có thể "bỏ đi" hộp bao quanh bằng cách thêm thuộc tính vào tag <img...> như sau:

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

Trong ví dụ này, hình ảnh lilpict.gif hoạt động như một siêu liên kết đến một hình ảnh lớn hơn là bigpict.gif. Thuộc tính border=0 không có nghĩa gì cả nếu như tag <img..> không ở bên trong một tag <a href=...</a> khác.

Chúng ta đã có hai chỗ trong bài Volcano Web của chúng ta có hình ảnh inline siêu liên kết - Bạn có nhớ ở đâu không?

Cái đầu tiên trong tập tin usa.htm, trong đó một hình ảnh nhỏ của máy đo địa chấn liên kết đến một hình ảnh lớn hơn. Cái thứ hai là dấu mũi tên trong trang msh.htm để quay lại phần bài học.

1. Mở cả hai tập tin usa.htm và msh.htm trong trình soạn thảo.
2. Tìm ra nơi mà chúng ta đã đặt hình ảnh nhỏ có liên kết đến thứ khác.
3. Sửa đổi mỗi tag <img src=....> để nó là một siêu liên kết và có chứa một thuộc tính border=0 . Lấy ví dụ, trong tập tin msh.htm nó sẽ trông giống như sau:

     <a href="usa.htm"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Return to <i>Volcano Web</i></a>

4. Lưu trữ và Nạp lại các tập tin usa.htm và msh.htm trong browser của bạn.
5. Nếu các hình nhỏ không còn đường viền và vẫn nối đến đúng nơi cần thiết khi bạn click vào, công việc của bạn coi như đã xong.

Các bullet cho Danh sách Không có Thứ tự

Trong bài 6 chúng ta đã tạo các danh sách không có thứ tự <ul>...</ul>. Web browser tự động đặt một dấu bullet phía trước mỗi mục của danh sách - và dấu bullet sẽ tự thay đổi nếu chúng ta tạo một danh sách nữa bên trong một danh sách. Với vài loại browser bạn có thể chỉ định trong HTML một trong ba loại bullet sẽ sử dụng bằng cách thêm thuộc tính vào tag <ul>:

 <ul type=xxxx>

trong đó xxxx có thể là:

• type=circle
• type=square
• type=disc [bullet mặc định cho danh sách cấp ngoài cùng]

Hơn thế nữa! Bạn có thể thay đổi loại bên trong một danh sách bằng cách đặt một thuộc tính type trong tag <li>:

HTML	Nó nhìn thấy như thế nào
<ul type=square> <li>this is item 1 <li>this is item 2 <li>this is item 3 <li type=circle> Hey! how about these bullets? <li>this is another item <li>and one more <li type=disc> Hey! how about these bullets? </ul>	this is item 1 this is item 2 this is item 3 Hey! how about these bullets? this is another item and one more Hey! how about these bullets?

Lưu ý rằng loại được chỉ định trong tag <li type=xxxx> vẫn được sử dụng cho tất cả các tag <li> tiếp theo cho đến khi nào một loại bullet khác được chọn.
Bây giờ, chúng ta sẽ thay đổi loại bullet trong trang Research Projects của chúng ta (tập tin proj.htm).

1. Mở tập tin proj.htm trong trình soạn thảo.
2. Dòng đầu tiên trong tập tin này là một danh sách có thứ tự <ol>...</ol> nhưng bây giờ chúng ta đổi nó thành một danh sách không có thứ tự với bullet circle. Sửa đổi lại HTML cho danh sách đầu tiên thành:

   
     <ul type=circle>
     <li>Type of volcano
     <li>Geographic location
     <li>Name, distance, and population of nearest major city
     <li>Date of most recent eruption and date of most
         destructive eruption
     <li>Other events associated with the last eruption
         (earthquakes, floods, mudslides, etc)
     </ul>

3. Lưu trữ và Nạp lại tập tin của bạn trong browser. Bạn có thể so sánh trang Web của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào tại đây.

Các kiểu và Giá trị cho Danh sách Có thứ tự

Khi chúng ta tạo ra một danh sách có thứ tự <ol>...</ol> lần đầu tiên trong bài 6, chúng ta đã thấy cách browser tự động đánh số thứ tự cho các mục do tag <li> chỉ định. Chúng ta sẽ làm gì khi chúng ta không muốn sử dụng các số Ả rập (1,2,3...)? Tốt thôi, đây là câu trả lời, sử dụng thuộc tính type=x bên trong các tag <ol> và <li>:

Số Ả Rập	Chữ Hoa	Chữ Thường	Số La Mã Lớn	Số La Mã Nhỏ
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
Tôi đầu tiên! Tôi thứ hai! Tôi thứ ba! Tôi thứ tư! Tôi thứ năm!	Tôi đầu tiên! Tôi thứ hai! Tôi thứ ba! Tôi thứ tư! Tôi thứ năm!	Tôi đầu tiên! Tôi thứ hai! Tôi thứ ba! Tôi thứ tư! Tôi thứ năm!	Tôi đầu tiên! Tôi thứ hai! Tôi thứ ba! Tôi thứ tư! Tôi thứ năm!	Tôi đầu tiên! Tôi thứ hai! Tôi thứ ba! Tôi thứ tư! Tôi thứ năm!

Chúng ta đã thấy một ví dụ của việc sử dụng danh sách có thứ tự bên trong một danh sách có thứ tự khác khi trình bày trang - với thuộc tính type chúng ta có thể có những trang với dạng trình bày chuẩn như:

1. Cheese in Pre-Historic time
   1. Africa
      1. Afar Triangle
      2. East Coast
   2. Asia
   3. Europe
      1. France
         1. Cave paintings depicting cheese harvesting
         2. Burial rituals inferred from dried cheese remnants
      2. British Isles
   4. North America
2. Cheese in the Middle Ages
   1. King Arthur's Longhorn
   2. Sharp Cheddar for the Crusades
3. Cheese in the Space Age

Một thứ khác chúng ta có thể làm với danh sách có thứ tự là để nó bắt đầu đếm từ một giá trị không phải là 1. Để làm điều này chúng ta thêm thuộc tính start=y vào tag <ol>. Lưu ý rằng ngay cả chúng ta sử dụng các thuộc tính type=x khác, chúng ta vẫn chỉ định được giá trị bắt đầu y theo dạng như "2, 3, 10, 100, ...". Hãy xem vài ví dụ sau:

Số Ả Rập	Chữ Hoa	Chữ Thường	Số La Mả Lớn	Số La Mả Nhỏ
<ol type=1 start=11>	<ol type=A start=11>	<ol type=a start=11>	<ol type=I start=11>	<ol type=i start=11>
Tôi thứ 11! Tôi thứ 12! Tôi thứ 13! Tôi thứ 14! Tôi thứ 15!	Tôi thứ 11! Tôi thứ 12! Tôi thứ 13! Tôi thứ 14! Tôi thứ 15!	Tôi thứ 11! Tôi thứ 12! Tôi thứ 13! Tôi thứ 14! Tôi thứ 15!	Tôi thứ 11! Tôi thứ 12! Tôi thứ 13! Tôi thứ 14! Tôi thứ 15!	Tôi thứ 11! Tôi thứ 12! Tôi thứ 13! Tôi thứ 14! Tôi thứ 15!

Và cuối cùng bạn có thể thay đổi thứ tự số bên trong một danh sách bằng cách thêm thuộc tính value=z vào tag <li>. Hãy xem ví dụ sau:

HTML	Nó xem Như thế nào
<ol type=A start=5><i> Important Cheese Laws</i><br> <li>Cheese Curing Act of 1905 <li>Milk Content Ruling of 1923 <p> <li value=12>Cheese Import Tariff of 1942 <li>Cheese Freshness Codes of 1942 <p> <li value=1>Cheese Values Act of 1789	Important Cheese Laws Cheese Curing Act of 1905 Milk Content Ruling of 1923 Cheese Import Tarif of 1942 Cheese Freshness Codes of 1942 Cheese Values Act of 1789

Không thể nói rõ lắm (nhất là trong ví dụ này) khi nào bạn có thể cần phải sử dụng các tag này - chỉ cần nhớ rằng bạn có khả năng làm điều đó khi viết trang web của bạn. Chúng ta sẽ minh họa thêm một lần nữa trong trang Research Projects (tập tin proj.htm). Nếu bạn nhớ lại trong bài về bảng chúng ta đã chia danh sách không có thứ tự của những site cần tham khảo thành hai cột. Hãy đổi nó thành một danh sách có thứ tự và sử dụng thuộc tính type để liệt kê chúng, sử dụng chữ thường để đánh số thứ tự. Vì thật sự chúng ta có đến hai danh sách, hãy xem cách tại sao chúng ta quyết định sử dụng thuộc tính start.

1. Mở tập tin proj.htm trong trình soạn thảo.
2. Hãy tìm bảng chúng ta đã tạo dưới phần References. Thay đổi cả hai tag <ul> và </ul> thành tag <ol type=a> và </ol>
3. Bây giờ chúng ta đã có 5 mục trong danh sách thứ nhất, vì thế chúng ta muốn danh sách thứ 2 bắt đầu đánh số từ 6. Sửa đổi tag <ol> thành:

     <ol type=a start=6>

4. Lưu trữ và Nạp lại trong browser của bạn. So sánh trang của bạn với trang mẫu để xem danh sách của bạn nên xuất hiện như thế nào. Cột các mục đầu tiên được đánh thứ tự từ "a" đến "e" còn cột thứ hai từ "f" đến "k"

Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào. Nếu trang của bạn khác với mẫu, kiểm tra lại các văn bản bạn đã đánh trong trình soạn thảo.

Xem lại

Xem lại những chủ đề sau :

1. Làm thế nào bỏ được hộp liên kết bao quanh một hình ảnh khi hình ảnh này là một siêu liên kết?
2. Làm thế nào thay đổi dấu bullet cho một danh sách không có thứ tự ?
3. Browser có sử dụng cùng một dấu bullet cho tất cả các danh sách không? Nếu không, làm thế nào để đổi dấu bullet cho các danh sách con?
4. Bạn có thể tạo một danh sách mà mỗi mục được đánh thứ tự bằng một số La mã không?

Thực tập tự do

Hãy tạo kinh nghiệm với các kiểu dấu bullet và đánh số thứ tự khác nhau cho danh sách trong trang web riêng của bạn. Bạn có nghĩ ra vài cách cố định cho các tính chất này không? Bạn có thể tạo ra cách trình bày phức tạp như dạng trình bày "chuẩn" không? Mọi điều về tag

<ol>...</ol>

bây giờ trở nên khá phức tạp!

---

Đến phần tiếp theo....

Click và đến các phần được liên kết khác nhau trong cùng một hình ảnh...