HTML - Bảng trình bày Web
Giới thiệu về Bảng trình bày Web
Xin chào các bạn nhà phát triển web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy.exciting vào thế giới HTML và tạo ra bảng trình bày web riêng của mình. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn qua quá trình này, ngay cả khi bạn chưa bao giờ viết một dòng mã trước đây. Vậy, hãy thắt dây an toàn và cùng nhau nhảy vào!
Bảng trình bày Web là gì?
Trước khi bắt đầu mã hóa, hãy hiểu chúng ta đang xây dựng cái gì. Một bảng trình bày web là cơ bản là một bài thuyết trình chạy trong trình duyệt web. Nó giống như PowerPoint, nhưng cooler vì bạn đang tạo nó từ đầu bằng HTML! Điều này có nghĩa là bạn có thể truy cập nó ở bất cứ đâu, bất cứ lúc nào, miễn là bạn có kết nối internet.
Thiết lập Tài liệu HTML
Hãy bắt đầu với cấu trúc cơ bản của tài liệu HTML của chúng ta. Đừng lo lắng nếu điều này trông đáng sợ ban đầu - chúng ta sẽ phân tích nó từng bước.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng trình bày Web Awsome của tôi</title>
<style>
/* Chúng ta sẽ thêm một chút CSS ở đây sau */
</style>
</head>
<body>
<!-- Các slide của chúng ta sẽ điền vào đây -->
</body>
</html>Hãy phân tích điều này:
-
<!DOCTYPE html>thông báo cho trình duyệt rằng đây là một tài liệu HTML5. -
<html lang="en">là phần tử gốc của trang HTML của chúng ta, với "en" chỉ định ngôn ngữ tiếng Anh. - Phần
<head>chứa thông tin meta về tài liệu. -
<meta charset="UTF-8">xác định mã hóa ký tự cho tài liệu. -
<meta name="viewport"...>đảm bảo việc hiển thị chính xác trên các thiết bị di động. -
<title>đặt tiêu đề cho trang web của chúng ta. - Thẻ
<style>là nơi chúng ta sẽ thêm CSS sau. -
<body>là nơi nội dung可见 của bảng trình bày web sẽ điền vào.
Tạo Slide Đầu tiên
Bây giờ, hãy tạo slide đầu tiên của chúng ta. Chúng ta sẽ sử dụng thẻ <section> để xác định mỗi slide.
<body>
<div class="slideshow-container">
<section class="slide">
<h1>Xin chào đến với Bảng trình bày Web của tôi!</h1>
<p>Được tạo bởi [Tên của bạn]</p>
</section>
</div>
</body>Ở đây, chúng ta đã:
- Thêm một
<div>với lớp "slideshow-container" để giữ tất cả các slide của chúng ta. - Tạo một
<section>với lớp "slide" cho slide đầu tiên của chúng ta. - Thêm một tiêu đề
<h1>và một đoạn văn<p>vào slide.
Thêm nhiều Slide hơn
Hãy thêm một vài slide nữa vào bộ của chúng ta:
<div class="slideshow-container">
<section class="slide">
<h1>Xin chào đến với Bảng trình bày Web của tôi!</h1>
<p>Được tạo bởi [Tên của bạn]</p>
</section>
<section class="slide">
<h2>Chúng ta sẽ bao gồm</h2>
<ul>
<li>Cơ bản HTML</li>
<li>Định dạng CSS</li>
<li>JavaScript đơn giản</li>
</ul>
</section>
<section class="slide">
<h2>Cảm ơn bạn!</h2>
<p>Bạn có câu hỏi nào không?</p>
</section>
</div>Chúng ta đã thêm hai slide nữa, mỗi slide có cấu trúc nội dung khác nhau. Slide thứ hai sử dụng danh sách không có thứ tự <ul> để hiển thị các mục liệt kê.
Định dạng Slide với CSS
Bây giờ, hãy thêm một chút style vào slide của chúng ta. Chúng ta sẽ đặt điều này trong thẻ <style> trong phần <head>:
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>Hãy phân tích CSS này:
- Chúng ta đặt
bodyvàhtmlđể có độ cao đầy đủ và loại bỏ các margin mặc định. -
.slideshow-containersử dụng flexbox cho việc sắp xếp vàscroll-snap-typeđể lướt mượt. - Mỗi
.slideđược đặt để có độ rộng tối thiểu và độ cao đầy đủ, với nội dung được căn giữa. - Chúng ta sử dụng
scroll-snap-alignđể đảm bảo slide dừng lại đúng vị trí khi lướt. - Màu nền khác nhau được đặt cho mỗi slide sử dụng
:nth-child.
Thêm các Nút Điều hướng
Để làm cho bảng trình bày web của chúng ta thân thiện hơn với người dùng, hãy thêm một vài nút điều hướng:
<body>
<div class="slideshow-container">
<!-- ... slides here ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Trước</button>
<button class="next" onclick="changeSlide(1)">Tiếp ❯</button>
<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>Chúng ta đã thêm:
- Các nút "Trước" và "Tiếp" với các sự kiện
onclick. - Một hàm
changeSlidetrong JavaScript để xử lý điều hướng.
Hãy định dạng các nút này:
<style>
/* ... previous styles ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>Nét chấm dứt
Để làm cho điều hướng của chúng ta hoạt động mượt mà, chúng ta cần thêm ID vào các slide:
<section id="slide1" class="slide">
<h1>Xin chào đến với Bảng trình bày Web của tôi!</h1>
<p>Được tạo bởi [Tên của bạn]</p>
</section>
<section id="slide2" class="slide">
<h2>Chúng ta sẽ bao gồm</h2>
<ul>
<li>Cơ bản HTML</li>
<li>Định dạng CSS</li>
<li>JavaScript đơn giản</li>
</ul>
</section>
<section id="slide3" class="slide">
<h2>Cảm ơn bạn!</h2>
<p>Bạn có câu hỏi nào không?</p>
</section>Kết luận
Chúc mừng! Bạn đã tạo ra bảng trình bày web riêng của mình bằng HTML, CSS và một chút JavaScript. Đây chỉ là bước đầu - bạn bây giờ có thể thử nghiệm với các phong cách khác nhau, thêm các yếu tố tương tác hơn hoặc thậm chí là tích hợp các hiệu ứng动画.
Nhớ rằng, phát triển web là về việc thực hành và sáng tạo. Đừng ngại điều chỉnh mã và xem会发生什么. Ai biết được? Bạn có thể khám phá ra điều gì đó tuyệt vời!
Chúc các bạn may mắn, các pháp sư web tương lai!
Credits: Image by storyset