Selasa, 30 Agustus 2016

thumbnail

Membuat Daftar List Dengan HTML

Ada banyak kesempatan ketika kita perlu menggunakan daftar. HTML menyediakan kami dengan tiga jenis:

  1. Daftar Memerintahkan adalah daftar di mana setiap item dalam daftar adalah bernomor. Misalnya, daftar mungkin serangkaian langkah-langkah untuk resep yang harus dilakukan dalam rangka, atau kontrak hukum di mana setiap titik harus diidentifikasi oleh suatu bagian jumlah.
  2. Daftar berurutan adalah daftar yang dimulai dengan titik peluru (Bukan karakter yang menunjukkan perintah).
  3. Daftar definisi terdiri dari satu set istilah bersama dengan definisi untuk masing-masing istilah tersebut.


Daftar memerintahkan

<Ol> => daftar memerintahkan dibuat dengan <ol> elemen.  
<Li>  => Setiap item dalam daftar tersebut ditempatkan antara pembuka <li> tag dan <li /> tag penutup.
<ol>
 <li>Download Modul 1: Menginstal PC</li>
 <li>Download Modul 2: Mendiagnosis Permasalahan PC dan Periferal</li>
 <li>Download Modul 3: Melakukan perbaikan dan Setting ulang sistem PC</li>
 <li>Download Modul 4: Melakukan perbaikan Periferal</li>
 <li>Download Modul 5: Melakukan perawatan PC</li>
 <li>Download Modul 6: Melakukan perawatan Periferal</li>
 <li>Download Modul 7: Menginstalasi Sistem Operasi Berbasis GUI</li>
</ol>

Result



Daftar berurutan

<Ul>  = > Daftar unordered dibuat dengan <ul> elemen. 
<Li>  => Setiap item dalam daftar tersebut ditempatkan antara pembuka <li> tag dan <li /> tag penutup


<ul>
 <li>Download Modul 9: Menginstalasi Sistem Operasi Berbasis Text</li>
 <li>Download Modul 10: Menginstalasi Perangkat Jaringan Lokal (LAN)</li>
 <li>Download Modul 11: Mendiagnosis Permasalahan PC yang Tersambung<br/>Jaringan</li>
 <li>Download Modul 12: Melakukan Perbaikan dan Setting Ulang Koneksi Jaringan</li>
 <li>Download Modul 13: Menginstalasi Sistem Operasi Jaringan Berbasis GUI</li>
 <li>Download Modul 14: Menginstalasi Sistem Operasi Jaringan Berbasis Text</li>
</ul>

Result


Daftar definisi

<Dl> = > Daftar definisi dibuat dengan yang <dl> elemen dan biasanya terdiri dari serangkaian persyaratan dandefinisi mereka. Dalam <dl> elemen Anda akan biasanya melihat pasang <dt> dan <Dd> elemen.
<Dt> 
= > Ini digunakan untuk mengandung istilah didefinisikan (definisi istilah).
<Dd>
= > Ini digunakan untuk mengandung definisi.


<dl>
 <dt>Semut Wifii</dt>
  <dd>Semutwifi berbagi tetorial tentang dunia website</dd>
 <dt>Backspace</dt>
  <dd>Backspace merupakan komunitas kami</dd>
 <dt>Semut & Backspace</dt>
</dl>

Result


Anda dapat menempatkan sebuah daftar kedua dalam sebuah <li> elemen untuk membuat sublist sebuah atau daftar bersarang.

<ul>
 <li>Download Modul 1: Menginstal PC</li>
 <li>Download Modul 2: Mendiagnosis Permasalahan PC dan Periferal</li>
 <li>Download Modul 3: Melakukan perbaikan dan Setting ulang sistem PC</li>
 <li>Download Modul 4: Melakukan perbaikan Periferal</li>
 <li>Download Modul 5: Melakukan perawatan PC</li>
 <li>Download Modul 6: Melakukan perawatan Periferal</li>
 <li>Download Modul 7: Menginstalasi Sistem Operasi Berbasis GUI</li>
  <ul>
   <li>Berbasis Windows</li>
   <li>Linux</li>
   <li>Mac</li>
  </ul>
 <li>Download Modul 8: Membackup dan Merestore Software</li>
</ul>

Result

thumbnail

Membuat Link dan Menghubungkan ke Situs Lain

Metode berikut akan mengajarkan bagaimana membuat suatu hubungan dengan halaman web satu dengan yang lainnya, atau bagaimana memanggil suatu webpage, objek yang kita klik lalu muncul halaman selanjutnya yaitu disebut link.


Memanggil ke Situs Lain

<a> lain-sites.html HTML Link yang diciptakan menggunakan <a> elemen yang memiliki atribut disebut href. Nilai dari Atribut href adalah halaman yang Anda ingin orang untuk pergi ke ketika mereka mengklik pada link. Pengguna dapat mengklik apa pun yang muncul antara pembukaan tag <a> dan penutupan </a> tag dan akan dibawa ke halaman ditetapkan dalam atribut href. Ketika Anda link ke yang berbeda website, nilai href atribut akan menjadi web penuh alamat untuk situs, yang dikenal sebagai URL absolut. Browser menampilkan link warna biru dengan garis bawah secara default

<p>Link Semut wifi
	<ul>
		<li>
			<a href="http://www.semutwifi.blogspot.com">Blog</a>
		</li>
		<li>
			<a href="http://www.semutwifii.blogspot.com">Wordpress</a>
		</li>
		<li>
			<a href="http://www.facebook.com/semutwifii">Facebook</a>
		</li>
	</ul>
</p>

Result

 


URL singkatan dari Uniform Resource Locator. setiap web Halaman memiliki URL sendiri. Ini adalah alamat web yang Anda akan ketik ke browser jika Anda ingin kunjungi halaman tertentu. URL absolut dimulai dengan nama domain untuk situs tersebut, dan dapat diikuti oleh path ke halaman tertentu. Jika tidak ada halaman yang ditentukan, situs akan menampilkan homepage.



Memanggil ke Halaman Lain di Situs Sama 

<a> Ketika Anda terhubung ke lainnya halaman dalam situs yang sama, Anda tidak perlu menentukan nama domain dalam URL. Kamu dapat menggunakan singkatan yang dikenal sebagai URL relatif. Jika semua halaman situs yang di folder yang sama, maka nilai dari atribut href hanyalah nama file. Jika Anda memiliki halaman yang berbeda dari situs di folder yang berbeda, maka Anda dapat menggunakan sedikit lebih kompleks sintaks untuk menunjukkan di mana Halaman ini dalam kaitannya dengan saat ini halaman.

<p>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="about-us.html">About</a></li>
		<li><a href="movies.html">Movies</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</p>
 
Result




Ketika menghubungkan ke halaman lain dalam situs yang sama, Anda dapat menggunakan URL relatif. Ini adalah seperti versi singkat dari mutlak URL karena Anda tidak perlu untuk menentukan nama domain beberapa bermanfaat pintas yang dapat digunakan untuk menju link ke halaman lain pada Anda sendiri situs web.




Senin, 29 Agustus 2016

thumbnail

Cara Membuat Shortcut Shut Down, Restart,Sleep di Windows

Bagi pengguna yang baru beralih ke windows 8 pasti menemui kesulitan dalam menemukan tombol shutdown. Karena tombol ini letaknya tersembunyi. Tidak seperti di windows 7 untuk mematikan komputer kita cukup klik start dan shut down, di windows 8 kita perlu buka charm menu – setting – power – shutdown. Hal ini tentu sangat merepotkan bagi sebagian orang.

Maka dari itu pada pembahasan ini saya memberikan tips cara membuat menu shutdown, restart,  dan sleep ke screen windows

Di bawah ini adalah langkah-langkah/ Cara Membuat Menu Shutdown di window
  1. Pada desktop anda buat Shortcut baru caranya dengan klik kanan di desktop kemudian pilih New > Shortcut.
  2. Setelah itu ketikkan perintah seperti ini shutdown /s /t 0 lihat gambar
1
  1. Selanjutnya klik next, masukkan nama shortcut anda. Dalam contoh ini saya memberi nama shoetcutnya “shutdown”. Klik finish
2
  1. Shortcut sudah berhasil dibuat. Selanjutnya klik kanan shortcut tersebut kemudian plih properties.
  2. Pilih tab icon, maka akan tampil messagebox anda klik OK.
4
  1. Kemudian pilih salah satu icon yang sudah di sediakan, pilih yang cocok untuk anda.
3
  1. Sekarang tombol shortcut sudah mempunyai icon. Shortcut ini juga dapat dimasukkan ke taskbar caranya dengan kanan icon dan plih Pin to Start.
Jika ingin membuat menu Restart, Hibernate, Sleep caranya sama dengan cara diatas yang membedakan adalah pada langkah ke 2 yaitu ganti perintahnya dengan:
  •  Restart: shutdown.exe -r -t 00
  •  Hibernate: rundll32.exe powrprof.dll,SetSuspendState
  •  Sleep: rundll32.exe powrprof.dll,SetSuspendState 0,1,0
Sekian tips yang dapat saya berikan tentang Cara Membuat Menu Shut Down, Restart, Sleep di Windows
thumbnail

Membuat Tabel dan beberapa baris

Sebelumnya telah anda buat bagaimana tabel dengan satu baris, berikut ini akan dijelaskan bagaimana membuat tabel dengan banyak baris, selanjutnya anda harus mendefinisikan tag <TR> beserta <TD> untuk membuat beberapa baris dan kolomnya. Ok 

berikut langsung saja anda buat scriptnya

 <html>
 <head>
  <title>Belajar Table</title>
 </head>
 <body>
  <table border="10" width="700" height="300"
  <tr>
   <th rowspan="2">NO</th>
   <th rowspan="2">NAMA</th>
   <th colspan="3">NILAI</th>
   <th rowspan="2">KET</th>
  </tr>
   <tr>
    <td><b><center>UTS</center></b></td>
    <td><b><center>UAS</center></b></td>
    <td><b><center>Rata-Rata</center></b></td>
   </tr>
   <tr>
    <td><center>1</center></td>
    <td>UDIN</td>
    <td><center>90</center></td>
    <td><center>90</center></td>
    <td><center>90</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>2</center></td>
    <td>UJANG</td>
    <td><center>80</center></td>
    <td><center>80</center></td>
    <td><center>80</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>3</center></td>
    <td>ISIN</td>
    <td><center>87</center></td>
    <td><center>78</center></td>
    <td><center>82,5</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>4</center></td>
    <td>SURISIN</td>
    <td><center>50</center></td>
    <td><center>70</center></td>
    <td><center>60</center></td>
    <td><center>TIDAK LULUS</center></td>
   </tr>
   <tr>
    <td><center>5</center></td>
    <td>ICIH</td>
    <td><center>80</center></td>
    <td><center>79</center></td>
    <td><center>9,5</center></td>
    <td><center>LULUS</center></td>
   </tr>
 </body>
</html>
   

 


Hasilnya sebagai berikut







thumbnail

Memahami Pembuatan Form

Form adalah sebuah metode yang digunakan dalam website yang mengizinkan seorang pengujung untuk dapat berinteraksi dengan server ataupun dengan pengelola website tersebut. Dengan adanya proses interaksi tersebut, maka pengguna akan mendapatkan beberapa kemudahan yang diberikan pada portal/website tersebut. Untuk dapat membuat form anda membutuhkan tag <form> yang nantinya memudahkan anda dalam pembuatan form, dengan bantuan tag <form> nantinya anda akan dapat membuat interaksi dengan seorang pengunjung website anda.
Penjelasan dari tag
Tag
Keterangan
<Form>
Digunakan untuk mendeklarasikan awalan tag form
<Input>
Digunakan untuk memasukan komponen formulir
atribut yang ada didalam tag Form
Atribut
Keterangan
Action
Digunakan untuk menentukan alamat dimana data dari komponen form akan dikirim.
Method
Digunakan untuk membedakan metode pengiriman data
atribut pada method
Nilai Pada Atribut Method
Keterangan
GET
Pengiriman data kedalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
POST
Melakukan pengiriman data pada halaman lain yang selanjutnya dapat diproses menuju halaman berikutnya.


Berikut contoh Script umum pembuatan sebuah form.
 <form action=”alamat webpage lain” method=”GET/POST” name=”nama form” > 
      <input>
           .....................
      </input> 
 </form>


Komponen yang dibutuhkan didalam form.

Tag
Keterangan
Script
TextField
Untuk memasukan data berupateks karakter
<input type="text" name="nama text" size="ukuran" maxlength="panjang karakter">
Password
Untuk sebuah kata sandi yang biasanya karakternya dirahasiakan
<input type="password" name="nama text" size="ukuran" maxlength="panjang karakter">
Radio Button
Button Untuk membuat opsi pertanyaan
<input type="radio" value="nama radio">isinya
Checkbox
Untuk membuat pilihan berganda
<input type="checkbox" value="nama checkbox">isinya
List Menu
Untuk membuat pilihan dengan beberapa daftar
<select name="nama menu"><option value="nilai opsi">isinya</option></select>
TextArea
Digunakan untuk komentar atau pertanyaan
<textarea name="nama textarea" cols="nilai" rows="nilai"></textarea>
File Field
Digunakan untuk membedakan metode pengiriman data
<input type="file" name="nama file" size="ukuran">
SUBMIT /RESET / BUTTON
Digunakanuntuk melakukan perintah eksekusi
<input type="submit | reset | button" value="nama tombol">


<html>
 <head>
  <title> Belajar Form </title>
 </head>
 <body>
  <!--Belajar Buat Form-->
  <h1>MENDAFTAR</h1>
  GRATIS. Sampai Kapan Pun
  <form>
   <table>
   <tr>
    <td><label>Nama</label></td>
    <td><input type="text" name="ndepan" id="ndepan" size="20" placeholder="Nama Depan" />
    <input type="text" name="nbelakang" id="nbelakang" size="20" placeholder="Nama Belakang" /></td>
   </tr>
   <tr>
    <td><label>Email</label></td>
    <td><input type="text" name="email" id="email" size="44" placeholder="Masukan Email" /></td>
   </tr>
   <tr>
    <td><label>Masukan Lagi Email</label></td>
    <td><input type="text" name="email" id="email" size="44" placeholder="Konfirmasi Email" /></td>
   </tr>
    <td><label>Masukan Kata Sandi</label></td>
    <td><input type="password" name="password" id="password" size="44" placeholder="Masukan Kata Sandi" /></td>
   <tr>
    <td><label>Konfirmasi Kata Sandi</label></td>
    <td><input type="password" name="password" id="password" size="44" placeholder="Masukan Ulang Kata Sandi" /></td>
   </tr>
   <tr>
    <td><label>Tanggal Lahir</label></td>
    <td coulspan="3"><select name="tgllahir" id="tgllahir">
    <option value="">Tanggal</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
   
    <select name="Blnlahir" id="Blnlahir">
    <option value="">Bulan</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
 
    <select name="Thnlahir" id="Thnlahir">
    <option value="">Tahun</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option></td>
    </select>
   
   <tr>
    <td><label>Jenis Kelamin</label></td>
    <td><input type="radio" name="jk" id="Laki-laki" value="Laki-Laki" />Laki-Laki
    <input type="radio" name="jk" id="Perempuan" value="Perempuan" />Perempuan</td>
   </tr>
   <tr>
    <td><label>Hobi</label></td>
    <td><input type="checkbox" name="hobi" value="Olahraga"/>Olahraga
    <input type="checkbox" name="hobi" value="Membaca"/>Membaca
    <input type="checkbox" name="hobi" value="Menulis"/>Menulis</td>
   </tr>
   <tr>
    <td><label>Komentar</label><br/>
    <textarea name="komentar" cols="40" rows="5"></textarea></td>
   </tr>
   <tr>
    
    <td><input type="submit" name="submit" value="Mendaftar" /></td>
   </tr>
  </table>
  </form>
 </body>

</html>


Hasilnya sebagai berikut




[full_width]
thumbnail

Menentukan Ukuran pada huruf beserta warna

Ukuran huruf didalam sebuah halaman web atau webpage sangat penting perannya, karena tidak mungkin membuat ukuran dalam suatu halaman memiliki ukuran yang sama karena nantinya akan terlihat kurang berkualitas juga professional. Maka dengan menggunakan tag font anda dapat menentukan ukuran huruf juga warna yang nantinya akan anda terapkan dalam halaman web yang anda desain.

<font size=”nilai” color=”pilih warna” face=”pilih huruf>

Keterangan dari atribut font diatas sebagai berikut.
  • Size : Dapat anda masukan nilai angka mulai dari 1 sampai 7 jika anda ingin ukuran yang lebih besar bisa menggunakan operator tambah(+), contoh(+3).
  • Color : Menentukan warna pada teks atau hurufnya.
  • Face : Menentukan jenis hurufnya contohnya(arial,verdana,Calibri) Contoh scriptnya sebagai berikut.


<html>
 <head>
  <title>Menentukan kuran Teks Warna</title>
 </head>
  <body>
   <font size="+3" color="blue" 
   face="Times New Roman,Times,serif">
   Ini adalah Ukuran Teks Huruf Times New Roman,Times,serif
   
   </font>
  </body>
</html>

Hasilnya sebagai berikut.