Membuat Link ke Bagian Dokumen Tertentu

Posted by Nanang Ajim | Posted on 7:54 PM | with No comments
Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk menuju/kembali tertentu dalam dokumen bersangkutan.

Dapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di atas dengan link ke setiap bab . Hal yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol “#”. Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:
<h1 id="heading1">heading 1</h1>

Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh:
<a href="#heading1"> Menuju ke heading 1</a>

Berikut ini contoh bila ada beberapa link internal
<html>
<head> </head>
<body>
<a href="#heading1">Link ke heading 1</a>
<a href="#heading2">Link ke heading 2</a>
<h1 id="heading1">heading 1</h1>
<h1 id="heading2">heading 2</h1>
</body>
</html>
Link Dokumen
Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu : Link ke bagian tertentu dalam dokumen yang sama dan Link ke bagian tertentu dalam dokumen lain
  1. Link ke Bagian Tertentu dalam Dokumen yang sama. Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. Pemberian id tersebut dilakukan dengan cara menuliskan kode berikut : <a id=”tujuanLink”>Teks atau gambar</a>
  2. Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang telah di namai tersebut adalah dengan menuliskan kode seperti berikut : <a href=”#Tujuanlink”>Teks atau gambar</a> Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan berupa file.
  3. Link ke Bagian Tertentu Dalam Dokumen Lain. Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link semacam ini, bagian tertentu dalam dokumen lain tersebut harus di tantai dengan pemberian id seperti pada sub-bab sebelumnya. Perbedaan hanya terletak pada penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu menambahkan id bagian pada tujuan link, seperti berikut: <a href=”namafile#idBagian”>Teks atau gambar</a>.

Contoh Link dalam Satu Dokumen :
<html>
<head>
<title>link>/title>
</head>
<body>
<h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2>
<a id= “atas”></a>
<p> pilih salah satu judul buku berikut untuk melihat deskripsi : </p>
<a href=”#c”> pemrograman C</a><br />
<a href=”#cpp”> pemrograman C++</a><br />
<a href=”#bcb”> pemrogaraman Borland C++Builder</a></p>
<p><a id=”c”><strong>pemrograman C</strong> </a></p>

<p>C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap menjadi bahasa populer dan berwibawa dalam kancah pemrograman. Sejauh ini, C juga telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++, java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portabel, sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada umumnya, C banyak digunakan untuk melakukan interfacing antar perangkat keras (hardwere) agar dapat berkomunikasi satu sama lainnya. <br />
<p><a id=”cpp”><strong>pemrograman C++</strong></a</p>

<p>C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi, embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah bahasa ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di kenal dengan OPP (object oriented programming). (cross platform), C++ juga telah manjadi bagian hidup dari sebagian para pecinta linux.<br />
<p><a id=”bcb”><strong>pemrograman borland C++builder</strong></a></p>

<p>C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas platform microsoft windows. Selain itu, C++builder juga banyak di gunakan sebagai alat untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh para programmer profesional untuk pengembangan aplikasi yang beraneka ragam jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak lagi yang lainnya.<br />
<a href=”#atas”>kembali ke atas</a></p >
</body>
</html>

Hasilnya adalah sebagai berikut.

Latihan membuat ke bagian tertentu dalam satu dokumen


Pilih salah satu judul buku berikut untuk melihat deskripsi :
Pemrograman C
Pemrograman C++
Pemrogaraman Borland C++Builder

Pemrograman C
C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap menjadi bahasa populer dan berwibawa dalam kancah pemrograman. Sejauh ini, C juga telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++, java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portabel, sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat keras (hardwere) agar dapat berkomunikasi satu sama lainnya.

Pemrograman C++
C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi, embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah bahasa ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di kenal dengan OPP (object oriented programming). (cross platform), C++ juga telah manjadi bagian hidup dari sebagian para pecinta linux.

Pemrograman Borland C++builder
C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas platform microsoft windows. Selain itu, C++builder juga banyak di gunakan sebagai alat untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan  dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh para programmer profesional untuk pengembangan aplikasi yang beraneka ragam jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak lagi yang lainnya.
Kembali ke Atas

Kesimpulannya adalah Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya.
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 7:54 PM
Label:
Mungkin Anda menyukai tulisan ini

Cara Menyajikan dan Jenis Jenis Hyperlink Di Web

Posted by Nanang Ajim | Posted on 7:17 PM | with No comments
Hyperlink Text adalah suatu metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau informasi yang tersimpan dalam situs web bersangkutan.

Secara default (normal) link akan ditandai dengan teks berwarna biru yang memiliki garis bawah. Namun, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan kode CSS (Cascading Style Sheets) jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang menunjuk.

A. Mengenal Tag <a> (anchor)
Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML adalah sebagai berikut :

<a href="DokumenLain">Teks Link</a>

Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau halaman mana yang akan dipanggil saat link tersebut di klik atau dipilih oleh pengunjung web. Contoh :
<a href=”http://Mikirbae.com”>Mikirbae</a><br />
<a href=”http://Mikirbae.com/p/blog-page.html”>Hubungi Kami</a><br />
<a href=”http://Mikirbae.com/p/privacy-policy.html”>Privacy Policy</a>

Maka hasilnya adalah sebagai berikut :
Mikirbae
Hubungi Kami
Privacy Policy

Pada contoh diatas adat tiga buah link dengan teks : Mikirbae, Hubungi kami, dan Privacy Policy. Ketika pengunjung melakukan klik terhadap link pertama <a href="http://Mikirbae.com">Mikirbae</a>, web browser akan menampilkan halaman awal blog ini. Begitu juga dengan link kedua (Hubungi Kami) dan ketiga (Privacy Policy),

Beberapa hal yang perlu diperhatikan dalam pemberian nama dokumen web, agar link dapat berfungsi dengan baik antara lain penamaan file dengan huruf kecil semua dan jangan ada spasi serta hindari non-karakter alphabet.

B. Jenis – Jenis Link dalam HTML
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja.

1. Link Absolut
Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita dapat membuat link ke situs web lain yang memiliki tema yang sama atau relevan. 

Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita. Contoh : <a href=http://www.w3.org/>W3</a> Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org/.

2. Link Relatif
Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya (jika ada). Perhatikan contoh kode berikut :
<a href=”kontak.html”>Kontak</a>
<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler Sahara</a>

Tidak perlu menulis alamat secara lengkap karena server web akan mencari file kontak.html dan sahara.jpg di computer yang sama. jika halaman utama dari situs web yang akan kita buat adalah index. html, maka file kontak. html harus di tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan, struktur di rektori dan file-nya akan tampak sebagai berikut :
Struktur Direktori
3. Menjadikan Gambar sebagai Link
Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link dengan tag <img>. Link yang berupa teks: <a href=”dokumenlain”>teks link</a>

Contoh Link Gambar :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmQLqgdBsDuPKiSiqIKpLWAlhQK55SnJRrwfzxsiwLyHt_x3-zdqlAN4AHDV99TbZsovpxloJi1-nwGOQA2MlyEadzRV1c-2RZtylMhj0bBvTB8eQ4Gj7_1ePZyMhykaSjhQdic_NKjXRl/s1600/wrangler.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6_GjviC9RUVzlr5FwwDy3vDa4Ghz-tR6jD1jfii7QDeGA1FiXCs6YkZt8SHmUdbkAV881aNDEpnP1HpiMTbigbpzg0ArWLxTWA2KIdFTQw9hj1v1SnimTheQVL2k8d4Wj6RzcbuF-rtcX/s1600/wrangler1.jpg" /></a>

Latihan Membuat Link Berupa gambar

Klik gambar dibawah ini untuk melihat informasi detail:



Link yang berupa gambar: <a href=”dokumenlain”><img src=”NamaFileGambar” /></a> Contoh : <a href=”detail-sahara.html”><img src=”images/jeep/saharal.jpg” /></a>

Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detailsahara.html.

Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 7:17 PM
Label:
Mungkin Anda menyukai tulisan ini

Format Tampilan Gambar dengan Map

Posted by Nanang Ajim | Posted on 5:00 PM | with No comments
Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.

<IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">

Format gambar yang ditambahkan dalam dokumen HTML, diantaranya dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag <img> yang sering digunakan diantaranya src, align, width, height, alt dan penulisan skrip secara umum adalah sebagai berikut :

<IMG SRC = ”directori gambar / nama gambar” atribute=”nilai atribut”>

Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.

A. Format Penulisan Gambar Map
Penulisan skript secara umum adalah sebagai berikut :
<map name =”nama map”>
<area shape = ”type” coords=”value” href=”link”>
</map>
Keterangan :
  1. Nama map adalah nama dari map yang nantinya akan dipanggil oleh <imageusemap>
  2. Area shape adalah jenis shape yang digunakan untuk menggambarkan area dari gambar map. Adapun jenis shape map yan dapat digunakan adalah  Default (semua area image), Rect (area kotak tertentu), Poly (area poligon), dan Circle (area lingkaran tertentu).

Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini
Tipe Shape Keterangan
Rect left-x, top-y, right-x, bottom-y
Circle center-x, center-y, radius
Poly x1, y1, x2, y2, ...xn, yn.

Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag menggunakan atribut shape.
<html>
<body>
<p>Klik gambar matahari atau salah satu planet yang
terlihat lebih detail</p>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury"
href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm">
</map>
</body>
</html>
Gambar dengan Map
Pada kode program untuk menampilkan gambar dengan map.
Program Keterangan
<img src="planets.gif"> Menampilkan gambar “planets.gif”
<map name="planetmap"> memberi nama map=planetmap untuk kemudian planetmap
tersebut dipanggil oleh tag<img usemap=”#planetmap”>
untuk ditampilkan pada halaman web sebagai gambar map
<area shape="rect" coords="0,0,82,126" Penentuan area map dan koordinat area

Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang tidak berlaku pada HTML 5. Berikut adalah daftar atribut yang berhubungan dengan gambar map
Atribut Nilai Keterangan
alt Berupa teks, misal Alt=”planet” Aternatif teks tertentu untuk menunjukan href
coords Titik koordinat
coords="0,0,82,126"		 Berisi nilai koordinat dari shape/bentuk area yang ditentukan
download Nama file Hyperlink dari target untuk download. Ini baru di HTML 5
href URL Target hyperlink untuk area
hreflang language_code Bahasa tertentu dari target URL. Ini baru di HTML 5
media media query Media/perangkat tertentu untuk target URL. Baru di
HTML 5
nohref value Tidak didukung dalam HTML5
rel alternate, author,bookmark
help, license, next, nofollow
noreferrer, prefetch, prev
search, tag		 Baru di HTML 5. Hubungan tertentu antara dokumen
yang sedang aktif dengan target URL
shape default, rect, circle, poly Shape/bentuk yang digunakan sebagai area
target _blank, _parent, _self
_top, framename		 Target URl
type MIME_type Tipe MIME sebagai target URL. Baru di HTML 5
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 5:00 PM
Label:
Mungkin Anda menyukai tulisan ini

Format Tampilan Video dan Animasi

Posted by Nanang Ajim | Posted on 3:22 PM | with No comments
Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.

A. MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.
Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

B, Menyajikan File Video pada Tampilan Web
File video seperti mp4 dapat dimainkan pada halaman web melalui tag<video></video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut adalah format lengkap untuk memainkan video ke dalam aplikasi web</video>.
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="mobil.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>

Atribut Height dan Width dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video. Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.
Atribut Sintaks Keterangan
autoplay <audio autoplay="autoplay"> Memulai secara otomatis video
controls <video controls = "controls" >
Atau juga bisa ditulis
<video controls>		 Menampilkan tombol kontrol video
height <video height="240"> Mengatur tinggi frame video
width <video width="320"> Mengatur lebar frame video
loop <video loop=”loop”> Memutar video secara berulang-ulang
muted <video muted=”muted”> mematikan fungsi suara pada video
poster <video poster="anak.gif"> Memunculkan poster/gambar pada saat video buffer
atau diunduh.
preload <video preload="preload"> Memuat ulang video
src <source src="bola.mp4"
type="video/mp4">		 Memberikan link video

Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif diletakan dalam folder yang sama dengan file html nya.</video>.

Source atau src digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut.


C. Menyajikan Animasi Pada Tampilan Web
File animasi juga dapat ditampilkan pada halaman web dengan cara diembed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain sebagainya. Perintah yang digunakan adalah <embed src="siboy.swf"> Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="siboy.swf">
<p></p><--file animasi flash siboy.swf--></p>
</body>
</html>

Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat dilihat pada potongan kode berikut dimana file rol_belakang.gif merupakan gambar bergerak (animasi).
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hfIznBPjZ7aClP0uxPknXKbbmv0Rp0VNHIS0gTw-Ml3vlN1BNMjJ3uWlvIxq1vX94MKTGCGu77dq6wf1gEBB8wl8AV2ijNvU8r1_i0XM39wl6U75qeR9EBhGVNwKrwxunPqfXazarwBd/s1600/rol_belakang.gif">
</body>
</html>

Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.
Atribut Nilai Keterangan
height pixels Mendefenisikan ukuran tinggi frame media.
src URL Memberikan sumber media yang dilampirkan
type MIME_type Menspesifikasikan tipe dari MIME
width pixels Mengatur lebar dari frame media pada saat program
dijalankan di browser.
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 3:22 PM
Label:
Mungkin Anda menyukai tulisan ini

Format Tampilan File Audio Pada Web

Posted by Nanang Ajim | Posted on 2:15 PM | with No comments
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio>...</audio>. Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. 

Namun tidak semua tipe file audio tersebut didukung oleh browser. OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome. MP3 merupakan format audio yang didukung oleh Google Chrome dan safari. WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.

A. ME untuk format Audio 
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mFngirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format audio. 2
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

B. Menyajikan Audio dalam Tampilan Web
File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>.Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="house.mp3" type="audio/mp3">
</audio>
</body>
</html>
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.


Atribut yang digunakan pada tag dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :
Atribut Sintaks Keterangan
autoplay <audio autoplay="autoplay"> Memulai audio secara otomatis pada web terbuka
controls <audio controls = "controls" > Menampilkan kontrol seperti volume, audio, dan juga tombol untuk memulai/pause
loop <audio loop="loop"> Mengulang audio kembali setelah pemutaran awal selesai
muted <audio muted =”muted” > Mematikan suara
preload <audio preload="preload"> Memuat ulang audio ketika halaman dimuat ulang
src <audio>source src="/usr/home/damay/house.ogg"</audio> Value dari src adalah file audio tersebut berserta lokasi filenya bisa juga mengarahkan suatu

Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play .
<html>
<head>
<title>cek suara</title>
</head>
<body>
<section style="text-align: center;"><audio controls = "controls" autoplay="autoplay"
loop="loop" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkc05yQllXTUMwbXc/" type="audio/mp3"></source>
Browser kamu tidak mendukung bro
</audio></section>
</body>
</html>

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.





