Home » All posts

Belajar HTML Dasar

Posted by Gg Thursday, 11 August 2011 0 comments
Ok Sobat Kali ini kita akan mencoba membuat layout HTML dasar....
Lalu apa yang harus kita persiapkan....?
ya HTML Editor  seperti 

  • Microsoft Frontpage 
  • Macromedia Dreamweaver
  • Netscape Navigator Gold
  • Netscape Composer
  • HotDog
  • CU-HTML, dll
tapi kali ini kita menggunakan Notepad Sebagai bahan belajar, tapi ketika di save harus diberi exsitensi ". html"

Ok kita coba sekarang...

1. Pertama buatlah directori folder untuk menyimpan semua semua latihan..
2. Bukalah aplikasi Notepad 
3. Tuliskan tag berikut   
   <h1>This is a heading</h1>
   <h2>This is a heading</h2>    
   <h3>This is a heading</h3>
4. save dengan nama latihan1 exsitensi HTML  "latihan1.html"
5. setelah selesai buka kembali dengan menggunakan web browser
maka hasilnya 


Pengertian HTML

Posted by Gg 0 comments


Definisi HTML

  • HTML merupakan singkatan dari HyperText Markup Language. HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW), dan semua nama file dokumen HTML mempunyai ekstensi html atau htm. Dalam sebuah dokumen HTML anda akan melihat tags. Tags adalah penempatan atau nilai format teks yang memerintahkan browser untuk menampilkan sebuah dokumen html.

  • HTML bukan bahasa pemrograman, itu adalah bahasa markup

  • Sebuah bahasa markup adalah seperangkat tag markup

  • HTML menggunakan tag markup untuk menjelaskan halaman web 


Tag HTML

HTML markup tag biasanya disebut tag HTML
  • Tag HTML adalah kata kunci dikelilingi oleh sudut kurung seperti <html>
  • Tag HTML biasanya datang dalam pasangan seperti <b> dan </ b>
  • Tag pertama dalam pasangan adalah tag pembuka, tag kedua adalah tag akhir
  • Mulai dan tag akhir juga disebut tag pembuka dan tag penutup

Dokumen HTML = Halaman Web

  • Dokumen HTML menjelaskan halaman web
  • Dokumen HTML berisi tag HTML dan teks biasa
  • Dokumen HTML juga disebut halaman web
Tujuan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman tersebut:
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penjelasan Contoh

  • Teks di antara <html> dan </ html> menjelaskan halaman web
  • Teks di antara <body> dan </ body> adalah isi halaman yang terlihat
  • Teks di antara <h1> dan </ h1> ditampilkan sebagai judul
  • Teks di antara <p> dan </ p> ditampilkan sebagai sebuah paragraf

HTML Editor
Dokumen HTML bisa dibuat dengan menggunakan text editor biasa ataupun dengan editor khusus.
Contoh-contoh HTML Editor :
  • Microsoft Frontpage 
  • Macromedia Dreamweaver
  • Netscape Navigator Gold
  • Netscape Composer
  • HotDog
  • CU-HTML, dll

URLs
URL merupakan singkatan dari Uniform Resource Locator. Menginformasikan lokasi sebuah file pada WWW dan juga mengidentifikasi layanan internet, seperti FTP, WWW, yang menghandle file tsb. Istilah ini juga dipakai untuk menunjukkan suatu tempat yang berisikan informasi di Internet spt di bawah :

http 
Keterangan :
Protocol adalah metode transfer data dari satu komputer ke komputer lain. Antara komputerclient dan komputer server. 
  • HTTP; HyperText Transfer Protocol
  • Gopher
  • FTP
  • news
          File name adalah nama file html yang berada dalam direktori web server
Network location adalah mesin tempat data tersebut berada.
path - dokumen - menunjukkan di direktori mana dokumen tersebut berada.

Sumber : 


Tulisan Berkedip (Blink)

Posted by Gg 0 comments



Ini satu lagi trik untuk blog  gan....


Membuat tulisan berkedip wah kanyanya yang punya blog genit nih.....
Ok ini adalah trik yang sangat mudah karena anda tinggal menambahkan kode

<blink>(tulisan yang berkedip)</blink>

pada tulisan yang ingin di beri...
Mudah kan ? seperti membalikan telapak tangan :))

Membuat Tulisan Yang Dicoret

Posted by Gg 0 comments


Bagaimana membuat tulisan pada postingan lalu di coret seperti harga yang mendapat diskon seperti contoh di bawah ini.

Price $5 Now Free For You

Untuk caranya gampang, kamu tiggal berikan scrip pada kalimat yang akan di coret

<strike>(kalimat yang ingin dicoret)</strike>


Ok Gan.....

Membuat Link Berwarna Pelangi

Posted by Gg 0 comments


Coba deh kamu klik link yang ada di blog saya, apakah efek yang terjadi.... 
nah berwarna pelangi, caranya gampang dan mudah kok....
Kita mulai..




  1. Login dulu ke blog kamu.
  2. Pilih Perancangaan
  3. Lalu Edit HTML
  4. Cari Kode "<head>" dengan mengklik "ctrl + F"
  5. Copy deh Kode <script src='http://achmad46.googlepages.com/rainbow.js'>
    </script>     tepat dibawah "<head>"
  6. Save
Maka Lihat Hasilnya....

Smoga berhasil Gan.....



Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

Posted by Gg 0 comments


Wah jadi Tidak enak di pandang nih Gan lw di Blog kita terlihat Icon Obeng dan Tang.....4
ya seperti Contoh screenshotnya Dibawah ini :

quick-edit

Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa gan, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

  1. Login ke blogger dengan ID anda tentunya.
  2. Klik  Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini :

    ]]></b:skin>

  5. Copy paste kode berikut persis di atas kode yang tadi :

    .quickedit{
    display:none;
    }

  6. Klik tombol Simpan template.
  7. Selesai.


Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Cara Menampilkan Profil Facebook pada Blog

Posted by Gg Wednesday, 10 August 2011 0 comments




F




acebook sungguh sangat booming saat ini. Bahkan di Indonesia (saat posting ini ditulis), Facebook (FB) menjadi situs nomor 1 menurut ranking Alexa. Ini menunjukkan pengguna Facebook di Indonesia sangat banyak. Pasti rekan-rekan juga sudah punya kan? Kali ini saya akan berbagi tips untuk menampilkan profil Facebook pada blog. Kalau sudah ditampilkan, tentu pengunjung setia blog Anda juga bisa mengunjungi Facebook Anda dan bergabung menjadi friends.

Langkah-langkah menampilkan profil Facebook pada website adalah:
  1. Silahkan login pada akun Facebook Anda.
  2. Buka profil Facebook Anda dengan mengklik menu Profile disebalah kiri atas.
  3. Di sebelah pojok kiri bawah Anda akan melihat sebuah Link dengan nama "Create a Profile Badge". Selanjutnya, klik link tersebut. 
  4.  Anda akan masuk pada halaman penambahan Profile Badge Facebook.  Elemen profile Facebook yang akan ditampilkan pada website biasanya disebut Badge. Buatlah sebuah Badge baru dengan mengklik tombol menu Create a New Badge yang ada di sebelah kanan atas.
  5. Anda akan masuk pada bagian penambahan Badge baru. Silahkan pilih layout badge profile Facebook yang Anda inginkan beserta item atau informasi apa saja yang ingin ditampilkan. Jika sudah, klik tombol Save.
  6. Anda akan kembali pada halaman profile Badge. Di sana hanya tersedia 3 pilihan menu menambah Badge tersebut, yaitu untuk Blogger, TypePad, dan Other. Jika Anda ingin menambahkan pada website biasa (selain Blogger dan TypePad, silahkan klik tombol menuOther. Akan muncul kode profil badge di bagian bawah menu tersebut. 
    Copy pastelah kode tersebut pada bagian website Anda dimana Anda ingin menampilkan profil Facebook. Misalkan jika ingin menambah pada Wordpress CMS, maka:
    • Masuklah pada Dashbord Wordpress 
    • Selanjutnya klik menu Widgets pada bagian Appearance yang ada di sebelah kiri. Pilih widget Text.
    • Copy paste kode profil Badge yang  Anda dapat tadi pada widget Text tersebut. Lalu Save.
  7.  Jika Anda ingin menambahkan pada Blogspot (Blogger), Anda cukup mengklik tombol menu"Blogger" yang ditunjukkan pada langkah 6 di atas. Anda akan dibawa ke halaman penambahanProfile Badge Facebook pada Blogger. Silahkan pilih blog Anda dan pilih nama widgetnya. Cara yang hampir sama bisa Anda lakukan pada TypePad.
Catatan:
Langkah 6 di atas juga bisa Anda lakukan pada Blogspot. Caranya:
  1. Pada dasbor, klik link menu Tata Letak, kemudian klik subtab menu Elemen Halaman. 
  2. Silahkan klik link Tambah Gadget yang ada pada sidebar dimana Anda ingin menampilkan profil Facebook.
  3. Akan muncul window penambahan gadget. Silahkan pilih HTML/Javascript. Selanjutnya copy paste kodenya pada kotak HTML/Javascript tersebut, lalu Simpan.

Cara Memasang Emotion pada Blog

Posted by Gg 1 comment


Emoticon adalah sebuah istilah baru yang dicetuskan sekitar abad ke 19, dan umun digunakan dalam penulisaan kasual dan humor. kata Emoticon adalah kata gabungan dari "emotion" dan "icon" yang berarti icon yang digunakan untuk mengekspresikan emosi sebuah pernyataan tertulis dan bisa mengubah serta meningkatkan interpretasi terhadap tulisan tersebut.


Ok gan kini kita akan belajar bagaimana memasang emoticon dalam komentar di blog....
kita mulai gan....

  1. Login ke Blogger dan langsung menuju Layout > Edit HTML.
  2. Jangan lupa backup template anda terlebih dahulu, untuk menghindari kesalahan-kesalahan yang tidak disengaja.
  3. Centang Expand Widget Templates, dan temukan kedua baris kodeberikut ini, anda bisa melakukanya dengan fungsi pencarian dengan mengklik ctrl + F.
    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'> 
  4. Kemudian sisipkan kode-kode berikut ini diantar kedua baris diatas, sehingga menjadi seperti ini: 

    <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
    <b>
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> L(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> J
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> L
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> K
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> J]
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
    </b>
    </div>

  5. Nah, sekarang tinggal kita sisipkan kode Scriptnya seperti dibawah ini dan sisipkan sebelum tag </body>
    <script src='http://vishalgkr.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://www.tricksmachine.com" target="_blank">Tricks Machine</a></noscript>
  6. Selesai, simpan kembali template anda. Sekarang dibagian terlihatemotikon dibawah posting, seperti diblog ini neh… he3…

  

Manfaat Madu

Posted by Gg Sunday, 7 August 2011 2 comments

Madu adalah asupan yang bisa dikonsumsi oleh anak-anak sampai orang dewasa termasuk janin yang masih ada di dalam kandungan ibunya.
Berikut ini adalah manfaat madu:
1. Janin : Janin yang masih ada di dalam kandungan pada setiap orang tidak sama, ada yang kuat ada yang lemah, untuk membantu memperkuat janin dalam kandungan salah satunya adalah dengan mengkonsumsi madu.
2. Ibu Hamil : Madu membantu menjaga stamina dan kesehatan selama mengandung bayi, dan membantu asupan gizi yang tinggi bagi pertumbuhan janin yang sehat selama dalam kandungan.
3. Bayi : Membantu perkembangan otak bayi, karena setiap harinya otak terus berkembang sampai dengan usia 5 tahun. Untuk itu ia membutuhkan gizi yang tinggi. Pertumbuhan dan perkembangan otak sangat terkait dengan kecerdasan pikiran (IQ ) dan kecerdasan mental ( EQ ) . Hal ini dapat dilihat dewasa ini aneka produk makanan tambahan baik susu atau bubur bayi yang di formulasikan dengan madu seperti Dancow , Frisian Flag , Sustagen ,dsb . Untuk itu kenapa tidak kita berikan saja bagi buah hati kita yang terbaik ,yaitu madu.
4. Anak-anak : membantu agar nafsu makan meningkat ( adanya unsur vitamin B yang lengkap dalam madu), sehingga anak tumbuh sehat , lincah dan riang serta tahan penyakit.
5. Remaja : Khasiat madu pada akil baligh remaja membuat tumbuh sangat cepat ,gizi yang baik dan teratur akan membuat pertumbuhan tubuh menjadi sempurna.
6. Dewasa : stres adalah kondisi yang banyak dialami oleh para pekerja keras akibat dari kerja keras dan kurangnya asupan makanan bergizi yang pada akhirnya bisa menimbulkan berbagai penyakit seperti thypus, radang dan infeksi bakteri lainnya. Madu adalah solusi terbaik untuk pekerja keras.
7. Lanjut Usia : untuk kita yang sudah menginjak usia lanjut, kita sadar bahwa organ tubuh kita sudah tidak seperti muda dulu. Jadi hal yang sangat penting dalam membantu stabilitas atau kondisi tubuh kita adalah dengan mengkonsumsi madu

Sumber :
http://www.tipskesehatankeluarga.com/manfaat-madu.html

Memasang Gelembung pada Mouse

Posted by Gg 4 comments




Tips ini merupakan salah satu trik untuk mempercantik blog kita, yaitu dengan memasang gelembung bubble pada mouse dan semakin banyak apabila mouse kita gerakan....
Ok, kita langsung saja mencobanya.
Seperti biasa...


1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.



<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://ade-tea.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>



5. Setelah Selesai simpan.


Semoga bermanfaat....



.

Copyright © Blog G21. All rights reserved.

Super SEO created by Blogger Tuts From Jom Kenal Islam