html hypertext markup language
Post on 14-Feb-2016
147 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML HYPERTEXT MARKUP LANGUAGE
Zaenal Abidin
HTMLsingkatan dari HyperText Markup Languagemenentukan tampilan suatu teks dan tingkat kepentingan dari
teks tersebut dalam suatu dokumen.Software yang diperlukan:Text editor sederhana.
Contoh:Windows: NotepadLinux: Bluefish, gEdit, mcedit, pico, dll
Web browser untuk menampilkan dokumen web yang dibuat.Contoh:Windows: Internet Explorer, Opera dan FirefoxLinux: Firefox dan Conqueror.
Istilah-istilah dalam HTML :Tag - Digunakan untuk menentukan tingkah
laku webbrowser. 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 KomentarFormat:
<! -- >Fungsi:Memberi nama aplikasiMendeskripsikan tujuan pengkodean tertentu di
dalamfile
Memberi nama pengarangMemberi tanggal pembuatanMemberi nomer versiMemberi 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">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:<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 penggunaansatu garis horisontal: <hr/>dan penggunaan dua garishorisontal: <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">Teks berwarnamerah</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 GambarMemuat 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 LatarBelakang Warna </title></head><body bgcolor="pink">Kami sedang mulai belajarHTML</body>
</html>
Warna Background (2)Menggunakan gambar <body background=“nama_file_gambar”> . . . </body>
Script:<html>
<head><title> Penggunaan LatarBelakang Gambar </title></head><bodybackground="./Desert.jpg"><p><h2align="center">Kamisedang mulai belajarHTML</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 TabelAtribut: width dan heightNilai: 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/
top related