Hiển thị danh ngôn ngẫu nhiên bằng PHP trên blogspot

Cũng như ngôn ngữ Javascript, mình đến với PHP chỉ bằng con đường tự mày mò nghiên cứu trong những thời gian rảnh rỗi và chưa từng trải nghiệm qua bất kỳ khóa học nào. Quả thật, PHP không dễ cảm thụ, nhưng mình nghĩ các bạn có thể học được nếu có lòng kiên trì và đam mê. Hy vọng qua những ví dụ từ dễ đến khó được ứng dụng trên nền tảng Blogspot, các bạn sẽ từng bước hiểu được tường tận về ngôn ngữ PHP.

Qua bài này, mình sẽ giúp bạn hiển thị những câu danh ngôn một cách ngẫu nhiên theo như DEMO bên dưới (nhấn F5 để thấy tác dụng).



Điều trước tiên là bạn cần có một hosting (có thể dùng free hosting như byethost.com để thử nghiệm). Mở công cụ Notepad trên máy tính của bạn rồi dán vào đó bằng đoạn code bên dưới rồi lưu file với tên là randomquotes.php.

1. <?
2. //////////////////////////////////////////////////////
3. // PHP Random Quote Script for Blogspot applied by www.thuthuatblogger.info
4. // Many thanks to http://davidmarotz.com/ for its original PHP code
5. //////////////////////////////////////////////////////
6. Header("content-type: application/x-javascript");
7. $bgcolor = '#FFFFCC';
8. $textcolor = 'black';
9. $textcolor2 = 'brown';
10. $textsize = '4';
11. $textsize2 = '3';
12. // Array Structure:  "Quote","Author"
13. $allqts = array
14.     ("The Black Knight Always Triumphs!",
15.         "Monty Python",
16.     "I swear by my life and love of it that I will never live for the sake of<br>another man, nor ask another man to live for mine" ,
17.         "Atlas Shrugged",
18.     "It is clear that the individual who persecutes a man, his brother,<br> because he is not of the same opinion, is a monster",
19.         "Voltaire",
20.     "I agree that there is a natural aristocracy among men<br>The grounds of this are virtue and talents.",
21.         "Thomas Jefferson",
22.     "Liberty, when it begins to take root, is a plant of rapid growth.",
23.         "George Washington",
24.     "Never argue with an idiot. <br>They drag you down to their level <br>then beat you with experience",
25.         "Dilbert",
26.     "The Answer is 42. What is the question?",
27.         "Hitchikers Guide to the Galaxy",
28.     "Anyone who has never made a mistake has never tried anything new",
29.         "Albert Einstein",
30.     "Progress doesn't come from early risers, progress is made<br>by lazy men looking for easier ways to do things.",
31.         "Lazarus Long <font size=-2>(Time Enough for Love by Robert A. Heinlein)</font>",
32.     "Throughout history, poverty is the normal condition of man. <br>Advances which permit this norm to be exceeded - here and there, now and then - <br>are the work of an extremely small minority, frequently despised,<br> often condemned, and almost always opposed by all right-thinking people. <br>Whenever this tiny minority is kept from creating, or (as sometimes happens)<br> is driven out of a society, the people then slip back into abject poverty.<br><br>This is known as 'bad luck.'",
33.         "Robert Heinlein",
34.     "A little learning is a dangerous thing; Drink deep, or taste not the<br>Pierian spring.  There shallow draughts intoxicate the brain, <br>and drinking largely sobers us again",
35.         "Alexander Pope",
36.     "The early bird gets the worm, but the second mouse gets the cheese",
37.         "Anonymous",
38.     "Subjugating the enemy's army without fighting is the true pinnacle of excellence",
39.         "Sun-tzu, The Art of War",
40.     "Work as though you were to live 100 years; pray as if you were to die tomorrow",
41.         "Benjamin Franklin",
42.     "The world is a stage, but the play is badly cast",
43.         "Oscar Wilde",
44.     "Truth is generally the best vindication against slander.",
45.         "Abraham Lincoln",
46.     "...mercy to the guilty is cruelty to the innocent...",
47.         "Adam Smith",
48.     "...I wish that I may never think the smiles of the great and powerful<br> a sufficient inducement to turn aside from the straight path<br> of honesty and the convictions of my own mind",
49.         "David Ricardo",
50.     "Democracy is the worst form of government except for all the others",
51.         "Winston Churchill",
52.     "You can only know the highest peaks if you have experianced the lowest valley's",
53.             "Richard Nixon",
54.     "They dress the wound of my people as though it were not serious. <br>'Peace, peace,' they say, when there is no peace.",
55.         "Jeremiah 6:14",
56.     "It is better to remain silent and be thought a fool<br> than to open your mouth and remove all doubt.",
57.         "Jonathan Swift",
58.     "The market system delivers the goods people want,<br>but those who make it work cannot readily explain why it is so.<br>The socialst or communist system does not deliver the goods, <br>but those who operate it can readily explain away its failure.",
59.         "F.A. Hayek, Law, Legislation and Liberty, Vol. II",
60.     "Never Stop Exploring^tm",
61.         "The North Face"
62.         );
63. // Gets the Total number of Items in the array
64. //  Divides by 2 because there is a Quote followed by an Author
65. $totalqts = (count($allqts)/2);
66. // Subtracted 1 from the total because '0' is not accounted for otherwise
67. $nmbr = (rand(0,($totalqts-1)));
68. $nmbr = $nmbr*2;
69. //$nmbr = 18;
70. $quote = $allqts[$nmbr];
71.          $nmbr = $nmbr+1;
72. $author = $allqts[$nmbr];
73. $space = "<font color=$bgcolor>.....................................</font>";
74. echo "document.write(\"<center><font color=$textcolor size='$textsize'><i>$quote</i></font><br>$space<font color=$textcolor2 size='$textsize2'>$author</font></center>\")";
75. ?>

