Tổng quan HTML

Chào mừng các bạn đến với các bài hướng dẫn về HTML. Sau khi học xong các bài hướng dẫn  này các bạn có thể nắm các kiến thức cơ bản HTML, tự mình làm một website. Nếu các bạn biết XML, thì việc học HTML đơn giản hơn. Các bạn không nên đọc các bài hướng dẫn từ đầu đến cuối, nên vừa đọc vừa làm bài thực hành.

Chuẩn bị học HTML
Để thiết kế các trang web HTML không khó, bạn chỉ cần các trình soạn thảo:

  • Notepad
  • Wordpad
  • Dreamweaver

Các trang web
Tại sao web thì rất hữu ích trên internet? Điều này có thể giải thích:

  • Cách đơn giản nhất để truyền  thông tin trên Internet
  • Một hình thức để quảng bá doanh nghiệp của bạn
  • Bạn có thể nói với thế giới rằng bạn có điều gì đó để nói trên một trang cá nhân

Một số khái niệm cần nhớ trong lúc học HTML

  • Tag (thẻ) - được sử dụng để xác định vùng của tài liệu HTML, trình duyệt sẽ đọc sau. Cú pháp: <tag>Nội dung </tag>
  • Element (thành phần) - là một thẻ hoàn chỉnh, có thẻ mở <tag> và thẻ đóng </ tag>.
  • Attribute (thuộc tính) - được sử dụng để thay đổi giá trị của một phần tử trong HTML. Thường thì một phần tử có một số thuộc tính.


Hướng dẫn học:

Đối với các hướng dẫn, bạn có thể sử dụng menu ở bên trái để xem nhanh các bài hướng dẫn, hoặc bạn có thể đọc nó từ trang hiện tại đến trang kế tiếp bằng cách nhấn nút "Bài kế tiếp >>", nằm ở đầy trang hoặc nằm ở cuối trang. Nếu bạn muốn xem demo, click vào nút Xem ví dụ

HTML Là gì?

  1. HTML ( Hyper Text Markup Language) ngôn ngữ đánh dấu siêu văn bản
  2. HTML không phải ngôn ngữ lập trình.
  3. HTML là một ngôn ngữ đánh dấu.
  4. Ngôn ngữ đánh dấu chứa một hợp các thẻ được gọi là thẻ đánh dấu.
  5. Để định dạng các web người ta dùng các thẻ đánh dấu.
  6. Các thành phần HTML là khối cơ bản để xây dựng các trang web.


Ví dụ trang HTML cơ bản

<!DOCTYPE html>
<html>

   <head>
      <title>Hiep Si IT Demo</title>
   </head>
    
   <body>
      <h1>Tiêu đề</h1>
      <p>Định nghĩa đoạn văn bản</p>
   </body>
    
</html>

Xem ví dụ

Các phiên bản HTML  :

Phiên bản Năm
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML 5.0 2012
XHTML 5.0 2013

 

Thẻ (tag) HTML

Các thẻ HTML chứa 3 thành phần chính: <thẻ mở> nội dung </thẻ đóng>, Nhưng có một số thẻ vừa mở và đóng luôn.
Khi trình duyệt đọc một trang HTML, trình duyệt đọc trên xuống dưới, từ trái sang phải. Các thẻ HTML được sử dụng để tạo các trang  HTML và hiển thị thuộc tính của chúng. Mỗi thẻ HTML có các thuộc tính khác nhau
Cú pháp:
<Tênthẻ [Thuộctính]>Thành phần chịu tác động</Tênthẻ>

Ghi chú: Các thẻ HTML luôn luôn viết thường, cho phép các thẻ lồng nhau, viết các thẻ trên cùng 1 dòng hoặc nhiều dòng. 

Ví dụ:
<p> Thẻ Paragraph </p>
<h2> Thẻ tiều đề </h2>
<b> Chữ in đậm</b>
<i> Chữ in nghiêng </i>
<u> Gạch chân chữ</u> 

Cấu Trúc Tổng Quát Của Tập Tin HTML:

Ví dụ:

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Tiêu đề 1</h1>

<p>Đoạn văn bản.</p>

</body>
</html>

Xem ví dụ

Tên thẻ Giải thích
<!DOCTYPE html> Định nghĩa loại văn bản và phiên bản trang web
<html> và </html> Chứa nội dung mô tả của trang web
<head></head> Chứa tiêu đề của trang web, các tập tin hỗ trợ, các khai báo,.
<body> và </body> Chứa các nội dung mà bạn muốn hiển thị ra màn hình
<h1> và </h1> Định dạng tiêu đề
<p> và </p> Định dang đoạn văn bản hiển thị dạng paragraph

Phân loại thẻ HTML theo mục đích sử dụng

Có khoảng 118 thẻ HTML, nhiều phết, trong đó có thẻ bạn sẽ dùng rất thường xuyên, có cái hoạ hoằn lắm mới dùng. Tuy vậy cũng giống như ngôn ngữ, cho dù ít dùng ta cũng cần biết nghĩa của nó là gì, để khi người khác nói, hoặc khi ta muốn trình bày một ý tưởng gì đó không giống như mọi lần thì ta lôi ra mà dùng được.


1. Các thẻ mở và đóng cùng một lúc
<br/> Tag: br xuống một dòng văn bản, thẻ này đặt cuối dòng cần xuống dòng.
<hr/> Tag: hr Thẻ này được sử dụng để đặt một đường thẳng trên trang web.


2. Các thẻ Meta của HTML
DOCTYPE, title, link, meta and style
Các thẻ định dạng văn bản của HTML
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> và <br>
Các thẻ liên kết
<a> và <base>


3. Các thẻ hình ảnh và đối tượng
<img>, <area>, <map>, <param> and <object>


4. Các thẻ danh sách
<ul>, <ol>, <li>, <dl>, <dt> and <dd>


5. Các thẻ tạo bảng
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption


6. Các thẻ Form
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
Các thẻ scripting
script and noscript
 

Trình soạn thảo  HTML

1. Cài (hoặc cập nhật) trình duyệt .
Firefox, Chrome, IE version mới nhất vào máy của bạn
Firefox là trình duyệt quan trọng và không thể thiếu đối với người làm web, bạn cần có nó với version mới nhất.
 

2. Notepad++

Notepad++ là IDF đơn giản nhất và rất hiệu quả. Tôi có thể sai trong việc gọi nó là một IDE nhưng nó giải quyết bài toán cho nhiều lập trình viên ở đây.  Sự đơn giản là khía cạnh quan trọng nhất của Notepadd++ và nó cũng đứng đầu tiên trong tốp 5 trình soạn thảo text cho các lập trình viên.

Các thông tin khác

  • Có sẵn: Windows.
  • Chi phí: miễn phí.
  • Download: Notepad ++.

3. Cài đặt Addon Firebug
Firebug là một Addon (tiện ích) của trình duyệt Firefox, bạn rất cần có nó để phân tích, định dạng, lấy các code Html, css, javascript của các trang web.
Cách cài đặt Firebug như sau :
– Bạn mở Firefox lên, vào Google gõ từ khóa Firebug rồi nhắp link trong kết quả tìm kiếm (như hình) hoặc vào đây https://addons.mozilla.org
 
– Nhấp nút Add to Firefox


 


– Xong nhấp Install Now

4. Soạn thảo trang web

4.1. Sử dụng trình soạn thảo Notepad

Trang web là 1 tập tin văn bản không định dạng, chứa các thẻ(Tag). Viết bằng mã nguồn HTML trên chương trình soạn thảo văn bản không định dạng như: NotePad. 
Khởi động : Start/Program/Accessories/NotePad 
Ghi chú: Nếu sử dụng chữ có dấu, thì phải 

  • Thiết lập bảng mã Unicode cho trình gõ VietKey, Unikey, 
  • Chọn Font Unicode trong trình soạn thảo (Format / Font  Arial , Tahoma, . . .)

4.2. Đặt tên, Lưu & Mở tập tin:
Tập tin lưu trữ có phần mở rộng là: .htm hoặc .html
a. Lưu tập tin: Tại cửa sổ soạn thảo: File/Save
Filename: Tên.html (VD: VD01.html)
Save as type: AllFiles
Encoding: UTF-8 (Nếu nội dung có dấu) -> Save


b. Lưu lại với tên khác:  Tại cửa sổ soạn thảo File/Save As
c. Mở tập tin đã soạn thảo: 
 Tại cửa sổ soạn thảo: File/Open ->  Chọn tập tin cần mở  -> Open
 


4.3. Xem trang Web sau khi soạn thảo:
Cách 1: Mở thư mục đã lưu trữ -> Double Click tập tin  .htm  
Cách 2: Khởi động trình duyệt-> File/Open -> Chọn Browser để tìm tập tin cần mở -> Ok -> Kết quả hiện thị 

5. Soạn thảo trực tuyến

Ngoài ra các bạn có thể dùng công cụ soạn HTML trực tuyến của HiepSiiT.com trong mỗi ví dụ. Bạn cũng có thể lưu code xuống máy của bạn bằng cách click vào lưu code.

Link soạn thảo trực tuyến của hiepsiit.com: Soạn thảo trực tuyến

Cách ghi chú thích trong HTML

Trong quá trình soạn thảo mã HTML, đôi lúc bạn sẽ cần:

  • Ghi một vài câu chú thích nào đó (những câu chú thích này không hiển thị ra màn hình)
  • Hoặc vô hiệu hóa một đoạn mã HTML để kiểm tra sự thực thi của các đoạn mã khác.

Khi đó, chúng ta sẽ đặt những nội dung mà mình muốn chú thích vào bên trong cặp dấu <!-- -->

Ví dụ

<!-- Câu này là chú thích nên KHÔNG được hiển thị -->
<p>Đoạn này không phải chú thích nên được hiển thị</p>
<!--<p>Đoạn này là chú thích nên KHÔNG được hiển thị</p>-->

Xem ví dụ

Các câu chú thích có thể được viết trên nhiều dòng

Ví dụ

<!--<p>Câu này là chú thích nên KHÔNG được hiển thị</p>
<p>Câu này là chú thích nên KHÔNG được hiển thị</p>
<p>Câu này là chú thích nên KHÔNG được hiển thị</p>-->
<p>Câu này không phải chú thích nên được hiển thị</p>

Xem ví dụ

Chú thích dựa theo điều kiện
Chú thích dựa theo điều kiện chỉ làm việc trên trình duyệt Internet Explorer (IE), còn đối với các trình duyệt khác thì chúng sẽ bị bỏ qua.

Chú thích dựa theo điều kiện được hỗ trợ từ phiên bản IE5 trở đi. Bạn có thể sử dụng chúng để đưa ra các hướng dẫn điều kiện cho các phiên bản khác nhau của IE.

Ví dụ 
Nếu bạn xem ví dụ này bằng trình duyệt IE8 thì trên màn hình sẽ hiển thị dòng chữ "BẠN ĐANG SỬ DỤNG TRÌNH DUYỆT Internet Explorer 8". Còn nếu xem bằng các trình duyệt khác thì sẽ không thấy dòng chữ đó.

<!DOCTYPE html>
<html>
<body>
<!--[if IE 8]>
   <p>BẠN ĐANG SỬ DỤNG TRÌNH DUYỆT Internet Explorer 8</p>
<![endif]-->
</body>
</html>

Xem ví dụ

Ví dụ 
Nếu bạn xem ví dụ này bằng trình duyệt IE phiên bản cũ hơn 9 thì trên màn hình sẽ hiển thị dòng chữ "BẠN ĐANG SỬ DỤNG TRÌNH DUYỆT Internet Explorer phiên bản cũ hơn 9". Còn nếu xem bằng các trình duyệt khác thì sẽ không thấy dòng chữ đó.

<!DOCTYPE html>
<html>
<body>
<!--[if lt IE 9]>
   <p>BẠN ĐANG SỬ DỤNG TRÌNH DUYỆT Internet Explorer phiên bản cũ hơn 9</p>
<![endif]-->
</body>
</html>

Xem ví dụ

Các thẻ HTML định dạng văn bản

Định dạng làm cho văn bản đẹp hơn lúc ban đầu. Trong HTML có rất nhiều thẻ dùng để định dạng HTML như: In đậm, in nghiêng, hoặc gạch chân. 
Dưới đây chúng ta có 11 thẻ định dạng cơ bản:

1. In đậm
Nếu bạn muốn In đậm 1 đoạn văn bản thì bạn dùng thẻ <b>.

Cú pháp:

 <b>Nội dung cần in đậm</b> 

<p> <b>Đoạn văn bản này được In Đậm.</b></p>   

Xem ví dụ

2. In Nghiêng

Nếu bạn muốn In nghiêng 1 đoạn văn bản thì bạn dùng thẻ <i>.

Cú pháp:

 <i>Nội dung cần in đậm</i>

<p> <i>Đoạn văn bản này được In nghiêng.</i></p>   

Xem ví dụ

3. Đánh dấu HTML

Nếu bạn muốn  đánh dấu đoạn văn bản, bạn nên viết nội dung trong thẻ <mark>

Cú pháp:

<mark> Nội dung</ mark>.

<h2>  Tôi muốn đóng <mark> dấu</mark>lên khuông mặt của bạn</h2>  

Xem ví dụ


4. Gạch chân văn bản

Nêu bạn muốn gạch chân đoạn văn bản dùng thẻ sau <u>.

Cú pháp:

<u>Nôi dung </u>

<p> <u> Đoạn văn bản này được gạch chân.</u></p>   

Xem ví dụ

5. Gạch ngang đoạn văn bản

Đôi khi bạn muốn đoạn văn bản gạch ngang ta dùng thẻ <strike>.
Cú pháp:
<strike>Nội dung </strike>

<p> <strike>Đoạn văn bản sau được gạch ngang</strike>.</p>   

Xem ví dụ

6.Tạo chỉ số trên

Nếu bạn muốn tạo chỉ số trên dùng thẻ <sup>:

Cú pháp:

<sup>Nội dung</sup>

<p>AX <sup>3.</sup>+BX<sub>2</sup>+CX+B=0</p> 

  Xem ví dụ

7. Tạo chỉ số dưới

Nếu bạn muốn tạo chỉ số trên dùng thẻ <sub>.

