Mọi website đều thống nhất một "xì-tai" chứ không thể mỗi trang mỗi kiểu.
Tuy nhiên, mục đích của chúng ta là thực hành nhiều, làm sai nhiều rồi sửa nhiều, "xì-tai" nào cũng "lạng qua" một chút...nên chúng ta thống nhất sẽ tạo nhiều trang theo phong cách khác nhau, sau đó tập hợp lại hết thành một website theo phong cách truyền thống...tào lao.Để thực hành và chạy một website, chúng ta cần làm trên web hosting, tuy nhiên để thuận lợi và nhanh hơn, chúng ta sẽ tạo các trang riêng biệt trên OnlineGDB trước, sau đó chúng ta mới upload lên 000webhost sau.
Chúng ta sẽ dùng phần Hội An đã thảo luận trong các phần trước để thử làm trang chủ của website. Đây là mã hiện tại của trang index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<link rel="stylesheet" href="css/datviet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="about-us clearfix">
<div class="image">
<img src="/images/hoi-an-8104131_640.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p class="info-text">Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li><i class="fa fa-check"></i> Cao Lầu</li>
<li><i class="fa fa-check"></i> Mì Quảng</li>
<li><i class="fa fa-check"></i> Bánh mì</li>
<li><i class="fa fa-check"></i> Hoành Thánh</li>
<li><i class="fa fa-check"></i> Chè bắp</li>
<li><i class="fa fa-check"></i> Bánh tráng đập</li>
<li><i class="fa fa-check"></i> Bánh bao</li>
<li><i class="fa fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html
Nó cần file datviet.css riêng để thể hiện màu sắc, bố cục...tuy nhiên chúng ta sẽ tạm thời ghép 2 file lại để chạy trên OnlineGDB, và đây sẽ là mã HTML mà chúng ta dùng để chạy trên OnlineGDB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<link rel="stylesheet" href="css/datviet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Reset */
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Layout */
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail h2 {
color: #333;
font-size: 36px;
margin-bottom: 42px;
position: relative;
}
/* Line cho h2 */
.about-us .detail h2:after {
background-color: #516cfe;
bottom: -6px;
content: "";
display: block;
left: 0;
height: 3px;
width: 60px;
position: absolute;
}
.about-us .detail .info-text {
margin-bottom: 22px;
}
.about-us .detail h3 {
color: #333;
font-size: 22px;
}
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
.about-us .detail .choose-list li i {
color: #4fa2fb;
font-size: 10px;
padding-right: 5px;
}
</style>
</head>
<body>
<section class="about-us clearfix">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p class="info-text">Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li><i class="fa fa-check"></i> Cao Lầu</li>
<li><i class="fa fa-check"></i> Mì Quảng</li>
<li><i class="fa fa-check"></i> Bánh mì</li>
<li><i class="fa fa-check"></i> Hoành Thánh</li>
<li><i class="fa fa-check"></i> Chè bắp</li>
<li><i class="fa fa-check"></i> Bánh tráng đập</li>
<li><i class="fa fa-check"></i> Bánh bao</li>
<li><i class="fa fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html
Chúng ta sẽ bấm Run để thực thi
Bây giờ chúng ta cần làm cho index.html có dáng vẻ một homepage hơn bằng cách tạo một Header "khí thế" hơn.
Để tạo một header "to đẹp khí thế", chúng ta sử dụng padding. Nhưng trước hết chúng ta cần coi thử cái header gốc nếu chúng ta không làm gì sẽ trông như thế nào. Chúng ta sẽ dùng màu xám để "highlight" header. Chúng ta sẽ thêm một class header như sau:
.header {
padding: 0px;
text-align: center;
background: #C0C0C0;
color: white;
Mã HTML của chúng ta bây giờ trông sẽ thế này
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<link rel="stylesheet" href="css/datviet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Reset */
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Layout */
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail h2 {
color: #333;
font-size: 36px;
margin-bottom: 42px;
position: relative;
}
.about-us .detail h2:after {
background-color: #516cfe;
bottom: -6px;
content: "";
display: block;
left: 0;
height: 3px;
width: 60px;
position: absolute;
}
.about-us .detail .info-text {
margin-bottom: 22px;
}
.about-us .detail h3 {
color: #333;
font-size: 22px;
}
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
.about-us .detail .choose-list li i {
color: #4fa2fb;
font-size: 10px;
padding-right: 5px;
}
.header {
padding: 0px;
text-align: center;
background: #C0C0C0;
color: white;
}
</style>
</head>
<body>
<div class="header">
<h1>Đất Việt Lập Trình</h1>
<p>Món ngon miền Trung</p>
</div>
<section class="about-us clearfix">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p class="info-text">Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li><i class="fa fa-check"></i> Cao Lầu</li>
<li><i class="fa fa-check"></i> Mì Quảng</li>
<li><i class="fa fa-check"></i> Bánh mì</li>
<li><i class="fa fa-check"></i> Hoành Thánh</li>
<li><i class="fa fa-check"></i> Chè bắp</li>
<li><i class="fa fa-check"></i> Bánh tráng đập</li>
<li><i class="fa fa-check"></i> Bánh bao</li>
<li><i class="fa fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html
Bấm Run để thực thi
Bây giờ chúng ta cần "nới rộng" header và làm làm cho chữ trong header cũng lớn hơn
.header {Bấm Run để thực thi
padding: 60px;
text-align: center;
background: #C0C0C0;
color: white;
font-size: 30px;
}
Chúng ta hoàn toàn có thể để header như vậy và coi như hoàn tất. Tuy nhiên, chúng ta sẽ tiếp tục thêm hình ảnh nền (background) cho header. Chúng tôi tạm sử dụng hình ảnh của Đất Việt Lập Trình được upload sẵn trên Flickr. Các bạn có thể sử dụng hoặc dùng hình ảnh của bạn. Đây là mã HTML hiện tại
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<link rel="stylesheet" href="css/datviet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Reset */
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Layout */
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail h2 {
color: #333;
font-size: 36px;
margin-bottom: 42px;
position: relative;
}
.about-us .detail h2:after {
background-color: #516cfe;
bottom: -6px;
content: "";
display: block;
left: 0;
height: 3px;
width: 60px;
position: absolute;
}
.about-us .detail .info-text {
margin-bottom: 22px;
}
.about-us .detail h3 {
color: #333;
font-size: 22px;
}
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
.about-us .detail .choose-list li i {
color: #4fa2fb;
font-size: 10px;
padding-right: 5px;
}
.header {
padding: 60px;
text-align: center;
background: #C0C0C0;
background-image: url("https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg");
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<div class="header">
<h1>Đất Việt Lập Trình</h1>
<p>Món ngon miền Trung</p>
</div>
<section class="about-us clearfix">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p class="info-text">Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li><i class="fa fa-check"></i> Cao Lầu</li>
<li><i class="fa fa-check"></i> Mì Quảng</li>
<li><i class="fa fa-check"></i> Bánh mì</li>
<li><i class="fa fa-check"></i> Hoành Thánh</li>
<li><i class="fa fa-check"></i> Chè bắp</li>
<li><i class="fa fa-check"></i> Bánh tráng đập</li>
<li><i class="fa fa-check"></i> Bánh bao</li>
<li><i class="fa fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html
Bấm Run để thực thi, chúng ta đã có một header tương đối ổn.
Phần này chỉ nhằm mục đích "khởi động", cho chúng ta thấy một header sẽ như thế nào. Chúng ta sẽ bắt tay vào làm một homepage thật sự, một website với nhiều trang trong phần sau.
Không có nhận xét nào:
Đăng nhận xét