Showing posts with label HTML. Show all posts

18 July 2021

Mengatur Icon Website Via HTML

Niguru.com | Minggu, 18 Jul 2021 | Pada sisi atas frame setiap browser biasanya akan menampilkan Title (judul) dan juga icon website yang sedang dibuka. Untuk web perusahaan biasanya logo perusahaan digunakan sebagai icon website mereka. Dan untuk website lainnya icon digunakan untuk menampilkan identitas website.

Pada posting kali ini Niguru.com akan menjelaskan cara untuk mengatur tampilan icon dengan menyisipkan sebaris instruksi HTML pada script website.

Siapkan file icon dengan lebar dan tinggi sama (bujur sangkar), umumnye sisi icon = 128px sampai 256px.

File bisa berupa gambar dengan extension .ico bisa juga file gambar dengan extensi .jpg, .png.

Misal file Captain.PNG berikut ini:

Pertama kali upload icon pada hosting atau pada blog (dengan cara yang sama dengan upload gambar):

Catat alamat gambar tersebut, dengan klik kanan > Copy image address:

Misalnya alamatnya adalah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTgBO9OWE1Von3_Rio0Qf2jgSE57qPtwcFJCXBXRld5yEgJxhmIn-L73JeYRoy1o1_0KBJ6pwhJA4AS7hyf9dSUDPFBIxc1zI9vYJsildtxA7gZ1mCc9pPZN_17nBncL-Ri3MpY0g_xw/s0/Captain.png.

Sisipkan instruksi HTML berikut ini:

Contoh sesuai dengan alamat gambar yang sudah diupload:

Sisipkan diantara tag <head> dan </head>

Hasilnya:

Demikianlah penjelasan mengenai cara pengaturan tampilan icon via HTML.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

17 March 2021

Inilah Cara Untuk Menyisipkan Lagu Atau Suara Pada Halaman Web

Niguru.com | Rabu, 17 Mar 2021 | Dahulu, sebelum menguasai tata cara dan penyusunan struktur pembuatan website seringkali Niguru.com terkagum-kagum saat mengunjungi sebuah website yang menyediakan musik dan “autoplay” (jalan secara otomatis) saat website dibuka /dikunjungi.

Pada posting kali ini Niguru.com akan membagikan trik untuk menjalankan musik pada halaman website dan akan “autoplay” saat website tersebut didatangi pengunjung.

Pertama kali siapkan sebuah file lagu dengan extension .WAV atau .MP3. Sebagai contoh Niguru.com mengambil lagu sampel dari Microsoft Windows XP, yaitu Beethoven Symphony No. 9, yang sudah dikonversi kedalam format .MP3.

Dan berikut ini script untuk menyisipkan file tersebut ke HTML:

<embed src="nama_file_music" autostart="true" hidden="true"></embed>

Contoh:

<embed src="BeethovenSymphonyNo9.mp3" autostart="true" hidden="true"></embed>

Tempatkan script tersebut sebaris sebelum tag penutup: </html>.

Berikut ini contoh script selengkapnya:

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Welcome to Niguru</title>

</head>

<body>

<p><b><font size="6">Welcome to <font color="#FF3300">Niguru's</font> Webpage</font></b></p>

<p><img border="0" src="F1Fture-080517.jpg" width="555" height="310"></p>

</body>

<embed src="BeethovenSymphonyNo9.mp3" autostart="true" hidden="true"></embed>

</html>

Berikut ini contoh tampilan web di atas:

Note:

Begitu halaman web terbuka, maka otomatis music akan dijalankan.

Untuk mencobanya teman-teman pembaca bisa mendownload file contoh dengan klik: disini.

Ekstrak file dalam format .ZIP tersebut dan buka file index.html yang ada didalamnya.

Silakan ganti dengan musik atau suara yang sesuai dengan selera dan kebutuhan.

Demikianlah penjelasan mengenai cara untuk menampilkan musik bersamaan dengan dibukanya halaman website.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

28 January 2021

Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 2 (Javascript)

