Membuat Menu WEB

Setelah memahami materi tentang dasar Layouting WEB, klik disini untuk mereview kembali. Langkah selanjutnya yang harus dilakukan dalam membangun sebuah WEB adalah Membuat Menu WEB berdasarkan Layouting WEB yang telah dibuat pada postingan yang dahulu, klik disini untuk mereviw kembali. Pada proses kali ini sama dengan proses layouting web merupakan proses pengaturan tampilan komponen - komponen web agar sesuai dengan yang kita inginkan. Didalam proses pengaturan tersebut, menggunakan element <div> dengan class CSS yang kita sesuaikan. Dalam tahapan ini, diperlukan pemahaman tentang aturan <div> untuk setiap konstruksi penggunaanya didalam halaman HTML.

Pada postingan materi kali ini, penulis akan membahas dan membuat Membuat Menu WEB  seperti dibawah ini. materi  ini  penulis kutip dari modul Dosen Penulis. WEB  ini cukup sederhana, jadi tidak ada hal yang perlu dikhawatirkan untuk tidak bisa membuat. Dalam materi ini sangat mudah sekali apabila Anda sudah memahami dasar-dasar yang telah penulis posting sebelumnya. Jika ingin mengulas kembali, silahkan klik disini

Seperti gambar diataslah nanti hasil yang akan dihasilkan dari proses pembahasan dalam materi ini. Untuk tools dan lain sebagainya, silahkan menyesuaikan dengan kenyamanan anda. 

Code XHTML

Untuk melihat code XHTML silahkan klik disini

Code CSS

Untuk melihat code CSS silahkan klik disini

Demikianlah pembahasan mengenai Membuat Menu WEB. Jika ada hal yang belum dimengerti, silahkan tinggalakan komentar didalam kolom komentar.

Continue reading →

Layouting WEB

Setelah memahami materi tentang dasar Konsep Dasar WEB dan yang lainnya. Langkah selanjutnya yang harus dilakukan dalam membangun sebuah WEB adalah Layouting WEB. Layouting web merupakan proses pengaturan tampilan komponen - komponen web agar sesuai dengan yang kita inginkan. Didalam proses pengaturan tersebut, menggunakan element <div> dengan class CSS yang kita sesuaikan. Dalam tahapan ini, diperlukan pemahaman tentang aturan <div> untuk setiap konstruksi penggunaanya didalam halaman HTML.

Pada postingan materi kali ini, penulis akan membahas dan membuat Layout WEB seperti dibawah ini. Layout WEB ini  penulis kutip dari modul Dosen Penulis. Layout ini cukup sederhana, jadi tidak ada hal yang perlu dikhawatirkan untuk tidak bisa membuat. Dalam materi ini sangat mudah sekali apabila Anda sudah memahami dasar-dasar yang telah penulis posting sebelumnya.Jika ingin mengulas kembali, silahkan klik disini

Kerangka Layout

Code HTML

Untuk melihat code HTML silahkan klik disini

Memang secara kasat mata belum terlihat kerangkanya dengan code HTML diatas, akan tetapi bila sudah ditambahkan code style.css makan akan terlihat bagian masing - masing.

Demikianlah pembahasan mengenai Layouting WEB. Jika ada hal yang belum dimengerti, silahkan tinggalakan komentar didalam kolom komentar.

Continue reading →

Perbedaan, Fitur dari HTML dan XHTML

Perkembangan Bahasa HTML bisa dikatakan pesat, dalam rentang beberap tahu bahasa ini selalu mengalami perubahan yang sangat signifikan. Untuk mengetahui perkembangan dari bahasa ini silahkan klik disini.  Aturan HTML dan XHTML silahkan klik disini dan juga untuk komponen XHTML klik disini. Dari  link sumber bacaan diatas, menandakan bahwa bahasa HTML ini sangat popular dikalangan develop WEB. Selain dari hal diatas, HTML dan XHTML memiliki perbedaan yang sangat jauh sekali, bahkan bisa dikatakan sangat bertolak belakang. Untuk perbedaan dari keduanya, akan penulis bahas seperti dibawah ini:

Perbedaan HTML dan XHTML

•  HTML tidak case-sensitif, sedangkan XHTML case-sensitif
• Didalam HTML tidak semua tag lowercase, sedangkan XHTML semuanya harus lowercase
• Didalam HTML tidak semua elemen membutuhkan closing tag, sedangkan untuk XHTML tiap elemen harus ada closing tag nya.
• Didalam HTML tidak semua attribute membutuhkan value, sedangkan dalam XHTML semua attribute membutuhkan value
• HTML tidak ketak, rapi dan terkadang membingungkan, sedang XHTML sangat ketat  dan memiliki standard yang rapi dan bersih

Fitur HTML

