David Setiadi, S.Kom.,M.T.

MODUL HTML
PENGEMBANGAN APLIKASI BERBASIS WEB
David Setiadi, S.Kom.,M.T.

STMIK SUMEDANG
Sekolah Tinggi Manajemen Informatika dan Komputer
Jl.Angkrek Situ No.19 Sumedang
2016
 PENDAHULUAN

Sejarah HTML HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus ide
untuk menempatkan elemen elemen yang berguna untuk menandai bagian suatu dokumen seperti judul,
alamat dan isi dokumen. Pada akhirnya elemen element tersebut dibentuk menjadi suatu program untuk
melakukan pemformatan dokumen secara otomatis.
Bahasa pemrograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM
menamai program ini sebagai Generalized Markup Language. Pada tahun 1986, konsep ini disetujui
oleh ISO (International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini
dinamai oleh ISO sebagai Standard Generalized Markup Language (SGML) HTML sendiri, adalah
bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah ide tentang pembuatan skrip
bahasa pemrograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis
platformnya. Sejak saat itu HTML menjadi lebih populer
HTML 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 jelaskan sebelumnya, HTML adalah singkatan dari Hyper Text Markup
Language.

 HyperText 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 , maka teks tersebut akan berubah
menjadi italic (huruf yang miring). Sedangkan jika kita menandainya dengan , 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.
Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet
semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar
bisa menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah organisasi yang
bertanggungjawab mengembangkan bahasa HTML. Organisasi ini bernama W3C.
Fungsi dan Kegunaan HTML Sebagai bahasa markup internet, HTML memiliki banyak fungsi
dan kegunaan. Beberapa manfaat dari HTML diantaranya

 Untuk Membuat Halaman Web. Bahasa HTML digunakan untuk membuat halaman
web. Semua halaman web pasti dibuat dengan menggunakan HTML.
 Sebagai Pondasi Bagi Sebuah Website. Sebuah rumah jika tidak memiliki pondasi
maka akan cepat roboh. Begitu juga dengan website. Jika tidak memiliki HTML
sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS
(bahasa untuk mendesain website), Javascript (bahasa untuk menambah prilaku
website), dan PHP (bahasa pemrograman server website).
 Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks
menjadi bergaris bawah dengan menggunakan tag html
  Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa
bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya
dengan HTML.
 Untuk menampilkan informasi dalam bentuk tabel
 Untuk menambahkan objek seperti audio, video, gambar, dll dalam halaman web
 Untuk membuat online form
Karakteristik HTML
• Tag-tag dalam HTML tidak bersifat case sensitive.
• HTML tidak mempedulikan white space characters.
Struktur Dasar HTML
Untuk menuliskan kode html diperlukan pemahaman tentang dasar-dasar kode yang digunakan yang
secara garis besar dibagi menjadi 3 bagian yaitu sebagai berikut :
1. Element
Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup. Contohnya untuk
menampilkan judul dari sebuah halaman, kita membuat kode html seperti ini

<html>
<title> Ini adalah judul web </title>
</html>

Text yang berwarna merah adalah pembuka. Yang warna hijau adalah isi. Sedangkan yang
warna biru adalah penutup. Isi adalah optional, dalam artian tidak masalah jika kita tidak memberikan
isi. Beda dengan pembuka dan penutup, keduanya harus ada dalam sebuah kode html. Jika tidak maka
akan terjadi error, dan kode tidak akan berfungsi.
Ada juga pembuka dan penutup yang berbeda dengan contoh diatas. Contohnya seperi ini
Isian

<input type=”text” name=”input_alamat” />

Pada tag input kita tidak perlu menutupnya dengan ,cukup dengan /> . Bahkan dengan menuliskan >
saja juga bisa.
2. Tag
Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag dengan nama head, dengan
nama body, dan sebagainya. Tag ini sudah diatur dari sananya, jadi kita tidak boleh membuatnya sendiri.
Misal jika kita menulis , jelas tidak akan berfungsi. Untuk lebih memperjelas, berikut ini struktur dasar
kode html
 <html>
<title>Ini adalah judul web</title>
<body>
Ini adalah text yang akan tampil di layar
</body>
</html>

Penjelasan untuk menandai awal dan akhir dari file HTML berisikan keterangan informasi
seperti title dan jenis dokumen sebagai judul halaman web bagian ini adalah konten utama web seperti
header, navigasi, artikel , sidebar dan footer Anda dapat menuliskan kode html di aplikasi bawaan
Windows, Notepad. Bisa juga mendownload aplikasi khusu untuk menulis kode yaitu Notepad++.
3. Atribut
Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi informasi tambahan
tentang elemen. Nilai dari atribut harus ditutup dengan tanda kutip.

<input type=”password” name=”input_password” required />

Kode diatas akan membuat sebuah kotak isian yang dikhususkan untuk menulis password. Dalam
artian, jika kita menulis di isian tersebut, tulisan kita akan berubah menjadi bintang bintang seperi ini
******.
TOOL HTML
Beberapa Tool yang dapat digunakan untuk memulai menulis kode HTML adalah Notepad,
Notepad++, Backets, dreamweaver dll.
Bagian-bagian dalam web

Header

Navigation/nav

Conten

Sidebar

Footer

Breadcrumb
PEMROGRAMAN HTML
Sebelum memulai pastikan web browser sudah terinstall di komputer, dan tool notepad ataupun
lainnya.
Sebaiknya gunakan browser terbaru agar mendukung semua konten dan skrip html versi 5
sehingga web bisa running dan tampil dengan sempurna.
Buat sebuah dokumen baru menggunakan notepad++ ketikan script dibawah ini kemudian
save as dengan extention .html

<!DOCTYPE html>
<html>
<head>
<title>Judul Web</title>
</head>
<body>

<h1>Ini adalah Heading 1 </h1>

<p>Ini adalah paragraf.</p>

</body>
</html>

Hasil saving akan menghasilkan sebuah file berekstensi .html

Untuk menjalankan skrip html anda tinggal mengklik 2x pada file yang telah dibuat maka
akan otomatis dirunning oleh default browser yang terdapat dalam komputer anda.

Ini adalah contoh gambar hasil running file html

HEADING
Heading adalah tag untuk membuat text header, memiliki karakteristik besar dan tebal dengan varian
besar dari <h1></h1> sampai dengan <h6></h6> dan otomatis membuat baris baru

<!DOCTYPE html>
<html>
<head>
<title>Judul Web</title>
</head>
<body>

<h1>Ini adalah Heading 1 </h1>

<h2>Ini adalah Heading 2 </h2>
<h3>Ini adalah Heading 3 </h3>
<h4>Ini adalah Heading 4 </h4>
<h5>Ini adalah Heading 5 </h5>
<h6>Ini adalah Heading 6 </h6>

</body>
</html>
Paragraf
Digunakan untuk membuat paragraf dengan menggunakan tag <p>kalimat</p>

<!DOCTYPE html>
<html>
<head>
<title>Judul Web</title>
</head>
<body>

<p>ini adalah contoh paragraf

dalam html , digunakan untuk
membuat paragraf </P>

</body>
</html>

FORMAT TEXT
format text digunakan untuk membuat format text menjadi tebal,miring, garisbawah dan lain-lain

<!DOCTYPE html>
<html>
<head>
<title>Judul Web</title>
</head>
<body>

<p>Ini adalah Text Normal</p>

<p><b>Ini adalah text tcetak tebal</b>.</p>

</body>
</html>
Berikut adalah text formating dalam html
Tag Description
<b> bold/ tebal
<em> emphasized text /miring
<i> italic text/miring
<small> smaller text

<strong> important text

<sub> subscripted text

<sup> superscripted text

<ins> inserted text

<del> deleted text

<mark> Defines marked/highlighted text

Tag <q> digunakan untuk mendefinisikan quotation

Tag <code> digunakan untuk menuliskan baris-baris kode bahasa pemrograman

Comment adalah tag untuk membuat komentar yang tidak akan ditampilkan ke dalam halaman html,
biasanya digunakan untuk dokumentasi program
WARNA
Dalam html warna dituliskan dengan 3 format , bisa menggunakan warna dasar dengan menuliskan
langsung dengan bahasa inggris, bisa dalam bentuk hexadesimal, dan bisa menggunakan kode RGB
Berikut adalah kode menggunakan nama warna dalam bahasa inggris :
Berikut contoh menggunakan kode kombinasi RGB (red,green ,blue)

Berikut contoh menggunakan hexadesimal yang diawali dengan tanda #

HYPERLINK
Hyperlink digunakan untuk berpindah dari satu halaman ke halaman lain.
Hyperlink bisa menggunakan text, gambar, video dan lain-lain tergantung dari penempatan kode nya.
Hyperlink mempunyai beberapa atribut value diantaranya :
_blank membuka link di tab baru
_self membuka link di frame yang sama (default)
_parent membuka link pada parent yang sama
_top membukan link dengan full windows

Penjelasan :
<a> adalah mendefinisikan link
Href mendefinisikan alamat link yang dituju
Target mendefinisikan target pada tab baru,windows baru atau frame
Link menggunakan gambar
GAMBAR
Untuk menampilkan gambar ke dalam halaman html kita cukup menambahkan tag <img
src=”nama_folder/nama_gambar.png” >

Atribut yang bisa digunakan untuk mengatur ukuran gambar :

Width=”200px” mendefinisikan lebar gambar dengan pixel
Width=”200%” mendefinisikan lebar gambar dengan persen
Height=”200px” mendefinisikan tinggi gambar dengan pixel
height=”200%” mendefinisikan tinggi gambar dengan persen
kita bisa menampilkan gambar dari halaman/folder lain atau dari website lain dengan menambahkan
link gambar tersebut ke dalam src=”” asal terhubung dengan internet.
Dibawah ini adalah menampilkan gambar di web lokal dengan sumber gambar dari web lain melalui
koneksi internet.
Gambar harus dalam satu folder dengan file html, apabila gambar berada di dalam sub folder lain
maka bisa menggunakan nama folder dan diikuti nama file gambar, atau apabila berada diluar folder
parent maka bisa menggunakan titik dua kali.

 Apabila gambar berada satu folder denga html

<img src="green.jpg">

 Apabila gambar berada dalam sub folder

<img src="nama_sub_folder/green.jpg">

 Apabila gambar berada di luar folder parent

<img src="../nama_folder/green.jpg">

 Apabila gambar berada di direktori website lain atau luar

<img src="http://www.w3schools.com/images/w3schools_green.jpg">

IMAGE MAPS & AREA

Digunakan untuk menentukan koordinat dari gambar yang bisa dijadikan hyperlink ke halaman lain
melalui gambar.
Contoh di bawah ini adalah jika kita mengklik gambar planet maka kita akan di arahkan ke halaman
mercur.html atau venus.html
TABEL
Untuk emmbat tabel dalam html menggunakan tag <table></table>

Dimana atribut didalamnya adalah <th> untuk table header ,<tr> untuk baris dan <td> untuk kolom

Boder untuk besar line atau garis dan width untuk lebar tabel

Untuk membuat merge antar kolom menggunakan colspan sedangkan untuk merge antar baris
menggunakan rowspan
LIST
Membuat list dengan bullet

Membuat list tanpa bullet

BLOCK
Untuk membuat block disebuah halaman menggunakan tag <div></div>, berfungsi untuk
memisahkan bagian halaman menjadi block-block, sehingga dapat dibedakan pengaturan css dari satu
blok dengan blok yang lainnya.

Atau bisa menggunakan <span></span> untuk memisahkan block dalam text

CLASS & LAYOUT
Membuat kelas pada masing-masing blok html
Contoh untuk membuat halaman menjadi berikut ini
 <!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo
</div>

<div id="section">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

<div id="footer">
Copyright © W3Schools.com
</div>

</body>
</html>

Text yang berwarna merah merupakan css yang di simpan didalam internal html, css akan dibahas
pada modul berikutnya.
RESPONSIVE WEB
Responsive web adalah desain yang kompatibel dengan berbagai ukuran layar, jadi tampilan bisa
menyesuaikan dengan layar secara otomatis, sehingga tampilan tidak berantakan.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container w3-orange">

<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
IFRAME
Digunakan untuk menampilkan halaman html kedalam frame pada halaman html lain.
Buatlah dua halaman html kemudian masukan skrip frame kedalam salahsatu halaman html. Dengan
catatan file html ada dalam satu folder, apabila diluar folder bisa menggunakan
nama_folder/Nama_html.html
JAVASCRIPT
Untuk menggabungkan javascript ke dalam html harus menambahkan link file atau kode javascript
diantara tag <head><script></script></head>
Contoh , siapkan dua buah image kemudian ketiakn kode dibawah ini, jika berhasil maka apabila kita
menekan button maka gambar akan berpindah ke gambar lain.

Lebih jelasnya akan di jelaskan pada modul terpisah.

SYMBOL
Di html untuk menampilakn simbol harus menggunakan kode yang kemudian akan didefinisikan oleh
browser sebagai simbol.
Untuk referensi simbol lengkap silahkan kunjungi link berikut :
Mata uang http://www.w3schools.com/charsets/ref_utf_currency.asp
Geek http://www.w3schools.com/charsets/ref_utf_greek.asp
Arrow http://www.w3schools.com/charsets/ref_utf_arrows.asp
UTF-8 simbol http://www.w3schools.com/charsets/ref_utf_symbols.asp
UTF-8 matematika http://www.w3schools.com/charsets/ref_utf_math.asp
Dan lain-lain

BACKGROUND
Untuk mengganti warna background bisa menggunakan nama warna ataupun hexadesimal contoh

Background dengan gambar/image

VIDEO
Menampilkan video ke dalam html dengan tag <video></video>
Apabila tidak tampil maka browser anda belum mendukung html5

AUDIO
Menampilkan video ke dalam html dengan tag <audio></audio>
Apabila tidak tampil maka browser anda belum mendukung html5
FORM

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
FIELDSET

Referensi : http://www.w3schools.com/html/default.asp