Kode HTML pertama
Buka notepad dan tuliskan kode dibawah ini
Hello World
Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello
World!!
Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag
maksudnya untuk memulai huruf tebal (bold) dan tag merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag dan , tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).
Containers
Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:
Hello
World!!
Hasil:
Hello World!!
Tag
berguna untuk memiringkan teks (italic) tag memiliki penutup yaitu . Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka dan tag penutup sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.
Standalone Tag.
Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag ![]()
yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah
yang berguna untuk memberi jarak antar teks dan tag
untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.
Atribut
Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:
Hello World!!
Hasilnya:
Hello World!!
Tulisan World!! terletak ditengah tag nah tag memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?
HTML Entity
Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:
Saya belajar web
Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:
Saya belajar web
HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.
Struktur Dokumen HTML
Tadi sudah saya katakan bahwa HTML yang baik memiliki tag dan . mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag tidak memiliki atribut tetapi memiliki container khusus didalam header seperti , , dan . Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:<br />
<br />
<html><br />
<head><br />
<title>Your title
Hello World!!
Hasilnya didalam Microsoft Internet Explorer :
Contoh HTML dasar
Anda lihat teks yang berada diantara tag muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.<br />
Susun file Anda<br />
<br />
Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.<br />
index.html<br />
<br />
Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.<br />
<br />
Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.<br />
<br />
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body><br />
Teks dan Paragraf<br />
<br />
Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.<br />
<br />
Heading merupakan container yang diawali dengan tag <h1>dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.<br />
<br />
Cobalah kode berikut ini:<br />
<br />
<h1>My First HTML</h1><h2>My First HTML</h2><h3>My First HTML</h3><h4>My First HTML</h4><h5>My First HTML</h5><h6>My First HTML</h6><br />
Hasil:<br />
Contoh penggunaan tag Heading<br />
<br />
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p>digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah<br />
<br />
Sekarang coba kode berikut ini:<br />
<br />
<p>Halo, nama saya <b>Budi</b> dan <br />
saya ingin belajar HTML.</p><p>Ini merupakan <i>kode HTML pertama saya</i> dan saya <br />
belajar untuk <u>memformat</u> teks dalam HTML </p><br />
Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba :)<br />
<br />
Beberapa tag mempunyai atribut ALIGN, termasuk <p>dan <h1>- <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:<br />
<br />
<h1 align="center">Nama saya Jono</h1><p>Halo nama saya Jono dan saya lagi belajar HTML</p><p align="right">James, 2006</p><br />
Hasilnya:<br />
Contoh penggunaan Alignment<br />
<br />
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:<br />
<br />
<p><font face="Arial" size="2" color="#FF0000">Nama <br />
saya</font><br />
<b>Bambang</b><font face="Arial" size="2"> <br />
dan </font><font face="Tahoma">saya cinta rupiah</font></p><br />
Silahkan anda coba sendiri untuk melihat seperti apa hasilnya<br />
<br />
Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah . Langsung saja coba kode berikut ini:<br />
<br />
<p>Baris 1<br>Baris 2<br>Baris 3<br>Baris <br />
<b>4</b></p><br />
Hasil:<br />
<br />
Baris 1<br />
Baris 2<br />
Baris 3<br />
Baris 4<br />
<br />
Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr>memiliki beberapa atribut. Tag <hr>tidak memerlukan tag penutup jadi tag <hr>merupakan standalone tag. Coba contoh berikut ini:<br />
<br />
<p>Halo nama saya Telo</p><hr width="25%" align="justify"><p>Saya lagi belajar membuat garis horisontal.</p><hr size="4" align="justify"><p>Matur nuwun</p><hr size="3" noshade color="#000000" width="25%" align="justify"><br />
Hasil:<br />
Contoh penggunaan Horizontal Rules<br />
<br />
Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr>terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis.perbedaan tag <hr>yang menggunakan noshade dengan yang tidak pada kode diatas.
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Diposting oleh
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/10654604787125622321' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/10654604787125622321' rel='author' title='author profile'>
<span itemprop='name'>baxu_zuta</span>
</a>
</span>
</span>
<span class='post-timestamp'>
di
<meta content='http://baxuzuta.blogspot.com/2012/01/tutorial-html.html' itemprop='url'/>
<a class='timestamp-link' href='https://baxuzuta.blogspot.com/2012/01/tutorial-html.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2012-01-26T09:03:00+07:00'>09.03</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1234312262'>
<a href='https://www.blogger.com/post-edit.g?blogID=6347867189745144990&postID=3329851418421388609&from=pencil' title='Edit Entri'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=6347867189745144990&postID=3329851418421388609&target=email' target='_blank' title='Kirimkan Ini lewat Email'><span class='share-button-link-text'>Kirimkan Ini lewat Email</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=6347867189745144990&postID=3329851418421388609&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=6347867189745144990&postID=3329851418421388609&target=twitter' target='_blank' title='Bagikan ke X'><span class='share-button-link-text'>Bagikan ke X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=6347867189745144990&postID=3329851418421388609&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Berbagi ke Facebook'><span class='share-button-link-text'>Berbagi ke Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=6347867189745144990&postID=3329851418421388609&target=pinterest' target='_blank' title='Bagikan ke Pinterest'><span class='share-button-link-text'>Bagikan ke Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>Tidak ada komentar:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Posting Komentar</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/6347867189745144990?po=3329851418421388609&hl=id' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/2315299244-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://baxuzuta.blogspot.com/2012/03/sayidan.html' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://baxuzuta.blogspot.com/2011/11/jaringan.html' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
</span>
<a class='home-link' href='https://baxuzuta.blogspot.com/'>Beranda</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Langganan:
<a class='feed-link' href='https://baxuzuta.blogspot.com/feeds/3329851418421388609/comments/default' target='_blank' type='application/atom+xml'>Posting Komentar (Atom)</a>
</div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<div class='sidebar section' id='sidebar-left-1'><div class='widget Image' data-version='1' id='Image1'>
<div class='widget-content'>
<img alt='' height='257' id='Image1_img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicILacqEkMdvYx3t5LlGeSHQgv8MuL88E0nZDGLoisNPzhwp20L6SNdCQpPTmxvMpFz1OVJjkdTpQ_avvDmR20Qnx1wbOOeZdW2d7z8kGyGxgOA3GBF6VCViWrkG_3EKZhvDolieH5u36G/s728/people+rasta.jpg' width='196'/>
<br/>
</div>
<div class='clear'></div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>Mengenai Saya</h2>
<div class='widget-content'>
<a href='https://www.blogger.com/profile/10654604787125622321'><img alt='Foto saya' class='profile-img' height='60' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKhlw1NR1FMA3C7TKzShLJLrUOH0x6N7aRdhhNHKRWmazAsPzqbkYzsh0klDEPpd1HbViZ_VKItS9FLhnIwuhpNhtA1qOGhESDCM3IuSrKuD6vivbQRnajlrZs5feJ00/s220/DSC00979dgar.jpg' width='80'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/10654604787125622321' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
baxu_zuta
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/10654604787125622321' rel='author'>Lihat profil lengkapku</a>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Arsip Blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2012/'>
2012
</a>
<span class='post-count' dir='ltr'>(4)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2012_04_15_archive.html'>
04/15 - 04/22
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2012_04_08_archive.html'>
04/08 - 04/15
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2012_03_25_archive.html'>
03/25 - 04/01
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2012_01_22_archive.html'>
01/22 - 01/29
</a>
<span class='post-count' dir='ltr'>(1)</span>
<ul class='posts'>
<li><a href='https://baxuzuta.blogspot.com/2012/01/tutorial-html.html'>tutorial HTML</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2011/'>
2011
</a>
<span class='post-count' dir='ltr'>(4)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2011_11_20_archive.html'>
11/20 - 11/27
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2011_09_18_archive.html'>
09/18 - 09/25
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://baxuzuta.blogspot.com/2011_09_04_archive.html'>
09/04 - 09/11
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>Pengikut</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers/frame/6347867189745144990?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByNmZjAwMDAiByMwZWYyMTgqC3RyYW5zcGFyZW50MgcjMDAwMDAwOgcjZmYwMDAwQgcjMGVmMjE4SgcjYTJhMmEyUgcjMGVmMjE4Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3din\x26origin\x3dhttps://baxuzuta.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/6347867189745144990?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByNmZjAwMDAiByMwZWYyMTgqC3RyYW5zcGFyZW50MgcjMDAwMDAwOgcjZmYwMDAwQgcjMGVmMjE4SgcjYTJhMmEyUgcjMGVmMjE4Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3din\x26origin\x3dhttps://baxuzuta.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='sidebar section' id='sidebar-left-2-1'><div class='widget HTML' data-version='1' id='HTML3'>
<div class='widget-content'>
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDtOK95eINV4ZfAwnKs1YbMszRKH1MI-EXb0_mVZUyRvUFwlL8lz0h0YuGFPJ7-6LkKOCuH9QF2MD_qIA11mY00-TdXh-okTfuWYqvhoQGulv06rmskxgUiukeRVVEu7qWAQHFJV2LHCK/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/baxuxu";var tweetThisText = "Twitter - republik rastafana Blog http://baxu_zuta.com/";tripleflapInit(); </script>
</div>
<div class='clear'></div>
</div></div>
</td>
<td class='columns-cell'>
<div class='sidebar no-items section' id='sidebar-left-2-2'></div>
</td>
</tr>
</tbody>
</table>
<div class='sidebar no-items section' id='sidebar-left-3'></div>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow @twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class='clear'></div>
</div></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot section' id='footer-2-1'><div class='widget HTML' data-version='1' id='HTML2'>
<h2 class='title'>....</h2>
<div class='widget-content'>
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "baxu_zuta";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
</div>
<div class='clear'></div>
</div></div>
</td>
<td class='columns-cell'>
<div class='foot no-items section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Footer'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Tema Sederhana. Gambar tema oleh <a href='http://www.istockphoto.com/googleimages.php?id=8241450&platform=blogger&langregion=in' target='_blank'>enjoynz</a>. Diberdayakan oleh <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4OIYEeD0gPA8Goa2K2z5ztXpc_LQ:1731552838345';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6347867189745144990','//baxuzuta.blogspot.com/2012/01/tutorial-html.html','6347867189745144990');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6347867189745144990', 'title': 'REPUBLIK RASTAFANA (REGGAE)', 'url': 'https://baxuzuta.blogspot.com/2012/01/tutorial-html.html', 'canonicalUrl': 'http://baxuzuta.blogspot.com/2012/01/tutorial-html.html', 'homepageUrl': 'https://baxuzuta.blogspot.com/', 'searchUrl': 'https://baxuzuta.blogspot.com/search', 'canonicalHomepageUrl': 'http://baxuzuta.blogspot.com/', 'blogspotFaviconUrl': 'https://baxuzuta.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22REPUBLIK RASTAFANA (REGGAE) - Atom\x22 href\x3d\x22https://baxuzuta.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22REPUBLIK RASTAFANA (REGGAE) - RSS\x22 href\x3d\x22https://baxuzuta.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22REPUBLIK RASTAFANA (REGGAE) - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6347867189745144990/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22REPUBLIK RASTAFANA (REGGAE) - Atom\x22 href\x3d\x22https://baxuzuta.blogspot.com/feeds/3329851418421388609/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a4858bff8adcc0f1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'item', 'postId': '3329851418421388609', 'pageName': 'tutorial HTML', 'pageTitle': 'REPUBLIK RASTAFANA (REGGAE): tutorial HTML'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'Simple', 'localizedName': 'Sederhana', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'pale', 'variantId': 'pale'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'tutorial HTML', 'description': 'Kode HTML pertama Buka notepad dan tuliskan kode dibawah ini Hello World Simpan file tersebut dengan nama hello.html didalam suatu fol...', 'url': 'https://baxuzuta.blogspot.com/2012/01/tutorial-html.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3329851418421388609}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2784278825-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image1', 'sidebar-left-1', document.getElementById('Image1'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-left-1', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-left-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar-left-1', document.getElementById('Followers1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar-left-2-1', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer-1', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'footer-2-1', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>