Mungkin bagi kalian akan terdengar tidak asing dengan judul di atas. Yup! Visual Studio. Namanya hampir mirip dengan aplikasi Visual Studio. Namun, akan saya tekankan sekali lagi Visual Studio tidak sama dengan Visual Studio Code.
Contoh sederhananya, tampilan keluaran antara 2 aplikasi ini sangat berbeda. Jika kalian biasanya hanya melihat tampilan hitam putih monokrom tidak jelas seperti semut berjalan, kali ini mata kalian akan tercerahkan dengan warna. Maksudnya, tampilan keluaran Visual Studio Code ini dapat diubah warnanya sesuai yang diinginkan. Untuk melihat hasil keluaran, yang dilakukan adalah di-run-kan. Sedangkan pada Visual Studio Code, harus membuka file yang telah disimpan.
Kali ini, akan saya kenalkan dasar-dasarnya. Yang pertama kita coba adalah mengenali bagian strukturnya. Gambar di bawah ini adalah tampilan listing programnya.
 |
| Gambar 1.1 Struktur Dasar Visual Studio Code |
Berikut ini adalah listing programnya.
<!DOCTYPE html>
<html>
<head><tite>Judul
Web</title>
</head><body><h1>Judul Halaman</h1><p>Isi
web.</p></body>
</html>
Berikut hasil keluarannya:
 |
| Gambar 1.2 Hasil Keluaran |
Penjelasan:
1. <!DOCTYPEhtml> menunjukkan tipe atau jenis dokumen menjadi HTML. Bagaimana jika dihilangkan? Kalau misal isi program kalian ada yang berwarna, maka warnanya akan kembali hitm seperti aslinya.
2. <html>...</html> menggambarkan sebuah dokumen HTML.
3. <head>...</head> memberikan informasi tentang dokumen.
4. <title>...</title> memberikan judul untuk dokumen.
5. <body>...</body> menggambarkan isi halaman yang terlihat.
6. <h1>...</h1> menunjukkan judul.
7. <p>...</p> menjelaskan isi. Ketika saya iseng menghilangkan fungsi ini, dokumen yang saya buat malah tidak tampil, kawan.
Seperti biasa, sekarang mari kita lanjut membuat dokumen biodata. Langsung saja tanpa basa basi, berikut listing programnya.
 |
| Gambar 2.1 Listing Program Biodata |
<!DOCTYPE html>
<html>
<head>
<title>HELLO
WORLD</title>
</head>
<body>
<h1><font color=purple>Biodata</h1></font>
<p>Assalamu'alaikum wr. wb.<br>
Nama :Ratna Anisa Ramadani<br>
<i>Kelas : 1 D3 EB</i><br>
Asal :<b>Politeknik Elektronika Negeri
Surabaya</b><br><br>
<u>Sekian</u>,
terimakasih dan Wassalamu'alaikum wr. wb. ...</font>
</p>
</body>
</html>
Keluarannya sebagai berikut.
 |
| Gambar 2.2 Biodata |
Penjelasan:
1. <font color=purple>...</font> memberikan warna pada teks. Kenapa menggunakan 'color'? Karena pada Visual Studio Code ini menggunakan American English. Perhatikan spasi juga, kalian harus tahu kapan kalian menggunakan spasi dan kapan tidak.
2. <br> untuk 'enter' ke bawah jika kalian menambahkannya di belakang kalimat. Kalau diletakkan di depan, kalimat sebelumnya yang akan di'enter'. Mau diketik </br> atau <br> pun sama.
3. <b>...</b> untuk 'bold' menebalkan teks.
4. <i>...</i> untuk 'italic' memiringkan teks.
5. <u>...</u> untuk 'underline' memberikan garis bawah pada teks. Sebenarnya ketiga fungsi ini tidak jauh beda dengan fungsi-fungsi pada Microsoft World. Hanya saja, kalian perlu penasaran dan berani mencoba.
Sekian yang dapat saya sampaikan, selamat belajar dan jangan lupa Laporan Pemrograman Lanjutan nya dikerjakan!!
Tidak ada komentar:
Posting Komentar