Facebook

STT IBNU SINA BATAM

Merupakan gedung utama Sekolah Tinggi Teknik IBNU SINA BATAM.

Holiday

Bersama teman-teman teknik informatika B saat liburan di pantai.

Sabtu, 12 Desember 2015

Ascending dan Dicsending

Hallo guys. . .
I'm comeback again, kali ini saya akan membahas sedikit tentang pengurutan data secara Ascending dan Discending. 

Ascending dan Discending merupakan bagian dari Sorting data yaitu, mengurutkan data pada sebuah variabel tertentu.



Ascending merupakan suatu pengurutan data yang dari nilainya lebih kecil ke nilai yang lebih besar.


Sedangkan untuk Descanding kebalikan dari Descanding yaitu pengurutan data yang dari nilainya lebih kecil ke nilai yang lebih besar.

Berikut contoh:
1. Mengurutkan data angka secara ascending ( dari kecil ke besar )
Ketikkan script berikut.
<?php
$data = array(“7", “2", “22", “10");
sort($data);
 print_r($data);
?>
Maka script diatas akan menghasilkan output sorting seperti berikut ini,
2
7
1022





2. Mengurutkan data angka secara descending ( dari besar ke kecil)
Ketikkan script berikut.
<?php
$data = array(“7", “2", “22", “10");
rsort($data); //reverse sort
print_r($data);
?>
Maka script diatas akan menghasilkan output sorting seperti berikut ini,
22
10
7
2

3. Mengurutkan data huruf / string secara ascending ( urut abjad / alfabet )
Ketikkan script berikut.

<?php
$data = array(“bebek", “harimau", “kancil", “zebra");
sort($data);
 print_r($data);
?>
Maka script diatas akan menghasilkan output sorting seperti berikut ini,
bebek
harimau
kancil
zebra

4. Mengurutkan data berdasar lebih dari 1 parameter
Misalkan anda memiliki data berikut,
nomor | umur
—————
1 | 12
3 | 11
2 | 12
4 | 15
kasus : anda ingin mengurutkan data diatas berdasarkan parameter 1 yaitu umur secara ascending, dan parameter ke 2 yaitu nomor secara descending.
Ketikkan script berikut.
<?php
$data[] = array('nomor' => 1, 'umur' => 12);
$data[] = array('nomor' => 3, 'umur' => 11);
$data[] = array('nomor' => 2, 'umur' => 12);
$data[] = array('nomor' => 4, 'umur' => 15);

foreach ($data as $param => $row) {
    $nomor[$param]  = $row['nomor'];
    $umur[$param] = $row['umur'];
}
array_multisort($umur, SORT_ASC, $nomor, SORT_DESC, $data);
?>
Maka script diatas akan menghasilkan output sorting seperti berikut ini,
11 3
12 2
12 1
15 4
Kesimpulannya adalah, apabila kita ingin mengurutkan data untuk lebih dari 1 array (lebih dari 1 parameter pengurutan), salah satu caranya adalah anda bisa menggunakan array_multisort().

Atau menggunakan Program yang telah ada, berikut di bawah ini digunakan untuk mengurutkan / sorting data baik secara ascending maupun descending yang mana data-data tersebut merupakan inputan dari user.

Contoh Ascending dan Discending
Kali ini kita akan membuat contoh Ascending dalam tabel mahasiswa dan mencoba mengurutkan NPM.




 Dan Setelah itu tambahkan script ASC didalam $query, dan kita buat $sql = "SELECT * FROM student Order by StudentID ASC";

Maka Hasilnya Sebagai berikut setelah diberi ASC didalam query NPM nya akan berurut dari yang terkecil ke yang besar. Hasil nya sebagai berikut : 

sedangkan untuk discending tinggal merubah script Asc menjadi Desc. $sql = "SELECT * FROM student Order by StudentID Desc";.

Refrensi: http://itx.web.id/php/fungsi-sorting-pengurutan-instan-dengan-php/

Semoga bermanfaat :)

