Chúng ta sẽ cần chỉnh sửa hình ảnh. Đầu tiên chúng ta cần tải một số hình ảnh miễn phí từ pixabay.
Chúng ta sẽ search cụm từ Da Nang để tìm kiếm vài hình ảnh miễn phí về Đà Nẵng.Một điều nữa cần lưu ý: Khi sử dụng img-fluid, cho phép chiều ngang của ảnh sẽ chiếm max-width: 100%; và height: auto; Có nghĩa là trong trường hợp của chúng ta, những ảnh chèn vào bên trái sẽ chiếm bề ngang là 4/12 và những ảnh chèn vào cột bên phải sẽ chiếm 8/12 bề ngang. Điều đó có nghĩa là với những ảnh hình vuông, khi nằm trong webpage của chúng ta, cả 4 cạnh sẽ co lại cho vừa với chiều ngang.
Chúng ta cần những ảnh hiển thị hình chữ nhật vì vậy cần thiết phải chỉnh sửa ảnh một chút trước khi đưa vào webpage. Đơn giản nhất là sử dụng Microsoft Paint.
Mở hình cần chỉnh sửa bằng Paint, sau đó bấm chọn Select => Tiếp tục bấm vào hình chọn một khung hình chữ nhật.
Bấm Edit =>Copy, tiếp tục bấm File=> New, sau đó bấm Edit=>Paste và lưu lại với một tên file nào đó.
Tiếp tục với những hình khác nếu thấy cần thiết.
Sau đó chúng ta sẽ upload hình vào thư mục images trên web hosting. Bạn cần lưu ý đường dẫn của hình ảnh. Đây là ví dụ với hình ảnh của chúng tôi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="images/danangab.jpg" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng là một trong những thành phố lớn và phát triển nhanh nhất của Việt Nam, nằm ở miền Trung trên bờ biển Đông. Với vị trí địa lý thuận lợi, Đà Nẵng là cửa ngõ quan trọng kết nối miền Bắc và miền Nam của đất nước.</p>
<h3 class="mt-4">Thông tin tham khảo</h3>
<p>Bấm vào link bên dưới để biết thêm chi tiết</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Khách sạn, nhà nghỉ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thông tin du lịch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ẩm thực</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Đặc điểm địa lý</h2>
<div> <img class="img-fluid" src="images/lovebr.png" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng nằm bên bờ sông Hàn và có bờ biển dài với nhiều bãi biển đẹp như Mỹ Khê, Non Nước, và Nam Ô. Thành phố này cũng gần các di sản văn hóa thế giới như phố cổ Hội An và thánh địa Mỹ Sơn.</p>
<h2 class="mt-5">Văn hóa và ẩm thực</h2>
<div> <img class="img-fluid" src="images/boat.png" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng có nền văn hóa đa dạng, kết hợp giữa truyền thống và hiện đại. Lễ hội pháo hoa quốc tế Đà Nẵng (DIFF) là một trong những sự kiện văn hóa lớn của thành phố, thu hút nhiều du khách trong và ngoài nước. Ẩm thực Đà Nẵng phong phú với nhiều món ăn ngon như mì Quảng, bánh tráng cuốn thịt heo, bún chả cá, và các món hải sản tươi sống.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Và đây là kết quả
Chúng ta sẽ tạo một trang bài viết đơn giản. Mục tiêu là trên Homepage chỉ thể hiện một phần bài viết. Khi người đọc bấm vào tiêu đề bài viết thì sẽ chuyển qua một trang toàn nội dung bài viết. Không hoàn hảo vì chúng ta vẫn còn thiếu một số kiến thức. Nhưng sẽ giúp chúng ta có một cái nhìn "sơ sơ" về cách vận hành của các webiste kiểu như blog chẳng hạn.
Để tự động thể hiện một phần bài viết, chúng ta cần hiểu về Text truncation
Đối với nội dung dài, chúng ta có thể thêm lớp .text-truncate để cắt bớt văn bản bằng dấu ba chấm.
Sau đó, ví dụ khi bạn bấm vào tiêu đề để yêu cầu toàn bộ nội dung thì sử dụng display: inline-block hoặc display: block.
Trong ví dụ của chúng ta, chúng ta sẽ chỉ cần sử dụng lớp .text-truncate để cắt bớt văn bản bằng dấu ba chấm. Sau đó khi người sử dụng bấm vào tiêu đề, chúng ta sẽ chuyển qua trang toàn bài viết. Trước hết chúng ta thử với cách đơn giản nhất, thêm class="text-truncate" vào thẻ <p>. Đây là code HTML của chúng ta sau khi đã thêm class="text-truncate"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="images/danangab.jpg" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng là một trong những thành phố lớn và phát triển nhanh nhất của Việt Nam, nằm ở miền Trung trên bờ biển Đông. Với vị trí địa lý thuận lợi, Đà Nẵng là cửa ngõ quan trọng kết nối miền Bắc và miền Nam của đất nước.</p>
<h3 class="mt-4">Thông tin tham khảo</h3>
<p>Bấm vào link bên dưới để biết thêm chi tiết</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Khách sạn, nhà nghỉ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thông tin du lịch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ẩm thực</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Đặc điểm địa lý</h2>
<div> <img class="img-fluid" src="images/lovebr.png" alt="Đất Việt Lập Trình"></div>
<p class="text-truncate">Đà Nẵng nằm bên bờ sông Hàn và có bờ biển dài với nhiều bãi biển đẹp như Mỹ Khê, Non Nước, và Nam Ô. Thành phố này cũng gần các di sản văn hóa thế giới như phố cổ Hội An và thánh địa Mỹ Sơn.</p>
<h2 >Văn hóa và ẩm thực</h2>
<div> <img class="img-fluid" src="images/boat.png" alt="Đất Việt Lập Trình"></div>
<p class="text-truncate">Đà Nẵng có nền văn hóa đa dạng, kết hợp giữa truyền thống và hiện đại. Lễ hội pháo hoa quốc tế Đà Nẵng (DIFF) là một trong những sự kiện văn hóa lớn của thành phố, thu hút nhiều du khách trong và ngoài nước. Ẩm thực Đà Nẵng phong phú với nhiều món ăn ngon như mì Quảng, bánh tráng cuốn thịt heo, bún chả cá, và các món hải sản tươi sống.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Lưu ý là chúng ta đang thực hành trên web hosting 000webhost.
Truy cập vào website sau khi đã sửa trang index.html
Nội dung đã được "xén bớt" chỉ còn đúng một dòng. Chúng ta sẽ quay lại chủ đề này sau, hiện tại chúng ta sẽ tạm chấp nhận kết quả tương đối như vậy và chuyển qua trang toàn nội dung bài viết.
Chúng ta sẽ theo một cách đơn giản nhất, đó là "bưng nguyên" nội dung của index.html, chỉ cần thay phần bên phải thành nội dung đầy đủ của bài viết và đặt tên phù hợp. Ví dụ ta sẽ có hai trang:
Trang dacdiemdialy.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="images/danangab.jpg" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng là một trong những thành phố lớn và phát triển nhanh nhất của Việt Nam, nằm ở miền Trung trên bờ biển Đông. Với vị trí địa lý thuận lợi, Đà Nẵng là cửa ngõ quan trọng kết nối miền Bắc và miền Nam của đất nước.</p>
<h3 class="mt-4">Thông tin tham khảo</h3>
<p>Bấm vào link bên dưới để biết thêm chi tiết</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Khách sạn, nhà nghỉ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thông tin du lịch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ẩm thực</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Đặc điểm địa lý</h2>
<div> <img class="img-fluid" src="images/lovebr.png" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng nằm bên bờ sông Hàn và có bờ biển dài với nhiều bãi biển đẹp như Mỹ Khê, Non Nước, và Nam Ô. Thành phố này cũng gần các di sản văn hóa thế giới như phố cổ Hội An và thánh địa Mỹ Sơn.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Trang vanhoaamthuc.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="images/danangab.jpg" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng là một trong những thành phố lớn và phát triển nhanh nhất của Việt Nam, nằm ở miền Trung trên bờ biển Đông. Với vị trí địa lý thuận lợi, Đà Nẵng là cửa ngõ quan trọng kết nối miền Bắc và miền Nam của đất nước.</p>
<h3 class="mt-4">Thông tin tham khảo</h3>
<p>Bấm vào link bên dưới để biết thêm chi tiết</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Khách sạn, nhà nghỉ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thông tin du lịch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ẩm thực</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2 >Văn hóa và ẩm thực</h2>
<div> <img class="img-fluid" src="images/boat.png" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng có nền văn hóa đa dạng, kết hợp giữa truyền thống và hiện đại. Lễ hội pháo hoa quốc tế Đà Nẵng (DIFF) là một trong những sự kiện văn hóa lớn của thành phố, thu hút nhiều du khách trong và ngoài nước. Ẩm thực Đà Nẵng phong phú với nhiều món ăn ngon như mì Quảng, bánh tráng cuốn thịt heo, bún chả cá, và các món hải sản tươi sống.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Chúng ta cũng cần sửa lại trang index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="images/danangab.jpg" alt="Đất Việt Lập Trình"></div>
<p>Đà Nẵng là một trong những thành phố lớn và phát triển nhanh nhất của Việt Nam, nằm ở miền Trung trên bờ biển Đông. Với vị trí địa lý thuận lợi, Đà Nẵng là cửa ngõ quan trọng kết nối miền Bắc và miền Nam của đất nước.</p>
<h3 class="mt-4">Thông tin tham khảo</h3>
<p>Bấm vào link bên dưới để biết thêm chi tiết</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Khách sạn, nhà nghỉ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thông tin du lịch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ẩm thực</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2><a class="nav-link" href="dacdiemdialy.html">Đặc điểm địa lý</a></h2>
<div> <img class="img-fluid" src="images/lovebr.png" alt="Đất Việt Lập Trình"></div>
<p class="text-truncate">Đà Nẵng nằm bên bờ sông Hàn và có bờ biển dài với nhiều bãi biển đẹp như Mỹ Khê, Non Nước, và Nam Ô. Thành phố này cũng gần các di sản văn hóa thế giới như phố cổ Hội An và thánh địa Mỹ Sơn.</p>
<h2><a class="nav-link" href="vanhoaamthuc.html">Văn hóa và ẩm thực</a></h2>
<div> <img class="img-fluid" src="images/boat.png" alt="Đất Việt Lập Trình"></div>
<p class="text-truncate">Đà Nẵng có nền văn hóa đa dạng, kết hợp giữa truyền thống và hiện đại. Lễ hội pháo hoa quốc tế Đà Nẵng (DIFF) là một trong những sự kiện văn hóa lớn của thành phố, thu hút nhiều du khách trong và ngoài nước. Ẩm thực Đà Nẵng phong phú với nhiều món ăn ngon như mì Quảng, bánh tráng cuốn thịt heo, bún chả cá, và các món hải sản tươi sống.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Bây giờ truy cập lại website, chúng ta bấm vào từng tiêu đề bài viết
Phần tiếp theo
Không có nhận xét nào:
Đăng nhận xét