{"id":3518,"date":"2014-05-11T09:04:08","date_gmt":"2014-05-11T09:04:08","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=3518"},"modified":"2023-08-09T23:44:14","modified_gmt":"2023-08-09T16:44:14","slug":"html5-tao-template-html5-dau-tien","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/html5-tao-template-html5-dau-tien\/","title":{"rendered":"[HTML5] T\u1ea1o Template HTML5 \u0110\u1ea7u Ti\u00ean"},"content":{"rendered":"\n

N\u1ebfu b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u h\u1ecdc HTML5 th\u00ec \u0111i\u1ec1u b\u1ea1n quan t\u00e2m \u0111\u1ea7u ti\u00ean ch\u00ednh l\u00e0 c\u1ea5u tr\u00fac m\u1ed9t website x\u00e2y d\u1ef1ng b\u1eb1ng html5 s\u1ebd nh\u01b0 th\u1ebf n\u00e0o? Ch\u1edd g\u00ec n\u1eefa ta b\u1eaft \u0111\u1ea7u phanh phui n\u00f3 nh\u00e9.<\/p>\n\n\n\n\n\n\n\n

N\u1ebfu b\u1ea1n tham kh\u1ea3o m\u1ed9t s\u1ed1 website \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng HTML5 th\u00ec c\u00e1c b\u1ea1n s\u1ebd th\u1ea5y c\u00e1c th\u1ebb nh\u01b0 header, nav, section, footer, … T\u1ea5t c\u1ea3 nh\u1eefng th\u1ebb n\u00e0y nguy\u00ean b\u1ea3n HTML kh\u00f4ng t\u1ed3n t\u1ea1i, ch\u1ec9 c\u00f3 HTML5 m\u1edbi c\u00f3 nh\u1eefng th\u1ebb n\u00e0y. \u0110\u1ec3 d\u1ec5 h\u00ecnh dung ta \u0111i v\u00e0o xem m\u1ed9t v\u00ed d\u1ee5 nh\u00e9:<\/p>\n\n\n\n

C\u1ea5u Tr\u00fac Template HTML5<\/p>\n\n\n\n

C\u00e1c b\u1ea1n xem v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n

\n<!doctype html>\n<html lang="vi">\n    <head>\n        <meta charset="utf-8" \/>\n        <title>Ch\u01b0\u01a1ng Tr\u00ecnh HTML \u0110\u1ea7u Ti\u00ean<\/title>\n    <\/head>\n    <body>\n        <header>\n            <h1>HTML5 Cho Ng\u01b0\u1eddi M\u1edbi B\u1eaft \u0110\u1ea7u<\/h1>\n        <\/header>\n        <nav>\n            <ul>\n                <li><a href="#">Home<\/a><\/li>\n                <li><a href="#">Serie<\/a><\/li>\n                <li><a href="#">Tutorial<\/a><\/li>\n                <li><a href="#">Ebook<\/a><\/li>\n            <\/ul>\n        <\/nav>\n        <section>\n            N\u1ed9i dung trang web\n        <\/section>\n        <aside>\n            <h2>H\u01b0\u1edbng D\u1eabn<\/h2>\n            H\u1ecdc L\u1eadp Tr\u00ecnh HTML5 c\u00f9ng tapchicntt.com\n        <\/aside>\n        <footer>\n            Copyright 2014 HTML\n        <\/footer>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\u0110\u00e2y l\u00e0 m\u1ed9t c\u1ea5u tr\u00fac chu\u1ea9n cho m\u1ed9t template \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng b\u1eb1ng HTML5, t\u00f4i n\u00f3i chu\u1ea9n cho ri\u00eang b\u1ea3n th\u00e2n t\u00f4i ch\u1ee9 kh\u00f4ng ph\u1ea3i cho to\u00e0n b\u1ed9 c\u1ed9ng \u0111\u1ed3ng vi\u1ebft HTML5.<\/p>\n\n\n\n
B\u1ea1n xem x\u00e9t d\u00f2ng \u0111\u1ea7u ti\u00ean <!doctype htm><\/code>, \u0111\u00e2y l\u00e0 m\u1ed9t khai b\u00e1o b\u1eaft bu\u1ed9c n\u1ebfu m\u1ed9t template \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng b\u1eb1ng HTML5. Ti\u00eap theo l\u00e0 ph\u1ea7n <html lang=\"vi\"><\/code>, c\u00e1c b\u1ea1n c\u0169ng n\u00ean \u0111\u1eb7t lang v\u00e0o th\u1ebb html cho r\u00f5 r\u00e0ng.<\/p>\n\n\n\n
Ph\u1ea7n head<\/code> c\u1ee7a HTML5 c\u0169ng nh\u01b0 phi\u00ean b\u1ea3n HTML<\/p>\n\n\n
\n<head>\n   <meta charset="utf-8" \/>\n   <title>Ch\u01b0\u01a1ng Tr\u00ecnh HTML \u0110\u1ea7u Ti\u00ean<\/title>\n<\/head>\n<\/pre><\/div>\n\n\n
V\u00e0o ph\u1ea7n body<\/code> l\u00e0 quan tr\u1ecdng nh\u1ea5t, \u1edf ph\u1ea7n body t\u00f4i c\u00f3 s\u1eed d\u1ee5ng c\u00e1c th\u1ebb sau:<\/p>\n\n\n\n
Th\u1ebb header<\/code> d\u00f9ng \u0111\u1ec3 ch\u1ee9a nguy\u00ean ph\u1ea7n header website c\u1ee7a b\u1ea1n. N\u1ebfu l\u00fac tr\u01b0\u1edbc b\u1ea1n d\u00f9ng th\u1ebb div th\u00ec v\u1edbi HTMl5 b\u1ea1n s\u1ebd d\u00f9ng th\u1ebb n\u00e0y \u0111\u1ec3 thay th\u1ebf.<\/p>\n\n\n
\n<header>\n       <h1>HTML5 Cho Ng\u01b0\u1eddi M\u1edbi B\u1eaft \u0110\u1ea7u<\/h1>\n<\/header>\n<\/pre><\/div>\n\n\n
Th\u1ebb Nav, th\u1ebb n\u00e0y th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 ch\u1ee9a nh\u1eefng ph\u1ea7n navigation nh\u01b0 menu.<\/p>\n\n\n
\n<nav>\n     <ul>\n         <li><a href=#>Home<\/a><\/li>\n         <li><a href=#>Serie<\/a><\/li>\n         <li><a href=#>Tutorial<\/a><\/li>\n         <li><a href=#>Ebook<\/a><\/li>\n     <\/ul>\n <\/nav>\n<\/pre><\/div>\n\n\n
Th\u1ebb section<\/code> l\u00e0 th\u1ebb d\u00f9ng \u0111\u1ec3 ch\u1ee9a n\u1ed9i dung ch\u00ednh c\u1ee7a website. N\u1ebfu b\u1ea1n kh\u00f4ng d\u00f9ng HTMl5 th\u00ec b\u1ea1n hay d\u00f9ng th\u1ebb div v\u1edbi id l\u00e0 content \u0111\u1ec3 bao quan n\u00f3 \u0111\u1ea5y<\/p>\n\n\n
\n<section>\n    N\u1ed9i dung trang web\n<\/section>\n<\/pre><\/div>\n\n\n
Th\u1ebb aside<\/code>, th\u1ebb n\u00e0y th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 ch\u1ee9a khung sidebar nh\u01b0 left-sidebar, right-sidebar.<\/p>\n\n\n
\n<aside>\n    <h2>H\u01b0\u1edbng d\u1eabn<\/h2>       \n    H\u1ecdc L\u1eadp Tr\u00ecnh HTML5 c\u00f9ng tapchicntt.com\n<\/aside>\n<\/pre><\/div>\n\n\n
V\u00e0 th\u1ebb cu\u1ed1i c\u00f9ng l\u00e0 th\u1ebb footer<\/code>, thay v\u00ec khai b\u00e1o m\u1ed9t c\u00e1i div v\u00e0 \u0111\u1ecbnh d\u1ea1ng th\u00ec ta d\u00f9ng th\u1ebb footer \u0111\u1ec3 bao quanh l\u1ea1i.<\/p>\n\n\n
\n<footer>\n  Copyright 2014 HTNL5\n<\/footer>\n<\/pre><\/div>\n\n\n
B\u1ea1n th\u1ea5y \u0111\u00f3 n\u1ebfu ta d\u00f9ng nh\u1eefng th\u1ebb theo chu\u1ea9n HTML5 n\u00e0y th\u00ec nh\u00ecn v\u00e0o website ta kh\u1ecfi c\u1ea7n comment ph\u1ea7n n\u00e0o l\u00e0 header, ph\u1ea7n n\u00e0o l\u00e0 footer ph\u1ea3i kh\u00f4ng n\u00e0o? R\u1ea5t tr\u1ef1c quan v\u00e0 d\u1ec5 c\u1eadp nh\u1eadt.<\/p>\n","protected":false},"excerpt":{"rendered":"
N\u1ebfu b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u h\u1ecdc HTML5 th\u00ec \u0111i\u1ec1u b\u1ea1n quan t\u00e2m \u0111\u1ea7u ti\u00ean ch\u00ednh l\u00e0 c\u1ea5u tr\u00fac m\u1ed9t website […]<\/p>\n","protected":false},"author":6,"featured_media":8031,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[148],"tags":[],"class_list":["post-3518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-huong-dan-html"],"views":495,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=3518"}],"version-history":[{"count":13,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3518\/revisions"}],"predecessor-version":[{"id":8048,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3518\/revisions\/8048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/8031"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=3518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=3518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=3518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}