Có thể tạo toàn bộ mã HTML của một trang web trong vài phút, thậm chí vài giây? Có thể nếu bạn dùng Emmet! Cách tiếp cận mới này cho phép phát triển mã nhanh chóng cho HTML, XML và các định dạng mã có cấu trúc khác.
Emmet là plugin cho nhiều trình soạn thảo văn bản phổ biến. Với Emmet, bạn tạo khung xương trang web bằng cú pháp nén hợp lý, rồi mở rộng thành mã HTML đầy đủ, chuẩn chỉnh. Kết quả như phép màu: một dòng chữ mở rộng thành hàng trăm dòng cú pháp, và bạn có trang tĩnh, thậm chí cấu trúc toàn bộ trang web, sẵn sàng trong vài phút.
Bạn sẽ học cách dùng Emmet tạo một trang web tĩnh hoàn chỉnh. Visual Studio Code dùng cho hướng dẫn vì có sẵn hỗ trợ Emmet. Bạn dùng Emmet trong trình soạn thảo khác như Sublime Text, Atom, nhưng phải thêm hỗ trợ qua extension.
Tạo file trang web
Để bắt đầu, mở Visual Studio Code.
Chọn "File -> New File" (Tệp -> Tệp mới) tạo tài liệu trống mới.
Chọn "File -> Save As" (Tệp -> Lưu dưới dạng) lưu file, đặt phần mở rộng "html".
Cấu trúc cơ bản
Các phần tử trang web được tổ chức theo nhóm và nhóm con. Khi code với Emmet, bạn phải luôn nhớ mỗi nhóm chứa các mục có thể tự là nhóm của nhiều phần tử hơn nữa.
Lưu ý: tuy chúng tôi giải thích cơ bản, tốt hơn nếu bạn quen với cú pháp HTML cơ bản trước khi tiếp tục.
Ở mức cao nhất cơ bản, hầu hết trang web chứa ba nhóm/phần: header (đầu trang), phần chính cho nội dung cốt lõi, và footer (chân trang). Để tạo chúng với Emmet, gõ:
#header+#mainsite+#footer
Ký hiệu "#" trước mỗi từ nghĩa là mỗi nhóm là div với ID. Nhấn Enter cuối dòng để thấy Emmet hoạt động, biến cụm từ nhỏ thành ba dòng HTML có cấu trúc.
Cấu trúc Header
Header trang web thường chứa logo và một hoặc hai menu. Để thêm vào trang, bạn giữ HTML đã mở rộng từ bước trước và gõ trực tiếp trong div Header. Bạn gõ:
#logo+#menu_top+#menu_main
Nhấn Enter để mở rộng thêm, bạn sẽ có ba div cho logo và hai menu bên trong Header.
Nhóm trong Emmet
Với Emmet, bạn nhóm phần tử bằng cách đặt trong ngoặc đơn. Cho phép tạo cấu trúc phức tạp. Vậy quay lại (undo) mọi thứ cho đến nay, chỉ giữ code cơ bản #header+#mainsite+footer.
Thay thế #header trong code bằng:
(#header>.logo+.menu.top+.menu.main^)
Trong Emmet, bạn xuống cấp độ dùng ký tự > và lên cấp độ dùng ^. Cho phép vào một phần tử, thêm khác, rồi quay lại.
Kết quả trông như sau:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
Dịch nghĩa: "Thêm div (nhóm) với ID #header. Bên trong, thêm ba div với class '.logo', '.menu.top', '.menu.main'. Quay lên một cấp, ngoài nhóm, thêm hai div bên cạnh với ID '#mainsite' và '#footer'."
Cấu trúc Post (Bài viết)
Một bài viết cơ bản thường chứa:
- Tiêu đề (Title)
- Hình ảnh (Image)
- Trích đoạn (Excerpt - đoạn văn bản)
Cũng nên có link cho người truy cập đọc bài đầy đủ và link đến chuyên mục, tag, v.v. Để đơn giản, tạm dùng ba phần tử trên.
Đoạn code thêm vào:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5
Điều này nói với Emmet: "Tạo div class .post. Bên trong, đặt tiêu đề H3, hình ảnh, đoạn văn cho trích đoạn.
Với "{TEXT}" gắn sau phần tử, bạn định nghĩa nội dung. Với "{Post Title}", báo cho Emmet nội dung mỗi tiêu đề H3 là văn bản placeholder "Post Title". Bạn đổi "Post Title" thành tên hoặc chuỗi văn bản tùy ý, nó sẽ dùng làm nội dung tiêu đề bài khi mở rộng mã.
Ký hiệu $ bên cạnh "Post Title" là biến số làm việc cùng số "5" bên ngoài ngoặc. *5 sau ngoặc báo Emmet lặp lại nội dung ngoặc 5 lần. $ thay bằng số thứ tự từng bài. Thay số này bằng số bài bạn muốn trên trang.
Thêm vào code thực tế. Trông như:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
Cấu trúc Footer
Cho Footer, thêm hai nhóm – hai div với class ".design" và ".copyright".
Mã như sau:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))
Tạo div class ".design". Bên trong là link class ".designerslink". Thêm bên cạnh div thứ hai class ".copyright". Bên trong div này là đoạn văn bản thường với nội dung "Copyright 2020 My Name".
Kết quả:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))
Bây giờ, chỉ nhấn Enter, trang web sẵn sàng!
Với một phím, mọi thứ thấy cho đến nay, và đống ký tự siêu nén này, biến thành hàng chục dòng cú pháp HTML chuẩn cho trang đầy đủ!
Lưu thay đổi file bằng Ctrl + S hoặc "File -> Save". Để xem kết quả, mở trình duyệt. Dùng "File -> Open" hoặc trình quản lý file bên ngoài, tìm file HTML và mở thủ công.
Kết thúc
Bạn đã học cơ bản dùng Emmet tạo file HTML. Tất nhiên, bạn quay lại code bất cứ lúc nào để điều chỉnh hoặc mở rộng thêm.
Bạn đã biết Emmet? Dùng phím tắt khác giúp tạo trang web? Chia sẻ ở phần bình luận.