4 Cara Mengedit File HTML - Pengetahuan

Video: Cara Edit HTML, CSS, dan JavaScript Menggunakan Chrome (Live Editing), Tak Perlu Teks Editor.

Isi

Langkah
Pertanyaan dan Jawaban Komunitas
Tips
Peringatan

Bagian Lain

Jika Anda lebih suka membuat kode situs web dengan tangan, Anda dapat mengedit file HTML di editor teks dasar seperti Notepad (Windows) atau TextEdit (macOS). Jika Anda lebih suka memindahkan elemen di sekitar layar dan melihat pratinjau langsung, Anda dapat menggunakan editor WYSIWYG (What You See Is What You Get) seperti Dreamweaver atau Kompozer. Artikel wikiHow ini menjelaskan cara membuka dan mengedit berkas HTML di aplikasi pengeditan standar atau visual.

Langkah

Metode 1 dari 4: Menggunakan Notepad di Windows

. Ini adalah tombol yang memiliki logo Windows di bilah tugas. Secara default, ini di pojok kiri bawah. Ini menampilkan menu Start
. Letaknya di pojok kanan atas desktop Mac. Ini menampilkan bilah pencarian.
Tipe TextEdit di bilah pencarian. Ini menampilkan daftar aplikasi yang cocok dengan hasil pencarian Anda.
Klik TextEdit.app. Ini ada di bagian atas hasil pencarian. Letaknya di samping ikon yang tampak seperti selembar kertas dan pena.
Klik Mengajukan. Letaknya di bilah menu di bagian atas layar saat TextEdit terbuka.
Klik Buka. Ini membuka browser file yang dapat Anda gunakan untuk menavigasi Mac Anda dan membuka file.
Klik sebuah file HTML dan klik Buka. File HTML memiliki ekstensi yang bertuliskan ".html" setelah nama file. Gunakan browser file untuk menavigasi ke file HTML dan klik untuk memilihnya. Lalu klik Buka untuk membuka file HTML di TextEdit.
Edit kode HTML. Anda dapat menggunakan TextEdit untuk mengedit kode HTML saat dibuat. Anda perlu mempelajari HTML agar dapat mengeditnya dengan tangan. Elemen umum yang dapat Anda edit termasuk yang berikut ini.
- : Ini berada di bagian atas dokumen HTML. Ini memberi tahu browser web bahwa ini adalah dokumen HTML.
- : Tag ini berada di bagian atas dan bawah dokumen HTML. Ini menunjukkan di mana kode HTML dimulai dan berhenti.
- : Tag ini berada di bagian atas dokumen HTML. Mereka menunjukkan di mana kepala dokumen HTML dimulai dan berhenti. Kepala dokumen HTML berisi informasi yang tidak terlihat di halaman web. Ini termasuk judul halaman, metadata, dan CSS
- Judul halaman: Tag ini menunjukkan judul halaman. Judul berada di bagian atas dokumen HTML. Ketik judul halaman di antara dua tag ini.
- : Tag ini menunjukkan di mana badan dokumen HTML dimulai dan berhenti. Body adalah tempat semua konten halaman web ditulis. Badan muncul setelah kepala dalam dokumen HTML.
- Teks Judul: Tag ini membuat tag judul. Teks di antara "
  "dan"
  Tag "muncul sebagai teks tebal besar. Teks masuk ke badan dokumen HTML.
- Teks paragraf: Tag ini digunakan untuk membuat teks paragraf dalam dokumen HTML. Teks yang berada di antara "
  "dan"
  "muncul sebagai teks berukuran normal. Teks masuk ke badan dokumen HTML.
- Teks tebal: Tag ini digunakan untuk membuat teks tebal. Teks yang berada di antara ""dan""muncul sebagai teks tebal.
- Teks Miring: Tag ini digunakan untuk membuat teks miring. Teks yang berada di antara ""dan""muncul sebagai teks miring.
- Teks tautan: Tag ini digunakan untuk menautkan ke situs web lain. Salin alamat web yang ingin Anda tautkan dan tempelkan di tempat yang bertuliskan "URL" (di antara tanda kutip). Teks untuk tautan yang bertuliskan "Teks tautan" (tidak perlu tanda kutip).
- : Tag ini digunakan untuk memposting gambar menggunakan HTML. Ganti teks yang mengatakan "URL gambar" dengan alamat web gambar.
Klik Mengajukan. Letaknya di bilah menu di bagian atas layar.
Klik Menyimpan. Letaknya di menu drop-down di bawah "File". Ini menyimpan file HTML.
- Untuk mengubah nama file, klik Ganti nama di menu tarik-turun "File". Ketikkan nama baru untuk file di bagian atas layar. Pastikan untuk menyertakan ekstensi ".html" di bagian atas halaman.

Metode 3 dari 4: Menggunakan Dreamweaver

