HTML HyperText Markup Language

HTMLHyperText Markup Language

HTML • singkatan dari HyperText Markup Language • menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: • Text editor sederhana. Contoh: Windows: Notepad Linux: Bluefish, gEdit, mcedit, pico, dll • Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror.

Istilah-istilah dalam HTML : • Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).Tag kontainer: <namatag> ..... </namatag> • Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. • Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.

Tag Utama dalam struktur dokumen HTML: <html> <!– untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html>

Contoh HTML sederhana : <html> <head> <title> HTML </title> </head> <body> Kami sedang mulai belajar HTML </body> </html>

Penggunaan Komentar Format: <! -- > Fungsi: • Memberi nama aplikasi • Mendeskripsikan tujuan pengkodean tertentu di dalam file • Memberi nama pengarang • Memberi tanggal pembuatan • Memberi nomer versi • Memberi informasi hak cipta

Script: <html> <head> <title> Heading </title> </head> <body> <h1 align="center">Heading 1: HTML</h1> <h2 align="center">Heading 2: HTML</h2> <h3 align="center">Heading 3: HTML</h3> <h4 align="center">Heading 4: HTML</h4> <h5 align="center">Heading 5: HTML</h5> <h6 align="center">Heading 6: HTML</h6> </body> </html>

Tag Paragraf • Paragraf yang dapat diatur perataannya (kiri, tengah, kanan): <p [align=”left”|”center”|”right”]> . . . </p> Script: <html> <head> <title> Paragraf </title> </head> <body> <h2 align="center">Materi HTML</h2> <p align="right">Kami sedang mulai belajar HTML</p> <p align="left">Saatinimembahas materi Dasar-dasar HTML </p> </body> </html>

Tag Memformat Dokumen Script: <html> <head> <title> Format Dokumen </title> </head> <body> <p>Contoh <b>Teks Bold</b></p> <p>Contoh <i>Teks Italic</i></p> <p>Contoh<sup>Teks superscripted</sup></p> <p>Contoh<sub>Teks subscripted</sub></p> <p>Contoh<del>Teksstruckthrough</del></p> <p>Contoh<code>Teks Computer Code</code></p> </body> </html>

Tag Pre-format • Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: <pre> . . . </pre> Script: <html> <head> <title>Pre-Format</title> </head> <body> <pre> Saya sedang Bel ajar HTML Untuk mem buat aplikasi berbasis web </pre> </body> </html>

Tag Break • Untuk menulis teks pada baris berikutnya: <br> Script: <html> <head> <title>Mengganti Baris</title> </head> <body> Muhammad Yusuf<br/> Jurusan Teknik Informatika<br/> Fakultas Teknik<br/> Universitas Trunojoyo <br/> </body> </html>

Tag Garis Pemisah Horisontal • Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr> Script: <html> <head> <title>Membuat Garis Horisontal</title> </head> <body> Berikut ini penggunaan satu garis horisontal: <hr/> dan penggunaan dua garis horisontal: <hr/> <hr /> </body> </html>

Tag Font • Ukuran font: <font size=“n”> . . . </font> • Jenis font: <font size=“n” face=“jenis_font”> . . . </font> • Warna font <font size=“n” face=“jenis_font” color=“warna”> . . . </font> Script: <html> <head> <title>Memformat Font</title> </head> <body> <font size=5 color="#FF00FF"> Teks berwarna hexcolor #FF00FF </font><br/> <font color="red">Teksberwarna merah</font> </body> </html>

Tag Hypertext Link Format: <a href=”address” > . . . </a> • Link ke dokumen lain <a href=”nama_dokumen” > . . . </a> • Link ke bagian tertentu dalam dokumen yang sama <a href=”#target” > . . . </a> <a href=”target” > . . . </a> • Link ke alamat URL atau WebSite <a href=”alamat_URL” > . . . </a> • Link ke alamat Email <a href=”mailto:alamat_email” > . . . </a> • Link File yang akan didownload <a href=”nama_file” > . . . </a>

Tag Hypertext Link (2) Script: <html> <head> <title>Membuat link</title> <head> <body> <p>Silahkan download <i>handout</i> perkuliahan di <A href=" http://gubugmasrur.wordpress.com\edukasi\pemrograman-internet-basis-java"> blog masrur </A></p> </body> </html>

HALAMAN WEBSITE PRIBADI HOME | PROFIL | KONTAK ANDA BERADA DIHALAMAN HOME.HTML

