ANALISA DAN PERANCANGAN SISTEM

Kamis, 13 Juni 2013

Setting Web Server Pada Cisco Packet Tracer

link from : http://joksun.wordpress.com/category/lain-lain/cisco-packet-tracert/

Sekarang kita akan mencoba untuk membuat jaringan web server…sederhana sih, kita hanya membutuhkan 1 PC dan 1 Server…

Langsung aja coba designkan saya sebuah jaringan web seperti ini…

Gambar 1 : Web Server

Atur IP Address untuk masing-masing computer
Sekarang kita akan mencoba mengatur HTTP pada web server…
Klik 2x web server, masuklah pada tampilan berikut ini…

Gambar 2 : Konfigurasi HTTP

Keterangan :

Sekalian aku buatkan sebuah halaman link html, jadi kita buat dua file , a. index.html dan b. profil.html
Awalnya kita klik tab Config
Kemudian klik tombol HTTP disebelah kiri
pada file name isikan dengan nama “index.html”, nama yang akan tampil jika kita mengaksesnya pada PC01
lalu kita ketikkan script html apa saja, terserah kalian

Gambar 3 : Tampilan profil.html

Jika sudah, coba kita buka web server ini dari computer PC01
Klik 2x PC01, masuk ke tampilan berikut

Gambar 4 : Klik Tab Desktop dan klik Web Browser

Lalu akan tampil jendela browser seperti ini dan coba ketikkan alamat web server tersebut…

Gambar 5 : Tampilan web browser sederhana

Pada address bar / URL ketikkan ip address web server yaitu 192.168.1.1 –> kemudian enter dan lihat apa yang akan terjadi
Jika menu profil diklik lihat juga apa yang akan terjadi…
Oke fren, semoga bermanfaat, selanjutnya akan saya coba bahas DNS atau Domain Name Server

Studi Kasus EIGRP (2 Router)

CISCO, Packet Tracert 15 November 2012 Tinggalkan Komentar

EIGRP (Enhanced Interior Gateway Routing Protocol) adalah Cisco proprietary routing protocol loosely berdasarkan asli IGRP. EIGRP merupakan lanjutan jarak-vector routing protocol, dengan optimasi untuk meminimalkan kedua rute ketidakstabilan yang timbul setelah perubahan topologi, serta penggunaan bandwidth dan proses power dalam router.

Intinya adalah, ketika kita membuat sebuah jaringan kelas yang berbeda atau subnet yang berbeda, akan sangat jelas bahwa kita membutuhkan router.

Perhatikan gambar berikut ini :

Gambar 1 : Design Jaringan EIGRP

Intinya adalah, EIGRP berfungsi untuk menghubungkan router 1 dengan router yang lain dengan cara mengenalkan network-network pada setiap interface yang berada pada router itu sendiri…ya, kurang lebihnya kayak pengaturan gateway pada setiap PC gitu….pembahasan network ini sendiri yang sedikit rumit, disini langsung saja saya pilihkan contoh kasus yang mudah, sedangkan untuk network, akan saya coba membahasnya pada artikel selanjutnya, intinya alamat network itu tidak bisa dipakai pada jaringan sama halnya seperti broadcast…

Langkah-langkah :

Atur ip address PC01 menjadi 192.168.1.2 dengan subnet mask 255.255.255.0 gateway 192.168.1.3
Atur ip address PC02 menjadi 172.10.10.10 dengan subnet mask 255.255.0.0 gateway 172.10.10.20
Klik 2x router dan atur setiap interfacenya dengan masuk pada tab CLI…
Misal pada router 0 :
1. Jika ada pertanyaan awal ketik ‘no’ aja
2. Kemudian Enter dan Enter sampai muncul seperti ini…
3. Router>enable –> ‘mengaktifkan router’
4. Router#configure terminal –> ‘configurasi router’
5. Router(config)#interface fa 0/0 –> ‘mengaktifkan ethernet 0/0’ – sesuaikan dengan pengaturan awal 0/0 atau 0/1’
6. Router(config-if)#ip address 192.168.1.3 255.255.255.0 –> ‘memberikan ip address dan subnet mask’
7. Router(config-if)#no shutdown –> ‘router tidak boleh mati’
8. Router(config-if)#exit –> ‘keluar dari Ethernet 0/0’
9. Router(config)#interface fa 0/1 –> ‘mengaktifkan Ethernet 0/1’
10. Router(config-if)#ip address 192.168.0.1 255.255.255.252 –> ‘memberikan ip address dan subnet mask’
11. Router(config-if)#no shutdown –> ‘router tidak boleh mati’
12. Router(config-if)#exit –> ‘keluar dari Ethernet 0/1’
13. Router(config)#exit –> ‘keluar dari konfigurasi router’
14. Router#write –> ‘menyimpan perintah-perintah sebelumnya agar router dapat berjalan normal’
Lakukan hal yang sama pada router 1 :
1. Jika ada pertanyaan awal ketik ‘no’ aja
2. Kemudian Enter dan Enter sampai muncul seperti ini…
3. Router>enable
4. Router#configure terminal
5. Router(config)#interface fa 0/0
6. Router(config-if)#ip address 172.10.10.20 255.255.0.0
7. Router(config-if)#no shutdown
8. Router(config-if)#exit
9. Router(config)#interface fa 0/1
10. Router(config-if)#ip address 192.168.0.2 255.255.255.252
11. Router(config-if)#no shutdown
12. Router(config-if)#exit
13. Router(config)#exit
14. Router#write
Oke, pengaturan ip addres pada setiap router sudah dilakukan, namun, hal ini tidak serta merta PC01 dan PC02 langsung terhubung, coba aja diping, pasti RTO alias ‘Request Time Out’

Gambar 2 : Nah, kan RTO…

Selanjutnya adalah setting EIGRP…
Pada router 0
1. Press RETURN to get started. –> ‘langsung aja enter’
2. Router>enable –> ‘mengaktifkan router kembali’
3. Router#configure terminal –> ‘masuk pada konfigurasi router’
4. Router(config)#router eigrp 10 –> ‘masuk pada pengaturan router eigrp 10’
5. Router(config-router)#network 192.168.1.0 –> ‘atur network gateway atau fa 0/0’
6. Router(config-router)#network 192.168.0.0 –> ‘atur network fa 0/1’
7. Router(config-router)#exit –> ‘keluar dari konfigurasi router eigrp’
8. Router(config)#exit –> ‘keluar dari konfigurasi router’
9. Router#write –> ‘lakukan penyimpanan’
Lanjut pada router 1
1. Press RETURN to get started. –> ‘langsung aja enter’
2. Router>enable
3. Router#configure terminal
4. Router(config)#router eigrp 10
5. Router(config-router)#network 172.10.0.0
6. Router(config-router)#network 192.168.0.0
7. Router(config-router)#exit
8. Router(config)#exit
9. Router#write
Kalo sudah, sekarang coba kita ping dari pc01 ke pc02…langsung aja ya…

Gambar 3 : nah, kan, sudah reply…alhamdulillah…

Oke fren, semoga bermanfaat ya…

Rabu, 12 Juni 2013

KAMIS ININ

q bingung harus gmna? q terlanjur mnerima tawaran dari tmen q buat bantu dia buatin program eh, skarang mlahan q bingung sndiri dngan program q dan terlalu sibuk dengan program tmen q yang q buat , padahal deadline udah hampir dekat,. hanya alarm yang selalu bsa menyemangati q , q buat status pnyemangat diri sendiri biar gak bosen dengan tekanan batin yang menyiksa ku, huhu, laaahaulaa.., hanya Tuhan yang tahu kpan ini berakhir, sedangkan q hanya bisa berusaha myelesaikan dengan secapat mungkin agar TA ini berakhir. SEMANGAAAAATTTTT!!!!!!!!!!!!!!!!!!................. :) :0 :) :)

Jumat, 23 November 2012

Lebih Dekat Bersama Fitur Baru JavaScript & CSS pada Visual Studio 2012

SEKARANG tentang VB 2012.....
kita coba yuuuuuuuuuuukkkkkk......
penelusuran tetem masih berlanjut,.......
let's together............rencang-rencang...........

Kemampuan Visual Studio sebagai IDE keluaran Microsoft tentu sudah tidak perlu diragukan lagi, dengan segala fitur ‘pintar’ yang ada, otomatisasi pengaturan sana sini membuat pembangunan aplikasi terasa lebih mudah bagi para developer. Bertahun-tahun sudah IDE ini memberikan support terbaiknya untuk pengembangan aplikasi yang berbasis .NET , seperti C++, C#, VB, dll. Namun akan kontras jadinya jika kita membicarakan kemampuannya untuk pengembangkan aplikasi berbasis Web, dengan basis language seperti JavaScript, ASP , CSS, HTML5 dll. Visual Studio seakan-akan setengah hati dalam memberikan support, beberapa fitur utama yang menjadi andalan, seperti intellisense akan sulit ditemui ketika digunakan untuk membangun aplikasi berbasis Web.

Namun apa yang tertulis diatas telah menjadi masa lalu bagi IDE ini, seperti yang telah saya singgung dalam artikel sebelumnya, melalui Visual Studio 2012, Microsoft memperkenalkan kembali Visual Studio sebagai IDE andalan yang secara native telah mendukung pembangunan aplikasi berbasis Web Scripting Language. Artikel ini akan membahas lebih detail fitur baru apa saja yang dapat dirasakan para web developer dengan language JavaScript & CSS melalui IDE Visual Studio 2012 ini

JavaScript

Seberapa besar perbaikan fitur yang hadir untuk mendukung kenyamanan ber-javascript ria? I’ll tell you that it has becoming a very handy tools for us web developer.

Starts from The Small One…

Smart Indentation

Pemberian Indentasi (tulisan menjorok ke dalam) pada sebuah kode lazim dilakukan, selain untuk menunjukan batasan pada suatu struktur syntax, juga berguna untuk merapihkan baris kode sehingga lebih mudah dibaca. Identasi umumnya berjarak 1 “Tab” keyboard, atau bisa juga 4 ketukan “Space Bar” keyboard (4 spasi), melakukannya secara manual tentu merepotkan bagi programmer pemula, pun mungkin sama merepotkannya jika bahasa pemrograman tertentu memiliki aturan indentasi yang ketat (seperti F#)

Untuk itulah pada Visual Studio , terdapat fitur Smart Indentation, dimana ketika membuat baris baru IDE akan melihat konteks kode yang ada dan secara otomatis memberikan indentation yang sesuai berdasarkan analisis tersebut, sehingga tentu saja programmer tidak perlu direpotkan lagi dengan membuat indentasi yang sesuai, Sounds great, huh? Walaupun sebenernya ini bukanlah fitur yang benar-benar baru dari Visual Studio, implementasi fitur ini telah dilakukan pada versi VS lalu untuk bahasa seperti C#, VB, dll. Namun sekali lagi, Web Scripting, contohnya JavaScript seperti di anak tirikan, karena pada versi sebelumnya masih berupa Block Indentation. Tapi... itu dulu, pada Visual Studio 2012 fitur itu telah ada untuk JavaScript.

Bracket Matching

Masih seputar perubahan kecil lainnya, Visual Studio 2012 telah memberikan kemampuan tambahan bagi JavaScript untuk mengenali pasangan curly brace “{“ atau brace “(“ yang ada, tentu hal ini cukup berarti, mengingat kesalahan-kesalahan kecil seperti kurangnya bracket penutup, ataupun lebihnya tentu bukan hal yang asing bagi programmer. Kesalahan kecil namun bisa membuat rambut anda rontok jika harus memperbaikinya, karena mengenali range scope suatu bracket pada code yang berjumlah besar sangatlah merepotkan.

Dengan adanya fitur ‘baru’ ini maka ketika pointer kita arahkan pada suatu bracket, Visual Studio kemudian akan memberikan highlight pada pasangannya seperti yang terlihat pada gambar, cukup membantu bukan? setidaknya dalam menekan resiko pertumbuhan programmer botak.

Code Folding

And…. anothers rebranding feature, serupa dengan 2 fitur sebelumnya, Code Folding pun merupakan fitur yang “baru tidak baru”, karena selain fitur ini telah diimplementasikan pada versi VS lalu juga telah banyak diimplementasikan pada berbagai kode editor umumnya, fitur yang dapat melakukan peringkasan pada suatu fungsi, maupun meng-expand-nya, sehingga hanya menampilkan bagian headernya saja.

Small but worth to mention, doesn’t it?

Comes The Real Deal..

Getting Things done with Intellisense JS

Boleh jadi, fitur ini salah satu yang ditunggu-tunggu, fitur yang sangat membantu bagi para .NET developer, kini hadir untuk para Web Developer, ya. Intellisense merupakan fitur pintar yang dapat memberikansuggesting kepada anda mengenai fungsi terkait apa saja yang tersedia, maupun fungsi apa yang sesuai untuk memanipulasi tipe variabel tertentu.

Mari kita buktikan, berikut ini merupakan screenshot potongan kode yang ditulis di Visual Studio 2012, deklarasi variable string dilakukan sebelumnya, dan ketika kita akan memanipulasi variabel tersebut, Visual Studio hanya akan menampilkan fungsi yang terkait dengan manipulasi type string saja dalam intellisensenya

masih belum percaya? mari tambahkan variabel lagi dengan tipe numeric, dan cermati ketika hal yang sama dilakukan, yang tampil dalam intelisense hanya fungsi untuk memanipulasi tipe data numeric.

and that’s the real deal, fitur ini pasti akan sangat membantu dalam menyelesaikan pekerjaan anda.

Much More Intellisense for Third party JS Library : jQuery!

Apa jadinya jika fitur pintar tersebut dapat juga mendukung eksternal library? atau non standard library. Tentunya akan sangat menarik bukan? ya.. kesenangan memang tidak berhenti hanya sampai situ, yang sangat sangat menarik adalah, kemampuan intellisense ini juga mendukung library pihak ketiga, apalagi kalau bukan library JavaScript terpopuler yaitu jQuery. Cukup ketikan simbol ala jQuery ‘$(‘ pada editor JavaScript, kemudian Visual Studio akan tampil dengan dokumentasi lengkapnya.

tidak hanya itu, coba lanjutkan kode tersebut, maka otomatis intellisense akan menampilkan pilihan yang sesuai dengan format anda, sama seperti layaknya JavaScript

seemingly integrated, oh.. what a great feature

Documentation

Fungsi yang baik adalah fungsi yang disertai dokumentasi kegunaan, minimal baris komentar yang menjelaskan kegunaanya, mungkin akan menyenangkan jika fungsi yang kita tulis muncul dalam fitur intellisense lengkap dengan dokumentasi yang kita buat, terdengar menarik? percayalah hal itu mungkin, dan mudah untuk dilakukan.

Sangat simple, cukup tambahkan double flash seperti komentar pada umumnya, dan baris komentar itu akan muncul seperti dokumentasi intellisense lainnya, that’s all? yes it is.

Penasaran dengan suatu fungsi? take a look at Go to Definition Features

Pengguna C# di Visual Studio mungkin sudah terbiasa dengan fitur yang satu ini, fitur yang dapat membantu anda untuk jump in ke asal muasal suatu fungsi, sehingga memudahkan dalam mengetahui alur kode sekaligus melakukan debuging. Sekarang fitur ini telah hadir untuk JavaScript, cukup arahkan pointer pada suatu fungsi, dan tekan F12, secara otomatis, Visual Studio akan membawa anda menuju file tempat fungsi tersebut berasal.

Satu hal yang menjadi catatan, untuk bisa berjalan, anda harus menambahkan reference pada file .js bersangkutan, caranya? cukup drag n drop saja, dan dengan otomatis Visual Studio akan menambahkan baris kode seperti dibawah atau bisa juga menyimpannya pada file global yaitu _references.js.

CSS

Selesai dengan JavaScript, bagian berikut ini akan menyinggung dua fitur penting CSS di Visual Studio 2012

CSS Vendor Spesific Intellisense

Menulis hal yang sama berulang-ulang itu membosankan, mungkin sama membosankannya dengan web developer yang harus menulis code CSS berulang kali hanya untuk menampilkan style yang sama. Ya… membosankan,namun hal Ini lumrah karena tiap browser memiliki aturan sendiri agar style tersebut dapat berjalan, itu yang mengharuskan mereka menulis ekstra kode yang intinya sih untuk satu style itu, namun dengan bentuk penulisan yang sedikit berbeda.

Seakan mengerti kebutuhan tersebut, Visual Studio 2012 hadir dengan fitur CSS Vendor Spesific Intellisense, coba anda lihat potongan kode di bawah ini

hey i know that code, so what?

ini bagian menariknya, code diatas terbentuk secara otomatis, ketika anda berniat membuat style transform rotate, cukup ketikan sebagian, maka fitur intellisense akan melengkapinya untuk anda dan ditambah, fitur ini akan otomatis memasukan baris kode tambahan agar style tersebut dapat berjalan di semua browser, keren bukan? hilang sudah pekerjaan membosankan itu.

CSS Color Editor

Terkadang para web developer terkendala penentuan warna, bukan baju, namun kode warna untuk css, biasanya kalau master design tidak tersedia, atau hanya berupa gambar, seringkali diperlukan tools tambahan untuk mendapatkan kode warna yang sesuai. namun visual studio 2012 telah mengintegrasikan toolstersebut,sehingga anda cukup menekan ctrl + space atau menuliskan kode color dan secara otomatis css editor akan menampilkan color picker

and.. that’s all about javascript & css on visual studio 2012, silahkan anda nilai sendiri, sudah cukup membantukah fitur tersebut bagi anda? jika penasaran, saya sarankan anda buktikan sendiri, dan rasakan kemudahannya.

try it and love it.. see you on the next article, folks.

artikel ini dipersembahkan oleh :

http://students.netindonesia.net/blogs/awwal_m/archive/2012/08/25/lebih-dekat-bersama-fitur-baru-javascript-amp-css-pada-visual-studio-2012.aspx

terimakasih banget buat link2..., yang udah ketemu...,

jangan lupa ya teman... "IKATLAH ILMU KITA DENGAN MENULISNYA , KARENA SETIAP GORESANNYA AKAN SELALU TERASA..... :)" GOOD LUCK....FRIENDS...

CSS Fallback untuk Manipulasi Bagian Komentar

lagi-lagi KOPAS, kali ini kopas
kali ini kulo KOPAS tentang javascript, itung-itung buat belajar n reverensi biar tambah mudeng, soale newbie + banget+bgt....

Ini mengenai manipulasi bagian komentar Blogger yang pernah Saya tuliskan di sini dan di sini. Seperti yang kita tahu bahwa JavaScript memiliki satu keterbatasan karena setiap peramban memiliki akses untuk menonaktifkannya. Sehingga kita harap kita bisa memberikan semacam fallback atau sikap cadangan pada blog kita saat sesuatu yang tidak kita inginkan pada JavaScript terjadi. Di sini Saya sudah membuat kode CSS untuk fallback tampilan jika suatu saat JavaScript mengalami konflik atau dinonaktifkan oleh pembaca. Dengan cara ini maka meskipun JavaScript telah dinonaktifkan, atau mengalami konflik dengan JavaScript yang lain, tampilan manipulasi komentar Anda akan tetap tampak rapi:

#comments i[rel="code"] {
  font:normal 12px Monaco,Monospace !important;
  font-style:normal;
  color:blue;
}

#comments i[rel="pre"] {
  display:block;
  background-color:#333;
  font:normal 12px Monaco,Monospace !important;
  color:white;
  white-space:pre;
  word-wrap:normal !important;
  overflow:auto;
  padding:0.5em 1em;
  margin:10px 0px;    
}

#comments i[rel="image"],
a[href*="http://www.youtube.com/embed"] {
  display:block;
  margin:20px auto;
  width:120px;
  height:100px;
  border:2px solid black;
  position:relative;
  overflow:hidden;    
}

#comments i[rel="image"]:before,
a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this image!";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:red;
  padding:10px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  text-decoration:none;      
}

a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this video!";   
}

#comments b[rel="quote"] {
  font-weight:normal;
  display:block;
  background-color:pink;
  padding:10px 15px;
  margin:10px auto;    
}

#comments b[rel^="h"] {
  display:block;
  margin-bottom:10px;
}

#comments b[rel="h1"] {font-size:240%;}
#comments b[rel="h2"] {font-size:200%;}
#comments b[rel="h3"] {font-size:140%;}
#comments b[rel="h4"] {font-size:120%;}
#comments b[rel="h5"] {font-size:100%;}
#comments b[rel="h6"] {font-size:60%; }

Pada intinya adalah kita menggunakan CSS untuk mengubah semua tampilan elemen-elemen pemicu manipulasi agar "tampak"sebagai elemen-elemen yang akan menggantikannya nanti. Begitu saja. Bahkan jika Anda belum bisa menerapkan manipulasi komentar yang pernah Saya tuliskan itu, menggunakan teknik ini saja sebenarnya juga sudah cukup.

Kode di atas hanya sebagai contoh saja, karena yang harus menjadi perhatian utama Anda adalah selektornya. Untuk memastikan agar tampilan fallback tampak sama dengan tampilan default elemen

, ,

dan tag-tag yang akan menjadi pengganti lainnya, akan lebih baik jika Anda menuliskan selektor-selektor CSS3 tersebut di samping elemen yang dikehendaki JavaScript seperti ini:

pre, #comments i[rel="pre"] {
  /* tampilan default tag pre... */
}

blockquote, #comments b[rel="quote"] {
  /* tampilan default tag blockquote... */
}

h1, #comments b[rel="h1"] { /* tampilan default tag h1... */ }
h2, #comments b[rel="h2"] { /* tampilan default tag h2... */ }
h3, #comments b[rel="h3"] { /* tampilan default tag h3... */ }
h4, #comments b[rel="h4"] { /* tampilan default tag h4... */ }
h5, #comments b[rel="h5"] { /* tampilan default tag h5... */ }
h6, #comments b[rel="h6"] { /* tampilan default tag h6... */ }

Dan seterusnya... Saya harap Anda mengerti maksud Saya.

Saya menyadari ini saat Saya iseng mencoba menerjemahkan blog Saya ke bahasa Inggris menggunakan Google Translate dan ternyata sistem manipulasi komentar untuk mengubah tag dan menjadi tag lain pada blog Saya tidak bekerja. Tapi dengan ini semua bisa teratasi :)

artikel diatas saya ambil dari link :
http://hompimpaalaihumgambreng.blogspot.com/2012/04/css-fallback-untuk-manipulasi-bagian.html
semoga bermanfaat ya......
"IKATLAH ILMU DENGAN MENULISNYA"

CSS Fallback untuk Manipulasi Bagian Komentar

lagi-lagi KOPAS, kali ini kopas
kali ini kulo KOPAS tentang javascript, itung-itung buat belajar n reverensi biar tambah mudeng, soale newbie + banget+bgt....

#comments i[rel="code"] {
  font:normal 12px Monaco,Monospace !important;
  font-style:normal;
  color:blue;
}

#comments i[rel="pre"] {
  display:block;
  background-color:#333;
  font:normal 12px Monaco,Monospace !important;
  color:white;
  white-space:pre;
  word-wrap:normal !important;
  overflow:auto;
  padding:0.5em 1em;
  margin:10px 0px;    
}

#comments i[rel="image"],
a[href*="http://www.youtube.com/embed"] {
  display:block;
  margin:20px auto;
  width:120px;
  height:100px;
  border:2px solid black;
  position:relative;
  overflow:hidden;    
}

#comments i[rel="image"]:before,
a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this image!";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:red;
  padding:10px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  text-decoration:none;      
}

a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this video!";   
}

#comments b[rel="quote"] {
  font-weight:normal;
  display:block;
  background-color:pink;
  padding:10px 15px;
  margin:10px auto;    
}

#comments b[rel^="h"] {
  display:block;
  margin-bottom:10px;
}

#comments b[rel="h1"] {font-size:240%;}
#comments b[rel="h2"] {font-size:200%;}
#comments b[rel="h3"] {font-size:140%;}
#comments b[rel="h4"] {font-size:120%;}
#comments b[rel="h5"] {font-size:100%;}
#comments b[rel="h6"] {font-size:60%; }

, ,

dan tag-tag yang akan menjadi pengganti lainnya, akan lebih baik jika Anda menuliskan selektor-selektor CSS3 tersebut di samping elemen yang dikehendaki JavaScript seperti ini:

pre, #comments i[rel="pre"] {
  /* tampilan default tag pre... */
}

blockquote, #comments b[rel="quote"] {
  /* tampilan default tag blockquote... */
}

h1, #comments b[rel="h1"] { /* tampilan default tag h1... */ }
h2, #comments b[rel="h2"] { /* tampilan default tag h2... */ }
h3, #comments b[rel="h3"] { /* tampilan default tag h3... */ }
h4, #comments b[rel="h4"] { /* tampilan default tag h4... */ }
h5, #comments b[rel="h5"] { /* tampilan default tag h5... */ }
h6, #comments b[rel="h6"] { /* tampilan default tag h6... */ }