Đối tác của ANewPlus ANewTips Xem Ngay!

Tạo một trang web đơn giản bằng HTML và CSS | Mã nguồn miễn phí

 Làm cách nào để tạo một trang web đẹp bằng HTML và CSS?



Sau khi xem và đọc video và bài viết sau, chắc chắn bạn sẽ tạo được các trang web đẹp bằng cách sử dụng HTML và CSS làm hình ảnh.
Xin chào các bạn hôm nay trong blog này tôi sẽ hướng dẫn các bạn cách tạo một trang web chỉ bằng HTML và CSS. Trước đó, tôi đã chia sẻ một blog về Trang web Danh mục Cá nhân Hoàn chỉnh sử dụng HTML CSS & JavaScript và bây giờ tôi sẽ tạo một trang web đơn giản.

Trang web là gì?

Một trang web là sự kết hợp của một số trang web mã, siêu liên kết và thiết kế. Có nhiều loại trang web khác nhau như trang web thương mại điện tử, trang web danh mục đầu tư, tạp chí, hoặc trang web truyền thông xã hội trên thực tế blog cũng là một trang web. Trang web có thể được sử dụng cho mục đích giáo dục hoặc tiếp thị và các mục đích khác. Các trang web không có ranh giới giới hạn.


Làm cách nào để làm cho trang web của tôi trở nên hấp dẫn?
Để làm cho một trang web đẹp và hấp dẫn, bạn cần làm theo các bước sau:

Lấy màu sắc đơn giản cho trang web của bạn.

Sử dụng tối đa 3 đến 4 màu

Làm cho trang web trở nên thích ứng (Fite ở mọi thiết bị có kích thước màn hình)

Cố gắng sử dụng cùng kích thước và họ phông chữ cho văn bản.

Giữ các liên kết điều hướng cần thiết bên trong thanh điều hướng



Tạo một trang web đơn giản bằng HTML và CSS |
 
Mình đã cung cấp tất cả các file mã HTML, CSS của trang web này bên dưới, trước khi nhảy sang file mã nguồn, bạn cần biết một số điều cơ bản về điều này.


Như bạn đã thấy trong hướng dẫn này [Thiết lập trang web], trước tiên sẽ có một hình ảnh kích thước toàn màn hình. Ở phía trên bên trái có biểu trưng của kênh youtube của tôi dưới dạng CodingLab, Ở phía trên bên phải có một số siêu liên kết với hoạt ảnh khi di chuột và ở giữa, có hai nút có hoạt ảnh khi di chuột. Như bạn đã thấy khi các siêu liên kết và nút được bao phủ trên nền trắng sẽ xuất hiện với ít hoạt ảnh, siêu liên kết và màu văn bản nút được thay đổi thành màu đen.

Nếu bạn có kiến ​​thức chung về HTML & CSS thì bạn có thể dễ dàng tạo Thiết kế trang web này hoặc nếu bạn có kiến ​​thức về JavaScript thì bạn có thể thêm các chức năng khác tùy theo nhu cầu của mình. Đối với những bạn đang cảm thấy khó khăn trong việc tạo chương trình này, tôi sẽ cung cấp đầy đủ các tệp mã nguồn của chương trình này [Tạo trang web chỉ bằng HTML & CSS].

Để lấy mã HTML và CSS đã cho, trước hết bạn cần tạo hai tệp, một tệp là tệp HTML và tệp khác là tệp CSS sau khi tạo hai tệp này bạn có thể dễ dàng sao chép-dán các mã đã cho vào tệp của mình. Bạn cũng có thể tải xuống trực tiếp tệp mã nguồn từ nút tải xuống đã cho.


Làm thế nào để tạo trang web một trang web bằng mã HTML?
Tạo tệp HTML trên máy tính của bạn với tên là index.html và sao chép-dán các mã sau vào tài liệu của bạn.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!------<title> Website Layout | CodingLab</title>------>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
  <nav>
    <div class="menu">
      <div class="logo">
        <a href="#">CodingLab</a>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </div>
  </nav>
  <div class="img"></div>
  <div class="center">
    <div class="title">Create Amazing Website</div>
    <div class="sub_title">Pure HTML & CSS Only</div>
    <div class="btns">
      <button>Learn More</button>
      <button>Subscribe</button>
    </div>
  </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: #000;
  background: #fff;
}
nav{
  position: fixed;
  background: #1b1b1b;
  width: 100%;
  padding: 10px 0;
  z-index: 12;
}
nav .menu{
  max-width: 1250px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.menu .logo a{
  text-decoration: none;
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
.menu ul{
  display: inline-flex;
}
.menu ul li{
  list-style: none;
  margin-left: 7px;
}
.menu ul li:first-child{
  margin-left: 0px;
}
.menu ul li a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.menu ul li a:hover{
  background: #fff;
  color: black;
}
.img{
  background: url('img3.jpg')no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.img::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.center{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.center .title{
  color: #fff;
  font-size: 55px;
  font-weight: 600;
}
.center .sub_title{
  color: #fff;
  font-size: 52px;
  font-weight: 600;
}
.center .btns{
  margin-top: 20px;
}
.center .btns button{
  height: 55px;
  width: 170px;
  border-radius: 5px;
  border: none;
  margin: 0 10px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 500;
  padding: 0 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
.center .btns button:first-child{
  color: #fff;
  background: none;
}
.btns button:first-child:hover{
  background: white;
  color: black;
}
.center .btns button:last-child{
  background: white;
  color: black;
}

                                                                                       © 2022 ‧ Ngô Vi Minh Hiếu. All rights reserved.

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.