HTML
(Hypertext Markup Language)
A. FERICO OCTAVIANSYAH PASARIBU
PENGENALAN HTML
• Merupakan bahasa standard yang di gunakan untuk
membuat dokumen web.
• Yang bisa dilakukan dengan HTML adalah :
• Mengontrol tampilan dari halaman web dan content-
nya.
• Membuat online form yang bisa di gunakan untuk
menangani pendaftaran dan transaksi secara online.
• Menambahkan objek-objek seperti gambar, audio,
video, animasi dan juga java applet dalam dokumen
HTML.
A. FERICO OCTAVIANSYAH PASARIBU
STRUKTUR DASAR HTML
<html>
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML
• Tag adalah kode-kode yang digunakan untuk men-setting
dokumen web.
• Nama tag ditulis di dalam tanda “<” dan “>” dan untuk tag
penutup ditambahkan tanda “/”.
• Boleh ditulis dengan huruf besar maupun kecil.
• Digunakan sepasang, contoh : <form> dan </form>.
• Ada tag yang tidak perlu ditutup, contoh : <br>, <hr>,
<img>, dll.
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (BASIC)
NAMA KETERANGAN
<!DOCTYPE> Tag untuk menentukan tipe dokumen
<html> Tag untuk membuat sebuah dokumen HTML
<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
<!--...--> Tag untuk membuat komentar
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (FORMATTING)
NAMA KETERANGAN
<acronym> Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr> Tag untuk membuat sebuah singkatan
<address> Tag untuk membuat kontak alamat
<b> Tag untuk membuat huruf bercetak tebal
Mengisolasi bagian dari teks yang dapat diformat dalam arah yang
<bdi>
berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo> Mengganti arah teks
<big> Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
<blockquote> Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain
Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di
<center>
HTML5)
<cite> Tag untuk membuat judul karya
<code> Tag untuk membuat potongan kode komputer di antara text
<del> Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn> Tag untuk membuat sebuah istilah definisi
<em> Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi
<font>
di HTML5)
Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan
<i>
mood
<ins> Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd> Tag untuk membuat input keyboard
<mark> Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (FORMATTING)
NAMA KETERANGAN
<meter> Tag untuk membuat pengukuran skalar
<pre> Tag untuk membuat teks terformat
<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> Tag untuk membuat kutipan pendek
Tag untuk membuat apa yang harus ditampilkan di browser yang tidak
<rp>
mendukung penjelasan ruby (tag baru HTML5)
Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi
<rt>
Asia Timur)
Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag
<ruby>
baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp> Tag untuk membuat contoh keluaran dari program komputer
<small> Tag untuk membuat teks kecil
Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di
<strike>
HTML5)
<strong> Tag untuk membuat teks penting
<sub> Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
Tag untuk membuat teks superscripted (seperti dalam penulisan akar
<sup>
kuadrat)
<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa
<u>
lainnya
<var> Tag untuk membuat sebuah variabel
<wbr> Tag untuk membuat kemungkinan garis-putus
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (FORM)
NAMA KETERANGAN
<form> Tag untuk membuat sebuah form HTML untuk input pengguna
<input> Tag untuk membuat sebuah kontrol input
<textarea> Tag untuk membuat sebuah kontrol input multibaris (text area)
<button> Tag untuk membuat sebuah tombol yang dapat diklik
<select> Tag untuk membuat sebuah daftar drop-down
Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-
<optgroup>
down
<option> Tag untuk membuat pilihan dalam daftar drop-down
<label> Tag untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset> Grup unsur terkait dalam bentuk
Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, <
<legend>
figure>, atau <details>
Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru
<datalist>
HTML5)
<keygen> Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
<output> Tag untuk membuat hasil penghitungan (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (FRAME)
NAMA KETERANGAN
Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak
<frame>
disupport lagi di HTML5)
<frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak
<noframes>
mendukung frame (tidak disupport lagi di HTML5)
<iframe> Tag untuk membuat sebuah bingkai
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (IMAGE)
NAMA KETERANGAN
<img> Tag untuk membuat gambar
<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru
<canvas>
HTML5)
<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (AUDIO / VIDEO)
NAMA KETERANGAN
<audio> Tag untuk membuat isi suara (tag baru HTML5)
Tag untuk membuat sumber beberapa media untuk elemen media (<video>
<source>
dan <audio>) (tag baru HTML5)
Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag
<track>
baru HTML5)
<video> Tag untuk membuat sebuah video atau film (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (LINK)
NAMA KETERANGAN
<a> Tag untuk membuat hyperlink
Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal
<link>
(paling sering digunakan untuk link ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (LIST)
NAMA KETERANGAN
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
<dir> Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar definisi
<dd> Defines a description of an item in a definition list
<menu> Tag untuk membuat deskripsi dari item dalam daftar definisi
Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat
<command>
meminta (tag baru HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (TABLE)
NAMA KETERANGAN
<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> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk
<colgroup>
diformat
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (STYLE / SECTION)
NAMA KETERANGAN
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru
<header>
HTML5)
<footer> Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<hgroup> Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)
<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau
<details>
sembunyikan (tag baru HTML5)
<dialog> Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru
<summary>
HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (META INFO)
NAMA KETERANGAN
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
<base> Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
Menentukan standar warna, ukuran, dan font untuk semua teks dalam
<basefont>
dokumen (tidak disupport lagi di HTML5)
A. FERICO OCTAVIANSYAH PASARIBU
TAG HTML (PROGRAMMING)
NAMA KETERANGAN
<script> Tag untuk membuat script di sisi klien
Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak
<noscript>
mendukung script di sisi klien
Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di
<applet>
HTML5)
Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag
<embed>
baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek
A. FERICO OCTAVIANSYAH PASARIBU