Scribd
Unggah
25 tayangan22 halaman

HTML Dasar

Html dasar

Diunggah oleh

rokibgacor83
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
25 tayangan22 halaman

HTML Dasar

Html dasar

Diunggah oleh

rokibgacor83
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 22

Struktur, Tag, Elemen, Attribut pada HTML, Serta Contohnya

Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi kamu yang
baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.

1. Tag
Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat
dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan
atribut.
Contoh: <p>, <a>, <body>, <head>, dan sebagainya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga
beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan
garis miring (/) di depan nama tag. Setiap tag memiliki fungsi masing-masing. Ada yang digunakan
untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain. Dulu.. awalnya
HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag.
Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.

Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada
yang salah mengetik namanya, dan semacamnya.Berikut ini beberapa saran yang perlu diikuti agar
bisa menulis tag dengan benar:

a. Tag-tag wajib

1
Ada beberapa tag yang wajib ada di HTML. Tag ini harus ditulis, karena kalau tidak,
bisa jadi kode HTML yang ditulis akan terjadi error menurut validator W3C.
Berikut ini daftar tag yang wajib ada di HTML:

 <!DOCTYPE html> — untuk deklarasi type dokumen.


 <html> — tag utama dalam HTML.
 <head> — untuk bagian kepala dari dokumen.
 <title> — untuk judul web.
 <body> — untuk bagian body dari dokumen.

b. Gunakan Huruf Kecil


Hindari menggunakan huruf besar dalam menuliskan nama tag dan sebaiknya
gunakan huruf kecil saja. Huruf kecil lebih gampang diketik dan juga akan membuat kode
HTML terlihat lebih bersih dan rapi.
Contoh: (bagus)
<body>
<p>Belajar tag di HTML</p>
</body>
Contoh: (buruk)
<BODY>
<P>Belajar tag di HTML</P>
</BODY>
Tapi khusus untuk tag <!DOCTYPE html>.. ia ditulis dengan huruf besar. Sebenarnya bisa juga
dengan huruf kecil dan akan valid menurut validator W3C. Tapi untuk dokumen XHTML,
menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.
c. Pastikan Menutup Tag dengan Benar
Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag
lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML
kita tidak valid. Tag yang pertama dibuat, harus ditutup terakhir. Bukan ditutup pertama.
Contoh:
<i><b><u>memasak</u></b></i>
Tag <i> ditutup terakhir, karena ia yang ditulis pertama. Lalu tag </u> ditutup pertama kali
karena ia berada di dalam tag <b> dan <i>.

2. Elemen
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen
kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun
dokumen HTML dalam diagram HTML tree.

2
Pada diagram tersebut, terdapat tiga macam node, yakni: Node elemen, Node atribut, dan Node
teks. Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan
beberapa atribut.
Contoh:

Elemen di HTML
Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi berupa
teks, yakni Hello World!. Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini
biasanya kita sebut dengan nested element atau elemen di dalam elemen.

3
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:

Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk multimedia,
script, tabel, metadata, dll. Juga beberapa elemen HTML kadang ditambahkan atribut sebagai
pelengkap.

3. Atribut

Atribut adalah kata kunci khusus yang berada di dalam tag pembuka. Atribut juga disebut
sebagai modifier yang akan menentukan perliaku dari elemen.

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan
menggunakan atribut seperti elemen <a>, <img>, <video>, dll.

Contoh:

<a href="https://tkjclub.net">tkjclub.net</a>

Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk
menyatakan halaman tujuan dari link. Jumlah atribut pada elemen bisa lebih dari satu.
Contoh:

4
<img src="gambar.jpg" width="100" height="100" />

Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar yang
akan ditampilkan. Lalu atrubut width dan height adalah atribut yang mengatur ukurannya.

a. Jenis-jenis Atribut HTML


Tiap-tiap elemen kadang memiliki atribut khusus yang hanya bisa digunakan pada
elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.
Berikut ini jenis-jenis atribut yang harus diketahui:

1) Atribut Global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.
Berikut ini daftar atribut global dan fungsinya:

2) Atribut Event

5
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan
dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada
pemrograman Javascript. Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela
browser:

Selain atribut tersebut, masih banyak lagi atribut event yang lainnya. Semuanya bisa kamu
lihat di: HTML Event Attributes.

6
3) Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang
atribut ini tidak bisa digunakan pada elemen yang lain. Contoh:

Penulisan atribut sebenarnya gampang.. kita hanya perlu menambahkannya pada tag
pembuka dengan format seperti ini:

bana-atribut="nilai"

Namun, ada beberapa hal yang perlu diperhatikan agar penulisannya benar dan valid:

a) Gunakan Huruf Kecil

Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut
validator W3C. Tapi disarankan menggunakan huruf kecil saja. Karena lebih umum
digunakan dan juga mudah terbaca.
Contoh: (bagus)

<p align="center">Belajar HTML di RPL Club</p>

Contoh: (kurang bagus)

<p ALIGN="CENTER">Belajar HTML di RPL Club</p>

b) Gunakan Tanda Petik

Gunakan tanda petik untuk mengisi nilai atribut yang mengandung teks.
Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap
sebagai atribut baru.

Contoh: (bagus)

<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>

Contoh: (buruk)