HALAMAN WEBSITE PRIBADI HOME | PROFIL | KONTAK ANDA BERADA DALAM HALAMAN PROFIL.HTML

HALAMAN WEBSITE PRIBADI HOME | PROFIL | KONTAK ANDA BERADA DALAM HALAMAN KONTAK.HTML

Tag Memuat Gambar Memuat gambar ke dalam halaman Web <img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] /> Relative Path: • File gambar ada dalam direktori yg sama: ./ • File gambar ada dalam direktori sebelumnya: ../ Script: <html> <head> <title> Insert Gambar</title> </head> <body> <img src="./penguins.jpg"></br> <b> Penguins</b> </body> </html>

Warna Background Menggunakan warna <body bgcolor=#nnnnnn> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Warna </title> </head> <body bgcolor="pink"> Kami sedang mulai belajar HTML </body> </html>

Warna Background (2) Menggunakan gambar <body background=“nama_file_gambar”> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Gambar </title> </head> <body background="./Desert.jpg"> <p><h2 align="center">Kami sedang mulai belajar HTML</h2></p> </body> </html>

Tag List • <ul> - unordered list (daftar tdk bernomor); bullet <ul [type=“disc”|”square”|”circle”] > . . . </ul> • <ol> - ordered list; nomor <ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol> • <dl> - definition list; dictionary <dl> . . . </dl> <dt> . . . </dt> <dd> . . . [</dd>]

Tag List (2) Script: <html> <head> <title>Penggunaan List</title> </head> <body> <h4>Istilah-istilah dalam HTML:</h4> <ol> <li><i>Tag</i></li> <li><i>Element</i></li> <li><i>Attribute</i></li> </ol> <h4>Contoh <i>tag</i>:</h4> <ul type="square"> <li><i>Tag heading</i></li> <li><i>Tag list</i></li> </ul> </body> </html>

TABEL Fungsi: • Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca • Mengatur tampilan homepage agar lebih menarik

Tag yang diperlukan: <table> • Atribut-atribut:

Membuat Tabel Sederhana • Tag yang diperlukan: - Membuat baris: <tr> (table row) - Membuat kolom: <td> (table data) Contoh: <table border="1"> <tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table>

Menambahkan Judul Tabel • Judul tabel: <caption> • Judul baris/kolom: <th> (table header) Contoh: <table border="1"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr> </table>

Mengatur Lebar & Tinggi Tabel Atribut: width dan height Nilai: • ukuran % (max 100%) • ukuran pixel Contoh: <table border="1" width=“50%”> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th> <th>NPM</th> <th>Nama</th></tr> <tr><td width=“20”>1.</td> <td width=“80” height=“50“>06.100.001</td> <td width=“180” height=“50”>Amin A. Angkasa</td></tr> <tr><td width=“20”>2.</td> <td width=“80” height=“70”>06.100.002</td> <td width=“180” height=“70”>Beni B. Bernardi</td></tr> </table>

Perataan dalam tabel • horisontal: atribut align ->utk <caption>, <tr>, <td> dan <th> • vertikal: atribut valign -> utk <tr>, <td> dan <th> Contoh: <table border="1" align="center"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td align="center" width="20">1.</td> <td align="center" valign="middle" width="80" height="50">06.100.001</td> <td align="right" valign="top" width="180" height="50">Amin A. Angkasa</td></tr> <tr><td width="20">2.</td> <td align="left" valign="top" width="80" height="70">06.100.002</td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>

Membuat warna pada tabel • Atribut: bgcolor Contoh: <body bgcolor="purple"> <font size="3" face="arial" color="yellow"> <table border="2" bgcolor="white" align="center"> <caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow"> <th>No</th><th>NPM</th><th>Nama</th></tr> <tr bgcolor="cyan"><td align="center" width="20">1.</td> <td align="left" valign="middle“ width="80" height="40">06.100.001</td> <td align="left" valign="middle“ width="180" height="40">Amin A. Angkasa</td></tr> <tr><td bgcolor="blue" width="20">2.</td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">06.100.002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>

Penggabungan baris/kolom • Menggabungkan bbrp kolom menjadi 1: atribut colspan • Menggabungkan bbrp baris menjadi 1: atribut rowspan

Script HTML: <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <trbgcolor="gray"><throwspan="2">No</th> <throwspan="2">NPM</th> <throwspan="2">Nama</th> <thcolspan="2">Nilai</th> </tr> <trbgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40">06.100.001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40">06.100.002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table>

