Your Life In My Blog: November 2014

Minggu, 09 November 2014

Materi Kuliah HTML pertemuan Lima

HTML

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. (sumber : Wikipedia)

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group).

Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."

Aturan untuk mempelajari HTML5

Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :

 Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

 Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

 Lebih baik penanganan kesalahan.

 Lebih banyak penggunaakn markup untuk mengganti scripting.

 HTML5 harus independen.

 Proses development-nya harus terlihat untuk umum (visible).

FITUR-FITUR BARU DI HTML5

 Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau

realplayer untuk memutar audio dan video.

 Canvas : Media corat-coret langsung tanpa flash dan applet java.

 Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.

 Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel,

footer, header, navigasi, dan section.

 Dukungan yang lebih baik untuk penyimpanan secara offline.

DUKUNGAN BROWSER HTML5

 Chrome

 Safari Apple v.4+

 Internet Explorer 9

 Opera

 Maxthon

 Firefox 4, 5, 6 dan seterusnya

MENGUJI BROWSER

 Untuk menguji browser yang terinstall di komputer. Apakah telah mendukung

HTML5 dapat diuji dengan link berikut :

 http://html5test.com/

DOCTYPE UNTUK HTML5

DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup

halaman yang ditulis.

 Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).

 DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat

membuat konten halaman tersebut dengan benar.

 Penggunaan DOCTYPE pada html5 lebih di sederhanakan.

 Sintak penulisannya :

<!DOCTYPE html>

STRUKTUR DASAR HTML5

ELEMEN YANG DI HAPUS PADA HTML5

 <acronym>

 <applet>

 <basefont>

 <big>

 <center>

 <dir>

 <font>

 <frame>

 <frameset>

 <noframes>

 <strike>

 <tt>

HTML5 SEMANTIC ELEMENTS

 Semantic= arti/makna

 Semantic elements = elemen dengan makna

Apa Unsur Semantic?

 Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.

 Contoh non-semantik elemen:

<div> dan <span> -tidak menjelaskan tentang isinya.

 Contoh semantik elemen:

<form>, <table>, dan <img> -Jelas mendefinisikan isinya.

ELEMENSEMANTIKBARUdi HTML5

 Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:

<div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.

 HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web: <header> <nav> <section> <article> <aside> <figure> <figcaption> <time> <footer>dan masih banyak tag-tag lainnya

PENJELASAN TAG-TAG HTML5

 <header>, digunakan untuk area header(bagian atas sebuah halaman web).

 <article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.

 <aside>, digunakan sebagai penambah informasi utama didalam halaman

web. Biasanya berupa peringatan, catatan, dll.

 <section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg

mendefinisikan sebagai profil, kontak, berita, dan sebagainya.

 <figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode,

dll.

 <figcaption>, Mendefinisikan caption untuk elemen <figure>

CONTOH LAYOUT DI HTML5

CONTOH SEDERHANA

CONTOH TAG FIGURE DAN FIGCAPTION

VIDEO

 Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web.

 Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player.

 Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :

 Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

 MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

 WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

 Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

 Tag <video>

 Sintaks Penulisanya :

</video>

atau

<videocontrols="controls"> <source src="judulvideo.webm" type="video/webm"></video>

ATRIBUT PADA TAG <VIDEO>

Atribute Value Description controls controls Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause) autoplay autoplay Menentukan bahwa video akan mulai berputar otomatis

src URL Menentukan alamat URL dari mana sumber video

width pixels Mengatur lebar dari video player

height pixels Mengatur tinggi dari video player

loop loop Untuk mengulang / memainkan kembali video yang telah

selesai

diputar.

muted muted Menentukan bahwa output suara akan dimute/dihilangkan

poster URL Menentukan gambar yang akan tampil ketika video

masih belum berputar.

preload auto

Materi Perkuliahan Pertemuan Empat

HTML

1. Image HTML

Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
Tag <img> mempunyai atribut di antaranya: Atribut Penjelasan

src
Url dari file image/direktori gambar
align
Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width
Lebar gambar dalam satuan pixel
height
Tinggi gambar dalam satuan pixel
alt
Menampilkan teks pengganti jika gambar tidak tampil di brows
border
Memberi bingkai pada gambar
latihan1.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Posisi Img</title>
</head >
<body>
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom"/> menggunakan align="bottom".
</p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan letak posisi gambar pada latihan1.html, silahkan ganti pada atribut align=”bottom”. Apabila anda ingin melihat fungsi atribut alt, url dari file image/direktori gambar anda salahkan.
latihan2.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Border Img</title>
</head >
<body >
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom" border="1" /> menggunakan border="1". </p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan ketebalan border gambar pada latihan2.html, silahkan ganti pada atribut border=”1”.
Image Sebagai Link
Gambar bisa digunakan sebagai link untuk suatu dokumen.

latihan3.html

<!DOCTYPE html >
<html>
<head >
<title>Img sebagai suatu link</title>
</head >
<body >
<p>
<b>Untuk mengunjungi website amikom klik gambar di samping</b>
<a href="http://www.amikom.ac.id"><img src="amikom.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a> </p>
</body>
</html>

2. Tabel HTML

Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>. Sintaks penulisannya :

<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
Elemen-Elemen Tabel Elemen Penjelasan
<table> . . . </table>
Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border.
Nilai border 0 – 30.
<caption> . . . </caption>
Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>
Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>
Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>
Pembentuk sel data dalam tabel.
Catatan :
Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.
Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut Tag <table> Catatan :
Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>
Atribut Tag <tr>
Atribut Tag <td> dan <th>
Berikut ini adalah beberapa contoh penggunaan atribut pada tag <table> dan <td>:

2.1 Atribut Width, Border, Bordercolor latihan4.html

<!DOCTYPE html >
<html>
<head >
<title>Atribut Width, Border, Bordercolor</title>
</head >
<body >
<table width="500" border="1" bordercolor="#FF0000">
<caption>Atribut Width, Border, Bordercolor</caption > <tr>
<th width="200">Baris 1 Kolom 1</th> <th width="180">Baris 1 Kolom 2</th>
</tr >
<tr>
<td>Baris 2 Kolom 1</td >
<td>Baris 2 Kolom 2</td >
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>

2.2 Atribut Backround, Height, Cellspacing, Cellpadding latihan5.html

<!DOCTYPE html >
<html>
<head >
<title>Atribut Backround, height, cellspacing, cellpadding</title>
</head>
<body>
<table width="1024" border="3" background="WindowsXp.jpg" height="768" cellspacing="25" cellpadding="10" align="center"> <caption>Atribut Backround, height, cellspacing, cellpadding </caption>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td >
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr> </table>
</body>
</html>

2.3 Atribut Colspan, Rowspan, Valign latihan6.html

<!DOCTYPE html>
<html>
<head >
<title>Atribut Colspan, Rowspan, Valign </title>
</head >
<body>
<table width="500" border="1" bgcolor="#FFFF00" align="center"> <caption>Atribut Colspan, Rowspan, Valign </caption> <tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr >
<tr>
<td rowspan="2" valign="top">Baris 2 dan Baris 3 Di Gabung</td > <td bgcolor="#0000FF">Baris 2 Kolom 2</td>
</tr >
<tr>
<td bgcolor="red">Baris 3 Kolom 2</td >
</tr> </table>
</body>
</html>

2.4 Empty Cell

Penggunaan mnemonic “&nbsp” untuk menangani tabel yang belum mempunyai isi. latihan7.html
<!DOCTYPE html >
<html>
<head>
<title>Empty Cell</title>
</head>
<body >
<table border="1">
<caption>Empty Cell</caption >
<tr><td>Nama</td>
<td>TTL</td ></tr>
<tr><td> </td>
<td>Newyogkarto, 23 Maret 1995</td></tr>
</table>
</body>
</html >

2.5 Tabel dalam Tabel latihan8.html

<!DOCTYPE html >
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border="1">
<tr><td>Parent 1</td>
<td><table border="1">
<tr>
<td>Child 1</td>
<td><table border="1">
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>

3. Form dan Input HTML

Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>

3.1 Atribut Tag <form> Atribut Penjelasan

Method
Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL
POST : mengirimkan datanya secara terpisah.
Action
Menentukan lokasi dari script yang akan memproses data dari form

3.2 Jenis Masukan dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi :
Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
List, elemen pilihan dalam bentuk daftar.
Button, elemen berupa tombol untuk melakukan suatu proses.
Submit, elemen tombol yang digunakan untuk memanggil url.
Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
File, elemen button yang dapat memanggil file atau gambar dari storage.
Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

3.2.1 Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :

3.2.2 Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :
latihan9.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Tag Textarea dan Tag Select</title> </head >
<body>
<table width="100%" >
<tr>
<td>Pilih Jenis Kendaraan </td>
<td><select name="motor">
<option value="yamaha">Yamaha</option >
<option value="honda">Honda</option >
<option value="suzuki">Suzuki</option></select></td> </tr >
<tr>
<td> Alamat </td>
<td><textarea name="alamat" cols="55" rows="5"></textarea></td> </tr >
</table >
</body>
</html >

3.2.3 Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :
Tipe input yang dapat dibuat adalah :
Text, digunakan untuk membuat kotak teks
Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.
Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
File, digunakan untuk memanggil file atau gambar dari storage.
Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.
Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

latihan10.html

<!DOCTYPE html >
<html>
<head >
<title>Input Data Berita</title>
</head >
<body text="#0000FF" >
<h2>Tambah Berita</h2>
<form method="post" action="#" enctype="multipart/form -data">
<table width="100%">
<tr>
<td>Judul</td>
<td> : <input type="text" name="judul" size="60"/></td>
</tr>
<tr>
<td>Kategori</td>
<td> :<select name="kategori" >
<option value="kategori_berita" selected>- Pilih Kategori </option>
<option value="komputer">Komputer
<option value="ekonomi">Ekonomi
<option value="pendidikan">Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> : <input type="radio" name="headline" value="Y" checked/>Y
<input type="radio" name="headline" value="N"/> N</td>
</tr>
<tr>
<td>Isi Berita</td>
<td> : <textarea name="isi_berita" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td>Gambar</td>
<td> : <input type="file" name="fupload" size="40"></td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Simpan"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>

4. Elemen Label, Fieldset dan Legend

Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
latihan11.html
<!DOCTYPE html >
<html> <head >
<title>Penggunaan Label, Fieldset dan Legend</title>
</head >
<body>
<form action="#" method="post">
<fieldset>
<legend>Form Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username"/>
<label for="password">Password</label>
<input type="password" name="password" id="password"/>
<input type="submit" name="submit" value="Login"/>
</fieldset>
</form>
</body>
</html>

REFERENSI
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Materi Kuliah HTML Pertemuan Dua

HTML

3.1. Singkatan (Akronim)

Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan (akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag <acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.

Sintaks penulisannya:

<abbr title=“kepanjangannya”>singkatan</abbr>

<acronym title=“kepanjangannya”>singkatan</acronym>

Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan tersebut yang ditampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.

akronim.html

<html>

<head>

<title>Contoh Penggunaan Akronim</title>

</head>

<body>

<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink)yang membentuk samudra belantara informasi.

<br>

<acronym title="Hyper Text Transfer Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).

</body>

</html>

3.2. Address

Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.

Sintaks penulisannya :

<address>alamat anda</address>

address.html

<html>

<head>

<title>Contoh Penggunaan Address</title>

</head>

<body>

STMIK AMIKOM Yogykarta<br />

Kampus Terpadu: Jl.Ring Road Utara<br />

Condong Catur<br />

Sleman<br />

Yogyakarta

</address>

</body>

</html>

3.3. Arah Teks

Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk mendefinisikan arah penulisan teks. Atribut yang digunakan dir.

Sintaks penulisannya :

<bdo dir="rtl">Teks yang mau di arahkan</bdo>

arah_teks.html

<html>

<head>

<title>Contoh Penggunaan BDO</title>

</head>

<body>

STMIK AMIKOM Yogykarta<br />

Jurusan :<br />

S2 Megister Teknik Informatika<br />

S1 Teknik Informatika<br />

S1 Sistem Informasi<br />

D3 Teknik Informatika<br />

D3 Manajemen Informatika

</bdo>

</body>

</html>

3.4. Teks yang Disisipkan atau Dihapus

Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag <ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah. Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan garis tengah horizontal pada teks yang dihapus.

Sintaks penulisannya :

Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan

teks_sisip_hapus.html

<html>

<head>

<title>Contoh Penggunaan INS & DEL</title>

</head>

<body>

Budi membeli perlengkapan kuliah diantarnya sebagai berikut: <br>

1. Buku tulis Rp.10.000<br>

2. ballpoint pen Rp.15000<br>

3. stabilo Rp.5000 <br>

Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>

</body>

</html>

3.5. Link HTML

Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan atau gambar yang saling menghubungkan menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di

identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja.

3.5.1. Tag Anchor

Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a> diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser.

Sintaks penulisannya :

<a href="http://www.amikom.ac.id" target="_blank" name="web amikom">Link web Amikom </a>

Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:

