Các quy tắc căn bản của HTML5 - phần 3

Đăng bởi : 8/30/2013
Để học và tự lập trình website, thì người lập trình không thể không biết về html/css cũng như kiến thức căn bản php. Và để tối ưu tốt hơn về thiết người, thì HTML5 đã được ra đời. Và nó đem lại nhiều kết quả tốt. 
tài liệu php căn bản

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>.
 
<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.
 
<audio src="MyFirstMusic.ogg" controls autoplay loop>
     Your browser does not support the audio tag.
</audio>

Thẻ <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 postercho 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>.
 
<video src="MyFirstMovie.ogg" controls="controls">
     Your browser does not support the video tag
</video>

Các thẻ <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.
 
<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>

Thẻ <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.
 
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

Ngoài các thuộc tính 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>.
 
<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.
 
<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 (xemTải về).
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.
 
<!doctype html>
<html lang="en">

Sau khi chỉ ra nội dung là 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>
Thẻ <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.
 
<head>
     <title>HTML5 Fundamentals Example</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

Tiếp theo, bạn sử dụng thẻ <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.
 
<body >
     <header>
          <hgroup>
               <h1>Acme United</h1>
               <h2>A Simple HTML5 Example</h2>
          </hgroup>
     </header>

Cho đến nay CSS3 thường dùng để thiết lập trang được hiển thị trong Liệt kê 15. Trước tiên, bạn thiết lập phông chữ cho trang, sau đó đến các chi tiết cho phần thân. Bạn định nghĩa các kích thước của phần thân, rồi thiết kế cấu trúc đoạn tiêu đề cho các thẻ tiêu đề cấp đầu tiên và cấp thứ hai. Đây là các tiêu đề mà bạn sẽ sử dụng cho trang này.
 
* {
 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;
}

Liệt kê 16 hiển thị thẻ <nav>, được thiết kế để xử lý chuyển hướng trang web chính.
 
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

HTML5 cũng có một thẻ <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>.
 
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;
}

Tiếp theo là vùng Article. Vùng này, được định nghĩa bằng thẻ <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.
 
<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>

Liệt kê 19 cho thấy cách đánh dấu CSS3 để biểu thị ra định dạng này. Lưu ý rằng định nghĩa cho các vùng 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).
 
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;
}

Thẻ <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.
 
<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>

CSS3 cho phần này đã có một định nghĩa mới cho thẻ <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.
 
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;
}

Nguồn: http://www.ibm.com/developerworks/vn/library/wa-html5fundamentals/
Tags :
Bài sau
Bài trước
Tham gia bình luận

0 nhận xét: