Site logo
Loading...

HTML & CSS: Web Design Fundamentals

HTML và CSS là gì? Hướng dẫn toàn diện về nền tảng phát triển web

HTML và CSS là gì?

HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là hai công nghệ cốt lõi trong phát triển web hiện đại. Nếu bạn muốn trở thành một web developer, việc hiểu rõ về hai công nghệ này là điều bắt buộc. Hãy tưởng tượng một trang web như một ngôi nhà - HTML chính là phần khung xương, các bức tường và sàn nhà, còn CSS là phần trang trí nội thất, màu sơn tường và các chi tiết thẩm mỹ. Cùng tìm hiểu chi tiết về hai công nghệ nền tảng này.

HTML - HyperText Markup Language

HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo và cấu trúc các trang web. Đây không phải là một ngôn ngữ lập trình mà là một ngôn ngữ đánh dấu, cho phép chúng ta định nghĩa cấu trúc của nội dung trang web thông qua các thẻ (tags).

HTML được phát minh bởi Tim Berners-Lee vào năm 1989, khi ông đang làm việc tại CERN (Tổ chức Nghiên cứu Hạt nhân Châu Âu). Mục tiêu ban đầu của HTML là tạo ra một hệ thống chia sẻ tài liệu giữa các nhà khoa học. Ngày nay, HTML đã trở thành nền tảng của hầu hết các trang web trên internet.

Cấu trúc cơ bản của một trang HTML

Một tài liệu HTML có cấu trúc cơ bản như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <h1>Đây là tiêu đề lớn</h1>
    <p>Đây là một đoạn văn bản.</p>
</body>
</html>

Các thành phần trong cấu trúc HTML:

  • <!DOCTYPE html>: Khai báo loại tài liệu và phiên bản HTML (HTML5)
  • <html>: Thẻ gốc chứa toàn bộ nội dung của trang web
  • <head>: Chứa thông tin về tài liệu như tiêu đề, meta data, liên kết CSS, JavaScript...
  • <title>: Xác định tiêu đề của trang web (hiển thị trên thanh tiêu đề trình duyệt)
  • <body>: Chứa tất cả nội dung hiển thị của trang web
  • <h1>: Tiêu đề lớn nhất
  • <p>: Đoạn văn bản

Các thẻ HTML cơ bản

HTML sử dụng các thẻ để đánh dấu các phần tử khác nhau trên trang web. Dưới đây là một số thẻ cơ bản:

  1. Thẻ tiêu đề

    <h1>Tiêu đề lớn nhất</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

  2. Thẻ đoạn văn

    <p>Đây là một đoạn văn bản.</p>

  3. Thẻ liên kết

    <a href="https://www.example.com">Liên kết đến example.com</a>

  4. Thẻ hình ảnh

    <img src="duong-dan-den-hinh-anh.jpg" alt="Mô tả hình ảnh">

  5. Thẻ danh sách

    <!-- Danh sách có thứ tự -->
<ol>
  <li>Mục thứ nhất</li>
  <li>Mục thứ hai</li>
</ol>

<!-- Danh sách không thứ tự -->
<ul>
  <li>Mục đầu tiên</li>
  <li>Mục thứ hai</li>
</ul>

  6. Thẻ div và span

    <div>Phần tử khối</div>
<span>Phần tử inline</span>

HTML5 và các tính năng mới

HTML5 là phiên bản mới nhất của HTML, được giới thiệu vào năm 2014. HTML5 bổ sung nhiều tính năng mới giúp phát triển web trở nên dễ dàng và mạnh mẽ hơn:

  1. Các thẻ ngữ nghĩa (semantic tags)

    <header>Phần đầu trang</header>
<nav>Thanh điều hướng</nav>
<section>Một phần của trang</section>
<article>Bài viết độc lập</article>
<aside>Nội dung phụ</aside>
<footer>Chân trang</footer>

  2. Hỗ trợ đa phương tiện

    <audio src="file.mp3" controls></audio>
<video src="file.mp4" controls></video>

  3. Canvas cho vẽ đồ họa

    <canvas id="myCanvas" width="200" height="100"></canvas>

  4. Lưu trữ dữ liệu phía client

    • Local Storage
    • Session Storage

  5. Form và input types mới

    <input type="email">
<input type="date">
<input type="color">
<input type="range">

CSS - Cascading Style Sheets

CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định dạng và thiết kế giao diện của trang web HTML. Nếu HTML tạo ra cấu trúc và nội dung, thì CSS quyết định cách nội dung đó được hiển thị - từ màu sắc, font chữ, kích thước đến vị trí và hiệu ứng động.

