HTML Editor

HTML-Tutorial-Banner

Hai sobat Betta, setelah mengerti dasar apa itu HTML pada blog sebelumnya yaitu HTML Tutorial – Intro. Sekarang saatnya untuk melanjutkan bagaimana mempersiapkan tools untuk memulai membuat dokumen HTML. Tentunya yang kita butuhkan adalah text editor pada blog kali ini kita akan membahas HTML Editor.


[icon name=”exclamation-circle”] Anda hanya perlu editor teks sederhana untuk mempelajari HTML.


Untuk memulai menulis dokumen HTML, ada baiknya menggunakan Text Editor profesional. Akan tetapi rekomendasi untuk belajar menulis dokumen HTML adalah menggunakan text editor default bawaan dari komputer / laptop kita masing-masing, yaitu menggunakan Notepad / TextEdit karena sobat Betta akan dibiasakan untuk menulis bukan menghafal.

Loading...

Step 1: Buka Notepad (PC)

Untuk pengguna Windows 8 atau lebih baru

Buka Start Screen (Simbol jendala pada pojok kiri bawah layar) lalu ketik Notepad.

Untuk pengguna Windows 7 atau lebih baru

Buka Start > Programs > Accessories > Notepad

Step 1: Buka TextEdit (Mac)

Buka Finder > Applications > TextEdit

Jangan lupa untuk merubah beberapa preferensi untuk membuat aplikasi menyimpan file dengan benar. Pada Preferences > Format > pilih “Plain Text” Kemudian di bawah tulisan “Open and Save”, centang kotak yang mengatakan “Display HTML files as HTML code instead of formatted text”.

Kemudian buka dokumen baru untuk menuliskan kode.

Step 2: Menulis Kode HTML

Tulis atau salin kode HTML berikut ke dalam Notepad / TextEdit:

<!DOCTYPE html>
<html>
<body>

<h1>Judul Pertama Saya</h1>

<p>Paragraf Pertama Saya</p>

</body>
</html>
Notepad sebagai Text Editor / HTML Editor
Gambar dari w3school

Step 3: Menyimpan File HTML

Simpan file pada laptop / komputer sobat Betta File > Save As pada Notepad menu. Kemudian beri nama file tersebut dengan nama “index.htm” atau “index.html” dan mengatur pengodean ke UTF-8 (yang merupakan pengodean yang disukai untuk file HTML).

Simpan Dokumen HTML
Gambar dari w3school

[icon name=”exclamation-circle”] Sobat dapat menggunakan .htm atau .html sebagai ekstensi file. Tidak ada perbedaan, terserah sobat Betta.

Step 4: Melihat Hasil di Browser

Silahkan sobat Betta buka file tadi sobat simpan pada Laptop / Komputer, kemudia klik dua kali sehinggan file akan dibuka pada browser default yang sobat Betta gunakan.

Preview Dokumen HTML Pada Browser
Gambar dari w3school

Mudah bukan? untuk belajar HTML bisa sesederhana itu. Silahkan untuk sobat Betta yang ingin belajar HTML silahkan ikuti Blog ini, apabila sobat suka silahkan share blog ini menggunakan tombol bagikan di bawah blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

#TanyaDulu

Boleh loh kalau mau tanya-tanya dulu sebelum menentukan proyek yang kamu mau.