Bài 9: Hình ảnh – image
Thêm hình ảnh vào trang HTML là một phần không thể thiếu trong công việc một thiết kế web, bạn sẽ làm điều đó bằng cách nào
Những điều bạn cần biết
Thêm hình ảnh tương đối khá dễ dàng với đoạn code cơ bản như sau:
Ví dụ 1:
- <img src="web-page-design.jpg" alt="David" />
Bạn sẽ thấy như hình ảnh tên trình duyệt như bên dưới:
Tất cả những gì bạn cần làm đầu tiên đó là khai báo với trình duyệt bạn muốn thêm một hình ảnh
img và sau đó là nguồn hình ảnh từ đâu src (viết tắt của “source” = nguồn).
Chú ý phần tử
img là một phần tử đơn vì nó chỉ có một thẻ bao gồm cả đóng và mở. Tương tự như thẻ
“web-page-design.jpg” là tên của tập tin hình ảnh bạn muốn thêm vào trang. “.jpg” là loại ảnh. Cũng giống như phần mở rộng “.htm” cho biết đó là một tập tin HTML, “.jpg” khai báo cho trình duyệt biết đây là một loại hình ảnh. Có 3 định dạng hình ảnh thông dụng bạn có thể chèn vào trang Web:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF là loại hình ảnh thường được sử dụng tốt nhất đối với các hình đồ họa và hình vẽ, trong khi đó JPEG thường được dùng trong thể loại hình ảnh chụp. Đây là hai lý do: Thứ nhất, GIF cho hình ảnh chứa tất cả chỉ có 256 màu, còn JPEG gồm có hàng triệu màu. Thứ hai, định dạng GIF tốt nhất khi nén các hình ảnh đơn giản, định dạng JPEG tối ưu cho các hình ảnh phức tạp hơn. Càng nén tốt hơn, kích thước tập tin sẽ nhỏ hơn, trang của bạn sẽ được tải nhanh hơn. Cũng như bạn có thể đã biết, những trang tải lâu với những lý do không chính đáng sẽ làm cho người xem khó chịu và bỏ qua.
Theo truyền thống, GIF và JPEG là hài định dạng chủ yếu tên các trang web, nhưng sau này, định dạng PNG đã trở nên thông dụng hơn (chủ yếu thay thế định dạng GIF). Định dạng PNG là loại ảnh tổng hợp những phẩm chất tốt nhất của cả hai loại JPEG và GIF: chứa hàng triệu màu và nén hiệu quả.
Tôi có thể lấy hình ảnh từ đâu?
Để tự tạo ra các hình ảnh, bạn cần các chương trình biên soạn hình ảnh. Một chương trình biên soạn hình ảnh là một phần thiết yếu trong công việc thiết kế website.
Thật không may, không có những chương trình biên soạn hình ảnh thật sự tốt có sẵn trong Windows hoặc các hệ điều hành khác. Vì thế, bạn có thể phải cái đặt thêm một số chương trình chuyên nghiệp như Photoshop, Macromedia Fireworks hoặc Paintshop Pro, đây cũng là 3 chương trình tốt nhất mà bạn nên quan tâm.
Tuy nhiên trong quá trình học HTML, bạn không nhất thiết phải có những chương trình này, bạn có thể tận dụng một số hình ảnh sẵn có hoặc tìm kiếm tại images.google.com bằng cách
- Nhấp chuột phải trên hình ảnh bạn tìm thấy trên Internet.
- Chọn “Save picture as…” ở menu xuất hiện.
- Chọn nơi lưu trữ hình ảnh trên máy tính và nhấp vào “Save”.
Hãy cẩn thận, nếu hình ảnh chỉ dùng để phục vụ việc học bạn không cần phải lo lắng, nhưng khi sử dụng cho các website chính thức sau này, bạn nên lưu ý về việc bản quyền, để tránh rắc rối với google, họ sẽ có quyền loại bỏ địa chỉ Web của bạn trên kết quả tìm kiếm nếu hình ảnh đó bị chủ sở hữu tố cáo xâm phạm.
Đó có phải là tất cả những điều tôi cần biết về hình ảnh?
Còn vài điều bạn cũng cần nên biết thêm về hình ảnh.
Đầu tiên, bạn có thể thêm hình ảnh từ các thư mục con hoặc thậm chí từ website khác:
Ví dụ 2:
- <img src="images/logo.png" />
Ví dụ 3:
- <img src="http://www.google.com.vn/images/srpr/logo11w.png" />
Thứ hai, hình ảnh cũng có thể được dùng để liên kết
Example 4:
- <a href="http://thietke.website"><img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" /></a>
Bạn sẽ thấy trình duyệt như sau (hãy thử nhấp chuột vào hình ảnh):
Có những thuộc tính hình ảnh nên cần nhớ?
Bạn luôn cần sử dụng thuộc tính
src, để khai báo đường dẫn đến nguồn tập tin ảnh. Bên cạnh đó, còn nhiều thuộc tính khác rất hữu dụng khi cần chèn hình ảnh.
Thuộc tính
alt là mô tả về hình ảnh. Trong một vài trường hợp, vì một lý do nào đó nếu hình ảnh không được tải lên, thì phần chữ mô tả về hình ảnh sẽ xuất hiện thay thế vị trí hình ảnh.
Ví dụ 5:
- <img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" alt="Logo thietke.website" />
Ở một số trình duyệt, đoạn chữ của thuộc tính
alt sẽ xuất hiện trong một hộp nổi khi bạn đặt con trỏ lên hình ảnh. Xin nhớ rằng alt là cách thay thế để mô tả thông tin về hình ảnh. Thuộc tính alt không nên được sử dụng để chèn các thông điệp đặc biệt nào đó để nói về hình ảnh, vì đối với người khiếm thị, họ sẽ nghe thông điệp này mà không thể nhìn thấy hình ảnh.
Thuộc tính
title dùng để thêm thông tin vào hình ảnh:
Example 6:
- <img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" title="Tự học thiết kế website" />
Bạn sẽ thấy trên trình duyệt như hình ảnh bên dưới:
Nếu bạn chỉ để con trỏ lên hình ảnh trên mà không nhấp chuột, bạn sẽ thấy dòng chữ “Tự học thiết kế website” xuất hiện trong một chiếc hộp nhỏ nhảy lên.
Hai thuộc tính quan trọng khác mà bạn không thể bỏ qua đó là
width và height:
Ví dụ 7:
- <img src="http://thietke.website/wp-content/uploads/2014/11/web-page-design-288x300.png" width="288px" height="300px" />
Bạn sẽ thấy như dưới đây trên trình duyệt
Chiều ngang
width và chiều cao height là hai thuộc tính xác định kích thước của ảnh, đơn vị được tính làpixel. Pixel là đơn vị đo lường được sử dụng để tính độ phân giải của màn hình (Các màn hình trước đây thường có độ phân giải 1024×768 pixel) . Không giống như centimetres, pixel là đơn vị đo lường có giá trị tương đối, nó dựa vào độ phân giải của màn hình. Đối với màn hình có độ phân giải cao, 25 pixel có thể tương đương 1 centimetre, nhưng nó chỉ khoảng 1.5 centimetre ở màn hình có độ phân giải thấp.
Nếu bạn không khai báo chiều cao và chiều ngang, trình duyệt sẽ trình bày hình ảnh với kích thước thật của nó, tuy nhiên nếu sử dụng height và width bạn có thể khống chế kích thước hình ảnh theo ý muốn.
Example 8:
- <img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" width="32px" height="32px" />
đoạn code trên sẽ cho hình ảnh như bên dưới ở trình duyệt:
Tuy nhiên, bạn nên ghi nhớ rằng, kích thước thật được tính bằng kilobytes sẽ không thay đổi và nó sẽ vẫn tốn cùng một thời gian tải cho dù bạn có khai báo kích thước nhỏ hơn theo đơn vị pixel của màn hình. Do đó việc giảm tải kích thước bằng
height và width là không có tác dụng, thay vì đó, bạn nên giảm kích thước hình ảnh bằng các chương trình soạn thảo hình ảnh. Mặc khác, việc định kích thước hình ảnh bằng width và heightgiúp bạn tính toán những khoảng không gian cần thiết trên trang để trình bày, thiết kế web được đẹp hơn.Ý kiến của bạn
-----------------------------------------------------------------------------------------------------------------
- Bài 1: Nhập môn
Tìm hiểu những công cụ cần thiết khi làm web. - Bài 2: HTML là gì?
Tìm hiểu về HTML - Bài 3: Phần tử và thẻ – Elements and tags?
Phần tử và thẻ – làm thế nào để sử dụng chúng - Bài 4: Tạo trang web
Bài học cách tạo ra trang HTML đầu tiên – trang mẫu để tạo ra các trang khác sau này - Bài 5: Bạn đã được học những gì?
Ôn tập những gì đã học và xem trước các bài kế tiếp - Bài 6: Thêm một vài phần tử
Làm quen với 6 phần tử HTML thường được sử dụng - Bài 7: Thuộc tính
Học cách thêm những thông tin vào thẻ và x6y dựng câu lệnh chính xác hơn - Bài 8: Liên kết
Khám phá các liên kết các trang web của bạn và các trang ở web khác trên internet. - Bài 9: Hình ảnh
Khám phá việc chèn ảnh vào trang web. - Bài 10: Tạo bảng – Tables
Cấu trúc bảng để dàn trang web. - Bài 11: Tìm hiểu thêm về bảng – table
Học nâng cao cấu trúc bảng – table - Bài 12: Dàn trang (CSS)
Tìm hiểu làm thế nào Cascading Style Sheets (CSS) có thể giúp dàn trang thú vị hơn. - Bài 13: Đưa trang web lên internet
Khám phá làm cách nào để đưa trang web lên internet để ai cũng có thể xem - Bài 14: Những tiêu chuẩn cho Web và xác nhận
Học các tiêu chuẩn HTML thông dụng và cách kiểm tra code có được viêt đúng không - Bài 15: Những lời khuyên sau cùng
Một vài lời khuyên bổ ích cho những dự án về web của bạn
