Belajar HTML : Mengetahui Tag, Fungsi, Kode, dan Previewnya
Assalamualiakum
Kali ini saya akan memberikan sedikit tag dalam HTML, yang nantinya akan terbagi kedalam beberapa kelompok tag tag dalam HTML, semoga bisa kalian pelajari agar kalian mendapatkan manfaat dari apa yang akan kalian kerjakan nantinya.
Tag Dasar
No
Nama Tag
Fungsi
1
<! DOCTYPE html>
Deklarasi untuk mendefinisikan dokumen menjadi HTML
2
<html>
Tag pembuka untuk membuat dokumen HTML
3
<head>
Informasi meta tentang dokumen
4
<title>
Membuat judul halaman yang nantinya akan ditampilkan di browser
5
<body>
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>
Preview :
Tampilan Tag Dasar
Tag Judul
No
Nama Tag
Fungsi
1
<h1> s/d <h6>
Membuat judul atau heading
2
<hr>
Memisahkan 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>
Preview :
Tampilan Tag Pos
Tag Paragraf
No
Nama Tag
Fungsi
1
<p>
Membuat paragraf
2
<br>
Membuat garis baru
3
<pre>
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>
<!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>
Preview :
Tampilan tag formating
Tag Gambar
No
Nama Tag
Fungsi
1
<img>
Elemen untuk mendefinisikan gambar
2
src
Atribut untuk menentukan URL gambar
3
alt
Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan
4
width – height
Menentukan ukuran gambar
5
float
Properti untuk float image pada CSS
6
<map>
Mendefinisikan gambar peta
7
<area>
Mendefinisikan area atau daerah-daerah gambar pada peta
8
<picture>
Menampilkan gambar yang berbeda untuk perangkat yang berbeda
Contoh penggunaan :
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300">
</body>
</html>
Preview :
Tampilan Tag Gambar
Tag Form
No
Nama Tag
Fungsi
1
<form>
Membuat formulir untuk mengumpulkan input pengguna
2
<input>
Membuat tipe inputan pada form yang akan dibuat
3
<textare>
Elemen untuk mendefinisikan field input
4
<label>
Memberikan label pada elemen input
5
<fieldset>
Mengelompokan elemen yang terdapat pada sebuah form
6
<select>
Membuat input dengan pilihan yang berbentuk list drop down
7
<optgroup>
Mengelompokan beberapa pilihan pada daftar pilihan input
8
<option>
Mendefinisikan opsi yang bisa dipilih
9
<button>
Membuat Button
10
<datalist>
Membuat daftar pilihan untuk input data
11
<output>
Menampilkan 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>
Preview :
Tampilan Tag Form
Tag Tabel
No
Nama Tag
Fungsi
1
<table>
Membuat tabel pada web
2
<tr>
Membuat baris pada tabel
3
<td>
Membuat kolom pada tabel
4
<th>
Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.
5
<caption>
Membuat judul tabel
6
border
Mengatur garis tabel
7
border-collapse
Mengatur batas garis tabel
8
padding
Mengatur padding pada cell
9
text-align
Mengatur perataan pada konten tabel
10
border-spacing
Mengatur jarak spasi garis tabel
11
colspan
Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell
12
rowspan
Menggabungkan beberapa baris
13
id
Memberikan 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>
Preview :
Tampilan Tag Tabel
Tag Daftar/ List
No
Nama Tag
Fungsi
1
<ul>
Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.
2
<ol>
Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya
3
<li>
Menentukan berbagai item yang ingin ditampilkan
4
<dl>
Mendefinisikan daftar deskripsi
5
<dt>
Mendefinisikan istilah deskripsi
6
<dd>
Menggambarkan istilah dalam daftar deskripsi
7
<type>
Menentukan jenis penomoran
Contoh penggunaan :
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Preview :
Tampilan Tag List/ Daftar
Penutup
Itulah beberapa Tag HTML Dasar yang umum sekali digunakan pada saat mendesain atau membuat website dan bisa kamu pelajari lebih dalam lagi. Semoga bermanfaat dan jangan lupa untuk share materi ini ke rekan rekan kalian semoga bermanfaat.
Terimakasih
Wassalmualiakum
Referensi [ https://badoystudio.com/tag-html/ ]
Mohon maaf jika terdapat kesalahan dalam penulisan ataupun penguploadtan artikel ini, mohon berikan kritik dan saran, yang sifatnya membimbing dan membantu bagi Admin agar nantinya Admin perbaiki web ini agar lebih baik lagi. Dan semoga kalian bisa mendapatkan informasi atau wawasan baru yang bermanfaat dari web ini.
0 Komentar