Xin chào, hôm nay chúng ta sẽ nói về hình ảnh.
Có rất nhiều thẻ trong HTML, và hầu hết trong số đó là khá tự giải thích.
Nhưng thẻ hình ảnh là một trong những nơi chúng tôi thực sự muốn khám phá nó,
để đảm bảo rằng bạn đang sử dụng nó cho mục đích tốt nhất có thể.
Vì vậy, tại thời điểm này, bạn đã nghe nói về rất nhiều thẻ khác nhau.
Nhưng hình ảnh là một trong những nơi bạn thực sự cần phải hiểu
những thuộc tính khác nhau là gì.
Có rất nhiều loại tệp khác nhau được hỗ trợ bởi HTML.
Phổ biến nhất là: JPEG, GIF và PNG, và bạn sẽ thấy những điều đó khá nhiều.
Ngoài ra còn có SVG và BMP.
Có những lựa chọn bổ sung.
Điều quan trọng nhất là bất kể loại tệp nào bạn sử dụng,
bạn cần phải bao gồm các phần mở rộng tệp khác nhau.
Đó là .jpg, .gif, .png.
Điều bổ sung cần hiểu là khi ai đó nhìn vào trang của bạn,
mọi hình ảnh mà bạn có trên trang của bạn phải được tải xuống, do đó
kích thước thực sự có thể là một yếu tố.
Nếu bạn mong đợi rằng hầu hết những người xem trang của bạn đang xem nó
từ một điện thoại di động,
bạn có thể muốn suy nghĩ về việc sử dụng kích thước tệp nhỏ hơn, bởi vì mỗi hình ảnh đơn lẻ
đòi hỏi một yêu cầu HTTP để được tải lên trình duyệt.
Vì vậy, khi chúng ta nghĩ về kích thước hình ảnh, hầu hết mọi người nghĩ
về hình ảnh nó lớn như thế nào trên màn hình.
Nhưng trong khoa học máy tính, chúng ta nói nhiều hơn về kích thước điểm ảnh.
Theo mặc định,
trình duyệt sẽ mở ra hình ảnh của bạn với cùng kích thước chính xác mà nó đã được lưu.
Và thật sự, rất hiếm khi kích thước này là tối ưu.
Bạn có thể đã đến một trang web mà bạn đã nhận
được nó và bức ảnh thực sự nhỏ và bạn không thể làm cho nó lớn hơn.
Hoặc có lẽ,
những gì tôi thấy khó chịu hơn, là khi bức ảnh chiếm toàn bộ màn hình và
bạn buộc phải di chuyển xung quanh cố gắng để xem toàn bộ mọi thứ.
Vì vậy, tôi sẽ cho bạn thấy hai giải pháp nhanh chóng để thay đổi kích thước hình ảnh.
Đầu tiên là thay đổi tập tin thực tế, và thứ hai là sử dụng các
thuộc tính chiều rộng và chiều cao cho thẻ hình ảnh.
Bây giờ, nếu bạn đang sử dụng và trình chỉnh sửa để thay đổi tập tin của mình,
điều bạn cần hiểu là các biên tập viên thay đổi những hình ảnh đó vĩnh viễn.
Điều này chỉ hoạt động trên những gì tôi gọi là các tập tin cục bộ.
Bạn chỉ có thể thay đổi hình ảnh mà bạn có trên máy tính của bạn.
Nếu bạn đang cố gắng sử dụng một hình ảnh mà bạn tìm thấy ở nơi khác trên web và
bạn đang liên kết với nó, bạn không thể thay đổi kích cỡ vĩnh viễn.
Vì vậy, nếu bạn đang sử dụng máy Mac,
có phần mềm tích hợp được gọi là Xem trước mà bạn có thể sử dụng để thay đổi kích cỡ.
Và nếu bạn đang sử dụng Windows, cũng có một chương trình tích hợp sẵn có tên là Paint.
Một trong số đó cung cấp cho bạn tùy chọn để thay đổi kích thước ảnh của bạn.
Tuy nhiên, cũng giống như một lưu ý bên, không một trong số này là sự
lựa chọn tốt nhất nếu bạn thực sự muốn nhận được vào đồ họa hình ảnh khác nhau.
Điều mà hầu hết chúng ta có xu hướng làm là sử dụng các thuộc tính.
Bây giờ, một trong những điều tôi nói đến và
mọi người nói đến là tầm quan trọng của việc giữ phong cách và nội dung riêng biệt.
Và tôi thực sự cố gắng khuyến khích mọi người không đặt bất kỳ loại
thuộc tính phong cách nào vào mã của họ.
Tuy nhiên, thẻ hình ảnh có xu hướng là một ngoại lệ,
bởi vì nó bao gồm cả một thuộc tính chiều rộng và chiều cao.
Vì vậy, hãy đi trước và đi qua, và
tôi sẽ cho bạn xem một bức ảnh của trang web khi chúng tôi kết thúc.
Tùy chọn đầu tiên sẽ chỉ là sử dụng kích thước hình ảnh mặc định.
Tôi có thẻ hình ảnh của tôi, và tôi có hai thuộc tính bắt buộc của tôi.
Nguồn, nơi bạn có thể tìm thấy hình ảnh và văn bản thay thế.
Tùy chọn tiếp theo sẽ là sử dụng chiều rộng theo pixel, vì vậy
trong trường hợp này, tôi đã thêm thuộc tính được gọi là width và tôi đã hardcoded nó.
Đó là những gì bạn gọi nó khi bạn cho nó một kích thước mà bạn muốn nó luôn luôn được.
Và tôi đã mã hóa nó đến 500 điểm ảnh.
Bạn có thể nhận thấy rằng tôi đã chỉ thiết lập chiều rộng và tôi đã không thiết lập chiều cao.
Không sao đâu.
Trình duyệt sẽ tự động tìm ra bao nhiêu nó nên điều chỉnh chiều cao để
nó vẫn tỷ lệ thuận với chiều rộng.
Tùy chọn tiếp theo là sử dụng chiều rộng và chiều cao.
Bạn làm điều này nếu bạn muốn chắc chắn rằng hình ảnh của bạn phù hợp với
một hộp có kích thước chính xác.
Điều này thực sự tốt đẹp cho việc thay đổi kích thước, nhưng nó không
phải lúc nào cũng trông như bạn mong đợi, và chúng ta sẽ thấy điều đó chỉ trong một giây.
Tùy chọn cuối cùng, có thể là lựa chọn tốt nhất của bạn, là sử dụng tỷ lệ phần trăm.
Trong trường hợp này, nếu bạn nhận thấy, tôi có chiều rộng = 50%.
Điều này có nghĩa là, chụp ảnh sẽ lớn như thế nào, và
giảm 50%.
Bây giờ, khi chúng ta tiếp tục vào lập trình và CSS, bạn sẽ hiểu rằng đó là 50%
của những gì nó nên được, không nhất thiết có nghĩa là kích thước hình ảnh ban đầu.
Nó phụ thuộc vào nếu bạn đang ở bên trong một container.
Vì vậy, ở đây tôi đã có mỗi tùy chọn, mặc định, chiều rộng, chiều rộng và
chiều cao, và tỷ lệ phần trăm.
Vì vậy, chúng ta hãy tiếp tục và xem nó trông như thế nào.
Vì vậy, những gì bạn có thể thấy ở đây là bốn lựa chọn khác nhau mà tôi đã có để
hiển thị hình ảnh của mình.
Ở trên cùng, tôi có kích thước hình ảnh mặc định của mình.
Chuyện này xảy ra là bức ảnh lớn như thế nào khi tôi chụp nó.
Một kích thước nhỏ, và
bạn có thể thấy đây là nơi tôi đã mã hóa cứng chiều rộng của hình ảnh.
Tôi đặt chiều rộng thành 500 pixel.
Ngôi nhà của tôi vẫn trông hoàn toàn đẹp, và mọi thứ đều tỉ lệ thuận.
Tùy chọn thứ ba là hình ảnh bị lệch.
Đây là nơi tôi mã hóa cứng cả chiều cao và chiều rộng, và
tôi đã không thực sự suy nghĩ về cách chúng sẽ hành động theo tỷ lệ.
Vì vậy, bằng cách làm điều này bạn có thể thấy nó bị đè bẹp,
chứ không phải là bức tranh đẹp nhất.
Cái cuối cùng này là cái tôi thiết lập theo tỷ lệ, và
bạn có thể thấy rằng đó là khoảng một nửa kích thước của cửa sổ trình duyệt.
Những gì tôi muốn bạn nhìn vào bây giờ là những gì sẽ xảy ra khi tôi thay đổi kích thước cửa sổ.
Vì vậy, khi tôi đến đây, bạn có thể thấy rằng ba bức ảnh đầu tiên giữ
nguyên kích thước, nhưng bức ảnh dưới cùng sẽ thực sự phát triển hoặc co lại.
Và điều này cũng giống nhau nếu tôi làm cho nó nhỏ hơn và tải lại trang.
Vì vậy, suy nghĩ về những thứ khác nhau dọc theo dòng này là cách bạn muốn trang của bạn
nhìn khi mọi người có thể nhìn vào màn hình lớn hoặc trên màn hình di động.
Đó là điều mà anh muốn suy nghĩ.
Điều cuối cùng tôi muốn chỉ ra với các bạn, rằng tôi sẽ nói chỉ trong
một giây, là bức tranh nhỏ bé này
thật không may, rất khó để nhìn thấy và không có cách nào tốt để tôi thổi nó lên.
Nhưng tôi muốn nói chuyện với các bạn về việc thêm hình ảnh vào thanh tiêu đề.
Vì vậy, nếu bạn muốn đặt một favicon vào tiêu đề của trang web của bạn,
nó hơi khác sau đó sử dụng một hình ảnh thông thường.
Thay vào đó, mã này phải đi vào phần đầu của mã của bạn, không phải cơ thể.
Những gì bạn làm là bạn sẽ thực sự đi vào và
bạn sẽ bao gồm một liên kết cho biết đó là một loại biểu tượng của liên kết.
Chúng tôi đang sử dụng một hình ảnh PNG.
Và sau đó bạn đặt liên kết đến hình ảnh chính nó.
Cũng giống như một lưu ý bên, bạn không thể sử dụng JPEG hoặc GIF cho logo.
Nó cần phải là một hình ảnh biểu tượng đặc biệt hoặc một .png.
Cuối cùng, chúng ta hãy quay lại nói về văn bản thay thế,
thuộc tính mà bạn muốn thêm vào tất cả các hình ảnh của bạn.
Mục đích của việc này là gì, và tại sao nó là một cái gì đó chúng ta cần?
Vâng, những gì nó làm là nó cung cấp một thay thế văn bản cho nội dung phi văn bản.
Vì vậy, bất cứ khi nào bạn có một hình ảnh, bạn muốn chắc chắn
rằng những người không thể nhìn thấy hình ảnh vẫn có thể hiểu được nội dung đằng sau nó.
Vì vậy, nó có thể được đọc bởi trình đọc màn hình.
Đôi khi nó được hiển thị thay cho hình ảnh, vì vậy nếu tệp của bạn bị hỏng,
bạn vẫn có thể thấy một ghi chú nhỏ cho biết những gì họ được cho là đang nhìn thấy.
Cuối cùng, nó cũng cung cấp ý nghĩa ngữ nghĩa cho các công cụ tìm kiếm.
Vì vậy, nếu bạn đặt văn bản thay thế thực sự tốt vào trang của bạn,
nó sẽ giúp các công cụ tìm kiếm nhận ra nội dung của trang của bạn là gì.
Vậy làm thế nào để chúng ta tạo ra văn bản alt tốt?
Thực sự có bốn thứ anh muốn tìm ngay từ con dơi.
Bạn muốn được cực kỳ chính xác.
Anh muốn được gọn gàng.
Chúng tôi không muốn dư thừa.
Và chúng tôi không muốn bao gồm các tiêu đề như hình ảnh của hoặc đồ họa của.
Vì vậy, cái đầu tiên, phải chính xác.
Nó khá tự giải thích.
Chỉ đặt những thứ xác định cụ thể hình ảnh mà bạn đang nhìn vào. Nói
ngắn gọn, điều đó có nghĩa là đừng tiếp tục và tiếp tục.
Thực sự, nó được cho là một loại ý tưởng nhanh chóng về những gì bức tranh nói về.
Khi chúng ta nói về không được dư thừa, những gì chúng tôi đang nói là,
không bao gồm văn bản thay thế đã có trong nội dung của trang.
Nếu bạn có hình ảnh, và trong một đoạn văn bên dưới nó,
bạn mô tả nó một cách chi tiết, đừng đặt nội dung đó vào văn bản thay thế.
Và cuối cùng, một trong những không bao gồm hình ảnh của,
đồ họa của, mà thực sự chỉ quay trở lại với chỉ là ngắn gọn.
Đôi khi bạn có thể để trống văn bản thay thế của bạn.
Vì vậy, nếu bạn có hình ảnh mà chỉ là trang trí, logo, những thứ dọc theo dòng đó,
bạn có thể đi trước và chỉ cần đặt alt bằng và sau đó là dấu ngoặc kép.
Nhưng điều rất quan trọng là bạn không bỏ qua các thuộc tính alt tất cả cùng nhau.
Vấn đề khi đi tuyến đường đó, là bạn không thực sự cho mọi người biết liệu
bạn có đang nghĩ đến khả năng tiếp cận hay không.
Họ không biết nếu văn bản thay thế bị thiếu bởi vì nó không có thông tin hoặc
vì bạn chỉ quên đặt nó vào.
Được rồi, chúng ta hãy đi xem lại một số điều chúng ta biết về hình ảnh.
Một, phần mở rộng tập tin là vô cùng quan trọng.
Bạn cần đảm bảo rằng chúng khớp với định dạng tệp.
Tên tập tin cho hình ảnh của bạn là một cái gì đó mà bạn sẽ muốn
giữ rất ngắn và mô tả để bạn có thể tránh sử dụng lỗi chính tả.
Và cuối cùng là các đường dẫn tập tin, hoặc nơi mà toàn bộ điều dài
mà bạn đặt trong nguồn nơi bạn có hình ảnh/hình ảnh/mở rộng.
Anh cũng muốn chắc chắn rằng anh cũng đánh vần đúng.
Nếu bạn có thể thực hiện ba việc này, nó sẽ giúp
bạn sử dụng thành công hình ảnh dễ dàng hơn.
Và ngay bây giờ, chúng ta hãy đi trước và chỉ cần phong cách chiều cao và
chiều rộng ngay trong mã HTML chính nó.
Mặc dù tôi thường nói về việc tách nội dung ra khỏi phong cách, nhưng
thực tế rất phổ biến là tiếp tục và kết hợp hai nội dung đó khi bạn đang chụp ảnh.