Kalian mau Ngoding tapi masih ngga ngerti konsepnya?
Tenang aja! kali ini aku bakal ajarin kalian cara ngoding html.
Basic HTML
Tag HTML
Membuat Paragraf
Memasukkan Gambar
Mengatur Font
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.
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.
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>
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.
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">
alt
fungsinya adalah menggantikan gambar yang tidak muncul
menjadi teks pada tag yang kalian pilih.
<img src="flixdz.png" width="130" alt="Gambar tidak akan muncul">
Output :
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.
<p style="font-family: 'Times New Roman', sans-serif; font-size: 24px; color: lightblue;">
Hasil :
@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;
}