HTML

Kumpulan Contoh Kode HTML Untuk Pemula

Pada artikel ini saya akan memberikan kumpulan contoh kode html untuk pemula dan saya maksud kan untuk menambah referensi belajar html kamu kode yang saya buat sederhana jadi nanti jalankan kode saya yang telah saya buat di text editor kamu. Simak saja langsung di bawah!


1. Membuat Paragraf Di Html

Membuat paragraf di html menggunakan tag p untuk halaman web cara ini sangat mudah membuat tulisan atau paragraf pada html kamu bisa lihat di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Paragraf HTML-->
   <p>Halo di sini saya sedang belajar HTML.</p>
         
  </body>
</html>

Jalankan di text editor kamu.


2. Membuat Text Tebal Di Html

Membuat text tebal di html ini bisa pake tag b atau strong bisa di lihat di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Text tebal HTML-->
   <b>Text tebal menggunakan tag b.</b>
   <strong>Text tebal menggunakan tag strong.</strong>
         
  </body>
</html>

Jalankan di text editor kamu.


3. Membuat Enter Atau Garis Di Html

Membuat enter atau garis di html menggunakan tag br agar ada jarak pada isi halaman web kamu dalam dokumen html :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Enter atau garis di HTML-->
   <p>Saya adalah html pertama.</p>
      <br>
   <p>Saya adalah html kedua.</p>
      <br>
      <p>Saya adalah html ketiga.</p>
      <br>
          <p>Saya adalah html keempat.</p>
      <br>
       <p>Saya adalah html kelima.</p>    
  </body>
</html>

Jalankan di text editor kamu.


4. Membuat Heading Pada Html

Membuat heading pada html menggunakan tag h1, h2, h3, h4, h5 nanti bisa di lihat perbedaan nya di text editor kamu :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Heading di HTML-->
<h1>Saya adalah heading pertama.</h1> 
<h2>Saya adalah heading kedua.</h2>
<h3>Saya adalah heading ketiga.</h3>
<h4>Saya adalah heading keempat.</h4>
<h5>Saya adalah heading kelima.</h5>    
  </body>
</html>

Jalankan di text editor kamu.


5. Membuat Garis Horizontal Di Html

Membuat garis horizontal di html ini menggunakan tag hr kamu bisa lihat di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Garis horizontal di HTML-->
<h1>Belajar html</h1> 
<hr>
<p>Saya sedang belajar html</p>
<hr>
<h1>Belajar javascript</h1>
<hr>
<p>Saya sedang belajar javascript</p>
  </body>
</html>

Jalankan di text editor kamu.


6. Membuat Form Sederhana Pada Html

Membuat form sederhana pada html kamu bisa lihat di bawah ini kode nya :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--      Form sederhana di HTML-->
<form method="post">
<!--    Buat username-->
<label for="username">Username : </label>
    <input type="text" id="username" name="username">
     <br>
<!--    Buat password-->
    <label for="password">Password : </label>
    <input type="password" id="password" name="password">
    <br>
<!--    Buat jenis kelamin-->
    <h2>Jenis Kelamin</h2>
    <br>
    <label for="pria">Pria </label>
    <input type="radio" id="pria" name="jeniskelamin">
        <label for="perempuan">Perempuan </label>
    <input type="radio" id="perempuan" name="jeniskelamin">
    <br>
<!--    Buat hobi -->
    <h2>Hobi</h2>
    <label for="bola">Bola </label>
    <input type="checkbox" name="hobi" id="bola">
    <label for="basket">Basket</label>
    <input type="checkbox" name="basket" id="basket">
    <label for="badminton">Badminton</label>
    <input type="checkbox" name="badminton" id="badminton">
    <br>
<!--    Buat tombol kirim-->
    <button type="submit" name="submit">Kirim</button>     
</form>
  </body>
</html>

Jalankan di text editor kamu.

7. Membuat Daftar Di Html

Membuat daftar di html bisa di lihat di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--Membuat daftar di html-->
      <h2>Daftar belanja</h2>
      <ol>
      <li>Sabun</li>
      <li>Minuman coca cola</li>
      <li>Pakaian</li>
      <li>Gula pasir</li>
      <li>Tomat</li>
      </ol>

      <h2>Daftar Pekerjaan</h2>
      <ul>
      <li>Programmer</li>
      <li>Network engineer</li>
      <li>Desain grafis</li>
      <li>Dev ops</li>
      <li>Ui / ux designer</li>
      </ul>
  </body>
</html>

Jalankan di text editor kamu.


8. Membuat Hyperlink Di Html

Membuat hyperlink di html kamu bisa lihat di bawah ini kode nya :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--Membuat hyperlink di html-->
     <a href="https://www.google.com/">Menuju google</a>
     <a href="https://web.facebook.com/">Menuju facebook</a>
  </body>
</html>

Jalankan di text editor kamu.


9. Membuat Gambar Di Html

Membuat gambar di html bisa di lihat di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--Membuat gambar di html-->
    <img src="programmer.jpg">
  </body>
</html>

Nanti src nya ganti dengan gambar kamu. Jangan lupa jalankan di text editor kamu.


10. Membuat Paragraf Miring

Membuat paragraf miring kamu bisa lihat kode tersebut di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Kumpulan Contoh Kode HTML Untuk Pemula</title>
  </head>   
    
  <body>  
<!--Membuat paragraf miring di html-->
    <i>Ini adalah paragraf miring.</i>
  </body>
</html>

Jalankan di text editor kamu.

Penutup

Itulah kumpulan kode html yang bisa saya berikan ke kamu. Semoga bermanfaat :D