Cách thực hiện - Tạo một trang web
Tìm hiểu cách tạo một trang web đáp ứng sẽ hoạt động trên tất cả các thiết bị, PC, máy tính xách tay, máy tính bảng và điện thoại.
Tạo một trang web từ đầu
Một "Bản phác thảo bố cục"
Sẽ là khôn ngoan nếu bạn vẽ bản phác thảo bố cục của thiết kế trang trước khi tạo trang web:
Thanh điều hướng
Nội dung phụ
Một số văn bản một số văn bản..
Nội dung chính
Một số văn bản một số văn bản..
Một số văn bản một số văn bản..
Một số văn bản một số văn bản..
Chân trang
Bước đầu tiên - Trang HTML cơ bản
HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo trang web và CSS là ngôn ngữ mô tả kiểu dáng của tài liệu HTML. Chúng tôi sẽ kết hợp HTML và CSS để tạo một trang web cơ bản.
Lưu ý: Nếu bạn không biết HTML và CSS, chúng tôi khuyên bạn nên bắt đầu bằng cách đọc Hướng dẫn HTML của chúng tôi .
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Hãy tự mình thử »Ví dụ giải thích
- Khai báo
<!DOCTYPE html>
xác định tài liệu này là HTML5 - Phần tử
<html>
là phần tử gốc của trang HTML - Phần tử
<head>
chứa thông tin meta về tài liệu - Phần tử
<title>
chỉ định tiêu đề cho tài liệu - Phần tử
<meta>
phải xác định bộ ký tự là UTF-8 - Phần tử
<meta>
có name="viewport" giúp trang web trông đẹp mắt trên mọi thiết bị và độ phân giải màn hình - Phần tử
<style>
chứa các kiểu cho trang web (bố cục/thiết kế) - Phần tử
<body>
chứa nội dung trang hiển thị - Phần tử
<h1>
xác định một tiêu đề lớn - Phần tử
<p>
xác định một đoạn văn
Tạo nội dung trang
Bên trong phần tử <body>
của trang web, chúng ta sẽ sử dụng "Bản nháp bố cục" và tạo:
- Một tiêu đề
- Một thanh điều hướng
- Nội dung chính
- Nội dung phụ
- Chân trang
tiêu đề
Tiêu đề thường nằm ở đầu trang web (hoặc ngay bên dưới menu điều hướng trên cùng). Nó thường chứa logo hoặc tên trang web:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Sau đó, chúng tôi sử dụng CSS để tạo kiểu cho tiêu đề:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Thanh điều hướng
Thanh điều hướng chứa danh sách các liên kết để giúp khách truy cập điều hướng qua trang web của bạn:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Sử dụng CSS để tạo kiểu cho thanh điều hướng:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Nội dung
Tạo bố cục 2 cột, chia thành “nội dung phụ” và “nội dung chính”.
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Chúng tôi sử dụng CSS Flexbox để xử lý bố cục:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Sau đó thêm truy vấn phương tiện để làm cho bố cục phản hồi nhanh. Điều này sẽ đảm bảo rằng trang web của bạn trông đẹp trên tất cả các thiết bị (máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại). Thay đổi kích thước cửa sổ trình duyệt để xem kết quả.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Mẹo: Để tạo một loại bố cục khác, chỉ cần thay đổi độ rộng linh hoạt (nhưng hãy đảm bảo rằng nó tăng thêm tối đa 100%).
Mẹo: Bạn có thắc mắc quy tắc @media hoạt động như thế nào không? Đọc thêm về nó trong chương CSS Media Queries của chúng tôi .
Mẹo: Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi .
Kích thước hộp là gì?
Bạn có thể dễ dàng tạo ba hộp nổi cạnh nhau. Tuy nhiên, khi bạn thêm thứ gì đó làm tăng chiều rộng của mỗi hộp (ví dụ: phần đệm hoặc đường viền), hộp sẽ bị vỡ. Thuộc box-sizing
cho phép chúng ta bao gồm phần đệm và đường viền trong tổng chiều rộng (và chiều cao) của hộp, đảm bảo rằng phần đệm nằm bên trong hộp và nó không bị vỡ.
Bạn có thể đọc thêm về thuộc tính box-sizing trong Hướng dẫn định cỡ hộp CSS của chúng tôi.
Chân trang
Cuối cùng, chúng ta sẽ thêm footer.
<div class="footer">
<h2>Footer</h2>
</div>
Và tạo kiểu cho nó:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Chúc mừng! Bạn đã xây dựng một trang web đáp ứng từ đầu.
Không gian trường học W3
Nếu bạn muốn tạo trang web của riêng mình và lưu trữ các tệp .html, hãy thử trình tạo trang web của chúng tôi, có tên là W3schools Spaces :