form • Sebuah dokumen interaktif dapat menangani input dari user • Analoginya : bahwa dokumen adalah sebuah formulir isian • Sebuah dokumen dapat mengandung satu atau beberapa form • Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) • Setiap form dapat menghimpun satu atau beberapa elemen input • Ada beberapa jenis elemen input untuk menangani berbagaikarakteristik data input • Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit) • Skema dasar dokumen form : <form method="POST" action="namaprogram"> bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis </form> • Contoh sebuah form sederhana untuk meminta nama user : <form method="POST" action="proses.php"> <label for="nama">Ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"> </form>

Karakteristik data input • Teks satu baris (single-line text) <input type="text"> • Teks banyak baris (multi-line text) <textarea></textarea> • Teks rahasia (password) <input type="password"> • Pilihan tunggal (single selection) <input type="radio">, <select></select> • Pilihan majemuk (multiple selections) <select multiple></select> • Centang (on/off) <input type="checkbox"> • Data bawaan/tersembunyi (hidden) <input type="hidden"> • File <input type="file"> • Koordinat 2D dalam sebuah bidang gambar <input type="image"> • Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">, <input type="button">, <button></button>

Tag input • <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan) • <input type="[text|password]" name="nama" readonly size="m" maxlength="n"> readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user • <input type="[radio|checkbox]" name="nama" checked> checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih • <input type="image" src="gambar" name="nama" alt="alternatif"> src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar

Tag textarea, select, button • <textarea name="nama" rows="b" cols="k">nilai</textarea> nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar) • <select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option>…</select> multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default=1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih • <button type="jenis" name="name" value="nilai">tampilan</button> type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol

Contoh form (1) <form method="POST" action="proses.php"> Silahkan isi data Anda <input type="hidden" name="halaman" value="1"> <table border="1"> <tr> <td><label for="nama">Nama lengkap:</label></td> <td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td> </tr> <tr> <td><label for="pass">Password:</label></td> <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td> </tr> <tr> <td><label for="jenkel">Jenis kelamin:</label></td> <td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br> <input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td> </tr> <tr> <td><label for="alamat">Alamat:</label></td> <td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td> </tr> <tr> <td><label for="bayar">Sudah bayar?</label></td> <td><input type="checkbox" name="bayar" id="bayar">Sudah</td> </tr> </table> <input type="submit" value=" Kirim "> <input type="reset" value="Reset"> </form>

Contoh form (2) <form method="POST" action="proses.php" enctype="multipart/form-data"> <input type="hidden" name="halaman" value="2"> <table border="1"> <tr> <td><label for="kota">Kota:</label></td> <td><select name="kota" id="kota"> <option value="">pilih kota...</option><option value="bdg">Bandung</option> <option value="jkt">Jakarta</option><option value="sby">Surabaya</option> </select></td></tr> <tr> <td><label for="kerja">Pekerjaan:</label></td> <td><select name="kerja" id="kerja" size="4"> <option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option> <option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option> </select></td></tr> <tr> <td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td> <td><select name="bahasa" id="bahasa" size="4" multiple> <option value="id">Indonesia</option> <option value="en">Inggris</option> <option value="ch">Cina</option> <option value="fr">Prancis</option> </select></td></tr> <tr> <td>Hobi:<br>(bisa lebih dari satu)</td> <td><input type="checkbox" name="hobi" value="1">Berenang<br> <input type="checkbox" name="hobi" value="2">Nonton film<br> <input type="checkbox" name="hobi" value="3">Musik</td> </tr><tr> <td><label for="foto">Foto:</label></td> <td><input type="file" name="foto" id="foto" size="10"></td></tr> </table> <button type="submit">Kirim <img src="smiley.gif"></button> <button type="reset">Reset <img src="tanya.gif"></button> </form>

Contoh form (3) <form method="POST" action="proses.php"> <table border="1"> <tr> <td><label for="kode">Kode:</label></td> <td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td> </tr> <tr> <td><label for="jenis">Jenis:</label></td> <td><select name="jenis" id="jenis" size="4"> <option value="pat">Kapal patroli</option> <option value="per">Kapal perusak</option> <option value="pud">Pangkalan udara</option> <option value="mar">Markas</option> <option value="log">Logistik</option> </select></td> <tr> <td colspan="2">Tunjuk lokasi penempatan :<br> <input type="image" src="peta1.gif"></td> </tr> </table> </form>

REFERENSI TERIMAKASIH

HTML HyperText Markup Language