Mengenal script html 2

Mengenal Script HTML https://www.facebook.com/kursus.online.profesional | 2016
5
Mengenal Script HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language) adalah sebuah system untuk proses mark up atau pemakaian tag
pada sebuah dokumen agar dokumen tersebut dapat ditampilkan di WWW (Worl Wide Web). HTML
merupakan hypertext yang dipakai di web yang didefinisikan oleh W3C (Worl Wide Web Consortium),
yaitu badan yang mengontrol internet.
Kunci HTML adalah tag pembuka (misalnya <html>) dan tag penutup (</html>). Struktur yang lebih
rumit mengikuti sebuah prinsip, yaitu prinsip bersarang, artinya di dalam sepasang tag ada pasang tag
yang lain. Misalnya di dalam pasangan tag <html> dan </htm>, kita dapat menambahkan pasangan tag
<head> dan </head>. Dan di dalamnya kita dapat menambahkan tag <title> dan </title>. Teks yang
berada di antara tag <title> dan </title> akan dijadikan sebagai judul aplikasi pada browser.
Misalnya diberikan HTML di bawah ini (judul.htm).
<html>
<head>
<title>Ini judul aplikasi</title>
</head>
</html>
Hasil dari script di atas sebagai berikut.
Memakai BODY
Tag <body> ditambahkan sesudah </head>, dan tag penutup </body> ditambahkan sebelum </html>.
Elemen-elemen dari BODY adalah sebagai berikut:
<body bgcolor="warna latar belakang"
text="warna text"
link="warna link"
vlink="warna link yang pernah diakses"
body element…
…
body element…
</body>
Di antara tag <body> dan </body> kita bisa mengatur tampilan teks dengan ukuran dan efek yang
bervariasi. Beberapa tag tampilan teks adalah sebagai berikut.
 HTML mempunyai 6 level heading yaitu : <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Masing-
masing tag harus ditutup dengan tag yang sesuai (missal tag <h1>, ditutup dengan </h1>).
 Tag FONT memberikan variasi tampilan teks yang meliputi elemen-elemen seperti di bawah.

6
<font face=”nama font”
color=”warna font”
size=”ukuran font (1-7)”
…
</font>
 Tag <b> </b> untuk teks cetak tebal.
 Tag <i> </i> untuk teks cetak miring.
 Tag <strong> </strong> untuk teks cetak tebal (tegas).
 Tag <em> </em> untuk teks cetak miring
 Tag <p> </p> untuk menyatkan satu paragraph
 Tag <br> menyatakan break line (ganti baris)
Berikut contoh penggunaan tag tampilan teks (teks.htm).
<html>
<head>
<title>Penampilan teks</title>
</head>
<body>
<font face=”Arial” size=2 color=”#339966”>
<h1>
Heading 1 dengan ukuran font 2
</h1>
</font>
<font face=”Arial” size=2 >
<i>Tulisan ini dicetak miring </i><br>
<b>Tulisan ini dicetak tebal</b><br>
<p>
<em>Teks ini juga miring</em><br>
</strong>Teks ini juga tebal</em>
</font>
</body>
</html>
Hasil dari script di atas adalah…
Berikut penggunaan heading (heading.htm)…

7
<html>
<head>
<title>Menggunakan Heading</title>
</head>
<body>
<h1>Ini heading 1</h1><br>
<h6>Ini heading 6</h6>
</body>
</html>
Horizontal Rules
Tag Horizontal Rules <hr> digunakan untuk membuat garis dalam arah horizontal. Beberapa atribut
atau element dari tag <hr> adalah:
<hr align=”efek perataan”
width=”lebar garis”
size=”tebal garis”
noshade
… >
Align adalah atirbut yang menyatakan perataan garis, apakah center, left, atau right.
Width adalah atibut yang menyatakan panjang garis. Nilai ini dapat diisi dengan prosentase (%) atau
jumlah pixel (titik) dari kiri ke kanan. Default-nya panjang garis selebar browser.
Size adalah atribut yang menyatakan ketebalan garis.
Noshade untuk membuat garis dengan cetak tebal. Default-nya adalah garis yang dicetak samar-samar.
Berikut contoh penggunaan tag <hr> (garis.htm)
<html>
<head>
<title>Menggunakan garis</title>
</head>

8
<body>
<h3>Daftar Gaji</h3>
<hr>
Budi ……………………………….. Rp 450.000
<hr>
Iwan ……………………………….. Rp 300.000
<hr>
Ima ………………………………….. Rp 400.000
<hr>
Arman …………………………….. Rp 500.000
<hr>
Wati ……………………………….. Rp 450.000
</body>
</html>
Contoh penggunaan tag <hr> yang lain adalah sebagai berikut (cemara.htm).
<html>
<head>
<title>Pohon Cemara</title>
</head>
<body>
Penggunaan garis tanpa atribut size.<br>
<hr align=”center” width=5% noshade>
<p>

9
Penggunaan garis dengan atribut size=12.<br>
</body>
</html>
Hasil dari script diatas adalah…
Menampilkan Gambar
Kita dapat menambahkan gambar pada halaman web, sehingga lebih menarik. Kita harus menyatakan
sumber gambar yang akan ditampilkan di halaman web. Tag yang digunakan adalah <img>, dengan
atribut atau elemen sebagai berikut.
<img src=”file path”
width=”lebar gambar (pixel)”
height=”tinggi gambar (pixel)”
alt=”hint (text yang tampil ketika mouse over)”
border=”tebal border gambar”
…>
Src adalah atribut yang menyakan lokasi file gambar yang akan ditampilkan.
Width adalah atribut yang menyatakan lebar gambar dalam satuan pixel (titik).
Height adalah atribut yang menyatakan tinggi gambar dalam satuan pixel (titik).
Alt adalah atribut yang menyatakan hint (teks yang tampil ketika mouse berada pada daerah gambar).
Boder menyatakan ketebalan bingkai gambar.
Berikut contoh penampilan gambar pada halaman web (gambar.htm).
<html>

10
<head>
<title>Menampilkan Gambar</title>
</head>
<body>
<b>Menampilkan gambar di halaman web.</b>
<br>
<img src=sunset.jpg width=400 height=250 alt=Sunset border=1
bodercolor>
</body>
</html>
Data Berbutir dan Bernomor
Terkadang kita harus menampilkan data di halam web untuk merinci suatu penjelasan tertentu. Biasanya
kita merinci suatu item yang tidak berprioritas dengan butir-butir tertentu, atau dengan urutan nomor
untuk item yang berprioritas. Tag yang digunakan adalah <ul> untuk item yang tanpa prioritas, dan <ol>
untuk item yang berprioritas. Sementara untuk masing-masing item harus digunakan tag <il> dan </il>.
Adapun atribut untuk tag <ul > adalah:
<ul type=”bentuk butir”>
<li>item pertama</li>
<li>item kedua</li>
….
</ul>
Type adalah atribut yang menyatakan bentuk butiran item. Untuk butiran yang berupa bulatan pejal tidak
memerlukan type. Untuk butiran berupa bulatan berrongga menggunakan type “circle”. Dan untuk
butiran berupa kotak pajal digunakan type “square”.
Adapun atribut untuk tag <ol> adalah:
<ol type=”tipe prioritas”>
<li>prioritas pertama</li>
<li>prioritas kedua</li>

11
…
</ol>
Type adalah atribut yang menyatakan tipe prioritas, apakah menggunakan nomor 1, 2, 3, …, atau a, b, c,
…, ataukah menggunakan i, ii, iii, …. Untuk prioritas penomoran menggunakan angka tidak memerlukan
atribut type. Untuk prioritas penomoran menggunakan huruf, type-nya adalah “a”. Sedangkan untuk
prioritas penomoran menggunkan angka romawi, type-nya adalah “i”.
Berikut contoh penggunaan item berbutir dan bernomor (butir_nomor.htm).
<html>
<head>
<title>Item berbutir dan bernomor</title>
</head>
<body>
<b>Langkah-langkah menghidupkan komputer:</b>
<ol>
<li>Hidupkan stavolt</li>
<li>Hidupkan power pada CPU</li>
<li>Hidupkan power monitor</li>
</ol>
<hr>
<b>Langkah-langkah mematikan komputer:</b>
<ol type=”a”>
<li>Klik tombol start</li>
<li>Klik shutdown</li>
<li>Pilih shutdown</li>
<li>Klik tombol OK</li>
<li>Matikan stavol</li>
</ol>
<hr>
<b>Menghindari sengatan listrik:</b>
<ol type=”i”>
<li>Pakailah alas kaki yang bersifat isolatif dan kering</li>
<li>Hindari menyentuh casing/rangka pesawat listrik</li>
<li>Jangan dekat-dekat dengan sumber listrik</li>
<li>Matikan sekering pada Kilowatt meter</li>
<li>Jangan pake listrik</li>
</ol>
<hr>
<b>Jenis-jenis unggas:</b>
<ul >
<li>Burung</li>
<li>Ayam</li>
<li>Itik</li>
<li>Angsa</li>
</ul>
</body>
</html>

12
Hasil dari script di atas adalah….
Link
Karena informasi yang kita tampilkan di halaman web sangat banyak, maka kita harus membagi per
halaman. Untuk itu, kita harus menghubungkan antara halaman yang satu dengan yang lain. Proses
hubungan ini kita sebut dengan link. Dengan link ini, kita tidak hanya bisa menghubungkan antar
halaman dalam satu web site, tetapi bisa lintas web site. Agar antar halaman dapat berhubungan kita harus
menggunakan tag <a> dan </a> dalam penulisan script. Adapun atribut link adalah:
<a href=”URL”>Label</a>
URL (Uniform Resource Locator) menyatakan URL dari halaman.
Label menyatakan label yang ditampilkan dan dapat dipilih.
Berikut contoh penggunaan link (sambung.htm).
<html>
<head>
<title>Menghubungkan antar halaman</title>
</head>
<body>
<b>Pilih halaman berikut:</b>
<p>
<ol>
<li><a href=cemara.htm>Pohon Cemara</a>
<li><a href=gambar.htm>Matahari Terbenam</a>
<li><a href=butir_nomor.htm>Langkah-langkah jitu</a>
</ol>
</body>
</html>

13
Cascading Style Sheet
CSS (Cascading Style Sheet) digunakan untuk membuat style tampilan halaman web yang dapat dipakai
ulang untuk tampilan yang lain. Sebagai contoh penggunaan tag <font color=”#BBCCBB”> pada setiap
sel dari sebuah table. Untuk itu kita harus membuat tag yang sama pada masing-masing sel. Dengan CSS,
kita cukup membuat atribut-atribut yang diperlukan untuk tag tertentu di dalam tag CSS. Dan atribut
tersebut dapat dipanggil berulang-ulang untuk tampilan yang sama.
CSS mengunakan tag <style> dan </style>. Tag tersebut diletakkan di container <head>…</head>
untuk menjamin browser memanggil style sheet sebelum body. Tag <style> memerlukan atribut type
dengan nilai “text/css”. Biasanya style dibuat sebagai komentar, agar browser yang tidak mendukung
style sheet akan mengabaikannya.
Berikut contoh penggunaan CSS (css1.htm).
<html>
<head>
<title>Style Sheet 1</title>
<style type="text/css">

</style>
</head>
<body>
Coba Style Sheet dengan latar belakang kuning dan teks hijau
</body>
</html>

14
Style sheet mempunyai beberapa properti untu font dan text.
 Font-family untuk mengubah option font yang dapat berupa nama family atau face seperti serif,
sans-serif, cursive, fantasy, monospaced, times, atau courier.
 Font-weight untuk mengatur ketebalan font. Pilihan yang ada adalah bold, bolder, normal, atau
lighter. Dapt juga berisi nilai numerik dari 100 sampai 900, semakin besar nilainya font semakin
tebal.
 Font-size untuk mengatur ukuran font. Pilihan-pilihan yang ada adalah xx-small, x-small, small,
medium, large, x-large, dan xx-large. Nilai numeric dapat diberikan dalam satuan points (pt)
atau pixel (px).
 Text-align untuk mengeset alignment horizontal, sintaksnya adalah:
Text-align: right | left | center | justify
 Text-vertical-align untuk mengeset alignment vertical, sintaksnya adalah:
Text-vertical-align: baseline | sub | super | top | text-top |
middle | bottom | text-bottom
Namun belum ada browser yang mendukung property ini.
 Text-indent untuk mengatur indentasi margin kiri dan kanan.
 Text-decoration untuk memperindah teks dengan pilihan underline, blink, line-trough, dan
overline.
 Text-style untuk mengatur style dari font dengan pilihan normal, oblique, dan italic.
 Text-transform untuk mengubah tampilan keseluruhan dengan nilai capitalize, uppercase, atau
lowercase.
Berikut contoh lain penggunaan CSS (css2.htm).
<html>
<head>
<title>Style Sheet Font dan Text</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Property Font</h1>
<pre>
<p>font-family
<p>font-size
</pre>
<p>font-style
<p>font-weight
</body>