3.5.1.1. Link Relatif

Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:

link_relatif.html

<html>

<head>

<title>Contoh Penggunaan Link Relatif</title>

</head>

<body>

Anda ingin melihat contoh penggunaan akronim, silahkan klik <a href="akronim.html">link berikut</a>.

</body>

</html>

3.5.1.2. Link Absolut

Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah contohnya:

link_absolut.html

<html>

<head>

<title>Contoh Penggunaan Link Absolut</title>

</head>

<body>

Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a href="http://www.amikom.ac.id">link berikut</a>.

</body>

</html>

3.5.1.3. Link ke Bagian Lain dalam Dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.

Sintaks penulisannya :

Artikel bebas

<a name="tujuan">Posisi tujuan</a>

Artikel bebas

link_dalam_dokumen.html

<html>

<head>

<title>Contoh Penggunaan Link Dalam Dokumen</title>

</head>

<body>

<p>

Lihat Bab 4.

</a>

</p>

<p>Bab 1 adalah menjelaskan bla bla bla.</p>

<p>Bab 2 adalah menjelaskan bla bla bla.</p>

<p>Bab 3 adalah menjelaskan bla bla bla.</p>

</a>

<p>

Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.</p>

<p>

Bab 5 adalah menjelaskan bla bla bla. </p>

<a href="#top">Kembali ke atas</a>

</body>

</html

3.5.2. Link Mailto

Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang).

link_mailto.html

<html>

<head>

<title>Contoh Penggunaan Link Mailto</title>

</head>

<body>

Anda ingin mengirim tugas pemrograman web bisa melalui <a href="mailto:haryoko@amikom.ac.id">email berikut</a>.

</body>

</html>

3.6. Tag Marquee

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

bgcolor="warna"

Untuk mengatur warna background text.

direction="left/right/up/down"

Mengatur arah gerakan teks. behavior="scroll/slide/alternate"

Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik lagi.

title='pesan"

Pesan akan muncul saat mouse berada di atas teks. scrollmount="angka"

Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.

scrolldelay="angka"

Untuk mengatur waktu tunda gerakan dalam detik. loop="angka|-1|infinite"

Untuk mengatur jumlah loop. width="lebar"

Mengatur lebar blok teks dalam pixel atau persen.

Materi Kuliah HTML Pertemuan satu

HTML

HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang

menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa

pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen

teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )

dan tanda lebih besar ( > ) yang biasa disebut tag.

1. Dokumen dan Penamaan HTML

Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena

merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang

sederhana, misalnya notepad. Dapat juga menggunakan HTML editor yang bersifat

WYSIWYG ( What You See Is What You Get ), misalnya Frontpage atau Dreamwaver.

Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling

nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama

sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan

berbeda dengan dokumen A.html.

2. Elemen dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk

menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.

Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML

terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).

Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan

pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa

harus berpasangan. Diantaranya:

• Image ( <img /> )

• Ganti Baris – Break ( <br /> )

• Horizontal Rule ( <hr /> )

• Input Field ( <input /> )

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut

digunakan untuk mengubah default pemformatan dokumen dengan tag yang

bersangkutan.

Struktur Element

Struktur Dasar H T ML

<html>

<head>

....informasi dokumen....

</head>

<body>

....konten yang di tampilkan

pada halaman browser.....

</body>

</html>

3. Penggunaan Tag dan Atributnya

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag

HTML, memiliki syarat penulisan yaitu:

• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )

• Tag HTML secara normal selalu berpasangan misal (<i>...</i>)

• Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua

merupakan tag akhir.

Name Value

Atribut

Content

Tag Pembuka Tag Penutup

Element

• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>

• Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh

bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

4. Tag Dasar HTML

4.1 HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini

merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag

pertama dalam dokumen html. Penulisan tag seperti berikut ini :

<html> pada awal dokumen dan </html> pada akhir dokumen

4.2 Head

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head

yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –

kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan

tag seperti berikut ini :

<head> di awal setelah <html> dan </head> di akhir section head.

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :

• Menyediakan judul dokumen

• Menjembatani hubungan antar dokumen

• Memberitahu browser untuk membuat form pencarian

• Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin terdapat pada bagian head :

• Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah

sebagai berikut :

<title>Judul Dokumen</title>

• Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh

penggunaannya adalah sebagai berikut berikut :

• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.

Tag ini mempunyai beberapa atribut :

Atribut Fungsi

href Menunjuk pada URL / dokumen lain

rel Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain

yang berisi informasi tentang personil yang member kontribusi

terhadap dokumen tersebut

rev Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain

type Menentukan tipe dan paramenter dari relasi

Contoh penggunaannya adalah sebagai berikut:

• Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML

Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas

yang belum didukung oleh HTML.

Tag <meta> mempunyai atribut :

Atribut Fungsi

http-equiv Mendefinisikan properti dari elemen

name Menyediakan deskripsi tambahan dari elemen

url Mendefinisikan target dokumen dari sebuah properti

content Menyediakan nilai respon dari properti

Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh

berikut ini :

Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,

kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak

disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan

mengklik tombol Refresh / Reload pada browser.

Penggunaan elemen <meta> yang paling populer adalah penggunaan properti

Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja

search engine. Biasanya search engine akan menggunakan teks yang disebutkan

pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang

terdapat pada properti Description untuk mendeskripsikan indeks tersebut.

4.3 BODY

Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan

ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.

Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup

</body>.

Atributnya:

Atribut Fungsi

alink Menunjukkan warna link aktif

background Merujuk URL atau direktori dari gambar yang digunakan sebagai

latar belakang

bgcolor Menentukan warna latar belakang

bgproperties Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut

tergulung

leftmargin Batas kiri dokumen

link Menentukan warna link yang belum dikunjungi

text Menentukan warna teks

topmargin Menentukan batas atas

vlink Menentukan warna link yang telah dikunjungi

01.latihan_01.html

<html>

<head>

<title>Penggunaan BODY</title>

</head>

Ini adalah contoh penggunaan body.

Dan ini adalah sebuah <a href="">link</a>.

</body>

</html>

Warna Nilai

Black #000000

Maroon #800000

Green #008000

Olive #808000

Navy #000080

Purple #800080

Teal #008080

Gray #808080

Silver #c0c0c0

Red #ff0000

Lime #00ff00

Yellow #ffff00

Blue #0000ff

Fuchsia #ff00ff

Aqua #00ffff

White #ffffff

Table Warna

Title

Body

4.4 Memberikan Komentar

Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang

ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca

pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda

-->.

01.latihan_0 2 .htm l

<html>

<head>

<title>Penggunaan Komentar</title>

</head>

<body>

Selamat belajar html<br>. Semoga sukses!

</body>

</html>

4.5 Memformat Dokumen HTML

Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.

Tag-tag tersebut diantaranya adalah :

• Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.

01.latihan_0 3 .htm l

<html>

<head>

<title>Latihan Heading</title>

</head>

<body>

<h1>Ini Heading 1</h1>

<h2>Ini Heading 2</h2>

<h3>Ini Heading 3</h3>

<h4>Ini Heading 4</h4>

<h5>Ini Heading 5</h5>

<h6>Ini Heading 6</h6>

</body>

</html>

• Tag <br />, membuat baris baru, tidak memerlukan penutup </br>

• Tag <p>, memulai paragaraf baru.

• Tag <hr />, membuat garis batas horizontal, tidak memerlukan penutup </hr>

01.latihan_0 4 .htm l

<html>

<head>

<title>Cerita Ramayana</title>

</head>

<body>

Cerita wayang Ramayana, di Kerajaan Alengka Diraja

<br>Rahwana membuat geger karena menculik Dewi Sinta

<p>Anoman, Si Kera Putih

ditugaskan Tukul Arwana untuk menjemput Sinta

</p>

Tukul Arwana tidak sempat menjeputnya, karena sedang

mengisi acara di stasiun TV Swasta

<hr />

Rama Tukul Arwana

<hr />

<br />

Ini adalah isi Bab I

<h2>1.1 Subbab HTML</h2>

Ini adalah isi Subbab 1.1

<h3>1.1.1 Sub-Subbab HTML</h3>

Ini adalah isi Sub Subbab 1.1.1

</body>

</html>

• Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan

tampilan pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br /> jadi

tidak diperlukan lagi.

01.latihan_0 5 .htm l

<html>

<head>

<title>Latihan PRE</title>

</head>

<body>

<pre>

Tampilan ini sma dengan tampilan di teks editor.

Klasemen

Team Main Menang Seri Kalah

=================================================

Team A 3 2 1 0

Team B 3 2 0 1

Team c 3 1 1 1

=================================================

Kode program :

For I = 1 to 10

