Bài 09: HTML và CSS từ Zero đến Hero

1: Các phần tử inline

Ở những phần trước đã tìm hiểu cách hiển thị các khối dữ liệu lớn (chunk), các phần tử kiểu khối (block). Phần này sẽ tiếp tục tìm hiểu cách hiển thị các phần nội dung nhỏ hơn, ví dụ các từ, cụm từ (phrase), hoặc câu. Các phần tử sẽ tìm hiểu ở đây đều có kiểu hiển thị nội tuyến, trong hàng (inline).

Bảng sau đây liệt kê các phần tử inline và chức năng của chúng,

*Phần tử (thẻ)*	*Mô tả*
<a>	Tạo siêu liên kết (hyperlink). Ví dụ, <a href="https://stackoverflow.com/">Stack Overflow</a>
<abbr>	Tạo chú thích cho các chữ viết tắt (abbreviation). Phần tử này cung cấp thông tin cho trình duyệt, máy tìm kiếm, hệ thống dịch. Nội dung chú thích chính là giá trị của thuộc tính title. Ví dụ, <p><abbr title="World Health Organization">WHO</abbr> được thành lập năm 1948</p>
<b>	Dùng để tô đậm văn bản (bold). Ví dụ, <p>Chữ <b>này</b> sẽ được tô đậm</p>
<bdi>	Làm cho hướng (direction) của văn bản sẽ ngược lại với phần tử bao ngoài nó. Phần tử này hữu ích khi không xác định được hướng của văn bản do người dùng tạo ra. bdi là viết tắt của Bi-Directional Isolation.
<bdo>	Dùng để thay đổi hướng (direction) của văn bản (viết từ phải sang trái, hoặc viết từ trái sang phải). bdo là viết tắt của Bi-Directional Override. Phần tử này được sử dụng trong các trang web đa ngôn ngữ, khi có ngôn ngữ được viết theo hướng từ phải sang trái. Ví dụ, <p>Hàng này được viết từ trái sang phải</p> <p><bdo dir="rtl">Hàng này được viết từ phải sang trái</bdo></p>
<br>	Xuống hàng (br – break)
<cite>	Trong HTML 4.0.1, phần tử cite được dùng để chứa nội dung trích dẫn. Trong HTML 5, phần tử cite được dùng để chứa tên của một sản phẩm (title of a work), như tên của một cuốn sách, một bộ phim, một bức tranh…v.v. Ví dụ, <p><cite>Scream</cite> là bức tranh Edward Munch vẽ vào năm 1893</p>
<code>	Dùng để chứa phần mã nguồn của một ngôn ngữ lập trình. Mã nguồn sẽ được hiển thị ở dạng phông chữ monospaced (các kí tự có độ rộng bằng nhau). Ví dụ, <p>Khai báo biến namSinh <code>int namSinh;</code> ở phần đầu chương trình</p>
<del>	Dùng để định nghĩa một văn bản bị xóa khỏi văn bản gốc (deleted). Về mặt hình thức, văn bản bị xóa cũng được gạch ngang như khi sử dụng phần tử strike của HTML4.01, tuy nhiên hai phần tử này khác nhau về ý nghĩa. HTML5 sử dụng phần tử del để thay thế phần tử strike. Ví dụ, <p>Cho tôi một ly <del>ca cao</del> <ins>trà</ins></p>
<dfn>	Dùng để định nghĩa một thuật ngữ khi nó xuất hiện lần đầu trong tài liệu (definition). Lưu ý: phần tử cha gần nhất phải chứa định nghĩa/giải thích cho thuật ngữ trong phần tử dfn. Phần tử p trong ví dụ dưới đây chính là phần tử cha gần nhất. <p><dfn>HTML</dfn> là ngôn ngữ đánh dấu siêu văn bản</p>
<em>	Dùng để tạo ra văn bản mang tính nhấn mạnh (emphasized). Ví dụ, <p><em>Cụm từ này</em> sẽ được nhấn mạnh</p>
<i>	Dùng để in nghiêng văn bản (italic). Ví dụ, <p>Chữ <i>này</i> sẽ được in nghiêng</p>
<ins>	Dùng để định nghĩa nội dung được thêm vào văn bản gốc (inserted). Về mặt hình thức, nội dung thêm vào cũng được gạch chân như khi sử dụng phần tử u, tuy nhiên, hai phần tử này khác nhau về ý nghĩa. Ví dụ, <p>Cho tôi một ly <del>ca cao</del> <ins>trà</ins></p>
<kbd>	Dùng để hiển thị nội dung người dùng nhập từ bàn phím (keyboard). Ví dụ, <p>Nhập địa chỉ IP: <kbd>192.168.1.1</kbd></p>
<mark>	Dùng để tô màu văn bản (marked). Ví dụ, <p><mark>Cụm từ này</mark> sẽ được tô vàng</p>
<q>	Dùng để chứa nội dung trích dẫn (ngắn), thường là một cụm từ. Khi hiển thị, trình duyệt sẽ bao nội dung trích dẫn bằng dấu nháy kép (“”). q là viết tắt của quote. Ví dụ, <p>Theo Wiki: <q>HTML là ngôn ngữ đánh dấu siêu văn bản</q></p>
<s>	Dùng để đánh dấu một nội dung không còn đúng nữa. Ví dụ, <p><s>Cu Tèo thích mặc áo xanh</s></p> <p>Hôm nay, Cu Tèo thích mặc áo đỏ</p>
<samp>	Dùng để định dạng kết quả do máy tính xuất ra (sample). Ví dụ, <p>Chương trình sẽ xuất ra kết quả là: <samp>xin chào</samp></p>
<small>	Dùng để viết văn bản nhỏ hơn bình thường. Ví dụ, <p>Chữ <small>này</small> sẽ được viết nhỏ hơn bình thường </p>
<span>	Dùng để nhóm một phần của câu/đoạn. Chữ span có nghĩa là khoảng nhỏ. Ví dụ, <p>Chỉ có chữ <span style="color:red">này</span> có màu đỏ thôi</p>
<strong>	Dùng để tạo ra văn bản có tính chất quan trọng (strong). Ví dụ, <p>Đây là nội dung <strong>quan trọng</strong></p>
<sub>	Dùng để viết chữ hoặc số thấp hơn dòng chữ bình thường (subscript). Ví dụ, <p>Số 2 sẽ được viết thấp hơn dòng chữ bình thường H<sub>2</sub>O</p>
<sup>	Dùng để viết chữ hoặc số cao hơn dòng chữ bình thường (superscript). Ví dụ, <p>Số 2 sẽ được viết cao hơn dòng chữ bình thường x<sup>2</sup></p>
<time>	Dùng để chứa thông tin về thời gian, giúp máy có thể đọc được. Ví dụ, <p>Giờ mở cửa là: <time>10:00</time> </p>
<u>	Được sử dụng để gạch chân văn bản (underline). Ví dụ, <p>Chữ <u>này</u> sẽ được gạch chân</p>
<var>	Được dùng để định nghĩa một biến (variable), thường được sử dụng cùng với thẻ <pre> và thẻ <code>. Ví dụ, <p><code>document.write("<var>user-name</var>")</code></p>
<wbr>	Được dùng để ngắt dòng có kiểm soát. Ví dụ, có một từ dài, nếu không muốn trình duyệt ngắt dòng một cách ngẫu nhiên theo kích thước màn hình, thì sử dụng phần tử này. Ví dụ, <p>Đây là một từ rất dàidàidàidàidàidàidàidàidàidài dàidàidàidàidàidàidàidàidàidàidàidàidàidàidàidàidàidàidàidài<wbr>nósẽbịngắttại<wbr>cácvịtrícụthểkhicửasổtrìnhduyệtthayđổikíchthước.</p>

