Skip to Content

Masuk/Daftar

Cara Menyunting Berkas HTML

Disusun bersama Staf wikiHow

Jika Anda ingin mengodekan situs web secara manual, Anda dapat menyunting berkas HTML melalui program penyunting teks dasar seperti Notepad (Windows) atau TextEdit (macOS). Jika Anda ingin memindahkan elemen-elemen situs dengan mudah dan melihat pratinjau langsung, gunakan penyunting WYSIWYG ( What You See Is What You Get atau Apa yang Anda Lihat Adalah Apa yang Anda Dapatkan) seperti Dreamweaver atau Kompozer. Artikel wikiHow ini akan mengajarkan kepada Anda cara membuka dan menyunting berkas HTML melalui aplikasi penyunting standar atau visual.

Metode 1

Metode 1 dari 4:

Menggunakan Notepad pada Windows

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Edit-HTML-Files-Step-1.jpg\/v4-460px-Edit-HTML-Files-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Edit-HTML-Files-Step-1.jpg\/v4-728px-Edit-HTML-Files-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Tombol ini memiliki logo Windows dan ditampilkan di bilah tugas. Berdasarkan pengaturan bawaan, tombol ini berada di pojok kiri bawah layar. Menu “Start” akan ditampilkan setelahnya.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9f\/Edit-HTML-Files-Step-2.jpg\/v4-460px-Edit-HTML-Files-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9f\/Edit-HTML-Files-Step-2.jpg\/v4-728px-Edit-HTML-Files-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Aplikasi Notepad akan ditampilkan di menu “Start”.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/46\/Edit-HTML-Files-Step-3.jpg\/v4-460px-Edit-HTML-Files-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/46\/Edit-HTML-Files-Step-3.jpg\/v4-728px-Edit-HTML-Files-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Aplikasi ini ditandai oleh ikon buku catatan dengan sampul berwarna biru.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Edit-HTML-Files-Step-4.jpg\/v4-460px-Edit-HTML-Files-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Edit-HTML-Files-Step-4.jpg\/v4-728px-Edit-HTML-Files-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada di bagian atas bilah menu Notepad. Menu drop-down akan ditampilkan setelahnya. Jendela penelusuran berkas akan muncul agar Anda dapat membuka berkas di Notepad.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Edit-HTML-Files-Step-5.jpg\/v4-460px-Edit-HTML-Files-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Edit-HTML-Files-Step-5.jpg\/v4-728px-Edit-HTML-Files-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini merupakan pilihan kedua pada menu drop-down “ File ”.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/Edit-HTML-Files-Step-6.jpg\/v4-460px-Edit-HTML-Files-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/Edit-HTML-Files-Step-6.jpg\/v4-728px-Edit-HTML-Files-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Klik menu drop-down berlabel " Text Documents (.txt) " dan pilih " All files " dari menu. Semua jenis dokumen (termasuk berkas HTML) akan ditampilkan di jendela penelusuran berkas.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/Edit-HTML-Files-Step-7.jpg\/v4-460px-Edit-HTML-Files-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/Edit-HTML-Files-Step-7.jpg\/v4-728px-Edit-HTML-Files-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
Pilih berkas HTML dan klik Open . Dokumen HTML akan dibuka di Notepad. Setelah itu, Anda bisa menyunting kode HTML melalui aplikasi.
- Sebagai alternatif, Anda bisa membuat dokumen HTML baru di Notepad.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/Edit-HTML-Files-Step-8.jpg\/v4-460px-Edit-HTML-Files-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/Edit-HTML-Files-Step-8.jpg\/v4-728px-Edit-HTML-Files-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Sunting kode HTML. Untuk menyunting berkas HTML di Notepad, Anda harus mempelajari HTML agar dapat menyuntingnya secara manual. Beberapa elemen umum yang Anda dapat sunting mencakup:
- <!DOCTYPE html> : Penanda ini berada di bagian atas dokumen HTML. Fungsinya memberi tahu peramban web bahwa dokumen yang dibuka merupakan dokumen HTML.
- <html></html> : Penanda ini ditempatkan di awal dan akhir dokumen HTML. Fungsinya menandakan awal dan akhir kode HTML.
- <head></head> : Penanda ini ditambahkan di awal dokumen HTML. Fungsinya menandakan awal dan akhir kepala dokumen. Kepala dokumen memuat informasi yang tidak ditampilkan di halaman web. Informasi tersebut mencakup judul halaman, metadata, dan CSS.
- <title>Judul Halaman</title> : Penanda ini menunjukkan judul halaman. Judul perlu ditambahkan pada bagian kepala dokumen. Tikkan judul halaman di antara kedua penanda tersebut.
- <body></body> : Penanda-penanda ini menunjukkan awal dan akhir bagian tubuh/utama dokumen HTML. Bagian tubuh memuat semua konten halaman web. Segmen ini ditambahkan setelah bagian kepala dokumen.
- <h1>Kepala Berita</h1> : Elemen ini berfungsi membuat kepala atau judul berita. Tulisan di antara penanda "<h1>" dan "</h1>" akan ditampilkan sebagai teks tebal dan besar. Elemen ini ditambahkan ke bagian tubuh/utama dokumen.
- <p>Teks Paragraf</p> : Elemen ini digunakan untuk membuat paragraf pada dokumen HTML. Teks yang dimasukkan di antara penanda "<p>" dan "</p>" akan ditampilkan sebagai tulisan berukuran normal. Elemen ini ditambahkan ke bagian tubuh/utama dokumen.
- <b>Teks Tebal</b> : Penanda ini digunakan untuk membuat teks tebal. Tulisan yang disisipkan di antara penanda "<b>" dan "</b>" akan ditampilkan sebagai teks tebal.
- <i>Teks Miring</i> : Penanda ini digunakan untuk membuat teks miring. Tulisan yang disisipkan di antara penanda "<i>" dan "</i>" akan ditampilkan sebagai teks miring.
- <a href="URL">Teks Tautan</a> : Penanda ini digunakan untuk membuat tautan ke situs web lain. Salin alamat web yang Anda ingin tautkan dan tempelkan pada bagian "URL" (apit dengan tanda kutip). Masukkan teks tautan pada bagian "Teks Tautan" (tanpa tanda kutip).
- <img src="URL gambar"> : Penanda ini digunakan untuk mengunggah gambar menggunakan HTML. Ganti teks "URL gambar" dengan alamat web gambar yang Anda inginkan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/Edit-HTML-Files-Step-9.jpg\/v4-460px-Edit-HTML-Files-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/Edit-HTML-Files-Step-9.jpg\/v4-728px-Edit-HTML-Files-Step-9.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada bilah menu di atas layar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/Edit-HTML-Files-Step-10.jpg\/v4-460px-Edit-HTML-Files-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/Edit-HTML-Files-Step-10.jpg\/v4-728px-Edit-HTML-Files-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
Klik Save As . Kotak dialog akan dibuka dan Anda bisa menyimpan berkas melalui kotak tersebut.
- Untuk menyimpan berkas dengan nama dan jenis berkas yang sama, cukup klik “ Save ” pada menu drop-down di bawah tombol " File ".
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/Edit-HTML-Files-Step-11.jpg\/v4-460px-Edit-HTML-Files-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/Edit-HTML-Files-Step-11.jpg\/v4-728px-Edit-HTML-Files-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Gunakan menu drop-down di samping “ Save as Type " untuk memilih opsi " All Files ".
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Edit-HTML-Files-Step-12.jpg\/v4-460px-Edit-HTML-Files-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Edit-HTML-Files-Step-12.jpg\/v4-728px-Edit-HTML-Files-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Gunakan kolom di samping " File Name " untuk mengetikkan nama berkas.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5e\/Edit-HTML-Files-Step-13.jpg\/v4-460px-Edit-HTML-Files-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5e\/Edit-HTML-Files-Step-13.jpg\/v4-728px-Edit-HTML-Files-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Setelah mengetikkan nama berkas pada kolom " File Name ", tambahkan ekstensi ".html" di akhir nama. Tanpa ekstensi ini, berkas akan disimpan dalam format .txt, dan bukan sebagai berkas HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b9\/Edit-HTML-Files-Step-14.jpg\/v4-460px-Edit-HTML-Files-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b9\/Edit-HTML-Files-Step-14.jpg\/v4-728px-Edit-HTML-Files-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Berkas akan disimpan setelahnya.

