Nếu bạn là người mưới bắt đầu thì bộ 10 thẻ html tôi chia sẻ trong bài này giúp bạn tiếp cận đến những phần quan trọng trong xây dựng giao diện website.
#1. Heading
Để xây dựng tiêu đề trong các website chúng ta có thể sử dụng các thẻ h1, h2, h3, h4, h5, h6. Thẻ h1 đại diện tho tiêu đề quan trọng nhất và giảm dần đến h6.
Cú pháp sử dụng:
<h1>Thẻ tiêu đề h1</h1>
<h2>Thẻ tiêu đề h2</h2>
<h3>Thẻ tiêu đề h3</h3>
<h4>Thẻ tiêu đề h4</h4>
<h5>Thẻ tiêu đề h5</h5>
<h6>Thẻ tiêu đề h6</h6>
#2. Paragraph
Để định nghĩa một đoạn văn trong website bạn sử dụng thẻ <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque et libero repellat similique. Aperiam assumenda esse fugit nihil ullam
</p>
#3. Line break
<br> là thẻ xử lý trong trường hợp cần xuống dòng ở một vị trí nào đó. Ví dụ việc ngắt dòng trong đoạn văn dài.
Cách sử dụng
<p>HTML CSS 21 NGÀY<br>PHP MASTER<br>BOOTSTRAP AZ</p>
Kết quả
HTML CSS 21 NGÀY
PHP MASTER
BOOTSTRAP AZ#4. Images
Hình ảnh là một phần không thể thiếu trong website, chúng ta sử dụng thẻ <img> để thêm hình ảnh.
<img src="images/picture_1.png" alt="Mô tả hình ảnh">
Trong đó:
src: Thuộc tính khai báo đường dẫn đến file hình ảnh cần hiển thị.alt: Thuộc tính khai báo mô tả nội dung hình ảnh
#5. Link
Thẻ <a> là công cụ giúp chúng ta tạo ra mạng lưới liên kết của website.
Ví dụ:
<a href="http://untiop.vn" target="_blank">Unitop.vn</a>
Trong đó:
href: Thuộc tính giúp khai báo đường dẫn của trang đíchtarget: Thuộc tính cách hiển thị trang đích, trong ví dụ trên “_blank” là hiển thị ở một tab mới của trình duyệt.
#6. List
Để hiển thị dữ liệu dạng danh sách trong html cung cấp 2 loại
<ul>Danh sách không có thứ tự<ol>Danh sách có thứ tự
Thẻ <ul>
<ul>
<li>HTMLC SSS</li>
<li>JQUERY</li>
<li>RESPONSIVE</li>
<li>PHP</li>
<li>LARAVEL</li>
</ul>
Thẻ <ol>
<ol>
<li>Viết mục tiêu trong ngày</li>
<li>Reviews bài thực hành học viên Unitop</li>
<li>Ghi hình khóa học</li>
</ol>
#7. div
Trong một website thực tế cấu trúc website rất phức tạp chính vì vậy thẻ div chính là công cụ giúp chúng ta có thể phân chia website thành những phần khác nhau giúp dễ dàng css.
<div id="wrapper">
<div id="header">Heaader</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Div thường đi kèm với các nhãn thuộc tính class, id. Class là nhãn chứa các thuộc tính dùng chung, id dùng để định danh các phần trong website.
#wrapper: Id khối bao quanh toàn bộ website#header: id khối bao quanh header website#content: id khối bao quanh nội dung website#footer: id khối bao quanh nội dung chân website – footer
#8. header(html5)
<header> đây là thẻ html5 giúp khai báo những khối tiêu đề trong website. Khi dùng thẻ này sẽ thay thế cho div có id #header.
<header>Phần header website</header>
#9. footer(html5)
<header> đây là thẻ html5 giúp khai báo những khối footer trong website. Khi dùng thẻ này sẽ thay thế cho div có id #footer.
Cấu trúc website có sử dụng <header>, <footer>
<div id="wrapper">
<header>Header</header>
<div id="content">Content</div>
<footer>Footer</footer>
</div>
#10. Form
Form là một công cụ giúp chúng ta tạo ta những form nhập thông tin như text, mật khẩu, hộp chọn… để giúp người dùng tương tác với hệ thống.
Ví dụ html của form Login
<form action="">
Username: <input type="text" name="username"><br>
Mật khẩu: <input type="password" name="password"><br>
</form>
Kết luận:
Qua bài này tôi đã chia sẻ đến bạn 10 thẻ html quan trọng nhất, thường xuyên sử dụng trong xây dựng cấu trúc giao diện website. Ngay bây giờ bạn nên thực hành nó để nắm chắc những thẻ quan trọng này.
***Ngoài ra, nếu bạn muốn học chuyên sâu đi làm được kèm qua nhóm kín hãy xem ngay chương trình HTML CSS 21 NGÀY tại Unitop.vn
Phan Văn Cương founder unitop.vn
