Thiết kế một file html hoàn chỉnh là yêu cầu cuối cùng của việc học html. Ở những bài trước, chúng ta đã học về các thẻ html, quan hệ giữa các thẻ html với nhau. Học xong thì có nhiều bạn thắc mắc rằng làm sao kết hợp các thẻ html đó với nhau. Thì ngay bây giờ, tại bài học này chúng ta sẽ cùng xem qua một ví dụ về file html hoàn chỉnh gồm các cấu trúc meta dành cho máy tìm kiếm, mạng xã hội, cấu trúc phân chia layout trang web. Chúng ta sẽ lấy trang chủ của một web bán hàng đơn giản làm ví dụ.
Cấu trúc của một trang web bằng html cơ bản
<!DOCTYPE HTML>
<html lang="vi">
<head>
<!-- Bảng mã sử dụng là utf-8 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- Tiêu đề trang hiển thị trên thanh tab trình duyệt -->
<title>Trang bán hàng trực tuyến abc</title>
<!-- Vị trí địa lý hướng người dùng -->
<meta name="geo.placename" content="Vietnamese" />
<meta name="geo.region" content="Vietnamese" />
<!-- Thông tin dành cho máy tìm kiếm như google -->
<meta name="title" content="Trang bán hàng trực tuyến abc"/>
<meta name="description" content="Trang bán hàng trực tuyến abc với hàng ngàn sản phẩm hấp dẫn mỗi ngày"/>
<meta name="keywords" content="Trang bán hàng trực tuyến, mua sắm, mua bán"/>
<meta name="news_keywords" content="Trang bán hàng trực tuyến, mua sắm, mua bán"/>
<meta name="author" content="shopabc.com"/>
<meta name="robots" content="index, follow"/>
<meta name='revisit-after' content='1 days'/>
<!-- Thông tin dành cho mạng xã hội như facebook -->
<meta property="og:locale" content="vi_VN" />
<meta property="og:site_name" content="Trang bán hàng trực tuyến abc" />
<meta property="og:url" content="https://shopabc.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Trang bán hàng trực tuyến abc" />
<meta property="og:description" content="Trang bán hàng trực tuyến abc với hàng ngàn sản phẩm hấp dẫn mỗi ngày" />
<meta property="og:image" content="img/system/cover.jpg" />
<!-- Thiết lập thông số cho việc hiển thị -->
<meta name='viewport' content="width=device-width,initial-scale=1" />
<!-- Đường dẫn cơ sở cho các tài nguyên trên trang web -->
<base href="https://shopabc.com/" />
<!-- Icon trang web -->
<link href='img/system/favico.png' rel="shortcut icon" type="image/png" />
<!-- Nhúng tài liệu định kiểu từ file bên ngoài-->
<link href="css/index.css" rel="stylesheet" type="text/css"/>
<!-- Nhúng tài liệu định kiểu trực tiếp ngay trên html -->
<style>
body{
font-size: 16px;
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<!-- Phần đầu trang -->
<header>
<img src="img/system/logo.png" alt="logo" id="logo">
<form action="search" method="get">
<input type="text" name="q">
<input type="submit" value="Tìm sản phẩm">
</form>
</header>
<!-- Phần nội dung chính -->
<main>
<!-- Menu chính -->
<nav class="mainmenu">
<ul>
<li>
<a href="#" title="Trang chủ">Trang chủ</a>
</li>
<li>
<a href="#" title="Sản phẩm">Sản phẩm</a>
</li>
<li>
<a href="#" title="Tin tức">Tin tức</a>
</li>
</ul>
</nav>
<!-- Tiêu đề trang -->
<h1>Trang bán hàng trực tuyến abc</h1>
<!-- Slide sản phẩm -->
<div class="slide">
<img src="img/slide1.jpg" alt="slider">
<img src="img/slide2.jpg" alt="slider">
<img src="img/slide3.jpg" alt="slider">
</div>
<!-- Sản phẩm -->
<div class="content">
<!-- Sản phẩm bán chạy -->
<div class="product_box">
<h2>Sản phẩm bán chạy</h2>
<div>
<div class="product_item">
Sản phẩm 1
</div>
<div class="product_item">
Sản phẩm 2
</div>
<div class="product_item">
Sản phẩm 3
</div>
<div class="product_item">
Sản phẩm 4
</div>
</div>
</div>
<!-- Sản phẩm mới -->
<div class="product_box">
<h2>Sản phẩm mới</h2>
<div>
<div class="product_item">
Sản phẩm 5
</div>
<div class="product_item">
Sản phẩm 6
</div>
<div class="product_item">
Sản phẩm 7
</div>
<div class="product_item">
Sản phẩm 8
</div>
</div>
</div>
</div>
<!-- Phần side bar bên phải của trang -->
<div class="sidebar">
...
</div>
</main>
<!-- Chân trang -->
<footer>
Copyright 2019 - trang bán hàng trực tuyến abc
<br>
Địa chỉ: 123 cách mạng tháng 8, thành phố Hồ Chí Minh
<br>
Điện thoại: 0967 000 000
</footer>
<!-- Chèn file mã lệnh bên ngoài -->
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
Hầu hết các thẻ html trong ví dụ này chúng ta đã được tìm hiểu ở những bài học trước. Tuy nhiên, có một vài thẻ mới và những điều lưu ý mà chúng ta cần phải để ý như sau:
- <html lang="vi"> : Thuộc tính lang='vi' khai báo chúng ta sử dụng ngôn ngữ tiếng Việt để hiển thị nội dung.
- <meta name='viewport' content="width=device-width,initial-scale=1" /> : Trong đó, width=device-width quy định tầm hiển thị trang web bằng với chiều rộng thiết bị của người dùng. initial-scale=1 quy định tỉ lệ thu phóng là 1.0.
- <base href="https://shopabc.com/" /> : Khai báo đường dẫn cơ sở cho các tài nguyên trên trang là https://shopabc.com/.
- <!-- Text --> Trình bày đoạn ghi chú (text), đoạn ghi chú sẽ không hiển thị khi chúng ta xem web trên trình duyệt.
Qua ví dụ trên, hy vọng các bạn đã nắm được cách kết hợp các thẻ html đã học lại với nhau để tạo thành một file html hoàn chỉnh ra sao. Tuy nhiên, cấu trúc ở ví dụ đưa ra là một trong những cấu trúc mẫu chứ không nhất thiết chúng ta phải code giống toàn bộ như vậy.
Ở những bài học sau, chúng ta sẽ thực hành học cách định dạng cho tài liệu html nhìn đẹp hơn, bằng css, sau đó chúng ta sẽ thực hành dựng giao diện bằng html và css cho trang đăng ký, đăng nhập, trang chủ shop...
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Cấu trúc chung của một trang web bằng html cơ bản