ThS. Trần Vĩnh Xuyên - http://khonggiankythuat.com

1. Một số qui ước

1.1. Màu sắc

Để khai báo một màu sắc cụ thể nào đó trong html, chúng ta sẽ khai báo theo:

- TenMau: tên màu bằng tiếng anh.
- #yyyyyy: trong đó y từ 0 đến f.
- rgb(y,y,y): trong đó y từ 0 đến 255.

Ví dụ:

- <body bgcolor=red >
- <body bgcolor=rgb(0,200,225)>
- <body bgcolor='#1ac9df'>
- ...

1.2. Đường dẫn tuyệt đối

Đường dẫn tuyệt đối, là dạng đường dẫn sẽ qui định cụ thể đường dẫn vật lý trên thiết bị đang hoạt động.

- C:\Window
- D:\Datas
- F:\Images

1.3. Đường dẫn tương đối

Đường dẫn tương đối, là dạng đường dẫn sẽ không qui định cụ thể đường dẫn vật lý trên thiết bị đang hoạt động, mà chỉ mang tính chất tương đối, ánh xạ tại điểm mốc để làm phép đối chiếu.

- /images/: điểm mốc là images
- Dấu ".." : trở ra cấp cha.
- ../../pages/: ra 2 cấp và vào pages

2. Nhóm thẻ tiêu đề

2.1. Giới thiệu

Là nhóm thẻ dùng để tạo tiêu đề cho trang web. Phần tiêu đề được hiển thị to và đậm hơn để phân biệt chúng với phần còn lại của văn bản. Chúng ta có thể hiển thị tiêu đề một trong sáu kích thước từ H1 dến H6. Tất cả những gì chúng ta cần làm là chỉ rõ kích thước, H1, H2... Trình duyệt chú ý đến cách hiển thị.

2.2. Thẻ tiêu biểu

Một số thẻ dùng để tạo tiêu đề trong trang web tiêu biểu như:

- H1
- H2
- H3
- H4
- H5
- H6

2.3. Ví dụ

 - <H1> Tieu de 1 </H1>
 - <H2> Tieu de 2 </H2>
 - <H3> Tieu de 3 </H3>
 - <H4> Tieu de 4 </H4>
 - <H5> Tieu de 5 </H5>
 - <H6> Tieu de 6 </H6>

3. Thẻ P

Để truyền đạt các nội dung đến với người dùng thông thường chúng ta sẽ sử dụng văn bản để truyền tải thông tin đến người dùng thể hiện qua các đoạn văn bản. Mỗi đoạn sẽ mang một ý nghĩa cụ thể để người dùng nắm bắt được thông tin.

Các đoạn văn bản sẽ được cách nhau một khoản vừa đủ lớn để có thể phân biệt giữa đoạn này và đoạn khác. Khoản cách này chúng ta hoàn toàn có thể thay đổi được.

Cú pháp:

  <P> ... </P>

Ví dụ:

  <P> Nội dung văn bản </P>

4. Thẻ Br

Trong thiết kế web, khi cần xuống dòng chúng ta không thể áp dụng kiến thức ở word để sử dụng, đó là gõ Enter để xuống dòng. Trong web sẽ không thể xuống dòng theo cách này.

Phần tử <BR> được sử dụng chỉ để ngắt dòng trong tài liệu HTML. Thẻ <BR> bổ sung kí tự xuống dòng ( và về đầu dòng ) tại vị trí của thẻ.

Cú pháp:

  <Br/>

Ví dụ:

  <P> Thầy Xuyên! Chào <Br/>Tèo.</P>

5. Thẻ Hr

Thẻ kẻ đường ngang <HR> được sử dụng để kẻ một đường ngang trên một trang. Thẻ sẽ kẽ từ lề trái sang lề phải của đối tượng đang chứa thẻ.

Cú pháp:

  <HR>

Ví dụ:

  <P> Thầy Trần Vĩnh Xuyên! </P> 
  <Hr>
  <P> Chào <Br/>Tèo.</P>

Một số thuộc tính

Thuộc tính	Mô tả
Align	Chỉ vị trí của đường ngang. Chúng ta có thể canh lề nằm giữa phải trái.
Width	Chỉ độ dài của dòng. Nó có thể được xác định bằng các điểm hoặc tính theo phần trăm. Mặc định là 100%, nghĩa là toàn bộ bề ngang của tài liệu.
Size	Chỉ độ dày của đường ngang và được xác định bằng các điểm
Noshade	Chỉ đường được hiển thị bằng màu đặc thay vì có bóng

6. Thẻ Font

