(Draft Makalah Presentasi Kelompok 1 PTI INPUT 2010 OFFERING F)
A. Teori Dasar Desain Web
Perkembangan komunikasi digital sangat berkembang pesat, khususnya komunikasi data melalui jaringan komputer. Dengan ditemukannya protocol TCP maka, semakin banyak computer saling terhubung, dan semakin besar pula Internet.
Sejak awal kelahiran website di awal tahun 1990, para programer dan graphic desainer mendapatkan sebuah lahan baru untuk karya mereka, yang kemudian disebut web design. Seiring perkembangannya, web design akhirnya tumbuh menjadi segmen design tersendiri yang jelas-jelas terpisah dari graphic design. Skill yang dibutuhkan pun juga berbeda dengan graphic design, karena web design juga melibatkan berbagai bahasa pemrogaman.
Hingga saat ini, ada dua golongan utama pekerja web design. Golongan pertama adalah orang-orang yang dulunya programer, dan golongan kedua adalah orang-orang yang dulunya graphic designer. Karakter web yang dihasilkan dua kelompok ini cukup bertentangan. Mantan programer biasanya lebih mementingkan sistem, sedangkan mantan graphic designer lebih mementingkan tampilan. Kami pun juga berpendapat bahwa web desain yang sempurna selalu dihasilkan oleh minimal dua orang: satu orang graphic designer sebagai seniman, dan satu orang programer sebagai pengatur sistem.
B. Latar Belakang
Seperti Internet yang juga tumbuh dan berkembang, aplikasi internet juga semakin banyak, dan beragam fungsinya. FTP adalah aplikasi file transfer protocol digunakan untuk transfer file, URL adalah uniform resource language digunakan sebagai path lokasi file pada internet, dan WWW yaitu world wide web adalah aplikasi yang digunakan untuk menampilkan halaman web pada browser.WWW pertama kali dibuat oleh Tim Berners-Lee pada bulan Agustus 1991. Website pertama itu bernama World Wide Web. Bentuknya sangat sederhana. Semua masih menggunakan script html standar tanpa ada unsur apapun. Website pertama tersebut masih ada dan bisa diakses hingga saat ini. Pada tahun 1994, World Wide Web Consortium (W3C) didirikan. Lembaga ini mengambil keputusan bahwa script HTML adalah script standar untuk semua website. Dalam perkembangan selanjutnya, script html tersebut dikembangkan lagi menjadi XHTML yang bersifat terbuka terhadap berbagai plugin script tambahan seperti Java, flash, dan Ajax.
C. Konsep
Pada sekitar tahun 1995 muncul website dengan menggunakan tabel sebagai dasar layoutnya, atau yang biasa disebut table-based layout. Kehadiran Table-based layout merupakan gebrakan yang cukup signifikan bagi web design waktu itu. Dengan table-based layout, web bisa dibuat dalam beberapa kolom dengan posisi-posisi layout selangkah lebih maju. Website yang menggunakan Table-based layout diantaranya adalah W3C (1998) dan Yahoo (2002).
Pada tahun 1996 flash diintegrasikan dengan website. Pada awalnya script flash disebut dengan FutureSplash Animator, kemudian Macromedia Flash, dan sekarang Adobe Flash. Flash sendiri sebenarnya merupakan pengembangan dari Macromedia Shockwave (sekarang Adobe Shockwave). Program ini pertama kali ditujukan sebagai pembuat menu dan daftar multimedia content pada autorun CD-ROM.
Dengan adanya flash, gambar-gambar dalam website dapat 'bergerak'. Selain itu fitur-fitur klasik html, seperti 'link' tetap bisa dihadirkan. Tetapi flash memiliki kekurangan, yaitu website menjadi berat dan sulit diakses. Selain itu, pengguna web juga harus memiliki flash plugin di browsernya, dan hal ini sangat merepotkan saat itu.
Pada tahun 1994, World Wide Web Consortium (W3C) didirikan. Lembaga ini mengambil keputusan bahwa script HTML adalah script standar untuk semua website. Dalam perkembangan selanjutnya, script html tersebut dikembangkan lagi menjadi XHTML yang bersifat terbuka terhadap berbagai plugin script tambahan seperti Java, flash, dan Ajax.
Pada sekitar tahun 1995 muncul website dengan menggunakan tabel sebagai dasar layoutnya, atau yang biasa disebut table-based layout. Kehadiran Table-based layout merupakan gebrakan yang cukup signifikan bagi web design waktu itu. Dengan table-based layout, web bisa dibuat dalam beberapa kolom dengan posisi-posisi layout selangkah lebih maju. Website yang menggunakan Table-based layout diantaranya adalah W3C (1998) dan Yahoo (2002).
D. Cara Kerja HTML
1. Definisi HTML
Hypertext Markup Language (HTML) adalah bahasa markup atau bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
2. Sejarah HTML
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997.
HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language).
4. STRUKTUR HTML DOCUMENT
Document HTML bisa di bagi mejadi tiga bagian utama:
· HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML></HTML>
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah
document HTML.
· HEAD Bagian header dari document HTML di apit oleh tag <HEAD></HEAD>
di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
· BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.
5. PENGATURAN PROPERTI HALAMAN WEB
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen
<body>.
Atribut elemen body antara lain adalah :
background= lokasi dan nama file (latar belakang image dokumen)
bgcolor = warna (warna latar belakang dokumen, default putih)
text = warna (warna teks dokumen, default hitam)
link = warna (warna link dokumen, default biru)
vlink = warna (warna visited link dokumen, default ungu)
alink = warna (warna active link dokumen, default merah)
E. Konsep Dasar CSS
1. Sejarah CSS
Pada tanggal 17 Agustus 1996, World Wide Web Consortium (W3C) menjadikan CSSweb. Tujuannya adalah mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua kedua browser pada saat itu bersaing mengembangkan TAG sendiri untuk mengatur tampilan web. sebagai bahasa pemrograman standart dalam pembuatan dokumen
CSS level 1 mendukung pengaturan tampilan dalam hal:
1. Font (jenis, ketebalan)
2. Warna, teks, backgrounf dan elemen lainnya
3. Text attributes, misalnya spasi antar baris, kata dan huruf
4. Posisi teks, gambar, table dan elemen lainnya
5. Marjin, border dan padding.
1. Font (jenis, ketebalan)
2. Warna, teks, backgrounf dan elemen lainnya
3. Text attributes, misalnya spasi antar baris, kata dan huruf
4. Posisi teks, gambar, table dan elemen lainnya
5. Marjin, border dan padding.
Selanjutnya di tahun 1998, W3c menyempurnakan CSS awal dengan menciptakan standar CSS2 (CSS level 2) yang menjadi standar hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada Internasional accessibility and capability khususnya media-specific CSS.
Bahkan pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS2 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
CSS adalah singkatan dari Cascading Style-Sheet, sebuah pengembangan atas kode HTMLCSS, kita bisa menentukan sebuah struktur dasar halaman webCSS juga membantu kita untuk menyeragamkan seluruh halaman website dengan tampilan yang konsisten. Misalnya, kita mau seluruh font yang ada di website kita adalah font "Tahoma", maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti-ganti font secara manual di setiap halaman. yang sudah ada sebelumnya. Dengan secara lebih mudah dan cepat, serta irit size.
Dahulu kala, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.
Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.
3. Sintaks & Penempatan Kode CSS
Sintaks CSS terdiri dari tiga bagian:
· selector
· property
· value
Selector adalah elemen atau tag HTML yang akan di-definisi-kan.Property adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (
:) dan keduanya diapit oleh tanda kurung kurawal ({).Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:· selector { property: value}
contoh 1:
p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (
“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga sintaksnya menjadi:selector { property1: value; property2: “value_value”; … }
contoh 2:
p { text-align:center; font-family:“sans serif” }
Aturan-aturan yang berlaku dalam sintaks CSS:
· Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2), Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil, Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2), Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
contoh: h1,h2,h3 {color:green}
· Class selector
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {text-align: right} dan
p.left {text-align: left}
Aturan Class selector: Jangan memberi nama class dengan angka, Jika memberikan sama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
4. Kumpulan Tag CSS
“One of the best ways to learn CSS is to jump right in and start to get into the page layouts.”
Anda dapat menemukan kumpulan lengkap tag CSS beserta contoh-contoh penggunaannya pada beberapa bagian. Bila Anda serius ingin menekuni CSS, sangat disarankan agar Anda terus mencoba setiap tag dan propertinya; selain membantu Anda mengingat-ingat cara penulisan sintaks, metode mencoba akan memperlihatkan kegunaan dari masing-masing tag.
Anda tidak harus menghapal semua tag bila ingin menjadi seorang ahli. Seorang ahli yang sesungguhnya adalah orang yang bisa memanfaatkan tag-tag yang paling sederhana sekalipun untuk menambah nilai estetika suatu website secara efisien. Tidak jarang kita menemukan situs-situs di internet yang terlalu memaksakan penggunaan CSS yang tidak perlu, sehingga malah mempersulit pengunjungnya untuk sekedar membaca.
Property | Deskripsi | Values |
background | Mengeset semua properti background dalam satu deklarasi | background-color background-image background-repeat background-attachment background-position |
background-attachment | Mengeset kondisi posisi background; antara dapat discroll atau tidak dapat digerakkan dalam halaman | scroll fixed |
background-color | Mengeset warna latar background suatu elemen | color-rgb color-hex color-name transparent |
background-image | Mengeset sebuah gambar menjadi sebuah background | url(URL) none |
background-position | Mengeset posisi background | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
background-repeat | Mengeset apakah/bagaimana background akan diulang | repeat repeat-x repeat-y no-repeat |
5. Arsitektur CSS
Dengan CSS kita dapat lebih mudah dalam mendesain layout website. Anda membuat halaman HTML, lalu anda berikan identitas pada bagian2 tertentu dengan tag <div> baik itu menggunakan atribut id <div id=”"> atau class <div class=”">. Lalu anda buat satu file css, bisa di selipkan pada bagian <head> atau dalam file berbeda dan di hubungkan dengan tag <link rel=”stylesheet” type=”text/css” href=”">. File CSS tadi memberikan nilai dan definisi pada bagian tertentu dari halaman html tadi yang diberikan identitas melalu tag <div>.
Buat halaman web, beri identitas pada bagian yang diinginkan menggunakan tag <div> .
<div id=”post”>
Lorem ipsum bla bla..
</div>
</body>
Buat file css, beri nilai dari definisi untuk identitas yang diinginkan :
Hubungkan CSS pada halaman yang dimaksud. bisa ditaruh diantara <head>, atau dibuat file terpisah dan dilink menggunakan tag <link rel=”"> pada area <head>
F. Contoh Hasil Penulisan Scripts HTML pertama
G. Kesimpulan
Dalam mendesain halaman web, diawali dengan menggunakan kode HTML yang memiliki table layout, tetapi semakin banyak table layout yang digunakan maka semakin lambat akses sebuah halaman web, untuk itu dibuatlah script CSS dimana mempermudah dalam pembuatan layout website yang dapat diintegrasikan dengan HTML.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.
Kelebihan penggunaan CSS :
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Kekurangannya penggunaan CSS :
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari CSS ini.
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari CSS ini.
H. Referensi
Musciano Chuck, Kennedy Bill. HTML & XHTML : The Definitive Guide. Oreilly Media 2002
Schmiit Chiristopher. CSS CookBook. Orielly Media. 2009
0 comments
Posting Komentar