Modul HTML PDF

HTML atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web internet dan pemformatan hypertext sederhana yang ditulis
dalam berkas format ASCII agar dapat menghasilkan tampilan wujud dan terintegrasi.
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-Lee Robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energy tinggi
di Jenewa).
1
Deskripsi
Training ini membahas konsep dasar pemrograman menggunakan HTML. Materi yang
dipelajari dalam training ini meliputi pengenalan mengenai HTML, HTML Tags, HTML
Editor, HTML Basic dan syntax–syntax dalam pemrograman menggunakan HTML.
Modul Training disusun dari berbagai sumber dan media pembelajaran dengan
penyajian materi dalam bentuk penjelasan konsep, teori dan praktek serta tentunya
dipandu oleh trainer atau instruktur yang telah berpengalaman.
Outline Materi
 INTRODUCTION OF HTML
 HTML SYNTAX
 HTML FORMS
 HTML MEDIA
2
1. Pengenalan HTML
HTML atau Hypertext Markup Language adalah bahasa markup internet (web)
berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk
ditampilkan didalam sebuah website. Singkatnya, HTML adalah bahasa markup yang
digunakan untuk membuat website. Website yang dibuat dengan HTML ini, dapat
dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan
menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla

Firefox dan Google Chrome.
Seperti yang sudah saya jelaskan sebelumnya, HTML adalah singkatan dari Hyper Text
Markup Language. Tapi mengetahui singkatannya saja tidak akan cukup. Karena itu saya
akan menyajikan arti dari kata kata tersebut.
 Hyper Text adalah metode dimana kita "berpindah" disekeliling web, dengan
mengeklik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks
khusus di internet, dimana saat teks tersebut diklik, akan membawa kita ke
halaman web selanjutnya/halaman web lain yang telah ditentukan.
 Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada
didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks
tertentu. Misalnya saja jika kita menandai sebuah teks dengan tag html <i>, maka
teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan jika kita
menandainya dengan <b>, maka teks tersebut akan berubah menajadi bold
(huruf tebal).
 Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki kata
kata berupa kode dan syntax seperti bahasa yang lain.
3
2. Bentuk Umum dari HTML
Setelah selesai diketikkan, simpan dengan nama contoh.html ingat extensinya .html dan
pada note pad pilih All types (*.*). untuk mengeceknya Anda double click file yang telah
Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi supaya sama,
maka sebaiknya digunakan ekstensi .html .
Tag Atribut Deskripsi

<!DOCTYPE> Tag untuk menentukan
tipe dokumen
<html></html> Tag untuk membuat
sebuah dokumen HTML
<head></head> Informasi umum dari
sebuah halaman web
<title></title> Judul halaman. Terdapat
pada head
<body></body> Background, bgcolor, bgsound, font, link, alink, vlink, Settingan atribut untuk
topmargin, leftmargin, marginheight, marginwidth seluruh dokumen
4
3. Tag HTML
Tag adalah sebuah tanda yang digunakan HTML untuk memberitahukan kepada
web browser untuk apa fungsi dari sebuah teks. Apakah teks tersebut ditulis
sebagai sebuah paragraf, list, atau sebagai link. Tanda ini lah yang dikenal dengan
istilah Tag. Di dalam HTML hampir semua tag yang ada ditulis secara
berpasangan, yakni tag pembuka dan tag penutup. Penulisan tag berada di antara
dua buah kurung siku (< dan >).
<h1></h1> Header 1
Header 1
<h2></h2> Header 2
Header 2
<h3> </h3> Header 3
Header 3
<h4></h4> Header 4
Header 4
<h5></h5> Header 5
Header 5
<h6></h6> Header 6
Header 6
<p></p> Paragraf Tag untuk membuat paragraf
<br> Baris baru Membuat baris baru ke bawah.
<hr> Garis Horizontal Membuat garis secara horizontal dari kanan ke kiri.
 Komentar Membuat sebuah komentar untuk menandai fungsi tag
lainya.
5
4. Menerapkan HTML Basic Tags
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di
browser !
Simpan perkerjaan Anda dengan nama contoh_2.html. Jika benar, seharusnya hasilnya
ditampilkan seperti gambar berikut ini:
6
 Formating
HTML juga mendefinisikan elemen khusus untuk mendefinisikan teks dengan makna
khusus .
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output,
seperti bold atau italic teks.
Tag Deskripsi Contoh