Buka Dreamweaver. Dreamweaver memiliki ikon berbentuk kotak hijau bertuliskan "Dw" di tengahnya. Klik ikon di menu Start Windows, atau folder Aplikasi di Mac untuk membuka Dreamweaver.
- Adobe Dreamweaver membutuhkan langganan. Anda dapat membeli langganan mulai dari $ 20,99 sebulan.
Klik Mengajukan. Letaknya di bilah menu di bagian atas layar.
Klik Buka. Letaknya di menu drop-down di bawah "File".
Pilih dokumen HTML dan klik Buka. Gunakan browser file untuk memilih dokumen HTML di komputer Anda dan klik untuk memilihnya. Lalu klik Buka di pojok kanan bawah.
Klik Membagi. Ini adalah tab tengah di bagian atas halaman. Ini menampilkan layar terpisah yang berisi editor HTML di bagian bawah dan layar pratinjau di atas.
Edit dokumen HTML. Gunakan editor HTML untuk mengedit HTML. Cara Anda mengedit HTML di Dreamweaver tidak terlalu berbeda dengan mengedit HTML di Notepad atau TextEdit. Saat Anda mengetik tag HTML, menu pencarian akan muncul dengan tag HTML yang cocok. Anda dapat mengklik tag HTML untuk memasukkan tag pembuka dan penutupnya. Dreamweaver akan memeriksa untuk memastikan ada tag pembuka dan penutup untuk semua elemen HTML Anda.
- Alternatifnya, Anda dapat mengklik di mana Anda ingin memasukkan elemen HTML di editor HTML dan klik Memasukkan di bilah menu di bagian atas layar. Klik item yang ingin Anda sisipkan di menu drop-down untuk menambahkan kode HTML secara otomatis.
Klik Mengajukan. Setelah Anda selesai mengedit dokumen HTML, klik Mengajukan di bilah menu di bagian atas layar.
Klik Menyimpan. Letaknya di menu tarik-turun di bawah Mengajukan. Ini menyimpan dokumen HTML Anda.

Metode 4 dari 4: Menggunakan Kompozer

Pergi ke https://sourceforge.net/projects/kompozer/ di browser web. Anda dapat menggunakan browser web apa pun di PC atau Mac. Ini adalah halaman unduh untuk Kompozer. Ini adalah editor HTML (WYSIWYG) gratis yang bekerja pada Windows dan Mac.
Klik Unduh. Tombol hijau ini berada di dekat bagian atas halaman. Ini membawa Anda ke halaman unduhan terpisah. Setelah penundaan 5 detik, unduhan Anda akan dimulai.
Klik dua kali file Instal. Secara default, file unduhan Anda dapat ditemukan di folder "Unduhan" di PC atau Mac. Anda juga dapat mengkliknya di browser web Anda untuk meluncurkan penginstal Kompozer. Gunakan petunjuk berikut untuk menginstal Kompozer:
- Windows:
  - Jika ditanya apakah Anda ingin mengizinkan penginstal membuat perubahan pada sistem Anda, klik Iya.
  - Klik Lanjut di jendela intro.
  - Klik tombol radial di samping "Saya menerima perjanjian" dan klik Lanjut.
  - Klik Lanjut untuk menggunakan lokasi penginstalan default atau klik Jelajahi untuk memilih lokasi pemasangan yang berbeda.
  - Klik Lanjut lalu klik Lanjut lagi
  - Klik Install
  - Klik Selesai
- Mac:
  - Klik dua kali file instal Kompozer.
  - Klik KompoZer.app
  - Klik ikon Apple di pojok kiri atas.
  - Klik Preferensi Sistem
  - Klik Keamanan dan Privasi
  - Klik Umum tab.
  - Klik Buka saja di dekat bagian bawah jendela.
  - Klik Buka di Jendela pop-up.
  - Seret ikon Kompozer ke desktop Anda.
  - Buka Finder.
  - Klik Aplikasi map.
  - Seret ikon Kompozer dari desktop ke folder Aplikasi.
Buka Kompozer. Gunakan langkah-langkah berikut untuk membuka Kompozer di PC atau Mac
- Windows:
  - Klik Windows Mulai Tidak bisa.
  - Ketik "Kompozer"
  - Klik dua kali ikon Kompozer.
- Mac:
  - Klik ikon kaca pembesar di pojok kanan atas.
  - Ketik "Kompozer" di bilah pencarian.
  - Klik dua kali Kompozer.app.
Klik Mengajukan. Letaknya di bilah menu di bagian atas aplikasi.
Klik Membuka file. Ini adalah opsi kedua pada menu drop-down di bawah "File". File browser terbuka ini dapat Anda gunakan untuk memilih file HTML yang terbuka.
Klik sebuah file HTML dan klik Buka. Ini membuka file HTML di Kompozer.
Klik Membagi. Ini adalah tab tengah di bagian atas halaman. Ini menampilkan layar terpisah yang berisi editor HTML di bagian bawah dan layar pratinjau di atas.
- Anda mungkin perlu memperbesar aplikasi agar Anda memiliki lebih banyak ruang untuk bekerja.
Edit dokumen HTML. Layar kode sumber HTML ada di bagian bawah, Anda dapat menggunakan layar ini untuk mengedit HTML seperti yang Anda lakukan di Notepad atau TextEdit. Anda juga dapat menggunakan layar pratinjau untuk mengedit HTML Anda menggunakan langkah-langkah berikut:
- Gunakan menu drop-down di pojok kanan atas untuk memilih jenis teks (mis. Judul, paragraf, dll.}
- Klik dan ketik untuk menambahkan teks.
- Gunakan tombol pada panel di bagian atas layar untuk menambahkan huruf tebal, miring, perataan teks, indentasi, atau daftar ke teks Anda.
- Klik kotak berwarna di panel di bagian atas layar untuk mengubah warna teks.
- Klik Gambar ikon di bagian atas layar untuk menambahkan gambar ke dokumen HTML Anda.
- Klik ikon yang tampak seperti rantai untuk menambahkan tautan ke dokumen HTML Anda.
Klik Menyimpan ikon. Setelah Anda selesai membuat perubahan pada dokumen Anda, klik Menyimpan ikon di bagian atas layar. Letaknya di bawah ikon yang tampak seperti floppy disk. Ini menghemat pekerjaan Anda.