Dasboard WebBook Design Operatining System Tutorial Blog

Menu Dengan Tag HTML Dasar & CSS

By  at 06.58    1 comment
Menu merupakan properti untuk memudahkan kita dalam mengankses data, sehingga data tertampil secara terstruktural. Banyak cara dalam pembuatan menu dari teknik dasar sampe yang mahir. Jika dilihat dari bentuk dan keunikan memang tidak ada habisnya.Pembuatan menu deri mula dengan tag HTML, CSS, java. dalam Kesempatan ini Koerniawan Blog Shere mengenai pembuatan dengan teknik sederhana yaitu dengan Tag Html( table + form ) serta menggunakan CSS
  • Menu dengan Tag Html ( Table + Form )
    • Sudah lihat Example Menu. Sederhana bukan tapi yang paling penting adalah fungsinya, jika Anda tertarik mencoba Silahkan baca lebih lanjut : Letakan Tag Dibawah ini diantara <Body> </Body> <img src="gambar.jpg" height="150" Width="1000">
    <form>
    <table width="100%" bgcolor="green">
    <tr>
    <td width="16%">
    <center>
    <a href="">Home</a></center></td>
    <td width="16%">
    <center>
    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option selected>Kejuruan
    <option value="alamat url">Management Informatika Komputer
    <option value="alamat url">Pendidikan Komputer Akuntansi
    <option value="alamat url">Pendidikan Inggirs & Komputer
    <option value="alamat url">Teknik Informatika Komputer
    </select></center></td>
    <td width="16%">
    <center>
    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option selected>Materi
    <option value="alamat url">Aplikasi Perkantoran
    <option value="alamat url">Komputer Programing
    <option value="alamat url">Internet Programing
    <option value="alamat url">Design Grafis
    </select></center></td>
    <td width="16%">
    <center>
    <a href="">Kampus</a></center></td>
    <td width="16%">
    <center>
    <a href="">Pendafaran Online</a></center></td>
    <td width="16%">
    <center>
    <a href="">Forum</a></center></td>
    </tr></table>
    </form>
  • Menu Dengan Tag CSS
    • Menu ini lebih menarik karena mempunyai keuntungan tampilan scrool otomatis. Jika tertarik mari kita lanjut Letakan Tag Berikut diantara <Head> </Head>
    <style type="text/css">
    ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    }
    li ul {
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
    }
    ul li a:hover {
    background: #617F8A;
    }
    li:hover ul {
    display: block;
    position: absolute;
    }
    li:hover li {
    float: none;
    font-size: 11px; }
    li:hover a {
    background: #617F8A;
    }
    li:hover li a:hover {
    background: #95A9B1;
    }
    </style>

    Kemudian untuk penggunaan letakan Tag berikut diantara <Body> </Body>
    <img src="gambar.jpg" height="150" Width="1000">
    <ul id="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Jurusan</a>
    <ul>
    <li><a href="">Management Informatika
    Komputer</a></li>
    <li><a href="">Pendidikan Komputer Akuntansi</a></li>
    <li><a href="">Pendidikan Inggris Komputer</a></li>
    <li><a href="">Teknik Informatika Komputer</a></li>
    </ul>
    </li>
    <li><a href="">Materi</a>
    <ul>
    <li><a href="">Aplikasi Perkantoran</a></li>
    <li><a href="">Komputer Programing</a></li>
    <li><a href="">Internet Programing</a></li>
    <li><a href="">Design Grafis</a></li>
    <li><a href="">Materi Teori</a></li>
    <li><a href="">Akuntansi Keuangan</a></li>
    <li><a href="">Hitung Dagang</a></li>
    </ul>
    </li>
    <li><a href="">Kampus</a></li>
    <li><a href="">Pendaftaran Online</a></li>
    <li><a href="">Forum</a></li>
    </ul>
Semoga Bermanfaat segala sesuatu butuh belajar dan belajar dari awal adalah guru yang paling sabar. Materi bisa di gunakan untuk materi online maupun ofline untuk pembelajaran materi tag HTML atau pun CSS. Jika Anda berminat mendapatkan file secara lengkap sebagai bagan pembelajaran berikut link yang bisa digunakan

Instal XAMPP Portable

By  at 03.38    No comments

XAMPP sering di artikan sebagai server local. Dimana deskripsi arti secara lengkapa adalah
Tambahan Deskripsi
Jadi XAMPP adalah suatu installer web server yang berisi Apache HTTP dan MySQL dan mendukung program PHP dan Perl. 
Dalam menggunakan XAMPPkita sering tidak praktis jika dilakukan dengan instaler asli tetapi memasng penggunaan instal XAMPP lebih stabil. Tetapi banyak yang menggunakan XAMPP dalam bentuk portable karena dirasa lebih praktis kebetulan saya juga lagi pengen memahami penggunaan server local.

Pada saat ini kita akan install XAMPP Portable, artinya kita menginstall Software ini di dalam sebuah hardisk external ( flashdisk ). dengan tujuan kita bisa menggunakannya sesuai kebutuhan, dimana saja, kapanpun dengan enak. dan yang lebih simpelnya lagi kita tidak usah kerja dua kali jika kita disuatu tempat dan ingin mengerjakan tugas kita. langsung saja berikut langkah langkahnya :1. Silahkan Download XAMPP Lite dari Apache Friends.
XAMPP Download Page
  • Silahkan anda memilih file ZIP untuk didownload.
XAMPP Zip option
  • EXE yang dieksekusi merupakan versi installer yang akan menginstal XAMPP Lite pada PC / Notebook. XAMPP tidak akan portabel jika Anda menggunakan versi EXE untuk menginstal.
2. Sekarang Installah XAMPP Lite yang telah anda download
  • Taruhlah downloadan XAMPP anda dimana Flashdisk anda berada. Dalam kasus saya, saya portable HDD berada di drife f ( F: drive ). Saya berniat untuk menempatkanya ke dalam XAMPP Lite F: \ root folder.
XAMPP Download Complete
  • Setelah selesai mendownload silahkan anda buka hasil downloadan tadi
XAMPP extract path
  • Extractlah zip tadi di flashdisk anda
  • dan hasilnya adalah "muncul folder baru dengan nama xampplite"
3. Setup XAMPP Lite.
  • Jalankan file setup_xampp.bat ( klik dua kali ).
Run XAMPP setup file
  • Ini akan mengkonfigurasi semua pengaturan yang diperlukan dan "path file" secara otomatis. Tekan tombol apa saja untuk melanjutkannya.
XAMPP run config done
4. Menjalankan XAMPP Lite
  • Jalankan file "xampp_start.exe".
XAMPP Start file
  • Maka tampilannya adalah seperti berikut, Menandakan Apache dan MySQL sedang berjalan dengan sukses.
XAMPP Start screen
  • Bukalah Browser anda, lalu ketik "http://localhost/" pada adrress bar.
XAMPP Browser screen
  • Lalu pilihlah bahasa yang akan anda gunakan, Maka tampilannya adalah seperti dibawah ini ( jika anda memilih bahasa " English " ).
XAMPP Home Page
  • Taraaaaa… Instalasi berjalan dengan sukses :)
5. Mengakhiri dan menrestart XAMPP Lite
  • Untuk mengakhiri XAMPP Lite, Kliklah dua kali pada file "xampp_stop.exe" .
XAMPP Stop file
  • Terkadang, anda mungkin perlu untuk menghentikan dan mulai XAMPP, gunakan 'xampp_restart.exe' jika Anda perlu restart server. Biasanya, hal ini diperlukan konfigurasi setelah perubahan.
begitulah langkah-langkah menginstall XAMPP portable, mudah bukan.... :>
selamat mencoba dan semoga berhasil :).