Pengantar HTML: Apa itu HTML?

Ibnusta

Mei 21, 2024

Pengantar HTML: Apa itu HTML?

Cover Pengantar HTML

HTML, atau HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. HTML menyediakan struktur dasar dari sebuah halaman web yang kemudian dapat diperindah dan diatur tata letaknya dengan menggunakan CSS (Cascading Style Sheets) dan dapat ditambahkan fungsionalitasnya dengan menggunakan JavaScript.

HTML terdiri dari berbagai elemen yang masing-masing didefinisikan oleh tag. Sebuah tag terdiri dari nama elemen yang diapit oleh tanda kurung sudut, contohnya <h1> untuk heading terbesar atau <p> untuk paragraf. Berikut adalah contoh struktur dasar dari sebuah dokumen HTML:


<!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>Ini adalah paragraf pertama saya.</p>
    </body>
</html>

Pada contoh di atas, <!DOCTYPE html> mendefinisikan dokumen tersebut sebagai dokumen HTML5. Elemen <html> adalah root dari semua elemen HTML lainnya dalam dokumen. Elemen <head> berisi informasi meta tentang dokumen, dan elemen <body> berisi konten yang akan ditampilkan di halaman web.

HTML sangat penting dalam pengembangan web karena tanpa HTML, tidak ada struktur yang bisa diinterpretasikan oleh browser untuk menampilkan konten. Dengan menguasai HTML, Anda dapat mulai membangun situs web sederhana dan kemudian memperluasnya dengan teknologi web lainnya.

Dalam postingan selanjutnya, kita akan membahas lebih rinci tentang berbagai elemen HTML dan cara menggunakannya untuk membuat halaman web yang menarik dan fungsional. Jangan lupa untuk mengikuti blog ini untuk mendapatkan update terbaru!

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2112189061-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY47jWRYHx-XqydmAb4iA0nyOb4S7A:1756577733616';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4011228414530647771','//about.ibnusta.com/2024/05/pengantar-html-apa-itu-html.html','4011228414530647771');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4011228414530647771', 'title': 'Ibnusta', 'url': 'https://about.ibnusta.com/2024/05/pengantar-html-apa-itu-html.html', 'canonicalUrl': 'https://about.ibnusta.com/2024/05/pengantar-html-apa-itu-html.html', 'homepageUrl': 'https://about.ibnusta.com/', 'searchUrl': 'https://about.ibnusta.com/search', 'canonicalHomepageUrl': 'https://about.ibnusta.com/', 'blogspotFaviconUrl': 'https://about.ibnusta.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, '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\x22Ibnusta - Atom\x22 href\x3d\x22https://about.ibnusta.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Ibnusta - RSS\x22 href\x3d\x22https://about.ibnusta.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Ibnusta - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4011228414530647771/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Ibnusta - Atom\x22 href\x3d\x22https://about.ibnusta.com/feeds/4891017176542249441/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/b8983d8565d83a33', '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': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'item', 'postId': '4891017176542249441', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6qRCJexsXmwKI9yp5Rdyp4isTih5BUaG3jqPLjYkb4ENubsXjJjWLTGYoXhA5JnNmgioH9AiGt6pxiT2FpepbK8lLzBnAqm_FVaTLURkNQ6hp0Lcm5CLYlXNmxooJD8OfEOJeBet5oaDq/s72-c/apaituhtml.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6qRCJexsXmwKI9yp5Rdyp4isTih5BUaG3jqPLjYkb4ENubsXjJjWLTGYoXhA5JnNmgioH9AiGt6pxiT2FpepbK8lLzBnAqm_FVaTLURkNQ6hp0Lcm5CLYlXNmxooJD8OfEOJeBet5oaDq/s0/apaituhtml.png', 'pageName': 'Pengantar HTML: Apa itu HTML?', 'pageTitle': 'Ibnusta: Pengantar HTML: Apa itu HTML?', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'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': 'Pengantar HTML: Apa itu HTML?', 'description': 'Ibnu Syifa Takbir Adha, atau yang lebih dikenal dengan Ibnusta, adalah seorang desainer grafis dan pengembang web dengan pengalaman lebih dari 5 tahun', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6qRCJexsXmwKI9yp5Rdyp4isTih5BUaG3jqPLjYkb4ENubsXjJjWLTGYoXhA5JnNmgioH9AiGt6pxiT2FpepbK8lLzBnAqm_FVaTLURkNQ6hp0Lcm5CLYlXNmxooJD8OfEOJeBet5oaDq/s0/apaituhtml.png', 'url': 'https://about.ibnusta.com/2024/05/pengantar-html-apa-itu-html.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4891017176542249441}}, {'name': 'widgets', 'data': [{'title': 'Ibnusta (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'section', 'id': 'LinkList134'}, {'title': '', 'type': 'HTML', 'sectionId': 'hero', 'id': 'HTML1'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'main', 'id': 'Blog1', 'posts': [{'id': '4891017176542249441', 'title': 'Pengantar HTML: Apa itu HTML?', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6qRCJexsXmwKI9yp5Rdyp4isTih5BUaG3jqPLjYkb4ENubsXjJjWLTGYoXhA5JnNmgioH9AiGt6pxiT2FpepbK8lLzBnAqm_FVaTLURkNQ6hp0Lcm5CLYlXNmxooJD8OfEOJeBet5oaDq/s0/apaituhtml.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Post a Comment'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'comments', 'label': 'Post a Comment'}, {'name': 'labels', 'label': ''}]}, {'title': 'Menu Navigasi Utama', 'type': 'HTML', 'sectionId': 'footer_top', 'id': 'HTML2'}, {'title': 'Halaman', 'type': 'LinkList', 'sectionId': 'footer_top', 'id': 'LinkList1'}, {'title': 'Lainnya', 'type': 'LinkList', 'sectionId': 'footer_top', 'id': 'LinkList2'}, {'title': '', 'type': 'HTML', 'sectionId': 'footer_bottom', 'id': 'HTML3'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList134', 'section', document.getElementById('LinkList134'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'hero', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/497930099-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'footer_top', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'footer_top', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'footer_top', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'footer_bottom', document.getElementById('HTML3'), {}, 'displayModeFull'));
</script>
</body>