Langbiang: Web front-end (9) - HTML - Một số phần tử HTML khác

Bài trước: Web front-end (8) - HTML - Phần mềm lập trình web

-------

1.1 Một số phần tử HTML khác

1.1.1 Các phần tử inline

Ở những phần trước, bạn đã tìm hiểu cách hiển thị các khối dữ liệu lớn (chunk), gồm các phần tử tạo bố cục, và các phần tử kiểu khối (block). Phần này, bạn sẽ tiếp tục tìm hiểu cách hiển thị các nội dung nhỏ hơn, bằng các phần tử có kiểu hiển thị nội tuyến, trong hàng (inline).

Bảng sau liệt kê các phần tử 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>	Thêm tính trực quan, gây chú ý tới dữ liệu (bôi đậm), ví dụ các từ khóa <p>C++ là ngôn ngữ lập trình kiểu <b>biên dịch</b></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>	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 sẽ được gạch ngang. 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 cần nhấn mạnh khi phát âm (emphasized). Ví dụ, <p>You <em>have</em> to hurry up!</p>
<i>	Xác định phần văn bản có giọng đọc hoặc tâm trạng khác so với văn bản xung quanh, chỉ ra một thuật ngữ, một đoạn trích từ ngôn ngữ khác. Nội dung trong thẻ này thường được in nghiêng <p><i>HMTL</i>là ngôn ngữ đánh dấu siêu văn bản</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 sẽ được gạch chân. 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 sẽ nhập từ bàn phím (keyboard). Ví dụ, <p>Nhập địa chỉ IP: <kbd>192.168.1.1</kbd></p>
<mark>	Tạo tính trực quan cho văn bản có liên quan. Văn bản sẽ được tô màu. Ví dụ, <p><mark>Cụm từ này</mark> đã được nhắc đến ở phía trên<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 datetime="22:00">10:00p.m</time> </p>
<u>	Báo văn bản bị sai chính tả, phần văn bản sẽ được gạch chân (underline). Ví dụ, <p>Chữ <u>này</u>bị sai chính tả</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>

1.1.2 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 bạn có thể dùng nó để nhóm các phần tử kiểu inline và block khác, mà không cần quan tâm tới khía cạnh ngữ nghĩa. Div là viết tắt của division (phân chia, phân vùng). 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, bạn có thể thực hiện định dạng phần tử div bằng CSS, xử lý tương tác bằng JavaScript 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 khi viết mã HTML, nếu không thể chọn được phần tử phù hợp, 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. Span nghĩa là một gang tay, hiểu là một đoạn nhỏ.

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>

<li>Khoai: <span class="tel">0909.3509</span></li>

</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ý tương tác với 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

– Bạn nên định hình một thói quen đặt tên cho riêng mình. 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; một phần tử cũng có thể chứa nhiều class. Ví dụ,

</section>

</section>

</aside>

1.1.3 Cải thiện khả năng tiếp cận với ARIA

Người sử dụng web rất đa dạng, thông thường họ hay đọc/xem nội dung, dùng chuột để tương tác với giao diện, chuyển mục, chuyển trang. Tuy nhiên, họ cũng có thể đang sử dụng phần mềm đọc web (screen reader), sử dụng bàn phím, ra lệnh bằng giọng nói thay vì dùng chuột.

Với một tài liệu HTML, con người có thể đọc mã nguồn là hiểu được ý nghĩa của chúng, như là tiêu đề (title), đề mục (heading), danh sách, hình ảnh. Tuy nhiên, với các thiết bị hỗ trợ (assistive divice) thì không dễ, đặc biệt với các phần tử trung tính như div và span. Ngoài ra, với việc phát triển ứng dụng web dùng nhiều JavaScript và AJAX thì việc nhận biết ý nghĩa, trạng thái của các phần tử càng khó khăn hơn.

ARIA (Accessible Rich Internet Applications) là một bộ các thuộc tính, được sử dụng để hỗ trợ quá trình điều hướng, tương tác với trang web.

ARIA định nghĩa các chức năng (role), trạng thái (state) và thuộc tính (property), để lập trình viên có thể thêm vào các phần tử hoặc đoạn mã lập trình, giúp mã nguồn giàu thông tin hơn.

Role

Thuộc tính role cho biết chức năng và mục đích của một phần tử, ví dụ: alert, button, dialog, slider và menubar.

Ví dụ, giả sử bạn dùng ul, li kết hợp với CSS để làm một danh sách các thanh chọn (toolbar). Tuy nhiên, nếu chỉ nhìn vào mã nguồn thì rất khó nhận biết đó là thanh chọn. Để dễ dàng nhận ra, bạn chỉ việc thêm thuộc tính role= “toolbar” vào mã nguồn như sau:

</ul>

Ví dụ, đoạn mã sau cho biết div chứa một thông báo,

<div id="status" role="alert">You are no longer connected to the

server.</div>

States và properties

ARIA cũng định nghĩa states và properties để sử dụng trong các phần tử tương tác, như các thành phần của form, các nội dung động. States và properties được nhận biết bằng thuộc tính có tiền tố là aria-, ví dụ: aria-disabled, aria-describedby.

1.1.4 Hiển thị các kí tự đặc biệt

Ở đây, kí tự đặc biệt được hiểu là những kí tự thuộc một trong hai loại sau:

- Một là những kí tự không có sẵn trong bảng mã ASCII, hiểu nôm na là không có sẵn trên bàn phím máy tính, muốn có nó thì phải dùng tổ hợp phím, hoặc như trong Microsoft Word thì dùng chức năng chèn kí tự đặc biệt (symbol). Do không nhập được vào mã nguồn, nên trình duyệt sẽ không thể xuất ra màn hình được. Ví dụ, kí hiệu bản quyền (copyright sign): ©.

- Hai là các kí tự trùng với từ khóa (keyword) của HTML, hiểu nôm na là, trong khi người lập trình muốn xuất kí tự đó ra màn hình, nhưng trình duyệt lại hiểu là từ khóa nên nó sẽ biên dịch và thực thi từ khóa. Ví dụ, lập trình viên muốn xuất dấu bé (<), tuy nhiên trình duyệt lại hiểu là phần bắt đầu của thẻ mở.

Như vậy phải có cách nào đó, để ghi được các kí tự này vào mã nguồn (tài liệu HTML), sau đó trình duyệt sẽ hiển thị ra màn hình. Giải pháp HTML đưa ra là, xem các kí tự đặc biệt đó là “thực thể” (entity) chứ không phải kí tự. Vì là thực thể nên phải có dấu hiệu nhận diện, để phân biệt với kí tự thông thường, dấu hiệu nhận diện là bất kì thứ gì nằm giữa dấu “&” và dấu “;” thì được coi là thực thể. Trong HTML, các kí tự đặc biệt này được gọi là “escape character”, có thể hiểu vui vui là “kí tự mà không thể kí (ghi) được” hoặc “tui không phải là kí tự”.

Các kí tự đặc biệt sẽ được viết dưới dạng các thực thể, mỗi kí tự đặc biệt luôn có hai cách viết, viết bằng số gọi là thực thể số (numeric entity); và viết bằng chữ gọi là thực thể chữ (named entity).

Bảng sau là cách viết một số kí tự đặc biệt bằng thực thể,

*Kí tự*	*Mô tả*	*Thực thể chữ*	*Thực thể số*
	Kí tự trắng đặc biệt, không bị ngắt (nbsp -nonbreaking space). Ví dụ, để luôn xuất chuỗi “không thể tách rời” thành một khối, nghĩa là cả chuỗi luôn nằm trên cùng một hàng, thì viết như sau: “không thể tách rời”
