Belajar Dasar Kode Html untuk Membuat Website

Untuk membuat sebuah website, langkah pertama yang wajib dipahami dalam belajar kode dasar html adalah pengetahuan tentang kode kode dasar. Namun sebelum masuk kedalam inti pembahasan, apa itu html?

Html (hyper text markup language) adalah suatu bahasa markup atau markah yang dapat digunakan untuk membangun sebuah situs. Perlu di ingat bahwa html bukan sebuah bahasa bahasa pemrograman.

Bahasa pemrograman adalah kumpulan kode yang digunakan untuk bisa menginstruksi sebuah komputer. Sedangkan bahasa markup hanya digunakan untuk menambahi keterangan, struktur simatik, dan makna pada suatu dokumen.

Software Untuk Membuat Website dengan Html

Sebenarnya tidak ada software khusus untuk membuat website dengan html. Perangkat lunak bawaan dari sistem operasi pun bisa digunakan. Jika menggunakan windows os, bisa menggunakan notepad. TextEdit untuk yang menggunakan mac. Namun jika ingin menggunakan text editor yang memiliki interface yang lebih menarik. Bisa menggunakan aplikasi dibawah ini.

Berikut adalah text editor yang direkomendasikan.

1. Notepad++

Merupakan text editor yang bisa diunduh secara gratis. Sangat ringan dan juga memiliki tampilan yang menarik. Kamu bisa merubah tema warna pada notepad++.

2. Sublime Text 3

Sublime text adalah sebuah text editor yang dibuah oleh Sublime HQ. Sama seperti notepad++, sublime text 3 juga memiliki interface yang menarik disertai dengan tema yang bisa diunduh. Namun untuk menggunakan sublime text 3, direkomendasikan untuk membeli lisensi. Meskipun bisa digunakan tanpa harus daftar, namun sebaiknya menghargai developer aplikasi agar bisa selalu mengembangkan aplikasinya.

3. Visual Studio Code

Visual studio code merupakan text editor yang dikembangkan oleh microsoft. Tidak perlu membayar untuk menggunakan text editor ini. Visual studo code berbeda dengan visual studio. Banyak plugin tambahan yang bisa digunakan pada text studio studio code untuk membantu mempermudah pengembangan website.

Text Editor Online yang di Rekomendasikan

1. Codepen.io

2. Playcode.io

3. Html-online.com/editor/

4. W3schools.com/tryit/

Belajar Kode Dasar Html untuk Membuat Halaman Web

Struktur dasar dari sebuah dokumen html adalah seperti dibawah ini.

<html>
<head>
  <title>Judul Halaman </title>
</head>
<body>
  <p>
    Isi halaman
  </p>
</body>
</html>

Halaman html selalu diawali dengan tag <html> dan di akhiri dengan code penutup yang sama namun ditambahi dengan tanda garis miring (/) seperti ini </html>. Begitu juga <head> yang di tutup dengan </head>.

Fungsi dari bagian tag <head> hingga </head> digunakan untuk menyeleksi bagian kepada dokumen html. Pada bagian ini biasanya di gunakan untuk mengisi tag untuk memuat css dan script.

Title digunakan untuk memberikan judul pada halaman html. Judul halaman yang di tulis di dalam tag <title> akan muncu di bagian tab browser.

Body adalah bagian tubuh html. Body berisikan data yang ingin di tampilkan pada browser. Pada contoh code html di atas, data yang ingin di tampilkan di tulis dalam bentuk paragraf. Sehingga di masukkan dalam tag <p>.

Menyimpan File Html dan Menampilkan di Browser

Setelah menyusun kode tag html, sekarang simpan file dengan ekstensi .html atau sebagai contoh bisa diberi nama seperti ini : belajar.html.

Letakkan file di tempat yang mudah di cari. Sebagai contoh, letakkan saja di desktop. Klik 2x pada file tersebut maka akan terbuka browser dengan tampilan data yang sudah dibuat tadi.

Coba perhatikan judul pada tab browser. Maka akan sama dengan yang ditulis didalam tag <title>. Dan isi halaman akan sama dengan yang di tulis di dalam tag <p>.

Hasil belajar dengan html

Perhatikan pada bagian url. Url akan tampil lokasi tempat file di simpan. Hal ini wajar karena masih bersifat lokal. Belum bisa di buka di komputer lain seperti website.

Jika ingin menyimpan file secara global untuk bisa di akses di komputer mana pun, kita perlu menyewa hosting dan domain. Apa itu hosting dan domain?

Baca di pengertian hosting dan domain.

Contoh Kode Html untuk di Pelajari Bagi Pemula

<html>
  <head>
    <title> Belajar Html 1 </title>
  </head>
  <body>
    <h1> Ini Adalah Judul </h1>
    <h2> Ini adalah sub judul </h2>
    <p> Paragraf digunakan untuk membuat isi artikel yang ingin ditampilkan dihtml. Kita bisa membuat isi teks panjang dengan paragraf. </p>
    <figure>
    <img src="https://images.pexels.com/photos/3922221/pexels-photo-3922221.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <figcaption>Gunakan ini untuk memberikan caption pada gambar</figcaption>
    </figure>
    <a href="https://bagusrizkita.blogspot.com/"> Ini adalah sebuah link </a>
  </body>
</html>

Coba praktekkan sendiri di teks editor faforit kalian. Lihat hasilnya dan pelajari tag tag dasar yang bisa kalian gunakan untuk belajar membuat html lainnya. Belajar dasar kode html memang membutuhkan waktu yang tidak sebentar. Namun dengan seringnya praktek kalian akan lebih cepat dalam belajar.

Jika kalian ingin melihat fungsi dari setiap tag html, kalian bisa melihatnya di website https://www.w3schools.com/html/