Rabu, 22 September 2010

HTML

KEPANJANGAN DARI HTML

HTML = Hyper Text Markup Language
Yaitu bahasa yang biasanya digunakan sebuah halaman website. Kode-kode bahasa ini nantinya diterjemahkan oleh Browser, sehingga tampil seperti halaman yang sedang anda lihat saat ini. Browser sendiri bisa macam-macam, contohnya : Mozilla, Internet Explorer, Opera, Netscape Navigator dll.

KEGUNAAN HTML

HTML adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.
secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :

a. Membuat halaman web.
b. Menampilkan berbagai informasi di dalam sebuah browser Internet.
c. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

FUNGSI TAG PADA HTML
Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal ..., ... dan lain sebagainya, dan TAG yang mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang sudah di buat miring oleh tag ... , dapat di timpa oleh tag ... sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring dan hurup tebal.

4 JENIS PERATAAN (ALIGN) PADA HTML

Dalam tulisan cetak, dikenal tiga atau empat macam perataan yaitu rata kiri (align left), di tengah (center), rata kanan (align right) dan rata kiri dan kanan (justify). Tag Header dan Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan ini.

FUNGSI PAGE HEADER DAN TITLE PADA HTML
• DOCTYPE - ini memberikan penjelasan tentang jenis dokumen HTML ini.
• meta name = "Deskripsi" - ini memberikan deskripsi halaman untuk mesin pencari.
• meta name = "kata kunci" - garis ini menetapkan mesin pencari kata kunci yang dapat digunakan untuk menemukan halaman Anda.
• judul - Tetapkan nama dokumen Anda untuk browser Anda.

Rabu, 01 September 2010

Macam macam tag pada HTML

• MACAM-MACAM TAG PADA HTML

Kumpulan Tag HTML Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
Sebagai awal dari Java applets
Mendefinisikan daerah yang dapat diklik (link) pada image map
Membuat teks tebal
Membuat atribut teks default seperti jenis, ukuran dan warna font
Memberi (suara latar) background sound pada halaman web
Memperbesar ukuran teks sebesar satu point dari defaultnya
Membuat teks berkedip
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link

Pindah baris
Membuat caption pada tabel
Untuk perataan tengah terhadap teks atau gambar
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
Indents teks
Represents different sections of text.
Menambahkan sound or file avi ke halaman web
Seperti tag
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
Mendefinisikan input form
Mendefinisikan frame
Mendefinisikan attribut halaman yang akan menggunakan frame

Ukuran font
Mendefinisikan head document.

Membuat garis horizontal
Bararti dokumen html
Membuat teks miring
Image, imagemap atau an animation
Mendefinisikan input field pada form
  • Membuat bullet point atau baris baru pada list (berpasangan dengan tag , ,
      and
        )
        Mendefinisikan client-side map
        Membuat scrolling teks (teks berjalan) – hanya pada MS IE
        Mencegah ganti baris pada teks atau images
        Jika browser user tidak mendukung frame <br /><ol> Mendefinisikan awal dan akhir list <br /><p> Ganti paragraf <br /><pre> Membuat teks dengan ukuran huruf yg sama <br /><script> Mendefinisikan awal script <br /><table> Membuat tabel <br /><td> Kolom pada tabel <br /><title> Mendefinisikan title <br /><tr> Baris pada tabel <br /><u> Membuat teks bergaris bawah <br /> <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/18081117983506999601' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/18081117983506999601' rel='author' title='author profile'> <span itemprop='name'>eriza humairo</span> </a> </span> </span> <span class='post-timestamp'> di <meta content='http://bhochin.blogspot.com/2010/09/macam-macam-tag-pada-html.html' itemprop='url'/> <a class='timestamp-link' href='http://bhochin.blogspot.com/2010/09/macam-macam-tag-pada-html.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2010-09-01T17:28:00-07:00'>17.28</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://bhochin.blogspot.com/2010/09/macam-macam-tag-pada-html.html#comment-form' onclick=''> Tidak ada komentar: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1284168029'> <a href='https://www.blogger.com/post-edit.g?blogID=3035742238827135115&postID=19329204010983369&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=3035742238827135115&postID=19329204010983369&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=3035742238827135115&postID=19329204010983369&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=3035742238827135115&postID=19329204010983369&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=3035742238827135115&postID=19329204010983369&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=3035742238827135115&postID=19329204010983369&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> </div></div> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='http://bhochin.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Postingan Lebih Baru'>Postingan Lebih Baru</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='http://bhochin.blogspot.com/search?updated-max=2010-09-01T17:28:00-07:00&amp;max-results=7' id='Blog1_blog-pager-older-link' title='Postingan Lama'>Postingan Lama</a> </span> <a class='home-link' href='http://bhochin.blogspot.com/'>Beranda</a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Langganan: <a class='feed-link' href='http://bhochin.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Postingan (Atom)</a> </div> </div> </div></div> </div> </div> <div class='column-left-outer'> <div class='column-left-inner'> <aside> </aside> </div> </div> <div class='column-right-outer'> <div class='column-right-inner'> <aside> <div class='sidebar section' id='sidebar-right-1'><div class='widget LinkList' data-version='1' id='LinkList1'> <h2>friend</h2> <div class='widget-content'> <ul> <li><a href='http://ekakurnia.blogspot.com/'>Eka Kurnia</a></li> <li><a href='http://shintamutiara.blogspot.com/'>shinta mutiara</a></li> <li><a href='http://tugassekolahpart3.blogspot.com/'>Raisya Jasmine</a></li> <li><a href='http://maulidiyaah.blogspot.com/'>Putri Maulidiah</a></li> </ul> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML1'> <h2 class='title'>chat room</h2> <div class='widget-content'> <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="042894" src="http://www4.shoutmix.com/?042894" width="160" height="400" frameborder="0" scrolling="auto"> <a href="http://www4.shoutmix.com/?042894">View shoutbox</a> </iframe> <br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /> <!-- End ShoutMix --> </div> <div class='clear'></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/3035742238827135115?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMjMyMzIiByNkNDc2MjkqByNkNGMwYjYyByNmZmZmZmY6ByMzMjMyMzJCByNkNDc2MjlKByNmZmZmZmZSByNkNDc2MjlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3din\x26origin\x3dhttp://bhochin.blogspot.com"); }, 'open': function(url) { window.followersIframe.close(); followersIframeOpen(url); } } }); } }); } followersIframeOpen("https://www.blogger.com/followers/frame/3035742238827135115?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMjMyMzIiByNkNDc2MjkqByNkNGMwYjYyByNmZmZmZmY6ByMzMjMyMzJCByNkNDc2MjlKByNmZmZmZmZSByNkNDc2MjlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3din\x26origin\x3dhttp://bhochin.blogspot.com"); </script></div> </div> </div> <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'> &#9660;&#160; </span> </a> <a class='post-count-link' href='http://bhochin.blogspot.com/2010/'> 2010 </a> <span class='post-count' dir='ltr'>(6)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> &#9660;&#160; </span> </a> <a class='post-count-link' href='http://bhochin.blogspot.com/2010/09/'> September </a> <span class='post-count' dir='ltr'>(2)</span> <ul class='posts'> <li><a href='http://bhochin.blogspot.com/2010/09/html.html'>HTML</a></li> <li><a href='http://bhochin.blogspot.com/2010/09/macam-macam-tag-pada-html.html'>Macam macam tag pada HTML</a></li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> &#9658;&#160; </span> </a> <a class='post-count-link' href='http://bhochin.blogspot.com/2010/08/'> Agustus </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'> &#9658;&#160; </span> </a> <a class='post-count-link' href='http://bhochin.blogspot.com/2010/07/'> Juli </a> <span class='post-count' dir='ltr'>(3)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget Profile' data-version='1' id='Profile1'> <h2>Mengenai Saya</h2> <div class='widget-content'> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/18081117983506999601' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> eriza humairo </a> </dt> </dl> <a class='profile-link' href='https://www.blogger.com/profile/18081117983506999601' rel='author'>Lihat profil lengkapku</a> <div class='clear'></div> </div> </div></div> </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 no-items section' id='footer-1'></div> <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'> <tbody> <tr> <td class='first columns-cell'> <div class='foot no-items section' id='footer-2-1'></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 PT Keren Sekali. 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/2838643729-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY6PpOM6nO_7u8o2KJocY1XfeAVE8Q:1750411804452';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3035742238827135115','//bhochin.blogspot.com/2010/09/','3035742238827135115'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3035742238827135115', 'title': 'Eriza Humairo', 'url': 'http://bhochin.blogspot.com/2010/09/', 'canonicalUrl': 'http://bhochin.blogspot.com/2010/09/', 'homepageUrl': 'http://bhochin.blogspot.com/', 'searchUrl': 'http://bhochin.blogspot.com/search', 'canonicalHomepageUrl': 'http://bhochin.blogspot.com/', 'blogspotFaviconUrl': 'http://bhochin.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\x22Eriza Humairo - Atom\x22 href\x3d\x22http://bhochin.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Eriza Humairo - RSS\x22 href\x3d\x22http://bhochin.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Eriza Humairo - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3035742238827135115/posts/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/cc668e91c21dc174', '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': 'archive', 'pageName': 'September 2010', 'pageTitle': 'Eriza Humairo: September 2010'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'Awesome Inc.', 'localizedName': 'PT Keren Sekali', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'artsy', 'variantId': 'artsy'}}, {'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': 'Eriza Humairo', 'description': '', 'url': 'http://bhochin.blogspot.com/2010/09/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2010, 'month': 9, 'rangeMessage': 'Menampilkan postingan dari September, 2010'}}}]); _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/1333171735-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'sidebar-right-1', document.getElementById('LinkList1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-right-1', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar-right-1', document.getElementById('Followers1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-right-1', document.getElementById('Profile1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull')); </script> </body> </html>