Cách thực hiện - Xây dựng một trang web
Tìm hiểu cách tạo một trang web phản hồi nhanh và tuyệt vời, 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 với CSS Framework
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng
Một "Bản phác thảo bố cục"
Việc vẽ bản phác thảo bố cục của thiết kế trang trước khi xây dựng một trang web luôn là điều khôn ngoan.
Việc có "Bản phác thảo bố cục" sẽ giúp việc tạo một trang web trở nên dễ dàng hơn rất nhiều:
Thanh điều hướng
Ban nhạc
Mô tả của ban nhạc
Mô tả của ban nhạc
Mô tả của ban nhạc
Bài báo
Bài báo
Bài báo
Chân trang
Loại tài liệu, Thẻ meta và CSS
Loại tài liệu sẽ xác định trang dưới dạng tài liệu HTML5:
<!DOCTYPE html>
Thẻ meta phải xác định bộ ký tự là UTF-8:
<meta charset="UTF-8">
Thẻ meta khung nhìn sẽ giúp trang web hoạt động trên tất cả các thiết bị và độ phân giải màn hình:
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS sẽ đáp ứng mọi nhu cầu về kiểu dáng của chúng ta cũng như mọi khác biệt về thiết bị và trình duyệt:
<link rel="stylesheet" href="https://www.example.com.vn/w3css/3/w3.css">
Để tìm hiểu thêm về cách tạo kiểu với W3.CSS, vui lòng truy cập Hướng dẫn W3.CSS của chúng tôi.
Trang web trống đầu tiên của chúng tôi sẽ trông giống như thế này:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/3/w3.css">
<body>
<!-- Content will
go here -->
</body>
</html> Lưu ý: Nếu bạn muốn tạo một trang web từ đầu mà không cần sự trợ giúp của khung CSS, hãy đọc Hướng dẫn cách tạo trang web của chúng tôi.
Tạo nội dung trang
Bên trong phần tử <body> của trang web, chúng ta sẽ sử dụng "Layout Picture" và tạo:
- Một thanh điều hướng
- Một trình chiếu
- Một tiêu đề
- Một số phần và bài viết
- Chân trang
Yếu tố ngữ nghĩa
HTML5 đã giới thiệu một số yếu tố ngữ nghĩa mới. Các yếu tố ngữ nghĩa rất quan trọng để sử dụng vì chúng xác định cấu trúc của trang web và giúp trình đọc màn hình cũng như công cụ tìm kiếm đọc trang một cách chính xác.
Đây là một số phần tử HTML ngữ nghĩa phổ biến nhất:
Phần tử <section> có thể được sử dụng để xác định một phần của trang web có nội dung liên quan.
Phần tử <article> có thể được sử dụng để xác định một phần nội dung riêng lẻ.
Phần tử <header> có thể được sử dụng để xác định tiêu đề (trong tài liệu, phần hoặc bài viết).
Phần tử <footer> có thể được sử dụng để xác định phần chân trang (trong tài liệu, phần hoặc bài viết).
Phần tử <nav> có thể được sử dụng để xác định vùng chứa các liên kết điều hướng.
Trong hướng dẫn này, chúng tôi sẽ sử dụng các yếu tố ngữ nghĩa.
Tuy nhiên, thay vào đó bạn có muốn sử dụng phần tử <div> hay không là tùy thuộc vào bạn.
Thanh điều hướng
Trên "Bản nháp bố cục" của chúng tôi, chúng tôi có "Thanh điều hướng".
<!-- Navigation -->
<nav class="w3-bar w3-black">
<a href="#home"
class="w3-button w3-bar-item">Home</a>
<a href="#band"
class="w3-button w3-bar-item">Band</a>
<a href="#tour"
class="w3-button w3-bar-item">Tour</a>
<a href="#contact"
class="w3-button w3-bar-item">Contact</a>
</nav>Chúng ta có thể sử dụng phần tử <nav> hoặc <div> làm vùng chứa cho các liên kết điều hướng.
Lớp w3-bar là nơi chứa các liên kết điều hướng.
Lớp w3-black xác định màu của thanh điều hướng.
Lớp w3-bar-item và w3-button định kiểu các liên kết điều hướng bên trong thanh.
Trình chiếu
Trên "Bản nháp bố cục" chúng ta có một "Trình chiếu".
Đối với trình chiếu, chúng ta có thể sử dụng phần tử <section> hoặc <div> làm vùng chứa ảnh:
<!-- Slide Show -->
<section>
<img class="mySlides" src="img_la.jpg"
style="width:100%">
<img class="mySlides" src="img_ny.jpg"
style="width:100%">
<img class="mySlides" src="img_chicago.jpg"
style="width:100%">
</section>
Chúng ta cần thêm một chút JavaScript để thay đổi hình ảnh cứ sau 3 giây:
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel,
3000);
}
Mục và bài viết
Nhìn vào “Layout Draft” chúng ta có thể thấy bước tiếp theo là tạo bài viết.
Đầu tiên chúng ta sẽ tạo phần tử <section> hoặc <div> chứa thông tin về băng tần:
<section class="w3-container w3-center"
style="max-width:600px">
<h2 class="w3-wide">THE
BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
</section>
Lớp w3-container đảm nhiệm phần đệm tiêu chuẩn.
Lớp w3-center tập trung vào nội dung.
Lớp w3-wide cung cấp một tiêu đề rộng hơn.
Lớp w3-opacity cung cấp độ trong suốt của văn bản.
Kiểu chiều rộng tối đa đặt mức tối đa cho phần mô tả băng tần.
Sau đó chúng ta sẽ thêm một đoạn mô tả ban nhạc:
<section class="w3-container w3-content w3-center"
style="max-width:600px">
<p class="w3-justify">
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
Lớp w3-justify căn chỉnh lề phải và trái của văn bản.
Sau đó, tạo <section> hoặc <div> với <article> hoặc <div> về từng thành viên ban nhạc:
<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
<article class="w3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
<article class="w3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
</section> Chân trang
Cuối cùng, chúng ta sẽ sử dụng <footer> hoặc <div> để tạo footer:
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-black
w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i
class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
Powered by <a href="https://www.example.com.vn/w3css/default.asp"
target="_blank">w3.css</a>
</p>
</footer>
Các lớp fa fa là các lớp Biểu tượng Phông chữ Tuyệt vời.
Để sử dụng các lớp này, bạn phải liên kết đến thư viện Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
Để tìm hiểu thêm về cách sử dụng biểu tượng, vui lòng truy cập Hướng dẫn biểu tượng của chúng tôi.
