Bài trước chúng ta đã cùng nhau tìm hiểu cơ bản về HTML và CSS rồi. Và tiếp theo ở bài này mình và bạn cùng nhau tìm hiểu sâu hơn về HTML. Bài học hôm nay chúng ta xẽ tìm hiểu về các Tag/ Thẻ trong HTML. Giờ thì chúng ta bắt đầu nào?
Phần 1 : Cách khai báo thẻ
1. 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>
2. Thẻ đóng:
</tên_thẻ>
Chỉ cần thêm dấu / trước tên thể là được
VD: </html>; </head>; </body>
Phần 2 : Các thẻ trong HTML - Cách dùng - Ý Nghĩa
1. Thẻ siêu liên kết : <a> </a>
Dùng để khai báo 1 liên kết
Cách sử dụng: khai báo trong cặp thẻ <a></a>
Ví dụ
<a href = "https://blogkoiem.blogspot.com/" title="Blog KoiEM">Học HTML </a>
Hiển thị trên trình duyệt<a href = "https://blogkoiem.blogspot.com/" title="Blog KoiEM">Học HTML </a>
Học HTML
Ý Nghĩa :
+ href : địa chỉ liên kết .
+ title : phần mô tả cho liên kết
+ Học HTML : Phần văn bản hiển thị cho liên kết.
Có 3 loại liên kết. Ở ví dụ trên là liên kết tới 1 địa chỉ website
+ Học HTML : Phần văn bản hiển thị cho liên kết.
Có 3 loại liên kết. Ở ví dụ trên là liên kết tới 1 địa chỉ website
- Liên kết tới 1 mail : <p>Email: <a href="mailto:ichiase360@gmail.com">ichiase360@gmail.com</a></p>
Hiển thị trên trình duyệt
Email: ichiase360@gmail.com
- Liên kết tới 1 vị trí trong website : <p><a href="#content">Liên kết tới id content</a></p>
2.Thẻ hình ảnh trong html
-Thẻ hình ảnh trong html được quy định bởi thẻ <img>
-Cú pháp lệnh : <img src=”duyanhweb.jpg” alt=”duy anh web” width=”104″ height=”142″>
-Trong đó :
+ <img> : Là câu lệnh dùng thẻ chèn hình ảnh vào trang web.
+ src : Đường dẫn đến file hình ảnh.
+ alt : Văn bản thay thế.
+ width, height : Là chiều rộng và chiều cao.
3.Thẻ định dạng văn bản trong html
-Thẻ <b> : Thẻ in đậm vừa
-Thẻ <strong> :Thẻ in rất đậm
-Thẻ <i> : Thẻ in nghiêng
-Thẻ <em> : Thẻ in nghiêng
-Thẻ <u> : Thẻ gạch chân
-Thẻ <s> : Thẻ gạch ngang
-Thẻ <small> : Thẻ cỡ chữ nhỏ
Ví dụ về các thẻ định dạng văn bản trong html:
<!DOCTYPE html>
<html>
<body>
<p><b> Học lập trình web ở đâu</b></p>
<p><strong> Học làm seo </strong></p>
<p><i> Học marketing online </i></p>
<p><em> Học PHP tại Duy Anh Web</em></p>
<p><u> Học seo ở đâu tại Hà Nội</u></p>
<p><s> Hướng dẫn học html online</s></p>
<p><small> Giáo trình thiết kế web html</small></p>
</body>
</html>
4.Thẻ comment (chú thích) trong html
<!—-Viết ghi chú tại đây–>
-Thẻ này mục đích dùng để chú thích một đoạn văn bản trong code.Nghĩa là bạn code 1 đoạn code và muốn ghi chú đoạn code đó là gì thì câu lệnh trên sẽ giúp bạn điều đó.
Ví dụ :
<!DOCTYPE html>
<html>
<body>
<h1>Học html online hiệu quả</h1>
<p> Đào tạo seo tại Hà Nội </p>
<!—-Đây chính là văn bản html–>
</body>
</html>
5. Thẻ table (tạo bảng) trong html
Trước khi tìm hiểu thì mình xẽ đưa ra một ví dụ rồi mình xẽ giải thích từng phần
<!DOCTYPE html>
<html>
<head>
<title>Blog KoiEm</title>
<meta charset=”utf-8″>
</head>
<body>
<table width=”50%” border=”1″ style=”margin-top:20px;” align=”center”>
<tr>
<td>Nguyễn Văn Tuấn</td>
<td>Hà Nội</td>
<td>Hà Nội</td>
<td>19 tuổi</td>
</tr>
<tr>
<td>Lâm Chấn Huy</td>
<td>Hà Tĩnh</td>
<td>29 tuổi</td>
</tr>
<tr>
<td>Quách Thành Danh</td>
<td>Tp.Hồ Chí Minh</td>
<td>30 tuổi</td>
</tr>
<tr>
<td>Nhật Tinh Anh</td>
<td>Thanh Hóa</td>
<td>35 tuổi</td>
</tr>
<tr>
<td>Khánh Đơn</td>
<td>Đồng Nai</td>
<td>30 tuổi</td>
</tr>
</table>
</body>
</html>
Các bạn hãy thử viết y theo mình save lại xem kết quả nhé!
Giải thích cho từng cặp thẻ đây :
+ Cặp thẻ <table></table> : Là cặp thẻ dùng để tạo bảng.
Giải thích cho từng cặp thẻ đây :
+ Cặp thẻ <table></table> : Là cặp thẻ dùng để tạo bảng.
+ Cặp thẻ <tr></tr> : Là từ viết tắt của table row tức là tạo dòng.
+ Cặp thẻ <td></td> : Là từ viết tắt của table data tức là tạo cột.
+ Ngoài cặp thẻ <td></td> dùng để tạo cột thì chúng ta còn có cặp thẻ <th></th> cũng có ý nghĩa tương tự nhưng cặp thẻ <th></th> này dùng để nhấn mạnh tiêu đề của văn bản trong html.Mình ví dụ luôn nhé :
Ví dụ :
<!DOCTYPE html>
<html>
<head>
<title>Nguyễn Văn Tuấn</title>
<meta charset=”utf-8″>
</head>
<body>
<table width=”50%” border=”1″ style=”margin-top:20px;” align=”center”>
<tr>
<th>Phạm Đình Hải</th>
<td>Hà Nam</td>
<td>24 tuổi</td>
</tr>
<tr>
<th>Lâm Chấn Huy</th>
<td>Hà Tĩnh</td>
<td>29 tuổi</td>
</tr>
<tr>
<th>Quách Thành Danh</th>
<td>Tp.Hồ Chí Minh</td>
<td>30 tuổi</td>
</tr>
</table>
</body>
</html>
Và đây là kết quả :
Các thẻ trong html
Các thẻ trong html
*** Các thuộc tính đi kèm thẻ <td></td> và <th></th> trong html:
- Thuộc tính colspan : Thuộc tính này dùng để kết hợp 2 cột thành 1 cột.
+ Cú pháp :
<table width=”50%” border=”1″ style=”margin-top:20px;” align=”center”>
<tr>
<th>Phạm Đình Hải</th>
<td colspan=”2″>Hà Nam</td>
</tr>
<tr>
<th>Lâm Chấn Huy</th>
<td>Hà Tĩnh</td>
<td>29 tuổi</td>
</tr>
</table>
- Tương tự ta có thuộc tính rowspan trong html: Thuộc tính này dùng để kết hợp 2 dòng thành 1 dòng.
+ Cú pháp :
<table width=”50%” border=”1″ style=”margin-top:20px;” align=”center”>
<tr>
<th>Phạm Đình Hải</th>
<td rowspan=”2″>Hà Nam</td>
</tr>
<tr>
<th>Lâm Chấn Huy</th>
</tr>
</table>
Hoặc các bạn có thể vào link sau để xem video học HTML & CSS tại đây : http://www.ichiase.biz/2014/08/full-video-hoc-html-css-cua-h-khtn-cuc.html
Chúng ta kết thúc bài học HTML ở đây . Và ở bài viết tiếp theo mình và các bạn xẽ cùng nhau tìm hiểu về CSS
Và ở bài cuối về HTML này mình xẽ share các bạn bản Ebook về HTML để các bạn mang về ngâm cứu và tìm hiểu rõ hơn
Link Dowload Ebook 1 : https://drive.google.com/file/d/0B__17EqajG-aRWV0allfUkVpZ2c/view?usp=sharing
Link Dowload Ebook 2 : https://drive.google.com/file/d/0B__17EqajG-aZnBvVEU0NTN5RUk/view?usp=sharingHoặc các bạn có thể vào link sau để xem video học HTML & CSS tại đây : http://www.ichiase.biz/2014/08/full-video-hoc-html-css-cua-h-khtn-cuc.html