Cú pháp:

<sub>Nội dung</sub>

<p>H <sub>2</sub>O</p>  


Xem ví dụ

8. Đoạn văn bản gạch ngang

Nếu bạn muốn đoạn văn bản gạch ngang dùng thẻ <del>.

Cú pháp :

<del>Nội dung</del>

<p> <del>Xóa một đoạn văn bản.</del></p>  

Xem ví dụ

9. Gạch chân một đoạn văn bản

Nếu bạn muốn đoạn văn bản bị gạch chân dùng thẻ <ins>

Cú pháp:

<ins>Nội dung</ins>

<p> <del>Xóa một đoạn văn bản.</del><ins>Viết thêm đoạn văn bản khác.</ins></p>   


Xem ví dụ

10. Đoạn văn bản có font chữ lớn

Nếu bạn muốn đặt kích thước font lớn hơn phần còn lại của văn bản thì đặt nội dung trong <big> ......... </ big>. Tăng kích thước phông chữ lớn hơn kích thước phông trước.

Cú pháp: <big>Nội dung</big>

<p>Xin chào <big>Đoạn văn bản có font chữ lớn.</big></p>  

Xem ví dụ0

11. Đoạn văn bản có font chữ nhỏ 

Nếu bạn muốn đặt kích thước font nhỏ hơn phần còn lại của văn bản thì đặt nội dung trong < small> ......... </ small>. Tăng kích thước phông chữ lớn hơn kích thước phông trước.

Cú pháp: 
< small>Nội dung</ small>
 

<p>Xin chào < small>Đoạn văn bản có font chữ nhỏ.</ small></p>   

Xem ví dụ1

 

Đừng quên </thẻ đóng>
Một phần tử HTML phải đầy đủ ba thành phần <thẻ mở>Nội dung của phần tử</thẻ đóng>
Nếu thiếu </thẻ đóng> thì sẽ ảnh hưởng đến các phần tử khác, dẫn đến việc hiển thị không như ý muốn của bạn.

 

Thẻ tiêu đề HTML.


Thẻ tiêu đề của HTML dùng để  định nghĩa các tiêu đề hoặc phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề <h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản phụ thuộc thẻ tiêu đề đang sử dụng.
Các thẻ từ h1, h2 cho đến h6 dùng để định nghĩa các tiêu đề, h1 dùng cho tiêu đề quan trọng nhất, h2 dùng cho tiêu đề quan trọng thứ hai, cho đến h6 dùng cho tiêu đề ít quan trọng nhất.
H1 có tiêu đề lớn nhất và h6 là loại nhỏ nhất. Vì vậy, h1 được sử dụng cho tiêu đề quan trọng nhất và h6 được sử dụng ít quan trọng nhất.
 

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>
<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>
<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>
</body>
</html>

Xem ví dụ

THIẾT KẾ BẢNG BIỂU

Table trong HTML

Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng.

Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang… Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Các thẻ định nghĩa bảng trong HTML

Thẻ Giải thích
<table> Định nghĩa bảng.
<tr> Định nghĩa một dòng trong một bảng.
<th> Định nghĩa phần header (dòng đầu tiên) của bảng.
<td> Định nghĩa 1 ô của bảng.
<caption> Định nghĩa phụ đề bảng.
<colgroup> Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.
<col> Được sử dụng với thẻ <colgroup> để chỉ định thuộc tính cột cho mỗi cột.
<tbody> Được sử dụng để nhóm nội dung body trong một bảng.
<thead> Được sử dụng để nhóm nội dung header trong một bảng.
<tfooter> Được sử dụng để nhóm nội dung footer trong một bảng.

Ví dụ tạo bảng có 5 dòng 3 cột  = 5*3=15 giá trị

<table>  
<tr><th>Họ và tên</th><th>Giới tính</th><th>Lương</th></tr>  
<tr><td>Thích Học Lại</td><td>Nam</td><td>10000000</td></tr>  
<tr><td>Thích Ăn Chơi</td><td>Nữ</td><td>3000000</td></tr>  
<tr><td>Thích Thi Lại</td><td>Nam</td><td>4000000</td></tr>  
<tr><td>Thích Không Thích</td><td>Nữ</td><td>500000</td></tr>  
</table>  

Xem ví dụ


Định Dạng Bảng
a. Tạo đường viền cho bảng.

<TABLE BORDER=n  BORDERCOLOR="Trị màu">
 . . . . . . .
</TABLE>


Sử dùng thuộc tính Border trong thẻ Table, n tính bằng Pixel, mặc định là 2.

Tạo đường viền có bóng.

<TABLE Border=n  BorderColorDark="Trị" BorderColorLight="Trị">
 . . . . . . .
</TABLE>
  • BorderColorDark: Màu đậm
  • BorderColorLight: Màu sáng

Ví dụ :

<table border=2 bordercolordark="#999" bordercolorlight="#333">  
<tr><th>Họ và tên</th><th>Giới tính</th><th>Lương</th></tr>  
<tr><td>Thích Học Lại</td><td>Nam</td><td>10000000</td></tr>  
<tr><td>Thích Ăn Chơi</td><td>Nữ</td><td>3000000</td></tr>  
<tr><td>Thích Thi Lại</td><td>Nam</td><td>4000000</td></tr>  
<tr><td>Thích Không Thích</td><td>Nữ</td><td>500000</td></tr>  
</table>  

Xem ví dụ

b. Thiết lập độ rộng và canh lề bảng

<TABLE Width=n  Align= "Center" / "Left"/ "Right" > 
	. . . . . . .
</TABLE>
  • n: Độ rộng cố định tính bằng pixel Hoặc độ rộng tương đối % kích thước cửa sổ .
  • Center: Canh giữa cửa sổ trình duyệt, Văn bản không cuộn bao quanh.
  • Left: Canh trái cửa sổ trình duyệt, Văn bản sẽ cuộn bao quanh bên phải bảng.
  • Right: Canh phải cửa sổ trình duyệt, văn bản sẽ cuộn quanh bên trái bảng.

c. Xác lập màu, ảnh nền cho bảng, hàng, ô.

Dùng thuộc tính Bgcolor và Background trong các thẻ tương ứng. 
 

Thuộc tính Ý nghĩa
<Table Bgcolor="Trị"> Màu nền cho toàn bảng
<Table Background="Image.gif"> Ảnh nền cho toàn bảng
<TR Bgcolor="Trị"> Màu nền cho toàn hàng
<TR Background="Image.gif"> Ảnh nền cho tòan hàng
<TD Bgcolor="Trị"> Màu nền cho ô
<TD Background="Image.gif">    Ảnh nền cho ô 
<TH Bgcolor="Trị">     Màu nền cho ô tiêu đề
<TH Background="Image.gif">    Ảnh nền cho ô tiêu đề

d. Định dạng ô.

  • Canh lề nội dung trong ô :Dùng thuộc tính Align cho các thẻ tương ứng
Thuộc tính Ý nghĩa
<TD Align="Hướng"> Canh theo chiều ngang ô các hướng: Left, Right, Center
<TD VAlign="Hướng"> Canh theo chiều dọc ô các hướng: Top, Bottom, Middle
<TH Align="Hướng"> Canh hàng tiêu đề theo chiều ngang
<TH VAlign="Hướng"> Canh hàng tiêu đề theo chiều dọc
<TR Align="Hướng"> Canh theo chiều ngang các ô trong hàng
<TR VAlign="Hướng"> Canh theo chiều dọc các ô trong hàng
  • Khỏang cách trong ô và giữa các ô

CellSpacing="n"  Khoảng cách giữa các ô. 
CellPadding="n" Khoảng cách quanh nội dung ô Pixel mặc định là 2 Pixcel.

  • Thiết kế bảng trôn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ TD. TH  để tạo ô có nhiều hàng/cột.
Thuộc tính Ý nghĩa
<TD RowSpan="n"> Tạo ô có độ cao n hàng
<TD ColSpan="n"> Tạo ô có độ rộng n cột
<TH RowSpan="n"> Tạo ô tiêu đề có độ cao n hàng
<TH ColSpan="n"> Tạo ô tiêu đề có độ rộng n cột

Ví dụ:

<HTML><HEAD> <TITLE> Định dạng Table</TITLE> </HEAD>
<BODY>
<TABLE  Border=1 BorderColor= "Purple" CellSpacing=0  Width=650>
   <Caption><H2> KẾT QUẢ HỌC TẬP</Caption>
   <TR VAlign=Middle Align=Center BgColor="Lime">
       <TH RowSpan=2 Width=150>Họ và Tên<BR>Học Sinh</TH>
       <TH ColSpan=2 Width=150> Năm Sinh</TH>
        <TH RowSpan=2 Width=70>Điểm<BR>TB</TH>
        <TH RowSpan=2 Width=130> Xếp Lọai</TH>
   </TR>
  <TR Align=Center BgColor="Lime">
         <TH  Width=75> Nam </TH>
         <TH  Width=75>Nữ </TH>
   </TR>   
   <TR Align=Center>
         <TD Align="Left"> Lê Thanh Xuân </TD>
         <TD> &nbsp; </TD>
         <TD> 1950 </TD>
         <TD> 8.5 </TD>
         <TD> Giỏi</TD>            
   </TR>
     . . . . .
   <TR Align=Center>
        <TD Align="Left"> Lưu Thế Mạc</TD>
        <TD>1985 </TD>
         <TD> &nbsp; </TD>
        <TD> 4.5 </TD>
        <TD> Kém </TD>            
   </TR>
   <TR Align="Center" BgColor="Lime">
        <TD ColSpan=3> <B>Tổng số học sinh đạt:</B></TD>
        <TD ColSpan=2> <B>4 Học sinh<B></TD>
   </TR>
</TABLE></BODY>
</HTML>

Xem ví dụ

 

Danh sách trong HTML


Danh sách trong HTML được sử dụng để hiển thị danh sách thông tin. Có ba loại khác nhau của danh sách HTML:

  1. Danh sách có thứ tự hay danh sách có đánh số (ol)
  2. Danh sách không có thứ tự (ul)
  3. Danh sách định nghĩa (dl)

Danh sách có thứ tự hay danh sách có đánh số (ol)
Trong các danh sách HTML có thứ tự, tất cả các mục danh sách được đánh dấu bằng các con số tăng dần. Danh sách có thứ tự bắt đầu với thẻ <ol> và các mục danh sách bắt đầu bằng thẻ <li>.

Ví dụ:

<ol>
        <li> Ngôn ngữ HTML &amp FrontPage </li>
        <li> DreamWeaver MX </li>
        <li> Khai thác và Quản trị Domain, Hostting</li>
        <li> Ngôn ngữ kịch bản JavaScript;</li>
        <li> Ngôn ngữ lập trình ASP &amp; SQLServer</li>
   </ol>

Xem ví dụ

Danh Sách Không Đánh Số Thứ Tự 
Danh sách không đánh số thứ tự là: Tạo chỉ mục, hoa thị (Bullets) đầu mỗi đoạn. Mỗi mục sẽ thụt vào đầu dòng.

Ví dụ:

<ul>
        <li> Ngôn ngữ HTML &amp FrontPage </li>
        <li> DreamWeaver MX </li>
        <li> Khai thác và Quản trị Domain, Hostting</li>
        <li> Ngôn ngữ kịch bản JavaScript;</li>
        <li> Ngôn ngữ lập trình ASP &amp; SQLServer</li>
   </ul>

Xem ví dụ

Danh Sách Định Nghĩa
Dùng để lập danh sách thuật ngữ. Mỗi mục của danh sách gồm 2 phần:  
Khái báo thuật ngữ
        Định nghĩa thuật ngữ

Ví dụ:

<HTML>
<HEAD><TITLE> Chuong Trinh DT</TITLE></HEAD>
<BODY Text="Blue">
   <B>CHƯƠNG TRÌNH ĐÀO TẠO </B>
   <DL>
      <DT><Font Color="Red">TIN HỌC VĂN PHỊNG</FONT>
          <DD> Tin học căn bản &amp; WindowsXP
   	<DD> Sọan Thảo văn bản MicroSoft Word</DD>
	<DD> Xử lý bảng tính MicroSoft Excel
       <DT><FONT Color="Red"> TIN HỌC QUẢN LÝ </FONT>
	 <DD> Lập trình CSDL MicroSoft Access 2003</DD>
	 <DD> Thiết kế trình chiếu MicroSoft PowerPoint</DD>
   </DT>
        </DL>
</BODY>
</HTML>

Xem ví dụ

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

Danh sách không đánh số thứ tự là: Tạo chỉ mục, hoa thị (Bullets) đầu mỗi đoạn. Mỗi mục sẽ thụt vào đầu dòng.

Cú Pháp:

<ul> 
	<li> Mục 1 của danh sách</li>
	<li> Mục 2 của danh sách</li>
. . . . . . .
	<li> Mục n của danh sách</li>
</ul>

Ví dụ: Tạo danh sách với nội dung:

<ul>
	<li> Ngôn ngữ HTML &amp FrontPage </li>
	<li> DreamWeaver MX </li>
	<li> Khai thác và Quản trị Domain, Hostting</li>
	<li> Ngôn ngữ kịch bản JavaScript;</li>
	<li> Ngôn ngữ lập trình ASP &amp; SQLServer</li>
 </ul>

Xem ví dụ

Thay đổi kiểu dáng cho chỉ mục
<UL Type=Trị thuộc tính>   : ->Áp dụng cho tất cả các mục.
<LI Type= Trị thuộc tính>   : -> Áp dụng cho 1 mục chỉ định.

Có 4 kiểu ký tự bắt đầu của danh sách không có thứ tự trong HTML.

  • disc
  • circle
  • square
  • none


Để biển diễn 4 kiểu trên ta phải sử dụng thuộc tính type trong thẻ <ul>

Thuộc tính Diễn giải
type=”disc” Đây là kiểu mặc định, danh mục được đánh bằng các dấu tròn đen
type=”circle” Với kiểu này, danh mục được đánh bằng các hình tròn rỗng.
type=”square” Với kiểu này, danh mục được đánh bằng các hình vuông đen đặc.
type=”none” Với kiểu này, danh mục không được đánh bằng ký tự gì.


Ví dụ: Tạo danh có các thuộc tính trên:

<HTML>
<HEAD><TITLE>  Thay Đổi Kiểu Dáng Chỉ Mục</TITLE></HEAD>
<BODY>
     <H3> CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB</H3>
     <ul TYPE="circle">
         <li> Ngôn ngữ HTML &amp; FrontPage </li>
         <li> DreamWeaver MX </li>
         <li TYPE="square">Quản trị Domain, Hosting</li>
         <li TYPE="square"> Ngôn ngữ kịch bản JavaScript;</li>
         <li TYPE="disc"> Ngôn ngữ ASP &amp; SQLServer</li>
     </ul>
</BODY>
</HTML>

Xem ví dụ

Danh Sách Có Đánh Số Thứ Tự 

Danh sách có đánh số TT là: Loại danh sách có đánh thứ tự theo số hay theo ký tự (Numbering) đầu mỗi đoạn.  

Cách tạo danh sách có thứ tự:

<ol> 
	<li> Mục 1 của danh sách </li>
	<li> Mục 2 của danh sách</li>
. . . . . . .
	<li> Mục n của danh sách</li>
</ol>

Ví dụ: Tạo danh sách có thứ tự sau:

<HTML>
<HEAD><TITLE> Chuong Trinh DT </TITLE></HEAD>
<BODY>
     <H3> CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB </H3>
   <ol>
	<li> Ngôn ngữ HTML &amp FrontPage </li>
	<li> DreamWeaver MX </li>
	<li> Khai thác và Quản trị Domain,Hostting</li>
	<li> Ngôn ngữ kịch bản JavaScript;</li>
	<li> Ngôn ngữ lập trình ASP &amp; SQLServer</li>
   </ol>
</BODY></HTML>

Xem ví dụ
 

Thay đổi cách đánh số thứ tự

<ol type=Trị>                                  ->Kiểu STT cho toàn văn bản danh sách
<li yype= Trị> Mục của danh sách    ->Kiểu STT cho 1 mục chỉ định 

Các trị kiểu, danh sách đánh số có 5 kiểu như sau:

  1. Kiểu số (1, 2, 3)
  2. Kiểu số La Mã (I, II, III)
  3. Kiểu số La Mã thường (i, ii, iii)
  4. Kiểu chữ hoa (A, B, C)
  5. Kiểu chữ thường (a, b, c)

Để biển diễn 5 kiểu trên ta phải sử dụng thuộc tính type trong thẻ <ol>
 

Thuộc tính Diễn giải
type="1" Đây là kiểu mặc định, ở đó các danh mục được đánh bằng các con số (1, 2, 3,...)
type="I" Với kiểu này, danh mục được đánh bằng các ký tự La Mã (I, II, II, IV, ...)
type="i" Với kiểu này, danh mục được đánh bằng các ký tự La Mã thường (i, ii, iii, iv,..).
type="a" Với kiểu này, danh mục được đánh bằng các ký tự chữ thường (a, b, c, ..).
type="A" Với kiểu này, danh mục được đánh bằng các ký tự chữ hoa (A, B, C, ...).


Ví dụ: Tạo danh sách có thứ tự với nội dung:

<HTML>
<HEAD>
<TITLE> Chương Trình Đào Tạo</TITLE>
</HEAD>
<BODY >
<H3> CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB </H3>
   <ol TYPE="A">
	<li> Ngơn ngữ HTML &amp FrontPage</li>
	<li> DreamWeaver MX </li>
	<li> Ngơn ngữ kịch bản JavaScript;</li>
	<li> Ngơn ngữ ASP &amp; SQLServer</li>
   </ol>
</BODY>
</HTML>

Xem ví dụ
 

Chỉ định giá trị khởi đầu

<ol Start=Trị>  : ->Tác động tất cả các mục trong danh sách trừ khi mục trong dánh sách chỉ định khác.
<li Value = Trị> Mục của danh sách : ->Tác động mục chỉ định và các mục sau đó nếu các mục này không chỉ định khác. 

Ví dụ:

<HTML>
<HEAD><TITLE> Chương Trình Đào Tạo </TITLE></HEAD>
<BODY >
<H3> CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB </H3>
   <ol Type="1">
	<li> Ngôn ngữ HTML &amp FrontPage </li>
	<li> DreamWeaver MX </li>
	<li> Ngôn ngữ kịch bản JavaScript;</li>
	<li> Ngôn ngữ ASP &amp; SQLServer</li>
   </ol>
<H3> CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB NC</H3>
   <ol Type="1" START="5">
	<li> Ngôn ngữ XML </li>
	<li> Ngôn ngữ Visual Basic.Net</li>
	<li> Công nghệ ASP.Net </li>
   </ol>
</BODY>
</HTML>

Xem ví dụ
 

Danh Sách Định Nghĩa

Dùng để lập danh sách thuật ngữ. Mỗi mục của danh sách gồm 2 phần:  
Khái báo thuật ngữ
        Định nghĩa thuật ngữ

Cú pháp:

<DL> 
   <DT> Khai báo thuật ngữ 
      <DD> Định nghĩa thuật ngữ 1 </DD>
      <DD> Định nghĩa thuật ngữ 2 </DD>	
   </DT>	
</DL>

 Giải thích:

  1. Thẻ <dl> là thẻ bắt đầu của danh sách mô tả.
  2. Thẻ <dt> định nghĩa một thuật ngữ.
  3. Thẻ <dd> định nghĩa mô tả.

Danh sách định nghĩa là rất thích hợp khi bạn muốn trình bày bảng thuật ngữ, danh sách các điều khoản hoặc danh sách giá trị tên khác.

Ví dụ:

<dl>  
  <dt> Bạch Dương </dt>  
  <dd> - Một trong 12 cung tử vi. </dd>  
  <dt> Bingo </dt>  
  <dd> - Là một món ăn </dd>  
  <dt> Leo </dt>  
  <dd> - Là một trong 12 cung tử vi. </dd>  
  <dt> Oracle </dt>  
  <dd> - Là một tập đoàn công nghệ đa quốc gia. </dd>   
</dl>  

Xem ví dụ

Danh Sách Lồng Nhau

Kết hợp các thẻ <UL>,  <OL>,  <LI> để lập danh sách lồng nhau 

Chú ý: Muốn danh nào làm danh sách con, thì đặt danh sách đó trong cặp thẻ <li>Đặt tại dậy </li> của danh sách cha.

 Ví dụ: Tạo danh sách lồng nhau với nội dung:

<HTML>
<HEAD><TITLE> Tạo Danh Sách Lồng Nhau</TITLE></HEAD>
<BODY >
    <H3>CHƯƠNG TRÌNH ĐÀO TẠO NGÀNH WEBSITE</H3>
  <OL TYPE="I"> 
	<LI><B> THIẾT KẾ WEBSITE </B> 
	     <OL TYPE = "1">
            <LI> Ngôn ngữ HTML &amp; ForntPage</LI>
            <LI> Ngôn ngữ kịch bản JavaScript </LI>
            <LI> Media Flash MX</LI>
            <LI> Thiết kế giao diện PhotoShop</LI>
            <LI> Thiết kế WebSite Dreamweaver MX</LI>
	     </OL>	
     </LI>
	<LI><B> LẬP TRÌNH WEBSITE </B>
	      <OL TYPE = "1">
             <LI> Phân tích &amp; Thiết kế CSDL</LI>
             <LI> Lập trình CSDL ASP.NET &amp; SQL Sever</LI>
             <LI> Quản trị Website</LI> 
             <LI><B>Đề tài tốt nghiệp </B></LI>
	      </OL>
      </LI>
   </OL>
</BODY>
</HTML>

Xem ví dụ

Cách tổ chức website

I. TỔ CHỨC LƯU TRỮ WEBSITE
1. Các tập tin HTML của 1 Website

  • Một Website bao gồm rất nhiều trang Web –webpage (tập tin HTML).
  • Khi lưu trữ phải tổ chức có cấu trúc để thuận tiện trong quản lý, điều chỉnh về sau.
  • Khi đưa Website lên WebServer được cấp 1 địa chỉ (Domain Name) và 1 thư mục.

2. Trang chủ của 1 Website

  • Trang chủ (Home page) là được nạp khi truy cập mà không rõ tập tin nào (Chỉ nhập URL của 1 Website)
  • Thường qui định là: index.htm,default.htm,home.htm

Ví dụ: Truy cập: http://www.tuoitre.com.vn  Nghĩa là: http://www.tuoitre.com.vn/Index.htm 


3. Tổ chức lưu trữ 1 Website
a. Tổ chức Site 1 thư mục

  • Tất cả các tập tin HTML và các tập tin khác đều đặt trong cùng 1 thư mục.
  • Thuận lợi cho Website nhỏ, ít tập tin, không cần quan tâm đến đường dẫn.

b. Tổ chức Site thư mục theo chức năng

  • Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin có nội dung liên quan với nhau.
  • Tại thư mục chính chỉ chứa tập tin chỉ mục và các hình ảnh cần thiết.(thư mục chính chứa trang chủ, mỗi thư mục con là 1 hoặc 1 nhóm các trang con)

c. Tổ chức Site thư mục theo kiểu tập tin

  • Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin cùng kiểu.

   + Thư mục chính chứa trang chủ và các thư mục con
   + Một thư mục con chứa các trang HTML, 
   + Một thư mục con chứa các tập tin hình ảnh. . . . .

  • Thuận lợi sử dụng chung tập tin, dễ thay thế bổ sung các tập tin vào site.

d. Tổ chức Site hỗn hợp
Kết hợp cách tổ chức Site theo chức năng và Cách tổ chức Site theo kiểu tập tin.

4. Địa chỉ tương đối & Địa chỉ tuyệt đối. 
a. Địa chỉ tuyệt đối

Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL.
http://ServerName/Đường dẫn/ Tên tập tin

Ví dụ:   http://vietnamnet.vn/Tinkinhte/quocte/tin07.html 


b. Địa chỉ tương đối.

Khi tham chiếu đến 1 tập tin cùng thư mục tập tin chính: Tên tập tin 
Khi tham chiếu đến 1 tập tin khác thư mục tập tin chính: Đường dẫn/Tên tập tin
Ghi chú: Sử dụng ../ để chỉ thư mục cấp trên thư mục chứa tập tin chính:

Ví dụ:

Sẽ ghi:  ../../Images/Logo.jpg

 


 

Thiết lập hình ảnh trong HTML

1. Khái quát

  • Các kiểu tập tin hình ảnh cho phép:  .jpg,gif,.png,.bmp
  • Sử dụng hình ảnh cần cân nhắc: SL ảnh/1trang, kích thước và độ phân giải,  nhằm cải thiện tốc độ truy cập.
  • Phải lưu hình ảnh ở vị trí nào đó trong thư mục chính của Website

2. Thiết lập ảnh nền cho trang
Sử dụng thuộc tính Background trong thẻ BODY

<BODY Background="Tên tập tin"  Bgproperties =Fixed>


Tên tập tin : Là địa chỉ tuyệt đối or tương đối của tập tin ảnh
Bgproperties =Fixed : Hình ảnh mờ bất động  

Ví dụ:  

 Bổ sung thuộc tính ảnh nền vào 1 trang html bất kỳ. Giả sử tập tin ảnh lưu trong thư mục Images.  Tập tin Htm lưu trong thư mục Htmls 

<BODY Background ="../Images/Bgr06.JPG" >


3. Chèn hình ảnh vào trang Web

<IMG Src="Tên tập tin"  title="Câu chú thích">
  • Tên tập tin : Là địa chỉ tuyệt đối or tương đối của ảnh
  • Câu chú thích: Hiển thị trên trình duyệt khi trỏ Mouse vào hình

Ví dụ:  

<img Src="../Images/P02.jpg">
<img Src="../Images/P06.jpg"  title="Đây là Bill Gates">

Định kích thước ảnh chèn

<IMG Src="Tên tập tin"  Width="n1"  Height="n2">

n1, n2 : Là tỷ lệ % so với kích thước đối tượng chứa nó hoặc kích thước tính theo Pixel.

Ví dụ:  <img  Src="../Images/P03.jpg" Width="150" Height="100">

  • Ảnh chèn kích thước rộng 150Pixel cao 100Pixel
  • <IMG Src="Images/P03.jpg" Width="30%" Height="50%">
  • Ảnh chèn kích thước rộng =30% chiều rộng cửa sổ. 50% Chiều cao cửa sổ.

Tạo khung viền cho ảnh

<IMG Src="Tên tập tin" Border="n">

n : Độ dày đường viền 

Canh lề hình ảnh.

<IMG Src="Tên tập tin" Align="Hướng">
Hướng Giải thích
Top Phần đầu thẳng hàng với dòng đầu văn bản.
Bottom Phần cuối thẳng hàng với dòng đầu văn bản.
Left Biên trái ảnh căn thẳng lề trái trang, văn bản bao quanh bên phải ảnh.
Right Biên phải ảnh căn thẳng lề phải trang, văn bản bao quang bên trái ảnh
Mặc định Nếu không khai báo mặc định là thuộc tính Bottom


Ví dụ:

<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<BODY  >
 <H3 Align=Center>Máy tính "bó tay" với tài sản của Bill Gates</H3> 
<Img src="images/billgates.jpg" Align=Right Width=120
 	title="Bill Gates (trái) và Tổng thống Bồ Đào Nha" Border=1>
<P Align=Justify>
Bill Gates, người sáng lập Công ty phần mềm Microsoft và là người giàu nhất thế giới, cho biết cơ quan thuế của Mỹ phải lưu trữ các dữ liệu tài chính của ông vào một máy tính đặc biệt, bởi tài sản của ông quá nhiều.<BR>Phát biểu tại một hội nghị do Microsoft tổ chức ở Lisbon, thủ đô Bồ Đào Nha, ông nói rằng một máy tính thông thường không thể xử lý đúng các số liệu tài chính của ông ...</P>
</BODY>
</HTML>

Xem ví dụ

Các trình duyệt hộ trợ thẻ img

THIẾT LẬP LIÊN KẾT TRONG HTML


