Bài trước: Web front-end (8) - HTML - Phần mềm lập trình web
-------
Xem video bài giảng
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 class="cv">
<img
src="anh-ung-vien.gif" alt="ảnh ứng viên">
<p>Nội
dung cv</p>
</div>
Ví dụ, dùng div để
tạo bố cục của một trang,
<div id="tin-tuc">
<h1>Tin
tức tuần qua</h1>
<p>Nội
dung tin</p>
</div>
<div
id="gia-vang">
<h1>Giá
vàng tuần qua</h1>
<p>Bảng
giá vàng</p>
</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>Tèo: <span
class="tel">6677.0028</span></li>
<li>Tí: <span
class="tel">5508.0808</span></li>
<li>Mít: <span
class="tel">6677.5508</span></li>
<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 id="main">
<!-- nội dung của vùng main -->
</div>
<div id="news">
<!-- nội dung vùng news -->
</div>
<div id="links">
<!-- nội dung vùng links -->
</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 id="main">
<!-- nội dung của vùng main -->
</section>
<section id="news">
<!-- nội dung vùng news -->
</section>
<aside id="links">
<!-- nội dung vùng links -->
</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 id="main" class="content big-font"
>
<!-- nội dung của vùng main -->
</section>
<section id="news" class="content">
<!-- nội dung vùng news -->
</section>
<aside id="links">
<!-- nội dung vùng links -->
</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 id="tabs" role="toolbar">
<li>A-G</li>
<li>H-O</li>
<li>P-T</li>
<li>U-Z</li>
</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
All content copyright
2017, Black Goose Bistro and Jennifer Robbins
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]
<article>
<header>
<p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>
</header>
<h2>Low and Slow</h2>
<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="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>
<meta charset="UTF-8">
<title>The Black Goose Bistro News</title>
</head>
<body>
<header>
<h1>The Black Goose Bistro News</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<article>
<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>
<section id="appetizers">
<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>
<section id="maincourses">
<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>
<article>
<heaer>
<h2>Low and Slow</h2>
<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>
<footer>
<div id="about">
<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>
<p><small>All content copyright © 2017, Black Goose Bistro and Jennifer Robbins</small></p>
</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. ©right;
B. copyright;
C. ©
D. ©
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.  
D.
Đá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
-----
-----
