Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.
SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)
Định dạng và bố cục trên trang AMP HTML giống với trang HTML bình thường, trong cả 2 trường hợp chúng ta sử dụng CSS. Tuy nhiên, AMP giới hạn một số thuộc tính CSS vì lý do hiệu suất và khả năng sử dụng, trong khi mở rộng khả năng responsive với các tính năng như placehoders và fallbacks, advanced art direction via srcset và các thuộc tính bố cục để kiểm soát tốt hơn cách hiển thị các phần tử. Trong bài viết hôm nay chúng ta cùng nhau tìm hiểu về cách định dạng và bố cục trang AMP HTML.
Xem thêm: AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu
Chúng ta có thể dễ dàng làm cho phần tử responsive trong AMP. Chỉ cần thêm thuộc tính layout="responsive"
vào chúng.
Contents
Viết tất cả CSS bên trong thẻ <style amp-custom>
trong phần đầu của tài liệu.
Chú ý: Chắc chắn rằng chỉ có một thẻ <style amp-custom>
trong trang web của bạn.
Định dạng các phần tử sử dụng các thuộc tính thường dùng trong CSS.
Xem thêm: Hỗ trợ CSS trong AMP HTML
AMP hỗ trợ media queries cho việc thiết kế bố cục của các phần tử trên trang. Thuộc tính layout
tạo ra thiết kế responsive dễ dàng hơn so với việc chỉ dùng CSS.
Tạo ra hình ảnh responsive bằng cách cung cấp thuộc tính width
và height
, đặt giá trị của thuộc tính layout
là responsive
và chỉ ra hình ảnh cần sử dụng cho từng kích thước màn hình thông qua thuộc tính srcset
Phần tử amp-img
tự động co dãn hình ảnh phù hợp với chiều rộng của phần tử chứa nó, và chiều cao tự động đặt theo tỷ lệ được xác định bởi chiều rộng và chiều cao.
Thuộc tính layout
giúp chúng ta dễ dàng kiểm soát bố cục của các phần tử và cách chúng hiển thị.
Sử dụng @media để kiểm soát cách bố cục trang như bạn làm trên website thông thường. Khi cửa sổ trình duyệt thay đổi kích thước hoặc định hướng, media queries được thiết lập lại và cách hiển thị các phần tử từ đó cũng thay đổi.
Xem thêm: Sử dụng CSS media query để thiết kế responsive
Một tính năng bổ sung cho thiết kế responsive sẵn có trong AMP là thuộc tính media
. Thuộc tính này có thể được sử dụng trên mọi phần tử AMP.
Dưới đây chúng ta có một ví dụ về 2 hình ảnh khác nhau. Dựa vào độ rộng màn hình, một trong số 2 hình ảnh sẽ được hiển thị.
Sử dụng thuộc tính srcset
để điều khiển một phần tử dựa trên các biểu thức. Đặc biệt, sử dụng nó cho tất cả các thẻ amp-img
để chỉ ra hình ảnh nào được sử dụng dựa trên kích thước màn hình.
Trong ví dụ trên, thuộc tính srcset
chỉ ra rằng hình ảnh nào sẽ được sử dụng dựa trên độ rộng màn hình. w
chỉ ra độ rộng của các hình ảnh được liệt kê trong thuộc tính srcset
Bạn có thể sử dụng đồng thời thuộc tính sizes
cùng với thuộc tính srcset
. Thuộc tính sizes
mô tả cách tính toán kích thước phần tử dựa trên biểu thức media. Dựa trên kích thước tính toán của phần tử, trình duyệt sẽ lựa chọn hình ảnh tương đối nhiều nhất được cung cấp trong thuộc tính srcset
Ở ví dụ trên, thuộc tính sizes
chỉ ra chiều rộng của phần tử là 50% so với kích thước khung nhìn khi khung nhìn là 650px hoặc rông hơn. Ví dụ, nếu khung nhìn là 800px, độ rộng của phần tử sẽ là 400px. Trình duyệt sẽ lựa chọn hình ảnh phù hợp chỉ ra trong thuộc tính srcset
tương đối với 400px, giả sử tỉ lệ pixel của thiết bị là 1 thì sẽ chọn ảnh có độ rộng 320px.
Các trang AMP không thể inlcude các tập tin định dạng bên ngoài, ngoại trừ phông chữ tùy chỉnh. Bạn có thể nhúng phông chữ vào trang theo 2 cách:
1. Thông qua thẻ <link>
2. Thông qua @font-face
(không hạn chế, hỗ trợ tất cả các phông)
<link>
Các trang web sau đây là nguồn cung cấp phông chữ được sử dụng thông qua thẻ <link>
– Typography.com: https://cloud.typography.com
– Fonts.com: https://fast.fonts.net
– Google Fonts: https://fonts.googleapis.com
– Font Awesome: https://maxcdn.bootstrapcdn.com
@font-face
Cách khác, bạn có thể sử dụng @font-face
trong thẻ định dạng của AMP
Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...
Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...
Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...
Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...
Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...
Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...
Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...
Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...
Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...