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.

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

Cara Membuat Tabel Dengan Menggunakan Bahasa HTML

Cara Membuat Tabel Dengan Menggunakan Bahasa HTML



Salam Jumpa Lagi Pembaca !
Sebelumnya saya telah memposting artikel menegenai pengenalan bahasa html dan sedikit latihan dasar bahasa HTML. Kali ini saya akan juga sedikit berbagi pengetahuan yang merupakan salah satu tugas di kampus saya mengenai membuat tabel dengan menggunakan bahasa HTML. Gak usah basa basi lagi berikut infonya.

  • Bukalah Notepad atau Notepad++  di laptop anda
  • Kemudian ketiklah contoh script berikut (Kali ini saya mencontohkan tabel mahasiswa)
<html>
<head>
<title>Tugas Pemrograman Latihan2</title>
</head>
<h1><center>Algoritma & Pemrograman 2 </h2>
<p> Oleh : Filza Juliansyah </p>
<p>Kelas : IIB</p>
<p>Jurusan : Teknik Informatika</p>
<center><table border="1">
<tr>
<td>NO.</td>
<td><center>NPM</td>
<td><center>NAMA</td>
<td><center>JURUSAN</td>
<col style="background-color:red">
</tr>
<tr> <td><center>1</td>
<td>1410128262053</td>
<td>Eka Pratama Saputra</td>
<td>Teknik Informatika</td>
<col style="background-color:red">
</tr>
<tr> <td><center>2</td>
<td>1410128252054</td>
<td>Nur Fharid</td>
<td>Teknik Informatika</td>
<col style="background-color:red">
</tr>
<tr> <td><center>3</td>
<td>1410128262055</td>
<td>Abdul Jalal</td>
<td>Teknik Informatika</td>
<col style="background-color:red">
</tr>
<tr> <td><center>4</td>
<td>1410128262056</td>
<td>Khaidar Salman</td>
<td>Teknik Informatika</td>
<col style="background-color:red">
</tr>
<tr> <td><center>5</td>
<td>14101282620</td>
<td>Monika Racham Marantika
<td>Teknik Informatika</td>
<col style="background-color:red">
</tr>
<tr>
</table>
<body bg background="Juliansyah.jpg">
</body>
</html>
  • Setelah selesai membuat script  tersebut, kemudian Save dengan File name sesuka anda dengan menambahkan ( .html ) dibelakangnnya. Dengan Save as type ( All files )


  • Kemudian buka dengan browser favorit anda dan Hasilnya akan terlihat seperti ini.
  • Jika anda ingin menambahkan Background agar terlihat lebih menarik, masukkan gambar sesuai keinginan anda didalam satu folder

  • Dan ketik kode script ini  <body bg background="Juliansyah.jpg">  dibagian sricpt terkhir antara </table dan </body.

    </table>
    <body bg background="Juliansyah.jpg">
    </body>
    </html>
  • Lalu refresh url browser anda, kemudian akan terlihat seperti ini.

Mudah bukan, semoga informasi ini bermanfaat untuk anda dan selamat berkreasi dengan hasil kerja kalian.

Belajar Bahasa HTML Dasar

Belajar Bahasa HTML Dasar



Hallo para pembaca ! kali ini saya akan memberikan informasi bagi para pemula yang belum mengenal apa itu HTML. Baiklah berikut ini beberapa ulasannya.
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web.mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah  sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat. 
Mendesain HTML dapat dilakukan dengan dua cara:

  1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
  2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
Kedua cara diatas memiliki Kelebihan dan kekurangan. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

Struktur Dasar Dokumen HTML

Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY. Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:


<HTML> 
<HEAD> 
Deskrisi dokumen 
</HEAD> 
<BODY> 
Isi dokumen 
</BODY> 
</HTML>


Contoh aplikasinya


Buatlah scrips teks seperti dibawah ini dengan menggunakan NotePad dan simpan filenya dengan nama latihan1.html

<HTML> 
<HEAD> 
<TITLE>Belajar Dasar-Dasar HTML</TITLE> 
</HEAD> 
<BODY> 
Pelajaran Pertama saya mengenai pemerograman HTML, Ternyata Belajar HTML itu sangat mudah dan mengasyikan</BODY> 
</HTML>

Keterangan:

  • Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan.
  • <BODY>  adalah isi dokumen yang akan ditampilkan dibrowser Anda
Untuk melihat hasilnya, silakan jalankan browser favorit Anda, dengan cara membuka file latihan1.html yang sudah Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan browser Mozila Firefox :

latihan1html

Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.

Referensi Tag HTML

1. Heading

Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.

Sintaks:

<head> 
........... 
</head>

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.

Contoh:

<HTML> 
<HEAD> 
<TITLE>Headings</TITLE> 
</HEAD> 
<BODY> 
<H1>Heading Level 1</H1> 
<H2>Heading Level 2</H2> 
<H3>Heading Level 3</H3> 
<H4>Heading Level 4</H4> 
<H5>Heading Level 5</H5> 
<H6>Heading Level 6</H6> 
</BODY> 
</HTML>

heading1

2. Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:

<HTML> 
<HEAD> 
<TITLE>Paragraf</TITLE> 
</HEAD> 
<BODY> 
<P ALIGN="right"> 
Yang harus Anda sadari adalah mencari uang di internet bukanlah bisnis secara riil, tapi sebenarnya kita berhadapan dengan dunia maya,  yang perlu Anda cermati hanyalah banyak jebakan dalam dunia maya yang begitu cerdas dan banyak situs-situs web bisnis online yang buat Anda ragu berhasil atau gagal untuk menjalaninya, sehingga banyak orang terperdaya, tertipu dan menyia-nyiakan waktu bahkan uangnya dan akhirnya tidak ada hasil sama sekali, salah satu penyebabnya adalah kurangnya pengetahuan yang mendalam tentang skill tekhnis dan strategy untuk sukses bisnis online.                   <P ALIGN="center"> 
Memang, sampai saat ini masih banyak orang tidak percaya bahwa bisnis secara online bisa membuat penggunanya menjadi kaya raya, itu tidak benar, sebab kenyataannya banyak orang menjadikan bisnis online sebagai sumber penghasilannya yang besar, segera ikuti petunjuk-petunjuk yang ada dalam blok saya ini, Anda akan diarahkan bagaimana keberhasilan para interneter  kelas lokal maupun dunia yang membangun kekayaan secara bisnis online, dan rahasianya di kupas tuntas disini dan buktikan sendiri hasilnya, karena blog rahasia bisnis online ini adalah intisari dari ratusan situs web bisnis online dengan menggunakan trik dan strategy ampuh agar Anda bisa  membangun kekayaan secara online .                           <P ALIGN="left"> 
Untuk menjalani bisnis online agar Anda sukses, langkah pertama yang harus Anda lakukan adalah melakukan persiapan. Tahapan ini sangat penting dan Anda harus melakukannya karena dalam artikel ini memberikan Anda bukti keberhasilan bukan saja hanya menambah pengetahuan Anda tentang bagaimana menjalani bisnis online.      </P> 
</BODY> 
</HTML>

Dibawah ini adalah tampilan pada halaman browser dari contoh script diatas :

Paragrafhtml

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut :

a. Tag 
Adalah teks khusus (markup) berupa dua karakter "<" dan ">",  sebagai contoh <body> adalah tag dengan nama body. 
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

b. Element 
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: 
<title> ini adalah tag pembuka judul dokumen HTML 
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML 
</title> ini adalah tag penutup judul dokumen HTML 
Tag-tag yang ditulis secara berpasangan pada suatu element HTML,  tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya. 
Contoh penulisan tag-tag yang benar

<p> 
    <b> 
................ 
    </b> 
</p>

Contoh penulisan tag-tag yang salah

<p> 
    <b> 
................ 
</p> 
</b>

c. Attribute 
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

<TAG> 
   nama-attr="nilai-attr" 
   nama-attr="nilai-attr" 
   ................. 
   ................. 
</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">

d. Element HTML 

Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.

Sintaks:

<html> 
.......... 
</html>

e. Element HEAD 
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.

Sintaks:

<head> 
........... 
</head>

f. Element TITLE 
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.

Sintaks:

<title> 
......... 
</title>

g. Element BODY 
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. 
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.

Sintaks:

<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"> 
.............. 
</body>

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. 
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

 

LATIHAN !

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser favorit Anda

Latihan 1: 
Menampilkan teks: 
                           Belajar bahasa pemrograman web sangatlah mudah:) 
Nama file: latihan1_1.html

<html> 
<head> 
<title>Latihan1-1</title> 
</head> 
<body>  
        Belajar bahasa pemrograman web sangatlah mudah:)                                       </body> 
</html>

Tugas tambahan: 
Gantilah teks tersebut dengan teks sesuai dengan teks yang Anda inginkan. 

Latihan 2: 
Merubah warna teks menjadi merah: 
Belajar bahasa pemrograman web sangatlah mudah

Nama file: latihan1_2.html

<html> 
<head> 
<title>Latihan1-2</title> 
</head> 
<body text="red"> 
        Belajar bahasa pemrograman web sangatlah mudah:)                                      </body> 
</html>

Tugas tambahan: 
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 3: 
Merubah warna background menjadi hitam. 
Nama file: latihan1_3.html

<html> 
<head> 
<title>Latihan1-3</title> 
</head> 
<body text="red" bgcolor="black"> 
        Belajar bahasa pemrograman web sangatlah mudah:)                                     

</body> 
</html>

Tugas tambahan: 
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 4: 
Merubah background dengan suatu gambar. 
Nama file: latihan1_4.html

<html> 
<head> 
<title>Latihan1-4</title> 
</head> 
<body text="red" bgcolor="aqua" background="./images/image027.jpg"> 
       Belajar bahasa pemrograman web sangatlah mudah:)                                       </body> 
</html>

catatan: 
./images/ = nama direktori file gambar disimpan 
image027.jpg = nama file gambar 
Tugas tambahan: 
Cobalah untuk file gambar: image050.jpg, image052.jpg, image058.jpg dan image060.jpg.

Semoga Informasi ini bermanfaat.