Bài 9: Hình ảnh trong HTML

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:

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ở.
“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, GIFJPEG 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 JPEGGIF: 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.
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:

Ví dụ 3:

Thứ hai, hình ảnh cũng có thể được dùng để liên kết
Ví dụ 4:

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=”https://kienthuc360.vn/wp-content/images/logo.jpg” alt=”Logo Kiến thức 360″ />
Ở 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.
Ví dụ 6:

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ữ  “Chia sẻ kiến thức” 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:

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.
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 heightwidth 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 widthheight giú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.

Xem tiếp bài trong khóa học<< Bài 8: Phần tử a trong HTMLBài 10: Bảng (Table) trong HTML >>

HƯỚNG DẪN DOWNLOAD TẠI KIENTHUC360.VN
QUY ĐỊNH BÌNH LUẬN
1. Vui lòng viết tiếng Việt có dấu
2. Ngôn từ bình luận có văn hóa, văn minh, lịch sự
3. không dùng lời lẽ thô tục, xúc phạm thành viên khác
4. Đang xài hàng free, vui lòng đừng bàn đến chuyện virus; nếu bạn đảm bảo bạn đang xài windows bản quyền 100% thì vui lòng vào trang khác bình luận về virus
5. Các link rút gọn chỉ nhằm mục đích duy trì website, nếu không hiểu về công nghệ hay đơn giản là link rút gọn, mời bạn vào trang web khác không có link rút gọn
6. Những tài liệu và nội dung được chia sẻ hoàn toàn free và chỉ vì đam mê, nếu bạn có cùng đam mê chia sẻ với mọi người những gì mình có, xin liên hệ, chúng ta cùng chia sẻ, email: contact@kienthuc360.vn