Trang chủ
Hình ảnh Inline
Toán học trong WWW là:
Text + Pictures = Multimedia
Multimedia + WWW = Global HyperMedia
Bạn có đồng ý không?Mục đích
Sau bài học này, bạn sẽ có thể:- Đặt một hình ảnh vào trong tài liệu HTML của bạn.
- Chọn lựa cách xắp sếp hình ảnh với văn bản bao quanh.
- Sửa đổi tag chèn hình ảnh để phục vụ cho người sử dụng dùng browser không có hình ảnh.
- Chỉ định chiều của hình ảnh.
Bài học
Chúng ta hãy nhìn xem làm thế nào để thêm các hình ảnh giống như "chữ M lớn" vào trong một trang web ...Tag HTML cho Inline Graphics
Một hình ảnh "inline" được xuất hiện bên trong văn bản của trang web, giống như
hình "chữ M lớn" này.
Dạng HTML cho tag hình ảnh inline là:
<img src="filename.gif">
trong đó filename.gif là tên của một tập tin GIF để ở cùng directory/folder
với tài liệu HTML. Từ "inline" có nghĩa là web browser sẽ hiển thị hình ảnh ngay trong
văn bản.
Hãy chú ý các văn bản theo ngay sau "chữ M lớn" ở trên. Nếu chúng ta muốn "chữ M lớn" ở riêng trên một dòng thì sao? Để một hình ảnh xuất hiện trên một dòng riêng biệt,
chỉ cần thêm một tag paragraph trước và sau tag image:
<p> <img src="filename.gif"> <p>
Sự sắp xếp trong hàng của văn bản và Inline Graphics
Tag <img...> có thể thêm thuộc tính để điều khiển vị trí của văn bản so với hình ảnh trong hàng. Thuộc tính align được thêm vào trong tag <img....> có thể đem lại những hiệu quả sau:1. align=top
<img align=top src="filename.gif">
2. align=middle
<img align=middle src="filename.gif">
3. align=bottom (mặc định)
<img align=bottom src="filename.gif">
Chú ý cách sắp xếp văn bản trên mỗi dòng...(có thể thu hẹp hay mở rộng bề rộng của cửa sổ browser WWW để xem rõ sự thay đổi). Với HTML 2.0, bạn không thể có những khối văn bản ngay bên cạnh hình ảnh. Trong những bài học sau, chúng ta sẽ xem cách tạo ra những hiệu quả đó.
Đặt một hình ảnh vào trong tài liệu HTML của bạn
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 ngay bây giờ. Bạn cũng cần có hình GIF từ Trung tâm Download Hình ảnh Bài 7. Trong bài tập này, bạn sẽ thêm hình ảnh giới thiệu núi lửa trong trang web của bạn.- Mở lại workspace của bạn (nếu nó chưa được mở).
- Mở lại tài liệu volc.htm trong trình soạn thảo văn bản.
- Bên trên mục <h1>Volcano Web</h1> đánh vào:
<img src="lava.gif">Dạng HTML này sẽ thêm trên đỉnh trang web của bạn hình ảnh dung nham mà bạn đã download trong bài trước. - Lưu trữ và reload trong web browser của bạn.
Thuộc tính alt="..."
Nếu trang web của bạn sẽ được xem bởi một người sử dụng browser dạng văn bản (text-only browser, ví dụ như lynx), họ sẽ không có khả năng để xem bất kỳ những hình ảnh inline nào. Hoặc đôi khi người sử dụng tắt đi việc trình bày hình ảnh inline để tiết kiệm thời gian download qua các kết nối mạng chậm. Một thuộc tính của tag <img...> cho phép thay vào vị trí của hình ảnh bằng một chuổi văn bản mô tả nó.Bình thường khi gặp trường hợp này, một người sử dụng text-browser sẽ thấy một vị trí giữ chỗ (place holder) để phần đầu trang web của chúng ta trông giống như sau:
[IMAGE]
Volcano Web
In this lesson you will use the Internet to research information
on volcanoes and then write a report on your results.
-----------------------------------------------------------------
In this Lesson...
Cách trình bày này giúp người sử dụng biết rằng có một hình ảnh được chen vào đầu
của trang này. Bạn có thể sửa đổi tag <img> để thay vì trình bày một vị trí giữ chỗ
như trên, browser
sẽ hiển thị một dòng văn bản. Lấy ví dụ trong bài của chúng ta, chúng ta có
thể thêm "A lesson on:" bằng cách điều chỉnh lại tag <img...> như sau: <img alt="A Lesson on:" src="lava.gif">
Thuộc tính alt="..." thay vị trí giữ chỗ bằng một dòng văn bản để cho một
text-browser (hay khi tắt việc hiển thị hình ảnh), bài của chúng ta sẽ xuất hiện
như sau:A Lesson On
Volcano Web
In this lesson you will use the Internet to research information
on volcanoes and then write a report on your results.
-----------------------------------------------------------------
In this Lesson...
Bây giờ hãy điều chỉnh tương tự như trên vào trang HTML của bạn cho tag <img> có hình núi lửa.
Thuộc tính chiều cao và chiều rộng
Một khả năng khác mà bạn có thể muốn thêm vào tag <img...> là hai thuộc tính để xác định kích cở hình ảnh tính bằng số điểm (pixel). Tại sao vậy? Thông thường web browser của bạn phải tự xác định những kích cở này khi nó đọc hình ảnh; việc nạp trang của bạn có thể nhanh hơn nếu bạn chỉ định những thông số này trong HTML.Dạng để thêm những thông số này là:
<img src="filename.gif" width=X height=Y >
trong đó X là chiều rộng và Y là chiều cao của hình ảnh tính theo điểm. Bạn có thể sử dụng nhiều chương trình tiện ích để xác định những giá trị số này. Một cách khác để tìm những kích cở của hình ảnh là nạp nó vào trong browser của bạn (bạn có thể sử dụng chức năng kéo và thả - drag and drop - biểu tượng của hình ảnh vào trong browser của bạn), khi đó chiều cao và chiều rộng sẽ được hiển thị trên thanh tiêu đề của browser.
Với ví dụ của chúng ta trong bài học này, hình lava.gif có 300 điểm chiều rộng và 259 điểm chiều cao. Vì vậy bạn nên điều chỉnh trong tập tin volc.htm thành:
<img alt="A Lesson on:" src="lava.gif" width=300 height=259>
Chú ý: Thứ tự các thuộc tính trong tag <img> không quan trọng.Thông thường chúng ta sẽ tự hỏi có thể thay đổi những kích cở của hình ảnh bằng cách đưa vào những số khác với kích cở thật của hình ảnh không. Câu trả lời là được nhưng kết quả nhận được thì không thể biết trước. Nếu bạn cho những số lớn hơn (để làm cho hình lớn hơn) kết quả là một hình có các "khối màu" ("blocky" picture). Nếu bạn cho những số bé hơn (để làm cho hình nhỏ hơn) kết quả có thể làm biến dạng hình ảnh. Bạn có thể tự làm thử để có kinh nghiệm. Với chúng tôi, đó là một sự sai lầm!
Kiểm tra lại công việc của bạn
Bạn có thể so sánh công việc của bạn với ví dụ mẫu để biết tài liệu này 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, kiểm tra lại xem bạn đã đánh vào dạng hình ảnh trong trình soạn thảo như thế nào. Hãy chắc chắn rằng bạn đã đánh vào theo sự hướng dẫn trong phần Đặt một hình ảnh vào trong tài liệu HTML của bạn của bài này.Nếu bạn thấy một biểu tượng hình như sau:
Chú ý: Một số hệ thống máy tính (UNIX) có phân biệt dạng chữ hoa và chữ thường (case sensitive) trong tên tập tin, điều này có nghĩa rằng tập tin "lava.GIF" KHÔNG phải là "lava.gif". Một số máy tính khác (Macintosh) lại xem chúng là cùng một tập tin. Ngay cả khi máy tính của bạn không có sự khác biệt như vậy, chúng tôi vẫn đề nghị bạn nên xét lại dạng chữ trong cách đặt tên tập tin và các tham khảo chúng trong HTML của bạn. (Nhiều WWW servers ở trên UNIX).
Xem lại
- Dạng HTML cho một hình ảnh inline là gì?
- Tag nào bạn phải thêm vào trước một tag hình ảnh để nó xuất hiện trên một dòng riêng?
- Làm thế nào để thêm hình ảnh núi lửa vào tài liệu của bạn?
- Thuộc tính alt="...." làm gì? Thuộc tính height="...." là gì?
