Cara menggunakan html 5 editor

Belajar HTML belum lengkap rasanya jika belum membahas tentang text editor. Keberadaan text editor ini sangatlah penting, di mana ia berperan dalam membuat atau menulis kode-kode HTML. Text editor HTML ini akan membuat pekerjaan Anda dalam membuat kode akan jauh lebih mudah.

Table of Contents Show

Rekomendasi Text Editor HTML untuk Pemula
1. Windows Notepad
2. TextEdit (Mac)
3. Sublime Text
Tutorial Menggunakan Text Editor HTML
1. Buka Text Editor Anda
2. Tulis dan Simpan File HTML Anda
3. Pratinjau Laman HTML Anda pada Browser
HTML5 diawali dengan apa?
Apa itu teks editor HTML?
Jenis editor apa yang digunakan untuk mengedit HTML?
Apa aplikasi untuk membuat file HTML di HP?

Beberapa teks editor juga menyediakan beberapa fungsionalitas tambahan yang semakin membantu Anda. Artikel ini adalah artikel lanjutan dari materi dasar html untuk belajar html dan css bagi pemula. Artikel ini pula akan membantu Anda dalam memilih dan menggunakan text editor HTML.

Table of Contents

Rekomendasi Text Editor HTML untuk Pemula

Ada beberapa teks editor yang banyak digunakan saat ini dan cocok digunakan untuk pemula yaitu:

1. Windows Notepad

Aplikasi Notepad adalah aplikasi yang diperuntukkan khusus untuk sistem operasi Windows. Aplikasi ini pun dapat Anda gunakan secara gratis dan bisa digunakan di PC atau laptop Anda. Dengan Notepad, Anda dapat menulis kode-kode HTML yang Anda butuhkan. Kelebihan dari aplikasi ini adalah, memiliki Graphical User Interface (GUI) yang menarik, serta tambahan plugins yang membantu Anda untuk belajar membuat program.

2. TextEdit (Mac)

TextEdit adalah text editor yang ditujukan untuk pengguna Apple. Dengan menggunakan TextEdit, Anda dapat menampilkan dokumen HTML seperti yang Anda lihat pada browser. Anda pun dapat membuat dan mengedit kode HTML dengan menggunakan aplikasi ini.

3. Sublime Text

Sublime text adalah text editor terbaik yang dapat digunakan oleh para pemula di dunia coding maupun programing. Sublime text pun tidak sulit dioperasikan serta didukung juga oleh dokumentasi. Sama seperti Notepad, Sublime Text juga dilengkapi dengan plugin yang dapat membantu Anda dalam belajar membuat kode mupun program.

Artikel Terkait Tutorial HTML/CSS 13 : Style HTML, Cara Mudah Memberikan Style pada tag HTML

4. Vim

Vim adalah text editor yang sangat berguna untuk Anda. Dengan tampilan yang sederhana namun powerful ini akan mempermudah Anda dalam mengontrolnya. Anda dapat mengubah dokumen, memindahkan, menghapus serta mengubah teks secara otomatis dengan menggunakan editor ini.

5. Atom

Text editor ini dikembangkan oleh GitHub namun telah diakuisisi oleh Microsoft pada tahun 2018. Text editor ini pun open source, dan dapat Anda gunakan secara gratis. Proyek yang Anda buat pun dapat dibagikan secara real-time sehingga lebih efisien dari segi waktu pengerjaan proyek. Anda pun dapat menginstal plugin dan tema untuk membuat proyek Anda menjadi lebih menarik.

Artikel Terkait Tutorial HTML/CSS 8 : List HTML, Membuat 3 Tipe List dengan Mudah

Tutorial Menggunakan Text Editor HTML

Pada artikel ini kami menggunakan contoh Notepad dan TextEdit, karena banyak dari Anda pasti sudah memiliki keduanya mengingat Notepad adalah aplikasi bawaan Windows dan TextEdit adalah aplikasi bawaan Mac. Selanjutnya, untuk membuat kode dan dokumen HTML Anda di Notepad maupun TextEdit sangatlah mudah. Hanya dengan tiga langkah berikut ini:

1. Buka Text Editor Anda

Langkah pertama adalah membuka Text Editor Anda. Jika Anda pengguna Windows 7 ke bawah, yang dapat Anda lakukan adalah klik Start > klik All Programs > Accessories > Notepad. Sementara untuk Windows 8 ke atas klik Start > Ketik Notepad pada pencarian > Tekan Enter. Apabila Anda pengguna Mac, Anda hanya perlu mengklik Finder > Application > TextEdit.

