Bài 7b: Chèn hình ảnh trong trang web

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

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


2. align=middle


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


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:

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">
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:


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:


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

(C) TTDT DHBK TPHCM

->Read More...