Trong bài viết trước mình đã trình bày cho các bạn biết cách để tạo ra một trang web HTML đơn giản. Hôm nay mình xin trình bày rõ hơn về các thẻ(tag) thường sử dụng trong lập trình web, blogspot.
A. Thẻ HTML hay HTML tag là gì?
* Thẻ(tag) được sử dụng để đánh dấu các thành phần của HTML; là thành phần quan trong nhất để cấu thành tập tin HTML. Khi gặp 1 thẻ(tag) thì trình duyệt bắt buộc phải hiển thị theo đúng cấu trúc đã quy định sẵn của thẻ(tag) đó. Có nhiều kiểu thẻ và mỗi thẻ có tác dụng khác nhau, nhưng chung lại có 2 loại: thẻ đóng và thẻ mở.
- Thẻ mở:
+ <tên_thẻ>
+ nằm trong cặp dấu bé hơn (<) và dấu lớn hơn (>) dùng để bắt đầu 1 lệnh HTML
+ VD: <html>; <head>; <body>
- Thẻ đóng:
+ </tên_thẻ>
+ Chỉ khác thẻ mở ở dấu /
+ VD: </html>; </head>; </body>
* Thẻ đóng và thẻ mở thường đi liền với nhau:
+ <tên_thẻ>...</tên_thẻ>
+ tác động đến dữ liệu bên trong cặp thẻ.
* Một số thẻ chỉ có thẻ mở, không có thẻ đóng:
<img>; <br>; <hr>; <meta>
B. Thuộc tính của thẻ:
- Là những đặc tính, tính chất mang theo để trình duyệt định dạng và hiển thị thẻ đó.
- Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính
- Mỗi thuộc tính có tên thuộc tính và giá trị của thuộc tính, giá trị được đặt trong dấu ""
- Cú pháp:
<tên_thẻ thuộc_tính_1="giá_trị_thuộc_tính_1" thuộc_tính_2="giá_trị_thuộc_tính_2" ... />
- Thuộc tính được viết trong thẻ mở:
VD : <h1 align="center">Xin chào</h1>
- Thuộc tính có thể đổi vị trí cho nhau:
VD: <img src="xinchao.png" align="center"/> ~ <img align="center" src="xinchao.png"/>
trình duyệt sẽ hiển thị như nhau.
C. Các thẻ thường dùng và thuộc tính đi kèm:
<body>...</body>:
*Thuộc tính:
+ bgcolor xác định màu nền trang web, mầu thường dùng là các từ tiếng Anh như: red, blue, green, white... nhưng cũng có thể dùng mã màu(mình sẽ đề cập sau)
+ background: xác định ảnh nền trang web:
VD: <body background="anh_nen_1600x960.png">
1. Các thẻ tiêu đề (headding tags)
- Bao gồm các thẻ từ <h1> đến <h6> ( <h1> có kích thước lớn nhất, <h6> là bé nhất ) thường được sử dụng làm tiêu đề cho bài viết, trong template blogger thì tiêu đề bài viết thường là thẻ <h3>
VD:
<h1>Xin chào cả nhà. Chúc vui vẻ!</h1>
<h3>Tiêu đề thường dùng trong Blogspot là h3</h3>
<h6>Tiêu đề nhỏ nhất là thẻ h6</h6>
2. Thẻ dùng để định dạng văn bản,kí tự:
Trong phần 2 mình có đề cập qua các thẻ như
<b>in đậm</b> : in đậm;
<i>chữ nghiêng</i>: chữ nghiêng;
<u>gạch chận</u> : gạch chận;
Trong bài này mình bổ sung thêm 1 số thẻ thường dùng khác:
<font>...</font>: chọn font chữ cho văn bản
<big>chữ to</big>: chữ to
<small>chữ nhỏ</small>: chữ nhỏ
<sup>chỉ số trên</sup>. VD: A bình phương: A<sup>2</sup> --> A2.
<sub>chỉ số dưới</sub>. VD: Công thức hóa học: H<sub>2</sup>O --> H2O.
<strong>nhấn mạnh in đậm</strong>:nhấn mạnh in đậm
<em>nhấn mạnh in nghiêng</em>:nhấn mạnh in nghiêng
3. Đoạn văn bản trong HTML (HTML Paragraphs)
Đoạn văn trong HTML được định nghĩa bởi thẻ <p>:
VD:
<p> Đoạn văn bản thứ nhất</p>
<p> Nội dung đoạn văn bản thứ 2 </p>
4. Chèn liên kết (link)
Một trang web có thể bao gồm nhiều trang web con khác, về để chuyển đến các trang web con đó thì cần có đường dẫn(link) và như thế thẻ <a> xuất hiện.
Thẻ <a> dùng để định nghĩa liên kết trong HTML có cấu trúc như sau:
<a href="http://google.com.vn" target="_blank">Google Việt Nam</a>
5. Chèn hình ảnh
Để chèn một hình ảnh trong HTML ta dùng thẻ <img>, thẻ này không có thẻ đóng.
6. Các thẻ khác:
- Xuống dòng trong HTML:
Trong HTML khi bạn muốn xuống dòng ở đoạn văn bản nào đó bạn không thể dùng phím enter như trong Word được mà phải sử dụng thẻ <br />
VD:
Một canh
Hai canh...
Lại ba canh.
- Đường kẻ ngang phân chia trong HTML: <hr />
VD:
<h1>Tiêu đề bài viết</h1>
<hr />
<p>Đoạn văn bản</p>
Sẽ thành:
- Bao gồm các thẻ từ <h1> đến <h6> ( <h1> có kích thước lớn nhất, <h6> là bé nhất ) thường được sử dụng làm tiêu đề cho bài viết, trong template blogger thì tiêu đề bài viết thường là thẻ <h3>
VD:
<h1>Xin chào cả nhà. Chúc vui vẻ!</h1>
<h3>Tiêu đề thường dùng trong Blogspot là h3</h3>
<h6>Tiêu đề nhỏ nhất là thẻ h6</h6>
*Thuộc tính:
+ align: có các giá trị: "left", "right", "center", "justify" : căn chỉnh lề
2. Thẻ dùng để định dạng văn bản,kí tự:
Trong phần 2 mình có đề cập qua các thẻ như
<b>in đậm</b> : in đậm;
<i>chữ nghiêng</i>: chữ nghiêng;
<u>gạch chận</u> : gạch chận;
Trong bài này mình bổ sung thêm 1 số thẻ thường dùng khác:
<font>...</font>: chọn font chữ cho văn bản
* Thuộc tính:
+ face: xác định kiểu font: thường có các kiểu font như .VnTime, Times New Roman, Arial
VD: <font face= "Arial">Font Arial></font> --> Font Arial
+ size: xác định kích thước chữ: VD <font size="5">cỡ chữ 5</font> --> cỡ chữ 5
+ color: xác định màu chữ: VD: <font color="blue">Chữ màu xanh</font> --> Chữ màu xanh
<big>chữ to</big>: chữ to
<small>chữ nhỏ</small>: chữ nhỏ
<sup>chỉ số trên</sup>. VD: A bình phương: A<sup>2</sup> --> A2.
<sub>chỉ số dưới</sub>. VD: Công thức hóa học: H<sub>2</sup>O --> H2O.
<strong>nhấn mạnh in đậm</strong>:nhấn mạnh in đậm
<em>nhấn mạnh in nghiêng</em>:nhấn mạnh in nghiêng
3. Đoạn văn bản trong HTML (HTML Paragraphs)
Đoạn văn trong HTML được định nghĩa bởi thẻ <p>:
VD:
<p> Đoạn văn bản thứ nhất</p>
<p> Nội dung đoạn văn bản thứ 2 </p>
*Thuộc tính: align căn lề, giá trị mặc định là "left"
4. Chèn liên kết (link)
Một trang web có thể bao gồm nhiều trang web con khác, về để chuyển đến các trang web con đó thì cần có đường dẫn(link) và như thế thẻ <a> xuất hiện.
Thẻ <a> dùng để định nghĩa liên kết trong HTML có cấu trúc như sau:
<a href="http://google.com.vn" target="_blank">Google Việt Nam</a>
*Thuộc tính:
+ href: bắt buộc phải có bởi vì có nó mới có đường dẫn cần trỏ tới
+ target: thuộc tính này quy định liên kết được mở ra ở đâu, có các giá trị:
- _blank: mở trang web ở cửa sổ hay tab mới
mặc định khi không có thuộc tính target thì thẻ <a> sẽ mở ở cửa sổ hiện tại.
- _seft: mở ở cửa sổ hiện tại
5. Chèn hình ảnh
Để chèn một hình ảnh trong HTML ta dùng thẻ <img>, thẻ này không có thẻ đóng.
Cấu trúc:*Thuộc tính:
<img src="hinhanh.png" alt="hình ảnh minh họa" title="Đây là hình ảnh minh họa" width="100%" hight="100px" />
+ src : chỉ ra đường dẫn đến tệp tin hình ảnh đó ( đường dẫn có thể là tương đối như trên hoặc tuyệt đối khi có http://, mình sẽ cập nhật bài viết sau)
+ alt: nội dung trong thuộc tính này sẽ hiển thị nếu tệp tin hình ảnh không tồn tại(link die)
+ title: cái này sẽ hiển thị khi di chuột vào hình ảnh
+ width và hight: quy định chiều rộng và chiều cao của hình ảnh được phép hiển thị, có thể tính bằng % hoặc px(pixels), khi không có 2 thuộc tính này thì mặc định trình duyệt sẽ lấy kích thước gốc của hình ảnh.
6. Các thẻ khác:
- Xuống dòng trong HTML:
Trong HTML khi bạn muốn xuống dòng ở đoạn văn bản nào đó bạn không thể dùng phím enter như trong Word được mà phải sử dụng thẻ <br />
VD:
<p>Một canh</p><br /><p>Hai canh...</p><br /><p>Lại ba canh.</p>Sẽ thành:
Một canh
Hai canh...
Lại ba canh.
- Đường kẻ ngang phân chia trong HTML: <hr />
VD:
<h1>Tiêu đề bài viết</h1>
<hr />
<p>Đoạn văn bản</p>
Tiêu đề bài viết
Đoạn văn bản
