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> <h2>Ini heading 2</h2><br> <h3>Ini heading 3</h3><br> <h4>Ini heading 4</h4><br> <h5>Ini heading 5</h5><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> <hr align=”center” width=10% noshade> <hr align=”center” width=20% noshade> <hr align=”center” width=30% noshade> <hr align=”center” width=50% noshade> <hr align=”center” width=60% noshade> <hr align=”center” width=10% noshade> <hr align=”center” width=10% noshade> <hr align=”center” width=10% noshade> <p>


9

Penggunaan garis dengan atribut size=12.<br> <hr align=”center” width=5% noshade> <hr align=”center” width=10% noshade> <hr align=”center” width=20% noshade> <hr align=”center” width=30% noshade> <hr align=”center” width=50% noshade> <hr align=”center” width=60% noshade> <hr align=”center” width=10% noshade> <hr align=”center” width=10% noshade> <hr align=”center” width=10% noshade> </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> Hasil dari script di atas adalah…

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> <td align="right" width=10%>60.000</td> </tr> <tr> <td align="left" width=20%>Server Linux</td> <td align="right" width=10%>70.000</td> </tr> <tr> <td align="left" width=20%>WebSNAP dan WebBROKER</td> <td align="right" width=10%>150.000</td> </tr> </table> </body> </html>

Hasil dari script di atas adalah….

Mengenal script html 2

Internet

Transcript of Mengenal script html 2