3. Plug-in Audio
Plug-in merupakan sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman HTML menggunakan tag <object> atau tag <embed>..
Tampilan Audio
a. Tag <embed>
Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non- HTML). Adapun potongan kode untuk memainkan file *.mp3 yang embed/tertanam di halaman web adalah.
<!DOCTYPE html>
<html>
<body>
<embed height="50" width="100" src="house.mp3">
<p>Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda
gunakan tidak support dengan format file audionya</p>
<p>atau bisa juga speaker anda sedang off :)</p>
</body>
</html>

b. Tag <object>
Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode program untuk menampilkan file audio.
<!DOCTYPE html> <html> <body> <object height="50" width="100" data="house.ogg"></object> <p>Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda gunakan tidak support dengan format file audionya</p> <p>atau bisa juga speaker anda sedang off :)</p> </body> </html>
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 2:15 PM
Label:
Mungkin Anda menyukai tulisan ini

Menyajikan Format Tampilan Gambar

Posted by Nanang Ajim | Posted on 9:55 PM | with No comments
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Hampir semua web memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik pengunjungnya. Tentunya untuk dapat menampilkan gambar harus memahami teknik untuk menampilkan gambar tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik.

Cara yang dapat dilakukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.

Bentuk umum penggunaan tag <img> adalah : <img src=”namafile”>. Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut. Contoh: <img src= “../image/komputer.jpg”> Atau <img src=http://www.abcde.com/image/kamera.jpg/>. Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ).
  1. GIF adalah singkatan dari Graphics Interface Format.
  2. JPEG, adalah singkatan dari Joint Photographic Expert Group.
  3. PNG (.png ), yang merupakan singkatan dari Portable Network graphics.

A. Menggabung Gambar dan Teks
Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:

1. Secara vertikal:
  • Teks bisa berada sejajar dengan bagian atas gambar
  • Teks bisa berada sejajar dengan bagian tengah gambar
  • Teks bisa berada sejajar dengan bagian bawah gambar

Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.

 2. Secara horisontal:

  • Gambar bisa berada di bagian kiri teks/paragraf
  • Gambar bisa berada di bagian kanan teks/paragraf


Untuk posisi gambar yang dilihat dari arah horisontal ditentuk aribut dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.

B. Memperkecil dan Memperbesar Ukuran Gambar
Gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran asli dari gambar tersebut.

Untuk menentukan ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar. Perhatikan contoh berikut ini.
<img src=”images/komputer.jpg” />

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500 x 375 pixel). Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut, misalnya
<img src=images/komputer.jpg” width=320” height=”230” />
Pengaturan Gambar
Apabila menggunakan blogger pengaturan besar kecil gambar dapt menggunakan small, medium, large, dan x-large. Untuk perataan gambar dapat menggunakan left, center, right seperti pada gambar do atas (gamabr disorot terlebih dahulu, opsi ukuran dan perataan akan muncul otomatis).

C. Penambahan Alt dan Title
Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip (sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor (penujujuk mouse) ke atas gambar.
Penambahan Alt dan Title
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>. <img src=”namafile” title=”keterangan”/>.

Contoh Penempatan Gambar :
<html>
<head>
<title>Gambar</title>
</head>
<body>
<p><h2>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2>
<p>Menampilkan gambar dalam format GIF:</p>
<img src=”images/komputer.gif”/>
</body>
</html>
Hasilnya adalah sebagai berikut.

Latihan Menambahkan Gambar GIF, JPG, dan PNG

Menampilkan gambar dalam format GIF:
Penambahan Alt dan Title/div>
Pada contoh di atas,ditampilkan gambar dengan format GIF. Seperti yang terlihat, format tersebut dapat ditampilkan dengan baik di dalam halaman web. Nilai yang kita isikan untuk atribut SRC di atas mengandung nama direktori images. <img src=”images/komputer.gif”/>.
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 9:55 PM
Label:
Mungkin Anda menyukai tulisan ini

Menyajikan Halaman Web dengan Tabel

Posted by Nanang Ajim | Posted on 9:02 PM | with No comments
Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif.

Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis. Anatomi halaman web secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, dan white space.
  1. Containing Block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
  2. Logo. adalah identitas perusahaan, organisasi, pemilik situs.
  3. Navigation atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
  4. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
  5. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
  6. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.

A.Layout Halaman Web
Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain yang baik akan membuat pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content). Desain halaman web tidak mengganggu kejelasan bagian isi.

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content). Desain layout suatu halaman web meliputi penyusunan:
  1. Pembagian tempat pada halaman
  2. Pengaturan jarak sepasi
  3. Pengelompokan teks dan grafik
  4. -Penekanan pada suatu bagian tertentu

Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah
Layout Web
  1. Top Index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada dibagian atas dari halaman web, contohnya adalah tampilan dari www.google.com
  2. Bottom Index biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada tampilan halaman web education and training
  3. Left Index digunakan untuk layar dengan resolusi yang lebar sehingga mudah. Dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada dibagian kiri dari halaman web.
  4. Layout Split merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,
  5. Alternating Index digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web.

Desain Halaman Web dengan Konsep Tabel
1. Top Index
Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form action="" id="form1" method="post" name="form1">
<table align="center" border="1" style="height: 242px; width: 100%;"><tbody>
<tr> <td align="center" bgcolor="#FFFF00" bordercolor="#FFFFFF" height="15"><strong>Banner
atau iklan</strong></td> </tr>
<tr> <td align="center" bgcolor="#FFCCCC" height="15"><span style="color: red;">Daftar&nbsp;isi&nbsp;</span>
<span style="color: red;">atau navigasi </span></td> </tr>
<tr> <td align="center" bgcolor="#FF66CC" height="135">
Body atau contents(isi)</td> </tr>
<tr> <td align="center" bgcolor="#CCFF99" height="15"><span style="color: #9966cc;">Info&nbsp;tambahan atau lain-lain </span></td> </tr>
</tbody></table>
</form>
</body>
</html>
Hasilnya adalah sebagai berikut :
Banner
atau iklan
Daftar isi 
atau navigasi

Body atau contents(isi)
Info tambahan atau lain-lain
2. Bottom Index
Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500px" height="242" border="1"
align="center">
<tr><td height="15" align="center" bordercolor="#FFFFFF"
bgcolor="#FFFF00"><strong><font size="+5">Banner
/ Judul</font></strong></td>
</tr>
<tr>
<td height="135" align="center" bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau
contents(isi)</font></p>
<p><font color="#CC0000">Body atau
contents(isi)</font></p>
<p><font color="#FFFF00">Body atau
contents(isi)</font></p>
<p><font color="#990033">Body atau
contents(isi)</font></p></td>
</tr>
<tr>
<td height="15" align="center"
bgcolor="#CCFF99"><font color="#FF0000"><strong><font
size="+2">Daftar
isi atau navigasi </font></strong></font><font
color="#9966CC" size="+2">&nbsp;</font></td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut.
Banner
/ Judul

Body atau contents (isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Daftar
isi atau navigasi  
3. Left Index
Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="247" border="1"
align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top"
bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="340" height="15" align="center"
bgcolor="#FFFF99"><strong><font color="#CCCCCC"
size="+4">Electronic
Shop</font></strong></th>
</tr>
<tr>
<td height="76" align="center" valign="top"
bgcolor="#FFFF99"><p>&nbsp;</p>
<p>Selamat datang di web kami, penjualan produk
online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung saja
pesan dan menjadi langganan kami. </p></td>
</tr>
<tr>
<td height="20" align="center" bgcolor="#FFFF99">
<font size="+2">profilkami.com</font></td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut
Home
Profile
About Us
Blog
Contact Us		 Electronic
Shop

Selamat datang di web kami, penjualan produk
online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung saja
pesan dan menjadi langganan kami.

Profilkami.com
4. Layout Split
Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>left </title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="312" border="1"
align="center">
<tr>
<td width="15%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
<td width="67%" height="15" align="center"
bgcolor="#FFCCFF"><font
size="+3"><strong>Banner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
</tr>
<tr>
<td height="256" align="center"
bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau
contents(isi)</font></p>
<p><font color="#FFFF00">Body atau
contents(isi)</font></p>
<p><font color="#990033">Body atau
contents(isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="15" colspan="3" align="center">Lainlain
</td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut.
Daftar
Isi		 Banner/judul Daftar
Isi
Body atau contents(isi)
Body atau contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Lainlain

5.Alternating Index
Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>alternating</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="338" border="1"
align="center">
<tr>
<td height="148" align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar
isi</strong></font></td>
<td align="center" bgcolor="#FFFFCC"><font
color="#000066" size="+7"><strong><em>Gambar
</em> </strong></font></td>
</tr>
<tr>
<td height="161" align="center"
bgcolor="#FFFF99"><font color="#CC0000"
size="+7"><strong><em>Gambar
</em></strong></font><font
size="+7"><em></em></font></td>
<td align="center" bgcolor="#FF66CC"><font
size="+1"><strong>Teks/daftar
isi</strong></font></td>
</tr>
<tr bgcolor="#996666">
<td height="100" colspan="2" align="center"><font
color="#FFFFFF"><strong><font size="+1">Lainlain</
font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>
Hasilnya adalah sebagai berikut.
Teks/Daftar
isi		 Gambar
Gambar
 		Teks/daftar
isi
Lainlain
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 9:02 PM
Label:
Mungkin Anda menyukai tulisan ini

Menyajikan Pembuatan Tabel Di Web

Posted by Nanang Ajim | Posted on 4:07 PM | with No comments
Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak.

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>. Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data). Struktur elemen table adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan
tag <th> ….. </th>

Atribut Elemen Tabel
  1. Width =panjang(lebar table, pixel atau persen)
  2. Height =panjang (tinggi table, pixel atau persen)
  3. Border =pixel(tebal garis tepi)
  4. Cellspacing =pixel(spasi antar sel)
  5. Cellpadding =pixel(spasi di dalam sel)
  6. Align = left, center, right (perataan table)
  7. Bgcolor =warna(warna latar belakang table)
  8. Colspan = penggabungan kolom
  9. Rowspan = penggabungan baris
Membuat Tabel
Atribut Table Row
  1. Align =[left|center|right] (perataan sebaris sel secara horizontal)
  2. Valign =[top|middle|bottom] (perataaan sebaris sel secara vertical)
  3. Bgcolor =warna(warna latar belakang baris)

Atribut Tabel Data
  1. Align =[left|center|right](perataan horizontal)
  2. Width =[top|middle|bottom](perataan vertical)
  3. Height =pixel(tinggi sel, pixel atau persen)
  4. Bgcolor =warna(warna latar belakang sel)

Berikut contoh tabel dengan rowspan dan colspan :
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>

Maka Hasilnya sebagai berikut :
baris 1 kolom 1 baris 1 kolom 2
baris 2 kolom 1
baris 3 kolom 1 baris 3 kolom 2

Contoh lainnya adalah :
<table border="1"><caption>Daftar Wiraniaga</caption> <tbody>
<tr><th colspan="2" rowspan="2">WIRANIAGA</th><th colspan="3">KOTA</th></tr>
<tr><th>Semarang</th><th>Kudus</th><th>Solo</th></tr>
<tr> </tr>
<tr><th rowspan="2">Jenis Kelamin</th><th>Pria</th><td align="right">30</td><td align="right">20</td><td align="right">30</td></tr>
<tr><th>Wanita</th><td align="right">20</td><td align="right">8</td><td align="right">18</td></tr>
</tbody></table>

Maka hasilnya adalah sebagai berikut.
Daftar Wiranaga
WIRANIAGA KOTA
Semarang Kudus Solo
Jenis Kelamin Pria 30 20 30
Wanita 20 8 18

Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua buah tampilan yang berbeda, sebagaimana dibawah ini ).

Tabel 1
<table border="1"><tbody>
<tr style="text-align: left;" valign="top"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr valign="top"><td>Ali</td><td >25</td></tr>
<tr valign="top"><td >Fahmianto</td><td>27</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut.
Nama Usia
Ali 25
Fahmianto 27

Tabel 2:
<table border="1"><tbody>
<tr style="line-height: 40px; text-align: center;" valign="bottom"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Ali</td><td width="132">25</td></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Fahmianto</td><td width="132">27</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut :
Nama Usia
Ali 25
Fahmianto 27

Menyajikan Tabel dengan Spaning
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :
<table border="1"><tbody>
<tr valign="top"><td width="215">Benua</td><td width="215">Negara</td></tr>
<tr valign="top"><td rowspan="4">ASIA</td><td>Arab Saudi</td></tr>
<tr valign="top"><td>India</td></tr>
<tr><td>Indonesia</td></tr>
<tr><td>Singapura</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura

Tabel menggunakan penggabungan kolom
<table border=1>
<tr valign=top><td width=123>Benua</td><td width=223 colspan=4>Eropa</td></tr>
<tr valign=top><td>Negara</td><td>Belanda</td><td>Italia</td><td>Inggris</td><td>Jerman</td></tr>
</table>
Benua Eropa
Negara Belanda Italia Inggris Jerman
Label:
Read more »
Posted by Nanang_Ajim
Mikirbae.com Updated at: 4:07 PM
Label:
Mungkin Anda menyukai tulisan ini

Menyajikan Hasil Pembuatan List Minimal dan Kombinasi

Posted by Nanang Ajim | Posted on 2:52 PM | with No comments
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.

A. Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu daftar berurutan,  tidak berurutan, dan daftar definisi.

1.  Daftar berurutan (ordered list).
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet tertentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak. Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, misalnya :
Langkah-langkah membuat dokumen HTML :
  1. Jalankan aplikasi Text Editor
  2. Isikan kode HTML ke dalam Text Editor
  3. Simpan file dengan ekstension .htm atau .html
  4. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan hasilnya

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah sebagai berikut :
<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

Maka hasilnya akan seperti di bawah ini.
  1. Urutan Pertama
  2. Urutan Kedua

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst. Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :
  1. A Membuat list dengan penomoran berupa karakter A, B, C, dst
  2. a Membuat list dengan penomoran berupa karakter a, b, c, dst
  3. I Membuat list dengan penomoran berupa karakter I, II, III, dst
  4. i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
Ordered List dan Unordered List
2. Daftar Tidak Berututan (unordered list)
Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).
Contoh :

Daftar buah :
  • Mangga
  • Jambu
  • Semangka
  • Rambutan
  • Jeruk

Pada contoh di atas, kita dapat mengubah/mengacak secara bebas urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.

Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah sebagai berikut :
<ul>
<li>Item satu</li>
<li>Item dua</li>
</ul>

