TVD Media
HTML và CSS có thể xem là nền tảng căn bản cho mọi công việc liên quan đến web. Bất kể bạn làm trong lĩnh vực nào, nếu có liên quan đến quản trị website, ít nhất bạn cần biết qua về HTML/CSS. Nếu bạn có ý định học lập trình web, việc thành thạo hai công cụ này là điều cần thiết. Ngay cả khi bạn là một blogger chuyên viết bài, việc nắm vững HTML và CSS cũng rất hữu ích. Tham khảo bài viết để tìm hiểu các thẻ trong HTML và CSS cơ bản.
Tổng quan các thẻ trong HTML và CSS
Các thẻ trong HTML và CSS đóng vai trò then chốt trong việc xây dựng và định dạng trang web. HTML (HyperText Markup Language) sử dụng các thẻ như <div>, <p>, <a>, <img>, và <h1> để xác định cấu trúc và nội dung của trang web. Mỗi thẻ HTML có một chức năng cụ thể, giúp tạo nên khung sườn của trang web.
Trong khi đó, CSS (Cascading Style Sheets) giúp định dạng và làm cho trang web trở nên sinh động và hấp dẫn hơn. CSS sử dụng các vùng chọn như .class, #id, và element để áp dụng kiểu dáng cho các thẻ HTML, từ màu sắc, phông chữ, đến bố cục trang. Sự kết hợp giữa HTML và CSS là nền tảng để tạo nên những trang web chuyên nghiệp và thân thiện với người dùng.
Tổng quan các thẻ trong HTML và CSS
HTML căn bản
HTML là gì?
HTML được coi là bộ xương của một giao diện website, dù là dành cho WordPress hay bất cứ nền tảng nào. Nó xác định bố cục của trang web bằng cách sử dụng các thẻ (tags) để đánh dấu từng phần, mỗi phần sẽ có vai trò riêng.
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản. Hypertext (siêu văn bản) là đoạn văn bản có chứa liên kết đến các thông tin khác như trang web, hình ảnh, âm thanh,…
HTML là cầu nối giữa người dùng và trình duyệt, giúp trình duyệt hiểu cách hiển thị trang web. Khi trình duyệt đọc thấy ký tự “A”, nó chỉ đơn thuần hiển thị “A” mà không biết cách tô đậm, in nghiêng, hay màu sắc. HTML giải quyết vấn đề này bằng cách sử dụng các thẻ HTML.
Các thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu “<” và “>”, báo cho trình duyệt biết cách hiển thị nội dung bên trong. Ví dụ:
In đậm bằng thẻ <b>: <b>A</b>
In nghiêng bằng thẻ <i>:<i>A</i>
Pro tips
- Luôn đóng thẻ sau khi đã mở: Điều này giúp hạn chế lỗi hiển thị bất ngờ trên trình duyệt. Đây chính là best practice của những người làm trong ngành dịch vụ thiết kế web đã mách cho TVD Media đó nhé.
- Một số thẻ không có thẻ đóng: Ví dụ như thẻ
<br>,<img>,<input>,… - Cẩn thận với thẻ lồng nhau: Đảm bảo đóng thẻ theo thứ tự mở để tránh lỗi, như trong ví dụ sau:
<p><h1>Tiêu đề</h1></p> - Khi viết HTML, việc tuân thủ các nguyên tắc này sẽ giúp mã của bạn rõ ràng và dễ bảo trì hơn.
Các tag HTML cần biết cho blogger
Tiêu đề
Có 6 cấp độ tiêu đề, từ <h1> đến <h6>, với mức độ nhấn mạnh giảm dần. Đối với SEO, sử dụng đúng cách các thẻ này là rất quan trọng.
<h1>Tiêu đề bài viết</h1>
<h2>Phần 1</h2>
<h3>Chương 1.1</h3>
<h4>Tiểu mục 1.1.1</h4>
<h5>Đề mục 1.1.1.1</h5>
<h6>Đề mục con 1.1.1.1.1</h6>
Định dạng văn bản
<b>Tô đậm</b>
<i>In nghiêng</i>
<strong>Tô đậm theo chuẩn web ngữ nghĩa</strong>
<em>In nghiêng theo chuẩn web ngữ nghĩa</em>
Phân đoạn
<!-- Comment: thẻ p dùng để đánh dấu đoạn văn, tách riêng với những đoạn text bình thường -->
<p>Đoạn văn bản</p>
<!-- Comment: br là thẻ đơn, nên bạn không cần thẻ đóng -->
Xuống dòng với <br>
<!-- Comment: trích dẫn từ nguồn khác -->
<blockquote>"Tôi chuẩn man" ~ Cao Thái Sơn</blockquote>
Danh sách
Có hai loại danh sách là danh sách có đánh số thứ tự <ol> và danh sách không đánh số thứ tự <ul>. Bên trong các thẻ này, các phần tử được đánh dấu bằng thẻ <li>.
<!-- Comment: Danh sách có sắp xếp thứ tự -->
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
</ol>
<!-- Comment: Danh sách không sắp xếp thứ tự -->
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
</ul>
Liên kết
<a href="địa chỉ liên kết">Đây là một liên kết</a>
<a href="địa chỉ liên kết" target="_blank">Liên kết này sẽ mở tab mới</a>
Hình ảnh
<img src="đường dẫn đến ảnh" alt="chú thích cho ảnh"/>
CSS căn bản
Làm quen với CSS
Nếu HTML được ví như bộ xương của một website, thì CSS chính là lớp da thịt, quần áo phủ lên, giúp website trông đẹp đẽ và chuyên nghiệp hơn.
CSS, viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn kiểm soát thiết kế của nhiều thành phần HTML chỉ với một quy tắc CSS, giúp giảm thiểu thời gian thiết kế và chỉnh sửa bằng cách tách biệt cấu trúc (HTML) và định dạng (CSS).
Lưu ý rằng file CSS quá nặng có thể ảnh hưởng đến điểm SEO của website, trên thực tế một số dự án của dịch vụ SEO tại TVDMedia vẫn chưa nén hoặc tối ưu lại file, khiến tốc độ load website chậm, nên các bạn lưu ý điều này nhé
Bạn có thể áp dụng CSS qua nhiều cách: trực tiếp trong thẻ HTML, trong trang web, hoặc qua một file CSS bên ngoài.
CSS căn bản
Cú pháp cơ bản của CSS
CSS bao gồm 3 phần chính: vùng chọn (selector), thuộc tính (property), và giá trị (value).
selector {
Thuộc-tính-1: giá-trị-1;
Thuộc-tính-2: giá-trị-2;
}
Giải thích:
Vùng chọn (selector): Xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ, và nhiều yếu tố khác. Bạn có thể tham khảo thêm các ví dụ về vùng chọn CSS tại đây, hoặc đọc thêm tại W3Schools.
Thuộc tính (property): Các yếu tố mà bạn muốn thay đổi ở các thẻ HTML trong vùng chọn. Danh sách các thuộc tính có thể được tìm thấy tại W3Schools.
Giá trị (value): Mỗi thuộc tính yêu cầu một giá trị cụ thể. Giá trị này có thể là từ khóa định sẵn (như none, block), tên màu hoặc mã màu (như black, white, #000, #FFFFFF), hay kích thước tính bằng px, em, rem, %.
Các vùng chọn CSS (selector) cần biết
#ID
Dấu “#” được dùng khi bạn muốn chọn một thẻ HTML có định danh cụ thể (ID). ID là duy nhất và không thể tái sử dụng cho nhiều phần tử.
Ví dụ:
<div id="vi-du">
<h2>TVD Media Blog</h2>
<p>WordPress blog lớn nhất Việt Nam.</p>
</div>
Trong đoạn mã trên, #vi-du chọn thẻ div có ID là "vi-du".
.class
.class
Sử dụng để chọn tất cả các phần tử HTML có cùng tên lớp (class). Đây là cách phổ biến nhất để áp dụng các kiểu định dạng cho nhiều phần tử cùng loại.
Ví dụ:
HTML
<p class="highlight">Đoạn văn bản này được làm nổi bật.</p>
<p class="highlight">Đoạn văn bản này cũng được làm nổi bật.</p>
CSS
.highlight {
color: red;
font-weight: bold;
}
.class1.class2
Sử dụng để chọn các phần tử có cả hai lớp (class) được chỉ định.
Ví dụ:
HTML
<p class="highlight special">Đoạn văn bản này được làm nổi bật và đặc biệt.</p>
CSS
.highlight.special {
color: blue;
background-color: yellow;
}
.class .child-class
Sử dụng để chọn các phần tử con có lớp (class) cụ thể nằm bên trong phần tử cha có lớp (class) khác.
Ví dụ:
HTML
<div class="container">
<p class="highlight">Đoạn văn bản này nằm trong một container.</p>
</div>
CSS
.container .highlight {
font-size: 20px;
}
.class > .child-class
Sử dụng để chọn các phần tử con trực tiếp có lớp (class) cụ thể nằm bên trong phần tử cha có lớp (class) khác.
Ví dụ:
HTML
<div class="container">
<p class="highlight">Đoạn văn bản này nằm trong một container.</p>
<div class="nested">
<p class="highlight">Đoạn văn bản này nằm trong một div lồng nhau.</p>
</div>
</div>
CSS
.container > .highlight {
font-style: italic;
}
.class1, .class2
Sử dụng để chọn nhiều phần tử với các lớp (class) khác nhau và áp dụng cùng một kiểu định dạng cho chúng.
Ví dụ:
HTML
<p class="highlight">Đoạn văn bản này được làm nổi bật.</p>
<div class="special">Div này cũng đặc biệt.</div>
CSS
.highlight, .special {
border: 1px solid black;
}
.class:hover
Sử dụng để áp dụng kiểu định dạng khi phần tử với lớp (class) cụ thể được di chuột qua.
Ví dụ:
HTML
<a class="link" href="#">Đây là một liên kết.</a>
CSS
.link:hover {
text-decoration: underline;
}
.class:before và .class:after
Sử dụng để thêm nội dung trước hoặc sau phần tử với lớp (class) cụ thể.
Ví dụ:
HTML
<p class="quote">Đây là một trích dẫn.</p>
CSS
.quote:before {
content: "“";
}
.quote:after {
content: "”";
}
Việc hiểu và sử dụng các thẻ trong HTML và CSS là nền tảng quan trọng để xây dựng và thiết kế trang web chuyên nghiệp. Hãy luôn cập nhật và áp dụng các kiến thức về HTML và CSS để xây dựng những trang web hiện đại và thân thiện với người dùng. Mong rằng với những gì mà TVD Media vừa cung cấp hữu ích với bạn đọc.
