Làm thế nào để - 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 trang web từ Scratch
Một "Bản thảo Bố cục"
Có thể là khôn ngoan khi vẽ một bản nháp bố cục của thiết kế trang trước khi tạo một trang web:
Thanh điều hướng
Nội dung bên lề
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ả phong cách của tài liệu HTML. Chúng tôi sẽ kết hợp HTML và CSS để tạo ra 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 .
Thí 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>
Giải thích ví dụ
- Khai báo
<!DOCTYPE html>
định nghĩa tài liệu này là HTML5 - Phần
<html>
tử là phần tử gốc của một trang HTML - Phần
<head>
tử chứa thông tin meta về tài liệu - Phần
<title>
tử chỉ định tiêu đề cho tài liệu - Phần
<meta>
tử phải xác định bộ ký tự là UTF-8 - Phần
<meta>
tử có name = "viewport" giúp trang web trông đẹp trên tất cả các thiết bị và độ phân giải màn hình - Phần
<style>
tử chứa các kiểu cho trang web (bố cục / thiết kế) - Phần
<body>
tử chứa nội dung trang hiển thị - Phần
<h1>
tử xác định một tiêu đề lớn - Phần
<p>
tử xác định một đoạn văn
Tạo nội dung trang
Bên trong <body>
phần tử của trang web của chúng tôi, chúng tôi sẽ sử dụng "Bản thảo 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 bên lề
- 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 một biểu trưng 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, được 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 các truy vấn phương tiện để làm cho bố cục đáp ứng. Đ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 chiều rộng linh hoạt (nhưng đảm bảo rằng nó tăng lên đến 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 Truy vấn phương tiện CSS 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 một thứ gì đó mà mở rộng chiều rộng của mỗi hộp (ví dụ: đệm hoặc đường viền), hộp sẽ bị vỡ. Thuộc box-sizing
tính cho phép chúng tôi 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à không bị vỡ.
Bạn có thể đọc thêm về thuộc tính kích thước hộp trong Hướng dẫn định kích thước hộp CSS của chúng tôi .
Chân trang
Cuối cùng, chúng tôi sẽ thêm một 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 */
}
Xin chúc mừng! Bạn đã xây dựng một trang web đáp ứng từ đầu.
W3Schools Spaces
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 miễn phí của chúng tôi , được gọi là W3schools Spaces :