<blockquote></blockquote> Tag untuk membuat sebuah bagian text Example text in a block
yang dikutip dari sumber lain quote format ( “ “ )
<address> Tag untuk membuat kontak alamat Example text in a
address format
<center> Tag untuk membuat jajaran teks menjadi Example text in a Center
ditengah (tidak disupport lagi di HTML5) format
<mark> Tag untuk membuat teks yang disorot / Example text in a Mark
ditandai (tag baru HTML5) format
<p></p> Paragraf Pembuat Paragraf
<br> Ganti baris Membuat baris baru
<hr> Garis horizontal Membuat garis
horizontal
<b></b> Teks tebal Teks tebal
<i> </i> Teks miring Teks miring
<u> </u> Teks garis bawah Teks garis bawah
<strong></strong> Tag untuk membuat teks penting Teks tebal
7
 Form
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa
atribut untuk dapat berfungsi dengan seharusnya.

<form></form> Method, action, name, enctype Mengatur elemen dari form
<input type=”....”> Text, password, hidden, radio, Variasi dari tipe elemen input dalam
checkbox, submit, image, reset form
<select></select> Name, size Tag untuk membuat sebuah daftar drop-
down
<option></option> Selected, name, value Tag untuk membuat pilihan dalam
daftar drop-down
<textarea></textarea> Name, rows, cols, wrap Membuat Text Area untuk input text
dengan length yang lebih besar dari
input text.
<button type =”....”> button, reset, submit Tag untuk membuat sebuah tombol
yang dapat diklik
 Links
link HTML adalah hyperlink. Anda dapat mengklik link dan melompat ke dokumen lain.
Bila Anda memindahkan mouse di atas link, panah mouse akan berubah menjadi tangan
kecil.
<a> </a> Href, target, style, class, name, Membuat link ke dokumen atau situs lainnya
id
<link></link> Href, rel, rev, type, sizes, target Tag untuk membuat hubungan antara
dokumen dan sumber daya eksternal (paling
sering digunakan untuk link ke style sheet)
<nav></nav> Tag untuk membuat navigasi link (tag baru
HTML5)
8
 List
Daftar unordered dimulai dengan <ul>tag. Setiap item daftar dimulai dengan
<li>tag. Daftar item akan ditandai dengan peluru (lingkaran hitam kecil) secara
default.

<ul></ul> Tag untuk membuat daftar dengan selain nomor
<ol></ol> Type, Start Tag untuk membuat daftar dengan nomor
<li></li> Tag untuk membuat sebuah item daftar
<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar
definisi
<dd> Mendefinisikan deskripsi item dalam daftar
definisi
<menu> Tag untuk membuat deskripsi dari item dalam
daftar definisi
<dir> Tag untuk membuat sebuah daftar direktori
(tidak disupport lagi di HTML5)
 Gambar
Dalam HTML, gambar didefinisikan dengan <img> tag. <Img> tag kosong, berisi
atribut saja, dan tidak memiliki tag penutup. Atribut src menentukan URL (alamat web)
dari gambar.

<img> Src, alt, name, border, height, Menampilkan sebuah gambar
width
9
 Tabel
Setiap baris tabel didefinisikan dengan <tr> tag. Sebuah header tabel didefinisikan
dengan <th> tag. Secara default, judul tabel yang berani dan berpusat. Sebuah
data / sel tabel didefinisikan dengan <td> tag.