Niguru.com | Kamis, 28 Jan 2021 | Setelah pada posting sebelumnya Niguru.com menjelaskan mengenai langkah-langkah untuk menyusun script untuk menyisipkan gambar, maka pada posting kali ini Niguru.com akan menjelaskan cara untuk menampilkan gambar pada lokasi yang sama dengan pergantian gambar sesuai dengan tombol yang ditekan.

Niguru.com akan mulai penjelasan dengan membuat tampilan HTML untuk menampilkan kalimat notifikasi dan tombol, dengan script sebagai berikut:

<h1>Belajar ID Pada Gambar</h1><h3>

Klik tombol untuk <font color="red">mengganti gambar:</font></h3>

<img id="01" src="cat.jpg" style="width:380px;height:380px">

<br>

<input type="button" value="RABBIT" onclick="rabbit()">

<input type="button" value="DOG" onclick="dog()">

<input type="button" value="CAT" onclick="cat()">

Simpan dengan nama CDR.html (boleh disimpan dengan nama lain):

Note:

CDR diambil dari singkatan "Cat Dog Rabbit".

Buka file CDR.html pada browser. Hasilnya:

Note:
Tombol sudah tersedia di bawah gambar, namun tidak terjadi apapun saat tombol ditekan, karena memang belum tersedia fungsi yang sesuai dengan tombol yang ditekan.

<script>

a="dog.jpg";b="cat.jpg";c="rabbit.jpg"

function dog(){document.getElementById("01").src=a}

function cat(){document.getElementById("01").src=b}

function rabbit(){document.getElementById("01").src=c}

</script>

Berikut ini hasilnya bila ditambahkan pada script HTML yang sudah dituliskan sebelumnya:

Jalankan kembali file CDR.hmtl pada browser. Hasilnya:

Bila tombol RABBIT ditekan, maka gambar akan berganti menjadi gambar kelinci:

Bila tombol DOG ditekan, maka gambar akan berganti menjadi gambar anjing:

Untuk lebih jelasnya silakan coba langsung pada aplikasi di bawah ini. Klik pada tombol untuk mengganti gambar:

Belajar ID Pada Gambar

Klik tombol untuk mengganti gambar:

Demikianlah penjelasan mengenai cara agar pengunjung website dapat mengganti-ganti gambar yang ditampilkan pada website.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

27 January 2021

Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 1 (HTML)

Niguru.com | Rabu, 27 Jan 2021 | Untuk pemilik website yang ingin mempercantik tampilan website dengan gambar-gambar yang dinamis dan informatif bisa mencoba cara berikut ini sebagai alternatif.

Pada posting kali ini Niguru.com akan menjelaskan mengenai cara menyisipkan gambar pada website, sekaligus cara mengakali gambar dengan Javascript agar dapat berganti gambar mengikuti tombol yang ditekan oleh pengunjung website.

Niguru.com akan memulai dengan script HTML untuk menyisipkan gambar. Sintaks untuk menyisipkan gambar adalah:

<img src="file_gambar">

Contoh gambar dengan nama file "cat.jpg" dengan ukuran 640 pixel bujur sangkar:

Contoh script:

<h1>Belajar Menyisipkan Gambar</h1>

<img src="cat.jpg">

Simpan dengan nama cat.html (boleh disimpan dengan nama lain):

Buka file cat.html pada browser. Hasilnya:

Gunakan sintaks berikut ini untuk mengatur ukuran gambar:

<img src=" file_gambar " style="width: lebar; height: tinggi">

Niguru.com menggunakan untuk memodifikasi program HTML sebelumnya:

<h1>Belajar Menyisipkan Gambar</h1>

<img src="cat.jpg" style="width: 380px; height: 380px">

Simpan dengan nama cat02.html (boleh disimpan dengan nama lain):

Buka file cat02.html pada browser. Hasilnya:

Siapkan gambar dengan ukuran yang sama dengan gambar pertama (dalam contoh = 640px bujur sangkar), dan catat nama file gambar tersebut untuk dituliskan dalam script, misal: cat.jpg, rabbit.jpg, dan dog.jpg:

<h1>Belajar Menyisipkan Gambar</h1>

<img src="cat.jpg" style="width: 380px; height: 380px">

<img src="rabbit.jpg" style="width: 380px; height: 380px">