Exercise 5-2. Identifying inline elements (p98)

2.2.6 Div và span

Mặc dù HTML có rất nhiều loại phần tử khác nhau, tuy nhiên, thực tế vốn đa dạng, do vậy sẽ có nhiều trường hợp không thể tìm được phần tử HTML thực sự có ngữ nghĩa để biểu diễn được nội dung. Để xử lý tình huống này, HTML đưa ra hai phần tử trung tính (generic element) là div và span.

Phần tử trung tính là phần tử không có ngữ nghĩa cụ thể, tuy vậy, ngữ nghĩa của các phần tử này sẽ được xác định nhờ hai thuộc tính (attribute) đi kèm là class và id. Đây là ưu điểm rất lớn của phần tử trung tính, nó cho phép người lập trình có thể tạo ra rất nhiều các phần tử khác nhau để biểu diễn dữ liệu, định dạng và xử lý tương tác.

Phần tử div

Vì div là phần tử trung tính nên dùng nó để nhóm cái gì cũng được. Div là viết tắt của division (phân chia). Ngữ nghĩa của mỗi phần tử div sẽ được xác định bằng giá trị của thuộc tính id hoặc class đi kèm. Nhờ thuộc tính id và class, người lập trình có thể thực hiện định dạng (bằng CSS) và xử lý (bằng JavaScript) các phần tử div một cách dễ dàng. Phần tử div được hiển thị theo kiểu block.

