Cara Membuat HTML Dengan Mudah

Pada tutorial ini kita akan membahas cara membuat html dengan mudah, pada tutorial ini hanya dengan aplikasi notepad yang sudah tersedia pada sistem operasi Windows. Pada tutorial ini kita akan membuat sebuah file html yang didalam file html tersebut terdapat kode HTML sederhana. Tujuannya supaya lebih mudah dipahami. Apabila kamu ingin membuat kode HTML yang lebih kompleks dengan tutorial secara berurutan kamu dapat mengunjungi halaman seri tutorial HTML dasar.

Cara Membuat HTML Dengan Mudah

Cara Membuat HTML

Untuk membuat file HTML dengan notepad, langkah pertama tentunya silakan buka aplikasi notepad kamu terlebih dahulu, dengan cara klik menu windows dan cari notepad. Jika sudah ketemu silakan buka, dan tampilan awalnya seperti ini.

Gambar Tampilam Awal Notepad

Sekarang silakan tulis contoh kode HTML yang ada dibawah ini pada notepad.

Setelah selesai ditulis pada notepad dan contohnya seperti gambar dibawah ini:

Contoh Kode HTML Pada Notepad

Kemudian langkah selanjutnya silakan simpan dengan cara klik File > Save, maka akan muncul seperti gambar dibawah, silakan pilih folder tempat penyimpanan yang mudah diakses. Pada contoh ini saya menyimpannya pada directory D:\Cara Kode\HTML. Kemudian bagian terpenting yaitu pada File name dan Save as Type (lihat bagian gambar yang ditandai kotak merah dibawah). Pada bagian File name yang sebelumnya ada .txt silakan ganti dengan index.html. Dan pada bagian Save as Type silakan pilih All Files. Selanjutnya klik Save.

Contoh Gambar Menyimpan File HTML Pada Notepad

Sampai disini kamu sudah berhasil membuat sebuah file HTML, selanjutnya silakan buka folder tempat menyimpan file HTML tadi.

File HTML Yang Sudah Dibuat

Dan buka file index.html tersebut pada browser favorit kamu, bisa dengan cara klik 2 kali pada file HTML tersebut atau klik kanan pada file index.html kemudian pilih Open with dan pilih browser yang kamu inginkan, disini saya memilih Google Chrome.

Gamabar Contoh Menjalankan File HTML

Setelah file HTML berhasil dibuka pada browser maka akan tampil seperti contoh gambar dibawah.

Gambar Hasil File HTML Yang Dibuat

Penjelasan Kode

Pada contoh kode diatas merupakan contoh kode struktur dasar HTML, dan penjelasannya adalah sebagai berikut.

  • Pada baris pertama terdapat kode <!DOCTYPE html> yang fungsinya untuk memberi tahu browser bahwa file yang dibuka adalah file HTML.
  • Pada baris nomor 2 terdapat kode <html>, kode tersebut merupakan tag pembuka HTML dan tag penutupnya terdapat pada baris nomor 9 yaitu </html>. Pada HTML apabila tag HTML memiliki tag penutup biasanya tag penutup tersebut memiliki tambahan garis miring (/).
  • Pada baris nomor 3 terdapat kode <head>, kode tersebut disebut dengan tag head, dan tag head ini memiliki tag penutup, yang contohnya terdapat pada baris nomor 5 yaitu </head>. Tag head berfungsi untuk tempat menempatkan informasi-informasi yang ada atau digunakan didalam file HTML, misalnya seperti title, css, script, meta, dan yang lain sebagainya.
  • Pada baris nomor 4 terdapat kode <title>Cara Membuat File HTML</title>, kode tersebut merupakan tag title. Tulisan diantara tag title tersebut tampil pada bagian tab bar atau titel bar pada browser.
  • Pada baris nomor 6 terdapat kode <body>, kode tersebut merupakan tag body, tag body memiliki tag penutup yaitu </body> yang contohnya terdapat pada baris nomor 8. Tag body ini dapat diibaratkan tubuh dalam HTML, maksudnya sesuatu (element HTML) yang ada didalam tag ini akan ditampilkan pada halaman browser.
  • Pada baris nomor 7 terdapat kode <p>Ini Adalah tag paragraf</p>, kode tersebut merupakan tag HTML paragraf (ditulis p). Tag ini berfungsi untuk menulis paragraf pada HTML.

Saya rasa sudah cukup jelas tentang penjelasan cara membuat HTML dengan mudah ini, apabila kamu memiliki pertanyaan silakan tanyakan pada kolom komentar dibawah. Dan apabila kamu penasaran dengan tag-tag HTML lainnya atau ingin mendalami tentang HTML kamu dapat memulai dengan mengunjungi halaman list tutorial HTML dasar yang ada di Cara Kode. Atau kamu juga dapat langsung mengunjungi website w3schools untuk belajar HTML secara lengkap dan banyak contoh kode yang dapat kamu ubah-ubah secara langsung, namun tentunya di w3schools tutorialnya bebahasa inggris.


Kolom Komentar

Related Post