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

HƯỚNG DẪN CÀI ĐẶT LARAVEL FRAMEWORK TRÊN LOCALHOST

I: GIỚI THIỆU VỀ LARAVEL FRAMEWORK.

Mình xin giới thiệu với các bạn một chút thông tin về laravel framework. Laravel được chính phát hành vào năm 2011 và nó phát triển bởi Taylor Otwell một lập trình viên có tiếng trong giới Web Developer.

Tại VIỆT NAM thì Laravel chưa được ưa chuông nhiều như CodeIgniter, nhưng trên thế giới nhất là các nước tây âu và Mỹ thì những lập tình viên ở đó sử dụng Laravel rất nhiều. Nó luôn được coi là 1 trong những PHP framework phổ biến vì dễ học, dễ tiếp cận nhất so với các PHP framework nổi tiếng khác như Zend Framework, Cake Framework, YII Framework, symfony FrameWork. Tuy vậy nhưng nó vấn trừu tượng hơn CodeIgniter một chút.

Laravel là một Framework rất mạnh mẽ, nó cũng có các chức năng và sức mạnh như các Framework phổ biến khác, nhiều Coder trên thế giới sau khi dùng Laravel thì có nói một câu nói đùa rằng “Trước khi gặp Laravel thì CodeIgniter là tuyệt đối, nhưng sau khi gặp Laravel thì ngày tàn của CodeIgniter sắp đến ” Laravel rất được biệt vì nó sử dụng rất nhiều các class, API của các framework khác đặc biệt là Symfony, vì lý do đơn giản là Taylor Otwell đã giải thích rằng tại sao phải viết lại những class đó trong khi Symfony đã viết rất tốt rồi.

Ưu điểm: hiện tại ngoài những ưu điểm mình nói ở trên thì mới tìm hiểu được thêm hai đặc tính nữa là

  • Autoloadtheonamespace
  • Các lệnh tương tác với cơ sở dữ liệu cực kỳ ngắn gọn và thân thiện.

Khuyết điểm duy nhất của nó tại thời điểm này ở VIỆT NAM là tài liệu bằng tiếng việt ít, cộng đồng nhỏ lẻ, và các nhà tuyển dụng cũng không yêu cầu Lập Trình viên phải biết Laravel nhiều như CodeIgniter hay Zend hoặc Cakephp.

Read more ›

Tagged with: , ,
Posted in Laravel, Web development

HƯỚNG DẪN CÀI ĐẶT CODEIGNITER FRAMEWORK TRÊN LOCALHOST

I: GIỚI THIỆU CHUNG

Trước khi vào phần chính của bài đúng như tiêu đề đã nêu trên mình xin mời các bạn download CodeIgniter tại <<< đây >>> và mình cũng muốn giới thiệu một chút về CodeIgniter Framework và tại sao lại là CodeIgniter chứ không phải là một FrameWork nào khác.

Tại VIỆT NAM thì Codeigniter luôn được coi là 1 trong những PHP framework phổ biến vì dễ học, dễ tiếp cận nhất so với các PHP framework nổi tiếng khác như Zend Framework, Cake Framework, YII Framework, symfony FrameWork và mới nổi gần đây nhất là Laravel FrameWork,…

Tuy là một Framework dễ học, dễ tiếp cận nhưng nó cũng có các chức năng, sức mạnh như các Framework phổ biến khác. CodeIgniter còn khuyến khích các lập trình viên sử dụng mô hình Model-View-Controller  cho các ứng dụng web của mình. Ưu điểm lớn nhất của nó là .

Read more ›

Tagged with: , , ,
Posted in CodeIgniter, Web development

NHỮNG CỘT MỐC ĐÁNG CHÚ Ý CỦA INTERNET QUA 25 NĂM RA ĐỜI VÀ PHÁT TRIỂN

Hôm nay ngày 13/3/2014 là sinh nhật lần thứ 25 của Internet,kể từ khi Internet ra đời đã nó đã làm thay đổi rất nhiều thứ trong cuộc sống của chúng ta, nó giống như một cây cầu nối bền vững làm cho thế giới xích lại gần nhau hơn, các học giả, nhà khoa học có thể tự do nghiên cứu mà không bị giới hạn bởi các quyển sách dày cộp và giới hạn về nội dung, mọi người có thể mua sắm trên khắp thế giới, mà không cần đi đến tận nơi, huynh đệ chúng ta có thể xem các trần cầu đỉnh cao của các giải bóng đá thể giới mà không cần phải đi qua 1/2 trái đất và rất nhiều tiện ích khác mà internet đã mang lại … Mời các bạn cùng xem lại những cột mốc của internet qua 25 năm ra đời và phát triển, một trong những phát minh vĩ đại nhất và mang tính chất thay đổi lịch sử loài người. Nhưng cũng có một bất ngờ nho nhỏ, chắc hẳn các bạn cũng biết đến định dạng ảnh .Gif mà chúng ta thi thoảng vẫn hay dùng trong website không? lịch sử của nó còn lớn hơn internet đến 2 tuổi lận đấy :)))).

8/1991: Tim Berners-Lê đã xây dựng lên website đầu tiên trên thế giới
1/1993: Đại học Illlinois giới thiệu Mosaic. Mosaic trình duyệt đầu tiên trên thế giới có thể hiển thị cả hình và chữ.
1994-1995: Excite, Lycos & Yahoo ra mắt cho phép tìm kiếm văn bản web và duyệt web cũng khởi nguồn trong 2 năm này.
12/1994: Netscape Navigator ra đời, và nó đã nhannh chóng trở thành trình duyệt phổ biến nhất thời bấy giờ. Lợi thế của Netscape là nó hiển thị toàn bộ chữ trước khi tải hình, rất phù hợp với băng thông nhỏ và tốc độ internet chậm trong quá khứ. Một điều thú vị hơn nữa đó là Netscape lại chính là tiền thân của trình duyệt nổi tiếng Firefox bây giờ.
8/1995: Internet Explorer xuất hiện, nó được tích hợp thẳng vào Windows 95 và kể từ khi đó thị phần của Netscape bắt đầu giảm.
1/1996: Sergey Brin & Larry Page nghiên cứu về công nghệ tìm kiếm mới: PageRank và thế là ông trùm tìm kiếm và (quảng cáo) Google ra đời chính thức từ đây.
7/1996: Microsoft ra mắt Hotmail, dịch vụ email nền web phổ thông đầu tiên trên thế giới. Hiện tại Hotmail đã bị đổi thành Outlook.com
11/1996: ICQ là dịch vụ nhắn tin hiện đại đầu tiên trên thế giới, dù IRC đã xuất hiện vào khoảng năm 1988.
2/2004: Facebook chính thức được thành lập bởi Mark Zuckerberg, một Web developer và CEO nổi tiếng bởi tài năng, đam mê, nhiệt huyết, khao khát thành công.
11/2004: Blizzard Entertainment ra mắt game online World of Warcraft, game MMO thành công nhất trong lịch sử với hơn 7 triệu thuê bao và tổng doanh thu đạt 2,3 tỷ đô la Mỹ, tính đến tháng 7/2013.
2/2005: Gặp khó khăn với việc tìm kiếm clip của Janet Jackson, 3 cựu nhân viên của PayPal đã tạo ra YouTube.
7/2006: Twitter chính thức được giới thiệu đến công chúng.
9/2008: Google Chrome ra mắt, hợp nhất thanh địa chỉ và ô tìm kiếm vào làm một: Omnibox.
11/2010: WikiLeaks làm chấn động cả thế giới
1/2011: Địa chỉ IPv4 cuối cùng được sử dụng.

 

Nguồn: http://www.toidongian.com/nhung-cot-moc-cua-internet-qua-25-nam-ra-doi-va-phat-trien.html

Tagged with: , ,
Posted in Web development