Hướng dẫn how do i display a text file in html? - làm cách nào để hiển thị tệp văn bản trong html?

Làm việc trong một dự án, một trong những trang web sẽ hiển thị danh sách mọi người (cụ thể là danh sách những người từ một lớp tốt nghiệp chưa được định vị). Thay vì cập nhật thủ công các danh sách này trong các bảng là cách thực hiện Web 1.0, tôi muốn lấy danh sách tên đã gửi, chuyển chúng sang danh sách .txt đơn giản và sau đó hiển thị danh sách đó trên trang web.

Cho đến nay, cách dễ dàng để làm điều này là sử dụng phần tử iframe ... Chỉ có điều là, tôi không thể (hoặc không biết cách) áp dụng bất kỳ kiểu dáng văn bản nào cho nội dung của iframe. Tôi đã xuất bản một mẫu về những gì tôi có thể hoàn thành ở đây: http://dongarber.com/test//helpus-iframetest.html

Phông chữ mặc định là chuyển phát nhanh và khách hàng có thể sẽ không quá quan tâm đến nó. Có cách nào tốt hơn để làm điều này không, điều đó không yêu cầu ASP.NET hoặc cơ sở dữ liệu?

#list  p {
    font: arial;
    font-size: 14px;
}

...


    <p>Help us locate all of our classmates from the High School class of 1961. If  you know&nbsp;where they live&nbsp;or their e-mail addresses contact the Reunion Committee.</p>
    <p>&nbsp;</p>
    <div id="list"><p><iframe src="missingmen.txt" width=200 height=400 frameborder=0 ></iframe></p></div>



  </div>

Một trình soạn thảo văn bản đơn giản là tất cả những gì bạn cần để học HTML.

Tìm hiểu HTML bằng Notepad hoặc Textedit

Các trang web có thể được tạo và sửa đổi bằng cách sử dụng các biên tập viên HTML chuyên nghiệp.

Tuy nhiên, để học HTML, chúng tôi đề xuất một trình soạn thảo văn bản đơn giản như Notepad (PC) hoặc Textedit (MAC).

Chúng tôi tin rằng sử dụng một trình soạn thảo văn bản đơn giản là một cách tốt để học HTML.

Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn với Notepad hoặc Textedit.

Bước 1: Mở Notepad (PC)

Windows 8 trở lên:

Mở màn hình bắt đầu (biểu tượng cửa sổ ở phía dưới bên trái trên màn hình của bạn). Loại Notepad.Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 trở lên:

Mở Bắt đầu> Chương trình> Phụ kiện> NotepadStart > Programs > Accessories > Notepad

Bước 1: Mở Textedit (Mac)

Open Finder> Ứng dụng> TexteditFinder > Applications > TextEdit

Đồng thời thay đổi một số tùy chọn để có được ứng dụng để lưu chính xác các tệp. Trong Tùy chọn> Định dạng> Chọn "Văn bản thuần túy"In Preferences > Format > choose "Plain Text"

Sau đó, trong "Mở và lưu", hãy chọn hộp có nội dung "Hiển thị các tệp HTML dưới dạng mã HTML thay vì văn bản được định dạng".

Sau đó mở một tài liệu mới để đặt mã.

Bước 2: Viết một số HTML

Viết hoặc sao chép mã HTML sau vào Notepad:

Tiêu đề đầu tiên của tôi

Đoạn đầu tiên của tôi.

Bước 3: Lưu trang HTML

Lưu tệp trên máy tính của bạn. Chọn Tệp> Lưu như trong menu Notepad.File > Save as in the Notepad menu.

Đặt tên cho tệp "index.htm" và đặt mã hóa thành UTF-8 (đây là mã hóa ưa thích cho các tệp HTML)."index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Mẹo: Bạn có thể sử dụng .htm hoặc .html làm tiện ích mở rộng tệp. Không có sự khác biệt; điều đó phụ thuộc vào bạn. You can use either .htm or .html as file extension. There is no difference; it is up to you.

Bước 4: Xem trang HTML trong trình duyệt của bạn

Mở tệp HTML đã lưu trong trình duyệt yêu thích của bạn (nhấp đúp vào tệp hoặc nhấp chuột phải - và chọn "Mở bằng").

Kết quả sẽ trông giống như thế này:

Biên tập viên trực tuyến W3Schools - "Hãy tự mình thử"

Với trình chỉnh sửa trực tuyến miễn phí của chúng tôi, bạn có thể chỉnh sửa mã HTML và xem kết quả trong trình duyệt của bạn.

Nó là công cụ hoàn hảo khi bạn muốn kiểm tra mã nhanh. Nó cũng có mã hóa màu và khả năng lưu và chia sẻ mã với những người khác:test code fast. It also has color coding and the ability to save and share code with others:

Thí dụ

Tiêu đề trang

Đây là một tiêu đề này là một đoạn văn.

This is a paragraph.

Tiêu đề đầu tiên của tôi

Đoạn đầu tiên của tôi.

Không gian trường học W3schools

Bước 3: Lưu trang HTMLfree website builder, called W3schools Spaces:

Cập nhật lần cuối: ngày 22 tháng 8 năm 2022