Trong đoạn code trên, bạn có thể thay thế những câu danh ngôn tiếng Anh bằng những câu danh ngôn tiếng Việt tương ứng, thêm hoặc bớt tùy ý theo đúng định dạng. Chú ý dùng <br> để xuống dòng cho câu văn.

Upload file randomquotes.php lên hosting của bạn để sử dụng.

Để hiển thị danh ngôn thì bạn đặt trong bài viết Blogspot hoặc tiện ích HTML/Javascript bằng dòng code như sau:

1. <script type="text/javascript" src="http://www.tenmienhostingcuaban.com/randomquotes.php"></script>

Chạy PHP bằng Javascript ngoại
Danh ngôn ngẫu nhiên bằng Javascript

Cuộc thi dự đoán thứ hạng đội tuyển U23 Việt Nam tại SEA Games 26

Đội tuyển bóng đá U23 Việt Nam sẽ có trận cầu đầu tiên quan trọng chiều nay với đội U23 Philippines. Với lòng nhiệt thành của một fan hâm mộ thật sự đối với bóng đá Việt Nam, thay mặt Ban Quản trị Thủ thuật Blogger, xin chúc các chàng trai trẻ của đội tuyển U23 Việt Nam sẽ có một trận đấu cống hiến, chiến thắng chính mình và chiến thắng đối thủ, để lại nhiều cảm xúc sâu sắc cho khán giả và người xem truyền hình. Xin chúc đội tuyển U23 Việt Nam sẽ thi đấu ấn tượng suốt đại hội thể thao SEA Games 26, vượt qua mọi đối thủ để đi đến trận đấu cuối cùng và đứng trên bục vinh quang cao nhất để thỏa lòng người hâm mộ Việt Nam.

Đồng hành cùng đội tuyển bóng đá U23 Việt Nam tham dự SEA Game 26, Thủ thuật Blogger tổ chức cuộc thi dự đoán thứ hạng của đội tuyển U23 Việt Nam tại giải đấu này.

* Thể lệ cuộc thi như sau:

1. Chủ đề: Dự đoán thứ hạng của đội tuyển bóng đá nam U23 Việt Nam tại SEA Games 26. Các thứ hạng gồm: vô địch, á quân, hạng ba, hạng tư, không có thứ hạng.

2. Thời gian tham gia dự đoán: 04/11 – 15/11/2011.

3. Giải thưởng:

- 1 giải nhất: Một Blogger Template trị giá 10 USD;

- 1 giải nhì: 01 suất tùy biến Template theo yêu cầu trị giá 5 USD.

Người trúng giải nhất là người dự đoán đúng thứ hạng của đội tuyển và dự đoán gần đúng nhất về số người có cùng câu trả lời. Nếu kết thúc chương trình, có từ 2 bạn đọc trở lên cùng dự đoán đúng thì Ban Tổ chức sẽ trao giải cho bạn đọc có thời gian dự đoán đúng sớm nhất. Người trúng giải nhì là người dự đoán đúng thứ hạng của đổi tuyển và dự đoán gần đúng nhất về số người có cùng câu trả lời sau người trúng giải nhất.

Để tham gia cuộc thi, bạn đọc soạn tin nhắn theo cú pháp:

U23VN [Thứ hạng] [Số người cùng dự đoán như bạn] gửi 0909841270

Chúc các bạn may mắn!

* Kết quả dự đoán công bố ngày 22/11/2011:

Có 3 người dự đoán như sau:
- Số điện thoại 01278882345 dự đoán U23 Việt Nam vô địch, số người cùng dự đoán là 500
- Số điện thoại 0972990892 dự đoán U23 Việt Nam xếp hạng 3, số người cùng dự đoán là 92
- Số điện thoại 0977504688 dự đoán U23 Việt Nam xếp hạng 3, số người cùng dự đoán là 2.

Rất tiếc không có bạn nào trúng giải. Chân thành cảm ơn các bạn. Hẹn các bạn ở lần sau.

Script phân trang cho bảng

Trước đây hẳn bạn nghe nhiều đến script phân trang cho toàn bộ blog và phân trang cho nội dung trong bài viết, chứ ít khi nghe kiểu phân trang cho bảng. Đôi khi bạn cần phải dùng đến bảng (table) để bố trí nội dung theo nhiều cột và nhiều dòng giống như trong văn bản Microsoft Word. Trong trường hợp nội dung quá nhiều thì bảng sẽ trở nên rất dài, khi đó với script phân trang sẽ giúp bảng trở nên gọn gàng hơn.

DEMO

Để phân trang cho bảng như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

1. <script type="text/javascript">
2. //<![CDATA[
3. function Pager(tableName, itemsPerPage) {
4.     this.tableName = tableName;
5.     this.itemsPerPage = itemsPerPage;
6.     this.currentPage = 1;
7.     this.pages = 0;
8.     this.inited = false;
9.    
10.     this.showRecords = function(from, to) {      
11.         var rows = document.getElementById(tableName).rows;
12.         // i starts from 1 to skip table header row
13.         for (var i = 1; i < rows.length; i++) {
14.             if (i < from || i > to)
15.                 rows[i].style.display = 'none';
16.             else
17.                 rows[i].style.display = '';
18.         }
19.     }
20.    
21.     this.showPage = function(pageNumber) {
22.           if (! this.inited) {
23.                    alert("not inited");
24.                    return;
25.           }
26.  
27.         var oldPageAnchor = document.getElementById('pg'+this.currentPage);
28.         oldPageAnchor.className = 'pg-normal';
29.        
30.         this.currentPage = pageNumber;
31.         var newPageAnchor = document.getElementById('pg'+this.currentPage);
32.         newPageAnchor.className = 'pg-selected';
33.        
34.         var from = (pageNumber - 1) * itemsPerPage + 1;
35.         var to = from + itemsPerPage - 1;
36.         this.showRecords(from, to);
37.     }  
38.    
39.     this.prev = function() {
40.         if (this.currentPage > 1)
41.             this.showPage(this.currentPage - 1);
42.     }
43.    
44.     this.next = function() {
45.         if (this.currentPage < this.pages) {
46.             this.showPage(this.currentPage + 1);
47.         }
48.     }                      
49.    
50.     this.init = function() {
51.         var rows = document.getElementById(tableName).rows;
52.         var records = (rows.length - 1);
53.         this.pages = Math.ceil(records / itemsPerPage);
54.         this.inited = true;
55.     }
56.  
57.     this.showPageNav = function(pagerName, positionId) {
58.           if (! this.inited) {
59.                    alert("not inited");
60.                    return;
61.           }
62.           var element = document.getElementById(positionId);
63.          
64.           var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
65.         for (var page = 1; page <= this.pages; page++)
66.             pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
67.         pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';          
68.        
69.         element.innerHTML = pagerHtml;
70.     }
71. }
72. //]]>
73. </script>

Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]></b:skin> để định dạng các thuộc tính cho phần phân trang:

1. .pg-normal {
2.        color: red;
3.        font-weight: normal;
4.        text-decoration: none;  
5.        cursor: pointer;  
6. }
7. .pg-selected {
8.        color: black;
9.        font-weight: bold;      
10.        text-decoration: underline;
11.        cursor: pointer;
12. }

Lưu Template.

Bước 3. Khi tạo nội dung trong một bài viết nào đó, hãy sử dụng cấu trúc HTML cho bảng dưới dạng như sau (ở đây demo bảng có 3 cột và 9 dòng để phân trang thành 3 trang, bạn có thể vận dụng linh hoạt):

1. <table id="results">
2.      <tr>
3.           <th>Heading 1</th>
4.           <th>Heading 2</th>
5.           <th>Heading 3</th>
6.      </tr>
7.      <tr>
8.           <td>Column 1 – Row 1</td>
9.           <td>Column 2 – Row 1</td>
10.           <td>Column 3 – Row 1</td>
11.      </tr>
12.      <tr>
13.           <td>Column 1 – Row 2</td>
14.           <td>Column 2 – Row 2</td>
15.           <td>Column 3 – Row 2</td>
16.      </tr>
17.      <tr>
18.           <td>Column 1 – Row 3</td>
19.           <td>Column 2 – Row 3</td>
20.           <td>Column 3 – Row 3</td>
21.      </tr>
22.      <tr>
23.           <td>Column 1 – Row 4</td>
24.           <td>Column 2 – Row 4</td>
25.           <td>Column 3 – Row 4</td>
26.      </tr>
27.      <tr>
28.           <td>Column 1 – Row 5</td>
29.           <td>Column 2 – Row 5</td>
30.           <td>Column 3 – Row 5</td>
31.      </tr>
32.      <tr>
33.           <td>Column 1 – Row 6</td>
34.           <td>Column 2 – Row 6</td>
35.           <td>Column 3 – Row 6</td>
36.      </tr>
37.      <tr>
38.           <td>Column 1 – Row 7</td>
39.           <td>Column 2 – Row 7</td>
40.           <td>Column 3 – Row 7</td>
41.      </tr>
42.      <tr>
43.           <td>Column 1 – Row 8</td>
44.           <td>Column 2 – Row 8</td>
45.           <td>Column 3 – Row 8</td>
46.      </tr>
47.      <tr>
48.           <td>Column 1 – Row 9</td>
49.           <td>Column 2 – Row 9</td>
50.           <td>Column 3 – Row 9</td>
51.      </tr>
52. </table>
53. <div id="pageNavPosition"></div>
55. <script type="text/javascript"><!--
56.        var pager = new Pager('results', 3);
57.        pager.init();
58.        pager.showPageNav('pager', 'pageNavPosition');
59.        pager.showPage(1);
60. //--></script>

Ở đoạn script trên thì số 3 biểu thị số dòng mỗi trang, bạn có thể điều chỉnh tùy theo trường hợp áp dụng của bạn.

Sổ lưu niệm

Lời đầu tiên xin chân thành cảm ơn sự ủng hộ nhiệt tình của quý bạn đọc gần xa đối với trang web Thủ thuật Blogger trong thời gian qua.

Ban Quản trị Thủ thuật Blogger đã, đang và sẽ không ngừng nỗ lực phấn đấu để trang web ngày càng phong phú hơn, chất lượng hơn để đáp ứng yêu cầu ngày càng cao của các bạn. Quả thật, trong chặng đường đã qua không thể nào tránh khỏi những thiếu sót, những điều chưa hoàn thiện. Nếu các bạn cảm thấy những điểm chưa hài lòng, chưa có sự đổi mới, hẳn đó là vì sức lực của Ban Quản trị cũng có hạn, không thể làm thỏa mãn đến từng chân tơ kẻ tóc đối với tất cả mọi mong muốn của bạn đọc. Rất mong quý bạn đọc cảm thông.

Sổ lưu niệm là nơi để các bạn viết vài dòng nhắn gửi, những lời tri ân hoặc những góp ý đối với Ban Quản trị giúp Thủ thuật Blogger có thêm cơ sở để ngày càng nâng cao chất lượng thông tin. Sổ lưu niệm cũng có thể là nơi khách vãng lai lưu lại những dòng chân tình nhắn nhủ với người thân quen, tri kỷ, người yêu dấu, bạn bè … để nhỡ biết đâu đó người ấy có thể đọc được tâm tình của bạn …

Quy định chung của Sổ lưu niệm: sử dụng tiếng Việt có dấu; ngôn ngữ nghiêm túc, lành mạnh.

Thân mến!

Định dạng CSS riêng cho các tag có số bài viết nhiều hơn một số nhất định

