Học HTML cơ bản -Bài 9
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ẻ
- 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ả.
- <img src="web-page-design.jpg" alt="David" />
img và sau đó là nguồn hình ảnh từ đâu src (viết tắt của “source” = nguồn).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ẻ
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):
- <img src="images/logo.png" />
- <img src="http://www.google.com.vn/images/srpr/logo11w.png" />
- <a href="http://thietke.website"><img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" /></a>
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./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.
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.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.- <img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" alt="Logo thietke.website" />
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.title dùng để thêm thông tin vào hình ảnh:- <img src="http://thietke.website/wp-content/uploads/2014/11/tkw_logo1.png" title="Tự học thiết kế website" />
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.
width và height:- <img src="http://thietke.website/wp-content/uploads/2014/11/web-page-design-288x300.png" width="288px" height="300px" />
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.- <img src="http://thietke./2014/11/tkw_logo1.png" width="32px" height="32px" />
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.Share This:
Lập trình viên
Tôi là BMT-một lập trình viên,tôi rất yêu thích công việc lập trình+ Những đoạn Code thú vị ,Tôi rất muốn trở thành một lập trình viên chuyên nghiệp Và Tôi luôn tin rằng :"Có công cày Code có ngày thành công "
No Comment to " Học HTML cơ bản -Bài 9 "