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.

Giới Thiệu Về Html

HTML Là Gì

HTML là viết tắt của cụm từ Hyper Text Markup Language, dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản:

  • HTML mô tả cấu trúc của một trang web (web page) sử dụng các thẻ đánh dấu (markup tag) hay còn gọi là thẻ HTML.
  • Thẻ là một phần quan trọng trong HTML.
  • Mỗi thẻ HTML được dùng để đánh dấu những nội dung khác nhau ví dụ như thẻ đề mục để đánh dấu đề mục, thẻ văn bản để đánh dấu văn bản thông thường, thẻ hình ảnh để đánh dấu hình ảnh…

Trình duyệt sẽ không hiển thị mã HTML thô (các thẻ) mà thay vào đó sẽ dựa trên từng loại thẻ để chuyển đổi sang các nội dung tương ứng của trang web.

Một trang HTML tương ứng sẽ tạo ra nội dung của một trang web. Các thuật ngữ trang HTML (HTML document) và trang web HTML đôi khi còn được sử dụng với ý nghĩa thay thế cho nhau.

Ví Dụ Về Trang HTML

Ví dụ về một trang HTML đơn giản như sau:

<!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>

Trong đó:

  • Khai báo  (document type) định nghĩa loại trang văn bản là HTML và phiên bản sử dụng là HTML5. Khai báo này không được coi là thẻ và cũng không được dùng để hiển thị bất cứ nội dung nào. Trình duyệt sử dụng khai báo này để biết phiên bản HTML nào được sử dụng để đánh dấu trang.
  • Thẻ là một thẻ gốc của trang và luôn phải được xuất hiện đầu tiên sau khai báo .
  • Thẻ  chứa các thông tin bổ sung về trang (meta data). Nội dung phần này cũng không được trình duyệt hiển ở phần nội dung trang mà thay vào đó trình duyệt thường dùng để xác định thông tin bổ sung như tiêu đề trang, bộ ký tự của trang (tương ứng với ngôn ngữ sử dụng, với tiếng Việt bộ ký tự thường là UTF-8), tiêu đề trang (hiển thị ở thanh tab)…
  • Thẻ <body> chứa nội dung trang sẽ được trình duyệt hiển thị.
  • Thẻ <h1> dùng đánh dấu phần tử đề mục của trang.
  • Thẻ <p> dùng đánh dấu các đoạn văn bản (văn bản thông thường).

Thẻ HTML

Thẻ HTML (HTML tag) dùng để đánh dấu các thành phần nội dung khác nhau của trang. Mỗi thẻ khác nhau sẽ đánh dấu nội dung với ý nghĩa khác nhau.

Thẻ gồm tên thẻ và bao quanh bởi cặp dấu <>:

<tag_name>Nội dung bên trong thẻ</tag_name>

Mỗi thẻ HTML thường đi theo cặp bao gồm thẻ mở (opening tag)  và thẻ đóng (closing tag)

Thẻ Tự Đóng

Thẻ tự đóng (self-closing tag) là thẻ HTML với chỉ thẻ mở và không có thẻ đóng đi kèm.
Ví dụ thẻ <br/> dùng để xuống dòng là một thẻ tự đóng:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu Đề Trang</title>
    </head>
<body>


<h2>Đây là một đề mục.</h2>


Đây là một dòng văn bản thông thường.
Một dòng mới vừa được tạo thêm vào phía trước câu văn này.
</body>
</html>

Hiển Thị Trang HTML

Hiển thị trang HTML (render HTML) là việc sử dụng một phần mềm như trình duyệt web để chuyển đọc và phần tích ý nghĩa các thẻ sau đó hiển thị ra nội dung trang tương ứng.

Ví dụ với đoạn mã HTML như trên sẽ được hiển thị như sau trên trình duyệt.

Ngược lại khi đang xem một nội dung một trang web trên trình duyệt thì để xem mã HTML của trang này bạn có thể bấm chuột phải và chọn View Source hay View Page Source hoặc sử dụng tổ hợp phím tắt control + U (trên Windows) hoặc command + opt + U nếu bạn dùng Mac OSX.