Thứ Hai, 14 tháng 7, 2014

Tạo Blog Web Chuẩn W3C HTML5

HTML5 là gì? 

HTML, hay HyperText Markup Language, là yếu tố quan trọng nhất của World Wide Web. Đó là ngôn ngữ được sử dụng để mô tả những gì của một trang web như thế nào. Tuy nhiên, HTML với riêng nó thì quả thật là một sự nhàm chán bởi vì nó chỉ có thể cung cấp các trang tĩnh. Do vậy, để đáp ứng nhu cầu ngày càng tăn về các tính năng web ấn tượng hơn, HTML đã kết hợp bổ sung với một số thành phần khác như CSS, Flash, Java, Silverlight, v.v...

Tạo Blog Web Chuẩn W3C HTML5

HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software. Đây là phiên bản thứ 5 của ngôn ngữ HTML và hiện tại vẫn đang được phát triển bởi World Wide Web Consortium và WHATWG. Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ được việc con người và các thiết bị, các chương trình máy tính như trình duyệt web, trình đọc màn hình, v.v.. có thể đọc, hiểu, hay xử lý một cách dễ dàng. HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML, DOM, đặc biệt là JavaScript.

Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 là một phản ứng để đáp lại lời phê bình rằng HTML và XHTML được sử dụng phổ biến trên World Wide Web là một hỗn hợp các tính năng với các thông số kĩ thuật khác nhau, được giới thiệu bởi nhiều nhà sản xuất phần mềm ví dụ Adobe, Sun Microsystems, Mozilla, Apple, Google,… và có nhiều lỗi cú pháp trong các văn bản web. Đây là một nỗ lực để tạo nên một ngôn ngữ đánh dấu có thể được viết bằng cú pháp HTML hoặc XHTML. Nó bao gồm các mô hình xử lý chi tiết để tăng tính tương thích, mở rộng, cải thiện và hợp lý hóa các đánh dấu có sẵn cho tài liệu, đưa ra các đánh đấu mới và giới thiệu giao diện lập trình ứng dụng (application programming interfaces API) để tạo ra các ứng dụng Web phức tạp. Cùng một lý do như vây, HTML5 là một ứng cử viên tiềm năng cho nền tảng ứng dụng di động. Nhiều tính năng của HTML5 được xây dựng với việc xem xét chúng có thể sử dụng được trên các thiết bị di động như điện thoại thông minh và máy tính bảng hay không.

Lợi ích nên chọn HTML5?

Giúp công cụ tìm kiếm index trang web / blog tốt hơn và nhanh hơn.
Tương thích tốt hơn với trình duyệt
Document Object Model (DOM) là ổn định hơn và nhất quán

Chuyển Blogspot sang HTML5
Bước 1: Kiểm tra blog của bạn đang dùng phiên bản mấy bằng cách vào trang sau: validator.w3.org , và trang web của tôi có 1 lỗi và tôi không muốn tối ưu nữa nên chưa đạt  HTML5 vì các bạn cũng biết để đạt HTML5 thì web bạn phải chịu khó hi sinh một ít.

Chuẩn W3C HTML5

Bước 2: Trước khi thực hiện các bước sao bạn nhớ lưu mẫu lại trước khi thực hiện nhé. 
Bước 3: Xóa hết các thẻ trên <head> như sau 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="vi" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>

và dán đoạn code sau thay thế :
<!DOCTYPE html>
<html lang='vi'>
<head>
Bước 4: Thay thế mã sau:
<b:include data='blog' name='all-head-content'/>
Thành
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> 
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
Bước 5: Thay thế mã <b:skin><![CDATA[  thành:
<link href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' rel='stylesheet' type='text/css'/>&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>
Bước 6: Tìm và xóa hết tất cả các mã sau:
<b:include name='quickedit'/>
Đoạn code trên xuất hiện mỗi khi bạn thêm một widget vào thì phải vào trong template và xóa mã này đi nếu không nó sẻ báo lỗi. 
Bước 7: Xóa bỏ tất cả các mã sau:
<a expr:name='data:post.id'/>
Hoặc code sau ( tùy theo template)
<b:includable id='postQuickEdit' var='post'> 
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a> </span> </b:if> </b:includable>
Hoặc code sau ( tùy theo template)
<div class='post-share-buttons goog-inline-block'>........</div>
Hoặc nếu bạn thấy lỗi code sau :
Line 897, Column 30: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead. 
<a name='3778364324138794869'></a>
Bạn chỉ cần thay chữ name thành 
<a expr:id='data:post.id'/>
Và còn một số vấn đề khác
Chúc bạn thành công.

Không có nhận xét nào:

Đăng nhận xét