Iklan

Metode 2

Metode 2 dari 4:

Menggunakan TextEdit pada Mac

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Edit-HTML-Files-Step-15.jpg\/v4-460px-Edit-HTML-Files-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Edit-HTML-Files-Step-15.jpg\/v4-728px-Edit-HTML-Files-Step-15.jpg","smallWidth":460,"smallHeight":349,"bigWidth":728,"bigHeight":553,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Ikon ini berada di pojok kanan atas desktop komputer. Bilah pencarian akan ditampilkan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/Edit-HTML-Files-Step-16.jpg\/v4-460px-Edit-HTML-Files-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/Edit-HTML-Files-Step-16.jpg\/v4-728px-Edit-HTML-Files-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Daftar aplikasi yang cocok dengan hasil pencarian akan ditampilkan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/Edit-HTML-Files-Step-17.jpg\/v4-460px-Edit-HTML-Files-Step-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/Edit-HTML-Files-Step-17.jpg\/v4-728px-Edit-HTML-Files-Step-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada di bagian atas hasil pencarian. Anda bisa melihatnya di samping ikon selembar kertas dan pulpen.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a6\/Edit-HTML-Files-Step-18.jpg\/v4-460px-Edit-HTML-Files-Step-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a6\/Edit-HTML-Files-Step-18.jpg\/v4-728px-Edit-HTML-Files-Step-18.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada bilah menu di atas layar setelah jendela TextEdit terbuka.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Edit-HTML-Files-Step-19.jpg\/v4-460px-Edit-HTML-Files-Step-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Edit-HTML-Files-Step-19.jpg\/v4-728px-Edit-HTML-Files-Step-19.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Jendela penelusuran berkas akan dibuka. Anda dapat menelusuri folder-folder pada komputer dan membuka berkas HTML yang diinginkan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/Edit-HTML-Files-Step-20.jpg\/v4-460px-Edit-HTML-Files-Step-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/Edit-HTML-Files-Step-20.jpg\/v4-728px-Edit-HTML-Files-Step-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Berkas HTML memiliki ekstensi ".html" di akhir namanya. Gunakan jendela penelusuran berkas untuk mencari berkas, kemudian klik untuk memilihnya. Setelah itu, pilih “ Open ” untuk membuka berkas HTML di TextEdit.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/Edit-HTML-Files-Step-21.jpg\/v4-460px-Edit-HTML-Files-Step-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/Edit-HTML-Files-Step-21.jpg\/v4-728px-Edit-HTML-Files-Step-21.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
Sunting kode HTML. Anda bisa menggunakan TextEdit untuk menyunting kode HTML yang dibuat. Namun, Anda perlu mempelajari HTML agar dapat menyuntingnya secara manual. Beberapa elemen umum yang Anda dapat sunting mencakup:
- <!DOCTYPE html> : Penanda ini berada di bagian atas dokumen HTML. Fungsinya memberi tahu peramban web bahwa dokumen yang dibuka merupakan dokumen HTML.
- <html></html> : Penanda ini ditempatkan di awal dan akhir dokumen HTML. Fungsinya menandakan awal dan akhir kode HTML.
- <head></head> : Penanda ini ditambahkan di awal dokumen HTML. Fungsinya menandakan awal dan akhir kepala dokumen. Kepala dokumen memuat informasi yang tidak ditampilkan di halaman web. Informasi tersebut mencakup judul halaman, metadata, dan CSS.
- <title>Judul Halaman</title> : Penanda ini menunjukkan judul halaman. Judul perlu ditambahkan pada bagian kepala dokumen. Tikkan judul halaman di antara kedua penanda tersebut.
- <body></body> : Penanda-penanda ini menunjukkan awal dan akhir bagian tubuh/utama dokumen HTML. Bagian tubuh memuat semua konten halaman web. Segmen ini ditambahkan setelah bagian kepala dokumen.
- <h1>Kepala Berita</h1> : Elemen ini berfungsi membuat kepala atau judul berita. Tulisan di antara penanda "<h1>" dan "</h1>" akan ditampilkan sebagai teks tebal dan besar. Elemen ini ditambahkan ke bagian tubuh/utama dokumen.
- <p>Teks Paragraf</p> : Elemen ini digunakan untuk membuat paragraf pada dokumen HTML. Teks yang dimasukkan di antara penanda "<p>" dan "</p>" akan ditampilkan sebagai tulisan berukuran normal. Elemen ini ditambahkan ke bagian tubuh/utama dokumen.
- <b>Teks Tebal</b> : Penanda ini digunakan untuk membuat teks tebal. Tulisan yang disisipkan di antara penanda "<b>" dan "</b>" akan ditampilkan sebagai teks tebal.
- <i>Teks Miring</i> : Penanda ini digunakan untuk membuat teks miring. Tulisan yang disisipkan di antara penanda "<i>" dan "</i>" akan ditampilkan sebagai teks miring.
- <a href="URL">Teks Tautan</a> : Penanda ini digunakan untuk membuat tautan ke situs web lain. Salin alamat web yang Anda ingin tautkan dan tempelkan pada bagian "URL" (apit dengan tanda kutip). Masukkan teks tautan pada bagian "Teks Tautan" (tanpa tanda kutip).
- <img src="URL gambar"> : Penanda ini digunakan untuk mengunggah gambar menggunakan HTML. Ganti teks "URL gambar" dengan alamat web gambar yang Anda inginkan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Edit-HTML-Files-Step-22.jpg\/v4-460px-Edit-HTML-Files-Step-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Edit-HTML-Files-Step-22.jpg\/v4-728px-Edit-HTML-Files-Step-22.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada bilah menu di atas layar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/Edit-HTML-Files-Step-23.jpg\/v4-460px-Edit-HTML-Files-Step-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/Edit-HTML-Files-Step-23.jpg\/v4-728px-Edit-HTML-Files-Step-23.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
Pilih Save . Opsi ini berada pada menu drop-down di bawah tombol " File ". Berkas HTML akan disimpan.
- Untuk mengubah nama berkas, klik “ Rename ” pada menu drop-down " File ". Tikkan nama baru di bagian atas layar. Pastikan Anda mencantumkan ekstensi ".html" di akhir nama, di bagian atas halaman.
Iklan