15
</html>
Form
HTML memiliki tag untuk membuat form dengan elemen-elemen sebagai berikut.
<form name=”form name”
action=”URL”
method=”post | get”
enctype=”mime type”
target=”Target page atau frame”
onsubmit=”eventhandler”
onreset=”eventhandler”
form element
...
form element >
…
</form>
Name untuk memberikan nama sebuah form.
Action untuk menyatakan URL yang akan dibuka.
Method menyatakan bagaimana informai dikirim ke sebuah script pada sisi server. Method yang dapat
digunakan adalah
Nilai Artinya
Option Meminta informasi mengenai option komunikasi
Get Meminta informasi yang diidentifikasi oleh property URL
Head Meminta informasi mengenai property dari respon HTTP (bukan isi dari
respon
Post Meminta aplikasi server untuk melakukan proses post pada data yang ada di
property content
Put Meminta aplikasi server untuk mengisi resource dalam URL dengan data
yang ada di property content
Delete Meminta aplikasi server untuk menghapus atau menyembunyikan resource
yang diidentifikasi oleh URL.
Enctype menyatakan type encryption.
Target dipakai untuk menempatkan hasil dari form ke dalam sebuah frame.
Event Handler onSubmit dijalankan jika user mengklik tombol submit.

16
Event Handler onReset dijalankan jika user mengkil tombol reset.
Semua elemen form dibuat dengan tag <input>. Tag tersebut dapat dipakai untuk membuat field teks atau
button. Bentuk umum field teks:
<input type=”text”
name=”field name”
value=”field contents”
size=”column in use”
maxlength=”maximum column”
onblur=”eventhandler”
onfocus=”eventhandler”
onselect=”eventhandler”
onchange=”eventhandler”
…
>
Name menyatakan field teks
Type menyatakan tipe elemen.
Value menyatakan isi default teks.
Size menyatakan panjang kolom
Maxlength menyatakan maksimum character yang diinputkan.
onFocus dijalankan jika kursor berada pada field
onBlur dijalankan jika kursor meninggalkan field
onSelect dijalankan jika teks di dalam field diblok.
onChange dijalankan jika teks di dalam field berubah.
Bentuk Input yang lain adalah:
<input type=”button”
name=”button name”
value=”label name”
onclick=”eventhandler”
…
>
Type menyatakan tipe tombol.
Name menyatakan nama tombol.
Value menyatkana label/caption tombol
onClick dijalankan jika tombol diklik.
Bentuk input dengan text yang banyak:
<textarea name=”field name”
cols=”number of columns”
rows=”number of rows”
wrap=”wrap text”
--
>
</textarea>
Berikut penggunaan form (form.htm)
<html>

17
<head>
<title>Menggunakan Form</title>
</head>
<body>
<form name="identitas" action="target.htm" method="post">
<b>Isikan field di bawah sesuai kondisi Anda:</b>
<p>
Isikan Nama Anda : <input type="text" name="nama" size=30
maxlength=40><br>
Isikan Alamat Anda : <input type="text" name="alamat" size=50
maxlength=60><br>
Isikan Pesan Anda : <br><textarea name="pesan" cols=40
rows=7></textarea>
<p>
<input type="submit" name="lanjut" Value="Lanjut">
<input type="reset" name="batal" value"Batal">
</form>
</body>
</html>
Membuat Tabel
HTML menyediakan tag untuk membuat table. Tag tersebut diawali dengan <table> dan diakhiri dengan
</table>. Di dalam Tag <table></table> kita dapat membuat tag <th></th> sebagai table header, tag
<tr></tr> sebagai table row, dan tag <td></td> sebagai tablde data (sel).
Berikut Penggunaan tag <table> (table.htm).
<html>
<head>
<title>Menggunakan Tabel</title>
</head>
<body>

18
<h2 Text="#0000FF">Daftar Harga Buku</h2>
<p>
<table bgcolor="#00FF00" cellspacing=1 cellpadding=1 border=1 align=
width=30%>
<tr>
<th width=20% bgcolor="#FFFF00" align="center"><font face="Arial"
color="#0000FF">
Judul Buku
</th>
<th width=10% bgcolor="#FFFF00" align="center"><font face="Arial"
color="#0000FF">
Harga
</th>
</tr>
<tr>
<td align="left" width=20%>Aplikasi W@P dengan PHP</td>
<td align="right" width=10%>50.000</td>
</tr>
<tr>
<td align="left" width=20%>Apache web Server</td>
</tr>
<tr>
<td align="left" width=20%>Server Linux</td>
</tr>
<tr>
<td align="left" width=20%>WebSNAP dan WebBROKER</td>
</tr>
</table>
</body>
</html>
Hasil dari script di atas adalah….

Mengenal script html 2

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Mengenal script html 2 (20)

More from Ali Muntaha (16)

Recently uploaded (9)

Mengenal script html 2