1. Khái quát

  • Các siêu liên kết (Hyper Link) là cốt lõi của tập tin HTML cho phép truy cập đến các trang khác trên cùng máy tính hay ở máy tính khác.
  • Tài liệu liên kết có thể là các tập tin: Hình ảnh, âm thanh, Multimedia, HTML . . .
  • Khi Click vào liên kết sự truy cập  tại địa chỉ truy cập sẽ thực hiện tự động 

2. Liên kết cục bộ (Local Link)
Là liên kết đến các tài liệu Trên cùng máy . 

Cú pháp:

<A HREF ="Địa chỉ liên kết">  Nhãn liên kết </A>


Ví dụ:   

 <A HREF ="/Htmls/Gioithieu.htm">  Giới thiệu</A>

Đến 1 vị trí trên cùng trang Web

Cú pháp:

<A HREF ="#Tên đích >  Nhãn liên kết </A>
    Khai báo đích đến: 
<A NAME ="Tên đích"> . . . </A>

Ghi chú: Tên đích ở bất cứ vị trí nào trên cùng tập tin.

Ví dụ : Tạo trang web có nội dung sau:

<HTML>
<HEAD><TITLE>  </TITLE></HEAD>
<BODY Background="images/bg.jpg" Bgproperties =Fixed>
	<a Name="#Dau"><H3 Align="center">CHƯƠNG TRÌNH ĐÀO TẠO</H3></a>
	 1.Kỹ thuật viên tin học<BR>
	<a Href="vidu13.html"> 
	2. Chuyên ngành website </a>	<HR>
	 <Font Size=4 Color=Red>Kỹ thuật viên tin học </Font><BR> 
	<a Href="#HP1"> Học phần I </a><BR>
	<a Href="#HP2"> Học phần II </a><BR>
	<a Href="#HP3"> Học phần III </a>	
	<ol Type="I">
	    <a Name="#HP1">
	    <li> Tin Học Căn Bản
            <ol>
                <li>Tổng quan cấu trúc máy tính</li>
                <li>Hệ điều hành Windows &amp;Internet</li>
            </ol>
         </li>
         </a>
    
	    <a Name="#HP2">
	    <li> Tin Học Văn Phòng
		<ol>
			<li> Microsoft Word</li>
			<li> MicroSoft Excel</li>
		</ol>
        </li>
        </a>
        
	    <a Name="#HP3">	    
<li>Tin Học Quản Lý 
		<ol>
			<li> Microsoft Access </li>
			<li> MicroSoft PowerPoint</li>
		</ol>
        </li>
        </a>
	</ol></P>
	<P align=Right><a Href="#Dau">Đầu trang </a></P>
</BODY>
</HTML> 

Xem ví dụ

3. Liên kết từ xa(Remote Link)
Là liên kết đến tài liệu lưu trữ trên máy khác. 
Liên kết đến 1 địa chỉ URL

Cú pháp
<A HREF ="http://URL">  Nhãn liên kết </A>

Ví dụ:   

 <a href="http://www.vietnamnet.vn"> Website tin tức việt nam</a> 

Xem ví dụ

Liên kết đến 1 địa chỉ Email
<A HREF ="Mailto: Địa chỉ Email">Nhãn liên kết </A>
Ví dụ:   

 <a href="Mailto:vinhnguyen208@gmail.com">  Gởi Mail cho tôi </a>

Xem ví dụ

Sẽ mở chương trình mail mặc định để soạn và gửi thư.
4. Dùng hình ảnh làm nhãn liên kết.

Cú pháp:

<a href="http://URL"><img src="Tập tin ảnh"></a>


Ví dụ:   

 <a href ="http://www.vietnamnet.vn"> <img Src=images/vietnamnet.jpg> </a>

Xem ví dụ

5. Mở liên kết với thuộc tính "target".
 

Thuộc tính Giải thích
target="_blank" Mở một window mới
target="_parent" Mở một liên kết trong Frame
target="_self" Mở một trang trong cùng window
target="_top" Mở một trang mới trong cùng một trình duyệt hủy bỏ tất cả các Frame

Mặc định các liên kết được mở trên cửa sổ hiện tại. Để  mở 1 cửa sổ riêng thì sử dụng:
Cú pháp:

<a href=. . . .  target="_Blank">Nhãn liên kết </a>

Ví dụ:

<a href="http://www.vietnamnet.vn"  targer="_Blank" > 
<img src=images/vietnamnet.jpg> </a>

Xem ví dụ

Ví dụ: Tạo tập tin HTM với nội dung như sau
 

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE> Hiep sĩ IT demo các thiết lập liên kết</TITLE>
</HEAD>
<BODY Background ="images/bg.jpg" bgproperties=Fixed Link="Black" link="Blue"> 
    <p align="center">
          <font Size=4 color="blue"> <B>DANH BẠ WEBSITE</B> </Font>
    </P>
    <dl>
         <dt><B>Tin Tức</B>
	  <dd><a href="http://www.vietnamnet.vn"> Tin tức việt nam</A>
	   <dd> <a href="http://www.Tuoitre.com.vn"> Báo tuổi trẻ</A>
          <dt> <B>Giải trí</B>
	   <dd> <a href="http://www.nhacso.net"   target="_balnk"> Nhạc số Online</A>
	   <dd> <a href="http://www.ngoisao.net"    target="_balnk">Giới thiệu ngôi sao</A>
          </dl>
<B>Liên kết quảng cáo</B><BR>
    <a href="http://www.echip.com.vn" target="_balnk"> 
      <img Src="images/echip.png" width="130" heigh="60"> </A>
    <a href="http://www.vietnamnet.vn" target="_balnk">
      <img Src="images/vietnamnet.png" width="130" heigh="60"></A><HR>
    Liên hệ:<a href="Mailto:info@hiepsiit.com">Gởi mail </A>
</BODY>
</HTML>

Xem ví dụ

6. Tạo liên kết cho tập tin Media 
<a href="Tên tập tin Media"  target=_blank> Nhãn liên kết </A>
Nhãn liên kết: văn bản hoặc hình ảnh
target=_blank: Mở cửa sổ riêng.

Ví dụ:

<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<Body>
<H3> Nhạc Onlie</H3>
<a href="demchiaxa.mp3"   target="_blank"> Đêm chia xa </a><br/>
<a href="chieuvan.mp3">Chiều vắng</a> 
<Body>
</HTML>

Xem ví dụ

7. Liên kết DownLoad
Để tạo liên kết Download tài liệu: Ta chuyển tài liệu thành các dạng tập tin Zip,Rar, pdf, .doc . . .  sau đó tạo liên kết  đến các tập tin này.
 

Thiết kế Khung (Frame) trong HTML

Khung(hay Frame) trong HTML được sử dụng để phân chia cửa sổ trình duyệt của bạn thành các khu vực khác nhau mà mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset. Cửa sổ được chia vào các Frame theo cách tương tự như các bảng: bên trong các hàng và cột.

Hạn chế của Frame trong HTML
Có một số sự hạn chế trong sử dụng Frame, vì thế nó không được đề nghị sử dụng trong trang web của bạn:

  • Thường thì một vài thiết bị nhỏ không giải quyết được các Frame này vì màn hình của nó không đủ lớn để chia thành các Frame.
  • Đôi khi trang web của bạn có thể hiển thị khác nhau trên các máy tính khác nhau do độ phân giải của màn hình.
  • Nút quay trở lại trang trước có thể không làm việc như người dùng mong muốn.
  • Vẫn còn có một vài trình duyệt không hỗ trợ công nghệ Frame.
     

1. Thiết Kế Khung - Frame

  • Là 1 kỹ thuật chia trang web thành nhiều Khung, mỗi khung hiển thị 1 trang web hoặc 1 tập tin ảnh.
  • Không sử dụng thẻ Body khi thiết kế khung.

Cú pháp:

<FrameSet Rows="Trị các cột"  Cols="Trị các dòng">
    <Frame Name ="name1"  Src="Url1">
         . . . . . . . . . . . . .
    <Frame Name ="namen"  Src="Urln">
</FrameSet>

“Trị các cột”, “Trị các dòng”: 
    + Kích thuớc tuyệt đối tính theo pixel
    + % kích thước tương đối theo cửa sổ trình duyệt.
“Url”: Địa chỉ tập tin hiển thị trong khung.

Ghi chú : Cho phép thiết kế khung lồng nhau

 

2. Định Dạng Khung  
a. Xác lập đường viền.
Mặc định khung được tạo có đường viền là 5 Pixel. Có thay thể thay đổi bằng cách dùng các thuộc tính sau:

<FrameSet FrameBorder=n1  FrameSpacing=n2 BorderColor=trị>
 . . . . . . .
</FrameSet>

n1=1/0:Đường viền hiển thị (Mặc định)/không hiển thị
n2: Độ dày đường viền
Trị: Tên màu cho đường viền

b. Xác lập khoảng cách lề khung.
Mặc định khoảng cách nội dung với khung là 8 Pixel. Có thể xác lập lề khung bằng:

<Frame . . . .  MarginWidth=n1  MarginHeight=n2>


n1: Khoảng cách lề trái, phải
n2: Khoảng cách lế trên, dưới

c. Xác lập thanh cuộn.
Mặc định thanh cuộn sẽ hiển thị khi kích thước khung không đủ cho nội dung. 

<Frame . . . . .Scrolling=trị>
Trị Giải thích
Auto Trị mặc định chỉ hiển thị khi nội dung vượt quá kích thước khung. 
Yes Luôn hiển thi
No Không bao giờ hiển thi


d. Cố định kích thước khung 
Mặc định kích thước sẽ thay đổi khi người dùng kéo viền khung. Để ngăn cản việc hiệu chính kích thước

<Frame . . . . . NoResize>


3. Chỉ định khung hiển thị cho liên kết.
Bước 1: Đặt tên khung cho tập tin thiết kế khung. Dùng thuộc tính Name của thẻ Frame.
Bước 2: Xác định đích đến cho liên kết. Trong tập tin chứa liên kết, dùng thuộc tính Target của thẻ <a href> chỉ định khung hiển thi 

Ví dụ: Tạo tập tin tintuc.html với nội dung như sau:

<html>
<head><title></title></head>
<frameset rows="100,500" framespacing="0" border="0" frameborder="0" >
  <frame name="Top" scrolling="no" noresize  src="images/banner.jpg" marginwidth="0" marginheight="0">
  <frameset cols="150,600">
    <frame name="Left"   src="dmtintuc.html">
    <frame name="Right"  noresize  src="tincn.html">
  </frameset>
  </frameset><noframes></noframes>
</html>

Ví dụ: Tạo tập tin dmtintuc.html với nội dung như sau:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body  >
<H3 Align= Center>TIN TỨC</H3>
<a href="tinkt.html" target="right" >Kinh tế </a><BR>
<a href="tincn.html" target="right">Tin công nghệ </a>
</body>

</html>

Trang tinkt.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<H3 ALIGN=CENTER> 
Cầm cố chứng khoán: Kênh tạo vốn cho nhà đầu tư?</H3>
<img src="images/tinchungkhoan.jpg" align=left width=120> 
<P Align=Justify><font size="2">
Mới đây UBCKNN đã gửi công văn  đề nghị các công ty chứng khoán, 
ngân hàng kiểm soát chặt giao dịch và cho vay cầm cố mua cổ phiếu, 
nhằm hạn chế rủi ro. Giới chuyên môn cho rằng, chưa cần thiết phải lo lắng, 
bởi chứng khoán tăng là dấu hiệu tốt và vẫn trong tầm kiểm soát. Theo UBCKNN,
 đến ngày 20-3 có khoảng 13 triệu cổ phiếu các loại được cầm cố với 
tổng giá trị khoảng 751 tỷ đồng. Ủy ban đã có yêu cầu phối hợp với 
Ngân hàng Nhà nước để liên kết quản lý việc cho vay v cầm cố chứng khóan 
ở các ngân hng thương mại.
</font></P>
</Body>

</body>
</html>

Trang tincn.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<H3 ALIGN=CENTER> 
Công nghiệp 4.0</H3>
<img src="images/Industry_4.0.png" align=left width=120> 
<P Align=Justify><font size="2">
Thuật ngữ "Công nghiệp 4.0" (tiếng Đức: Industrie 4.0)
 khởi nguồn từ một dự án trong chiến lược công nghệ cao của 
chính phủ Đức, nó thúc đẩy việc sản xuất điện toán hóa sản xuất.[5]

Một số đã so sánh Công nghiệp 4.0 với cuộc cách mạng Công nghiệp lần thứ tư.
 Tuy nhiên, điều này đề cập đến một sự chuyển đổi có tính hệ thống bao
 gồm tác động lên xã hội dân sự, cơ cấu quản trị và bản sắc con người, 
ngoài các chi nhánh kinh tế / sản xuất.
 Cuộc cách mạng công nghiệp đầu tiên đã huy động việc cơ giới hóa sản xuất
 sử dụng nước và hơi nước; Cuộc cách mạng kỹ thuật số] và việc sử dụng các
 thiết bị điện tử và công nghệ thông tin để tiếp tục tự động hoá sản xuất[6] 
Thuật ngữ "Cách mạng công nghiệp lần thứ tư" Đã được áp dụng cho sự phát triển 
công nghệ quan trọng một vài lần trong 75 năm qua, và là để thảo luận về học thuật.
[7][8][9] Công nghiệp 4.0, mặt khác, tập trung vào sản xuất đặc biệt trong bối cảnh hiện tại, 
và do đó là tách biệt với cuộc cách mạng công nghiệp lần thứ tư về phạm vi.

Thuật ngữ "Công nghiệp 4.0" đã được nhắc lại vào năm 2011 tại Hội chợ Hannover.
[10] Tháng 10 năm 2012, Nhóm Công tác về Công nghiệp 4,0 trình bày một loạt
 các khuyến nghị về thực hiện Công nghiệp 4.0 cho chính phủ liên bang Đức. 
Các thành viên của Nhóm Công nghiệp 4.0 được công nhận là những người cha 
sáng lập và là động lực đằng sau Industry 4.0.
</font></P>
</Body>

</body>
</html>

Xem ví dụ

Danh sách bảng màu trong HTML

Để xác lập màu có thể dùng Tên màu hay Trị thập lục phân tương ứng.

Dưới đây là danh sách bảng màu được sắp xếp từ A đến Z.