7
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>

Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal ('). Nah untuk
nilai angka, boleh pakai tanda petik dan juga boleh tidak. Contoh:

<img src="gambar.jpg" width=120 height=120 />

Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan
boleh tidak. Contoh:

<input type="text" required="true" />

<input type="text" required />

c) Penggunaan Spasi

Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan
tanda min (-), bukan spasi. Contoh:

<img data-src="gambar.jpg" />

Lalu, spasi juga digunakan untuk memisahkan dua atau lebih atribut. Contoh:

<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />

Bisa juga ditulis seperti ini:

<img class="lazyload"

data-src="gambar.jpg"

src="placeholder.jpg" />

Elemen adalah komponen yang menyusun dokuemn HTML. Sedangkan Tag adalah
penanda untuk memulai dan mengakhiri elemen. Lalu atribut adalah modifier untuk
menentukan perilaku elemen.

8
Membuat Table HTML Sederhana

A. Tabel Dalam HTML

Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan
membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk
menampilkan data dalam bentuk tabel. Tabel terdiri dari 4 unsur utama:

 Baris
 Kolom
 Sel
 Garis

B. Tag Untuk Membuat Table

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

1. Tag <table> untuk membungkus tabelnya


2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain
adalah tambahan (opsional), boleh digunakan boleh tidak.

9
Mari kita lihat contohnya:

Hasilnya :

10
pada gambar diatas tidak memiliki garis, kenapa demikian, karena tidak menambahkan atribut
border pada tabelnya. Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di
dalam tag <table>. Sehingga akan menjadi seperti ini:

Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan
semakin besar pula ukuran garisnya. Nilai "1" adalah ukuran garis yang palng kecil. Hasilnya akan
sepert ini:

C. Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel. Atribut
ini dapat kita berikan kepada tag <table>. Contoh:

Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis. Maka hasilnya:

11
D. Menambahkan Warna Pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam
tag <td> (untuk sel) atau <tr> (untuk baris). Contoh:

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna
dalam bahasa inggris. Maka hasilnya akan seperti ini:

E. Menggabungkan Sel Tabel

Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:

12
 rowspan untuk menggabungkan baris;
 colspan untuk menggabungkan kolom.
 Atribut ini bisa kita berikan kepada tag <td> atau <th>.

contohnya:

Hasilnya :

13
F. Menyisipkan Elemen yang lain ke dalam Sel

Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link,
video, list, dsb.

Contohnya :

Hasilnya :

14
NEXT

15
Membuat Form HTML Sederhana

A. Pengertian Form
Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah
form login, form comment, form data user, dan lain sebagainya. tag yang digunakan untuk membuat
form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<opstion> dan <select>.

B. Cara Membuat Form di HTML


Form di HTML dapat kita buat dengan tag <form>. Tag ini memiliki beberapa atribut yang
harus diberikan, seperti:
 action untuk menentukan aksi yang akan dilakukan saat data dikirim;
 method metode pengiriman data.
Contoh:

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan
memproses form. Secara sederhana, pada contoh di atas kita akan menyuruh file prosess.php untuk
memproses data form. Ini nanti akan kita pelajari pada PHP. Kode HTML di atas, tidak akan
menghasilkan apa-apa. Karena kita belum membuat field-nya.

1. Apa Itu Field


Field adalah ruas yang dapat diisi dengan data. Contoh Field:

Field memiliki beberapa atribut yang harus diberikan:


 type merupakan type dari field.
 name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.

2. Membuat Form Login


Pada form login, terdapat beberapa field dan elemen:
 Field untuk input username atau email;
 Field untuk input password;
 Checkbok untuk remember me;
 Tombol untuk login.
Berikut ini kodenya:

16
Hasilnya :

Pada kode di atas, kita membuat empat buah filed:


 input username dengan tipe text;
 input password dengan tipe password;
 input remember dengan tipe checkbox;
 input submit dengan tipe submit;

Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>. Nanti tag <fieldset> ini akan
membuat sebuah garis. Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan
teks pada fieldset. Lalu, perhatikan juga atirbut yang digunakan pada setiap field. Atribut
placeholder untuk menampilkan teks sementara (placeholder); Atribut value untuk membreikan
nilai default pada field. Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita
berikan sebuah label dengan tag <label>.
3. Membuat Form Contact
Form ini berfungsi untuk menghubungi atau kontak admin. Perhatikan Kode dibawah ini :

17
Hasilnya :

Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed ini harus
diisi dengan email saja. Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul
pesan peringatan.

4. Membuat Form Register


Form ini berisi field untuk:
 Input nama lengkap;
 Input username;
 Input email;

18
 Input password;
 Input jenis kelamin;
 Input Agama;
 Input Biografi.
 dsb.
Contohnya:

19
Hasilnya :

field baru yang ada di form tersebut:

 Field radio;
 Field <select><option>;
 Field <textearea>.
Apa bedanya radio dengan checkbox?
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio. Tapi kalau
kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox. Lalu untuk
<select></option>, sifatnya sama seperti radio. Cuma dia bentuknya berbeda. Lalu untuk
menginputkan teks yang panjang, kita gunakan tag <textarea>.
5. Membuat Form Tanggal dan Umur
Field baru yang akan kita lihat :
 Field number (untuk memasukkan angka)
 Field date (untuk menambahkan tanggal lahir, dilengkapi kalender yang akan muncul)

Contohnya :

20
Hasilnya :

21

Anda mungkin juga menyukai