HTML, CSS và thiết kế web: từ thẻ đến trang trong năm chặng, từ viết mã đến vẽ và tương tác | LUKATO AI
Khung năm chặng cho Tin học 12: từ thẻ và cây phần tử đến biểu mẫu, bộ chọn CSS, độ ưu tiên, mô hình hộp, màu chữ và responsive, với 15 phòng lab, 14 bẫy và…
LUKATO AI · TIN HỌC 12 · HTML, CSS VÀ THIẾT KẾ WEB
TỪ THẺ ĐẾN TRANG · NĂM CHẶNG
Một trang web là một cây phần tử , được tô kiểu rồi xếp thành các hộp
- Em đã viết quy tắc đổi màu cho một đoạn văn, vì sao chữ vẫn không đổi màu ?
- Một hộp đặt width: 160px , lại có đệm và viền, có thật sự chiếm đúng 160 px trên trang không?
- Em gõ chữ vào một ô nhập rồi bấm “Gửi”: ô ấy có thật sự được gửi đi không?
Chuyên đề gom các bài về HTML, CSS và thiết kế web vào một khung năm chặng : viết mã, dựng cây, tính kiểu, bố trí, vẽ và tương tác. Các lỗi quen thuộc được xếp vào từng chặng và có phòng lab riêng. Em sẽ soạn mã có xem trước trực tiếp, kéo thanh để đo hộp, dựng cây phần tử, chọn phần tử bằng bộ chọn, cho các quy tắc đua nhau về độ ưu tiên, rồi gỡ lỗi như một người dựng trang. Điều nào vượt ra ngoài chương trình được ghi là kiến thức bổ sung.
- ① 5 CHẶNG: viết mã, dựng cây, tính kiểu, bố trí, vẽ
- ② 3 CÂU HỎI: phần tử nào? kiểu nào thắng? hộp nằm đâu?
- ③ 6 LOẠI NỘI DUNG: văn bản, danh sách, liên kết và ảnh, bảng, biểu mẫu, khối
- ④ QUY ƯỚC: các đoạn mã trong chuyên đề là mã mẫu minh họa
15
phòng lab: soạn mã, dựng cây, bộ chọn, hộp, tương phản…
14 bẫy
mỗi bẫy gắn với một chặng và một phòng lab
10 thẻ
thẻ gợi nhớ nhanh để lật và tự nói lại
12 bài
bài luyện chọn lọc và báo cáo học tập của riêng em
01
Bản đồ chuyên đề
Từ thẻ đến trang: khung năm chặng
Một trang web em xem hằng ngày, từ thông báo của trường đến trang giới thiệu một câu lạc bộ, đều bắt đầu từ vài trăm dòng chữ thường. Điều biến những dòng chữ ấy thành tiêu đề, danh sách, ảnh, ô nhập và bố cục là hai ngôn ngữ cùng làm việc: HTML mô tả nội dung là gì, CSS mô tả nội dung trông thế nào. Mục này vẽ bản đồ cho cả chuyên đề.
Câu hỏi 1 · PHẦN TỬ NÀO
Quy tắc này áp vào ai?
Mỗi quy tắc CSS tìm phần tử bằng một bộ chọn. Gọi tên phần tử và vị trí của nó trong cây trước khi nói đến màu hay cỡ chữ.
Câu hỏi 2 · KIỂU NÀO THẮNG
Có quy tắc nào khác tranh chỗ không?
Nhiều quy tắc có thể cùng khớp một phần tử. Độ cụ thể của bộ chọn, rồi thứ tự viết, quyết định quy tắc nào được áp dụng.
Câu hỏi 3 · HỘP NẰM ĐÂU
Nó chiếm bao nhiêu chỗ?
Mỗi phần tử là một hộp gồm nội dung, đệm, viền và lề. Hộp là khối hay nằm trên dòng sẽ quyết định cách nó xếp cạnh các hộp khác.
Năm chặng đi từ mã đến màn hình
Khi em mở một trang web, trình duyệt làm việc như một dây chuyền. Đầu dây chuyền là mã do người viết soạn: HTML nói nội dung là gì, CSS nói nội dung trông thế nào. Cuối dây chuyền là trang hiện trên màn hình và phản hồi khi người dùng bấm. Ở giữa là ba việc: đọc mã để dựng thành cây phần tử, tính kiểu cuối cùng cho từng phần tử, rồi tính vị trí và kích thước của từng hộp. Cách chia năm chặng này là cách phân loại của LUKATO để gom các bài học; nó mô phỏng cách trình duyệt làm việc ở mức khái niệm (kiến thức bổ sung), không phải thuật ngữ chính thức của chương trình.
Vuốt ngang để xem đầy đủ hình.
Hình 1.1. Năm chặng và câu hỏi của mỗi chặng. Sản phẩm của chặng trước là đầu vào của chặng sau.
Bảng năm chặng: bấm vào từng ô
Mỗi hàng là một loại nội dung trên trang, mỗi cột là một chặng. Ba cột đầu trả lời câu hỏi 1 (chặng viết mã và dựng cây) và câu hỏi 2 (chặng tính kiểu); cột bố trí trả lời câu hỏi 3; cột cuối là phần người dùng nhìn thấy và tương tác. Bảng này là bản đồ của cả chuyên đề : mục 2 và mục 3 nói về chặng viết mã và dựng cây, mục 4 đi sâu vào biểu mẫu, mục 5 là chặng tính kiểu, mục 6 là chặng bố trí, mục 7 là chặng vẽ và tương tác.
LOẠI NỘI DUNG
① VIẾT MÃ
② DỰNG CÂY
③ TÍNH KIỂU
④ BỐ TRÍ
⑤ VẼ VÀ TƯƠNG TÁC
Văn bản, tiêu đề
Danh sách
Liên kết, ảnh
Bảng
Biểu mẫu
Khối bố cục
Vuốt ngang để xem đủ năm chặng của bảng.
Bấm vào một ô để xem ô ấy nói gì, nằm ở bẫy nào và luyện ở phòng lab nào.
Sáu thuật ngữ nền
Các thuật ngữ gạch chân chấm là thẻ giải nghĩa: bấm hoặc rê chuột để xem.
thẻ (tag) phần tử thuộc tính bộ chọn cây phần tử responsive
Bộ khung của một trang HTML
Dù trang đơn giản hay phức tạp, bộ khung vẫn như nhau. Dòng đầu khai báo kiểu tài liệu. Thẻ html bao toàn trang. Phần head chứa thông tin về trang mà người xem không đọc trực tiếp trong thân trang, như tiêu đề trên thẻ trình duyệt, bảng mã kí tự và liên kết tới tệp CSS. Phần body chứa nội dung hiển thị. Mã dưới đây chỉ là mã mẫu minh họa.
<!DOCTYPE html >
<html lang = "vi" >
<head >
<meta charset = "UTF-8" >
<title > Câu lạc bộ Vườn xanh </title >
<link rel = "stylesheet" href = "kieu.css" >
</head >
<body >
<h1 > Vườn xanh </h1 >
<p > Chào mừng bạn </p >
</body >
</html >
Mã mẫu 1.1. Bộ khung tối thiểu của một trang.
Dự đoán trước khi mở lab: trình duyệt làm việc nào trước trong dây chuyền năm chặng?
Phòng lab 1 · Dòng chảy từ thẻ đến trang DẠNG: TRÌNH CHIẾU TỪNG BƯỚC · TỰ PHÁT
Dự đoán, thao tác, kiểm tra. Chọn một bộ chọn và kéo thanh đệm, rồi bước qua năm chặng để xem cùng một đoạn mã trở thành trang như thế nào. Phòng lab này gặp bẫy 8 và 9 .
Trong mã mẫu 1.1, có bao nhiêu phần tử và phần tử nào là con trực tiếp của body? Em đếm rồi mở từng gợi ý.
Gợi ý 1
Mỗi phần tử bắt đầu bằng một thẻ mở. Nhiều phần tử có thêm thẻ đóng tương ứng, còn phần tử rỗng như meta và link chỉ có thẻ mở. Hãy đếm theo phần tử, không đếm theo thẻ đóng: html, head, meta, title, link, body, h1, p.
Gợi ý 2
Con trực tiếp của body là những phần tử nằm ngay một bậc dưới body, không nằm trong phần tử nào khác bên trong body.
Kết luận
Có 8 phần tử. Body có hai con trực tiếp: h1 và p. Head có ba con: meta, title và link.
Vì sao một khung cho cả chuyên đề
Các bài về HTML và CSS nhìn bề ngoài rất khác nhau: viết thẻ, đặt thuộc tính, viết bộ chọn, tính chiều rộng hộp, gửi biểu mẫu. Nhưng nhiều bài có thể quy về ba câu hỏi ở đầu mục. Khi gặp một bài, hãy gạch chân loại nội dung, xác định chặng đang bị hỏi, rồi trả lời trước câu hỏi tương ứng.
02
Chặng viết mã và dựng cây · Thẻ, thuộc tính, cây
Thẻ, thuộc tính và cây phần tử
Học HTML bắt đầu từ một việc rất nhỏ: dán nhãn cho từng khúc nội dung. Nhãn gồm một thẻ mở, một thẻ đóng và có thể kèm vài thuộc tính. Khi các nhãn lồng vào nhau, trình duyệt dựng chúng thành một cây có cha, con và anh em. Hiểu cây này là chìa khóa để hiểu cả CSS ở các mục sau.
Hãy hình dung tờ thông báo dán ở bảng tin của Câu lạc bộ Vườn xanh (tình huống minh họa): một dòng tiêu đề lớn, một đoạn giới thiệu, một danh sách hoạt động, một tấm ảnh cây. Người đọc nhìn là biết đâu là tiêu đề, đâu là danh sách. Máy tính không nhìn như vậy; nó cần mỗi phần được dán nhãn . HTML là hệ thống nhãn ấy: nhãn nói vai trò của một khúc nội dung, còn việc khúc ấy to hay nhỏ, đỏ hay xanh thuộc về CSS ở các mục sau.
Giải phẫu một phần tử
Vuốt ngang để xem đầy đủ hình.
Hình 2.1. Một phần tử gồm thẻ mở (có tên thẻ và các thuộc tính), nội dung và thẻ đóng. Thuộc tính viết dạng tên="giá trị" và chỉ nằm trong thẻ mở.
Một phần tử thường gồm ba phần: thẻ mở như <a ...> , nội dung , và thẻ đóng như </a> (có dấu gạch chéo). Trong thẻ mở, sau tên thẻ có thể có các thuộc tính cách nhau bằng dấu cách. Mỗi thuộc tính có tên, dấu bằng, và giá trị đặt trong cặp nháy. Một số phần tử không có nội dung nên không có thẻ đóng, gọi là phần tử rỗng : img (ảnh), br (xuống dòng), hr (đường kẻ ngang), input (ô nhập), meta , link . Với chúng, thông tin nằm trong các thuộc tính.
Thuộc tính
Dùng ở đâu
Ý nghĩa
href
Địa chỉ nơi liên kết dẫn tới
src, alt
img
src là tệp ảnh; alt là mô tả thay thế khi ảnh không tải hoặc khi đọc bằng trình đọc màn hình
id
bất kì phần tử
Tên riêng của một phần tử trong trang; không nên trùng nhau
class
bất kì phần tử
Tên nhóm; nhiều phần tử có thể cùng class và một phần tử có thể có nhiều class
style
bất kì phần tử
Viết trực tiếp các khai báo CSS cho riêng phần tử đó
Bẫy 1 · quên đóng thẻ, đóng chéo, thiếu nháy
Trình duyệt rất “dễ tính”: gặp mã sai vẫn cố hiện ra một trang. Điều đó làm em tưởng mã đúng. Nhưng trình duyệt sửa theo cách của nó , nên cây phần tử có thể khác với ý em, và quy tắc CSS về sau có thể áp nhầm chỗ. Ba lỗi hay gặp: đóng chéo (mở b rồi mở i, nhưng đóng b trước i), thuộc tính ở thẻ đóng , và giá trị có dấu cách mà không đặt trong nháy . Quy tắc nhớ: mở sau thì đóng trước , thuộc tính chỉ nằm trong thẻ mở, giá trị nên đặt trong cặp nháy.
Gặp ở: Lab 2 và 4 · chưa có bài ở mục 10, luyện bằng lab
Các phần tử lồng nhau tạo thành cây
Phần tử có thể nằm trong phần tử khác. Với mã dưới đây, body chứa h1, ul và p; ul chứa ba li; hai trong ba li chứa thẻ a. Cách các phần tử lồng nhau vẽ ra được thành một cây phần tử (kiến thức bổ sung ở mức khái niệm): gốc là html, mỗi phần tử khác có một phần tử cha.
<body >
<h1 > Vườn xanh </h1 >
<ul class = "ds" >
<li > <a href = "rau" > Trồng rau </a > </li >
<li > Tưới cây </li >
<li > <a href = "phan" > Ủ phân </a > <em > mới </em > </li >
</ul >
<p > Mời <b > đăng kí </b > </p >
</body >
Mã mẫu 2.1. Phần thân của một trang nhỏ.
Vuốt ngang để xem đầy đủ hình.
Hình 2.2. Cây phần tử của một trang nhỏ. Mỗi đường nối đi từ phần tử cha xuống phần tử con.
Quan hệ
Nghĩa
Ví dụ ở cây trên
Cha
Phần tử chứa ngay phần tử đang xét
ul là cha của mỗi li
Con
Phần tử nằm ngay một bậc dưới
li là con của ul; a là con của li
Anh em
Các phần tử cùng một cha
h1, ul và p là anh em (cùng cha body)
Hậu duệ
Con, cháu, chắt… của một phần tử
ul có hậu duệ li, a, em
Tổ tiên
Cha, ông… của một phần tử
Tổ tiên của b là p, body, html
Bẫy 2 · nhầm con trực tiếp với hậu duệ
Nhìn mã thấy thẻ a “nằm trong” ul, em dễ coi các thẻ bên trong cùng một cấp. Muốn không nhầm, hãy đếm số bậc từ phần tử gốc. Trong mã mẫu 2.1, ul có đúng ba con (ba li) nhưng có sáu hậu duệ là phần tử: ba li, hai a và một em. Quan hệ này quyết định bộ chọn có dấu cách ở mục 5 tìm được phần tử nào.
Gặp ở: Lab 3 · chưa có bài ở mục 10, luyện bằng lab
Trong mã mẫu 2.1, phát biểu nào đúng?
Phòng lab 2: soạn mã và xem trước
Phòng lab dưới đây có trình soạn mã với khung xem trước an toàn : mã em viết được hiện ngay bên cạnh, nhưng khung xem trước không chạy chương trình và không tải gì từ bên ngoài. Mỗi nhiệm vụ bắt đầu từ mã chưa đạt yêu cầu.
Phòng lab 2 · Xưởng HTML DẠNG: SOẠN MÃ · XEM TRƯỚC TRỰC TIẾP
Dự đoán, thao tác, kiểm tra. Đoán thẻ nào cần dùng, sửa mã rồi bấm “Kiểm tra”. Phòng lab này gặp bẫy 1, 3 và 4 .
Phòng lab 3: dựng cây từ mã
Trong lab 3, mã ở bên trái và cây ở bên phải là cùng một trang. Em bấm vào các nút trong cây để chọn phần tử theo quan hệ được yêu cầu; dòng mã tương ứng sáng lên.
Phòng lab 3 · Cây phần tử DẠNG: BẤM CHỌN TRÊN CÂY
Dự đoán trước: bộ chọn “ul a” tìm thấy mấy phần tử, và có phải các hậu duệ của ul đều là con của nó không? Chọn nhiệm vụ rồi bấm vào cây. Phòng lab này gặp bẫy 2 .
Phòng lab 4: thám tử bắt lỗi HTML
Bắt lỗi giúp nhớ lâu hơn viết đúng. Mỗi đoạn mã dưới đây có một dòng sai đầu tiên ; em bấm vào dòng ấy và đọc vì sao sai.
Phòng lab 4 · Thám tử bắt lỗi HTML DẠNG: BẮT LỖI TRONG MÃ
Dự đoán trước: đoạn mã nào có lỗi liên quan đến thứ tự đóng thẻ, đoạn nào liên quan đến vị trí của thuộc tính? Chọn đoạn mã và bấm vào dòng sai. Phòng lab này gặp bẫy 1 .
Ba câu tự hỏi khi đọc một đoạn HTML
Mỗi thẻ mở đã có thẻ đóng đúng thứ tự chưa? (trừ phần tử rỗng). Thuộc tính có nằm trong thẻ mở, giá trị có trong cặp nháy không? Phần tử con có đúng loại mà phần tử cha cho phép không? (con trực tiếp của ul là li; ô td nằm trong hàng tr).
Vì sao trình duyệt không báo lỗi khi mã sai?
HTML được thiết kế để các trình duyệt cố hiểu và hiển thị được trang ngay cả khi mã chưa chuẩn, nên trình duyệt sửa lỗi theo quy tắc riêng của nó thay vì dừng lại. Hệ quả là trang vẫn hiện nhưng cây phần tử có thể khác ý người viết. Đây là kiến thức bổ sung; với người viết trang, kết luận thực hành là: tự kiểm tra cú pháp thay vì dựa vào việc “trang vẫn hiện”.
Dòng khai báo đầu tiên của trang để làm gì?
Dòng <!DOCTYPE html> khai báo tài liệu viết bằng HTML hiện hành để trình duyệt hiển thị theo chế độ chuẩn. Thuộc tính lang="vi" của thẻ html cho biết nội dung bằng tiếng Việt, hữu ích cho trình đọc màn hình. Thẻ meta với charset UTF-8 khai báo bảng mã để chữ có dấu hiện đúng.
03
Chặng viết mã · Nội dung
Danh sách, liên kết, ảnh, bảng và các thẻ vùng
Một trang web thật thường gồm những loại nội dung lặp đi lặp lại: tiêu đề và đoạn văn, danh sách, liên kết và ảnh, bảng dữ liệu. Với mỗi loại có một thẻ đúng vai trò. Chọn đúng thẻ là bước đầu của một trang tốt, vì các việc về sau (kiểu dáng, bố cục, truy cập) đều dựa lên cấu trúc ấy.