Wampserver adalah salah satu software yang berfungsi dalam pembuatan website tanpa terhubung dengan internet. Berikut adalah contoh script yang saya dapat dalam pembelajaran TIK bersama Mister Wiedhodho.
Sebelumnya, anda harus memiliki aplikasi WampServer. Jika belum ada,
silahkan didownload terlebih dahulu, ketik saja “wampserver” di google search, pasti bakal nongol tuh hehe J
silahkan didownload terlebih dahulu, ketik saja “wampserver” di google search, pasti bakal nongol tuh hehe J
Kalo udah di wonload, di install aja yak! Nah habis itu silahkan buat script yang anda inginkan, kalo saya sebagai percobaan saya membuat sesuatu yang sederhana, scriptnya seperti dibawah ini.
<html>
<head>
<title>hello aja </title>
</head>
<body>
<h1 align="center">Hello HTML!</h1>
<h2>Hello HTML!</h2>
<h3>Hello HTML!</h3>
Ini adalah latihan pertama gue. </br>
<i> <u> <b>Ini file HTML. </u> </b> </i>
<br/>
Username : <input type ="text" name="username" value=""> <br/>
Password : <input type ="password" name="password" value=""> <br/>
<input type="button" name="sembarang" value="OK"><br/>
<hr/>
<table border="10">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat </th>
</tr>
<tr>
<td>1</td>
<td>Khaqiqiyah</td>
<td>Murjani 2 </td>
</tr>
<tr>
<td>2</td>
<td>Zulianur</td>
<td>Tendean </td>
</tr>
</table>
</body>
</html>
Script diatas dapat di tulis di mana saja, mau di wordpad, notpad, sticky note, pokoknya dimana aja bisa. Setelah itu, save dengan title “judul.html” (jangan lupa dibelakang judul harus ditulis .html). Lalu save di ‘Local disk (C)’, masuk ke folder ‘wamp’, lalu masuk lagi ke folder ‘www’, lalu save deh.
Jika ingin melihat hasilnya coba buka yang kamu save di folder ‘www’ tadi (file berbentuk firefox document). hasilnya bakalan kayak gini nih..
1. <title>hello aja </title>
Tulisan berwarna biru diatas dapat diganti sesuai yang anda inginkan. Itu adalah judul.
2. <h1 align="center">Hello HTML!</h1>
Script diatas berguna untuk menempatkan posisi suatu tulisan menjadi berada di tengah.
3. <br/>
Script ini berfungsi untuk memberi baris (enter).
4. <i> <u> <b>Ini file HTML. </u> </b> </i>
Tulisan yang berwarna merah berguna untuk membuat tulisan menjadi miring, bergaris bawah, dan bercetak tebal.
5. Username : <input type ="text" name="username" value=""> <br/>
Password : <input type ="password" name="password" value=""> <br/>
<input type="button" name="sembarang" value="OK"><br/>
<hr/>
Script diatas berfungsi untuk membuat textbox sebagai penulisan nama uname dan password dan membuat button OK.
6. <table border="10">
Script yang satu ini berfungsi untuk memberi garis, angka ‘10’ dapat anda ganti sesuai yang anda inginkan.
7. <tr>
<th>No</th>
<th>Nama</th>
<th>Alamat </th>
</tr>
<tr>
<td>1</td>
<td>Khaqiqiyah</td>
<td>Murjani 2 </td>
</tr>
<tr>
<td>2</td>
<td>Zulianur</td>
<td>Tendean </td>
</tr>
</table>
Script ini berfungsi untuk mengisi tabel yang kosong.
Tambahan:
>>>Jika ingin menambahkan tulisan dengan background warna sebagai dasarnya, scriptnya adalah seperti berikut :
<div style="background:maroon; "> Zulianur Khaqiqiyah </div>
tulisan yang berwarna pink dapat kamu ganti dengan warna yang sesuai dengan kamu ingingkan, misalnya white, blue, purple dan sebagainya. Hasilnya bakal kayak gini nih
>>>> Nah trus kalo mau nambahin background gini nih scriptnya :
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs-_XMaTlecaDe-5cNQqWZrC7XElW61ItyScvMTng9MwkJ5Sv10YHAlEGg05T7b69XQ2ERAnH_Mo9vF6RgxxfhffJpkhQTuqTYUIPpUk8Q5g-JHbLst91pBjVTohGIqUTpynPmChcfVip/s1600/the_abstrak_effect_2.jpg);border:2px solid white;padding:10px;"> Zulianur Khaqiqiyah </div>
tulisan yg berwarna hijau dapat kamu ganti sesuai alamat url gambar yang ingin kamu masukkan. Hasilnya bakalan kayak gini nih . .
Tambahan:
>>>Jika ingin menambahkan tulisan dengan background warna sebagai dasarnya, scriptnya adalah seperti berikut :
<div style="background:maroon; "> Zulianur Khaqiqiyah </div>
tulisan yang berwarna pink dapat kamu ganti dengan warna yang sesuai dengan kamu ingingkan, misalnya white, blue, purple dan sebagainya. Hasilnya bakal kayak gini nih
>>>> Nah trus kalo mau nambahin background gini nih scriptnya :
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs-_XMaTlecaDe-5cNQqWZrC7XElW61ItyScvMTng9MwkJ5Sv10YHAlEGg05T7b69XQ2ERAnH_Mo9vF6RgxxfhffJpkhQTuqTYUIPpUk8Q5g-JHbLst91pBjVTohGIqUTpynPmChcfVip/s1600/the_abstrak_effect_2.jpg);border:2px solid white;padding:10px;"> Zulianur Khaqiqiyah </div>
tulisan yg berwarna hijau dapat kamu ganti sesuai alamat url gambar yang ingin kamu masukkan. Hasilnya bakalan kayak gini nih . .
info yang sangat menarik dan banyak membantu. top.
BalasHapus