Chúng tôi khuyên bạn nên sử dụng các giá trị hex thay vì tên màu html vì nó chiếm ít không gian hơn. Bất cứ khi nào bạn tối ưu file css, bạn nên sử dụng giá trị màu hex thay thế tên màu html.

Tra cứu nhanh bảng màu:

A B C D E F G H I K L M N O P R S T V W Y

Hãy xem danh sách 500 tên màu html.

Tên màu A

Dưới đây là danh sách 13 tên màu bắt đầu bằng chữ A.

Tên màu Màu Mã màu
AliceBlue #f0f8ff
AntiqueWhite #faebd7
AntiqueWhite1 #ffefdb
AntiqueWhite2 #eedfcc
AntiqueWhite3 #cdc0b0
AntiqueWhite4 #8b8378
aquamarine1 #7fffd4
aquamarine2 #76eec6
aquamarine4 #458b74
azure1 #f0ffff
azure2 #e0eeee
azure3 #c1cdcd
azure4 #838b8b

Tên màu B

Dưới đây là danh sách 21 tên màu bắt đầu bằng chữ B.

Tên màu Màu Mã màu
beige #f5f5dc
bisque1 #ffe4c4
bisque2 #eed5b7
bisque3 #cdb79e
bisque4 #8b7d6b
black #000000
BlanchedAlmond #ffebcd
blue1 #0000ff
blue2 #0000ee
blue4 #00008b
BlueViolet #8a2be2
brown #a52a2a
brown1 #ff4040
brown2 #ee3b3b
brown3 #cd3333
brown4 #8b2323
burlywood #deb887
burlywood1 #ffd39b
burlywood2 #eec591
burlywood3 #cdaa7d
burlywood4 #8b7355

Tên màu C

Dưới đây là danh sách 27 tên màu bắt đầu bằng chữ C.

Tên màu Màu Mã màu
CadetBlue #5f9ea0
CadetBlue1 #98f5ff
CadetBlue2 #8ee5ee
CadetBlue3 #7ac5cd
CadetBlue4 #53868b
chartreuse1 #7fff00
chartreuse2 #76ee00
chartreuse3 #66cd00
chartreuse4 #458b00
chocolate #d2691e
chocolate1 #ff7f24
chocolate2 #ee7621
chocolate3 #cd661d
coral #ff7f50
coral1 #ff7256
coral2 #ee6a50
coral3 #cd5b45
coral4 #8b3e2f
CornflowerBlue #6495ed
cornsilk1 #fff8dc
cornsilk2 #eee8cd
cornsilk3 #cdc8b1
cornsilk4 #8b8878
cyan1 #00ffff
cyan2 #00eeee
cyan3 #00cdcd
cyan4 #008b8b

Tên màu D

Dưới đây là danh sách 49 tên màu bắt đầu bằng chữ D.

Tên màu Màu Mã màu
DarkGoldenrod #b8860b
DarkGoldenrod1 #ffb90f
DarkGoldenrod2 #eead0e
DarkGoldenrod3 #cd950c
DarkGoldenrod4 #8b6508
DarkGreen #006400
DarkKhaki #bdb76b
DarkOliveGreen #556b2f
DarkOliveGreen1 #caff70
DarkOliveGreen2 #bcee68
DarkOliveGreen3 #a2cd5a
DarkOliveGreen4 #6e8b3d
DarkOrange #ff8c00
DarkOrange1 #ff7f00
DarkOrange2 #ee7600
DarkOrange3 #cd6600
DarkOrange4 #8b4500
DarkOrchid #9932cc
DarkOrchid1 #bf3eff
DarkOrchid2 #b23aee
DarkOrchid3 #9a32cd
DarkOrchid4 #68228b
DarkSalmon #e9967a
DarkSeaGreen #8fbc8f
DarkSeaGreen1 #c1ffc1
DarkSeaGreen2 #b4eeb4
DarkSeaGreen3 #9bcd9b
DarkSeaGreen4 #698b69
DarkSlateBlue #483d8b
DarkSlateGray #2f4f4f
DarkSlateGray1 #97ffff
DarkSlateGray2 #8deeee
DarkSlateGray3 #79cdcd
DarkSlateGray4 #528b8b
DarkTurquoise #00ced1
DarkViolet #9400d3
DeepPink1 #ff1493
DeepPink2 #ee1289
DeepPink3 #cd1076
DeepPink4 #8b0a50
DeepSkyBlue1 #00bfff
DeepSkyBlue2 #00b2ee
DeepSkyBlue3 #009acd
DeepSkyBlue4 #00688b
DimGray #696969
DodgerBlue1 #1e90ff
DodgerBlue2 #1c86ee
DodgerBlue3 #1874cd
DodgerBlue4 #104e8b

Tên màu F

Dưới đây là danh sách 7 màu có tên bắt đầu bằng chữ F.

Tên màu Màu Mã màu
firebrick #b22222
firebrick1 #ff3030
firebrick2 #ee2c2c
firebrick3 #cd2626
firebrick4 #8b1a1a
FloralWhite #fffaf0
ForestGreen #228b22

Tên màu G

Dưới đây là danh sách 115 màu có tên bắt đầu bằng chữ G.

Tên màu Màu Mã màu
gainsboro #dcdcdc
GhostWhite #f8f8ff
gold1 #ffd700
gold2 #eec900
gold3 #cdad00
gold4 #8b7500
goldenrod #daa520
goldenrod1 #ffc125
goldenrod2 #eeb422
goldenrod3 #cd9b1d
goldenrod4 #8b6914
gray #bebebe
gray1 #030303
gray10 #1a1a1a
gray11 #1c1c1c
gray12 #1f1f1f
gray13 #212121
gray14 #242424
gray15 #262626
gray16 #292929
gray17 #2b2b2b
gray18 #2e2e2e
gray19 #303030
gray2 #050505
gray20 #333333
gray21 #363636
gray22 #383838
gray23 #3b3b3b
gray24 #3d3d3d
gray25 #404040
gray26 #424242
gray27 #454545
gray28 #474747
gray29 #4a4a4a
gray3 #080808
gray30 #4d4d4d
gray31 #4f4f4f
gray32 #525252
gray33 #545454
gray34 #575757
gray35 #595959
gray36 #5c5c5c
gray37 #5e5e5e
gray38 #616161
gray39 #636363
gray4 #0a0a0a
gray40 #666666
gray41 #696969
gray42 #6b6b6b
gray43 #6e6e6e
gray44 #707070
gray45 #737373
gray46 #757575
gray47 #787878
gray48 #7a7a7a
gray49 #7d7d7d
gray5 #0d0d0d
gray50 #7f7f7f
gray51 #828282
gray52 #858585
gray53 #878787
gray54 #8a8a8a
gray55 #8c8c8c
gray56 #8f8f8f
gray57 #919191
gray58 #949494
gray59 #969696
gray6 #0f0f0f
gray60 #999999
gray61 #9c9c9c
gray62 #9e9e9e
gray63 #a1a1a1
gray64 #a3a3a3
gray65 #a6a6a6
gray66 #a8a8a8
gray67 #ababab
gray68 #adadad
gray69 #b0b0b0
gray7 #121212
gray70 #b3b3b3
gray71 #b5b5b5
gray72 #b8b8b8
gray73 #bababa
gray74 #bdbdbd
gray75 #bfbfbf
gray76 #c2c2c2
gray77 #c4c4c4
gray78 #c7c7c7
gray79 #c9c9c9
gray8 #141414
gray80 #cccccc
gray81 #cfcfcf
gray82 #d1d1d1
gray83 #d4d4d4
gray84 #d6d6d6
gray85 #d9d9d9
gray86 #dbdbdb
gray87 #dedede
gray88 #e0e0e0
gray89 #e3e3e3
gray9 #171717
gray90 #e5e5e5
gray91 #e8e8e8
gray92 #ebebeb
gray93 #ededed
gray94 #f0f0f0
gray95 #f2f2f2
gray97 #f7f7f7
gray98 #fafafa
gray99 #fcfcfc
green1 #00ff00
green2 #00ee00
green3 #00cd00
green4 #008b00
GreenYellow #adff2f

Tên màu H

Dưới đây là danh sách 9 màu có tên bắt đầu bằng chữ H.

Tên màu Màu Mã màu
honeydew1 #f0fff0
honeydew2 #e0eee0
honeydew3 #c1cdc1
honeydew4 #838b83
HotPink #ff69b4
HotPink1 #ff6eb4
HotPink2 #ee6aa7
HotPink3 #cd6090
HotPink4 #8b3a62

Tên màu I

Dưới đây là danh sách 9 màu có tên bắt đầu bằng chữ I.

Tên màu Màu Mã màu
IndianRed #cd5c5c
IndianRed1 #ff6a6a
IndianRed2 #ee6363
IndianRed3 #cd5555
IndianRed4 #8b3a3a
ivory1 #fffff0
ivory2 #eeeee0
ivory3 #cdcdc1
ivory4 #8b8b83

Tên màu K

Dưới đây là danh sách 5 màu có tên bắt đầu bằng chữ K.

Tên màu Màu Mã màu
khaki #f0e68c
khaki1 #fff68f
khaki2 #eee685
khaki3 #cdc673
khaki4 #8b864e

Tên màu L

Dưới đây là danh sách 5 màu có tên bắt đầu bằng chữ L.

Tên màu Màu Mã màu
lavender #e6e6fa
LavenderBlush1 #fff0f5
LavenderBlush2 #eee0e5
LavenderBlush3 #cdc1c5
LavenderBlush4 #8b8386
LawnGreen #7cfc00
LemonChiffon1 #fffacd
LemonChiffon2 #eee9bf
LemonChiffon3 #cdc9a5
LemonChiffon4 #8b8970
light #eedd82
LightBlue #add8e6
LightBlue1 #bfefff
LightBlue2 #b2dfee
LightBlue3 #9ac0cd
LightBlue4 #68838b
LightCoral #f08080
LightCyan1 #e0ffff
LightCyan2 #d1eeee
LightCyan3 #b4cdcd
LightCyan4 #7a8b8b
LightGoldenrod1 #ffec8b
LightGoldenrod2 #eedc82
LightGoldenrod3 #cdbe70
LightGoldenrod4 #8b814c
LightGoldenrodYellow #fafad2
LightGray #d3d3d3
LightPink #ffb6c1
LightPink1 #ffaeb9
LightPink2 #eea2ad
LightPink3 #cd8c95
LightPink4 #8b5f65
LightSalmon1 #ffa07a
LightSalmon2 #ee9572
LightSalmon3 #cd8162
LightSalmon4 #8b5742
LightSeaGreen #20b2aa
LightSkyBlue #87cefa
LightSkyBlue1 #b0e2ff
LightSkyBlue2 #a4d3ee
LightSkyBlue3 #8db6cd
LightSkyBlue4 #607b8b
LightSlateBlue #8470ff
LightSlateGray #778899
LightSteelBlue #b0c4de
LightSteelBlue1 #cae1ff
LightSteelBlue2 #bcd2ee
LightSteelBlue3 #a2b5cd
LightSteelBlue4 #6e7b8b
LightYellow1 #ffffe0
LightYellow2 #eeeed1
LightYellow3 #cdcdb4
LightYellow4 #8b8b7a
LimeGreen #32cd32
linen #faf0e6

Tên màu M

Dưới đây là danh sách 34 màu có tên bắt đầu bằng chữ M.

Tên màu Màu Mã màu
magenta #ff00ff
magenta2 #ee00ee
magenta3 #cd00cd
magenta4 #8b008b
maroon #b03060
maroon1 #ff34b3
maroon2 #ee30a7
maroon3 #cd2990
maroon4 #8b1c62
medium #66cdaa
MediumAquamarine #66cdaa
MediumBlue #0000cd
MediumOrchid #ba55d3
MediumOrchid1 #e066ff
MediumOrchid2 #d15fee
MediumOrchid3 #b452cd
MediumOrchid4 #7a378b
MediumPurple #9370db
MediumPurple1 #ab82ff
MediumPurple2 #9f79ee
MediumPurple3 #8968cd
MediumPurple4 #5d478b
MediumSeaGreen #3cb371
MediumSlateBlue #7b68ee
MediumSpringGreen #00fa9a
MediumTurquoise #48d1cc
MediumVioletRed #c71585
MidnightBlue #191970
MintCream #f5fffa
MistyRose1 #ffe4e1
MistyRose2 #eed5d2
MistyRose3 #cdb7b5
MistyRose4 #8b7d7b
moccasin #ffe4b5

Tên màu N

Dưới đây là danh sách 5 màu có tên bắt đầu bằng chữ N.

Tên màu Màu Mã màu
NavajoWhite1 #ffdead
NavajoWhite2 #eecfa1
NavajoWhite3 #cdb38b
NavajoWhite4 #8b795e
NavyBlue #000080

Tên màu O

Dưới đây là danh sách 18 màu có tên bắt đầu bằng chữ O.

Tên màu Màu Mã màu
OldLace #fdf5e6
OliveDrab #6b8e23
OliveDrab1 #c0ff3e
OliveDrab2 #b3ee3a
OliveDrab4 #698b22
orange1 #ffa500
orange2 #ee9a00
orange3 #cd8500
orange4 #8b5a00
OrangeRed1 #ff4500
OrangeRed2 #ee4000
OrangeRed3 #cd3700
OrangeRed4 #8b2500
orchid #da70d6
orchid1 #ff83fa
orchid2 #ee7ae9
orchid3 #cd69c9
orchid4 #8b4789

Tên màu P

Dưới đây là danh sách 38 màu có tên bắt đầu bằng chữ P.

Tên màu Màu Mã màu
pale #db7093
PaleGoldenrod #eee8aa
PaleGreen #98fb98
PaleGreen1 #9aff9a
PaleGreen2 #90ee90
PaleGreen3 #7ccd7c
PaleGreen4 #548b54
PaleTurquoise #afeeee
PaleTurquoise1 #bbffff
PaleTurquoise2 #aeeeee
PaleTurquoise3 #96cdcd
PaleTurquoise4 #668b8b
PaleVioletRed #db7093
PaleVioletRed1 #ff82ab
PaleVioletRed2 #ee799f
PaleVioletRed3 #cd6889
PaleVioletRed4 #8b475d
PapayaWhip #ffefd5
PeachPuff1 #ffdab9
PeachPuff2 #eecbad
PeachPuff3 #cdaf95
PeachPuff4 #8b7765
pink #ffc0cb
pink1 #ffb5c5
pink2 #eea9b8
pink3 #cd919e
pink4 #8b636c
plum #dda0dd
plum1 #ffbbff
plum2 #eeaeee
plum3 #cd96cd
plum4 #8b668b
PowderBlue #b0e0e6
purple #a020f0
purple1 #9b30ff
purple2 #912cee
purple3 #7d26cd
purple4 #551a8b

