TERNYATA GAMPANG BANGET BIKIN WEBSITE HTML DARI VISUAL CODE STUDIO!!!!!
Belajar Cara Membuat Website HTML
Halo semuanya, kembali lagi dengan aku, Abaz. Hari ini kita akan mulai belajar membuat website HTML dengan mudah loh. Gimana sih caranya? Dan gimana sih langkah-langkahnya? Yuk langsung aja kita bahas dengan membaginya ke beberapa pertemuan!
Pertemuan 1
Di pertemuan 1 ini kita akan belajar terlebih dahulu bagaimana cara membuat website, nah sebelum itu kalian perlu mendownload dan menginstall dulu aplikasi pembuat website yang namanya Visual Studio Code (setelah ini disebut VS Code). Setelah menginstall VS Code kalian perlu menyiapkan folder kosongan untuk diekspore dalam VS Code nanti. Setelah masuk ke dalam aplikasi VS Code kalian bisa mengekspor folder yang tekah kalian buat dengan cara tap menu file, lalu open folder, dan pilih folder yang telah kalian siapkan.
Setelah folder berhasil diekspore, langkah selanjutnya adalah membuat file html, dengan cara klik new file pada samping nama folder tadi. Lalu berilah nama dengan memberi ".html" di akhir nama, contoh "Pertemuan_1.html". Setelah file HTML sudah jadi, yang harus kalian lakukan adalah membuat kerangka HTML, dengan cara ketik "html:5" lalu klik tombol tab di keyboard. Lalu akan muncul script secara otomatis. Kalian juga bisa mengganti nama website html pada bagian tag title, contoh di bawah aku ganti judul html dengan nama "Pertemuan 1".
Setelah file html Pertemuan 1 selesai, kalian bisa simpan dengan cara klik file lalu klik menu save atau bisa juga dengan cara menekan tombol Ctrl+S di keyboard secara bersamaan. Setelah ini, kalian bisa mengecek pada folder yang sebelumnya sudah kalian siapkan di browser(google chrome. microsoft edge, dll.) lalu refresh atau klik tombol F5 pada keyboaard. Maka website html pertama kamu sudah siap!
 |
| link website: Pertemuan 1 |
Pertemuan 2
Jika pada pertemuan pertama kita baru belajar bagaimana cara membuat website, maka pada pertemuan kedua ini kita akan belajar bagaimana cara membuat paragraf atau isian pada website. Langkah pertama kalian perlu menyiapkan file html, contoh "Pertemuan_2.html". Setelah file sudah siap, maka kalian harus ketik "httml:5" lalu akan muncul script secara otomatis.
Sebelum membahas lebih jauh tentang bagaimana membuat paragraf, saya akan menjelaskan tentang tag atau bagian yang ada dalam html. Dalam html terdapat beberapa tag atau bagian yang ditandai dengan kurung siku, baik buka kurung maupun tutup kurung (< >). Setiap tag ada yang namanya tag pembuka dan tag penutup. Setiap tag pembuka ditandai dengan kurung siku saja, contoh dari gambar diatas adalah "<body>" dan tag penutup ditandai dengan kurung siku dan tanda slash atau garis miring, contoh "</body>", yang berarti tag "<body>" berpasangan dengan "</body>". Fungsi dari tag-tag di html adalah untuk menandai bagian-bagian dari website atau konten yang kita buat akan ditampilkan seperti apa di web browser. Seperti contoh di Pertemuan 1 adalah tag tittle, yang artinya kita akan menampilkan judul dari website yang kita buat. Sedangkan tag body adalah bagian atau isi dari website yang kita buat, di sinilah kita akan membuat isian dari website kita, termasuk paragraf yang akan kita pelajari.
Bagaimana cara membuat paragraf? Caranya adalah memanggil tag paragraf dengan cara mengetik huruf "p" di antara tab body, lalu klik tombol tab di keyboard. Setelah itu tag paragraf akan muncul dengan tampilan "<p> </p>" Lalu kalian bisa mengisi paragraf di antara tag paragraf yang sudah muncul pada script, seperti contoh pada gambar di bawah ini:
 |
| link website: Pertemuan 2 |
Pertemuan 3
Dalam pertemuan kali ini kita akan membahas tentang bagaimana cara membuat tagheading di html. Seperti biasa kita perlu membuat file html dan membuat kerangka dasar dengan cara ketik "html:5" lalu klik tab. Sebelum lebih lanjut ke pembahasan tagline, untuk memudahkan kita menyimpan setiap script yang kita buat, maka kita perlu mengaktifkan autosave atau pemyimpanan otomatis dengan cara klik menu file lalu pilih autosave dan tunggu sampai tercentang.
Untuk membuat tagheading, judul website, sub judul, dan lain sejenisnya. Kita perlu memanggil tag heading dengan cara mengetik huruf "h" di antara tag body dan nanti akan muncul script "<h1> </h1>", seperti gambar di bawah ini. Tingkatan heading dibagi menjadi 6, semakin besar tag heading yang dipanggil, maka huruf yang ditampilkan di website akan menjadi semakin kecil.
 |
| link website: Pertemuan 3 |
Pertemuan 4
Pada pertemuan keempat, kita akan belajar membuat teks kutipan, bagaimana caranya? Yuk langsung kita bahas.
Seperti biasa kita perlu membuat file html dan kerangka dasar html "html:5". Untuk membuat teks kutipan kita perlu memanggil tag cite "<cite> </cite>". Tag cite ini akan membuat nama pengarang atau nama pengutipnya akan dicetak miring pada website nanti. Sedangkan untuk kata kutipannya menggunakan tag "q", dengan cara mengetik huruf "q" lalu meletakkan kata kutipan di antara tag q tersebut. Sebagai contoh gambar di bawah ini:
 |
| link website: Pertemuan 4 |
Pertemuan 5
Bagaimana cara membuat tag mark atau penanda warna di html? Gampang banget, langkah pertama kalian perlu membuat file html beserta kerangka dasar dari html "html:5". Sebelumnya persiapkan terlebih dahulu paragrafnya, lalu kalian perlu memanggil tag mark dengan cara mengetik "mark" lalu tab pada keyboard. Seperti contoh pada gambar di bawah ini:
 |
| link website: Pertemuan 5 |
Siiiip mantab
BalasHapus