Metode 3

Metode 3 dari 4:

Menggunakan Dreamweaver

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Edit-HTML-Files-Step-24.jpg\/v4-460px-Edit-HTML-Files-Step-24.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Edit-HTML-Files-Step-24.jpg\/v4-728px-Edit-HTML-Files-Step-24.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Buka Dreamweaver. Aplikasi ini ditandai oleh ikon persegi berwarna hijau berlabel “Dw” di bagian tengahnya. Klik ikon ini pada menu “Start” (Windows) atau folder “ Application ” (Mac) untuk membuka Dreamweaver.
- Adobe Dreamweaver membutuhkan langganan layanan . Anda bisa berlangganan dengan biaya dari 20,99 dolar Amerika Serikat (sekitar 300 ribu rupiah) per bulan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/27\/Edit-HTML-Files-Step-25.jpg\/v4-460px-Edit-HTML-Files-Step-25.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/27\/Edit-HTML-Files-Step-25.jpg\/v4-728px-Edit-HTML-Files-Step-25.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada bilah menu di atas layar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Edit-HTML-Files-Step-26.jpg\/v4-460px-Edit-HTML-Files-Step-26.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Edit-HTML-Files-Step-26.jpg\/v4-728px-Edit-HTML-Files-Step-26.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada menu drop-down di bawah tombol " File ".
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f6\/Edit-HTML-Files-Step-27.jpg\/v4-460px-Edit-HTML-Files-Step-27.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f6\/Edit-HTML-Files-Step-27.jpg\/v4-728px-Edit-HTML-Files-Step-27.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Gunakan jendela penelusuran berkas untuk memilih dokumen HTML pada komputer dan klik berkas untuk memilihnya. Setelah itu, pilih “ Open ” di pojok kanan bawah jendela.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Edit-HTML-Files-Step-28.jpg\/v4-460px-Edit-HTML-Files-Step-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Edit-HTML-Files-Step-28.jpg\/v4-728px-Edit-HTML-Files-Step-28.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini merupakan tab tengah di bagian atas halaman. Antarmuka program akan dibagi menjadi dua, dengan bagian bawah memuat penyunting HTML dan bagian atas menampilkan pratinjau halaman web. ^{[1]
X
Teliti sumber}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/Edit-HTML-Files-Step-29.jpg\/v4-460px-Edit-HTML-Files-Step-29.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/Edit-HTML-Files-Step-29.jpg\/v4-728px-Edit-HTML-Files-Step-29.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
Sunting dokumen HTML. Gunakan area penyuntingan HTML untuk menyunting dokumen. Proses penyuntingan dokumen HTML pada Dreamweaver tidak begitu berbeda dari proses penyuntingan HTML pada Notepad atau TextEdit. Saat mengetikkan penanda HTML, menu pencarian akan ditampilkan dengan penanda-penanda HTML yang cocok. Anda bisa mengeklik penanda untuk memasukkan penanda pembuka dan penutupnya. Dreamweaver akan memeriksa dan memastikan bahwa ada penanda pembuka dan penutup untuk semua elemen HTML Anda.
- Sebagai alternatif, Anda bisa mengeklik bagian yang perlu ditambahi elemen HTML pada area penyuntingan dan memilih “ Insert ” pada bilah menu di atas layar. Klik elemen yang Anda ingin masukkan dari menu drop-down untuk menambahkan kode elemen secara otomatis.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Edit-HTML-Files-Step-30.jpg\/v4-460px-Edit-HTML-Files-Step-30.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Edit-HTML-Files-Step-30.jpg\/v4-728px-Edit-HTML-Files-Step-30.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Setelah selesai menyunting dokumen, klik “ File ” pada bilah menu di atas layar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8d\/Edit-HTML-Files-Step-31.jpg\/v4-460px-Edit-HTML-Files-Step-31.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8d\/Edit-HTML-Files-Step-31.jpg\/v4-728px-Edit-HTML-Files-Step-31.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada menu drop-down di bawah tombol “ File ”. Dokumen HTML akan disimpan setelahnya.

