tag

TAG

Mengenal Tag dan Studi Kasus

TAG


HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


Heading

Atribut

Paragraf

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


Line Break

Pre

Horisontal Rules

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


Size

Color

Face

Bacefont

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


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


Tinggi dan LebarAlignment Gambar

Thumbnail

Gif dan Jpeg

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


Order List

Unordered List

Definition List

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


Merge CellPadding & Spacing

TAG

HTML

Format Doc

Font

Link & Anchor

Gambar

List

Tabel

background

Form

Frame

Case I


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


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>

http://www.trunojoyo.ac.id/

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>


</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>



</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>

http://www.situs.com/proses.html

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>

tag

Documents