<table></table> Border, cellpadding, cellspacing, width, Mengatur semua elemen table
height, name, id, title, bgcolor, background,
align, valign
<tr></tr> Height, bgcolor, background, align, valign, Membuat baris baru
title
<td></td> Height, width, bgcolor, background, align, Membuat kolom
valign, title, colspan, rowspan
<th></th> Height, width, bgcolor, background, align, Header(kepala tabel). Otomatis
valign, title, colspan, rowspan ke tengah dan tebal
<tbody></tbody> Height, width, align, valign, bgcolor, Mengelompokanisi tubuh dalam
background sebuah tabel
<thead></thead> Height, width, align, valign, bgcolor, Mengelompokan isi header
background dalam sebuah tabel
<tfoot></tfoot> Height, width, align, valign, bgcolor, Mengelompokan isi footer
background
dalam sebuah tabel
5. HTML Element
pengertian Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup,
elemen html didefinisikan oleh tag pembuka, lalu di lanjutkan oleh kontent lalu
di akhiri oleh tag penutup.
<h1> Isi dari konten paragraf </h1>
Dari code di atas elemen yang digunakan adalah elemen "H1", dimulai dari tag
pembuka <h1> isi, hingga tag penutup </h1> , merupakan sebuah kesatuan
elemen dan elemen "H1" ini digunakan untuk membuat sebuah heading.
Berikut adalah sebagian element-element dalam HTML :
Tag Keterangan
<div> Mendefinisikan sebuah section dalam dokumen
10
<font> Mendefinisikan jenis font, warna dan ukuran untuk teks
<form> Mendefinisikan sebuah form HTML untuk input form
<ul> Mendefinisikan daftar dalam format bullet
<select> Membuat daftar drop-down
<small> Memperkecil ukuran teks dari ukuran defaultnya
6. Form HTML
Form digunakan untuk menerima inputan dari user dan memproses hasil inputan
tersebut ke server. Penggunakan form yang hanya menggunakan HTML saja tidak
akan terlalu berguna. From biasanya hanya berupa interface yang disediakan
untuk mengumpulkan data dari user, dan akan diproses dengan bahasa
pemograman seperti JavaScript atau PHP, dan disimpan di dalam database
MySQL.
Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan tag
</FORM>. Field-field yang berada diantaranya digunakan untuk menentukan
ukuran jenis dari masing-masing input field. Berikut ini dibahas beberapa elemen
yang dapat disertakan dalam suatu form.
11
 Mengenal Tag Atribute Form
 Atribut Action
Atribut action berfungsi untuk mengarahkan kemana nantinya data form akan di
proses. Biasanya nilai dari atribut action ini berupa alamat sebuah script yang
digunakan untuk memproses data yang sudah diisi dari form tersebut.
 Atribut method
Atribut berfungsi untuk menjelaskan bagaimana data isian form akan di kirimkan
oleh web browser. Nilai dari atribut method ini ada 2, yaitu get dan post.
Perbedaan antara method get dan method post adalah, jika kita mengisi nilai
atribut method dengan get (Nilai default jika atribut method tidak di tulis) maka
isi data dari form yang diisi akan tampil pada URL web Browser. Penggunaan
method get ini biasanya digunakan untuk sebuah form pencarian query.
Sedangkan method post biasanya digunakan untuk data yang bersifat sensitif
seperti, form login dan pendaftaran, yang mana disana terdapat password. Jika
form tersebut dijalankan maka data hasil form tidak akan tampil di web browser.
<form action="proses.php" method="post">

.... Isi Form...
</form>
 Atribut Name
Peran dari atribut name didalam sebuah form sangatlah penting, karena atribut
name ini menentukan apakah inputan tersebut nantinya akan di proses oleh
server atau tidak. Nilai dari atribut name ini juga harus unique (berbeda -beda)
12
karena nilai dari atribut name-lah yang nantinya akan menjadi sebuah variabel
form. Berikut ini adalah contoh penggunaan atribut name.
<input type="text" name="username">

<input type="email" name="email">
 Mengenal Tag Input
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki
banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai
dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa
yang menerima input berupa text, contohnya digunakan untuk inputan nama,
username, dan inputan yang berupa text pendek. Input type text ini juga bisa
memiliki atribut value yang bisa diisi nilai tampilan awal dari text.
 <input type=”password” /> dalam tampilannya sama dengan type text, namun
teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya
hanya digunakan untuk inputan yang sensitif seperti password.
 <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist
atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini.
Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai
checked, akan membuat chexkbox langsung terpilih pada saat pertama kali
halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat
dipilih beberapa hobi.
 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih
satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user
hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
13
 <input type=”submit” /> akan menampilkan tombol untuk memproses form.
Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan
membuat text tombol submit berubah sesuai inputan nilai value.
 < textarea /> Tag textarea pada dasarnya sama dengan input type text, namun
lebih besar dan dapat berisi banyak baris.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20">

Text yang diisi dapat mencapai banyak
baris
</textarea>
 <select /> Tag select digunakan untuk inputan yang telah tersedia nilainya, dan
user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama
dengan tag option untuk membuat box pilihan.

Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan3</option>
</select>
14
 Menerapkan HTML Tags Form
