Sebelumnya kita telah belajar dasar PHP sekarang kita akan mempelajari database-nya PHP yakni MYSQL. Kita akan menggunakan fasilitas pada xampp yang telah kita instal pada pelajaran PHP yaitu phpMyAdmin.

Baik sekarang kita kita buka browser tuliskan http://localhost/phpmyadmin/. Sekarang kita akan membuat sebuah database. Tuliskan nama database (ex. custumer) pada “create new database” kemudian tekan tombol create. Perhatikan gambar berikut:

Kemudian akan muncul jendela untuk membuat tabel dalam hal ini kita akan mengisikan pada tabel yang akan kita buat akan ada berapa kolom.

Perlu diketahui penulisan nama database, tabel dan kolom tidak boleh ada spasi. Berikut beberapa tipe data dalam MySQL yang sering dipakai:

Baik misalnya pada database custumer, akan kita buat tabel “data_custumer” dengan kolom sbb:

Pada broser akan kita tampak sbb:

Kemudian tekan tombol go, akan tampak tampilan untuk mengisikan kolom setiap kolom akan kita isikan sesuai dengan kebutuhan tabel yang kita buat diatas seperti ini:

Kemudian tekan tombol save. Nah sudah jadi data base anda. Hasilnya anda mempunyai database custumer dengan tabel data_custumer.

Nah sekarang kita akan mencoba memasukkan data pada tabel tekon tombol insert kemudian masukkan data yang akan kita masukkan pada kolom value. Misalnya

Nomor 1

Nama Luna

Email lunaart_213@yahoo.com

Alamat Indonesia

NoTelp +628000000

Kemudia tekan tombol go maka data yang anda masukkan akan tersimpan, tambahkan terus data anda. Kemudian anda tekan tombol browse maka data yang anda masukkan tadi akan tampil dalam bentuk tabel sbb:

Untuk menghapusnya anda tinggal tekan tanda silang dan untuk mengeditnya anda tekan tanda pensil. Gampangkan!..

Catatan:

Perhatikan query yang digunakan nanti pada saat kita menggunakan PHP dengan database MYSQL akan sangat membantu.

Segini dulu akan saya lanjutkan nanti dengan topik menghubungkan PHP dengan MYSQL.

Setelah paham program HTML sekarang kita akan lanjutkan dengan program web lainnya yaitu PHP, berikutnya akan saya jelaskan yang lainnya (ya kalau saya bisa, maklum saya juga sedang belajar)

PHP apaan tuh?

PHP atau bahasa sulitnya adalah HyperText Preprocessor awalnya PHP adalah Personal Homepage. PHP Merupakan bahasa pemrograman yang biasanya ditulis bersama kode HTML. Kode-kode pada PHP mempunyai kemampuan yang sangat fantastis (itu menurut saya) menjalankan perintah database, membuat gambar, membaca dan menulis file serta masih banyak lainnya. Program ini dapat berjalan disemua platform sistem operasi mulai dari windows, Linux, Unix sampai Mac.

Sebelumnya Perintah/kode PHP hanya dapat dieksekusi/dijalankan jika sudah terinstal aplikasi webserver (Apache, Microsoft IIS, iPlanet, dll). Dalam latihan ini kita akan menggunakan Apache sebagai webservernya.

Ada langkah termudah dalam menginstal PHP dan webserver (Apache), sudah ada program yang dipaket seperti Xampp, Appserv dan Apache2triad. Kali ini saya menggunakan Xampp, paket instalasinya sudah mencakup apache, php, dan mysql sebagai database.

Proses instalasinya gampang tinggal next dan ok (perhatikan dan baca! saya tidak menjelaskannya mungkin nanti saya akan bahas tersendiri, maaf ya!).

Nah kalau sudah, kita mulai dengan kode-kodenya OK!

Kode PHP

Kode PHP dimulai dengan tanda “<?” atau “<?php” dan diakhiri dengan “?>”. baik mari kita coba

Latihan 1

<?php

echo(“belajar PHP test .. !”);

?>

Kemudian simpan dengan nama latihan1.php pada folder dimana program xampp diinstall contoh

C:\Program Files\Xampp\htdocs /testPHP/latihan1.php. dimana folder htdocs merupakan public servernya (kalo nggak salah!). Untuk mencobanya buka browser dan ketikkan alamat ini http://localhost/testphp/latihan1.php

Hasilnya akan seperti ini

Nah sudah bisakan! Kode di atas dapat dituliskan dengan notepad atau aplikasi web lainnya.

Ok! Ada kode “echo” ini digunakan perintah untuk menampilkan pada browser seperti yang anda lihat hasilnya tulisan yang berada dalam tanda “(….)” dan untuk setiap perintahnya diakhiri dengan tanda “;”.

Kita lanjutkan! Anda dapat memadukan kode PHP di dalam kode HTML dengan penulisan sbb:

Latihan 2

<html>

<head>

<title>Latihan 1</title>

</head>

<body>

<?php

echo(“belajar PHP test .. !”);

?>

</body>

</html>

Simpan dengan nama latihan2.php ingat simpan dalam format PHP anda tidak dapat menyimpannya dalam format HTML. Hasilnya juga akan sama seperti gambar di atas.

Variabel

Variabel merupakan definisi sebuah nilai yang merupakan tempat menyimpan data yang bersifat sementara. Dalam PHP penulisan nama variabel diawali tanda dollar ($). Pemberian nama bebas harus berupa angka dan huruf tapi tidak boleh ada spasi atau karakter lainnya. Misalnya nama variabel satu dalam PHP ditulis dengan $satu. Mari kita coba,

Latihan 3

<?php

$satu=”5″;

$dua=”2″;

$jumlah=$satu+$dua;

echo(“Jumlah dari $satu + $dua adalah $jumlah“);

?>

 
Simpan dengan nama latihan3.php dan jalankan pada browser seperti langkah sebelumnya.
Hasilnya akan seperti berikut :
 



Perhatikan kode yang dituliskan (dengan warna) dengan yang dihasilkan…. Nah sudah pahamkan. 
Baik sekarang coba kode berikut :
 
Latihan 4

<?php

$id="001";

$nama="Luna Art";

$alamat="Indonesia";

$notelp="+62888888888";

echo("Nomor: $id </br> Nama Lengkap: $nama </br> Alamat: $alamat </br> Nomor Telepon: $notelp");

?>
 
Jalankan pada browser perhatikan. Selanjutnya cobalah bereksperimen dengan gonta-ganti atau menambahkan variabel supaya anda lebih memahaminya. 
 
 
Kendali 
 
Kendali atau kontrol dalam php ada dengan menggunakan perintah IF, WHILE, FOR dll, seperti pada bahasa program lainnya.
 
Kontrol IF
Perintah IF digunakan untuk mengeksekusi suatu pernyataan bersyarat dan jika syaratnya lebih dari satu perintah IF dilanjutkan dengan perintah ELSE dan kemudian ELSEIF.
Cara penulisannya sbb:
                    If (syarat) { Pernyataan }
                    Else { Pernyataan lain }
Atau
                    If (syarat pertama) { Pernyataan pertama }
                    Elseif (syarat kedua) { Pernyataan kedua }
                    Else { Pernyataan lain }
 
Masri kita coba
 
Latihan 5
                    <?php

$var1="15";

$var2="25";

if ($var1>$var2)

{

echo("Angka $var1 lebih besar dari pada Angka $var2");

}

elseif ($var1<$var2)

{

echo("Angka $var1 lebih kecil Angka $var2");

}

else

{

echo("Angka $var1 sama dengan Angka $var2");

}

?>
 
Nah bagaimana hasilnya



Coba anda ganti angka-angka pada variabelnya untuk membuktikan pernyataan-pernyataan yang anda buat.
 
Kontrol WHILE
While digunakan untuk memberikan perintah pengulangan dengan jumlah pengulangan yang ditentukan . penulisannya sbb:
While (ketentuan pengulangan) { pernyataan yang diulang }
Berikut contoh penggunaannya
 
Latihan 6

<?php

$var1=A;

while ($var1<=G)

{

echo("Huruf <b>$var1</b> </br>");

$var1++;

}

?>
 
Hasilnya akan terlihar seperti ini 



 
Coba anda ganti variabelnya dengan yang lain dan perhatikan hasilnya, sudah mengertikan maksudnya. 
Sebagai catatan tanda “++” untuk autoincrement  dan “—“ autodecrement.
 
Kontrol FOR

FOR kita gunakan untuk mengulang perintah yang jumlah pengulangan sudah diketahui. Penulisan kodenya seperti ini:

for ( variable awal; ekspresi; variabel ++/-- )
{
printah yang akan dijalankan
}

 
mari kita coba modifikasi latihan 6 dengan menggunakan kode FOR 
 
Latihan 7

<?php

for ($var1=A;$var1<=G;$var1++)

{

echo("Huruf <b>$var1</b> <br>");

}

?>
 
Hasilnya akan sama persis dengan latihan 6
 
Kontrol SWITCH
SWITCH  digunakan untuk membandingkan variabel dengan beberapa nilai serta menjalakan pernyataan tertentu. Dan juga dapat digunakan sebagai alternatif dari perintah IF.
Berikut contoh programnya
 
Latihan 8

<?

$var1=genap;

switch ( $var1 )

{

case "genap":

echo ("Variabel ini adalah bilangan GENAP");

break;

case "ganjil":

echo ("variabel ini adalah bilangan GANJIL");

break;

default:

echo ("variabel ini bukan merupakan bilangan GENAP ataupun GANJIL tapi $var1");

}

?>

Fungsi

Fungsi kumpulan kode yang dapat kita panggil kembali dan dijalankan. Tujuannya adalah untuk memudahkan pembacaan program dan memudahkan kita dalam penulisan kode sehingga kita tidak perlu menulis kode yang sama berkali-kali. misalkan ada kode PHP seperti ini:

<?php

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

?>

Terlalu repot bukan? Kita dapat mempersingkatnya dengan memanfaatkan perintah fungsi kode nya menjadi sbb:

Latihan 9

<?php

function fungsinama(){

$var1=Luna;

$var2=Art;

$nama=(“<b>$var1 $var2</b>”);

echo (“Nama saya adalah $nama<br>”);

}

fungsinama();

fungsinama();

fungsinama();

fungsinama();

fungsinama();

?>

Hasilnya akan seperti ini

Perhatikan, cermati kode yang dituliskan dengan hasil tampilan pada browser. Ok selanjutnya kita juga dapat menuliskan fungsi dengan variabel yang berbeda-beda. Berikut contohnya

Latihan 10

<?php

function fungsinama($var1,$var2,$var3){

$nama=(“<b>$var1 $var2 $var3</b>”);

echo (“Nama saya adalah $nama<br>”);

}

fungsinama(Luna,Art,’001′);

fungsinama(Luna,Art,’003′);

fungsinama(Luna,Art,’005′);

fungsinama(Luna,Art,’007′);

fungsinama(Luna,Art,’009′);

?>

Hasilnya akan menjadi

REQUIRE

REQUIRE digunakan untuk membaca isi dari file lain. Kode ini tidak dapat melakukan pengulangan dengan menggunakan perintah FOR maupun WHILE. Cara penulisan REQUIRE adalah:

require(namafile);

berikut kita akan mencoba mengambil variabel nama dari file latihan12.php, kodenya sbb:

Latihan 12

<?php

$var1=”file ini diambil dari latihan12.php”;

function fungsireq($teks)

{

echo(“<b>$teks</b>”);

}

?>

Kemudian buat satu lagi file untuk membacanya dengan kode sbb:

Latihan 13

<?php

require(“latihan12.php”);

fungsireq(“ini adalah fungsi require”);

echo(“<br>”);

echo($var1);

?>

Jalankan file latihan 13 pada browser, hasilnya akan menjadi seperti ini:

INCLUDE

INCLUDE hampir sama yaitu membaca isi file yang ditentukan bedanya perintah INCLUDE dapat melakukan looping/pengulangan dengan menggunakan FOR atau WHILE.

Jadi seperti di atas kita membutuhkan dua file untuk kode file pertama sbb:

Latihan 14

<?php

echo(“<hr>”);

echo(“Ini adalah perintah INCLUDE dari latihan14.php dengan pengulangan<br>”);

echo(“<hr>”);

echo(“<br>”);

?>

File kedua dengan kode sbb:

Latihan 15

<?php

for ($var1=1; $var1<=5; $var1++)

{

include(“latihan14.php”);

}

?>

Setelah selesai jalankan file latihan 14 pada browser dan perhatikan, kemudian jalankan file latihan 15 bandingkan apa yang terjadi akan terlihat pengulangan sampai dengan lima kali, berikut hasilnya:

Ok, baiklah saya lanjutkan dengan pembuatan form

Forms

PHP seperti yang telah dijelakan diawal dapat dimasukkan dalam perintah HTML dan menerima informasi dari form HTML. Sekarang kita akan membuat sebuah form sederhana dengan kode sbb

Latihan 18

<html>

<head>

<title>Membuat FORM</title>

</head>

<body>

<h2>Latihan membuat FORM </h2>

<hr />

NAMA : <input type=text name=nama size=”25″ /> <br />

ALAMAT : <input type=text name=”alamat” size=”30″ /> <br />

NOMOR TELPON : <input type=text name=”notelp” size=”30″ /> <br/>

TULIS PESAN : <textarea name=”pesan” cols=”30″ rows=”5″></textarea>

<hr />

</body>

</html>

Simpan kemudian coba di jalankan pada browser, hasilnya terlihat berantakan sekali, saya coba cari-cari cara merapikannya akhirnya saya coba dengan menggunakan tabel hasilnya jadi ok tuh! Kodenya saya bikin jadi seperti ini:

<html >

<head>

<title>Membuat FORM</title>

<style type=”text/css”>

<!–

.style7 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; }

–>

</style>

</head>

<body>

<h2>Latihan membuat FORM </h2>

<hr />

<table border=”0″ width=”40%”>

<tr>

<td valign=”top”><span class=”style7″> NAMA </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <input type=text name=nama size=”35″ /> <br /> </td>

</tr>

<tr>

<td valign=”top”><span class=”style7″> ALAMAT</span></td>

<td valign=”top”><span class=”style7″>: </span></td>

<td><input type=text name=”alamat” size=”35″ /> </td>

</tr>

<tr>

<td valign=”top”><span class=”style7″> NOMOR TELPON </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <input type=text name=”notelp” size=”35″ /> </td>

<tr>

<td valign=”top”><span class=”style7″> TULIS PESAN </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <textarea name=”pesan” cols=”26″ rows=”5″></textarea> </td>

</tr>

</table>

<hr />

</body>

</html>

Hasilnya akan lebih rapi jadi seperti ini :

Nah sudah OK bukan!

Sekarang kita coba memasukkan kata yang kita buat pada latihan form kemudian ditangkap dengan file lainnya (bingung ya! Hmm…) atau begini gampangnya data yang kita masukkan pada form kemudian diteruskan pada halaman berikutnya, hal ini dilakukan dengan metode POST. Ada dua file yang pertama berisikan form dan file yang kedua halaman yang meneruskannya, berikut kodenya:

Latihan 19a

<html >

<head>

<title>Membuat FORM</title>

<style type=”text/css”>

<!–

.style7 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; }

–>

</style>

</head>

<body>

<form action=latihan19.php method= POST>

<h2>Latihan membuat FORM </h2>

<hr />

<table border=”0″ width=”40%”>

<tr>

<td valign=”top”><span class=”style7″> NAMA </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <input type=text name=”nama” size=”35″ /> <br /> </td>

</tr>

<tr>

<td valign=”top”><span class=”style7″> ALAMAT</span></td>

<td valign=”top”><span class=”style7″>: </span></td>

<td><input type=text name=”alamat” size=”35″ /> </td>

</tr>

<tr>

<td valign=”top”><span class=”style7″> NOMOR TELPON </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <input type=text name=”notelp” size=”35″ /> </td>

<tr>

<td valign=”top”><span class=”style7″> TULIS PESAN </span></td>

<td valign=”top”><span class=”style7″> : </span></td>

<td> <textarea name=”pesan” cols=”26″ rows=”5″></textarea> </td>

</tr>

</table>

<hr />

<table width=”40%”>

<tr>

<td><table width=”40%” border=”0″>

<tr>

<td width=”85%” align=”left”><input type=”submit” name=”submit” value=”kirimkan” />

<input type=”reset” name=”Reset” value=”kosongkan” /></td>

</tr>

</table

</body>

</html>

Latihan 19b

<html>

<head>

<title>Tangkap FORM</title>

</head>

<body>

<?php

$nama= $_POST["nama"];

$alamat= $_POST["alamat"];

$notelp= $_POST["notelp"];

$pesan= $_POST["pesan"];

echo(“Nama Anda : $nama <br/>”);

echo(“Anda beralamatkan di : $alamat<br/>”);

echo(“No Kontak : $notelp<br/>”);

echo(“Pesan Anda : $pesan<br/>”);

?>

</body>

</html>

Sekarang coba jalankan file latihan9a.php kemudian isikan dan tekan kirim hasilnya akan seperti ini.

Sampai disini dulu nanti akan saya lanjutkan mengenai PHP dengan database menggunakan MYSQL. Selamat mencoba!…

Bagian 3

Membuat Bullet dan Numbering

Untuk membuat bullet kita menggunakan tag <ul> </ul> sedangkan untuk membuat numbering <ol> </ol> berikut contoh kodenya

Latihan 1

<html>
   <head>
      <title> membuat bullet dan numbering </title>
   </head>

   <body>
      <h2 style="background-color:yellow;"> ini adalah contoh bullet </h2>
      <ul>
      <li> tulisan-tulisan </li>
      <li> tulisan-tulisan </li>
      <li> tulisan-tulisan </li>
      </ul>
<br/>
      <h2 style="background-color:orange;">ini adalah contoh numbering </h2>
      <ol>
      <li> tulisan-tulisan satu</li>
      <li> tulisan-tulisan dua </li>
      <li> tulisan-tulisan tiga </li>
      </ol>
   </body>

</html>

Simpan dengan format html dan jalankan dengan browser, hasilnya akan seperti ini

Membuat tabel dan variasinya

Tabel pada web sering dijumpai pada halaman web. Untuk membuat table kita menggunakan tag <table> </table> sebagai tag induk <tr> </tr> untuk membuat baris dan <td> </td> untuk pembuatan kolom. Mari kita lakukan percobaan

Latihan 2

<html>

<head>

<title> membuat kolom dan variasinya </title>

<head>

<body>

<h2 style=”background-color:blue;”>ini adalah contoh tabel 1 kolom 2 baris tanpa border</h2>

<table>

<tr>

<td> kolom 1 baris 1 </td>

<td> kolom 1 baris 2 </td>

</tr>

</table>

<h2 style=”background-color:yellow;”>ini adalah contoh tabel 2 kolom 2 baris dengan border 1pt</h2>

<table border=1>

<tr>

<td> kolom 1 baris 1 </td>

<td> kolom 1 baris 2 </td>

</tr>

<tr>

<td> kolom 2 baris 1 </td>

<td> kolom 2 baris 2 </td>

</tr>

</table>

<h2 style=”background-color:orange;”>ini adalah contoh tabel custom dengan border 5pt</h2>

<table border=5>

<tr>

<td colspan=”3″>kolom 1 baris 1</td>

</tr>

<tr>

<td> kolom 2 baris 1 </td>

<td> kolom 2 baris 2 </td>

<td> kolom 2 baris 3 </td>

</tr>

</table>

<h2 style=”background-color:orange;”>ini adalah contoh tabel custom dengan border 25pt</h2>

<table border=25>

<tr>

<td> kolom 2 baris 1 </td>

<td> kolom 2 baris 2 </td>

<td> kolom 2 baris 3 </td>

</tr>

<tr>

<td colspan=”3″>kolom 1 baris 1</td>

</tr>

</table>

<h2 style=”background-color:red;”>ini adalah contoh tabel custom dengan border 2pt</h2>

<table border=2>

<tr>

<td rowspan=”3″>kolom 1 baris 1</td>

<td> kolom 2 baris 1 </td>

</tr>

<td> kolom 2 baris 2 </td>

<tr>

</tr>

<td> kolom 2 baris 3 </td>

</table>

</body>

</html>

Simpan dan jalankan pada browser hasilnya akan seperti ini

Coba perhatikan, sudah mengertikan sebagai tambahan untuk custom tabel ada perinta “colspan” dan “rowspan”. Colspan untuk menggabung colom sedang rowspan untuk menggabungkan baris perintahnya diiring dengan tambahan =”n” n merupakan jumlah kolom atau baris yang akan digabungkan.

Nah silahkan dicoba, improvisasi dan kembangkan ide anda sendiri. Selamat mencoba!

Nanti akan saya lanjutkan lagi

Bagian 2

Pewarnaan

Setelah berhasil membuat file HTML pertama, kemudian kita akan mencoba menambahkan kode/tag yang lain yang pernah disampaikan sebelumnya. Seperti yang telah dijelaskan sebelumnya pada HTML ada tiga bagian tag pokok yaitu: <html> </html> ; <head> </head> ; <body> </body>.

Nah tag selanjutnya akan kita tempatkan pada bagian <body> </body>

Latihan 1

Buat tag sebagai berikut pada notepad

<html>

<head>

<title>Judul halaman web</title>

</head>

<body style="background-color:#ffff00;">

<h1 style="background-color:#ff0000;">Judul yang diberi blok warna dengan color # ffff00</h1>

<hr/>

<p>Ini adalah isi dari judul<br/>

</p>

<br/>

<h2 style ="background-color:red;”>Sub Judul yang diberi blok warna dengan color red</h2>

<p> Ini adalah isi dari sub judul </p>

</body>

</html>

Setelah selesai simpan dengan latihan1.html (jagan lupa memberi .html) kemudian jalankan pada browser, mari kita terjemahkan

Nah dari hasil tampilan pada browser kesimpulannya bahwa background dan blok judul dapat diwarnai dengan menambahkan perintah … style ="background-color:#ffff00;” atau … style ="background-color:red;”> berikut daftar beberapa tabel warna :

black	#000000	blue	#0000FF
white	#FFFFFF	green	#008000
red	#FF0000	gray	#808080
yellow	#FFFF00	purple	#800080

Silahkan anda mencoba mengutak-atik warna diatas, ada banyak lagi kode-kode warna yang nanti akan saya terangkan.

Tag untuk huruf/font

Seperti yang kita ketahui huruf pada program pengolah kata (misalnya microsoft word) dapat dibuat menjadi tebal miring garis bawah tebalmiring dan juga ukuran. Nah bagaimana menuliskan tag htmlnya.

Latihan 2

Masukkan kode-kode di bawah ini

<html>

<head>

<title> kode html untuk huruf </title>

</head>

<body>

<h2 style =”background-color:yellow;”> Gaya pada huruf / Font style </h2>

<p> ini huruf yang normal </p>

<p><b> ini huruf yang tebal </b></p>

<p> <i>ini huruf yang miring</i></p>

<p> <b><i>ini huruf yang tebalmiring </b><i/></p>

<p> <u>ini huruf yang bergaris bawah</u></p>

</body>

</html>

Coba jalankan pada browser

dari hasil ini terlihat bahwa kode untuk membuat tulisan tebal (bold) <b> </b> miring (italic) <i> </i> garis bawah (underline) <u> </u>.

Tag untuk judul

Oh ya ada yang terlewat ada kode untuk judul <h1> </h1>. Untuk tag ini setahu saya unutk tag “h” itu adalah “h1, h2, h3, h4, h5, h6”. Perbedaannya pada ukuran karena h1 adalah judul h2 sub judul h3 adalah sub-sub judul dan seterusnya.

Latihan 3

Mari kita coba dengan kode-kode di bawah ini

<html>

<head>

<title> kode html untuk judul </title>

</head>

<body>

<h1> untuk style judul h1 </h1>

<h2> untuk style judul h2 </h2>

<h3> untuk style judul h3 </h3>

<h4> untuk style judul h4 </h4>

<h5> untuk style judul h5 </h5>

<h6> untuk style judul h6 </h6>

</body>

</html>

Coba jalankan pada browser

Nah sampai disini dulu, tunggu yang berikutnya ya!

Kalau ada yang salah mohon koreksinya, kalau ada yang kurang mohon tambahannya.

Bagian 1

Apa itu HTML ? HTML (Hypertext Markup Language) adalah “bahasa program” yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser.

Program ini berikan kode-kode yang dikenal tag yang kemudian disimpan menjadi dokumen HTML (file *.htm atau *.html). sedangkan Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa seperti notepad.

Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYG seperti Microsoft FrontPage, Dreamweaver, Bluevoda dan masih banyak lagi, akan tetapi untuk mengoptimalkan fasilitas dari program WYSIWYG sangat disarankan, agar anda mengerti bahasa HTML.

Kode-kode pada HTML

Setiap kode atau tag dalam html dimulai dengan tanda “<” dan diakhiri dengan “>”. Dan Secara umum ada dua macam tag, yaitu tags pembuka seperti <html> dan tags penutup </html>. Ada banyak tag yang digunakan dalam membuat sebuah website, berikut beberapa contoh tag yang umum digunakan.

<title>nama website</title> ,untuk membuat nama website
<h1>ini adalah judul</h1> ,untuk membuat judul
<h2>ini adalah sub judul</h2> ,untuk membuat sub judul
<p>ini adalah paragraf</p> ,untuk membuat sebuah paragraf
<hr /> ,Digunakan untuk membuat garis
<body style="background-color:#ff0000;"> ,untuk memberi warna background
<h2 style="background-color:#ff0000;">judul</h2> ,untuk memberi blok warna pada judul
<a href="http://www.de2design.wordpress.com/">ini adalah link http://www.de2design.wordpress.com </a> ,Digunakan untuk membuat link web
<img src="images/logo.gif" /> ,untk memasukkan file gambar (image)
 
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
Perintah – perintah Membuat table

Dan masih banyak lagi tag-tag yang digunakan. Pada bahasan berikut akan saya tambahkan berikut cara penempatannya.

Baiklah sekarang kita coba mulai membuat web dengan HTML.

Buka teks editor (notepad) tuliskan script berikut

<html>
   <head>
      <title> coba-coba </title>
   </head>
   <body>
      <h1> percobaan </h1>
      <p> ini adalah percobaan website pertamaku </p>
   </body>
</html>

Kemudian simpan dengan nama coba.html (ingat jangan lupa memberikan .html) kemudian coba jalankan dibroser anda, perhatikan

Dalam HTML ada tiga bagian tag pokok yaitu: <html> </html> ; <head> </head> ; <body> </body>.

<html> </html> adalah penanda bahasa program kita gunakan adalah html

<head> </head> adalah tempat tag judul website kita, sedangkan

<body> </body> adalah tempat kita mengisi data tulisan, tabel, gambar dan lain-lain

Sampai di sini dulu nanti dilanjutkan lagi, mungkin ada bahasan yang salah mohon dikoreksi atau ada yang kurang mohon ditambahkan, karena saya saat ini juga masih baru dengan yang namanya website. Terimakasih