HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là hai ngôn ngữ cơ bản trong việc xây dựng và thiết kế trang web. HTML được sử dụng để tạo ra cấu trúc và các nội dung trên trang web, trong khi CSS được sử dụng để định dạng và thiết kế cho các phần tử HTML.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu về các thẻ cơ bản của HTML và cách sử dụng CSS để thiết kế cho chúng.
Các thẻ cơ bản trong HTML
HTML sử dụng các thẻ để tạo ra cấu trúc và các nội dung trên trang web. Các thẻ bao gồm một cặp thẻ mở và đóng, với nội dung ở giữa. Thẻ mở là một ký tự “<” và thẻ đóng là một ký tự “>”. Dưới đây là các thẻ cơ bản và cách sử dụng chúng:
<html>: Đây là thẻ mở và đóng của một tài liệu HTML.<head>: Thẻ này chứa thông tin về tài liệu, bao gồm tiêu đề, các liên kết ngoài, định nghĩa các script, v.v.<title>: Thẻ này chứa tiêu đề của trang và sẽ hiển thị trên thanh tab của trình duyệt.<body>: Đây là nơi chứa nội dung chính của trang web.<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Các thẻ này chứa các tiêu đề cấp độ khác nhau, với<h1>là tiêu đề lớn nhất và<h6>là tiêu đề nhỏ nhất.<p>: Đây là thẻ để định dạng đoạn văn bản.<a>: Thẻ này tạo ra một liên kết đến một trang web khác hoặc một địa chỉ email.<img>: Thẻ này chứa một hình ảnh và sẽ hiển thị nó trên trang web.<ul>: Thẻ này tạo ra một danh sách không có thứ tự.<ol>: Thẻ này tạo ra một danh sách có thứ tự.<li>: Thẻ này chứa một mục trong danh sách.<div>: Đây là thẻ để tổ chức, nhóm các phần tử trên trang web.<span>: Thẻ này được sử dụng để định dạng một phần của văn bản.
Ví dụ, đoạn mã sau tạo ra một trang web đơn giản với tiêu đề, một đoạn văn bản và một liên kết:
<html> <head> <title>Trang web đầu tiên</title> </head> <body> <h1>Chào mừng đến với trang web đầu tiên của tôi</h1> <p>Đây là trang web đầu tiên của tôi. Xin chào các bạn!</p> <a href="https://example.com">Truy cập website khác</a> </body> </html><div class="copied" data-code="Trang web đầu tiên Chào mừng đến với trang web đầu tiên của tôi
Đây là trang web đầu tiên của tôi. Xin chào các bạn!
Truy cập website khác ">
Thiết kế các phần tử HTML bằng CSS
CSS giúp chúng ta tạo ra những trang web có vẻ đẹp hơn và chuyên nghiệp hơn. CSS có thể được sử dụng để thay đổi cảnh quan của các phần tử HTML như màu sắc, font chữ, kích thước, vị trí, v.v.
Để sử dụng CSS, chúng ta có thể tạo một tài liệu CSS riêng hoặc thêm CSS vào trong tài liệu HTML. Dưới đây là một ví dụ về cách thêm CSS vào trong tài liệu HTML:
<html> <head> <style> h1 { color: red; font-size: 24px; } </style> </head> <body> <h1>Đây là một tiêu đề vàng</h1> </body> </html><div class="copied" data-code=" h1 { color: red; font-size: 24px; }Đây là một tiêu đề vàng
">
