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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *