Materi HTML Dasar Kejuruan RPL SMK

Arti Koding, Pengertian HTML ? HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Html secara mudah bisa diartikan bahasa kode porgram website yang berjalan disisi client seperti browser dengan tampilan page, halaman, dokumen konten yang isinya text, simbol atau media.

Table of Contents

1 Editor Menulis Koding HTML
2 Struktur Dasar HTML
3 Simpan File HTML di Notepad ++
4 HTML Element, Tag, Attribute
5 Atribut HTML
6 Cara Buat Link HTML
7 Masukan Media Gambar HTML
8 Buat Tabel HTML
9 Membuat form / Formulir HTML

Editor Menulis Koding HTML

Salah satu aplikasi umum untuk menulis koding bahasa program web HTML adalah : Notepad ++

Silahkan download dan install di PC, laptop khususnya untuk sistem operasi Windows.

Struktur Dasar HTML

Mengenal tag, penulisan kode html memiliki struktur dasar yang terdiri dari 4 bagian utama yaitu: tag DOCTYPE, tag html, tag head, dan tag body.

Contoh kode html:

Silahkan tulis kode tersebut menggunakan aplikasi notepad++ > buka new file.

<!DOCTYPE html>
<html>
    <head>
    <title>Judul Halaman Web</title>
    </head>
         <body>
         <p>Konten halaman web.</p>
         </body>
</html>

Penjelasan: tag DOCTYPE adalah standar penulisan dokumen html, tag HTML untuk mulai menulis html, tag head kode untuk penulisan judul dokumen html, tag Body isi konten dari html.

READ : IPA-STEM dalam Kerangka Etnosains

Simpan File HTML di Notepad ++

Setelah kode html ditulis, simpan dengan ketikan kode : Ctrl + S, atau gunakan menu simpan > berikan nama file dengan format : belajar_html1.html

Selanjutnya untuk melihat hasil file HTML bisa dibuka menggunakan aplikasi browser seperti : google chrome atau mozila firefox, jangan lupa reload setelah edit kode html.

HTML Element, Tag, Attribute

Element adalah komponen penyusun dokumen HTML yang tersusun atas Tag, Tag sendiri merupakan suatu tanda pengenal dokumen pada html yang terdiri dari 2 bagian, yaitu tag pembuka dan tag penutup.

Tag	Keterangan/Fungsi
Basic
<!DOCTYPE>	Tag untuk menentukan tipe dokumen yang kita gunakan
<html>	Tag untuk mendeskripsikan ke browser bahwa dokumen yang digunakan HTML.
<head>	Kepala dari dokumen HTML.
<title>	Tag untuk memberikan judul dokumen.
<body>	Tag untuk membuat konten halaman.
<h1> sampai <h6>	Tag untuk memberikan heading. semakin kecil angka heading maka text yang dihasilkan semakin besar
<p>	Tag untuk membuat paragraf.
<br/>	Tag untuk memberi baris baru/pindah baris.
<hr/>	Tag untuk membuat garis horisontal.
<!– (komentar) –>	Tag untuk membuat komentar.

Tag head:

Nama Tag	Keterangan/Fungsi
Title
<title>	Tag untuk membuat judul dari sebuah halaman
Meta Info
<meta>	Tag untuk membuat metadata tentang dokumen HTML.
<base>	Tag untuk Menentukan URL dasar / target untuk semua URL relatif dalam dokumen.
<basefont>	Tag untuk Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen, ( Sudah tidak support di HTML5 ).
Javascript
<script>	Tag untuk menambahkan script javascript.
Style
<style>	Tag untuk menambahkan style CSS

tag formating

Formating	Keterangan/Fungsi
<b>	Tag untuk menebalkan huruf.
<center>	Tag untuk menampilkan teks dengan posisi horizontal ditengah, (sudah tidak support di HTML5).
<strong>	Tag untuk menebalkan huruf, sama seperti tag <b>.
<i>	Tag untuk membuat teks miring.
<em>	Tag untuk membuat teks miring sama seperti tag <i>, tetapi tag <em> lebih disarankan dalam membuat teks miring.
<del>	Tag untuk membuat garis tengah pada teks, atau mencoret teks.
<mark>	Tag untuk membuat tanda pada teks yang akan ditandai, ( Tag baru HTML5 ).
<var>	Tag untuk membuat variabel.
<acronym>	Tag untuk membuat sebuah akronim.
<abbr>	.Tag untuk membuat sebuah singkatan.
<address>	Tag untuk mendefinisikan kontak atau alamat dari pembuat dokumen.
<bdi>	Tag untuk mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya.
<bdo>	Tag untuk menimpa arah teks
<big>	Tag untuk memperbesar ukuran teks sebesar satu tingkat dari teks sebelumnya.
<blockquote>	Tag untuk mendefinisikan sebuah kutipan yang dikutip dari sumber lain.
<cite>	Tag untuk mendefinisikan sebuah kutipan yang tidak mengutip dari sumber lain, atau membuat kutipan sendiri.
<code>	Tag untuk membuat kode komputer diantara teks.
<dfn>	Tag untuk membuat istilah definisi
<font>	Tag untuk membuat font, warna, dan ukuran untuk teks, (sudah tidak support di HTML5).
<ins>	Tag untuk membuat teks yang telah dimasukkan kedalam dokumen.
<kbd>	Tag untuk input keyboard.
<meter>	Tag untuk tag skalar
<pre>	Tag untuk membuat teks terformat dengan ukuran yang sama.
<progress>	Tag untuk memperlihatkan kemajuan tugas, ( Tag baru HTML5 ).
<q>	Tag untuk mendefinisikan sebuah kutipan singkat
<rp>	Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby, ( Tag baru HTML5 ).
<rt>	Tag untuk membuat sebuah pengucapan karakter untuk tipografi Asia Timur.
<ruby>	Tag untuk membuat sebuah anotasi ruby untuk tipografi asia timur, ( Tag baru HTML5 ).
<s>	Tag untuk memberi garis tengah pada teks atau mencoret teks, tag ini sama seperti tag <del> tetapi tag <s> tidak direkomendasikan sebagai pengganti tag <del>.
<samp>	Tag untuk membuat contoh keluaran dari program komputer.
<small>	Tag untuk memperkecil ukuran teks dari ukuran defaultnya.
<strike>	Tag untuk memberikan garis tengah pada teks, atau mencoret teks, tag ini memiliki fungsi yang sama seperti tag <del>.
<sub>	Tag untuk membuat teks subscript seperti penulisan dalam zat kimia.
<sup>	Tag untuk membuat superscripted seperti dalam penulisan akar kuadrat.
<time>	Tag untuk membuat tanggal/waktu, ( Tag baru HTML5).
<tt>	Tag untuk membuat teks teletype, ( Sudah tidak support di HTML5 ).
<u>	Tag untuk membuat teks bergaris bawah, tag ini sama seperti tag <ins> tetapi tidak direkomendasikan untuk kategori HTML Formating melainkan untuk kategori HTML Style.
<wbr>	Tag untuk membuat garis putus.

Tag link:

Links	Keterangan/Fungsi
<a>	Tag untuk hyperlink.
<link>	Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal, tag ini sering digunakan untuk link style sheet.
<nav>	Tag untuk navigasi link

Tag list:

Lists	Keterangan/Fungsi
<ul>	Tag untuk membuat daftar dengan bullet
<ol>	Tag untuk membuat daftar dengan numbering
<li>	Tag untuk membuat item dari daftar
<dl>	Tag untuk membuat sebuah daftar definisi
<dt>	Tag untuk membuat istilah dalam daftar definisi
<dd>	Tag untuk menentukan deskripsi item dalam daftar definisi
<dir>	Tag untuk membuat sebuah daftar direktori
<menu>	Tag untuk membuat deskripsi dari item dalam daftar definisi.
<command>	Tag untuk membuat tombol perintah bahwa seseorang pengguna dapat meminta, ( Tag baru HTML5).

Tag gambar:

Images	Keterangan/Fungsi
<img>	Tag untuk menampilkan gambar
<map>	Tag untuk membuat gambar peta atau map
<area>	Tag untuk membuat area di dalam gambar peta
<canvas>	Tag untuk menggambar grafik melalui scripting (Javascript)
<figure>	Tag untuk menandai foto dalam dokumen
<figcaption>	Tag untuk menentukan keterangan pada foto

Tag Audio:

Audio	Keterangan/Fungsi
<audio>	Tag untuk membuat isi suara, ( Tag baru HTML5 ).
<source>	Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>), ( Tag baru HTML5 ).
<track>	Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>), ( Tag baru HTML5 ).
<vidio>	Tag untuk membuat video atau film, ( Tag baru HTML5 ).

Tag form:

Forms	Keterangan/Fungsi
<form>	Tag untuk membuat sebuah form HTML untuk input pengguna.
<input>	Tag untuk membuat sebuah kontrol input.
<textarea>	Tag untuk membuat sebuah kontrol input multi baris ( text area ).
<button>	Tag untuk membuat sebuah tombol yang dapat diklik.
<select>	Tag untuk membuat sebuah daftar drop-down.
<optgroup>	Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down.
<option>	Tag untuk membuat pilihan dalam daftar drop-down.
<label>	Tag untuk membuat sebuah label untuk sebuah elemen <input>.
<fieldlist>	Tag untuk membuat grup unsur terkait dalam bentuk.
<legend>	Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>.
<datalist>	Tag untuk menentukan daftar pilihan yang telah ditetapkan untuk kontrol input, ( Tag baru HTML5 ).
<keygen>	Tag untuk membuat key-pair generator kolom input, ( Tag baru HTML5 ).
<output>	Tag untuk membuat hasil penghitungan, ( Tag baru HTML5 ).

Frames	Keterangan/Fungsi
<frame>	Tag untuk membuat bingkai didalam sebuah frameset, ( Sudah tidak disupport HTML5 )
<frameset>	Tag untuk membuat satu set bingkai, ( Sudah tidak disupport HTML5 ).
<iframe>	Tag untuk membuat sebuah bingkai.

Tag tabel:

Tables	Keterangan/Fungsi
<table>	Tag untuk membuat tabel.
<caption>	Tag untuk membuat sebuah caption tabel.
<th>	Tag untuk membuat sebuah sel header tabel.
<tr>	Tag untuk membuat baris dalam sebuah tabel.
<td>	Tag untuk membuat sel dalam sebuah tabel.
<thead>	Tag untuk mengelompokan isi header dalam sebuah tabel.
<tbody>	Tag untuk mengelompokan isi tubuh dalam sebuah tabel.
<tfoot>	Tag untuk mengelompokan isi footer dalam sebuah tabel.
<colgroup>	Tag untuk menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat.
<col>	Tag untuk menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>.

Atribut HTML

Jenis atribut yang sering digunakan dalam HTML beserta keterangannya yang bisa teman teman pelajari :

Atribut	Keterangan/Fungsi
alt	Menampilkan alternatif berupa text untuk sebuah gambar ketika gambar tersebut tidak bisa ditampilkan
disabled	Menyatakan bahwa sebuah input dalam keadaan disable
href	Menyatakan alamat URL untuk sebuah link
id	Menyatakan id untuk sebuah elemen HTML
src	Menyatakan alamat URL untuk sebuah image atau file
style	Menyatakan inline CSS untuk sebuah elemen

Cara Buat Link HTML

Link adalah alamat tautan yang bisa di klik untuk menuju halaman, URL lainya, contoh:

Tag <a href> mendefinisikan hyperlink. Attribute href menentukan URL halaman yang dituju tautan, seperti contoh berikut:

<a href="https://www.seosatu.com">seosatu.com</a>

Masukan Media Gambar HTML

Tag <img src> digunakan untuk menyematkan gambar di halaman HTML. attribute src menentukan jalur ke gambar yang akan ditampilkan, seperti contoh berikut:

<img src="logo.png">

Tag <img> juga biasanya terdapat attribute width dan height, untuk menentukan lebar dan tinggi gambar (dalam piksel), seperti contoh berikut:

<img src="logo.png" width="300" height="500">

Buat Tabel HTML

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

Tag <table> untuk membungkus tabelnya
Tag <thead> untuk membungkus bagian kepala tabel
Tag <tbody> untuk membungkus bagian body dari tabel
Tag <tr> (tabel row) untuk membuat baris
Tag <td> (table data) untuk membuat sel
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.

Contoh kode tabel:

 <table boder="1">
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh:

    <table border="1" cellpadding="10">
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

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

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

Contoh:

    <table border="1" cellpadding="10">
        <tr>
            <td bgcolor="yellow">Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr bgcolor="#00ff80">
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

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

rowspan untuk menggabungkan baris;
colspan untuk menggabungkan kolom.

Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2" bgcolor="yellow">Bulan</th>
            <th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
        </tr>
        <tr>
            <th>Padi</th>
            <th>Kacang</th>
        </tr>
        <tr>
            <td>Januari</td>
            <td>500 Kg</td>
            <td>231 Kg</td>
        </tr>
        <tr>
            <td>Februari</td>
            <td>342 Kg</td>
            <td>423 Kg</td>
        </tr>
        <tr>
            <td>Maret</td>
            <td>432 Kg</td>
            <td>124 Kg</td>
        </tr>
        <tr>
            <td>April</td>
            <td>453 Kg</td>
            <td>523 Kg</td>
        </tr>
    </table>

</body>
</html>

Membuat form / Formulir HTML

form di HTML, kita membutuhkan setidaknya 2 komponen, yaitu tag <form> dan form field:

Tag <form> digunakan untuk mendefinisikan awal dan akhir form pada HTML. Tag <form> harus memiliki atribut action dan atribut method.
Form field adalah elemen-elemen yang ada di dalam form yang digunakan user untuk mengisi data.

Form adalah elemen HTML yang berfungsi untuk meminta informasi dari user misalnya form login untuk meminta informasi username dan password dari user untuk proses login, form pendaftaran untuk meminta informasi detail tentang user agar bisa mendaftar, form input data untuk disimpan di database dan lain sebagainya.

Data yang didapat dari form akan diproses oleh server dengan menggunakan bahasa pemrograman web misalnya PHP, ASP atau lainnya. Namun pada praktek kali ini kita hanya akan membahas tentang HTML agar proses belajar HTML saja.

Agar lebih jelas, berikut ini contoh struktur dasar form di HTML:

<form action="submit.php" method="POST">
<!-- disini diisi bermacam-macam form field -->
</form>

action – berfungsi untuk menentukan aksi atau tindakan yang akan dilakukan ketika data dikirim. Atribut ini akan mengirim data form ke alamat URL yang kita definisikan sendiri nantinya. Jadi nilai dari atribut action merupakan alamat URL dari suatu file yang akan memproses data form tersebut.
method – digunakan untuk menentukan metode apa yang akan digunakan untuk mengirim data form. Terdapat dua nilai yang perlu kalian ingat ketika menggunakan atribut ini, yaitu POST dan GET.

Atribut Input

Atribut type memiliki banyak sekali nilai, namun karena ini pembahasan mengenai form maka akan saya informasikan nilai-nilai yang sering digunakan untuk membuat form, antara lain:

text – menghasilkan field untuk mengisi data berupa teks
email – menghasilkan field untuk mengisi data khusus email
password – menghasilkan field untuk mengisi data khusus password atau kata sandi, field ini nantinya hanya menampilkan bintang atau bulatan yang berfungsi untuk menutupi nilai asli. Namanya juga password.
radio – menghasilkan radio button, dengan menggunakan input type ini para pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih pilihan yang ada.
checkbox – menghasilkan checkbox yang membuat pengguna dapat memilih lebih dari satu pilihan dari banyak daftar pilihan yang disediakan
number – menghasilkan field untuk mengisi data khusus angka
date – menghasilkan field untuk mengisi data khusus tanggal
file – menghasilkan field untuk upload file
submit – menghasilkan tombol submit

<!DOCTYPE html>
<html>
<head>
<title>Belajar Form di HTML</title>
</head>
<body>
<form action="proses.php" method="POST">
<label> Tipe text: </label>
<input type="text" name="nama"><br />

<label> Tipe email: </label>
<input type="email" name="email"><br />

<label> Tipe password: </label>
<input type="password" name="password"><br />

<label> Tipe radio: </label>
<input type="radio" name="gender">Pria
<input type="radio" name="gender">Wanita<br />

<label> Tipe checkbox: </label>
<input type="checkbox" name="hobi">Sepak Bola
<input type="checkbox" name="hobi">Bulutangkis
<input type="checkbox" name="hobi">Basket
<input type="checkbox" name="hobi">Renang <br />

<label> Tipe number: </label>
<input type="number" name="usia"><br />

<label> Tipe date: </label>
<input type="date" name="tanggal"><br />

<label> Tipe file: </label>
<input type="file" name="berkas"><br />

<label> Tipe submit: </label>
<input type="submit" name="simpan">
</form>
</body>
</html>

Atribut Name

Atribut ini digunakan sebagai pengenal untuk nama elemen terkait. Elemen ini akan sangat berguna ketika kalian sudah mulai belajar bahasa pemrograman PHP.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama">
	</form>
</body>
</html>

Atribut Value

Atribut ini berfungsi untuk memberikan nilai default untuk elemen

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" value="Kuro Neko">
	</form>
</body>
</html>

Atribut Required

Atribut yang akan menghasilkan syarat supaya elemen terkait wajib diisi atau dilarang untuk dikosongi.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" required><br />
		<input type="submit" name="simpan">
	</form>
</body>
</html>

Tag <textarea> HTML

Tag atau elemen <textarea> merupakan sebuah field yang mampu menampung beberapa baris kata atau kalimat. Karena kelebihannya mampu menampung banyak baris kalimat, maka textarea sering digunakan sebagai kolom komentar, keterangan, catatan.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Alamat: </label>
		<textarea name="alamat"></textarea>
	</form>
</body>
</html>

Tag <select> HTML

Tag <select> merupakan sebuah representasi dari pengaturan yang digunakan untuk memilih deretan opsi atau pilihan baik itu satu ataupun lebih dari itu. Elemen ini nantinya akan menghasilkan semacam dropdown yang berisi nilai-nilai yang kita berikan sebagai pilihan untuk para pengguna.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Kota Asal: </label>
		<select name="kota">
			<option value="bangkalan">Bangkalan</option>
			<option value="bandung">Bandung</option>
			<option value="jakarta">Jakarta</option>
			<option value="malang">Malang</option>
			<option value="surabaya">Surabaya</option>
		</select>
	</form>
</body>
</html>