HTML HYPERTEXT MARKUP LANGUAGE Zaenal Abidin HTML singkatan
HTML HYPERTEXT MARKUP LANGUAGE Zaenal Abidin
HTML � singkatan dari Hyper. Text 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, g. Edit, 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
Tag Heading Untuk judul atau sub judul dalam dokumen HTML <h 1 [align=”left”|”center”|”right”]>. . . </h 1> <h 2 [align=”left”|”center”|”right”]>. . . </h 2>. . <h 6 [align=”left”|”center”|”right”]>. . . </h 6>
Script: <html> <head> <title> Heading </title> </head> <body> <h 1 align="center">Heading 1: HTML</h 1> <h 2 align="center">Heading 2: HTML</h 2> <h 3 align="center">Heading 3: HTML</h 3> <h 4 align="center">Heading 4: HTML</h 4> <h 5 align="center">Heading 5: HTML</h 5> <h 6 align="center">Heading 6: HTML</h 6> </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> <h 2 align="center">Materi HTML</h 2> <p align="right">Kami sedang mulai belajar HTML </p> <p align="left">Saat ini membahas 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>Teks struckthrough</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: 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="#FF 00 FF"> Teks berwarna hexcolor #FF 00 FF </font><br/> <font color="red">Teks berwarna 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 Web. Site <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: //zheira 83. wordpress. com"> blog </A></p> </body> </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><h 2 align="center">Kami sedang mulai belajar HTML</h 2></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> <h 4>Istilah-istilah dalam HTML: </h 4> <ol> <li><i>Tag</i></li> <li><i>Element</i></li> <li><i>Attribute</i></li> </ol> <h 4>Contoh <i>tag</i>: </h 4> <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> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="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 Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: memperoleh data-data user baik nama, alamat dan data lainnya memperoleh informasi pembelian secara online memperoleh feedback dari user mengenai website anda Menambahkan buku tamu / komentar user
FORM form input textarea select option optgroup button label fieldset legend
Form Element Tag <FORM> digunakan untuk membuat form dalam document HTML. Attribute Description ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax: ACCEPT=”Internet Media Type” METHOD Menentukan bagaimana data akan di kirim ke server. �GET – data akan di kirim dengan menggunakan query string pada URL. �POST – data akan di kirim ke server sebagai block data ke script. Syntax: METHOD=”POST|GET” ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=”URL”
enctype="multipart/form-data"> Element ini perlu ditambahkan jika anda mengirim file / upload sebuah gambar dengan menggunakan form yang anda buat.
Form Element <INPUT> Tag ini teletak didalam blok tag form Atribut : Type (jenis input), nilai : text, checkbox, radio, hidden, button, submit, reset, file, image. Name (nama elemen) Value (nilai isian)
Form Element <INPUT>
Form Element <RADIO>
CHECKBOX
HIDDEN
BUTTON
SUBMIT
Reset
SELECT
TEXTAREA
Refrensi HTML Beginner & Intermediate & Advanced http: //www. htmldog. com/guides/html/
- Slides: 45