[SERIES] HỌC HTML5 THEO CHUẨN W3C! BÀI 1

I: HTML5 LÀ GÌ?

Đầu tiên nếu các bạn muốn học tốt HTML5 thì các bạn phải hiểu được HTML là gì?  HTML (viết tắt của từ HyperText Markup Language trong tiếng anh, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) nó là một ngôn ngữ đánh dấu (bao gồm các thẻ đánh dấu) được tạo ra để xây dựng nên các trang web với các đoạn thông tin được trình bày, hiển thị trên World Wide Web.

HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Hiện nay HTML đang được phát triển tiếp với phiên bản HTML5, và hơn nữa hứa hẹn mang lại diện mạo mới cho Web.

Lợi ích của việc sử dụng HTML5. Bằng cách dùng HTML5 động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản phức tạp. HTML5 không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày, do vậy việc học HTML5 không khó khăn và phức tạp như nghững ngôn ngữ khác.

II: CÁC THẺ TAG TRONG HTML5.

Dưới đây là những thẻ có trong HTML5, nếu các ban muốn học HTML5  tốt thì các bạn phải nhớ rõ và nắm chắc được các thẻ tag quan trọng hay dùng trong Web Deve trước đã. Trong series này mình sẽ chỉ hướng dẫn các bạn những thẻ hay dùng trong HTML5 thôi còn nếu muốn học hết e rằng phải nhờ tời http://www.w3schools.com/  rồi .

1: NHỮNG THẺ TAG MỚI TRONG HTML5.  (SẮP XẾP THEO APHABET)

  • <article> : Được dùng để định nghĩa một bài viết nào đó, hoặc một nội dung riêng biệt.
  • <aside>  : Được dùng để định nghĩa nội dung bên ngoài một nội dung chính (thường là phần sidebar trong trang web).
  • <audio> : Được dùng định nghĩa các file audio như âm thanh, video …
  • <canvas> : Được dùng để hiển thị đồ họa. (rất quan trọng và mạnh mẽ được dùng nhiều trong các WEB Game HTML5)
  • <command>: Được dùng để định nghĩa một nút lệnh, giống như một hộp kiểm, hoặc một button (nút).
  • <datalist> : Được dùng để định nghĩa một danh sách tùy chọn, sử dụng thành phần này cùng với các thành phần input (nhập).
  • <details> :  Được dùng để xác định thêm chi tiết hoặc điều khiển có thể được ẩn hoặc hiển thị theo yêu cầu.
  •  : Được dùng để xác định nội dung nhúng như một plugin.
  • <figure> :  Được dùng để xác định các nội dung liên quan mạch lạc với nhau, như hình ảnh, sơ đồ, code,…
  • <figcaption> : Được dùng để xác định một chú thích cho tag figure.
  • <header> : Được dùng để định nghĩa khu vực header (phần đầu trang web).
  • <footer> :Được dùng để định nghĩa khu vực footer (phần cuối của trang web).
  • <hgroup> : Được dùng để định nghĩa một nhóm các tiêu đề.
  • <keygen> : Được dùng để xác định một cặp trường khóa chính sử dụng cho form
  • <mark> :  Được dùng để xác định văn bản được đánh dấu, sử dụng khi muốn làm nổi bật văn bản của mình.
  • <meter> : Được dùng để định nghĩa một phép đo. Sử dụng chỉ cho phép đo với giá trị tối thiểu và tối đa.
  • <nav> :  Được dùng để định nghĩa cho các link danh mục có tính chất điều hướng (Menu).
  • <output> : Được dùng để đại diện cho các kết quả của phép tính.
  • <progress>: Được dùng để mô tả tiến trình làm việc.
  • <ruby> : Được dùng để định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á). Chú thích Ruby được sử dụng trong khu vực Đông Á, hiển thị cách phát âm của các ký tự Đông Á. (cái này dùng nhiều cho mấy thằng TÀU, HÀN XẺNG, NHẬT BỔN THÔI).
  • <rp> : Được dùng để hiển thị những nội dung bên trong khi trình duyệt không hỗ trợ ruby.
  • <rt>:  Được dùng để định nghĩa một lời giải thích hoặc cách phát âm của các ký tự (đối với kiểu chữ Đông Á).
  • <section>: Được dùng để định nghĩa một khu vực (một vùng bao quanh cái gì đó).
  • <summary>: Được dùng để xác định một tiêu đề cho các thành phần details, được sử dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của tài liệu.
  • <time>: Được dùng để xác định thời gian, ngày tháng, hoặc năm sinh.
  • <video> : Được dùng để xác định một video, chẳng hạn như một đoạn phim hoặc một trường video.
  • <wbr> : Được dùng để xử lý các đoạn text quá dài sẽ tự động xuống hàng (không tràn layout)

