BELAJAR PHP UNTUK PARA PEMULA (Bagian 3)
Oke kita lanjut ke bagian 3, setelah pengenalan beberapa materi dan install beberapa software pendukung sekarang kita mulai melakukan script.
Sebelumnya coba buka Notepad++ atau text editor yang anda pakai. Sekarang kita coba membuat kerangka terlebih dahulu agar lebih memudahkan kita dalam melakukan script.
1. Buka Notpead ++, lalu copy code dibawah ini dan paste pada notepad++
"disini saya sarankan untuk tidak melakukan copy langsung terhadap code tersebut, biasakanlah mengetik manual agar anda lebih memahami setiap line codenya"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pengenalan</title>
</head>
<body>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pengenalan</title>
</head>
<body>
</body>
</html>
Jika tak mengerti arti code ini tak apa. Nanti semakin sering melakukan anda akan memahami sendiri tiap line nya.
2. Setelah di copy save code tersebut dengan nama dan format kerangka.html. Save ke folder Xampp/htdocs/folder-belajar-web anda . jadi bikin folder baru ya di htdocs tempat save file web nya. Seperti gambar :
3. Kalo suda klik OK, dan kita langsung ke HTML
Sebuah website dibuat dengan bahasa HTML atau HyperText Markup Language. Sebelum kita melakukan script pada PHP sebelumnya kita harus mengenal apa itu HTML. Dan jika anda belum sama sekali mengenal apa itu HTML kita langsung saja mengenal dan langsung mengaplikasikan HTML itu.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML, tampilan web kita akan terasa hambar. Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Namun sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal. Jadi pada dasarnya HTML itu dasarnya website yang didalamnya merupakan Font, Kerangka, Foto dan lain sebagainya.
Oke langsung saja kita berkutat dengan HTML :
1. Pertama hidupkan server Apache pada XAMPP, kalo belum silahkan simak di Bagian 2.
2. Copy file kerangka.html yang kita buat tadi, tekan saja CTRL+C lalu tekan CTRL+V.
3. Ganti Nama file menjadi "Pengenalan.html" atau bebas.
4. Buka file Pengenalan.html tadi dengan notepad++, klik kanan Edit with notepad++. Dan isi dari file tersebut berupa script yang kita buat tadi.
5. Kalau HTML untuk melakukan script pada <body> </body> peraturannya seperti itu. Kode <head></head> dan <html></html> saat ini jangan di pikirkan dulu, kita fokuskan pada body dulu.
6. Sekarang kita membuat huruf pada page. Nah ini sangat cocok bagi pemula, jika anda belum pernah membuat website dan inilah awal pembuatan website tersebut.
7. Sekarang coba kalian menulis script pada tag <body> </body>. Seperti contoh :
<body>
<font color="#ff0000">Selamat Datang, Apa Kabar ?</font>
</body>
<font color="#ff0000">Selamat Datang, Apa Kabar ?</font>
</body>
kemudian coba buka browser anda lalu pada url ketikkan localhost/websiteku/pengenalan.html
Taraaaaaa berhasilkan, jika belum coba kalian ulangi dari nomor 5 oke, belajar emang butuh kesabaran.
Nah saya jelasin ya kode kita diatas, <font merupakan tag dari font/huruf, color merupakan warna jadi setiap kita melakukan tag color harus diikuti dengan ="kodewarna" , kemudian kita dengan > dilanjutkan dengan Kalimat yang ingin kita keluarkan/output lalu di akhiri dengan tag </font> setiap kita membuka kita harus menutup sebab jika tidak script tidak akan berjalan. Ooya untuk kodewarna kalian bisa browsing di Google banyak ketik saja Kode Warna Html.
8. Kita juga bisa mengganti ukuran font. coba kalian tambahkan size="8" tepat di belakang color="#ff0000" atau di belakang tag >. contoh dibawah :
<body>
<font color="#ff0000"size="8">Selamat Datang, Apa Kabar ?</font>
</body>
<font color="#ff0000"size="8">Selamat Datang, Apa Kabar ?</font>
</body>
kalo sudah save lalu reload browsernya tadi, nah font size bisa kalian tentukan sesuai kebutuhan seperti untuk membuat Heading.
9. Sekarang kita juga bisa nambah foto. Nah coba sekarang coba kita masukin fotonya. Siapkan salah satu foto dan copy ke folder tempat kita menyimpan file web pembelajaran kita tadi. Lalu tambahkan script <img src="honey.jpg"> maka hasilnya scriptnya seperti dibawah :
<body>
<font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font> <img src="honey.jpg">
</body>
<font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font> <img src="honey.jpg">
</body>
kemudian save dan reload browser.
Jika gambar tidak keluar, coba cek ektensi filenya, biasanya tidak selalu .jpg kadang juga .jpeg .png .gif dan itulah pentingya melakukan setting pada ektensi file. Penjelasan script diatas <img merupakan image(gambar) , src="honey.jpg" merupakan source dimana file tersebut berada, kenapa file foto tersebut harus dipindah ini karna dapat mempersingkat dan pencarian program terhadap file yang akan ditampilkan. Kenapa <img> tidak menggunakan tag akhir </img> seperti tag lainnya ini karena <img> bukan berupa intruksi jadi tidak perlu adanya tag penutup.
10. Nah ketika kita melihat hasil foto dan huruf rasanya tak enak melihat berantakan seperti itu. Nah coba kita rapikan dengan tag <br> , nah letakkan tag <br> sesudah tag </font> dan sebelum tag <img>, contoh seperti dibawah :
<body>
<font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font>
<font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font>
<br>
<img src="honey.jpg">
</body>
<img src="honey.jpg">
</body>
save lalu reload browser, gimana lumayan ya ! <br> merupakan tag break sama seperti enter pada keyboard, break ada 2 macam <br> dan <br/> keduanya sama saja tapi kita sering pakai <br>.
11. Gimana Caranya agar foto dan tulisan berada di posisi tengah / center, yuk coba kita lakukan. Sekarang kembali ke script dan tambahkan tag <center> sebelum <font , dan tag </center> dibelakang tag </font> begitu juga dengan <img seperti contog dibawah ini :
<body>
<center><font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font></center>
<center><font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font></center>
<br>
<center><img src="honey.jpg"></center>
</body>
</body>
save lalu reload. Nah jika ingin pindah ke kanan atau kekiri tinggal rubah aja tag nya, center(tengah) , Right(Kanan), Left(kiri). Nah coba kalian terapkan sendiri ya.
12. Kadang kala ketika kita mengklik gambar atau huruf kita langsung berpindah atau membuka tab baru ke halaman lainnya. Nah kejadian itu merupakan Hyperlink, jadi kita berpindah ke halaman lain sesuai yang diintruksikan. Sekarang coba kita terapkan ya. Nah tambah kan kode ini <a href="hyperlink.html">tepat sebelum tag <img dan tutup dengan tag </a> tepat setelah .jpg"> . seperti contoh :
<body>
<center><font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font></center>
<center><font color="#ff0000" size="7">Selamat Datang, Apa Kabar</font></center>
<br>
<center><a href="hyperlink.html"><img src="honey.jpg"></a></center>
</body>
<center><a href="hyperlink.html"><img src="honey.jpg"></a></center>
</body>
sebelumnya kita mesti membuat halaman baru. Copy file Kerangka.html di folder web lalu ubah namanya menjadi "hyperlink.html" lalu buka dengan notepad lalu ketikan kode seperti dibawah ini :
<body>
KITA BERHASIL PINDAH DENGAN HYPERLINK :D
</body>
lalu save dan coba reload browsernya. Jika belum pindah coba cek scriptnya, perhatikan tag <body> disana terdapat 2 tag body ada <BODY> dan <body> dan kita menuliskan script di <body> ya.
Oke sampe sini dulu ya. Kita Ketemu di BELAJAR PHP UNTUK PARA PEMULA (Bagian 4). See You Next Time .......
Tidak ada komentar: