Paper - Web Semantic

BAB I

PENDAHULUAN

1.1. Latar Belakang

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau iseng saja belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website personal. Website ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai.

Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com

 

1.2.   Rumusan Masalah

Paper ini merumuskan beberapa permasalahan sebagai berikut:

1. Apa pengertian Web Semantik?
2. Apa keuntungan Web Semantik ? 
3. Apa Komponen Web Semantic ? 
4. Ap Fungsi Web Semantic ?
5. Bagaimana cara membuat Website Semantik Tanpa Table  (table less) dengan Photoshop dan Dreamweaver

1.3.   Ruang Lingkup

Dalam paper ini, penulis membatasi masalah yang akan dibahas pada materi kuliah                 Membuat Website Semantik Tanpa Table  (table less) dengan Photoshop dan Dreamweaver. Pembahasan lebih dikhususkan pada Website Semantik Tanpa Table  (table less) dengan Photoshop dan Dreamweaver. Hal tersebut dimaksudkan untuk mempertegas pembahasan sehingga dapat terfokus pada masalah yang akan dibahas serta dapat memberikan gambaran umum tentang isi paper sehingga pembaca lebih mudah mempelajarinya. 

 

1.4.   Maksud dan Tujuan

Maksud dari penyusunan paper ini adalah untuk memenuhi salah satu tugas mata kuliah Arsitektur Manajemen dan E-Business. Sedangkan tujuan dari penulisan tugas ini adalah:

1.    Menerapkan teori yang didapat dari Modul e-Learning.

2.    Mengembangkan kreativitas dan wawasan penulis.

3.    Membuat Website Semantik tanpa Table  (table less) dengan Photoshop dan Dreamweaver.

 

1.5.   Metode Pengumpulan Data

Untuk memperoleh data yang diperlukan dalam penyusunan paper ini, penulis menggunakan metode Browsing Internet, yaitu yang dilakukan dengan browsing atau membaca atau mencari referensi-referensi yang berkaitan dengan masalah yang dibahas dalam paper ini di internet. 

1.6.      Sistematika Penulisan

Untuk memudahkan pembaca dalam mempelajari dan mengetahui isi paper ini, penulis memberikan uraian singkat mengenai gambaran pada masing-masing bab melalui sistematika penulisan yaitu : 

BAB I    PENDAHULUAN

Dalam bab ini, penulis menguraikan tentang latar belakang penulisan, maksud dan tujuan serta metode-metode yang digunakan dalam pengumpulan data untuk menyusun paper ini. Selain itu, penulis juga menguraikan mengenai ruang lingkup permasalahannya yang dibahas dan sistematika penulisan. 

BAB II PEMBAHASAN 

Pada bab ini, penulis menguraikan tentang materi-materi yang akan dibahas karena bab ini merupakan bab utama dari paper ini. Dalam bab ini penulis menguraikan tentang Pemahaman mengenai Website Semantik Tanpa Table  (table less) dengan Photoshop dan Dreamweaver. 

BAB III PENUTUP 

Dalam bab ini, penulis menguraikan tentang kesimpulan dari masalah yang dibahas.

 

  

BAB II 

PEMBAHASAN 

2.1.   Pemahaman mengenai Web Semantik

Menurut Jhon Markoff WEB SEMANTIK adalah sekumpulan teknologi yang menawarkan cara baru yang efisien dalam membantu komputer mengorganisasi dan menarik kesimpulan dari data online. Melalui web semantik inilah berbagai perangkat lunak akan mampu mencari, membagi, dan mengintegrasi informasi dengan cara yang lebih mudah. Jadi, Web semantik ( semantic web ) merupakan perkembangan dari www ( world wide web ) pada tahun 2002, dimana konten web yang di tampilkan tidak hanya dengan format bahasa manusia yang umum tetapi juga bisa di baca dan digunakan oleh bahasa mesin.