2: NHỮNG TAG TƯƠNG TỰ HTML4  VÀ XHTML.

  • <!–…–> :  Được dùng để xác định, tạo một comment, một chú thích.
  • <!DOCTYPE>:  Được dùng để xác định mẫu cho văn bản HTML.
  • <a>:  Được dùng để xác định một liên kết.
  • <abbr>:  Được dùng để mô tả cụm từ viết tắt.
  • <address>: Được dùng để xác định thông tin liên hệ (địa chỉ, mail, điện thoại,facebook account, google + …).
  • <area /> : Được dùng  xác định vùng bên trong map của ảnh.
  • <b> : Được dùng để hiển thị text đậm.
  • <base />:  Được dùng để xác định một địa chỉ mặc định hay một mục tiêu mặc định cho tất cả link trên trang.
  • <bdo> : được dùng để xác định hướng của text (từ trái sang phải hoặc từ phải sang trái).
  • <blockquote> : Được dùng để xác định một đoạn trích dẫn dài.
  • <body>: Được dùng để xác định phần thân của văn bản HTML (trang web)
  • <br /> : Được dùng để ngắt một đoạn text xuống dòng.
  • <button> : Được dùng để xác định một button (Nút).
  • <caption> : Được dùng chủ yếu để chú thích cho một đối tượng, dùng nhiều trong table và slider.
  • <cite> : Được dùng để xác định một câu trích dẫn.
  • <code> : Được dùng xác định  text giống code trong máy tính.
  • <col /> : Được dùng để xác định giá trị của cột (dùng nhiều khi kết hợp với input, textarea,..)
  • <colgroup> : Được dùng để xác định một nhóm cột trong table cho cùng một định dạng.
  • <dd> : Được dùng để xác định một mô tả đề mục trong danh sách ( được xem như phần nội dung trong danh sách).
  • <del> :  Được dùng để hiển thị đường gạch bỏ text.
  • <div> : Được dùng để xác định một khu phân chia, hay phân khu vực hoặc một vùng trong văn bản HTML . (rất rất quan trọng)
  • <em>: Được dùng để xác định  text cần nhấn mạnh.
  • <fieldset> : Được dùng để nhóm các thành phần bên trong form lại với nhau một cách hợp lý.
  • <form> : Được dùng để định dạng một form trong trang web cho người dùng nhập thông tin vào.
  • <h1> tới <h6> :  Được dùng để xác định tiêu đề cho từng phần của trang web, bài viết trên trang…
  • <head> : Được dùng để xác định, khai báo thông tin về văn bản HTML.
  • <hr /> : Được dùng để tạo một đường ngang trong đoạn văn bản HTML.
  • <html> : Được dùng để xác định một văn bản html.
  • <i> :  Được dùng để hiển thị chữ in nghiên.
  • <iframe> :  Được dùng để xác định một khung nội tuyến (hay dùng để xác định khung video).
  • <img /> : Được dùng để hiển thị một ảnh.
  • <input /> :  Được dùng để xác định một trường điều khiển nhập thông tin.
  • <label> :  Được dùng để tạo một nhãn cho phần input.
  • <legend> : Được dùng khi muốn xác định một chú thích cho một phần tử fieldset.
  • <li> :  Được dùng để xác định danh sách các item. (hay dùng trong menu đa cấp, và văn bản có các list…)
  • <link /> : Được dùng để xác định một liên kết.
  • <map> : Được dùng để xác định map cho image.
  • <menu> :  Được dùng để xác định danh sách menu.
  • <meta /> :  Được dùng để xác định siêu dữ liệu về một văn bản HTML.
  • <object> :  Được dùng để xác định một đối tượng nhúng.
  • <ol> :  Được dùng để xác định một danh sách có đánh số thứ tự.
  • <select> :  Được dùng để xác định một danh sách các lựa chọn.
  •  <option> :  Được dùng để xác định một tùy chọn trong một select.
  • <p> :  Được dùng để xác định một đoạn văn.
  • <script> :  Được dùng để xác định một script.
  • <small> :  Hiển thị Text nhỏ.
  • <span> :  Được sử dụng để nhóm các đoạn inline trong văn bản HTML..
  • <strong> :  Được dùng để hiển thị Text đậm.
  • <style> :  Xác định thông tin style  (chức năng giống css) cho văn bản.
  • <table> : Xác định một bảng trong văn bản HTML.
  • <tbody> :  Xác định một nhóm nội dung của table.
  • <td> :  Xác định một phần tử nội dung của table.
  • <textarea> : Được dùng xác định một vùng điều khiển để  nhập text trong văn bản HTML.
  • <th> :  Được dùng để xác định tiêu đề của một phần trong table.
  • <thead> : Một nhóm phần tử tiêu đề của table.
  • <title> :  Xác định một tiêu đề của văn bản HTML.
  • <tr> : được dùng để xác định một hàng của table.
  • <ul> : Được dùng để xác định một danh sách không đánh số thứ tự.
  • <var> : Được dùng để xác định phần giá trị của text

Trên đây là những thẻ TAG trong HTML5, nhưng không phải thẻ nào cũng được dùng phổ biến. Nên trong series này mình sẽ chỉ hướng dẫn các bạn sử dụng các thẻ TAG mà các Web Developer hay sử dụng thôi. Hẹn gặp lại các bạn trong bài sau.

 

Nguồn:  http://www.toidongian.com/series-hoc-html5-theo-chuan-w3c-bai-1.html

Tagged with: ,
Posted in HTML5, Web development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: