Download: tại đây
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scroll chạy lên chạy xuống</title>
<link rel="stylesheet" href="/bootstrap.min.css">
<!-- jQuery -->
<script src="/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/bootstrap.min.js"></script>
<script type="text/javascript" src="/thongtin_dn/jquery90f9.js"></script>
<script type="text/javascript" src="/thongtin_dn/jquery-migrate.min1576.js"></script>';
?>
<script type="text/javascript">
$(document).ready(function(){
$('.scroll a, a.scroll').click(function(e){
var rel = $(this).attr('rel');
var destination = rel.split('_')[0];
var window_width = $(window).width();
var the_offset = 120;
$('body , html').animate( { scrollTop: 50+ $( '#' + destination ).offset().top-the_offset } , 2000 , 'easeInOutCirc' );
if( window_width < 1025 ) {
$('#main-navigation').slideUp( 800, 'easeInOutCirc' );
}
e.preventDefault();
});
// $(".thongtin-head > ul > li").on('click', function() {
// id = $(this).attr("data-id");
// $(".thongtin-head > ul > li").removeClass("active");
// $(".menu-"+id).addClass("active");
// });
// $(".showout-nsp").on('click', function() {
// var nhomsp = $(this).attr("data-mid");
// var userid = $(this).attr("data-userid");
// $.ajax({
// url: '/modules.php',
// type: 'POST',
// dataType: 'html',
// data: {name:'Shoping',op:'QR__doanhnghiep',nhomsp:nhomsp,userid:userid},
// })
// .done(function(data) {
// console.log(data);
// $(".mobisp-nhom").html(data);
// });
// });
});
</script>
<?php
echo'</head>
<body>';
echo'
<div class="thongtin-head">
<ul>
<li class="menu-9 scroll active" data-id="9"><a href="javascript:void(0)" rel="thongtin_link">WEBSITE</a>
</li>
<li class="menu-39 scroll" data-id="39">
<a href="javascript:void(0)" rel="bst_link">BỘ SƯU TẬP</a>
</li>
<li class="menu-79 scroll" data-id="79"><a rel="events_link" href="avascript:void(0)">EVENT</a>
</li>
</ul>
</div>
';
echo'<div class="bodyheader">';
echo'<section id="thongtin" class="parallax">';
$http = substr($data[0]["user_website"],0,7);
$https = substr($data[0]["user_website"],0,8);
if($http){
$website = substr($data[0]["user_website"],7);
}elseif ($https) {
$website = substr($data[0]["user_website"],8);
}
echo $website;
echo'</section>';
echo'<section id="bst" class="parallax">';
echo'BỘ SƯU TẬP..............';
echo'</section>';
echo'<section id="events" class="parallax">';
echo'EVENT..............';
echo'</section>';
echo'</div>';
echo'
<script type="text/javascript" src="/thongtin_dn/jquery.easing.1.34e44.js"></script>
<script type="text/javascript" src="/thongtin_dn/jquery.textillate8a54.js"></script>
<script type="text/javascript" src="/thongtin_dn/jquery.scrollReveal.minc5da.js"></script>
<script type="text/javascript" src="/thongtin_dn/jquery.custom8a54.js"></script>
';
</body>
</html>
Hiển thị các bài đăng có nhãn HTML5. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML5. Hiển thị tất cả bài đăng
Thứ Ba, 26 tháng 5, 2020
Thứ Năm, 14 tháng 5, 2015
Thứ Ba, 12 tháng 5, 2015
Thứ Hai, 11 tháng 5, 2015
scroll menu window html5
khi click vào menu--> "dich vu" nó chạy đến
**** script:
$('.scroll a, a.scroll').click(function(e){
var rel = $(this).attr('rel');
var destination = rel.split('_')[0];
var window_width = $(window).width();
var the_offset = 120;
$('body , html').animate( { scrollTop: 50+ $( '#' + destination ).offset().top-the_offset } , 2000 , 'easeInOutCirc' );
if( window_width < 1025 ) {
$('#main-navigation').slideUp( 800, 'easeInOutCirc' );
}
e.preventDefault();
});
**** html
<nav id="main-navigation">
<li class="menu scroll"><a href="#" rel="home_link"> trang chu </a></li>
<li class="menu scroll"><a href="#" rel="dichvu_link">dich vu </a></li>
</nav>
download : tại đây
**** script:
$('.scroll a, a.scroll').click(function(e){
var rel = $(this).attr('rel');
var destination = rel.split('_')[0];
var window_width = $(window).width();
var the_offset = 120;
$('body , html').animate( { scrollTop: 50+ $( '#' + destination ).offset().top-the_offset } , 2000 , 'easeInOutCirc' );
if( window_width < 1025 ) {
$('#main-navigation').slideUp( 800, 'easeInOutCirc' );
}
e.preventDefault();
});
**** html
<nav id="main-navigation">
<li class="menu scroll"><a href="#" rel="home_link"> trang chu </a></li>
<li class="menu scroll"><a href="#" rel="dichvu_link">dich vu </a></li>
</nav>
download : tại đây
Thứ Sáu, 8 tháng 5, 2015
Các quy tắc cơ bản của HTML5
Lập kế hoạch trang
Bạn sẽ tạo một trang web đơn giản. Trong quá trình này, tôi thảo luận một số thẻ mới đã được đưa vào trong HTML5. Để có hiệu quả cao, bạn phải lập kế hoạch để xem xét tất cả các thành phần bạn muốn chế tạo.Trang web mà bạn tạo ra sẽ có thiết kế cao cấp được hiển thị trong Hình 1. Thiết kế trang có một vùng Header (Tiêu đề), một vùng Navigation (Chuyển hướng), một vùng Article (Bài viết) có chứa ba Section (phần), một Aside (Nhận xét), và cuối cùng, là vùng Footer (Chân trang). Trang này được thiết kế để làm việc trong trình duyệt Google Chrome, trừ một số thứ lộn xộn thấy được, có thể xảy ra cùng với khả năng tương thích giữa các trình duyệt, bắt nguồn từ việc hiệu chỉnh cũng như cản trở hiểu biết về cấu trúc cơ bản. Mục đích là để tạo ra một trang mô tả rõ ràng việc sử dụng các thẻ HTML5 mới, cho thấy bạn có thể sử dụng chúng như thế nào để tạo ra mã đúng định dạng và thiết kế trang ngắn gọn.
Hình 1. Kế hoạch trang web của Acme United
Trong quá trình tạo trang này, tôi đụng phải CSS3, cần thiết để biểu thị đúng các
trang HTML5. CSS3 là cần thiết cho định kiểu, chuyển hướng, và cảm nhận chung về
trang HTML5. Các nhóm đặc tính của nó, mà bạn có thể tìm thấy tại trang web tham
khảo CSS3 W3Schools (xem Tài nguyên), bao gồm một số phần
tử có ích như nền, phông chữ, phông màn, và hình ảnh động. Tuy nhiên, trước khi bạn bắt đầu xây dựng trang web này, bạn cần phải tìm hiểu về một số thẻ mới của HTML5.
Vùng Header
Vùng Header ví dụ chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ<header> để tạo ra nội dung cho vùng
Header của trang. Thẻ
<header> có thể chứa thông tin mở về một
<section> và
<article> ngoài chính trang web đó. Trang
web được tạo ra ở đây có một vùng Header cho
trang này, được hiển thị trong thiết kế cao cấp, cũng như vùng
Header ở bên trong vùng Article và Section.
Liệt kê 1 đưa ra một ví dụ đánh dấu thẻ
<header>. Liệt kê 1. Ví dụ thẻ <header>
<header>
<h1>Heading Text</h1>
<p> Text or images can be included here</p>
<p> Logos are frequently placed here too</p>
</header>
<header> cũng có thể chứa một thẻ <hgroup>, như trong Liệt kê 2. Thẻ <hgroup> tạo nhóm các tiêu đề với nhau, bằng cách sử
dụng các mức tiêu đề <h1> đến <h6> được hiển thị ở đây có một tiêu đề chính (Main Heading) và
một phụ đề (Sub-heading). Liệt kê 2. Ví dụ thẻ <hgroup>
<header>
<hgroup>
<h1>Main Heading</h1>
<h2>Sub-heading </h2>
</hgroup>
<p> Text or images can be included here</p>
</header>
Vùng Navigation
Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng thẻ<nav>. Phần tử <nav>
định nghĩa một vùng đặc biệt dành cho việc chuyển hướng. Thẻ <nav> nên được sử dụng để chuyển hướng trang web chính, không dùng
để thiết lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này
có thể chứa mã như được hiển thị trong Liệt kê 3. Liệt kê 3. Ví dụ thẻ <nav>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
Các vùng Article và Section
Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự của trang. Bạn sử dụng thẻ<article>
để tạo vùng này, và thẻ đó định nghĩa nội dung có thể được sử dụng độc lập
với các nội dung khác được tìm thấy trên trang này. Ví dụ, nếu bạn muốn
tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng
<article> để xác định nội dung duy nhất.
Thẻ <article> xác định nội dung có thể
được gỡ bỏ và được đặt trong ngữ cảnh khác và có thể hoàn toàn dễ
hiểu.Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn tạo ra các vùng này bằng cách sử dụng thẻ
<section>. Một <section> chứa các vùng thành phần của nội dung trang
web có liên quan . Thẻ <section>— và thẻ <article> nữa
— có thể chứa các header (tiêu đề), các footer (chân
trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần
này. Thẻ <section> dùng cho nội dung tạo
nhóm. Nội dung cho cả hai thẻ <section>
và thẻ <article> thường bắt đầu bằng một
<header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa. Thẻ
<section> cũng có thể chứa các thẻ <article>, cũng giống như thẻ <article> có thể chứa các thẻ <section>. Thẻ <section> nên được
dùng để tạo nhóm các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một bài viết hoặc
một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh
hưởng đến ý nghĩa của nội dung. Thẻ <article> như
tên gọi của nó, cung cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ thông tin
không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó sẽ bị mất. Xem Liệt kê 4 với một ví dụ về cách sử dụng thẻ
<article> và
<section>. Liệt kê 4. Ví dụ thẻ <article> và thẻ <section>
<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>
Các phần tử hình ảnh
Cả hai thẻ<section> và thẻ
<article> cũng như thẻ
<header> và thẻ
<footer> có thể chứa thẻ
<figure>. Bạn sử dụng thẻ này để chứa các
ảnh, các sơ đồ, và các ảnh chụp. Thẻ
<figure> có thể chứa thẻ
<figcaption>, thẻ này chứa lần lượt các
chú thích cho hình minh họa có trong thẻ
<figure>, cho phép bạn nhập một mô tả để
có thể gắn hình minh họa chặt chẽ hơn với nội dung. Liệt kê 5 đưa ra một
ví dụ về cấu trúc thẻ <figure> và thẻ
<figcaption>. Liệt kê 5. Ví dụ thẻ <figure> và thẻ <figcaption>
<figure>
<img src="/figure.jpg" width="304" height="228" alt="Picture">
<figcaption>Caption for the figure</figcaption>
</figure>
Các phần tử đa phương tiện
Các thẻ<section> và <article> cũng có thể chứa các phần tử phương tiện khác nhau.
HTML5 cung cấp các thẻ để truyền đạt nhanh nội dung của chúng. Các phần tử đa phương
tiện, chẳng hạn như âm thanh và video trước đây thường chỉ được nhúng vào, bây giờ
có thể được sử dụng chính thống hơn. Thẻ
<audio> xác định nội dung âm thanh, chẳng hạn
như âm nhạc hoặc luồng âm thanh khác bất kỳ. Thẻ <audio> có các thuộc tính để kiểm soát những gì, khi nào, và làm
thế nào để phát âm thanh. Các thuộc tính là src, preload (nạp trước), control
(điều khiển), loop (vòng lặp), và autoplay (phát tự động). Trong ví dụ ở Liệt kê 6, âm thanh bắt đầu phát
ngay sau khi tải trang này và sẽ phát liên tục, đồng thời hiển thị các nút điều
khiển để người dùng có thể dừng lại hoặc phát lại âm thanh. Liệt kê 6. Ví dụ thẻ <audio>
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>
<video> cho phép bạn phát các đoạn
video hoặc tạo luồng phương tiện trực quan. Nó có tất cả các thuộc tính
của thẻ <audio> cộng thêm ba thuộc tính
nữa là: poster (quảng cáo),
width (chiều rộng), và
height (chiều cao). Thuộc tính
poster cho phép bạn xác định một hình ảnh được
sử dụng trong khi video đang tải hoặc trong hoàn cảnh không may khi các
video sẽ không tải được chút nào. Liệt kê 7 cung cấp một ví dụ về cấu tạo thẻ
<video>. Liệt kê 7. Ví dụ thẻ <video>
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>
<video> và
<audio> có thể chứa thẻ
<Source>, để định nghĩa tài nguyên đa
phương tiện cho các thẻ <video> và
<audio>. Với phần tử này, bạn định rõ các
tệp video và âm thanh thay thế để từ các tệp này sau đó trình duyệt có thể
lựa chọn dựa vào kiểu phương tiện của mình hoặc sự hỗ trợ của codec (bộ mã
hóa/giải mã). Trong Liệt kê 8, có hai sự lựa chọn. Nếu không thể phát
phiên bản WMA của tệp này trong trình duyệt đang được sử dụng, thì hãy thử
MP3. Nếu không, sẽ hiển thị thông báo để người sử dụng biết lý do âm thanh
không có sẵn. Liệt kê 8. Ví dụ thẻ <source>
<audio>
<source src="/music/good_enough.wma" type="audio/x-ms-wma">
<source src="/music/good_enough.mp3" type="audio/mpeg">
<p>Your browser does not support the HTML 'audio' element.</p>
</audio>
<embed> định nghĩa nội dung nhúng có thể được
đưa vào một trang — ví dụ, một plug-in cho các tệp SWF của Adobe
Flash. Liệt kê 9 có chứa thuộc tính type (kiểu), xác định
nguồn nhúng là một tệp Flash. Liệt kê 9. Ví dụ thẻ <embed>
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />
src và type, thẻ <embed> còn có thuộc tính
height (chiều cao) và width (chiều rộng). Vùng Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ<aside>. Hãy sử dụng thẻ này khi bạn muốn tạo nội
dung bổ sung mà không còn chỗ nào để thêm vào bài viết. Trong các tạp chí, các vùng
nhận xét thường được sử dụng để làm nổi bật một điểm nào đó và được thực hiện trong
chính bài viết đó. Thẻ <aside> chứa nội dung có thể
được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt bởi bài viết, phân
đoạn, hoặc trang chứa nó. Liệt kê 10 đưa ra một ví dụ về cách sử dụng thẻ
<aside>. Liệt kê 10. Ví dụ thẻ <aside>
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France</h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
Vùng Footer
Phần tử<footer> chứa thông tin về một trang, bài
viết, hoặc một phần, chẳng hạn như tác giả hoặc ngày viết bài. Là phần cuối trang,
nó có thể chứa bản quyền hoặc các thông tin pháp lý quan trọng khác, như trong Liệt
kê 11. Liệt kê 11. Ví dụ thẻ <footer>
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>
Cấu trúc một trang
Bây giờ bạn đã biết các thẻ cơ bản cần thiết để tạo ra một trang HTML5, chúng ta hãy bắt đầu xây dựng trang web của bạn. Bạn sẽ xây dựng một trang web cho Acme United. Trang hoàn thành được hiển thị trong Hình 2 và bạn có thể tải về để sử dụng (xem Tải về).Hình 2. Trang web Acme United
Nào, chúng ta hãy xây dựng một trang web. Trước tiên, có <!doctype>. Trong HTML5, <!doctype> đã được đơn giản hóa: Tất cả mọi thứ bạn cần nhớ là
html. Việc này không chỉ làm đơn giản hoá mục nhập
cho thẻ này, mà cũng làm cho nó có thể nâng cấp dễ dàng hơn. Lưu ý rằng nó không
được gọi là html5, mà chỉ là html. Bất kể có bao nhiêu phiên bản HTML đi nữa, thì <!doctype> luôn luôn có thể chỉ là html. Thẻ
<html> chứa tất cả các phần tử HTML
khác, trừ thẻ <!doctype>. Tất cả các phần
tử khác phải được lồng vào giữa thẻ
<html> và
</html>. Xem Liệt kê 12. Liệt kê 12. Ví dụ thẻ <!doctype>
<!doctype html> <html lang="en">
html và ngôn ngữ tiếng Anh, bạn
có phần tử <head>, có thể chứa các đoạn script
(kịch bản lệnh), thông tin hỗ trợ trình duyệt, các liên kết bảng định kiểu, siêu
thông tin, và các hàm khởi tạo khác. Bạn có thể sử dụng các thẻ sau trong phần head: <base><link><meta><script><style><title>
<title> (đầu đề) là nơi chứa tiêu đề hiện tại
của trang và là một phần tử của phần <head> cần
thiết. Đó là tiêu đề mà bạn nhìn thấy ở phía trên cùng của trình duyệt khi xem
trang. Thẻ <link> trong Liệt kê 13 xác định bảng
định kiểu CSS3 sẽ được sử dụng để biểu thị trang HTML5. Bảng định kiểu được gọi là
main-stylesheet.css. Liệt kê 13. Ví dụ thẻ <head>
<head>
<title>HTML5 Fundamentals Example</title>
<link rel="stylesheet" href="main-stylesheet.css" />
</head>
<body>, ngay sau các thẻ
<header> và <hgroup>, được mô tả ở trên. Vùng <h1> trong ví dụ này chứa tên của công ty của bạn, giả sử là Acme
United, và vùng <h2> chứa các thông tin thông báo
cho bạn rằng đó là phụ đề "A Simple HTML5 Example". Liệt kê 14 mô tả điều này. Liệt kê 14. Ví dụ thẻ <body> và thẻ <header>
<body >
<header>
<hgroup>
<h1>Acme United</h1>
<h2>A Simple HTML5 Example</h2>
</hgroup>
</header>
Liệt kê 15. ví dụ CSS3 #1
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 800px;
margin: 0em auto;
}
header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}
header h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}
<nav>, được thiết
kế để xử lý chuyển hướng trang web chính. Liệt kê 16. Ví dụ thẻ <nav>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<menu>— một thẻ đã gây ra sự nhầm lẫn đối với một số nhà thiết kế và phát
triển. Sự nhầm lẫn bắt nguồn từ thực tế hiểu lầm rằng việc chuyển hướng này là
"navigation menu". Thẻ <menu>, đã bị phản đối trong
HTML kể từ phiên bản 4.01 và giờ đây được tái sinh trong HTML5, được thiết kế để
tăng cường tính tương tác. Không nên sử dụng nó cho việc chuyển hướng chính. Thẻ duy
nhất nên được sử dụng cho việc chuyển hướng chính là thẻ <nav>. Bạn sẽ sử dụng thẻ <menu>
sau trong ví dụ này. Định dạng của chuyển hướng được CSS3 xử lý. Mỗi định nghĩa thẻ
<nav> được hiển thị trong Liệt kê 17 đại
diện cho một trạng thái cụ thể của các phần tử
<ul> và
<li> bên trong thẻ
<nav>. Liệt kê 17. Ví dụ CSS3 #2
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
<article>, chứa thông tin
<header> riêng của mình. Thẻ
<section> có trong thẻ
<article> cũng chứa một thẻ
<header> riêng của mình. Xem Liệt kê 18. Liệt kê 18. Ví dụ thẻ <article> và <section>
<article>
<header>
<h1>
<a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
</h1>
</header>
<p> Primum non nocere ad vitam Paramus . . . </p>
<section>
<header>
<h1>This is the first section heading</h1>
</header>
<p>Scientia potentia est qua nocent docentp . . .</p>
</section>
paragraph (đoạn), header, và section tất cả đều được định nghĩa
cho thẻ <article> có chứa chúng trong đó. Thẻ <h1> được định nghĩa ở đây không có cùng định dạng
như thẻ <h1> đã được định nghĩa ở mức page
(page-level). Liệt kê 19. Ví dụ CSS3 #3
article > header h1 {
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h1 a {
color: #000090;
text-decoration: none;
}
article > section header h1 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}
<section> thứ hai trong <article> chứa cùng thông tin cơ bản như <section> đầu tiên, nhưng lần này bạn sẽ sử dụng một thẻ <aside>, một thẻ <figure>, một thẻ <menu> >, và
một thẻ <mark>. Xem Liệt kê 20. Thẻ
<aside> được sử dụng ở đây để trình bày thông
tin không phải là một phần của luồng quanh nó. Thẻ <figure> chứa một ảnh đồ họa của Stonehenge. Thẻ <section> này cũng chứa thẻ <menu>, mà bạn sử dụng để tạo các button có các tên là 4 Muse. Khi
một trong các nút này được nhấn, nó cung cấp thông tin về Muse cụ thể. Thẻ <mark> được sử dụng bên trong thẻ <p> để làm nổi bật các từ veni, vidi, vici.Liệt kê 20. Ví dụ thẻ <article> và <section>
<section>
<header>
<h1>Second section with mark, aside, menu & figure</h1>
</header>
<p class="next-to-aside"> . . . <mark>veni, vidi, vici</mark>. Mater . . .</p>
<aside>
<p>This is an aside that has multiple lines. . . .</p>
</aside>
<menu label="File">
<button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
<button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
<button type="button" onClick="JavaScript:alert
('Urania . . .')">Urania</button>
<button type="button" onClick="JavaScript:alert
('Calliope . . .')">Calliope</button>
</menu>
<figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
<figcaption>Figure 1. Stonehenge</figcaption>
</figure>
</section>
<p> có chiều rộng ngắn hơn chiều rộng mà bạn đặt cho trang này. Sự
thay đổi này cho phép hiển thị những nhận xét bắt đầu ở bên phải chứ không đè lên
văn bản. Liệt kê 21 cho thấy cách đánh dấu này. Liệt kê 21. Ví dụ CSS3 #4
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}
Các phần tử video
Đây là thành phần cuối cùng của phần tử<article>:
phần video. Video ví dụ là một định dạng ogg tự động phát
khi trang được tải, phát liên tục, và cung cấp các nút điều khiển để tạm dừng và
phát. Ngày nay, có nhiều trường hợp các video định dạng ogg sử dụng phần mở rộng
ogv (v cho video), như trong Liệt kê 22. Thẻ <audio> làm việc theo cùng cách này. Liệt kê 22. Ví dụ <article> và <section>
<section>
<header>
<h1>This is a video section</h1>
</header>
<p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
controls autoplay loop>
<div class="no-html5-video"><p>This video will work in
Mozilla Firefox or Google Chrome only. </p>
</div>
</video></p>
</section>
</article>
video. Liệt kê 23. Ví dụ CSS3 #5
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}
Liệt kê 24. Ví dụ thẻ <footer>
<footer>
<p>Copyright: 2011 Acme United. All rights reserved.</p>
</footer>
</body>
</html>
Liệt kê 25. Ví dụ CSS3 #5
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
Kết luận
Việc hoàn thành trang web của bạn cũng kết thúc phần đầu tiên của loạt bài này. Mục tiêu của bài viết này là giới thiệu phiên bản HTML5 mới. HTML5 còn có nhiều điều thú vị hơn chỉ đơn thuần là một bản nâng cấp cho HTML4: Đó là cách mới để truyền thông kỹ thuật số. Với chức năng của CSS3 và JavaScript, HTML5 mang lại cho các nhà phát triển mọi thứ trong một gói-mã-giả. Nếu bạn sẵn sàng hấp thụ những gì mà bạn cần từ một lượng lớn thông tin HTML5 ngoài thông tin hiện có để sử dụng chung của chúng ta, thì bạn sẽ gia nhập vào đội ngũ các nhà phát triển và các nhà thiết kế web đa phương tiện HTML5 giỏi không ngừng gia tăng. Phần tiếp theo của loạt bài này sẽ xem xét cách mã hóa và định dạng các biểu mẫu HTML5.linkweb: https://www.ibm.com/developerworks/vn/library/wa-html5fundamentals/
HTML5 và CSS3 trong SEO
Đối với một nhà thiết kế web chuyên nghiệp
thì HTML5 với cấu trúc rõ ràng mạch lạch và sau nhiều thời gian thử thì
họ đã đưa ra một khẳng định đó là HTML5 hỗ trợ SEO rất tốt . Với cấu
trúc rõ ràng mạch lạc của cấu trúc thẻ trong html5 nó giúp các con bọ
của google đọc nội dung của website tốt hơn. Ngoài ra HTML5 còn giúp bọ
của google có thể đọc được các đoạn video
Thiết kế web seo đơn giản hơn với HTML5
HTML5 và CSS3 được nhận định là xu hướng tương lai của thiết kế web SEO bởi tối ưu của code giúp tăng tốc độ quét của spider google. Ví dụ như sự hỗ trợ các thẻ header, article, section,
… giúp hạn chế các code lằng nhằng id, class để đặt tên, chưa kể có khi
bị nhầm lẫn vì trùng tên. Hoặc phải vất vả add các đoạn script vào để
chạy video, audio, … nhưng với html5 thì chỉ cần 1 tag video, audio là đủ.
Bài viết này sẽ trình bày sự thay thế khá đáng kể tag div đối với html5, giúp việc cắt html cho web dễ dàng hơn, cũng có nghĩa là web sẽ được seo
tốt hơn. Các bạn đã quen dùng table có lẽ sẽ gặp một chút khó khăn đấy.
Các thẻ div được thay thế bằng các header, article, aside, … thực tế
chỉ là div nhưng đã được cấu hình sẵn vị trí cho dễ dàng định vị trên
web chứ không có gì ghê gớm cả.
Trước hết, mời các bạn xem qua tấm hình này:
Để thực hiện cắt html cho cấu hình tấm hình trên, đối với div các bạn phải viết thế này:
<div id=”header”>Header</div>
<div id=”menu”>Menu</div>
<div id=”content_left”>Left
<div class=”content”>Content 1</div>
<div class=”content”>Content 2</div>
</div>
<div id=”content_right”>Right
<div class=”content”>Content 1</div>
<div class=”content”>Content 2</div>
</div>
<div id=”footer”>Footer</div>
Cùng với CSS:
#header {
background-color: #F00;
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
}
.clear {
clear: both;
height: 0px;
}
#menu {
background-color: #0F0;
width: 100%;
height: 30px;
}
#content_left {
margin: 0px;
float: left;
height: 400px;
width: 70%;
background-color: #FF0;
}
.content {
height: 50px;
background-color: #999;
margin: 10px;
}
#content_right {
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
float: left;
}
#content_right .content {
height: 50px;
background-color: #FF9;
margin: 10px;
}
#footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}
background-color: #F00;
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
}
.clear {
clear: both;
height: 0px;
}
#menu {
background-color: #0F0;
width: 100%;
height: 30px;
}
#content_left {
margin: 0px;
float: left;
height: 400px;
width: 70%;
background-color: #FF0;
}
.content {
height: 50px;
background-color: #999;
margin: 10px;
}
#content_right {
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
float: left;
}
#content_right .content {
height: 50px;
background-color: #FF9;
margin: 10px;
}
#footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}
Cắt web trên bằng HTML5
như thế nào, trước hết ta thay <div id=”header”> bằng thẻ
<header>, thay <div id=”menu”> thành thẻ <nav>; thay
<div id=”content_left”> bằng <article>; thay <div
class=”content”> bằng <section>; thay <div
id=”content_right”> bằng <aside>; thay <div id=”footer”>
bằng <footer>. Như vậy, các div với tên id và class đã được code
htmlt5 hỗ trợ sẵn với các tag trên, thật tiện dụng phải không. Sau đó
các bạn thay đổi CSS nhé, các id và class giờ đây đã trở thành tag luôn,
nên không cần dấu “.” hay “#” gì cả, lúc đó CSS3 sẽ trở thành như thế
này:
body {
width:550px;
}
header {
background-color: #F00;
height: 100px;
}
width:550px;
}
header {
background-color: #F00;
height: 100px;
}
nav {
background-color: #0F0;
height: 30px;
}
article {
float:left;
height: 400px;
width: 70%;
background-color: #FF0;
}
article > section {
height: 50px;
background-color: #999;
margin: 10px;
}
aside > section {
height: 50px;
background-color: #FF9;
margin: 10px;
}
aside {
float:left;
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
}
footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}
background-color: #0F0;
height: 30px;
}
article {
float:left;
height: 400px;
width: 70%;
background-color: #FF0;
}
article > section {
height: 50px;
background-color: #999;
margin: 10px;
}
aside > section {
height: 50px;
background-color: #FF9;
margin: 10px;
}
aside {
float:left;
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
}
footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}
Còn đây, cắt layout cho trang trên với html5 sẽ trở thành như thế này đây:
<header>header</header>
<nav>Menu</nav>
<article>left
<section>content 1</section>
<section>content 2</section>
</article>
<aside>right
<section>content 1</section>
<section>content 2</section>
</aside>
<footer>footer</footer>
Chỉ ngắn gọn có vậy thôi, các bạn thấy thế nào, việc cắt layout html đã dễ dàng hơn, kèm theo là việc thiết kế web, đặc biệt là thiết kế web seo sẽ nhanh hơn và hiệu quả hơn phải không?
Chúc các bạn thực hiện tốt nhé.
linkweb:http://clickmedia.com.vn/tai-lieu-thiet-ke-website/139-thiet-ke-web-seo-don-gian-hon-voi-html5.html
Đăng ký:
Bài đăng (Atom)







