Bảng shortcut HTML
Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới HTML, xương sống của mỗi trang web bạn từng truy cập. Với tư cách là người đã dạy HTML hơn một thập kỷ, tôi có thể告诉 bạn rằng HTML không phải là điều gì đáng sợ như bạn nghĩ ban đầu. Thực tế, tôi thích nghĩ về HTML như những mảnh lego của internet - những mảnh đơn giản khi ghép lại với nhau có thể tạo ra điều kỳ diệu!
Mục lục
Trước khi bắt đầu hành trình, hãy cùng nhanh chóng xem qua những gì chúng ta sẽ覆盖:
- Thẻ cơ bản
- Thuộc tính của thẻ body
- Thẻ văn bản
- Liên kết
- Định dạng
- Danh sách
- Element hình ảnh
- Forms
- Bảng
- Thuộc tính của bảng
- Thuộc tính của thẻ input HTML5
- Trình chỉnh sửa và định dạng HTML
Bây giờ, hãy c rolled up our sleeves and start building!
Thẻ cơ bản
Mỗi tài liệu HTML bắt đầu với một vài thẻ quan trọng. Hãy nghĩ về chúng như nền tảng của trang web của bạn:
<!DOCTYPE html>
<html>
<head>
<title>Trang web đầu tiên của tôi</title>
</head>
<body>
Xin chào, Thế giới!
</body>
</html>Hãy phân tích này:
-
<!DOCTYPE html>thông báo cho trình duyệt rằng đây là tài liệu HTML5. -
<html>là phần tử gốc của trang. -
<head>chứa thông tin meta về tài liệu. -
<title>xác định tiêu đề cho tài liệu. -
<body>xác định phần nội dung hiển thị của tài liệu.
Thuộc tính của thẻ body
Thẻ <body> có thể có nhiều thuộc tính để kiểm soát cách nội dung được hiển thị. Dưới đây là một số thuộc tính phổ biến:
| Thuộc tính | Mô tả |
|---|---|
| bgcolor | Đặt màu nền |
| background | Đặt hình ảnh nền |
| text | Đặt màu chữ |
Ví dụ:
<body bgcolor="lightblue" text="navy">
Chào mừng đến với thế giới xanh lam của tôi!
</body>Điều này sẽ tạo ra một trang với nền màu xanh lam nhạt và chữ màu xanh dương. Đó là như vẽ phòng của bạn, nhưng cho các trang web!
Thẻ văn bản
HTML cung cấp nhiều thẻ để định dạng văn bản. Dưới đây là một số thẻ phổ biến:
| Thẻ | Mô tả |
|---|---|
<h1> đến <h6>
|
Đầu đề (h1 là lớn nhất, h6 là nhỏ nhất) |
<p> |
Đoạn văn |
<br> |
Ngắt dòng |
<strong> |
Văn bản đậm |
<em> |
Văn bản in nghiêng |
Ví dụ:
<h1>Chào mừng đến với trang web của tôi</h1>
<p>Đây là một câu <strong>đậm</strong>.</p>
<p>Đây là một điểm <em>nhấn mạnh</em>.</p>Liên kết
Liên kết là thứ tạo nên web thành một mạng! Dưới đây là cách tạo chúng:
<a href="https://www.example.com">Nhấp vào tôi!</a>Thuộc tính href xác định URL của trang mà liên kết sẽ dẫn đến. Bạn cũng có thể liên kết đến phần cụ thể của một trang bằng cách sử dụng IDs:
<h2 id="section2">Phần 2</h2>
<a href="#section2">Đi đến Phần 2</a>Định dạng
HTML cung cấp nhiều cách để định dạng văn bản ngoài đậm và in nghiêng. Dưới đây là một số thêm:
| Thẻ | Mô tả |
|---|---|
<sup> |
Văn bản trên |
<sub> |
Văn bản dưới |
<pre> |
Văn bản định dạng trước |
<code> |
Mảnh mã |
Ví dụ:
<p>H<sub>2</sub>O là nước.</p>
<p>2<sup>3</sup> bằng 8.</p>
<pre>
Văn bản này
được định dạng trước.
</pre>
<p>Đây là một đoạn <code>mã trong dòng</code>.</p>Danh sách
Danh sách giúp tổ chức thông tin. HTML có ba loại danh sách:
- Danh sách không thứ tự (
<ul>) - Danh sách có thứ tự (
<ol>) - Danh sách định nghĩa (
<dl>)
Ví dụ:
<ul>
<li>Táo</li>
<li>Chuối</li>
<li>Cherry</li>
</ul>
<ol>
<li>Bước đầu tiên</li>
<li>Bước thứ hai</li>
<li>Bước thứ ba</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Element hình ảnh
Hình ảnh có thể làm cho trang web của bạn sống động hơn. Dưới đây là cách thêm chúng:
<img src="cat.jpg" alt="Một chú mèo cute" width="300" height="200">Thuộc tính src xác định tệp hình ảnh, alt cung cấp văn bản thay thế cho máy quét màn hình hoặc nếu hình ảnh không tải được, và width và height đặt kích thước.
Forms
Forms cho phép người dùng nhập liệu. Dưới đây là một form đơn giản:
<form action="/submit-form" method="post">
<label for="name">Tên:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Gửi">
</form>Điều này tạo ra một form với các trường tên và email, và một nút gửi.
Bảng
Bảng được sử dụng để hiển thị dữ liệu theo hàng và cột:
<table border="1">
<tr>
<th>Đầu đề 1</th>
<th>Đầu đề 2</th>
</tr>
<tr>
<td>Hàng 1, ô 1</td>
<td>Hàng 1, ô 2</td>
</tr>
<tr>
<td>Hàng 2, ô 1</td>
<td>Hàng 2, ô 2</td>
</tr>
</table>Thuộc tính của bảng
Bảng có thể được tùy chỉnh với nhiều thuộc tính:
| Thuộc tính | Mô tả |
|---|---|
| border | Đặt độ rộng của viền |
| cellpadding | Đặt khoảng cách giữa nội dung của ô và viền |
| cellspacing | Đặt khoảng cách giữa các ô |
| width | Đặt chiều rộng của bảng |
Thuộc tính của thẻ input HTML5
HTML5 đã giới thiệu các loại input và thuộc tính mới:
| Loại/Thuộc tính | Mô tả |
|---|---|
| type="email" | Đối với địa chỉ email |
| type="date" | Đối với các bộ chọn ngày |
| type="number" | Đối với đầu vào số |
| placeholder | Văn bản gợi ý trong trường |
| required | Làm cho trường bắt buộc |
Ví dụ:
<input type="email" placeholder="Nhập email của bạn" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">Trình chỉnh sửa và định dạng HTML
Mặc dù bạn có thể viết HTML trong bất kỳ trình soạn thảo văn bản nào, việc sử dụng một trình soạn thảo HTML chuyên dụng có thể làm cho cuộc sống của bạn dễ dàng hơn. Một số lựa chọn phổ biến bao gồm:
- Visual Studio Code
- Sublime Text
- Atom
Những trình soạn thảo này cung cấp các tính năng như nổi bật cú pháp và tự động hoàn thành, giúp bạn tiết kiệm rất nhiều thời gian và công sức!
Kết luận
Và đây bạn có nó, các bạn! Bảng shortcut HTML này bao gồm những điều cơ bản bạn cần để bắt đầu tạo trang web của riêng mình. Nhớ rằng, HTML chỉ là bước đầu. Khi bạn tiến hóa, bạn sẽ muốn học CSS để định dạng và JavaScript để tương tác.
Học HTML giống như học một ngôn ngữ mới - nó đòi hỏi sự luyện tập. Đừng sợ thử nghiệm và mắc lỗi. Đó là cách chúng ta đều học! Và谁知道? Có lẽ trang web lớn tiếp theo sẽ được xây dựng bởi bạn!
Chúc mừng bạn, và mong rằng thẻ của bạn luôn được đóng đúng!
Credits: Image by storyset