Thiết kế website là một trong những kỹ năng quan trọng và thú vị trong thế giới số hóa ngày nay. Nếu bạn muốn tự học thiết kế website và muốn bắt đầu từ những kiến thức cơ bản, HTML và CSS là hai ngôn ngữ không thể thiếu. Trong bài viết này, chúng ta sẽ tìm hiểu về HTML và CSS, những kiến thức cơ bản mà bạn cần biết để bắt đầu hành trình tự học thiết kế website của mình.
1
Cấu Trúc Cơ Bản của HTML
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu sử dụng để xây dựng và cấu trúc các trang web. Đây là ngôn ngữ cơ bản nhất khi bạn bắt đầu học thiết kế web. HTML sử dụng các thẻ (tags) để đánh dấu các phần tử trên trang web, ví dụ: đầu tiêu đề, đoạn văn bản, hình ảnh, liên kết, và nhiều phần tử khác.
2
Cấu Trúc Cơ Bản của HTML
Một trang web HTML thường bắt đầu bằng thẻ `<!DOCTYPE html>` để xác định phiên bản HTML sử dụng. Sau đó, trang thiết kế Website được bao quanh bởi cặp thẻ `<html>…</html>`.
Trong phần tiếp theo, bạn sẽ thấy thẻ `<head>…</head>` chứa thông tin về trang web, như tiêu đề và liên kết đến các tệp CSS và JavaScript. Phần nội dung của trang web được đặt trong thẻ `<body>…</body>`.
<!DOCTYPE html>
<html>
<head>
<title>Trang Web Mẫu</title>
</head>
<body>
<h1>Xin chào, đây là trang web của tôi</h1>
<p>Đây là một đoạn văn bản ví dụ.</p>
<a href="#">Liên kết mẫu</a>
</body>
</html>Mã HTML trên đại diện cho một trang web cơ bản. Dưới đây là giải thích từng phần trong đoạn mã:
<!DOCTYPE html>: Dòng này xác định loại tài liệu HTML và phiên bản được sử dụng. Trong trường hợp này, nó cho biết rằng tài liệu sử dụng HTML5, phiên bản HTML mới nhất.<html>: Thẻ này mở đầu cho phần tử<html>, bao quanh toàn bộ nội dung trang web. Nó chỉ định rằng nội dung trong trang là ngôn ngữ HTML.<head>: Phần này chứa các thông tin về trang thiết kế Website mà không hiển thị trực tiếp cho người dùng. Nó chứa một thẻ<title>để xác định tiêu đề của trang thiết kế Website, mà sẽ xuất hiện trên thanh tiêu đề của trình duyệt khi trang web được truy cập.<title>: Thẻ này xác định tiêu đề của trang web là “Trang Web Mẫu.” Tiêu đề này sẽ hiển thị ở phần trên cùng của trình duyệt.<body>: Phần này chứa nội dung chính của trang web, bao gồm các phần tử mà người dùng sẽ thấy khi truy cập trang.<h1>: Đây là một tiêu đề cấp 1. Nội dung trong thẻ<h1>là “Xin chào, đây là trang web của tôi.” Điều này sẽ hiển thị như một tiêu đề lớn và đậm trên trang web.<p>: Đây là một đoạn văn bản thuần túy. Nội dung trong thẻ<p>là “Đây là một đoạn văn bản ví dụ.” Đoạn văn bản này sẽ hiển thị như một đoạn văn bản thông thường trên trang web.<a>: Đây là một thẻ liên kết (link). Nó có một thuộc tínhhrefvới giá trị “#” (dấu thăng), đây là một đường dẫn tạm thời không liên kết đến bất kỳ trang nào cụ thể. Văn bản bên trong thẻ<a>là “Liên kết mẫu.” Thẻ này tạo một liên kết có thể nhấp để điều hướng đến trang web khác.
4
CSS – Ngôn Ngữ Kiểu Trang
CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định dạng và trang trí cho trang web. Trong HTML, bạn định nghĩa cấu trúc nội dung, trong khi CSS giúp bạn kiểm soát cách nội dung đó được hiển thị. Bằng cách sử dụng CSS, bạn có thể tùy chỉnh font chữ, màu sắc, kích thước, độ căn lề, và nhiều thuộc tính khác của các phần tử HTML.
5
Cách Sử Dụng CSS
CSS có thể được sử dụng trong tệp riêng biệt hoặc nhúng trực tiếp vào tệp HTML bằng cặp thẻ <style>...</style>. Dưới đây là một ví dụ về cách CSS có thể được áp dụng cho một phần tử HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Xin chào, đây là trang web của tôi</h1>
<p>Đây là một đoạn văn bản ví dụ.</p>
<a href="#">Liên kết mẫu</a>
</body>
</html>6
Kết Luận
Nắm vững HTML và CSS là bước quan trọng đầu tiên trong việc tự học thiết kế website. Hãy thực hành và xây dựng những trang web đơn giản để rèn luyện kỹ năng của bạn. Hãy luôn tìm kiếm tài liệu và khóa học trực tuyến để nâng cao kiến thức và kỹ năng của mình. Hãy => viết thêm cho đủ ý.