Dosen Pengampuh Matakuliah
Nama : M.Ropianto, M.Kom
NIDN : 1028067804
Status : Dosen Tetap YAPISTA/STT Ibnu Sina
Pengampuh Matakuliah : Algoritma dan Pemrograman 3

Kunjungi website kampus kami: http://stt-ibnusina.ac.id



Jumat, 22 Mei 2015

Cara Belajar PHP Dengan Menggunakan Aplikasi XAMPP

Belajar PHP Dengan Aplikasi XAMPP


Hallo Gan !
Jumpa lagi, Kali ini saya akan memberikan informasi lagi, khususnya bagi para pemula yang baru belajar mengenal XAMPP dan ingin menerapkannya disini saya akan sedikit memberikan ulasannya yang mana termasuk salah satu tugas saya di kampus. Tidak berlama-lama lagi berikut kajiannya.
  • Buka aplikasi XAMPP Panel Control yang sudah di instal di laptop anda. Jika belum silahkan download disini “http://www.apachefriends.org/en/xampp-windows.html” terlebih dahulu.
  • Kemudian aktifkan XAMPP dengan klik star pada tiap server serpeti Apache, MySQL, FileZilla, dan  Mercury. Akan terlihat seperi ini
  • Jika sudah, bukalah folder xampp, lalu folder htdog dan buatlah folder baru dengan nama sesuka anda. Disini saya membuat dengan nama saya
  • Lalu Ketik kode berikut di Notepad atau Notepad++

<htm<html>

<head>
<title>Tugas Pemrograman Latihan2</title>
</head>
<body>
<?php

echo "<h1><center>Praktikum Algoritma & Pemrograman 2</h1>
<p>Nama : Filza Juliansyah </p>
<p>Npm : 1410128262058 </p>
<p>Kelas : 2B</p>
<p>Jurusan : Teknik Informatika</p>";

$no02="1";
$nama02="Eka Pratama Saputra";
$npm02="1410128262053";
$jurusan02="Teknik Informatika";

$no03="2";
$nama03="Nur Fharid";
$npm03="1410128252054";
$jurusan03="Teknik Informatika";

$no03="3";
$nama03="Abdul Jalal";
$npm03="1410128252055";
$jurusan03="Teknik Informatika";


$no03="4";
$nama03="Khaidar Salman";
$npm03="1410128252056";
$jurusan03="Teknik Informatika";

$no03="5";
$nama03="Monika Racham Marantika";
$npm03="1410128252057";
$jurusan03="Teknik Informatika";
?>
<center><table border=1>
 
   <th>NO.</th>

   <th><centr>NAMA</th>

   <th><center>NPM</th>

   <th><center>JURUSAN</th>

<tr>

<td><center>1</td>
<td>Eka Pratama</td>
<td>1410128262053</td>
<td>Teknik Informatika</td>
<col style="background-color:green">
    </tr>
<td><center>2</td>
<td>Nur Fharid</td>
<td>1410128262054</td>
<td>Teknik Informatika</td>
<col style="background-color:green">
    </tr>
<td><center>3</td>
<td>Abdul Jalal</td>
<td>1410128262055</td>
<td>Teknik Informatika</td>
<col style="background-color:green">
    </tr>
<td><center>4</td>
<td>Khaidar Salaman</td>
<td>1410128262055</td>
<td>Teknik Informatika</td>
<col style="background-color:green">
    </tr>
<td><center>5</td>
<td>Monika Racham Marantika</td>
<td>1410128262056</td>
<td>Teknik Informatika</td>
<col style="background-color:green">
    </tr>
<body bg background="Eiffel.jpg">
</body>
</html>
    
 Disini saya menggunakan background gambar yang telah saya simpan di folder htdog dengan nama "Eiffel"
  • Lalu save di folder htdog type file (.php) atau  Hypertext Preprocessor file
  • Dan difolder akan terlihat seperti ini
  • Untuk melihat hasil prosesnya, buka script dengan browser favorit anda dan ganti URLnya menjadi http://localhost/filza/filza.php 
  • Hasilya seperti ini

