CÁCH SỬ DỤNG THẺ HEADING H1- H6 TRONG HTML5

I: ĐỊNH NGHĨA VÀ CÁCH SỬ DỤNG THẺ HEADING.

  • Nhóm thẻ <hx>: chữ “h” là viết tắt của từ “headings” nghĩa là tiêu đề hoặc  đề mục.
  • Các thẻ <hx> : Sử dụng thẻ <hx> để mô tả tiêu đề cho nội dung trong trang HTML, điều đó giúp trình duyệt nhận biết được tiêu đề (quang trọng, điểm nhấn) của một trang nội dung muốn nói tới.
  • Nhóm thẻ <hx> có giá trị từ <h1> tới <h6>: trong đó mức độ nhấn mạnh, tầm quan trọng giảm xuống từ <h1> cho tới <h6> (thẻ cho tiêu đề lớn nhất, quan trọng nhất là <h1> và điều đó sẽ giảm dần xuống cho tới h6, h6 cho kích cỡ tiêu đề bé nhất và ít quan trọng hơn so với 5 thẻ trên).
  • Lời Khuyên: Những nội dung bên trong nhóm thẻ Heading (<hx></hx>) chỉ nên chứa các thẻ thuộc nhóm inline.
  • Sử dụng nhóm thẻ (<hx></hx>):  Chỉ nên dùng để mô tả tiêu đề trong trang HTML5, không nên dùng cho các mục đích khác.

Hãy mở Sublime Text lên và tạo ra một file index.html có nội dung sau.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
</pre>
<!doctype HTML>
<html>
<head>
 <meta charset="utf8">
 <title>Cách sử dụng thẻ Heading H1- H6 trong HTML5</title>
 <link rel="stylesheet" href="css/style.css"/>
 <script src="js/jquery-1.9.1.min.js" </script>
 <script src="js/custom.js" </script>
</head>
<body>
 <h1>H1 là thẻ heading quan trọng nhất (lớn nhất)</h1>
 <h2>H2 là thẻ heading quan trọng thứ hai (lớn thứ nhì)</h2>
 <h3>H3 là thẻ heading quan trọng thứ ba (lớn thứ ba)</h3>
 <h4>H4 là thẻ heading quan trọng thứ tư (lớn thứ tư)</h4>
 <h5>H5 là thẻ heading quan trọng thứ năm (lớn thứ năm)</h5>
 <h6>H6 là thẻ ít có tính quan trọng hơn (nhỏ nhất)</h6>
</body>
</html>

Khi chạy trên trình duyệt ta sẽ thu được kết quả như sau.

Read more ›

Tagged with:
Posted in HTML5, Web development

CẤU TRÚC CỦA MỘT TRANG WEB HTML5 ĐƠN GIẢN

I: CẤU TRÚC ĐƠN GIẢN CỦA HTML5.

Cấu trúc đơn giản của HTML5 thường  có dạng như sau. Gồm 3 phần.

  1. <!Doctype>:  Đây là phần khai báo theo chuẩn W3C của trang web HTML5, trước đây ở các phiên bản HTML4/XHTML thì sẽ khác.
  2. <head></head>: Phần khai cho các thẻ như title, meta, css, javascript…
  3. <body> </body>: Phần chứa và hiện thi toàn bộ nội dung của trang web.

Cấu trúc cơ bản.

01
02
03
04
05
06
07
08
09
10
11
12
13
<!doctype HTML>
<html>
<head>
<title>Cấu trúc của một trang Web HTML5 đơn giản</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.9.1.min.js" </script>
<script src="js/custom.js" </script>
</head>
<body>
---- Phần chứa nội dung của trang web ----<
</body>
</html>

II: CẤU TRÚC CƠ BẢN CỦA TRANG WEB.

Mỗi một trang web có thể được xây dựng từ một bộ khung HTML khác nhau dẫn đến cấu trúc khác nhau (Layout), có trang  có một cột làm trung tâm cho trang web (thường thấy ở web nước ngoài), có trang có hai cột trong đó một cột làm phần chính chứa nội dung (main content), một cột chứa nộ dung tổng quát, những thống kê, hay những thực thể liên quan đến nội dung trang web. Sau đây chúng ta cùng tham khảo cấu trúc đơn giản sử dụng 2 cột để thể hiện (LayOut) cho trang web.

Read more ›

Tagged with:
Posted in HTML5, Web development

[SERIES] HỌC WORDPRESS! CÁCH DÙNG POST, PAGE, CATEGORY TRONG WORDPRESS

I: SỬ DỤNG CATEGORY, POST VÀ TAG.

Trong bài trước của series học wordpress mình đã giới thiệu cho các bạn bạn cách phân biệt post, page và category,tag. Và đúng như lời hứa hôm nay mình sẽ hướng dẫn các bạn sử dụng post, page và category,tag một cách hiệu quả.

Đầu tiên Các bạn hãy tạo một category. Để tạo category, bạn vào mục Posts -> Categories sẽ thấy nó hiện ra một bảng như sau.

