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).
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
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.
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, topmargin, leftmargin,
marginheight, marginwidth
|
Settingan atribut untuk seluruh dokumen
|
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 >).|
Tag
|
Atribut
|
Deskripsi
|
|
<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.
|
4. Menerapkan HTML Basic Tags
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !
:
§ 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 yang dikutip dari sumber lain
|
Example
text in a
block quote
format ( “ “ )
|
||
|
<address>
|
Tag untuk membuat kontak alamat
|
Example text
in a address format
|
||
|
<center>
|
Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi
di HTML5)
|
Example text
in a Center format
|
||
|
<mark>
|
Tag untuk membuat teks yang disorot
/ ditandai (tag baru
HTML5)
|
Example text
in a Mark
|
|
|
|
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
|
||
§ 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.
|
Tag
|
Atribut
|
Deskripsi
|
|
<form></form>
|
Method, action, name, enctype
|
Mengatur elemen dari form
|
|
<input
type=”....”>
|
Text, password, hidden, radio, checkbox, submit, image,
reset
|
Variasi
dari tipe elemen input dalam 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.
|
Tag
|
Atribut
|
Deskripsi
|
|
<a>
</a>
|
Href, target, style,
class, name, id
|
Membuat link
ke dokumen atau
situs lainnya
|
|
<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)
|
§ 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.|
Tag
|
Atribut
|
Deskripsi
|
|
<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.
|
Tag
|
Atribut
|
Deskripsi
|
|
<img>
|
Src, alt, name, border,
height, width
|
Menampilkan
sebuah gambar
|
§ 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.
|
Tag
|
Atribut
|
Deskripsi
|
|
<table></table>
|
Border, cellpadding, cellspacing, width, height, name,
id, title, bgcolor, background, align, valign
|
Mengatur
semua elemen table
|
|
<tr></tr>
|
Height, bgcolor, background, align, valign,
title
|
Membuat
baris baru
|
|
<td></td>
|
Height,
width, bgcolor, background, align, valign, title, colspan, rowspan
|
Membuat
kolom
|
|
<th></th>
|
Height,
width, bgcolor, background, align, valign, title, colspan, rowspan
|
Header(kepala
tabel). Otomatis ke tengah dan tebal
|
|
<tbody></tbody>
|
Height, width, align, valign, bgcolor,
background
|
Mengelompokanisi
tubuh dalam sebuah tabel
|
|
<thead></thead>
|
Height, width, align, valign, bgcolor, background
|
Mengelompokan
isi header dalam sebuah tabel
|
|
<tfoot></tfoot>
|
Height, width, align, valign, bgcolor, background
|
Mengelompokan
isi footer 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
|
|
<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.
§ Mengenal Tag Atribute Form
v 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.
v 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>
|
v 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)
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.
§
<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>
|
§ Menerapkan HTML Tags Form
Buatlah tampilan seperti form dibawah ini !
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.
§ Mengenal Media Audio ( Tag <audio> )
v 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).
v Atribut HTML Tag <audio>
·
Autoplay
Menentukkan bahwa audio akan diputar secara otomatis
(langsung ketika halaman telah
dimuat).
Contoh :
 |
·
Controls
Menentukkan bahwa controls audio ditampilkan seperti
player yang biasanya berisi
perintah seperti tombol play/pause, slider, volume dan sebagainya.
Contoh :
 |
·
Loop
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>
§ Mengenal Media Video ( Tag <video> )
v 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>
§ Menerapkan HTML Tags Media
Coba kalian kresikan membuat Audio dan Video
menggunakan tag HTML
No comments:
Post a Comment