Người Viết : ViKiMi Editor
Những kiến thức tổng quan tiếp theo mà bạn cần nắm bắt về HTML / Hyper Text Markup Language
Chúng ta biết rằng HTML thật tốt giúp thiết kế bố cục ban đầu cho một Website. Nhưng để dễ dàng nắm bắt thật nhanh vấn đề này không gặp khó khăn thì chúng ta cần hiểu điều gì cốt lõi. Đó chính là điều mà chúng ta sẽ phải làm, hiểu những cơ bản của HTML. Xây dựng một bộ khung Website ban đầu bằng những thứ cơ bản & kiến thức cơ bản.
HTML là một trong những ngôn ngữ ban đầu nên rất dễ nắm bắt.
Nếu quá vội vàng thì có vẻ như không được tốt lắm. Chính vì vậy, cần phải nắm bắt thứ đơn giản nhất này. Và bạn sẽ không còn gặp những khó khăn trong tương lai , thậm chí tốn thời gian tìm kiếm lại.
+ Sự thật ngôn ngữ HTML phải kết hợp với các ngôn ngữ khác để làm nên một Website đúng chuẩn
+ Tuy nhiên, hãy chọn cách an toàn đó là nắm thật tốt HTML trước khi chuyển qua các ngôn ngữ còn lại
Chúng ta sẽ cùng xem và hình dung cách hiển thị một Website mà mọi người vẫn thấy bằng một minh hoạ đơn giản.
Hình Ảnh Website Đơn Giản :
Nội Dung Code ::
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 5px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
background: wheat;
text-align: justify;
font-size: 20px;
padding: 2%;
}
ul {
width: 100%;
}
ul > li{
display:inline;
margin :1%;
border: 1px solid red;
}
article {
float: left;
padding: 20px;
width: 100%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>THIẾT KẾ MỘT GIAO DIỆN CƠ BẢN</h1>
<p>Đây là Website cơ bản được tạo ra nhằm mục đích giúp hình dung bố cục một Website</p>
<p>Bố cục này chỉ sử dụng HTML để hiển thị các thông tin bạn muốn bố cục trên Website. Các thông tin giúp bạn thấy cách HTML sắp sếp các thành phần hiên thị thực tế từ Code</p>
<header>
BANNER
<h2>TRANG WEB ĐẦU TIÊN</h2>
<nav>
WEBSITE MENU
<ul>
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Công Nghệ</a></li>
<li><a href="#">Giải Trí</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Giới Thiệu Công Nghệ Thông tin</h1>
<p>Công nghệ thông tin (tiếng Anh: information technology - IT), viết tắt CNTT, là một nhánh ngành kỹ thuật sử dụng máy tính và phần mềm máy tính để chuyển đổi, lưu trữ, bảo vệ, xử lý, truyền tải và thu thập thông tin.[1] </p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
PHẦN HEAD :
Chứa các thông tin về Trang Web : <Title> , <Meta> , etc
Và các <script> , <style> sẽ sử dụng trong Website
Cùng các thông tin giúp tối ưu SEO, tối ưu quảng bá và chia sẻ của Website
PHẦN BODY :
NỘI DUNG HIỂN THỊ LÊN TRÌNH DUYỆT CỦA WEBSITE SẼ Ở ĐÂY.
Chúng ta thấy rõ ràng rằng Website được chia bố cục làm 3 phần :
+ Header <Chứa BANNER> & Menu
+ Section <Chứa Nội Dung Hiển Thị Trang Web>
+ Footer <Chứa Thông Tin Footer của Website>
TÓM LẠI :
+ Vậy chúng ta có thể dễ dàng thấy được rằng mọi thông tin của Website sẽ phải xử lý. Chúng ta tập trung vào 2 phần phải làm việc chính đó là PHẦN HEAD & PHẦN BODY. Tất cả các thông tin được hiển thị trên trình duyệt sẽ nằm trong PHẦN BODY, đây là nơi các thông tin sẽ được đưa đến khách hàng nhiều nhất.
+ Do đó, chúng ta chủ yếu sẽ sắp xếp bố cục các thành phần HTML vào PHẦN BODY. Các thành phần HTML sẽ được sắp xếp sao cho đạt yêu cầu thiết kế.
+ Nếu bạn thắc mắc Website sẽ làm việc thế nào với Database thì nó sẽ nằm trong giới hạn khác.
Trong giới hạn này chúng ta chỉ quan tâm sao cho có thể thiết kế một giao diện Website Tĩnh với HTML trước tiên. Vậy là bạn cũng đã thấy một hình dung chung về Bố Cục của một Trang Web cần phải có. Thật dễ dàng để nắm bắt thiết kế cơ bản này và nó sẽ có thể áp dụng cho nhiều lần thiết kế tiếp theo.
Trong phần tới chúng ta sẽ nói nhiều hơn về các thành phần HTML cần phải làm việc cùng khi thiết kế.
