Cách Chỉnh Sửa Các Lỗi W3c Thường Gặp Khi Thiết Kế Blogspot! - TƯ ...

Có thể bạn quan tâm

Breaking Loading...

Advertise

Labels

ẢNH ĐẸP
audio
Email Marketing
HỎI ĐÁP DOANH NGHIỆP
HTML/Javascript
IDM (Internet Download Manager)
LỜI KHUYÊN KINH DOANH
MEDIAFIRE(Tải file tốc độ)
TÀI LIỆU
THANH TOÁN TRỰC TUYẾN
THỦ THUẬT FACEBOOK
THỦ THUẬT IN ẤN
THỦ THUẬT WordPress
THỦ THUẬT BLOG
THỦ THUẬT ĐIỆN THOẠI
THỦ THUẬT EXCEL
THỦ THUẬT INTERNET
THỦ THUẬT PDF
THỦ THUẬT PHẦN MỀM
THỦ THUẬT VIDEO
THỦ THUẬT WINDOWS
THỦ THUẬT WORD
WEB HAY
Wrordpress

Home / THỦ THUẬT BLOG / » Cách chỉnh sửa các lỗi W3c thường gặp khi thiết kế blogspot! » Cách chỉnh sửa các lỗi W3c thường gặp khi thiết kế blogspot! IN LONG AN 02:37 THỦ THUẬT BLOG Edit Sau đây chúng ta sẽ cùng đi tìm hiểu cách để chuẩn hóa trang web, blog của bạn theo chuẩn w3c. 1. Điều chỉnh mã HTML. - Bạn tìm đoạn code có dạng như bên dưới tùy từng trang có thể có sự khác biệt nho nhỏ nhưng về cơ bản là như vầy: <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> - xóa toàn bộ những phần thừa thãi đi chỉ để lại mã html như bên dưới: <html> - Với cách này mỗi khi bạn chỉnh sửa mẫu thì bạn lại phải xóa lại vì nó sẽ được blogger tự động thêm lại sau khi bạn truy cập vào trình chỉnh sửa HTML. 2. Xóa hoàn toàn thanh nabar - Bằng cách chèn đoạn code bên dưới vào trước thẻ <body>  - Khi lưu lại sẽ có thông báo hỏi bạn có muốn xóa thanh Nabar không thì bạn chọn có nha. * Xóa bỏ Styleseet(Bạn có thể bỏ qua bước này nếu thấy nó không cần thiết, thực ra nó cũng không ảnh hưởng đến W3c mình chỉ cho thêm vào thôi) - Với cách này bạn có thể sử dụng khi bạn đã am hiểu về code. Bởi khi thêm đoạn code này sẽ có một số tiện ích của blogger không hoạt động, bởi ta đã vô hiệu hóa những đoạn mã không cần thiết của blogger để duy trì nó hoạt động. - Tìm đoạn code: </body> Thay thế nó thành: </body> - Bước này bạn có thể bỏ qua nếu không thể tự code lại mã CSS và XML. Bởi bố cục của bạn sẽ bị thay đổi phá vỡ hoàn toàn. 3. Xóa đoạn code chỉnh sửa nhanh bài viết. - Tìm đoạn code chỉnh sửa nhanh bài viết như bên dưới: <b:include data='post' name='postQuickEdit'/> - Khi bạn xóa đoạn code này đi thì nút chỉnh sửa nhanh bài viết của bạn sẽ biến mất và bạn không thể chỉnh sửa bài viết khi xem nó trên giao diện web, bạn chỉ có thể chỉnh sửa trong phần quản lý bài viết của bạn (Cách này hơi bất tiện với những ai thường xuyên chỉnh sửa và cập nhật bài viết, tuy nhiên vì sự nghiệp W3C thì ta phải chấp nhận thôi). 4. Xóa nút chỉnh sửa nhanh tiện ích (widget). - Khi kiểm tra bạn sẽ thấy trên các tiện ích HTML của bạn có báo lỗi, và tất nhiên nếu căn cứ vào những gì họ thông báo rất khó tìm ra lỗi. Tuy nhiên bạn không phải lo lắng cách khắc phục rất đơn giản bạn chỉ cần tìm những đoạn code bên dưới: <b:include name='quickedit'/> - Lưu ý với các tiện ích HTML/Javascript thì xóa đoạn này đơn giản. Tuy nhiên với một số tiện ích do blogger cung cấp bạn sẽ không thể xóa đoạn này đi ví dụ như tiện ích người theo dõiFollowers. Do vậy nếu bạn muốn sử dụng tiện ích đó hãy xem các khắc phục nó ở đây. - Luôn check với W3C khi tạo mới một widget để phát hiện và sửa lỗi theo hướng dẫn. 5. Thiếu thuộc tính alt trong hình ảnh - (required attribute "alt" not specified) Thuộc tính alt giúp bạn có thể tạo ra một văn bản thay thế cho bức ảnh, điều này rất có lợi khi hình ảnh bị lỗi hoặc tốc độ mạng của người xem chậm thì văn bản thay thế đó sẽ hiển thị thay cho bức ảnh, Từ đó giúp trang của bạn chuyên nghiệp hơn và tải nhanh hơn (không nhiều). Đặc biệt thuộc tính alt này ảnh hưởng rất lớn trong việc Google Index hình ảnh của chúng ta. - Ví dụ nếu bạn chèn hình ảnh như bên dưới là sai so với chuẩn w3c <img src="URL_ANH" /> Chèn đúng phải là <img src="URL_ANH" alt="mô tả cho hình ảnh" /> 6. Lưu ý khi sử dụng một số tiện ích đặc biệt. Có một số tiện ích của blogger bạn nên biết khi sử dụng. Ví dụ nếu sử dụng tiện ích lưu trữ(Archive), thì hãy sử dụng kiểu hiển thị dạng Thứ bậc. 7. Lỗi liên quan đên sử dụng các liên kết. - Thông thường các liên kết được chèn vào trang của bạn theo cú pháp của thẻ <a> như bên dưới: <a href="/search/label/Game" target="_blank">Tên</a> - Với những liên kết mà tên chỉ có một từ game như trên thì sẽ không xuất hiện các lỗi w3c. Tuy nhiên với những liên kết mà có nhiều từ Game Mobile cách nhau bởi dấu cách như bên dưới: <a href="/search/label/Game Mobile" target="_blank">Tên</a> - Lúc này nếu kiểm tra trên w3c thì bạn sẽ thấy xuất hiện lỗi và khắc phục rất đơn giản bạn chỉ cần thêm vào giữa khoảng trống của liên kết %20 . Khi đó bạn sẽ được như sau: <a href="/search/label/Game%20Mobile" target="_blank">Tên</a> 8. Thiếu thuộc tính type - (required attribute "type" not specified) Lỗi này do khai phải CSS hoặc JavaScript bị thiếu thuộc tính type. - Ví dụ viết như bên dưới là sai: <style> , <script> Viết đúng phải là <style type="text/css"> <script type="text/javascript"> P/s trước kia khi cần khai báo một đoạn JavaScript người ta thường sử dụng thuộc tínhlanguage tuy nhiên hiện nay ta phải sử dụng thuộc tính type mới chính xác. Mẹo: Để tối ưu w3c và cũng để tăng tốc độ load cùng với SEO thì tốt nhất với những đoạn css và scripts bạn nên chèn vào một file và upload lên host riêng rồi chèn vào mẫu của bạn. 9. Sử dụng thẻ <marquee> - (element "marquee" undefined) Thẻ marquee để chạy chữ, hình ảnh được rất nhiều người đang sử dụng, tuy nhiên thẻ này không được quy định trong các thẻ HTML mà chuẩn W3C đề ra. Chính vì vậy nêu muốn có một đoạn chữ hay hình ảnh chạy trên blog bạn hãy sử dụng các đoạn CSS3 hoặc Jquery 10. Sử dụng các ký tự đặc biệt - (cannot generate system identifier for general entity) Trong HTML một số ký tự đặc biệt như < > / & . . . thì không được phép viết trực tiếp mà phải sử dụng các ký tự mã hóa thay thế. Các bạn có thể mã hóa nó bằng công cụ namkna đã cung cấptại đây . Dưới đây là một ví dụng Viết & là sai - chính xác phải là &amp; 11. Trùng lặp ID CSS - (ID "X" already defined) ID và class trong CSS có chức năng tương tự nhau giúp bạn có thể định hình giao diện hiển thị cho các thành phần xml. §Class có thể dùng nhiều lần cho các phần tử xml §id thì chỉ được dùng một lần duy nhất cho một phần tử. - ví dụ trong một blog có chứa 2 đoạn id="namkna1" như bên dưới là sai: <div id="namkna1">Archive</div> .... <h1 id="namkna1">Heading 1</h1> - Viết chính xác phải là <p id="namkna1">Archive</p> ..... <h1 id="namkna2">Heading 1</h1> 12. Trùng lặp thuộc tính - (duplicate specification of attribute X) - Lỗi này gặp ở rất nhiều người mới tìm hiểu về SEO, nhiều người không để ý đã sử dụng thuộc tính class cho các phần tử HTML bị trùng lặp nhau. - ví dụ như bên dưới là sai: <p> - Viết đúng phải là <p class = "class1 class2"> 13. Các thẻ cũ không được sử dụng trong HTML - Sau khi cập nhật mới thì W3C đã loại bỏ một số thẻ định dạng cũ và thay vào đó là sử dụng css. Những đoạn sau bạn không nên sử dụng trong w3c: <font> <u> <center> <strike>. - Không sử dụng thẻ <embed> để chèn Flash (element "embed" undefined. Khi chèn Flash thì thẻ <embed> không được sử dụng ( tuy nhiên sẽ được sử dụng trong phiên bản HTML5 ) mà phải thay thế bằng thẻ <object> 14.Thiếu thẻ đóng - (end tag for "X" omitted, but OMITTAG NO was specified) Lỗi này rất nhiều người đang mắc phải. Với những thẻ 'lưỡng tính' như: br, hr, link, img, meta, input . . . thì bắt buộc phải có dấu xổ chéo '/' ở trong thẻ đóng>. - Ví dụ: Nếu viết như bên dưới là sai <br>, <hr>, <link>, <img>, <meta>, <input> Viết đúng sẽ là <br />, <hr />, <link />, <img />, <meta />, <input /> - Giờ kiểm tra đảm bảo hết lỗi liền. 15. Sử dụng nút like chia sẻ dành cho HTML 5 Các nút like nhúng dưới dạng thẻ <a ...> sẽ bị lỗi khi check w3c. Để khắc phục hiện tượng này bạn chỉ cần dùng thẻ dành riêng cho HTML5 sẽ khắc phục được lỗi đó ngay. - Với nút like và share của facebook các bạn có thể truy cập vào đây để lấy mã inframe chèn vào blog của bạn. - Với nút like Googe +1 bạn có thể truy cập vào trang này để tìm hiểu, Tất nhiên nếu không hiểu nhiều về tiếng anh bạn có thể chèn đoạn code bên dưới vào vị trí bạn muốn để hiển thị nút google +1 của bạn nha; <div class="g-plusone" data-size="tall" ></div> 16. Vô hiệu hóa thẻ <b:include data='blog' name='all-head-content'/> - Nếu từng nghiên cứu về SEO thì hẳn bạn sẽ thấy tầm quan trọng của thẻ <b:include data='blog' name='all-head-content'/>, Nếu không muốn nói là thẻ này rất quan trọng. Tuy nhiên nếu sử dụng đoạn code này thì phần đầu blog của bạn sẽ rất dài dòng và không đạt theo chuẩn của w3c. Để khắc phục bạn có thể thay đổi đoạn đó thành đoạn bên dưới rồi lưu lại: <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:else/> <meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/> </b:if> </b:if> 17. Thứ tự thẻ không đúng. - Bạn chỉ cần hiểu đơn giản như sau ta phải đi tất rồi mới đi giày chứ không thể đi giày rồi mới đi tất. Thứ tự xml ở dây cũng vậy. Một số thứ tự bạn cần lưu ý như sau: a) Thẻ <span> không thể chứa thẻ <p> - Vụ dụ trường hợp sai. <span class='namkna'> <p> Đây là blog của Namkna </p> </span> - Viết đúng phải là: <p> <span class='namkna'> Đây là blog của Namkna </span> </p> b) Thẻ <li> không thể chứa thẻ <ul> - Một số trường hợp kiểu bên dưới có thể được chấp nhận ví dụ trong menu. <li> <ul> ....</ul> </li> - Tuy nhiên nếu trong thẻ <ul> không chứa thẻ <li> con sẽ có báo lỗi. Do vậy viết đúng phải là <ul> <li>....</li> </ul> hoặc: <li> <ul> <li>....</li> </ul> </li> Trước mắt mình mới thử với những lỗi này nếu phát hiện thêm lỗi nào nữa mình sẽ cập nhật cho các bạn. Share on Facebook Share on Twitter Share on Google Plus