Tạm thời coi như chúng ta đã xong phần "cỡi ngựa xem hoa", chúng ta cần quay lại web hosting của chúng ta.
Trên 000webhost, trong thư mục gốc chúng ta có 2 thư mục là CSS chứa các file .css và thư mục IMAGES chứa hình ảnh. Ngoài ra, trong thư mục gốc, chúng ta có file index.html là file mặc định xuất hiện khi người dùng truy cập vào địa chỉ website của chúng ta.Đây là nội dung file 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">
</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="fas fa-check"></i> Cao Lầu</li>
<li><i class="fas fa-check"></i> Mì Quảng</li>
<li><i class="fas fa-check"></i> Bánh mì</li>
<li><i class="fas fa-check"></i> Hoành Thánh</li>
<li><i class="fas fa-check"></i> Chè bắp</li>
<li><i class="fas fa-check"></i> Bánh tráng đập</li>
<li><i class="fas fa-check"></i> Bánh bao</li>
<li><i class="fas fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html>
Chúng ta chưa hề thảo luận về "đoạn mã lạ lùng":
<i class="fas fa-check"></i>
Font Awesome là thư viện biểu tượng và bộ công cụ của Internet, được hàng triệu nhà thiết kế, nhà phát triển và người sáng tạo nội dung sử dụng.
Chúng ta sẽ thêm đoạn mã sau vào index.html.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Trước hết bạn cần đăng nhập 000webhost, chuyển đến File Manager, tại thư mục gốc public_html, chọn index.html, sau đó bấm biểu tượng Edit
Sau khi đã vào trang index.html, bạn thêm đoạn mã phía trên vào. File index.html sẽ như sau
<!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="fas fa-check"></i> Cao Lầu</li>
<li><i class="fas fa-check"></i> Mì Quảng</li>
<li><i class="fas fa-check"></i> Bánh mì</li>
<li><i class="fas fa-check"></i> Hoành Thánh</li>
<li><i class="fas fa-check"></i> Chè bắp</li>
<li><i class="fas fa-check"></i> Bánh tráng đập</li>
<li><i class="fas fa-check"></i> Bánh bao</li>
<li><i class="fas fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html
Quay lại Dashboard của 000webhost, chúng ta bấm vào link website của chúng ta để truy cập nó, chúng ta sẽ thấy sự khác biệt.
Đây là "dung nhan" mới của website.
Thật ra mã của chúng ta có vấn đề, bạn nên thay "fas fa-check" bằng "fa fa-check" và sẽ thấy một kết quả khác, chính thống hơn vì fas fa-check chỉ nhằm mục đích "đóng thế", bạn có thể thay fas bằng fat, fao...hay bất cứ cái gì mà không hề làm kết quả thay đối, chúng ta chỉ "lấy chỗ" như vậy để sau đó thay bằng "nhân vật chính" là fa
Không có nhận xét nào:
Đăng nhận xét