Iklan

Metode 4

Metode 4 dari 4:

Menggunakan Kompozer

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/41\/Edit-HTML-Files-Step-32.jpg\/v4-460px-Edit-HTML-Files-Step-32.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/41\/Edit-HTML-Files-Step-32.jpg\/v4-728px-Edit-HTML-Files-Step-32.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Kunjungi https://sourceforge.net/projects/kompozer/ melalui peramban web. Anda bisa menggunakan peramban web apa pun pada PC atau komputer Mac. Situs tersebut merupakan halaman unduh Kompozer. Program ini merupakan penyunting HTML gratis (WYSIWYG) yang bisa digunakan, baik pada komputer Windows maupun Mac.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/ba\/Edit-HTML-Files-Step-33.jpg\/v4-460px-Edit-HTML-Files-Step-33.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/ba\/Edit-HTML-Files-Step-33.jpg\/v4-728px-Edit-HTML-Files-Step-33.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Tombol hijau ini berada di bagian atas halaman. Anda akan dibawa ke halaman unduh terpisah. Setelah jeda 5 detik, berkas pemasangan program akan diunduh.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f4\/Edit-HTML-Files-Step-34.jpg\/v4-460px-Edit-HTML-Files-Step-34.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f4\/Edit-HTML-Files-Step-34.jpg\/v4-728px-Edit-HTML-Files-Step-34.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Klik dua kali berkas pemasangan. Berdasarkan pengaturan bawaan, unduhan-unduhan dapat Anda temukan di folder " Downloads " pada PC atau komputer Mac. Anda juga bisa mengeklik berkas pada peramban web untuk menjalankan pemasangan Kompozer. Ikuti petunjuk berikut untuk memasang Kompozer:
- Windows:
  - Jika komputer menanyakan apakah Anda ingin mengizinkan berkas pemasangan membuat perubahan pada sistem, klik “ Yes ”.
  - Klik “ Next ” pada jendela-jendela pembuka.
  - Klik tombol lingkaran di samping " I accept the agreement " dan pilih “ Next ”.
  - Klik “ Next ” untuk menggunakan direktori pemasangan bawaan atau pilih “ Browse ” untuk menentukan lokasi yang lain.
  - Klik “ Next ” dan pilih kembali “ Next ”.
  - Klik “ Install ”.
  - Klik “ Finish ”.
