Adistei’s Weblog

KOMUNIKASI LOW LEVEL DENGAN SERVER HTTP

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>&#9660;</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>

Mei 22, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

HTML PROPERTIES

ALPHABETUC ORDER

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)

Mei 2, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

CSS PROPERTIES

Background

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

Mei 2, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

Install application di FreeBSD dengan port freeBSD atau packages

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

saya dapat materi ini dari blog://http:ykzir.wordpress.com,

April 25, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

Radio Wireless History

Radio Wireless di Indonesia lebih sering dikenal sebagai radio amatir.

Kegiatan Amatir radio sudah ada sejak awal abad ke 20 di Indonesia. Semasa perang kemerdekaan RI para amatir radio di Indonesia juga aktive berjuang dengan peralatan dan keahliannya. Mereka bergabung didalam wadah Persatoean Amateur Repoeblik Indonesia (PARI). Namun dizaman ORLA sehubungan dengan diberlakukannnya SOB kegiatan ini dilarang.

Narasumber yang ada saat itu adalah RAJ Lumenta, Engkus, Herry Sembel, Hasan Koesoema Ardiwinata, MI Khadja, Willy A. Karamoy.

Merekalah aktor-aktor berdirinya Organisasi radio amatir Indonesia (ORARI). Mereka sadar bahwa dalam mengudara dibutuhkan suatu aturan. Tidak hanya di Indonesia juga mereka yang merupakan radio amatir sedunia. Sehingga dalam melakukan kegiatannya mereka mempunyai dan berlandaskan pada KODE ETIK AMATIR RADIO.

berawal di Jakarta dan Jawa Barat atau pulau Jawa pada umumnya dan diprakarsai oleh kegiatan aksi mahasiwa , pelajar dan kaum muda, diawal tahun 1965 sekelompok mahasiwa publistik yang tergabung dalam wadah KAMI membentuk radio siaran perjuangan bernama Radio Ampera, mulai saat itu juga bermunculanlah radio siaran lainya seperti Radio Fakultas Tehnik UI, Radio Angkatan Muda, Kayu Manis, Draba dll. Sudah tentu semua radio siaran itu merupakan siaran yang tak memiliki izin alias Radio gelap. Sadar karena semakin banyaknya radio siaran bermunculan yang memerlukan suatu koordinasi demi tercapainya perjuangan ORBA maka dibentuklah pada tahun 1966 oleh para mahasiwa suatu wadah yang diberi nama PARD (Persatuan Radio Amatir Djakarta) diantaranya terdapat nama-nama koordinatornya seperti Willy A Karamoy. Ismet Hadad, Rusdi Saleh ……dll. Dan di Bandung terbentuk PARB. Bagi anggota yang hanya berminat dalam bidang teknik wajib menempuh ujian tehnik dan bagi kelompok radio siaran disamping perlu adanya tehnisi yang telah di uji juga wajib menempuh ujian tehnik siaran dan publisistik. Setelah itu kesemuanya diberi callsign menggunakan prefix X, kode area 1 s/d 11 dan suffix 2 huruf sedangkan huruf suffix pertamanya mengidentifikasikan tingkat keterampilannya A s/d F seperti X6AM, X11CB dsb sedangkan untuk radio siaran diberi suffix 3 huruf.Pada mulanya PARD merupakan wadah bagi para amatir radio dan sekaligus radio siaran . Sehingga pada saat itu secara salah masyarakat mengidentikan Radio amatir sebagai radio siaran non RRI. Karena adanya Tingkatan keterampilan, PARD saat itu juga menyelenggarakan ujian kenaikan tingkat.

Disamping itu terdapat juga para Amatir era 1945-1952 yang tergabung dalam PARI (Persatoean Amatir Repoeblik Indonesia 1950), diantaranya terdapat nama – nama , Soehodo †. (YBØAB), Dick Tamimi †. (YBØAC), Soehindrio (YBØAD), Agus Amanto † (YBØAE), B. Zulkarnaen †. (YBØAU), Koentojo † (YBØAV) dll. Diantara merek ternyata ada juga yang menjadi anggota PARD seperti, (YBØAE) dan (YBØAU).

ORARI NASIONAL

Atas dasar PP21/1967 pada tanggal 9 Juli 1968 dilingkungan Sekretariat Negara pada waktu itu dan tanpa kesibukan yang menonjol dengan dihadiri sejumlah calon anggota yang berdomisili terutama di pulau Jawa, terbentuklah ORARI dan praktis pada awalnya hanya mencakup pulau Jawa yang terdiri atas 4 Regio yakni DKI Jakarta, Jawa Barat, Jawa Tengah dan Jawa Timur. Ketua ORARI Nasional dijabat oleh Bapak Koentoyo † (YBØAV). Dengan terbentuknya Wadah yang sah ini maka, para Amatir merasa lega karena bisa secara sah melakukan kegiatannya. Tenaga penguji di Dewan Telkom saat itu sangat terbatas dan hanya diperuntukan untuk menguji calon Operator dan Markonis radio maka, Dewan belum mungkin menyelenggarakan ujian untuk calon anggota ORARI dan untuk kebutuhan ini ORARI diberi wewenang sementara untuk menyelenggarakan sendiri ujian Amatir bagi calon anggotanya. Dan untuk mengurus keperluan perizinan seluruh anggota ORARI telah ditunjuk wakil tetap ORARI di Dewan Telekomunikasi RI. Yakni Herry Sembel (YBØBR) dan Hasan Koesoema (YBØAH).

Dengan terbentuknya ORARI maka terjadilah masa transisi dalam meletakan istilah Amatir pada tempatnya, terutama dimasyarakat dan bahkan banyak diantara pengurus terutama didaerah masih mengidentikan kegiatan Amatir radio dengan Radio siaran non RRI.

Penutup

Kegiatan ini sebenarnya hobi bagi mereka yang senang pada bidang teknik transmisi radio dan elektronika. Kegiatan ini sudah ada sejak tehnik transmisi radio ditemukan dan karena kegiatan ini menggunakan disamping peralatan juga media spektrum gelombang elektro magnetik yang menyangkut kepentingan kehidupan manusia dalam alam semesta in.

Apa yang Saya ketahui tentang RW ini?

RW berarti amatir radio.

Sebuah perangkat elektronik yang dapat memancarkan sinal dari satu radio ke radio lain. Wireless, berarti tanpa kabel. Menggunakan frekuensi tertentu. Untuk Amatir radio, tiap radio memiliki semacam adress tertentu misal :

Herry Sembel (YBØBR) dan Hasan Koesoema (YBØAH)

Zaman dahulu kegiatan ini merupakan hobi, namu seiring perkembangan zaman. Bermunculan TV, handphone, sehingga peminatnya berkurang. Walaupun begitu, bagi penggemarnya masih tampak bekas antena RF di rumah-rumah mereka dengan alamat radio di depan rumahnya.

April 4, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

Apche Web Server

Pengertian

Web server memiliki pengertian seperti ini :

Program komputer yang bertanggung jawab menerima request HTTPdari clients, yang dikenal sebagai web browser, dan melayani mereka, dan bersedia merespon data konten yang diminta seperti web pages(dalam bentuk HTML atau objek seperti jpg, dan kawan kawan).

Komputer yang menjalankan program komputer pada poin 1.

(wikipedia, keyword : web server)

Mungkin si apache ini adalah pengertian nomor satu dan komputer Anda yang menjalankannya web server pengertian kedua.

Apa kegunaannya?

Sama seperti web server lainnya, apache bertanggung jawab pada request-response HTTP dan logging informasi secara detail(kegunaan basicnya).
Kegunaan lainnya:

supaya web pages tampil dinamis dengan menghandle konten dinamis, selain yang static tentunya.
authentifikasi, seperti request username dan password
melayani server side programming.
keamanan
virtual hostings, melayani banyak web pages menggunakan satu IP adress
dan banyak lagi…

Sejarahnya

Apache ini dibuat versi pertamanya oleh Robert Mc Cool — yang terlibat di NCSA– padatahun 1996. Ditulis dalam bahasa C, perkembangannya dilakukan bersama rekan-rekan melalui email. Dia mengerjakan proyek itu bersama Apache groupnya : 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.

Kenapa diberi nama Apache? Kata yang mendirikan karena pertama mereka ingin menghargai penduduk asli Amerika Indian Apache yang dikenal ketahanan dan skilnya saat perang, dan kedua karena akar proyek si apche ini merupakan sebuah ‘a patchy server’. Alasan kedua sebenarnya dengan hoki ditemukan.

Apache dikembangkan oleh komunitas terbuka yang di bawahi oleh Apache Software Foundation. Aplikasinya dapat digunakan untuk OS yang beragam( tidak bergantung pada vendor tertentu (cross platform)), sebut saja UNIX, FreeBSD, Linux, Novell netware, MacOS X, Windows.

Legalitas?

Untuk masalah legalitas, Apache termasuk open source software dan free software, sehingga banyak perusaahaan penyedia webhosting tidak perlu mengeluarkan uang untuk mendapatkan lisensi dari si Apache ini. Walaupun open source, tapi apache belum compatible dengan versi 2 GNU General Public License, karena ada requirement spesifik yang tak memenuhi kriteria dari GNU GPL. sehingga software dengan lisensi ini tak bisa diintegrasikan dengan si apache ini.

Sekarang?

Sejak direlease tahun 1996, Si Apache ini sebagai web server terbilang belum tergantikan, Apache memegang beberapa website terkemuka di dunia. Walaupun belakangan popularitasnya menurun sejak Microsoft mengeluarkan IIS, Microsoft Internet Information Service. Tapi hingga sekarang keberadaan Apache masih di urutan teratas untuk masalah web server. Lihat saja data survei dari Netcraft pada Desember 2007 :

Vendor	Produk	Web Site Hosted	Percent
Apache	Apache	76,591,442	49.35%
Microsoft	IIS	55,502,886	35.76%
Google	GWS	8,555,391	5.51%
Oversee	Oversee	1,573,701	1.01%
Lighttpd	Lighttpd	1,521,250	0.98%
Nginx	Nginx	767,966	0.49%
Lain	-	10,690,101	6.89%

GWS adalah web server milik vendor Google yang awalnya adalah pengembangan dari Apache.

April 4, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

Warrior of the Net

Video clip ini memberikan penjelasan secara visual bagaimana proses pengiriman paket data dari client ke server dan sebaiknya. Jika Anda mengerti konsep TCP/IP ataupun OSI Layer sebagi referensinya, ini adalah gambarannya. Bagi Anda yang belum mengerti clip non komersial ini akan membantu pemahaman anda.

Sebagai gambaran umum, TCP/IP merupakan dasar dari pengiriman data dan tentunya dasar dari internet yang ada saat ini. Dalam prosesnya, data akan melalui beberapa tahap yaitu sebagai berikut:

Aplication
Transportation
Internet
Network Interface

Cerita berdurasi 13 menit ini diawali dengan pengenalan tokoh cerita, dari paket data, router, router switch, hingga ping of death si pembawa traffic.

Begitu pengguna internet mengklik suatu hyperlink maka ilustrasi pun dimulai. Dalam Network interface, data difragmentasi menjadi paket-paket data. Selanjutnya tiap paket data tersebut diberi “cap” di tiap tahapnya, dalam hal ini kepala dari paket data diberi cap TCP layer dan IP layer dan berikut dengan layer-layer lainnnya.

Paket data memulai perjalanannya dari network interface, router, switch router internal lalu masuk ke dalam jaringan web atau internet. Perjalanan terlihat begitu berat. Beberapa paket data ada mengalami kecelakaan di tengah jalan. Dalam perjalanannya ia melalui jalan yang sangat panjang dan bahkan melaui darat, laut, dan udara. Tapi tentunya lingkungan di luar kabel tidak mempengaruhi apa yang terjadi disini.

Tibalah si paket ini di tempat router. Si router ini memindahkan paket-paket data jika aliran data mengalami traffic tinggi. Ia memindahkan beberapa paket data melalui jalur lain. Jika aliran data benar-benar padat kerusakan data mungkin saja terjadi, karena tugas router menjadi sangat berat.

Paket data melanjutkan perjalanannya kembali. Kini si paket masuk ke sebuah persimpangan, bertemu dengan si router switch. Si paket akan ditentukan harus ke mana dia akan pergi.

Paket data sudah hampir sampai tujuan. Paket sudah masuk wilayah server sekarang. Ia sampai pada sebuah firewall. Beberapa data berbahaya seperti ping of death akan dihancurkan jika melewati tempat ini. Dan paket-paket data yang selamat meneruskan perjalanannya.

Paket data selanjutnya melewati proxy sebuah server. Disini terdapat beberapa “pintu” port. 80 misalnya untuk halaman web, 25 untuk email, dan 21 untuk file transfer protocol. Bagi data-data yang kriterianya sudah ditentukan akan hancur disini. Misal saja proxy : cache ITB.ac.id port 8080 akan menolak data “anime” atau data “piip…[sensor ya…]”. Nah data tersebut tidak akan lolos pada tahap ini.

Setelah lolos barulah data mereka disatukan menjadi satu bagian yang utuh. Server lalu me-reply apa yang diminta oleh pengguna internet, melalui jalur yang sama. Data difragmen menjadi paket-paket, melalui router dan switch router, masuk ke dalam jaringan internet, bertemu dengan firewall ataupun proxy, dan masuk ke aplikasi pengguna internet.

Demikian kisah pejuang-pejuang internet, yang gagah berani… hehe, begitu menarik untuk dimengerti bukan?

April 1, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

Apa yang akan terjadi pada www satu dekade ke depan?

<html>

<head>

<title>Apa yang terjadi pada www 10 tahun mendatang?</title>

</head>

<body>

<H3>Apa yang akan terjadi dalam 10 tahun mendatang pada WWW? </H3>

Sebelum membayangkan ke depan kita akan ulas terlebih dahulu apa sebenarnya www itu dan bagaimana www muncul.

WWW merupakan singkatan dari world wide web, sebagian orang mengartikannya sebagai internet. Kenyataannya internet sekarang memang identik dengan web. Kemudahan pengguna dalam menemukan informasi dalam web membuat web berkembang sangat pesat. Keunggulan web lainnya adalah distribusi informasi yang mudah dan kebebasan platform karena adanya standar dokumen berbagai tipe data.

Awalnya pada tahun 1993 sebuah tim dibentuk oleh CERN (Peneliti Lab Fisika Partikel Eropa) untuk mengembangkan sistem share data antar koleganya menggunakan hypertext. Cukup mengklik hyperlink kita bisa saling bertukar data, tanpa perlu perantara FTP, ataupun TELnet. Berikutnya tahun 1994, W3C(world wide web consorsium) meletakkan gabungan standar untuk web, yaitu diantaranya yang paling standar HTML, CSS, dan XML.

Lalu bagaiman web bekerja?

Data informasi disimpan pada halaman-halaman web (web pages), kemudian file-file ini disimpan pada web server. Webclient nantinya akan merequest informasi kepada web server. Permintaan tersebut nantinya di reply oleh server, dan mengirimkan paket data yang diminta kepada client. Proses in berlangsung berulang-ulang.

Dokumen HTML merupakan dokumen yang nantinya akan disajikan kepada client. Sedangkan CSS adalah bahasa pelengkap HTML. Dengan CSS, kumpulan style HTML dikelola secara terpisah sehingga memudahkan manajemen halaman web. Lain halnya dengan HTML yang tugasnya menampilkan data, XML hanya mendiskripsikan data. Keduanya saling melengkapi. Baik HTML, CSS, maupun XML adalah standar web yang ditetapkan.

Dalam perkembangan web selanjutnya muncul bahasa-bahasa pendukung yang menunjang performa dari web, seperti java script, atau vbscript. Semuanya membuat pencarian informasi menjadi lebih mudah.

Dalam satu dekade ke depan bukan tidak mungkin bermunculan language baru penunjang web atau perangkat lunak baru, sehingga suatu tampilan web secara drastis berubah. Tampilan web tidak dapat kita pungkiri adalah segalanya. Dengan tampilan yang menarik dan interaktif web akan sering dikunjungi. Dengan berkembangnya Macromedia Flash saja web kini sudah mengandalkan animasi untuk tampilannya. Walaupun begitu masih banyak kekurangan disana-sini.

Masalah yang mungkin teratasi dalam satu dekade ke depan adalah kecepatan koneksi. Saat ini pengiriman data masih sedikit lambat. Walaupun relatif lebih cepat dibandingkan pengiriman data pada dekade 90-an.

Yang pasti terjadi dalam satu dekade ke depan adalah perubahan. Pertanyaannya apakah dalam satu dekade ke depan kita termasuk arus yang hanya mengikuti perubahan atau terlibat dalam perubahan tersebut ?

</body>

</html>

April 1, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | 1 Komentar

OSI LAYER

Pada saat kita mengetik address seperti contohnya www.google.com, maka data akan melalui tujuh lapisan (Layer) :

1. Application Layer bekerja untuk menyediakan jasa/ pertukaran informasi antara program computer menyediakan jasa untuk aplikasi pengguna.
2. Presentation Layer bekerja mengonversi dan memformat untuk transfer data. Layer ini membentuk kode konversi, translasi data, enkripsi dan konversi.
3. Session Layer yang menentukan bagaimana dua terminal menjaga, memelihara dan mengatur koneksi,- bagaimana mereka saling berhubungan satu sama lain. Koneksi di layer ini disebut “session”.
4. Transport Layer bekerja membagi data menjadi segmen, menjaga koneksi logika “end-to-end” antar terminal, dan menyediakan penanganan error (error handling).
5. Network Layer menentukan alamat jaringan, menentukan rute yang harus diambil selama perjalanan, dan menjaga antrian trafik di jaringan (data berbentuk paket).
6. Data Link Layer menyediakan link untuk data, memaketkannya menjadi frame yang berhubungan dengan “hardware” kemudian diangkut melalui media. komunikasinya dengan kartu jaringan, mengatur komunikasi layer physical antara sistem koneksi dan penanganan error.
7. Physical Layer memproses data menjadi bit dan mentransfernya melalui media, seperti kabel, dan menjaga koneksi fisik antar sistem.

Maret 22, 2008 Ditulis oleh mohamad | Tugas Cakru ARC | | No Comments Yet

FREEBSD INSTALL

Materi ini saya kerjakan bareng dengan teman-teman cakru yang lain.

a) Proses instalasi dimulai bila layar tampak seperti pada gambar, yang berarti bahwa VMWare membaca bootable CD.

b) Muncul pemilihan negara, pilih Indonesia. OK.

c) Setelah pemilihan negara, akan muncul pemilihan keyboard. Pilihlah USA ISO. OK.
d) Muncul pemilihan cara instalasi, seperti pada gambar di bawah ini, pilihlah standard. SELECT.

e) Memasuki tahap partisi harddisk, tetapi berhubung kita menggunakan VMWare, jadi tidak perlu khawatir OS akan terhapus. Saat layar seperti pada gambar dibawah ini, tekan A, yang artinya menggunakan semua harddisk.

f) Setelah A ditekan, layar akan berubah menjadi seperti pada gambar di bawah ini. Terlihat telah ada freebsd pada list.

g) Tekan Q untuk finish, kemudian akan muncul pemilihan untuk menginstall boot manager pada layar, pilihlah BootMgr kemudian OK. Boot manager berguna untuk memilih OS pada saat booting pertama.

h) Selanjutnya akan muncul pesan untuk membuat freebsd partition. Setelah memilih OK, pada layar akan muncul

i) Tekan A untuk auto default, maka akan terbentuk partisi baru freebsd seperti pada gambar di bawah ini

j) Tekan Q untuk finish. Berikutnya pada layar akan muncul Choose Distribution, pilihlah All. OK.

k) Pilih OK untuk semua pesan, sampai muncul Choose Instalation Media, pilihlah [1 CD/DVD] yaitu menginstal dari CD. OK.

l) Selanjutnya akan muncul pilihan, kesempatan terakhir anda untuk jadi menginstall atau tidak. Jika jadi menginstall pilihlah YES.

m) Selanjutnya proses instalasi akan berjalan. Akan tampak sebagai berikut pada layar

n) Proses instalasi selesai dan akan muncul pesan seperti gambar berikut

o) Selanjutnya akan muncul konfigurasi sistem.
p) Pilih exit installation untuk mengakhiri proses instalasi.
q) Selamat!!! FreeBSD sudah terinstall di VMWare.