INFORMATIKA SMANSASI PERTEMUAN KE-3

 Assalamualaikum! Kali ini saya akan membuat resume tentang pertemuan ke-3 informatika SMAN 1 Bekasi. Materi yang dijelaskan pada pertemuan ke-3 informatika SMAN 1 Bekasi adalah tentang bagaimana cara memasukkan gambar bada web. Pada resume kali ini saya akan mencoba untuk memasukkan gambar, membuat background dan membuat form. Mari kita coba



1. Image

Image di dalam web page merupakan daya penarik bagi pengunjung website. Image atau gambar juga biasa menjadi penunjang suatu laman. Misal saja jika saya ingin membuat website kumpulan rumus fisika tentang rangkaian listrik untuk kelas 12, maka saya bisa menambahkan beberapa gambar kumpulan rumus atau beberapa gambar penunjang seperti gambar rangkaian listrik, baik paralel maupun seri dan lain sebagainya

2. Height and Width

Height (tinggi) dan Width (lebar), gambar pada web yang akan kita buat akan ada ukuran tinggi dan lebarnya. Tinggi dan lebar ini mempengaruhi gambar akan seperti apa nanti ketika di tampilkan. Angka yang ditampilkan disesuaikan dengan ukuran gambar (proporsional) sehingga bentuk gambar yang ditampilkan tidak mengalami distorsi.

3. Background

Background adalah bagian belakangan halaman, atau saya biasa menyebutnya sebagai "alas" pada halaman. Misal saja saya ingin membuat halaman saya berwarna kuning, maka bisa disebut kuning itu adalah background web saya





1, Memasukkan gambar

Kali ini saya akan mencoba memasukkan gambar pada web saya beserta background nya

<html> <head> <title> percobaan memasukkan gambar </title> </head> <body> <body background="wallpaperku.png"> </body> </html>

gunakan formula itu untuk membuat background pada laman web. Untuk bagian yang di bold, disesuaikan dengan nama file foto yang Anda simpan beseta jenis foto tersebut, foto bisa berupa JPG, JPEG, PNG dsb. Berikut hasil percobaan saya menggunakan formula tersebut

Hasil nya akan seperti ini



Lalu selanjutnya adalah membuat form sekaligus memasukkan gambar pendukung. Format nama untuk file dari foto yang akan kita masukkan harus sama dengan apa yang nanti kita masukkan ke formula untuk html nya, sama seperti percobaan sebelumnya

Setelah memasukkan background, lanjutkan formula untuk html nya dengan formua yang sama, dan untuk formula </body> dan </html>, letakkan di akhir formula, maka akan menjadi seperti ini
<html> <head> <title> percobaan memasukkan gambar </title> </head> <body> <body background="wallpaperku.png"> <img src="menggokil.jpg" width="300" height="255"> </body> </html>
 
angka yang digunakan akan menentukan gambar yang ditampilkan akan seperti apa, jika saya menggunakan width 300 dan height 255 akan seperti ini






Jika sudah berhasil, sekarang saya akan mencoba untuk membuat form di web saya, saya akan menambahkan beberapa formula seperti berikut

<form>
Nama lengkap:<input name="Nama Lengkap" type="text"id="NamaLengkap"/><br>
Nomor presensi:<input name="Nomor Presensi" type="Nomor Presensi"id="No Presensi"/><br>
<INPUT TYPE="Submit" NAME="name" VALUE="KIRIM"
<form>

dan jika disatukan dengan formula sebelumnya akan menjadi seperti ini

<html>
<head>
<title> percobaan memasukkan gambar </title>
</head>
<body>
<body background="wallpaperku.png">
<img src="menggokil.jpg" width="300" height="255">
<form>
Nama lengkap:<input name="Nama Lengkap" type="text"id="NamaLengkap"/><br>
Nomor presensi:<input name="Nomor Presensi" type="Nomor Presensi"id="No Presensi"/><br>
<INPUT TYPE="Submit" NAME="name" VALUE="KIRIM"
<form>
</body>
</html>

Hasil yang akan keluar akan seperti ini






Nah, selesai sudah percobaan kita pada kali ini, semoga ilmu yang disampaikan oleh Bu Deswati dapat bermanfaat bagi kita semua. Terima kasih sudah menyimak sampai habis!







Komentar

Postingan populer dari blog ini