Contoh Penerapan/Penggunaan CSS

January 28th, 2014 No comments

Agar lebih memudahkan Anda dalam memahami konsep dasar CSS, pada bagian ini akan disertakan beberapa contoh penggunaan CSS yang diterapkan ke dalam dokumen HTML. Contoh-contoh yang akan dibahas hanyalah contoh kasus yang sering dijumpai dalam halaman web. Untuk mencari contoh yang lebih lengkap, diharapkan Anda dapat mencari sumber atau referensi lain yang membahas tentang CSS. Anda tidak perlu ragu untuk meniru atau ‘mencontek’ kode—kode CSS dari sumber lain, karena proses belajar melalui contoh akan mempercepat proses pemahaman Anda. Setelah memahami konsep, Anda tentu dapat berkreasi untuk menciptakan sesuatu yang mempunyai nilai lebih dari yang sudah ada.

Perlu diperhatikan bahwa untuk mempermudah pembahasan, penulisan kode CSS pada contoh-contoh yang akan kita buat ditulis menggunakan embedded styles. Anda dapat mengubah sendiri kode CSS tersebut ke dalam file eksternal (file .css) yang selanjutnya dipanggil menggunakan tag <link> dari dokumen HTML.

 

Categories: Uncategorized Tags:

Mengenal CSS – Cara 2: lnline Styles

January 24th, 2014 No comments

Pada cara ini, kode CSS ditulis atau dimasukkan ke dalam atribut STYLE pada tag yang akan digunakan. Cara ini merupakan cara yang tidak direkomendasikan karena kode akan tampak rumit dan susah untuk dibaca. Sebagai contoh, jika Anda memiliki beberapa tag <h2> dalam dokumen HTML  setiap tag yang ada.

Jika suatu saat Anda ingin memodifikasi style tersebut, maka Anda harus mengubah pada setiap tag yang ada.

Berikut ini contoh penggunaan inline styles di dalam tag HTML:

bisnis-online-gratis-tanpa-modal-gambar1

Pada contoh di atas, tag <h2> pertama menggunakan style dan tag <h2>

kedua tidak. Jika Anda ingin tag <h2> kedua juga menerapkan style yang sama, maka Anda perlu menuliskannya seperti berikut:

bisnis-online-gratis-tanpa-modal-gambar2

Dengan melihat secara sepintas dari contoh di atas kita bisa menyimpulkan bahwa cara ini merupakan cara yang tidak praktis, yang akan menyebabkan ‘kode menjadi ‘gemuk’ dan susah untuk dibaca maupun dipelihara.

Categories: Uncategorized Tags:

Mengenal CSS – Cara 2: Linked Styles

January 24th, 2014 No comments

Cara ini merupakan cara yang paling banyak digunakan dan direkomendasikan. Pada cara ini, kode CSS akan ditulis secara terpisah pada file tersendiri (dengan ekstensi .css). File tersebut selanjutnya dapat dikaitkan atau dihubungkan dengan dokumen HTML melalui tag . Dengan demikian, kode CSS dalam file .css tersebut dapat digunakan oleh beberapa dokumen HTML yang ingin menerapkan style. Melalui cara seperti ini, kode CSS akan mudah untuk dipelihara dan dimodifikasi. Tag yang digunakan untuk memanggil file . css diletakkan pada bagian header dokumen HTML.

Pada contoh di atas, file style.css dan sample.htm1 harus berada dalam satu direktori. Jika file .css berada di dalam direktori lain, Anda perlu menyertakan path yang sesuai ke dalam atribut HREF pada tag <link>, misalnya seperti berikut:

Kali ini, file style . css ditempatkan di dalam sub direktori dengan nama css. Dalam kasus ini, sub direktori css tersebut harus berada dalam satu

direktori dengan file sample .html.

 

Categories: Uncategorized Tags:

Menggabung Kode CSS dengan Dokumen HMTML

January 24th, 2014 No comments

Proses penggabungan kode CSS dengan dokumen HTML dapat dilakukan

melalui 3 (tiga) cara, yaitu:

~ Embedded Styles: Menuliskan kode CSS pada bagian header dokumen HTML

~ Linked Styles: ‘Menuliskan kode CSS pada file terpisah dan dipanggil melalui tag <1ink> dari dokumen HTML

~ Inline Styles: Menuliskan kode CSS langsung pada tag yang akan diubah atau diatur style—nya

Cara 1: Embedded Styles

Pada cara ini, semua kode CSS ditulis di dalam tag <style> dan style> dan ditempatkan pada bagian header dari dokumen HTML (di dalam tag <head>). Kode CSS yang ditulis dengan cara seperti ini hanya akan berlaku untuk satu dokumen bersangkutan saja. Artinya, jika Anda ingin menggunakan kode CSS tersebut dari dokumen HTML lain, maka Anda perlu menyalin kode CSS bersangkutan ke dalam dokumen lain yang dituju.

 

Categories: Uncategorized Tags:

Aturan Penulisan Kode CSS

January 24th, 2014 No comments

Kode CSS tersusun atas selector dan deklarasi. Selector adalah tag HTML yang akan diberi atau dikenai CSS, sedangkan deklarasi adalah properti dan nilai yang akan ditentukan untuk tag bersangkutan. Sebagai contoh, perhatikan kode CSS berikut:

body {

     background : black ;

}

 Pada kode di atas, body disebut sebagai selector dan background: black; disebut sebagai deklarasi. background adalah properti dari tag <body> yang akan di-set nilainya, sedangkan black adalah nilai yang digunakan atau akan diisikan ke dalam atribut background.

Sebuah selector dapat memiliki lebih dari satu deklarasi, dimana setiap deklarasi harus diakhiri oleh tanda titik koma atau semicolon (;), seperti yang ditunjukkan oleh kode berikut:

Sebagai bahan perbandingan, jika Anda menggunakan kode HTML murni (tidak menggunakan CSS), kodenya dapat ditulis seperti berikut:

Pada kedua kode di atas bahwa terdapat perbedaan penamaan atribut dalam CSS dan tag HTML. Pada contoh di atas, atribut background di dalam CSS akan mewakili atribut bgColor pada tag <body>. Begitu juga dengan atribut color yang mewakili atribut text pada tag <body>. Dengan demikian, untuk mempelajari CSS, Anda harus mengetahui daftar atribut dari masing-masing selector yang akan Anda gunakan (lihat subbab Referensi CSS).

Ada kalanya, dalam membuat kode CSS kita menjumpai satu atau beberapa selector yang memiliki deklarasi yang sama dengan selector 1ainnya. Untuk kasus semacam ini, deklarasi cukup ditulis sekali saja, akan tetapi daftar selector—nya saja yang harus disebutkan satu persatu dengan  memisahkannya menggunakan tanda koma. Berikut ini contoh kode yang akan menunjukkan hal tersebut.

 

Categories: Uncategorized Tags:

Mengenal CSS

January 24th, 2014 No comments

Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan dokumen HTML untuk mendefinisikan cara bagaimana suatu isi halaman web ditampilkan atau dipresentasikan. Presentasi ini meliputi style atau gaya teks, link, maupun tata letak (layout) halaman.

Dengan adanya teknologi seperti ini, kita dapat memilah atau memisahkan antara kode untuk isi halaman web dan kode yang diperlukan khusus untuk menangani tampilan.

Saat ini masih sering dijumpai para pengembang web yang menggunakan tag <table> untuk mengatur layout atau tata-letak dari halaman web. Ada juga yang menggunakan CSS, tapi kodenya hanya diperoleh dari internet (hasil download) tanpa mengetahui lebih dalam akan arti dan makna dari kodé-kode CSS tersebut. Hal-hal semacam ini disebabkan karena minimnya pengetahuan mereka tentang CSS sehingga tidak tahu harus memulai dari mana cara membuat halaman web yang memanfaatkan teknologi CSS.

Modul 10 ini akan menjelaskan dan mengantarkan Anda agar dapat memiliki pengetahuan yang cukup untuk memulai pembuatan web dengan menggunakan CSS. Setidaknya, materi dalam bab ini akan menjadi bekal atau pengantar bagi Anda untuk dapat mempelajari CSS lebih dalam lagi melalui sumber atau referensi lain.

 

Categories: Uncategorized Tags:

Membuat Form – Pengertian Form

January 23rd, 2014 No comments

Secara global, form adalah suatu bagian di dalam halaman web yang berfungsi untuk mengizinkan pengunjung mengirim data ke web server. Dengan kata lain, form berperan sebagai user-interface (antarmuka) atau media untuk berkomunikasi antara user dan web server.

Berikut ini adalah contoh tampilan form di dalam suatu halaman web:

cara-bikin-web-gambar

Tipe kontrol yang digunakan di dalam form memiliki bentuk yang beragam: text, combo box, list box, radio, check box, dan lain—lain; tergantung dari jenis data yang akan dikirimkan ke web server.

Sebelum Anda mempelajari pembuatan form, terlebih dahulu Anda harus mengetahui untuk apa form tersebut dibuat dan bagaimana cara keIja yang terdapat di dalamnya. Berikut ini gambar yang akan mengilustrasikan cara kerja form di dalam suatu halaman web:

cara-bikin-web-gambar2

Mula-mula user memasukkan (input) data di dalam form yang tersedia dalam web browser. Pada saat user melakukan klik terhadap tombol SUBMIT, berarti user tersebut mengirimkan suatu permintaan file (bisa berupa file aplikasi CGI atau Common Gateway Interface) tertentu ke web server. Web server akan mencari file aplikasi CGI dan mengeksekusinya. Aplikasi CGI pada umumnya ditulis menggunakan bahasa Perl dan C/C++. Selairl menggunakan aplikasi CGI, program seperti ini juga dapat dikembangkan dengan bahasa sisi-server lainnya seperti ASP, PHP, dan lain-lain. Setelah dieksekusi, hasil atau keluarannya akan dikembalikan lagi ke web server, untuk kemudian diteruskan ke hadapan user (web browser).

Catatan: Untuk mempelajari materi dalam modul ini, Anda perlu menginstal software web server (Apache) dan PHP. Lihat bagian Lampiran B — Instalasi dan Konfigurasi Apache dan Lampiran C — Instalasi dan Konfigurasi PHP.

 

Categories: Uncategorized Tags:

Membuat Frame – Membuat Link antar Frame

January 23rd, 2014 No comments

Agar suatu frame dapat menjadi tujuan untuk menampilkan dokumen HTML tertentu yang diinginkan, kita perlu menamai frame tersebut dan menjadikannya sebagai target di dalam link yang kita buat.

Contoh:

Pada saat pendifinisian frame, kita perlu memberi nama frame:

cara-bikin-web-gambar

Pada saat pendefinisian link, kita perlu mengisikan nilai pada atribut

Dengan cara seperti ini, ketika user memilih link di atas, maka web browser akan menampilkan dokumen frame—content3 .html di dalam

frmubawah.

Meskipun demikian, terdapat beberapa nilai lain yang dapat dijadikan sebagai nilai dari atribut TARGET, yaitu:

~ _blank. Dokumen akan tampil di window (web browser) baru.

~  _self. Dokumen akan tampil di frame bersangkutan, halaman lama

akan diganti.

~  _parent. Dokumen akan tampil di frame parent.

~ _top. Dokumen akan tampil di semua frame yang ada.

Categories: Uncategorized Tags:

Membuat Frame – Membuat Frame Bersarang (Nested-Frame)

January 22nd, 2014 No comments

Suatu frame dapat dipecah atau dibagi lagi menjadi beberapa frame lain. Istilah yang sering digunakan untuk menyebut frame di dalam frame adalah nested—frame (frame bersarang).

 Contoh:
cara-buat-web-gambar1

Pada contoh ini, mula-mula layar dibagi menjadi 3 frame berdasarkan ban’s dengan persentase pembagian adalah 15%, 75%, dan 10%. Frame pertama digunakan untuk menampilkan file frame—namasitus .html. Frame kedua dibagi lagi menjadi 3 frame berdasarkan kolom dengan nama kiri, tengah, dan kanan; yang masing-masing digunakan untuk menampilkan dokumen yang berbeda. Inilah yang disebut dengan nested-frame. Terakhir, frame atau baris ketiga, digunakan untuk menampilkan dokumen frame-copyright.html. Dengan demikian, jumlah total frame dalam layar ada 5.

Tampilan layar yang diinginkan kurang lebih seperti berikut:

cara-buat-web-gambar2

Categories: Uncategorized Tags:

Membuat Frame – Membuat Frame Sederhana

January 22nd, 2014 No comments

Untuk membuat frame, kita perlu membuat satu dokumen HTML baru, disebut frameset. Frameset adalah tipe dokumen HTML yang mendefinisikan berapa banyak frame yang akan ditampilkan dan mana saja file yang akan ditampilkan pada masing-masing frame bersangkutan.

Praktikum 8 – 1 : Membuat Frame

~ Jalankan aplikasi Text Editor

~ Buat file-file berikut:

 cara-membuat-blogger-gambar1

cara-membuat-blogger-gambar2

cara-membuat-blogger-gambar3

Catatan: Anda dapat menggunakanfile gambar lain, asalkanfile-file tersebut disalin ke direktori images. Begitu juga dengan nama nya, harus disesuaikan dengan kodenya.

~ Tempatkan semua file di atas ke dalam direktori kerja
~ Jalankan file frame—bagianl .html melalui web browser

 cara-membuat-blogger-gambar4

Categories: Uncategorized Tags: