Hướng dẫn tạo Website bằng HTML và CSS đơn giản

Bạn muốn tạo website bằng HTML và CSS nhưng chưa biết bắt đầu từ đâu? Trong bài viết này, WebsiteDaNang sẽ hướng dẫn bạn từng bước để xây dựng một trang web cơ bản, tối ưu mã nguồn và đảm bảo hiển thị đẹp trên mọi thiết bị.

Giới thiệu về HTML và CSS

Trước khi tạo Website bằng HTML và CSS, chắc chắn bạn cần phải tìm hiểu về hai thuật ngữ này. Trong đó: HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là hai kiểu ngôn ngữ cốt lõi trong việc xây dựng và thiết kế website.

HTML đóng vai trò như bộ khung, giúp định nghĩa cấu trúc và nội dung của trang web bằng các thẻ như <h1>, <p>, <img>, <a>, v.v.
CSS giúp định dạng và trang trí giao diện, tạo ra màu sắc, kiểu chữ, bố cục và hiệu ứng hình ảnh cho trang web, làm cho nó trở nên đẹp mắt và chuyên nghiệp hơn.

Kết hợp HTML và CSS, bạn có thể tạo ra một trang web từ đơn giản đến phức tạp, phù hợp với nhiều mục đích khác nhau mà không cần sử dụng các ngôn ngữ lập trình nâng cao.

Hướng dẫn tạo giao diện Web đơn giản bằng HTML

Để tạo Website đơn giản bằng HTML, bạn cần thực hiện theo các bước hướng dẫn cơ bản sau đây của WebsiteDaNang:

Tạo tệp HTML cơ bản

Để tạo một tệp HTML, bạn có thể làm theo các bước đơn giản sau:

Bước 1: Mở một trình soạn thảo mã nguồn như VS Code, Sublime Text hoặc Notepad++.

Bước 2: Tạo một tệp mới và đặt tên là index.html.

Bước 3: Trong tệp index.html, nhập dấu “!” và nhấn Enter để tự động tạo cấu trúc HTML cơ bản.

Sau khi thực hiện các bước trên, sẽ có một đoạn code hiển thị ra:

Trong đó:

<!DOCTYPE html>: Xác định phiên bản HTML đang sử dụng.
<html lang=”vi”>: Xác định ngôn ngữ trang web.
<head>: Chứa thông tin meta, tiêu đề trang (<title>), và các tệp CSS nếu có.
<body>: Chứa nội dung hiển thị trên trình duyệt, bao gồm văn bản, hình ảnh, liên kết,..

Bước 4: Sau khi lưu tệp dưới dạng .html, bạn có thể mở nó bằng bất kỳ trình duyệt web nào (Chrome, Firefox, Edge, v.v.).

Tạo Header cho website với HTML cơ bản

Sau khi đã có đoạn mã khởi tạo, bạn có thể xây dựng cấu trúc cơ bản cho một trang web gồm header (thanh tiêu đề), main (nội dung chính) và footer (chân trang). Để làm điều này, bạn có thể sử dụng thẻ <nav> kết hợp với <ul> để tạo danh sách không có thứ tự. Trong danh sách này, mỗi mục sẽ được đặt trong thẻ <li>, chẳng hạn như 5 mục chính, quan trọng nhất của trang web.

Trong đó:

<header>: Xác định phần đầu của trang web.
<h1>: Hiển thị tiêu đề hoặc logo.
<nav>: Chứa menu điều hướng.
<ul> và <li>: Tạo danh sách liên kết điều hướng.
<a href=”#”>: Tạo các liên kết đến các trang khác.

Tạo Footer cho website với HTML

Phần chân trang (Footer) thường chứa thông tin liên hệ, bản quyền, điều khoản sử dụng hoặc biểu mẫu đăng ký nhận tin. Dưới đây là cách tạo một footer đơn giản bằng HTML:

Bạn có thể sử dụng thẻ <footer> để định nghĩa phần chân trang, kết hợp với các phần tử như <p>, <form>, và <div> để sắp xếp nội dung.

Trong đó:

Thẻ <footer>: Xác định phần chân trang của trang web.
Thẻ <p>: Chứa nội dung bản quyền.
Thẻ <form>: Tạo biểu mẫu đăng ký nhận tin với ô nhập và nút gửi.
Thẻ <input>: Dùng để nhập email người dùng.
Thẻ <button>: Nút để gửi thông tin.

Tạo menu cho website với HTML

Menu điều hướng giúp người dùng dễ dàng truy cập các trang quan trọng trên website. Dưới đây là cách tạo một menu đơn giản bằng HTML.Trong tệp index.html, thêm đoạn mã sau vào phần <body>:

Trong đó:

<nav>: Xác định khu vực menu điều hướng.
<ul>: Tạo danh sách không có thứ tự.
<li>: Đại diện cho từng mục trong menu.
<a href=”#”>: Liên kết đến các trang khác (thay dấu # bằng đường dẫn cụ thể).

Tạo nội dung cho website

Khi xây dựng một trang web, phần nội dung chính đóng vai trò quan trọng trong việc cung cấp thông tin và tạo trải nghiệm tốt cho người dùng. Dưới đây là hướng dẫn tạo nội dung trang web đơn giản bằng HTML.

Chèn tiêu đề và hình ảnh

Phần đầu tiên của nội dung chính có thể bao gồm một tiêu đề lớn và hình ảnh minh họa. Đoạn mã HTML sau giúp bạn thực hiện điều này:

Trong đó:

<h1>: Tiêu đề chính của trang web.
<img>: Hiển thị hình ảnh với đường dẫn được chỉ định trong src.
alt: Văn bản thay thế khi hình ảnh không tải được.
width: Xác định độ rộng của hình ảnh.

Danh sách nội dung quan trọng

Sau tiêu đề, bạn có thể liệt kê các mục nội dung chính trên trang bằng danh sách có thứ tự (<ol>).

Trong đó:

<h2>: Tiêu đề phụ cho danh sách.
<ol>: Tạo danh sách có thứ tự (số thứ tự).
<input type=”checkbox”>: Cho phép người dùng đánh dấu các mục.

Hiển thị bài viết mới nhất

Bạn có thể thêm phần nội dung bài viết mới nhất để giới thiệu các tài liệu hữu ích:

Trong đó:

<h4>: Tiêu đề nhỏ cho từng bài viết.
<p>: Đoạn văn bản mô tả ngắn gọn nội dung bài viết.

Tạo bảng biểu để trình bày dữ liệu

Nếu bạn muốn hiển thị thông tin một cách khoa học, hãy sử dụng bảng (<table>).

Trong đó:

<table>: Tạo bảng.
<tr>: Tạo một hàng mới.
<td>: Tạo một ô trong bảng.
CSS (trong <style>): Giúp hiển thị bảng rõ ràng hơn với đường viền và khoảng cách giữa các ô.

Hướng dẫn tạo giao diện Web đơn giản bằng CSS

Tùy chỉnh thuộc tính cơ bản cho website

Bạn có thể sử dụng đoạn CSS sau để thiết lập cỡ chữ, màu chữ và kiểu chữ cho toàn bộ website một cách chuyên nghiệp:

Trong đó:

font-family: Định nghĩa kiểu chữ chính của website.
font-size: Xác định kích thước chữ mặc định.
color: Định dạng màu sắc cho chữ.
background-color: Thiết lập màu nền cho toàn trang.
line-height: Tăng khoảng cách giữa các dòng giúp nội dung dễ đọc hơn.

Chia khung cho website

Chúng ta sẽ thiết lập CSS cho phần #container và chia cột cho #menu, giúp nó hiển thị cố định bên trái trình duyệt. Trong ví dụ này, chúng ta sử dụng menu dọc với chiều rộng mở rộng toàn bộ chiều cao của cửa sổ.

Phần #container được thiết lập với padding-left để tạo khoảng trống 150px bên trái, đảm bảo nội dung không bị #menu che khuất. Đồng thời, #menu được đặt với thuộc tính position: fixed để hiển thị cố định trên trang, giúp menu luôn xuất hiện ngay cả khi cuộn trang.

Viết CSS cho Footer

Dưới đây là đoạn CSS để thiết lập #footer, giúp giảm kích thước chữ, làm nhạt màu và thêm viền trên:

Viết CSS cho content

Để làm cho #content trông gọn gàng hơn, ta sẽ thêm padding giúp nội dung không bị sát mép, đồng thời căn giữa văn bản trong #header và .call-to-action để bố cục hài hòa hơn.

Để thêm màu sắc nổi bật cho phần slogan để tạo điểm nhấn, giúp thu hút sự chú ý của người xem, bạn có thể tham khảo cách viết sau đây:

Sử dụng CSS thêm màu sắc nổi bật cho phần slogan

Nếu muốn làm nổi bật cho phần .call-to-action bạn có thể viết theo cách sau:

Tạo website bằng HTML và CSS là bước khởi đầu lý tưởng cho những ai muốn xây dựng trang web mà không cần dùng đến các nền tảng phức tạp. Với các kiến thức cơ bản trên đây của WebsiteDaNang về HTML để tạo cấu trúc trang và CSS để thiết kế giao diện, bạn có thể dễ dàng tạo ra một website chuyên nghiệp, tối ưu hiển thị trên mọi thiết bị.
Ngoài ra, nếu bạn chưa am hiểu về code, bạn vẫn có thể tạo ra một trang web hoàn chỉnh với trình tạo website không cần code MIỄN PHÍ này!