Nhìn vào bất kỳ trang web nào và bạn sẽ thấy sự kết hợp giữa nội dung văn bản và hình ảnh. Cả hai yếu tố này là thành phần thiết yếu trong sự thành công của một trang web. Nội dung văn bản là những gì khách truy cập trang web sẽ đọc và những công cụ tìm kiếm nào sẽ sử dụng như một phần của thuật toán xếp hạng của họ. Hình ảnh sẽ thêm sở thích trực quan vào trang web và giúp làm nổi bật nội dung văn bản.
Thêm văn bản và hình ảnh vào trang web thật dễ dàng. Văn bản được thêm vào với các thẻ HTML chuẩn như đoạn văn, tiêu đề và danh sách, trong khi hình ảnh được đặt trên một trang có phần tử . Tuy nhiên, khi bạn đã thêm hình ảnh vào trang web của mình, bạn có thể muốn dòng văn bản bên cạnh hình ảnh thay vì căn chỉnh bên dưới hình ảnh (cách mặc định là hình ảnh được thêm vào mã HTML sẽ hiển thị trong trình duyệt). Về mặt kỹ thuật, có hai cách bạn có thể đạt được giao diện này, bằng cách sử dụng CSS (được khuyến nghị) hoặc bằng cách thêm trực tiếp hướng dẫn trực quan vào HTML (không được khuyến nghị, vì bạn muốn duy trì tách kiểu và cấu trúc cho trang web của mình).
Sử dụng CSS
Cách chính xác để thay đổi cách bố cục văn bản và hình ảnh của trang và cách kiểu hình ảnh của chúng xuất hiện trong trình duyệt bằng CSS . Chỉ cần nhớ, vì chúng ta đang nói về một sự thay đổi trực quan trên trang (tạo dòng văn bản xung quanh một hình ảnh), điều này có nghĩa nó là miền của Cascading Style Sheets.
- Đầu tiên, thêm hình ảnh của bạn vào trang web của bạn. Hãy nhớ loại trừ mọi đặc điểm hình ảnh (như giá trị chiều rộng và chiều cao) khỏi HTML đó. Điều này rất quan trọng, đặc biệt đối với trang web đáp ứng nơi kích thước hình ảnh sẽ thay đổi dựa trên trình duyệt. Một số phần mềm, như Adobe Dreamweaver, sẽ thêm thông tin chiều rộng và chiều cao cho hình ảnh được chèn bằng công cụ đó, vì vậy hãy chắc chắn xóa thông tin này khỏi mã HTML! Tuy nhiên, hãy đảm bảo bao gồm văn bản thay thế thích hợp . Dưới đây là ví dụ về cách mã HTML của bạn có thể trông như thế nào:
-
- Đối với mục đích tạo kiểu, bạn cũng có thể thêm lớp vào hình ảnh. Giá trị lớp này là những gì chúng tôi sẽ sử dụng trong tệp CSS của chúng tôi. Lưu ý rằng giá trị chúng tôi sử dụng ở đây là tùy ý, mặc dù, đối với kiểu đặc biệt này, chúng tôi có xu hướng sử dụng các giá trị "trái" hoặc "phải", tùy thuộc vào cách chúng tôi muốn hình ảnh của mình căn chỉnh. Chúng tôi thấy rằng cú pháp đơn giản để hoạt động tốt và dễ dàng cho những người khác có thể phải quản lý một trang web trong tương lai để hiểu, nhưng bạn có thể cung cấp cho bất kỳ giá trị lớp nào bạn muốn.
-
- Bởi chính nó, giá trị lớp này sẽ không làm gì cả. Hình ảnh sẽ không tự động được căn chỉnh ở bên trái của văn bản. Đối với điều này, bây giờ chúng ta cần phải chuyển sang tập tin CSS của chúng tôi.
-
- Trong biểu định kiểu của bạn, bây giờ bạn có thể thêm kiểu sau:
- .trái {
- float: trái;
- padding: 0 20px 20px 0;
- }
- Những gì bạn đã làm ở đây là sử dụng thuộc tính CSS "float" , sẽ kéo hình ảnh từ luồng tài liệu bình thường (cách mà hình ảnh thường hiển thị, với văn bản được căn chỉnh bên dưới) và nó sẽ căn chỉnh nó sang bên trái của vùng chứa của nó . Văn bản đi sau nó trong đánh dấu HTML với bây giờ quấn quanh nó. Chúng tôi cũng đã thêm một số giá trị đệm để văn bản này sẽ không trực tiếp chống lại hình ảnh. Thay vào đó, nó sẽ có một khoảng cách đẹp sẽ hấp dẫn trực quan trong thiết kế của trang. Trong viết tắt CSS cho đệm, chúng tôi đã thêm 0 giá trị vào phía trên cùng và bên trái của hình ảnh và 20 pixel ở bên trái và dưới cùng của nó. Hãy nhớ rằng, bạn cần phải thêm một số đệm bên phải của hình ảnh được căn trái. Một hình ảnh phù hợp (mà chúng ta sẽ xem xét trong một thời điểm) sẽ có padding áp dụng cho phía bên trái của nó.
- Nếu bạn xem trang web của mình trong trình duyệt, bây giờ bạn sẽ thấy rằng hình ảnh của bạn được căn chỉnh ở phía bên trái của trang và văn bản kết thúc tốt đẹp quanh nó. Một cách khác để nói điều này là hình ảnh được "trôi về bên trái".
- Nếu bạn muốn thay đổi hình ảnh này để được căn chỉnh bên phải (như trong ví dụ ảnh đi kèm với bài viết này), nó sẽ đơn giản. Trước tiên, bạn phải chắc chắn rằng, ngoài phong cách chúng tôi vừa thêm vào CSS của chúng tôi cho giá trị lớp của "trái", chúng tôi cũng có một cho căn phải. Nó sẽ trông như thế này:
- .đúng {
- float: đúng;
- padding: 0 0 20px 20px;
- }
- Bạn có thể thấy rằng điều này gần giống với CSS đầu tiên mà chúng tôi đã viết. Sự khác biệt duy nhất là giá trị chúng tôi sử dụng cho thuộc tính "float" và các giá trị padding mà chúng tôi sử dụng (thêm một số giá trị vào bên trái hình ảnh của chúng tôi thay vì bên phải).
- Cuối cùng, bạn sẽ thay đổi giá trị của lớp của hình ảnh từ "trái" sang "phải" trong HTML của bạn:
-
- Xem trang của bạn trong trình duyệt ngay bây giờ và hình ảnh của bạn phải được căn chỉnh ở bên phải với văn bản gọn gàng bao quanh nó. Chúng tôi có xu hướng thêm cả hai kiểu này, "trái" và "phải" vào tất cả các bảng định kiểu của chúng tôi để chúng tôi có thể sử dụng các kiểu trực quan này khi cần thiết khi tạo trang web. Hai kiểu này trở nên đẹp, các tính năng có thể tái sử dụng mà chúng ta có thể chuyển sang bất cứ khi nào chúng ta cần tạo kiểu cho hình ảnh với văn bản bao quanh chúng.
Sử dụng HTML thay vì CSS (và tại sao bạn không nên làm điều này)
Mặc dù có thể làm văn bản quấn quanh một hình ảnh với HTML, các tiêu chuẩn web quyết định rằng CSS (và các bước được trình bày ở trên) là cách để chúng tôi có thể duy trì tách cấu trúc (HTML) và kiểu (CSS). Điều này đặc biệt quan trọng khi bạn xem xét điều đó, đối với một số thiết bị và bố trí, văn bản đó có thể không cần phải di chuyển xung quanh hình ảnh. Đối với màn hình nhỏ hơn, bố cục của trang web đáp ứng có thể yêu cầu văn bản thực sự căn chỉnh bên dưới hình ảnh và hình ảnh trải rộng toàn bộ màn hình. Điều này có thể dễ dàng thực hiện với các truy vấn phương tiện nếu kiểu của bạn tách biệt với đánh dấu HTML của bạn. Trong thế giới đa thiết bị ngày nay, nơi hình ảnh và văn bản sẽ xuất hiện khác nhau cho khách truy cập khác nhau và trên màn hình khác nhau, sự tách biệt này là điều cần thiết cho sự thành công và quản lý lâu dài của trang web.