HTML và CSS là hai thành phần không thể thiếu trong bất kỳ trang web nào. Để bắt đầu học thiết kế web, việc tìm hiểu về HTML và CSS là điều cực kỳ quan trọng. Hôm nay, tôi sẽ chia sẻ với các bạn toàn bộ tài liệu học làm web từ A tới Z bằng HTML5 và CSS3.
Contents
Cấu trúc một tài liệu web bằng HTML5
Một tài liệu web hay tập tin HTML được định nghĩa bởi bốn yếu tố chính sau đây:
- Thẻ khai báo loại tập tin/tài liệu.
- Thẻ mở và đóng tài liệu HTML.
- Thẻ mở và đóng phần thông tin website.
- Thẻ mở và đóng phần nội dung website.
Trong bài viết này, chúng ta sẽ tìm hiểu về bốn phần này để tạo ra một tài liệu website bằng HTML đúng chuẩn.
Trước khi tôi giải thích chi tiết từng phần, hãy tạo một tập tin HTML với nội dung sau đây và lưu lại.
Thẻ khai báo loại tập tin
Ngay từ đầu tài liệu, chúng ta cần có một thẻ khai báo loại tập tin, như sau:
<!DOCTYPE html>
Tham số html
trong thẻ trên cho biết rằng tài liệu này là tài liệu HTML5. Mặc dù bạn có thể không sử dụng HTML5, nhưng khi khai báo tập tin HTML, bạn nên sử dụng tham số này để giúp trình duyệt hiểu đúng phiên bản HTML mà bạn sử dụng.
Thú vị ở đây là thẻ <!DOCTYPE>
không phải là một thẻ HTML, mà chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt biết về phiên bản HTML mà bạn sử dụng.
Thẻ mở và đóng tài liệu HTML
Tiếp theo là thẻ <html>
và </html>
, có nhiệm vụ khai báo cho trình duyệt biết rằng nội dung nằm giữa hai thẻ này là HTML. Bên trong thẻ này, chúng ta có thêm một thuộc tính là lang
với giá trị là vi
(<html lang="vi">
). Thuộc tính này cho biết trình duyệt rằng mã ngôn ngữ mà chúng ta sử dụng trên website là tiếng Việt.
Bạn cần nhớ rằng thẻ <html>
và </html>
phải bao bọc toàn bộ nội dung của trang web, không bao gồm thẻ <!DOCTYPE>
.
Thẻ mở và đóng phần thông tin website
Phần khai báo thông tin của website được đặt trong cặp thẻ <head>
và </head>
. Bên trong thẻ này, chúng ta sử dụng các thẻ để khai báo thông tin website như meta
, title
, style
, script
và một số thông tin khác. Thông tin được khai báo trong phần này thường không hiển thị trực tiếp trên trang web, mà có nhiệm vụ chứa các thông tin quan trọng về website.
Thẻ mở và đóng phần nội dung website
Đây là cặp thẻ mà bạn sẽ viết nội dung vào, đó là cặp thẻ <body>
và </body>
. Cặp thẻ này xác định phần thân của trang web, chứa toàn bộ nội dung siêu văn bản hoặc hình ảnh và media mà bạn muốn hiển thị trên trang web của mình. Chúng ta sẽ làm việc nhiều hơn với phần này trong các bài viết tiếp theo.
Nếu bạn mở tài liệu HTML bằng trình duyệt, bạn sẽ chỉ thấy nội dung nằm trong cặp thẻ <body>
và </body>
.
Cấu trúc của CSS3
Trong CSS, cấu trúc đơn giản hơn chỉ bao gồm một cặp thẻ khi viết trực tiếp trong một file HTML, đó là <style></style>
. Tuy nhiên, vì lý do sắp xếp và quản lý, chúng ta thường tách riêng CSS vào các file có phần mở rộng là .css
và liên kết với file HTML bằng câu lệnh <link rel="stylesheet" href="đường dẫn file.css" type="text/css">
.
Lời kết
Bây giờ bạn đã có thể tự tạo ra một tài liệu website đơn giản bằng HTML. Chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà tôi đã giải thích và có ví dụ ở trên.
Còn nhiều bài học thú vị khác để bạn áp dụng trong thiết kế web. Hãy tiếp tục theo dõi để không bỏ lỡ!