{"id":2814,"date":"2020-08-27T10:21:10","date_gmt":"2020-08-27T03:21:10","guid":{"rendered":"http:\/\/materi.smkn43jkt.sch.id\/?p=2814"},"modified":"2020-09-11T07:36:41","modified_gmt":"2020-09-11T00:36:41","slug":"html-dasar-apa-itu-contoh-dan-fungsi","status":"publish","type":"post","link":"http:\/\/materi.smkn43jkt.sch.id\/?p=2814","title":{"rendered":"HTML Dasar: Apa itu \u2013 Contoh dan Fungsi"},"content":{"rendered":"<h2>Apa Itu HTML<\/h2>\n<p>HTML adalah bahasa standar untuk membangun sebuah website. Dengan HTML kita dapat membangun sebuah website.<\/p>\n<p>Kepanjangan dari html: Hyper Text Markup Language<\/p>\n<h2>Versi HTML Dari Masa Ke Masa<\/h2>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<th>Versi<\/th>\n<th>Tahun<\/th>\n<\/tr>\n<tr>\n<td>HTML<\/td>\n<td>1991<\/td>\n<\/tr>\n<tr>\n<td>HTML 2.0<\/td>\n<td>1995<\/td>\n<\/tr>\n<tr>\n<td>HTML 3.2<\/td>\n<td>1997<\/td>\n<\/tr>\n<tr>\n<td>HTML 4.01<\/td>\n<td>1999<\/td>\n<\/tr>\n<tr>\n<td>XHTML<\/td>\n<td>2000<\/td>\n<\/tr>\n<tr>\n<td>HTML5<\/td>\n<td>2014<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p><strong>Karakteristik<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen  &lt;! DOCTYPE html&gt;<\/code><\/pre>\n<pre class=\"wp-block-code\"><code>Semua dokumen html harus dimulai dengan tag &lt;html&gt; lalu diakhir tag &lt;\/html&gt;.<\/code><\/pre>\n<pre class=\"wp-block-code\"><code>Bagian yang ingin di tampilkan harus terdapat di antara &lt;body&gt; sebelum &lt;\/body&gt;<\/code><\/pre>\n<div id=\"5\" class=\"wp-block-codemirror-blocks-code-block code-block\">\n<div class=\"CodeMirror cm-s-default CodeMirror-wrap CodeMirror-simplescroll\">\n<div class=\"CodeMirror-scroll\">\n<div><\/div>\n<div class=\"CodeMirror-gutters\">\n<div class=\"CodeMirror-gutter CodeMirror-linenumbers\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"code-block code-block-6\">\n<div id=\"div-gpt-ad-1495635998525-4\" data-google-query-id=\"CKjCj4q2uusCFYyhSwUd96YD3Q\"><\/div>\n<\/div>\n<h2>Contoh 1 : Html \u2013 Heading dan Paragaraf<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Contoh HTML Sederhana&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;Ini Adalah Heading&lt;\/h1&gt;\r\n&lt;h2&gt;Ini Adalah Heading&lt;\/h2&gt;\r\n&lt;h3&gt;Ini Adalah Heading&lt;\/h3&gt;\r\n&lt;p&gt;Ini adalah Paragraf yang dapat digunakan untuk menulis konten artikel.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<ul>\n<li>&lt;!DOCTYPE html&gt; menandakan dokumen ini adalah html<\/li>\n<li>&lt;html&gt; &lt;\/html&gt;mulainya html<\/li>\n<li>&lt;head&gt; &lt;\/head&gt; adalah tanda dokumen utama yang berada di atas atau kepala sebuah dokumen html<\/li>\n<li>&lt;title&gt; &lt;\/title&gt; adalah judul<\/li>\n<li>&lt;body&gt;&lt;\/body&gt; adalah bagian isi dari dokumen html<\/li>\n<li>h1,h2, dan seterusnya digunakan sebagai heading,<\/li>\n<li>&lt;p&gt; dan &lt;\/p&gt; adalah tanda di mulai dan akhirnya sebuah paragraf<\/li>\n<li>&lt;\/p&gt; digunakan sebagai akhir paragraf<\/li>\n<\/ul>\n<h2>Contoh 2 : Html Sederhana Dengan Tabel<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;xq-light&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Contoh HTML Sederhana&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;Ini contoh html tabel&lt;\/h1&gt;\r\n&lt;table border=\"1\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;Nama Lengkap&lt;\/th&gt;\r\n    &lt;th&gt;Alamat&lt;\/th&gt;\r\n    &lt;th&gt;Usia&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Anton&lt;\/td&gt;\r\n    &lt;td&gt;jl. Depati Amir&lt;\/td&gt;\r\n    &lt;td&gt;50&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Evalia Sentosa&lt;\/td&gt;\r\n    &lt;td&gt;Bandung&lt;\/td&gt;\r\n    &lt;td&gt;17&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<h2>Contoh 3 : Html Link<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;HTML Links&lt;\/h2&gt;\r\n&lt;p&gt;Link pada html didifinisikan dengan tag &lt;a&gt; &lt;\/p&gt;\r\n\r\n&lt;a href=\"https:\/\/dosenit.com\"&gt;Ini adalah contoh link&lt;\/a&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<h2>Contoh 4 : HTML Image<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;HTML Images&lt;\/h2&gt;\r\n&lt;p&gt;Gambar pada HTML didifinisikan dengan tag img&lt;\/p&gt;\r\n\r\n&lt;img src=\"https:\/\/dosenit.com\/wp-content\/uploads\/2019\/03\/dosen-ti.png\" alt=\"Dosenit.com\" width=\"270\" height=\"70\"&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<h2>Contoh 5 : HTML Button<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;HTML Button&lt;\/h2&gt;\r\n&lt;p&gt;Button pada html menggunakan tag button &lt;\/p&gt;\r\n\r\n&lt;button&gt;Click me&lt;\/button&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<h2>Contoh 6 : HTML List<\/h2>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;HTML List&lt;\/h2&gt;\r\n&lt;p&gt;Button pada html menggunakan tag ul dan li atau ol dan li &lt;\/p&gt;\r\n\r\n&lt;ul&gt;\r\n  &lt;li&gt;Kopi&lt;\/li&gt;\r\n  &lt;li&gt;Susu&lt;\/li&gt;\r\n  &lt;li&gt;Air putih&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n\r\n&lt;ol&gt;\r\n  &lt;li&gt;<a class=\"aalmanual\" title=\"\" href=\"https:\/\/dosenit.com\/css\/css\">CSS<\/a>&lt;\/li&gt;\r\n  &lt;li&gt;PHP&lt;\/li&gt;\r\n  &lt;li&gt;C++&lt;\/li&gt;\r\n&lt;\/ol&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<p>contoh lainnya<\/p>\n<h3><span id=\"Tag_Dasar\" class=\"ez-toc-section\"><\/span>Tag Dasar<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>\u00a0&lt;! DOCTYPE html&gt;<\/td>\n<td>Deklarasi untuk mendefinisikan dokumen menjadi HTML<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>\u00a0&lt;html&gt;<\/td>\n<td>Tag pembuka untuk membuat dokumen HTML<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>\u00a0&lt;head&gt;<\/td>\n<td>Informasi meta tentang dokumen<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>\u00a0&lt;title&gt;<\/td>\n<td>Membuat judul halaman yang nantinya akan ditampilkan di browser<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>\u00a0&lt;body&gt;<\/td>\n<td>Tempat dibuatnya semua konten website menggunakan HTML<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Page Title&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;My First Heading&lt;\/h1&gt;\r\n&lt;p&gt;My first paragraph.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6063\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6063 size-full\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/html-dasar.png\" alt=\"Tag HTML \" width=\"283\" height=\"133\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Dasar<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3>Tag Judul<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>\u00a0&lt;h1&gt; s\/d &lt;h6&gt;<\/td>\n<td>\u00a0Membuat judul atau heading<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;hr&gt;<\/td>\n<td>Memisahkan konten (biasanya ditampilkan garis pembatas)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;This is heading 1&lt;\/h1&gt;\r\n&lt;p&gt;This is some text.&lt;\/p&gt;\r\n&lt;hr&gt;\r\n\r\n&lt;h2&gt;This is heading 2&lt;\/h2&gt;\r\n&lt;p&gt;This is some other text.&lt;\/p&gt;\r\n&lt;hr&gt;\r\n\r\n&lt;h2&gt;This is heading 2&lt;\/h2&gt;\r\n&lt;p&gt;This is some other text.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6073\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6073 size-medium\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-h1-232x300.png\" alt=\"Tag HTML\" width=\"232\" height=\"300\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Pos<\/figcaption><\/figure>\n<h3>Tag Paragraf<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>\u00a0&lt;p&gt;<\/td>\n<td>\u00a0Membuat paragraf<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;br&gt;<\/td>\n<td>\u00a0Membuat garis baru<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>&lt;pre&gt;<\/td>\n<td>\u00a0Memfortmat teks atau kalimat<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;In HTML, spaces and new lines are ignored:&lt;\/p&gt;\r\n&lt;br&gt; example\r\n\r\n&lt;p&gt;\r\n\r\nMy Bonnie lies over the ocean.\r\n\r\nMy Bonnie lies over the sea.\r\n\r\nMy Bonnie lies over the ocean.\r\n\r\nOh, bring back my Bonnie to me.\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6074\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6074\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-paragraf.png\" alt=\"\" width=\"536\" height=\"138\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Paragraf<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3><span id=\"Tag_Style\" class=\"ez-toc-section\"><\/span>Tag Style<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>\u00a0style<\/td>\n<td>\u00a0Atribut untuk elemen styling pada HTML<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>background-color<\/td>\n<td>\u00a0Memberikan warna latar belakang<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>color<\/td>\n<td>\u00a0Memberi warna pada teks<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>font-family<\/td>\n<td>\u00a0Mengubah font pada teks<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>font-size<\/td>\n<td>\u00a0Mengatur ukuran font<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>text-align<\/td>\n<td>\u00a0Mengatura perataan teks<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1 style=\"text-align:center;\"&gt;Centered Heading&lt;\/h1&gt;\r\n&lt;p style=\"text-align:center;\"&gt;Centered paragraph.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6079\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6079 size-full\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-styling.png\" alt=\"Tag HTML \" width=\"360\" height=\"117\" \/><figcaption class=\"caption wp-caption-text\">Tampilan elemen styling<\/figcaption><\/figure>\n<pre><\/pre>\n<h3>Tag Formating<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>&lt;b&gt;<\/td>\n<td>\u00a0Membuat teks tebal<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;strong&gt;<\/td>\n<td>\u00a0Membuat teks penting<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>&lt;i&gt;<\/td>\n<td>\u00a0Membuat teks miring<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>&lt;em&gt;<\/td>\n<td>\u00a0Membuat teks ditekankan<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>&lt;mark&gt;<\/td>\n<td>\u00a0Membuat teks ditandai<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>&lt;small&gt;<\/td>\n<td>\u00a0Membuat teks kecil<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>&lt;del&gt;<\/td>\n<td>\u00a0Teks dihapus<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>&lt;ins&gt;<\/td>\n<td>\u00a0Teks dimasukan<\/td>\n<\/tr>\n<tr>\n<td>9<\/td>\n<td>&lt;sub&gt;<\/td>\n<td>\u00a0Teks subscript<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>&lt;sup&gt;<\/td>\n<td>\u00a0Teks superscript<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;&lt;b&gt;This text is bold&lt;\/b&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;i&gt;This text is italic&lt;\/i&gt;&lt;\/p&gt;\r\n&lt;p&gt;This is&lt;sub&gt; subscript&lt;\/sub&gt; and &lt;sup&gt;superscript&lt;\/sup&gt;&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6081\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6081 size-full\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-formating.png\" alt=\"\" width=\"238\" height=\"139\" \/><figcaption class=\"caption wp-caption-text\">Tampilan tag formating<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3><span id=\"Tag_Gambar\" class=\"ez-toc-section\"><\/span>Tag Gambar<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>&lt;img&gt;<\/td>\n<td>Elemen untuk mendefinisikan gambar<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>src<\/td>\n<td>Atribut untuk menentukan URL gambar<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>alt<\/td>\n<td>Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>width \u2013 height<\/td>\n<td>Menentukan ukuran gambar<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>float<\/td>\n<td>Properti untuk float image pada CSS<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>&lt;map&gt;<\/td>\n<td>Mendefinisikan gambar peta<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>&lt;area&gt;<\/td>\n<td>Mendefinisikan area atau daerah-daerah gambar pada peta<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>&lt;picture&gt;<\/td>\n<td>Menampilkan gambar yang berbeda untuk perangkat yang berbeda<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;Alternative text&lt;\/h2&gt;\r\n\r\n&lt;p&gt;The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:&lt;\/p&gt;\r\n\r\n&lt;img src=\"img_chania.jpg\" alt=\"Flowers in Chania\" width=\"300\" height=\"300\"&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6084\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6084 \" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-gambar.png\" alt=\"\" width=\"407\" height=\"281\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Gambar<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3><span id=\"Tag_Form\" class=\"ez-toc-section\"><\/span>Tag Form<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>&lt;form&gt;<\/td>\n<td>Membuat formulir untuk mengumpulkan input pengguna<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;input&gt;<\/td>\n<td>Membuat tipe inputan pada form yang akan dibuat<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>&lt;textare&gt;<\/td>\n<td>Elemen untuk mendefinisikan field input<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>&lt;label&gt;<\/td>\n<td>Memberikan label pada elemen input<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>&lt;fieldset&gt;<\/td>\n<td>Mengelompokan elemen yang terdapat pada sebuah form<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>&lt;select&gt;<\/td>\n<td>Membuat input dengan pilihan yang berbentuk list drop down<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>&lt;optgroup&gt;<\/td>\n<td>Mengelompokan beberapa pilihan pada daftar pilihan input<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>&lt;option&gt;<\/td>\n<td>Mendefinisikan opsi yang bisa dipilih<\/td>\n<\/tr>\n<tr>\n<td>9<\/td>\n<td>&lt;button&gt;<\/td>\n<td>Membuat Button<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>&lt;datalist&gt;<\/td>\n<td>Membuat daftar pilihan untuk input data<\/td>\n<\/tr>\n<tr>\n<td>11<\/td>\n<td>&lt;output&gt;<\/td>\n<td>Menampilkan hasil dari hitungan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;The datalist Element&lt;\/h2&gt;\r\n&lt;p&gt;The datalist element specifies a list of pre-defined options for an input element.&lt;\/p&gt;\r\n\r\n&lt;form action=\"\/action_page.php\"&gt;\r\n&lt;input list=\"browsers\" name=\"browser\"&gt;\r\n&lt;datalist id=\"browsers\"&gt;\r\n&lt;option value=\"Internet Explorer\"&gt;\r\n&lt;option value=\"Firefox\"&gt;\r\n&lt;option value=\"Chrome\"&gt;\r\n&lt;option value=\"Opera\"&gt;\r\n&lt;option value=\"Safari\"&gt;\r\n&lt;\/datalist&gt;\r\n&lt;input type=\"submit\"&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;p&gt;&lt;b&gt;Note:&lt;\/b&gt; The datalist tag is not supported in Safari or IE9 (and earlier).&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6086\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6086 \" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-form.png\" alt=\"Tag HTML \" width=\"447\" height=\"281\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Form<\/figcaption><\/figure>\n<div class=\"banner_wrapper\"><\/div>\n<div><\/div>\n<div>\n<h3>Tag Tabel<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>&lt;table&gt;<\/td>\n<td>Membuat tabel pada web<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;tr&gt;<\/td>\n<td>Membuat baris pada tabel<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>&lt;td&gt;<\/td>\n<td>Membuat kolom pada tabel<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>&lt;th&gt;<\/td>\n<td>Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>&lt;caption&gt;<\/td>\n<td>Membuat judul tabel<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>border<\/td>\n<td>Mengatur garis tabel<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>border-collapse<\/td>\n<td>Mengatur batas garis tabel<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>padding<\/td>\n<td>Mengatur padding pada cell<\/td>\n<\/tr>\n<tr>\n<td>9<\/td>\n<td>text-align<\/td>\n<td>Mengatur perataan pada konten tabel<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>border-spacing<\/td>\n<td>Mengatur jarak spasi garis tabel<\/td>\n<\/tr>\n<tr>\n<td>11<\/td>\n<td>colspan<\/td>\n<td>Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell<\/td>\n<\/tr>\n<tr>\n<td>12<\/td>\n<td>rowspan<\/td>\n<td>Menggabungkan beberapa baris<\/td>\n<\/tr>\n<tr>\n<td>13<\/td>\n<td>id<\/td>\n<td>Memberikan id pada tabel atau kolom<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ntable, th, td {\r\n  border: 1px solid black;\r\n  padding: 5px;\r\n}\r\ntable {\r\n  border-spacing: 15px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;Border Spacing&lt;\/h2&gt;\r\n&lt;p&gt;Border spacing specifies the space between the cells.&lt;\/p&gt;\r\n\r\n&lt;table style=\"width:100%\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;Firstname&lt;\/th&gt;\r\n    &lt;th&gt;Lastname&lt;\/th&gt; \r\n    &lt;th&gt;Age&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Jill&lt;\/td&gt;\r\n    &lt;td&gt;Smith&lt;\/td&gt;\r\n    &lt;td&gt;50&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Eve&lt;\/td&gt;\r\n    &lt;td&gt;Jackson&lt;\/td&gt;\r\n    &lt;td&gt;94&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;John&lt;\/td&gt;\r\n    &lt;td&gt;Doe&lt;\/td&gt;\r\n    &lt;td&gt;80&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n&lt;p&gt;Try to change the border-spacing to 5px.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6093\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6093 \" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-tabel.png\" alt=\"\" width=\"588\" height=\"298\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag Tabel<\/figcaption><\/figure>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Tag Daftar\/ List<\/h3>\n<table class=\" table table-hover\">\n<tbody>\n<tr>\n<td><strong>No<\/strong><\/td>\n<td><strong>Nama Tag<\/strong><\/td>\n<td><strong>Fungsi<\/strong><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>&lt;ul&gt;<\/td>\n<td>Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>&lt;ol&gt;<\/td>\n<td>Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>&lt;li&gt;<\/td>\n<td>Menentukan berbagai item yang ingin ditampilkan<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>&lt;dl&gt;<\/td>\n<td>Mendefinisikan daftar deskripsi<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>&lt;dt&gt;<\/td>\n<td>Mendefinisikan istilah deskripsi<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>&lt;dd&gt;<\/td>\n<td>Menggambarkan istilah dalam daftar deskripsi<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>&lt;type&gt;<\/td>\n<td>Menentukan jenis penomoran<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Contoh penggunaan :<\/strong><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;Ordered List with Lowercase Roman Numbers&lt;\/h2&gt;\r\n\r\n&lt;ol type=\"i\"&gt;\r\n&lt;li&gt;Coffee&lt;\/li&gt;\r\n&lt;li&gt;Tea&lt;\/li&gt;\r\n&lt;li&gt;Milk&lt;\/li&gt;\r\n&lt;\/ol&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Preview :<\/strong><\/p>\n<figure id=\"attachment_6097\" class=\"thumbnail wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-6097 size-full\" src=\"https:\/\/badoystudio.com\/wp-content\/uploads\/2019\/07\/tag-list.png\" alt=\"\" width=\"273\" height=\"177\" \/><figcaption class=\"caption wp-caption-text\">Tampilan Tag List\/ Daftar<\/figcaption><\/figure>\n<div class=\"banner_wrapper\"><\/div>\n<div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_11 counter-hierarchy counter-decimal ez-toc-light-blue\">\n<div class=\"ez-toc-title-container\">\n<p>Tugas silahkan di download<\/p>\n<p><a href=\"http:\/\/materi.smkn43jkt.sch.id\/wp-content\/uploads\/2020\/08\/tugas-html.docx\">tugas html.<\/a><\/p>\n<p><a href=\"http:\/\/materi.smkn43jkt.sch.id\/wp-content\/uploads\/2020\/08\/tugas3.pdf\">tugas3<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-codemirror-blocks-code-block code-block\">sumber : https:\/\/dosenit.com\/html\/html-dasar<\/div>\n<div>https:\/\/badoystudio.com\/tag-html\/<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apa Itu HTML HTML adalah bahasa standar untuk membangun sebuah website. Dengan HTML kita dapat membangun sebuah website. Kepanjangan dari html: Hyper Text Markup Language Versi HTML Dari Masa Ke Masa Versi Tahun HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Karakteristik Semua dokumen HTML harus dimulai dengan [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,17],"tags":[],"_links":{"self":[{"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/posts\/2814"}],"collection":[{"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2814"}],"version-history":[{"count":25,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/posts\/2814\/revisions"}],"predecessor-version":[{"id":3100,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=\/wp\/v2\/posts\/2814\/revisions\/3100"}],"wp:attachment":[{"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2814"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/materi.smkn43jkt.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}