Cara menggunakan html read file txt

HTML 5 provides a standard way to interact with local files with the help of File API. The File API allows interaction with single, multiple as well as BLOB files. The FileReader API can be used to read a file asynchronously in collaboration with JavaScript event handling. However, all the browsers do not have HTML 5 support so it is important to test the browser compatibility before using the File API. There are four inbuilt methods in the FileReader API to read local files:

• FileReader.readAsArrayBuffer(): Reads the contents of the specified input file. The result attribute contains an ArrayBuffer representing the file’s data.
• FileReader.readAsBinaryString(): Reads the contents of the specified input file. The result attribute contains the raw binary data from the file as a string.
• FileReader.readAsDataURL(): Reads the contents of the specified input file. The result attribute contains a URL representing the file’s data.
• FileReader.readAsText(): Reads the contents of the specified input file. The result attribute contains the contents of the file as a text string. This method can take encoding version as the second argument(if required). The default encoding is UTF-8.

In this case we are using FileReader.readAsText() method to read local .txt file.

  

    

  

    01 23

4537

    9

 0 

     2 3 4

 5 

     7 87

0123

456789

    0 

4    2     3    4     5

4    78    9

0123

45

47

    0 

4012

04

    6

7

  

9

This code prints the content of the input file exactly the same as is there in the input file.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Kebanyakan dari kalian pasti sudah mengetahui apa itu Notepad, aplikasi yang disediakan oleh Microsoft sendiri di komputer dan laptop kalian yang sudah ada mulai dari Windows 1.0 pada tahun 1985. Aplikasi ini biasa dipakai sebagai editor teks untuk membuat file teks sederhana. Tapi taukah kalian, aplikasi Notepad yang biasa ini juga dapat dipakai untuk meng-coding pula, yakni dengan mengganti ekstensi teks dari filenya (.txt) menjadi ekstensi lain contoh seperti (.java). Tujuan pemakaian fitur ini beragam, namun sungguh berguna bagi kalian yang ingin memulai belajar HTML yang simple. 

Baca Juga : Cara Menggunakan BGM pada Game Phaser JS

Salah satu kegunaan notepad yakni membuat file HTML sederhana, walaupun sangat sederhana dan kekurangan fitur-fitur teks editor yang lebih professional (layaknya Notepad++) Notepad biasa masih asik sekali bagi yang ingin membuat program sederhana dengan alasan masing-masing.

1. Tata Cara Format HTML di Notepad

Pertama, buka aplikasi Notepad dikomputer atau laptop kalian. Bagi yang menggunakan Mac, dapat menggunakan TextEdit.
Di WIndows 8 dan keatasnya, cari Notepad di Start Screen(sebelah kiri layar)
DI Windows 7, buka Start -> Programs -> Accessories -> Notepad.
Di Mac, buka Finder -> Applications -> TextEdit.

Setelah Notepad/TextEdit telah dibuka, ketiklah , dibawahnya ketik , dibawahnya lagi ketik , dan terakhir dibawahnya ditutupi dengan (INGAT! kebanyakan tag harus diawali dengan <> dan ditutupi dengan ). Sekarang, coba kalian pergi ke bagian atas kiri Notepad dan mengklik File -> Save as. Kalian akan ditampilkan dengan file ekstensi yakni ".txt", Ubahlah menjadi nama file yang di ingin sendiri yang berakhiran ".htm" atau ".html" (Contoh = "myweb.html") pastikan dibawahnya diganti dari "Text Document" menjadi "All Files". bagian Encoding diubah ke ANSI atau UTF-8. Save dan klik filenya (Pastikan Notepad tidak diclose ya). Filenya akan membawa anda ke browser default. Tampilannya hanya akan menunjukkan halaman kosong karena kita belum menambahkan konten apa pun. Contoh kode htmlnya seperti ini:

2. Penambahan Kalimat

Nah. diantara dan adalah tempat dimana konten dapat ditampilkan

Sekarang, coba kalian ketik

, diikuti dengan kalimat yang ingin ditambahkan contoh seperti "My First Web", setelah kalimat ditutupi dengan mengetik. Jadinya My First Web

Baru pergi ke File -> Save. refresh halaman web kalian dan halaman akan menunjukkan kalimat My First Web dengan dengan ukuran besar. Hooray! kalian baru saja membuat judul website paling sederhana.

Sekarang, dibawahnya "

My First Web". Coba kalian ketik

, dilanjutkan dengan kalimat kalian sendiri, buatlah lebih panjang dari kalimat sebelumnya dan diakhiri dengan

. Jadinya

Hallo dan selamat datang ke web pertama saya

Coba kalian Save filenya dan refresh halaman web kalian. Sekarang akan ada kalimat yang kalian ketik sebelumnya berukuran lebih kecil dibanding kalimat judul. tag

sering digunakan untuk menulis paragraf untuk website. Contoh kode htmlnya 

Tampilan Webnya:

3. Penambahan Variasi Untuk Web

Masih diantara dan , kita juga dapat menambahkan variasi-variasi unik untuk website, contoh seperti perubahan warna background atau penambahan gambar.

Untuk warna background, jika ingin merubahnya menjadi warna biru, tinggal ketik . Sekarang warna background kalian akan berwarna biru, untuk merubahnya menjadi warna lain tinggal mengganti kalimat "blue" menjadi nama warna atau kode warna yang diinginkan.

Untuk penambahan gambar. Pertama, pindahkan gambar yang diinginkan ke folder yang sama dengan file HTML kalian. Jika nama dari file gambar/foto kalian susah untuk diketik, ubahlah menjadi nama yang lebih simple. Setelah itu, ketik

(Sesuaikan dengan jenis file gambar anda, jika filenya PNG, ubah menjadi ".png"). Gambar/foto kalian akan tampil di halaman web kalian (ukuran dari foto bisa di ganti dengan menambahkan width="", height="" sebelum tanda tutup >). Contoh kode htmlnya:

Tampilan Webnya:

Hebat bukan? Menggunakan aplikasi teks editor biasa yang tersedia sendiri bisa dipakai untuk membuat web amatir, walaupun aplikasi yang digunakan dan juga hasilnya tidak selevel dengan coding website professional. Notepad bisa menjadi alat yang bagus untuk kalian yang ingin memulai belajar coding.