Thẻ HTML

Thẻ HTML là một trong các thành phần quan trọng nhất trong ngôn ngữ HTML. Mỗi thẻ được sử dụng để tạo ra một phần tử nhất định tạo ra trang web. Ví dụ với các phần tử dùng để tạo ra tiêu đề cho trang chúng ta sẽ sử dụng thẻ h1 với các phần tử dùng để tạo ra ảnh chúng ta sử dụng thẻ img, với các phần tử dùng để tạo ra các liên kết chúng ta sẽ sử dụng thẻ a..
Ở ví dụ trước bạn thấy có rất nhiều thẻ được sử dụng ví dụ như thẻ h1


<h1>Bắt Đầu Học HTML</h1>


Ngoài ra còn có các thẻ như thẻ html, body, head… Chúng ta sẽ lần lượt tìm hiểu cách sử dụng các thẻ này trong các bài học tiếp theo.

Thẻ Đóng, Thẻ Mở

Với mỗi thẻ HTML thường sẽ có 2 loại thẻ là thẻ đóng và thẻ mở. Thẻ đóng dùng để đánh dấu vị trí bắt đầu của phần tử và ngược lại thẻ mở dùng để đánh dấu vị trí kết thúc. Ở ví dụ trên chúng ta có các thẻ mở là html, body, h1, p Và các thẻ đóng tương ứng là /html, /body, /h1/p.

Thẻ Tự Đóng

Phần lớn các thẻ sẽ bao gồm thẻ đóng và thẻ mở. Tuy nhiên trong một số trường hợp đặc biệt có một số thẻ sẽ tự kết thúc mà không cần phải có thẻ đóng. Ví dụ như thẻ br để xuống dòng hay img dùng để tạo ra ảnh.

Ở trên bạn thấy chỉ khi có thẻ br thì việc xuống dòng mới được thực hiện. Ngược lại nếu trong mã lệnh HTML bạn bấm phím enter để tạo ra dòng mới giữa các câu thì khi hiển thị trình duyệt vẫn không thêm dòng mới chèn giữa các câu này.

Text Editor Trong Html

Bạn có thể chạy và chỉnh sửa mã HTML trực tiếp trên trang ở các đoạn code ví dụ được cung cấp sẵn trong mỗi bài học.

Tuy nhiên bạn cũng có thể tạo một trang HTML trên máy tính của chính mình sử dụng chương trình Text Editor.

Text editor là chương trình phần mềm sử dụng để hiệu chỉnh văn bản thuần tuý (plain text) và thích hợp trong việc chỉnh sửa mã code (bao gồm mã HTML).

Lưu ý: Văn bản thuần tuý là dạng văn bản không sử dụng bất cứ định dạng nào như in đậm, in nghiêng, tạo màu, thêm phông chữ… Ngược lại với văn bản thuần tuý là văn bản đã được định dạng (formatted text hay rich text). Các phần mềm text processor (khác với text editor) như Microsoft Word dùng để hiệu chỉnh loại văn bản này. Chúng ta không sử dụng văn bản đã được định dạng để tạo ra mã code nói chung và mã HTML nói riêng.

Hiện tại có nhiều phần mềm text editor khác nhau, tuy nhiên với mục đích học HTML thì bạn được kiến nghị sử dụng NotePad (Windows) hoặc TextEdit (Mac OSX).

NotePad (Windows)

Trên hệ điều hành Windows cung cấp sẵn text editor có tên là NotePad mà bạn có thể sử dụng để tạo và chỉnh sửa mã HTML.

Để mở NotePad:

  • Với Windows 8 hoặc mới hơn: Gõ phím Windows và nhập vào Notepad trong ô tìm kiếm. Click vào icon chương trình Notepad trong kết quả hiển thị để khởi động chương trình.
  • Với Windows 7 hoặc cũ hơn: Click chọn Start > chọn Programs > chọn Accessories > chọn Notepad.

TextEdit (Mac OSX)

Để mở TextEdit bạn khởi động chương trình quản lý file và tập tin Finder > đi đến thư mục Applications > nhấp đúp vào TextEdit trong thư mục.

Do Text Edit cũng cho phép chúng ta tạo văn bản rich text nên bạn cần thiết lập để TextEdit lưu văn bản dưới dạng plain text. Ở thanh menu bạn chọn Preference > nhấp chọn tab New Document > ở mục Format chọn Plain Text > nhấp chọn tab Open and Save > ở mục When Saving a File bỏ chọn Add “.txt” extention to plain text files.

Tạo Tập Tin HTML

Sau khi mở chương trình text editor trên máy bạn tạo một tập tin mới (phím tắt control + N với NotePad hoặc command + N với TextEdit)

Sao chép và dán đoạn văn bản sau vào phần nội dung của tập tin mới:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu đề trang</title>
    </head>
<body>
<h1>Đây là một đề mục.</h1>
Đây là một dòng văn bản thông thường.
</body>
</html>

Lưu Tập Tin HTML

Tập tin html được lưu với phần mở rộng là .html hoặc .htm (ít phổ biến hơn).

Bạn lưu tập tin mớ tạo ở trên với tên index.html, bạn cần lưu ý chọn encoding là UTF-8 và phần mở rộng là .html.

Với NotePad:

NotePad Lưu HTML File

Với TextEdit:

TextEdit lưu tập tin HTML

Phần mở rộng của các tập tin có thể sẽ bị ẩn đi khi bạn mở thư mục chứa chúng, do đó bạn cần chắc chắn rằng tập tin có phần mở rộng là .html thay vì .html.txt

Hiển Thị Trang HTML

Trong khi text editor được dùng để hiệu chỉnh code HTML, để hiển thị nội dung trang HTMl thì chúng ta cần sử dụng một phần mềm khác là trình duyệt web hay web browser.

Bạn có thể xem một trang HTML từ một tập tin HTML cho trước theo một số cách khác nhau ví dụ như:

  • Nhấp đúp lên biểu tượng của tập tin hoặc
  • Chuột phải lên tập tin và chọn Open with > chọn một trong các browser có trên máy.

Lúc này bạn sẽ thấy trình duyệt hiển thị nội dung trang HTML thay vì source code có trong text editor.