Chúng ta đã tạo bốn trang web, bây giờ chúng ta sẽ upload chúng lên web hosting.
Để tiện theo dõi, chúng ta tổng hợp lại bốn file.index.html
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
padding: 20px;
text-align: center;
background: #C0C0C0;
color: white;
font-size: 30px;
background-image: url("https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg");
}
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: #C0C0C0;
}
.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.row::after {
content: "";
display: table;
clear: both;
}
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.crop {
width: 100%;
height: 200px;
overflow: hidden;
}
.crop img {
width: 100%;
height: 400px;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">About us</a>
<a href="#">Contact</a>
<a href="#">Các món ăn</a>
</div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<div class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Hoi_An_%28I%29.jpg" alt="Hoi An">
</div>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.</p>
<p>Hội An từng là một thương cảng sầm uất từ thế kỷ 15 đến thế kỷ 19, nơi các thương nhân từ Nhật Bản, Trung Quốc, Ấn Độ và châu Âu giao thương. Sự giao thoa văn hóa này đã tạo nên một Hội An độc đáo với kiến trúc nhà cổ, đền chùa và hội quán mang đậm dấu ấn đa văn hóa. Các công trình như Chùa Cầu Nhật Bản, Hội Quán Phúc Kiến, và những ngôi nhà cổ có niên đại hàng trăm năm là minh chứng sống động cho thời kỳ hoàng kim của Hội An.</p>
</div>
<div class="card">
<h2>Ẩm Thực Độc Đáo</h2>
<div class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Hội_An%2C_Ancient_Town%2C_2020-01_CN-06.jpg" alt="Hoi An">
</div>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo.</p>
<p>Các món ăn như Cao Lầu, Mì Quảng, Bánh Bao Bánh Vạc, và Cơm Gà Hội An đều mang hương vị đặc trưng, không thể tìm thấy ở bất kỳ nơi nào khác. Đặc biệt, du khách không thể bỏ qua việc thưởng thức cà phê tại các quán cà phê cổ kính ven sông, vừa nhâm nhi vừa ngắm nhìn khung cảnh thanh bình.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Us</h2>
<div class="crop" style="height:120px;">
<img src="https://live.staticflickr.com/65535/53796886232_859ee7b5f2_h.jpg" alt="Hoi An">
</div>
<p>Một website đơn giản, gồm hai cột, nội dung....</p>
</div>
<div class="card">
<h3>Các địa điểm nổi tiếng</h3>
<div class="crop" style="height:120px;">
<img src="https://live.staticflickr.com/65535/53798251540_2951706df9_h.jpg" alt="Hoi An">
</div><br>
<div class="crop" style="height:120px;">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Hoi An">
</div><br>
<div class="crop" style="height:120px;">
<img src="https://live.staticflickr.com/65535/53798059953_c3ffcac096_h.jpg" alt="Hoi An">
</div>
</div>
</div>
</div>
<div class="footer">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Đất Việt Lập Trình</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-us {
display: flex;
align-items: center;
height: 100vh;
width: 100%;
padding: 90px 0;
background: #fff;
}
.pic {
height: auto;
width: 400px;
border-radius: 12px;
}
.about {
width: 85%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.text {
width: 50%;
}
.text h2 {
color: #333;
font-size: 90px;
font-weight: 600;
margin-bottom: 10px;
}
.text p {
color: #333;
font-size: 18px;
line-height: 25px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<section class="about-us">
<div class="about">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Boki-avatar.jpg" class="pic" />
<div class="text">
<h2>About Us</h2>
<p>Một website đơn giản, gồm hai cột và ba trang nội dung nói về Hội An. Một địa điểm du lịch tuyệt vời ở miền Trung Việt Nam! Cảm ơn bạn đã ghé thăm, chúc bạn thành công trong cuộc sống!</p>
</div>
</div>
</section>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.colleft {
float: left;
width: 25%;
margin-top: 6px;
}
.colright {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
}
</style>
</head>
<body>
<h2>Contact Us</h2>
<p>Cám ơn bạn đã ghé thăm website. Vui lòng điền thông tin và nhấn nút Gửi.</p>
<div class="container">
<form action="">
<div class="row">
<div class="colleft">
<label for="fname">Tên bạn</label>
</div>
<div class="colright">
<input type="text" id="fname" name="firstname" placeholder="Tên bạn..">
</div>
</div>
<div class="row">
<div class="colleft">
<label for="subject">Nội dung</label>
</div>
<div class="colright">
<textarea id="subject" name="subject" placeholder="Xin viết nội dung ở đây.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Gửi">
</div>
</form>
</div>
</body>
</html>
monan.html
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Các món ăn nên thử khi đến Hội An</h2>
<p>Nếu bạn có cơ hội đến Hội An, đừng quên thử những món ăn này để trải nghiệm hương vị ẩm thực độc đáo của thành phố cổ này.</p>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Cao Lau" width="600" height="400">
</a>
<div class="desc">Cao Lầu: Một món mì đặc trưng của Hội An với sợi mì dai, thịt xá xíu, giá đỗ, rau sống và bánh tráng. Món này có hương vị đặc biệt nhờ nước dùng được làm từ nước giếng cổ Bá Lễ.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Mi Quang" width="600" height="400">
</a>
<div class="desc">Mì Quảng: Món mì với sợi mì to, dai, được phục vụ với tôm, thịt gà, trứng cút, và bánh đa. Món này thường được ăn kèm với rau sống và nước mắm chấm.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Che Bap" width="600" height="400">
</a>
<div class="desc">Chè Bắp: Món chè ngọt được làm từ bắp tươi, đường và nước cốt dừa, rất thơm ngon và mát lạnh.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Banh Mi" width="600" height="400">
</a>
<div class="desc">Bánh Mì Phượng: Một trong những tiệm bánh mì nổi tiếng nhất Hội An. Bánh mì ở đây được khen ngợi với vỏ bánh giòn, nhân thịt, patê, rau và nước sốt đặc biệt.</div>
</div>
</body>
</html>
Nếu bạn chưa lưu lại trong các phần trước thì chỉ cần copy các file trên và lưu lại với tên tương ứng. Chúng ta sẽ truy cập vào web hosting, cụ thể ở đây là 000webhost. Bấm File Manager để băt đầu. Sau đó, từ thư mục ban đầu
Chúng ta bấm vào public_html để truy cập thư mục gốc public_html
Đã đến lúc chúng ta upload tất cả lên web hosting. Chúng ta đang ở thư mục gốc public_html nên ta chỉ cần bấm vào biểu tượng upload file để upload.
Bạn có thể chọn cả 4 file để upload một lần
Về căn bản, các file .html của chúng ta còn rất nhiều khiếm khuyết, chúng được tạo chỉ để tham khảo nên nếu tách riêng CSS ra chúng ta sẽ cần phải sửa lại rất nhiều thứ, vì vậy chúng ta sẽ tạm thời chấp nhận sử dụng Internal CSS.
Bây giờ chúng ta đã có 4 file .html trên 000webhost. Chúng ta cần tạo link cho menu trên trang homepage.
Bạn highlight trang index.html=> chọn Edit => Tìm đến phần menu
Điền thông tin tương ứng và bấm Save & Close
Bây giờ chúng ta đã có thể vào website của chúng ta để "thưởng thức" tác phẩm.
Chúng ta đã có thể bấm vào About Us hay Contact...để tới trang tương ứng. Tuy nhiên tất cả còn quá đơn sơ và rất nhiều bất tiện. Ví dụ khi ở trang About Us, chúng ta không hề có một menu nào hay một button nào để quay lui hay vào trang khác, bắt buộc phải dùng chức năng back của trình duyệt
Không có nhận xét nào:
Đăng nhận xét