Tìm kiếm trên diễn đàn

Các thẻ HTML cơ bản

Tham gia : 13/08/2013
Website : Admin

Admin
Gửi vào lúc : 07/12/2017

1. HTML là gì

HTML là 1 ngôn ngữ dạng TEXT, được máy chủ web tạo ra, sau khi trình duyệt đọc từ máy chủ thì sẽ trả về giao diện web các bạn đang nhìn thấy, có ảnh, chữ , liên kết , bố cục

Làm sao để xem HTML của 1 web:

Các bạn nhấn Ctrl+u ở trình duyệt hoặc nhắp phải ở trình duyệt chọn View source ( xem mã nguồn )

screenshot_1

Chúng ta sẽ thấy các đoạn mã loằng ngoằng, việc web hiển thị đối với khách truy cập như nào phụ thuộc chủ yếu vào các mã này. Sau đây mình sẽ giới thiệu tiếp các thẻ cơ bản trong HTML. Khi làm chủ được HTML ( CSS ) bạn có thẻ làm chủ được giao diện web, nhất là các web làm bằng hệ thống của webmienphi.vn, cho phép chỉnh sửa rất nhiều HTML

2. Các thẻ cơ bản

Ngôn ngữ html được cấu tạo từ các thẻ, một thẻ thường có mở thẻ và đóng thẻ , vd <div>nội dung </div> thì <div> là bắt đầu thẻ div và </div> là đóng ( hết thẻ div )

Chúng ta bắt tay ngay vào việc viết HTML, các bạn đăng nhập quản trị và thêm box HTML vào web và thử nhập ngay nội dung các thẻ

screenshot_2

2.1. Thẻ <p>

p : paragraph hay đoạn văn, vd

Khi mình viết thế này trong HTML thì trên trình duyệt web sẽ hiện

xin chào các bạn

đặc điểm : thẻ p tạo ra một đoạn margin ( cách dòng ) với các thẻ khác, thẻ p tự động xuống dòng, vd mình viết

<p> đoạn văn 1</p><p> đoạn văn 2</p>

thì ở trang web hiện sẽ là

screenshot_4

Các bạn thấy đoạn văn 1 và đoạn văn 2 ngoài xuống dòng còn cách nhau khoảng 1 line-height, thẻ p khi chèn vào sẽ xuống dòng với các thẻ khác nên thẻ p thuộc nhóm thẻ block

2.2. Thẻ <br /> break

Thẻ này làm cho các phần HTML bị xuống dòng

VD abc </br> 123

Ở web sẽ hiển thị là

abc
123

2.3. Thẻ a

<a href="https://google.com">Truy cập vào Google</a>

Hiển thị trên trình duyệt

Truy cập vào Google

Thẻ a là thẻ liên kết cho phép người dùng click vào để ra trang mới, liên kết sẽ được đặt trong href="", còn nội dung hiển thị nằm ở trong thẻ. Thẻ liên kết được dùng ở mọi nơi trong web, như menu, ảnh...

<a title="truy cập vào google" target="_blank" href="https://google.com">Google</a>

Thẻ liên kết có thêm một số thuộc tính như title : khi di chuột hiện cái tooltip nhỏ, target : khi click mở trang mới hay thay thế trang hiện tại.

Thẻ a khi chèn vào thì không xuống dòng nên thẻ a thuộc nhóm thẻ inline, vd

<a href="https://google.com">Truy cập vào Google</a> <a href="https://facebook.com">Truy cập vào Facebook</a>

Truy cập vào Google Truy cập vào Facebook

2.4. Thẻ div

Thẻ div dùng để chia bố cục website, thẻ div tạo các khối block, đây là thẻ chúng ta dùng rất nhiều

html_div_sample

2.5. Thẻ span

Thẻ span tương tự div nhưng nó là thẻ inline, không xuống dòng

2.6. Thẻ img

là thẻ hiển thị ảnh

vd :<img alt="Tên sản phẩm" src="https://webmienphi.vn/templates/images/customer-reviews-increase.jpg" />

customer_reviews_increase

alt là đoạn mô tả cho google biết ảnh này nói về cái gì, còn src là đường dẫn vật lý của ảnh, src có thể lấy trực tiếp trong web hoặc ở ngoài, nếu lấy trực tiếp trong web bạn có thể bỏ qua phần domain, vd

src="https://webmienphi.vn/templates/images/customer-reviews-increase.jpg"

bạn có thể viết thành

src="/templates/images/customer-reviews-increase.jpg"

nhưng lấy ảnh ở web khác thì bắt buộc phải viết đầy đủ

2.7. Thẻ table

Thẻ chia bảng biểu, tr quy định dòng còn th và td quy định cột, th là cột nhưng được in đậm , viết tắt của từ table header, còn td là cột bình thường

<table width="100%" border="1">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>line1 col1</td>
<td>line1 col2</td>
<td>line2 col3</td>
</tr>
<tr>
<td>line2 col1</td>
<td>line2 col2</td>
<td>line2 col3</td>
</tr>
</table>

header1	header2	header3
line1 col1	line1 col2	line2 col3
line2 col1	line2 col2	line2 col3

Phần bảng này mình sẽ hướng dẫn chi tiết hơn trong topic khác, ngôn ngữ html hiện tại cũng ít sử dụng bản nhưng chúng ta nên biết để sử dụng khi cần.

2.8. Thẻ body

Tất cả các thẻ html hiện thị trên web đều được đưa vào trong thẻ <body></body> để trình duyệt đọc tốt hơn

2.9. Thẻ head

Thẻ head được đặt trên thẻ body, thẻ head báo cho trình duyệt những thông tin quan trọng của web như title, các thẻ meta, các file js hay css nhúng ngoài, các nội dung trong thẻ head luôn được load đầy đủ trước khi html cuối cùng của thẻ body được xử lý, vì vậy các file js của web nên được đưa vào thẻ head để web hiển thị tốt nhất. Thẻ head chỉ nhận thông tin phục vụ trình duyệt web như meta, javascript,css chứ ko hiển thị các nội dung ở head nên các bạn ko nên đưa các mã HTML vào đây. Mình thấy rất nhiều bạn dán thẻ h1 h2 vào phần html header của web là không đúng.

2.10. Thẻ html

Thẻ html chứa thẻ body và thẻ head, thẻ html cũng góp phần thông báo chuẩn html của web cho trình duyệt

(còn tiếp)

Ngân hàng Techcombank Trung tâm thẻ Hà Nội Số Tài Khoản : 13320470819018 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Vietcombank Sở Giao Dịch Hà Nội Số tài khoản: 0011003506685 Chủ tài khoản: ĐINH THỊ HƯNG GIANG	Ngân hàng Nông Nghiệp & Phát Triển Nông Thôn Việt Nam Chi nhánh Tây Hồ Số Tài Khoản : 1506201076289 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Quân Đội MB Số tài khoản: 0906200983 Chủ tài khoản: ĐINH THỊ HƯNG GIANG
Ngân hàng Đông Á Chi nhánh Hà Nội Số Tài Khoản : 0107978389 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Công Thương Việt Nam - Vietinbank Chi nhánh Ba Đình – Hà Nội Số Tài Khoản : 101006354209 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng TMCP Á Châu ACB Chi nhánh Hà Nội Số tk: 185591549 Chủ tk: Đinh Thị Hưng Giang	Công ty TNHH phần mềm NDOT Số tài khoản: 0301000342086 Ngân hàng Vietcombank - chi nhánh Hoàn Kiếm ( quý khách vui lòng chuyển thêm 10% )