<form method=”post” name=”guestform“>
<table width=”550″ border=”0″ cellpadding=”2″ cellspacing=”1″>
<tr>
<td width=”100″>Name *</td> <td>
<input name=”txtName” type=”text” size=”30″ maxlength=”30″></td>
</tr>
<tr>
<td width=”100″>Email</td>
<td>
<input name=”txtEmail” type=”text” size=”30″ maxlength=”50″></td>
</tr>
<tr>
<td width=”100″>Website URL</td>
<td>
<input name=”txtUrl” type=”text” value=”http://” size=”30″ maxlength=”50″></td>
</tr>
<tr>
<td width=”100″>Message *</td> <td>
<textarea name=”mtxMessage” cols=”80″ rows=”5″></textarea></td>
</tr>
<tr>
<td width=”100″> </td>
<td>
<input name=”btnSign” type=”submit” value=”Sign Guestbook” onClick=”return checkForm();”></td>
</tr>
</table>
</form>
Guest book example
May 16, 2008RFC 2616 – Hypertext Transfer Protocol — HTTP/1.1
May 16, 2008Komunikasi ‘Low-Level’ dengan Server HTTP
May 16, 2008Server Eksternal (www.google.co.id)
Hasil telnet port 80:
<html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859
-1"><title>Google</title><style>body,td,a,p,.h{font-family:arial,sans-serif}.h{f
ont-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collaps
e:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,
.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;heigh
t:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs
.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}
.pgtab:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px
}.pgtabside{width:3px;background-position:-404px 0}.iconl{overflow:hidden;height
:px;width:px;position:relative}#gbar{float:left;height:22px;padding-left:2px}.gb
h,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absol
ute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px soli
d;border-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#g
user{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !
important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top
}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:
absolute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decor
ation:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style><
script>window.google={kEI:"-wctSILTF6OwwQGx3I2aDg",kEXPI:"17259,17735",kHL:"en"}
;
function sf(){document.f.q.focus()}
window.gbar={};(function(){var c=window.gbar
,e,g,h;c.qs=function(a){var d=window.encodeURIComponent&&(document.forms[0].q||”
“).value;if(d)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(f,b){return(b||”&
“)+”q=”+encodeURIComponent(d)})};function l(a,d,f){a.display=h?”none”:”block”;a.
left=d+”px”;a.top=f+”px”}c.tg=function(a){var d=0,f=0,b,m=0,n,j=window.navExtra,
k,i=document;g=g||i.getElementById(”gbar”).getElementsByTagName(”span”);(a||wind
ow.event).cancelBubble=!m;if(!e){e=i.createElement(Array.every||window.createPop
up?”iframe”:”DIV”);e.frameBorder=”0″;e.scrolling=”no”;e.src=”#”;g[7].parentNode.
appendChild(e).id=”gbi”;if(j&&g[7])for(n in j){k=i.createElement(”span”);k.appen
dChild(j[n]);g[7].parentNode.insertBefore(k,g[7]).className=”gb2″}i.onclick=c.cl
ose}while(b=g[++m]){if(f){l(b.style,f+1,d+25);d+=b.firstChild.tagName==”DIV”?9:2
0}if(b.className==”gb3″){do f+=b.offsetLeft;while(b=b.offsetParent)}}e.style.hei
ght=d+”px”;l(e.style,f,24);h=!h};c.close=function(a){h&&c.tg(a)}})();</script></
head><body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000
onload=”sf();if(document.images){new Image().src=’/images/nav_logo3.png’}” topm
argin=3 marginheight=3><div id=gbar><nobr><span class=gb1><b>Web</b></span> <spa
n class=gb1><a href=”http://images.google.com/imghp?hl=en&tab=wi” onclick=gbar.q
s(this)>Images</a></span> <span class=gb1><a href=”http://maps.google.com/maps?h
l=en&tab=wl” onclick=gbar.qs(this)>Maps</a></span> <span class=gb1><a href=”http
://news.google.com/nwshp?hl=en&tab=wn” onclick=gbar.qs(this)>News</a></span> <sp
an class=gb1><a href=”http://www.google.com/prdhp?hl=en&tab=wf” onclick=gbar.qs(
this)>Shopping</a></span> <span class=gb1><a href=”http://mail.google.com/mail/?
hl=en&tab=wm”>Gmail</a></span> <span class=gb3><a href=”http://www.google.com/in
tl/en/options/” onclick=”this.blur();gbar.tg(event);return !1″><u>more</u> <smal
l>▼</small></a></span> <span class=gb2><a href=”http://video.google.com/?h
l=en&tab=wv” onclick=gbar.qs(this)>Video</a></span> <span class=gb2><a href=”htt
p://groups.google.com/grphp?hl=en&tab=wg” onclick=gbar.qs(this)>Groups</a></span
> <span class=gb2><a href=”http://books.google.com/bkshp?hl=en&tab=wp” onclick=g
bar.qs(this)>Books</a></span> <span class=gb2><a href=”http://scholar.google.com
/schhp?hl=en&tab=ws” onclick=gbar.qs(this)>Scholar</a></span> <span class=gb2><a
href=”http://finance.google.com/finance?hl=en&tab=we” onclick=gbar.qs(this)>Fin
ance</a></span> <span class=gb2><a href=”http://blogsearch.google.com/?hl=en&tab
=wb” onclick=gbar.qs(this)>Blogs</a></span> <span class=gb2><div></div></a></spa
n> <span class=gb2><a href=”http://www.youtube.com/?hl=en&tab=w1″ onclick=gbar.q
s(this)>YouTube</a></span> ….deleted
Hasil lewat Firefox:
<html><head><meta http-equiv=“content-type” content=“text/html; charset=UTF-8″>< title>Google</title><style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-s ize:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:col lapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgta bside{text-align:center;text-decoration:none;color:#00c;display:block;height:27p x;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}.pgta b:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px}.pgt abside{width:3px;background-position:-404px 0}.iconl{overflow:hidden;height:px;w idth:px;position:relative}#gbar{float:left;height:22px;padding-left:2px}.gbh,.gb 2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;t op:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;bor der-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#guser{ padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !impor tant}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:absol ute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration :none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style><scrip t>window.google={kEI:”aQstSISuK4PO1QbRptDpBQ”,kEXPI:”0″,kHL:”en”}; function sf(){document.f.q.focus()} window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||e scape;(new Image).src=”/url?sa=T”+(c?”&oi=”+a(c):”")+(d?”&cad=”+a(d):”")+”&ct=”+ a(e)+”&cd=”+a(f)+(b?”&url=”+a(b.replace(/#.*/,”")).replace(/\+/g,”%2B”):”")+”&ei =aQstSISuK4PO1QbRptDpBQ”+g}return true}; window.gbar={};(function(){var c=window.gbar,e,g,h;c.qs=function(a){var d=window .encodeURIComponent&&(document.forms[0].q||”").value;if(d)a.href=a.href.replace( /([?&])q=[^&]*|$/,function(f,b){return(b||”&”)+”q=”+encodeURIComponent(d)})};fun ction l(a,d,f){a.display=h?”none”:”block”;a.left=d+”px”;a.top=f+”px”}c.tg=functi on(a){var d=0,f=0,b,m=0,n,j=window.navExtra,k,i=document;g=g||i.getElementById(” gbar”).getElementsByTagName(”span”);(a||window.event).cancelBubble=!m;if(!e){e=i .createElement(Array.every||window.createPopup?”iframe”:”DIV”);e.frameBorder=”0″ ;e.scrolling=”no”;e.src=”#”;g[7].parentNode.appendChild(e).id=”gbi”;if(j&&g[7])f or(n in j){k=i.createElement(”span”);k.appendChild(j[n]);g[7].parentNode.insertB efore(k,g[7]).className=”gb2″}i.onclick=c.close}while(b=g[++m]){if(f){l(b.style, f+1,d+25);d+=b.firstChild.tagName==”DIV”?9:20}if(b.className==”gb3″){do f+=b.off setLeft;while(b=b.offsetParent)}}e.style.height=d+”px”;l(e.style,f,24);h=!h};c.c lose=function(a){h&&c.tg(a)}})();</script></head><body bgcolor=#ffffff text=#000 000 link=#0000cc vlink=#551a8b alink=#ff0000 onload=“sf();if(document.images){ne w Image().src=’/images/nav_logo3.png’}” topmargin=3 marginheight=3><div id=gbar> <nobr><span class=gb1><b>Web</b></span> <span class=gb1><a href=“http://images.g oogle.com/imghp?hl=en&tab=wi” onclick=gbar.qs(this)>Images</a></span> <span clas s=gb1><a href=“http://maps.google.com/maps?hl=en&tab=wl” onclick=gbar.qs(this)>M aps</a></span> <span class=gb1><a href=“http://news.google.com/nwshp?hl=en&tab=w n” onclick=gbar.qs(this)>News</a></span> <span class=gb1><a href=“http://www.goo gle.com/prdhp?hl=en&tab=wf” onclick=gbar.qs(this)>Shopping</a></span> <span clas s=gb1><a href=“http://mail.google.com/mail/?hl=en&tab=wm”>Gmail</a></span> <span class=gb3><a href=“http://www.google.com/intl/en/options/” onclick=“this.blur() ;gbar.tg(event);return !1″><u>more</u> <small>▼</small></a></span> <span c lass=gb2><a href=“http://video.google.com/?hl=en&tab=wv” onclick=gbar.qs(this)>V ideo</a></span> <span class=gb2><a href=“http://groups.google.com/grphp?hl=en&ta b=wg” onclick=gbar.qs(this)>Groups</a></span> <span class=gb2><a href=“http://bo oks.google.com/bkshp?hl=en&tab=wp” onclick=gbar.qs(this)>Books</a></span> <span class=gb2><a href=“http://scholar.google.com/schhp?hl=en&tab=ws” onclick=gbar.qs (this)>Scholar</a></span> <span class=gb2><a href=“http://finance.google.com/fin ance?hl=en&tab=we” onclick=gbar.qs(this)>Finance</a></span> <span class=gb2><a h ref=“http://blogsearch.google.com/?hl=en&tab=wb” onclick=gbar.qs(this)>Blogs</a> </span> <span class=gb2><div></div></a></span> <span class=gb2><a href=“http://w ww.youtube.com/?hl=en&tab=w1″ onclick=gbar.qs(this)>YouTube</a></span>
Komunikasi ‘Low-Level’ dengan Server SMTP
May 16, 2008[log telnet dan screenshot]
Server Internal
Perintah:
telnet 167.205.1.73 25
Output:
Trying 167.205.1.73... Connected to s.itb.ac.id (167.205.1.73). Escape character is '^]'. 220 mx5.itb.ac.id smtp gateway Eksternal Ready helo s.itb.ac.id 250 students.itb.ac.id mail from:fakesender@fakeserver.net 250 Ok rcpt to:byz_ariy@students.itb.ac.id 250 Ok data 354 End data with <CR><LF>.<CR><LF> subject:This is a fake email. Fake email. Fake email. . 250 Ok: queued as 5523E11AE97 quit 221 Bye
Screenshootnya:
Server Eksternal
Secara umum perintah dan output yang dihasilkan sama saja. Hanya saja karena koneksi internet di ITB harus lewat proksi, telnet ke situs luar tidak akan tersambung begitu saja. Harus numpang dulu ke server yang punya koneksi internet ke luar.
Tag CSS
May 2, 2008Background
|
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 |
Border
|
Property |
Deskripsi |
Values |
| border | Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi | border-width border-style border-color |
| border-bottom | Mengeset semua properti untuk bottom-border (yang bawah aja) dalam satu deklarasi | border-bottom-width border-style border-color |
| border-bottom-color | Mengeset warna dari bottom-border | border-color |
| border-bottom-style | Mengeset style dari bottom border | border-style |
| border-bottom-width | Mengeset ketebalan dari garis bottom-border | thin medium thick length |
| border-color | Mengeset warna dari keseluruhan border | color |
| border-left | Mengeset semua properti untuk left-border (yang kiri aja) dalam satu deklarasi | border-left-width border-style border-color |
| border-left-color | Mengeset warna dari left-border | border-color |
| border-left-style | Mengeset style dari left-border | border-style |
| border-left-width | Mengeset ketebalan dari garis left-border | thin medium thick length |
| border-right | Mengeset semua properti untuk right-border (yang kanan aja) dalam satu deklarasi | border-right-width border-style border-color |
| border-right-color | Mengeset warna dari right-border | border-color |
| border-right-style | Mengeset style dari right-border | border-style |
| border-right-width | Mengeset ketebalan dari garis right-border | thin medium thick length |
| border-style | Mengeset style dari keseluruhan border | none hidden dotted dashed solid double groove ridge inset outset |
| border-top | Mengeset semua properti untuk top-border (yang atas aja) dalam satu deklarasi | border-top-width border-style border-color |
| border-top-color | Mengeset warna dari top-border | border-color |
| border-top-style | Mengeset style dari top-border | border-style |
| border-top-width | Mengeset ketebalan dari garis top-border | thin medium thick length |
| border-width | Mengeset ketebalan dari keseluruhan border; terdapat empat jenis ketebalan | thin medium thick length |
Classification
|
Property |
Deskripsi |
Values |
| clear | Mengeset sisi dari sebuah elemen dimana elemen ngambang lainnya tidak diperbolehkan | left right both none |
| cursor | Menspesifikasi kursor yang ditampilkan | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
| display | Mengeset apakah/bagaimana suatu elemen ditampilkan | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
| float | Mengeset dimana sebuah gambar atau teks dimunculkan pada elemen lain | left right none |
| position | Mengeset penempatan elemen sebagai posisi yang static, relative, absolute atau fixed | static relative absolute fixed |
| visibility | Mengeset apakah suatu elemen ditampilkan atau tidak | visible hidden collapse |
Dimension
|
Property |
Deskripsi |
Values |
| height | Mengeset tinggi dari sebuah elemen | auto length % |
| line-height | Mengeset jarak antar garis pada elemen | normal number length % |
| max-height | Mengeset tinggi maksimal dari elemen | none length % |
| max-width | Mengeset lebar maksimal dari elemen | none length % |
| min-height | Mengeset tinggi minimal dari elemen | length % |
| min-width | Mengeset lebar minimal dari elemen | length % |
| width | Mengeset lebar dari suatu elemen | auto % length |
Font
|
Property |
Deskripsi |
Values |
| font | Mengeset semua properti untuk font(huruf) dalam satu deklarasi | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
| font-family | Prioritas list untuk font family dan/atau generic pada suatu elemen | family-name generic-family |
| font-size | Mengset ukuran dari font | xx-small x-small small medium large x-large xx-large smaller larger length % |
| font-size-adjust | Menspesifikasi aspek nilai untuk sebuah elemen yang akan mempertahankan tinggi-x dari font pilihan pertama | none number |
| font-stretch | Memadatakan atau melonggarkan font-family yang digunakan | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
| font-style | Mengeset style dari font | normal italic oblique |
| font-variant | Menampilkan teks dalam small-caps font atau normal font | normal small-caps |
| font-weight | Mengeset ketebalan huruf | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
Generated Content
|
Property |
Deskripsi |
Values |
| content | Membuat konten dalam dokumen. Digunakan bersama pseudo-element :before dan :after | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |
| counter-increment | Mengeset berapa banyak suatu counter menambahkan pada tiap aksi pada selektor | none identifier number |
| counter-reset | Mengeset nilai yang counter set pada tiap aksi pada selektor | none identifier number |
| quotes | Mengeset tipe dari quote | none string string |
List and Marker
|
Property |
Deskripsi |
Values |
| list-style | Mengeset semua properti untuk sebuah list dalam satu deklarasi | list-style-type list-style-position list-style-image |
| list-style-image | Mengeset gambar sebagai list-item marker | none url |
| list-style-position | Mengeset dimana list-item marker ditempatkan pada list | inside outside |
| list-style-type | Mengeset tipe dari list-item marker | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
| marker-offset | auto length |
Margin
|
Property |
Deskripsi |
Values |
| margin | Mengeset semua properti untuk margin dalam satu deklarasi | margin-top margin-right margin-bottom margin-left |
| margin-bottom | Mengeset batasan bawah dari elemen | auto length % |
| margin-left | Mengeset batasan kiri dari elemen | auto length % |
| margin-right | Mengeset batasan kanan dari elemen | auto length % |
| margin-top | Mengeset batasan atas dari elemen | auto length % |
Outlines
|
Property |
Deskripsi |
Values |
| outline | Mengeset semua properti untuk outline dalam satu deklarasi | outline-color outline-style outline-width |
| outline-color | Mengeset warna dari outline elemen | color invert |
| outline-style | Mengeset style outline dari elemen | none dotted dashed solid double groove ridge inset outset |
| outline-width | Mengeset ketebalan outline dari elemen | thin medium thick length |
Padding
|
Property |
Deskripsi |
Values |
| padding | Mengeset semua properti untuk padding (bloknot) dalam satu deklarasi |
padding-top padding-right padding-bottom padding-left |
| padding-bottom | Mengeset pad bagian bawah dari elemen | length % |
| padding-left | Mengeset pad bagian kiri dari elemen | length % |
| padding-right | Mengeset pad bagian kanan dari elemen | length % |
| padding-top | Mengeset pad bagian atas dari elemen | length % |
Positioning
|
Property |
Deskripsi |
Values |
| bottom | mengeset sejauh mana pojok bawah elemen di atas atau di bawah dari pojok bawah parent element | auto % length |
| clip | Mengeset bentuk dari elemen. Elemen diclip menjadi bentuk ini, dan ditampilkan | shape auto |
| left | Mengeset sejauh mana pojok kiri dari elemen di kiri/kanan tepi kiri parent element | auto % length |
| overflow | Mengeset apa yang terjadi jika konten dari elemen melebihi area elemen | visible hidden scroll auto |
| position | Menempatkan elemen dengan posisi static, relative, absolute, atau fixed | static relative absolute fixed |
| right | Mengeset sejauh mana pojok kanan dari elemen di kiri/kanan dari pojok kanan parent element | auto % length |
| top | Sets how far the top edge of an element is above/below the top edge of the parent element | auto % length |
| vertical-align | Sets the vertical alignment of an element | baseline sub super top text-top middle bottom text-bottom length % |
| z-index | Sets the stack order of an element | auto number |
Table
|
Property |
Deskripsi |
Values |
| border-collapse | Mengeset apakah border tabel collapse pada satu border atau terpisah sesuai standar HTML | collapse separate |
| border-spacing | Mengeset jarak yang memisahkan border sel (khusus untuk model separate-border) | length length |
| caption-side | Mengeset posisi dari judul tabel | top bottom left right |
| empty-cells | Megeset apakah sel kosong ditampilkan pada tabel atau tidak (khusus untuk model separate-border) | show hide |
| table-layout | Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom | auto fixed |
Text
|
Property |
Deskripsi |
Values |
| color | Mengeset warna teks | color |
| direction | Mengeset arah teks | ltr rtl |
| line-height | Mengeset jarak antar garis | normal number length % |
| letter-spacing | Menambah atau mengurangi jarak antar karakter | normal length |
| text-align | Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen | left right center justify |
| text-decoration | Menambah dekorasi pada teks | none underline overline line-through blink |
| text-indent | Mengindentasikan baris pertama teks pada elemen | length % |
| text-shadow | none color length |
|
| text-transform | Mengontrol huruf pada elemen | none capitalize uppercase lowercase |
| unicode-bidi | normal embed bidi-override |
|
| white-space | Mengeset bagaimana ruang putih di dalam elemen ditangani | normal pre nowrap |
| word-spacing | Menambah atau mengurangi jarak antar kata | normal length |
Pseudo-classes
|
Pseudo-class |
Kegunaan |
| :active | Menambahkan spesial style kepada elemen yang aktif |
| :focus | Menambahkan spesial style kepada elemen selama elemen sedang fokus |
| :hover | Menambahkan spesial style kepada elemen saat cursor berada di atas elemen tersebut |
| :link | Menambahkan spesial elemen kepada link yang belum kena hit |
| :visited | Menambahkan spesial style kepada link yang telah dihit |
| :first-child | Menambah spesial style pada elemen yang merupakan child pertama dari gabungan beberapa elemen lainnya |
| :lang | Membolehkan pemilik(author) untuk menentukan bahasa yang digunakan pada elemen tertentu |
Pseudo-elements
|
Pseudo-element |
Kegunaan |
| :first-letter | Menambahkan style spesial pada huruf pertama sebuah teks |
| :first-line | Menambah spesial style pada baris pertama sebuah teks |
| :before | Menyisipkan suatu konten sebelum elemen |
| :after | Menyisipkan suatu konten setelah elemen |
Tag HTML
May 2, 2008| Tag | Description | DTD |
|---|---|---|
| <!–…–> | Mendefinisikan komentar | STF |
| <!DOCTYPE> | Mendefinisikan tipe dokumen | STF |
| <a> | Mendefinisikan sebuah anchor | STF |
| <abbr> | Mendefinisikan singkatan | STF |
| <acronym> | Mendefinisikan akronim | STF |
| <address> | Mendefinisikan elemen alamat | STF |
| <applet> | Mendefinisikan applet (tidak digunakan lagi) | TF |
| <area> | Mendefinisikan sebuah area dalam image map | STF |
| <b> | Memberi style bold pada teks | STF |
| <base> | Mendefinisikan base URL untuk semua link pada halaman | STF |
| <basefont> | Mendifinisikan base font (tidak digunakan lagi) |
TF |
| <bdo> | Mendefinisikan arah display teks | STF |
| <big> | Membuat teks menjadi berukuran besar | STF |
| <blockquote> | Membuat kutipan panjang | STF |
| <body> | Mendefinisikan elem bodi | STF |
| <br> | Memasukkan line break single | STF |
| <button> | Membuat push button | STF |
| <caption> | Mendefinisikan table caption | STF |
| <center> | Membuat teks berada di tengah (tidak digunakan lagi) | TF |
| <cite> | Membuat kutipan | STF |
| <code> | Membuat kode bahasa komputer | STF |
| <col> | Mendefinisikan atribut untuk kolom pada tabel | STF |
| <colgroup> | Mendefinisikan grup pada kolom tabel | STF |
| <dd> | Mendefinisikan deskripsi pada definisi (?_?) | STF |
| <del> | Mendefinisikan teks yang didelete | STF |
| <dir> | Membuat directory list (tidak digunakan lagi) | TF |
| <div> | Mendefinisikan sebuah bagian pada dokumen | STF |
| <dfn> | Mendefinisikan sebuah istilah definisi | STF |
| <dl> | Membuat sebuah daftar definisi | STF |
| <dt> | Membuat sebuah istilah definisi | STF |
| <em> | Membuat sebuah teks ter-emphasize | STF |
| <fieldset> | Membuat sebuah fieldset | STF |
| <font> | Menentukan jenis, warna, dan tipe huruf (tidak digunakan lagi) | TF |
| <form> | Membuat sebuah form | STF |
| <frame> | Membuat sebuah frame | F |
| <frameset> | Mendefinisikan set frame | F |
| <h1> to <h6> | Mendefinisikan header satu sampai enam | STF |
| <head> | Memberikan informasi tentang dokumen | STF |
| <hr> | Memberikan ukuran horizontal | STF |
| <html> | Membuat sebuah dokumen HTML | STF |
| <i> | Membuat teks dengan style italic | STF |
| <iframe> | Membuat inline frame | TF |
| <img> | Mendefinisikan sebuah image | STF |
| <input> | Mendefinisikan sebuah input field | STF |
| <ins> | Mendefinisikan teks yang di insert | STF |
| <isindex> | Mendefinisikan sebuah single-line input field (tidak digunakan lagi) | TF |
| <kbd> | Mendefinisikan teks keyboard | STF |
| <label> | Mendefinisikan label untuk form control | STF |
| <legend> | Mendefinisikan judul dalam fieldset | STF |
| <li> | Mendefinisikan list item | STF |
| <link> | Mendefinisikan referensi/daftar pustaka | STF |
| <map> | Mendefinisikan sebuah image map | STF |
| <menu> | Membuat sebuah menu list (tidak digunakan lagi) | TF |
| <meta> | Mendefinisikan sebuah meta information | STF |
| <noframes> | Mendefinisikan sebuah bagian noframe | TF |
| <noscript> | Mendefinisikan sebuah bagian noscript | STF |
| <object> | Mendefinisikan sebuah objek | STF |
| <ol> | Membuat sebuah ordered list | STF |
| <optgroup> | Membuat sebuah option group | STF |
| <option> | Mendefinisikan option dalam sebuah drop-down list | STF |
| <p> | Membuat paragraf | STF |
| <param> | Memberikan parameter untuk sebuah objek | STF |
| <pre> | Membuat preformatted text | STF |
| <q> | Membuat sebuah kutipan singkat | STF |
| <s> | Membuat teks memiliki atribut strikethrough (tidak digunakan lagi – kenapa yah?) | TF |
| <samp> | Membuat sampel computer code | STF |
| <script> | Membuat sebuah script | STF |
| <select> | Membuat selectable list | STF |
| <small> | Membuat teks berukuran kecil | STF |
| <span> | Mendefinisikan sebuah bagian dalam sebuah dokumen | STF |
| <strike> | Membuat teks strikethrough (g dipake) | TF |
| <strong> | Membuat teks dengan atribut strong | STF |
| <style> | Membuat definisi dari sebuah style | STF |
| <sub> | Membuat teks dengan style subscript | STF |
| <sup> | Membuat teks dengan style superscript | STF |
| <table> | Membuat tabel | STF |
| <tbody> | Membuat body tabel | STF |
| <td> | Mebuat cell tabel | STF |
| <textarea> | Membuat sebuah area teks | STF |
| <tfoot> | Membuat footer pada tabel | STF |
| <th> | Membuat header pada tabel | STF |
| <thead> | sama dengan di atas! | STF |
| <title> | Mendefinisikan judul dokumen | STF |
| <tr> | Membuat row pada tabel | STF |
| <tt> | Membuat teks teletype | STF |
| <u> | Membuat teks underline (g dipake lagi) | TF |
| <ul> | Membuat sebuah unordered list | STF |
| <var> | Mendefinisikan sebuah variabel | STF |
| <xmp> | Membuat preformatted text (g dipake lagi) |
INSTALL APLIKASI di freeBSD
April 25, 2008Ngoprek-ngoprek lagi………………. tugas ARC sesi 2 euy… tentang Install Aplikasi di FreeBSD.
Ada dua buah cara dalam menginstall disana. Lewat perintah packages dan lewat FreeBSD ports.
1. Cari port atau package-nya
Pertama tentu nyari filenya dong, kita bisa coba pake :
# whereis <package-name?>
atau bisa pake command make, ganti direktori ke /usr/ports
# cd /usr/ports
ketikkan nama paket seperti berikut:
# make search name=”package-name?”
Atau bisa juga gunakan locate command:
# locate php
2. INstall! Install!
waktu kita mencari file (dengan make misalnya), akan timbul ouput. Kali ini kita ambil contoh kita akan install lighttpd :
output :
Port: lighttpd-1.4.13_2
Path: /usr/ports/www/lighttpd
Info: A secure, fast, compliant, and very flexible Web Server
Maint: mnag@FreeBSD.org
B-deps: autoconf-2.59_2 libtool-1.5.22_4 m4-1.4.8_1 pcre-7.0_1 perl-5.8.8
R-deps: pcre-7.0_1
WWW: http://www.lighttpd.net/Pindahkan direktori ke path yang tertera pada output itu. Misalnya seperti di bawah ini
# cd /usr/ports/www/lighttpd
sekarang mulai install portnya :
# make; make install
Yah, segitu saja untuk saat ini, selamat mencoba dan mencari literatur yang lebih banyak.
EQSO
April 15, 2008eQSO adalah layanan Voice over Internet Protocol (VoIP) yang dikembangkan untuk amatir radio. Ini memungkinkan amatir radio untuk saling terhubung tidak hanya menggunakan media udara, tetapi juga melalui Internet. Ini membuka peluang amatir radio dapat menikmati kebebasan berkomunikasi antara amatir radio lainnya melalui frekuensi radio, melalui Internet atau campuran keduanya.
Saat ini, ORARI membuka diri terhadap eQSO. Gebrakan dimulai oleh amatir radio di Makassar dengan berdirinya Club Station yang khusus mengembangkan dunia digital di amatir radio. Callsign YB8ZD akhirnya terbit, dimotori oleh YB8EW. YB8ZD lahir tanggal 17 April 2007 dengan IAR yang diterbitkan oleh Dinas Perhubungan Sulawesi Selatan. Rakerda ORDA Sulawesi Selatan tanggal 12 Agustus 2007 telah menyiratkan pentingnya amatir radio mengikuti perkembangan teknologi.
YC1LZ melalui lobi yang intensif dengan pengurus ORDA Jawa Barat akhirnya menanyakan hal ini secara resmi ke ORPUS mengenai kegiatan eQSO. Melalui surat nomor B-171/OP/KU/2007, ORPUS menilai bahwa:
eQSO adalah pengembangan komunikasi digital yang digeluti amatir radio seluruh dunia termasuk Indonesia
Perlu adanya pemahaman yang jelas tentang pemaduan jaringan Internet dengan jaringan amatir radio sehingga tidak melanggar KM-49 Tahun 2002 tentang kegiatan amatir radio
Dengan akan diterbitkannya PP 38 Tahun 2007, ORARI dan Ditjen Postel sedang membahas hal-hal yang berkaitan dengan eQSO. eQSO dianggap sebagai kegiatan eksperimen amatir radio yang perlu mendapat pengawasan dan dikendalikan oleh ORARI Daerah.
Saat ini, layanan dan situs eQSO Indonesia 2007 pada alamat eqso.orari.net di-hosting di salah satu server YB0EO. Dengan memori 2 GB, harddisk 200 GB serta koneksi gigabit Ethernet langsung ke port Indonesia Internet Exchange (IIX) berbandwidth 10 Mbps, layanan eQSO Indonesia 2007 dapat diakses oleh ribuan pemakai di Indonesia tanpa hambatan. Administrasi server dikelola oleh YB0KLI dan administrasi eQSO RF Gateway dikelola bersama oleh YD1SRP, YC1LZ dan YB8EW. Pada tanggal 1 Nopember 2007, domain orari.net kadaluarsa dan proses pembaruannya menemui kesulitan teknis; ini menyebabkan layanan eQSO Indonesia 2007 terganggu karena pengguna tidak dapat menggunakan subdomain tersebut, harus menggunakan alamat IP langsung. Onno W. Purbo, YC0MLC, Litbang ORPUS membantu menyiapkan subdomain eqso.orari.or.id dan akhirnya subdomain ini hidup tanggal 9 Nopember 2007.
Automatic Position Reporting System (APRS)
April 15, 2008APRS, Automatic Packet/Position Reporting System, adalah aplikasi radio paket untuk pengiriman data yang cepat dan terpercaya. Fungsi lain dari APRS adalah untuk penentuan posisi, pengiriman pesan singkat dan/atau telemetri data. Nama APRS telah terdaftar dan dimiliki oleh Bob Bruninga, WB4APR. APRS dikembangkan dan dikenalkan oleh Bob Bruninga, seorang operator amatir radio, callsign beliau WB4APR.
Ada sebagian mengartikan APRS sebagai Automatic Packet Reporting System, akan tetapi sesungguhnya APRS hanya mengirim informasi mengenai posisi atau lokasi, walaupun kemudian berkembang dengan tambahan informasi mengenai cuaca, dan layanan pesan singkat untuk chat.
Pada dasarnya, APRS terdiri dari dua buah sistem. Pada sisi pengirim membutuhkan alat penerima sensor lokasi ( GPS ) terhubung ke encoder packet dan pemancar, kemudian pada sisi penerima membutuhkan penerima gelombang radio terhubung ke komputer.
Pada sistem pertama, setelah sensor menerima informasi mengenai lokasi dan diterjemahkan ke dalam format baku dan diubah menjadi suara ( Packet, umumnya dengan audio frequency shift keying 1200hz dan 2400 hz ), dan dipancarkan menjadi beacon. Pancaran beacon tidak diarahkan hanya pada satu stasiun radio ( seperti umumnya packet radio, contohnya BBS ), tapi setiap stasiun yang dapat menerima pancarannya dapat menerima informasi yang dikirim.
Pada sistem kedua, setelah dapat menerima pancaran packet dan merubah menjadi data, di layar monitor akan ditampilkan gambar icon yang menunjukkan lokasi pada peta digital. Sebagai penentu lokasi, satu stasiun APRS akan mengubah data dari GPS (Global Positioning System) menjadi format radio paket (AX.25 UI Frame) yang kemudian akan dipancarkan oleh radio, dengan kecepatan 1200 bps untuk band VHF ke atas atau 300 bps untuk di band HF. Moda yang digunakan sewaktu pengiriman paket adalah unconnected mode(one-to-many), tidak seperti di Radio Paket yang pada umumnya connected mode (one-to-one).
Keuntungan unconnected mode adalah kita tidak perlu tahu stasiun berikutnya karena sembarang stasiun bisa menerima paket kita dan stasiun tersebut telah dikonfigurasikan sebagai relayer, akan memancar-ulang paket kita sehingga cakupan menjadi luas. Dengan jaringan stasiun APRS yang cukup luas, pergerakan satu stasiun APRS dalam kota dapat dijejaki. Keuntungan lain dari unconnected mode adalah sangat efisien, karena hanya dengan 1 paket, seluruh informasi sudah terpancar. Bandingkan dengan connected mode yang memerlukan paling sedikit 5 paket untuk mengirim informasi yang sama. Sebaliknya, kerugian dari unconnected mode adalah kalau paket data yang diterima tidak lengkap/rusak, data tidak bisa diminta ulang dan harus menunggu sampai pengirim mengirimkan paket lagi.
APACHE WEB SERVER
April 4, 2008Apache web server adalah sebuah software. Pada dasarnya, sebuah web server adalah software yang memberikan layanan web. Web server menggunakan protokol yang disebut dengan HTTP (HyperText Transfer Protocol). Apache adalah salah satu web server yang sangat terkenal dan menjadi standar de facto pada setiap distribusi Linux. Apache adalah nama web server yang dibuat berbasiskan kode sumber dan ide-ide yang ada pada web server leluhurnya, yaitu web server NCSA, yang dibuat oleh National Center for Supercomputing Applications. Versi pertama Apache web server dibuat oleh Robert McCool sekitar tahun 1994. Pada pengembangannya, Robert McCool dibantu oleh “Apache Group”, yaitu Brian Behlendorf, Roy T. Fielding, Rob Hartill, David Robinson, Cliff Skolnick, Randy Terbush, Robert S. Thau, Andrew Wilson, Eric Hagberg, Frank Peters and Nicolas Pioch.
Apache web server memegang peranan yang sangat penting pada perkembangan world wide web. Semua TCP packet yang dikirimkan melalui internet dan kembali lagi ke browser kita sebagai halaman web yang kita inginkan, datanya diolah dan digerakkan oleh suatu program aplikasi yang berjalan di server. Pada server ini digunakan sebuah web server. Web server yang sering dipakai adalah Apache karena berlisensi GPL (General Public Lisence) atau free software, mudah dikonfigurasi, dan baik dalam performance.
Perkembangan Apeche sebagai web server yang sukses dan banyak digunakan tidak telepas dari pengembangan dari komunitas. Pengembangan dan maintenance dari Apache dibawah Apache Software Foundation. Karena dikembangkan oleh banyak orang / komunitas, Apache web server dapat digunakan pada berbagai sistem operasi, seperti Unix, FreeBSD, Linux, Solaris, Novell NetWare, Mac OS X, and Microsoft Windows.
Apache web server mendukung berbagai fitur termasuk bahasa pemrograman server-side. Apache juga men-support berbagai bahasa seperti mod_perl, mod_python, Tcl, dan PHP, modul autentifikasi, proxy modul, URL rewriter, custom log file, dan filtering. Satu Apache dapat melayani berbagai website pada suatu waktu. Apache juga mempunyai graphical user interfaces (GUIs).