- Mac:
  - Klik dua kali berkas pemasangan Kompozer.
  - Klik “ KompoZer.app ”.
  - Klik ikon Apple di pojok kiri atas layar.
  - Klik “ System Preferences ”.
  - Pilih “ Security and Privacy ”.
  - Klik tab “ General ”.
  - Klik “ Open Anyway ” di bagian bawah jendela.
  - Pilih “ Open ” pada jendela pop-up .
  - Seret ikon Kompozer ke desktop.
  - Buka Finder.
  - Klik folder “ Applications ”.
  - Seret ikon Kompozer dari desktop ke folder “ Applications ”.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Edit-HTML-Files-Step-35.jpg\/v4-460px-Edit-HTML-Files-Step-35.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Edit-HTML-Files-Step-35.jpg\/v4-728px-Edit-HTML-Files-Step-35.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Buka Kompozer. Ikuti langkah-langkah berikut untuk membuka Kompozer pada PC atau komputer Mac.
- Windows:
  - Klik menu “ Start ” Windows.
  - Tikkan "Kompozer".
  - Klik dua kali ikon Kompozer.
- Mac:
  - Klik ikon kaca pembesar di pojok kanan atas layar.
  - Tikkan "Kompozer" pada bilah pencarian.
  - Klik dua kali “ Kompozer.app ”.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0a\/Edit-HTML-Files-Step-36.jpg\/v4-460px-Edit-HTML-Files-Step-36.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Edit-HTML-Files-Step-36.jpg\/v4-728px-Edit-HTML-Files-Step-36.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini berada pada bilah menu di atas jendela aplikasi.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Edit-HTML-Files-Step-37.jpg\/v4-460px-Edit-HTML-Files-Step-37.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Edit-HTML-Files-Step-37.jpg\/v4-728px-Edit-HTML-Files-Step-37.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Opsi ini merupakan pilihan kedua pada menu drop-down di bawah tombol " File ". Jendela penelusuran berkas akan dibuka dan Anda bisa memilih berkas HTML yang akan dibuka.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Edit-HTML-Files-Step-38.jpg\/v4-460px-Edit-HTML-Files-Step-38.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Edit-HTML-Files-Step-38.jpg\/v4-728px-Edit-HTML-Files-Step-38.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Berkas HTML akan dibuka di Kompozer.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Edit-HTML-Files-Step-39.jpg\/v4-460px-Edit-HTML-Files-Step-39.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Edit-HTML-Files-Step-39.jpg\/v4-728px-Edit-HTML-Files-Step-39.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Klik Split . Opsi ini merupakan tab tengah di bagian atas halaman. Antarmuka program akan dibagi menjadi dua, dengan bagian bawah memuat penyunting HTML dan bagian atas menampilkan pratinjau halaman web.
- Anda mungkin perlu memperbesar jendela aplikasi agar memiliki lebih banyak ruang untuk bekerja.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3e\/Edit-HTML-Files-Step-40.jpg\/v4-460px-Edit-HTML-Files-Step-40.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3e\/Edit-HTML-Files-Step-40.jpg\/v4-728px-Edit-HTML-Files-Step-40.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
Sunting dokumen HTML. Area kode sumber HTML berada di bagian bawah jendela. Anda bisa menggunakan area tersebut untuk menyunting dokumen HTML, seperti pada Notepad atau TextEdit. Anda juga bisa menggunakan area pratinjau untuk menyunting dokumen HTML dengan langkah-langkah berikut:
- Gunakan menu drop-down di pojok kanan atas untuk memilih jenis teks (mis. “ Heading ”, “ paragraph ”, dan lain-lain)
- Klik dan tikkan teks untuk menambahkan tulisan.
- Gunakan tombol-tombol pada panel di atas layar untuk menambahkan teks tebal dan miring, menyesuaikan penjajaran dan indentasi teks, serta menyisipkan daftar.
- Klik persegi berwarna pada panel di atas layar untuk mengubah warna teks.
- Klik ikon “ Image ” di bagian atas layar untuk menambahkan gambar ke dokumen.
- Klik ikon rantai besi untuk menambahkan tautan ke dokumen HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3a\/Edit-HTML-Files-Step-41.jpg\/v4-460px-Edit-HTML-Files-Step-41.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3a\/Edit-HTML-Files-Step-41.jpg\/v4-728px-Edit-HTML-Files-Step-41.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Setelah selesai membuat perubahan pada dokumen, klik ikon “ Save ” di bagian atas layar. Ikon ini berada di bawah ikon disket. Pekerjaan atau perubahan akan disimpan setelahnya.

Iklan

Peringatan

Ingatlah untuk selalu menyimpan dokumen saat menyuntingnya. Kesalahan atau galat dapat terjadi kapan pun.

Iklan

wikiHow Terkait

Iklan

Referensi

↑ https://www.youtube.com/watch?v=a9ShcuQlhNg

Tentang wikiHow ini

Disusun bersama :

Staf Penulis wikiHow

Artikel ini disusun oleh tim penyunting terlatih dan peneliti yang memastikan keakuratan dan kelengkapannya.

Tim Manajemen Konten wikiHow memantau hasil penyuntingan staf kami secara saksama untuk menjamin artikel yang berkualitas tinggi. Artikel ini telah dilihat 6.307 kali.

Daftar kategori: Komputer

Cetak

Halaman ini telah diakses sebanyak 6.307 kali.

Apakah artikel ini membantu Anda?

Iklan

-

-

658

.mwimg a.image{display:none}#header_logo{display:none}#cse-search-box{display:none}#cse-search-box-noscript{display:block !important}#cse-search-box-noscript .cse_q{color:#FFF;background-color:#B3CE9C}.wh_search .cse_q{width:88%}#mw-mf-main-menu-button{display:none;visibility:hidden}.header .search{display:none}#search_footer .cse_sa{background-image:url(/extensions/wikihow/mobile/images/white_mag.png);background-size:22px}.related_box{display:block;background:#EEE;border:5px solid #FFF;vertical-align:bottom;width:127px;background-size:180px;float:left;height:120px;position:relative}.related_box p{line-height:15px !important;font-size:13px;background-color:rgba(67,95,44,.4);color:#FFF;font-weight:bold;padding:8px;margin:0 !important;position:absolute;bottom:0}#noscript_header_logo{display:table-cell;vertical-align:middle;background-position:50% 77%;background-repeat:no-repeat;background-image:url(/extensions/wikihow/mobile/images/wikihow_logo_230.png);background-size:105px;width:auto;height:51px;padding:0 14px}.articleinfo{display:none}#iorg_free_data{z-index:50;width:100%;position:fixed}#ara_recommendations{display:none}

Design a Mobile Website

View Site in Mobile | Classic

Share by: