Feature news

10 Phương Pháp Viết HTML hợp lệ




Trong thiết kế website, việc viết mã HTML hợp lệ và đúng chuẩn là rất cần thiết, nhưng trong quá trình thiết kế sẽ không thể tránh khỏi một số lỗi không hợp lệ (invalid), ngay cả bản thân mình nhiều lúc vẫn mắc phải.

Bài viết này mình sẽ hướng dẫn các bạn một số phương pháp để viết mã HTML hợp lệ và đúng chuẩn, đặc biệt là các bạn mới tìm hiểu HTML.

Learn more »

[HTML] Bài 12: Các Thẻ Đặt Biệt

Chúng ta đã học qua cấu trúc một File HTML trong đó có phần Head, vậy trong Head ngoài chứa Tag Title ra còn chứa những Tags nào khác? Hôm nay mình sẻ giới thiệu đến các bạn một số tags nằm trong Head và lí do chúng được nằm trong head đương nhiên là chúng không hiển thị lên trang web và chúng cần được load đầu tiên (mọi thẻ được đặt trong head điều được load trước các phần khác).

1.META TAGS - SEO

Meta tag là thẻ dùng để cung cấp các thông tin về website một cách tóm gọn đối với các trình duyệt lẫn người dùng hay bot từ các search engine. Hiện nay, có không ít người đang hiểu sai ý nghĩa của nó và ứng dụng đôi khi không hợp lý trong nhiều website. Bài viết này sẽ giải thích về ý nghĩa của hầu hết các thẻ Meta tag nhằm giúp các bạn ứng dụng một cách hợp lý hơn và gợi ý các Meta tag bạn nên dùng hoặc không nên dùng.

Có 2 kiểu sử dụng meta tag thường thấy:

1. <META HTTP-EQUIV="keywords" CONTENT="content">
2. <META NAME="keywords" CONTENT="content">

Ở những thời kỳ đầu khi Meta tags được phát triển nhằm hỗ trợ cho việc phát triển chung của website. Tuy nhiên sau đó việc ứng dụng của nó bị thay đổi lớn, nhiều webmasters đã sử dụng nó một cách thái quá trong việc ứng dụng Meta tags cho keywords (từ khóa) đối với các website có nội dung không lành mạnh. Rất nhiều từ khóa không liên quan được đặt vào website nhằm giúp cho website đạt kết quả tốt trong kết quả tìm kiếm của các SE. Ví dụ website có nội dung người lớn nhưng lại đặt một số từ khóa liên quan đến các vấn đề nóng hổi khác hoặc về các ngôi sao nổi tiếng mà người dùng thường hay tìm kiếm.

Hiện nay các cỗ máy tìm kiếm đã giảm bớt độ ảnh hưởng của Meta tags cho việc hiển thị kết quả. Google thường bỏ qua sự ảnh hưởng của Meta tags và chỉ sử dụng Google Meta tags (sẽ được giới thiệu dưới đây). Các cỗ máy tìm kiếm khác cũng có cách đọc thẻ này bằng cách riêng của nó.


Sau đây là nội dung giải thích ý nghĩa của các thẻ Meta tags:

1.1 Meta Content Language (Dành cho các website không phải tiếng Anh)

Thẻ này được dùng để khai báo ngôn ngữ của website. Thẻ này cũng được dùng tương tự như Meta Name Language. Các robot của SE thường dùng thẻ này để phân loại ngôn ngữ của website.

Ví dụ:
<META HTTP-EQUIV="Content-Language" CONTENT="vi">

Bạn nên sử dụng thẻ này nếu website của bạn có ngôn ngữ không phải tiếng Anh. Cá nhân tôi chưa từng thử, tuy nhiên theo như những gì mà tôi tham khảo thì thẻ này rất có ích cho bot phân loại nội dung theo ngôn ngữ.

1.2. Meta Content Type

Thẻ này dùng để khai báo mã cho website. Bạn nên sử dụng thẻ nay ngay cả khi bạn đã dùng khai báo DTD cho tài liệu HTML. Bởi vì nếu bạn không sử dụng thì có khi người dùng website của bạn sẽ không đọc được nội dung website của bạn do trình duyệt không tự động điều chỉnh mã phù hợp cho website của bạn. Ví dụ: Nội dung website của bạn được nhập liệu thông qua mã UTF-8 nhưng được hiển thị ở chế độ của ISO hay ASCII. Thẻ này còn có nhiều lợi ích khác, tuy nhiên bạn có thể tự tìm hiểu thêm về vấn đề này thông qua các trang web về SEO.
Ví dụ:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

1.3. Meta Description

Thẻ này dùng để mô tả nội dung của một trang web. Nội dung của thẻ này nên được viết ngắn gọn và xúc tích khoảng từ 20 đến 25 từ hoặc ít hơn. Đây là thẻ được hầu hết các SE sử dụng để hiển thị nội dung kết quả tìm kiếm.

Ví dụ:
<META NAME="description" CONTENT="Website Khoa học kỹ thuật, giải trí và đời sống dành cho cộng đồng người Việt cùng chia sẽ kinh nghiệm và trao đổi học hỏi.">
Thẻ này được khuyến khích sử dụng và nên viết một cách xúc tích nhất nhằm thu hút người dùng bấm vào website của bạn từ kết quả tìm kiếm. Thông thường nếu không dùng thẻ này thì các SE như google cũng sẽ tự động tạo khi index nội dung website. Tuy nhiên bạn nên dùng bởi vì đôi khi các mô tả được index tự động sẽ không được như ý của bạn.

1.4. Meta Language (Dành cho các website không phải tiếng Anh)

Thẻ này tương tự như Meta Content Language nhưng cấu trúc khác như sau:

<META NAME="Language" CONTENT="english">

Các thẻ sau đây được gọi là thẻ phụ vì cũng được khuyến khích dùng nhưng không thật sự quan trọng, bạn có thể dùng cũng được hoặc không dùng cũng chẳng sao.

1.5. Meta Abstract

Cung cấp nội dung tóm tắt cho phần mô tả của website. Thẻ này chỉ được dùng để mô tả ngắn gọn hơn để bot có thể xác định được chính xác hơn nội dung website của bạn. Nội dung của thẻ này thường khoảng 10 từ trở lại.

Ví dụ:
<META NAME="Abstract" CONTENT="Website khoa học kỹ thuật, giải trí và đời sống.">
Thẻ này hiện tại không nằm trong các thuật toán của Google, Yahoo!, và MSN.

1.6. Meta Author

Thẻ này dùng để hiển thị tác giả của một nội dung trên website. Nội dung của thẻ này thường là tên của người đã tạo ra website. Bạn nên dùng thẻ này bằng tên của mình thay vì dùng email để tránh việc bị spam mail. Nếu bạn muốn người dùng liên hệ với mình thì nên dùng một form để liên hệ sẽ tốt hơn.

Ví dụ:
<META NAME="Author" CONTENT="Nguyen Huu Trong, abc@mydomain.com">

Thẻ này không được index bởi Google, Yahoo!, hay MSN, do đó cũng không hỗ trợ cho bạn trong việc tăng thứ hạng, nhưng nó được ứng dụng như một chuẩn sử dụng của Meta tag.

1.7. Meta Copyright

Đây chỉ là thẻ mang tính thương hiệu hay các thông tin bản quyền cá nhân hay sở hữu trí tuệ của bạn.

Ví dụ:
<meta name="copyright" content="Copyright 2013">

Bạn không nhất thiết phải sử dụng thẻ này bởi vì nó chỉ mang tính tượng trưng và không có nghĩa là nó bảo vệ được bản quyền của bạn.

1.8. Meta Designer

Thẻ này dùng để cung cấp thông tin về người thiết kế giao diện cho website.

Ví dụ:
<META NAME="Designer" CONTENT="BabyWolf">
Các SE cũng không sử dụng thẻ này, thẻ này chỉ ứng dụng cho Designer muốn quảng cáo về mình.

1.9. Meta Google

Thẻ này chỉ được sử dụng cho việc bạn muốn loại bỏ nội dung khỏi google. Các thuộc tính của thẻ này:
Googlebot: noarchive - không cho phép google hiển thị nội dung cache của site bạn.
Googlebot: nosnippet - Không cho phép google hiển thị nội dung trích dẫn hoặc cache.
Googlebot: noindex - Không index những trang web nào đó của bạn.
Googlebot: nofollow - Loại bỏ việc đánh giá PageRank hoặc link từ trang này.

Bạn không nhất thiết phải sử dụng thẻ này ngoại trừ bạn muốn điều khiển google bot theo ý của mình cho cấu trúc website của bạn. Đây là thẻ mà google chắc chắn quan tâm đến. Hoặc bạn cũng có thể ứng dụng các thẻ này trong trường hợp thực tiễn sau: Bạn thay đổi cấu trúc nội dung và đường dẫn website, bạn sẽ vẫn giữ phiên bản cũ nhưng với thẻ này để google sẽ tự động xóa các index tương ứng với link này. Tuy nhiên, tốt nhất bạn nên dùng Redirect Permanently 301 sẽ giúp cho bạn chuyển PageRank từ trang cũ qua trang mới.

1.10. Meta Keywords

Thẻ từ khóa được dùng để định dạng nội dung trang web. Từ khóa được sử dụng bởi các SE để index site của bạn có thêm thông tin từ các nội dung của title, body, và các thành phần khác. Từ này thường được dùng để cung cấp các từ khóa liên quan đồng nghĩa hoặc tương tự với các từ khóa của title.

Ví dụ: Title của trang web cho bài viết này là "SEO - Ý nghĩa các thẻ meta". Bạn có thể ứng dụng keywords như sau:
<META NAME="keywords" CONTENT="khái niệm, quảng bá web, tag, forum, technical, science, thảo luận, trao đổi">
Bạn nên sử dụng keywords một cách thận trong và bảo đảm sự tương thích với nội dung. Website của bạn có thể bị phạt hoặc đưa vào blacklist nếu bạn quá lạm dụng nó. Việc sử dụng keywords cũng có thể là một con dao hai lưỡi đối với bạn. Bạn có thể mất vài giờ để nghiên cứu cách viết keywords tốt nhất và đối thủ của bạn chỉ mất vài phút để thừa hưởng từ bạn.

1.11. Meta MSN (No ODP)

Thẻ này được ứng dụng cho việc mô tả website của bạn ở kết quả tìm kiếm của MSN. Do MSN thường hay sử dụng mô tả của DMOZ nên dùng thẻ này sẽ giúp cho MSN chuyển qua dùng mô tả của bạn.

Ví dụ:

<META Name="msnbot" CONTENT="NOODP">

1.12. Meta Title

Nội dung thẻ này được sử dụng tương tự như thẻ title .

Ví dụ:
<META NAME="Title" CONTENT="Page Title Here">
Thẻ này được sử dụng bởi Yahoo! và MSN.

2. STYLE TAGS


Cặp thẻ <style></style> được đặt trong cặp thẻ <head></head>
- Xác định thông tin định dạng website (thường dùng để chứa CSS) . Trong 1 tài liệu HTML có thể sử dụng nhiều cặp thẻ <style></style>
- Ví dụ:
<style type=“text/css”>
p {
color:red
}
</style>

3. Script tag

- Bên trong cặp thẻ <head></head>, chứa các thông tin về mã kịch bản Javascript
- Ví dụ: 
<script type=“text/javascript”>
document.write(“Xin chào”);
</script> 

4. LINK TAGS

Tag <link /> xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài.
Tag <link /> được dùng phổ biến nhất là link tới tài liệu css.
Tag <link /> được viết bên trong tag <head>Ví Dụ:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<head>

 5. !DOCTYPE


!Doctype không phải là một tag HTML, !Doctype chỉ cho trình duyệt web biết được phiên bản ngôn ngữ đánh dấu (markup language) nào được sử dụng trong trang web.
Ví dụ: 1 doctype trong XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>VietSource.Net</title>
</head>
<body>
Nội dung website
</body>
</html>
Các giá trị của !DOCTYPE trong kiến nghị của W3C:

HTML 4.01 Strict

DTD này chứa các thành phần và các thuộc tính HTML, nhưng không bao gồm các thành phần trình bày (như font), không được chứa các frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

DTD này chứa các thành phần và các thuộc tính HTML, bao gồm các thành phần trình bày (như font), không được chứa các frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

DTD này tương đương với HTML 4.01, có thể sử dụng được các frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

DTD này chứa các thành phần và các thuộc tính HTML, nhưng không bao gồm các thành phần trình bày (như font), không được chứa các frameset, đánh dấu này phải được viết theo hình thức XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

DTD này chứa các thành phần và các thuộc tính HTML, bao gồm các thành phần trình bày (như font), không được chứa các frameset, đánh dấu này phải được viết theo hình thức XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

DTD này tương đương với XHTML 1.0, có thể sử dụng được các frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

DTD này tương đương với XHTML 1.0 Strict, và cho phép bạn thêm các module
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

Đối với HTML 5, chưa có chuẩn DTD, tạm khai báo như sau:
<!DOCTYPE HTML>
Learn more »

[HTML] Bài 11.2 Biểu Mẩu - From


1. SELECT TAGS

Tag SELECT dùng để tạo danh sách lựa chọn, có nhiều kiểu danh sách
- Cú Pháp:
<select thuoctinh="giatri">
<option value=""> mục 1 </option>
<option value=""> mục 2 </option>
<option value=""> mục 3 </option>
<option value=""> mục 4</option>
</select>
+ Cặp thẻ <select> </select> khai báo 1 phiên làm việc với kiểu danh sách
+ Cặp thẻ <option></option>  bên trong cặp thẻ <select></select>
Tùy chọn kiểu danh sách bằng thuộc tính:
Thuoctinh=”giatri”
Mô tả
disabled="disabled"
Xác định danh sách thả xuống không hiển thị.
multiple="multiple"
Hiển thị nhiều tùy chọn.
name="selName"
Xác định tên cho danh sách lựa chọn.
size="30"
Xác định số tùy chọn có thể thấy trong danh sách lựa chọn.
P/s: đối với kiểu multiple bạn có thể chọn nhiều mục bằng cách bấm nút
Ctrl .
và chọn
Ví Dụ:
Kiểu Mặc định <br/>
<select>
<option value="Student">Student</option>
<option value="Bussiness">Bussiness</option>
<option value="Manager">Manager</option>
<option value="Other">Other...</option>
</select>
<br/>Kiểu Disabled <br/>
<select disabled="disabled">
<option value="Student">Student</option>
<option value="Bussiness">Bussiness</option>
<option value="Manager">Manager</option>
<option value="Other">Other...</option>
</select>
<br/>Kiểu Multiple <br/>
<select multiple="multiple">
<option value="Student">Student</option>
<option value="Bussiness">Bussiness</option>
<option value="Manager">Manager</option>
<option value="Other">Other...</option>
</select>
<br/>Kiểu Size <br/>
<select size="10">
<option value="Student">Student</option>
<option value="Bussiness">Bussiness</option>
<option value="Manager">Manager</option>
<option value="Other">Other...</option>
</select>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
Ngoài ra bạn cũng có thẻ chèn thuộc tính vào từng option riêng.
Ví Dụ:
<select>
<option disabled="disabled" value="Student">Student</option>
<option>Bussiness</option>
<option value="Manager">Manager</option>
   <option value="Other">Other...</option>
</select>

2. Hộp Soạn Thảo Văn bản:

Khi vào 1 diễn đàn hay blog nào đó các bạn thường thấy những hộp soạn thảo văn bản giúp các bạn có thể bình luận bài viết, viết bài viết mới..v...v.. để tạo ra hộp thoại soạn thảo văn bản như vậy bạn sử dụng thẻ TEXTAREA.
-Cú Pháp:
<textarea cols="số cột" rows="số dòng" maxlength="số ký tự tối đa cho phép" thuoctinh="giatri">
Nội dung
</textarea>
 
Thuộc tính bắt buộc
Mô tả
cols="số"
Xác định chiều rộng hiển thị của <textarea>.
rows="số"
Xác định số hàng hiển thị của <textarea>.
Thuộc tính tùy chọn
Ví dụ
Mô tả
disabled="disabled"
Xác định vùng <textarea> không hiển thị.
name=" tên của textarea "
Xác định tên của <textarea>.
readonly="readonly"
Xác định vùng <textarea> chỉ được đọc.
 Ví Dụ:
<textarea rows="5" cols="20">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>
 Bài Tập:


Learn more »

[HTML] Bài 11.1: Biểu Mẫu - Form

Biểu Mẩu (Form) là một thành phần thường gặp và rất quan trọng trong mỗi website, đặt biệt là những website động biểu mẫu gần như là không thể thiếu. Form sẻ tạo nên sự tương tác giữa người dùng và website qua những thao tác nhập dữ liệu, gữi dữ liệu ( ví dụ: from đăng kí, đăng nhập, search, gữi email, liên hệ....)

1. HTML FORM

- Cú Pháp: <FORM>...</FORM>
- Một số thuộc tính:
 + Name: Tên của from, các bạn đặt tùy ý sao cho dể nhớ.
 + Action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào để xử lí. Trong trường hợp thuộc tính này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành để xử lí (sau đó trình duyệt sẽ tải lại nội dung mới).
 + Method: phương thức truyền dữ liệu ( gồm có 2 phương thức GET và POST  - phần này chúng ta sẽ tìm hiểu kĩ hơn ở những bài PHP và MySQL )
Ví Dụ:
<form name="vidu" action="abc.php" method="post"></form>
Ở ví dụ trên Form vẫn chưa có tác dụng và ý nghĩa gì vì ta chưa chuẩn bị cho form phần nhập văn bản, hay nút bấm để truyền dữ liệu đi.

2. Thẻ Nhập INPUT:

- Cú Pháp: <INPUT Type="....." Name="" Value="" Size="" maxlength="" /> 
- Các Thuộc Tính:
 + Name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.
 + Value: Giá trị ban đầu của input khi bạn chưa theo tác gì trên nó.
 + Size: độ rộng của input
 + Maxlength: số kí tự tối đa được nhập vào.
 + Type: thuộc tính này gồm nhiều giá trị các giá trị quyết định kiểu nhập dữ liệu cho input. Chúng ta sẽ tuần tự tìm hiểm các giá trị của thuộc tính này.
2.1 TEXT BOX - Giá Trị TEXT
Khi sử dụng type = "TEXT" trình duyệt sẻ tạo ra 1 textbox cho phép bạn nhập văn bản.
Ví Dụ:

<form method="POST"><p>  User Name:<input type="text" name="T1" size="20"/> </p></form>
2.2 PASSWORD:
Đối với các Form Đăng nhập khi nhập Password bạn cần ẩn chúng đi để mọi người không nhìn thấy bạn nhập gì, để làm được điều này bạn sử dụng giá trị Password.
Ví Dụ:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"></p>
</form>

User Name:
Password:

2.3 CHECKBOX
Giá trị này sẽ cho phép hiển thị ra một danh sách các nút vuông, chúng ta sẽ được phép kích chọn nhiều nút trong các nút đó. Để hiển thị các nút checkbox này, các bạn có thể dùng thẻ input với type là checkbox. Một nhóm các nút checkbox này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
- Cú pháp: <input type=“checkbox”  name=“” value=“” /> 
+ name: Tên của checkbox, sử dụng kết hợp PHP hay Javascript( JS)
+ value: Giá trị của checkbox, sử dụng kết hợp PHP hay JS, gửi kết quả lên server và
ngược lại
+ Có thể sử dụng thêm thuộc tính checked để chọn mặc định cho đối tượng
Lưu ý lần nữa là : Đối với các đối tượng cùng nhóm thì name phải đặt giống nhau
2.4 RADIO
Cũng như Checkbox Giá trị này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép kích chọn 1 trong các nút đó. Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
- Cú pháp: <input type=“radio”  name=“” value=“” /> 
Ví Dụ:
<input type=radio name="switcher" value="OFF" >Tắt <br/>
<input type=radio name="switcher" checked value="TELEX" >Telex <br/>
<input type=radio name="switcher" value="VNI"> VNI <br/>

Tắt
Telex
VNI
2.5 UPLOAD
- Giá trị UPLOAD tạo chức năng duyệt một File từ máy tính của người dùng.
- Cú pháp: <input type=“file”  name=“” /> 
Ví Dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>FCWC</title>
</head>
<body>
<form>
Duyệt file: <input type="file" name="" value=""/><br>
</form>
</body>
</html>

Duyệt file:
2.6 SUBMIT 
- Tạo nút gửi dữ liệu tới file xử lý ( Tới link khai báo ở thuộc tính Action)
- Cú pháp: <input type=“submit” name=“tên submit” value=“giá trị ban đầu, hiển thị ở nút submit” />
2.7 BUTTON 
- Tương tự như Submit tuy nhiên khi sử dụng Button dữ liệu sẽ không được gửi tới
file xử lý ( Khai báo phần action) mà thường kết hợp với JS để tạo tương tác
- Cú pháp: <input type=“button” name=“tên submit” value=“giá trị ban đầu, hiển thị 
ở nút submit” /> 
2.7 RESET
- Trả lại giá trị ban đầu khi chưa nhập liệu cho tất cả các đối tượng trong form
- Cú pháp: <input type=“reset” name=“tên reset” value=“giá trị ban đầu, hiển thị ở nút reset”  />
Ví Dụ:
<form method="POST">
<input type=radio name="switcher" value="OFF" >Tắt
<input type=radio name="switcher" checked value="TELEX" >Telex
<input type=radio name="switcher" value="VNI"> VNI <br/>
<h4>Đăng Kí</h4>
<p>
User Name:<input type="text" name="T1" size="20" value="Tên đăng nhập < 20 kí tự"/> </p>
<p>
Password: <input type="password" name="T2" size="20"/></p>
Type password again: <input type="password" name="T2" size="20"/></p>
<h4>Sở Thích</h4>
<input type=checkbox name="switcher" value="OFF" >Movie
<input type=checkbox name="switcher" checked value="TELEX" >Music
<input type=checkbox name="switcher" value="VNI">sportoj <br/>
Ảnh Đại diện: <input type="file" name="avatar" value=""/><br>
<input type="submit" name="submit" value="Đăng kí" />
<input type="reset" name="reset" value="Làm lại" />
</form>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
Phần này mình tạm dừng ở đây phần tiếp theo mình sẽ đính kèm bài tập cho các bạn.
Learn more »

[HTML] Bài 10: Tạo Bảng Trong HTML

Trước đây khi vẫn chưa sử dụng thẻ DIV để xây dựng bố cục website chúng ta thường sử dụng thẻ Table để xây dựng bố cục website.
Để tạo một bảng trong văn bản HTML ta sử dụng tag <TABLE></TABLE>. Trong thẻ này còn chứa các tag khác mang chức năng định nghĩa các thuộc tính khác trong bảng như dòng, cột...

1. Thẻ TABLE

- Cập Thẻ <TABLE></TABLE> dùng để khai báo một bảng.
- Các thuộc tính: 
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px
+ height: Chiều cao bảng
+ bgcolor: Định màu nền của bảng
+ background: Định ảnh nền của bảng
+ border: Độ lớn đường viền của bảng
+ bordercolor: Màu của đường viền
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center
+ cellspacing:  Định độ dày của khung
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
Ví Dụ:
<table width="500" height="200"  border="3" bordercolor="red" bgcolor="#3388cc" cellspacing="0" cellpadding="20" > 
</table>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen


2. Thẻ TR (Table row)

- Cú Pháp: <tr>..</tr>
- Chức Năng: xác định dòng trong table
- Vị trí: nằm trong cập thẻ Table
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
- Một số thuộc tính trong thẻ <tr>
+ height: Khai báo chiều cao của dòng( độ lớn dòng)
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải),
center( giữa)
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:
<table width="500px" height="200px" border="3" bordercolor="red">
  <tr></tr>
  <tr></tr>
</table> 

3. Thẻ TD (Table Data)

- Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data)
- Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- Một số thuộc tính:
+ width: Độ rộng của cột
+ height: Chiều cao của cột
+ align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải),
center( giữa)
+ valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table border="2" width="400" height="200">
<tr align="center">
<td>Ô 1 dòng 1</td>
<td>Ô 2 dòng 1</td>
</tr><!-- Dòng thứ 1-->

<tr>
<td>Ô 1 dòng 2</td>
<td>Ô 2 dòng 2</td>
</tr><!-- Dòng thứ 2-->

</table>
</body>
</html>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4. Thẻ TH

- <th></th> ( table heading) Tương tự cặp thẻ <td></td> tuy nhiên <th> dùng trong
trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in
đậm và căn giữa tự động.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Group fcwc</title>
</head>
<body>
<table border="2" width="400" height="100">
<tr>
<th>Họ tên</th>
<th>Nghề nghiệp</th>
</tr><!-- Dòng thứ 1-->

<tr>
<td>Nguyễn Hữu Trọng</td>
<td>Sinh Viên</td>
</tr><!-- Dòng thứ 2-->

</table>
</body>
</html>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
Một số lưu ý:
- Số cặp thẻ <td> ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của
bảng
- Đối với ô trống( không có nội dung) nên sử dụng thẻ <br> hoặc &nbsp; thay cho
khoảng trống

5. Gộp cột, dòng trong bảng 

- Là việc tùy biến bảng bằng việc gộp các cột hay dòng lại với nhau
- colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan
- rowspan=“y”: Gộp y hàng tính từ hàng đang xét
Lưu ý:  Sau khi gộp phải loại bỏ số dòng ( hoặc cột) để cân đối bảng
Ví Dụ: đã loại bỏ 1 cột ở dòng thứ 2. Vì dòng 1
đã có 2 dòng được gộp.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Group fcwc</title>
</head>
<body>
Table chưa gọp
<table border="2" width="500" height="100">
<tr>
<th width="100">Họ tên</th>
<th>Ngày sinh</th>
<th>Giới tính</th>
<th>Nghề nghiệp</th>
</tr><!-- Dòng thứ 1-->

<tr>
<td>07.09.1993</td>
<td><br/></td>
<td>Sinh Viên</td>
</tr><!-- Dòng thứ 2-->

</table>
Table gộp cột
<table border="2" width="500" height="100">
<tr>
<th rowspan="2" width="100">Họ tên</th>
<th>Ngày sinh</th>
<th>Giới tính</th>
<th>Nghề nghiệp</th>
</tr><!-- Dòng thứ 1-->

<tr>
<td>07.09.1993</td>
<td><br/></td>
<td>Sinh Viên</td>
</tr><!-- Dòng thứ 2-->

</table>
</body>
</html>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
Bài Tập sử dụng tag Table xây dựng bố cục trang web sau:

Learn more »

[HTML] Bài 9: Các Thẻ Trình Bày Kí Tự và Các kí tự đặt biệt

1. Các thẻ định dạng kí tự:

Các thẻ kí tự trong HTML cho phép bạn điều khiển hịnh dạng bên ngoài của bản thân các kí tự - chẳng hạn ta có thể định dạng một chữ là đậm hoặc nghiêng. Các định dạn này có thể áp dụng từ phạm vi một đoạn văn hay toàn bộ văn bản hay chỉ những kí tự đơn lẻ
Cú Pháp:
In Đậm: <b>In Đậm</b>
Gạch Chân: <u>Gạch Chân</u>
In Nghiêng: <i>In Nghiêng</i>
Xóa chữ: <strike>Ðây là tag stro</strike>
Tetetype: <tt>tetetype</tt>
Nhấn Mạnh: <em>Nhấn mạnh</em>
Nhấn mạnh hơn: <strong>Nhấn mạnh hơn</strong>
Trich Dẫn: <cite>Trích Dẫn<cite>
Code: <code>code</code>
keyboard: <kbd>keyboard</kbd>
Vabilve: <var>Vabilve</var>
Chữ Thấp: <SUB></SUB>
Chữ Lũy thừa: <SUP></SUP>
Phóng lớn chữ:<BIG> </BIG>
Thu nhỏ chữ: <SMALL> </SMALL>


Ví Dụ:
<b>In Đậm</b>
<br/>
<u>Gạch Chân</u>
<br/>
<i>In Nghiêng</i>
<br/>
<strike>Ðây là tag stro</strike>
<br/>
<tt>tetetype</tt>
<br/>
<em>Nhấn mạnh</em>
<br/>
<strong>Nhấn mạnh hơn</strong>
<br/>
<cite>Trích Dẫn<cite>
<br/>
<code>code</code>
<br/>
<kbd>keyboard</kbd>
<br/>
<var>Vabilve</var>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
Chú Ý:
Thường thì <strong> sẽ hiển thị như <b> và <em> sẽ hiển thị như <i> tuy nhiên có sự khác biệt về ý nghĩa giữa thẻ <strong>, <em> và thẻ <b>,<i>.
Thẻ <b>, <i> mang ý nghĩa định dạng chữ in đậm và in nghiêng còn thẻ <strong> và <em> mang í nghĩa là quan trọng, khi bạn muốn SEO một bài viết thì điều này là vô cùng quan trọng.

2. Kí tự đặt biệt trong HTML:

Một vài ký tự tương tự như dấu nhỏ hơn <, có một ý nghĩa đặc biệt trong HTML, và do đó không thể được sử dụng như là chữ được. Do vậy để hiển thị được dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì dấu < xác định điểm bắt đầu của một thẻ HTML. Nên nếu bạn muốn trình duyệt hiển thị ký tự đó bạn phải thêm và code của nó những ký tự đặc biệt.

Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số và cuối cùng là dấu chấm phẩy ;

Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là &lt; hoặc &#60;

Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơn nhiều. Nhưng cái dở lại là không phải trình duyệt nào cũng hỗ trợ những tên mới này, trong khi đó hầu hết các trình duyệt đều có thể nhận ra nó ở dạng số.
Thường thì HTML cắt bớt khoảng trống trong chữ của bạn. Ví dụ nếu bạn viết 10 chỗ trống trong text của bạn thì HTML sẽ loại bỏ 9 trong số đó. Để thêm khoảng trống vào chữ của bạn, bạn phải sử dụng ký tự đặc biệt là &nbsp;

Những ký tự được dùng thường xuyên nhất

Kết quả
Loại
Tên của ký tự
Số
một khỏang trắng
&nbsp;
&#160;
<
nhỏ hơn
&lt;
&#60;
>
lớn hơn
&gt;
&#62;
&
dấu và
&amp;
&#38;
"
ngoắc kép
&quot;
&#34;
'
ngoặc đơn
&apos; (does not work in IE)
&#39;

Một vài ký tự khác

Kết quả
Loại
Tên của ký tự
Số
¢
cent
&cent;
&#162;
£
pound
&pound;
&#163;
¥
yen
&yen;
&#165;
§
section
&sect;
&#167;
©
copyright
&copy;
&#169;
®
registered trademark
&reg;
&#174;
×
nhân
&times;
&#215;
÷
chia
&divide;
&#247;
Learn more »

[HTML] Bài 8 : Nhóm Thẻ INLINE - Liên Kết

1. Giới thiệu Siêu Liên kết

Siêu liên kết cho phép người truy cập có thể duyệt từ trang web này đến trang web khác, từ vị trí này sang vị trí khác hay dùng để mở một object nào đó (có thể là file word, excel, pdf, mp3...) . Một liên kết gồm 3 thành phần:
Nguồn: chứ nội dung hiển thị khi truy cập đến có thể là một trang web,  một đoạn phim, một hình ảnh ..v..v..
Nhãn: có thể là 1 dòng văn bản hay hình ảnh để người dùng click vào khi muốn truy câp dến nguồn.
Đích: xát định vị trí để nguồn hiển thị.

2. Tag A ( Anchor) và mối liên kết:

Mục đích chính của thẻ a đương nhiên là giúp người dùng có thể tương tác với website thông qua chuột (click chuột). Tương tác ở đây là có thể đưa người đọc/xem website đến một liên kết bên trong trang web hoặc ngoài trang. ( ở Blogspot, các bạn có thể dễ dàng nhìn thấy link xuất hiện ở các tiêu đề bài viết, mình tạo ra thẻ liên kết đó thì bạn mới vào đọc được bài viết này ^^)
Nói chung lại, nếu không có thẻ liên kết a thì cũng chẳng có Google, facebook hay Blogger, Dantri,... nào cả.
Cú Pháp: <A>Nội Dung Liên Kết<A>
- Nội dung liên kết có thể là từ, cụm từ hay đoạn văn, hình ảnh, video.
- Khi bạn di chuyển chuột qua một thẻ a, điều dễ nhận biết là con trỏ chuột sẽ biến thành bạn tay nhỏ.
- Thông thường thẻ a có đường gạch chân dưới nội dung liên kết.

2.1 Thuộc tính HREF :

HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên kết đến:
Một tài liệu khác (external link) hay một phần khác nằm trong chính tài liệu đang đọc (internal link).
Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link thì không cần phải có phần giao thức.

2.2 Liên kết ra ngoài – External Links :

Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị.
Nên chọn các từ làm đầu mối sao cho gợi tả và sao cho tự nhiên, không ảnh hưởng đến nội dung và ý nghĩa của câu văn. Tránh sử dụng lặp đi lặp lại câu "nhấn vào đây" khi tạo đầu mối liên kết.
Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là như sau:

2.3 Địa chỉ tuyệt đối :

Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích
.
Ví Dụ:
code html:
<a href="http://google.com.vn" target="_blank">Google Việt Nam</a>
Hiển Thị trên trình duyệt:
Google Việt Nam
*Thuộc tính:- href: bắt buộc phải có bởi vì có nó mới có đường dẫn cần trỏ tới
- target: thuộc tính này quy định liên kết được mở ra ở đâu, có các giá trị:
_blank: mở trang web ở cửa sổ hay tab mới
_seft: mở ở cửa sổ hiện tại mặc định khi không có thuộc tính target thì thẻ <a> sẽ mở ở cửa sổ hiện tại.

2.4 Địa chỉ tương đối :

Nếu liên kết đến một tệp ở ngay trên máy chủ (hoặc cùng 1 foder) của bạn thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích.

2.5 Liên kết nội tại – Internal Link :

Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng.

Để làm điều này, cần đánh dấu điểm đích - book mark- của liên kết bằng thẻ neo.
còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên.
Lưu ý có thêm dấu "#".
Cấu trúc:

- Bước đặt tên:
<a name="muc-1">Đây là mục 1</a>
<a id="muc-1">Đây là ID mục 1</a>
- Bước tạo liên kết:
<a href="#muc-1">Di chuyển đến mục 1</a>
Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book mark ở đầu trang với tên là Top chẳng hạn. Sau đó, tạo thẻ neo liên kết ở dòng dưới như sau :

3. Liên kết đa phương tiện:


- Sử dụng ảnh làm liên kết:
<a href="http://www.google.com.vn" target="_bank"><img src="google.png"></a>
Xem ví dụ:

- Liên kết đến âm thanh, đoạn nhạc:
<a href="doan-nhac-cua-toi.mp3">Nghe nhạc của tôi</a>

Ví dụ: Tải bài nhạc

- Liên kết đến Đoạn phim:
<a href="video-cua-toi.avi"></a>

Ví dụ: Tải đoạn phim
Learn more »