Trước khi upload lên web hosting, chúng ta sẽ thêm một chút nội dung.
Ta cũng sẽ thêm một vài "thứ gì đó" vào phần bên trái cho đỡ trống trải. Đây là mã HTML sau khi đã bổ sung nội dung
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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="https://live.staticflickr.com/65535/53798056483_93a6438826_h.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="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" 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="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" 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>
Sử dụng OnlineGDB để thực thi.
Lưu lại với tên file là index.html.
Bây giờ chúng ta cần login vào 000webhost để upload file index.html lên.
Sau khi đã login, bấm vào File Manager, sau đó truy cập vào thư mục gốc public_html.
Chúng ta có 2 cách:
1.Upload file index.html "nguyên xi" như code bên trên. Sau đó ta sẽ sử dụng chức năng Edit trên 000webhost để sửa lại code để sử dụng Bootstrap 5 mà chúng ta sẽ tải về và upload lên 000webhost. Lưu ý là trong phần trước, chúng ta chỉ thử nghiệm với Bootstrap3, giờ đây chúng ta sẽ cần tải và cài đặt Bootstrap 5.
2. Chúng ta vẫn cần tải và cài đặt Bootstrap 5. Sau đó, chúng ta sửa file index.html và upload lên 000webhost.
Trước hết chúng ta cần tải Bootstrap 5.
Sau khi giả nén chúng ta sẽ có 2 thư mục là css và js. Tương tự như phần trước, chúng ta upload tất cả lên thư mục tương ứng trên 000webhost. Bạn có thể ghi đè lên những file cũ cũng được mà xóa hết file cũ và upload file mới lên cũng được.
Đây là nội dung file index.html đã được sửa lạ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>
<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="https://live.staticflickr.com/65535/53798056483_93a6438826_h.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="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" 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="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" 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>
Truy cập địa chỉ website miễn phí của bạn, chúng ta sẽ thấy "thành quả vĩ đại" của chúng ta.
Không có nhận xét nào:
Đăng nhận xét