Tên màu R

Dưới đây là danh sách 14 màu có tên bắt đầu bằng chữ R.

Tên màu Màu Mã màu
red1 #ff0000
red2 #ee0000
red3 #cd0000
red4 #8b0000
RosyBrown #bc8f8f
RosyBrown1 #ffc1c1
RosyBrown2 #eeb4b4
RosyBrown3 #cd9b9b
RosyBrown4 #8b6969
RoyalBlue #4169e1
RoyalBlue1 #4876ff
RoyalBlue2 #436eee
RoyalBlue3 #3a5fcd
RoyalBlue4 #27408b

Tên màu S

Dưới đây là danh sách 48 màu có tên bắt đầu bằng chữ S.

Tên màu Màu Mã màu
SaddleBrown #8b4513
salmon #fa8072
salmon1 #ff8c69
salmon2 #ee8262
salmon3 #cd7054
salmon4 #8b4c39
SandyBrown #f4a460
SeaGreen1 #54ff9f
SeaGreen2 #4eee94
SeaGreen3 #43cd80
SeaGreen4 #2e8b57
seashell1 #fff5ee
seashell2 #eee5de
seashell3 #cdc5bf
seashell4 #8b8682
sienna #a0522d
sienna1 #ff8247
sienna2 #ee7942
sienna3 #cd6839
sienna4 #8b4726
SkyBlue #87ceeb
SkyBlue1 #87ceff
SkyBlue2 #7ec0ee
SkyBlue3 #6ca6cd
SkyBlue4 #4a708b
SlateBlue #6a5acd
SlateBlue1 #836fff
SlateBlue2 #7a67ee
SlateBlue3 #6959cd
SlateBlue4 #473c8b
SlateGray #708090
SlateGray1 #c6e2ff
SlateGray2 #b9d3ee
SlateGray3 #9fb6cd
SlateGray4 #6c7b8b
snow1 #fffafa
snow2 #eee9e9
snow3 #cdc9c9
snow4 #8b8989
SpringGreen1 #00ff7f
SpringGreen2 #00ee76
SpringGreen3 #00cd66
SpringGreen4 #008b45
SteelBlue #4682b4
SteelBlue1 #63b8ff
SteelBlue2 #5cacee
SteelBlue3 #4f94cd
SteelBlue4 #36648b

Tên màu T

Dưới đây là danh sách 19 màu có tên bắt đầu bằng chữ T.

Tên màu Màu Mã màu
tan #d2b48c
tan1 #ffa54f
tan2 #ee9a49
tan3 #cd853f
tan4 #8b5a2b
thistle #d8bfd8
thistle1 #ffe1ff
thistle2 #eed2ee
thistle3 #cdb5cd
thistle4 #8b7b8b
tomato1 #ff6347
tomato2 #ee5c42
tomato3 #cd4f39
tomato4 #8b3626
turquoise #40e0d0
turquoise1 #00f5ff
turquoise2 #00e5ee
turquoise3 #00c5cd
turquoise4 #00868b

Tên màu V

Dưới đây là danh sách 6 màu có tên bắt đầu bằng chữ V.

Tên màu Màu Mã màu
violet #ee82ee
VioletRed #d02090
VioletRed1 #ff3e96
VioletRed2 #ee3a8c
VioletRed3 #cd3278
VioletRed4 #8b2252

Tên màu W

Dưới đây là danh sách 7 màu có tên bắt đầu bằng chữ W.

Tên màu Màu Mã màu
wheat #f5deb3
wheat1 #ffe7ba
wheat2 #eed8ae
wheat3 #cdba96
wheat4 #8b7e66
white #ffffff
WhiteSmoke #f5f5f5

Tên màu Y

Dưới đây là danh sách 7 màu có tên bắt đầu bằng chữ Y.

Tên màu Màu Mã màu
yellow1 #ffff00
yellow2 #eeee00
yellow3 #cdcd00
yellow4 #8b8b00
YellowGreen #9acd32

Thiết Kế Biểu Mẫu – Form

1. Giới Thiệu
Form – Biểu mẫu là một kỹ thuật cho phép chủ trang web giao tiếp với người truy cập. Trên trang web người dùng có thể  được yêu cầu trả lời một câu hỏi, cho 1 ý kiến, chọn một mục trong danh sách định trước . . . chủ trang web sẽ tiếp nhận và xử lý thông tin  ấy.
Cấu trúc tổng quát

<form Các thuộc tính>
Nội dung biểu mẫu
Nút gửi dữ liệu
</form>

2. Định Nghĩa Form 
Dạng 1: Chỉ trình bày không gửi dữ liệu

<form name=Tên>
Các đối tượng trong Form
</form> 

Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail

<form Name=Tên Method=Post Action=”Mailto: Địa chỉ mail>
Các đối tượng trong Form
</form> 

Dạng 3: Thông tin từ Form chuyển lên Webserver

<form Name=Tên Method=Post Action="Trang xử lý">
Các đối tượng trong Form
</form> 

Các thẻ HTML sử dụng trong Form

Bảng sau thể hiện danh sách các thẻ HTML hay được sử dụng trong form.

Thẻ Giải thích
<form> Biểu mẫu là một kỹ thuật cho phép chủ trang web giao tiếp với người truy cập.
<input> Điều khiển nhập liệu dựa vào thuộc tính type của nó.
<textarea> Khung văn bản có thể nhập nhiều dòng.
<label> Nhãn cho các input.
<fieldset> Nhóm các phần tử liên quan.
<legend> Mô tả cho thẻ <fieldset>.
<select> Hộp danh sách chọn drop-down (combox).
<optgroup> Nhóm các tùy chọn liên quan thành một danh sách drop-down.
<option> Định nghĩa một option trong một danh sách drop-down.
<button> Định nghĩa một nút có thể click.

Các thẻ HTML 5 sử dụng trong Form

Bảng sau thể hiện danh sách các thẻ HTML5 được sử dụng trong form.

Thẻ Giải thích
<datalist> Chỉ định một danh sách của các option được định nghĩa trước cho việc điều khiển nhập liệu.
<keygen> Định nghĩa trường sinh ra cặp key (key-pair) cho các form.
<output> Định nghĩa kết quả tính toán.


 

10 thẻ input thường dùng trong HTML

Các thẻ input type chuyên dụng trong các form, dùng để nhập liệu, kiểu như: đăng ký, đăng nhập, liên hệ, gửi file…

Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5

a. Hộp văn bản – Text box

<input Type="Text" Name="Tên" Value="Trị mặc định" Size="n" Maxlength="m">

n: chiều di Textbox tính bằng số ký tự.
m: Số ký tự tối đa có thể nhập.

b. Hộp văn bản – Password

<input Type="Password" Name="Tên" Value="Trị mặc định" Size="n" Maxlength="m"> 

n: chiều di Textbox tính bằng số ký tự.
m: Số ký tự tối đa có thể nhập.

c. Nút gửi dữ liệu – Submit Button

<Input Type="Submit" Value="Nhãn"> Hoặc <Button Type="Submit" Value="Nhãn">
Hoặc 
</Button><Button Type="Submit"> <img="ảnh"> </Button>.

d. Nút hủy dữ liệu vừa nhập - Reset Button 

<Input Type="Reset" Value="Nhãn" > 

Ví dụ: Tạo trang đăng nhập:

<form>
     
 <table  border="1" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="2" align="center"><p><strong>ĐĂNG NHẬP DIỄN ĐÀN</strong></p></td>
    </tr>
   <tr>
     <td width="156">Username: </td>
     <td width="832"><input type="text" size="40" name="txtusername" maxlength="40"/></td>
   </tr>
   <tr>
     <td>Mật khẩu:</td>
     <td><input type="text" size="40" name="txtpassword" maxlength="50"/></td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td><input type="submit" value="Đăng nhập" name="btnlogin"/>
      <input type="reset" value="Làm lại" name="btnreset"/></td>
   </tr>
 </table>
 
</form>
</body>

Xem ví dụ

Ví dụ :  Tạo trang tìm kiếm :

<html><head><title></title></head>
<body>
<fORM name=f action="http://www.google.com.vn/search?+q"> 
<img src="images/google.jpg" Width=80> <INPUT size=20 name=q>
<input type="submit" value="Tìm kiếm">
</form>
</body></html>

Xem ví dụ

e. Nút chọn – Radio Button

<Input     Type="Radio"  Name="Tên"  Value="Tri"  Checked> 

f. Hộp kiểm Checkbox 

<Input     Type="CheckBox" Name="Tên" Value="Tri" Checked> 

Value="Trị" : Giá trị On/ Off khi gửi lên Server.

Ví dụ: Tạo trang thăm dò ý kiến


 <h3 align="center">PHIẾU THĂM DỊ Ý KIẾN</h3> 
<form>    
Tên đăng nhập:<input type="text" name="Ten" size="20"> 
Giới tính : 
   <input type="radio" value="1" name="phai" checked >Nam      
   <input type="radio" value="0" name="phai" >Nữ
   <input type="radio" value="0" name="phai" >Khác<BR><BR>
Những mục bạn thường quan tâm trên Internet :
   <input type="checkbox" name="C1" value="1">Tin tức<br>   
   <input type="checkbox" name="C3" value="1">Giải  trí<br>   
   <input type="checkbox" name="C2" value="1">Học tập<br>   
   <input type="checkbox" name="C4" value="1">Mục khác<br>
<input type="submit" value="Gửi đi">
<input type="reset" value="Phục Hồi">
</form>

Xem ví dụ

g. File đính kèm

<input type="file" name="txtfile">

h. Thẻ ẩn thông tin

<input type="hidden" name="txtname" >

i. Thẻ Email

Type này chỉ được hỗ trợ trong HTML5 – tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt.

<input name="email" type="email" />

K. Thẻ number
Number là input cho phép người dùng chọn lựa những giá trị số trong khoảng xác định.

<input type="number" name="quality" min="0" max="10"  />

Với min là giới hạn dưới, max là giới hạn trên, giá trị mà người dùng chọn chỉ có thể nằm trong khoảng mix -> max.

Khung văn bản – TextArea

Tag <textarea> dùng để nhập nhiều dòng văn bản, có thể chứa được nhiều ký tự và làm cho văn bản có một chiều rộng cố định (thường là font Courier).
Kích thước của vùng văn bản có thể được xác định bởi các thuộc tính rows và cols, và cũng có thể điều chỉnh thông qua width và height trong css.

Cú pháp:

<TextArea Name="Tên" Rows="n1" Cols="n2"  Wrap> Văn bản mặc định </TextArea> 
  • Rows : Số dòng văn bản
  • Cols:   Số cột văn bản
  • Wrap: Cuộn văn bản xuống dòng khi đến lề phải

Ví dụ: Tạo trang góp ý sau:

<html><head><title></title></head>
<body>
<form>
<h3 align="center">ĐÓNG GÓP Ý KIẾN</h3>     
Họ và Tên:<input type="text" size="40"><br/>
Nội dung góp ý:<textarea rows="3" cols="30">
</textarea></br>
<input type="submit" value="Gửi đi">
<input type="reset" value="Phục Hồi">  
</form>
</body>
</html>

Xem ví dụ

Ví dụ: Tạo trang thăm dò ý kiến:

<html><head><title></title></head>
<body>
<form >
 <h3 align="center">PHIẾU THĂM DÒ Ý KIẾN</h3>     
 <Font size=2>
<Table>
<TR><TD>Tên đăng nhập:</TD>
 <TD>    <input type="text" name="Ten" size="40"> Giới tính : 
<input type="radio" value="V1" name="phai" checked >Nam      
 <input type="radio" value="V2" name="phai" >Nữ</TD>
</TR>
<TR><TD>Mật khẩu:</TD>
<TD> <input type="password" name="T2" size="30"></TD>
</TR>
<TR><TD Colspan=2> Sở thích của bạn</TD> 
</TR>
<TR><TD></TD>
<TD> <select size="4" name="Sothich">
	  <option selected>Truy cập Internet</option>	  <option>Đọc sách báo</option>
	  <option>Xem Tivai</option>			  <option>Tham quan du lịch</option>
	  <option>Dạo phố & Shopping</option>
        </select></TD>
</TR>
<TR> 
<TD COLSPAN=2> Những mục bạn thường quan tâm trên internet</TD>   
</TR>
<TR><TD></TD>
<TD>	<input type="checkbox" name="C1" value="ON">Tin tức<br>   
	 <input type="checkbox" name="C3" value="ON">Giải  trí<br>   
	 <input type="checkbox" name="C2" value="ON">Góc học tập<br>   
	 <input type="checkbox" name="C4" value="ON">Chuyên mục khác</TD>
</TR>
<TR><TD Colspan=2> Nội dung góp ý để website tốt hơn</TD>    
</TR>
<TR><TD></TD>
<TD>  <textarea rows="3" name="Noidung" cols="30"></textarea></TD>
</TR>
<TR><TD></TD>
<TD> 	<input type="submit" value="Gửi đi" name="Gui">
<input type="reset" value="Phục Hồi" name="Phuchoi">  
</TD>
</TR></Form></Font>
</body></html>

Xem ví dụ

ĐỊNH NGHĨA COMBO BOX TRONG HTML

Dùng để tạo danh sách xổ xuống cho phép người dùng lựa chọn

Cú pháp:

<select name = "name">

[<optgroup label = "label">]

<option [selected] value = "value">Text</option>

.......

[</optgroup>]

<option [selected] value = "value">Text</option>

.......

</select>

Ví dụ: Tạo trang web có combobox

