Danh mục: Hướng dẫn học HTML, CSS

So sánh sự khác biệt giữa AMP HTML và HTML, HTML5

27 Tháng Hai, 2016
Xem với phiên bản Google AMP

Như các bạn đã biết khái niệm về AMP HTML là gì ở bài viết trước đây, vậy sự khác biệt giữa AMP HTML là gì so với HTML và HTML 5 trước đây không đó là câu hỏi thắc mắc của nhiều người mới.

amp-html-la-gi

Thực ra AMP HTML cũng chỉ có một số tùy chỉnh và bổ xung thêm một số thẻ mà HTML 5 trước đây vẫn cho phép chạy để đảm bảo tính ổn định.

  • Thay thế một số thành phần trong tag của HTML5 như: amp-img và amp-video
  • Thực thi thêm một số mã nhúng của các nhà cung cấp đơn vị thứ 3 và đặc biết trong đó là Google như: amp-ad, amp-pinterest, amp-twitter, and amp-youtube
  • Cung cấp thêm một số thẻ phổ biến như: amp-lightbox và amp-carousel
  • Cho phép thực thi một số kỹ thuật mới và dễ dàng cho các hoạt động trong animation như: amp-anim cho phép dễ dàng trình diễn các ảnh động (GIF) hoặc các tập tin Video (WebM hoặc MP4) tất nhiên sẽ có một số trình duyệt tương thích với nó.

Một số lưu ý

Hiển thì Style với AMP <style amp-custom>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
</style>

2016-02-27_094509

Để sử dụng Iframes ta dùng amp-iframe thay cho iframe trước đây

Yêu cầu trong phần thẻ head phải có

<script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>

Và được sử dụng như sau:

<amp-iframe width=300 height=300
sandbox=”allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox”
layout=”responsive”
frameborder=”0″
src=”https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA”>
</amp-iframe>

Sử dụng các media file dạng images, video, và audio:

Ví dụ cho amp-img

<amp-img src=”responsive.jpg” width=527 height=193 layout=”responsive” ></amp-img>

Với các file ảnh động hoặc video audio thì cần thiết phải có trong head đoạn code sau

<script async custom-element=”amp-anim” src=”https://cdn.ampproject.org/v0/amp-anim-0.1.js”></script>

Ảnh động chi tiết như sau:

<amp-anim width=400 height=300 src=”my-gif.gif”>
<amp-img placeholder width=400 height=300 src=”my-gif-screencap.jpg”>
</amp-img>
</amp-anim>

Video như sau:

<amp-video width=400 height=300 src=”https://yourhost.com/videos/myvideo.mp4″
poster=”myvideo-poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>

Đối với file audio phải có code sau trong head:

<script async custom-element=”amp-audio” src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”></script>

và được sử dụng như sau:

<amp-audio width=400 height=300 src=”https://yourhost.com/audios/myaudio.mp3″>
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type=”audio/mpeg” src=”foo.mp3″>
<source type=”audio/ogg” src=”foo.ogg”>
</amp-audio>

Muốn sử dụng từ Twitter ta cần phải có code sau trong head:

<script async custom-element=”amp-twitter” src=”https://cdn.ampproject.org/v0/amp-twitter-0.1.js”></script>

và phần code được dùng như sau:

<amp-twitter width=390 height=50
layout=”responsive”
data-tweetid=”638793490521001985″>
</amp-twitter>

Sử dụng cho Instagram thì cần phải có đoạn code sau trong head:

<script async custom-element=”amp-instagram” src=”https://cdn.ampproject.org/v0/amp-instagram-0.1.js”></script>

Code được dùng như sau:

<amp-instagram
data-shortcode=”fBwFP”
width=”320″
height=”392″
layout=”responsive”>
</amp-instagram>

Dùng Facebook post hoặc video thì cần phải có đoạn sau trong head:

<script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>”></script>

Ví dụ lấy bài viết từ facebook về trang web

<amp-facebook width=486 height=657
layout=”responsive”
data-href=”https://www.facebook.com/zuck/posts/10102593740125791″>
</amp-facebook>

Lấy video từ facebook về trang web

<amp-facebook width=552 height=574
layout=”responsive”
data-embed-as=”video”
data-href=”https://www.facebook.com/zuck/videos/10102509264909801/”>
</amp-facebook>

Làm việc với youtube thì cần có đoạn code sau trong head

<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

Code thêm video từ youtube về web site của bạn

<amp-youtube
data-videoid=”mGENRKrdoGY”
layout=”responsive”
width=”480″ height=”270″>
</amp-youtube>

Sử dụng amp-ad

<amp-ad width=300 height=250
type=”a9″
data-aax_size=”300×250″
data-aax_pubname=”test123″
data-aax_src=”302″>
</amp-ad>

Ngoài ra còn một số tính năng khác mà chúng tôi chưa thể trình bày hết trong khuôn khổ bài viết này

Bài viết mới nhất

lamvt

Lamvt - Tên thật là Vũ Thành Lâm năm sinh 197x tại xã Đại Đồng - huyện Thạch Thất - Hà Tây quê lụa

Yêu Joomla, thích WordPress và đam mê SEO
từng là GMOD của cộng đồng Joomla Việt, Admin của Thế giới SEO, thành viên tích cực trong Group WordPress Hà Nội
Liên hệ: D4J hoặc ĐT: 0169981 Năm Hai Ba Hai

Post by:admin

Bài viết liên quan

Chính sách của Google Adsence năm 2017
Chào mừng các bạn đến với buổi tọa đàm trực tuyến do Google Adsence tổ chức ngày hôm nay Mình xin tự giới thiệu mình là Vân là chuyên viên về mảng tối ưu hóa doanh thu cho tài khoản...
Học SEO miễn phí với Lamvt là thế đấy
Bạn đã biết gì về SEO, nghề SEO như thế nào? Đơn giản lên google tìm kiếm sau đó sẽ đến trung tâm để học. Và đọng lại trong tâm trí, SEO là phải đi thật nhiều link, có thật...
Top 7 Marketing Online sẽ Thống trị 2017
Năm 2016 là một năm tuyệt vời đối với ngành marketing online và sự phát triển của nó sẽ vẫn tiếp tục diễn ra rất nhanh chóng. Dù chưa phải những ngày cuối năm, cận kề kề thời khắc giao...
TOP 5 Xu thế mới của SEO 2017
Chào các Seoers, thời gian trôi nhanh quá phải không các bạn!, SEO năm 2016 đã có những biến động nhỏ trong đó đặc biệt chú ý tới thuật toán Pengiun LifeTime đã khiến giới SEO Việt Nam chao đảo....
5 Bước để Viết bài chuẩn SEO
Viết bài đăng blog cũng khá giống với việc lái xe, bạn có thể học về luật giao thông (hoặc đọc các bài báo hướng dẫn làm thế nào để viết một bài blog thật hay) hàng tháng trời, nhưng...
360 Điều cần biết về SEO từ OnPage đến OffPage
Nhiều bạn hỏi tại sao lại SEO? Tôi nói rằng muốn kiếm nhiều tiền hơn. Sao lại nhiều hơn? Có một câu thành ngữ để trả lời cho câu hỏi này “Nếu khách hàng không tìm thấy bạn, họ sẽ thấy...
108 Điều cần hiểu về SEO Onpage OffPage
SEO Onpage là gì, Offpage là gì? Sau bài viết về khái niệm SEO là gì? chúng ta đã vô tình nghe qua về hai thuật ngữ cơ bản của SEO đó là OnPage và OffPage, tuy nhiên bản chất...
SEO on page là gì, SEO off page là gì?
Ở bài viết trước chúng ta đã hiểu về SEO , hiểu khái niệm “như thế nào là SEO “ người làm SEO cần làm gì để đạt được mục tiêu của mình. Ở bài viết này tôi sẽ giới...
SEO On-page và SEO Off-page từ góc nhìn Xã hội học
SEO On-page và SEO Off-page là gì? Ở bài viết “SEO là gì?”, các bạn đã cùng tôi làm rõ thuật ngữ SEO cùng đặc tính, vai trò cũng như các cách thức SEO. Ở bài viết này, chúng ta...
SEO ONPAGE VÀ SEO OFF PAGE LÀ GÌ
Seo onpage Mọi người luôn hỏi tôi rằng điều gì quan trọng nhất trong seo, tôi sẽ trả lời đó là: seo onpage. Để hiểu thế nào là seo onpage xin mời các bạn đọc bài viết này. Ở đây,...