Công cụ hỗ trợ
Sử dụng editor bất kỳ hỗ trợ nhập mã và lưu lại với phần mở rộng .html hoặc .htm.
- Notepad.
- Notepad++.
- Visual Studio Code.
Khái niệm cơ bản
Thẻ (tag)
HTML là một ngôn ngữ trình bày thuần túy nên khi sử dụng HTML, chỉ có thể định nghĩa những đối tượng hiển thị và cách hiển thị của đối tượng đó trên trang web thông qua các thẻ.
Mẫu thẻ:
<(tagname)> (nội dung hiển thị) </(tagname)>
Ví dụ:
<b>Chữ in đậm.</b>
Kết quả: Chữ in đậm.
Thuộc tính (properties)
Thuộc tính được đưa vào 1 số thẻ để định dạng hiển thị cho đối tượng của thẻ, 1 thẻ có thể kèm một hoặc nhiều thuộc tính. Thuộc tính gồm nhiều loại:
- Thuộc tính
class. - Thuộc tính
id. - Thuộc tính
title. - Thuộc tính
style.
Mẫu thẻ có thuộc tính:
<(tagname) (từ khóa)="(giá trị)"> (nội dung) </(tagname)>
Ví dụ
<i style="color:red">Nội dung 1</i><br/> <i style="background-color:#ffb300">Nội dung 2</i>
Kết quả
Nội dung 1
Nội dung 2
Lưu ý:
Một thẻ có thể chứa một hoặc nhiều thuộc tính, những thuộc tính phân biệt nhau bởi: dấu cách (space).
Các nhóm thẻ trong HTML
- Block: định nghĩa bố cục cho trang web (phân đoạn, tiêu đề, danh sách, phân nhóm, ...).
- Đặc điểm của thẻ này được thấy rõ khi sử dụng là sau đó các phần tử như thẻ khác, chữ, hình ảnh sẽ rơi xuống dòng khác.
- Inline: định nghĩa các phần tử chi tiết của trang web (hiển thị hình ảnh, ngắt dòng văn bản, tạo hyperlink, ...).
- Đặc điểm của loại thẻ này khi sử dụng thì các phần tử có tính chất inline sẽ chung 1 dòng, như sau thẻ
<a>thì các chữ khác vẫn liền kề sau đó.
- Đặc điểm của loại thẻ này khi sử dụng thì các phần tử có tính chất inline sẽ chung 1 dòng, như sau thẻ
Cấu trúc một file html
Một file html gồm 3 phần cơ bản được bao trong thẻ <html>.
- Header:
<head> - Body:
<body> - Footer:
<footer>
<html>
<head>
Header Objects
</head>
<body>
Body Objects
</body>
<footer>
Footer Objects
</footer>
</html>Không nhất thiết phải đưa tất cả thẻ vào thẻ <html> để chạy một trang web, không như ngôn ngữ lập trình, HTML không khắt khe về vấn đề cấu trúc. Những thẻ độc lập vẫn thể hiện được một trang web bình thường. Ví dụ một đoạn HTML sau đây vẫn cho ra kết quả bình thường:
<body bgcolor="Wheat"></body>
Nhóm thẻ block
Gồm các thẻ cơ bản:
<h1>, ...,<h6><p><div><dl>,<dt>,<dd><ul>,<ol>,<li>
* Các ví dụ đều thể hiện trên trình duyệt được.
Định dạng phân mục: <h1> </h1>, …, <h6> </h6>
Trong HTML có 6 thẻ dành cho việc phân mục từ lớn tới nhỏ, từ <h1> (header) đến <h6> tương tự như các mục (A, II, 3, d…) trong sách giáo khoa.
Ví dụ:
<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6>
Định đạng đoạn văn bản - <p> </p>
Thẻ <p> (paragraph) định nghĩa các phần tử trong nó là đoạn văn bản. <p> có thể chứa trong nó những chuỗi ký tự hay các thẻ thuộc. Nhóm inline – gồm image, link, button…
* Thẻ <p> không chứa các thẻ thuộc nhóm Block.
Mỗi thẻ <p> chỉ được chứa trong nó một nội dung văn bản (tức một đoạn văn / một hình ảnh / một link…), nếu có 2 đoạn văn bản, nên đặt chúng trong 2 thẻ <p> riêng biệt.
Ví dụ:
<p>Đoạn văn thứ nhất.</p> <p>Đoạn văn thứ hai.</p>
Đoạn văn bản trong HTML không nhận ký tự Enter như một ký tự xuống dòng, trường hợp đoạn văn quá dài, ta có thể đặt thẻ <br /> tại nơi muốn xuống dòng đoạn văn đó. Thẻ này thuộc nhóm inline và không được sử dụng để thay thế cho <p> trong trường hợp 2 đoạn văn bản.
Ví dụ
<p> Mùa xuân hoa nở đẹp tươi.<br /> Bướm con bướm mẹ ra chơi hoa hồng. </p> <p>
Bướm mẹ hút mật đầu bông, bướm con đùa với nụ hồng đỏ hoe. </p>
Kết quả
Mùa xuân hoa nở đẹp tươi.
Bướm con bướm mẹ ra chơi hoa hồng.
Bướm mẹ hút mật đầu bông, bướm con đùa với nụ hồng đỏ hoe.
Phân nhóm các đối tượng trên trang - <div> </div>
<div> (division) là thẻ phân nhóm các đối tượng. Những đối tượng nằm trong cùng một thẻ <div> sẽ có vị trí tương quan cố định với nhau. Thẻ này hỗ trợ để trình duyệt hiểu đúng bố cục trang web, khá giống với chức năng "group" các "Shape" trong Word.
Tuy nhiên không nên lạm dụng <div> cho những chi tiết quá nhỏ như những đoạn văn bản riêng lẻ, một hình ảnh, một đường link, ...
Ví dụ
<p>Đoạn văn thứ nhất.</p> <div> <p>1. Đoạn văn trong thẻ p trong div 1.</p> <p>2. Đoạn văn trong thẻ p trong div 2.</p> <p>3. Đoạn văn trong thẻ p trong div 3.</p> </div>
Bộ thẻ định nghĩa danh sách: <dl> </dl>, <dt> </dt>, <dd> </dd>
<dl>(define list) định nghĩa những phần tử trong nó sẽ cấu thành nên một danh sách (list).<dt>(define term) định nghĩa phần tử trong nó là một phần tử (item) của danh sách.<dd>(define description) định nghĩa phần tử trong nó là một lời giải thích cho item phía trên.
Ví dụ
<dl> <dt>HTML - Phần 0: Trang Web Đầu Tiên</dt> <dd>Hướng dẫn từng bước đầu tiên tạo trang web với HTML.</dd> <dt>HTML - Phần 1: Cơ Bản về HTML</dt> <dd>Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu tiên với HTML.</dd> <dt>Thay Đổi Màu Sắc Trên Tab-bar Trình Duyệt Web</dt> <dd>Hướng dẫn thay đổi màu sắc tab bar trình duyệt web mobile.</dd> </dl>
Kết quả
- HTML - Phần 0: Trang Web Đầu Tiên
- Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
- HTML - Phần 1: Cơ Bản về HTML
- Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu tiên với HTML.
- Thay Đổi Màu Sắc Trên Tab-bar Trình Duyệt Web
- Hướng dẫn thay đổi màu sắc tab bar trình duyệt web mobile.
Bộ thẻ định nghĩa danh sách (có thứ tự): <ol> </ol>, <li> </li>
<ol> (ordered list) là thẻ định nghĩa những đối tượng trong nó là những phần tử của một danh sách có thứ tự. Những kí tự đứng trước mỗi đối tượng có thể là một số hoặc một ký tự, một chữ cái.
<li> định nghĩa phần tử trong nó là một đối tượng của danh sách.
Ví dụ
<ol> <li>Đạt Hoàng Tiến</li> <li>Cường Trần</li> <li>Tài Dư Phát</li> <li>Hiếu Nguyễn Minh</li> <li>...</li> </ol>
* Thuộc tính type được dùng trong thẻ <ol> để định nghĩa kiểu kí tự liệt kê của danh sách, type có các giá trị: 1, a, A, i, I.
Kết quả
- Đạt Hoàng Tiến
- Cường Trần
- Tài Dư Phát
- Hiếu Nguyễn Minh
- ...
Bộ thẻ định nghĩa danh sách (không có thứ tự): <ul> </ul>, <li> </li>
<ul> (unordered list) là thẻ định nghĩa các phần tử trong nó là những phần tử của một danh sách liệt kê nhưng không có thứ tự. Bộ thẻ này khá tương tự như <dl> nhưng không có chú thích, và có dấu ký hiệu đầu cho mỗi phần tử. Bộ thẻ này sử dụng <li> tương tự như <ol>.
Ví dụ
<ul> <li>Tỉnh Long An</li> <li>Tỉnh Tiền Giang</li> <li>Tỉnh Cao Bằng</li> <li>Tỉnh Lạng Sơn</li> </ul>
Kết quả
- Tỉnh Long An
- Tỉnh Tiền Giang
- Tỉnh Cao Bằng
- Tỉnh Lạng Sơn
Nhóm thẻ inline
Gồm các thẻ cơ bản:
<a> </a><img /><br /><strong> </strong>/<b> </b><em> </em>/<i> </i><u> </u>
Định nghĩa một đường dẫn: <a> </a>
<a> là thẻ tạo 1 liên kết đến một trang web / một email / một file / số điện thoại, ...
Ví dụ
<a href="https://training.stdio.vn">STDIO Training</a><br/>
<a href="mailto:training@stdio.vn">training@stdio.vn</a>
Kết quả
STDIO Training
training@stdio.vn
* Thuộc tính href cho phép ta gắn địa chỉ cụ thể mà liên kết sẽ dẫn tới.
Thể hiện hình ảnh: <img />
<img /> (image) là thẻ chèn hình ảnh vào trang web. Cấu trúc của <img /> không sử dụng thẻ đóng như những thẻ khác mà sử dụng ký tự /.
Ví dụ
<img src="https://resources.stdio.vn/content/article/5ef62a28fc765a6e805ebca1/resources/res-1598960736-1598960736130.jpg/statics/phone/images/logo.png" alt="STDIO Training" />
* Thuộc tính src là nguồn của hình ảnh mà chúng ta cần thể hiện lên trang web, alt là thuộc tính định nghĩa một chuỗi ký tự sẽ thay thế cho hình ảnh nếu hình ảnh không thể hiện được lên trang web.
Kết quả
3 định dạng ký tự cơ bản cho chuỗi ký tự: <b> </b>, <i> </i>, <u> </u>
<b> (Bold) là thẻ cho phép ta in đậm chuỗi ký tự đặt giữa nó. Tương tự, <i> (Italic) là in nghiêng và <u> (Underline) là gạch chân chuỗi ký tự.
Ví dụ
<b><i><u>Đậm, nghiêng và gạch dưới.</u></i></b>
Kết quả
Đậm, nghiêng và gạch dưới.
HTML (Hyper Text Markup Languague) là một dạng ngôn ngữ được dùng để tạo nên các trang web. Với HTML không cần lo về việc chương trình dừng đột ngột hoặc đưa ra những Error, Break, Warning như khi làm việc với những ngôn ngữ lập trình, sự quan tâm cần thiết là các thể hiện website có đúng như mong muốn hay không?