Trong - JavaScript

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp đọc tệp văn bản và hiển thị trong HTML bằng JavaScript, ở đây chúng tôi đã xác định thẻ đầu vào tệp để thu thập tệp văn bản và trong đối tượng đầu đọc tệp được xác định tập lệnh và chúng tôi tải tệp văn bản đã tải lên bằng sự kiện Onload.

Chúng tôi đang truy xuất tất cả các văn bản từ tệp bằng đối tượng đầu đọc tệp và nối vào phần tử div được xác định trong khối HTML để hiển thị toàn bộ nội dung trong tệp văn bản được tải lên theo phương thức readastext ().

Hướng dẫn từng bước về đọc tệp văn bản và hiển thị trong HTML bằng JavaScript:-

Ở đây chúng tôi đã xác định thẻ đầu vào với loại tệp để tải lên tệp văn bản và thẻ div được xác định với ID id res, cho các nội dung tệp được truy xuất trên trang web.

Trong tập lệnh, chúng tôi thêm trình nghe sự kiện trên thẻ đầu vào bằng ID id, sau đó xác định chức năng trong đó để đọc tệp văn bản.

Ở đây chúng tôi tạo đối tượng đầu đọc tệp 'file_reader' sau đó chúng tôi thêm sự kiện onload với hàm được xác định sau đó, trong đó chúng tôi đặt vị trí đối tượng file_reader sau đó sử dụng phương thức readastext () Chúng tôi đọc nội dung của tệp văn bản từ vị trí đầu tiên và được thêm vào tất cả các nội dung trên div phần tử div 'res'.

<!DOCTYPE html>
<html>
    <head>
        <title>Read and Display Text File</title>
    </head>
    <body>
        <input type="file" name="rf" id="infl">
        <div id="res"></div>
        <script>
            document.getElementById('infl').addEventListener('change',function(){
                var file_reader=new FileReader();
                file_reader.onload=function(){
                    document.getElementById('res').textContent=file_reader.result;
                }
                file_reader.readAsText(this.files[0]);
            })
        </script>
    </body>
</html>

1. Tag được hướng dẫn trình duyệt web về phiên bản tệp HTML được viết và nó không có thẻ kết thúc nào.
2. Thẻ được sử dụng để chỉ ra sự khởi đầu của tài liệu HTML.
3. Như đã hiển thị thẻ được hiển thị chứa thông tin về trang web và các liên kết tệp bên ngoài được khai báo ở đây. Tag được sử dụng để đặt tiêu đề trang web.
4. Cả hai và thẻ đều có thẻ kết thúc cặp của họ, vì vậy chúng tôi cần đóng các thẻ kết thúc tương ứng. Nếu bạn không đóng bất kỳ ai của Tag kết thúc đúng cách cũng ảnh hưởng đến kết quả trang web.
5. TAG là bắt đầu của phần mã hóa chính vì nó chứa mã hóa toàn bộ các khối trang web và các yếu tố được mô tả ở đây.
6. Trong HTML, chúng tôi đã xác định thẻ đầu vào với loại tệp để tải lên bất kỳ tệp văn bản nào và thẻ div được xác định với ID id res cho các nội dung được truy xuất trên trang web.
7. Trong chúng tôi, việc thêm sự kiện AddEventListener trên thẻ đầu vào bằng ID ‘Infl, bằng cách sử dụng mà chúng tôi xác định‘ Thay đổi chức năng, trong đó chúng tôi đã tạo đối tượng đầu đọc tệp ‘File_Reader.
8. Chúng tôi nối thêm sự kiện onload cho chức năng xác định, ở đây chúng tôi thêm trình đọc tệp trên phần tử div ‘res, sau đó sử dụng phương thức readastext () với đối tượng đầu đọc tệp Chúng tôi đọc tất cả các nội dung từ vị trí 0 và nối vào phần tử div.
9. Cả hai, các thẻ đóng tương ứng. TAG chỉ ra phần cuối của cơ thể, sau đó thẻ cho biết đầu cuối của tài liệu HTML.

Sự kết luận :-

Tóm lại, bây giờ chúng tôi có thể biết cách đọc tệp văn bản và hiển thị trong HTML bằng JavaScript.

Khi chúng tôi thực hiện chương trình này trên trình duyệt, chúng tôi có thể thấy tùy chọn tải lên tệp mà người dùng cần tải lên .txt nhập bất kỳ một tệp nào sau đó kết quả của tệp đó chứa các văn bản sẽ được hiển thị trên trang web.

Nếu bạn đã tải lên một số tệp loại khác có nghĩa là nó truy xuất và hiển thị nhưng chúng ta có thể đọc chúng vì chúng ta cần định dạng chúng.

Để đọc bất kỳ loại tệp nào, chúng tôi cần sử dụng trình đọc tệp với một số quy trình khác sau này chúng tôi sẽ thấy về chúng.

Tôi hy vọng hướng dẫn này trên tệp văn bản đọc và hiển thị trong HTML bằng cách sử dụng JavaScript giúp bạn và các bước và phương thức được đề cập ở trên rất dễ thực hiện và thực hiện.

Làm cách nào để hiển thị nội dung của tệp văn bản trong HTML?

Làm thế nào để bạn chèn một tệp văn bản vào HTML?

HTML có thể đọc một tệp văn bản không?

Làm cách nào để xem các tệp cục bộ trong HTML?