| BÀI HỌC

Sau khi học các bài trước chắc bạn vẫn còn thắc mắc, sao trang Web của mình xấu tệ, không giống các trang trên Internet mà bạn đã từng xem qua. Bình tĩnh đi bạn ạ, Sau khi học bài này, bạn sẽ có thể đưa hình ảnh vào trang Web của mình và bạn sẽ cảm thấy trang Web của mình cũng thật hấp dẫn.

Để đặt một hình ảnh vào trong trang Web của mình bạn dùng Tag <IMG>.

Trong đó "Tên ảnh" là tên của một file ảnh ở cùng folder với file HTML của bạn.

Ví dụ: Để chèn một ảnh có tên là anh1.jpg trong nằm cùng thư mục của file html của bạn, ta làm như sau:

Nếu file ảnh không nằm cùng thư mục với file html thì bạn thêm đường dẫn vào phía trước tên file ảnh. Ví dụ ảnh anh2.jpg nằm trong thư mục con images:

Ngoài ra bạn có thể chỉ đường dẫn tuyệt đối từ một website khác, chẳn hạn hình ảnh này là logo của Google lấy từ website của Google.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Done

Tag <IMG...> còn có thể có thêm các thuộc tính để hiển thị văn bản so với hình ảnh. Thuộc tính ALIGN với các giá trị khác nhau (Left|Right|Top|Middle|Bottom) sẽ cho ta các hiệu ứng như sau.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Tag IMG với thuộc tính Top Tag IMG với thuộc tính Middle Tag IMG với thuộc tính Bottom
	Done

| THỰC HÀNH

Trước khi đưa hình ảnh vào trong trang Web của bạn mời bạn download một số hình ảnh để làm ví dụ (Right-click vào các hình ảnh trong trang Web nào đó và chọn Save picture as...).

1. Tạo một file HTML mới và sử dụng các Tag để thêm ảnh vào trong trang Web

2. Thử thêm các thuộc tính ALIGN = vào trong Tag IMG và so sánh với kết quả của bài học

Thực tập trực tuyến

Để nắm vững kiến thức đã học ở phần đầu bài học này, bạn nên bắt tay vào thực hành. Để tiện việc thực tập, bạn hãy click vào liên kết sau để mở trang Thực tập trực tuyến.

| HỌC THÊM MỘT SỐ THUỘC TÍNH CỦA THẺ IMG

Thuộc tính BORDER=x

Xác định độ dầy của đường khung bao quanh ảnh, tính bằng số pixel. Nếu thiết lập giá trị bằng 0 thì ảnh sẽ không có đường bao. Thử xem và so sánh 3 ví dụ sau:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Done

Thuộc tính ALT=""

Khi trang Web của bạn được xem bằng trình duyệt mà người sử dụng tắt việc trình bày hình ảnh để tiết kiệm thời gian download, hoặc khi hình ảnh chưa được download xong, thuộc tính ALT="" cho phép thay thế vào vị trí hình ảnh một chuỗi văn bản mô tả nó. Sau khi hình ảnh được download, chuỗi văn bản này sẽ hiển thị trong một box nhỏ khi đưa chuột over lên hình ảnh đó.

Ví dụ:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Done

Cụm từ Download Software đã thay thế cho hình ảnh.

Thuộc tính WIDTH=x và HEIGHT=y

Để cố định vị trí và kích thước của hình ảnh trong trang web của bạn, bạn nên đưa kích thước của ảnh (tính bằng pixel) vào Tag <IMG...>, nếu bạn không đưa thì trình duyệt tự động tính các thông số này. Cách sử dụng các thuộc tính này là:

với x, y là chiều rộng và chiều cao của ảnh.

Nếu không đưa thêm thuộc tính này vào thì trình duyệt tự động tính chúng trước khi hiển thị.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Done

Theo Tạp chí Tin học I-Today