Chúng ta sẽ tạo thêm các trang About Us, Contact và Các Món Ăn sau đó mới upload lên web hosting. Nhưng trước khi tạo thêm các trang, chúng ta sẽ "tinh chỉnh" một chút trang index.html.
Chúng ta thấy những hình ảnh bên column bên phải cần có chiều cao thấp hơn vì nếu giữ nguyên chiều cao là 200px các hình ảnh bên phải có vẻ không thẩm mỹ lắm.Chúng ta có thể viết thêm một class crop cho các hình ảnh bên phải, hoặc cũng có thể thêm style height vào thẻ <div>
<div class="crop" style="height:120px;">
Ngoài ra chúng ta cũng thay các nhãn link1, link2, link3 bằng tên các trang.
Và đây là mã 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>
Bấm Run để thực thi
Bây giờ chúng ta sẽ lưu toàn bộ "công trình" dưới tên file là index.html và chuyển qua tạo một trang mới. Lưu ý là chúng ta tạo các trang "sơ sài" nhất, đơn giản nhất, nói cách khác chúng ta sẽ tạo những trang web "không hoàn hảo"
About Us
Chúng ta sẽ phác họa trang about us.
<!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>
Mọi thứ đều không quá khó để hiểu. Bấm Run để thực thi
Chúng ta sẽ lưu lại với tên file là about.html
Không có nhận xét nào:
Đăng nhận xét