For J = 1 to 5

A(I,J)=I*J

</pre>

</body>

</html>

• Tag <center>, Teks rata tengah

• Tag <ul> dan <ol>

Pemformat dokumenlain yang akan sangat banyak berguna adalah LIST (daftar).

Ada dua macam daftar, yaitu ORDERED lists (ol) dan UNORDERED lists (ul).

01.latihan_0 6 .htm l

<html>

<head>

<title>Latihan LIST</title>

</head>

<body>

<p>Keluarga Pandawa</p>

<ol>

<li>Yudhistira</li>

<li>Arjuna</li>

<li>Nakula</li>

<li>Sadewa</li>

</ol>

<p>Jenis Musik</p>

<ul>

<li>Campur Sari</li>

<li>Dangdut</li>

</ul>

</body>

</html>

4.6 Memformat Karakter

Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk

membuat sebuah dokumen menjadi menarik dan informatif.

4.6.1 Logical Format

Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag

ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai

berikut :

• <cite>, digunakan untuk menandai suatu kutipan (citation).

• <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa

• <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh

penulis.

• <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user

melalui keyboard.

• <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.

• <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu

teks.

• <var>, digunakan untuk menampilkan nama variabel.

• <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

4.6.2 Physical Format

Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag

penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :

• <b>, untuk menampilkan huruf tebal.

• <i>, untuk menampilkan huruf miring.

• <u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf

seperti huruf mesin ketik.

• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.

• <big>, untuk menampilkan ukuran huruf yang lebih besar.

• <small>, untuk menampilkan ukuran huruf yang lebih kecil.

• <sub>, untuk menampilkan subscript.

• <sup>, untuk menampilkan superscript.

01.latihan_0 7 .htm l

<html>

<head>

<title>Memformat Karakter</title>

</head>

<body>

<b>Kalimat ini akan dicetak tebal</b><br>

<i>Kalimat ini akan dicetak miring</i><br>

<u>Kalimat ini akan bergaris bawah</u><br>

<strike>Kalimat ini akan bergaris tengah</strike>

</body>

</html>

4.6.3 Tag Font

Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:

01.latihan_0 8 .htm l

<html>

<head>

<title>Memformat FONT</title>

</head>

<body>

Jenis font ini adalah Arial, berwarna merah, ukurannya 3

</font>

<br />

Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6

</font>

</body>

</html>

4.7 Menambahkan Gambar

Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar

yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar

yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah

gambar digunakan tag <img />.

Tag <img /> mempunyai atribut :

Atribut Fungsi

src Merujuk kepada URL atau direktori lokasi gambar

align Posisi text disekitar gambar, nilainya adalah top, middle, bottom,

left, right

width Lebar gambar dalam satuan pixel

height Tinggi gambar dalam satuan pixel

alt Menampilkan text pengganti jika gambar tidak tampil

01.latihan_0 9 .htm l

<html>

<head>

<title>Menambahkan Gambar</title>

</head>

<body>

Gambar ini terdapat pada windows 98 secara default, anda boleh

menggantinya.

</body>

</html>

4.8 Menambahkan Link

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika

Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan

Anchor, yaitu tag <a>. Tag <a> mempunyai atribut HREF yang digunakan sebagai link

tujuan.

01.latihan_ 1 0.htm l

<html>

<head>

<title>Menggunakan Link</title>

</head>

<body>

<a href="http://www.yahoo.com">Klik disini</a> untuk menuju situs

Yahoo.com.<br />

Atau dapat juga mengklik gambar ini :

</a>

</body>

</html>

4.9 Tabel

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

• Tag <table> : Mendefinisikan sebuah tebel

• Tag <tr> : Mendefinisikan baris tabel

• Tag <th> : Mendefinisikan judul kolom

• Tag <td> : Mendefinisikan isi tiap kolom

01.latihan_ 1 1 .htm l

<html>

<head>

<title>HTML Tabel</title>

</head>

<body>

<tr>

<th>Kolom 1</th>

<th>Kolom 2</th>

<th>Kolom 3</th>

</tr>

<tr>

<td>Baris 1 kolom 1</td>

<td>Baris 1 kolom 2</td>

<td>Baris 1 kolom 3</td>

</tr>

<tr>

<td>Baris 2 kolom 1</td>

<td>Baris 2 kolom 2</td>

<td>Baris 2 kolom 3</td>

</tr>

</table>

</body>

</html>