Bây giờ chúng ta sẽ cùng nhau phác họa chân dung của website tương lai.
Chúng ta cũng sẽ thêm chút "màu sắc" cho trang index.html mà chúng ta đã thảo luận trong các phần trước. Đây là mã HTML trong phần trước.<!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;
}
.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;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div><br>
<div class="row">
<div class="column side">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<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>
</div>
<div class="column middle">
<h2>Lịch Sử và Văn Hóa</h2>
<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="column side">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. 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="footer">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Trước hết là "chân dung mới":
Trang Home Page sẽ có 3 menu liên kết qua 3 trang: About us, Contact và Các món ăn.
Chúng ta cũng sử dụng bố cục 2 column cho trang web "thời thượng" hơn.
Như vậy chúng ta sẽ cần:
1.Hoàn thiện trang index.html
2.Tạo một trang About Us
3.Tạo một trang Contact, sử dụng phần tử HTML Form (chúng ta sẽ thảo luận ngay dưới đây)
4.Tạo một trang Các món ăn phải thử khi đến Hội An
5.Chúng ta cũng sẽ cần một số hình ảnh để website nhìn "khí thế" hơn. Tạm thời chúng ta sẽ tải từ Pixabay.
6.Chúng ta sẽ hoàn thiện trang About Us, Contact, Các món ăn trên OnlineGDB. Sau đó chúng ta mới tải lên Web hosting và đặt các đường dẫn hình ảnh đúng từ thư mục images của chúng ta tại 000webhost.
Phần này chúng ta sẽ hoàn thiện index.html. Phác họa sẽ đại khái như sau:
Chúng ta sẽ tạo 2 class column: leftcolumn chiếm 75% và rightcolumn chiếm 25% chiều ngang.
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
}
Hai class leftcolumn và rightcolumn chỉ mới giải quyết phần màu nâu bên ngoài. Chúng ta cần thêm một class để tạo những phần màu xanh nhỏ, như từng tấm thẻ riêng biệt nằm bên trong, chúng ta sẽ đặt tên là card với nền "trắng tinh" để sau này chúng ta thêm nội dung, màu sác, hình ảnh...
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
Giờ đây mã HTML của chúng ta sẽ như sau:
<!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;
}
.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;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div><br>
<div class="row">
<div class="column side">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<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>
</div>
<div class="column middle">
<h2>Lịch Sử và Văn Hóa</h2>
<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="column side">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. 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="footer">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Sử dụng OnlineGDB để thực thi. Mọi thứ ổn.
Bây giờ chúng ta sẽ chuyển nội dung cột đầu tiên qua cột thứ hai. Sau đó đặt mọi thứ vào các card riêng biệt, cuối cùng đặt các card vào cột leftcolumn và rightcolumn tương ứng. Chúng ta cũng cần thêm một class fakeimg để hiện những mảng màu xám tạm thời coi như hình ảnh minh họa.
Đây là mã HTML hiện tại
<!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;
}
.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;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</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="fakeimg" style="height:200px;">Image</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="fakeimg" style="height:200px;">Image</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="fakeimg" style="height:100px;">Image</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="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></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 cần tạm thời "lấp đầy" những mảng màu xám bằng hình ảnh. Nói "tạm thời", vì khi upload lên 000webhost, chúng ta cần đường dẫn hình ảnh tại thư mục images.
Lưu ý khi sử dụng hình ảnh: Hoặc là hình ảnh sở hữu của bạn, hoặc là cần sử dụng hình ảnh miễn phí hoặc được phép chia sẻ, và tùy trường hợp đôi khi bạn phải ghi rõ nguồn, cung cấp liên kết đến giấy phép.
Hình ảnh có rất nhiều kích thước khác nhau, khi bạn sử dụng hình ảnh của riêng bạn, upload lên web hosting thì rất dễ dàng nhưng cần thiết để cắt, xén, chỉnh sửa sao cho phù hợp. Tuy nhiên nếu là một hình ảnh bất kỳ thì ít nhất chúng ta cũng cần sử dụng CSS để cắt xén soa cho phù hợp ở mức tối thiểu.
Chúng ta sẽ thêm một class crop để làm việc đó
.crop {
width: 100%;
height: 200px;
overflow: hidden;
}
.crop img {
width: 100%;
height: 400px;
margin: -100px 0 0 -100px;
}
Chúng ta đã thảo luận về overflow trong phần trước.
Chúng ta sử dụng margin nhằm "tuyển chọn" phần nào của bức ảnh ta sẽ lấy. Margin top là -100px có nghĩa là giống như ta đẩy bức ảnh lên, chỉ lấy phần ở dưới. Tương tự với margin left là -100px, giống như việc ta đẩy bức ảnh qua bên trái, chỉ lấy phần bên phải mà thôi.
Mục đích là trước khi crop, chúng ta lựa "phần ngon" của bức ảnh. Bạn có thể điều chỉnh tùy ý bạn.
Và đây là mã HTML hiện tại của chúng ta.
<!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="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</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">
<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">
<img src="https://live.staticflickr.com/65535/53798251540_2951706df9_h.jpg" alt="Hoi An">
</div>
<div class="crop">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Hoi An">
</div>
<div class="crop">
<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
Không có nhận xét nào:
Đăng nhận xét