Tag - Tag dalam HTML

pada tanggal

HTML

HTML adalah singkatan dari Hypertext Markup Language. HTML adalah salah satu bahasan standar yang berperan penting dalam mengatur dan memformat halaman sebuah website dan dokumen lainnya yang ada di Web.

HTML disebut sebagai bahasa markup karena memakai tanda markah ( </> ) pada tag HTML untuk menandai bagian-bagian isi konten dalam dokumen HTML.

Tag - tag yang terdapat dalam HTML

1. Tag Wajib - Tag yang wajib ada pada HTML

<!DOCTYPE html> -- Menentukan tipe dokumen
<html> --  Tag pembuka untuk membuat dokumen html
<head> --  Informasi meta tentang dokumen
<title> -- Untuk membuat judul dari sebuah halaman atau web
<body> --  Tempat dibuat nya semua konten website

Contoh penggunaan :

<!DOCTYPE html>
<html>

<head>
  <title>Rachmadilla</title>
</head>

<body>
  <h1>Hello Everyone!</h1>
  <p>How are you today?</p>
</body>

</html>

HASIL :

Rachmadilla

Hello Everyone!

How are you today?

2. Tag Judul

<h1> s/d <h6> -- Tag untuk membuat heading
<hr> -- Tag untuk memisahkan konten ( biasanya ditampilkan garis pembatas )

Contoh penggunaan :

<!DOCTYPE html>
<html>

<body>
  <h1>Matematika</h1>
  <!-- Tag heading huruf terbesar -->
  <h2>Matematika</h2>
  <!-- Tag h2 lebih kecil dari tag h1 -->
  <h3>Matematika</h3>
  <!-- Tag h3 lebih kecil dari tag h2 -->
  <h4>Matematika</h4>
  <!-- Tag h4 lebih kecil dari tag h3 -->
  <h5>Matematika</h5>
  <!-- Tag h5 lebih kecil dari tag h4 -->
  <h6>Matematika</h6>
  <!-- Tag h6 lebih kecil dari tag h5 -->
</body>
</html>    

HASIL :

Matematika

Matematika

Matematika

Matematika

Matematika
Matematika

3. Tag Paragraf

<p> -- Membuat paragraf
<br> -- Membuat garis baru
<pre> -- Membuat teks atau kalimat

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<p>Tag Paragraf dalam HTML</p>
<br> contoh

<p>
Pengembangan Perangkat Lunak dan GIM.

Pengembangan Perangkat Lunak dan GIM.

Pengembangan Perangkat Lunak dan GIM.

Pengembangan Perangkat Lunak dan GIM.

</p>

</body>
</html>

HASIL :

Tag Paragraf dalam HTML


contoh

Pengembangan Perangkat Lunak dan GIM. Pengembangan Perangkat Lunak dan GIM. Pengembangan Perangkat Lunak dan GIM. Pengembangan Perangkat Lunak dan GIM.


4. Tag Style 

style -- Untuk elemen styling pada HTML 
background-color -- Memberikan warna pada latar belakang 
color -- Memberikan warna pada teks 
font-family -- Mengubah font pada teks 
font-size -- Mengubah ukuran font 
text-align -- Mengatur perataan teks

5. Tag Gambar  

<img> -- Elemen untuk mendefinisikan gambar 
src -- Atribut untuk menentukan URL gambar 
alt -- Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan 
width-height -- Menentukan gambar 
float -- Properti untuk float image pada css

Hasil :

Disney

Winnie The Pooh

Flowers in Chania

6. Tag Tabel

<table> -- Membuat tabel pada web
<tr> -- Membuat baris pada tabel
<td> -- Membuat kolom pada tabel
<th> -- Membuat judul pada kolom ( contoh : nama, kelas, dll )
<border> -- Mengatur garis tabel
border-collapse -- Mengatur batas garis tabel
border-spacing -- Mengatur jarak spasi tabel
colspan -- Menggabungkan beberapa kolom
rowspan -- Menggabungkan beberapa baris
id -- Memberikan id pada tabel

Contoh Penggunaan :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Lee</td>
    <td>Haechan</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Na</td>
    <td>Jaemin</td>
    <td>94</td>
  </tr>
  <tr>
</table>
</body>
</html>

Hasil :
Firstname Lastname Age
Lee Haechan 50
Na Jaemin 94
 


7. Tag Daftar / List

<ul> -- Untuk membuat daftar list menggunakan simbol bullet, cyrcle, dll
<ol> -- Untuk membuat daftar list menggunakan nomor, huruf, romawi, dll
<li> -- Untuk menentukan daftar item yang akan dibuat list

Contoh Penggunaan :

<h1>Nama-nama Hari :</h1>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jumat</li>
Hasil :

Nama-nama Hari :

  • Senin
  • Selasa
  • Rabu
  • Kamis
  • Jumat

    • 8. Tag Form

    <form> -- Membuat formulir untuk mengumpulkan input
    <select> -- Membuat input dengan pilihan yang berbentuk list drop down
    <label> -- Memberikan label pada elemen input
    <input> -- Membuat tipe inputan pada form 
    <option> -- Mendefinisikan opsi yang bisa dipilih 
    <data list> -- Membuat daftar pilihan untuk input data

    Contoh Penggunaan :

    <form>
      <label for="fname">Favorite Color :</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Favorite Fruit :</label><br>
      <input type="text" id="lname" name="lname">
    </form>

    Hasil :






    9. Tag untuk membuat Huruf Tebal dan Huruf Miring

    --Huruf Tebal :

    <b>Hello Everyone!</b>
    Hasil :

    Hello Everyone!

    --Huruf Miring :

    <i>Hello Everyone!</i>
    Hasil :

    Hello Everyone!

    10. Tag untuk membuat Tombol ( Button )

    Button : salah satu elemen html yang digunakan untuk submit form.

    <button>Button</button>
    <a href="#">Link Button</a>
    <input type="submit" value="Submit Button">
    <input type="reset" value="Reset Button">
    Hasil :

    Link Button

    11. Tag untuk menambahkan video 

    <iframe width="420" height="315"
    src="https://www.youtube.com/watch?v=2KP4xz_0QPg">
    </iframe>




    Hasil :

    Itulah beberapa Tag HTML yang umum untuk digunakan pada saat membuat web ataupun mendesain web . Semoga bermanfaat dan jangan lupa klik tombol share nya.

    Komentar

    Posting Komentar