Thursday, July 31, 2003

? blog-tech ?

Prolog: Awalnya tulisan ini mau kuberi judul Reply to Astrid ;) Tapi berhubung permasalahan seperti ini kemungkinan dialami oleh bukan hanya Astrid, jadi kuganti menjadi blog-tech alias Teknik nge-Blog... hehehe. Lagipula kan jadi lebih umum dan tidak memojokkan (apalagi membuat cemburu) seseorang. Yaaa, sekalian menyalurkan hobi dan mengasah keahlian yang belum dikomersilkan :D Hmm, mungkin kalo yang mbaca udah jago HTML mah bakal berkomentar "Waaah, cemen bener tulisan model gini... Nggak level... Sekarang kan jamannya FrontPage, Flash, Perl, de-el-el :P" Tapi setidaknya (mungkin) bisa ngebantu orang-orang yang membutuhkan keahlian dasar. Juga diperuntukan bagi mereka yang masih menghargai keahlian alami (natural skill) dan bukan sekedar instant skill yang bisa didapatkan dengan sekedar menggunakan hi-tech dan software berteknologi terkini. Oh iya, untuk para pengunjung tempatku, salam kompak selalu :)

Yang harus diperhatikan saat membaca tutorial ini

:: teks berwarna merah adalah kode HTML yang bisa langsung digunakan ::
:: gunakan teks editor, NotePad atau semacamnya untuk membedah halaman HTML ::
:: bukalah hati dan pikiran anda, singkirkan iri dan dengki ::
:: jika ada kritik, saran, dan/atau komentar maka jangan ragu untuk menyampaikannya ::
:: terima kasih jika anda terkesan ::

tag <img> alias gambar

Menggunakan gambar (image) pada halaman HTML (webpage) yang paling sederhana:

<img src="fotoku.jpg">

Sedangkan menggunakan gambar (image) pada halaman HTML (webpage) yang paling sering digunakan adalah :)

<img src="fotoku.jpg" alt="gambar gagal tampil :(" border=0 height=400 hspace=5 vspace=5 width=300>

Penjelasan seadanya :-/

alt = teks alternatif yang akan tampil jika gambar tidak berhasil ditampilkan.
border = ketebalan bingkai dalam satuan pixel yang mengelilingi gambar.
height = tinggi (dari atas ke bawah) tampilan gambar dalam satuan pixel.
hspace = ukuran jarak di kanan-kiri, antara tepi gambar dengan tepi bingkai.
vspace = ukuran jarak di atas-bawah, antara tepi gambar dengan tepi bingkai.
width = lebar (dari kiri ke kanan) tampilan gambar dalam satuan pixel.

tag <table> alias tabel

Menggunakan (mengendalikan) tabel pada halaman HTML (webpage) mulai dari cara yang paling sederhana sampai dengan yang agak bikin geleng-geleng kepala (saya sendiri) :D

Contoh 1 (mengendalikan sel data pada baris yang sama)

<table width=200 border=1>
<tr>
<td>CELL 1
<td>CELL 2
</tr>
</table>

Dan hasil tampilannya adalah sebagai berikut:

CELL 1

CELL 2

Contoh 2 (mengendalikan sel data pada kolom yang sama)

<table width=200 border=1>
<tr>
<td>CELL 1
</tr>
<tr>
<td>CELL 2
</tr>
</table>

Dan hasil tampilannya adalah sebagai berikut:

CELL 1

CELL 2

Contoh 3 (mengendalikan sel data pada umumnya)

<table width=200 border=1>
<tr>
<td>CELL 1
<td>CELL 2
</tr>
<tr>
<td>CELL 3
<td>CELL 4
</tr>
</table>

Dan hasil tampilannya adalah sebagai berikut:

CELL 1	CELL 2
CELL 3	CELL 4

Contoh 4 (mengendalikan sel data gabungan kolom [merge column])

<table width=200 border=1>
<tr>
<td>CELL 1
<td>CELL 2
</tr>
<tr>
<td colspan=2>CELL 3
</tr>
</table>

Dan hasil tampilannya adalah sebagai berikut:

CELL 1	CELL 2
CELL 3

Contoh 5 (mengendalikan sel data gabungan baris [merge row])

<table width=200 border=1>
<tr>
<td>CELL 1
<td rowspan=2>CELL 2
</tr>
<tr>
<td>CELL 3
</tr>
</table>

Dan hasil tampilannya adalah sebagai berikut:

CELL 1	CELL 2
CELL 3

Naah, adapun atribut (perlengkapan) lainnya yang berhubungan dengan kendali tabel dapat anda temukan pada tutorial HTML lainnya. Oh iya... Neeeh, contoh penerapan tabel yang mungkin agak njelimet dan mungkin membuat sedikit pusing di kepala :P Hmm, hargailah terus informasi! ;)

VISUALISASI DINDING 1

	VISUALISASI DINDING 2

-+ silakan dipelajari +-

published by: Monsieur RaKah @ 31.7.03

Berbagi rasa, berbagi suka, berbagi ide dan pengalaman

.: is this rha-k's webLOG? :.

Previous post: Today Thanks... saatnyacur-hat... :: senyum ::... Tips of Life... Today Thanks... saatnyacurhat... Today Thanks... saatnyacurhat... Today Thanks... saatnyacurhat...