tag:blogger.com,1999:blog-74040255849030106092024-03-05T23:14:02.313-08:00News!!Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-7404025584903010609.post-29831385465629081142022-10-02T01:00:00.001-07:002022-10-02T04:17:44.059-07:00PRAJURIT KODAM V/BRAWIJAYA MENGIKUTI KEJURNAS MENEMBAK HAORNAS 2022 DI LAPANGAN TEMBAK PERBAKIN SENAYAN JAKARTA<p><br /></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJzeKFrIQ6fLWeN3afUC-s79flW8RICMyvro11xoDP3lDcWwgaoiMh08p7pnswlWdHC_pAociv0eIFhPjmae2lk0CvgoBIshRvpugtdHqurgP-m_12LL7TLTRXbCXCCaHSTUYm_lPLtixNQSYQqVgdz8HQcZYl9laWztcjSyhkNXUkGRGdPqFtg/s1600/WhatsApp%20Image%202022-10-01%20at%2021.30.05.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJzeKFrIQ6fLWeN3afUC-s79flW8RICMyvro11xoDP3lDcWwgaoiMh08p7pnswlWdHC_pAociv0eIFhPjmae2lk0CvgoBIshRvpugtdHqurgP-m_12LL7TLTRXbCXCCaHSTUYm_lPLtixNQSYQqVgdz8HQcZYl9laWztcjSyhkNXUkGRGdPqFtg/w400-h300/WhatsApp%20Image%202022-10-01%20at%2021.30.05.jpeg" width="400" /></a></div><div style="text-align: justify;">Para prajurit di Jajaran Kodam V/Brawijaya mempunyai berbagai keterampilan dan kemampuan di berbagai bidang olahraga, baik itu oraum maupun oramil. Salah satu olahraga umum yang diikuti oleh prajurit Kodam V/Brw ini dibawah naungan KONI Propinsi Jatim yakni PERBAKIN ( Persatuan Menembak Indonesia ).</div><p></p><p style="text-align: justify;">Tidak diragukan lagi kemampuan mereka para prajurit perwakilan dari berbagai satuan di jajaran Kodam V/Brw ini sangatlah membanggakan, torehan prestasi demi prestasi kejuaraan mereka di level daerah, nasional maupun internasional mereka sumbangkan untuk mengharumkan nama Propinsi, Kodam dan Satuan mereka masing-masing baik itu ajang PON, Sea Games, Asian Games dan lain sebagainya. Keberadaan mereka saat ini ada yang sedang melaksanakan pelatihan terpusat di Lapangan Tembak Senayan Jakarta di bawah kepemimpinan Ketua PB Perbakin Pusat Letjen TNI (Purn) Jony Supriyanto dan ditangani para pelatih menembak asing dari negara Iran, Korea Selatan, India dan Ukraina. Dalam waktu dekat mereka juga akan melakukan Training Camp di Korea Selatan untuk meningkatkan kemajuan prestasinya.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Disamping ada yang latihan terpusat, mereka juga melaksanakan latihan secara mandiri di satuan masing-masing dan Lapangan Tembak Perbakin Kodam V/Brw di Surabaya.</p><p style="text-align: justify;">Kejuaraan saat ini yang sedang mereka ikuti adalah Kejuaraan Nasional Menembak HAORNAS 2022 sebagai ajang kualifikasi MQS ( Minimum Qualification Score ) PON 2024 Aceh - Sumut, pelaksanaan perlombaan saat ini di Lapangan Tembak Senayan Jakarta yang berlangsung dari tanggal 25 September - 3 Oktober 2022 yang diikuti oleh kontingen menembak dari beberapa Propinsi di Indonesia.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Para atlet menembak dari jajaran Kodam V/Brw dibawah naungan Pengprov Perbakin Jatim yang ikut mewakili dalam kejuaraan Nasional Menembak HAORNAS 2022 diantaranya ada Letda Inf Supriyono dari Rindam V/Brw ( Atlet 50 meter Pistol dan 10 meter Air Pistol ), Pelda Arianto dari Kodim Pacitan ( Atlet 10 meter Air Rifle Match ), Serma Sugeng Widodo Ba Kodam V/Brw ( Atlet Shotgun ), Sertu Deka Diko Anugrah dari Yonkav 3 Tank ( Atlet 25 meter Rapid Fire Pistol ), Serda M. Hasan Busri dari Kodim Sampang ( Atlet 50 meter Rifle 3 Posisi dan 10 meter Air Rifle Match ), Pratu Aris Febrianto dari Yonzipur 5/ABW ( Atlet 25 meter Rapid Fire Pistol dan 10 meter Air Pistol ). </p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Pada kejuaraan ini mereka sudah ada yang menyumbangkan medali untuk kontingen Jawa Timur diantaranya di kelas 10 meter Air Pistol Putra Team yakni Letda Inf Supriyono dan Pratu Aris Febrianto menyumbangkan Medali Emas Team, di kelas 50 meter Rifle 3 Posisi Serda M. Hasan Busri menyumbangkan Medali Perak Mix Team dan di kelas 25 meter Rapid Fire Pistol Pratu Aris Febrianto menambah Medali Perak Individu serta Sertu Deka Diko Anugrah meraih Medali Perunggu Individu.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Kejuaraan Nasional ini juga sebagai ajang para atlet untuk bisa lolos kualifikasi MQS sebagai syarat wajib mengikuti PON yang akan datang.. </p><p style="text-align: justify;">Berkat kerja keras mereka dan kekompakan team serta kedisiplinan yang diterapkan oleh pelatih, para atlet yang memperkuat Pengprov Perbakin Jatim berhasil lolos semua untuk meraih MQS PON tersebut.</p>Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0Jl. Semarang No.5, Sumbersari, Kec. Lowokwaru, Kota Malang, Jawa Timur 65145, Indonesia-7.9638332 112.6172709-9.0507713980567459 111.5186380875 -6.8768950019432538 113.7159037125tag:blogger.com,1999:blog-7404025584903010609.post-85515689808261493962016-10-04T20:22:00.001-07:002016-10-04T20:22:34.805-07:00Menyajikan dan Memahami Jenis- jenis Hyperlink<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b> 1) Anatomi hyperlink</b></span><br />
<br />
<div style="text-align: justify;">
Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling terkait dengan dokumen lain. Link (sebutan singkat dari 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.</div>
<div style="text-align: justify;">
Dalam keadaan default (normal), suatu link akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Meskipun demikian, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan kode CSS.jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang menunjuk, seperti yang ditunjukkan oleh gambar di bawah ini.</div>
<div style="text-align: justify;">
Contoh link</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRX2SdWLXBzJIxyG63_F9qbgNDkvM_y8kWaPhzmgEqb1i1ZEAdRhPDOHihyphenhyphenDgABemCr1Ur79DIkP39ZVNoXwMocUqaEilj64dXFutbSp1xhLg_KynXZ_N_YAy-JdRJe2cayC39QU_AA/s1600/1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRX2SdWLXBzJIxyG63_F9qbgNDkvM_y8kWaPhzmgEqb1i1ZEAdRhPDOHihyphenhyphenDgABemCr1Ur79DIkP39ZVNoXwMocUqaEilj64dXFutbSp1xhLg_KynXZ_N_YAy-JdRJe2cayC39QU_AA/s1600/1.JPG" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQ7OVwVt6OFp2lOctOeZGaGB3Z6pONkff_VcIiLc55rsf07-wmIWZwdCNJ74CQD5IlVtvIMaNgJQLh3OSav8z681qncDGcUCODAhJ8g_6ig1eTONfsetQtOQQLSQR561L2Ry_WHJ_Yg/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQ7OVwVt6OFp2lOctOeZGaGB3Z6pONkff_VcIiLc55rsf07-wmIWZwdCNJ74CQD5IlVtvIMaNgJQLh3OSav8z681qncDGcUCODAhJ8g_6ig1eTONfsetQtOQQLSQR561L2Ry_WHJ_Yg/s320/2.JPG" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
Gambar Konsep atau cara kerja link dalam HTML</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pada gambar diatas, masing-masing halaman memiliki keterkaitan satu sama lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau ditampilkan dari halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas memiliki link.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b> Mengenal Tag <a> (anchor)</b></div>
<div style="text-align: justify;">
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 :</div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href="DokumenLain">Teks Link</a></span></span></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
Contoh :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikd_uKeOTPO81d7pVLXGW5_qHxvkyD0eLAFu-vIkBkyJm1xLUqKtcOthyphenhyphenCGKjpdpNBz1EPuOH9aNmbZokpTeMQJYK-CWlJUPsWGn3w0kp4alfD4wPmOi9JQBd7_pZZT3qv4HEqn_J63A/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikd_uKeOTPO81d7pVLXGW5_qHxvkyD0eLAFu-vIkBkyJm1xLUqKtcOthyphenhyphenCGKjpdpNBz1EPuOH9aNmbZokpTeMQJYK-CWlJUPsWGn3w0kp4alfD4wPmOi9JQBd7_pZZT3qv4HEqn_J63A/s400/3.JPG" width="400" /></a></div>
<div style="text-align: justify;">
Pada contoh diatas kita membuat tiga buah link dengan teks : Home, Tentang kami, dan kontak. Ketika pengunjung melakukan klik terhadap link pertama (home), web browser akan menampilkan dokumen yang disimpan dalam file index.html. Begitu juga dengan link kedua (Tentang Kami) dan ketiga (Kontak), setiap di klik akan menjadikan web browser menampilkan dokumen yang terdapat pada file about.html dan contact.html.</div>
<div style="text-align: justify;">
Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama dokumen web, agar link dapat berfungsi dengan baik :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Penamaan file dengan huruf kecil semua</li>
<li>Jangan ada spasi serta hindari non-karakter alphabet</li>
</ul>
<br />
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>2) Jenis-jenis Link dalam HTML</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Link absolut</li>
<li>Link relatif</li>
<li>Link ke bagian dokumen tertentu</li>
</ul>
<br />
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Link Absolut</b></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
Contoh : </div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href=http://www.w3.org/>W3</a></span></span></div>
<div style="text-align: justify;">
Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org/</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Link Relatif</b></div>
<div style="text-align: justify;">
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).</div>
<div style="text-align: justify;">
Perhatikan contoh kode berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SUAKv4tFNYy5VB-mWYw4oAtc0-OaWI0hVEK4IY76AsWDyANOsRPe4UsJBzPSzF_Pd6YUpXuWJXobQFUk2leEkc6xv76iLL1JPTywG-J8GjVy8os7wb2zoASA4iVAxAEJLK0qPa8bmw/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SUAKv4tFNYy5VB-mWYw4oAtc0-OaWI0hVEK4IY76AsWDyANOsRPe4UsJBzPSzF_Pd6YUpXuWJXobQFUk2leEkc6xv76iLL1JPTywG-J8GjVy8os7wb2zoASA4iVAxAEJLK0qPa8bmw/s400/4.JPG" width="400" /></a></div>
Tidak perlu ditulis lengkap seperti berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGu09TUmp7e35ZZFUJVQUTDMGby6cV8NN1JUh9BQzNXWFtMXo2c1lwaEhwLaPF2gz0u6wlMv4R87bYWPMMvrPA2S7tbD0C871lcUZztlYCTeZG4tACy52EmPw5Sn0pgyIQT5vch5uSlA/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGu09TUmp7e35ZZFUJVQUTDMGby6cV8NN1JUh9BQzNXWFtMXo2c1lwaEhwLaPF2gz0u6wlMv4R87bYWPMMvrPA2S7tbD0C871lcUZztlYCTeZG4tACy52EmPw5Sn0pgyIQT5vch5uSlA/s400/5.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kita tidak perlu menulis alamat secara lengkap karena server web akan mencari file kantak.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 :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikppwA5dDogg0NUylul0PDCmhi-4w0M7HGkUwBJ14E1k2B6VpgO1ywnCfh3J8s1jBKjuDY4EEMrIzrYkfvB9Kl_dMjGhoa24VNDczZW0TTK5ONEYJ22YI1fxDflDkIofdyPbe7pluuKQ/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikppwA5dDogg0NUylul0PDCmhi-4w0M7HGkUwBJ14E1k2B6VpgO1ywnCfh3J8s1jBKjuDY4EEMrIzrYkfvB9Kl_dMjGhoa24VNDczZW0TTK5ONEYJ22YI1fxDflDkIofdyPbe7pluuKQ/s400/6.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b> Menjadikan Gambar sebagai Link</b></div>
<div style="text-align: justify;">
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>.</div>
<div style="text-align: justify;">
Link yang berupa teks: </div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href=”dokumenlain”>teks link</a></span></span></div>
<div style="text-align: justify;">
Link yang berupa gambar: </div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href=”dokumenlain”><img src=”NamaFileGambar” /></a></span></span></div>
<div style="text-align: justify;">
Contoh :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdC7zW8tYnSquDBoCBtu-6OaPz5VoJjNL8Z7fGZl_Uix1kCXupFqMIg_oGXKbDuFzXJJKlF7ZjQ9MO5b_4aRcqhB8E06yOWNJvNOVx4xOrIljuDoYGW5yjlFKqrpKM5ZsRS6nkY70l0Q/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdC7zW8tYnSquDBoCBtu-6OaPz5VoJjNL8Z7fGZl_Uix1kCXupFqMIg_oGXKbDuFzXJJKlF7ZjQ9MO5b_4aRcqhB8E06yOWNJvNOVx4xOrIljuDoYGW5yjlFKqrpKM5ZsRS6nkY70l0Q/s400/7.JPG" width="400" /></a></div>
<div style="text-align: justify;">
Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail-sahara.html.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>3) Link ke Bagian Dokumen Tertentu</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di atas dengan link ke setiap bab . Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol “#”.</div>
<div style="text-align: justify;">
Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:</div>
<div style="text-align: justify;">
<span style="color: purple;"><span style="background-color: white;"> </span><span style="background-color: yellow;"><h1 id="heading1">heading 1</h1></span></span></div>
<div style="text-align: justify;">
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: </div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href="#heading1"> Menuju ke heading 1</a></span></span></div>
<div style="text-align: justify;">
Berikut ini contoh bila ada beberapa link internal</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFg4baNh2dNWNhZJtynTPJQ7T6CJWHKTQwPx4xRPNFrka6mWHVQRnfPub0BpdTzD_GoeceT9S0qrLrGDtkpeewUxaBvr759GlICCiTmXBvieG15I0DLvl2KmulbtOTu_OeuFpR8qEIw/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFg4baNh2dNWNhZJtynTPJQ7T6CJWHKTQwPx4xRPNFrka6mWHVQRnfPub0BpdTzD_GoeceT9S0qrLrGDtkpeewUxaBvr759GlICCiTmXBvieG15I0DLvl2KmulbtOTu_OeuFpR8qEIw/s400/8.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1vzCUz4k_dtq2sl5MyQ4AoV7TSdqcKdfjZ68aIDtaIPJO6XJTQphpeESK9zv5DLLIhjcsQZ_QdBU-8LNNHYPg5b0iVRGzPkFkRtS88-1QqUVR0215vIbm0BH2F9RZPrPHtP_n92dDA/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1vzCUz4k_dtq2sl5MyQ4AoV7TSdqcKdfjZ68aIDtaIPJO6XJTQphpeESK9zv5DLLIhjcsQZ_QdBU-8LNNHYPg5b0iVRGzPkFkRtS88-1QqUVR0215vIbm0BH2F9RZPrPHtP_n92dDA/s400/9.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Link ke bagian tertentu dalam dokumen yang sama</li>
<li>Link ke bagian tertentu dalam dokumen lain</li>
</ul>
<br />
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Link ke Bagian Tertentu dalam Dokumen yang sama</b></div>
<div style="text-align: justify;">
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 :</div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a id=”tujuanLink”>Teks atau gambar</a></span></span></div>
<div style="text-align: justify;">
Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang telah di namai tersebut adalah dengan menuliskan kode seperti berikut :</div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href=”#Tujuanlink”>Teks atau gambar</a></span></span></div>
<div style="text-align: justify;">
Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan berupa file.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Link ke Bagian Tertentu Dalam Dokumen Lain</b></div>
<div style="text-align: justify;">
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:</div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><a href=”namafile#idBagian”>Teks atau gambar</a></span></span></div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: purple;"><br /></span></span></div>
<div style="text-align: justify;">
Dari teori diatas dapat dibuat rangkuman materi seperti berikut</div>
<div style="text-align: justify;">
<b> -> </b>Link (sebutan singkat dari hyperlink text) adalah suatu metode yang digunakan dalam HTML </div>
<div style="text-align: justify;">
untuk membuat hubungan antar halaman yang terdapat dalam satu situs web.</div>
<div style="text-align: justify;">
<b> -> </b>Tag untuk membuat link adalah <a href=””>, dimana atribut href=”” berisi URL atau alamat dari </div>
<div style="text-align: justify;">
halaman yang akan dituju.</div>
<div style="text-align: justify;">
<b>-> </b>HTML tag <a> mendefinisikan hyperlink.</div>
<div style="text-align: justify;">
<b>-> </b>Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat diklik untuk </div>
<div style="text-align: justify;">
menuju ke dokumen lain.</div>
<div style="text-align: justify;">
<b>-> </b>Untuk memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan </div>
<div style="text-align: justify;">
kecil.</div>
<div style="text-align: justify;">
<b>-> </b>Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.</div>
<div style="text-align: justify;">
<b> -> </b>Jenis-jenis link dalam HTML, yaitu :</div>
<div style="text-align: justify;">
- Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain</div>
<div style="text-align: justify;">
- Link relative adalah link ke dokumen internal, dan penulisan alamat tujuannya pun tidak perlu </div>
<div style="text-align: justify;">
ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya</div>
<div style="text-align: justify;">
- Link ke bagian dokumen tertentu atau internal link</div>
<div style="text-align: justify;">
<b>-> </b>HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan </div>
<div style="text-align: justify;">
diakses</div>
<div style="text-align: justify;">
<b>-> </b><span style="text-align: left;">Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen </span></div>
<div style="text-align: justify;">
<span style="text-align: left;"> yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang </span></div>
<div style="text-align: justify;">
<span style="text-align: left;"> atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para</span></div>
<div style="text-align: justify;">
pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk menuju / kembali </div>
<div style="text-align: justify;">
tertentu dalam dokumen bersangkutan</div>
<div style="text-align: justify;">
<span style="text-align: left;"><b> -> </b>Caranya adalah memberikan nama atau id pada bagian teks atau gambar tertentu sebagai bagian </span></div>
<div style="text-align: justify;">
<span style="text-align: left;"> yang akan dituju. Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol </span></div>
<div style="text-align: justify;">
<span style="text-align: left;"> “#”. Gunakan tag: <a id= “ tujuanLink”>Teks atau gambar</a></span></div>
<div style="text-align: left;">
<b> -> </b>Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink”>Teks atau gambar</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-68844734018018958312016-09-14T14:22:00.003-07:002016-09-14T14:22:49.158-07:00Format Tampilan Gambar dengan Map<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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 :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHvt0NW63vneM_vm7MgY5YtsciuOea206-XlKoGHNOrdHwW0KZAB2CDMBf19GdDVbj39VMtiT_hO6URLMuytRpHDEUTt1JDOX9dnJqigoWlGf1d7cjYsvvwbg2y7L65mSKiM-DzplLw/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHvt0NW63vneM_vm7MgY5YtsciuOea206-XlKoGHNOrdHwW0KZAB2CDMBf19GdDVbj39VMtiT_hO6URLMuytRpHDEUTt1JDOX9dnJqigoWlGf1d7cjYsvvwbg2y7L65mSKiM-DzplLw/s400/1.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_lAUvxeLAD1vmgK_cEFnEWNDV5iEYtZIXSoapzrvuQfEqUgA4DrIglgDeB8KwE8vqY1g4QdrLdEMattxKp49Gb4zNhswfDF-foA6AHlujAuQiICeaTLXKurfut_hUcf4ZLS5pc_u-w/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_lAUvxeLAD1vmgK_cEFnEWNDV5iEYtZIXSoapzrvuQfEqUgA4DrIglgDeB8KwE8vqY1g4QdrLdEMattxKp49Gb4zNhswfDF-foA6AHlujAuQiICeaTLXKurfut_hUcf4ZLS5pc_u-w/s400/2.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag <map> dan <area>.</div>
<div style="text-align: justify;">
Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftHtevLMuXLtBN_-JO_tWWRO2v0cyTTCQB8NilHT5ZjFm8luS_N_FTYMYBBfJn_TTrCIx_XHmVbwL7DZSDWMEAMhL831q7lTEYTyJHzQokpWWIeonXfhMBeN-kyDy3kEhD27knBuCvg/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftHtevLMuXLtBN_-JO_tWWRO2v0cyTTCQB8NilHT5ZjFm8luS_N_FTYMYBBfJn_TTrCIx_XHmVbwL7DZSDWMEAMhL831q7lTEYTyJHzQokpWWIeonXfhMBeN-kyDy3kEhD27knBuCvg/s200/3.JPG" width="200" /></a></div>
<div style="text-align: center;">
Gambar browser yan mendukung tag <map></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Format penulisan gambar map</span></b></div>
<div style="text-align: justify;">
Penulisan skript secara umum adalah sebagai berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOA2sVql3SUjto1D3YLwqKAXZhXXG1Qc61Znn3-p0wL57QHsD4TZCxIN1863UdjAqruCFlSvzQDS-KltwkQil7VVVd0N9Q3CsBtK7r89mfs7RG1IPwAWEf3dx8I5k6kNgVurzhYERJng/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOA2sVql3SUjto1D3YLwqKAXZhXXG1Qc61Znn3-p0wL57QHsD4TZCxIN1863UdjAqruCFlSvzQDS-KltwkQil7VVVd0N9Q3CsBtK7r89mfs7RG1IPwAWEf3dx8I5k6kNgVurzhYERJng/s400/4.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<b>Keterangan:</b></div>
<div style="text-align: justify;">
<b>Nama map</b> <b>-> </b>nama dari map yang nantinya akan dipanggil oleh <image usemap></div>
<div style="text-align: justify;">
<b>Area shape</b> <b>-> </b>jenis shape yang digunakan untuk menggambarkan area dari gambar map. Adapun </div>
<div style="text-align: justify;">
jenis shape map yang dapat digunakan adalah</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfDEmRdmkgIrVPgMWjxxJ8hzrG2cYARSWExHbiujNTGg28rjhAtdcdrigboL9p6UxADxssveAL2NGGlmmDb89KUZ16fRwhUUdozN0TBZ5kvA63Pu-eSu-GcVp7N8O0nL-SZpu3Sbj-g/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfDEmRdmkgIrVPgMWjxxJ8hzrG2cYARSWExHbiujNTGg28rjhAtdcdrigboL9p6UxADxssveAL2NGGlmmDb89KUZ16fRwhUUdozN0TBZ5kvA63Pu-eSu-GcVp7N8O0nL-SZpu3Sbj-g/s400/5.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhal-ZfgnFePRF2QsaX8X5UFPmbzQ9oKzy6bvmb1FDuMxzAo7xPTzpBjeFztoonuY9N3B_QpsJrVm6osJMJ5cHMhqcLhvSItwk2TIW8vVMm9boGLZk6sd_rsK0lwNKHrs5XuHK82lWkpg/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhal-ZfgnFePRF2QsaX8X5UFPmbzQ9oKzy6bvmb1FDuMxzAo7xPTzpBjeFztoonuY9N3B_QpsJrVm6osJMJ5cHMhqcLhvSItwk2TIW8vVMm9boGLZk6sd_rsK0lwNKHrs5XuHK82lWkpg/s400/6.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag<area> menggunakan atribut shape</div>
<div style="text-align: justify;">
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFszGX-3wJje_lTlhGGAu7U1HYCc4Uf6I-b8AVSatB3jpbc7adC0T9gX48Ds-b5jyr3RJXzWqFuGjpsY2CJLAW0W2km26iwYPRmoKZCSykOAHhueMndZAtTmn0iN-Tau3ng4MOuyfEoA/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFszGX-3wJje_lTlhGGAu7U1HYCc4Uf6I-b8AVSatB3jpbc7adC0T9gX48Ds-b5jyr3RJXzWqFuGjpsY2CJLAW0W2km26iwYPRmoKZCSykOAHhueMndZAtTmn0iN-Tau3ng4MOuyfEoA/s400/7.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pada kode program untuk menampilkan gambar dengan map</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejtmSaBaZNyQlksFWjIBZif5odY-bw66jCfyb8HwuE1-9x8AL01ZniEWrxGkrCBgBKK4Je4gni0fLS5C2Sej3gYHiwxmrr6bYnjNrjJ3slRU7EuIUxSME6MBy8SzDckp2BtBkOwxMIw/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejtmSaBaZNyQlksFWjIBZif5odY-bw66jCfyb8HwuE1-9x8AL01ZniEWrxGkrCBgBKK4Je4gni0fLS5C2Sej3gYHiwxmrr6bYnjNrjJ3slRU7EuIUxSME6MBy8SzDckp2BtBkOwxMIw/s400/8.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila kode program diatas dijalankan maka pada browser akan muncul gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul gambar D yang merupakan gambar detail planet A.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLGw52sDdJWmNOnpXZ7lTLlrQLUb2-IoebmE1rUxdEMJMLoaVdeC1HkGba-vflXshBMNcIPf51TewKisOnTDR4d6fJhLQv6AbMo0wvclMyBue6jBpGzBO-UAl7aqysW4mf8ZRKz3J1w/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLGw52sDdJWmNOnpXZ7lTLlrQLUb2-IoebmE1rUxdEMJMLoaVdeC1HkGba-vflXshBMNcIPf51TewKisOnTDR4d6fJhLQv6AbMo0wvclMyBue6jBpGzBO-UAl7aqysW4mf8ZRKz3J1w/s400/9.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar tampilan gambar dengan map</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LGvUGBbBo1e7ySh9tW68yJOPWxrurhS3PTTi0_q4hKAanT7kOI7zi05E8jCFUTJ-3la5sCLztRpzB9EL28vgo1DD11xn_PvuaWIIGjIuUgVPlbfC-C4ntMwAbzdJ7cM5rCdzr3P1Vg/s1600/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LGvUGBbBo1e7ySh9tW68yJOPWxrurhS3PTTi0_q4hKAanT7kOI7zi05E8jCFUTJ-3la5sCLztRpzB9EL28vgo1DD11xn_PvuaWIIGjIuUgVPlbfC-C4ntMwAbzdJ7cM5rCdzr3P1Vg/s400/10.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhuoiN_zUx2fYJ7pqAHTFUa8gvHsIkbVryrSE96LYiGpBXVwGbOsT20f-WQhSukBT5DMk8fwCPdGBpeXCCpRayXCPDRnP6YH0d8Qr0bMu2Wje39w1IP8TwzvkUbpxzefC9qLdY-_h3A/s1600/11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhuoiN_zUx2fYJ7pqAHTFUa8gvHsIkbVryrSE96LYiGpBXVwGbOsT20f-WQhSukBT5DMk8fwCPdGBpeXCCpRayXCPDRnP6YH0d8Qr0bMu2Wje39w1IP8TwzvkUbpxzefC9qLdY-_h3A/s400/11.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG></li>
<li>Untuk membuat image map, harus menambahkan atribut USEMAP pada tag image. <span style="color: #b45f06;"><IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap"></span></li>
<li>Untuk membuat image map digunakan tag <map> dan <area>.</li>
<li>Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side</li>
<li>Bagian dari tag <map> berisi sejumlah elemen <area></li>
<li>Format penulisan gambar map</li>
</ul>
<b><span style="color: #cc0000;"> <map name =”nama map”></span></b><br />
<div style="text-align: justify;">
<b><span style="color: #cc0000;"> <area shape = ”type” coords=”value” href=”link”></span></b></div>
<div style="text-align: justify;">
<b><span style="color: #cc0000;"> </map></span></b></div>
<div style="text-align: justify;">
</div>
<ul>
<li>Area shape merupakan jenis shape yang digunakan untuk menggambarkan area dari gambar map.</li>
<li>Area shape yang digunakan pada map Default, Rect, Poly, Circle</li>
<li>Atribut yang digunakan pada tag <area> diantaranya alt, coords, download, href, hreflang, <span style="color: blue;"><u>media</u></span>, <u><span style="color: blue;">nohref</span></u>, <u><span style="color: blue;">rel</span></u>, <u><span style="color: blue;">shape</span></u>, target, type</li>
</ul>
<br />
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-43643466721601341012016-09-14T13:44:00.001-07:002016-09-14T13:44:15.395-07:00Format Tampilan Video dan Animasi<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>1) Format tampilan file Video</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnHTWP6pUnMDfiqGk0ccSmMVibTlZ63kZYGtFGp5YT5vD2QeeWmWPLwIelwDkPDVsshg6f80bvgVf5Q6Eu6wWVpi9B3tpzyAeTF4bWeYU2S2RurEDcmhVQmcLOARvPu3tJeIl9jM-ZQ/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnHTWP6pUnMDfiqGk0ccSmMVibTlZ63kZYGtFGp5YT5vD2QeeWmWPLwIelwDkPDVsshg6f80bvgVf5Q6Eu6wWVpi9B3tpzyAeTF4bWeYU2S2RurEDcmhVQmcLOARvPu3tJeIl9jM-ZQ/s400/1.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp4.</div>
<div style="text-align: justify;">
Bila anda hendak menampilkan video pada halaman web sedangkan file video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan menggunakan program gratis atau melalui layanan situs web.</div>
<div style="text-align: justify;">
Contoh program yang dapat mengkonversi format video adalah :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Miro Video Converter dapat diunduh secara gratis atau melalui layanan www.microvideoconverter.com .</li>
<li>FormatFactory <b>-></b> di unduh gratis di http://format-factory.en.softonic.com</li>
<li>http://video.online-convert.com <b>-></b> layanan konversi secara online</li>
</ul>
<br />
<div style="text-align: justify;">
<b>MIME untuk format Video</b></div>
<div style="text-align: justify;">
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 yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0y6_YvVrPod7zaxga6OiSIpNQ7UyOV2mvqd6VRyzc2-dSKzbbBYcjz985RULFIcqaeE59hVDLzBSA0t7RsyYzlwMiO_SvgqxZzA2uvj23UnTkX4gqkRxHXoJuB6jEqy4WHnGaIbTMg/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0y6_YvVrPod7zaxga6OiSIpNQ7UyOV2mvqd6VRyzc2-dSKzbbBYcjz985RULFIcqaeE59hVDLzBSA0t7RsyYzlwMiO_SvgqxZzA2uvj23UnTkX4gqkRxHXoJuB6jEqy4WHnGaIbTMg/s320/2.JPG" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">2) Menyajikan file Video pada tampilan web</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5V_Kst6IFoQwZ_3UK5iGHPl6P4zNHeZ6PpuftCftiXomIAEIy7nLL9XYUPfBvBXYk3Re8-1euDZ-ua5bYKonBLFnfblWL6AE3WBt2beiAXpyYl0yuMGSUJoRdFJbSbBMXLj2xUisMuw/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5V_Kst6IFoQwZ_3UK5iGHPl6P4zNHeZ6PpuftCftiXomIAEIy7nLL9XYUPfBvBXYk3Re8-1euDZ-ua5bYKonBLFnfblWL6AE3WBt2beiAXpyYl0yuMGSUJoRdFJbSbBMXLj2xUisMuw/s400/3.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcYvNQVb917UpCBRQ-A9ltZxvfnWM7-PlyAOivUKnWpPWf1ocB8BER4NAvdEpValmhA1POgBvUo1C-lLxpyOWmMdiW9QLiJGGjt_y2BYd9_Nn1BKmDabRzB8qIvRHNRrN7d2gBRcTNg/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcYvNQVb917UpCBRQ-A9ltZxvfnWM7-PlyAOivUKnWpPWf1ocB8BER4NAvdEpValmhA1POgBvUo1C-lLxpyOWmMdiW9QLiJGGjt_y2BYd9_Nn1BKmDabRzB8qIvRHNRrN7d2gBRcTNg/s400/4.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Atribut <b>Height</b> dan <b>Width</b> dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut <b>Src</b> menentukan file video.</div>
<div style="text-align: justify;">
Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIyx8fjeqv6wVuqp-V6eiz9Esen6myrq2tY9oTfvTXVg6g7CMqpHbc2wc531-ICK28MYt8lOqVkZ2upj_8JTOAIoigKtrab12GMZDuJkn_N7cKj5PyaR44tirrALixJOMrS2W9oZEDg/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIyx8fjeqv6wVuqp-V6eiz9Esen6myrq2tY9oTfvTXVg6g7CMqpHbc2wc531-ICK28MYt8lOqVkZ2upj_8JTOAIoigKtrab12GMZDuJkn_N7cKj5PyaR44tirrALixJOMrS2W9oZEDg/s400/5.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar video pada tampilan web menggunakan browser chrome</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox, video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak mendukung format file *.mp4.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyTFdFLJp9ZYEAeuUzbsK-CD-LkrzsnKTl51QKKi0o6DKwX1jzT5akChGwIWCCDSM78OSpAAHycCVCEv4NyLBoaIlYA6ixUegGR77V_HqJ6fFaOdFS2WfPkOuQ_ADVQIMN2hqCCFOlw/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyTFdFLJp9ZYEAeuUzbsK-CD-LkrzsnKTl51QKKi0o6DKwX1jzT5akChGwIWCCDSM78OSpAAHycCVCEv4NyLBoaIlYA6ixUegGR77V_HqJ6fFaOdFS2WfPkOuQ_ADVQIMN2hqCCFOlw/s400/6.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar video pada tampilan web menggunakan browser mozilla firefox</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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>.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsWuK23KcxaQqfWt_bF4tiE4TR2M3zaNjpq4qLwfGARvwJBr1pO63kDDeeARa17djtTXNsIWWYrUHQ3hHQhkiNwl3PLRTmBlu3qC1reORJixzQ9btx4X0bdsdIjZ0CmGAa57cmB4flg/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsWuK23KcxaQqfWt_bF4tiE4TR2M3zaNjpq4qLwfGARvwJBr1pO63kDDeeARa17djtTXNsIWWYrUHQ3hHQhkiNwl3PLRTmBlu3qC1reORJixzQ9btx4X0bdsdIjZ0CmGAa57cmB4flg/s400/7.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Poster</b></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPwB8RxEST_VeYH-FnRgsZkHLn9DAo1dsYnPnGa_PG9y8bXNNPZh_UKHvmorL29pEgjrEqrHYEc6T3YkGqfqD6exYZzAjzfo-sEcvVTfJIiG8HCDTOoRx9RfSXw1zc1vRokyjR2M-cw/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPwB8RxEST_VeYH-FnRgsZkHLn9DAo1dsYnPnGa_PG9y8bXNNPZh_UKHvmorL29pEgjrEqrHYEc6T3YkGqfqD6exYZzAjzfo-sEcvVTfJIiG8HCDTOoRx9RfSXw1zc1vRokyjR2M-cw/s1600/8.JPG" /></a></div>
<div style="text-align: center;">
Gambar anak.gif gambar yang akan disisipkan sebagai poster</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut adalah potongan kode yang menggunakan atribut poster</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGBxoiwB3le47Q9UTemyHxjKBdlQPBAlByukcMcl8bfXFc6_IRSqRHQ3Z2shsqR1FBc53j8EPYDwRIJyyawy_-E2Uec7UgZ4f_IduoqyjlR9d4ad-oskR_9bGUqVPK71WdGqi1sISKQ/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGBxoiwB3le47Q9UTemyHxjKBdlQPBAlByukcMcl8bfXFc6_IRSqRHQ3Z2shsqR1FBc53j8EPYDwRIJyyawy_-E2Uec7UgZ4f_IduoqyjlR9d4ad-oskR_9bGUqVPK71WdGqi1sISKQ/s400/9.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ketika kode program di atas dijalankan maka akan menghasilka tampilan web seperti berikut ini</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxSzavfhoKFXF2xZXDtQt8lj6xBAs6usg1h6IVPkUQDPwRipYqAUTK7TZKn7Y3F692tkYhxtjR9WknnvkmfNZH2kvLComQb4-qr1CBQqRqybspC8bT68OlNas9zF141uaO80thMa9Rg/s1600/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxSzavfhoKFXF2xZXDtQt8lj6xBAs6usg1h6IVPkUQDPwRipYqAUTK7TZKn7Y3F692tkYhxtjR9WknnvkmfNZH2kvLComQb4-qr1CBQqRqybspC8bT68OlNas9zF141uaO80thMa9Rg/s320/10.JPG" width="320" /></a></div>
<div style="text-align: center;">
Gambar Tampilan video menggunakan atribut poster=”anak.gif”</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>SRC</b></div>
<div style="text-align: justify;">
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 .Dapat dilihat pada potongan kode berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFrNzGAPp_VYmzZxaDl8UfYtBb7uxzwxgsYbt17Tb_paygROTLweEsNSKPE1o-wkutVSzEoG9f8TfiqjMlGSFPTsn3XDkbP7op4j2pWemSMQliZY_6UxzQF-htfAYGX9HtLWULq7R-Q/s1600/11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFrNzGAPp_VYmzZxaDl8UfYtBb7uxzwxgsYbt17Tb_paygROTLweEsNSKPE1o-wkutVSzEoG9f8TfiqjMlGSFPTsn3XDkbP7op4j2pWemSMQliZY_6UxzQF-htfAYGX9HtLWULq7R-Q/s400/11.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>4.) Menyajikan animasi pada tampilan web</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
File animasi juga dapat ditampilkan pada halaman web dengan cara di embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain sebagainya. Perintah yang digunakan adalah</div>
<div style="text-align: justify;">
<embed src="siboy.swf"></div>
<div style="text-align: justify;">
Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFrNzGAPp_VYmzZxaDl8UfYtBb7uxzwxgsYbt17Tb_paygROTLweEsNSKPE1o-wkutVSzEoG9f8TfiqjMlGSFPTsn3XDkbP7op4j2pWemSMQliZY_6UxzQF-htfAYGX9HtLWULq7R-Q/s1600/11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFrNzGAPp_VYmzZxaDl8UfYtBb7uxzwxgsYbt17Tb_paygROTLweEsNSKPE1o-wkutVSzEoG9f8TfiqjMlGSFPTsn3XDkbP7op4j2pWemSMQliZY_6UxzQF-htfAYGX9HtLWULq7R-Q/s400/11.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila kode program diatas dijalankan maka akan muncul file animasi “siboy.swf” pada halaman web.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGs0vsLcNGg9mcXlWvvy4nZb0NL_jzQBXp3PrwPKFdPmSUYJFAXomVFtqViwGPemEBjgM9EG0HS_n6PhTIsjhGCn7gaz5W2SwBy2UKeoehNIMqrQW7Yd0q_9xyRU00TUk-aqmTjVW_ag/s1600/13.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGs0vsLcNGg9mcXlWvvy4nZb0NL_jzQBXp3PrwPKFdPmSUYJFAXomVFtqViwGPemEBjgM9EG0HS_n6PhTIsjhGCn7gaz5W2SwBy2UKeoehNIMqrQW7Yd0q_9xyRU00TUk-aqmTjVW_ag/s320/13.JPG" width="312" /></a></div>
<div style="text-align: center;">
Gambar animasi siboy.swf pada halaman web</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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 rose.gif merupakan gambar bergerak (animasi). jika kalian membutuhkan animasi klik <span id="goog_841274332"></span><a href="http://www.gambaranimasi.org/">disini</a><span id="goog_841274333"></span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_G0HWq9SHhvkVXpYEoV2oUpinlOzNsmjfgt3GSFMusQkRUy5WyEkFtmtcydWOLdg8iaO-uGfdQ1LjPrA7c7Q6AO39kRuTK9Op2DGHYRls_bvmQjy_AGv5ddOHwgIq3Asur5EgTp-kQ/s1600/14.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_G0HWq9SHhvkVXpYEoV2oUpinlOzNsmjfgt3GSFMusQkRUy5WyEkFtmtcydWOLdg8iaO-uGfdQ1LjPrA7c7Q6AO39kRuTK9Op2DGHYRls_bvmQjy_AGv5ddOHwgIq3Asur5EgTp-kQ/s400/14.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Saat kode program diatas dijalankan maka animasi akan muncul dihalama web seperti terlihat pada gambar berikut</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXCq-PIugxt2sxgUQoDuUOL4Srl7gN4e7sXKHmnyQ9w9-Fsji_0OFdaUv0pRpaTuG_-5CUTi82NLLcqPR3ZfKzOm6KkBv1TA-Vg8t1c0EsKipSALBwox-UBJ4tqy4CFRxRDJVlAIRvg/s1600/15.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXCq-PIugxt2sxgUQoDuUOL4Srl7gN4e7sXKHmnyQ9w9-Fsji_0OFdaUv0pRpaTuG_-5CUTi82NLLcqPR3ZfKzOm6KkBv1TA-Vg8t1c0EsKipSALBwox-UBJ4tqy4CFRxRDJVlAIRvg/s400/15.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar animasi rose.gif pada halaman web</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIqt7jiGNt63Q_MCCrTIThGF3Ebx4JV7eLQ-SxT5tn8_fhrDRCOX8vNh2aq0cV9hkpvB_n9XeeRfTG4HnfuXGx4uDZR1nWsK8DKYQUt3_ToMrLDSgA-4vnuEvlVXVYpdycDpUc4E-ew/s1600/16.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIqt7jiGNt63Q_MCCrTIThGF3Ebx4JV7eLQ-SxT5tn8_fhrDRCOX8vNh2aq0cV9hkpvB_n9XeeRfTG4HnfuXGx4uDZR1nWsK8DKYQUt3_ToMrLDSgA-4vnuEvlVXVYpdycDpUc4E-ew/s400/16.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
</div>
<ul>
<li>cara standar untuk menanamkan file audio pada halaman web: elemen <video> </video>.</li>
<li>File-file video yang didukung HTML5 adalah MP4,WebM dan OGG.</li>
<li>Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” ></li>
<li>Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay, controls, height, width, loop, muted,poster, preload, src.</li>
<li>Animasi dapat ditampilkan dalam web dengan menuliskan <embed src="file.swf"></li>
<li>File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web.</li>
</ul>
<br />
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-3115935363960164852016-09-12T10:48:00.002-07:002016-09-12T10:48:12.323-07:00Format Tampilan Audio<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">1.) Format tampilan file audio</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.</div>
<div style="text-align: justify;">
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. Tidak semua tipe file audio tersebut didukung oleh browser.</div>
<div style="text-align: justify;">
</div>
<ul>
<li>OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.</li>
<li>MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.</li>
<li>WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.</li>
</ul>
<br />
<div style="text-align: justify;">
Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVbgn0a6bMrIXLK0r6QxQtvmy4DFcuAId-82dSS42w0-FXfQeAZRSz2TM_8QIyGqtESIXWfi-XPEm-jQIEwOI8F70DFcDcuuAa2bQRs8TQh31MWQHm7ltSEcSmGuG-Ieklh_cNLVHUA/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVbgn0a6bMrIXLK0r6QxQtvmy4DFcuAId-82dSS42w0-FXfQeAZRSz2TM_8QIyGqtESIXWfi-XPEm-jQIEwOI8F70DFcDcuuAa2bQRs8TQh31MWQHm7ltSEcSmGuG-Ieklh_cNLVHUA/s400/1.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN94cwX56IZm3nUE8eYqBagA1EKK2WiamgPmzyAl7Fz8df6d2QVMU7ROwNWGqAvz4JDTuFi4dou-HCLXk5urMyiw5ZEHw0-3GBgx4YU2ogWPF4Y79lqIdWJDGPqRXuJEwPx2gl0m3svg/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN94cwX56IZm3nUE8eYqBagA1EKK2WiamgPmzyAl7Fz8df6d2QVMU7ROwNWGqAvz4JDTuFi4dou-HCLXk5urMyiw5ZEHw0-3GBgx4YU2ogWPF4Y79lqIdWJDGPqRXuJEwPx2gl0m3svg/s400/2.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web yang kita buat, akan </div>
<div style="text-align: justify;">
ada beberapa orang yang tidak bisa memutar hasil embed mp3 di web yan telah kita buat </div>
<div style="text-align: justify;">
tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file </div>
<div style="text-align: justify;">
berekstensi mp3.</div>
<div style="text-align: justify;">
b. MIME untuk format audio</div>
<div style="text-align: justify;">
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim</div>
<div style="text-align: justify;">
berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser</div>
<div style="text-align: justify;">
tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga </div>
<div style="text-align: justify;">
menggunakan MIME. Berikut adalah tipe mime untuk format audio.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE5JsYSocGCvhDlsMt1uaPBBkfJ9QplpcyDAiFjtZKgmpRzjViFs_RacXp4O-7utStmkIIjqztqBjazObw0D9oRUuHmNjHpahZizn-1nKJdGZcqQoNEBnL1dWVbZJ48hUa5Xd100QbTg/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE5JsYSocGCvhDlsMt1uaPBBkfJ9QplpcyDAiFjtZKgmpRzjViFs_RacXp4O-7utStmkIIjqztqBjazObw0D9oRUuHmNjHpahZizn-1nKJdGZcqQoNEBnL1dWVbZJ48hUa5Xd100QbTg/s320/3.JPG" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">2.) Menyajikan audio dalam tampilan web</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>. Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmR0ahR5vj1ZEhKBDXhZrv-PmyJROIjfuY1eZJDELGVF-mFO1HUw-hbWM718pw9JPa3K8svTGWDQ72Uqk-ZaGklx0Fk-tbbGx-6rEyl4-kbfYnujoUQ5VsJGGYIrPIu3TqO7sO8DBlNA/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmR0ahR5vj1ZEhKBDXhZrv-PmyJROIjfuY1eZJDELGVF-mFO1HUw-hbWM718pw9JPa3K8svTGWDQ72Uqk-ZaGklx0Fk-tbbGx-6rEyl4-kbfYnujoUQ5VsJGGYIrPIu3TqO7sO8DBlNA/s400/4.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMGYPeTJW_TaLHU0hYWmugual1FLTHW-hyDdbINy-gyATUr-tQ08lTsKHr_G8GBk8cO2yofh1nyjL4xDP03D67054swZlTKqcEael8DPgf4AUlTm6ZzaCgb9E97BQg2if6UD4n6OvUQ/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMGYPeTJW_TaLHU0hYWmugual1FLTHW-hyDdbINy-gyATUr-tQ08lTsKHr_G8GBk8cO2yofh1nyjL4xDP03D67054swZlTKqcEael8DPgf4AUlTm6ZzaCgb9E97BQg2if6UD4n6OvUQ/s400/5.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "<b>house.mp3</b>" dan "<b>house.ogg</b>".</div>
<div style="text-align: justify;">
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtXIQu1ViDqwPMNs751K9EzW3d-Om-uOwuW5f4_rSjIr5Qmt2o-QJN9TfqS7oTv55HxbQW1atU-4WjhKSuti4XuqOgVMYQA5oBZhIjLknld6GQ4wnWsfTjtpjRZMu3jDk0SkiNIB3nog/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtXIQu1ViDqwPMNs751K9EzW3d-Om-uOwuW5f4_rSjIr5Qmt2o-QJN9TfqS7oTv55HxbQW1atU-4WjhKSuti4XuqOgVMYQA5oBZhIjLknld6GQ4wnWsfTjtpjRZMu3jDk0SkiNIB3nog/s400/6.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar tampilan audio saat dalam web</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUrywLKXR0-hLzmkanb0K5kDmvMrQh512jYkeOBS6j7p9k81VnOYn9aBV5wUZwl_rg123GsOCZtHHtZcL6dugMyV1LEAE9CrVWgAEwq8DMSqPjm4MHPtXaWuzjFfD2Sea7DbCscOG8Q/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUrywLKXR0-hLzmkanb0K5kDmvMrQh512jYkeOBS6j7p9k81VnOYn9aBV5wUZwl_rg123GsOCZtHHtZcL6dugMyV1LEAE9CrVWgAEwq8DMSqPjm4MHPtXaWuzjFfD2Sea7DbCscOG8Q/s400/7.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHRRsqyDVoVSvUS_pXPGG3h1yUWJWqnK2aqr9Rg4-R5yjrCPMT1xbSrN9TuqTH8yBaMvGAv0bbwIwz61QCOUrXGzXRHO-U6mLlSpKW-PF6akzZARJXn6w07vYXailNrx3L0aKYUB5iw/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHRRsqyDVoVSvUS_pXPGG3h1yUWJWqnK2aqr9Rg4-R5yjrCPMT1xbSrN9TuqTH8yBaMvGAv0bbwIwz61QCOUrXGzXRHO-U6mLlSpKW-PF6akzZARJXn6w07vYXailNrx3L0aKYUB5iw/s400/8.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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 .</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4ExS9tiUAaw34cZhWIfKpM9dk92mIHOGClFen_cB4HDppncRaRI6j7PVgpd_Jh2qw7P5dw05fduq8BZ70XqIigE1TKrnd2J1nx8p11BVAS7Zs46H4KHN5Fa69JEgI-XRYvT76CCeSw/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4ExS9tiUAaw34cZhWIfKpM9dk92mIHOGClFen_cB4HDppncRaRI6j7PVgpd_Jh2qw7P5dw05fduq8BZ70XqIigE1TKrnd2J1nx8p11BVAS7Zs46H4KHN5Fa69JEgI-XRYvT76CCeSw/s400/9.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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”.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrqLNhScrKCxzwaK7-U44LYBDMR01ZX-0N1ecvkY69S_D1wUWtf9NlqlA2M9UMZfBTTmVw8z3sCrxW9_lhqZcEabwS6ce03XNXEOeJKQsD3h3oMeZsznVKthPhvjZUNoWXXJiK8PZvg/s1600/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrqLNhScrKCxzwaK7-U44LYBDMR01ZX-0N1ecvkY69S_D1wUWtf9NlqlA2M9UMZfBTTmVw8z3sCrxW9_lhqZcEabwS6ce03XNXEOeJKQsD3h3oMeZsznVKthPhvjZUNoWXXJiK8PZvg/s400/10.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar tampilan audio saat dimainkan dalam web</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">3.) Plug-in audio</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b> Tag <embed></b></div>
<div style="text-align: justify;">
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</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0UdtzS5hRrARSLd9GIwN-T13beEBI0b3aByurBT4G3wprpXL9RF7s8oGYrmco7impXum2V6Iw7m8v1_nZZ4kFXyay2GkpB60-TWPSsXM6aPGs3f9t1DvoWsW3gyBoty6Dw7IlnFppg/s1600/11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0UdtzS5hRrARSLd9GIwN-T13beEBI0b3aByurBT4G3wprpXL9RF7s8oGYrmco7impXum2V6Iw7m8v1_nZZ4kFXyay2GkpB60-TWPSsXM6aPGs3f9t1DvoWsW3gyBoty6Dw7IlnFppg/s400/11.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya karena browser mozilla firefox tidak mendukung file audio *.mp3.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwi5-rGOvIYE7FsTps2U64RZbFFMAnN5WjRgVoy3XmuKpsKVumgbcsVqQa6dUPHbtPPS9KgZti-eNtIutNXtGL12EdPl8aUAeOWGRBQoWjAuNikNi8OMNnHYSKzys5dZw_jfZ1IULgQ/s1600/12.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwi5-rGOvIYE7FsTps2U64RZbFFMAnN5WjRgVoy3XmuKpsKVumgbcsVqQa6dUPHbtPPS9KgZti-eNtIutNXtGL12EdPl8aUAeOWGRBQoWjAuNikNi8OMNnHYSKzys5dZw_jfZ1IULgQ/s400/12.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar tampilan audio dengan tag <embed></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white;"><b>Tag <object></b></span></div>
<div style="text-align: justify;">
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</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-q1wP4v6ZLxTWXvoqXMcviQA1aojh-iyjiX12JmXk7uLP0xNezPQprDhSnIleMVdTjmiUoLqFA0_f8rqIKa4IIeFgIDiYOqsQDIwQWvQaRvf9fw_KAQk6xq-gIB5xg-JI3DXuznVCQ/s1600/13.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-q1wP4v6ZLxTWXvoqXMcviQA1aojh-iyjiX12JmXk7uLP0xNezPQprDhSnIleMVdTjmiUoLqFA0_f8rqIKa4IIeFgIDiYOqsQDIwQWvQaRvf9fw_KAQk6xq-gIB5xg-JI3DXuznVCQ/s400/13.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan terdengar suara dari file "house.ogg"</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNqfBhZRfh8jI9HtQIen74QLPbO7XpJxD3ERFIkPwWAtn0xIoXBxS7Kpa7YKRXBILllCQBRBDvxrV6_cr3tvMq5H_yhkHON9p93jtngwUwu85Gie4luPziXMrjF09nX6i8XbMkim3Cg/s1600/14.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNqfBhZRfh8jI9HtQIen74QLPbO7XpJxD3ERFIkPwWAtn0xIoXBxS7Kpa7YKRXBILllCQBRBDvxrV6_cr3tvMq5H_yhkHON9p93jtngwUwu85Gie4luPziXMrjF09nX6i8XbMkim3Cg/s400/14.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar tampilan audio dengan tag <obyek></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi sebagai berikut :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.</li>
<li>File-file Audio yang didukung HTML5 adalah MP3,WAV dan OGG.</li>
<li>Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” ></li>
<li>Atribut Audio yang digunakan dalam penulisan html diantaranya controls, autoplay, loop, muted, preload dan src.</li>
<li>File audio dapat juga dituliskan menggunakan tag <embed> dan tag<object></li>
</ul>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-47890660408216259982016-09-12T08:25:00.004-07:002016-09-12T08:25:32.661-07:00Menyajikan Format Tampilan Gambar<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<b><span style="font-size: large;"><br /></span></b>
<div style="text-align: justify;">
<b><span style="font-size: large;">Memasukkan Gambar ke dalam Halaman Web</span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.</div>
<div style="text-align: justify;">
Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik.</div>
<div style="text-align: justify;">
Cara yang diperlukan 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.</div>
<div style="text-align: justify;">
Bentuk umum penggunaan tag <img> adalah : </div>
<div style="text-align: justify;">
<span style="background-color: purple;"><span style="color: yellow;"><img src=”namafile”></span></span></div>
<div style="text-align: justify;">
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.</div>
<div style="text-align: justify;">
Contoh: </div>
<div style="text-align: justify;">
<span style="background-color: purple;"><span style="color: yellow;"><img src= “../image/komputer.jpg”></span></span></div>
<div style="text-align: justify;">
Atau </div>
<div style="text-align: justify;">
<span style="background-color: purple; color: yellow;"><img src=http://www.abcde.com/image/kamera.jpg/></span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMV9kpSuvZCK-HdAiMBsyL0CVar-FtqzTckrulEtmPkHEKwx1HvOgCSJGAh3OmQTZAJXlbUp31yzILTOkjsGoKiPxy-OyZhDNfeCCeK8hT2h8UJnypLejUdmFa4ML0sWpL7_6qG2O2yw/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMV9kpSuvZCK-HdAiMBsyL0CVar-FtqzTckrulEtmPkHEKwx1HvOgCSJGAh3OmQTZAJXlbUp31yzILTOkjsGoKiPxy-OyZhDNfeCCeK8hT2h8UJnypLejUdmFa4ML0sWpL7_6qG2O2yw/s400/1.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar Menyajikan Format Gambar</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network graphics.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Menggabung Gambar dan Teks</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:</div>
<div style="text-align: justify;">
Secara vertikal:</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Teks bisa berada sejajar dengan bagian atas gambar</li>
<li>Teks bisa berada sejajar dengan bagian tengah gambar</li>
<li>Teks bisa berada sejajar dengan bagian bawah gambar</li>
</ul>
<br />
<div style="text-align: justify;">
Secara horisontal:</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Gambar bisa berada di bagian kiri teks/paragraf</li>
<li>Gambar bisa berada di bagian kanan teks/paragraf</li>
</ul>
<br />
<div style="text-align: justify;">
Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.</div>
<div style="text-align: justify;">
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JUnSZARMj3om8Xqr5yB3oGEBk6xbtWqiW4pKFSetpnC1Y5dma6kR0PAbToUrEwtWbEuWnDkNSW5YuXWEZJNAdkyeMoI2jNqBbJHQQ72PtEixe6Nibw9Ui9qV7NyqftL5Zh1X0k3O9A/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JUnSZARMj3om8Xqr5yB3oGEBk6xbtWqiW4pKFSetpnC1Y5dma6kR0PAbToUrEwtWbEuWnDkNSW5YuXWEZJNAdkyeMoI2jNqBbJHQQ72PtEixe6Nibw9Ui9qV7NyqftL5Zh1X0k3O9A/s400/2.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar Menggabungkan Gambar dan Teks arah vertikal</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an 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.</div>
<div style="text-align: justify;">
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRMECwvkldWVeIMXHhZDze96uT7b4xcVsTSrbSuNWD-yX9aWrSQQwlAfh4YvmcpU_mHnHWnKB_5MBMFINHZthH1hguxlGTH0Tx6zNdCxfeGnKi4599d8oedo2MDUpXkNuMPkY1GIImA/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRMECwvkldWVeIMXHhZDze96uT7b4xcVsTSrbSuNWD-yX9aWrSQQwlAfh4YvmcpU_mHnHWnKB_5MBMFINHZthH1hguxlGTH0Tx6zNdCxfeGnKi4599d8oedo2MDUpXkNuMPkY1GIImA/s400/3.JPG" width="395" /></a></div>
<div style="text-align: center;">
Gambar Menggabungkan Gambar dan Teks arah horisontal</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Memperkecil dan Memperbesar Ukuran Gambar</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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. </div>
<div style="text-align: justify;">
<span style="background-color: purple;"><span style="color: yellow;"><img src=”images/komputer.jpg”></span></span></div>
<div style="text-align: justify;">
Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500X375 pixel).</div>
<div style="text-align: justify;">
Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut, misalnya </div>
<div style="text-align: justify;">
<span style="background-color: purple;"><span style="color: yellow;"><img src=images/komputer.jpg” width=320” height=”230”></span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Memberi keterangan pada gambar</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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 (penjujuk mouse) ke atas gambar.</div>
<div style="text-align: justify;">
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>. </div>
<div style="text-align: justify;">
<span style="background-color: purple; color: yellow;"><img src=”namafile” title=”keterangan”></span></div>
<div style="text-align: justify;">
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGOysJrPHhZEfyr9Bmhwv7PRftv23QvtNxc9nhJA6eEn2iM4S1tntg3_ibtvCaywryvNCmY-H8_GE8tVgisZUSz0YuLQbpaoOPZMeksxWz1i8wh0C5PUuqgpEBDxaZMONSGB1mTi0Gg/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGOysJrPHhZEfyr9Bmhwv7PRftv23QvtNxc9nhJA6eEn2iM4S1tntg3_ibtvCaywryvNCmY-H8_GE8tVgisZUSz0YuLQbpaoOPZMeksxWz1i8wh0C5PUuqgpEBDxaZMONSGB1mTi0Gg/s400/4.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar Menyajikan format gambar dengan keterangan</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Pada gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat mouse di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan gambar.</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Untuk menampilkan format gambar digunakan tag <img>, dengan atribut src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar gambar dan height=”” untuk tinggi gambar.</li>
<li>Untuk membuat keterangan menggunakan atribut TITLE maupun ALT pada tag <img>.</li>
</ul>
<br />
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-70113991453724580902016-09-12T05:27:00.001-07:002016-09-12T05:27:19.382-07:00Menyajikan Desain Halaman Web dengan Konsep Tabel<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel.</div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
Meskipun terlihat sederhana, desain tabel yang dilakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki struktur, sehingga tidak terdapat organisasi data yang baik. 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.</div>
<div style="text-align: justify;">
Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.</div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">1) Anatomi halaman web</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ob_2WJfTFsgcAjnChcYTirHZjacJ5SYKrnrbLnCm-OToVQiCePjQnLoN_IDqC5hzFih3DCE2zJoCEw9N2UztUvqawj06zHBM28sX9jOy-4mZ5P4sgAMfL4MXDwRCSD40WBEZ-SonXg/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ob_2WJfTFsgcAjnChcYTirHZjacJ5SYKrnrbLnCm-OToVQiCePjQnLoN_IDqC5hzFih3DCE2zJoCEw9N2UztUvqawj06zHBM28sX9jOy-4mZ5P4sgAMfL4MXDwRCSD40WBEZ-SonXg/s400/1.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar anatomi halaman web</div>
<div style="text-align: justify;">
</div>
<ul style="text-align: left;">
<li><b>Containing Block</b>. <span style="text-align: justify;">Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.</span></li>
<li><span style="text-align: justify;"><b>Logo</b>. </span><span style="text-align: justify;">Identitas perusahaan, organisasi, pemilik situs.</span></li>
<li><span style="text-align: justify;"><b>Navigation</b>. </span><span style="text-align: justify;">Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.</span></li>
<li><span style="text-align: justify;"><b>Content</b>. </span><span style="text-align: justify;">Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.</span></li>
<li><span style="text-align: justify;"><b>Footer</b>. </span><span style="text-align: justify;">Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.</span></li>
<li style="text-align: justify;"><b>Whitespace</b>. 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.</li>
</ul>
<div>
<b><span style="font-size: large;"><br /></span></b></div>
<div>
<div>
<b><span style="font-size: large;">2) Layout halaman web</span></b></div>
<div>
<br /></div>
<div style="text-align: justify;">
Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain halaman web yang baik dan tepat 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.</div>
<div style="text-align: justify;">
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).</div>
<div style="text-align: justify;">
Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu halaman web meliputi penyusunan:</div>
<div style="text-align: justify;">
- pembagian tempat pada halaman</div>
<div style="text-align: justify;">
- pengaturan jarak sepasi</div>
<div style="text-align: justify;">
- pengelompokan teks dan grafik</div>
<div style="text-align: justify;">
- serta penekanan pada suatu bagian tertentu</div>
<div style="text-align: justify;">
Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah</div>
<div style="text-align: justify;">
- <b>Top Index</b></div>
<div style="text-align: justify;">
<b>-> </b>digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDKk6txqJrhFEMEI_4j_F3H6RoAjOFZRImH_3COaj4KPjfjUYPVGDFZ0P3cJ52iylJ6iASsJD8TRnSw8KRCRxVtBmwu-XY5qd6QRlb_z5O1D1Th1W4juq-n33CoYrbr3CB9XZ-NLPpA/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDKk6txqJrhFEMEI_4j_F3H6RoAjOFZRImH_3COaj4KPjfjUYPVGDFZ0P3cJ52iylJ6iASsJD8TRnSw8KRCRxVtBmwu-XY5qd6QRlb_z5O1D1Th1W4juq-n33CoYrbr3CB9XZ-NLPpA/s400/2.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar model layout top index</div>
<div style="text-align: center;">
<br /></div>
Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut merupakan tampilan dari www.google.com<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWcDfWIpCHdQR4oslbFOdkwfNsC6l868SmNMea699IxzMv5bL7hrTRXYoDXmj7UCUsctBoZst5LvVO-4r1Il1Zpk9p0sNsT3frd7pjo1pWT43ZBw83qygjhWICodaK4MVTThamnWt9g/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWcDfWIpCHdQR4oslbFOdkwfNsC6l868SmNMea699IxzMv5bL7hrTRXYoDXmj7UCUsctBoZst5LvVO-4r1Il1Zpk9p0sNsT3frd7pjo1pWT43ZBw83qygjhWICodaK4MVTThamnWt9g/s400/3.JPG" width="400" /></a></div>
</div>
</div>
<div style="text-align: center;">
Gambar contoh halaman web dengan layout top index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
- <b>Bottom Index</b></div>
<div style="text-align: justify;">
<b>-> </b>Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKLyu0JiQ_2R8DPUr4xGC6kaIt4lGdOkQeJAtADISzZcBTZsjReqXXXnyL1Ni7DT3PzZQIqm8ekvdZvKzmwSKunJlAuoUh22Jxa63rMZg9NkxZKsuB-zizxcIO4qSfcyg8vKMwwPC8A/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKLyu0JiQ_2R8DPUr4xGC6kaIt4lGdOkQeJAtADISzZcBTZsjReqXXXnyL1Ni7DT3PzZQIqm8ekvdZvKzmwSKunJlAuoUh22Jxa63rMZg9NkxZKsuB-zizxcIO4qSfcyg8vKMwwPC8A/s400/4.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar model layout bottom index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada berikut merupakan tampilan halaman web education and training berikut ini</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWPhp-YdnnwCU18ZHGmLWeBCKUWcKFrxprO3D81cWu560mljgjrikllhSXyFlYR-3LA747iGm9g4_vsfQZW2y3F3lByWGYR-7N3e9c-S-KxLbfTl1XEATb6oP7ifK7iARXyTc7VgIrA/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="367" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWPhp-YdnnwCU18ZHGmLWeBCKUWcKFrxprO3D81cWu560mljgjrikllhSXyFlYR-3LA747iGm9g4_vsfQZW2y3F3lByWGYR-7N3e9c-S-KxLbfTl1XEATb6oP7ifK7iARXyTc7VgIrA/s400/5.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar contoh halaman web dengan layout bottom index</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Left Index</b></div>
<div style="text-align: justify;">
<b> -></b> Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, </div>
<div style="text-align: justify;">
tanpa menimbulkan kekacauan penyajian pada halaman utama</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3VC_XenWekThHSp6YjA3N7OwaHORfgPTpbaukmJ8QBoQdOHGn6Fj6K0wzeFEBOZXY_qiGM8-9urDUL0UThP8GcpmPwMgkbFLLcKYqHXjMGtcRiglFRiaM3CVq-xZ0TpGG2oA1oe0Nw/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3VC_XenWekThHSp6YjA3N7OwaHORfgPTpbaukmJ8QBoQdOHGn6Fj6K0wzeFEBOZXY_qiGM8-9urDUL0UThP8GcpmPwMgkbFLLcKYqHXjMGtcRiglFRiaM3CVq-xZ0TpGG2oA1oe0Nw/s400/6.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar model layout left index</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web berikut ini</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1g6OTm6RAyQWG0Cqeu77kvQZchb84pQICajDMq4PyeeoYLN3RVzl_79iUEaHPUweuCkIt3PVsk4qfOwKjkorrfGOw1un7WzdBhq2538l1f88m9I01Ssb7DmdebOWxRD_5CE9dc6bBg/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1g6OTm6RAyQWG0Cqeu77kvQZchb84pQICajDMq4PyeeoYLN3RVzl_79iUEaHPUweuCkIt3PVsk4qfOwKjkorrfGOw1un7WzdBhq2538l1f88m9I01Ssb7DmdebOWxRD_5CE9dc6bBg/s400/7.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar contoh halaman web dengan layout left index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
- <b>Layout Split</b></div>
<div style="text-align: justify;">
<b>-></b> Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-wrkXigauaH9rPwtR5WnA7lT_mmxC6-6DH9tM3FzSBqlDn1SnBq4Oil3mvR3BGEmoD39yCV3Fb5ZAbmdN7Caiw6CNmHnHT2ZL4-O6jLe8_Kfb65G956gAGQD-Js0Pyd8-RMUp5XFBA/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-wrkXigauaH9rPwtR5WnA7lT_mmxC6-6DH9tM3FzSBqlDn1SnBq4Oil3mvR3BGEmoD39yCV3Fb5ZAbmdN7Caiw6CNmHnHT2ZL4-O6jLe8_Kfb65G956gAGQD-Js0Pyd8-RMUp5XFBA/s400/8.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar model layout split</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme wordpress berikut ini</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsW80EPpJjZT44yFy7jRKefU2G9V1uPI5EX9QstQqbyxNUqffqrtftbStrO8CJ4aFHqtMtJGOLa6fCq9pDM0EdEsuQ8aA0vfuEl62TO6fvzuSYnzhna9Ti_VSc5-YwtqC7o5OBWK4-Q/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsW80EPpJjZT44yFy7jRKefU2G9V1uPI5EX9QstQqbyxNUqffqrtftbStrO8CJ4aFHqtMtJGOLa6fCq9pDM0EdEsuQ8aA0vfuEl62TO6fvzuSYnzhna9Ti_VSc5-YwtqC7o5OBWK4-Q/s400/9.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar contoh halaman web dengan layout split</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
- <b>Alternating Index</b></div>
<div style="text-align: justify;">
<b> -></b> digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai </div>
<div style="text-align: justify;">
dengan teks berupa keterangan, harga, jumlah, dan lain - lain.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWREiihKRMQN-sf0Vo20-vrYVtwk_Pned195df2ruLstTyQniQ_qfcMC18STzOiOrAq0NB-ZO2vonCkh4wgRMwoJb3o2nrs01nL2XwTn1bjxhL3bFxQr1ma5bz4cJHbVCgxZ03Yirjg/s1600/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWREiihKRMQN-sf0Vo20-vrYVtwk_Pned195df2ruLstTyQniQ_qfcMC18STzOiOrAq0NB-ZO2vonCkh4wgRMwoJb3o2nrs01nL2XwTn1bjxhL3bFxQr1ma5bz4cJHbVCgxZ03Yirjg/s400/10.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar model layout alternating index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme di http://www.csszengarden.com/050// berikut ini</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZK8RQTIGfkRp5eAQx3eMLeov9SINgApqHZrrcuJ2xoFh51cBef5HFx_K675xG14Xuhk_hc_uhs2_WJZxk9F4SE3KZBOephs-CHLp7L_dbDOz78MFMpzeZ5vBCwLdUUHoLBBMuNutLA/s1600/11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZK8RQTIGfkRp5eAQx3eMLeov9SINgApqHZrrcuJ2xoFh51cBef5HFx_K675xG14Xuhk_hc_uhs2_WJZxk9F4SE3KZBOephs-CHLp7L_dbDOz78MFMpzeZ5vBCwLdUUHoLBBMuNutLA/s400/11.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar contoh halaman web dengan layout alternating index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">3) Desain halaman web dengan konsep tabel</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Top Index</b></div>
<div style="text-align: justify;">
Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen </div>
<div style="text-align: justify;">
table.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVy4ySik-6TDqp_xXA8czELw62tgw31aLKsMEB5C3ho4OhHdUoVuyimioqv_nSiX84hVoOope-mqK7BsJuOQ60iHuGIrsEfyFCO9Ge5Odi01L_f-rmmrA311BVdrn-BS7mx_INBCxcXQ/s1600/12.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVy4ySik-6TDqp_xXA8czELw62tgw31aLKsMEB5C3ho4OhHdUoVuyimioqv_nSiX84hVoOope-mqK7BsJuOQ60iHuGIrsEfyFCO9Ge5Odi01L_f-rmmrA311BVdrn-BS7mx_INBCxcXQ/s400/12.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPPIXclTt7lRgpaP1OrOivWZw8byuMeUhuu6vvLU4mizIoBiLgFfYLY_iPf3nSIcY0QRCBJeNGTp5B0kE45hJqYvTEjir6PMkaSJSkdJjfiTki1Wta0um9xLVQsM7C_PA_V0kESCRhA/s1600/13.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="357" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPPIXclTt7lRgpaP1OrOivWZw8byuMeUhuu6vvLU4mizIoBiLgFfYLY_iPf3nSIcY0QRCBJeNGTp5B0kE45hJqYvTEjir6PMkaSJSkdJjfiTki1Wta0um9xLVQsM7C_PA_V0kESCRhA/s400/13.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxQ03aJjUDoPkJ4Se2LRXm24Rytonv9BVqXHOTwn9MHuhvonhMEoQ2HFJj23_fO2xXr9bs5z_ya7GZ4JFA93R5ILZ4QPW0ssRRiFGYqBB_hDDtpitFZhVe4dQmVtP7OHaCGBIJFybbw/s1600/14.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxQ03aJjUDoPkJ4Se2LRXm24Rytonv9BVqXHOTwn9MHuhvonhMEoQ2HFJj23_fO2xXr9bs5z_ya7GZ4JFA93R5ILZ4QPW0ssRRiFGYqBB_hDDtpitFZhVe4dQmVtP7OHaCGBIJFybbw/s400/14.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESjR4lB_YUaPCif5vLz5urqGNQSuQ0ut2r8DZL8NBl2jZ9kKRiieZVO0dsF967q61UeS1vDAgY2s8eHmfaQPlSC04NIz6O8OCaYR9NFmLSCza7JW8A3Z_E82EnudkKrxXaLGhHLxRmQ/s1600/15.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESjR4lB_YUaPCif5vLz5urqGNQSuQ0ut2r8DZL8NBl2jZ9kKRiieZVO0dsF967q61UeS1vDAgY2s8eHmfaQPlSC04NIz6O8OCaYR9NFmLSCza7JW8A3Z_E82EnudkKrxXaLGhHLxRmQ/s400/15.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar penerapan <table> pada layout top index</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
- <b>Bottom Index</b></div>
<div style="text-align: justify;">
Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jWY6IcZbmoobYWgKTNEaAjL3jeNLAAQ8lba0D4zGJHoUlFXJiiLwquuZB5t3unZAousMbB9imL98oq5vu-5X3Uuq8NoYLL9NDrmzhnKjbuXWd1glB7pgW8JgwpnKW17xjvzJOPdb4w/s1600/16.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jWY6IcZbmoobYWgKTNEaAjL3jeNLAAQ8lba0D4zGJHoUlFXJiiLwquuZB5t3unZAousMbB9imL98oq5vu-5X3Uuq8NoYLL9NDrmzhnKjbuXWd1glB7pgW8JgwpnKW17xjvzJOPdb4w/s400/16.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hhLZcErlt3G6I9Zv5cb25pGt-h2xnNJnDNuwNbq5Fp4Knb9aUMWUeuf-pSY4dsfl2e0ngGOl5HD-_319xGojiExrHE9YCHqlytGdFSlhVUJHkiS_gPA6iA5BTte7YYtYLfOga3sANg/s1600/17.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hhLZcErlt3G6I9Zv5cb25pGt-h2xnNJnDNuwNbq5Fp4Knb9aUMWUeuf-pSY4dsfl2e0ngGOl5HD-_319xGojiExrHE9YCHqlytGdFSlhVUJHkiS_gPA6iA5BTte7YYtYLfOga3sANg/s400/17.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ab2exksiFE7MfW4zbaE_b2S8NUg_E8S5C6nOl0G2aD5qrM3CCiYvdrL6rlzoqZv-_wylJJu6tP2aLvNKLSGH_7gf36lC6HTPDkCN4gr_c0ezzI3OJuxskZet6nBHcG9jE9aEetzoFQ/s1600/18.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ab2exksiFE7MfW4zbaE_b2S8NUg_E8S5C6nOl0G2aD5qrM3CCiYvdrL6rlzoqZv-_wylJJu6tP2aLvNKLSGH_7gf36lC6HTPDkCN4gr_c0ezzI3OJuxskZet6nBHcG9jE9aEetzoFQ/s400/18.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4rZiqXtGHItaRDa7RIuavl_pj9FVHb95HZiwRtr_x0eAmz8rCJEqSeS7wMVJJdqbBFJbOOsugs4ZRIdprX-CUvLZvzleOHgzv3oKgITUaxJALZmIHE7omF_qh3fjZFSIHR3kz54AtA/s1600/19.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4rZiqXtGHItaRDa7RIuavl_pj9FVHb95HZiwRtr_x0eAmz8rCJEqSeS7wMVJJdqbBFJbOOsugs4ZRIdprX-CUvLZvzleOHgzv3oKgITUaxJALZmIHE7omF_qh3fjZFSIHR3kz54AtA/s400/19.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY48HUzcIkxlJc9fGxsfORSKkEORvjlXIKZ7VmRYFcFywrOUNUYMPkoKfunDO-TcJpxhXFQgZM_BPuHf7zGD16snHHaU0NnvVp0_V1o5fkJ0pD2jCj1ZDO8BCWYvj6DVJ7LKNDOkXO8A/s1600/20.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY48HUzcIkxlJc9fGxsfORSKkEORvjlXIKZ7VmRYFcFywrOUNUYMPkoKfunDO-TcJpxhXFQgZM_BPuHf7zGD16snHHaU0NnvVp0_V1o5fkJ0pD2jCj1ZDO8BCWYvj6DVJ7LKNDOkXO8A/s400/20.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar penerapan <table> pada layout bottom index</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Left Index</b></div>
<div style="text-align: justify;">
Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen </div>
<div style="text-align: justify;">
table.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbA3Mwx61JBPytSZet6s-ljUwHBZf0Low8VOANXfEY76pKXpfgvdfUZGvY89TMe3opkqTS3bcf2oZBxSf4plsH-5HamelbnGvge2ubojzGyBfmSjpUVqJAZYLG39FAwl49jAJJsvmSQ/s1600/21.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbA3Mwx61JBPytSZet6s-ljUwHBZf0Low8VOANXfEY76pKXpfgvdfUZGvY89TMe3opkqTS3bcf2oZBxSf4plsH-5HamelbnGvge2ubojzGyBfmSjpUVqJAZYLG39FAwl49jAJJsvmSQ/s400/21.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi051TWd_fRU5w3RUIJzBG4eSL5D3JP8HuWOCGE9FWz32l9tkEIxEoK7k7YPNFsmkaA8w4ehWmzY7Cviy7Am_14bxMmt9VJPkwrm5Z_zB7Ffv4buZ3JSwFRGks2Zf0obJiUJpmF03cv-Q/s1600/22.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="355" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi051TWd_fRU5w3RUIJzBG4eSL5D3JP8HuWOCGE9FWz32l9tkEIxEoK7k7YPNFsmkaA8w4ehWmzY7Cviy7Am_14bxMmt9VJPkwrm5Z_zB7Ffv4buZ3JSwFRGks2Zf0obJiUJpmF03cv-Q/s400/22.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAByTx9Kjw2a8r50Sj0N2sGYNxWHIDV6RfDmx7KxvWhvpRmYE0Iqd0vdexcGRGNhG9KGty9mzfIWFqqUfmWO0ReQqXOq0xSDU7oUQpaZUxhMULPl0WoUST8RgBgMGRAiQ_HwQq8BZ_Lg/s1600/23.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAByTx9Kjw2a8r50Sj0N2sGYNxWHIDV6RfDmx7KxvWhvpRmYE0Iqd0vdexcGRGNhG9KGty9mzfIWFqqUfmWO0ReQqXOq0xSDU7oUQpaZUxhMULPl0WoUST8RgBgMGRAiQ_HwQq8BZ_Lg/s400/23.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESlM5Sc-eX-TQOrIl_dm3PcCMrrrPyBE4-g_flAntssSQysn8MR1hdO0iKxFnhDohCoIYoqvCk-lHME2H9bSzDnqqhfCM7yNvBhCJO2vb3bYYrBwt41OzefuPbDwn-HsGkHgLmITAgw/s1600/24.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESlM5Sc-eX-TQOrIl_dm3PcCMrrrPyBE4-g_flAntssSQysn8MR1hdO0iKxFnhDohCoIYoqvCk-lHME2H9bSzDnqqhfCM7yNvBhCJO2vb3bYYrBwt41OzefuPbDwn-HsGkHgLmITAgw/s400/24.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWZrJsnJ7SZoBdaogw6vw9GbnDa5cmxR9_7dvRAho3J3xT5ZQWE5RAxdbRAmHvRuRj79XULBxZ0-FKCzB7lEYULjZAysjJ5vOmX0pUKhEg0RR2Bv5VMS9y7XWzQ5Jp4-nEypudLUwow/s1600/25.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWZrJsnJ7SZoBdaogw6vw9GbnDa5cmxR9_7dvRAho3J3xT5ZQWE5RAxdbRAmHvRuRj79XULBxZ0-FKCzB7lEYULjZAysjJ5vOmX0pUKhEg0RR2Bv5VMS9y7XWzQ5Jp4-nEypudLUwow/s400/25.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar penerapan <table> pada layout left index</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Layout Split</b></div>
<div style="text-align: justify;">
Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOnGakdC6NPWhCDXxHP9xu0FgTpPHgvBXkyDge2M5KTfv6U7TSRpD0QdYLsddOLXAS9-Usi4rztO4k6A_gBN_qUPn4oNLehPWUZWhnLag-vTekQac7hD9M8fWyXQAUptwwHJl6Apl7A/s1600/26.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOnGakdC6NPWhCDXxHP9xu0FgTpPHgvBXkyDge2M5KTfv6U7TSRpD0QdYLsddOLXAS9-Usi4rztO4k6A_gBN_qUPn4oNLehPWUZWhnLag-vTekQac7hD9M8fWyXQAUptwwHJl6Apl7A/s400/26.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQk687ctW8Due36SdFyD-lFpcYgHqoUS0zsUYDDyBimXaF_zJMveGJYPcyrYGRh0mP2kAH8SvW_KgzyrZRlixMGvQCWNZ8EGRKrRFjKnRZcUAVzTERjWOqnWR6qLZJx5hJVmawHO8VBg/s1600/27.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQk687ctW8Due36SdFyD-lFpcYgHqoUS0zsUYDDyBimXaF_zJMveGJYPcyrYGRh0mP2kAH8SvW_KgzyrZRlixMGvQCWNZ8EGRKrRFjKnRZcUAVzTERjWOqnWR6qLZJx5hJVmawHO8VBg/s400/27.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMDtCpImFUvz89l99-WUx2PBOQLkc1sgps24k6oWAs9KDeJP0wS9dXHYpF9vMMNT93gpLkxMt6NTyeG1OXxdcxEgqS9PnQIJ0fUDQ3P6EQZs7Woh3GNc0qjDWoSXJ_TI6_70XebIj9w/s1600/28.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="373" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMDtCpImFUvz89l99-WUx2PBOQLkc1sgps24k6oWAs9KDeJP0wS9dXHYpF9vMMNT93gpLkxMt6NTyeG1OXxdcxEgqS9PnQIJ0fUDQ3P6EQZs7Woh3GNc0qjDWoSXJ_TI6_70XebIj9w/s400/28.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikX_TpFHpI3Qjhfy6_NY6Z4NrG-ZfGlSoijRrQ1tr8gkm-JcdgKHZ3fdKgWckA41jj6mYqHg9hc077J19qMCzr-umTseTpWRUnTh_MUcsDG14595pfFaqizyG0p23tE1WJpxzQR4JPRw/s1600/29.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikX_TpFHpI3Qjhfy6_NY6Z4NrG-ZfGlSoijRrQ1tr8gkm-JcdgKHZ3fdKgWckA41jj6mYqHg9hc077J19qMCzr-umTseTpWRUnTh_MUcsDG14595pfFaqizyG0p23tE1WJpxzQR4JPRw/s400/29.JPG" width="400" /></a></div>
</div>
<div style="text-align: justify;">
<br />
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgazjgDRFFZn29YlOH0t1NQ7XNfkuh4KFlrWyePDTzBReqG6a0xR8k-ybyIg-_QHIj5SF28Mk8C3QtH5lBMj1C2omuyQNICtwdy3cXTco7C4T-IwsktNRc164cvflQynrAz02Pbercg/s1600/30.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgazjgDRFFZn29YlOH0t1NQ7XNfkuh4KFlrWyePDTzBReqG6a0xR8k-ybyIg-_QHIj5SF28Mk8C3QtH5lBMj1C2omuyQNICtwdy3cXTco7C4T-IwsktNRc164cvflQynrAz02Pbercg/s400/30.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar penerapan <table> pada layout split</div>
<br />
- <b>Alternating Index</b><br />
Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxUuFEGDkPueP91zXNTmBoL9JsILd7XQpIdSdx1zmz1qsfA8I-wzeV1pLkPwnP3FACSoPRWDxr5wqMJpPw7xE919LQf4g5kFNupXT8n399lQvr8hcFcXo3no8N6WMHaSjMHtLWVfhe3g/s1600/31.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxUuFEGDkPueP91zXNTmBoL9JsILd7XQpIdSdx1zmz1qsfA8I-wzeV1pLkPwnP3FACSoPRWDxr5wqMJpPw7xE919LQf4g5kFNupXT8n399lQvr8hcFcXo3no8N6WMHaSjMHtLWVfhe3g/s400/31.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4hVZlW8b4mB6WmVbpa6X7qiMw1yG4VWKIuD1h3IhBiCvXgZem5nfSjbU9RMHbEgFuJL1or5Ky70PlETqBAY4jTq_xvorTgEmrn4-rOqUT3fUeo8Qvz070cg4iBTSfnVAoN-pRICU-w/s1600/32.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4hVZlW8b4mB6WmVbpa6X7qiMw1yG4VWKIuD1h3IhBiCvXgZem5nfSjbU9RMHbEgFuJL1or5Ky70PlETqBAY4jTq_xvorTgEmrn4-rOqUT3fUeo8Qvz070cg4iBTSfnVAoN-pRICU-w/s400/32.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixbrXjxHi_NMHUVjyMbiDdr5hq9t5sEnDPqTNFyokWl-_ygpVRFWp8J9uxBC3l0WbDh6zEr8Wz1s-TAZAGhLwXGPkCM-slOBFDC4w9HljVnkaIqNnNYAFwpvcGtQnZX2ci5A1B0cKX7w/s1600/33.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixbrXjxHi_NMHUVjyMbiDdr5hq9t5sEnDPqTNFyokWl-_ygpVRFWp8J9uxBC3l0WbDh6zEr8Wz1s-TAZAGhLwXGPkCM-slOBFDC4w9HljVnkaIqNnNYAFwpvcGtQnZX2ci5A1B0cKX7w/s400/33.JPG" width="400" /></a></div>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrQ846aIZnf49NyYreBVjJAJAO72JqzQyTtC5FgxxZ6Yq6TI9hXzAK22hP_N4Qxy2c7zh2b80YnIkTksS06w8dHoke85vkir8HU8XX1ld4AkvJYopGoJrDfuliN3Xur9ieTm9AfhjYg/s1600/34.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrQ846aIZnf49NyYreBVjJAJAO72JqzQyTtC5FgxxZ6Yq6TI9hXzAK22hP_N4Qxy2c7zh2b80YnIkTksS06w8dHoke85vkir8HU8XX1ld4AkvJYopGoJrDfuliN3Xur9ieTm9AfhjYg/s400/34.JPG" width="400" /></a></div>
<br />
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GFHcPXNvRRwbPXJxF_NXXJ1vgeuv2YEVe90-CYGMZ9cArhJ2JrWnYqmZY8siHUAUx1Ze0_SPLYSdcj619ebQy-uWwrq1Zk-Tl2k4PDeEP6vUOXA6GlfPDhyfaY5JN9DAX02x69BEmQ/s1600/35.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GFHcPXNvRRwbPXJxF_NXXJ1vgeuv2YEVe90-CYGMZ9cArhJ2JrWnYqmZY8siHUAUx1Ze0_SPLYSdcj619ebQy-uWwrq1Zk-Tl2k4PDeEP6vUOXA6GlfPDhyfaY5JN9DAX02x69BEmQ/s400/35.JPG" width="400" /></a></div>
</div>
<div style="text-align: justify;">
<div style="text-align: center;">
Gambar penerapan <table> pada layout alternating index</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pada kegiatan belajar desain Web dengan Konsep Tabel dapat disimpulkan menjadi beberapa point penting seperti berikut<br />
<br />
<ul>
<li>Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel.</li>
<li>HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.</li>
<li>Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space</li>
<li>Desain layout suatu halaman web meliputi penyusunan:</li>
</ul>
- pembagian tempat pada halaman</div>
<div style="text-align: justify;">
- pengaturan jarak sepasi</div>
<div style="text-align: justify;">
- pengelompokan teks dan grafik</div>
<div style="text-align: justify;">
- serta penekanan pada suatu bagian tertentu<ul>
<li>Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah top index, bottom index, left index, layout split, alternating index</li>
</ul>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;">** Untuk selain HTML5 diwajibkan tidak menggunakan kode html ini "<!DOCTYPE HTML>" melainkan mengunakan kode ini "<html>" karena kode tersebut khusus HTML5 jika kode html tersebut digunakan maka, format HTML kalian buat akan bermasalah atau error</span></div>
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; line-height: 18.2px;">
<span style="background-color: white;">THANK'S FOR IS COMING MY BLOG ^_^</span></div>
</div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-65088450374204825572016-09-10T15:48:00.002-07:002016-09-10T15:48:36.259-07:00Pembuatan Tabel dalam Tabel<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>1. Tabel di dalam Tabel (Tabel bersarang)</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Coba perhatikan gambar tabel berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnEsL1eeFuWxDRNr9yFyjIOnQbqxtjGP6HyF0YPPMkP-FmKD21OkzJ1QuHfvzn7hfBH9HbzxVUD4nNCjq0m7IdfGwPaRSr6nCPE_vQ6-v85ZKv35xFdDPwG-x2MvngZvdvZsyX6dhOQ/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnEsL1eeFuWxDRNr9yFyjIOnQbqxtjGP6HyF0YPPMkP-FmKD21OkzJ1QuHfvzn7hfBH9HbzxVUD4nNCjq0m7IdfGwPaRSr6nCPE_vQ6-v85ZKv35xFdDPwG-x2MvngZvdvZsyX6dhOQ/s400/1.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar Tabel Online Order</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table” atau tabel bersarang.</div>
<div style="text-align: justify;">
Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada <td>….</td>, seperti berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4fC52BnaAHE_tj5DvKCTeCZYWxtPIavu0VSGFsx2Kz0SHPktZ5AIp4GRnCTE2H508yiOKtdjNd_zvAz3q6VlZLceGfC_pbS1-DBsPEoVQESH5Z_jhirKA8e8k4KhEH8GxkWO2-E0OQ/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4fC52BnaAHE_tj5DvKCTeCZYWxtPIavu0VSGFsx2Kz0SHPktZ5AIp4GRnCTE2H508yiOKtdjNd_zvAz3q6VlZLceGfC_pbS1-DBsPEoVQESH5Z_jhirKA8e8k4KhEH8GxkWO2-E0OQ/s400/2.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUrGqt7wJp5Xw0yCCnafNkgQHMgV66xRLVuBgKEa3d2szOrbACq8XuO8x1uJ3hTUtDwSMF0UCbAb7Tx0j7zMsjNOA6RySFbH2XuYnFj4Cqzyx9RivLJQi9G51WvuE7e15eNruByRn-A/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUrGqt7wJp5Xw0yCCnafNkgQHMgV66xRLVuBgKEa3d2szOrbACq8XuO8x1uJ3hTUtDwSMF0UCbAb7Tx0j7zMsjNOA6RySFbH2XuYnFj4Cqzyx9RivLJQi9G51WvuE7e15eNruByRn-A/s400/3.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).</div>
<div class="separator" style="clear: both; text-align: justify;">
Berikut ini contoh langkah-demi langkah :</div>
<div style="text-align: justify;">
</div>
<ul style="text-align: left;">
<li><span style="text-align: justify;">Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai berikut :</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5Wtdywwu8pRI6m6LoaPriWjuOmVxBj-tkVoInhu0awQsr172KA_aUcyXxzEHWnEcHir9oI8kynyVu6OwacyRVpJMmOa9QLo4Fz8LprpZraNmJa81RQJDveHaeecu7b4JS0fHyBW2oQ/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5Wtdywwu8pRI6m6LoaPriWjuOmVxBj-tkVoInhu0awQsr172KA_aUcyXxzEHWnEcHir9oI8kynyVu6OwacyRVpJMmOa9QLo4Fz8LprpZraNmJa81RQJDveHaeecu7b4JS0fHyBW2oQ/s400/4.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<ul style="text-align: left;">
<li>Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan menaruh di kolom 2 baris 2.</li>
<li>Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti ini</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHtPrwgbNlaRlGK-2nkTtTKa42xp3DsJTM31sI34bKdYMoEaMurbwaY6mWqsnoabuRl7ykOldmO5OFK5FPl-QJlDz0FDlmB353OQ_nGNO-XgEmXOXkzEtHVveaXnI-1L_fqEYRHxpoA/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHtPrwgbNlaRlGK-2nkTtTKa42xp3DsJTM31sI34bKdYMoEaMurbwaY6mWqsnoabuRl7ykOldmO5OFK5FPl-QJlDz0FDlmB353OQ_nGNO-XgEmXOXkzEtHVveaXnI-1L_fqEYRHxpoA/s400/5.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiozwuO-ECu8Rs3WZsxHFbwGJNQeXO2BMIxrLOeEM29_mNJiUcJhM-RNecU-2ERy8WGFkm6KIj2ZaVJ-j5_y38xYxs82kD-TElt6dz_Td6U6IfFxYC3ohGU6rvc0J-W_q2X4TBYH6Ftg/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiozwuO-ECu8Rs3WZsxHFbwGJNQeXO2BMIxrLOeEM29_mNJiUcJhM-RNecU-2ERy8WGFkm6KIj2ZaVJ-j5_y38xYxs82kD-TElt6dz_Td6U6IfFxYC3ohGU6rvc0J-W_q2X4TBYH6Ftg/s400/6.JPG" width="400" /></a></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hasilnya adalah sebagai berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4m1KAmHrWy2ZhppzWsujsyu9zuDbo2JAJ38hspLlBcbkwgx7k3rsMEuTAPzpx6aUefKDbWOMGAIxpP_yd7NAFZIPVR48j-aHRKBcaSIiFXn0hWIMY4yiNBoo019HGOULTLiEq4tV-g/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4m1KAmHrWy2ZhppzWsujsyu9zuDbo2JAJ38hspLlBcbkwgx7k3rsMEuTAPzpx6aUefKDbWOMGAIxpP_yd7NAFZIPVR48j-aHRKBcaSIiFXn0hWIMY4yiNBoo019HGOULTLiEq4tV-g/s400/7.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Trik untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam sebelum menutup sel tabel luar.</div>
<div style="text-align: justify;">
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Contoh HTML tabel dalam tabel seperti gambar berikut ini:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1yA2EY0l4owtWapzKaKKRTqaxHjoBjOtXEUlFJ-Ombc6lid1NdOCm69LZga-7Qe6ZiMvEyBONrzp3Eow7fSRmdeVjyv2whBQrlUjeMuFvVtGKFMpZvVgLPLx41i_PDeDp6LHhOGPKzQ/s1600/8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="537" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1yA2EY0l4owtWapzKaKKRTqaxHjoBjOtXEUlFJ-Ombc6lid1NdOCm69LZga-7Qe6ZiMvEyBONrzp3Eow7fSRmdeVjyv2whBQrlUjeMuFvVtGKFMpZvVgLPLx41i_PDeDp6LHhOGPKzQ/s640/8.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hasilnya seperti ini</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDxakI9md0LGr3o2fb713RtGe0dsWFl6qsVEGCxL8JLWo8ofYM7sZzbyhiWM1Bb3T5VwIWiMfpeME1_VHGbmJk5JASB0YIv57STqKErWu6yh2QxXB6OiM5dfFxuTYtRuVlTLLxuY4nA/s1600/9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDxakI9md0LGr3o2fb713RtGe0dsWFl6qsVEGCxL8JLWo8ofYM7sZzbyhiWM1Bb3T5VwIWiMfpeME1_VHGbmJk5JASB0YIv57STqKErWu6yh2QxXB6OiM5dfFxuTYtRuVlTLLxuY4nA/s400/9.JPG" width="267" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-72473600500497635272016-09-10T13:03:00.003-07:002016-09-10T13:32:58.164-07:00Menyajikan Pembuatan Tabel dan Tabel Spaning <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>1) Pembuatan Tabel</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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>.</div>
<div style="text-align: justify;">
Elemen table berisi property <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table(table data).</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgplNFUflgR-kc-2L_yIO18CzKYEvvtx1hCSsbgldf0rDwjr0SE0PVemVmURPu2w456IMsU9yPje9OQkzqg3tuYwL2z9sbsUcL7gfKUWyMpbsHrFZQ9Pr_vozf7Rwvy1n_le-FBV9OcTw/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgplNFUflgR-kc-2L_yIO18CzKYEvvtx1hCSsbgldf0rDwjr0SE0PVemVmURPu2w456IMsU9yPje9OQkzqg3tuYwL2z9sbsUcL7gfKUWyMpbsHrFZQ9Pr_vozf7Rwvy1n_le-FBV9OcTw/s400/1.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Struktur elemen table adalah sebagai berikut:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHj-CGwJSbvGjdJ4SZwzXHB2vDoSEFf4ayhEISIdetmCL00PNkepYKDknyk0s72lWg2SZfQfO1TkCtvk9ggL7Qds8zj36MCtFe3APGjjKk7VpGqDQNmHYk-FcKDowBFkxIiQUCaMT8A/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHj-CGwJSbvGjdJ4SZwzXHB2vDoSEFf4ayhEISIdetmCL00PNkepYKDknyk0s72lWg2SZfQfO1TkCtvk9ggL7Qds8zj36MCtFe3APGjjKk7VpGqDQNmHYk-FcKDowBFkxIiQUCaMT8A/s400/2.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89_brXPfxbLEss5CVfPRZ61uJ9a9SoNlmVfSFL4edoo-UFOtQ7zp1qu4MLmuBxAHDymiMbRpklfCdgXVFNB5-1RaKhXNoY5ZJb4ze3NQR6f9RO0iHAdbIyrt_T6EA-q5ybGjzVBu2YA/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89_brXPfxbLEss5CVfPRZ61uJ9a9SoNlmVfSFL4edoo-UFOtQ7zp1qu4MLmuBxAHDymiMbRpklfCdgXVFNB5-1RaKhXNoY5ZJb4ze3NQR6f9RO0iHAdbIyrt_T6EA-q5ybGjzVBu2YA/s400/3.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag "<th> ….. </th>"</div>
<div style="text-align: justify;">
<b>Atribut Elemen Table</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR81dEWOxSpSt0KUQmBdi3My7uvMk0dkODksTDp2IaGvgCDOewWhdF3nW7PxpwOBSVdSpBvvA4u4oy5yZ6opyJadz1WdP6lWj30sfVOoZrWJy9B0CpvacC2zuP7NetiVIwVNPbbD-5MQ/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR81dEWOxSpSt0KUQmBdi3My7uvMk0dkODksTDp2IaGvgCDOewWhdF3nW7PxpwOBSVdSpBvvA4u4oy5yZ6opyJadz1WdP6lWj30sfVOoZrWJy9B0CpvacC2zuP7NetiVIwVNPbbD-5MQ/s400/4.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Atribut Tabel Row</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfcyo-qzniVLbx3hJ0XTAx45JYRYGn7-XyEkg2RARpGxBDD2NgLr3hrXsDZn9-h4h-hkHK0pvlZJ-OgSGKvD4Edvv4g7Gf_1s6spL2BO7QWLfpOE9WzQe2rocXcoRvRXFhoICf-5_kw/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfcyo-qzniVLbx3hJ0XTAx45JYRYGn7-XyEkg2RARpGxBDD2NgLr3hrXsDZn9-h4h-hkHK0pvlZJ-OgSGKvD4Edvv4g7Gf_1s6spL2BO7QWLfpOE9WzQe2rocXcoRvRXFhoICf-5_kw/s400/5.JPG" width="400" /></a></b></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Atribut Tabel Data</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJrsttUP76fIlOI3S4uBCgayTNhFseTRs3JWtsiY30i8JapD5nw4JBXKAk_MP8uyhwfD9kO_sn0iAeY4lKWUrRSrfgy8m7I3SyNg52Ero89BCEgwLAbuO8AkEdbH2DOeMyDZCVN3tpA/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJrsttUP76fIlOI3S4uBCgayTNhFseTRs3JWtsiY30i8JapD5nw4JBXKAk_MP8uyhwfD9kO_sn0iAeY4lKWUrRSrfgy8m7I3SyNg52Ero89BCEgwLAbuO8AkEdbH2DOeMyDZCVN3tpA/s400/6.JPG" width="400" /></a></b></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk mengatur teks ataupun gambar dalam baris dan kolom, digunakanlah pemformatan Tabel</div>
<div style="text-align: justify;">
Tag Utama untuk tabel adalah :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnKz-4fLI2zqZCrH0J8sVqSZF6g-2KYgfPvCuA35K2uJQvSI1a86JHMtVVPbUIziLjhyphenhyphenvkPWudy8Ay6_d9FTOwyKNlAf0V06xOXLu-XaBYdy13tJcXn9wxXKlh_dUTNb4cnIJKRRFCA/s1600/7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnKz-4fLI2zqZCrH0J8sVqSZF6g-2KYgfPvCuA35K2uJQvSI1a86JHMtVVPbUIziLjhyphenhyphenvkPWudy8Ay6_d9FTOwyKNlAf0V06xOXLu-XaBYdy13tJcXn9wxXKlh_dUTNb4cnIJKRRFCA/s400/7.JPG" width="400" /></a></div>
<div style="text-align: justify;">
<br />
<br />
<b><span style="font-size: large;">2) Pembuatan Tabel Spaning</span></b><br />
<br />
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YxcKEMvfcv-Rd-DwJRqjh_UXQz4z2FUXkfxwa7tEtr1dU__TmH4GwJcCueedR8Jn0e9_fAeBkNOijwXjo_RYhRqFTtAiaY6YvtQEcmMAKiq-EZQW-8TupOOk454AmS34Z4NialxeEQ/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YxcKEMvfcv-Rd-DwJRqjh_UXQz4z2FUXkfxwa7tEtr1dU__TmH4GwJcCueedR8Jn0e9_fAeBkNOijwXjo_RYhRqFTtAiaY6YvtQEcmMAKiq-EZQW-8TupOOk454AmS34Z4NialxeEQ/s400/1.JPG" width="400" /></a></div>
<br />
Berikut ini contoh tabel yang menggabungkan kolom :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWWasPBfLcKPa_nTEQqkS9PUxw2DCshmtA3zaTYHD1SxRBnHePrYQk9GgnzZzAmLRprbiqBv97RVwdMlYMniDgr44hnsgyjK5ST8pheGDAmWOxR7r32oH-P3a5jfNUFwYq-LzRd-_9w/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="42" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWWasPBfLcKPa_nTEQqkS9PUxw2DCshmtA3zaTYHD1SxRBnHePrYQk9GgnzZzAmLRprbiqBv97RVwdMlYMniDgr44hnsgyjK5ST8pheGDAmWOxR7r32oH-P3a5jfNUFwYq-LzRd-_9w/s400/2.JPG" width="400" /></a></div>
<br />
Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVEurdgOCg5X8wP-Sr7-f_PkohZ9uoiWUyx4AZjPbSWIrR98nbdAoSrZ2Ojoqg_1iyyxv7tzxzhpHx4lXzudWh7rZ3oVmEts2QhLA_Wzu8tq5NDvBeoTW2aFF1AoQ3lSeFqABFZDg5Iw/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVEurdgOCg5X8wP-Sr7-f_PkohZ9uoiWUyx4AZjPbSWIrR98nbdAoSrZ2Ojoqg_1iyyxv7tzxzhpHx4lXzudWh7rZ3oVmEts2QhLA_Wzu8tq5NDvBeoTW2aFF1AoQ3lSeFqABFZDg5Iw/s400/3.JPG" width="400" /></a></div>
<br />
Jadi untuk menggabungkan 4 baris seperti table di atas adalah :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpiRD8xtMRC7CtGzGyhjkL7eQWbgVavjVVDKVUJGp3yg1q8Oeu5wMoklAS0B1vcmGCLLSgkuLBrY5ylNSeGD3zv9KMve5DLdBGhqGxwp_Iw7fYdfXER5vAN6_wtDWcJzgzS8LiJkTxg/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpiRD8xtMRC7CtGzGyhjkL7eQWbgVavjVVDKVUJGp3yg1q8Oeu5wMoklAS0B1vcmGCLLSgkuLBrY5ylNSeGD3zv9KMve5DLdBGhqGxwp_Iw7fYdfXER5vAN6_wtDWcJzgzS8LiJkTxg/s400/4.JPG" width="400" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOj3QjEob8jakEXzjPtyjBzeaFK8qsDzjjTH45zPzAN6CcJsZDVs24tH1QaOB6m6on80OSecio7LvuiCVlv8DFE1V9Vpr0wDG18HMPcyuFkfX1Kg3sTCJYm6Y-J6jnpZrN_yEHTsFvEg/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOj3QjEob8jakEXzjPtyjBzeaFK8qsDzjjTH45zPzAN6CcJsZDVs24tH1QaOB6m6on80OSecio7LvuiCVlv8DFE1V9Vpr0wDG18HMPcyuFkfX1Kg3sTCJYm6Y-J6jnpZrN_yEHTsFvEg/s400/5.JPG" width="400" /></a></div>
<br />
Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :<br />
<br />
<br />
<br />
<br />
<ul>
<li>Rowspan : untuk baris</li>
<li>Colspan : untuk kolom</li>
</ul>
</div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-55136563787933166592016-09-10T12:44:00.000-07:002016-09-10T12:44:11.167-07:00Menyajikan Pembuatan List Kombinasi<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>1) Pembuatan list Kombinasi</b></span><br />
<br />
Perhatikan daftar berikut ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPkVxINGUUMjPszX6A23wWVVaQwd2989wlZ-9MVwmKoMwDyXVNYJEVHL5ho5Qg9NquJpPU3I-Fazh2rYljeOkjlDjfqv5SZSHUhcEj1eMHxbFbHjA03-awF2Oky067p8tKCBuFB5Z7A/s1600/oun7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPkVxINGUUMjPszX6A23wWVVaQwd2989wlZ-9MVwmKoMwDyXVNYJEVHL5ho5Qg9NquJpPU3I-Fazh2rYljeOkjlDjfqv5SZSHUhcEj1eMHxbFbHjA03-awF2Oky067p8tKCBuFB5Z7A/s400/oun7.JPG" width="400" /></a></div>
<br />
<div style="text-align: justify;">
Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak berurutan.</div>
<div style="text-align: justify;">
Untuk membuat daftar diatas pada dokumen HTML maka cukup menggabungkan <ol> dangan <ul>.</div>
<div style="text-align: justify;">
Perhatikan penggabungan <ol> dengan <ul> berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ol> </span> </div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </span> </div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </span><span style="color: yellow;"><span style="background-color: purple;"><ul> </span> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span> </div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span> </div>
<div style="text-align: justify;">
<span style="color: #fce5cd;"> </span><span style="background-color: purple;"> <li> </li> </span> </div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <span style="color: yellow;"></ul> </span></span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </li> </span> </div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ol> </span> </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
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 :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ul> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ol type=i> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ol> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ol type=i> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li > </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ol> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li> </li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ul> </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Memulai dengan nomor tertentu</b></div>
<div style="text-align: justify;">
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>.</div>
<div style="text-align: justify;">
Misalnya contoh berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ol <span style="color: yellow;">start="17"</span>> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Blok huruf dengan text tool</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Klik tab karakter</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Pilih jenis huruf pada menu pop-up .</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ol> </span></div>
<div style="text-align: justify;">
<span style="background-color: #fce5cd;"><br /></span></div>
<div style="text-align: justify;">
Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.</div>
<div style="text-align: justify;">
<span style="background-color: #fce5cd;"></span></div>
<div style="text-align: justify;">
Demikian juga apabila :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <ol type=”A” <span style="color: yellow;">start="17"</span>> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Blok huruf dengan text tool</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Klik tab karakter</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> <li>Pilih jenis huruf pada menu pop-up .</li> </span></div>
<div style="text-align: justify;">
<span style="background-color: purple;"> </ol> </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S. Artinya Q=17 dan R=18, selanjutnya S=19 dan seterusnya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan memberi atribut start=” ”.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-36339652807730783012016-09-08T13:16:00.003-07:002016-09-08T13:16:47.683-07:00Menyajikan Hasil Pembuatan List Minimal<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">1) Pengertian List</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
Contoh List :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Sy8wNfWPpeTKlc5e0z9hNT4vEnI4xPiI5R0XMz3dv_yIqe4CxzJMEn57dZVZ4Af4xh3MU9a5yoFFkI7CmnVOy-PzG6coK6dcUh731vodhe_E9rcyAd6pUrJFTJ6YQsqtiqKhnkir6g/s1600/0p7h.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Sy8wNfWPpeTKlc5e0z9hNT4vEnI4xPiI5R0XMz3dv_yIqe4CxzJMEn57dZVZ4Af4xh3MU9a5yoFFkI7CmnVOy-PzG6coK6dcUh731vodhe_E9rcyAd6pUrJFTJ6YQsqtiqKhnkir6g/s400/0p7h.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-size: large;">2) Tipe Daftar dalam Dokumen HTML</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<ul>
<li>Daftar berurutan (ordered list)</li>
<li>Daftar tidak berututan (unordered list)</li>
<li>Daftar definisi (definition list)</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-size: large;">3) Daftar Berurutan (Ordered List)</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (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.</div>
<div class="separator" style="clear: both; text-align: justify;">
Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, misalnya :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37tAJLb-8x0uOHFshg82xjo38JDsxjz2pBtb94r7ECBMICa-_9pr4zP4sC3i_650YcLMb_3QiCYrnMwHhSf5SpmY39my0ElqWCmny1eF3Yzwb4xpkN-V6z2hQPmXmgq-PeJKf0RTBVw/s1600/iybrd.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37tAJLb-8x0uOHFshg82xjo38JDsxjz2pBtb94r7ECBMICa-_9pr4zP4sC3i_650YcLMb_3QiCYrnMwHhSf5SpmY39my0ElqWCmny1eF3Yzwb4xpkN-V6z2hQPmXmgq-PeJKf0RTBVw/s400/iybrd.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
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.</div>
<div class="separator" style="clear: both; text-align: justify;">
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.</div>
<div class="separator" style="clear: both; text-align: justify;">
Contoh penulisan adalah sebagai berikut :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPG3gIK_kwBtCEw5_n34WbYL-luBaIeHr2OqSo_UwHZyEl2eGQRc5v9vLP6OWo01utdXaZlgOXkau3I4fkg6Rlqf4o8Y8z_l5NI7XqHDQyTMgtUQHxoZV72jtuCIf2FUZSZ1U8yOHQw/s1600/ftut.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPG3gIK_kwBtCEw5_n34WbYL-luBaIeHr2OqSo_UwHZyEl2eGQRc5v9vLP6OWo01utdXaZlgOXkau3I4fkg6Rlqf4o8Y8z_l5NI7XqHDQyTMgtUQHxoZV72jtuCIf2FUZSZ1U8yOHQw/s400/ftut.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhFrywmkSWx0hJVfXlYuMmYKTjGsXvZVoajSEWbno-AWTSvP2jGLajnUyDEQymyz6QZcAj3OLLC8Yb4WcBhYmlGz5aUBibwZ1yp7qhIoPb-TpGjouFYWsxRV_DuOdrmxisCRx1mXdUA/s1600/xchtk.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhFrywmkSWx0hJVfXlYuMmYKTjGsXvZVoajSEWbno-AWTSvP2jGLajnUyDEQymyz6QZcAj3OLLC8Yb4WcBhYmlGz5aUBibwZ1yp7qhIoPb-TpGjouFYWsxRV_DuOdrmxisCRx1mXdUA/s400/xchtk.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.</div>
<div class="separator" style="clear: both; text-align: justify;">
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJc8a58jqvQKj_RB25GXbIdu9GZQ8UR1_kpV2cy9rwnqap3MaHSRJkTiGy7HcxafF4Vf4b-tVPlB0bwtsQmnz606yiKO-i2wByYANoDcZ7OEK5zg2GXuw0CoMmr7yydH_kLbQYjatR4w/s1600/yurslkj.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJc8a58jqvQKj_RB25GXbIdu9GZQ8UR1_kpV2cy9rwnqap3MaHSRJkTiGy7HcxafF4Vf4b-tVPlB0bwtsQmnz606yiKO-i2wByYANoDcZ7OEK5zg2GXuw0CoMmr7yydH_kLbQYjatR4w/s400/yurslkj.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-size: large;">4) Daftar Tidak Berurutan (Unordered List)</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
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).</div>
<div class="separator" style="clear: both; text-align: justify;">
Contoh :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOrGTz6_rwnC-SyZFZcI5GygjQo8oQFsr6nno42-iDvH4hrOPxT0LPK1VRKZaPBF4HjVeH3bXtEQ7a2DpVpOKutW4glWBTmCjmBiuqPr5A_gKnYP_mYCpV4e0tVe7lB1Fc4bhkbVHpw/s1600/iynm8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOrGTz6_rwnC-SyZFZcI5GygjQo8oQFsr6nno42-iDvH4hrOPxT0LPK1VRKZaPBF4HjVeH3bXtEQ7a2DpVpOKutW4glWBTmCjmBiuqPr5A_gKnYP_mYCpV4e0tVe7lB1Fc4bhkbVHpw/s640/iynm8.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
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.</div>
<div class="separator" style="clear: both; text-align: justify;">
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.</div>
<div class="separator" style="clear: both; text-align: justify;">
Contoh penulisan adalah sebagai berikut :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInCdiOEgz6nEBEtOmmUgURazIdQa2E_X4MBCdh0PTHnNODWroK3o2Ua3KJbjU6oFG5_zlvmLdTF_tR8ICInaUohUDFTjYRRYbfe9B31-q_vCT3SGRRljVqlqaiTSVqIpNYSLsBx46Hg/s1600/i6exe.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInCdiOEgz6nEBEtOmmUgURazIdQa2E_X4MBCdh0PTHnNODWroK3o2Ua3KJbjU6oFG5_zlvmLdTF_tR8ICInaUohUDFTjYRRYbfe9B31-q_vCT3SGRRljVqlqaiTSVqIpNYSLsBx46Hg/s400/i6exe.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya..</div>
<div class="separator" style="clear: both; text-align: justify;">
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimK-KsCqBAliazf2DDlXelpMz_enuDEiNC8UwDg6lcRCHRPMei1zfGF1CPRJqEe7b8r4PhOrr03b5YBQBJaxl3kTVUdRZSKAx_kDEuddAI8fb7fiuAggpOf_467q8a2RyVQmYomt146Q/s1600/agv.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimK-KsCqBAliazf2DDlXelpMz_enuDEiNC8UwDg6lcRCHRPMei1zfGF1CPRJqEe7b8r4PhOrr03b5YBQBJaxl3kTVUdRZSKAx_kDEuddAI8fb7fiuAggpOf_467q8a2RyVQmYomt146Q/s400/agv.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-size: large;">5) Daftar Definisi (Definition List)</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, misalnya daftar definisi istilah HTML.</div>
<div class="separator" style="clear: both; text-align: justify;">
Contoh :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinovF1WC9yMkdRV5qUFnXfUFMFXSy1F1qMKrTBiwjQmHk4sWmO4mD6p4bzeisbzFPOMEO0KbOlzUV5DmCh4UOZQVHNmq3a9Lhjuqa6fmYXzAd34lmIqnaGFt0U22koVpLq_NVNLeuGrA/s1600/dnkiu.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinovF1WC9yMkdRV5qUFnXfUFMFXSy1F1qMKrTBiwjQmHk4sWmO4mD6p4bzeisbzFPOMEO0KbOlzUV5DmCh4UOZQVHNmq3a9Lhjuqa6fmYXzAd34lmIqnaGFt0U22koVpLq_NVNLeuGrA/s400/dnkiu.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-D-fz9nqYpibmcBYMH1wMLGqb6dBjwQ3GDwuUxIEpbOo3DzyrO5Ww32RTd-HwPIUaZR3SBqKAZiMVWso9_h848qrWO1D2re95Y2RaahpCENqv4lVbLSqi_UDdGx5dIiEEydzXNU0Mqg/s1600/i8yvf6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-D-fz9nqYpibmcBYMH1wMLGqb6dBjwQ3GDwuUxIEpbOo3DzyrO5Ww32RTd-HwPIUaZR3SBqKAZiMVWso9_h848qrWO1D2re95Y2RaahpCENqv4lVbLSqi_UDdGx5dIiEEydzXNU0Mqg/s400/i8yvf6.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6P588Sda9PelvrjQrwLLBzLonoNINI6pXKpNMgT-1yJj85s-Jc5hHhNTqdu6GahkIgAI31_tnunj37o7PShVbUSRlCi6BbSFJEyWTrZXL8y-Yaqw8ysq2AazbeC76naLlKXgbf-XeA/s1600/ofbre.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6P588Sda9PelvrjQrwLLBzLonoNINI6pXKpNMgT-1yJj85s-Jc5hHhNTqdu6GahkIgAI31_tnunj37o7PShVbUSRlCi6BbSFJEyWTrZXL8y-Yaqw8ysq2AazbeC76naLlKXgbf-XeA/s400/ofbre.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-19073032575201691232016-09-08T12:41:00.000-07:002016-09-08T12:41:08.817-07:00Menyajikan pemformatan Teks dan Paragraf Web<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b>1. Pemformatan Teks</b></span><br />
Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gWQifDH4kKeilzUaEFRjh03SqxKVc67sZ2R56uRoMyIopGV11OAw3G9L6seSjKxU5FNT0a_XPkeYCKmR9CRzGMdUrLKkIxMyKoP8WrpUYWNpoD_SiP3as7zZWGqfjNDcyo4dBi9Xmg/s1600/ku%252Ckv.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gWQifDH4kKeilzUaEFRjh03SqxKVc67sZ2R56uRoMyIopGV11OAw3G9L6seSjKxU5FNT0a_XPkeYCKmR9CRzGMdUrLKkIxMyKoP8WrpUYWNpoD_SiP3as7zZWGqfjNDcyo4dBi9Xmg/s640/ku%252Ckv.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.</div>
<div class="separator" style="clear: both; text-align: justify;">
Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b> Tag HTML Pemformatan Teks</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLiNuhqlSDDU7Dhggcd28YB3agWBWABM9PTQTuCg0KimgzWlWGr0y13hF4PpeZ7SjIa9VJoSB5nljDP2uyJl5Nq38kprL9tSzFIDAhyphenhyphenPUFyNj7hbH9ksviZODdavPwBgXHsvBGocihQ/s1600/%253Bg9pn.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLiNuhqlSDDU7Dhggcd28YB3agWBWABM9PTQTuCg0KimgzWlWGr0y13hF4PpeZ7SjIa9VJoSB5nljDP2uyJl5Nq38kprL9tSzFIDAhyphenhyphenPUFyNj7hbH9ksviZODdavPwBgXHsvBGocihQ/s400/%253Bg9pn.JPG" width="400" /></a></b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaExAWc3FXNbdNaVMHwkU2Qf9Pqrx2HIlHIZ-vUg6xs7f-BqZDXA0tFkJp5w1huhOr57cnomvzum3tGosGXOtHVhabtUi7gXrcv0lVI1z3fOUxI4bNZSAuNVwBSPCw4neTpvuwCgF8Mg/s1600/o%253Byb.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaExAWc3FXNbdNaVMHwkU2Qf9Pqrx2HIlHIZ-vUg6xs7f-BqZDXA0tFkJp5w1huhOr57cnomvzum3tGosGXOtHVhabtUi7gXrcv0lVI1z3fOUxI4bNZSAuNVwBSPCw4neTpvuwCgF8Mg/s400/o%253Byb.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b> Tag HTML "Keluaran Komputer"</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyZOkhTsCMEdfJMHm0XIb_3oTLZMXRR8k4I3pwcFwU8swFR20mOl9Nu_1BULtqHT99xp1KWOR7w5h4rHar2YJXpnu3bK0uh_PDPntUJFqtG451gjTyjgpyAOyyHqIoKyWCbHLv4uSdA/s1600/pubt.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyZOkhTsCMEdfJMHm0XIb_3oTLZMXRR8k4I3pwcFwU8swFR20mOl9Nu_1BULtqHT99xp1KWOR7w5h4rHar2YJXpnu3bK0uh_PDPntUJFqtG451gjTyjgpyAOyyHqIoKyWCbHLv4uSdA/s400/pubt.JPG" width="400" /></a></b></div>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b> HTML Citations, Quotations, and Definition Tags</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpH2UkJqiNT1_QF-8NO93wjZSt4LmZuIvT_4CFSctZ-qOMzNrb6tCUt6hRydEs-3pBOao951ylXLy4EMAH7RMBkEaICNpJNB86wg817sDzyJaidjEt_9O0iTkYK3E_5sUC9JWUPgj8rA/s1600/pou6t.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpH2UkJqiNT1_QF-8NO93wjZSt4LmZuIvT_4CFSctZ-qOMzNrb6tCUt6hRydEs-3pBOao951ylXLy4EMAH7RMBkEaICNpJNB86wg817sDzyJaidjEt_9O0iTkYK3E_5sUC9JWUPgj8rA/s400/pou6t.JPG" width="400" /></a></b></div>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><span style="font-size: large;">2. Pemformatan Paragrap</span></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>.</div>
<div class="separator" style="clear: both; text-align: justify;">
Berikut ini contohnya : <span style="background-color: #e69138;"> <p> ini adalah paragrap </p> </span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: #e69138;"> <p> ini adalah paragrap lain </p></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-15029198559650637862016-09-08T07:59:00.001-07:002016-09-08T07:59:27.894-07:00Menyajikan Format Teks dalam Dokumen Web<div dir="ltr" style="text-align: left;" trbidi="on">
<b><span style="font-size: x-large;">Dasar-Dasar HTML</span></b><br />
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<br />
<div style="text-align: justify;">
Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.</div>
o Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari<br />
gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.<br />
o Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama<br />
perusahaan.<br />
o Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh<br />
informasi di bagian bawah halaman web.<br />
o Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.<br />
o Audio. Memungkinkan penyajian player untuk memutar suara.<br />
o Video. Memungkinkan player untuk memainkan film.<br />
<br />
Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :<br />
o Struktur halaman ;<br />
o Presentasi visual ;<br />
o Peranti penyaji gambar ;<br />
o Pendukung media ; dan<br />
Peningkatan koneksi dengan JavaScript.<br />
<br />
<div style="text-align: justify;">
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag <contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut:</div>
<div style="text-align: justify;">
<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.</div>
<div style="text-align: justify;">
Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<span style="font-size: large;"><b>Struktur Dasar Dokumen HTML</b></span><br />
<br />
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh555sAVtqzcLpMNiL2zJGsNUT9jbzH7rKiZsmUj4hpA4XLQD5l6htaWu7ZjB7rFg0JxASAbYgj1KALHt5GqSqgU-ZLAW_bLGJ0amr07VhPotNcMhHnrG8ES5qbxOMphUfm-NBIizBOHw/s1600/ST9IKTB.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh555sAVtqzcLpMNiL2zJGsNUT9jbzH7rKiZsmUj4hpA4XLQD5l6htaWu7ZjB7rFg0JxASAbYgj1KALHt5GqSqgU-ZLAW_bLGJ0amr07VhPotNcMhHnrG8ES5qbxOMphUfm-NBIizBOHw/s640/ST9IKTB.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Seperti terlihat, 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>.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
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.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><span style="font-size: large;">Pengaturan Properti Dokumen</span></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Properti document diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana teks, warna link dan lain-lain.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>Kode Warna</b></div>
<div class="separator" style="clear: both; text-align: justify;">
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 :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_29IDP2kmPMUu_lvfPJFZEhhC4cdJnMdhxD6iL4XpZqjDwBPaPPfRRCuFSwo2lOcM3jtEcUzwS2W_vDNN6Dl_aMNV116GHsMhJ9lPLax65UguXqVGy4DrrwFmSd72HZ6WlyHNlhwaQ/s1600/TOIBJ.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_29IDP2kmPMUu_lvfPJFZEhhC4cdJnMdhxD6iL4XpZqjDwBPaPPfRRCuFSwo2lOcM3jtEcUzwS2W_vDNN6Dl_aMNV116GHsMhJ9lPLax65UguXqVGy4DrrwFmSd72HZ6WlyHNlhwaQ/s640/TOIBJ.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Atribut Elemen <body></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumrn)</div>
<div class="separator" style="clear: both; text-align: justify;">
BGCOLOR = Warna (warna latar belakng dokumen, default putih)</div>
<div class="separator" style="clear: both; text-align: justify;">
TEXT = Warna (warna teks dokumen, default hitam)</div>
<div class="separator" style="clear: both; text-align: justify;">
LINK = Warna (warna link dokumen, default biru)</div>
<div class="separator" style="clear: both; text-align: justify;">
VLINK = Warna (warna visited link dokumen, default ungu)</div>
<div class="separator" style="clear: both; text-align: justify;">
ALINK = Warna (warna aktif link dokumen, default merah)</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Elemen Heading <h1>… <h6></div>
<div class="separator" style="clear: both; text-align: justify;">
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini akan memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Elemen yang dihilangkan di HTML5</div>
<div class="separator" style="clear: both; text-align: justify;">
Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5:</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<ul>
<li><acronym></li>
<li><applet></li>
<li><basefont></li>
<li><big></li>
<li><center></li>
<li><dir></li>
<li><font></li>
<li><frame></li>
<li><frameset></li>
<li><noframes></li>
<li><strike></li>
<li><tt></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: justify;">
Dokumen HTML5</div>
<div class="separator" style="clear: both; text-align: justify;">
Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor ataupun HTML </div>
<div class="separator" style="clear: both; text-align: justify;">
Editor :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> <! DOCTYPE HTML></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> <html> </span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> <head></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> <title>Tes HTML5</title></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> </head> </span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> <body></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> Selamat belajar HTML5</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> </body> </span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"> </html></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
Berikut ini penjelasan dari dokumen HTML5 di atas :</div>
<div class="separator" style="clear: both; text-align: justify;">
o Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen </div>
<div class="separator" style="clear: both; text-align: justify;">
dalam dokumen html.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan. Khusus </div>
<div class="separator" style="clear: both; text-align: justify;">
untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada </div>
<div class="separator" style="clear: both; text-align: justify;">
XHTML, tanda seperti / memang diharuskan untuk ditulis.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Pasangan <html>..</html> menyatakan awal dokumen HTML.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Di dalam <html>..</html> terdapat pasangan <head>..</head> dan <body>..</body>.</div>
<div class="separator" style="clear: both; text-align: justify;">
o Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling tidak </div>
<div class="separator" style="clear: both; text-align: justify;">
berupa pasangan <tittle>..</tittle>.</div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white;"></span></div>
<div class="separator" style="clear: both; text-align: justify;">
o Pasangan <body>..</body> menyatakan bagian tubuh dokumen. </div>
<div class="separator" style="clear: both; text-align: justify;">
Pada contoh, Selamat belajar HTML 5</div>
<div class="separator" style="clear: both; text-align: justify;">
Muncul pada badan dokumen. Apabila dibuka di web browser tampilannya sebagai berikut :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD30rzME0ioGLYFF56JR928gYkSixnbTojpQu7os6GPImxS6Od2xc53Jfd3xYafieq6fCAzF2Z4aFvmYFX4cjEBtSbrh-QsxNvilAkcP5bV3ZsK1lDRLYF8FdS83MZmrb6DGj5sjntRA/s1600/SDNJP.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD30rzME0ioGLYFF56JR928gYkSixnbTojpQu7os6GPImxS6Od2xc53Jfd3xYafieq6fCAzF2Z4aFvmYFX4cjEBtSbrh-QsxNvilAkcP5bV3ZsK1lDRLYF8FdS83MZmrb6DGj5sjntRA/s400/SDNJP.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Gambar Tampilan Dokumen HTML di Web Browser</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Gambar berikut ini memperlihatkan penjelasan secara visual terhadap dokumen HTML di depan.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYC_PzdhJRSugS9UhBfY92Rv6hleHU2tV7PD0M9UB_IC9ohIP-w6HPMhM-hpMx0iI0EPMkF4mjo9qB7cMJT2B76T5oRJE7wB_bv6-9S-l7DUGBEJcZlZ0xL1wE1FbyaTO5Qi1W7r9zg/s1600/OUNIU.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYC_PzdhJRSugS9UhBfY92Rv6hleHU2tV7PD0M9UB_IC9ohIP-w6HPMhM-hpMx0iI0EPMkF4mjo9qB7cMJT2B76T5oRJE7wB_bv6-9S-l7DUGBEJcZlZ0xL1wE1FbyaTO5Qi1W7r9zg/s640/OUNIU.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Gambar Penjelasan dokumen HTML</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
** Untuk selain HTML5 diwajibkan tidak menggunakan kode html ini "<!DOCTYPE HTML>" karena kode tersebut khusus HTML5 jika kode html tersebut digunakan maka, format HTML kalian buat akan bermasalah atau error</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
THANK'S FOR IS COMING MY BLOG ^_^</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-15988210028453090552016-09-08T06:18:00.000-07:002016-09-08T06:18:57.199-07:00Alur dan Perangkat Pengembangan Aplikasi Web<div dir="ltr" style="text-align: left;" trbidi="on">
<ul style="text-align: left;">
<li><h3>
Alur Pengembangan Aplikasi Web</h3>
</li>
</ul>
<div style="text-align: justify;">
Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli dalam bidang rekayasa perangkat lunak (software engineering professional), Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak. Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak, Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu, teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web. Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari print publishing dan pengambangan perangkat lunak, diantara marketing dan perhitungan dan diantara seni dan teknologi.</div>
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :<br />
<br />
<b>Formulasi (formulation)</b><br />
Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi berbasis web serta menentukan batasannya sistem.<br />
Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu :<br />
1. Tujuan yang bersifat informatif<br />
Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, audio, dan video.<br />
2. Tujuan yang bersifat fungsional<br />
<div style="text-align: justify;">
Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal dengan<br />
menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai akhir dan statistik nilai<br />
guru dari data-data ujian, tugas, kuis yang ia input ke dalam aplikasi.</div>
<div style="text-align: justify;">
<br /></div>
<b>Perencanaan (planning)</b><br />
<div style="text-align: justify;">
Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan jadwal pengembangan untuk versi selanjutnya (jika diperlukan).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: left;">
<b>Analisis (analysis)</b></div>
<div style="text-align: justify;">
Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang digunakan pada rekayasa web dilakukan dari empat sisi, yaitu :</div>
1. Analisis isi informasi<br />
Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi informasi dapat<br />
berupa teks, grafik, audio, maupun video.<br />
2. Analisis interaksi<br />
Analisis yang menunjukkan hubungan antara web dengan pengguna.<br />
3. Analisis fungsional<br />
Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan informasi kepada<br />
pengguna.<br />
4. Analisis konfigurasi<br />
Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau extranet. Selain<br />
itu, analisis ini juga meliputi relasi database dengan web jika diperlukan.<br />
<br />
<b>Rekayasa (engineering)</b><br />
<div style="text-align: justify;">
Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi dan desain arsitektur web.</div>
<div style="text-align: justify;">
Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :</div>
<ul style="text-align: left;">
<li>Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram gambar rangka adalah untuk menunjukkan bagaimana lay out halaman web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak pencarian, elemen bentuk dan sebagainya, tanpa desain grafis. Berikut ini contohnya :</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8T4TXLETC41qIrGNJK88ewoWGD7aRHpDekrVNX_jEkTXaXI2o2nu6YFryb48-VksCkrwK3oCKMcPd2VxZDTYJf-7Kz7D5C9bcwsVvuG_mTSuBFYSARh1RgRE8DdvdCnicA_YMsLty2g/s1600/IHI.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8T4TXLETC41qIrGNJK88ewoWGD7aRHpDekrVNX_jEkTXaXI2o2nu6YFryb48-VksCkrwK3oCKMcPd2VxZDTYJf-7Kz7D5C9bcwsVvuG_mTSuBFYSARh1RgRE8DdvdCnicA_YMsLty2g/s640/IHI.JPG" width="640" /></a></div>
<div style="text-align: center;">
Gambar Diagram Wireframe sebuah halaman web.</div>
<br />
<ul style="text-align: left;">
<li>Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara keseluruhan dan bagaimana halaman individual berhubungan satu sama lain. Gambar 2.2 menunjukkan diagram situs yang sangat sederhana</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ873pf_wnI8H-1l7I0UDDqBz5RHeuIifpd5kr_my2x2lYdAbnFuQmOKe2Jqkd-v5Z2kEwmiFJeu2KfCt1ysvU_pZQF1UU-X1MNS3OTWvLaTc_FGzxM9l9C5Y9oZ4guScz02HcZKR7Q/s1600/UIV.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ873pf_wnI8H-1l7I0UDDqBz5RHeuIifpd5kr_my2x2lYdAbnFuQmOKe2Jqkd-v5Z2kEwmiFJeu2KfCt1ysvU_pZQF1UU-X1MNS3OTWvLaTc_FGzxM9l9C5Y9oZ4guScz02HcZKR7Q/s400/UIV.JPG" width="400" /></a></div>
<div style="text-align: center;">
Gambar Diagram Situs</div>
<div style="text-align: center;">
<br /></div>
<ul style="text-align: left;">
<li>Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk menunjukkan langkah-langkah yang diperlukan untuk menyelesaikan tugas-tugas, opsi yang mungkin, dan juga memperkenalkan beberapa standar jenis halaman. Gambar 1-3 menunjukkan storyboard sederhana</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_mYJEM5pyiUic_sn0dAD4N1DEFYt4tG5HJsTE89FNqRIKeeq4Y4pM29abYQCk6pH7LYEB1Zubo84i7Bh_DH2E-v9mcLxhR_UwuLwP1VoqRensp6pgLTo-jFVs-qM5KABzX9ShynAIA/s1600/8OY8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="401" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_mYJEM5pyiUic_sn0dAD4N1DEFYt4tG5HJsTE89FNqRIKeeq4Y4pM29abYQCk6pH7LYEB1Zubo84i7Bh_DH2E-v9mcLxhR_UwuLwP1VoqRensp6pgLTo-jFVs-qM5KABzX9ShynAIA/s640/8OY8.JPG" width="640" /></a></div>
<div style="text-align: center;">
Gambar Desain Visual (Sumber: www.idwebhost.com, www.idebagus.com)</div>
<div style="text-align: center;">
<br /></div>
<h3 style="text-align: center;">
<b>Implementasi (page generation) & pengujian (testing)</b></h3>
<div style="text-align: justify;">
Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah dirumuskan pada tahap analisis.</div>
Dalam tahap pengembangan ini, meliputi kegiatan:<br />
<ul style="text-align: justify;">
<li><b>Authoring</b>, adalah istilah yang digunakan untuk proses mempersiapkan konten untuk nantinya diunggah di Web, atau lebih khusus, menandai konten dengan tag HTML yang menggambarkan isi dan fungsinya.</li>
</ul>
<ul style="text-align: left;">
<li><b>Styling</b>, dalam development web, penampilan halaman dalam browser dikendalikan oleh aturan style yang ditulis dalam CSS ( Cascading Style Sheets )</li>
</ul>
<ul style="text-align: justify;">
<li><b>Scripting dan pemrograman</b>, ada bahasa pemrograman web terkait diantaranya PHP, Ruby, Python, dan ASP.NET, yang berjalan pada server dan mengolah data dan informasi sebelum dikirim ke browser pengguna.</li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai macam pengguna, berbagai macam sistem operasi, perangkat keras, browser, protokol komunikasi, dll.</div>
Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :<br />
1. Pengujian fungsional dan operasional (fungsional and operational testing)<br />
<div style="text-align: justify;">
Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini. Hasil keluaran aplikasi<br />
bergantung dari teknologi yang digunakan, baik itu bahasa pemrograman maupun bahasa<br />
skrip yang digunakan. Untuk menguji code HTML dan CSS yang digunakan dapat menggunakan<br />
alat bantu W3C HTML Validation Service di http://validator.w3.org/ dan W3C CSS<br />
Validation Service di http://jigsaw.w3.org/css-validator/</div>
<div style="text-align: justify;">
<br /></div>
2. Pengujian navigasi (navigation testing)<br />
<div style="text-align: justify;">
Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan navigasi yang ada di<br />
aplikasi. Navigasi berhubungan dengan link-link yang terdapat didalam aplikasi. Untuk menguji<br />
link dapat digunakan alat bantu W3C Link Checker Service di http://validator.w3.org/checklink</div>
<div style="text-align: justify;">
<br /></div>
3. Pengujian konfigurasi (configuration testing)<br />
<div style="text-align: justify;">
Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras dan perangkat<br />
lunak pendukung. Pengujian ini dilakukan untuk menentukan batas toleransi kebutuhan aplikasi <br />
akan perangkat lunak dan perangkat keras pendukungnya.</div>
<br />
4. Pengujian keamanan dan performansi (security and performance testing)<br />
<div style="text-align: justify;">
Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara menguji aspek-<br />
aspek yang dapat menimbulkan gangguan keamanan aplikasi maupun server. Keamanan<br />
aplikasi sangat bergantung pada teknologi pengembangan website, konfigurasi server yang<br />
digunakan dan kelakuan sistem. Pengujian performansi dapat dilakukan bersamaan dengan<br />
pengujian keamanan aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari<br />
performansi server dan aplikasi tersebut.</div>
<div style="text-align: center;">
<span style="font-size: small;"> </span></div>
<div style="text-align: left;">
<span style="font-size: small;"> <b>Evaluasi oleh konsumen (customer evaluation)</b></span></div>
<div style="text-align: justify;">
Suatu kegiatan akhir dari siklus proses rekayasa web, akan menentukan apakah web yang telah selesai dibuat tersebut sesuai dengan yang mereka inginkan. Apabila aplikasi berbasis web ini belum sesuai dengan kehendak mereka, maka proses rekayasa web akan terus dilakukan dan dimulai lagi dari tahap formulasi untuk versi berikutnya.</div>
<div style="text-align: justify;">
<br /></div>
<b>Perangkat pengembangan aplikasi web</b><br />
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat keras dan perangkat lunak.<br />
<br />
<b>Perangkat Keras</b><br />
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang sebaiknya disediakan:<br />
<br />
<ul style="text-align: left;">
<li>Komputer Utama, dengan operating system Macintosh, Windows, ataupun Linux. Perusahaan pengembangan web profesional cenderung berbasis Macintosh.</li>
<li>Memori tambahan. sebaiknya computer memiliki memori yang besar, karena dalam pengembangan web cenderung kita akan membuka beberapa aplikasi sekaligus.</li>
<li>Sebuah monitor besar. Meskipun bukan keharusan, monitor besar memudahkan untuk desainer visual. Semakin besar monitor, semakin banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama.</li>
<li>Sebuah scanner dan / atau kamera digital. Jika mengantisipasi membuat gambar dan tekstur sendiri, akan memerlukan beberapa alat untuk membuat gambar.</li>
<li>Sebuah komputer kedua. Banyak web designer merasa berguna memiliki komputer penguji yang menjalankan platform yang berbeda dari komputer utama yang mereka gunakan untuk pengembangan. Karena browser kerja yang berbeda pada Mac dan pada mesin Windows, itu penting untuk menguji halaman web dalam sebanyak mungkin system operasi berbeda.</li>
<li>Perangkat mobile/smartphone. Saat ini banyak orang mengakses web melalui smartphone/tablet, sehingga kita perlu menguji penampilan dan kinerja situs web yang kita buat pada mobile browser pada smartphone atau perangkat tablet. Namun saat ini banyak web emulator yang dapat digunakan sebagai penguji web kita</li>
</ul>
<br />
<b>Perangkat Lunak</b><br />
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi beberapa, diantaranya :<br />
<br />
<br />
<b> 1. Web page authoring</b><br /> Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format yang<div>
dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” (What You See</div>
<div>
Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, itulah yang kamu</div>
<div>
dapatkan. Jadi aplikasi ini biasanya ketika membuat tampilannya seperti yang akan </div>
<div>
dihasilkan.<br /> Beberapa contoh aplikasi yang termasuk dalam kelompok ini :<br />
<br />
<ul style="text-align: left;">
<li>Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki banyak fasilitas dan fiture.</li>
<li>Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s suite yang merupakan aplikasi perancangan professional.</li>
<li>Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah sebuah aplikasi open source (sumber terbuka) yang cocok dengan banyak fitur dalam Adobe Dreamweaver, dan dapat diunduh secara gratis di nvu.com.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh232KNsrekk4Se9KQ3wxGZoaIXPAfO9xa4M2b3wuj9nP81lXLjQfnXRx1i7QfxpFruQCASsqwHPaDJGi-9f-oxRnQncA3ppQraiCdeQ4D-i3WFijtX3LMiljJdu9-ipnXRNNDPRIMAKA/s1600/TTH.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="481" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh232KNsrekk4Se9KQ3wxGZoaIXPAfO9xa4M2b3wuj9nP81lXLjQfnXRx1i7QfxpFruQCASsqwHPaDJGi-9f-oxRnQncA3ppQraiCdeQ4D-i3WFijtX3LMiljJdu9-ipnXRNNDPRIMAKA/s640/TTH.JPG" width="640" /></a></div>
</li>
</ul>
<div style="text-align: center;">
Gambar Tampilan aplikasi Adobe Dreamweaver CS6</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeN95mvdjREdBX0eR-MQ_WXiu9AIJafXhrQ_r-q8REE5R_yIiYNeKy7xLhBIab0ljqrs-P39ru8Uufv7QklXa8G1i3G8dJRKSofSMiBvJBFGmmJ7RqV-oV9o9k0H7ZyVZKhTsyUZ14wA/s1600/RE.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeN95mvdjREdBX0eR-MQ_WXiu9AIJafXhrQ_r-q8REE5R_yIiYNeKy7xLhBIab0ljqrs-P39ru8Uufv7QklXa8G1i3G8dJRKSofSMiBvJBFGmmJ7RqV-oV9o9k0H7ZyVZKhTsyUZ14wA/s640/RE.JPG" width="640" /></a></div>
<br />
<div style="text-align: center;">
Gambar Tampilan aplikasi Microsoft Expression Web </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpEt0drj2YjVzbq8Be33C0Tr0xVG90jyHb8mPOOJb2lfbD0-2wSwYG9vgRvvmuo74jKqwM0AI4-CA06qqrhuR4w6hueQrgWr1SpkgaiQnAQBMdgXu5luyFI8nF_ihuIKBJSe1dqPVCQ/s1600/KJKIU.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="472" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpEt0drj2YjVzbq8Be33C0Tr0xVG90jyHb8mPOOJb2lfbD0-2wSwYG9vgRvvmuo74jKqwM0AI4-CA06qqrhuR4w6hueQrgWr1SpkgaiQnAQBMdgXu5luyFI8nF_ihuIKBJSe1dqPVCQ/s640/KJKIU.JPG" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
Gambar Tampilan aplikasi Nvu </div>
<b><br /></b>
<b><br /></b>
<b> 2. Editor</b><br />
Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver<br />
Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is What You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang termasuk dalam<br />
kelompok ini :<br />
<br />
<ul style="text-align: left;">
<li>TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah untuk editor kode di Windows.</li>
<li>Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun memiliki banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi pengembang web.</li>
<li>Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang visual, alat-alat manajemen file, dan built-in akses terminal.</li>
<li>Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya fitur, dan murah.</li>
<li>BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang web banyak fitur shortcut yang besar telah membuat editor terkemuka berbasis Mac</li>
</ul>
<br /><br />
<br />
<b> Aplikasi editing gambar dan menggambar</b><br />
<b><br /></b>
Untuk menambahkan gambar ke halaman web, akan perlu program editing gambar. Berikut ini beberapa aplikasi yang cukup populer :<br />
<br />
<ul style="text-align: left;">
<li>Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri untuk penciptaan gambar baik dalam cetak maupun dunia web.</li>
<li>Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop dirancang untuk mengedit foto dan manajemen, tetapi beberapa penggemar menemukan bahwa ia memiliki semua alat yang diperlukan untuk menempatkan gambar pada halaman web.</li>
<li>Adobe Illustrator. Karena desainer perlu membuat logo, ikon, dan ilustrasi di berbagai ukuran dan resolusi, untuk itu semua aplikasi ini sangat membantu. Aplikasi ini juga dapat dipadukan dengan Photoshop</li>
<li>Adobe Fireworks. Program grafis web ini menggabungkan editor foto dengan alat untuk membuat ilustrasi berbasis vektor. Ia juga memiliki alat-alat canggih untuk grafis web.</li>
<li>Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang penuh fitur ini populer di pengguna Windows, terutama karena harga yang rendah.</li>
</ul>
<br /><br />
<br />
<b> Aplikasi Internet</b><br />
<b><br /></b>
Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut “browser”. Berikut ini beberapa aplikasi browser yang cukup populer :<br />
<br />
<ul style="text-align: left;">
<li>Windows:</li>
</ul>
o Internet Explorer<br />
o Chrome<br />
o Firefox<br />
o Safari<br />
o Opera<br />
<br />
<ul style="text-align: left;">
<li>Macintosh OS X:</li>
</ul>
<br />
o Safari<br />
o Chrome<br />
o Firefox<br />
o Opera<br />
<br />
<ul style="text-align: left;">
<li>Browser perangkat bergerak (mobile)</li>
</ul>
<br />
o Mobile Safari (iOS)<br />
o Android Browser (Android)<br />
o BlackBerry Browser (RIM)<br />
o Nokia Series 40 dan Nokia Browser for Symbian<br />
o Opera Mobile dan Mini (installed on any device)<br />
o Internet Explorer Mobile (Windows Phone)<br />
o Silk (Kindle Fire)<br />
<br />
<b><br /></b>
<b> Aplikasi transfer file (FTP/File Transfer Protokol).</b><br />
<br />
Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file antara komputer kita dan komputer yang akan menjadi tempat halaman web/web server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang tercantum di bawah ini:<br />
<br />
<ul style="text-align: left;">
<li>Windows</li>
<li>WS_FTP</li>
<li>CuteFTP</li>
<li>AceFTP</li>
<li>Filezilla</li>
<li>Macintosh</li>
<li>Transmit</li>
<li>Cyberduck</li>
</ul>
<br />
Fetch</div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com1tag:blogger.com,1999:blog-7404025584903010609.post-34631990942216931762016-08-01T22:00:00.002-07:002016-08-01T22:00:41.234-07:00Profesi dalam Pengembangan Pembuatan Aplikasi Web<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="font-size: x-large;">Profesi dalam Pengembangan Aplikasi Web</span></h2>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">1) Profesi dalam bidang Teknologi Informasi</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau TI. Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan segala aktifitas. Munculnya bidang TI yang baru juga memunculkan profesi di bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing.</div>
<div style="text-align: justify;">
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat dikelompokan sesuai bidangnya, misalnya.</div>
a.) Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak (software), baik<br />
mereka yang merancang sistem operasi, database maupun sistem aplikasi. Pada lingkungan<br />
kelompok ini, terdapat pekerjaan-pekerjaan seperti :<br />
*Sistem analis, merupakan orang yang bertugas menganalisa system yang akan di<br />
Implementasikan, mulai dari menganalisa system yang ada, kelebihan dan kekurangannya,<br />
sampai studi kelayakan dan desain system yang akan dikembangkan<br />
* Programer, merupakan orang yang bertugas mengimplementasikan rancangan system analis,<br />
yaitu membuat program ( baik aplikasi maupun system operasi ) sesuai system yang di<br />
analisa sebelumnya.<br />
* Web designer, merupakan orang yang melakukan kegiatan perencanaan, termasuk studi<br />
kelayakan, analisis dan desain terhadap suatu proyek pembuatan aplikasi berbasis web.<br />
* Web programmer, merupakan orang yang bertugas mengimplementasikan rancangan web<br />
designer, yaitu membuat program berbasis web sesuai desain yang telah dirancang<br />
sebelumnya.<br />
b.) Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras (hardware).<br />
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :<br />
* Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat system computer.<br />
* Networking engineer, adalah orang yang berkecimpung dalam bidang teknis jaringan<br />
computer dari maintenance sampai pada troubleshooting-nya.<br />
c.) Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional system informasi.<br />
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :<br />
*EDP Operator, adalah orang yang bertugas mengoperasikan program-program yang <br />
berhubungan dengan electronic data processing dalam lingkungan sebuah perusahaan atau<br />
organisasi lainnya.<br />
*System Administrator, merupakan orang yang bertugas melakukan administrasi terhadap<br />
system, memiliki kewenangan menggunakan hak akses terhadap system, serta hal-hal lain yang berhubungan dengan pengaturan operasional sebuah system.<br />
<br />
<br />
<span style="font-size: large;">2) Profesi dalam pengembangan aplikasi web</span><br />
<br />
<div style="text-align: justify;">
Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, bagaimana dengan profesi yang berada dalam lingkungan pengembangan aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam pengembangan aplikasi web, diantaranya :</div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><b>Web Designer</b> </li>
</ul>
Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan<br />
<div style="text-align: left;">
tampilan sebuah website. Tugasnya adalah pendisainan tampilan situs (web) mulai dari </div>
<div style="text-align: left;">
pengolahan gambar, tata letak, warna, dan semua aspek visual situs. Fokus utama mereka </div>
<div style="text-align: left;">
adalah tampilan / layout dari web. Mereka lebih konsen dengan bagaimana halaman terlihat </div>
<div style="text-align: left;">
dan apakah berfungsi sempurna ketika sudah diberikan bahasa pemrograman. Didalam </div>
<div style="text-align: left;">
pendandanan suatu situs seorang Web Designer harus menguasai :</div>
- HTML, DHTML<br />
- Pengolah Gambar<br />
- Animasi, Movie (Film)<br />
<br />
<br />
<ul style="text-align: left;">
<li><b>Web Programmer</b></li>
</ul>
<br />
Web Programmer bertugas dalam melakukan pengcodingan atau pemograman sebuah website agar dinamis. dimana agar sebuah web tersebut dapat telihat mudah bagi seorang web<br />
admin. Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan situs<br />
misalnya menyangkut dengan transaksi, input output data dan database maka seorang Web<br />
Programmer yang akan mengerjakannya dengan membuat aplikasi-aplikasi yang berkerja<br />
diatas situs (web). Penguasaan yang biasanya harus dikuasai pada umumnya oleh Web<br />
Programmer :<br />
- CGI Perl, PHP, MySQL (Unix base)<br />
- ASP (NT base)<br />
- Java Script dan Applet<br />
<br />
<ul style="text-align: left;">
<li><b>Web Administrator</b></li>
</ul>
<br />
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi<br />
Server, baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang Web Administrator harus menguasai :<br />
- OS Unix (LInux, FreeBSD, dll)<br />
- OS NT<br />
- Jaringan (LAN, WAN, Intranet)<br />
- Keamanan Server<br />
<br />
<br />
<b><ul style="text-align: left;">
<li><b>Web Master</b></li>
</ul>
</b> Seorang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari<br /> desain, program dan keamanan server namun tidak terlalu turut mencampuri ke masing-<br /> masing divisi, cukup dengan mempertanggun jawabkan atas jalannya suatu situs (web). <br /> Penguasaan yang harus dimiliki :<br /> - HTML, DHTML<br /> - CGI Perl, PHP, MySQL, ASP, Java<br /> - Penguasaan bermacam OS (Operating System)<br /> - Keamanan Server<br /> - Jaringan (LAN, WAN, Intranet)<div>
<br /><br />
<br />
<ul style="text-align: left;">
<li><b>Web Developer</b></li>
</ul>
<br />
Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan Web<br />
Developer. Web developer memberi bantuan seperti konsultasi web, konsep web yang akan<br />
di buat, membangun sebuat website.<br />
<br />
<div style="text-align: justify;">
Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena tidak semua orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai sebuah profesi yaitu jika seseorang sudah ahli di dalam bidang pekerjaan tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai sebuah profesi adalah web designer, web programmer, web administrator, web master dan web developer karena dalam bidang tersebut seseorang memang sudah memiliki keahlian di dalamnya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<span style="font-size: large;">3) Sejarah web</span><br />
<br />
<div style="text-align: justify;">
Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat dikirimkan antar komputer, termasuk email, transfer file (File Transfer Protocol), dan banyak layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai protokol.</div>
<div style="text-align: justify;">
World Wide Web, biasa lebih terkenal disingkat sebagai WWW adalah suatu ruang informasi yang dipakai oleh pengenal global yang disebut URL (Uniform Resource Locator) untuk mengenal pasti sumber daya berguna. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada Internet.</div>
<div style="text-align: justify;">
WWW merupakan kumpulan web server dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama. WWW adalah bagian yang paling menarik dari Internet. Melalui web, para pengguna dapat mengakses informasi-informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan animasi.</div>
<div style="text-align: justify;">
Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang peladennya tersebar di lima benua termasuk Indonesia yang terhubung menjadi satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language).</div>
<div style="text-align: justify;">
Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman lewat teks ini disebut pranala. Dokumen infomasi ini tidak hanya terdiri dari teks tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan antar-dokumen yang seperti itu biasa disebut hipermedia.</div>
<div style="text-align: justify;">
Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik pranala (hyperlink), maka para pengguna bisa berpindah dari satu dokumen ke dokumen lainnya.</div>
<div style="text-align: justify;">
WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat yang dikenal sebagai WWW.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTb9D7TVGkGo71ojHCoGwaGAiJbGbgChgVPiAeCA3Dk-GVukYQT8xq_gKb4nH_nnEn4HkeLkMmNn7la3KLkLzBasj6_sGlgSymdpwU5U3NBjh-HhByxgPt2XqIGLTpRSPoZs43hV4LjA/s1600/w4ttgq3au.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTb9D7TVGkGo71ojHCoGwaGAiJbGbgChgVPiAeCA3Dk-GVukYQT8xq_gKb4nH_nnEn4HkeLkMmNn7la3KLkLzBasj6_sGlgSymdpwU5U3NBjh-HhByxgPt2XqIGLTpRSPoZs43hV4LjA/s400/w4ttgq3au.JPG" width="291" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<span style="text-align: left;">Gambar Tim Berners-Lee </span></div>
<div style="text-align: justify;">
<span style="text-align: left;"><br /></span></div>
<div style="text-align: justify;">
WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN : Organisation Europeenne pour la Recherche Nucleaire), Jenewa, Swiss. Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide Web' sudah dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan Internet.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRG-jIWddFwHSgQh5xTvLWgKmF6aGvAM9Mm5dRYMtLgEY3PzVh_tuIYBarIIGPv3pSNINZvXpd-fNotrLTYRTZ5k0bmBJ71Uxwz0akJXugaMzFLCGJtX4FE0NVypBGyjorDQfsIgziw/s1600/fewgfweg.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRG-jIWddFwHSgQh5xTvLWgKmF6aGvAM9Mm5dRYMtLgEY3PzVh_tuIYBarIIGPv3pSNINZvXpd-fNotrLTYRTZ5k0bmBJ71Uxwz0akJXugaMzFLCGJtX4FE0NVypBGyjorDQfsIgziw/s640/fewgfweg.JPG" width="587" /></a></div>
<br />
<div style="text-align: center;">
Gambar Website CERN http://home.web.cern.ch</div>
<br />
<b>Standart Web</b><br />
<div style="text-align: justify;">
HTML (Hypertext Markup Language) merupakan bahasa standar web yang didefinisikan dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium). HTML dibuat dan dikembangkan oleh Tim Berners-Lee. Selanjutnya , bahasa tersebut dipopulerkan oleh browser Mosaic. Selama tahun 90-an telah muncul berbagai versi HTML dengan berbagai macam fiturnya. Versi HTML yang ada tersebut antara lain:</div>
<div style="text-align: justify;">
<br /></div>
1) Versi 1.0<br />
Merupakan versi pertama setelah lahirnya HTML dan mempunyai kemampuan seperti<br />
untuk heading, paragraph, hypertext, list, cetak tebal, dan cetak miring pada teks. Selain<br />
itu juga dukungan peletakan image pada dokumen dengan tidak memperbolehkan<br />
peletakan teks di sekelilingnya (wrapping).<br />
<br />
2) Versi 2.0<br />
Diliris pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan seperti penambahan form. Hal ini menjadi pionir untuk membuat sebuah web yang interaktif.<br />
<br />
3) Versi 3.0<br />
Diliris pada tanggal 18 Desember 1997, yang dikenal dengan HTML+. Versi ini<br />
memiliki beberapa vitur tambahan seperti fitur table dalam paragraph.<br />
<br />
4) Versi 3.2<br />
Diliris pada buan Mei 1998, merupakan versi terbaru penyempurnaan dari versi 3.0.<br />
<br />
5) Versi 4.0<br />
Diliris pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur seperti<br />
adanya ink, imagemaps, image, dan lain-lain.<br />
<br />
6) Versi 5.0<br />
Diliris pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML, dan DOM<br />
HTML. HTML5 ini merupakan proyek kerja sama antara W3C (World Wide Web <br />
Consurtium) dan WHATG (Web Hypertext Application Technology Working Group).<br />
<br />
Spesifikasi HTML5 belum final saat ini, tetapi diyakini oleh banyak orang akan menjadi standar yang diterima di masa depan. Beberapa browser sudah mendukung HTML5.<br />
<div style="text-align: center;">
<b>Browser yang mendukung HTML5 </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeup_Dozr4jRtmzPrSy718xWKQWCJyu3_m2Fwkcdp-ASZ_NWUWBID2gcWTZOJyuGPAUPorf7-L_le2pPrVyhWh61rEj8VMJm2IGIt1LSx3HubhBdF7GBtKxsq8m6Yz40WlsoYpFIZ8NA/s1600/dantg.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeup_Dozr4jRtmzPrSy718xWKQWCJyu3_m2Fwkcdp-ASZ_NWUWBID2gcWTZOJyuGPAUPorf7-L_le2pPrVyhWh61rEj8VMJm2IGIt1LSx3HubhBdF7GBtKxsq8m6Yz40WlsoYpFIZ8NA/s400/dantg.JPG" width="400" /></a></div>
<div style="text-align: justify;">
Pada HTML5, dalam menuliskan tag dan atribut dengan huruf kecil tidak ada lagi. Diberi kebebasan untuk menggunakan huruf kecil, huruf capital, atau kombinasinya. Bahkan, nilai suatu atribut akan diberi tanda petik atau tidak sama saja. Browser tidak lagi mempedulikan hal-hal seperti itu.</div>
<br />
<br />
<span style="font-size: large;">4) Cara kerja web</span><br />
<span style="font-size: large;"><br /></span>
<div style="text-align: justify;">
Sebuah web browser adalah program perangkat lunak yang gunakan untuk mengakses World Wide Web dari Internet. Browser pertama, yang disebut NCSA Mosaic, dikembangkan di Pusat Nasional untuk Aplikasi Super Komputer di awal 1990-an. Yang mudah digunakan, cukup klak-klik sehingga membantu mempopulerkan Web.</div>
<div style="text-align: justify;">
Meskipun banyak browser yang berbeda yang tersedia, Microsoft Internet Explorer dan Mozilla Firefox yang jauh yang paling populer. (Banyak pengguna Mac lebih memilih browser Safar) Persaingan untuk mendominasi pasar telah membawa perbaikan terus-menerus untuk perangkat lunak. (keduanya didasarkan pada NCSA Mosaic) <span style="text-align: left;">dapat mendownload Internet Explorer dan Firefox secara gratis dari situs web masing-masing perusahaan. Jika sudah memiliki satu browser, dapat menguji yang lain. Juga mencatat bahwa ada sedikit perbedaan antara versi Windows dan Macintosh.</span></div>
<div style="text-align: justify;">
<span style="text-align: left;"><br /></span></div>
<b> Anatomi Browser</b><br />
Ketika pertama kali membuka browser web, biasanya dengan mengklik dua kali pada icon di<br />
desktop komputer, halaman web yang telah ditetapkan muncul. Halaman ini disebut sebagai<br />
halaman “home” atau halaman awal. Dengan Mozilla Firefox misalnya, mungkin akan dibawa ke<br />
halaman awal Mozilla atau ke halaman yang dipilih oleh penyedia layanan Internet. Tetapi jika<br />
ingin, dapat dengan mudah mengubah halaman awal tersebut.<br />
<br />
<div style="text-align: justify;">
World Wide Web sampai saat ini adalah bagian yang paling populer dari Internet. Setelah menghabiskan waktu di Web akan merasa bahwa tidak ada batas untuk apa yang dapat ditemukan. Web memungkinkan beragam komunikasi, juga memungkinkan untuk mengakses dan berinteraksi dengan teks, grafis, animasi, foto, audio dan video.</div>
<div style="text-align: justify;">
Jadi apa saja yang membentuk web ini? Pada tingkat yang paling sederhana, Web secara fisik terdiri dari komputer pribadi atau perangkat mobile, perangkat lunak web browser, sambungan ke penyedia layanan Internet, komputer yang disebut server yang disebut hosting dan router dan switch yang mengarahkan aliran informasi.</div>
<div style="text-align: justify;">
Ada banyak pilihan perangkat lunak server, tetapi dua yang paling populer adalah Apache (perangkat lunak open source untuk server) dan Internet Information Services (IIS ) dari Microsoft. Apache tersedia secara bebas untuk komputer berbasis Unix dan dapat diinstal pada Mac menjalankan Mac OS X. Ada versi Windows juga. Microsoft IIS adalah bagian dari keluarga Microsoft.</div>
<div style="text-align: justify;">
Setiap komputer dan perangkat (modem, router, smartphone, mobil, dll) yang terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari Internet Protocol). Sebagai contoh, komputer yang dihosting google.com memiliki alamat IP 173.194.34.99. Semua angka-angka tersebut dapat memusingkan, untungnya ada Domain Name System (DNS) yang dikembangkan untuk memungkinkan kita merujuk ke server dengan nama domainnya, "google.com ", juga. Alamat IP numerik berguna untuk perangkat lunak komputer, sedangkan nama domain adalah lebih mudah diakses oleh manusia. Pencocokan nama domain ke alamat IP numerik masing-masing adalah tugas dari server.</div>
<div style="text-align: justify;">
Hal ini dimungkinkan untuk mengkonfigurasi server web sehingga lebih dari satu nama domain dipetakan ke satu alamat IP, sehingga memungkinkan beberapa situs untuk berbagi server tunggal. Sebuah halaman web adalah dokumen elektronik yang ditulis dalam bahasa komputer yang disebut HTML, singkatan dari Hypertext Markup Language. Setiap halaman web memiliki alamat yang unik, yang disebut URL atau Uniform Eerources Locator yang mengidentifikasi di mana web server yang memuat dokumen web.</div>
<div style="text-align: justify;">
Sebuah website memiliki satu atau lebih halaman web terkait, tergantung pada bagaimana itu dirancang. Halaman web pada situs yang dihubungkan bersama melalui sistem hyperlink, memungkinkan untuk melompat di antara halaman web dengan mengklik pada link.</div>
<div style="text-align: justify;">
Halaman Web bervariasi dalam desain dan konten, tetapi banyak menggunakan format majalah tradisional. Di bagian atas halaman adalah “header” seperti kop surat atau gambar banner, kemudian daftar item dan artikel. Daftar item atau menu biasanya link ke halaman lain atau situs lain. Kadang-kadang link ini disusun dalam daftar, seperti indeks. Dapat juga kombinasi dari keduanya. Sebuah halaman web mungkin juga menggunakan gambar sebagai link ke konten lainnya.</div>
<div style="text-align: justify;">
Bagaimana bisa membedakan mana teks yang ada tautan/link? Link muncul dalam warna yang berbeda dari teks - biasanya dengan warna biru dan sering digarisbawahi. Bila memindahkan kursor di atas link teks atau melalui link grafis, perubahan icon dari panah ke tangan.</div>
Web adalah media yang dinamis. Untuk mendorong pengunjung untuk kembali ke sebuah situs, banyak penerbit web sering memperbarui konten. Itulah yang membuat Web sangat menarik.<br />
<b><br /></b>
<b>Memahami Alamat Web</b><br />
<div style="text-align: justify;">
World Wide Web adalah koleksi besar file elektronik yang tersimpan di jutaan komputer di seluruh dunia. Uniform Resource Locators atau URL adalah alamat yang digunakan untuk menemukan file. Informasi yang terkandung dalam URL memberi kemampuan untuk berpindah dari satu halaman web yang lain hanya dengan klik. Ketika mengetik URL ke browser atau klik link hypertext, browser mengirim permintaan ke komputer remote, yang disebut server web, untuk men-download satu atau lebih file. Setiap URL unik, mengidentifikasi satu file tertentu.</div>
Apa yang dari khas URL? Berikut adalah beberapa contoh :<br />
<br />
-> http://belajar.kemdikbud.go.id/<br />
Halaman Rumah Belajar Kementrian Pendidikan dan Kebudayaan.<br />
<br />
-> http://www.facebook.com/pustekkom<br />
Halaman Facebook untuk Pusat Teknologi Informasi - Kementrian Pendidikan dan <br />
Kebudayaan.<br />
-> ftp://rtfm.mit.edu/pub/<br />
Sebuah direktori file di MIT tersedia untuk di-download.<br />
-> news : rec.gardens.roses<br />
Sebuah newsgroup dengan topik berkebun.<br />
-> http://blogs.reuters.com/soccer<br />
Sebuah blog tentang sepak bola dari kantor berita Reuters<br />
<br />
Bagian pertama dari URL ( sebelum dua garis miring ) memberitahu jenis sumber daya atau metode akses di alamat itu. Sebagai contoh:<br />
http : dokumen hypertext atau direktori<br />
ftp : file yang tersedia untuk di-download atau direktori file tersebut<br />
news : newsgroup<br />
file : file yang terletak pada drive lokal komputer Anda<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bagian kedua biasanya adalah alamat komputer di mana data atau layanan berada. Bagian tambahan mungkin menentukan nama file, port untuk menghubungkan ke, atau teks untuk mencari dalam database.</div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"> Bagian-bagian dari URL</span><br />
<br />
Sebuah URL lengkap umumnya terdiri dari tiga komponen : protokol, nama situs, dan path absolut ke dokumen atau sumber daya, seperti yang ditunjukkan pada Gambar berikut.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EKCJbqAIx3e-MlJeD-ZEMziA-seov7xgMnWaGaDcZdahZ-gjFGQSqNe9VAGrcNOXYaomZMRinLulYpFzhxjnVCLGb4Lmp1jsr406Ifcxc5_tqynsL9QmslOYAsvMUrUVbuOOW5aQWg/s1600/thwoi.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EKCJbqAIx3e-MlJeD-ZEMziA-seov7xgMnWaGaDcZdahZ-gjFGQSqNe9VAGrcNOXYaomZMRinLulYpFzhxjnVCLGb4Lmp1jsr406Ifcxc5_tqynsL9QmslOYAsvMUrUVbuOOW5aQWg/s640/thwoi.JPG" width="640" /></a></div>
<div style="text-align: center;">
Gambar Sebuah contoh URL</div>
<div style="text-align: center;">
<br /></div>
<b> http://</b><br />
<div style="text-align: justify;">
Hal pertama yang dilakukan adalah URL menentukan protokol yang akan digunakan untuk transaksi tertentu. Aturan HTTP membiarkan server tahu untuk menggunakan Hypertext Transfer Protocol, atau masuk ke dalam "modus web"</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b> www.example.com</b> </div>
<div style="text-align: justify;">
Bagian berikutnya dari URL mengidentifikasi situs dengan nama domainnya. Dalam contoh ini, nama domain adalah example.com. www di bagian awal adalah nama host tertentu di domain tersebut. Nama host " www " telah menjadi sebuah kesepakatan. Tetapi, kadang-kadang nama host dapat dihilangkan. Bisa lebih dari satu website di domain (kadang-kadang disebut subdomain). Misalnya, ada : development.example.com, clients.example.com, dan sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<b> /2012/samples/first.html</b><br />
<div style="text-align: justify;">
Ini adalah path absolut melalui direktori pada server ke dokumen HTML yang diminta, first.html. Kata-kata dipisahkan oleh garis miring adalah nama direktori, dimulai dengan direktori root dari host ( seperti yang ditunjukkan oleh awal /), URL pada Gambar 1.3. mengatakan ingin menggunakan protokol HTTP untuk terhubung ke server web di Internet disebut www.example.com dan meminta first.html dokumen ( terletak di direktori sampel yang ada di direktori 2012).</div>
<br />
Sebagian dari URL yang akan menggunakan start dengan http, yang merupakan singkatan dari Hypertext Transfer Protocol, metode yang file HTML yang ditransfer melalui Web. Berikut adalah beberapa hal-hal lain untuk mengetahui tentang URL :<br />
- Sebuah URL biasanya tidak memiliki spasi.<br />
- Penulisan URL tidak sensitif huruf besar-kecil. Jadi mengetik "http://www.kemdikbud.go.id"<br />
atau "HTTP://WWW.KEMDIKBUD.GO.ID" atau variasi huruf besar dan kecil akan membawa<br />
ke halaman yang sama.<br />
<br />
<div style="text-align: justify;">
Jika mengetik URL tidak benar, browser tidak akan dapat menemukan situs atau sumber daya yang inginkan. Jika mendapatkan pesan error atau mengakses situs yang salah, periksalah untuk melihat apakah mengeja alamat dengan benar.</div>
<div style="text-align: justify;">
<br /></div>
<b> File standar</b><br />
<div style="text-align: justify;">
Tidak setiap URL adalah terlihat begitu panjang. Banyak alamat tidak termasuk nama file, tapi hanya menunjuk ke sebuah direktori, seperti ini :</div>
<div style="text-align: justify;">
http://www.w3schools.com/ </div>
<div style="text-align: justify;">
http://w3schools.com/html/ </div>
<div style="text-align: justify;">
Ketika server menerima permintaan untuk nama direktori bukan file tertentu, terlihat dalam direktori tersebut untuk dokumen default, biasanya bernama index.html. Jadi, sebenarnya secara tidak langsung, kita mengetikkan alamat lengkap seperti ini (sebagai contoh jika index.html sebagai default) : http://www.w3schools.com/index.html</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nama file default ( juga disebut sebagai file indeks) dapat bervariasi, dan tergantung pada bagaimana server dikonfigurasi. Dalam contoh ini, dinamai index.html, tetapi beberapa server menggunakan nama file default.htm. Jika situs menggunakan pemrograman server-side untuk menghasilkan halaman, file indeks mungkin diberi nama index.php atau index.asp.</div>
<div style="text-align: justify;">
Hal lain yang perlu diperhatikan adalah bahwa dalam contoh pertama, URL asli tidak memiliki garis miring untuk menunjukkan itu adalah sebuah direktori. Ketika slash dihilangkan, server hanya menambahkan satu jika menemukan direktori dengan nama itu.</div>
<div style="text-align: justify;">
File index ini juga berguna untuk keamanan. Beberapa server ( tergantung pada konfigurasi mereka) menampilkan isi direktori jika file default tidak ditemukan. Salah satu cara untuk mencegah orang melihat file-file pada direktori adalah memastikan ada file index di setiap direktori. Administrator server juga dapat menambahkan perlindungan lain untuk mencegah direktori ditampilkan di browser.</div>
<div style="text-align: justify;">
Setelah file index dibuka oleh browser, maka akan disajikan seluruh informasi yang ada dalam dokumen HTML dari file tersebut. Sebagai contoh dapat dilihat pada gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_cfyhFqRyTM6IKHzN-JaoeVyr7CmDXX4K71TLy7q5FsvBdFazFV-ORBv7G_Az4kpQS6MCSeANmB_oiGaWRtXfBtkW8wy6RFDXOzu4OXzA7qLya8-z6lpzPl2pYOkqHzXyYTOK2jzRw/s1600/sghmloo.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_cfyhFqRyTM6IKHzN-JaoeVyr7CmDXX4K71TLy7q5FsvBdFazFV-ORBv7G_Az4kpQS6MCSeANmB_oiGaWRtXfBtkW8wy6RFDXOzu4OXzA7qLya8-z6lpzPl2pYOkqHzXyYTOK2jzRw/s640/sghmloo.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
Gambar Contoh Web</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Di bagian atas Gambar menampilkan halaman web minimal seperti yang muncul dalam browser. Meskipun terlihat sebagai satu halaman yang koheren, sebenarnya dirakit dari empat file terpisah: dokumen HTML ( index.html ), sebuah style sheet ( kitchen.css ), dan dua grafis (foods.gif dan spoon.gif). Dokumen HTML akan menampilkan semuanya.</div>
</div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com0tag:blogger.com,1999:blog-7404025584903010609.post-16909065724539159602016-08-01T00:27:00.003-07:002016-08-01T00:27:59.833-07:00Modul Pembelajaran RPL (Rekayasa Perangkat Lunak)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<h2>
<b>PETA KEDUDUKAN BAHAN AJAR</b></h2>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Peta kedudukan bahan ajar merupakan suatu diagram yang menjelaskan struktur mata pelajaran dan keterkaitan antar mata pelajaran dalam satu kelompok bidang paket keahlian. Gambar 1 menjelaskan peta kedudukan bahan ajar untuk paket keahlian rekayasa perangkat lunak . Kelompok C1 merupakan kelompok mata pelajaran wajib dasar bidang kejuruan. C2 merupakan kelompok mata pelajaran wajib dasar kompetensi kejuruan dan C3 merupakan kelompok mata pelajaran wajib paket keahlian.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNRl6aRcEOO5IA_uaG8wx7haJKP7T3ip2afOHQGiea55ohmDjqEjwjg2fAI3g581XkmuxnzuzQNHlw2GEHo7nQFSDcXpHRVsY-ANyN75w1n4J4S-Y5p1j77fi2scTqX-pbxlCS2Q1oQ/s1600/qef.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="381" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNRl6aRcEOO5IA_uaG8wx7haJKP7T3ip2afOHQGiea55ohmDjqEjwjg2fAI3g581XkmuxnzuzQNHlw2GEHo7nQFSDcXpHRVsY-ANyN75w1n4J4S-Y5p1j77fi2scTqX-pbxlCS2Q1oQ/s400/qef.JPG" width="400" /></a></div>
<br />
<div style="text-align: center;">
Gambar Peta Kedudukan Bahan Ajar Kelompok C2</div>
<div style="text-align: center;">
Mata Pelajaran Pemrograman Web</div>
<br />
<div style="text-align: justify;">
Sementara itu peta konsep mata pelajaran menjelaskan struktur urutan kegiatan belajar dan topik materi pelajaran. Gambar 2 dibawah ini menjelaskan peta konsep mata pelajaran Pemrograman web untuk kelas X semester 1.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcK1hBzYlBqyl8CaiqKk-gm2Gfyk3KRqynVhh_EJZjuNo3xroNsgxJhTxTzSH3gl31d5_3vqc3muCom_5x7l4QSjHnnTZTY0EmM-3APbfhDpVg1FTds3Qf9Cq0_Fx3wqu2gVsYj_ucqw/s1600/ekfkef%2527.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcK1hBzYlBqyl8CaiqKk-gm2Gfyk3KRqynVhh_EJZjuNo3xroNsgxJhTxTzSH3gl31d5_3vqc3muCom_5x7l4QSjHnnTZTY0EmM-3APbfhDpVg1FTds3Qf9Cq0_Fx3wqu2gVsYj_ucqw/s400/ekfkef%2527.JPG" width="400" /></a></div>
<br />
<div style="text-align: center;">
Gambar Peta Konsep Mata Pelajaran Pemrograman Web Kelas X Semester 1</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<b><span style="font-size: large;">BAB 1 PENDAHULUAN</span></b><br />
<br />
<b>A. Diskripsi</b><br />
<div style="text-align: justify;">
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.</div>
<div style="text-align: justify;">
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari HTML untuk pembuatan halaman web juga merupakan materi pokok pada pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai dengan kaidah/aturan yang berlaku.</div>
<div style="text-align: justify;">
<br /></div>
<b>B. Prasyarat</b><br />
<div style="text-align: justify;">
Untuk kelancaran pencapaian kompetensi dalam mata pelajaran pemrograman web ini dibutuhkan beberapa peryaratan baik pengetahuan maupun ketrampilan dasar. Persyaratan tersebut antara lain ialah: peserta didik mempunyai kompetensi dalam hal pemanfaatan teknologi informasi, seperti mengoperasikan hardware komputer dan mengoperasikan perangkat lunak aplikasi. Perangkat lunak aplikasi tersebut antar lain ialah pengolah data untuk menganalisis data hasil eksperimen, pengolah kata untuk membuat laporan dan aplikasi presentasi untuk mengkomunikasikan dan mempresentasikan hasil laporan.</div>
<b><br /></b>
<b>C. Petunjuk</b><br />
<div style="text-align: justify;">
Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang mempunyai ciri khas penggunaan metode scientific. Buku ini terdiri dari dua bab yaitu bab satu pendahuluan dan bab dua pembelajaran. Dalam bab pendahuluan beberapa yang harus dipelajari peserta didik adalah diskripsi mata pelajaran yang berisi informasi umum, rasionalisasi dan penggunaan metode scientifik. Selanjutnya pengetahuan tentang persyaratan, tujuan yang diharapkan, kompetensi inti dan dasar yang akan dicapai serta test kemampuan awal.</div>
<div style="text-align: justify;">
Bab dua menuntun peserta didik untuk memahami deskripsi umum tentang topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan kompetensi dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari tujuan dan uraian materi topik pembelajaran, tugas serta test formatif. Uraian pembelajaran berisi tentang diskripsi pemahaman topik materi untuk memenuhi kompetensi pengetahuan. Uraian pembelajaran juga menjelaskan deskripsi unjuk kerja atau langkah-langkah logis untuk memenuhi kompetensi skill.</div>
Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas praktek, eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang dilakukan melalui beberapa tahapan scientifik yaitu : 1) melakukan pengamatan setiap tahapan unjuk kerja<br />
2) melakukan praktek sesuai dengan unjuk kerja<br />
3) mengumpulkan data yang dihasilkan setiap tahapan<br />
4) menganalisa hasil data menggunakan analisa diskriptif<br />
5) mengasosiasikan beberapa pengetahuan dalam uraian materi pembelajaran untuk <br />
membentuk suatu kesimpulan<br />
6) mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan tersebut<br />
merupakan tagihan yang akan dijadikan sebagai salah satu referensi penilaaian.<br />
<br />
<b>D. Tujuan Akhir</b><br />
<div style="text-align: justify;">
Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan dan ketrampilan yang berkaitan dengan materi:</div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Teknologi aplikasi web</li>
<li>Format teks halaman web</li>
<li>Multimedia pada halaman web</li>
<li>Hyperlink halaman web</li>
<li>Format halaman web</li>
</ul>
<b>E. Kompetensi inti dan kompetensi dasar</b><br />
1.) Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang dianutnya.<br />
Kompetensi Dasar :<br />
1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan keteraturan dan<br />
kompleksitas alam dan jagad raya terhadap kebesaran Tuhan yang menciptakannya<br />
1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di alam<br />
1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam kehidupan sehari-<br />
hari.<br />
<div style="text-align: left;">
2.) Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin, tanggung jawab, </div>
<div style="text-align: left;">
peduli (gotong royong, kerjasama, toleran, damai), santun, responsif dan proaktif dan</div>
<div style="text-align: left;">
menunjukan sikap sebagai bagian dari solusi atas berbagai permasalahan dalam berinteraksi</div>
<div style="text-align: left;">
secara efektif dengan lingkungan sosial dan alam serta dalam menempatkan diri sebagai</div>
<div style="text-align: left;">
cerminan bangsa dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia.</div>
Kompetensi Dasar:<br />
<div style="text-align: justify;">
2.1. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti; cermat;</div>
<div style="text-align: justify;">
<span style="color: white;"> </span>tekun; hati-hati; bertanggung jawab; terbuka; kritis; kreatif; inovatif dan peduli </div>
<div style="text-align: justify;">
lingkungan) dalam aktivitas sehari-hari sebagai wujud implementasi sikap dalam </div>
<div style="text-align: justify;">
<span style="color: white;"> </span>melakukan percobaan dan berdiskusi.</div>
<div style="text-align: justify;">
2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujud</div>
<div style="text-align: justify;">
implementasi melaksanakan percobaan dan melaporkan hasil percobaan.</div>
<div style="text-align: justify;">
<div style="text-align: left;">
3.) Kompetensi Inti 3: Memahami,menerapkan dan menganalisis pengetahuan faktual, konseptual</div>
<div style="text-align: left;">
dan prosedural berdasarkan rasa ingintahunya tentang ilmu pengetahuan, teknologi, seni,</div>
<div style="text-align: left;">
budaya, dan humaniora dalam wawasan kemanusiaan kebangsaan, kenegaraan, dan </div>
<div style="text-align: left;">
peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik untuk</div>
<div style="text-align: left;">
memecahkan masalah.</div>
</div>
Kompetensi Dasar:<br />
3.1. Memahami konsep teknologi aplikasi web<br />
3.2. Memahami format teks pada halaman web<br />
3.3. Memahami format tabel pada halaman web<br />
3.4. Memahami tampilan format multimedia<br />
3.5. Memahami format kaitan pada halaman web<br />
3.6. Memahami format formulir pada halaman web<br />
<div style="text-align: justify;">
4.) Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak</div>
<div style="text-align: justify;">
terkait dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu</div>
<div style="text-align: justify;">
melaksanakan tugas spesifik dibawah pengawasan langsung.</div>
<div style="text-align: justify;">
<span style="text-align: left;"> Kompetensi Dasar:</span></div>
4.1. Menyajikan pelbagai teknologi pengembangan aplikasi web<br />
4.2. Menyajikan teks dalam format tertentu pada halaman web<br />
4.3. Menyajikan tabel pada halaman web<br />
4.4. Menyajikan tampilan format multimedia pada halaman web<br />
4.5. Menyajikan format kaitan pada halaman web<br />
4.6. Menyajikan formulir pada halaman web<br />
4.7. Menyajikan style tertentu pada halaman web<br />
<b><br /></b>
<b>F. Diskripsi</b><br />
<div style="text-align: justify;">
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.</div>
<div style="text-align: justify;">
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari HTML untuk pembuatan halaman web juga merupakan materi pokok pada pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai dengan kaidah/aturan yang berlaku.<br />
<br />
<br />
<br />
<br />
Thank's gan have seen this article <span class="_21wj" data-offset-key="t7p2-0-0" style="background-color: white; background-image: url("https://www.facebook.com/images/emoji.php/v5/z6/1/32/1f642.png"); background-repeat: no-repeat; background-size: contain; color: #1d2129; font-family: helvetica, arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; vertical-align: bottom; white-space: pre-wrap; width: auto;"><span class="_21wk" style="font-family: inherit;"><span data-offset-key="t7p2-0-0" style="font-family: inherit;"><span data-text="true" style="font-family: inherit;"> </span></span></span></span><span class="_21wj" data-offset-key="t7p2-1-0" style="background-color: white; background-image: url("https://www.facebook.com/images/emoji.php/v5/z8c/1/32/1f604.png"); background-repeat: no-repeat; background-size: contain; color: #1d2129; font-family: helvetica, arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; vertical-align: bottom; white-space: pre-wrap; width: auto;"><span class="_21wk" style="font-family: inherit;"><span data-offset-key="t7p2-1-0" style="font-family: inherit;"><span data-text="true" style="font-family: inherit;"> </span></span></span></span></div>
</div>
Mas Codehttp://www.blogger.com/profile/07851525281686245554noreply@blogger.com1