Thẻ được sử dụng để điều khiển cách hiển thị văn bản trên trang Web. Chúng ta có thể xác định các thuộc tính như kích thước, màu sắc, kiểu chữ,...

Cú pháp:

  <Font thuoctinh='giatri'> 
   Văn bản
  </Font>

Ví dụ:

  <Font color="#ff0000"
    face="arial, serif"
	size="14" > 
      Thầy Trần Vĩnh Xuyên! 
  </Font>

Một số thuộc tính

Thuộc tính	Mô tả
color	Định màu đối tượng
face	Định font chữ
size	Định cỡ chữ

7. Thẻ Body

Thẻ này dùng để khai báo cho trình duyệt biết trang web sẽ bắt đầu hiển thị từ vị trí này. Chúng ta có thể sử dụng thẻ <Body> để định dạng cho toàn trang web của chúng ta như: lề, kích thước, màu sắc, kiểu chữ,...

Cú pháp:

  <Body thuoctinh='giatri'> 
   Văn bản
  </Body>

Một số thuộc tính

Thuộc tính	Mô tả
background	Định hình nền
bgcolor	Định màu nền/td>
leftmargin	Định lề trái
rightmargin	Định lề phải
topmargin	Định lề trên
bottommargin	Định lề dưới
leftpadding	Định vùng đệm trái
rightpadding	Định vùng đệm phải
toppadding	Định vùng đệm trên
bottompadding	Định vùng đệm dưới

8. Thẻ Img

Để thêm một hình ảnh vào trang web, chúng ta có thể sử dụng thẻ <img> để thêm hình ảnh vào trang web. Khi làm việc với hình ảnh chúng ta cần quan tâm đến đường dẫn trỏ đến hình ảnh ấy, và thư mục đang chứa hình ảnh ấy.

Khi cần sao chép, hay di chuyển website chúng ta đến một vị trí khác chúng ta cần phải đảm bảo đường dẫn mà các hình ảnh mà chúng ta cần hiển thị trên trang web phải chính xác. Thông thường chúng cần phải tạo một thư mục để có thể lưu trữ các hình ảnh mà chúng ta cần hiển thị trên website của chúng ta.

Tóm lại khi dùng hình cần:

- Tạo thư mục trên website để lưu các hình ảnh.
- Lập đường dẫn tương đối khi trỏ đến ảnh.
- Lưu trang web cần thêm hình ảnh.

Cú pháp:

  <img thuoctinh='giatri' />

Một số thuộc tính

Thuộc tính	Mô tả
name	Tên của đối tượng
src	Đường dẫn đến ảnh
alt	Văn bản hiển thị khi ảnh không thể hiển thị
width	Độ rộng ảnh
height	Chiểu cao ảnh
border	Kẻ khung ảnh

9. Nhóm thẻ định dạng cơ bản

9.1. Giới thiệu

Để định dạng: in đậm, in nghiêng, gạch dưới chân chữ,... một đối tượng hay một phần của một đối tượng nào đó chúng ta có thể sử dụng nhóm các thẻ này để thực hiện.

9.2. Một số thẻ cơ bản

In đậm

Thẻ	Mô tả
<b> đối tượng </b>
<i> đối tượng </i>	In nghiêng
<big> ... </big>	Tạo kích thước lớn hơn
<small> ... </small>	Tạo kích thước nhỏ hơn
<strike> đối tượng </strike>	Tạo kẻ ngang đối tượng
<sup> đối tượng </sup>	Tạo chỉ số trên
<sub> đối tượng </sub>	Tạo chỉ số dưới
<center> các đối tượng </center>	Canh giữa các đối tượng

10. Thẻ pre

Khi chúng ta tạo ra một định dạng trước nào đó, mà chúng ta muốn trình duyệt sẽ hiển thị phần nội dung mà chúng ta đã định dạng, đúng như chúng ta đã định dạng thì chúng ta nên sử dụng thẻ này "pre" để làm điều này.

Ví dụ:

  <pre> 
   Thầy Trần Vĩnh Xuyên,
    xin kính chào
   Các em!
  </pre>

11. Thẻ liên kết

11.1. Giới thiệu

Thẻ liên kết là thẻ rất thường được sử dụng khi chúng ta xây dựng website, chúng ta có nhiều nhu cầu cần liên kết đến những điểm điểm B, C, D,... khi chúng ta đang ở điểm A.

11.2. Phân loại

11.2.1. Liên kết cục bộ

Là liên kết trong nội bộ trang, hay liên kết với các tài nguyên trong cùng một host (tạm gọi là cùng một website). Liên kết như thế chúng ta gọi là liên kết trong nội bộ.