<select name="browser">

    <optgroup label="Firefox">
      <option value="2.0 or higher">
        Firefox 2.0 or higher
      </option>
      <option value="1.5.x">Firefox 1.5.x</option>
      <option value="1.0.x">Firefox 1.0.x</option>
    </optgroup>

    <optgroup label="Microsoft Internet Explorer">
      <option value="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </option>
      <option value="6.x">Microsoft Internet Explorer 6.x</option>
      <option value="5.x">Microsoft Internet Explorer 5.x</option>
      <option value="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>

    <optgroup label="Opera">
      <option value="9.0 or higher">Opera 9.0 or higher</option>
      <option value="8.x">Opera 8.x</option>
      <option value="7.x">Opera 7.x</option>
    </optgroup>

    <option>Safari</option>
    <option>Other</option>

</select>

Xem ví dụ

 

Thẻ Marquee trong HTML

Thẻ marquee trong HTML không phải là một thẻ HTML tiêu chuẩn, được sử dụng để di chuyển chữ hoặc ảnh theo chiều ngang hoặc dọc một cách tự động. Có nghĩa là bạn có thể làm cho chữ hoặc ảnh di chuyển lên trên, xuống dưới, sang trái, sang phải một cách tự động.

Ví dụ:

<marquee>Chào mừng các bạn đến website</marquee>

Xem ví dụ

Các thuộc tính của thẻ HTML marquee Thẻ marquee có một vài thuộc tính để điều khiển và hiệu chỉnh sự xuất hiện, di chuyển của các marquee.

Thuộc tính Giải thích
behavior Hành vi di chuyển của marquee bằng một trang 3 giá trị sau: scroll, slide và alternate.
direction Hướng di chuyển của nội dung. Giá trị của direction có thể là left, right, up và down.
width Chiều rộng của marquee theo pixel hoặc %.
height Chiều cao của marquee theo pixel hoặc %.
hspace Chiều cao không gian tính bằng pixcel mà marquee di chuyển trong nó.
vspace Chiều rộng không gian tính bằng pixcel mà marquee di chuyển trong nó.
scrolldelay Độ chễ khi cuộn theo giây.
scrollamount Số lần cuộn theo số
loop Vòng lặp cho nội dung của marquee theo số.
bgcolor Màu nền của marquee.

HTML Scroll Marquee

Mặc định nó được sử dụng để cuộn chữ từ phải sang trái, và bắt đầu cuộn lại từ phía bên phải khi nó kết thúc từ phía bên trái.

Ví dụ:

<marquee width="100%" behavior="scroll" bgcolor="pink">  
    Chuỗi này được cuộn từ phải sang trái
</marquee>

Xem ví dụ

HTML Slide Marquee

Nội dung bị cuộn sẽ trượt từ phải sang trái và dừng lại ở bên trái và vẫn được hiển thị tại bên trái.

Ví dụ:

<marquee width="100%" behavior="slide" bgcolor="pink">  
   Chuỗi này được cuộn từ phải sang trái, dừng lại bên trái.
</marquee>

Xem ví dụ

HTML Alternate Marquee

Nội dung được cuộn từ phải sang trái rồi lại cuộn ngược lại từ trái sang phải.

Ví dụ:

<marquee width="100%" behavior="alternate" bgcolor="pink">  
Chuỗi này được cuộn từ phải sang trái rồi lại cuộn ngược lại từ trái sang phải.
</marquee>

Xem ví dụ

Thuộc tính direction trong HTML marquee

Thuộc tính direction được sử dụng để xác định hướng di chuyển của nội dung marquee. Có thể là left, right, up và down.

Ví dụ:

<marquee width="100%" direction="right">
   Chuỗi này di chuyển từ trái sang phải
</marquee>

Xem ví dụ

Các bất tiện của HTML marquee

  1. Marquee có thể khiến người dùng bị phân tâm, bởi vì mắt người bị thu hút bởi sự chuyển động văn bản.
  2. Vì văn bản của Marquee di chuyển gây khó khăn khi thể click vào văn bản tĩnh.
  3. Marquee không phải là thẻ HTML chuẩn.
  4. Thu hút sự chú ý của người dùng một cách không cần thiết và làm cho văn bản khó đọc hơn

Thẻ title HTML

Thẻ HTML title được sử dụng để cung nhan đề cho trang web của bạn. Nó là một trong những thành phần quan trọng trong SEO.

Thẻ HTML title phải được sử dụng bên trong thẻ <head>

Nhãn tiêu đề của trang web được hiển trên title bar của trình duyệt (browser).

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Hiep Si IT Demo</title>
   </head>
    
   <body>
      <h1>Tiêu đề</h1>
      <p>Định nghĩa đoạn văn bản</p>
   </body>
    
</html>

Xem ví dụ

Trình duyệt hỗ trợ

Thẻ meta HTML

Định nghĩa và sử dụng Siêu dữ liệu (metadata) là dạng dữ liệu (thông tin) miêu tả về dữ liệu.

Siêu dữ liệu (metadata) là dạng dữ liệu (thông tin) miêu tả về dữ liệu.

Thẻ HTML <meta> hay thẻ meta trong HTML được sử dụng để cung cấp metadata về tài liệu HTML. Metadata sẽ không được hiển thị trên trình duyệt, nhưng nó sẽ được bộ máy tìm kiếm phân tích để lấy thông tin cơ bản về trang web của bạn.

Thẻ HTML meta được sử dụng để định nghĩa các thông tin cơ bản như mô tả trang web, từ khóa, tác giả, chỉnh sửa cuối cùng và các metadata khác.

Metadata có thể được sử dụng bởi các trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bộ máy tìm kiếm (từ khóa), và các dịch vụ web khác.

HTML5 giới thiệu một phương pháp để cho các nhà thiết kế web kiểm soát khung nhìn (khu vực hiển thị của một người dùng trên trang web), thông qua thẻ <meta>

Thẻ meta được định nghĩa trong thẻ <head>

Các ví dụ về thẻ meta trong HTML

Ví dụ 1: định nghĩa các từ khóa cho bộ máy tìm kiếm.

<meta name="keywords" content="HTML là gì? Thẻ HTML meta">

Ví dụ 2: định nghĩa một mô tả cho trang web.

<meta name="description" content="Học HTML và CSS miễn phí">

  Ví dụ 3: định nghĩa tác giả của trang web.     

<meta name="author" content="John Doe">

Ví dụ 4: tự động tải lại trang web sau 30s.               

<meta http-equiv="refresh" content="30">

Ví dụ 5: Thiết định khung nhìn để trang web dễ nhìn trên tất cả các thiết bị.       

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Các thẻ <meta> luôn được đặt bên trong phần tử <head>.
Metadata luôn được khai báo theo cặp name/value.
Thuộc tính content PHẢI được định nghĩa nếu thuộc tính name hoặc http-equiv được định nghĩa.
Nếu không thuộc tính nào vừa nêu được định nghĩa thì thuộc tính content KHÔNG THỂ được định nghĩa.

 
Thuộc tính Giá trị Mô tả
charset character_set Chỉ định mã hoá ký tự cho tài liệu HTML
content text Cung cấp giá trị được gắn liền với thuộc tính http-equiv hoặc name
http-equiv content-type
      default-style
      refresh
Cung cấp tiêu đề HTTP cho thông tin / giá trị của thuộc tính content
name application-name
      author
      description
      generator
      keywords
viewport
Chỉ định một tên cho metadata
scheme format/URI Không được hỗ trợ trong HTML5.
Chỉ định một lược đồ được sử dụng để giải thích giá trị của thuộc tính content

Sự khác nhau giữa HTML 4.01 và HTML 5

Thuộc tính scheme không được hỗ trợ trong HTML 5.

HTML 5 có một thuộc tính mới charset, giúp dễ dàng định nghĩa charset cho tài liệu HTML.

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">

Trình duyệt hỗ trợ

Thẻ chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<meta> Yes Yes Yes Yes Yes

Thẻ BR HTML

Thẻ HTML <br> hay Thẻ br trong HTML được sử dụng để xuống dòng trong 1 đoạn văn. Nó là một thẻ trống, có nghĩa là không cần phải đóng thẻ.

Sự khác nhau giữa HTML <br> và <br/>

Bạn có thể sử dụng thẻ HTML br bằng 2 cách: <br> hoặc <br/>. Nhưng bạn nên sử dụng thẻ br đóng <br/> vì nó được hỗ trợ trong cả hai HTML và XHTML.

Ví dụ :

<HTML>
  <HEAD><TITLE> > BÀI THƠ CÔ HÁI MƠ </TITLE></HEAD>
      <BODY>
	CÔ HÁI MƠ
	
	Thơ thẩn đường chiều một khách thơ<br/>
	Say nhìn xa rặng núi xanh lơ<br/>
	Khí trời lặng lẽ và trong trẻo<br/>
	Thấp thoáng rừng mơ, cô hái mơ
</BODY></HTML>

Xem ví dụ

Không nên sử dụng thẻ br để căn lề (margin) giữa hai đoạn văn, mà nên sử dụng CSS.


Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<br/> Yes Yes Yes Yes Yes

Thẻ HR HTML

Thẻ HTML <hr> hay thẻ hr trong HTML được sử dụng để vẽ đường kẻ ngang trong HTML. Nó được sử dụng để phân tách cách chủ đề trong một trang web. Nó cũng được gọi là quy tắc đường kẻ ngang (Horizontal Rule) trong HTML.

Cú pháp:

<hr Size="n1" Width="n2" Align="Hướng"  Color="màu" Noshade>
  • Size: Độ dày        
  • Width: Độ rộng (Pixcel hoặc %)  
  • Align: canh lề Left(Trái), Center(Giữa),Right(Phải)
  • Color: Màu
  • NoShade: Không có bóng 

Ví dụ:

<HTML><HEAD><TITLE> </TITLE></HEAD>
<BODY Bgcolor=Aqua>
	<P Align=Center><H3>Các ký hiệu đặc biệt:</H3><P>
<HR><Font Color=Blue>
	Bản quyền: &#169; <BR>
	Thương hiệu: &#153; <BR>
	Thương hiệu đ đăng ký: &reg; <BR>
	 Email: alibaba&#64;yahoo.com <BR></Font>
	<HR SIZE=3 WIDTH=50% NOSHADE>
</BODY></HTML>

Xem ví dụ

Thẻ HR trong HTML và XHTML

Thẻ hr trong HTML không cần phải đóng thẻ, còn trong XHTML thì phải đóng thẻ.

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<hr/> Yes Yes Yes Yes Yes

Ý nghĩa của thẻ <div>


Thẻ <div> là gì? Đây là cái thẻ mà nó là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung) được sử dụng để tạo ra một khu vực kiểu block nào đó trên một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website vào một khu vực với thẻ <div>.

1) Thẻ <div> thường được dùng để nhóm các phần tử lại với nhau thành một khối để tiện cho việc định dạng tập thể.

Ví dụ:

<div style="border:1px solid pink;padding:20px;font-size:20px">  
<p>Đoạn văn thứ nhất.</p>  
<p>Đoạn văn thứ hai</p>
<p>Đoạn văn thứ n </p>
</div>  

Xem ví dụ

2) Thẻ <div> cũng thường được dùng để làm thùng chứa bao quanh các phần tử và tạo một đường viền trang trí cho những phần tử bên trong nó.

<div style="border:10px solid crimson;background-color:#f1f1f1;padding:20px;">
    <h1>Tài liệu hướng dẫn học lập trình web:</h1>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
    </ul>
</div>

Xem ví dụ

3) Thẻ <div> còn được sử dụng kết hợp với CSS để thiết kế bố cục (Layout) cho trang web.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body{
            margin:0px;
        }
        #container{
            width:800px;
            border:1px solid gray;
            margin-left:auto;
            margin-right:auto;
        }
        #container > div:nth-child(1){
            background-color:#73ad21;
            color:white;
            font-size:25px;
            text-align:center;
            padding:20px;
        }
        #container > div:nth-child(2){
            margin:15px;
        }
        #container > div:nth-child(3){
            background-color:#ddd;
            font-size:18px;
            text-align:center;
            padding:15px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <div>Hiệp Sĩ It</div>
            <div>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>
        </div>
        <div>
            <h2>Layout là gì?</h2>
            <p>Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành
            phần chính trên một trang web.</p>
            <p>Một trang web thường gồm các thành phần chính như:</p>
            <ul>
                <li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li>
                <li>Footer: Thông tin bản quyền của trang web</li>
                <li>Menu: Thanh chức năng</li>
                <li>Nội dung</li>
                <li>....</li>
            </ul>
        </div>
        <div>&copy;2017 hiepsiit All Rights Reserved</div>
    </div>
</body>
</html>

Xem ví dụ

Sự khác nhau giữa thẻ div và thẻ span trong HTML

Thẻ div Thẻ span
HTML div là một phần tử khối (block). HTML span là một phần tử một dòng (inline)
HTML div được sử dụng để nhóm các phần tử có liên quan lại thành một khối. HTML span được sử dụng để nhóm các văn bản, hình ảnh … thành nhóm nhỏ.

Ví dụ về HTML div – Login Form

Trong ví dụ này, chúng ta sử dụng thẻ div để tạo một box và có một form login bên trong box đó.

<html>
<head>

</head>
<style type="text/css">
.loginform{  
    padding:10px;  
    border:1px solid pink;  
    border-radius:10px;  
    float:right;  
    margin-top:10px;  
}  
.formheading{  
    background-color:red;  
    color:white;  
    padding:4px;  
    text-align:center;  
}  
.sub{  
background-color:blue;  
padding: 7px 40px 7px 40px;  
color:white;  
font-weight:bold;  
margin-left:70px;  
border-radius:5px;  
}  
</style>
<body>
<div class="loginform">
  <h3 class="formheading">Please Login</h3>
  <form action="LoginServlet" method="post">
    <table>
      <tr>
        <td>Email:</td>
        <td><input type="email" name="email"/></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" name="password"/></td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td>
      </tr>
    </table>
  </form>
</div> 

</body>
</html>

Xem ví dụ

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<div> Yes Yes Yes Yes Yes

Thẻ pre trong HTML

Thẻ HTML <pre> hay thẻ pre trong HTML được sử dụng để để chỉ định các văn bản đã được định dạng trước. Văn bản nằm trong thẻ <pre>…….</pre> được hiển thị trong font có chiều rộng cố định. Thông thường thì fornt hiển thị là Courier. Các khoảng trắng và xuống dòng trong thẻ pre không bị mất đi giống như các thẻ khác khi hiển thị ra trình duyệt.

