HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là hai ngôn ngữ quan trọng giúp xây dựng và tạo giao diện cho trang web.
HTML là ngôn ngữ đánh dấu sử dụng để xác định cấu trúc và nội dung của trang web. Nó cho phép bạn xác định các phần tử và cấu trúc của trang, bao gồm tiêu đề, đoạn văn bản, hình ảnh, liên kết và các thành phần khác. Cú pháp của HTML được sử dụng dựa trên các thẻ (tags) đóng mở và thuộc tính (attributes) để mô tả và tổ chức nội dung trang.
CSS là ngôn ngữ được sử dụng để tạo ra các quy tắc và kiểu dáng cho các phần tử HTML. Với CSS, bạn có thể điều chỉnh màu sắc, phông chữ, kích thước, khoảng cách, bố cục và các thuộc tính khác của các phần tử html trên website.
Bằng cách sử dụng HTML để xác định cấu trúc nội dung và CSS để thiết kế giao diện, bạn có thể tạo ra các trang web như ý với các thành phần tương tác, định dạng linh hoạt và trải nghiệm người dùng tốt.
1. Tạo một cấu trúc lệnh HTML đúng chuẩn
Trong Phần 3 mình đã hướng dẫn bạn tìm hiểu về cấu trúc theme WordPress, trong phần 4 này, mình sẽ sử dụng luôn cấu trúc đó để triển khai dự án mình đặt tên là webshop. Mở file index.php lên chúng ta sẽ làm việc ở đây và viết những dòng html đầu tiên.
Bạn sử dụng tổ hợp phím Ctrl + Shift + P để mở hộp lệnh, gõ vào câu lệnh html5.
Trên đây là cấu trúc HTML bắt buộc phải có với mỗi trang web, được tạo tự động nhờ việc bạn đã cài package Snippet và Bootstrap trong [Phần 2] Cài đặt Sublime Text và Package hỗ trợ WordPress.
2. Giải thích các câu lệnh html
<!DOCTYPE html>: Câu lệnh này khai báo loại tài liệu HTML của trang web. Nó nằm ở đầu tệp HTML và cho trình duyệt biết rằng trang web đang sử dụng phiên bản HTML nào.<!DOCTYPE html>được sử dụng trong HTML5 và nó chỉ định rằng tệp HTML đang sử dụng cú pháp HTML5.<html>: Thẻ<html>đánh dấu khối chứa toàn bộ nội dung của trang web. Nó là phần tử gốc của mọi trang HTML và bao gồm tất cả các phần khác nhau như<head>và<body>.<head>: Thẻ<head>chứa thông tin về tài liệu HTML, bao gồm các tiêu đề, liên kết tới các tệp CSS và JavaScript, và các meta tags. Phần này không được hiển thị trực tiếp trên trình duyệt, mà chứa các thông tin hữu ích cho việc xác định cấu trúc và thiết lập của trang web.<title>: Thẻ<title>xác định tiêu đề của trang web. Nội dung bên trong thẻ<title>sẽ hiển thị trên thanh tiêu đề của trình duyệt hoặc trong danh sách trang khi được đánh dấu là “Bookmark” (đánh dấu) trên trình duyệt.<body>: Thẻ<body>đánh dấu nội dung chính của trang web. Tất cả nội dung mà người dùng thấy trực tiếp trên trình duyệt sẽ được đặt bên trong thẻ<body>, bao gồm văn bản, hình ảnh, liên kết, biểu đồ và các phần tử khác.
2.1 Các thẻ meta trong <head></head>
<meta charset="utf-8">: Thẻ meta này rất quan trọng để đảm bảo trang web của bạn hiển thị các ký tự đa ngôn ngữ đúng cách. UTF-8 cho phép bạn sử dụng các ký tự đặc biệt, biểu tượng, ngôn ngữ không phổ biến và các ngôn ngữ không dùng bảng chữ cái Latin trong trang web của bạn.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">: Đoạn mã điều chỉnh cách trang web hiển thị trên các thiết bị di động.
Thuộc tính name xác định tên của thẻ meta, trong trường hợp này là “viewport”. Nó chỉ định rằng thông tin được cung cấp trong thẻ meta là về cấu hình khung nhìn của trang web.
Có ba thuộc tính được đặt trong content, trong đó:
width=device-width: Thuộc tínhwidthđược đặt thành “device-width”, điều này đảm bảo rằng chiều rộng của khung nhìn sẽ được thiết lập tự động theo chiều rộng của thiết bị, đảm bảo rằng trang web sẽ phù hợp với kích thước màn hình của thiết bị di động.initial-scale=1: Thuộc tínhinitial-scalexác định tỷ lệ ban đầu giữa kích thước thực của trang web và kích thước của khung nhìn. Ở đây, giá trị “1” đại diện cho tỷ lệ ban đầu bằng 100%, tức là trang web sẽ hiển thị với kích thước ban đầu không thu nhỏ hay phóng to.shrink-to-fit=no: Thuộc tínhshrink-to-fitxác định xem trình duyệt có nên co dãn nội dung để phù hợp với khung nhìn hay không. Khi giá trịshrink-to-fitđược đặt thành “no”, trình duyệt sẽ không thu nhỏ nội dung để phù hợp với khung nhìn, đảm bảo rằng trang web không bị co lại mà hiển thị toàn bộ nội dung ban đầu.
Có nhiều thẻ meta khác nữa sẽ được chúng ta cài vào trang web, ví dụ như title, keywords, description, author, robots để các công cụ Google có thể đọc được nội dung trên website từ đó xếp hạng website trên trang kết quả tìm kiếm.
2.2 Các file css và js
bootstrap.min.css: Đây là tệp CSS của Bootstrap framework. Nó chứa các quy tắc và kiểu dáng để tạo giao diện đẹp, linh hoạt và phản hồi trên trang web. Tệpbootstrap.min.cssđã được nén (minified) để giảm kích thước tệp, tăng tốc độ tải trang và giảm lưu lượng mạng.jquery-3.5.1.slim.min.js: Đây là tệp JavaScript của thư viện jQuery – một thư viện JavaScript phổ biến được sử dụng để tương tác với HTML, thay đổi nội dung, kiểu dáng trang web, xử lý sự kiện, và nhiều chức năng khác. Tệpjquery-3.5.1.slim.min.jslà phiên bản nhẹ của jQuery, đã được tối ưu hóa để giảm kích thước tệp và tải trang nhanh hơn.popper.min.js: là một thư viện JavaScript hỗ trợ cho việc xử lý vị trí và nơi hiển thị của các phần tử giao diện, chẳng hạn như gợi ý, menu thả xuống, tooltip và popover. Nó cung cấp các phương pháp và tính năng để đảm bảo các phần tử này hiển thị một cách đúng đắn và tương thích trên các màn hình và trình duyệt khác nhau.bootstrap.min.js: Đây là tệp JavaScript của Bootstrap framework. Nó chứa các mã JavaScript cần thiết để triển khai các chức năng tương tác và phản hồi của Bootstrap trên trang web. Các chức năng này bao gồm điều hướng thanh điều hướng, xổ xuống, tab, modal, carousel và nhiều tính năng khác. Tệpbootstrap.min.jscũng đã được nén để tối ưu hóa kích thước tệp và tăng tốc độ tải trang.
Bạn để ý, các files .css được đặt lên bên trong thẻ <head></head>, còn các file .js được đặt dưới cùng của trang web, bên trên thẻ đóng </body>. Làm như vậy sẽ cải thiện tốc độ load trang, giúp người dùng có trải nghiệm tốt hơn khi tìm đọc nội dung trang web.
Bây giờ bạn có thể kích hoạt theme này trong mục Giao diện của WordPress và chạy thử với tên miền bạn đã tạo (tên miền ảo của mình là webshop.vn).
3. Chạy thử dự án
Tất cả các files css và js được tạo ra ở trên được mình tải về và cho vào các thư mục gốc của website như sau:
Các đường dẫn đến file tải css và js đã được thay bằng đường dẫn thư mục của website, sẽ giúp trang web ổn định, bảo mật và load nhanh hơn.
Khởi động Apache và MySql trên XAMPP và chạy website với tên miền ảo bạn đã tạo trong phần trước.
4. Các phím tắt cho lập trình viên
Lúc này ấn Ctrl + U bạn sẽ được một tab trên trình duyệt với nội dung y hệt như trong trình soạn code của Sublime Text như sau:
Trở về giao diện Hello, world!, bạn ấn phím F12 để vào màn hình DevTool – công cụ dành cho lập trình viên của Google Chrome hoặc Microsoft Edge.
Mình vừa giới thiệu cho bạn cách cài các files css và js vào theme. Đồng thời cũng giới thiệu luôn các tổ hợp phím mà trong suốt quá trình code web, bạn sẽ phải sử dụng nó rất nhiều để chỉnh sửa html, css.
5. Bootstrap là gì?
Bootstrap là một khung làm việc (framework) phát triển giao diện người dùng (UI) phổ biến và mạnh mẽ dựa trên HTML, CSS và JavaScript. Nó được xây dựng và duy trì bởi Twitter và đã trở thành một trong những công cụ phát triển web phổ biến nhất trên thế giới.
Thư viện Bootstrap cung cấp một bộ các thành phần UI đã được thiết kế và một tập hợp các quy tắc CSS chuẩn để giúp bạn xây dựng các trang web đáp ứng (responsive) và có giao diện hấp dẫn một cách nhanh chóng và dễ dàng.
Với Bootstrap, bạn không cần phải viết CSS từ đầu hoặc phải lo lắng về việc tương thích trên các trình duyệt khác nhau. Bạn chỉ cần áp dụng các lớp CSS và thẻ HTML đã được định nghĩa sẵn để tạo ra các thành phần và bố cục trang web chuyên nghiệp.
Để sử dụng được Bootstrap, bạn bắt buộc phải có các thư viện như trong ảnh sau:
5.1 CSS Reset là gì?
CSS reset là loại bỏ hoặc định nghĩa lại các giá trị mặc định của các thuộc tính CSS trên các phần tử trong trang web. CSS reset giúp đảm bảo rằng các trình duyệt sẽ hiển thị các phần tử theo cách thống nhất và đồng nhất trên các trình duyệt khác nhau.
Khi bạn sử dụng thư viện Bootstrap để xây dự án thì Reset CSS đã được tạo sẵn trong file bootstrap.css hoặc bootstrap.min.css rồi và không cần phải viết lại.
Ví dụ về CSS Reset:
div{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}Trong ví dụ trên, chúng ta vừa reset cho tất cả các thẻ div của trang web:
margin: 0;: Loại bỏ khoảng cách giữa phần tử hiện tại và các phần tử xung quanh.padding: 0;: Loại bỏ khoảng cách giữa nội dung của phần tử và viền của nó.border: 0;: Loại bỏ đường viền xung quanh phần tử.font-size: 100%;: Đặt kích thước phông chữ của phần tử là 100% so với kích thước phông chữ được xác định trong phần tử cha hoặc giá trị mặc định của trình duyệt.font: inherit;: Kế thừa giá trị phông chữ từ phần tử cha.vertical-align: baseline;: Đặt vị trí dọc của phần tử dựa trên đường cơ sở (baseline). Đường cơ sở là một đường ảo trên đáy của các ký tự trong một dòng văn bản.
5.2 Bootstrap CSS Reset
Bạn có thể nghiên cứu thêm Bootstrap CSS Reset trong file bootstrap.css, CSS reset sẽ được viết ngay trên đầu của file.
Còn trong dự án chúng ta đang xây dựng là file bootstrap.min.css giống hệt bootstrap.css về nội dung nhưng đã được nén làm nhẹ file, giúp tăng tốc độ tải trang.
Bootstrap CSS Reset đầy đủ để có thể reset tất cả các loại trình duyệt đang có hiện nay. Vì vậy, khi đã sử dụng Bootstrap, bạn không cần phải code CSS reset nữa mà chỉ cần tập trung vào xây dựng giao diện website thôi.
Sau khi có CSS reset rồi bạn mới có thể viết code CSS xây dựng giao diện cho trang web và những gì bạn viết ra sẽ hiển thị giống nhau trên tất cả các trình duyệt.
6. Tìm hiểu HTML Bootstrap cơ bản
Kiến thức về HTML CSS Bootstrap cũng không có nhiều nên trong bài viết này mình chỉ hướng dẫn các thuộc tính cơ bản hay dùng để những bạn chưa bao giờ động vào HTML, CSS tìm hiểu. Trong quá trình phát triển dự án, bạn vừa code web, vừa chỉnh sửa CSS để có thêm kinh nghiệm cho bản thân.
6.1 Sử dụng lưới (Grid System) của Bootstrap
Chúng ta sẽ bắt đầu bên dưới đoạn mã Hello, world! như sau:
Bạn có thể tạo đoạn mã html trên bằng các câu lệnh Snippet:
- Gõ
.containervà nhấn Tab để tạo một khối chứa cho nội dung trang web. - Gõ
.rowvà nhấn Tab để tạo một hàng trong lưới. - Gõ
.col-*-*và nhấn Tab để tạo các cột trong hàng. Ví dụ:.col-md-8tạo một cột chiếm 2/3 chiều rộng (khoảng 66.67%) củadivcóclass="row"bao bên ngoài. Md là hiển thị trong thiết bị màn hình có kích thước trung bình (medium).
Thêm một vài câu lệnh mà bạn sẽ dùng nhiều trong quá trình xây dựng HTML CSS cho trang web:
- Gõ
.btnvà nhấn Tab để chèn đoạn mã HTML cho một nút (button). - Gõ
.navvà nhấn Tab để chèn đoạn mã HTML cho một thanh điều hướng (navigation). - Gõ
.form-groupvà nhấn Tab để chèn đoạn mã HTML cho một nhóm form (form group). - Gõ
.alertvà nhấn Tab để chèn đoạn mã HTML cho một hộp thông báo (alert box).
Giờ bạn quay lại trang webshop.vn đang chạy, F5 lại và xem kết quả.
6.2 Tùy chỉnh giao diện theo ý muốn
Một trang web sẽ cần phần header chứa logo, menu, giỏ hàng,… Phần content hiển thị sản phẩm, tin tức, slider hoặc dịch vụ. Phần cuối là footer chứa thông tin liên hệ, các liên kết,…
Vẫn trong ví dụ trên, chúng ta thêm phần head cho website như sau:
- Class
mt-4sẽ tạo khoảng cách với viền trên cùng của trình duyệt. - Class
bg-lighttạo một màu nền cho toàn bộ head với mã màu#f8f9fa
Bạn thấy rằng mọi thứ đã được Bootstrap tạo ra, bạn chỉ cần gọi đúng class ra để sử dụng.
Chúng ta sẽ tiếp tục với phần Content sẽ thay đổi một chút và thêm vào phần footer để tạo thành trang web như sau:
Quay lại trình duyệt với tên miền ảo webshop.vn, chúng ta thấy giao diện được tạo ra như sau:
6.3 Thực hành cắt giao diện thực tế
Sau khi đã tìm hiểu về boostrap rồi, giờ bạn cần thực hành thật nhiều bằng việc tìm kiếm các files thiết kế trên internet và cắt chúng thành HTML CSS với framework Bootstrap cho đến khi thành thạo.
Mình có 1 file thiết kế shop đơn giản để bạn thực hành, bạn có thể tải về tại đây.
Để tìm hiểu thêm về Bootstrap, bạn có thể đọc phần Document tại đây.
Kết luận
Trong phần này mình đã cố gắng giúp những bạn chưa từng code HTML CSS tìm hiểu và sử dụng Boostrap để tạo ra một giao diện website đơn giản. Bạn cần phải tự thực hành thật nhiều qua các dự án thực tế, code thật nhiều sẽ hiểu và tăng tốc độ hoàn thành giao diện dự án.
Trong phần tiếp của series Lập trình WordPress, mình sẽ hướng dẫn bạn chia template HTML website thành từng phần để có thể bắt đầu code hiển thị dữ liệu website.
Hãy chia sẻ bài viết này nếu thấy nó hữu ích, cảm ơn và hẹn gặp lại bạn trong bài viết tiếp theo !
