Belajar HTML5

Pendahuluan

Kalian ingin belajar ngoding tapi masih belum paham konsep dasarnya?
Tenang! Kali ini saya akan ajarkan kalian cara menulis kode HTML dengan mudah.

Daftar Isi Halaman Web

Basic HTML

Pertama, siapkan dulu alat untuk ngoding kalian, seperti komputer, laptop, atau smartphone yang kalian miliki.

Saya sarankan jika kalian punya laptop atau komputer, gunakan aplikasi Visual Studio Code, tersedia untuk Windows dan MacOS.

"Pakai HP bisa nggak?" Bisa! Tapi ingat, ngoding di HP biasanya lebih ribet dibanding di PC, jadi tergantung niat kalian masing-masing. Kalau ingin coba di HP, saya rekomendasikan aplikasi Acode, atau aplikasi sejenis yang bisa kalian cari sendiri.

Kalau semuanya sudah diinstal dan siap digunakan, ayo kita lanjut ke tahap berikutnya.

Tag HTML

Langkah pertama yang perlu kalian lakukan adalah mengetik kode html:5 (khusus pengguna Visual Studio Code). Dengan mengetik itu, editor akan secara otomatis menghasilkan struktur dasar HTML seperti berikut: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Kalau editor kalian tidak secara otomatis menghasilkan struktur seperti itu, tenang saja! Kalian bisa salin kode di atas dan tempel di file HTML kalian.

Membuat Paragraf

Di dalam HTML, kalian bisa membuat teks dengan berbagai jenis tag. Misalnya:

Nah, berikut ini contoh kode untuk menampilkan teks Hello World! dengan heading, paragraf, dan baris baru menggunakan HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <body>
    <h1>Ini heading 1</h1>
    <h6>Ini heading 6</h6>
    <p>Ini Paragraf
      <br>Dan ini Break Rule atau garis baru.
    </p>
  </body>
</html>
Hasil:

Ini heading 1

Ini heading 6

Ini Paragraf
Dan ini break rule atau garis baru.

Untuk membuat paragraf seperti contoh di bawah ini, kalian bisa menggunakan tag <p> dan menambahkan <br> jika ingin membuat baris baru dalam paragraf: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <body>
    <p>Lorem Ipsum <!-- Ini adalah kepala paragraf -->
      <!-- br di bawah ini adalah isi atau lanjutan paragraf -->
      <br>Cupidatat nulla commodo est dolore esse velit ad magna amet sit aliquip duis. 
      Ullamco culpa quis exercitation occaecat pariatur eu amet enim velit magna esse ipsum. 
      In nisi proident eu cillum ex.
    </p>
  </body>
</html>

Kalian bisa mencoba menuliskan kode ini di berbagai software editor seperti VS Code, Sublime Text, atau Notepad++. Jika ingin langsung mencoba secara online, kalian bisa mencari website editor HTML favorit seperti:

Memasukkan Gambar

Untuk memasukkan gambar ke dalam HTML, pertama-tama kalian harus mengetahui gambar mana yang ingin digunakan. Gunakan tag <img> untuk menampilkannya.

Contoh dasar penggunaan:

<img src="contohgambar.png">

Kode di atas akan menampilkan gambar dengan nama contohgambar.png. Pastikan file gambar berada dalam folder yang sama dengan file HTML kalian.

Untuk mengatur ukuran gambar, kalian bisa menambahkan atribut width. Contoh: 

<img src="flixdz.png" width="130">
Hasil:
Contoh gambar flixdz

Bagaimana jika gambar tidak muncul?
Kalian bisa menggunakan atribut alt untuk menampilkan teks pengganti jika gambar gagal dimuat. Ini sangat berguna untuk meningkatkan aksesibilitas. 

<img src="flixdz.png" width="130" alt="Gambar tidak akan muncul">
Output (jika gambar gagal):
Gambar tidak akan muncul

Mengatur Font

Pertama-tama, tentukan teks mana yang ingin kalian atur tampilannya sesuai keinginan.
Dalam contoh ini, kita akan menggunakan tag <p> untuk membuat paragraf.

Untuk mengatur tampilan teks secara langsung di HTML, kita bisa menggunakan inline CSS — yaitu CSS yang ditulis langsung di dalam atribut style pada tag HTML.

Berikut beberapa properti CSS yang bisa kalian gunakan:

Contoh penggunaan kombinasi ketiga properti tersebut:

<p style="font-family: 'Times New Roman', sans-serif; font-size: 24px; color: lightblue;">Halo</p>
Hasil:

Halo

Kalian bisa mengganti font sesuai selera. Jika ingin mencari font yang menarik dan gratis, kunjungi Google Fonts atau website penyedia font lainnya.

Bagaimana jika kalian ingin menggunakan font hasil unduhan sendiri? Berikut contoh penggunaan @font-face di CSS: 

@font-face {
  font-family: 'Relaxing Sans'; /* Bebas beri nama font */
  src: url('relaxingfont-regular.ttf'); /* Path ke file font */
}
body {
  font-family: 'Relaxing Sans', sans-serif;
}