Thiết Kế Trang Web Đơn Giản

Thiết kế một trang web đơn giản có thể được biết đến như tạo một trang web tĩnh bằng mã HTML và CSS, nếu muốn nó là một trang web động sẽ cần đến JavaScript và / hoặc kịch bản phía máy chủ.

Khi đã hoàn thành thiết kế, cần sẵn sàng xuất bản trang web lên Internet. Nó đơn giản như vậy, và để làm điều này, sẽ cần một tên miền (địa chỉ trang web) và một máy chủ web (lưu trữ dữ liệu trang web).

Dưới đây là minh họa về một trang HTML đơn giản
Minh họa trang web đơn giản <!DOCTYPE html>
<html lang="vi">
<head>
<title>Đàn Guitar - Dụng Cụ Âm Nhạc</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size:16px;}
#header {padding:80px;text-align:center;background-color:#008000;color:white;cursor:pointer;}
#navbar {overflow:hidden;background-color:#ff0000;}
#navbar a {float:left;display:block;color:black;text-align:center;padding:14px 20px;font-weight:bold;text-decoration:none;}
#navbar a.right {float:right;}
#navbar a:hover {background-color:#008000;color:white;}
#main {overflow:hidden;padding:20px;}
#main div {width:33.3%;float:left}
#main h4 {width:100%;margin:0;text-align:center}
#footer {padding:20px;text-align:center;background:#f0f0f0;}
@media screen and (max-width: 600px) {body {font-size:14px;}}
</style>
<script>
var evt = document.getElementById('header');

window.onclick = function (event) {
if (event.target == evt) {
evt.innerHTML = "<h1>Chào mừng bạn đến với trang Đàn Guitar</h1>";
}
}
</script>
</head>
<body>
<div id="header" onclick="document.getElementById('header').innerHTML = '<h1>Chào mừng bạn đến với trang Đàn Guitar</h1>'"><h1>Đàn Guitar</h1></div>
<div id="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div id="main">
<h2>Giới Thiệu</h2>
<p>Đàn guitar – Dụng cụ chơi nhạc tuyệt vời cho giới trẻ …</p>
<h3>Các loại đàn guitar</h3>
<div>
<h4>Classic guitar</h4>
<p>Căng dây Nylon, cần ngắn, bản to ...</p>
</div>
<div>
<h4>Acoustic guitar</h4>
<p>Phím đàn hẹp hơn classic ...</p>
</div>
<div>
<h4>Resonator guitar</h4>
<p>Có thân đàn được làm từ nhôm ...</p>
</div>
</div>
<div id="footer"><h2>Footer</h2></div>
</body>
</html>


Các phần tử thẻ trên trang:
  • <!DOCTYPE html> dùng cho khai báo
  • Các thẻ <html>, <head>, <title> và <body>
  • Thẻ <meta> định bộ ký tự là UTF-8, name="viewport" để trang trông tốt trên mọi thiết bị
  • Thẻ <style> dùng để định kiểu
  • Thẻ <script> dùng để tạo chức năng động bằng JavaScript
  • Thẻ <h1>, <h2>, <h3>, <h4> dùng cho các đầu đề
  • Thẻ <div>, <p>, <a> dùng cho các phần, đoạn và liên kết điều hướng
Các phần nội dung trang gồm:
  • Header của trang
  • Thanh điều hướng
  • Nội dung chính
  • Footer của trang