Quản lý category trong wordpress

Quản lý category

Khu vực bên trái giúp bạn tạo một category mới và khu vực bên phải là nơi  hiển thị list những category đã có và khi bạn hover chuột qua  từng category nó sẽ hiển thị 3 nút chức năng lần lượt là Edit, Quick Edit và View.

Read more ›

Tagged with: ,
Posted in WordPress, Wordpress Skill

[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.

Read more ›

Tagged with: ,
Posted in HTML5, Web development

PHÂN BIỆT GIỮA POST VÀ PAGE, CATEGORY VÀ TAG TRONG WORDPRESS

Trong bài trước mình đã nói với các bạn, post là một phần rất quan trọng đối với wordpress, post sẽ giúp bạn truyền tải được nội dung, thông tin, hình ảnh video mà bạn muốn gửi tới độc giả qua từng bài viết. Thế như đối với những người mới bắt đầu tìm hiểu về wordpress thì lại thấy khó khăn trong việc phân biệt giữa post với page, giữa categoey với tag. Hôm nay mình sẽ giải thích chi tiết và sự giống và khác nhau giữa chúng giúp các bạn phân biêt rõ ràng hơn, nhờ đó sẽ quản trị webiste được tốt hơn.

I: PHÂN BIỆT GIỮA POST VÀ PAGE.

1: GIỐNG NHAU

Post và page đều có điểm giống nhau là chúng ta đều có thể dùng post và page để viết một bài viết chứa thông tin, hình ảnh, video hoặc có thể nói là toàn bộ nội dung mà chúng ta muốn gửi tới đọc giả, qua tưng bài viết khác nhau.

2: KHÁC NHAU.

POST: thường dùng để viết những bài viết được phân loại theo các danh mục riêng, có nội dung lớn, nội dung có thể thay đổi được một cách nhanh chóng, hoặc thay đổi theo thời gian.

Read more ›

Tagged with: ,
Posted in WordPress, Wordpress Skill

TÌM HIỂU BỐ CỤC CÁC MODULE TRONG DASHBOARD CỦA WORDPRESS

Trong bài trước của Series Học WordPress mình đã hướng dẫn các bạn cách cài đặt WordPress trên localhost. Hôm nay để tiếp tục Series Học WordPress mình sẽ cùng các bạn tìm hiểu bố cục các module trong Dashboard của WordPress. Dưới đây là hình ảnh trang Dashboard, để các bạn mới tìm hiểu về wordpress có thể học nhanh chóng mình sẽ chia trang Dashboard thành 4 khu vực khác nhau, được mình đánh số từ 1 đến 4.

Tìm hiểu bố cục các module trong Dashboard của WordPress

Các khu vực chính trong WordPress Dashboard

Read more ›

Tagged with: ,
Posted in WordPress, Wordpress Skill

[ SERIES] HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG SUBLIME TEXT 2

Hôm nay mình sẽ giới thiệu với các bạn một Editor mà mình rất thích sử dụng đó là Sublime Text 2 , trước kia khi chưa biết đến nó mình chỉ tin dùng NetBeans hoặc Eclips thôi, nhưng từ khi biết tới nó thì mình đã ngay lập tức chuyển sang và dùng Sublime text 2 để viết Code từ đó đến giờ đã được gần một năm.

Sublime text 2 hoàn toàn miễn phí nhưng điều mà mình thích nhất ở Editor này là sự nhẹ nhàng, mạnh mẽ, nhiều Plugin hỗ trợ cho việc viết code, nó tốn ít tài nguyên để vận hành (RAM) và cài đặt cũng dễ hơn rất nhiều so với hai thằng IDE mà mình kể trên. Do đó nó cho hiệu suất làm việc phải nói là tuyệt vời ông mặt trời, vậy các bạn còn trần trừ gì nữa hãy trang bị cho mình vũ khí thật tốt để lao vào cuộc chiến nào   :))))).

I: CÀI ĐẶT SUBLIME TEXT 2

Hôm nay mình sẽ hướng dẫn các bạn cài đặt Sublime text 2.0.2 nhé, lúc mình viết bài này thì đã có sublime text 3 nhưng chỉ ở phiên bản beta thôi, hơn nữa mình đã thử cài đặt bản 3.x nhưng khi cài bản này vào mình nhận thấy một điều là đa số các Plugin của phiên bản 2.x  không chạy được trên bản 3.x, có lẽ nó sẽ cần một chút thời gian để giải quyết vấn đề tương thích với các Plugin. Okay Here We Go  … one – two!

Đầu tiên các bạn hãy vào địa chỉ này   http://www.sublimetext.com/2  để download sublime text, các bạn chọn phiên bản phù hợp với hệ điều hành của mình rồi download về, mình khuyên các bạn hãy chọn bản portable version, vì bản này là bản không cần cài đặt nên các bạn chỉ cần download về và bật lên sử dụng thôi. Dưới đây là hình ảnh minh họa cho Sublime text nhé.

Read more ›

Tagged with: ,
Posted in Editor, Sublime Text