Thẻ pre trong HTML được sử dụng rộng rãi để hiển thị ví dụ về ngôn ngữ. Ví dụ: Java, C #, C, C ++ … bởi vì nó hiển thị y nội dung y trang như khi bạn gõ.

Ví dụ về thẻ pre trong HTML

<pre>  
Day la van ban da duoc dinh dang   
Boi viec su dung the HTML pre. Cac khoang trong
    va dau xuong dong khong bi mat di khi hien thi.  
</pre>  

Xem ví dụ

Ví dụ: Thẻ pre trong HTML: Hiển thị code java

<pre>  
package com.hiepsiit;
 
public class FirstJava {
    public static void main(String args[]) {
        System.out.println("hello java");
    }
}
</pre>  

Xem ví dụ

Nếu bạn xóa thẻ pre khỏi đoạn code trên, tất cả nội dung sẽ bị hiển thị trên 1 dòng.

Thuộc tính width

Thẻ HTML <pre> cũng hỗ trợ thuộc tính width. Thuộc tính width chỉ định chiều rộng mong muốn của văn bản được định dạng trước. Tuy nhiên, nó không được hỗ trợ trong HTML 5.

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<pre> Yes Yes Yes Yes Yes

Định nghĩa và sử dụng

Thẻ HTML <code> hay thẻ code trong HTML được sử dụng để biểu diễn mã máy tính. Nó là một thẻ cụm từ định nghĩa một đoạn mã máy tính. Mặc định, nó hiển thị font monospace mặc định của trình duyệt (được biết đến là font có độ dài cố định).

Danh sách thẻ cụm từ HTML

Thẻ Mô tả
<em> Hiển thị văn bản được nhấn mạnh.
<strong> Hiển thị văn bản quan trọng.
<dfn> Định nghĩa một thuật ngữ định nghĩa.
<code> Khai báo một đoạn mã máy tính.
<samp> Chỉ định một đầu ra mẫu từ một chương trình máy tính.
<kbd> Khai báo đầu vào bàn phím
<var> Khai báo một biến


Ví dụ: Thẻ cụm từ HTML bao gồm cả thẻ code

<em>Nội dung bên trong thẻ em.</em><br>
<strong>Nội dung bên trong thẻ strong.</strong><br>
<dfn>Nội dung bên trong thẻ dfn.</dfn><br>
<code>Nội dung bên trong thẻ code.</code><br>
<samp>Nội dung bên trong thẻ samp.</samp><br>
<kbd>Nội dung bên trong thẻ kbd.</kbd><br>
<var>Nội dung bên trong thẻ var.</var>

Xem ví dụ

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<pre> Yes Yes Yes Yes Yes

Thẻ Script trong HTML

Thẻ HTML script hay thẻ script trong HTML được sử dụng để chỉ định kịch bản phía máy khách như JavaScript. Nó tạo điều kiện cho bạn đặt một kịch bản trong tài liệu HTML của bạn.

JavaScript được sử dụng để thao tác với hình ảnh, xác nhận form và nội dung động.

Cú pháp:

<script>  
  // code javascript 
</script>  

Các thuộc tính của thẻ script trong HTML

Thuộc tính Giải thích Tương thích
src Chỉ định đường dẫn đến file javascript không cùng trang. HTML 4.01, HTML5
type Khai báo loại ngôn ngữ. HTML 4.01
async Nó là một giá trị boolean xác định rằng kịch bản được thực hiện không đồng bộ. HTML5
defer Nó là một giá trị boolean được sử dụng để chỉ ra rằng kịch bản được thực hiện sau khi tài liệu đã được phân tích cú pháp. HTML 4.01, HTML5

Các dùng thẻ script

Có hai cách sử dụng thẻ HTML script

  1. Nhúng mã script vào cùng một trang web
  2. Liên kết đến file script


Nhúng mã script

Thẻ script có thể được sử dụng bên trong thẻ <body> hoặc <head> để nhúng mã script. Hãy xem ví dụ sau về việc sử dụng thẻ script bên trong HTML body.

Ví dụ:

<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <script type="text/javascript">  
      document.write("JavaScript là một ngôn ngữ đơn giản!");  
    </script>  
  </body>
</html>

Xem ví dụ

Ví dụ: Sử dụng thẻ script bên trong HTML head.

<html>
  <head>
    <script type="text/javascript">  
      function msg(){  
       alert("Hello TÔ Mì Gõ!");  
      }  
    </script>  
  </head>
  <body>
    <p>Welcome to Javascript</p>
    <form>  
      <input type="button" value="click here" onclick="msg()"/>  
    </form>
  </body>
</html>

Xem ví dụ

Liên kết đến file script

Thẻ script trong HTML có thể được sử dụng để liên kết file kịch bản bên ngoài bằng thuộc tính src. Nó chỉ được sử dụng trong thẻ <head>.

Cú pháp:

<script type="text/javascript" src="message.js" />

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<script> Yes Yes Yes Yes Yes

Thẻ NoScript HTML

Thẻ HTML <noscript> hay thẻ noscript trong HTML được sử dụng để xác định một nội dung thay thế để hiển thị cho những người dùng đã vô hiệu hóa kịch bản từ trình duyệt và muốn truy cập vào trang web.

Thẻ <noscript> có thể được sử dụng bên trong các thẻ <head> và <body>.

Khi sử dụng thẻ noscript bên trong phẩn tử <head>, <noscript> phải chứa các thẻ <link>, <style>, và <meta>.

Văn bản bên trong phần tử <noscript> sẽ được hiển thị nếu trình duyệt của người sử dụng không hỗ trợ hoặc vô hiệu hóa script.

Ví dụ:

<!DOCTYPE html>
<html>
  <body>
    <script>  
      document.write("Welcome to Hiepsiit.com")  
    </script>  
    <noscript>Sorry! Your browser does not support JavaScript.!</noscript>
  </body>
</html>

Xem ví dụ

Sự khác nhau giữa HTML4 và HTML5

Trong HTML 4.01, thẻ <noscript> chỉ có thể sử dụng bên trong thẻ <body> nhưng trong HTML5 nó có thể được sử dụng bên trong thẻ <head> và <body>.

Sự khác nhau giữa HTML và XHTML

XHTML không hỗ trở thẻ noscript

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<pre> Yes Yes Yes Yes Yes

Thẻ HTML b

Thẻ HTML <b> hay thẻ b trong HTML được sử dụng để hiển thị chữ in đậm .

Sự khác nhau giữa các thẻ HTML <b> và <strong>

Thẻ <b> là thẻ thể hiện nội dung rõ ràng, minh bạch, còn thẻ <strong> là một thẻ ngữ nghĩa. Thẻ <strong> bổ sung thêm ý nghĩa ngữ nghĩa cho tài liệu HTML.

Thẻ strong được khuyến cáo sử dụng hơn thay vì thẻ b.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p><b>Tài liệu học </b><strong>Lập Trình</strong> Web</p>
</body>
</html>

Xem ví dụ
 

Theo đặc điểm kỹ thuật của HTML5, chỉ nên sử dụng thẻ b nếu không có thẻ nào khác thích hợp. Ví dụ: Nếu bạn muốn viết một tiêu đề, bạn phải sử dụng thẻ tiêu đề <h1> to <h6>. Báo cáo quan trọng phải được biểu thị trong thẻ <strong>…..</strong>, và văn bản bạn muốn đánh dấu hoặc highlight phải được đặt trong thẻ <mark>…</mark> tag


Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<b> Yes Yes Yes Yes Yes

Thẻ HTML Quotes

HTML quote được sử dụng để đặt một đoạn trích dẫn vào website. Để thực hiện, bạn cần sử dụng thẻ q và thẻ blockquote.

Cú pháp:

<q> Câu trích dẫn </q>

Thẻ q được sử dụng để đưa ra một trích dẫn nhỏ.

Ví dụ:

<q> Mọi người đều là thiên tài. Nhưng nếu bạn đánh giá con cá dựa vào khả năng leo cây, cả cuộc đời nó sẽ tin nó là đồ đần độn</q>

Xem ví dụ

Thẻ blockquote
Thẻ blockquote được sử dụng để đưa ra một đoạn trích dẫn.

Ví dụ:

<blockquote>Bạn đứng thứ mấy trong lớp không quan trọng, nhưng phải thể hiện được đẳng cấp khi bước chân ra xã hội</blockquote> BILL. GATE.

<blockquote>Cuộc sống không được chia thành những học kỳ đâu. Bạn cũng chẳng có mùa hè để nghỉ ngơi và rất ít ông chủ nào quan tâm đến việc giúp bạn nhận ra đâu là khả năng thực sự của bạn. Hãy tự khám phá điều đó trong những khỏang thời gian của riêng mình</blockquote> BILL. GATE

Xem ví dụ

Các thẻ trong HTML được sử dụng cho việc trích dẫn

Thẻ Mô tả
<abbr> Chữ viết tắt hoặc từ viết tắt.
<address> Sử dụng để xác định thông tin liên lạc của nhà văn tài liệu.
<bdo> Hướng của văn bản.
<blockquote> Sử dụng để xác định một phần được trích dẫn từ một nguồn khác.
<q> Sử dụng để đặt các trích dẫn nhỏ vào website.
<cite> Tiêu đề nguồn từ nơi trích dẫn hoặc hoạt động được đưa ra.
<define> Sử dụng để định nghĩa các điều khoản.

 

HTML symbols là những đoạn mã thay thế cho các ký tự, chèn vào văn bản HTML.
 

Mã ký tự Ký tự
&quot; "
&amp; &
&lt; <
&gt; >
&euro;
&nbsp;  
&Aacute; Á
&aacute; á
&Acirc; Â
&acirc; â
&acute; ´
&AElig; Æ
&aelig; æ
&Agrave; À
&agrave; à
&Aring; Å
&aring; å
&Atilde; Ã
&atilde; ã
&Auml; Ä
&auml; ä
&brvbar; ¦
&Ccedil; Ç
&ccedil; ç
&cedil; ¸
&cent; ¢
&circ; ˆ
&copy; ©
&curren; ¤
&deg; °
&divide; ÷
&Eacute; É
&eacute; é
&Ecirc; Ê
&ecirc; ê
&Egrave; È
&egrave; è
&ETH; Ð
&eth; ð
&Euml; Ë
&euml; ë
&euro;
&fnof; ƒ
&frac12; ½
&frac14; ¼
&frac34; ¾
&Iacute; Í
&iacute; í
&Icirc; Î
&icirc; î
&iexcl; ¡
&Igrave; Ì
&igrave; ì
&iquest; ¿
&Iuml; Ï
&iuml; ï
&laquo; «
&macr; ¯
&micro; µ
&middot; ·
&not; ¬
&Ntilde; Ñ
&ntilde; ñ
&Oacute; Ó
&oacute; ó
&Ocirc; Ô
&ocirc; ô
&OElig; Œ
&oelig; œ
&Ograve; Ò
&ograve; ò
&ordf; ª
&ordm; º
&Oslash; Ø
&oslash; ø
&Otilde; Õ
&otilde; õ
&Ouml; Ö
&ouml; ö
&para;
&plusmn; ±
&pound; £
&raquo; »
&reg; ®
&Scaron; Š
&scaron; š
&sect; §
&shy; ­
&sup1; ¹
&sup2; ²
&sup3; ³
&szlig; ß
&THORN; Þ
&thorn; þ
&tilde; ˜
&times; ×
&Uacute; Ú
&uacute; ú
&Ucirc; Û
&ucirc; û
&Ugrave; Ù
&ugrave; ù
&uml; ¨
&Uuml; Ü
&uuml; ü
&Yacute; Ý
&yacute; ý
&yen; ¥
&Yuml; Ÿ
&yuml; ÿ
&ensp;
&emsp;
&thinsp;
&zwnj;
&zwj;
&lrm;
&rlm;
&ndash;
&mdash;
&lsquo;
&rsquo;
&sbquo;
&ldquo;
&rdquo;
&bdquo;
&lsaquo;
&rsaquo;
&dagger;
&Dagger;
&permil;
&bull;
&hellip;
&Prime;
&prime;
&oline;
&frasl;
&weierp;
&image;
&real;
&trade;
&alefsym;
&larr;
&uarr;
&rarr;
&darr;
&harr;
&crarr;
&lArr;
&uArr;
&rArr;
&dArr;
&hArr;
&forall;
&part;
&exist;
&empty;
&nabla;
&isin;
&notin;
&ni;
&prod;
&sum;
&minus;
&lowast;
&radic;
&prop;
&infin;
&ang;
&and;
&or;
&cap;
&cup;
&int;
&there4;
&sim;
&cong;
&asymp;
&ne;
&equiv;
&le;
&ge;
&sub;
&sup;
&nsub;
&sube;
&supe;
&oplus;
&otimes;
&perp;
&hArr;
&sdot;
&lceil;
&rceil;
&lfloor;
&rfloor;
&lang;
&rang;
&loz;
&spades;
&clubs;
&hearts;
&diams;
&Alpha; Α
&alpha; α
&Beta; Β
&beta; β
&Gamma; Γ
&gamma; γ
&Delta; Δ
&delta; δ
&Epsilon; Ε
&epsilon; ε
&Zeta; Ζ
&zeta; ζ
&Eta; Η
&eta; η
&Theta; Θ
&theta; θ
&thetasym; ϑ
&Iota; Ι
&iota; ι
&Kappa; Κ
&kappa; κ
&Lambda; Λ
&lambda; λ
&Mu; Μ
&mu; μ
&Nu; Ν
&nu; ν
&Xi; Ξ
&xi; ξ
&Omicron; Ο
&omicron; ο
&Pi; Π
&pi; π
&piv; ϖ
&Rho; Ρ
&rho; ρ
&Sigma; Σ
&sigma; σ
&sigmaf; ς
&Tau; Τ
&tau; τ
&Upsilon; Υ
&upsilon; υ
&upsih; ϒ
&Phi; Φ
&phi; φ
&Chi; Χ
&chi; χ
&Psi; Ψ
&psi; ψ
&Omega; Ω
&omega; ω