Ví dụ, dùng div để nhóm nội dung,

</div>

Ví dụ, dùng div để tạo bố cục của một trang,

</div>

</div>

Lưu ý, trong mọi trường hợp nên ưu tiên sử dụng các phần tử có ngữ nghĩa trước, nếu không có thì mới dùng đến phần tử div.

Phần tử span

Cũng có chức năng tương tự như div, chỉ khác là div là một phần tử kiểu khối, trong khi span là phần tử kiểu nội tuyến. Nghĩa là, nếu muốn nhóm những thứ như một từ, một cụm từ hoặc một đối tượng nội tuyến khác thì sử dụng phần tử trung tính span.

Ví dụ, để định dạng các số điện thoại, sử dụng phần tử span để chứa số điện thoại, gán cho phần tử span này một cái tên, ví dụ là tel (bằng thuộc tính class), vậy là có thể định dạng các số điện thoại bằng CSS và lập trình tương tác bằng JavaScript.

<ul>

</ul>

Thuộc tính id và class

Nhắc lại một chút, thuộc tính (attribute) là thành phần bổ sung của mỗi phần tử HTML. Thuộc tính được dùng để thay đổi chức năng mặc định của phần tử hoặc là một thành tố bắt buộc phải có, để một phần tử có thể thực hiện đúng chức năng.

Ở đây, hai thuộc tính id và class sẽ được dùng để thay đổi chức năng mặc định của phần tử. Vậy thay đổi bằng cách nào? Id và class được gọi là các thuộc tính phổ dụng (standard attributes, global attributes), nghĩa là nó có thể gắn vào hầu hết các phần tử HTML. Id và class được dùng để định danh (identification), để xác định tính duy nhất của một phần tử (id) hoặc một nhóm phần tử (class). Khi phần tử hoặc nhóm phần tử đã được xác định rồi thì người lập trình có thể thực hiện định dạng (bằng CSS) và xử lý nó (bằng JavaScript).

Để xác định tính duy nhất của một phần tử thì sử dụng thuộc tính id. Id viết tắt của identify, nghĩa là định danh.

Để xác định một nhóm các phần tử thì sử dụng thuộc tính class. Class là viết tắt của classify, nghĩa là phân lớp, phân nhóm.

Vì là thuộc tính, nên id và class có cú pháp là: id=“gia-tri” và class=“gia-tri”. Trong đó gia-tri chính là tên mà người lập trình muốn đặt cho một phần tử hoặc một nhóm phần tử.

Giá trị của id và class (quy ước đăt tên)

- Phải bắt đầu bằng kí tự (a-z hoặc A-Z) hoặc dấu gạch dưới ( _ ) (underline)

- Các kí tự tiếp theo có thể là kí tự, số, dấu gạch nối ( - ) (hyphen), dấu gạch dưới, dấu hai chấm (colons), dấu chấm (periods)

- Không chứa kí tự đặc biệt

- Nên chọn một thói quen đặt tên thống nhất, ví dụ: sử dụng chữ thường , nếu tên gồm nhiều từ thì dùng dấu gạch nối để nối các từ, như: id=“bang-bao-gia”, class=“bai-viet”

Ví dụ, trang web được chia thành ba vùng duy nhất (main, news, links), do vậy có thể dùng phần tử div để chia, và đặt tên cho mỗi vùng bằng thuộc tính id,

</div>

</div>

</div>

Với HTML5, có thể sử dụng các phần tử có ngữ nghĩa tốt hơn để thay phần tử trung tính div, ví dụ,

</section>

</section>

</aside>

Ví dụ, để thống nhất việc định dạng cho tên của các thủ đô, sẽ sử dụng thuộc tính class để đặt tên chung cho nhóm thủ đô là city,

<h2 class="city">London</h2>

<p>London là thủ đô của Anh.</p>

<h2 class="city">Paris</h2>

<p>Paris là thủ đô của Pháp.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo là thủ đô của Nhật bản.</p

Lưu ý: một phần tử có thể vừa chứa id vừa chứa class, và một phần tử có thể chứa nhiều class. Ví dụ,

</section>

</section>

</aside>

Bài 09: HTML và CSS từ Zero đến Hero

1: Các phần tử inline

2.2.6 Div và span

Người đăng: codersulution

Đăng nhận xét

0 Nhận xét

Chuyên Mục 🦊 adoperator

Chuyên Mục 🦊 ggads

Giới thiệu về tôi

Facebook

Most Popular