HTML (Hypertext Markup Language)
merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.
Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.
Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.
Sekarang buka saja notepad anda dan kita mulai.
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
Sebuah halaman HTML yang baik harus memiliki tag
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!!
dokumen HTML terdiri dari 2 bagian yaitu HEAD dan BODY. BODY adalah bagian dari HTML yang memiliki struktur terbesar dalam teks HTML,seperti halnya pada surat.
Sedang bagian Head trdirir dari dokumen-dokumen serta informasi-informasi lainnya.
Secara umum, suatu HTML memiliki kode HTML sebagai berikut :
<br />-BAGIAN JUDUL-
<br />
-BAGIAN BODY DISINI-
Nah, sudah jelas bukan?
Ok, sekarang kita akan lanjut untuk membahas masing-masing tag yang dipakai dalam kode HTML.
HEAD
tag berisi semua informasi yang terkandung dalam kepala dokumen. Informasi ini tidak akan ditamilkan dalam saat browser dijalankan.
Dalam HEAD terdapat tag-tag yang di dalamnya bisa terdiri dari:
<br />Tag <title>berfungsi memberikan judul pada dokumenyang nantinya akan ditampilkan di browser.
<br />
<br /><meta>
<br />digunakan untuk memberikan informasi tentang isi dari suatu halaman web yang akan ditampilakn oleh pengunjung.
<br />format penulisannya:
<br /><meta atribut1="value" atribut2="...">
<br />
<br />Atribut atribut yang ada di dalmnya antara lain :
<br />CONTENT="..." (UNTUK MEMBERIKAN HARGA RESPON ARI PROPERTI)
<br />HTTP-EQUIV="..."(UNTUK MENUNJUKKAN PROPERTI DARI ELEMEN)
<br />NAME="..." (UNTUK MEMBERIKAN KETERANGAN TAMBAHAN DARI ELEMEN)
<br />URL="..." (UNTUK MENUNJUKKAN ALAMAT TARGET DOKUMEN DARI SEBUAH PROPERTI)
<br />
<br />Dari atribut-atribut diatas, kita harus mengisikan value pada atribut tersebut agar proram dapat berjalan.
<br />Adapun value yang bisa dipakai adalah sebai berikut :
<br />
<br />abstract (untuk mendeskripsikan suatu abstraksi rngkas suatu website)
<br />author ( untuk mendefinisikan nama pembuat dokumen)
<br />copyright ( untuk mendefinisikan informasi tentang copyright(hak cipta)dari dokumen HTML
<br />description ( untuk memberikan informasi umum tentang isi halaman website anda.
<br />distribution ( untuk mendefinisikan level dari distribusi dokumen yang ada)
<br />expires (untuk mendeklarasikan kepada search engine kapan isi situs web akan kadaluarsa)
<br />keywoards ( untuk memberikan beberapa kata kunci yang mewakili isi situs )
<br />language ( untuk mendefinisikan bahasa yang digunakan pada halaman web)
<br />revist ( untuk mendefinisikan berapa hari search engine harus mengunjungi kembali halaman website anda)
<br />refresh ( untuk mendefinisikan tiap berapaa detik halaman web harus direfresh)
<br />
<br />
<br />Sebagai contoh penggunaan tag meta diatas adalah sebagai berikut :
<br /><meta equiv="refresh" content="3">
<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/05657883873751825596' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/05657883873751825596' rel='author' title='author profile'>
<span itemprop='name'>Kushin Ryu</span>
</a>
</span>
</span>
<span class='post-timestamp'>
di
<meta content='http://wayandarmayana.blogspot.com/2008/11/html-hypertext-markup-language.html' itemprop='url'/>
<a class='timestamp-link' href='http://wayandarmayana.blogspot.com/2008/11/html-hypertext-markup-language.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2008-11-09T00:05:00-08:00'>00.05</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://www.blogger.com/comment/fullpage/post/3024565151396328273/842296100497486528' onclick=''>
Tidak ada komentar:
</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1664377254'>
<a href='https://www.blogger.com/post-edit.g?blogID=3024565151396328273&postID=842296100497486528&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'>
</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://wayandarmayana.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://wayandarmayana.blogspot.com/search?updated-max=2008-11-09T00:05:00-08:00&max-results=7' id='Blog1_blog-pager-older-link' title='Postingan Lama'>Postingan Lama</a>
</span>
<a class='home-link' href='http://wayandarmayana.blogspot.com/'>Beranda</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Langganan:
<a class='feed-link' href='http://wayandarmayana.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Postingan (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><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='http://wayandarmayana.blogspot.com/2008/'>
2008
</a>
<span class='post-count' dir='ltr'>(4)</span>
<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='http://wayandarmayana.blogspot.com/2008/11/'>
November
</a>
<span class='post-count' dir='ltr'>(3)</span>
<ul class='posts'>
<li><a href='http://wayandarmayana.blogspot.com/2008/11/html-hypertext-markup-language_11.html'> <!-- @page { size: 8.5in 11in; margin: 0...</a></li>
<li><a href='http://wayandarmayana.blogspot.com/2008/11/html-hypertext-markup-language_3841.html'> <!-- @page { size: 8.5in 11in; margin: 0...</a></li>
<li><a href='http://wayandarmayana.blogspot.com/2008/11/html-hypertext-markup-language.html'>HTML (Hypertext Markup Language)
merupakan bahasa...</a></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='http://wayandarmayana.blogspot.com/2008/09/'>
September
</a>
<span class='post-count' dir='ltr'>(1)</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/05657883873751825596' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Kushin Ryu
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/05657883873751825596' rel='author'>Lihat profil lengkapku</a>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer no-items section' id='footer'></div>
</div>
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2591855913-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7OAnMoVFYfe0pkmPBOROe47C7u5g:1731274877266';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3024565151396328273','//wayandarmayana.blogspot.com/2008/11/','3024565151396328273');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3024565151396328273', 'title': 'Wayan Darmayana', 'url': 'http://wayandarmayana.blogspot.com/2008/11/', 'canonicalUrl': 'http://wayandarmayana.blogspot.com/2008/11/', 'homepageUrl': 'http://wayandarmayana.blogspot.com/', 'searchUrl': 'http://wayandarmayana.blogspot.com/search', 'canonicalHomepageUrl': 'http://wayandarmayana.blogspot.com/', 'blogspotFaviconUrl': 'http://wayandarmayana.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\x22Wayan Darmayana - Atom\x22 href\x3d\x22http://wayandarmayana.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Wayan Darmayana - RSS\x22 href\x3d\x22http://wayandarmayana.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Wayan Darmayana - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3024565151396328273/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/6eb7ce967db05cf0', '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': 'Twitter', 'key': 'twitter', 'shareMessage': 'Bagikan ke Twitter', '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': 'November 2008', 'pageTitle': 'Wayan Darmayana: November 2008'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'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': 'Wayan Darmayana', 'description': '', 'url': 'http://wayandarmayana.blogspot.com/2008/11/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2008, 'month': 11, 'rangeMessage': 'Menampilkan postingan dari November, 2008'}}}]);
_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/3386964323-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
</script>
</body>
</html> 