Bài 2 : HTML các thẻ cơ bản cách sử dụng

Bài trước chúng ta đã cùng nhau tìm hiểu cơ bản về HTML và CSS rồi. Và tiếp theo ở bài này mình và bạn cùng nhau tìm hiểu sâu hơn về HTML.
Bài học hôm nay chúng ta xẽ tìm hiểu về các Tag/ Thẻ trong HTML. Giờ thì chúng ta bắt đầu nào?

Phần 1 : Cách khai báo thẻ

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ẻ>
Chỉ cần thêm dấu / trước tên thể là được
VD: </html>; </head>; </body>

Phần 2 : Các thẻ trong HTML - Cách dùng - Ý Nghĩa

1. Thẻ siêu liên kết : <a> </a>

Dùng để khai báo 1 liên kết

Cách sử dụng: khai báo trong cặp thẻ <a></a>

Ví dụ
<a href = "https://blogkoiem.blogspot.com/" title="Blog KoiEM">Học HTML </a>

Hiển thị trên trình duyệt
Học HTML
Ý Nghĩa :

+ href : địa chỉ liên kết .

+ title : phần mô tả cho liên kết
+ Học HTML : Phần văn bản hiển thị cho liên kết.
Có 3 loại liên kết. Ở ví dụ trên là liên kết tới 1 địa chỉ website

- Liên kết tới 1 mail : <p>Email: <a href="mailto:ichiase360@gmail.com">ichiase360@gmail.com</a></p>

Hiển thị trên trình duyệt

Email: ichiase360@gmail.com

- Liên kết tới 1 vị trí trong website : <p><a href="#content">Liên kết tới id content</a></p>

Hiển thị trên trình duyệt
Liên kết tới id content

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><i> Học marketing online </i></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>

<!—-Đây chính là văn bản html–>

</body>

</html>

5. Thẻ table (tạo bảng) trong html

Trước khi tìm hiểu thì mình xẽ đưa ra một ví dụ rồi mình xẽ giải thích từng phần

<!DOCTYPE html>

<html>

<head>

<title>Blog KoiEm</title>

</head>

<body>

<tr>

<td>Nguyễn Văn Tuấn</td>
<td>Hà Nội</td>

</tr>

<tr>

</tr>

<tr>

<td>Quách Thành Danh</td>

</tr>

<tr>

<td>Thanh Hóa</td>

</tr>

<tr>

<td>Khánh Đơn</td>

</tr>

</table>

</body>

</html>

Các bạn hãy thử viết y theo mình save lại xem kết quả nhé!
Giải thích cho từng cặp thẻ đâ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é :

Ví dụ :

<!DOCTYPE html>

<html>

<head>

<title>Nguyễn Văn Tuấn</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<th>Quách Thành Danh</th>

</tr>

</table>

</body>

</html>

Và đây là kết quả :

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 :

<tr>

</tr>

<tr>

</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 :

<tr>

</tr>

<tr>

</tr>

</table>

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=sharing
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

KòiEm Blog - Đơn Giản Là Chia Sẻ

Dịch Vụ Thiết Kế Web Blogspot

Jan 24, 2015