• Tidak Case-sensitife
• Tidak semua lowercase
• Tidak semua element membutuhkan closing tag
• Tidak semua attribute membutuhkan value

Fitur XHTML

•  Case-sensitife
• Semua lowercase
• Semua element membutuhkan closing tag
• Semua attribute membutuhkan value

Demikianlah pembahasan mengenai  Perbedaan, Fitur dari HTML dan XHTML. Jika ada hal yang belum dimengerti silahkan tinggalkan komentar didalam kolom komentar.

Continue reading →

HTML, XHTML dan CSS

Perkembangan HTML

• HTML 4.0 - 1997 : Introduced many new features and deprecated many older features
• HTML 4.01 - 1999 -A cleanup of 4.0
• XHTML 1.0 - 2000 : Just 4.01 defined using XML, instead of SGML
• XHTML 1.1 - 2001 : Modularized 1.0, and drops frames, We'll stick to 1.1, except for frames

HTML vs XHTML

• Sintax HTML tidak ketat dan tidak rapi dan terkadang membingungkan
• Sintax XHTML lebih ketat, mempunyai standard yang lebih rapi dan bersih
• XHTML mempunyai sifat cse-sensitive dan semua ditulis dengan huruf kecil, sedangkan HTML tidak memperdulikan huruf  besar kecil
• Tag di XHTML selalu mempunyai tag penutup (close tag), di HTML tidak terlalu memperhatikan closed tag

XHTML

Validator

http://validator.w3.org/

Aturan XHTML

• Tag XHTML dikelilingi sudut kurung seperti <html>
• Tag-tag dalam XHTML diapit oleh sudut kurung (< dan >)
• Setiap element didefinisikan oleh tag
• Tidak semua tag mempunyai content / isi
• JIka tag tidak mempunyai content, penulisannya adalah sebagai berikut <input />

Komponen XHTML

CSS

• CSS (Cascade Style Sheet) dapat menambahkan style halaman kita, meningkatkan dan memperbaiki penyajian isi halaman.
• CSS dibuat untuk memisahkan antara isi dan presentasi
• CSS bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen XHTML yang diberikan
• Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, dikontrol oleh CSS

Aturan CSS

• CSS dibangun berdasarkan aturan, aturan berisi set intruksi yang dapat memerintahkan browser mengikuti aturan untuk mengubah penampilan element XHTML didasarkan pada nilai-nilai yang diberikan.

XHTML - CSS

Agar dapat memanfaatkan style CSS, kita harus menghubungkan style sheet ke dokumen kita, denga cara attaching CSS, seperti berikut ini :

• Inline Style  : kita dapat memasukan deklarasi CSS dalam gaya opsional atribut dari setiap elemen dan merkup. Tidak dibangun sebagai aturan, dan tidak ada selector karena properti dan nilainya melekat langsung pada elemen.Seperti contoh berikut ini :

• Embedded Style :  Disini kita dapat menanamkan aturan CSS dalam elemen head dalam dokumen, dimana aturan tersebut dapat digunakan pada dokumen yang sama dimana dideklarasikan. Embedded Style ini sering disebut dengan istilah Internal Style. Seperti contoh berikut ini :

• External File : Model ini adalah mode yanag terbaik, karena menempatkan kode CSS terpisah  dengan  dokument XHTML, style sheet external langsung terhubung ke dokumen. External file ini adalah file text yang disimpan dalam extensi .css. Cara ini benar-benar memisahkan antara struktur, isi dan presentasi. Seperti contoh berikut ini yang menghubungkan sebuah dokumen ke external style sheet melalu elemen head.

Demikianlah  pembahasan mengenai  HTML, XHTML dan CSS. Jika ada hal yang belum dimengerti atau dipahami silahkan tinggalakan komentar didalam kolom komentar.

Continue reading →

Persiapan Program Aplikasi Pendukung Untuk Membangun Sebuah WEB

Didalam membangun suatu hal, misalnya Rumah, sebelum memulai bekerja, baik tukang maupun pemilik rumah yang akan dibangun harus sudah menyiapakan bahan-bahan, alat yang akan digunakan dan diperlukan untuk mendukung terwujudnya sebuah rumah yang indah, baik itu dari bahan yang bersifat kasar maupun lunak, seperti : pasir, semen, batu dan lain sebagainya.

Begitu juga dalam membangun WEB ini, sebelum melakukan Pemprograman WEB atau  coding, proses pembuatan sebuah WEB, seorang programmer WEB harus menyiapkan terlebih dahulu bahan-bahan, alat dan persenjataan yang akan digunakan dan diperlukan untuk mendukung terwujudnya sebuah WEB yang indah, responsive dan lain sebagainya. 

Berdasarkan hal diatas, maka penulis akan membahas mengenai Persiapan Program Aplikasi Pendukung Untuk Membangun Sebuah WEB. Berikut adalah daftar program aplikasi yang harus terinstall di dalam komputer yang akan digunakan untuk membangun sebuah WEB,

Sistem Operasi

Sistem operasi yang direkomendasikan adalah Microsoft WIndows, Mac OS X, Linux. Karena pada dasarnya user sekarang kebanyakan menggunakan sistem operasi diatas. Selain itu, keempat sistem operasi diatas sangat popular dan familiar di masyarakat umum.

Web Browser

Setiap komputer yang memiliki sistem operasi Microsoft Windows dan Mac OS x pasti memiliki web browser default atau browser yang diinstal terpisah.

Web Server Apache

Saat ini Apache sudah dapat diinstal di banyak sistem operasi. Silahkan unduh versi terbaru APache dari situs resminya dan pilih Apache yang sesuai dengan sistem operasi yang digunakan.

Modul PHP

Saat ini situs resmi PHP telah tersedia file master modul PHP untuk masing-masing sistem operasi. Silahkan unduh masternya yang sesuai dengan sistem operasi yang Anda gunakan.

Database Server MySQL

Saat ini situs resmi MYSQL sudah menyediakan master database MYSQL yang dapat diunduh secara bebas untuk berbagai macam sistem operasi.

XAMPP

Jika Anda tidak mau direportkan dengan menginstal satu persatu program diatas (Web Server Apache, Modul PHP, Database Server MySQL) saat ini telah tersedia banyak sekali aplikasi yang mampu mengintegrasikan ketiga software diatas kedalam satu paket aplikasi. Contohnya adalah software XAMPP, software ini tersedia untuk sistem operasi Microsoft Windows dan Max OS X. 

Demikianlah pembahasan mengenai Persiapan Program Aplikasi Pendukung Untuk Membangun Sebuah WEB. Jika ada hal yang belum dimengerti silahkan tinggalkan komentar didalam kolom komentar.

Continue reading →

Konsep Dasar WEB

Didalam membangun sesuatu, apapun itu harus dimulai dari dasar atau konsepnya terlebih dahulu. Baik itu dalam hal membangun suatu hal yang bersifat konkret ataupun abstrak. Karena ketika anda sudah berhasil membangun dasar-dasarnya dengan sesuai prosedur, untuk membangun yang lainnya pun akan semakin mudah.

Begitu juga dalam merancang atau membangun sebuah WEB, anda harus terlebih dahulu mengetahui tentang Konsep-konsep Dasar WEB tersebut. Dengan ini, pada postingan kali ini penulis akan membahas mengenai Konsep Dasar WEB. Di mulai dari yang paling mendasar dengan penjelasan yang sangat sederhana, mudah dipahami dan dimengerti, seperti dibawah ini :

World Wide Web 

Adalah suatu ruang informasi dimana sumber-sumber daya yang beguna  diindentifikasi oleh pengenal global yang disebut "Uniform Resource Identifier (URI)"

Uniform Resource Identifier (URI)

Teriri dari string karakter yang digunakan untuk identifikasi atau memberi suatu nama resource (sumber daya) di Internet.

Uniform Resource Locator (URL)

URL digunakanoleh browser untuk mengidentifikasi sumberdaya di Internet yang dituliskan dalam suatu baris teks. URL dapat dikatakan sebagai bagian dari URI

Hypertext

Suatu informasi yang dapat kita baca melalui Web Browser (IE, Mozilla FIrefix, Chrome, Opera dll). Kita dapat mengiktui link disetiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi/. Aktifitas tersebut disebut dengan Surfing (berselancara). Halaman Web biasanya diatur dalam koleksi material yang saling terkait, yang disebut dengan Website.

HTTP

Adalah standard request/respon anatara sebuah client dan server . Client (web browser) akan mulai melakukan permintaan (request) ke server. Server tersebut akan menerima request dari client dan akan mengembalikan jawaban (respon) ke client yang dapat berupa persan error atau informasi lainnya.

Internet ?

Internet adalah jaringan komunikasi global yang terbuka dan menghubungkan jutaan jaringan komputer, melalu sambungan telepon umum maupun pribadi. Secara individu, jaringan komponennya dikelola oleh agen-agen pemerintah, universitas, organisasi komersial, mauapun sukarelawan.

Menurut McBride dalam bukunya, The Internet

Secara harfiah, Internet ( kependekan dari Interconnected-networking) ialah sistem global dari seluruh jaringan komputer yang saling terhubung menggunakan standar Internet Protocol Suite (TCP/IP) untuk melayani milyaran pengguna diseluruh Dunia.Cara menghubungkan rangkaian dengan kaedah ini dinamakan dengan Internetworking.

Demikianlah pembahasan mengenai Konsep Dasar WEB. Jika ada hal yang belum dimengerti silahkan tinggalkan komentar didalam kolom komentar.

Continue reading →