Tiện ích đám mây nhãn (Tag Cloud) rất cần thiết cho blogspot, giúp người dùng dễ dàng tìm kiếm bài viết theo từng chuyên mục. Trước đây mình đã từng hướng dẫn tùy biến màu sắc cho các tag trên tiện ích này. Hôm nay mình sẽ hướng dẫn bạn cách định dạng CSS riêng cho các tag có số bài viết nhiều hơn một con số nhất định nào đó. Bạn có thể xem demo ở tiện ích Tag Cloud trên Thủ thuật Blogger. Ở đây mình định dạng cho các tag có số bài viết lớn hơn số 10.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích Tag Cloud này gần với nó, rồi đặt sau thẻ </b:widget> đã tìm bằng đoạn code bên dưới:

1. <b:widget id='Label100' locked='false' title='Tag Cloud' type='Label'>
2. <b:includable id='main'>
3.   <b:if cond='data:title'>
4.     <h2><data:title/></h2>
5.   </b:if>
6.   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
7.       <b:loop values='data:labels' var='label'>
8.         <b:if cond='data:label.count &gt; 10'>
9.  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
10.           <b:if cond='data:blog.url == data:label.url'>
11. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
12. <b:else/>
13. <style>
14. a#more10post_label {background:#777;padding: 0 3px 0 3px}
15. </style>
16. <b:if cond='data:showFreqNumbers'>
17. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name' id='more10post_label'><data:label.name/></a>
18. <b:else/>
19. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
20. </b:if>
21. </b:if>
22.         </span>
23.   <b:else/>
24. <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
25.           <b:if cond='data:blog.url == data:label.url'>
26. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
27. <b:else/>
28. <b:if cond='data:showFreqNumbers'>
29. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name'><data:label.name/></a>
30. <b:else/>
31. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
32. </b:if>
33. </b:if>
34.         </span>
35. </b:if>
36.  </b:loop>
37.      </div>
38. </b:includable>
39. </b:widget>

Ở đây mình gán id='more10post_label' để chuyên biệt hóa liên kết của các tag có số bài viết lơn hơn 10. Từ đó bạn có thể thêm thuộc tính CSS (ở dòng code số 14) để tạo bản sắc cho tiện ích.

Lưu Template.

Bước 2. Vào Page Elements. Chỉnh sửa tiện ích Tag Cloud, cho tiện ích hiển thị dưới dạng Cloud và chọn Show number of posts per label theo như hình minh họa bên dưới.

Về phần CSS, bạn có thể tham khảo thêm ở bài viết Tùy biến tiện ích đám mây nhãn.

Làm thế nào để có sitelinks cho blogspot của bạn?

“Mình rất vui khi Thủ thuật Blogger đã có Google Sitelinks khi tên miền thuthuatblogger.info gần tròn 3 tháng tuổi. Sitelinks đã có với các từ khóa thuthuatblogger, thuthuatblogger.info, Huynh Nhat Ha.”

Vấn đề được nêu ra ở đây là: Làm thế nào để có sitelinks cho blogspot?

Google Sitelinks là gì?

Chúng là những liên kết hiển thị ngay bên dưới URL hoặc phần mô tả nội dung trang web trên kết quả tìm kiếm của Google, giúp người dùng tìm kiếm thông tin trong trang web hoặc blog dễ dàng hơn, giúp tiết kiệm thời gian của người dùng.

Lợi ích của việc có Google Sitelinks là gì?

Việc blogspot của bạn có sitelinks sẽ đem lại 2 lợi ích quan trọng nhất là giúp tăng traffic và đạt được niềm tin cao hơn nơi người dùng (bởi vì chỉ những trang có uy tín và đáng tin cậy mới có sitelinks).

Những điều kiện tiên quyết để có sitelinks là gì?

(1) Google chỉ hiển thị sitelinks với những từ khóa đạt tỉ lệ click (CTR) rất cao, thông thường là các từ khóa thương hiệu, tên miền. Ví dụ đối với Thủ thuật Blogger thì sitelinks hiển thị với các từ khóa: thuthuatblogger.info, thuthuatblogger, Huynh Nhat Ha.

(2) Google chỉ hiển thị những liên kết mà Googlebot có thể dò tìm từ trang chủ, thường là các liên kết HTML nằm trong thanh menu đầu trang và được click nhiều nhất.

Google không quy định về tuổi thọ tên miền cũng như kiểu tên miền để có sitelinks, do vậy blog của bạn nếu giữ nguyên tên miền .blogspot.com hoặc sử dụng tên miền tùy chỉnh đều có quyền có sitelinks, có thể trong vòng 01 tuần hoặc 01 – 02 – 03 – 04 – 05 – 06 – 07 … tháng.

Không phải trang nào cũng đều có sitelinks, do vậy cũng không có gì ngạc nhiên khi blogspot của bạn chưa có sitelinks dù tên miền đã được sử dụng thậm chí cả năm trời.

Làm thế nào để blogspot của bạn có sitelinks?

Đây là câu hỏi được cộng đồng Blogspot rất quan tâm. Được biết Google sử dụng sitelinks một cách tự động thông qua một thuật toán và một trang sẽ có sitelinks khi nó được đánh giá là một trang uy tín. Do đó blog của bạn cần có một lượng backlinks tốt, có một lượng lớn người dùng tìm kiếm blog của bạn trên Google. Để làm được như vậy, theo mình, bạn cần thực hiện 2 điều sau đây:

(1) Tối ưu hóa việc lập chỉ mục blogspot trên công cụ tìm kiếm Google. Nói cách khác, bạn cần chủ động tối ưu hóa thẻ meta mô tả theo tiêu chuẩn của Google. Hành động này sẽ giúp tăng cường tỷ lệ click cho các từ khóa chủ chốt của trang.

(2) Tạo thanh menu đầu trang chứa các liên kết HTML thuần túy (không chứa Javascript). Như các bạn biết thì Google chặn các liên kết đến trang nhãn của blogspot nên bạn cần đặt các liên kết là trang item và trang tĩnh trên thanh menu, tốt nhất là các bài viết thật nổi bật nhằm đạt tỷ lệ click cao nhất từ người dùng.

Ở đâu đó trên Internet có người chỉ cho bạn hàng tá cách để có sitelinks tuy nhiên theo mình chỉ cần hội đủ 2 điều kiện tiên quyết nói trên là được, như mình đã áp dụng cho Thủ thuật Blogger vậy. Ngoài ra bạn cần cập nhật nội dung blog thường xuyên bằng những bài viết mới: Các bài viết có thể được đăng với cường độ mỗi ngày một bài, cứ hai ngày một bài hoặc mỗi tuần một/hai bài … tùy theo khả năng và quỹ thời gian của bạn. Nội dung bài viết chất lượng, tránh sao chép từ các trang khác để tạo uy tín cho trang của bạn.

Chạy PHP bằng file Javascript bên ngoài

Một trong những khía cạnh ít được biết đến của file javascript bên ngoài là khả năng tham chiếu một file PHP (.php) tương tự như một file .js. Bằng cách sử dụng file Javascript bên ngoài, chúng ta có thể thấy PHP và Javascript có thể cùng hoạt động mà bạn có thể nghĩ là không thể.

Cú pháp để tham chiếu một file PHP sử dụng file Javascript bên ngoài như sau:

1. <script type="text/javascript" src="http://www.myhostplace.com/scriptname.php"></script>

Trong đó http://www.myhostplace.com/scriptname.php là đường dẫn đến script PHP thay thế cho file .js thông thường.

Sau đây là một ví dụ cơ bản về một script PHP, đó là showip.php:

1. <?
2. //"showip.php" display visitor IP address on any webpage
3. Header("content-type: application/x-javascript");
4. $serverIP=$_SERVER['REMOTE_ADDR'];
5. echo "document.write(\"Your IP address is: <b>" . $serverIP . "</b>\")";
6. ?>

Đoạn script PHP trên sẽ được đặt vào file ngoài như sau:

1. <script type="text/javascript" src="showip.php"></script>

Và đây là kết quả hiển thị:



Ở ví dụ trên bạn có thể thấy một script PHP thông thường viết ra địa chỉ IP của khách truy cập khi được tham chiếu sử dụng file Javascript ngoài, gồm 2 chi tiết quan trọng: một hàm header nằm ở đầu để thông báo cho trang web biết rằng một script PHP đang xuất ra một file Javascript; vì phần xuất ra cuối cùng của scritp PHP cần phải là một file .js hợp lệ nên phần xuất ra PHP phải tuân theo cú pháp Javascript hợp lệ, vậy để hiển thị địa chỉ IP từ phương diện Javascript thì hàm echo kèm "document.write()" sẽ gửi nội dung trở về trang.

Khả năng tham chiếu script PHP trong một file Javascript bên ngoài rất hữu ích. Trên cơ sở này, chúng ta có thể mở rộng ứng dụng PHP vào blogspot để nâng Blogger lên một tầm cao mới.

Sắp tới rất có thể chúng ta sẽ từng bước trải nghiệm PHP trên nền tảng Blogger nên từ lúc này, các bạn cũng nên tậu cho mình một tài khoản host, có thể là có phí hoặc miễn phí để host các file PHP. Nếu bạn không thích mua host thì có thể xài free host như byethost.com. Bạn nào đã có tài khoản Google App Engine thì host PHP đã hơn, ổn định hơn.

Mã để tạo nút Add to Blogger

Blogger cho phép bạn có thể thiết kế những tiện ích mới để người khác có thể thêm vào blogspot của họ. Trước tiên bạn cần tạo code cho tiện ích, sở hữu một website hoặc webblog rồi tạo một form để gửi kết quả tiện ích lên Blogger. Trong form này bạn gắn toàn bộ nội dung tiện ích mà bạn tạo ra. Khi người dùng click vào nút thì sẽ được dẫn đến Blogger nơi có thể gắn tiện ích vào blog của họ. Bạn có thể xem Demo bằng cách lick vào nút bên dưới để cài đặt tiện ích Recent Post with Thumbnail.

