Belajar HTML5

Pendahuluan

Kalian mau Ngoding tapi masih ngga ngerti konsepnya?
Tenang aja! kali ini aku bakal ajarin kalian cara ngoding html.

Isi halaman web
Basic HTML
Tag HTML
Membuat Paragraf
Memasukkan Gambar
Mengatur Font

Basic HTML

Pertama siapin dulu nih alat buat ngoding kalian, seperti Komputer, Laptop, ataupun Smartphone yang kalian punya.
Aku saranin kalo kalian punya laptop dan komputer kalian bisa pakai aplikasi Visual Studio Code untuk Windows dan MacOS.

"Pakai hp bisa ga?" Bisa!, Inget ya kalo pakai hp lebih ribet daripada PC, jadi tergantung niat dari kalian. Jika memang ingin di hp, saya sarankan memakai sebuah aplikasi bernama Acode atau bisa cari semacamnya.
Oke kalo udah di install dan siap untuk digunakan, ayo kita lanjut ke tahap berikutnya.

Tag html

Pertama yang harus kalian lakuin itu adalah ketik kode html:5 (khusus Visual Studio) dan nanti kalian akan mendapatkan syntax seperti ini :

<!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>

Kalo kalian ngga ada kayak gitu, kalian bisa copy kode diatas kok.

Membuat Paragraf

Didalam HTML kalian bisa membuat tulisan dengan banyak perintah, seperti membuat heading bisa menggunakan tag <h1> sampai <h6>, membuat paragraf kalian bisa menggunakan tag <p>, membuat baris baru menggunakan <br>.
Disini saya akan membuat Teks Hello World! dengan heading dan juga paragraf disertai break rule atau garis baru.

<!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 dibawah ini yaa :

<!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 dibawah 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 mencobanya melalui software / website manapun seperti VS Code, Sublime Text, Notepad++ atau jika ingin online kalian bisa mencari website favorit kalian.

Memasukkan Gambar

Cara memasukkannya adalah yang pertama kalian harus tau dahulu gambar yang ingin kalian taruh di html.
Caranya kalian harus menggunakan tag <img>, dan kemudian kalian search gambar yang ingin kalian masukkan, sebagai contoh,
<img src="contohgambar.png">
Kode diatas memperintahkan untuk mencari gambar "contohgambar" yang berformat PNG.
Untuk mengatur gambar, kalian bisa menambahkan width setelah tanda petik dua dan berikan spasi, atau bisa menggunakan kode ini :
<img src="flixdz.png" width="130">
Kode diatas adalah untuk mengatur panjang dan lebar dari gambar, karena saya atur width 130, maka gambar yang muncul akan seperti ini.

<img src="flixdz.png" width="130">

Hasil :

Bagaimana jika gambar tidak mau keluar atau ada error?
Kalian bisa menambahkan attribute alt fungsinya adalah menggantikan gambar yang tidak muncul menjadi teks pada tag yang kalian pilih.
Kode :

<img src="flixdz.png" width="130" alt="Gambar tidak akan muncul">

Output :

Mengatur Font

Pertama siapkan dulu teks mana yang ingin kalian atur sesuai selera kalian.
disini saya akan menggunakan <p> yaitu untuk membuat paragraf.
oke langsung ke caranya

Jika kalian sudah membuat teks dan ingin mengatur sesuka kalian, maka yang harus kalian lakukan adalah menambahkan CSS inline, yaitu berada dalam tag html tersebut.
Ingat kode dibawah ini ya!
Mengatur warna font menggunakan "color: (warna);"
Mengatur ukuran font menggunakan "font-size: (ukuran);"
Mengatur jenis font menggunakan "font-family: (jenis font);"
Contoh disini saya akan membuat font dengan jenis font 'Times New Roman', membuat ukuran 24 pixel, dan juga mewarnainya dengan warna biru muda.

Kode :

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

Hasil :

Halo

Kalian juga bisa menggantinya dengan font sesuai dengan keinginan kalian, jika kalian ingin mengganti/memilih font silahkan menuju ke Google Fonts atau website lain yang menyediakan font.

Tapi jika kalian ingin mengganti font yang sudah kalian download caranya seperti dibawah ini yaa.

@font-face {
  font-family: Relaxing Sans ; /* Kalian bebas memilih nama fontnya */
  src: url('relaxingfont-regular.ttf'); /* yang terpenting ini yaa, ini adalah font yang ingin kalian gunakan */
}
body {
  font-family: 'Relaxing Sans', sans-serif;
}