<img src="dog.jpg" style="width: 380px; height: 380px">

Simpan dengan nama cat03.html (boleh disimpan dengan nama lain):

Buka file cat03.html pada browser. Hasilnya:

Demikianlah penjelasan mengenai cara untuk menyisipkan gambar pada website.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

20 December 2020

Membuat Tulisan Berjalan Untuk Ditampilkan Pada Website

Niguru.com | Minggu 20 Des 2020 | Untuk kamu yang rajin dan rutin browsing setiap hari di jagad internet, tentu pernah melihat ada web page (halaman web) yang menampilkan tulisan yang berjalan /bergerak ke kiri atau ke kanan secara terus menerus.

Membuat tulisan tampil bergerak membuat tulisan tersebut lebih “eye catching” (memancing orang untuk melihat /memperhatikan), sehingga informasi yang ingin disampaikan melalui tulisan tersebut lebih sering terbaca oleh pengunjung web.

Tulisan berjalan tersebut disebut dengan MARQUEE atau running marquee. Berikut ini sintaks penulisannya:

<marquee>

[teks yang akan ditampilkan berjalan]

</marquee>

Contoh:

<marquee>

Ini adalah contoh tulisan berjalan

</marquee>

Simpan dengan nama marquee01.html (boleh disimpan dengan nama lain):

Hasilnya saat ditampilkan pada browser, berupa teks yang berjalan, muncul dari kanan dan kemudian bergerak /berjalan ke kiri:

Untuk mengatur ukuran tulisan boleh digabungkan dengan perintah HTML lain, seperti ini misalnya:

<font face="Arial Black" size="6" color="#FF0000">

<marquee>

Ini adalah contoh tulisan berjalan

</marquee></font>

Hasilnya saat ditampilkan pada browser:

Contoh berikutnya:

<font face="Arial Black" size="6" color="#008000">

<span style="background-color: #FFFF99">

<marquee>

Ini adalah contoh tulisan berjalan

</marquee>

</span></font>

Hasilnya saat ditampilkan pada browser:

Demikianlah penjelasan mengenai penggunaan marquee pada web page.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

15 November 2020

Cara Pembuatan Form Penerimaan Ala HTML Yang Rapih Dengan Bantuan Microsoft Frontpage

Niguru.com | Minggu, 15 Nov 2020 | Pada posting sebelumnya Niguru.com sudah menjelaskan cara pembuatan form pengiriman yang rapih dengan memanfaatkan fasilitas table (tabel) pada MS (Microsoft) Frontpage, sebagai pembatas antar baris dan kolom.

Sesungguhnya form yang sudah dibuat tersebut tidak saja hanya dapat digunakan sebagai form pengiriman, tetapi form tersebut dapat pula digunakan sebagai form penerimaan. Sehingga programmer dapat membuat form pengiriman maupun penerimaan sama rapihnya.

Berikut ini form pengirimnya:

<h1>Form Pengiriman Data Warga</h1><br>

<form method="post" action="terima06.php">

<table border="0" width="67%"><tr>

<td width="120">Nama</td>

<td width="15">:</td>

<td><input type="text" name="in01" size="30"></td>

</tr><tr>

<td width="120">Alamat</td>

<td width="15">:</td>

<td><input type="text" name="in02" size="80"></td>

</tr><tr>

<td width="120">Kota</td>

<td width="15">:</td>

<td><input type="text" name="in03" size="30"></td>

</tr><tr>

<td width="120">Negara</td>

<td width="15">:</td>

<td><input type="text" name="in04" size="30"></td>

</tr><tr>

<td width="120">Phone</td>

<td width="15">:</td>

<td><input type="text" name="in05" size="30"></td>

</tr></table>

<input type="submit" value="Kirim Data">

</form>

Simpan dengan nama input06.html (boleh disimpan dengan nama lain):

Dan berikut ini script untuk form penerimaannya:

<h1>Form Penerimaan Data Warga</h1><br>

<?php

$a=$_POST["in01"];

$b=$_POST["in02"];

$c=$_POST["in03"];

$d=$_POST["in04"];

$e=$_POST["in05"];

<table border="0" width="67%"><tr>

<td width="120">Nama</td>

<td width="15">:</td>

<td><input value="<?=$a?>" type="text" name="in01" size="30"></td>

</tr><tr>

<td width="120">Alamat</td>

<td width="15">:</td>

<td><input value="<?=$b?>" type="text" name="in02" size="80"></td>

</tr><tr>

<td width="120">Kota</td>

<td width="15">:</td>

<td><input value="<?=$c?>" type="text" name="in03" size="30"></td>

</tr><tr>

<td width="120">Negara</td>

<td width="15">:</td>

<td><input value="<?=$d?>" type="text" name="in04" size="30"></td>

</tr><tr>

<td width="120">Phone</td>

<td width="15">:</td>

<td><input value="<?=$e?>" type="text" name="in05" size="30"></td>

</tr></table>

Note:

Untuk menampilkan data pada kolom tinggal menambahkan value=”<?variabel?>”, sehingga setiap kolom menampilkan data yang sudah diterima oleh server.

Simpan dengan nama terima06.php:

Buka browser dan buka file input06.html > klik Kirim Data:

Hasilnya data terkirim ke server dan PHP akan menampilkan form terima06.php yang sama rapihnya dengan form pengirim:

Demikianlah penjelasan mengenai cara pembuatan form penerimaan ala HTML dengan bantuan aplikasi MS Frontpage.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

14 November 2020

Cara Pembuatan Form Pengiriman Ala HTML Yang Rapih Dengan Bantuan Microsoft Frontpage – Part 4

Niguru.com | Sabtu, 14 Nov 2020 | Pada posting sebelumnya Niguru.com sudah menjelaskan cara melakukan finishing pada form yang sudah dibuat sehingga saat ditampilkan pada browser garis-garis pembatas tabel tidak terlihat, dan setiap kolom dan baris tertata rapi.

Kali ini Niguru.com akan melanjutkan dengan penjelasan mengenai cara penambahan tombol pengiriman. Sebagai contoh Niguru.com akan menggunakan untuk mengirimkan data ke aplikasi PHP.

Berikut ini adalah tampilan form yang sudah dibuat:

Dan ini adalah script HTML dari form tersebut, bila ditampilkan dengan Notepad:

Dan ini setelah ditambah script untuk mengirim data, yaitu:

<form method="post" action="nama_file.php">

TABEL FORM..

<input type="submit" value="nama_tombol"></form>

Perhatikan penggunaannya pada contoh script berikut ini:

<h1>Form Data Warga</h1><br>

<form method="post" action="terima05.php">

<table border="0" width="67%"><tr>

<td width="80">Nama</td>

<td width="15">:</td>

<td><input type="text" name="in01" size="30"></td>

</tr><tr>

<td width="80">Alamat</td>

<td width="15">:</td>

<td><input type="text" name="in02" size="80"></td>

</tr><tr>

<td width="80">Kota</td>

<td width="15">:</td>

<td><input type="text" name="in03" size="30"></td>

</tr><tr>

<td width="80">Negara</td>

<td width="15">:</td>

<td><input type="text" name="in04" size="30"></td>

</tr><tr>

<td width="80">Phone</td>

<td width="15">:</td>

<td><input type="text" name="in05" size="30"></td>

</tr></table>

<input type="submit" value="Kirim Data"></form>

Simpan dengan nama input05.html (boleh disimpan dengan nama lain):

Berikut ini contoh script penerimaan dalam format PHP:

<h1>Form Data Warga</h1>

<h3>

<?php

$a=$_POST["in01"];

$b=$_POST["in02"];

$c=$_POST["in03"];

$d=$_POST["in04"];

$e=$_POST["in05"];

echo $a."<br>";

echo $b."<br>";

echo $c."<br>";

echo $d."<br>";

echo $e."<br>";

Simpan dengan nama terima05.php:

Buka browser dan buka input05.html. Hasilnya:

Isi kolom-kolom input > klik Kirim Data:

Data yang dikirim dari input05.html, akan ditampilkan pada terima05.php:

Demikianlah penjelasan mengenai cara pembuatan form pengiriman ala HTML dengan bantuan aplikasi MS Frontpage.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)