Mengenal Tag, Element, Atribut, membuat form, menampilkan gambar, class dan id pada HTML

Ditulis oleh Mangandaralam Sakti, 13 september 2022

Hallo semua!!

Pada blog kali ini saya akan melanjutkan materi dasar dasar HTML kemarin, yaitu Pengertian HTML serta kegunaannya.

Nah sekarang saya akan membahas tentang tag, element, dan atribut dan juga saya akan memberikan beberapa tutorial HTML dasar yaitu membuat form, menampilkan gambar, dan tentang class dan id pada HTML

1. Tag

Tag adalah sebuah penanda awalan dan akhiran dari sebuah element di HTML. Tag dibuat dengan kurung siku " ('<....>)". lalu didalamnya berisi nama Tag dan terkadang juga ditambahkan dengan atribut.

Contoh penulisan tag:

<tag>Hello world</tag>

Tag ditulis berpasangan, ada tag awalan <tag> dan tag penutup </tag> . Ada beberapa tag yang tidak memiliki pasangan penutup.

Keterangan:

•<h1>=tag pembuka

•Contoh=isi tag

•</h1>=tag penutup

•align=atribut

Sekarang mari kita lihat daftar tag HTML

Daftar Tag HTML

No	Tag	Fungsi
1	< !DOCTYPE html>	Digunakan untuk mendefinisikan tipe document HTML 5
2	< a > link < /a>	Mendefinisikan sebuah anchor, digunakan untuk saling mentautkan antara satu dokumen HTML yang lain
3	< b > < /b>	Membuat teks menjadi tebal
4	< p > < /p>	Membuat paragraph
5	< h1 > < /h1>	Membuat heading 1
6	< body > < /body>	Mendefinisikan body/isi dokumen HTML
7	< title >	Mendefinisikan judul halaman
8	< div > < /div>	Mendefinisikan halaman/mengelompokkan elemen atau bermacam macam tag agar menjadi suatu grup
9	< link >	Mendefinisikan hubungan antara dokumen
10	< script >	Mendefinisikan client side script
11	< table >	Mendefinisikan tabel
12	< th >	Mendefinisikan sel header didalam didalam sebuah tabel
13	< td >	Mendefinisikan sel didalam tabel
14	< tr >	Membuat baris didalam tabel
15	< ul >	Mendefinisikan daftar didalam format list
16	< li >	Membuat daftar list

Berikut akan saya praktikkan tag tag diatas:

2. Element

Element pada HTML adalah isi atau objek yang berada pada tag, maksudnya, isi yang ada diantara tag pembuka dan tag penutup disebut dengan element

Contoh:

3. Atribut

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka.

informasi ini bisa berupa perintah untuk mengatur posisi, warna, hyperlink dll. Contoh:

Keterangan:

1. <p> =Paragraph

2. align dan href adalah nama atribut

3. Center dan # adalah nilai atribut

4. Membuat form sederhana dengan HTML

Saya akan memberikan sedikit tutorial cara membuat form sederhana menggunakan HTML. Ada beberapa tag untuk membuatnya yaitu:

1. <input type="text"> (Untuk memasukkan inputan teks seperti, username, nama, tempat dan lain lain)

2. <input type="password"> (Memasukkan password, dimana tulisan atau angka yang kita masukan akan disamarkan dengan (...) )

3. <input type="checkbox"> (untuk membuat opsi yang dapat di ceklis oleh user, user dapat memilih lebih dari satu)

4. <input type="radio"> (User dapat memilih salah satu opsi, contohnya jenis kelamin. )

5. <textarea> (Untuk memuat lebih banyak inputan, seperti: alamat lengkap)

6. <select> (user dapat memilih salah satu opsi)

7. <input type="submit"> (untuk membuat tombol submit dan memproses data)

Berikut adalah script nya:

5. Menampilkan gambar dengan HTML

Pada sebuah website biasanya ada tampilan berupa gambar, nah untuk menampilkan gambar tambahkan code <img src=""> lalu masukan link gambar didalam tanda kutip tersebut. Untuk lebih jelasnya silahkan lihat script dibawah ini:

6. Menampilkan Video Youtube

Untuk menambahkan video youtube ke HTML, tambahkan tag <iframe width="" height="" src=""></iframe>. kemudian masukkan link youtube yang dipilih.

Untuk lebih jelasnya, silahkan lihat code berikut :

7. Class dan Id pada HTML

Didalam HTML ada atribut class dan id. Mereka mempunyai fungsi yang berbeda.

Fungsi dari class adalah untuk membungkus beberapa element menjadi satu, artinya kita dapat mengatur beberapa element hanya dengan satu div (class).

Sedangkan id hanya berfungsi untuk mengatur satu element saja tidak bisa beberapa element sekaligus. Berikut akan saya tampilan script nya:

8. Menghubungkan file HTML dengan CSS

Ada 3 metode cara menghubungkan HTML dengan CSS yaitu:

Internal css, external css, dan inline css

1. Internal css, internal css adalah metode penulisan file css yang menjadi satu dengan HTML, artinya script css dan html menjadi satu file.

Cara penulisannya yaitu, ketik <style> dibawah tag head. Lalu atur element HTML didalam tag <style>

2. Inline css, inline css adalah metode penulisan css dengan cara mengatur style pada setiap element HTML, kurang lebih seperti ini:

Kita mengatur warna, posisi dll pada setiap element HTML. Contoh diatas saya mengatur posisi paragraf ke tengah dengan cara inline css

3. Eksternal css, berbeda dengan inline css dan internal css. Eksternal css ditulis terpisah dengan file HTML. Biasanya file css diberi nama style.css, kemudian dihubungkan dengan cara mengetik <link rel="stylesheet" type="text/css" href="style.css"> pada file html dibagian head

Baiklah cukup sekian materi HTML dasar kali ini, terimakasih...

MsTechnology

Cari Blog Ini

Belajar HTML dasar part 2 (mengenal tag, element, atribut, membuat form, menampilkan gambar, class dan id.