CSS được phát triển bởi World Wide Web Consortium (W3C) vào năm 1996 để giải quyết vấn đề tách biệt nội dung và định dạng trong phát triển web.

Cách sử dụng CSS

Có 3 cách để thêm CSS vào trang web:

  1. Inline CSS - sử dụng thuộc tính style trong các thẻ HTML:

    <p style="color: red; font-size: 16px;">Đoạn văn bản màu đỏ</p>

  2. Internal CSS - sử dụng thẻ <style> trong phần <head>:

    <head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

  3. External CSS - liên kết đến một file CSS bên ngoài (phương pháp được khuyến nghị):

    <head>
  <link rel="stylesheet" href="styles.css">
</head>

    File styles.css:

    p {
  color: green;
  font-size: 20px;
}

CSS Selectors - Bộ chọn CSS

CSS sử dụng các bộ chọn để xác định phần tử HTML nào sẽ được áp dụng style. Dưới đây là một số bộ chọn phổ biến:

  1. Bộ chọn theo thẻ:

    p {
  color: blue;
}

  2. Bộ chọn theo ID (sử dụng dấu #):

    #header {
  background-color: black;
}

  3. Bộ chọn theo class (sử dụng dấu .):

    .button {
  border-radius: 5px;
}

  4. Bộ chọn theo thuộc tính:

    input[type="text"] {
  border: 1px solid gray;
}

  5. Bộ chọn phần tử con:

    ul > li {
  list-style: none;
}

  6. Bộ chọn trạng thái:

    a:hover {
  text-decoration: underline;
}

Thuộc tính CSS cơ bản

CSS có hàng trăm thuộc tính khác nhau, dưới đây là một số thuộc tính phổ biến nhất:

  1. Màu sắc và nền:

    div {
  color: #333; /* Màu chữ */
  background-color: #f5f5f5; /* Màu nền */
}

  2. Font và định dạng văn bản:

    p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

  3. Kích thước và khoảng cách:

    .container {
  width: 80%;
  height: 200px;
  margin: 10px; /* khoảng cách bên ngoài phần tử */
  padding: 20px; /* khoảng cách bên trong phần tử */
}

  4. Border và Box Model:

    .box {
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

  5. Hiển thị và vị trí:

    .element {
  display: block; /* hoặc inline, flex, grid, none... */
  position: relative; /* hoặc absolute, fixed, static... */
  top: 0;
  left: 0;
  z-index: 1;
}

CSS Layouts - Bố cục CSS

CSS cung cấp nhiều phương pháp để tạo bố cục trang web:

  1. Normal Flow - Bố cục mặc định của trình duyệt

  2. Floats - Phương pháp truyền thống (cũ):

    .sidebar {
  float: left;
  width: 30%;
}
.content {
  float: right;
  width: 70%;
}

  3. Flexbox - Bố cục một chiều:

    .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  4. CSS Grid - Bố cục hai chiều:

    .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

  5. CSS Positioning - Điều chỉnh vị trí:

    .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS3 và tính năng nâng cao

CSS3 là phiên bản mới nhất của CSS với nhiều tính năng hiện đại:

  1. Animations và Transitions:

    button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: blue;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.moving-box {
  animation: slide 2s infinite alternate;
}

  2. Gradients - Nền với hiệu ứng chuyển màu:

    .gradient {
  background: linear-gradient(to right, red, yellow);
}

  3. Transform - Biến đổi hình dạng phần tử:

    .card:hover {
  transform: scale(1.05) rotate(5deg);
}

  4. Media Queries - Responsive Design:

    @media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

  5. Variables - Biến CSS:

    :root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
}

HTML và CSS hoạt động cùng nhau như thế nào?

HTML và CSS là hai công nghệ riêng biệt nhưng hoạt động cùng nhau để tạo ra trang web hoàn chỉnh. HTML định nghĩa cấu trúc và nội dung, trong khi CSS quyết định cách nội dung đó được hiển thị.

Ví dụ hoàn chỉnh

Dưới đây là một ví dụ về cách HTML và CSS hoạt động cùng nhau:

File index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trang web đầu tiên của tôi</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Chào mừng đến với trang web của tôi</h1>
        <nav>
            <ul>
                <li><a href="#home">Trang chủ</a></li>
                <li><a href="#about">Giới thiệu</a></li>
                <li><a href="#contact">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Trang chủ</h2>
            <p>Đây là trang chủ của website.</p>
        </section>
        
        <section id="about">
            <h2>Giới thiệu</h2>
            <