Cú pháp:

<a href="điểm_đích"> liên kết </a>

Ví dụ:

 //Liên kết đến một trang nội bộ
 <a href =“/pages/gioithieu.htm”>
  Giới thiệu 
 </a>

 //Liên kết đến một điểm trong trang
 <a href =“#diemdau”> Về đầu trang </a>

11.2.2. Liên kết ngoại

Là liên kết ra ngoài đến các tài nguyên bên ngoài host (tạm gọi là cùng một website). Liên kết như thế chúng ta gọi là liên kết ngoại.

Cú pháp:

 <a href ="http://điểmđến"> 
  Nhãn liên kết 
 </a>

Ví dụ:

<a href=“http://khonggiankythuat.com”> 
 Đến trang không gian kỹ thuật 
</a>

11.2.3. Liên kết email

Thông thường chúng ta cần gửi mail đến một địa chỉ email nào đó, chính vì thế chúng ta cần phải tạo một liên kết để có thể tạo email và hỗ trợ gửi email của chúng ta đi.

Cú pháp:

 <a href="Mailto:Địachỉ_Email"> 
  Nhãn liên kết 
 </a>

Ví dụ:

 <a href=“Mailto:xuyen@gmail.com”> 
  Soạn và gửi email
 </a>

12. Danh sách

12.1. 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. Tạo danh sách không đánh số thứ tự.

Cú pháp:

 <ul> 
  <li> mục 1</li>
  <li> mục 2</li>
  <li> mục n</li>
 </ul>

Ví dụ:

 <ul>  
  <li> Toán </li>
  <li> Lý </li>
  <li> Hóa </li>
 </ul>

Chú ý:

- type: kiểu số để đánh.
- style: dùng cài css.

12.2.2. Có thứ tự

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

Cú pháp:

 <ol> 
  <li> mục 1</li>
  <li> mục 2</li>
  <li> mục n</li>
 </ol>

Ví dụ:

 <ol>  
  <li> Toán </li>
  <li> Lý </li>
  <li> Hóa </li>
 </ol>

Chú ý:

- start: giá trị bắt đầu đánh.
- type: kiểu số để đánh.

12.2.3. Danh sách định nghĩa

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

Cú pháp:

 <dl> 
  <dt>Tiêu đề 1</dt>
   <dd> mục 1.1</dd>
   <dd> mục 1.2</dd>
   <dd> mục 1.n</dd>
  <dt>Tiêu đề 2</dt>
   <dd> mục 2.1</dd>
   <dd> mục 2.2</dd>
   <dd> mục 2.n</dd>
 </dl>

Ví dụ:

 <dl> 
  <dt>Tin học</dt>
   <dd> window</dd>
   <dd> word</dd>
   <dd> excel</dd>
  <dt>Lập trình</dt>
   <dd> Access</dd>
   <dd> C#</dd>
   <dd> VB.Net</dd>
 </dl>

13. Một số ký tự đặc biệt

Là những ký tự khi chúng ta muốn hiển thị chúng lên trang web, thì chúng ta cần phải đưa các mã lệnh tương ứng để hiển thị. Khác với các ký tự thường khi muốn hiển thị thì chỉ cần gõ ký tự ấy ra là hiển thị.

Ký tự	Ý nghĩa	Mã html
	Khoảng trắng
<	Dấu nhỏ hơn	<
>	Dấu lớn hơn	>
"	Dấu nháy kép	"
&	Dấu và	&
©	Bản quyền	©
®	Nhãn hiệu đã đăng ký	®

Trích dẫn: (http://khonggiankythuat.com)

Tkw - Thẻ Trong Html

1. Một số qui ước

1.1. Màu sắc

1.2. Đường dẫn tuyệt đối

1.3. Đường dẫn tương đối

2. Nhóm thẻ tiêu đề

2.1. Giới thiệu

2.2. Thẻ tiêu biểu

2.3. Ví dụ

3. Thẻ P

4. Thẻ Br

5. Thẻ Hr

6. Thẻ Font

7. Thẻ Body

8. Thẻ Img

9. Nhóm thẻ định dạng cơ bản

9.1. Giới thiệu

9.2. Một số thẻ cơ bản

10. Thẻ pre

11. Thẻ liên kết

11.1. Giới thiệu

11.2. Phân loại

11.2.1. Liên kết cục bộ

11.2.2. Liên kết ngoại

11.2.3. Liên kết email

12. Danh sách

12.1. Không có thứ tự

12.2.2. Có thứ tự

12.2.3. Danh sách định nghĩa

13. Một số ký tự đặc biệt

Học liệu