PERTEMUAN 1. Membuat Halaman Web Sederhana Dengan Brackets

Tepatnya hari ini saya akan membuat post di blog saya sedikit tentang pemrograman web. Program web yang saya buat yang sederhana sja karena saya juga masih basic/dasar/baru-baru belajar, sebenarnya di semester sebelumnya sempat belajar program web, tetapi karena sesuatu dan lain hal, saya jadi tidak begitu menguasai, hehe sekedar share saja.

Oke baiklah, langsung saja tanpa panjang lebar langsung saja disimak tutorial dari saya, jika ada salah ketik atau salah pengertian sebelumnya saya mohon maaf, check it out!

Cara membuat halaman web sederhana sangatlah mudah, karena perangkat membuat web sangat banyak ditemui di internet dan rata-rata program tersebut bersifat free atau gratis, dalam tutorial ini perangkat yang dibutuhkan antara lain:

• Brackets, jika tidak punya bracket, bisa pakai Adobe Dreamweaver, atau program-program web lainnya, pakai Notepad juga bisa.
• Xampp, digunakan supaya bisa terhubung ke htdoc, supaya tampilan web bisa dilihat di browser
• Browser.

Pertama , langsung saja dibuka program Brackets dari computer sobat, setelah program Brackets terbuka, silahkan ketikkan skrip html dibawah ini.

Skrip diatas adalah hanya untuk bagian Header.

 

Penjelasan :

Dibagian skrip <link> saya buat link main.css, nanti akan saya bahas bagaimana skrip nya. Dan juga di bagian skrip <a> saya buat link ke index.html(yang saat ini masih di buat skripnya) di bagian menu beranda dan kontak.php di bagian menu kontak(nanti akan dibahas skripnya). untuk saat ini, silahkan di ikuti dahulu tutorialnya.

Selanjutnya untuk isi dari web nya, berikut skripnya.

Kita sudah sampai di bagian isi dari web nya, untuk sementara ikuti saja isi dari skrip saya, jika punya artikel sendiri, bisa ditambahkan.

Penjelasan :

<article> adalah tempat untuk artikel, dan <figure> adalah tempat untuk gambarnya. Untuk gambarnya, kalian letakkan di tempat anda menyimpan file html nya, disana kalian buat folder images/gambar, supaya lebih mudah mencarinya.

 

Selanjutnya adalah untuk bagian footer nya, silahkan ikuti skripnya.

Untuk footer kita buat simple saja, jika punya kreasi yang unik, bisa ditambahkan.

Nah, jika sudah dibuat semua skripnya, silahkan langsung saja di simpan di htdoc sobat (C:/xampp/htdoc/web)! Simpan dengan nama index.html, supaya bisa langsung di akses di localhost.

Selanjutnya kita buat file css nya, fungsinya untuk mengatur warna background, letak text dll. Supaya web kita tertata rapi. Silahkan dibuat skrip berikut ini.

 

 

 

Setelah selesai di ketik semuanya, save file tersebut dengan nama main.css atau apapaun. Simpan file css di tempat file index.html disimpan!

Sekarang buka browser sobat untuk melihat hasilnya, ketik localhost/web.

Nah, seperti itulah hasil dari skrip kita tadi, anda bisa ubah di bagian css untuk warna background dll, se menarik menurut kalian.

Selanjutnya kita akan buat skrip untuk di bagian menu kontak! File yang akan kita buat adalah file php. Mengapa php? Karena dalam file kontak aka ada fungsi-fungsi untuk di bagian Login nya. 

Bagian header dari menu kontak, skripnya sama dengan index.html, hanya bagian isi nya saja yang berbeda. Untuk di bagian headernya, silahkan ikuti skrip di gambar yang pertama.

Skrip dibawah hanya untuk bagian isi nya saja, Silahkan di ikuti skripnya.

Pertama kita buat untuk perintah php nya. Skrip ini berfungsi ketika  nama atau email atau deskripsi tidak di isi! Dan ketika semua sudah di isi, maka data akan langsung terlihat di bagian kanan dari form.

Selanjutnya kita buat bagian form nya.

Skrip diatas adalah bagian dari form nya, bisa dilihat kan dimana bedanya dengan isi dari index.html yang dibuat tadi.! Maka, buat yang beda saja.

Untuk printah <?php?> di bagian form, fungsinya untuk memberi identitas supaya nanti bisa di hubungkan ke perintah php di atas nya.

Setelah dibuat krip diatas, selanjutnya buat bagian footer nya, untuk bagian footernya ikuti saja skrip footer index.hltm. kemudian silahkan cek di web anda untuk tampilan menu kontak.

Gambar diatas adalah tampilan menu kontak.

Gambar diatas adalah kondisi saat tombol Login di klik saat form belum di isi.

Gambar diatas adalah saat semua form sudah di isi.

Sebenarnya untuk membuat web itu sangat mudah, jika kita mau belajar. Semoga tutorial yang saya buat bisa bermanfaat untuk semua.