Menggunakan Visual Studio Code
Pertama-tama kita harus Menginstall komponen Extensions, yaitu : Auto rename text, Beautify, Bracket pair coloring, CSS Peek, HTML CSS Support, indent-rainbow, IntelliSense for CSS, Live Server, One Dark Pro, open in browser, Prettier – Code formatter, Sublime Text Keymap and Settings Importer.
Jika semua telah terinstal, gunakan syntax dasar dahulu.
Gunakan tanda ! untuk memulai :
<!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.0″>
<title>HTML1</title>
</head>
<body></body>
</html>
Note : Setelah ketik tanda seru/pertintah lalu klik enter, akan muncul seperti ini. Tittle harus di isi.
Lalu kita dapat menggunakan syntax <H1> untuk judul :
<h1>Selamat Pagi</h1>
Note : Di letakkan dibagian tengah <body> dan </body>, ini dilakukan di setiap syntax.
Setelah itu dijalankan, dengan cara : Klik kanan – Klik “Open in Default Browser”
Lanjut menggunakan syntax “<p>” :
<body>
<h1>Powercode.id</h1>
<h2>Powercode.id</h2>
<h3>Powercode.id</h3>
<h4>Powercode.id</h4>
<h5>Powercode.id</h5>
<h6>Powercode.id</h6>
<p>Powercode Technology Solutions merupakan perusahaan yang bergerak di bidang teknologi, menyediakan layanan Software Development dan IT Training. Powercode memiliki tujuan untuk ikut serta mendukung perkembangan era digital dengan memberikan layanan software development, serta menciptakan sumberdaya manusia yang mampu beradaptasi dengan cepat terhadap perkembangan teknologi dengan layanan IT Training.Powercode didirikan dengan konsep kekeluargaan, dan dengan niat tulus untuk menjadi manfaat bagi sesama maka kami memberikan sebagian dari hasil pencapaian perusahaan untuk anak yatim piatu dan orang yang membutuhkanDengan hadirnya Powercode Technology Solutions kami berharap dapat menjadi pilihan Anda untuk meningkatkan potensi bisnis anda di dunia digital dan meningkatkan softskill Anda di bidang Information Technology.</p>
<p>Powercode Technology Solutions merupakan <br> perusahaan yang bergerak di bidang teknologi</p>
</body>
Catatan : h1 bisa di lanjutkan dengan h yang lainnya, seperti h2, h3, sampai h6
Angka dari h ini menandakan ukuran dari text, contoh :
Powercode.id : h1
Powercode.id : h2
Powercode.id : h3
Powercode.id : h4
Powercode.id : h5
Powercode.id : h6
Lalu coba Jalankan html menggunakan “Open with live server”, klik kanan – klik bagian “Open with live server”.
Apa bedanya “Open in default browser” dengan “Open with live server” ?
Open in default browser : Setelah save, klik open in default browser dan akan menampilkan kalimat yang di tulis, jika ingin mengganti kalimat atau menambahkan kalimatnya harus kembali – ganti kalimatnya di visual studio – save kembali – buka kembali web yang di gunakan sebelumnya – klik refresh page .
Open with live server : Sama seperti Open in default browser , namun sedikit lebih praktis, yaitu kembali – ganti kalimat yang ingin di ganti – save, jika sudah save di visual studio, di web pun akan ikut tersimpan, jadi tidak perlu me-refresh page di web.
Membuat jadwal kegiatan menggunakan HTML
Menggunakan syntax “<oL>” dan menggunakan “Type” :
Type ada 5 macam yaitu : type=”A”, type=”a”, type=”I”, type=”i”, type=”1”.
Fungsi <oL> memberikan tanda di belakang huruf, seperti :
- Mandi
- Sikat Gigi
- Makan
Contoh syntax <oL> :
<h3>List kegiatan pagi ini</h3>
<oL type=”A”>
<Li>Cuci Muka</Li>
<li>Cuci Muka</li>
<li>Cuci Muka</li>
</oL>
<ol type=”a”>
<Li>Mandi</Li>
<li>Mandi</li>
<li>Mandi</li>
</ol>
<ol type=”I”>
<li>Sikat gigi</li>
<li>Sikat Gigi</li>
<li>Sikat Gigi</li>
</ol>
<ol type=”i”>
<li>Pakai baju</li>
<li>Pakai Baju</li>
<li>Pakai Baju</li>
</ol>
<ol type=”1″>
<li>Berangkat Sekolah</li>
<li>Berangkat Sekolah</li>
<li>Berangkat Sekolah</li>
</ol>
Lalu kita dapat menggunakan “<uL>” dan menggunakan Type, type ada 3 jenis : type=”Disc”, type=”Square”, type=”Circle”
Fungsi <uL> sama seperti <oL> namun <uL> berbentuk symbol, seperti :
- Belajar ini type disc
- Istirahat ini type square
Contoh dari syntax <uL> :
<h3>Kegiatan Sekolah</h3>
<ul type=”Disc”>
<li>Belajar</li>
</ul>
<ul type=”square”>
<li>Istirahat</li>
</ul>
<ul type=”Circle”>
<li>Ujian</li>
</ul>
Note : setiap “type” harus di letakkan di <uL type=”square”> atau <oL type=”i”>
Lalu belajar menggunakan Hyperlink, syntax untuk hyperlink adalah :
<a href=””></a>
Ketik a lalu klik Enter
Hyperlink atau Pranala adalah acuan dalam dokumen hiperteks ke dokumen lain atau sumber lain. Dengan kata lain, hyperlink merupakan suatu cara untuk menghubungkan suatu bagian tertentu di dalam slide, file dokumen, program, atau halaman web dengan bagian yang lainnya pada bidang tersebut.
Contoh hyperlink :
<body>
<p>
Klik <a href=” https://www.youtube.com/”>disini</a> untuk ke beranda youtube
</p>
Bisa juga untuk di jadikan tujuan untuk ke halaman selanjutnya, contoh :
<p>
Klik <a href=”belajar3.html”>Disini</a> untuk ke halaman belajar3
</p>
<p>
Klik <a href=”Halaman1.html”>Disini</a> untuk kembali ke halaman awal
</p>
HyperLink yang berupa Gambar
Hyperlink bisa berupa gambar, dengan cara memasukan gambar ke dalam folder coding.
Untuk syntax nya, yaitu <img>
Contoh :
<img src=”motor.png” alt=”motor” width=”50%”>
Gambar bisa di pilih dari file ataupun web, contoh yang dari web :