(NB: Yang perlu diperhatikan adalah localhost/Filza/Filza.php
Filza : Merupakan nama dari folder yang saya simpan di htdog dan
Filza : Merupakan nama sricpt yang saya simpan di folder Filza )

Cukup mudah juga bukan.






Cara Menginstall Aplikasi XAMPP Web Server Di Windows

Cara Install XAMPP Di Laptop

Cara-Install-XAMPP-Web-Server-di-Windows-Nyekrip

Dalam kesempatan kali ini kita akan belajar bersama tentang cara install XAMPP di Windows, untuk menjalankan skrip PHP dibutuhkan Server Apache, biasanya para developer PHP juga menggunakan MySQL sebagai database, kedua perangkat ini bisa dipakai tanpa dipunggut biaya alias gratis.

Sungguh akan merepotkan jika kita harus meng-install satu-satu, belum lagi kita harus install software pengelola database MySQL seperti phpMyAdmin. Untuk mengurangi masalah tersebut dibuatlah XAMPP yang merupakan suatu paket server yang tergolong sangat lengkap. Apa itu XAMPP? Apa saja yang terkandung dalam XAMPP? Mari kita bahas sedikit mengenai XAMPP sebelum kita meng-install nya.

Pengertian XAMPP dan Kepanjangan XAMPP

XAMPP merupakan singkatan dari Cross-Platform (X), Apache (A), MySQL (M), PHP (P) dan Perl (P). XAMPP dibuat selengkap itu dengan tujuan memudahkan bagi para pengembang untuk membuat web server lokal untuk tujuan pengujian.

XAMPP menyediakan semua yang kita butuhkan untuk membuat sebuah web server – server aplikasi (Apache), database (MySQL), dan bahasa scripting (PHP). XAMPP juga cross-platform, yang berarti bisa bekerja sama dengan baik di Linux, Mac dan Windows.

Karena sebagian besar penyebaran web server yang sebenarnya (secara online) menggunakan komponen yang sama seperti XAMPP, sehingga membuat transisi dari server lokal ke server online sangat mudah.

Download XAMPP untuk Windows

Dalam tutorial ini menggunakan XAMPP Windows versi 1.8.2, mungkin sekarang sudah ada update terbaru dari XAMPP. Jika anda menemukan XAMPP versi terbaru dari yang versi yang digunakan pada tutorial ini, anda masih bisa mengikuti tutorial ini karena setahu saya cara install XAMPP dari versi ke versi tidak ada perubahan yang mencolok.

XAMPP tersedia dalam tiga format file:

EXE , .7z – File 7zip, ZIP – Compressed file zip. Dari ketiga format tersebut, yang paling mudah untuk diinstall adalah yang format EXE, karena itu dalam tutorial ini akan menggunakan format EXE.

Jika Anda ingin men-download yang versi 1.8.2, Anda dapat men-download instaler XAMPP versi tersebut dengan mengunjungi url download dibawah ini (Ukuran 102MB).

“http://download.s32cdn.com/20/198081/858013/xamppwin321.8.20VC9installer.exe”

Atau anda ingin men-download yang versi terbaru dengan mengunjungi url halaman:


https://www.apachefriends.org/download.html

Cara Install XAMPP di Windows

Ikuti langkah-langkah untuk menginstall XAMPP dibawah ini:

Langkah 1: Non-aktifkan anti-virus karena dapat menyebabkan beberapa komponen XAMPP tidak bisa di Install dengan lancar.

Langkah 2: Untuk pengguna Windows 7, Anda akan melihat jendela pop up, peringatan tentang User Account Control (UAC) yang aktif pada sistem. Klik “OK” untuk melanjutkan instalasi.

Cara-Instal-XAMPP-Web-Server-di-Windows-0-Nyekrip

Langkah 3: Mulai proses instalasi dengan klik dua kali pada instaler XAMPP. Klik ‘Next’ setelah splash screen.

Cara-Instal-XAMPP-di-Windows-1-nyekrip.jpg
Klik “Next”

Langkah 4: Di sini, kita dapat memilih komponen yang ingin kita instal. Pilih pilihan default dan klik ‘Next’.

Cara-Instal-XAMPP-di-Windows-5-nyekrip
Pilih "Komponen"

Langkah 5: Pilih folder sebagai tempat XAMPP akan diinstal, di folder ini akan menampung semua file aplikasi web kita, jadi pastikan untuk memilih drive yang memiliki banyak ruang(space).

Cara-Instal-XAMPP-di-Windows-6-nyekrip
Pilih "Folder"

Langkah 6: Layar berikutnya adalah promo untuk BitNami, sebuah toko aplikasi untuk server perangkat lunak. Hapus kotak centang ‘Learn more about BitNami for XAMPP’.

Cara-Instal-XAMPP-di-Windows-7-nyekrip
Hapus Centang

Langkah 7: Sekarang Setup sudah siap untuk menginstall XAMPP. Klik Next dan tunggu instaler untuk membongkar paket-nya dan memasang komponen yang dipilih. Mungkin memakan waktu beberapa menit. Nanti mungkin kita akan diminta untuk menyetujui akses Firewall untuk komponen tertentu (seperti Apache) selama proses instalasi.

Langkah 8: Proses Install sudah selesai! Pilih Kotak centang ‘Do you want to start the Control Panel now?’ untuk membuka panel kontrol XAMPP.

Cara-Instal-XAMPP-di-Windows-8-nyekrip
Centang Untuk Memulai


Cara menggunakan XAMPP Control Panel

XAMPP control panel memberi kita kontrol penuh atas semua komponen XAMPP yang telah di Install. Kita dapat menggunakan Control Panel untuk memulai / menghentikan modul yang berbeda, meluncurkan Unix shell, membuka Windows explorer sampai melihat semua operasi yang sedang berjalan di balik layar.

Berikut ini adalah gambaran singkat dari Control Panel. Untuk saat ini, kita hanya perlu tahu bagaimana untuk memulai dan menghentikan server Apache.


Keterangan dari nomor-nomor diatas adalah:

Nomor 1. Tempat Log semua aktifitas
Nomor 2. Alat untuk kontrol module XAMPP
Nomor 3. Menampilkan service yang sedang berjalan dibalik layar
Nomor 4. Membuka windows explorer
Nomor 5. Membuka Unix Shell
Nomor 6. Menampilkan semua proses dalam server
Nomor 7. Membuka panel konfigurasi

Semoga bermanfaat.

Penggertian XAMPP dan Fungsinya

Pengertian dan Pengenalan XAMMP



Hallo gan, bagi anda yang ingin memperdalam pembuatan web secara mendalam, maka sangat perlu anda mengetahui apa itu XAMPP. XAMPP adalah perangkat yang menggabungkan tiga aplikasi ke dalam satu paket, yaitu Apache, MySQL, dan PHPMyAdmin. Dengan XAMPP pekerjaan anda akan sangat dimudahkan, karena dapat mengintalasi dan mengkonfigurasi ketiga aplikasi tadi secara sekaligus dan otomatis.

XAMPP telah mengalami perkembangan dari waktu ke waktu. Versi yang terbaru adalah revisi dari edisi sebelumnya, sehingga lebih baik dan lebih lengkap. Aplikasi utama dalam paket XAMPP setidaknya terdiri dari atas web Apache, MySQL, PHP, dan PHPMyAdmin.

XAMPP merupakan singkatan dari:
  • X  ( Empat system operasi),
  • A  (Apache),
  • M (MySQL),
  • P  (phpMyadmin) dan
  • P  (Perl)

Berikut ini Penjelasan dari bagian-bagian XAMPP:
  1. X , Kenapa disebut dengan system operasi? karena XAMPP bisa dijalankan di 4 OS besar yang sering digunakan oleh pengguna komputer saat ini. Dan 4 OS tersebut tidak lain dan tidak bukan adalah Windows, Linux, Mac OS dan Solaris.
  2. A(Apacahe)  merupakan aplikasi web server. Apache ini bersifat opensource yang berarti gratis dan bisa diedit oleh penggunanya. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.
  3. M ( MySQL), merupakan aplikasi database server. Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database.
  4. P (PHP), bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung sistem manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya.
  5. P (Perl), bahasa pemrograman, pertama kali dikembangkan oleh Larry Wall di mesin Unix. Perl pertama kali dirilis pada tanggal 18 Desember 1987 ditandai dengan keluarnya Perl 1. Dua diantara karakteristik utama perl adalah penanganan teks dan berbagai jalan pintas untuk meyelesaikan persoalan-persoalan umum.Perl sangat populer di gunakan dalam program-rogram CGI (Common Gateway Interface) dan protokol internet lainnya.
Jadi Fungsi XAMPP adalah kita bisa memiliki server sendiri (localhost) untuk pembuatan website secara offline tanpa harus membeli domain , karena  sudah terdiri atas program Apache HTTP Server, MySQL database dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.
XAMPP  tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Sejarah dan Pengembang XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang terdiri dari Tim Inti (Core Team), Tim Pengembang (Development Team) & Tim Dukungan (Support Team).

Beberapa bagian penting pada program XAMPP, yang sering digunakan pada umumnya adalah sebagai berikut:
  • htdoc adalah folder tempat meletakkan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CMS  dan skrip lain.
  • phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada dikomputer.
  •  Kontrol Panel yang berfungsi untuk mengelola layanan (service) XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai (start).
Karena open source, anda dapat menggunakannya secara gratis dan bebas. Jika agan-agan ingin mendowload XAMPP bisa disedot di  http://www.apachefriends.org/en/xampp.html anda dapat mengunduh versi terbaru . Demikian Pengertian XAMPP dan Bagian-bagiannya semoga bermanfaat. 

Cara Membuat Web Dengan Menggunakan Bahasa HTML - Part 3

Membuat Tampilan Dasar Web Dengan Bahasa HTML [ Tahap Lanjutan ]



Salam Jumpa Gan, kali ini saya akan mengepos tentang informasi yang sama yaitu membuat web dengan bahasa HTML. Hanya saja kali ini lebih dalam lagi. langsung aja kita menuju ke TKP.
  • Tetap mengetik kode script yang sama di Notepad tapi hanya mengganti pembahasannya saja, berikut kode scriptnya

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
  <li><a href="Home.html">Home</a></li>
  <li><a href="News.html">News</a></li>
  <li><a href="Contact.html">Contact</a></li>
  <li><a href="About.html">About</a></li>
</ul>
</div>

<div id="nav">
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="Yaoming.jpg" width="200px" height="200px">
<p>
Nama : Yaoming<br/>
Pekerjaan : Artis MEME<br/>
Negara : Zimbabwe<br/>
Alamat : Jalan Jomblo Kel. Sendiri Kec. Ngenes No.69<br/>
Hoby : Wancakan<br/> </p>
<hr>
<p align="justify">
Saya adalah Yoming tokoh terkenal dalam MEME. Saya sering digunakan disitus MEME terpopuler di indonesia disitu saya mengekspresikan sesuatu yang hal yang dianggap kocak.
</p>
</div>

<div id="kanan">
<ul>
  <li><a href="nav.html">Menu 5</a></li>
  <li><a href="nav.html">Menu 6</a></li>
  <li><a href="nav.html">Menu 7</a></li>
  <li><a href="nav.html">Menu 8</a></li>
</ul>
</div>

<div id="section">
<h1>APA ITU MEME? </h1>
<p>
Sejak pertama kali baca dan mendengar kata meme rasa penasaran timbul. Apa sih meme itu..? kok bahasanya kayak gimana gitu..?
</p>

<p>
Jadi, meme menurut yang ane pahami adalah sebuah gambar yang diberi tulisan yang mendukung ekpresi gambar tersebut. Seperti contohnya gambar dibawah ini adalah ekspresi sedang frustasi. Lalu didukung dengan teks “Hari Gini Gak tau Meme! Kemana Aja”. Menggambarkan seseorang yang frustasi mendapati fakta bahwa kamu belum tahu apa itu meme. :)
<p align="left">
<img src="image.png" widht="400" height="400"/>
</p>

</div>
<div id="tengah"></div>
<body bgcolor="green">

<div id="footer">
<marquee>
Copyright &copy; Wancak.com
</div>
</body>
</html>
  • Tetap menyimpa. dengan format file name type (.html)
  • Kemudian ketik kode script baru ini di notepad, dan save dengan file name type (.css). Kali ini saya akan menyimpanya dengan format nama style.
#image 
{
    background-image:url("header.jpg");
padding-left:100px;
height:450px;
}
#header {
    background-color:#B22222;
    color:white;
    text-align:center;
    padding:5px;
padding-left:200px;
}
#nav {
    line-height:30px;
    height:730px;
    width:200px;
    float:left;
padding-top:5px;
}

#kanan {
    line-height:30px;
    height:300px;
    width:200px;
    float:right;
padding-top:5px;
}


#section {
    width:350px;
    float:left;
    padding:50px; 
}
#footer {
    background-color:#B22222;
    color:white;
    text-align:center;
    padding:5px;
clear:both;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #20B2AA;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

#garis {
width: 200px;
float:left;
background-color:#20B2AA;
text-transform: uppercase;
}

  • Dan akan terlihat seperti ini

  • Dan Hasilnya akan seperti ini

Selamat berkreasi dengan Web anda.

Kamis, 21 Mei 2015

Cara Membuat Tampilan Dasar Web Dengan Bahasa HTML - Part 2

Membuat Tampilan Dasar Web Dengan Bahasa HTML [ Tahap Lanjutan ]


Hello! Hello !
Yap. . .Comeback again with me, kali ini saya kembali dengan tema yang sama hanya saja kali ini akan memberikan informasi tahap lanjutan dari pembuatan web dengan bahasa HTML. Yang mana lanjutan dari pos membuat tampila dasar web dengan bahasa HTML - Part 1.  Ok berikut ini ulasannya.
  • Cukup ketik kode script berikut ini

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Image.html">Image</a></li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href="Naruto.html">Naruto</a></li>
<li><a href="Sasuke.html">Sasuke</a></li>
<li><a href="Sakura.html">Sakura</a></li>
<li><a href="Kakashi.html">Kakashi</a></li>
</ul>
</div>

<div id="section">
<h1>Anime Naruto</h1>
<p>
Naruto (???) adalah sebuah serial manga karya Masashi Kishimoto yang diadaptasi menjadi serial anime. Manga Naruto bercerita seputar kehidupan tokoh utamanya, Naruto Uzumaki, seorang ninja yang berisik, hiperaktif, dan ambisius yang ingin mewujudkan keinginannya untuk mendapatkan gelar Hokage, pemimpin dan ninja terkuat di desanya. Serial ini didasarkan pada komik one-shot oleh Kishimoto yang diterbitkan dalam edisi Akamaru Jump pada Agustus 1997.
</p>
<p>
Manga Naruto pertama kali diterbitkan di Jepang oleh Shueisha pada tahun 1999 dalam edisi ke-43 majalah Shonen Jump. Di Indonesia, manga ini diterbitkan oleh Elex Media Komputindo. Popularitas dan panjang seri Naruto sendiri (terutama di Jepang) menyaingi Dragon Ball karya Akira Toriyama, sedangkan serial anime Naruto, diproduksi oleh Studio Pierrot dan Aniplex, disiarkan secara perdana di Jepang oleh jaringan TV Tokyo dan juga oleh jaringan televisi satelit khusus anime, seperti Animax dan stasiun televisi lainnya, pada 3 Oktober 2002 sampai sekarang. Seri pertama terdiri atas 9 musim dan berlangsung 220 episode. Musim pertama dari seri kedua mulai ditayangkan pada tanggal 15 Februari 2007. Di Indonesia sendiri, anime Naruto pernah ditayangkan oleh stasiun televisi Trans TV, yang kemudian ditayangkan lebih lanjut oleh Global TV.
</p>
</div>

<div id ="footer">
<marquee>
Copyright © Naruichigo.co.id </marquee>
</div>
</body>
</html>


  • Simpan di folder baru dengan file name type (.html) lagi
  • Tahap selanjutnya adalah kita akan bermain atau mengedit  letak gambar, warna, ukuran tampilan, dll. Dengan cukup mengetik kode script ini di Notepad


#image
{
background-image:url("images.jpg");
padding-left:100px;
height:165px;
}
#header {
background-color:#B22222;
color:red;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:300px;
width:150px;
float:left;
padding:5px;
}
#section{
width:670px;
float:left;
padding:10px;
}
#footer {
background-color:#20B2AA;
color:red;
clear:both;
text-align:center;
padding:5px;
}

ul{
list-style-type: none;
margin: 0;
padding:0;
overflow: hidden;
}

li{
float: left;
}

a:link, a:visited{
display: block;
width: 120px;
font-weight: bold;
color: #DEB887;
background-color:#CD5C5C;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: #FFF8DC;

  • Kali ini simpan dengan file name type (.cssCascade Style Sheet
  • Dan hasilnya sebagai berikut 


Semoga bermanfaaat, terimah kasih atas kunjunngannya.

Rabu, 20 Mei 2015

Cara Membuat Tampilan Dasar Web Dengan Bahasa HTML - Part 1

Membuat Tampilan Dasar Web Dengan Bahasa HTML


Hallo Pembaca Blogger !
Kembali lagi dengan saya, setelah sebelumnya saya memposting Cara Membuat Tabel Dengan HTML, kali ini saya juga akan kembali menggunakan bahasa HTML dengan Cara Membuat Tampilan Dasar Web Dengan HTML. Langsung aja. . Cekidottt !
  • Buka aplikasi Notepad atau Notepad++, yang mana anda sukai
  • Dan Ketiklah kembali contoh kode script ini

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:red;
    color:black;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:40px;
    background-color:#777777;
    height:400px;
    width:200px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:green;
    color:yellow;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>
</head>
<body>
<div id="header">
<h1>Sungai Di Indonesia</h2>
</div>
<div id="nav">
<a href="Kapuas.html"style="text decoraton:none" target=blan>Kapuas.</a><br>
<a href="Mahakam.html"style="text decoraton:none" target=blan>Mahakam.</a><br>
<a href="Barito.html"style="text decoraton:none" target=blan>Barito.</a><br>
<a href="BatangHari.html"style="text decoraton:none" target=blan>BatangHari.</a><br>
<a href="Musi.html"style="text decoraton:none" target=blan>Musi.</a><br>
</div>
<div id="section">
<h1>Daftar Sungai Terpanjang Di Indonesia</h1>
<p><b>
Indonesia adalah negara di Asia Tenggara, yang dilintasi garis khatulistiwa dan berada di antara benua Asia dan Australia serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 13.487 pulau,oleh karena itu ia disebut juga sebagai Nusantara ("pulau luar")
</p>
<p><b>
Kenampakan alam indonesia  sangat beragam dan sangat mengagumkan. Salah satu kenampakan alam yang banyak terdapat di Indonesia adalah sungai. Keberadaan sungai menjadi sangat penting bagi kehidupan bahkan sampai sekarang. Berikut kami membahas daftar sungai terpanjang di indonesia.
</p>
</div>
<div id="footer">
Copyright © SiapaSuruhKuliah.co.id
</div>
</body>
</html>

Diatas saya membahas tentang beberapa sungai terpanjang disungai.
  • Kemudian simpan di folder baru dengan nama sesuka anda file type (.html) dan akan terlihat seperti ini
  • Jika anda ingin menambahkan background dengan gambar, cukup dengan memasukkan gambar dengan nama (contoh:gedung.jpg) di dalam satu folder dan hanya perlu mengetik  di sricpt bagian terakhir <body bg background="gedung.jpg"> .

Copyright © SiapaSuruhKuliah.co.id
</div>
<body bg background="gedung.jpg">
</body>
</html>

Cukup mudah juga bukan, setelah ini saya akan memposting bagaimana tahap lanjutan dalam membuat Web dengan HTML sehinnga anda bisa mengembanggkannya.
tunggu saja postingan saya berikutnya. :D