Tự Học Front-End Ngày 1: Bắt Đầu Với HTML & CSS

Để bắt đầu với Front-End Development, bạn cần hiểu rõ về HTML và CSS. Dưới đây là các khái niệm cơ bản về HTML và CSS cùng với các ví dụ mã nguồn để giúp bạn dễ dàng tiếp cận và thực hành.

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

1.1. Cấu trúc cơ bản của HTML

HTML (HyperText Markup Language) là ngôn ngữ dùng để tạo ra cấu trúc của trang web. Một trang web cơ bản thường bắt đầu với một số thẻ HTML cơ bản như html, head, và body.

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

<!DOCTYPE html>: Khai báo loại tài liệu, cho trình duyệt biết đây là trang HTML5.
<html lang="en">: Thẻ mở và đóng HTML. Thuộc tính lang="en" xác định ngôn ngữ của trang là tiếng Anh.
<head>: Thẻ chứa các thông tin meta, tiêu đề của trang, và liên kết đến các tệp tài nguyên như CSS.
<body>: Thẻ chứa nội dung hiển thị của trang web.

Các Thẻ HTML Cơ Bản

Đoạn văn (<p>): Dùng để chứa nội dung văn bản.
Tiêu đề (<h1> đến <h6>): Các thẻ dùng để tạo tiêu đề, từ lớn nhất <h1> đến nhỏ nhất <h6>.
Danh sách (<ul>, <ol>, <li>): Tạo các danh sách không thứ tự (<ul>) hoặc có thứ tự (<ol>).
Liên kết (<a>): Tạo các liên kết đến các trang khác.
Hình ảnh (<img>): Hiển thị hình ảnh.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ về HTML</title>
</head>
<body>
    <h1>Chào các bạn!</h1>
    <p>Đây là một ví dụ về HTML cơ bản.</p>

    <h2>Danh sách món ăn yêu thích</h2>
    <ul>
        <li>Bánh mì</li>
        <li>Phở</li>
        <li>Bánh xèo</li>
    </ul>

    <a href="https://www.google.com" target="_blank">Đi tới Google</a>

    <h2>Hình ảnh đẹp</h2>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

2. CSS: Kiến thức cơ bản về kiểu dáng (style)

2.1. CSS là gì?

CSS (Cascading Style Sheets) được dùng để định kiểu cho các phần tử HTML, giúp trang web trông đẹp mắt hơn. Bạn có thể thay đổi màu sắc, kích thước, căn chỉnh và bố trí các phần tử.

2.2. Cách áp dụng CSS

Có ba cách để áp dụng CSS vào trang HTML:

Inline CSS: CSS được viết trực tiếp trong thẻ HTML.
Internal CSS: CSS được viết trong thẻ <style> trong phần <head>.
External CSS: CSS được lưu trong một tệp riêng và liên kết với trang HTML.

Ví dụ về Inline CSS:

<p style="color: blue; font-size: 20px;">Đây là một đoạn văn với CSS nội tuyến.</p>

Ví dụ về Internal CSS:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #4CAF50;
        }
        p {
            font-size: 18px;
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Chào mừng đến với trang web của tôi!</h1>
    <p>Đây là một ví dụ về CSS nội tuyến.</p>
</body>
</html>

Ví dụ về External CSS:

my-website/
├── index.html
└── styles.css

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web với External CSS</title>
    <!-- Liên kết tới tệp CSS bên ngoài -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Chào bạn!</h1>
    <p>Đây là một ví dụ sử dụng CSS từ file ngoài.</p>

    <div class="box">Tôi là một khối có màu nền và padding.</div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    padding: 20px;
}

h1 {
    color: #4CAF50;
    font-size: 32px;
}

.box {
    background-color: #e0f7fa;
    padding: 15px;
    border: 1px solid #00bcd4;
    border-radius: 5px;
    margin-top: 20px;
}

2.3. Các thuộc tính CSS cơ bản

color: Màu văn bản.
font-size: Kích thước chữ.
background-color: Màu nền.
margin: Khoảng cách ngoài phần tử.
padding: Khoảng cách trong phần tử.
border: Đường viền của phần tử.
display: Quy định cách phần tử hiển thị (block, inline, flex, grid, etc.)

2.4. Layout với Flexbox và Grid

table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } th, td { border: 1px solid #ccc; padding: 12px; text-align: left; } th { background-color: #f4f4f4; }

Tiêu chí	CSS Grid	Flexbox
Chiều bố cục	Hai chiều: hàng và cột	Một chiều: hàng hoặc cột
Kiểm soát vị trí	Đặt phần tử vào vị trí cụ thể bằng dòng và cột	Phần tử xếp theo thứ tự trong HTML, khó kiểm soát vị trí cụ thể
Phù hợp với	Bố cục toàn trang, dashboard, layout phức tạp	Thanh điều hướng, danh sách, nhóm nút, bố cục đơn giản
Căn chỉnh	Căn chỉnh phần tử theo cả chiều ngang và dọc dễ dàng	Căn chỉnh chủ yếu theo trục chính và phụ
Khoảng cách	Sử dụng `grid-gap`, `grid-row-gap`, `grid-column-gap`	Sử dụng `gap`, `margin`
Tính linh hoạt	Cố định hơn, phù hợp với bố cục định sẵn	Linh hoạt hơn với nội dung động

📐 CSS Grid

Source code: W3Schools Tryit Editor

📏 Flexbox

Source code: W3Schools Tryit Editor

2.5. Responsive Design

Responsive design giúp trang web của bạn tự động điều chỉnh kích thước và bố cục khi thay đổi kích thước màn hình.

Ví dụ về Responsive Design với Media Queries:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            flex: 1;
        }

        /* Responsive: Chuyển thành cột trên màn hình nhỏ */
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Giải thích:

@media (max-width: 600px): Điều chỉnh giao diện khi màn hình có độ rộng tối đa là 600px (thường là các thiết bị di động).

Tổng kết

HTML giúp bạn xây dựng cấu trúc cơ bản của trang web.
CSS giúp bạn tạo kiểu dáng và bố trí các phần tử trang web.
Flexbox và Grid là hai công cụ mạnh mẽ để tạo layout.
Responsive Design giúp trang web của bạn hoạt động tốt trên các thiết bị với kích thước màn hình khác nhau.

Bạn có thể thực hành các ví dụ trên và dần dần xây dựng các trang web phức tạp hơn. Hãy cứ tiếp tục thử nghiệm và tìm hiểu thêm!

Nguồn tham khảo: W3Schools Online Web Tutorials