Maka Hasilnya sebagai berikut.
  • Item satu
  • Item dua

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya.. Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
  • Disk Tanda bulatan hitam <ul type=”disk”>
  • Circle Tanda bulatan putih <ul type=”circle”>
  • Square Tanda kotak <ul type=”square”>

     3. Daftar Definisi (definition list)
    Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, misalnya daftar definisi istilah HTML.

    B. Menyajikan Pembuatan List Kombinasi
    Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak berurutan. Untuk membuat daftar diatas pada dokumen HTML maka cukup menggabungkan <ol> dangan <ul>. Perhatikan penggabungan <ol> dengan <ul> berikut ini :
    <ol>
    <li></li>
    <li>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ol>

    Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan ditampilkan secara otomatis menjadi daftar bullet. Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe yang sama dengan daftar berurutan sebelumnya. Contoh :
    <ul>
    <li> </li>
    <ol type=i>
    <li > </li>
    <li> </li>
    </ol>
    <li>
    <ol type=i>
    <li > </li>
    <li> </li>
    </ol>
    </li>
    <li>
    </li>
    </ul>
    Contoh :
    Tipe-tipe Tulisan Sandi
    1. Sandi Abjad/Sandi Balik
    2. Sandi Koordinat
    3. Sandi Angka
    4. Sandi Napoleon
    5. Sandi Morse
    1. Sandi Rumput
    2. Sandi Bangun (Bentuk)
    3. Sandi Kimia
    4. Sandi Morse
    5. Sandi Semahore
    1. Sandi Jam
    2. Sandi Nomor
    3. Sandi Geser
    4. Sandi Naik Turun Tingkat

    Contoh yang lainnya adalah :
    1. Landasan Hukum/Legal Operasional
    2. Aspek Institusional
    3. Aspek teknis dan Teknologi
    1. Tempat Penampungan Sementara (TPS)
    2. Tempat Pemrosesan AKhir (TPA)
    1. Peran serta Masyarakat dan Jender dalam Pengelolaan sampah
    2. Permasalahan dalam pengelolaan Sampah
    (Maaf contoh gagal, karena pengaturan ol dan ul dalam template)

    Memulai Dengan Nomor Tertentu
    Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada elemen tag <ol>. Misalnya contoh berikut :
    <ol start="17">
    <li>Blok huruf dengan text tool</li>
    <li>Klik tab karakter</li>
    <li>Pilih jenis huruf pada menu pop-up .</li>
    </ol>

    Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.
    1. Blok huruf dengan text tool
    2. Klik tab karakter
    3. Pilih jenis huruf pada menu pop-up .

    Demikian juga apabila :
    <ol type=”A” start="17">
    <li>Blok huruf dengan text tool</li>
    <li>Klik tab karakter</li>
    <li>Pilih jenis huruf pada menu pop-up .</li>
    </ol>
      Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S. Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.
      Label:
      Read more »
      Posted by Nanang_Ajim
      Mikirbae.com Updated at: 2:52 PM
      Label:
      Mungkin Anda menyukai tulisan ini

      Pemformatan Teks dan Paragraf Web

      Posted by Nanang Ajim | Posted on 10:57 PM | with No comments
      Pemformatan adalah penambahan sentuhan pada teks untuk membuat teks mudah dibaca dan lebih menarik. Pemformatan teks pada halaman web dapat dilakukan dengan berbagai cara. bentuk huruf yang ditampilkan di halaman web. Dalam pemformatan teks dipelajari penggunaan dari beberapa tag yang digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengan keinginan atau agar lebih rapi dan terstruktur. 

      Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.Pada pemformatan teks menggunakan beberapa tag dasar yang mengatur teks. Pada tulisan ini dibahas sedikit mengenai pemformatan teks dan pemformatan paragraf.

      1. Pemformatan Teks
      Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dan lain sebagainya seperti contoh di bawah ini.

      Tag Deskripsi Contoh
      <b> Mendefinisikan teks tebal <b>contoh</b> hasil contoh
      <em> Mendefinisikan teks menekankan <em>contoh</em> hasil contoh
      <i> Mendefinisikan teks miring <i>contoh</i> hasil contoh
      <small> Mendefinisikan teks kecil <small>contoh></small> hasil contoh
      <strong> Mendefinisikan teks penting <strong>contoh</strong> hasil contoh
      <sub> Mendefinisikan teks di bawah garis <sub>contoh</sub> hasil contoh
      <sup> Mendefinisikan teks di atas garis <sup>contoh</sup> hasil contoh
      <ins> Mendefinisikan teks sisipan <ins>contoh</ins> hasil contoh
      <del> Mendefinisikan teks dicoret <del>contoh</del> hasil contoh
      <mark> Mendefinisikan teks ditandai <mark>contoh</mark> hasil contoh

      Tag HTML “keluaran computer”
      Tag Deskripsi
      <code> Mendefinisikan teks code computer
      <kbd> Mendefinisekan teks keyboard
      <samp> Mendefinisikan teks contoh code
      <var> Mendefinisikan teks variable
      <pre> Mendefinisikan teks terformat
      Preformated Text
      HTML Citations, Quotations, and Definition Tags
      Tag Deskripsi
      <abbr> Mendefinisikan sebuah singkatan
      <address> Mendefinisikan alamat atau kontak informasi
      <bdo> Mendefinisikan arah teks
      <blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber lain
      <q> Mendefinisikan sebuah kutipan pendek
      <cite> Mendefinisikan judul karya
      <dfn> Mendefinisikan sebuah istilah definisi

      Contoh Blockquote (pengaturan dalam template)
      Patih Pranggulang menghunus pedangnya. Dengan cepat ia mengayunkan pedang itu ke tubuh Tunjungsekar. tapi, aneh sebeleum menyentuh tubuh Tunjungsekar, pedang itu jatuh ke tanah. Patih Pranggulang memungut pedang itu dan membacokkan lagi ke tubuh Tunjungsekar. Tiga kali Patih Pranggulang melakukan hal itu, Akan tetapi, semuanya gagal.

      2. Pemformatan Paragraf
      Paragraf atau alinea merupakan sekumpulan kalimat yang saling berkaitan antara kalimat yang satu dengan kalimat yang lain. Agar tampilan paragraf dalam halaman web terlihat rapi dapat menggunakan pemformatan sebagai berikut.
      1. Untuk mengelompokan teks dalam suatu paragraf gunakan tag paragraf <p>teks</p>
      2. Untuk mengatur perataan suatu paragraf gunakan tag paragraf dengan fungsi align left <p align="left">untuk rata kiri</p>, align right <p align="right">untuk rata kanan</p>, align center <p align="center">untuk rata tengah<p>, dan align justify <p align="justify">untuk rata kiri kanan</p>
      3. Text-indent digunakan untuk memberikan indentifikasi ke dalam terhadap teks. Nilai negatif tidak diperbolehkan. Pada contoh di bawah menggunakan text-indent sebesar 25px.

      Contoh :
      1. Rata Tengah
      Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.

      2. Rata Kiri
      Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.

      3. Rata kanan
      Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.

      4. Rata Kiri dan Kanan
      Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.

      5. Text Indent
      Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
      Label:
      Read more »
      Posted by Nanang_Ajim
      Mikirbae.com Updated at: 10:57 PM
      Label:
      Mungkin Anda menyukai tulisan ini

      Struktur Dasar Dokumen HTML

      Posted by Nanang Ajim | Posted on 9:27 PM | with No comments
      HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut.

      Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah. Setiap dokumen HTML memiliki struktur. dasar atau susunan file sebagai berikut :
      <html>
      <head>
      <title>Judul Halaman</title>
      </head>
      <body>
      Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.
      </body>
      </html>

      Struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.
      Struktur Dasar HTML
      Bagian yang diapit oleh tag head merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser.

      Bagian kedua, yang diapit ole tag body merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya

      A. Pengaturan Properti Dokumen
      Properti document diatur melalui atribut-atribut yang terdapat dalam elemen

      Kode Warna
      Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :
      Color Hexadecimal Color Hexadecimal
      White #FFFFFF Black #000000
      Red #FF0000 Green #00FF00
      Blue #0000FF Magenta #FF00FF
      Cyan #00FFFF Yellow #FFFF00
      Aquamarine #70DB93 Chocolate #5C3317
      Violet #9F5F9F Brass #B5A642
      Cooper #B87333 Pink #FF6EC7

      2. Atribut Elemen <body>
      • BACKGROUND = Latar belakang dokumen 
      • BGCOLOR = Warna (warna latar belakang dokumen, default putih)
      • TEXT = Warna (warna teks dokumen, default hitam)
      • LINK = Warna (warna link dokumen, default biru)
      • VLINK = Warna (warna visited link dokumen, default ungu)
      • ALINK = Warna (warna aktif link dokumen, default merah)

      Mikirbae.com Ini adalah contoh link

      3. Elemen Heading <h1>… <h6>
      Tag heading berfungsi untuk memformat heading (judul dan subjudul) dari suatu halam web. Heading ini akan memperbesar ukuran huruf unruk setiap jenis heading. Ada 7 buah heading yang dikenal di
      HTML, yaitu dari <h1> sampai <h6>.
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>

      Hasilnya adalah sebagai berikut :

      This is heading 1

      This is heading 2

      This is heading 3

      This is heading 4

      This is heading 5
      This is heading 6
      4.Dokumen HTML5
      Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor ataupun HTML Editor :
      <! DOCTYPE HTML>
      <html>
      <head>
      <title>Tes HTML5</title>
      </head>
      <body>
      Selamat belajar HTML5
      </body>
      </html>

      Berikut ini penjelasan dari dokumen HTML5 di atas :
      1. Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
      2. Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen dalam dokumen html.
      3. Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.
      4. Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang diharuskan untuk ditulis.
      5. Pasangan <html>..</html> menyatakan awal dokumen HTML.
      6. Di dalam <html>..</html> terdapat pasangan <head>..</head> dan <body>..</body>.
      7. Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa pasangan <tittle>..</tittle>.
      8. Pasangan <body>..</body> menyatakan bagian tubuh dokumen.
      Label:
      Read more »
      Posted by Nanang_Ajim
      Mikirbae.com Updated at: 9:27 PM
      Label:
      Mungkin Anda menyukai tulisan ini