&	Dấu và (ampersand)	&	&
`	Dấu lược (apostrophe)	'	'
<	Dấu bé (less-than symbol)	<	<
>	Dấu lớn (greater-than symbol)	>	>
©	Kí hiệu bản quyền (copyright sign)	©	©
®	Nhãn hiệu đã đăng kí (registered trademark)	®	®
™	Nhãn hiệu	™	ᾒ
£	Kí hiệu đồng Bảng Anh	£	£
¥	Kí hiệu đồng Yên Nhật	¥	¥
€	Kí hiệu đồng Euro	€	€
–	Dấu gạch ngang (en-dash): dấu gạch ngang có chiều dài bằng chữ “n”. Ví dụ, dùng để gạch đầu hàng, dấu trừ. Đừng nhầm với dấu gạch nối (hyphen) (-)	–	–
—	Dấu gạch đúp (em-dash): dấu gạch đúp có chiều dài bằng chữ “m”. Ví dụ, dùng để chú thích trong một câu.	—	—
‘	Dấu mở nháy đơn (left curly single quote)	‘	‘
’	Dấu đóng nháy đơn (right curly single quote)	’	’
“	Dấu mở nháy kép (left curly double quote)	“	“
”	Dấu đóng nháy kép (right curly double quote)	”	”
·	Dấu đầu dòng (bullet)	•	•
…	Dấu chấm lửng (ngang), hay dấu ba chấm (horizontal ellipsis)	…	…

1.1.5 Xem và đọc thêm

– Nhập tên các thẻ vào Google hoặc Youtube để đọc và xem thêm.

– Hoặc đọc từ hai trang là: https://www.w3schools.com/, hoặc https://developer.mozilla.org/en-US/

– Jennifer Niederst Robbins, Learning Web Design, O’REILLY, 2018, p98 – p108

1.1.6 Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. This little post for the Black Goose Bistro News page will give you an opportunity to identify and mark up a variety of inline elements. See if you can find phrases to mark up accurately with the following elements:

b br cite dfn em i q small time

Because markup is always somewhat subjective, your resulting markup may not look exactly like my final markup, but there is an opportunity to use all of the preceding elements in the article. For extra credit, there is a phrase that could have two elements applied to it. (Hint: look for a term in another language.) Remember to nest them properly by closing the inner element before you close the outer one. Also, be sure that all text-level elements are contained within block elements.

[The post]

<article>

<header>

<p>posted by BGB, November 15, 2016</p>

</header>

<h2>Low and Slow</h2>

<p>This week I am extremely excited about a new cooking technique called sous vide. In sous vide cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, Cooking for Geeks, Jeff Potter describes it as ultra-low-temperature poaching.</p>

<p>Next month, we will be serving Sous Vide Salmon with Dill Hollandaise. To reserve a seat at the chef table, contact us before November 30.</p>

<p>blackgoose@example.com

555-336-1800</p>

<p>Warning: Sous vide cooked salmon is not pasteurized. Avoid it if you are pregnant or have

immunity issues.</p>

</article>

Bài tập 3. The Black Goose Bistro News page.

Now that you’ve been introduced to all of the text elements, you can put them to work by marking up the News page for the Black Goose Bistro site.

Below is the started text, follow the instructions listed after it to finish the web page.

[Started text]

The Black Goose Bistro News

Home

Menu

News

Contact

Summer Menu Items

posted by BGB, June 18, 2017

Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.

Appetizers

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

Main courses

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

Low and Slow

posted by BGB, November 15, 2016

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

Location: Baker's Corner, Seekonk, MA

Hours: Tuesday to Saturday, 11am to 11pm

1. Start by adding the DOCTYPE declaration to tell browsers this is an HTML5 document.

2. Add all the document structure elements first (html, head, meta, title, and body). Give the document the title “The Black Goose Bistro News”

3. The first thing we’ll do is identify the top-level heading and the list of links as the header for the document by wrapping them in a header element (don’t forget the closing tag). Within the header, the headline should be an h1 and the list of links should be an unordered list (ul). Don’t worry about making the list items links; we’ll get to linking in the next chapter. Give the list more meaning by identifying it as the primary navigation for the site (nav).

4. The News page has two posts titled “Summer Menu Items” and “Low and Slow.” Mark up each one as an article.

5. Now we’ll get the first article into shape. Let’s create a header for this article that contains the heading (h2 this time because we’ve moved down in the document hierarchy) and the publication information (p). Identify the publication date for the article with the time element.

6. The content after the header is a simple paragraph. However, the menu has some interesting things going on. It is divided into two conceptual sections (Appetizers and Main Courses), so mark those up as section elements. Be careful that the final closing section tag (</section>) appears before the closing article tag (</article>) so the elements are nested correctly and don’t overlap. Finally, let’s identify the sections with id attributes. Name the first one “appetizers” and the second “maincourses.”

7. With our sections in place, now we can mark up the content. We’re down to h3 for the headings in each section. Choose the most appropriate list elements to describe the menu item names and their descriptions. Mark up the lists and each item within the lists.

8. Now we can add a few fine details. Classify each price as “price” using span elements.

9. Two of the dishes are new items. Change the double hyphens to an em dash character and mark up “new item!” as “strongly important.” Classify the title of each new dish as “newitem” (use the existing dt element; there is no need to add a span this time). This allows us to target menu titles with the “newitem” class and style them differently than other menu items.

10. That takes care of the first article. The second article is already mostly marked up from the previous exercise, but you should mark up the header with the appropriate heading and publication date information.

11. So far, so good, right? Now make the remaining content that applies to the whole page a footer. Mark each line of content within the footer as a paragraph.

12. Let’s give the location and hours information some context by putting them in a div named “about.” Make the labels “Location” and “Hours” appear on a line by themselves by adding line breaks after them. Mark up the hours with the time element (you don’t need the date or time zone portions).

13. Finally, copyright information is typically “small print” on a document, so mark it up accordingly. As the final touch, add a copyright symbol after the word “copyright” using the keyboard or the © character entity.

Save the as bistro_news.html, and check your page in a modern browser. You can also upload it to validator.nu and make sure it is valid (it’s a great way to spot mistakes). How did you do?

[Gợi ý làm bài tập]

Bài tập 2.

[post.html]

<p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>

</header>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="2016-11-30">November 30</time>.</p>

<p>blackgoose@example.com<br>

555-336-1800</p>

<p><small>Warning: <i>Sous vide</i> cooked salmon is not pasteurized. Avoid it if you are pregnant or have immunity issues.</small></p>

</article>

Bài tập 3.

[bistro_news.html]

<!DOCTYPE html>

<html>

<head>

<title>The Black Goose Bistro News</title>

</head>

<body>

<h1>The Black Goose Bistro News</h1>

<nav>

<ul>

<li>Contact</li>

</ul>

</nav>

</header>

<h2>Summer Menu Items</h2>

<p><time datetime="2017-6-18">posted by BGB, June 18, 2017</time></p>

</header>

<p>Our chef has been busy putting together the perfect menu for the summer

months. Stop by to try these appetizers and main courses while the

days are still long.</p>

<h3>Appetizers</h3>

<dl>

<dt>Black bean purses</dt>

<dd>Spicy black bean and a blend of Mexican cheeses wrapped in

sheets of phyl-lo and baked until golden. $3.95</dd>

<dt class="newitem">Southwestern napoleons with lump crab — <strong>new item!</strong></dt>

<dd>Layers of light lump crab meat, bean and corn salsa,

and our handmade flour tortillas. $7.95</dd>

</dl>

</section>

<h3>Main courses</h3>

<dl>

<dt>Shrimp sate kebabs with peanut sauce</dt>

<dd>Skewers of shrimp marinated in lemongrass, garlic,

and fish sauce then grilled to perfection. Served

with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

<dt class="newitem">Jerk rotisserie chicken with fried

plantains —<strong>new item!</strong></dt>

<dd>Tender chicken slow-roasted on the rotisserie, flavored

with spicy and fragrant jerk sauce and served with fried

plantains and fresh mango. <span class="price">$12.95</span></dd>

</dl>

</section>

</article>

<heaer>

<p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>

</heaer>

<p>This week I am <em>extremely</em> excited about a new cooking technique

called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge

the food (usually vacuum-sealed in plastic) into a water bath that is precisely

set to the target temperature you want the food to be cooked to. In his

book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it

as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>.

To reserve a seat at the chef table, contact us

before <time datetime="20161130">November 30</time>.</p>

</article>

<p>Location:<br> Baker's Corner, Seekonk, MA</p>

<p>Hours:<br> Tuesday to Saturday, <time datetime="11:00">11am</time>

to <time datetime="23:00">11pm</time></p>

</div>

</footer>

</body>

</html>

[Kết quả Bài tập 3]

1.1.7 Câu hỏi ôn tập

Câu hỏi 1. Phần tử HTML nào sau đây không phải là phần tử kiểu inline?

A. small

B. p

C. strong

D. a

Câu hỏi 2. Phát biểu nào sau đây không đúng, khi nói về phần tử HTML trung tính (generic element)

A. Phần tử trung tính có ngữ nghĩa rõ ràng, cụ thể

B. div và span là hai phần tử trung tính

C. div là phần tử trung tính kiểu khối

D. Khi không thể tìm được phần tử có ngữ nghĩa thì mới lựa chọn phần tử trung tính

Câu hỏi 3. Trong HTML, ARIA dùng để làm gì?

A. Là một loại phông chữ

B. Là một bộ các thuộc tính, được sử dụng để hỗ trợ quá trình điều hướng, tương tác với trang web.

C. Là một phần tử, dùng để nhúng âm thanh vào trang web

D. Là một phần tử, dùng để nhúng video vào trang web

Câu hỏi 4. Để hiển thị kí hiệu bản quyền (copyright sign) ra ngoài giao diện, mã HTML sẽ là:

A. &copyright;

B. copyright;

C. ©

D. &copy

Câu hỏi 5. Để hiển thị thêm các khoảng trắng (nonbreaking space) ra ngoài giao diện, mã HTML sẽ là:

A. &space;

B. &space

C. &nbsp

Đáp án: 1(B), 2(A), 3(B), 4(C), 5(D)

-----

Xem video bài giảng

Cập nhật: 10/5/2024

Bài sau: Web front-end (10) - HTML - Liên kết trang web_1

-----

Tải tài liệu đầy đủ: Tự học HTML căn bản

-----

LIÊN HỆ TÁC GIẢ

Menu

Tìm kiếm trong Blog

Web front-end (9) - HTML - Một số phần tử HTML khác

1.1 Một số phần tử HTML khác

1.1.1 Các phần tử inline

1.1.2 Div và span

1.1.3 Cải thiện khả năng tiếp cận với ARIA

1.1.4 Hiển thị các kí tự đặc biệt

1.1.5 Xem và đọc thêm

1.1.6 Bài tập và thực hành

1.1.7 Câu hỏi ôn tập