Lessons X : Hình ảnh Inline

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

is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State…


2. align=middle

<img align=middle src="filename.gif">

is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State…


3. align=bottom (mặc định)

<img align=bottom src="filename.gif">

is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State…

 


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.

  1. Mở lại workspace của bạn (nếu nó chưa được mở).
  2. Mở lại tài liệu volc.htm trong trình soạn thảo văn bản.
  3. 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.

  4. Lưu trữ và reload trong web browser của bạn.

Trong việc đặt hình ảnh, bạn có thể tự hỏi tại sao chúng ta không cần đặt một tag <p> sau hình ảnh. Ðiều này không cần thiết bởi vì văn bản theo sau nó là một tiêu đề. Một web browser luôn luôn chèn một dấu ngắt đoạn trước và sau một tag <h1,h2,h3…>.

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.htmthà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 với một dấu chấm hỏi như sau:

 

trước hết hãy kiểm tra lại xem tập tin HTML và hình ảnh GIF có cùng ở trên một folder/directory không. Sau đó, bạn cũng nên chắc chắn rằng tên tập tin bạn đánh trong tag <img... > là tương ứng với tên của tập tin GIF.

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

  1. Dạng HTML cho một hình ảnh inline là gì?
  2. 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?
  3. Làm thế nào để thêm hình ảnh núi lửa vào tài liệu của bạn?
  4. Thuộc tính alt="...." làm gì? Thuộc tính height="...." là gì?

Thực tập tự do

Thêm một hình ảnh inline vào trang web của bạn bằng cách sử dụng một hình GIF đang có trong máy của bạn hoặc một hình được download từ Internet.


Ði đến bài tiếp theo….

Tạo liên kết đến các tài liệu và tập tin khác mà bạn tạo ra giống như trên Internet.

ÐẾN…. | Mục Lục | Bài trước: “Hình ảnh” | Bài kế tiếp: “Tạo Liên kết bằng Anchors” |

 


Soạn thảo HTML bài 7a: Hình ảnh Inline

?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/tut7a.html

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: