Imade07's Weblog

Guest book example

imade07 — Fri, 16 May 2008 13:24:13 +0000

RFC 2616 – Hypertext Transfer Protocol — HTTP/1.1

imade07 — Fri, 16 May 2008 12:25:02 +0000

http://www.faqs.org/rfcs/rfc2616.html

Selamat dibaca dan menikmati…

Komunikasi ‘Low-Level’ dengan Server HTTP

imade07 — Fri, 16 May 2008 12:21:01 +0000

Server Eksternal (www.google.co.id)

Hasil telnet port 80:

Google<
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)}})();Web Images Maps News Shopping Gmail more ▼ Video Groups Books Scholar Fin
ance Blogs  YouTube ….deleted

Hasil lewat Firefox:

<html><head><meta http-equiv=“content-type” content=“text/html; charset=UTF-8″><
title>Googletitle><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>Webb>span> <span class=gb1><a href=“http://images.g
oogle.com/imghp?hl=en&tab=wi” onclick=gbar.qs(this)>Imagesa>span> <span clas
s=gb1><a href=“http://maps.google.com/maps?hl=en&tab=wl” onclick=gbar.qs(this)>M
apsa>span> <span class=gb1><a href=“http://news.google.com/nwshp?hl=en&tab=w
n” onclick=gbar.qs(this)>Newsa>span> <span class=gb1><a href=“http://www.goo
gle.com/prdhp?hl=en&tab=wf” onclick=gbar.qs(this)>Shoppinga>span> <span clas
s=gb1><a href=“http://mail.google.com/mail/?hl=en&tab=wm”>Gmaila>span> <span
 class=gb3><a href=“http://www.google.com/intl/en/options/” onclick=“this.blur()
;gbar.tg(event);return !1″><u>moreu> <small>&#9660;small>a>span> <span c
lass=gb2><a href=“http://video.google.com/?hl=en&tab=wv” onclick=gbar.qs(this)>V
ideoa>span> <span class=gb2><a href=“http://groups.google.com/grphp?hl=en&ta
b=wg” onclick=gbar.qs(this)>Groupsa>span> <span class=gb2><a href=“http://bo
oks.google.com/bkshp?hl=en&tab=wp” onclick=gbar.qs(this)>Booksa>span> <span
class=gb2><a href=“http://scholar.google.com/schhp?hl=en&tab=ws” onclick=gbar.qs
(this)>Scholara>span> <span class=gb2><a href=“http://finance.google.com/fin
ance?hl=en&tab=we” onclick=gbar.qs(this)>Financea>span> <span class=gb2><a h
ref=“http://blogsearch.google.com/?hl=en&tab=wb” onclick=gbar.qs(this)>Blogsa>
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)>YouTubea>span>

Komunikasi ‘Low-Level’ dengan Server SMTP

imade07 — Fri, 16 May 2008 12:19:31 +0000

[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 .
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

imade07 — Fri, 02 May 2008 11:04:19 +0000

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

Tag HTML

imade07 — Fri, 02 May 2008 11:02:22 +0000


Tag	Description	DTD
	Mendefinisikan komentar	STF
	Mendefinisikan tipe dokumen	STF
	Mendefinisikan sebuah anchor	STF
	Mendefinisikan singkatan	STF
	Mendefinisikan akronim	STF
	Mendefinisikan elemen alamat	STF
	Mendefinisikan applet (tidak digunakan lagi)	TF
	Mendefinisikan sebuah area dalam image map	STF
	Memberi style bold pada teks	STF
	Mendefinisikan base URL untuk semua link pada halaman	STF
	Mendifinisikan base font (tidak digunakan lagi)	TF
	Mendefinisikan arah display teks	STF
	Membuat teks menjadi berukuran besar	STF
	Membuat kutipan panjang	STF
	Mendefinisikan elem bodi	STF
	Memasukkan line break single	STF
	Membuat push button	STF

Mendefinisikan table caption	STF
	Membuat teks berada di tengah (tidak digunakan lagi)	TF
	Membuat kutipan	STF
	Membuat kode bahasa komputer	STF

Mendefinisikan atribut untuk kolom pada tabel	STF

Mendefinisikan grup pada kolom tabel	STF
	Mendefinisikan deskripsi pada definisi (?_?)	STF
	Mendefinisikan teks yang didelete	STF
	Membuat directory list (tidak digunakan lagi)	TF
	Mendefinisikan sebuah bagian pada dokumen	STF
	Mendefinisikan sebuah istilah definisi	STF
	Membuat sebuah daftar definisi	STF
	Membuat sebuah istilah definisi	STF
	Membuat sebuah teks ter-emphasize	STF
	Membuat sebuah fieldset	STF
	Menentukan jenis, warna, dan tipe huruf (tidak digunakan lagi)	TF
	Membuat sebuah form	STF
	Membuat sebuah frame	F
	Mendefinisikan set frame	F
to	Mendefinisikan header satu sampai enam	STF
	Memberikan informasi tentang dokumen	STF
	Memberikan ukuran horizontal	STF
	Membuat sebuah dokumen HTML	STF
	Membuat teks dengan style italic	STF
	Membuat inline frame	TF
	Mendefinisikan sebuah image	STF
	Mendefinisikan sebuah input field	STF
	Mendefinisikan teks yang di insert	STF
	Mendefinisikan sebuah single-line input field (tidak digunakan lagi)	TF
	Mendefinisikan teks keyboard	STF
	Mendefinisikan label untuk form control	STF
	Mendefinisikan judul dalam fieldset	STF
	Mendefinisikan list item	STF
	Mendefinisikan referensi/daftar pustaka	STF
	Mendefinisikan sebuah image map	STF
	Membuat sebuah menu list (tidak digunakan lagi)	TF
	Mendefinisikan sebuah meta information	STF

Name *	name=”txtName” type=”text” size=”30″ maxlength=”30″>
Email	name=”txtEmail” type=”text” size=”30″ maxlength=”50″>
Website URL	name=”txtUrl” type=”text” value=”http://” size=”30″ maxlength=”50″>
Message *	name=”mtxMessage”</strong> cols=”80″ rows=”5″>
	name=”btnSign” type=”submit” value=”Sign Guestbook” onClick=”return checkForm();”>