Sunday, December 22, 2013

Cách ẩn bài viết mới nhất khỏi trang chủ trong Blogspot

Bài viết mới nhất trong Blogspot mặc định sẽ được hiện lên đầu tiên khi khách truy cập vào trang chủ, tiếp theo sau là các bài viết cũ hơn. Có thể vì lý do nào đó mà bạn không muốn bài viết mới nhất hiện ra, việc này được thực hiện rất đơn giản bằng thủ thuật thay đổi ngày up bài.

Blogspot (cũng như đa số các hệ quản trị nội dung khác) sắp xếp bài viết nào lên trước phụ thuộc vào ngày bạn up bài viết đó lên. Do vậy, đơn giản chỉ cần để ngày up bài trong quá khứ thì bài viết đấy sẽ không còn hiện ra bên ngoài trang chủ nữa. Cách làm như sau, ở phần Cài đặt bài đăng bên tay phải của khung soạn thảo bài viết bạn nhấn vào Lịch biểu hoặc Được xuất bản vào:

Lịch biểu thay đổi ngày up bài trên lý thuyết

Lịch biểu này chính là ngày điều chỉnh thời gian đăng bài viết, nếu bạn không chỉnh sửa gì thì nó sẽ là ngày của hôm bạn up bài, như trên hình là ngày 22/1/2014 (ngày tôi viết bài này). Tôi sẽ lùi ngày up bài về 1 tháng tức là 22/12/2013, sau đó nhấn Hoàn thành để xác nhận. 

Ngày up bài đã lùi về quá khứ 1 tháng

Như vậy là xong, khi bạn nhấn Xuất bản, mặc dù bài này là bài viết mới nhất nhưng nó sẽ không hiện ra trang chủ.

Đây cũng là cách giúp bạn điều chỉnh thứ tự xuất hiện bài viết trong thư mục (nhãn) bất kỳ, nếu muốn bài A ở sau bài B, bạn chỉ việc điều chỉnh thời gian up bài của bài A ở trong quá khứ so với thời gian up bài của bài B.

Wednesday, December 18, 2013

Tạo bài viết liên quan thủ công trong blogspot

Trong một bài viết trước đây, mình có hướng dẫn các bạn cách tạo bài viết liên quan tự động cho blogspot. Cách này có ưu điểm là bạn đỡ tốn công nhọc sức mỗi lần viết bài mới, nhưng có nhược điểm là đôi khi nó không đúng với nhu cầu của mình lắm. Vì vậy hôm nay Blog Mạng Lưới Toàn Cầu sẽ hướng dẫn bạn cách tạo bài viết liên quan theo cách thủ công, giúp bạn chủ động hơn, chọn chính xác bài viết muốn liên kết.

Cách làm như sau. Đầu tiên bạn viết ra tên danh sách các bài viết liên quan (các bài bạn muốn liên kết), chẳng hạn với bài này, tôi viết ra danh sách đó như dưới đây:

Cách tạo bài viết ngẫu nhiên cho blogspot
Hướng dẫn tạo menu ngang cho blogspot
Cách tạo fanpage cho blogspot

OK, tiếp theo tôi làm 3 mục trên thành danh sách bằng cách quét cả ba rồi nhấn vào biểu tượng 3 dấu gạch ngang trên khung soạn thảo:


Bạn tick vào dấu chấm tròn hay 1,2,3 đều được, tôi thường chọn dấu chấm tròn, kết quả:
  • Cách tạo bài viết ngẫu nhiên cho blogspot
  • Hướng dẫn tạo menu ngang cho blogspot
  • Cách chèn fanpage vào blogspot
Vâng, vậy là bạn đã hoàn thành bước đầu, giờ chúng ta tiến hành tạo liên kết cho chúng. Bạn quét vào tiêu đề trong danh sách rồi nhấn vào biểu tượng ghi chữ Liên kết trên khung soạn thảo.

Tạo liên kết trong blogspot

Một khung sẽ bật ra cho bạn điền thông tin, nó sẽ giống như dưới đây:


Ở cái địa chỉ web, bạn phải điền địa chỉ trang mà bạn muốn liên kết vào, cuối cùng nhấn OK là được, kết quả:
Bạn đã thấy bài viết đầu tiên có liên kết rồi đúng không, làm tương tự cho các tiêu đề bài viết phía dưới, và đây là kết quả cuối cùng:
Giờ cả 3 đều có liên kết roài nhé :)

P/S: Bài viết được tạo cảm hứng từ câu hỏi của bạn xanh la cay 

Friday, December 13, 2013

Cách căn giữa ảnh bằng CSS

Căn giữa chữ rất dễ, bạn chỉ cần sử dụng thuộc tính text-align: center; là OK.
Còn căn giữa ảnh thì lại không dễ như thế! Đã rất nhiều lần tôi vò đầu bứt tai vì chẳng căn giữa nổi! Thực ra kỹ thuật không có gì đặc biệt, nhưng cần mẹo nhỏ thì mới được. Đấy là đặc điểm chung của mẹo, biết thì rất dễ mà không biết thì khó vô cùng (chém gió tí!)

Giả dụ tôi có cái ảnh như này:



Theo mặc định, giống như trên, bức ảnh sẽ dạt về bên trái, vậy làm thế nào để tôi cho nó ra giữa bây giờ?

Cách làm như sau:

- Đầu tiên trong mã đánh dấu HTML của ảnh, bạn thêm class có tên là cangiua vào (bất kỳ ảnh nào muốn căn giữa thì bạn đều đưa class này vô): <img src="images/cham-tron.png" class="cangiua"/>

- Tiếp theo trong CSS bạn thêm mấy dòng sau: img.cangiua {display: block; margin-left: auto; margin-right: auto;}

Và đây là kết quả:

Vậy là xong! Giờ thì căn giữa ảnh thật dễ :))

Có thể bạn muốn đọc thêm bài thuộc tính display trong CSS để hiểu rõ hơn ý nghĩa những dòng code trên.

Selector thuộc tính trong CSS

Có rất nhiều kiểu Selector khác nhau trong CSS, với tôi Selector thuộc tính là cái vô cùng thú vị.

Code mẫu

CSS:

[type="text"] {background-color:yellow;}

HTML:

<form>
<label>Họ và tên</label><input type="text"><br>
<label>Email</label><input type="email">
</form>

Kết quả:

Cách dùng

Về cơ bản ý tưởng về selector thuộc tính rất đơn giản, thay vì dùng id hay class để xác định đối tượng cần tác động, chúng ta dùng ngay các thuộc tính của đối tượng đó để định danh.

Các ví dụ khác

HTML:

<a href="http://www.mangluoitoancau.com" title="Nguyễn Đức Anh"><img src="images/ducanh.jpg"></a>

CSS:

[title="Nguyễn Đức Anh"] {margin-left:20%;}

Kết quả:

Thursday, December 12, 2013

Các thuộc tính con trỏ chuột trong CSS

Thuộc tính trỏ chuột quyết định cách hiển thị của con trỏ khi di qua một thành phần nào đó.
Thực sự thì đến bài này tôi mới biết là có nhiều hiệu ứng trỏ chuột đến vậy trong CSS. Bạn muốn biết ngay không, thế thì dưới đây là tên của các thuộc tính đó, bạn cứ di chuột qua từng từ để thấy con trỏ chuột thay đổi như thế nào:

auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait

Code mẫu:

p.wresize {cursor:w-resize}
p.move {cursor:move}
p.wait {cursor:wait}

Các thông số

  • Giá trị mặc định: auto
  • Tính kế thừa: Có
  • Phiên bản CSS: Bắt đầu được đưa vào từ CSS2
  • Cú pháp trong JavaScript, ví dụ: object.style.cursor="crosshair"

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ các thuộc tính liên quan đến con trỏ.

Con trỏ chuột là ảnh

Cũng thú vị khi biết rằng bạn có thể quyết định con trỏ xuất hiện như là một ảnh bất kỳ mà bạn muốn.

Hãy thử di chuyển vào hộp này xem như thế nào. Bạn sẽ thấy mũi tên màu xanh.

Code mẫu:

cursor: url(images/my-cursor.png), auto;

Selector :after trong CSS

Bộ chọn after trong CSS được dùng để chèn nội dung bất kỳ sau một nội dung của thẻ nào đó.
Ví dụ:

CSS:

p:after
{
content:" (Blog Mạng Lưới Toàn Cầu)";
}


HTML: 

<h4>Bạn cảm thấy gì?</h4>
<p>Mỗi ngày bạn thức dậy và không uể oải với việc định làm trong ngày, thế thì bạn đã chọn đúng công việc</p>

Đoạn code ở trên sẽ chèn dòng chữ (Blog Mang Lưới Toàn Cầu) sau bất kỳ thẻ p nào. Kết quả:

Bạn cảm thấy gì?

Mỗi ngày bạn thức dậy và không uể oải với việc định làm trong ngày, thế thì bạn đã chọn đúng công việc

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ Selector :after

Selector :before trong CSS

Bộ chọn before trong CSS được dùng để chèn nội dung bất kỳ trước một nội dung của thẻ nào đó.
Ví dụ:

CSS:

p:before
{
content:"(Blog Mạng Lưới Toàn Cầu) ";
}


HTML: 

<h4>Bạn định làm gì</h4>
<p>Một ngày đẹp trời phải không? Sao bạn không đi chơi đâu đó? Sao lại ngồi trước máy tính học HTML và CSS thế này?! À ha. Ông anh không phải xoắn quẩy!</p>

Đoạn code ở trên sẽ chèn dòng chữ (Blog Mang Lưới Toàn Cầu) trước bất kỳ thẻ p nào. Kết quả:

Bạn định làm gì

Một ngày đẹp trời phải không? Sao bạn không đi chơi đâu đó? Sao lại ngồi trước máy tính học HTML và CSS thế này?! À ha. Ông anh không phải xoắn quẩy!

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ Selector :before

Lớp giả first-letter trong CSS

First-letter là lớp giả dùng để lấy ký tự đầu tiên trong thẻ bất kỳ nào đó.
Giả dụ chúng ta có đoạn code sau:

CSS:

h5:first-letter
{
font-size:250%;
color:green;

font-weight:bold;
}


Mã đánh dấu HTML:

<h4>Xin chào đến với Blog Mạng Lưới Toàn Cầu</h4>
<h5>Tôi tên là Nguyễn Đức Anh</h5>
<h5>Tôi sống ở Hà Nội, Việt Nam</h5>
<h5>Tôi thích thiết kế web, và các công nghệ liên quan</h5>


Thế thì bất kỳ ký tự đầu tiên nào nằm trong thẻ h5 đều được bôi đậm, có màu xanh và có kích thước gấp 2,5 lần bình thường.

Kết quả:

Xin chào đến với Blog Mạng Lưới Toàn Cầu

Tôi tên là Nguyễn Đức Anh
Tôi sống ở Hà Nội, Việt Nam
Tôi thích thiết kế web, và các công nghệ liên quan

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ lớp giả first-letter

Các thuộc tính có thể áp dụng cho first-letter

  • Thuộc tính font
  • Thuộc tính color
  • Thuộc tính background 
  • Thuộc tính margin
  • Thuộc tính padding 
  • Thuộc tính border 
  • Thuộc tính text-decoration
  • Thuộc tính vertical-align (chỉ khi float là none)
  • Thuộc tính text-transform
  • Thuộc tính line-height
  • Thuộc tính float
  • Thuộc tính clear

Wednesday, December 11, 2013

Lớp giả first-child trong CSS

First-child dịch ra tiếng Việt là đứa con cả, và trong CSS, điều này có nghĩa là nó sẽ tác động đến thẻ đầu tiên của thẻ cha.

Giả dụ tôi có 3 thẻ p như thế này:

<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>

Giờ nếu tôi viết trong CSS như thế này: 

p:first-child {color:blue} 

Thì dòng chữ đầu tiên Họ và tên: Nguyễn Đức Anh sẽ có màu xanh. 

Có một chú ý nhỏ, đó là câu lệnh p:first-child {color:blue} sẽ tác động đến tất cả thẻ p mà là con cả, chẳng hạn nếu chúng ta có mã đánh dấu như sau:

<!DOCTYPE html>
<html>
<head>
<title>Blog Mạng Lưới Toàn Cầu</title>
<style>
p:first-child
{
p:first-child {color:blue}
}
</style>
</head>
<body>

<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>

<div>
<p>Sở thích: Chơi thể thao, lướt web</p>
<p>Nhân vật ưa thích: Osho</p>
</div>

</body>
</html>

Theo bạn những đoạn văn bản nào sẽ có màu xanh? Câu trả lời là có 2 đoạn. Đoạn thứ nhất là Họ và tên: Nguyễn Đức Anh thì bạn đã hiểu. Đoạn thứ hai cũng có màu xanh, đó là Sở thích: Chơi thể thao, lướt web

Sở dĩ "Sở thích: Chơi thể thao, lướt web" có màu xanh là bởi vì nó cũng là con cả, cụ thể, nó là con cả của thẻ div.

Chốt hạ: lớp giả first-child tác động đến tất cả các con cả của các thẻ khác nhau.

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông đều hỗ trợ first-child, bao gồm: Chrome, FireFox, Opera, Safari, IE

Một số ví dụ khác

CSS:

p:first-child b
{
background:yellow;
}


Mã đánh dấu:

<p>Tôi là <b>Nguyễn Đức Anh</b>. Tôi quản trị trang web <b>Blog Mạng Lưới Toàn Cầu</b>.</p>
<p>Tôi sinh năm <b>1987<./b>. Quê ở <b>Hà Tây</b>.</p>

Kết quả: Làm cho tất cả các nội dung bôi đậm trong thẻ p đầu tiên có nền màu vàng.

Tôi là Nguyễn Đức Anh. Tôi quản trị trang web Blog Mạng Lưới Toàn Cầu.
Tôi sinh năm 1987. Quê ở Hà Tây.

Danh sách các thẻ trong HTML

Bạn muốn có danh sách ngắn gọn các thẻ trong HTML? Bạn muốn xem lại bất cứ khi nào mình muốn? Thế thì bạn đã đến đúng nơi! Trong bài viết này Blog Mạng Lưới Toàn Cầu sẽ cung cấp cho bạn thông tin đơn giản nhưng đầy đủ về các thẻ HTML.

Tài Liệu HTML chuẩn

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết...
</body>

</html>

Các thẻ cơ bản

<h1>Thẻ quan trọng nhất, có kích thước lớn nhất</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Thẻ quan trọng kém nhất, có kích thước nhỏ nhất</h6>

<p>Dùng cho văn bản</p>
<br> (Dùng để ngắt dòng)
<hr> (Tạo đường kẻ ngang)
<!-- Để lại chú thích trong HTML -->

Các thẻ dùng để định dạng

<b>Bôi đậm văn bản</b>
<i>Chữ in nghiêng</i>
<u>gạch chân văn bản</u>
<strong>Văn bản quan trọng</strong>
<em>Nhấn mạnh văn bản</em>
<code>Mã máy tính</code>
<small>Chữ nhỏ hơn</small>

<abbr> (giải thích chữ viết tắt)
<address> (địa chỉ liên hệ)
<blockquote> (dẫn nguồn trích dẫn)
<sub> (dùng để tạo chỉ số dưới)
<sup> (dùng để tạo chỉ số trên)

Liên kết

Liên kết dạng văn bản: <a href="http://www.mangluoitoancau.com/">Blog Mạng Lưới Toàn Cầu</a>
Liên kết dạng hình ảnh: <a href="http://www.mangluoitoancau.com/"><img src="URL nguồn ảnh" alt="Văn bản thay thế"></a>
Liên kết tới email: <a href="mailto:mangluoitoancau.com@gmail.com">Gửi email đến Blog Mạng Lưới Toàn Cầu</a>

Ảnh

<img src="URL nguồn ảnh" alt="Văn bản thay thế" height="100" width="100" title="mô tả ảnh khi hover qua">

Định dạng style và section

<style type="text/css">
a {color:red;}
h2 {color:blue; font-size:18px;}
</style>

<div>Định vị một khu vực Block trong tài liệu HTML</div>

<span>Định vị khu vực inline trong tài liệu HTML</span>

Danh sách không có thứ tự

<ul>
<li>Nội dung</li>
<li>Nội dung</li>
</ul>

Danh sách có thứ tự

<ol>
<li>Nội dung thứ nhất</li>
<li>Nội dung thứ hai</li>
</ol>

Bảng - table

<table border="1">
<tr>
<th>Tiêu đề cột</th>
<th>Tiêu đề cột</th>
</tr>
<tr>
<td>nội dung</td>
<td>nội dung</td>
</tr>
</table>

Iframe

<iframe src="http://www.mangluoitoancau.com"></iframe>

Thẻ Form

<form action="xyly.php" method="post/get">

<input type="email" name="email" size="50" maxlength="50" required>
<input type="password" required>
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Gửi">
<input type="reset" value="Xóa">
<input type="hidden">
<select>
<option>Bánh Mỳ Trứng</option>
<option selected="selected">Bánh Mỳ Thịt</option>
<option>Bánh Mỳ Trộn</option>
</select>

<textarea name="binhluan" rows="50" cols="40"></textarea>

</form>

Entities - Các ký tự không thể gõ trực tiếp từ bàn phím

&#169; đại diện cho ©
&#8482; đại diện cho ™
&#163; đại diện cho £

Tuesday, December 10, 2013

CSS cho thẻ table

Table là thẻ thường dùng trong HTML. Trong các bố cục kiểu Excel có hàng và cột thì table luôn được ưu tiên sử dụng mặc dù thẻ div cũng làm được điều tương tự về mặt hiển thị - lý do là vì div không thể hiện được sự liên quan giữa các dữ liệu với nhau. Nhưng mục đích chính của bài này lại ở phần khác, đó là trang trí cho thẻ table bằng CSS.

Tạo đường viền cho table

Code mẫu:

table, th, td {border: 1px solid #000}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Chỉ sử dụng đường viền đơn cho table

Như bạn thấy ở bảng trên, đường viền đôi được tạo ra cho bảng - nó là kết quả tổng hợp của các đường viền của table, th và td, kể ra thì nó cũng không xấu, nhưng đa số chúng ta thích đường viền đơn hơn. Để đạt được kết quả đó chúng sử dụng thuộc tính border-collapse.

Code mẫu:

table {border-collapse:collapse;}
table,th, td {border: 1px solid #333;}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Đệm trong table

Code mẫu: 

td {padding:10px;}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Màu cho table

Bạn có thể đổi màu đường viền, màu chữ và màu nền cho bảng một cách tùy ý. 

Code mẫu:

table, td, th {border:1px solid red;}
th {background-color:blue; color:white;}

td {color:#321}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Thay đổi chiều rộng và chiều cao trong table

Không khó để đoán ra được chúng ta sẽ sử dụng thuộc tính gì để thay đổi chiều rộng và chiều cao cho table - vẫn thế thôi - đó là thuộc tính width và height.

Code mẫu:

td {height:60px; width:150px;}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Căn lề cho chữ trong table

Chữ trong table có thể căn thoải mái theo cả chiều ngang lẫn chiều dọc, theo chiều ngang chúng ta sử dụng thuộc tính text-align, theo chiều dọc dùng thuộc tính vertical-align.

Code mẫu:

td {height:60px; width:150px; text-align:center; vertical-align:center;}

Kết quả:

Họ và TênQuê Quán
Nguyễn Đức AnhHà Tây
Hạ Thị MếnHà Nội

Sunday, December 8, 2013

Các thuộc tính trong HTML

Các thuộc tính trong HTML cung cấp thông tin bổ sung cho các thẻ. Nội dung của nó rất quan trọng, tuy nhiên sẽ không có ý nghĩa nhiều lắm nếu bạn chưa có tí kinh nghiệm nào với HTML và CSS.

Đặc điểm

  • Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính
  • Các thuộc tính cung cấp thông tin bổ sung cho các thẻ
  • Các thuộc tính luôn nằm trong các thẻ mở (chứ không phải thẻ đóng nhé)
  • Các thuộc tính thường xuất hiện dưới dạng cặp tên/giá trị kiểu như: tên="giá trị"

Ví dụ

<a href="http://www.mangluoitoancau.com">Blog Mạng Lưới Toàn Cầu</a>

Trong ví dụ trên, href chính là một thuộc tính và http://www.mangluoitoancau.com là giá trị của thuộc tính href.

Luôn sử dụng dấu nháy cho giá trị

  • Giá trị của thuộc tính phải được đặt trong dấu nháy kép (đóng và mở), điều đó có nghĩa là bạn không được phép viết kiểu này: <a href=http://www.mangluoitoancau.com>Blog Mạng Lưới Toàn Cầu</a>
  • Bạn có thể đặt trong dấu nháy đơn nếu muốn nhưng dấu nháy kép là cách dùng phổ biến hơn, điều đó có nghĩa kiểu viết sau được chấp nhận: <a href='http://www.mangluoitoancau.com'>Blog Mạng Lưới Toàn Cầu</a>
  • Đôi khi (nhưng rất hiếm thôi) các giá trị bao gồm dấu nháy kép, khi đó bạn buộc phải sử dụng dấu nháy đơn cho giá trị, ví dụ: name='Ngày "Bát Giới" Trở Về'

Sử dụng chữ thường cho các thuộc tính

HTML chấp nhận cả chữ thường và HOA cho tên và giá trị của thuộc tính, dù vậy World Wide Web Consortium (W3C) - tổ chức quốc tế về tiêu chuẩn web khuyến cáo chúng ta nên sử dụng chữ thường mà thôi.

Trong XHTML (phiên bản nghiêm ngặt hơn của HTML) việc viết chữ in thường là điều bắt buộc.

Các thuộc tính phổ biến

  • Một số thuộc tính là hết sức phổ biến, nó có thể được sử dụng trong bất cứ thẻ nào của HTML. Nhóm thuộc tính quyền lực này có tên tiếng Anh là HTML Global Attributes - mà tôi cũng chưa biết phải dịch sao cho chuẩn.
  • Vài ví dụ về các HTML Global Attributes là các thuộc tính như: class, id, style, title

Thursday, December 5, 2013

Thẻ title trong HTML

Thẻ title dùng để tạo tiêu đề cho bài viết, đây là thẻ cơ bản vào bậc nhất trong HTML và nó có ý nghĩa đặc biệt quan trọng khi SEO.
Code mẫu:

<html>

<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết
</body>

</html>

Ứng dụng

  • Cung cấp tiêu đề trên toolbar của trình duyệt
Tiêu đề bài viết hiện trên thanh toolbar
  • Hiển thị tiêu đề cho trang khi được thêm vào danh sách ưa thích của trình duyệt
Tiêu đề bài viết hiện lên trong danh sách ưa thích (còn gọi là dấu trang)
  • Cung cấp tiêu đề cho các bài viết trong kết quả trả về của các cỗ máy tìm kiếm (thí dụ: Google, Bing...)
Tiêu đề hiện trên kết quả trả về của Google

Trình duyệt hỗ trợ

Được hỗ trợ bởi tất cả các trình duyệt phổ biến gồm Chrome, FireFox, Opera, Safari và IE

Các chú ý

  • Mỗi một trang HTML chỉ được phép chứa duy nhất một phần tử title mà thôi
  • Nếu không có thẻ <title> nào trong trang HTML thì trang HTML đó sẽ được xác định là không hợp lệ
Tôi tạo một trang HTML không có thẻ title rồi sử dụng http://validator.w3.org để check lỗi, và đây là kết quả:

Thông báo lỗi khi thiếu thẻ title

Thông báo nói với chúng ta rằng, thẻ head bị thiếu thẻ title và bạn cần bổ sung nó.