Người Viết : ViKiMi Editor

Xây dựng Website từ những thứ thiết yếu không thể bỏ qua : HTML Block And Inline Elements
Trong quá trình thiết kế giao diện với HTML, bạn đã thấy nhiều cách thể hiện để có một giao diện như ý muốn. Tuy nhiên, làm thế nào để hình thành nên một bộ khung HTML? Bộ khung đó sẽ bao gồm những phần tử nào? Cách sử dụng cơ bản nhất ra sao, thì đấy chính là một câu hỏi dành cho nhiều lập trình viên. Bộ khung đó được xây dựng cách cơ bản như thế nào?
Bởi vì tất cả các phần tử của HTML khi trải qua thì đều nói đến việc xây dựng một Website mà bạn muốn có. Nên để có cách nhìn tổng quan thì trong phần này sẽ đề cập thứ trọng yếu nhất!
+ Bạn cũng biết tất cả phần tử HTML sẽ góp phần tạo nên giao diện.
+ Nhưng Chúng ta sẽ chỉ quan tâm đến những thứ Cơ Bản mà ban đầu ai cũng cần đến nó.
Những Thứ Được Đề Cập Đến :
+ Phần Tử Khối HTML
+ Các Phần Tử Nội Tuyến HTML
A ] Vậy Sự Khác Biệt Giữa 2 Loại Phần Tử Này Là Gì :
+ Phần tử khối luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau phần tử.
Phần tử khối luôn chiếm toàn bộ chiều rộng có sẵn (kéo dài sang trái và phải hết mức có thể).
+ Phần tử nội tuyến sẽ không bắt đầu trên một dòng mới.
Phần tử nội tuyến chỉ chiếm nhiều chiều rộng nếu cần thiết.
Do sự khác biệt trên mà mục đích sử dụng các phần tử này cũng dễ dàng được thiêt lập. Đem lại cho chúng ta cách thiết kế dễ hiểu như sau :
+ Phần tử khối thường được sử dụng làm vùng chứa cho các phần tử HTML khác.
+ Phần tử nội tuyến thường nằm bên trong các vùng chứa.
Từ đó thì các phần tử nội tuyến thường nằm bên trong các phần tử khối. Và quy luật này luôn luôn được mọi người sử dụng khi thiết kế.
B ] NHỮNG PHẦN TỬ KHỐI HTML
1 . Thẻ <address>
Thẻ <address> xác định thông tin liên hệ của tác giả/chủ sở hữu tài liệu hoặc bài viết.
Thông tin liên hệ có thể là địa chỉ email, URL, địa chỉ thực, số điện thoại, địa chỉ mạng xã hội, v.v.
2 . Thẻ <article>
Thẻ <article> chỉ định nội dung độc lập, khép kín.
Một bài viết phải có ý nghĩa riêng và có thể phân phối nó một cách độc lập với phần còn lại của trang web.
Sử dụng phần tử <article> cho:
+ Bài đăng trên diễn đàn
+ Bài viết trên blog
+ Câu chuyện tin tức
Example :
<body>
<h1> Phần Tử Article </h1>
<article>
<header class="p_header">
<h2> Nội Dung Độc Lập Thứ 1 </h2>
<p> Các thông tin giới thiệu 1 </p>
</header>
<div class="p_content">
<h2> Nội Dung Độc Lập Thứ 1 </h2>
<p> Một bài viết phải có ý nghĩa riêng và có thể phân phối nó một cách độc lập với phần còn lại của trang web! </p>
</div>
<footer class="p_footer">
<p>Tác Giá: Nguyễn A<br>
<a href="mailto:a@example.com">anguyen@weban.com</a></p>
</footer>
</article>
<article>
<header class="p_header">
<h2> Nội Dung Độc Lập Thứ 2 </h2>
<p> Các thông tin giới thiệu 2 </p>
</header>
<div class="p_content">
<p> Một bài viết phải có ý nghĩa riêng và có thể phân phối nó một cách độc lập với phần còn lại của trang web! </p>
</div>
<footer class="p_footer">
<p>Tác Giá: Nguyễn B<br>
<a href="mailto:a@example.com">bnguyen@webbn.com</a></p>
</footer>
</article>
</body>
3 . Thẻ <aside>
Thẻ <aside> xác định một số nội dung ngoài nội dung chính.
Nội dung <aside> thường được đặt như một Sidebar bên trong một tài liệu.
Example :
<body>
<h1>Phần Tử Aside</h1>
<p>Nội dung chính : Nguyễn A là một nhà giáo tại DH Tây Nguyên!</p>
<aside>
<h4>Nội dung liên quan tới nội chính</h4>
<p>Nguyễn A : Thích đua xe Cairo</p>
</aside>
</body>
4 . Thẻ <blockquote>
Thẻ <blockquote> chỉ định một phần được trích dẫn từ nguồn khác.
5 . Thẻ <canvas>
Thẻ <canvas> được sử dụng để vẽ đồ họa một cách nhanh chóng thông qua tập lệnh (thường là JavaScript).
6 . Thẻ <dd>
Thẻ <dd> được sử dụng để mô tả một thuật ngữ/tên trong danh sách mô tả.
7 . Thẻ <div>
Thẻ <div> xác định một phần hoặc một phần trong tài liệu HTML.
Thẻ <div> được sử dụng làm vùng chứa các phần tử HTML – sau đó được tạo kiểu bằng CSS hoặc được xử lý bằng JavaScript.
Thẻ <div> có thể dễ dàng được tạo kiểu bằng cách sử dụng thuộc tính class hoặc id.
Example :
<body>
<h1>Phần Tử Div</h1>
<div class="myDiv">
<h2>Đây là Phần Tử Div 1</h2>
<p>Đây là các nội dung trong Div 1.</p>
</div>
<p>Đây là văn bản nằm ngoài Div.</p>
</body>
8 . Thẻ <dl>
Thẻ <dl> xác định danh sách mô tả.
Thẻ <dl> được sử dụng cùng với <dt> (xác định thuật ngữ/tên) và <dd> (mô tả từng thuật ngữ/tên).
9 . Thẻ <dt>
Thẻ <dt> xác định một thuật ngữ/tên trong danh sách mô tả.
10 . Thẻ <fieldset>
Thẻ <fieldset> được sử dụng để nhóm các thành phần liên quan trong một biểu mẫu.
Thẻ <fieldset> tạo một hộp bao quanh các phần tử liên quan.
Example :
<form action="/action_page.php">
<fieldset>
<legend>Personalia / Thông Tin Nhân Viên :</legend>
<label for="fname">Tên :</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Họ Đệm :</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Sinh Nhật :</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
11 . Thẻ <figcaption>
Thẻ <figcaption> xác định chú thích cho phần tử <figure>.
Phần tử <figcaption> có thể được đặt làm phần tử con đầu tiên hoặc cuối cùng của phần tử <figure>.
Example :
<body>
<h1> Phần Tử figure & figcaption !</h1>
<figure>
<img src="trulli.jpg" alt="Trulli images" style="width:100%">
<figcaption>No.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
12 . Thẻ <figure>
Thẻ <figure> chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.
Mặc dù nội dung của phần tử <figure> có liên quan đến luồng chính nhưng vị trí của nó độc lập với luồng chính và nếu bị loại bỏ thì nó sẽ không ảnh hưởng đến luồng của tài liệu.
Example :
<body>
<h1> Phần Tử figure & figcaption !</h1>
<figure>
<img src="trulli.jpg" alt="Trulli images" style="width:100%">
<figcaption>No.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
13 . Thẻ <footer>
Thẻ <footer> xác định chân trang cho tài liệu hoặc Section.
Phần tử <footer> thường chứa:
+ thông tin tác giả
+ Thông tin bản quyền
+ thông tin liên lạc
+ sơ đồ trang web
+ Liên kết quay lại đầu trang
+ tài liệu liên quan
Bạn có thể có nhiều phần tử <footer> trong một Document.
14 . Thẻ <form>
Thẻ <form> được sử dụng để tạo biểu mẫu HTML cho người dùng nhập vào.
15 . <h1>-<h6>
Các thẻ <h1> đến <h6> được sử dụng để xác định các tiêu đề HTML.
16 . <header>
Phần tử <header> đại diện cho một vùng chứa nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng.
Phần tử <header> thường chứa:
+ một hoặc nhiều thành phần tiêu đề (<h1> – <h6>)
+ logo hoặc biểu tượng
+ thông tin tác giả
Lưu ý: Bạn có thể có nhiều phần tử <header> trong một tài liệu HTML. Tuy nhiên, <header> không thể được đặt trong phần tử <footer>, <address> hoặc phần tử <header> khác.
Example : Có thể xem thêm tại Article
<article>
<header>
<h1>Đây là Phần Tử Header của 1 bài Báo</h1>
<p>Bài viết by John Coe</p>
<p>Ngày tháng Năm , so on</p>
</header>
<p>Nội dung bài báo....</p>
</article>
17 . Thẻ <hr>
Thẻ <hr> xác định điểm ngắt theo chủ đề trong trang HTML (ví dụ: chuyển chủ đề).
18 . Thẻ <li>
Thẻ <li> xác định một mục danh sách.
19 . Thẻ <main>
Thẻ <main> chỉ định nội dung chính của tài liệu.
Nội dung bên trong phần tử <main> phải là duy nhất cho tài liệu. Nó không được chứa bất kỳ nội dung nào được lặp lại trên các tài liệu như thanh bên, liên kết điều hướng, thông tin bản quyền, logo trang web và biểu mẫu tìm kiếm.
Lưu ý: Không được có nhiều hơn một phần tử <main> trong một tài liệu. Phần tử <main> KHÔNG được là hậu duệ của phần tử <article>, <aside>, <footer>, <header> hoặc <nav>.
Example :
<body>
<h1>Phần Tử Main</h1>
<main>
<h1>Những Tin Tức Chính Trong Ngày</h1>
<p>Tin Tức Lũ Lụt, Thiên Tai, Hoả Hoạn.</p>
<article>
<h2>Cháy Chung Cư Mini Hà Nội</h2>
<p>Đã xảy ra đám cháy gây nhiều thiệt hại người và của!</p>
</article>
<article>
<h2>Lũ Lụt Tại Hà Tĩnh</h2>
<p>Thiên tai Lũ Lụt Tại Hà Tĩnh đã xảy ra thang 11</p>
</article>
</main>
</body>
20 . Thẻ <nav>
Thẻ <nav> xác định một tập hợp các liên kết điều hướng như là Menu.
Phần tử <nav> chỉ dành cho các khối liên kết điều hướng chính.
21 . Thẻ <noscript>
Thẻ <noscript> xác định nội dung thay thế sẽ được hiển thị cho người dùng khi trình duyệt của họ không hỗ trợ script.
22 . Thẻ <ol>
Thẻ <ol> xác định danh sách có thứ tự. Một danh sách có thứ tự có thể là số hoặc chữ cái.
23 . Thẻ <p>
Thẻ <p> xác định một đoạn văn.
Trình duyệt tự động thêm một dòng trống trước và sau mỗi phần tử <p>.
24 . Thẻ <pre>
Thẻ <pre> xác định văn bản được định dạng sẵn.
Văn bản trong phần tử <pre> được hiển thị bằng phông chữ có chiều rộng cố định và văn bản giữ nguyên cả dấu cách và ngắt dòng. Văn bản sẽ được hiển thị chính xác như được viết, chẳng hạn như Source Code…
25 . Thẻ <section>
Thẻ <section> xác định một phần trong tài liệu.
Example :
<body>
<h1>Phần Tử Section</h1>
<section>
<header>
<h2> WWF History </h2>
</header>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
<footer>
<p> From : WWF </p>
</footer>
</section>
<section>
<h2> WWF's Symbol </h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
26 . Thẻ <table>
Thẻ <table> xác định bảng HTML.
27 . Thẻ <tfoot>
Thẻ <tfoot> được sử dụng để nhóm nội dung chân trang trong bảng HTML.
28 . Thẻ <ul>
Thẻ <ul> xác định danh sách không có thứ tự (có dấu đầu dòng).
29 . Thẻ <video>
Thẻ <video> được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như đoạn phim hoặc các luồng video khác.
Thẻ <video> chứa một hoặc nhiều thẻ <source> với các nguồn video khác nhau. Trình duyệt sẽ chọn nguồn đầu tiên nó hỗ trợ.
Example :
<body>
<h1>Phần Tử Video</h1>
<video width="320" height="240" controls>
<source src="nuture_movie_1.mp4" type="video/mp4">
<source src="nuture_movie_2.ogg" type="video/ogg">
TRình Duyệt này không hỗ trợ VIDEO.
</video>
</body>
C ] NHỮNG PHẦN NỘI TUYẾN HTML
Chúng ta có các phân tử nội tuyến sau đây :
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Cách sử dụng các phần tử nội tuyên này rất đơn giản. Bạn có thể đặt chúng vào trong các vùng chứa và luôn nhớ rằng phần tử nội tuyến không bắt đầu trên một dòng mới & Phần tử nội tuyến chỉ chiếm nhiều chiều rộng nếu cần thiết.
Việc sử dụng kết hợp giữa phần tử khối và phần tử nội tuyến rất dễ dàng cũng như đem lại hiệu quả cao khi thiết kế một Website Cá Nhân & Doanh Nghiệp.
+ Một điều quan trọng nữa đó là Bạn hãy kết hợp với CSS & JavaScript để đem lại một bố cục giao diện Website hoàn thiện nhất.