Download - TAG
TAG
Mengenal Tag dan Studi Kasus
TAG
Mengenal Tag dan Studi Kasus
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Heading
Atribut
Paragraf
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Line Break
Pre
Horisontal Rules
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Size
Color
Face
Bacefont
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Link Text
Link Gambar
Link Anchor
Link Email
Link Default Base
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Tinggi dan LebarAlignment Gambar
Thumbnail
Gif dan Jpeg
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Order List
Unordered List
Definition List
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Merge CellPadding & Spacing
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Pewarnaan Nama
Pewarnaan Hex
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Field Text
Tujuan Data
Radio Button
Check Box
Drop Down
Text Area
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Frame Sederhana
Frame Judul
Border & Spacing
Name & TargetNoresize & Scrolling
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
Mengenal Tag dan Studi Kasus
Case Home I
Case Home II
TAG
HTML
Format Doc
Font
Link & Anchor
Gambar
List
Tabel
background
Form
Frame
Case I
HTML - Heading
Di Gunakan untuk melakukan pengaturan ukuran Judul, Sub Judul dan Isi Lainnya.Contoh :<Body><h1> Heading </h1>… <h6> Heading </h6></Body>
HTML - Atribut
Atribut dapat ditambahkan kedalam sebagian besar tag dan digunakan untuk memformat tag dengan kaidah tertentu.
Atribut = NilaiAlign = Center, Left, Right, JustifyValign = Top, Middle, BottomContoh :<h1 Align = “Right”> Heading </h1>
HTML - Paragraf
Elemen <p> Digunakan untuk mendefinisikan paragraf
Contoh :<p> Tulisan anda </p><p> Paragraf Baru </p>
Format Document
<p> Contoh <b> Bold</b> </p> <p> Contoh <em>
Emphasize</em> </p> <p> Contoh <strong>
Strong</Strong> </p> <p> Contoh <i> Italic</i> </p> <p> Contoh <sup> Superscripted
</sup> </p> <p> Contoh <sub> Subscript
</sub> </p>
Ganti baris
Line break <br> adalah salah satu elemen yang cukup berbeda dlm penggunaannya.contoh :Elhabsy.co.cc <br/>Sebuah Alamat Blogger <br/>Terkait tentang IT <br/>
Format Doc - Pre
Penekanan enter pada baris kode program akan ditampilkan sebagaimana mestinya.contoh :<pre>Saya Sedang
Belajar Internet ISebagai Dasar !</pre>
Format Doc – Horisontal Rules Garis horisontal dapat digunakan
untuk memisahkan dua data yang berbedacontoh :<hr>Data Pertama</hr>
Font - Size
Ukuran Size huruf diatur dengan atribut sizeContoh :<p> <font size=“5”>paragraf dengan font 5</font></p>
Font - Color
Atribut ini digunakan untuk mengatur warna FontContoh :<p> <font size=“5” color=“#990000”>paragraf dengan font 5 & berwarna Hexcolor = 990000</font></p>
Font - Face
Memilih jenis huruf yang telah terinstall di sistem.contoh :<p><font face=“Garamond”>Style Garamond</font></p>
Font - Basefont
Untuk mengatur jenis huruf default pada tulisan di halaman webContoh :<basefont size=“2” color=“green”>huruf ini bernilai default</basefont>
Link - Text
Tag <a> dan </a> digunakan untuk mendefinisikan awal dan akhir dari suatu anchor. Teks yang diletakkan antara pembuka dan penutup tag akan ditampilkan sebagai link pada halaman web
Target=“ _Blank” hal baru pada browser baru Target=“ _self” hal baru pd jendela yang sama Target=“ _Parent” hal baru pd frame / digunakan pd hal ber-Frame Target=“ _Top”hal baru pd jendela browser aktif
Link – Teks Lanjutan
Contoh :<a href=“http://www.trunojoyo.ac.id“ target=“_blank”> Universitas Trunojoyo</a>
Link - Gambar
Penggunaannya sebagai variasi agar web terlihat lebih hidup. Dapat pula dijadikan link dengan memasukkan di tag anchorcontoh :<a href=http://www.trunojoyo.ac.id target=“_blank”><img src=“logo.gif”></a>
Link - Anchor
Link antar bagian dalam satu dokumen. Pada halaman tujuan biasanya halaman yang sama dengan asal link. contoh :<h1> link dan anchor HTML <a name=“atas”></a></h1>
<h1> link teks HTML <a name=“teks”></a></h1>
<h1> link Gambar HTML <a name=“gambar”></a></h1>
kemudian
<a href=“#atas”> Link dan Anchor </a>
<a href=“#teks”> Belajar Link Teks </a>
<a href=“#gambar”> Belajar Link Gambar </a>
Link – E-mail
Tujuannya dapat berupa alamat emailcontoh :<a href=“mailto:[email protected]?subject=feedback”>
kritik dan saran </a>
Link - Base
Elemen head dapat digunakan untuk mengatur URL default untuk semua link pada halaman web. Sangat dianjurkan menggunakan tag base yang mengarahkan link default kedomain atau lokasi sendiri. Setiap ada link yang tidak menyebutkan nama / tujuan dengan jelas maka akan dianggap tujuan link ada dibawah domain www.trunojoyo.ac.id
Contoh :<head>
<base href=“http://www.trunojoyo.ac.id/”></head>
Gambar
HTML menyediakan tag <img> untuk menempatkan image pad halaman webcontoh script :sebuah gambar matahari<b><img src=“sunset.gif”>dua cara mendefinisi source1. <img src=“http://www.situs.com/image.gif/su/sunset.gif>
2. <img src=“../sunset.gif>
Gambar – Tinggi & Lebar
Ukuran gambar pada web dapat diatur dengan menggunakan atribut height dan widthcontoh :<img src=“sunset.gif” height=“50” width=“60”>
Gambar - Alignment
Gambar pada halaman web dapat diatur dengan menggunakan atribut alignmentalignment :left = kiriright= kanancenter = tengahValignmenttop = atascenter = tengahbottom = bawah
Gambar - Thumbnail
Thumbnail adalah gambar berukuran kecil yang mempunyai hubungan ke gambar yang lebih besar dengan kualitas lebih tinggi.contoh :<a href=“piringterbang.jpeg”>
<img src=“thumbpiringterbang.jpeg”></a>
Gambar – Gif dan Jpeg
Gif sangat baik digunakan untuk Banner dan tombol web
Jpeg sangat baik digunakan untuk galeri atau artwork
List – Ordered List
Pembuatan daftar bernomor dengan tag <ol> dan </ol> serta diberikan <li> dan </li> untuk masing-masing item.contoh :<h4 align=“center”> Tujuan Anda</h4><ol>
<li> Mendapatkan Pekerjaan </li><li> Mendapatkan Uang </li><li> Menambah Pengalaman </li>
</ol>Atribut dapat menggunakan atribut type dan start
List – Unordered List
Daftar tanpa menggunakan abjad atau penomeran tapi hanya menggunakan bulletcontoh :<h4 align=“center”> Tujuan Anda</h4><ul>
<li> Mendapatkan Pekerjaan </li><li> Mendapatkan Uang </li><li> Menambah Pengalaman </li>
</ul>Atribut dapat menggunakan atribut type untuk Bullet
List – Definition List
List Definisi istilah dibuat menggunakan tag <dl>. Definisi istilahnya sendiri dibuat menggunakan tag <dt> dan keterangan dari istilah tersebut menggunakan <dd>contoh :<dl>
<dt><b>Borobudur</b></dt><dd>keajaiban dunia</dd>
</dl>
Table
Table termasuk elemen penting dalam pembuatan web. Dibuat dengan menggunakan tag <table> dengan atributnya. Terdapat elemen <tr> atau table rows untuk membuat baris tabel dan <td> atau table data untuk membuat kolom.Contoh :<table border=“1”><tr><td>bar 1 kol 1</td>><td>bar 1 kol 2</td></tr>
<tr><td>bar 2 kol 1</td>><td>bar 2 kol 2</td></tr>
</table>
Table – Merge Cell
Atribut rowspan digunakan untuk menggabungkan beberapa baris dan colspan digunakan untuk menggabungkan beberapa kolom. Tag <th> digunakan untuk peletakan header pada kolom.
Table – Merge Cells
contoh :<table border=“1”>
<th> Kolom 1 </th> <th> Kolom 2 </th> <th> Kolom 3 </th>
<tr> <rowspan=“2”> Baris 1 Cell 1 </td>
<td>Baris 1 Cell 2</td><td> Baris 1 Cell 3</td>
<tr><td>Baris 2 Cell 2</td><td> Baris 2 Cell 3</td>
<tr><td colspan=“3”> Baris 3 Cell 1 </td></tr>
</table>
Table – Padding & Spacing
Cellpadding menentukan lebar dari border
Padding mewakili jarak antara border dan isicontoh :<table border=“1” cellspacing=“10” bgcolor=“#00ff00”>
<th>kolom 1</th>
<th>kolom 2</th>
<tr><td>Bar 1 Kol 1</td> ><td>Bar 1 Kol 2</td></tr>
<tr><td>Bar 2 Kol 1</td> ><td>Bar 2 Kol 2</td></tr>
</table>
Table – Padding & Spacing
Cellpadding menentukan lebar dari border
Padding mewakili jarak antara border dan isicontoh :<table border=“1” cellpadding=“10” bgcolor=“#00ff00”>
<th>kolom 1</th>
<th>kolom 2</th>
<tr><td>Bar 1 Kol 1</td> ><td>Bar 1 Kol 2</td></tr>
<tr><td>Bar 2 Kol 1</td> ><td>Bar 2 Kol 2</td></tr>
</table>
Background
Background color diatur dengan menggunakan atribut bgcolor khususnya elemen <body>
Contoh penulisan<nama tag bgcolor=“value”>
Background – Name Colored
Terdapat 3 cara mewarnai background, dengan penggunaan RGB, Hex dan Nama Warna generik.
Beberapa warna generikBlack Gray SilverWhiteYellow Lime Aqua
FuchsiaRed Green Blue PurpleMaroon Olive Navy
Teal
Background – Hex Colored
Sistem pewarnaan Hexadecimal termasuk sulit digunakan terutama bagi pemula. Sistem ini memiliki 16 kemungkinan mulai Interval 0 hingga 9 dan Interval A hingga FContoh :<body bgcolor=“#00ff00”>
Form - Field Text I
Pembuatan Field Text memanfaatkan tag<input> yang mempunyai beberapa atribut sebagai berikut :
Type Menentukan jenis field masukan. Nilai yang dapat diberikan adalah text, submit dan password
Name Menentukan nama field sehingga dapat dirujuk nantinya
Size Mengatur lebar field secara horisontal
Maxlength
Menentukan jumlah maksimum huruf yang dapat dimasukkan
Form Field Text II
Contoh :<form method=“post” action=“mailto:[email protected]”>
Nama : <input type=“text” size=“10” maxlength=“40” name=“nama”>
Password: <input type=“password” size=“10” maxlength=“10” name=“password”>
</form>
Form - Tujuan Data
Sebuah Form yang menerima masukan nama dan password, kemudian saat diklik tombol kirim data akan dikirim sebagai inputan kepada file http://www.situs.com/proses.htmlcontoh :<form method=“post” action=“http://www.situs.com/proses.html>
nama : <input type=“text” size=“10” maxlength=“40” name=“nama”><br/>
password : <input type=“text” size=“10” maxlength=“10” name=“password”><br/>
<input type=“submit” name=“kirim” value=“kirim”>
</form>
Form – Radio Button I
Radio Button salah satu elemen yang menarik pada web. Tag <input> harus bernilai radio kemudian mengatur nilai atribut value dan name-nyaValue Menentukan apa yang dikirimjika
pengunjung memilih suatu tombol radio
Name Mendefinisikan nama sekumpulan tombol radio
Form – Radio Button II
<form method=“post” action=“mailto:[email protected]”>
Pilih Baju Yang Anda Sukai ! <br/>
Warna :
<input type=“radio” name=“warna” value=“merah”> Merah
<input type=“radio” name=“warna” value=“biru”> Biru <br/>
Ukuran :
<input type=“radio” name=“ukuran” value=“kecil”> Kecil (S)
<input type=“radio” name=“ukuran” value=“sedang”> Sedang (M) <br/>
<input type=“radio” name=“ukuran” value=“besar”> Besar (L) <br/>
<input type=“submit” value=“email ke ghifarie”>
</form>
Form - Check Box I
Check box menyerupai radio button namun kotak cek ini memungkinkan pemilihan banyak item dalam 1 grup sehingga data yang terkirim lebih dari 1 dari grup yang sama
Form - Check Box II
<form method=“post” action=“mailto:[email protected]”>
Pilih Ukuran Yang Anda Sukai ! <br/>
<input type=“checkbox” name=“ukuran” value=“kecil”> Kecil (S)
<input type=“checkbox” name=“ukuran” value=“sedang”> Sedang (M) <br/>
<input type=“checkbox” name=“ukuran” value=“besar”> Besar (L) <br/>
<input type=“submit” value=“email ke ghifarie”>
</form>
Form – Drop Down I
Daftar menu drop down dapat dibuat menggunakan pasangan tag <select> dan <option>. Tag <select> merupakan pembentuk kelompok daftar pilihan sedangkan <option> menentukan pilihan-pilihan didalam daftar yang dapat dipilih satu atau lebih oleh pengunjung.
Form – Drop Down II
Contoh<form method=“post” action=“mailto:[email protected]>
pendidikan terakhir ?
<select name=“pendidikan>
<option>-pilih salah satu-</option>
<option> Sekolah Dasar</option>
<option>Sekolah Menengah Pertama</option>
<option>Sekolah Menengah Atas</option>
<option>Sarjana (S1)</option>
<option>Magister (S2)</option>
<option>Doktor (S3)</option>
</select>
<input type=“submit” value=“Email kesarah”>
</form>