Buatlah tampilan seperti form dibawah ini !
15
7. Media HTML
Multimedia datang dalam berbagai format yang berbeda. Hal ini dapat hampir
apapun yang Anda bisa mendengar atau melihat. Contoh: Gambar, musik, suara,
video, catatan, film, animasi, dan banyak lagi. halaman web sering mengandung
unsur multimedia jenis dan format yang berbeda. Dalam bab ini Anda akan belajar
tentang format multimedia yang berbeda.
 Dukungan Browser
Browser dengan dukungan untuk warna dan font, dan gambar!

Audio, video, dan animasi telah ditangani secara berbeda oleh browser utama.
format yang berbeda telah didukung, dan beberapa format memerlukan program
pembantu tambahan (plug-in) untuk bekerja.
16
 Mengenal Media Audio ( Tag <audio> )
 Deskripsi
HTML audio element menunjukkan sebuah sound atau audio yang dapat
disisipkan pada halaman web dan diputar untuk didengarkan.
Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg
dan wav.
Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung
HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan
muncul sebagai gantinya (fallback).
 Atribut HTML Tag <audio>
 Autoplay
Menentukkan bahwa audio akan diputar secara otomatis (langsung ketika
halaman telah dimuat).

Contoh :
<audio src=”kucing.mp3” autoplay controls> </audio>
17
 Controls
Menentukkan bahwa controls audio ditampilkan seperti player yang biasanya

berisi perintah seperti tombol play/pause, slider, volume dan sebagainya.
Contoh :
<audio src=”kucing.mp3” controls> </audio>
 Loop
Digunakan untuk memutar ulang audio ketika selesai.
Contoh :
<audio src="kucing.mp3" loop> </audio>
 Muted
Digunakan untuk membisukkan suara
Contoh :
<audio src="kucing.mp3" muted> </audio>
 Preload
Menunjukkan audio harus diload ketika halaman web dimuat.

Contoh :
<audio src="kucing.mp3" preload="metadata"> </audio>
 src
src menunjukkan source yaitu sumber file audio ditempatkan atau URL yang
menunjukkan keberadaan audio file tersebut.
<audio src="kucing.mp3"> </audio>
18
 Mengenal Media Video ( Tag <video> )
 Deskripsi
HTML <video> element digunakan untuk merujuk sumber file video, sehingga
dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan
source (sumber) yang mengarah pada link file video tersebut berada (disimpan),
sehingga browser dapat memilih format video yang tepat (didukung).
Adapun untuk dukungan format video setiap browser berbeda-beda.
Contoh <video> element sederhana :

<video src="myVideo.mp4" controls> </video>
19
 Menerapkan HTML Tags Media
Coba kalian kresikan membuat Audio dan Video menggunakan tag HTML
20

Modul HTML PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan

untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam

Editor, HTML Basic dan syntax–syntax dalam pemrograman menggunakan HTML.

dipandu oleh trainer atau instruktur yang telah berpengalaman.

menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla

akan menyajikan arti dari kata kata tersebut.

maka sebaiknya digunakan ekstensi .html .

Tag Atribut Deskripsi

Tag Deskripsi Contoh

Tag Atribut Deskripsi

Tag Atribut Deskripsi

Tag Atribut Deskripsi

Tag Atribut Deskripsi

<div> Mendefinisikan sebuah section dalam dokumen

<form> Mendefinisikan sebuah form HTML untuk input form

<ul> Mendefinisikan daftar dalam format bullet

<select> Membuat daftar drop-down

<small> Memperkecil ukuran teks dari ukuran defaultnya

<form action="proses.php" method="post">

form. Berikut ini adalah contoh penggunaan atribut name.

<input type="text" name="username">

 Mengenal Tag Input

<textarea rows="5" cols="20">

dengan tag option untuk membuat box pilihan.

Buatlah tampilan seperti form dibawah ini !

Browser dengan dukungan untuk warna dan font, dan gambar!

pembantu tambahan (plug-in) untuk bekerja.

 Atribut HTML Tag <audio>

halaman telah dimuat).

Menentukkan bahwa controls audio ditampilkan seperti player yang biasanya

<audio src="kucing.mp3" loop> </audio>

<audio src="kucing.mp3" muted> </audio>

Menunjukkan audio harus diload ketika halaman web dimuat.

<audio src="kucing.mp3" preload="metadata"> </audio>

<audio src="kucing.mp3"> </audio>

dapat diputar (dimainkan) pada halaman web.

Adapun untuk dukungan format video setiap browser berbeda-beda.

Contoh <video> element sederhana :

Anda mungkin juga menyukai