kode html

Cara menggunakan fungsi judul di html

Agar lebih mudah saat mendesain web menggunakan HTML, kita harus bisa menggunakan tag HTML dengan baik. Dibawah ini telah kami rangkum beberapa tag HTML yang bisa anda pelajari dan langsung praktekan sendiri

Daftar isi

65 Tag HTML dengan Fungsi dan Contoh

Tanpa basa-basi lagi, berikut adalah beberapa tag HTML dasar yang sering diterapkan untuk mendesain website beserta fungsi dan contoh penggunaannya agar Anda dapat dengan mudah memahaminya

Tag HTML dasar

NoNama TagFungsi1 Deklarasi untuk mendefinisikan dokumen menjadi HTML2 Tag pembuka untuk membuat dokumen HTML3 Informasi meta tentang dokumen4 Membuat judul halaman yang nantinya akan ditampilkan di browser5 Tempat dibuatnya semua konten website menggunakan HTML

Contoh penggunaan

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Pratinjau

Tampilan Tag Dasar

Baca juga

  • 3 Cara Membuat Website dengan WordPress untuk Pemula
  • Membuat Website Sekolah Modern dan Profesional dengan CMS WordPress
  • Baru. Cara Instal XAMPP di OS Windows, Linux, & Mac OS
  • Menyelesaikan. 5 Contoh HTML untuk Pelatihan Desain Web

Tag HTML Membuat Judul

NoNama TagFungsi1 

s/d  Membuat judul atau heading2Memisahkan konten (biasanya ditampilkan garis pembatas)

Contoh penggunaan

<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html>_

Pratinjau

Tampilan Tag Pos

 

Tag untuk Membuat Paragraf

NoNama TagFungsi1 

 Membuat paragraf2
 Membuat garis baru3 Memfortmat teks atau kalimat

Contoh penggunaan

<!DOCTYPE html> <html> <body> <p>In HTML, spaces and new lines are ignored:</p> <br> example <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> </body> </html>

Pratinjau

Tampilan Tag Paragraf

Gaya Tag

NoName TagFunction1 style Atribut untuk elemen penataan pada HTML2background-color Memberi warna latar belakang3color Memberi warna pada text4font-family Mengubah font pada text5font-size Mengatur font size6text-align Mengatur perataan teks

Contoh penggunaan

<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html>

Pratinjau

Tampilan elemen gaya

Baca juga.  

  • 15 Menit Memahami "Apa Itu HTML" Secara Mendalam
  • Pengertian, Sejarah HTML dan Perkembangan Versi HTML
  • Memahami Fungsi HTML dalam 10 Menit

Memformat tag

NoNama TagFungsi1 Membuat teks tebal2 Membuat teks penting3 Membuat teks miring4 Membuat teks ditekankan5 Membuat teks ditandai6 Membuat teks kecil7 Teks dihapus8 Teks dimasukan9 Teks subscript10 Teks superscript

Contoh penggunaan

<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>_

Pratinjau

Memformat tampilan tag

 

Tag Gambar

NoNama TagFungsi1Pratinjau

Tampilan Tag Gambar

 

Formulir Tag

NoNama TagFungsi1Membuat formulir untuk mengumpulkan input pengguna2Membuat tipe inputan pada form yang akan dibuat3Elemen untuk mendefinisikan field input4Memberikan label pada elemen input5Mengelompokan elemen yang terdapat pada sebuah form6Membuat input dengan pilihan yang berbentuk list drop down7Mengelompokan beberapa pilihan pada daftar pilihan input8Mendefinisikan opsi yang bisa dipilih9Membuat Button10Membuat daftar pilihan untuk input data11Menampilkan hasil dari hitungan

Contoh penggunaan

<!DOCTYPE html> <html> <body> <h2>The datalist Element</h2> <p>The datalist element specifies a list of pre-defined options for an input element.</p> <form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p> </body> </html>_

Pratinjau

Tampilan Tag Formulir

Tag Tabel

NoNama TagFungsi1Membuat tabel pada web2Membuat baris pada tabel3
Membuat kolom pada tabel4Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.5Membuat judul tabel6borderMengatur garis tabel7border-collapseMengatur batas garis tabel8paddingMengatur padding pada cell9text-alignMengatur perataan pada konten tabel10border-spacingMengatur jarak spasi garis tabel11colspanMenggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell12rowspanMenggabungkan beberapa baris13idMemberikan id pada tabel atau kolom

Contoh penggunaan

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; padding: 5px; } table { border-spacing: 15px; } </style> </head> <body> <h2>Border Spacing</h2> <p>Border spacing specifies the space between the cells.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <p>Try to change the border-spacing to 5px.</p> </body> </html>

Pratinjau

Tampilan Tag Tabel

 

Daftar Tag/Daftar

NoNama TagFungsi1