450 likes | 706 Views
Zaenal Abidin. HTML HyperText 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
E N D
Zaenal Abidin 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
Tag Heading • Untuk judul atau sub judul dalam dokumen HTML <h1 [align=”left”|”center”|”right”]> . . . </h1> <h2 [align=”left”|”center”|”right”]> . . . </h2> .. <h6 [align=”left”|”center”|”right”]> . . . </h6>
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://zheira83.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><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 • 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)
Refrensi HTML Beginner & Intermediate & Advanced • http://www.htmldog.com/guides/html/