<script type="text/javascript"> imgr = new Array(); imgr[0] = "http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png"; showRandomImg = true; tablewidth = 300; cellspacing = 7; borderColor = ""; bgTD = ""; imgwidth = 50; imgheight = 50; fntsize = 14; acolor = ""; cmsize = 2; aBold = true; icon = " "; text = "nhận xét"; showPostDate = false; summaryPost = 0; summaryFontsize = 11; summaryColor = "#666"; icon2 = " "; </script> <script type="text/javascript"> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('16 17(18,19){e s=18.w("<");x(e i=0;i<s.h;i++){g(s[i].z(">")!=-1){s[i]=s[i].Q(s[i].z(">")+1,s[i].h)}}s=s.1s("");s=s.Q(0,19-1);1t s}16 1u(R){S.T(\'<1a A="\'+1v+\'" 1b=0 1w="#1x" 1c="\'+1c+\'" 1y="\'+1d+\'" 1z="1A">\');j=(1B)?1e.1C((U.h+1)*1e.1D()):0;l=1E 1F();x(e i=0;i<1G;i++){e f=R.1f.f[i];e r=f.1g.$t;e V;e u;g(i==R.1f.f.h)F;x(e k=0;k<f.o.h;k++){g(f.o[k].1h==\'1H\'){u=f.o[k].B;F}}x(e k=0;k<f.o.h;k++){g(f.o[k].1h==\'1I\'&&f.o[k].1J==\'W/1K\'){V=f.o[k].1g.w(" ")[0];F}}g("1i"1j f){e C=f.1i.$t}1k g("1l"1j f){e C=f.1l.$t}1k e C="";G=f.1L.$t;g(j>U.h-1)j=0;l[i]=U[j];s=C;a=s.z("<l");b=s.z("X=\\"",a);c=s.z("\\"",b+5);d=s.1M(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))l[i]=d;Y=(W!=\'1N\')?\'<i><p H="\'+1O+\'" D="\'+I+\'">(\'+V+\' \'+W+\')</p></i>\':\'\';e Z=[1,2,3,4,5,6,7,8,9,10,11,12];e 1m=["1P","1Q","1R","1S","1T","1U","1V","1W","1X","1Y","1Z","20"];e 1n=G.w("-")[2].Q(0,2);e m=G.w("-")[1];e y=G.w("-")[0];x(e E=0;E<Z.h;E++){g(21(m)==Z[E]){m=1m[E];F}}e 13=(22)?\'<i><p D="\'+I+\'"> - (\'+1n+\' \'+m+\' \'+y+\')</p></i>\':"";r=(23)?"<b>"+r+"</b>":r;e 14=\'<J><n K="v" A="\'+L+\'" M="\'+N+\'" q="O:\'+P+\'"><a B="\'+u+\'"><l X="\'+l[i]+\'" A="\'+L+\'" M="\'+N+\'"/></a></n><n q="O:\'+P+\'" K="v">\'+1o+\'<a B="\'+u+\'" q="D:\'+I+\'; p-H:\'+1p+\'15;">\'+r+\'</a><24 /> \'+Y+\' \'+13+\'<1q q="D:\'+25+\'; 26-v:27; 1b-v:28 \'+1d+\' 29; p-H:\'+2a+\'15;">\'+2b+17(C,1r)+\'...</1q></n></J>\';g(1r==0){14=\'<J><n K="v" A="\'+L+\'" M="\'+N+\'" q="O:\'+P+\'"><a B="\'+u+\'"><l X="\'+l[i]+\'" A="\'+L+\'" M="\'+N+\'"/></a></n><n q="O:\'+P+\'" K="v">\'+1o+\'<a B="\'+u+\'" q="D:\'+I+\'; p-H:\'+1p+\'15;">\'+r+\'</a> \'+Y+\' \'+13+\'</n></J>\'}S.T(14);j++}S.T(\'</1a>\')}',62,136,'||||||||||||||var|entry|if|length||||img||td|link|font|style|posttitle|||posturl|top|split|for||indexOf|width|href|postcontent|color|u2|break|postdate|size|acolor|tr|valign|imgwidth|height|imgheight|background|bgTD|substring|json|document|write|imgr|pcm|text|src|cmtext|month||||daystr|trtd|px|function|removeHtmlTag|strx|chop|table|border|cellspacing|borderColor|Math|feed|title|rel|content|in|else|summary|month2|day|icon|fntsize|div|summaryPost|join|return|showrecentposts|tablewidth|bordercolor|FF0000|bgcolor|align|center|showRandomImg|floor|random|new|Array|numposts|alternate|replies|type|html|published|substr|no|cmsize|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|parseInt|showPostDate|aBold|br|summaryColor|margin|2px|1px|solid|summaryFontsize|icon2'.split('|'),0,{})) //]]> </script><script type="text/javascript" src="/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Sau đây là định dạng chung để tạo một nút như vậy:

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Tên tiện ích" name="widget.title" type="hidden">
<input value="http://www.thuthuatblogger.info" name="infoUrl" type="hidden">
<input value="http://www.thuthuatblogger.info/favicon.ico" name="logoUrl" type="hidden">
<textarea style="display: none;" name="widget.content">

ĐOẠN CODE CỦA TIỆN ÍCH ĐẶT Ở ĐÂY

</textarea>
<input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
<input id='button' name='button' type="image" src='http://www.blogger.com/img/add/add2blogger_sm_b.gif' value=''/>
</form>

Ở đây chúng ta sử dụng trường input là hidden để người dùng không thể thay đổi thông tin về tiện ích. Trong form này có những phần quan trọng được giải thích như sau:

• form action="http://www.blogger.com/add-widget" - (bắt buộc): Form của tiện ích cần truyền thông tin đến URL này để được Blogger xử lý. Khuyến nghị dùng phương thức truyền là POST nhưng phương thức GET cũng hoạt động được nếu không có quá nhiều dữ liệu trong tiện ích.
• widget.title - (không bắt buộc): Đây là tiêu đề tiện ích hiển thị trong tab Page Elements của người dùng khi chỉnh sửa Template. Tiêu đề có thể dài đến 100 ký tự và có thể chứa cấu trúc HTML.
• infoURL - (không bắt buộc): Sử dụng cái này để xác định một trang mô tả hoặc hướng dẫn về tiện ích. Nó giúp tạo link Learn more trên trang cài đặt tiện ích.
• logoURL - (không bắt buộc): Có thể thêm URL cho hình ảnh ở đây và hình ảnh sẽ được hiển thị kế bên link Learn more. Ảnh này sẽ được thu nhỏ lại dưới 100x100 pixel.

• widget.content - (bắt buộc): Đây là nội dung thực của tiện ích, sẽ được hiển thị trên blogspot của người dùng. Nó có thể chứa các đoạn mã, ngoại trừ các thẻ <html>, <body>. Các đoạn mã này giữ nguyên thể, không mã hóa.
• widget.template - (không bắt buộc): Cái này nhằm chỉ định Template chọn để gắn tiện ích. Nếu không xác định Template thì sử dụng mặc định là <data:title/> hoặc <data:content/>.

Dưới đây là lựa chọn hình ảnh cho nút Add to Blogger:



http://www.blogger.com/img/add/add2blogger_sm_w.gif



http://www.blogger.com/img/add/add2blogger_lg.gif



http://www.blogger.com/img/add/add2blogger_sm_b.gif

Tuần lễ khám chữa bệnh blogspot từ thiện nhân ngày 20 tháng 10

Một tuần lễ trước ngày 20/10 (14/10 – 20/10/2011), Thủ thuật Blogger cam kết chữa bệnh miễn phí cho những bệnh nhân blogspot theo thứ tự ưu tiên từ phụ nữ, trẻ em, thiếu niên, người già cho đến thanh niên trai tráng trong cộng đồng Blogspot Việt Nam. Thủ thuật Blogger luôn sẵn sàng đón nhận những ca bệnh từ nan y trị cho đến những bệnh thông thường như sổ mũi hắt hơi.

Trong tuần lễ chữa bệnh lưu động này, Bệnh viện B-Care sẽ tiến hành tiếp nhận bệnh, khám bệnh, cấp phát thuốc và tư vấn miễn phí theo thứ tự ưu tiên nêu trên. Chương trình này là một trong những hình thức giúp giảm tải cho Bệnh viện B-Care.

• PHỤ
• NỮ
• VIỆT
• NAM
• MỪNG
• NGÀY

Bệnh viện B-Care xin trân trọng kêu gọi các bạn tình nguyện viên có lòng thiện nguyện chung tay góp sức tham gia vào chương trình từ thiện này để giúp cho cộng đồng Blogspot Việt Nam luôn khỏe mạnh để phấn đấu vươn lên, sống khỏe trong tương lai.

Chúng tôi rất biết ơn đối với những đóng góp của các bạn vì sự nghiệp này – Cảm ơn rất nhiều.

Trải nghiệm các thẻ mới đơn giản hơn từ HTML5

HTML5 and CSS3 là hai tiêu chuẩn mới thuộc thế hệ mới nhất của công nghệ web, giúp cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào, đem đến cho người dùng những trải nghiệm thú vị về tốc độ truy cập web nhanh hơn, tốt hơn, đa sắc thái hơn.

Internet Explorer hiện vẫn là một công cụ trình duyệt còn được sử dụng nhiều song các phiên bản 8 và dưới nữa hỗ trợ rất kém hoặc không hỗ trợ HTML5 và CSS3. Tuy nhiên IE9 đã cải thiện hơn song vẫn chưa được sử dụng rộng rãi. Chrome và Firefox là hai trong số những trình duyệt hỗ trợ HTML5 và CSS3 tốt nhất.

Để tham gia khóa học HTML5 & CSS3, các bạn học viên nên cài đặt cho máy tính của mình một trình duyệt hỗ trợ tốt đối với HTML5 và CSS3 như Chrome hoặc Firefox.

Có một điều cần chú ý rằng, HTML5 và CSS3 vẫn đang trong quá trình phát triển và chưa có chi tiết kỹ thuật cuối cùng, đồng nghĩa với việc sẽ có những thay đổi về thông số kỹ thuật mà chúng ta không được báo trước. Tuy nhiên với những ưu điểm nổi bật thì chúng ta không ngại ngần tìm hiểu để mở mang kiến thức trước khi suy nghĩ nhiều về chuyện tương lai.

Bài 1: Trải nghiệm các thẻ mới đơn giản hơn từ HTML5

Có một vấn đề nghiêm trọng ảnh hưởng đến các nhà thiết kế web hiện nay đó là hội chứng dùng thẻ div. Đây chính là một hội chứng thâm căn cố đế thành thói quen khi các nhà thiết kế web sử dụng quá nhiều thẻ div không thiết để bao các thành phần có các ID như banner, sidebar, article, và footer. Hội chứng này có tính lây lan rất cao. Các nhà thiết kế web chuyền cho nhau hội chứng này rất nhanh chóng.

Dưới đây là ví dụ một hội chứng dùng thẻ div:

<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>

Trên đây là cấu trúc HTML cho một danh sách không đánh số (unordered list), là một thành phần block được bao trong hai thẻ div mà 2 thẻ này cũng là những thành phần block. Tuy nhiên chúng ta có thể loại bỏ một trong hai thẻ div này mà vẫn cho kết quả tương tự. HTML5 giới thiệu những thẻ mới sẽ giúp xóa bỏ hội chứng dùng thẻ div.

Để bắt đầu bài học đầu tiên về HTML5, chúng ta cần tạo một file có tên index.html. Đặt đoạn code sau đây vào công cụ Notepad (Chọn Start >> Programs >> Accessories) rồi lưu file theo tên index.html.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Blog</title>
</head>
<body>
</body>
</html>

Mỗi tiêu chuẩn HTML và XHTML đều có một DOCTYPE thường được đặt ở đầu mỗi trang web để giúp khai báo với trình duyệt về quy chuẩn mà trình duyệt sẽ dựa vào đó để được render theo các chuẩn mực đúng tiêu chuẩn. Nếu bạn thử xem mã nguồn (view source) nhiều trang web bạn sẽ thấy DOCTYPE được thể hiện như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Đối với HTML5, bạn sẽ thấy nó đơn giản và dễ nhớ hơn nhiều:

<!DOCTYPE HTML>

1. Thẻ header:

Phần đầu trang web (không nên nhầm với các thẻ tiêu đề như h1, h2, h3 …) có thể chứa các nội dung như logo, search box, banner, hay thậm chỉ có tiêu đề trang. Phần đầu trang web nằm trong thẻ header:

<header id="page_header">
<h1>HTML5 Blog</h1>
</header>

Không có giới hạn về số header trên một trang web. Mỗi phần riêng biệt cũng có thể có một header, sử dụng thêm thuộc tính ID để tạo tính duy nhất cho các thành phần, giúp dễ dàng định dạng CSS hoặc định vị các thành phần băng Javascript.

2. Thẻ footer:

Thành phần footer xác định thông tin cuối một tài liệu hoặc một phần tài liệu web. Phần chân trang web chứa các thông tin như thời gian bản quyền và người sở hữu trang. HTML5 có nhiều footer trong một tài liệu, có nghĩa chúng ta có thể sử dụng thẻ footer ngay cả trong một bài viết. Ví trong một tài liệu HTML5 có nhiều footer nên cần cho nó một ID giống như phần header giúp tạo tính duy nhất cho các thành phần.

<footer id="page_footer">
<p>© 2010-2011 HTML5 Blog</p>
</footer>

Phần footer này đơn giản chỉ chưa thời gian bản quyền. Tuy nhiên, cũng như header, nó có thể chứa các thành phần khác như thành phần điều hướng trang.

3. Thẻ nav:

Điều hướng rất quan trọng đối với một trang web. Một thanh điều hướng gồm các link dẫn đến trang chủ, trang giới thiệu, trang lưu trữ, trang liên hệ … Thanh điều hướng có thể nằm trong phần header như sau:

<header id="page_header">
<h1>HTML5 Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="introduction.html">Introduction</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>

Giống như header và footer, trang web có nhiều thành phần điều hướng, có thể nằm ở phần header, cũng có thể nằm ở phần footer:

<footer id="page_footer">
<p> © 2010-2011 HTML5 Blog</p>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="terms.html">Terms of Service</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
</footer>

4. Thẻ section và thẻ article:

Thẻ section nhằm thay thế thẻ div bị lạm dụng quá nhiều để mô tả các khu vực của một trang web.

<section id="posts">
</section>

Đoạn code trên thể hiện thành phần chứa tất cả các bài viết của trang. Mỗi bài viết cũng sẽ có thành phần riêng với thẻ article. Thẻ này mô tả nội dung thực sự của một trang web. Mỗi bài viết sẽ có phần header, nội dung và footer, được xác định như sau:

<article class="post">
<header>
<h2>How To Make A Girl Fall In Love With You</h2>
<p>Posted by Vlad Karl on
<time datetime="2006-02-22T14:39">January 22nd, 2006 at 2:39PM</time>
</p>
</header>
<p>
Getting a girl of your dreams is much like getting the car of your dream. But unlike a car which you can always bargain for, there is nothing like a 20 percent discount in courting the girl of your dreams, she's so sweet a thing to be discounted, you dearly are in love with her and your feelings for her can only be communicated not by the words of the mouth, but by the words of the heart. Getting the girl actually depends on how big your heart is - faint heart, never won fair lady.
</p>
<p>
The first step in the heart-winning exercise for any man is to make a good impression. In your doing so, you don't have to talk, dress or do the common things that all the Toms do to get a decent girl's attention. Be unique, that's all you need. Be a man of his own style. Dress decently - indecency can make one be mistaken for arrogance; watch your language - obscene language gives the impression of immaturity, being uncultured and cheap; be a man of good habits - don't drink or smoke like any other loser.
</p>
<footer>
<p><a href="comments"><i>30 Comments</i></a> ...</p>
</footer>
</article>

5. Thẻ aside và phần sidebar:

Đôi khi bạn cần thêm nột dung khác vào phần nội dung chính, như đoạn trích dẫn, biểu đồ … thì sẽ sử dụng thẻ aside để nhận diện những thành phần này (đoạn code này sẽ được đặt giữa thẻ article):

<aside>
<p>
“Never give someone a chance to say no when
selling your product.”
</p>
</aside>

Thẻ aside dùng để thể hiện nội dung liên quan đến bài viết. Để tạo phần sidebar, HTML5 khuyến nghị dùng thẻ section. Ở ví dụ sau đây thẻ section được sử dụng kết hợp với thẻ nav để tạo điều hướng lưu trữ:

<section id="sidebar">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
</ul>
</nav>
</section>

Để định dạng cho các thành phần, cần sử dụng CSS như sau:

body{
width:960px;
margin:15px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
}
p{
margin:0 0 20px 0;
}
p, li{
line-height:20px;
}
/ * Header * /
header#page_header nav ul, #page_footer nav ul{
list-style: none;
margin: 0;
padding: 0;
}
/ * Navigation * /
#page_header nav ul li, footer#page_footer nav ul li{
padding:0;
margin: 0 20px 0 0;
display:inline;
}
/ * Posts * /
section#posts{
float: left;
width: 74%;
}
section#posts aside{
float: right;
width: 35%;
margin-left: 5%;
font-size: 20px;
line-height: 40px;
}
/ * Sidebar * /
section#sidebar{
float: left;
width: 25%;
}
/ * Footer * /
footer#page_footer{
clear: both;
width: 100%;
display: block;
text-align: center;
}

Đặt CSS vào một file ngoài theo định dạng như sau:

<link rel="stylesheet" href="style.css" type="text/css">

Cấu trúc HTML5 hoạt động tốt trên các trình duyệt như Firefox, Chrome, và Safari nhưng sẽ rất lộn xộn trên trình duyệt Internet Explorer phiên bản cũ hơn 9.0. Do IE không hỗ trợ các thành phần HTML5 nên không thể vận dụng định dạng CSS cho chúng. Cách duy nhất để định dạng CSS hoạt động là sử dụng Javascript để xác định các thành phần này như là một phần của tài liệu. Chỉ cần thêm một đoạn code sau đây vào phần đầu của trang để nó thực thi trước khi trình duyệt render bất kỳ thành phần nào. Chúng ta sẽ đặt nó trong một chú thích điều kiện, một kiểu chú thích đặc biệt mà chỉ có trình duyệt Internet Explorer mới đọc được:

<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->

HOMEWORK:
1. Hãy liệt kê các cặp thẻ chính trong cấu trúc HTML5 của một trang web.

2. Nêu một ví dụ mẫu của bạn về cấu trúc HTML5 của thành phần chính chứa các bài viết, trong đó có tiêu đề bài viết, thông tin bài viết (tác giả, thời gian đăng bài), nội dung bài viết và một phần trích dẫn (hay một câu danh ngôn), phần nhận xét.

3. Bài tập nâng cao (dành cho các bạn khá, giỏi): Thử hình dung phần nhận xét trên blogspot như một phần nội dung bài viết trên trang web HTML5 gồm các thẻ article, header, footer; bạn hãy áp dụng các thẻ HTML5 cho phần nhận xét của bạn.

4. Tạo một trang web HTML5 cơ bản gồm đầy đủ các thẻ trong bài học, lưu trang theo tên index.html.

Các bạn học viên trong lớp học HTML5 & CSS3 vui lòng gửi lời giải bài tập vào địa chỉ email của Ban Quản trị để được hỗ trợ trong quá trình học tập.