Bài trước: Web front-end (3) - URL, siêu liên kết và siêu văn bản
-------
1
HTML
Sau các bài học về web, trình duyệt, URL, siêu liên kết,
siêu văn bản, bạn đã biết được rằng mỗi một tài nguyên trên mạng sẽ được đại diện
bằng một URL, gắn kết các URL này bằng siêu liên kết sẽ tạo ra Không gian
thông tin toàn cầu (web). Một trang web là một tài liệu gồm văn bản, hình ảnh,
video,…v.v có chứa siêu liên kết, do vậy trang web là một siêu văn bản.
Phần này sẽ tìm hiểu các kiến thức và kĩ năng giúp bạn tạo
ra được trang web. Gồm các nội dung sau:
– Tạo một trang web đơn giản (tổng quan về HTML)
– Hiển thị văn bản
– Liên kết
– Hình ảnh
– Bảng
– Form
– Các chủ đề mở rộng liên quan đến HTML
1.1
Tạo một trang web đơn giản
HTML là gì?
HTML, viết tắt của HyperText Markup Language - ngôn ngữ đánh
dấu siêu văn bản, là một ngôn ngữ (lưu ý: không phải ngôn ngữ lập trình) được sử
dụng để tạo ra nội dung cho trang web.
Hiểu nôm na, HTML là ngôn ngữ, sử dụng phương pháp đánh dấu bằng
các thẻ, để tạo ra các siêu văn bản, tức là các trang web.
Tài liệu HTML là gì?
Tài liệu HTML
(HTML document) là tập tin chứa mã HTML, là trang web ở dạng mã nguồn, trình
duyệt sẽ thực thi mã nguồn này để tạo ra trang web.
1.1.1 Trang web tĩnh là gì?
Trang web tĩnh
(static web page, flat page hoặc stationary page): là trang web chứa nội dung cố
định, nội dung này là giống nhau với mọi người dùng, mọi ngữ cảnh. Người dùng
không có khả năng tương tác với nó.
Mã nguồn của
trang web tĩnh thường là một tài liệu HTML, được lưu dưới dạng một tập tin.
Mã nguồn của
trang web tĩnh có thể được lưu trong cơ sở dữ liệu, thậm chí bao gồm cả các
trang được tạo ra bằng một mẫu có sẵn (template) và được phân phối thông qua một
server ứng dụng, miễn là các trang kết quả không thể thay đổi và luôn thể hiện
như khi nó được lưu trữ.
Trang web tĩnh được
dùng để chứa các thông tin cố định, ít hoặc không cần cập nhật.
Chúng ta sẽ cùng
nhau tạo ra một trang web tĩnh.
1.1.2
Chuẩn bị nội dung cho trang web
Bước 1. Nhập nội dung
Mở chương trình Notepad, nhập vào nội dung sau (lưu ý nhập
đúng nội dung, đúng định dạng):
NGAY DAU TIEN DI HOC
Ngay dau tien di hoc
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
Bước 2. Lưu lại thành
tập tin index.html
Vào trình đơn File\Save của Notepad, lưu lại thành tập tin,
để trong ổ đĩa\thư mục bất kì, tốt nhất là tạo một thư mục mới có tên là
HocLamWeb rồi lưu tập tin vào trong đó, đặt tên tập tin là index.html. Chú ý: để chắc chắn phần mở rộng của tập tin là “.html”
chứ không phải là “.html.txt” thì trong lúc lưu, tới phần nhập tên cho tập tin,
mục File name, bạn phải bao phần tên và phần mở rộng bằng dấu nháy kép (“”), ví
dụ “index.html”.
Bước 3. Thử mở tập
tin index.html bằng trình duyệt
Để mở tập tin index.html bằng trình duyệt, chỉ cần bấm đúp
chuột (double click) vào tập tin index.html, hoặc bấm chuột phải vào tập tin,
chọn Open with, chọn một trình duyệt bất kì, nội dung là đoạn thơ sẽ xuất hiện
trên trình duyệt.
Tuy nhiên, để ý là, mặc dù trong cửa sổ soạn thảo Notepad,
phần nội dung đã được ngắt dòng rồi, nhưng kết quả thì không như vậy, tất cả các
câu thơ nằm trên cùng một dòng nối tiếp nhau.
[Kết quả]
NGAY DAU TIEN DI HOC Ngay dau tien di hoc Me dat tay den truong Em vua di vua khoc Me do danh ben em Tac gia: Vien Phuong
|
Những thứ sẽ bị trình duyệt bỏ qua khi hiển
thị một văn bản |
|
– Chuỗi khoảng trắng
(spaces): khi gặp một chuỗi khoảng trắng (nhiều khoảng trắng liên tiếp),
trình duyệt sẽ chỉ ghi nhận khoảng trắng đầu tiên để hiển thị, các khoảng trắng
sau đó sẽ bị bỏ qua – Kí hiệu xuống hàng
(line break, carriage return): khi gặp kí tự xuống hàng (hoặc nhiều kí tự xuống
hàng liên tiếp), trình duyệt sẽ chuyển thành một khoảng trắng – Các tab cũng được
chuyển thành một khoảng trắng – Vì đặc tính bỏ qua
chuỗi khoảng trắng, kí hiệu xuống hàng, và tab, nên phần văn bản hoặc các phần
tử nội tuyến (inline element) khác sẽ được đặt cạnh nhau, liên tục, và chỉ bị
ngắt dòng khi gặp một phần tử khối (block element) kế tiếp. – Các thẻ (tag) mà
trình duyệt không hiểu cũng bị bỏ qua. Tuy nhiên, một số trình duyệt sẽ xem nội
dung của các thẻ mà nó không nhận ra là dạng văn bản thông thường và trình
duyệt sẽ hiển thị nội dung này ra giao diện. – Phần chú thích
(comment) sẽ bị bỏ qua, không hiển thị |
Rút ra được điều gì từ 3 bước trên?
– Ba bước trên mới làm được một việc là nhập nội dung văn bản
vào một tập tin, sau đó mở tập tin bằng trình duyệt để xem kết quả.
– Tuy nhiên, kết quả hiển thị tại trình duyệt lại không giống
như khi ở cửa sổ Notepad, các dấu xuống hàng (line break) đã bị bỏ qua.
– Nếu chỉ thực hiện như ba bước vừa rồi thì không thể hiển
thị nội dung lên trình duyệt một cách chuyên nghiệp, có bố cục, có định dạng và
cấu trúc theo ý muốn, để làm được điều này cần sử dụng tới một công
cụ để hiển thị nội dung lên trình duyệt, đó chính là HTML. Nội dung ở
đây có thể là văn bản, hình ảnh, video, quy trình xử lý nghiệp vụ.
Vì vậy, bước tiếp theo sẽ bổ sung thêm một số thứ vào tập
tin index.html, để biến nó trở thành một tài liệu HTML thực thụ, từ đó có thể
thực hiện định dạng phần nội dung theo ý muốn, và trình duyệt sẽ biết cách để
hiển thị theo đúng các định dạng mà người lập trình đã đưa ra.
|
Văn bản là gì |
|
Văn bản (text) là những
thứ có thể đọc được. Cụ thể hơn, văn bản chính là tập hợp các kí tự (letter)
hoặc các từ (word) có ngữ nghĩa. Trong thông tin và
truyền thông, văn bản là từ, là câu, là đoạn, không bao gồm thông tin định dạng
và được lưu dưới dạng mã ASCII (để máy tính có thể hiểu và xử lý được). Những
thứ không phải là văn bản bao gồm: các đối tượng đồ họa (graphic), các số
(không ở dạng ASCII), và mã chương trình (dạng nhị phân). Ví dụ một đoạn văn bản, [Words, sentences, paragraphs. This book, for example, consists
of text. Text processing refers to the ability to manipulate words, lines,
and pages. Typically, the term text refers to text stored as ASCII codes
(that is, without any formatting). Objects that are not text include
graphics, numbers (if they're not stored as ASCII characters), and program
code.] |
1.1.3
Cấu trúc cơ bản của một tài liệu HTML
Điều quan trọng nhất cần biết là tài liệu HTML được tạo ra từ
các phần tử HTML. Toàn bộ tài liệu HTML là tập hợp của rất nhiều các phần tử
HTML khác nhau tạo thành.
Vậy phần tử HTML là gì?
Phần tử HTML (HTML element) là một thùng chứa (container),
nó được sử dụng để chứa văn bản, và chứa các phần tử HTML khác.
Hiểu nôm na, vì là thùng chứa, nên nội dung bên trong của mỗi
cái thùng này sẽ chịu tác động bởi hình thù của cái thùng. Mà hình thù của cái
thùng được quyết định bởi nguyên liệu tạo ra cái thùng đó. Để tạo ra các thùng
khác nhau, sử dụng nguyên liệu là các loại thẻ HTML khác nhau. Để tạo ra một phần
tử HTML (thông thường) chỉ cần sử dụng cặp thẻ HTML để bọc lại hai đầu của một
nội dung.
Vậy thẻ HTML là
gì?
Thẻ HTML (HTML
tag) là các từ khóa (keyword), được sử dụng để báo cho trình duyệt biết cách định
dạng và hiển thị các nội dung. Trình duyệt sẽ không hiển thị các từ khóa này ra
ngoài giao diện. Thẻ HTML thường gồm hai phần: phần mở thẻ gọi là thẻ mở
(opening tag, start tag) và phần đóng thẻ gọi là thẻ đóng (closing tag, end
tag).
Xem hình minh họa
cú pháp của thẻ HTML thông thường,
Cũng có thể hiểu nôm na, HTML sẽ sử dụng các thẻ (tag) để
“đánh dấu” chỗ này là tiêu đề, chỗ khác là một đoạn văn bản, chỗ này sẽ hiển thị
hình ảnh, chỗ khác sẽ hiển thị một video. Đây chính là ý nghĩa của chữ “đánh dấu”
trong khái niệm HTML.
Để ý trong cú pháp của thẻ HTML sẽ thấy, thẻ mở và thẻ đóng
sẽ có “tên thẻ” giống nhau, chỉ khác nhau là trong thẻ đóng có thêm dấu xuyệt
“/” (forward-slash). Ví dụ: <html></html>, hoặc
<p></p>. Đừng nhầm dấu xuyệt (/) với dấu xuyệt ngược (\)
(backslash).
Khi lập trình, nên viết tên thẻ ở dạng chữ thường, mặc dù
trình duyệt không phân biệt chữ hoa và chữ thường. Ví dụ, nên viết thẻ là
<strong> thay vì <Strong> hoặc <STRONG>. Khi viết thẻ mở thì
viết luôn thẻ đóng, để tránh quên thẻ đóng, dễ sinh ra lỗi.
Như vậy với cặp thẻ HTML, chúng ta đã tạo ra được một cái
thùng rỗng, giờ chỉ việc bỏ nội dung vào giữa cặp thẻ này để tạo ra các phần tử
HTML.
Hình dưới đây là cú pháp một phần tử HTML thông thường (gọi
là phần tử HTML thông thường vì còn có các phần tử HTML đặc biệt),
Như vậy, một phần tử HTML sẽ bắt đầu là thẻ mở, tới phần nội
dung, và cuối cùng là thẻ đóng.
Thẻ HTML và phần tử HTML có phải là một?
Thẻ HTML (HTML tag) và phần tử HTML (HTML element) là hai
khái niệm khác nhau, tuy thực tế, mọi người vẫn hay sử dụng để thay thế cho
nhau. Nói chung, cả hai đều là những thứ để tạo ra một trang web. Tuy nhiên, thẻ
HTML là thành phần để tạo ra phần tử
HTML.
Giờ sẽ tìm hiểu xem Cấu trúc cơ bản của một tài liệu HTML gồm
những gì, được tổ chức như thế nào?
Xem hình minh họa Cấu trúc cơ bản của một tài liệu HTML5,
Diễn giải hình trên,
Một tài liệu HTML luôn được bắt đầu bằng dòng khai báo, mục
đích là để cho trình duyệt biết được tài liệu bên dưới được viết bằng HTML
phiên bản bao nhiêu. Từ đó, trình duyệt sẽ dùng đặc tả (specification) tương ứng
để biên dịch mã HTML. Từ khóa để khai báo là <!DOCTYPE>, đây không phải
là một thẻ HTML
Ví dụ,
– Nếu tài liệu được viết bằng HTML5 thì sẽ khai báo là:
<!DOCTYPE html>
– Nếu tài liệu được viết bằng HTML4.01 Strict thì sẽ khai
báo là:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Từ DOCTYPE là viết rút gọn của DOCument TYPE (loại tài liệu).
Sau phần khai báo, đến phần tử html, toàn bộ tài liệu HTML sẽ
được chứa trong phần tử này. Phần tử html được gọi là phần tử gốc (root
element), vì nó chứa tất cả các phần tử khác của tài liệu, và nó không nằm
trong bất kì phần tử nào.
Bên trong phần tử html có hai phần tử con là phần tử head và
phần tử body. Phần tử head và body giúp chia một tài liệu HTML thành hai phần riêng
biệt. Trong đó, phần tử head chứa các thông tin mô tả về chính tài liệu này, ví
dụ tiêu đề (title), tập tin định dạng (CSS), đoạn mã JavaScript, các thông tin
này không được hiển thị ra cửa sổ trình duyệt, còn phần body chứa toàn bộ nội
dung mà chúng ta muốn hiển thị ra cửa sổ trình duyệt.
Trong phần head có phần tử title, phần tử này sẽ chứa tiêu đề
của trang web, nó sẽ xuất hiện trên thanh tiêu đề của trình duyệt. Phần tử
title bắt buộc phải nằm trong phần tử head.
Tốt rồi, giờ sẽ làm thực hành tiếp, để có được trang web đầu
tiên, cùng làm tiếp Bước 4.
Bước 4. Tạo một trang
web thực sự
Bổ sung thêm cấu trúc của một tài liệu HTML vào tập tin
index.html, để nó trở thành một tài liệu HTML (trang web) thực thụ. Lúc này tập
tin index.html sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web dau tien</title>
</head>
<body>
NGAY DAU TIEN DI HOC
Ngay dau tien di hoc
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
</body>
</html>
Lưu lại tập tin index.html, mở lại tập tin này bằng trình
duyệt và xem kết quả có thay đổi gì không?
Thấy không có gì thay đổi, ngoại trừ thanh tiêu đề của trang
web bây giờ sẽ là “Trang web dau tien”, chúng ta có thể thay đổi nội dung trong
phần tử title để xem sự thay đổi trên thanh tiêu đề của trình duyệt.
|
Văn bản thô là gì |
|
Văn bản thô (plain text hay unformatted text) là
văn bản ở dạng tự nhiên nhất, không bao gồm thông tin định dạng. Tài liệu
word là văn bản đã bao gồm thông tin định dạng, do vậy đó không phải là văn bản
thô. Ví dụ, văn bản tạo bằng Notepad hoặc các Text Editor để làm web khác
chính là văn bản thô. Văn bản thô chính là nguyên liệu để tạo ra mã
nguồn các trang web (tài liệu HTML). Ví dụ một đoạn văn bản thô, <head> <title>My webpage</title> </head> |
|
Tài liệu là gì? |
|
Tài liệu (document)
là vật mang tin, được hình thành trong quá trình hoạt động của cơ quan, tổ chức,
cá nhân. Các loại tài liệu:
văn bản, dự án, bản vẽ thiết kế, bản đồ, công trình nghiên cứu, sổ sách, biểu
thống kê; âm bản, dương bản phim, ảnh, vi phim; băng, đĩa ghi âm, ghi hình;
tài liệu điện tử; bản thảo tác phẩm văn học, nghệ thuật; sổ công tác, nhật
ký, hồi ký, bút tích, tài liệu viết tay; tranh vẽ hoặc in; ấn phẩm và vật
mang tin khác. |
1.1.4 Thêm cấu trúc và ngữ nghĩa cho nội dung
HTML có hai chức năng chính, một là tạo ra bố cục hay cấu
trúc (structure) cho nội dung cần hiển thị, nghĩa là nội dung gồm những gì, ví
dụ trang web sẽ gồm: tiêu đề, logo, menu, nội dung chính, phần bên phải, bên
trái, phần chân trang; hai là tạo ngữ nghĩa (meaning, semantic) cho nội dung,
ngữ nghĩa chính là ý nghĩa của các thẻ, ví dụ: tiêu đề cấp một, tiêu đề cấp
hai, đoạn văn bản, phần trích, phần nhấn mạnh, danh sách.
Việc sắp xếp vị trí của các nội dung, chia cột, tạo màu sắc,
hiệu ứng là chức năng của CSS chứ không phải
của HTML.
|
Trang trí nội dung bằng HTML |
|
Ban đầu, HTML được tạo
ra để giúp các nhà khoa học chia sẻ thông tin với nhau, do vậy, chức năng chủ
yếu của nó là trình bày văn bản có cấu trúc, dễ đọc. Tuy nhiên, sau đó,
HTML đã được mở rộng, được bổ sung thêm khả năng về định dạng, trang trí, cho
phép người lập trình thay đổi phông chữ, màu sắc, căn lề. Hiện nay, HTML đang
được trả lại đúng vai trò ban đầu của nó, nghĩa là HTML chỉ tập trung vào việc
biểu diễn nội dung có cấu trúc và có ngữ nghĩa. |
Bởi vậy, công việc của lập trình viên là phải lựa chọn phần
tử HTML phù hợp nhất để bọc lại các phần nội dung, sao cho nó có cấu trúc phù hợp
và phản ánh tốt nhất ngữ nghĩa của nó. Ví dụ, nếu nội dung ở dạng bảng thì phải
chọn phần tử table để bọc lại nội dung đó, chứ không thể bọc nó bằng phần tử
danh sách (list).
Để hiển thị nội dung có cấu trúc, bên cạnh việc lựa chọn phần tử phù hợp thì lập trình viên còn phải sắp xếp, bố trí các phần tử sao cho hợp lý, hiểu nôm na là tạo bố cục (outline), nghĩa là các phần tử nào sẽ đặt cạnh nhau, phần tử nào sẽ lồng vào nhau. Cấu trúc của một tài liệu HTML chính là DOM (Document Object Model), bạn sẽ tìm hiểu vể DOM ở các phần sau.
Khi nội dung đã được cấu trúc hóa, người lập trình sẽ dễ
dàng thực hiện việc trang trí cho các phần tử bằng CSS hoặc lập trình tương tác
với các phần tử bằng JavaScript.
Bước 5. Tạo cấu trúc cho
phần nội dung
Ở Bước 4 đã tạo được trang web thực sự, với cấu trúc cơ bản
của một tài liệu HTML. Tuy nhiên, phần nội dung của trang web (đoạn thơ) vẫn
chưa được đặt vào trong các phần tử HTML phù hợp. Điều này không được khuyến
khích trong thực tế, vì nó tạo ra tình trạng không thể định dạng và không thể
kiểm soát được sự xuất hiện của nó ở cửa sổ trình duyệt.
Vì vậy, công việc của phần này là tìm các phần tử HTML phù hợp
để bao lại phần nội dung, vừa để cấu trúc hóa phần nội dung, vừa để tiện cho việc
trang trí hoặc lập trình tương tác về sau.
– Mở tập tin index.html bằng Notepad
– Đặt dòng chữ NGAY DAU TIEN DI HOC vào trong phần tử h1, hay nói cách khác là dùng thẻ <h1> để bọc lại dòng chữ này. Phần
tử h1 được sử dụng để chứa các tiêu đề
mức 1, h1 là viết tắt của heading
level 1. Hiểu nôm na, nội dung nào được bọc bằng thẻ <h1> thì trình duyệt
sẽ hiểu đây là tiêu đề mức cao nhất, vì vậy nó sẽ hiển thị nội dung này với
phông chữ lớn, in đậm.
– Dùng thẻ <p> để bọc lại mỗi câu thơ và dòng thông
tin về tác giả, p là viết tắt của
paragraph (đoạn văn bản)
– Dùng thẻ <em> bọc lại tên tác giả, để nhấn mạnh tên
tác giả, em là viết tắt của emphasis.
Lúc này tập tin index.html sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web dau tien</title>
</head>
<body>
<h1>NGAY DAU TIEN DI HOC</h1>
<p>Ngay dau tien di hoc</p>
<p>Me dat tay den truong</p>
<p>Em vua di vua khoc</p>
<p>Me do danh ben em</p>
<p>Tac gia: <em>Vien Phuong</em></p>
</body>
</html>
Lưu lại tập tin index.html, và ra ngoài trình duyệt để xem kết
quả, sẽ thấy đoạn thơ được hiển thị có bố cục tốt hơn, tên bài thơ được in đậm,
mỗi câu thơ nằm trên một hàng, tên tác giả được in nghiêng.
[Kết quả]
NGAY DAU TIEN DI HOC
Ngay dau tien di hoc
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
1.1.5 Phần tử kiểu block và inline
Như đã biết, phần tử body sẽ chứa toàn bộ nội dung được hiển
thị ra màn hình. Nghĩa là, phần tử body sẽ chứa tất cả các phần tử HTML của nội
dung trang web. Như vậy, phần tử body là phần tử cha, trong nó sẽ có các phần tử
con. Chúng ta sẽ hiểu thêm về quan hệ cha-con khi tìm hiểu về DOM.
Cứ tưởng tượng, phần tử body chính là một hình chữ nhật lớn,
có chiều rộng đúng bằng chiều rộng của cửa sổ trình duyệt, chiều dài không hạn
chế, hình chữ nhật này được chia thành các hàng, dùng để chứa các phần tử con,
mỗi phần tử con cũng là một hình chữ nhật, nhưng nhỏ hơn.
Ở chế độ mặc định, mỗi phần tử HTML sẽ thuộc một trong hai
kiểu hiển thị là block (kiểu khối) hoặc inline (kiểu nội tuyến, trong hàng).
Hình sau minh họa hai kiểu hiển thị block và inline,
Hiển thị kiểu block
Một phần tử có kiểu hiển thị là block (block-level) sẽ luôn
được hiển thị ở một hàng mới và nó sẽ chiếm toàn bộ chiều rộng khả dụng (nghĩa
là chiếm toàn bộ chiều rộng của phần tử cha nó).
Một số phần tử (thẻ) HTML có kiểu hiển thị block gồm,
|
<address> |
<article> |
<aside> |
<blockquote> |
<canvas> |
<dd> |
|
<div> |
<dl> |
<dt> |
<fieldset> |
<figcaption> |
<figure> |
|
<footer> |
<form> |
<h1>-<h6> |
<header> |
<hr> |
<li> |
|
<main> |
<nav> |
<noscript> |
<ol> |
<output> |
<p> |
|
<pre> |
<section> |
<table> |
<tfoot> |
<ul> |
<video> |
Hiển thị kiểu inline
Một phần tử có kiểu hiển thị là inline (inline-level) sẽ
không yêu cầu một hàng mới khi hiển thị và sẽ chiếm độ rộng vừa đủ để chứa hết
phần nội dung của nó.
Một số phần tử (thẻ) HTML có kiểu hiển thị inline gồm,
|
<a> |
<abbr> |
<acronym> |
<b> |
<bdo> |
<big> |
|
<br> |
<button> |
<cite> |
<code> |
<dfn> |
<em> |
|
<i> |
<img> |
<input> |
<kbd> |
<label> |
<map> |
|
<object> |
<q> |
<samp> |
<script> |
<select> |
<small> |
|
<span> |
<strong> |
<sub> |
<sup> |
<textarea> |
<time> |
|
<tt> |
<var> |
|
|
|
|
|
Định dạng mặc định của trình duyệt |
|
Như đã biết, nhiệm vụ của HTML là tạo cấu trúc và ngữ nghĩa cho nội
dung. Tuy nhiên, quan sát trang index.html trên trình duyệt, sẽ thấy nội dung
nằm trong phần tử h1 có phông chữ lớn, nét đậm, nội dung nằm trong phần tử p
có phông chữ nhỏ hơn, nội dung nằm trong phần tử em được in nghiêng. Vậy
thông tin định dạng này ở đâu ra? Đó chính là thông tin định dạng mặc định của
trình duyệt (user agent style sheets). Khi học về CSS sẽ tạo các định dạng mới
để thay thế cho định dạng mặc định này. |
1.1.6 Xem và đọc thêm
– Sử dụng các từ khóa này để tìm kiếm trên Google hoặc
Youtube để đọc và xem thêm: HTML căn bản, HTML tutorial, phần tử kiểu inline,
inline element, phần tử kiểu block, block element.
– Learn HTML (chapter 1, 2): https://www.youtube.com/watch?v=kUMe1FH4CHE
1.1.7 Bài tập và thực hành
(Không nên sử dụng google để dịch các bài tập bằng tiếng Anh, mà nên dùng từ điển để tự dịch và làm theo. Mục đích để rèn khả năng đọc hiểu tài liệu tiếng
Anh).
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. Entering content
1. Type the home page content below into the new
document in your text editor (e.g Notepad). Copy it exactly as you see it here,
keeping the line breaks the same.
Black
Goose Bistro
The
Restaurant
The
Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere.
The menu changes regularly to highlight the freshest local ingredients.
Catering
You
have fun. We'll handle the cooking. Black Goose Catering can handle events from
snacks for a meetup to elegant corporate fundraisers.
Location
and Hours
Seekonk,
Massachusetts;
Monday
through Thursday 11am to 9pm; Friday and Saturday, 11am to
midnight
2. Select “Save” or “Save as” from the File menu
of text editor to save document into harddisk. The first thing you need to do
is create a new folder that will contain all of the files for the site. The
technical name for the folder that contains everything is the local root
directory. Name the new folder bistro, and save the text file as index.html in
it. The filename needs to end in .html to be recognized by the browser as a web
document.
3. Let’s take a look at index.html in a browser.
Double-click the filename in the File Explorer to launch your default browser,
or right-click the file for the option to open it in the browser of your
choice.
4. You should see some text on the screen.
[Result]
Black Goose Bistro The Restaurant The Black Goose Bistro offers
casual lunch and dinner fare in a relaxed atmosphere. The menu changes
regularly to highlight the freshest local ingredients. Catering You have fun.
We'll handle the cooking. Black Goose Catering can handle events from snacks
for a meetup to elegant corporate fundraisers. Location and Hours Seekonk,
Massachusetts; Monday through Thursday 11am to 9pm; Friday and Saturday, 11am
to midnight
Bài tập 3. Adding minimal structure
1. Open the new index.html document if it isn’t
open already and add the DOCTYPE declaration:
<!DOCTYPE html>
2. Put the entire document in an HTML root
element by adding an <html> start tag after the DOCTYPE and an
</html> end tag at the very end of the text.
3. Next, create the document head that contains
the title for the page. Insert <head> and </head> tags before the
content. Within the head element, add information about the character encoding
<meta charset="utf-8">, and the title, “Black Goose Bistro”,
surrounded by opening and closing <title> tags.
4. Finally, define the body of the document by
wrapping the text content in <body> and </body> tags. When you are
done, the source document should look like this (the markup is shown in color
to make it stand out):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Black Goose Bistro</title>
</head>
<body>
Black
Goose Bistro
The
Restaurant
The
Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere.
The menu changes regularly to highlight the freshest local ingredients.
Catering
You
have fun. We'll handle the cooking. Black Goose Catering can handle events from
snacks for a meetup to elegant corporate fundraisers.
Location
and Hours
Seekonk,
Massachusetts;
Monday
through Thursday 11am to 9pm; Friday and
Saturday,
11am to midnight
</body>
</html>
5. Save the document in the bistro directory, so
that it overwrites the old version. Open the file in the browser or hit Refresh
or Reload if it is open already.
[Result]
Black Goose Bistro The Restaurant The Black Goose Bistro offers
casual lunch and dinner fare in a relaxed atmosphere. The menu changes
regularly to highlight the freshest local ingredients. Catering You have fun.
We'll handle the cooking. Black Goose Catering can handle events from snacks
for a meetup to elegant corporate fundraisers. Location and Hours Seekonk,
Massachusetts; Monday through Thursday 11am to 9pm; Friday and Saturday, 11am
to midnight
Bài tập 4. Defining text elements
1. Open the document index.html in your text
editor, if it isn’t open already.
2. The first line of text, “Black Goose Bistro,”
is the main heading for the page, so we’ll mark
it up as a Heading Level 1 (h1) element. Put the
opening tag, <h1>, at the beginning of
the line and the closing tag, </h1>, after
it, like this:
<h1>Black Goose
Bistro</h1>
3. Our page also has three subheads. Mark them
up as Heading Level 2 (h2) elements in a
similar manner. I’ll do the first one here; you
do the same for “Catering” and “Location
and Hours.”
<h2>The
Restaurant</h2>
4. Each h2 element is followed by a brief
paragraph of text, so let’s mark those up as
paragraph (p) elements in a similar manner.
Here’s the first one; you do the rest:
<p>The
Black Goose Bistro offers casual lunch and dinner fare in
a
relaxed atmosphere. The menu changes regularly to highlight the
freshest
local ingredients.</p>
5. Finally, in the Catering section, I want to
emphasize that visitors should just leave
the cooking to us. To make text emphasized, mark
it up in an emphasis element (em)
element, as shown here:
<p>You
have fun. <em>We'll handle the cooking.</em> Black Goose
Catering
can handle events from snacks for a meetup to elegant
corporate
fundraisers.</p>
6. Now that we’ve marked up the document, let’s
save it as we did before, and open (or
reload) the page in the browser. You should see
a page that looks much like the one in
the following figure. If it doesn’t, check your
markup to be sure that you aren’t missing any
angle brackets or a slash in a closing tag.
1.1.8 Câu hỏi ôn tập
Câu 1. A static web page (sometimes called a flat page or a
stationary page) is a web page that is delivered to the user's web browser
exactly as stored, in contrast to __________ which are generated by a web
application.
A. dynamic web pages
B. web root
C. Internet
D. database
Câu hỏi 2. Một phần
tử HTML (thông thường) gồm các thành phần sau:
A. thẻ mở, thẻ
đóng
B. thẻ mở, nội
dung
C. thẻ mở, nội
dung, thẻ đóng
D. thẻ đóng, nội
dung
Câu hỏi 3. Cấu
trúc cơ bản của một tài liệu HTML gồm:
A. Phần khai báo
(doctype), phần tử html, phần tử head, phần tử title, phần tử body
B. Phần khai báo
(doctype), phần tử html, phần tử header, phần tử title, phần tử body
C. Phần khai báo
(doctype), phần tử html, phần tử head, phần tử link, phần tử body
D. Phần khai báo
(doctype), phần tử html, phần tử p, phần tử title, phần tử body
Câu hỏi 4. Phát
biểu nào sau đây là hợp lý:
A. HTML tạo ra cấu
trúc và ngữ nghĩa cho phần nội dung trang web
B. HTML thực hiện việc trang trí cho trang web
C. HTML xử lý các tương tác của người dùng trên giao diện
web
D. HTML vừa tạo ra phần nội dung vừa thực hiện trang trí cho
trang web
Câu hỏi 5. Phát biểu nào đúng khi nói về “<!DOCTYPE
html>”?
A. Là một thẻ HTML
B. Là một khai
báo trong tài liệu HTML
C. Là một phần tử
HTML
D. Là một chú thích trong HTML
Đáp án: 1(A), 2(C), 3(A), 4(A), 5(B)
---------
-----
-----