2. Tulis dan Simpan File HTML Anda

Selanjutnya, klik New File dengan text editor HTML pilihan Anda dan Anda akan mendapati ruang kosong untuk menulis kode Anda. Berikut adalah contoh kode yang kami gunakan:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Website Anda</title>
</head>
<body>
  <h1>Heading 1</h1>
  <p>Teks Paragraf</p>
</body>
</html>

Setelah itu simpan file di komputer Anda. Simpan file tersebut dengan ekstensi .html. Ingat, harus ekstensi .html karena jika tidak maka website Anda tidak akan bisa dijalankan. Gunakan enkoding UTF-8 sehingga browser dapat mendisplay berbagai karakter tanpa masalah.

3. Pratinjau Laman HTML Anda pada Browser

Terakhir, bukalah file HTML yang Anda simpan di web browser. Anda dapat menggunakan Chrome atau Firefox. Anda juga dapat melakukan hal ini hanya dengan mendrop file Anda ke browser yang Anda gunakan.

Pada HTML5 terdapat sebuah atribut contentEditable. Atribut ini berfungsi untuk mengedit halaman/konten langsung di jendela browser (live editing). Anda dapat menentukan bagian-bagian tertentu dari halaman yang harus diedit dengan cara yang sangat mudah. Pada dasarnya, yang harus Anda lakukan adalah menambahkan atribut tag contentEditable ke elemen. Atribut contentEditable dapat diterapkan untuk setiap elemen HTML, misalnya gambar, list, dan bahkan konten video.

Namun, salah satu keterbatasan dari contentEditable ialah atribut ini tidak menyediakan sarana bagi pengguna untuk menyimpan konten yang diedit ke database. Jadi, untuk menyimpan konten yang diedit, kita akan menggunakan jQuery dan PHP untuk menyimpan konten ke dalam database MySQL.

Pada tutorial ini, kita akan membuat sebuah elemen untuk mengedit dan menyimpan teks saja menggunakan HTML5. Sebagai gambaran, Anda dapat mencoba demo dibawah.

Download

Demo

Langkah 1

Siapkan database terlebih dahulu, pada contoh berikut terdapat 2 field yang digunakan yaitu :

CREATE TABLE konten (
   id_konten INT(3) AUTO_INCREMENT PRIMARY KEY,
   isi_konten TEXT
);

Baca Juga : Cara Membuat Database MySQL

Langkah 2

Mulailah dengan membuat elemen HTML.

<div id="status"></div>
<div id="konten">
   <div id="edit" contentEditable="true">
      Bagian untuk menampilkan teks
   </div>
   <button id="simpan">Simpan</button>
</div>

Keterangan

#edit : digunakan untuk isian teks yang dapat diedit.
#status : untuk menampilkan pesan ketika isian berhasil disimpan atau gagal disimpan.
contentEditable=”true” : mengaktifkan fitur contentEditable.

Ketika dijalankan, kita akan menyembunyikan tombol Simpan. Nantinya tombol Simpan akan tampil ketika div #edit diklik. Begitu juga dengan pesan pada div #status akan kosong (tidak tampil) pada awalnya, namun pesan akan tampil ketika proses simpan berhasil atau gagal.

Langkah 3

Berikan style CSS pada elemen yang telah dibuat. Anda bisa menambahkan style CSS sesuai dengan yang Anda inginkan.

HTML5 diawali dengan apa?

Berikut ini penjelasan dari dokumen HTML5 di atas : o Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>. o Tanda seperti <html> disebut tag.

Apa itu teks editor HTML?

Seperti namanya, HTML editor tekstual merupakan editor yang berbasis teks. Untuk menggunakan tipe editor ini, Anda harus paham HTML terlebih dulu. Pada umumnya sejumlah fitur, termasuk file pembuka – entah itu file single, seluruh proyek, atau beberapa proyek, tersedia di semua editor.

Jenis editor apa yang digunakan untuk mengedit HTML?

19 HTML Editor Terbaik yang Layak Anda Coba.

Notepad++ Notepad++ dibuat untuk sistem operasi Windows. Boleh dikatakan kehadiran Notepad++ ini untuk melengkapi kekurangan dari teks editor bawaan Windows, Notepad. ... .

2. Atom. ... .

3. Brackets. ... .

4. Sublime Text. ... .

Light Table. ... .

6. Bluefish. ... .

7. Aptana Studio. ... .

8. CoffeeCup..