Web Semantik adalah sekumpulan informasi yang dikumpulkan dengan metode tertentu agar dapat dengan mudah diproses oleh mesin, dalam skala yang besar. Ini seperti cara yang e_sien dari representasi data pada World Wide Web, atau sebagai database global yang saling terhubung. Web Semantic dikembangkan oleh sebuah tim di World Wide Web consortium. Hingga saat ini Web Semantic masih dalam tahap pengembangan dan penyempurnaan, karena teknologi ini masih baru digunakan dan tim masih mengembangkan metode masing-masing untuk mengembangkan Web Sematic.

Web Semantik terdiri dari seperangkat prinsip-prinsip desain, kelompok kerja kolaboratif, dan berbagai teknologi. Beberapa elemen dari Web Semantik yang dinyatakan sebagai calon masa depan dan unsur-unsur lain dari Web Semantik disajikan dalam spesifikasi formal dimaksudkan untuk memberikan deskripsi formal konsep, istilah, dan hubungan dalam satu domain Istilah tertentu.

Web Semantik itu sendiri diperkenalkan oleh Tim Berners-Lee, penemu World Wide Web. Sekarang, prinsip web semantik disebut-sebut akan muncul pada Web 3.0, generasi ketiga dari World Wide Web. Bahkan Web 3.0 itu sendiri sering disamakan dengan Web Semantik. Web Semantik menggunakan XML, XMLS (XML Schema), RDF, RDFS (Resources Description Framework Schema) dan OWL. komponen-komponen penyusun dari WEB 3.0 antara lain :

• Web Semantic
• Format Mikro
• Pencarian dalam bahasa pengguna
• Penyimpanan data dalam jumlah besar
• Pembelajaran lewat mesin

 

2.2.    Keuntungan Web Semantik

 

Dengan metode tradisional data-data disimpan pada halaman web tersebut sangat beragam. Sehingga ini masih mungkin digunakan untuk skala pemakai terbatas. Tetapi jika akan digunakan dalam skala yang luas maka akan menjadi kesulitan, karena tidak ada sistem yang global yang dapat digunakan untuk merepresentasikan data dengan cara tersebut yang dapat di proses oleh setiap pemakai. Sebagai contoh ada informasi mengenai olah raga, cuaca, dan lain-lain, kesemua informasi tersebut masing-masing jumlahnya jutaan dan dibuat oleh pembuat yang berbeda-beda, yang masing-masing memiliki bahasa dan metode tersendiri untuk menyimpan informasi tersebut dan kesemua informas tersebut ditampilkan dalam halaman HTML, Hal tersebut sangat sulit dilakukan kalau menggunakan metode tradisional.  

Seperti halaman web biasa yang memiliki service seperti mesin pencari yang menggabungkan berbagai macam halaman kedalam satu koleksi yang sama. Web Semantic juga memiliki hal yang sama, perbedaanya terletak pada metode pencarian halaman web yang diinginkan. Jika pada halaman web biasa hanya hanya dapat mencari halaman web yang memiliki sebuah atau beberapa kata yang menjadi bahan pencarian, sedangkan dalam Web Semantic dapat melakukan pencarian dengan lebih terstruktur, pertanyaan yang spesifik (selama hal tersebut di tulis kedalam bentuk yang dimengerti oleh mesin). Web Semantic tidak hanya tentang bagaimana mengajarkan mesin untuk dapat mengerti bahasa manusia atau memproses bahasa alami dan juga tidak semata-mata untuk membuat sebuah Arti_cial Intelligence, tetapi tujuan utama adalah untuk mempermudah mengumpulkan data-data, lebih diutamakan untuk data yang besar. 





2.3. Komponen Web Semantic

Sebuah web Semantic tidak berdiri sendiri, terdiri dari berbagai macamkomponen-komponen yang saling berhubungan satu sama lainya. Komponen yang terdapat dalam sebuah web semantic antara lain:

1. XML, menyediakan sintaksis untuk dokumen yang terstruktur;
2. XML Schema, adalah bahasa untuk membatasi struktur dari dokumen XML
3. RDF, model data sederhana yang berhubungan dengan object (“resource”) dan bagaimana mereka berhubungan. Sebuah model data RDF dapat ditulis dengan sintaksis XML
4. Skema RDF, adalah vocabulary untuk mendeskripsikan property dan class dari RDF;
5. OWL, menambahkan beberapa kosa kata untuk menjelaskan property dan class, antara lain: hubungan antara class, kardinalitas, persamaan, karakteristik dari property.
6. DAML adalah usaha untuk menyediakan primitive pemodelan yang lebih kaya dari pada RDF dan RDF schema. Kemudian digabung dengangroup lain, dinamakan Ontology Inference Language (OIL), yang berusaha untuk menyediakan kalsifikasi yang lebih baik dengan menggunakan konstruksi dari kecerdasan buatan yang berbasis frame.

2.4. Fungsi Web Semantic

Seperti telah dijelaskan di atas bahwa tujuan utama dalam penerapan web Semantic adalah untuk menemukan informasi yang tepat dan cepat dalam kumpulan informasi yang tersebar luas dalam dunia internet. Dengan melihat tujuan tersebut maka web semantic lebih tepat untuk penggunaan di dalam perusahaan yang biasanya membutuhkan informasi dalam waktu yang cepat, dan informasi tersebut mengambil referensi dari banyak sumber. Dalam sebuah perusahaan web semantic dapat digunakan untuk :

• Decision Suport
• Business Development;
• Information Sharing and Knowledge;
• Administration and Automation.

2.5.        Website Semantik Tanpa Table  (table less) dengan Photoshop dan Dreamweaver

                Cara membuat website semantik tanpa tabel dan tentunya masih menggunakan photoshop dan dreamweaver. Bila anda belum membaca tutorial sebelumnya, saya sarankan untuk membaca dan mempraktekannya terlebih dahulu supaya lebih mantap lagi untuk memulai project. Project ini sedikit agak rumit dan bila koneksi anda menggunakan dial-up tutorialnya mungkin lumayan lama karena yang pasti kali ini banyak sekali gambar yang harus di-load. Bila salah satu image dalam tutorial ini tidak muncul, klik kanan pada image kemudian pilih show image (untuk FFox, disarankan selalu menggunakan FireFox). Tampilan project website kita kali ini adalah sebagai berikut :

Membuat Desain Awal dengan Photoshop 

Silahkan buka photoshop anda kemudian buat kanvas baru dengan ukuran 1280 X 800 pixel dan background content white, settingan yang lainnya tidak perlu dirubah.

 

Double click pada layer 0 yang baru saja dibuat, ganti nama layer menjadi background. Selanjutnya click kanan pada layer background dan pilih blending option :

pada dialog blending option centang dan klik gradient overlay kemudian atur gradasi warna sehingga menjadi seperti pada gambar berikut :

 

pilih ellipse tool kemudian buat bidang bulat pada layer background yang telah diberi warna gradasi hitam putih, sehingga menjadi sebagai berikut :

buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah sehingga menjadi sebagai berikut :

 

klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius Gausian Blur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua bidang :

 

apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :

buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong kemudian tempatkan disebelah atas :

Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehingga gambar menjadi sebagai berikut :

Dengan demikian background untuk website kita kali ini bisa dikatakan selesai, anda bisa saja menambahkan variasi sesuka anda. Sebagai catatan saja dari saya, background yang kita buat usahakan selalu dengan ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rata resolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop berukuran hanya 1024 x 780 pixel. Jika kita membuat background dengan ukuran lebar 1024 tentu tidak akan tampil bagus pada resolusi diatasnya, diatas semua itu lebih baik lagi bila kita bisa membuat background yang dinamis namun indah dan dengan ukuran byte yang rendah.

Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout content website kita.

Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640 pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang berwarna putih.

geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan menggunakan move tool .. klik kanan pada layout kemudian pilih blending option gunakan setingan berikut

hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di gabungkan dengan background akan menghasilkan gambar sebagai berikut

buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih merge visible

Gabungkan gambar awan dengan design website sebelumnya kemudian tambahkan bulatan-bulatan hitam lain disekelilingnya sehingga kita mendapatkan design website seperti gambar berikut

OK sekarang content website dan background sudah jadi, selanjutnya mari kita buat Design Menu untuk website kita. langkah pertama adalah buat bidang persegi dengan rectangle tool pada bagian atas content selebar content atau 700 pixel kemudian tambahkan gradient overlay pada blending option dengan variasi warna merah tua dengan hitam (caranya sama seperti sebelumnya)

buatkan lagi bidang kali ini dengan rounded rectangle tool disebelah pojok kiri atas yang nantinya akan kita gunakan untuk input pencarian, beri gradisi warna seperti sebelumnya tambahkan icon pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logo website anda sehingga bagian atas menu tampak seperti gambar berikut

Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren

Mark Up Design dengan xHTML dan CSS 

Sekarang anda sudah memiliki design website yang anda buat sendiri dengan photoshop, nah langkah selanjutnya adalah membuat Mark Up atas Desain yang telah kita buat kedalam xHTML dan CSS, silahkan buka Macromedia Dreamweaver anda. 

Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan nama index.html.

Setiap kita membuat file baru maka akan ditampilkan tag html bawaan, ubah tag <title>Untitled Document</title> yang berfungsi untuk memberi title website pada tab browser sesuai dengan title website yang anda kehendaki.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; 

  charset=iso-8859-1" />

  <title>Welcome | Websiteku</title>

</head>

<body>

</body>

</html>

 

Sebelum melanjutkan XHTML mari kita kembali lagi ke photoshop untuk menyiapkan background dokumen, pastikan save gambar pada photoshop yang telah kita buat dengan ekstensi psd. Delete dulu semua image menu, kemudian pada blending option untuk layout content centang dan ubah color overlay menjadi hitam pekat ( #000000 )

potong atau crop gambar sehingga memiliki ukuran dengan kb yang lebih kecil, buat persis menjadi sebagai berikut dan pastikan layout hitam berada ditengah-tengah..

 

 

Simpan gambar background yang telah di crop dengan nama background.jpg, tempatkan pada direktori image yang terdapat pada direktori index.html. Ingat pada saat menyimpan gambar, gunakanlah save for web sehingga kita bisa mengoptimasi ukuran byte gambar dan gambar lebih cepat untuk di load oleh browser 

kita terapkan CSS untuk Tag body XHTML. Sementara untuk memudahkan kita, terapkan CSS dengan cara internal style sheet dulu baru kemudian setelah semua mark up selesai kita pindahkan menjadi eksternal stylesheet dengan ekstensi tersendiri. bila anda belum paham dengan penerapan CSS silahkan buka artikel saya sebelumnya Pengertian CSS dan Cara Penerapan CSS pada HTML. OK, tambahkan tag CSS berikut dibawah tag title html

<style media="screen">

body {

  margin:0;

  background:#000000 url(images/background.jpg) no-repeat top;

  font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;

}

</style>

 

Penambahan mark up css diatas bila kita lihat di browser akan menampilkan dokumen web sebagai berikut

 

Sekarang kembalikan lagi layout content web menjadi putih kembali ( undo color overlay ) kemudian delete layout background sehingga kita mendapatkan gambar sebagai berikut

klik kanan pada layer kemudian pilih merge visible pastikan bagian tetap transparent persis seperti gambar diatas. Selanjutnya potong gambar dengan crop menjadi tiga bagian, bagian yang harus dipotong dapat anda lihat pada gambar dibawah ditandai dengan warna merah, pastikan presisi pemotongan gambar sama..

simpan (save for web) ketiga gambar yang telah dipotong dengan ekstensi PNG pada folder images.

• Potongan #1 simpan dengan nama bgheader.png
• Potongan #2 simpan dengan nama bgcontent.png
• Potongan #3 simpan dengan nama bgfooter.png

saya tidak memberi patokan ukuran masing-masing potongan, maka dari itu buka semua potongan yang tadi telah disimpan klik kanan pada bagian title kemudian pilih image size untuk mengetahui ukuran pixel potongan anda dan ingat baik-baik ukuran pixel gambar2 tersebut.

Selanjutnya pada style css dibawah body tambahkan kode sebagai berikut

<style media="screen">

.header{

  width: 646px;  

  height: 170px;

  margin: 0;

  background:url(images/bgheader.png) bottom right no-repeat;

}

.content{

  width: 646px;

  margin: 0 auto;

  height:500px;

  background:url(images/bgcontent.png);

}

.container{

  padding : 10px;

}

.footer{

  width: 646px;

  height: 30px;

  margin: 0 auto;

  background:url(images/bgfooter.png) top right no-repeat;

}

</style>

 

Ukuran width dan height pada property css diatas tergantung dari hasil potongan gambar anda, oleh karena itu untuk width dan height-nya jangan mengacu pada kode diatas silahkan mengacu pada gambar anda. 

tambahkan juga tag HTML berikut pada body

<div class="header"></div>

<div class="content">

  <div class="container">&nbsp;</div>

</div>

<div class="footer"></div>

 

Dengan demikian maka tag HTML sekarang menjadi sebagai berikut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; 

  charset=iso-8859-1" />

  <title>Welcome | Websiteku</title>

<style media="screen">

.header{

  width: 646px;  

  height: 170px;

  margin: 0;

  background:url(images/bgheader.png) bottom right no-repeat;

}

.content{

  width: 646px;

  margin: 0 auto;

  height:500px;

  background:url(images/bgcontent.png);

}

.container{

  padding : 10px;

}

.footer{

  width: 646px;

  height: 30px;

  margin: 0 auto;

  background:url(images/bgfooter.png) top right no-repeat;

}

</style>

</head>

<body>

  <div class="header"></div>

  <div class="content">

      <div class="container">&nbsp;</div>

  </div>

  <div class="footer"></div></body>

</html>

 

Tag HTML diatas sementara akan menghasilkan dokumen website seperti gambar dibawah. Apabila tidak tampil seperti gambar dibawah berarti ada yang salah dengan presisi width dan height pada property CSS, trus utak-atik ukuran width dan heightnya hingga mempunyai presisi yang benar.

 

Div dengan atribut class content akan mengikuti isi karena tidak dipatok dengan ukuran height. sedangkan isi content sendiri kita masukan didalam container. bila kita menambahkan beberapa paragraph pada content maka kita akan mendapatkan tampilan sebagai berikut

Ok tutorial membuat website table less dengan photoshop dan dreamweaver bagian pertama hanya sampai disini.. dibagian kedua nanti kita akan belajar membuat menu navigasi dan mengisi kolom content kita sehigga content kita tidak hanya paragraph saja, he.... Bila anda ingin mengetahui dan suka dengan artikel saya ini silahkan subscribe RSS nya. Terimakasih untuk kunjungannya 

Belajar Membuat Website dengan Photoshop dan Dreamweaver

Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Apabila anda sudah memiliki kedua aplikasi tersebut mari kita langsung saja memulai project pembuatan website sederhana.

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau pun mencoba untuk belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website pribadi, yaitu "Websiteku". Websiteku ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali atau SSS, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai. Berikut merupakan hasil jadi dari proyek Websiteku

  

Membuat Disain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut:

Width : 700 pixel

Height : 875 pixel

Resolution : 72 pixel/inch

Background Content : Transparent

 

 

Pilih rounded retangle tool pada tool panel dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah

 

Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :

 

 

buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini

 

 

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya arahkan 25ο dengan move tool kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:

 

 

Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel dengan isi : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo yang sesuai dengan keinginan anda dan judul Website anda. Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut

Gunakan Slicetool kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

 

 

Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web dan akan muncul wizard seperti berikut:

 

 

 

pada opsi dibawah save, ganti format gambar dari gif menjadi png-8 kemudian save, sebelum di save beri nama file anda dengan index dan simpan layout anda pada 1 folder yang anda beri nama Websiteku

 

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.

Mark-Up Tag HTML dengan Dreamweaver

Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

 

 

buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.

 

 

 

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi

 

 

 

Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

 

 

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.

 

<html>

<head>

<title>Untitled-1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.content {

               background:url(images/index_06.png) bottom;

               padding:20px 20px 40px 20px;

}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 

<!-- ImageReady Slices (Untitled-1.psd) -->

<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="94">

<img src="images/index_01.gif" width="281" height="94" alt=""></td>

<td rowspan="4">

<img src="images/index_02.gif" width="419" height="328" alt=""></td>

</tr>

<tr>

<td height="76">

<img src="images/index_03.gif" width="281" height="76" alt=""></td>

</tr>

<tr>

<td height="64">

<img src="images/index_04.gif" width="281" height="64" alt=""></td>

</tr>

<tr>

<td height="94">

<img src="images/index_05.gif" width="281" height="94" alt=""></td>

</tr>

<tr>

<td colspan="2" class="content" ></td>

</tr>

</table>

<!-- End ImageReady Slices -->

</body>

</html>

Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).

 

Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama.

 

 

 

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :

 

 

 

pilih file yang ingin dihubungkan

 

 

 

Lakukan hal yang sama dan hubungkan semua file...

It's done, kini anda mempunyai website yang anda rancang sendiri.

 

 

BAB III

PENUTUP

Kesimpulan

 

Untuk membangun aplikasi Web Semantik ini, hal pertama yang harus dipahami adalah:

Pengertian ontology

XML|XMLS/RDF|RDFS/OWL, toolsnya bisa menggunakan Protégé, Altova SemanticWorks, dll

 

Setelah memahami kedua hal tersebut, kemudian dibuat ontologynya. Tools yang dapat digunakan untuk mengelola ontology , diantaranya (ini seperti server) :

JENA

Sesame (openrdf.org)

Virtuoso, dll

 

Sedangkan bahasa untuk query ontology adalah : SPARQL

 

Sekarang, prinsip web semantik disebut-sebut akan muncul pada Web 3.0, generasi ketiga dari World Wide Web. Bahkan Web 3.0 itu sendiri sering disamakan dengan web semantik. Web semantik menggunakan XML, XMLS (XML Schema), RDF, RDFS (Resources Description Framework Schema) dan OWL.

 

 

Kelebihan pada Web 3.0 (Web Semantik) :

1. Kecepatan berinteraksi antar apps, karena menggunakan sarana HTTP
2. Ketepatan / Keakuratan data, karena data yang dikirim (request) dan diterima (response) semuanya berbasiskan XML
3. Kemudahan, mengola request dan response, karena standar pesan XML
4. Fleksibel, contoh aplikasi PHP mampu berhubungan dengan java, begitu sebaliknya, karena semuanya menggunakan protokol HTTP.
5. Bukti joomla (PHP) kini mampu berhubungan dengan alfresco yang dibangun dengan java
6. Metode : XML-RPC, SOAP, dan REST.

DAFTAR PUSTAKA 

http://www.w3function.com/demo-tutor/bmw/ 

http://www.geocities.ws/arifin/Belajar_Membuat_Website_Semantik_Tanpa_Table.doc&rct=j&frm=1&q=&esrc=s&sa=U&ved=0ahUKEwja0pqN6PnPAhVKMo8KHfIJCKUQFggmMAM&usg=AFQjCNF0tuPtNx6TU9pGgdBFCk04ppiIFA

 

 

 

Read More