Membuat Syntax Highlighter Ringan dengan CSS di Blogger - Syntax Highlighter merupakan tempat/area yang menyoroti kode program dimana dipasang pada postingan blogger, agar pengunjung bisa mengenali mana kode program dan mana tulisan biasa. Cara ini biasanya di pasang untuk blog yang berisi tutorial - tutorial program. Berbeda apabila tidak dipasang syntax highlighter, pengunjung besar kemungkinan akan bingung karena tidak bisa mengenali mana kode program dan mana tulisan biasa, selain itu nilai estetika dan kerapiannya berkurang. Karena tentu kode program yang akan kamu share tidak selamanya pendek dalam artian hanya satu dua baris saja, mungkin bisa lebih dari sepuluh baris, dari situ akan membuat pengunjung pusing membaca di blog kamu.

Jika blog kamu isi artikelnya berisi tutorial kode program, yang tentu nya harus membagikan secara langsung di dalam postingan tersebut. Berarti kamu tidak salah membuka artikel ini, lanjutkan saja membacanya.

Artikel lainnya : Cara Mudah Memasang Parse HTML di Blogger

Syntax Highlighter ini kalo kata saya sangat ringan karena hanya HTML dan CSS saja, yang tidak akan membuat blog kamu menjadi berart setelah memasang syntax highlighter ini. Selain itu, dari sisi estetika desain nya cukup bagus dan soft.

Cara Memasang Syntax Highlighter di Blogger

Sebelum memasang syntax highlighter ini di cek dulu apakah terpasang kode .post-body pre dan .post-body pre code, lebih baik di hapus dulu.

Baik sekarang masuk ke teknis memasang syntax highlighter nya di blogger.

• Masuk ke blog, lalu ke menu Tema dan pilih Edit HTML
• Copy kode dibawah ini dan paste kan diatas kode ]]></b:skin>

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Terakhir tempatkan kode di bawah ini pada postingan kamu, pada menu HTML

<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Jika tidak berhasil, pada kode CSS diatas bisa di hapus kode .post-body nya saja.
Bagaimana mudah bukan Membuat Syntax Highlighter di Blogger nya, ini dibuat pure CSS dan HTML saja, apabila ingin membuat tulisan nya ada warna - warni nya bisa dibantu dengan JS, tapi kemungkinan akan agak berat pada saat membuka postingan.

Membuat Syntax Highlighter Ringan dengan CSS di Blogger - Parse HTML merupakan suatu tools untuk melakukan convert kode iklan ke bahasa yang di mengerti blogger, yang mana blogger sendiri pada struktur post nya menggunakan xml. Cara ini sangat cocok bagi kamu seorang publisher iklan contoh nya iklan adsense yang ingin di tempatkan didalam postingan. Biasa nya ditempatkan pada bagian atas / tengah / bawah postingan.

(Artikel lainnya : Cara Mudah Menghitung Jumlah Data pada Tabel di Database)

Tools parse ini pasti akan selalu dibutuhkan sampai kapanpun selama Cara ini sangat mudah bahkan oleh newbie sekalipun, karena secara teknis mungkin hanya 2 sampai 3 langkah saja agar tools parse ini bisa terpasang di blogger kamu.

Barangkali ada yang penasaran, seperti apa si Alat Parse kode HTML. Seperti ini, salah contoh dari alat parse kode HTML ini


Berikut ini kode dari parse HTML

<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script><br />
<table style="margin:0 auto"><tbody>
<tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px"></textarea><br/>
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></td> </tr>
</tbody></table>

Disini kamu bisa tempatkan pada sidebar atau di bagian dalam postingan

Demikian artikel mengenai Cara Mudah Memasang Parse HTML di Blogger. Semoga bermanfaat.

Membuat Playlist Musik / Lagu di HTML by flash mp3 player - Berawal dari komentar sahabat blog ASR Tutorial, yang mengatakan kalau playlist musik yang dibuat di HTML by Dewplayer sudah tidak bisa digunakan padahal pada file swf nya bisa diputar. Mohon maaf mungkin agak lama untuk respon nya, maklum saya tidak full di blog ada kegiatan di dunia offline nya. hehe. Baik kembali ke topik utama, setelah saya lihat ternyata situs dewplayer nya sudah tidak bisa diakses, akhirnya saya dapat dari flash mp3 player.

Playlist musik terkadang dibutuhkan pada web, terutama websitenya mengenai musik, seharusnya ada playlist musiknya atau pemutar musik. Web yang akan coba kita buat masih menggunakan HTML saja dan berdiri sebagai client side. Jadi tidak perlu web server seperti xampp, wamp dan sejenisnya. Pada tutorial kali ini tidak jauh berbeda dengan playlist sebelumnya, hanya saja kali ini lebih sederhana, pemanggil swf dan urutan playlist lagu nya tempatkan pada satu file saja.

Sebelum ke tahap teknis saya akan berikan capture dari playlist yang akan di akan dibagikan sekarang, seperti dibawah ini.

Cara pasang

1. Download terlebih dahulu Flash mp3 player
2. Setelah itu, anda ekstrak yang sudah didownload dan buka
3. Masukan file mp3 nya ke dalam folder flash mp3 player multi
3. Lalu, buka file yang bernama player_mp3_multi.html. Anda bisa buka dengan notepad, agar tidak bingung bisa dengan editor lainnya, bisa simak Memilih Web Editor yang tepat
4. Langsung menuju kode yang di tandai kotak merah seperti gambar dibawah ini

gambar 1. Editing kode playlist musik di HTML

Penjelasan gambar 1.
a = anda masukan nama file musiknya beserta ekstensi file tersebut
b = memasukan nama yang nantinya tampil di interface playlist musiknya
5. Selesai. Anda bisa coba dibuka file player_mp3_multi.html nya dengan browser.

Bagaimana mudah bukan Membuat Playlist Musik / Lagu di HTML by flash mp3 player, apabila ada kesulitan atau ada tambahan ide dari teman - teman, bisa di diskusikan pada kolom komentar bawah ya.

NB
Setelah di testing, playlist ini bisa di putar pada browser chrome, IE. Dan tidak bisa di mozilla firefox.

Membuat Pop Up Halaman Baru di HTML - Bila kita singgung nama HTML, pasti di benak kamu adalah website. HTML merupakan kepanjangan HyperText Markup Language, bukan teks biasa yang mana digunakan untuk kebutuhan website, lebih ke awal membangun. HTML bisa disebut juga dengan bahasa struktur bukan bahasa pemrograman ya.. Untuk mengenal lebih dekat dengan HTML bisa ke Mengenal Tag, Elemen dan Atribut HTML.

Saya kira basa basi mengenai HTML dicukupkan, akan fokus ke pembahasan utamanya. Pada artikel kali ini lebih ke tutorial, lebih ke bagaimana membuat ya. Lalu sekarang membuat apa? kamu lihat ke judul artikel ini, pasti sudah jelas ya. . .

Baik, Pop Up Halaman Baru, kenapa saya sisipkan kata - kata halaman baru, karena Pop Up yang muncul bukan pada halaman sendiri nya tapi membuka halaman baru dalam bentuk Pop Up. Bisa kita gunakan ketika kondisi dimana link tersebut menuju halaman yang tidak memerlukan area yang luas dan juga bersifat sekedar informasi saja. Selain itu untuk halaman yang dituju bebas, tergantung kebutuhan kamu.

Untuk lebih jelas nya mari kita lihat screenshot nya, dibawah ini :
Kalo itu yang kamu cari, mari kita lanjut, kalo bukan, stop jangan teruskan, hehe

Pertama buka editor html kesayangan kamu
Copy skrip dibawah ini dan buat file coba_popup.html

<a href="credit.php" onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=150, width=350, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;' target='_blank'>Credit</a>

Tentunya kamu buat juga halaman baru dengan nama credit.php

Dan coba buka halaman coba_popup.html

Dari skrip diatas bisa kamu kembangkan lagi, dimulai dari ukurang lebar dan panjang, posisi popup tersebut, scroll tidaknya, dan lain sebagainya.

Cara Mudah Membuat Form HTML (tag form) - Formulir Pendaftaran atau yang biasa lebih di kenal dengan form pendaftaran mungkin sudah bukan sesuatu yang asing lagi. Namun, pernah terfikirkan tidak untuk membuat nya bagaimana? Ya. . . apabila anda masih penasaran yuk kita lanjut kan.

Form Pendaftaran hampir - hampir semua orang sudah menggunakan nya dimulai kita mendaftar sekolah SD sampai sekarang, namun pada saat itu pendaftaran dilakukan dengan cara offline dan yang akan kita sama - sama bahas sekarang form pendaftaran secara online. Bila kita sedikit flashback pendaftaran dilakukan secara offline, mempunyai beberapa kelemahan katakan saja, proses nya yang lama karena kita selaku pendaftar harus datang langsung ke tempat, belum lagi kalo tempat kita nya jauh akan memakan waktu yang lumayan lama. Nah, dengan sekarang ada nya di beberapa sekolah atau perusahaan yang memberlakukan pendaftaran secara online, ini bisa memudahkan para pendaftar tanpa harus pergi ke tempat pendaftaran. Dengan begitu kita bisa menghemat waktu yang hanya untuk mendaftar saja.

Oke, sekarang kita akan sama mencoba, bagaimana membuat form pendaftaran online dengan menggunakan bahasa struktur HTML, untuk itu mari kita simak sama - sama ya. . .

Pada dasar nya pembuatan formulir pendaftaran dimulai dari tag <form> ditutup lagi dengan </form>. Dalam element form ini mempunyai attribut yaitu :

• action, berisikan aksi terhadap form yang dikirim, bisa kita isikan dengan alamat URL (Uniform Resource Locator). Misal : tampil.php
• method, metode pengiriman alamat URL nya ingin seperti apa. dalam attribut ini kita bisa isikan dengan nilai GET atau POST.
• Untuk nilai dari attribut method ada GET dan POST. Untuk GET digunakan ketika kita ingin membawa nilai dari alamat URL sedangkan pada POST digunakan pada saat membawa nilai dengan menggunakan variable contoh nya pada attribut name.

Screenshot
Tools

• Web Editor (Notepad++, DW, dll)
• Web Browser (Mozilla Firefox, Chrome, dll)

Cara Pasang
Ketikan syntax/kode dibawah ini ke dalam web editor

<form action="tampil.php" method="POST">



Nama Anda : <input type="text" name="nama">

<input type="submit" value="Tampil">

</form>

Simpan dengan ekstensi *.html atau dengan nama form.html

Perlu Diingat !!!

• Tutorial diatas hanya sampai ke pembuatan tampilan form sederhana saja
• Belum ke tahap untuk menampilkan hasil dari form diatas
• Adapun untuk menampilkan hasil dari form tersebut akan dibahas di postingan - postingan selanjutnya

Cara Membuat Text Area pada HTML dengan mudah - Form Isian pasti merupakan bukan hal yang aneh lagi, baik dalam manual (bentuk hard copy) maupun dalam online. Khususnya pada saat kita mengisi form isian di online pasti akan menemukan beberapa bentuk form isian dalam setiap mengisi nama, tanggal lahir, dst... Namun, pernah terfikirkan tidak kita untuk mengetahui apa saja nama serta fungsi nya dari setiap sub form isian tersebut. Seperti pada postingan - postingan sebelumnya bahwa sudah dibahas mengenai textbox, radio button, combo box, list box. Dan sekarang akan sama - sama membahas mengenai Cara membuat Text Area pada HTML.

Yang menjadi sorotan disini ialah "Text Area", mungkin akan agak sama dengan textbox dimana fungsinya untuk melakukan input text namun ada yang berbeda yaitu pada jumlah baris nya. Text Area mempunyai lebih dari satu baris sedangkan textbox hanya satu baris. Sifatnya yang begitu fleksibel karena kita bisa melakukan drag 'n drop kotak text tersebut sesuka hati walaupun kita sudah melakukan setting lebar dan tinggi dari textarea tersebut.

Dimana kita bisa menemukan textarea ini? Pada saat kita melakukan komentar di media sosial, tanpa sadar itu menggunakan textarea karena kita bisa melakukan garis baru pada kotak tersebut. Adapun tag yang digunakan pada element Text Area ini adalah <textarea> dan ditutup dengna  </textarea> serta memiliki beberapa attribut, diantaranya :
name, untuk memberikan identitas pada textarea tersebut dengan melakukan pemberian nama.
cols, untuk memberikan nilai luas dari kolom textarea tersebut
rows, untuk memberikan nilai luas baris dari textarea tersebut

Screenshot
Tools

• Web Editor (Notepad++, DW, dll)
• Web Browser (Mozilla Firefox, Chrome, dll)

Cara Pasang
Ketikan sintax/kode dibawah ini ke dalam web editor

<table border=0>

<tr>

<td valign="top">Komentar : </td><td><textarea name="txtkomen" cols=15% rows=5%>

..........



</textarea></td>

</tr>

</table>

Simpan dengan ekstensi *.html atau dengan nama textarea.html
Buka file nya dan Selesai

Penting !!!

• Diatas ditambah dengan element table agar terlihat rapi
• Element textarea dimulai dari tag <textarea> sampai </textarea>
• Pada attribut name, cols, dan rows di tag textarea itu tidak harus nilainya sama seperti diatas, bisa anda ubah sesuai yang dibutuhkan.

Demikian Tutorial mengenai Cara membuat Text area pada HTML dengan mudah, semoga bermanfaat.

Membuat Caption pada tabel di HTML - Kembali lagi akan mencoba sedikit membagikan tutorial mengenai HTML, dengan judul nya Membuat Caption pada tabel di HTML, semuanya pasti sudah pada tahu apa itu tabel. iya, tabel merupakan gabungan dari beberapa baris dan kolom, bila kita menemukan baris dan kolom yang menyatu sudah pasti itu tabel. Membahas postingan mengenai tabel sebetulnya sudah di postinga - postingan sebelumnya, namun ada yang ketinggalan, yaitu pembuatan caption pada tabel atau bisa disebut juga dengan pemberian judul pada tabel.

Judul pada tabel sangat lah penting, karena apa? bagaimana kita mengetahui tabel itu namanya apa dan maksudnya untuk apa, apabila kita tidak memberikan judul pada tabel tersebut. Bisa untuk mempertegas juga bahwa tabel tersebut memiliki nama identitas, serta mempermudah apabila tabel tersebut banyak lebih dari 2 misalkan, nah dengan caption ini kita bisa mudah mencari tabel yang dimaksudkan itu yang mana. bahwa caption/judul ini mencakup dari kesuluruhan isi tabel tersebut. Penempatannya pun harus pada element tabel dan memiliki attribut align yang memiliki nilai "top" atau "bottom". Dimana apabila top digunakan membuat caption/judul diatas tabel sedangkan pada bottom maka posisi caption/judul dibawah tabel.

Mungkin kita sering melihat ini di modul - modul pelajaran sekolah ya. Tetapi kenapa harus ada dalam berbasis website. Mungkin saja ada pertanyaan begini "Dimana saja kita bisa menemukan tabel dengan caption dalam berbasis web?" misal coba kita cari website edukasi, artinya tentang pembelajaran dimulai dari modul sampai ke latihan, kita bisa menemukan fungsi caption ini apabila di website tersebut ada tabel nya. Dan kita juga bisa menggunakan ini apabila kita mau membuat website edukasi atau hanya sekedar catatan harian mengenai pelajaran disekolah yang diharuskan membuat tabel berikut disertakan judulnya atau caption ini.

Baik untuk latihan sekarang saya akan mengambil dari latihan tabel sebelumnya yaitu mengenai Membuat tabel sederhana HTML dan akan ada sedikit sentuhan - sentuhan warna pada tabel tersebut. Oke kalo begitu akan langsung saja dimulai secara teknis nya. Let's Go . . .

Screenshot 
Tools

• Web Editor (Notepad ++, DW, dll)
• Web Browser (Mozilla Firefox, Chrome, dll)

Cara Pasang
Ketikan sintax/kode dibawah ini

 <html>

<head>

<title>Membuat Caption Tabel</title>

</head>

<body>



<table border="1" bgcolor="cyan" cellpadding="4" cellspacing="0">

<caption align="top"><b>Tabel 1.1</b></caption>

<tr>

<th>No.</th>

<th>Nama</th>

<th>Alamat</th>

</tr>

<tr>

<td>1.</td>

<td>Dina</td>

<td>Majalengka</td>

</tr>

<tr>

<td>2.</td>

<td>Lili</td>

<td>Cirebon</td>

</tr>

</table>

</body>

 </html>

Simpan dengan ekstensi *.html atau dengan nama caption.html

Membuat Widget Kode Warna HTML - Warna di website, merupakan hal yang paling penting, karena dengan warna bisa menjadi pembeda dan sebagai upaya kita untuk mempercantik website. Sebenarnya dengan memakai nilai langsung warna saja juga bisa, misal "blue", "black", "red", dll. Tetapi tidak bisa mengatur warna sesuai selera kita. Karena dengan kamu hanya menggunakan "red" saja maka warna yang di tampilkan hanya merah terang saja, berbeda dengan menggunakan kode warna, kamu bisa menentukan warna merah seperti apa, apakah menginginkan merah yang tua (maroon) atau ingin membuat warna merah nya menjadi merah sedang, atau bahkan ingin merah yang muda atau bisa kita sebut dengan warna pink. Lalu di pink itu sendiri kamu bisa juga mengatur pink yang tua atau mudah, begitu untuk warna selanjutnya, sesuai yang kita inginkan.
Untuk widget ini bisa kamu terapkan di berbagai platform website, bisa untuk blogger, wordpress atau hostingan sendiri. Yang tentunya bisa di pasang di widget website tersebut.

Untuk melihat skrip HTML nya, dibawah ini :

 <center><div style="text-align: center;">

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="240" id="col" width="240">

<param value="sameDomain" name="allowScriptAccess" />

<param value="http://www.2createawebsite.com/build/col.swf" name="movie" />

<param value="high" name="quality" />

<param value="#ffffff" name="bgcolor" />

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="240" align="middle" height="240"></embed> </object></div> </center>

Silahkan, sekarang bisa menyalin (copy) skrip diatas ke platform website kamu. Sebagai contoh saya akan pasang di blogger.
- Masuk ke menu Tata Letak -> Tambahkan Gadget
- Pilih HTML/Javascript, lalu copas skrip di atas ke kotak dialog HTML/Javascript
- Simpan dan lihat blog

Apabila sudah di simpan, maka kurang lebih seperti dibawah ini :

Untuk langkah - langkah pada wordpress atau hosting sendiri, bisa kamu pasang sesuai cara nya masing - masing. Karena cara pasang widget nya pasti berbeda - beda. Oke begitulah caranya Membuat Widget Kode Warna HTML. Apabila bermanfaat bisa kamu share.
Artikel lainnya, mengenai HTML : Membuat Tabel HTML Responsive dengan CSS

Cara Membuat Iframe di HTML dengan mudah - Apa kabar semuanya? semoga dalam keadaan sehat wal afiat ya. Sekarang gubug web akan membagikan tutorial mengenai frame, seperti pada postingan sebelumnya yaitu membahas Dasar membuat frameset di HTML, ada sedikit yang berbeda disini ialah pada penulisan tag nya, yaitu dengan iframe, bila kita ingin mengetahui apa kegunaannya adalah untuk memanggil halaman lain agar bisa tampil di halaman home/index atau bisa diartikan untuk menampilkan website lain agar bisa tampil di website kita.

Mungkin ada sedikit perbedaan dengan tag frameset yaitu iframe tidak terlalu memperhatikan lebar antar halaman serta pada kolom dan baris nya. Untuk mengatur lebar dan tinggi nya halaman itu ditangani oleh tag lain seperti misalnya dengan tag table atau div. Namun ada kesamaan yaitu pada pembagian dokumen HTML nya, seperti yang sudah dibahas pada frameset yaitu pasti disitu ada halaman/dokumen sebagai dokumen master atau bisa kita katakan sebagai dokumen pemanggil dan akan ada dokumen/halaman yang dipanggilnya.

baca juga : Membuat Website sederhana dengan menggunakan frameset

Sekarang kita akan sama - sama membicarakan tentang tag dan attribut apa saja yang digunakan. Dimulai dari tag nya yaitu <iframe> dan memiliki tag penutup </iframe> berarti disini bersifat tag container. Selanjutnya mengenai attribut - attribut nya, diantaranya sebagai berikut :

• align, digunakan untuk menentukan perataannya, yang bisa kita gunakan yaitu right atau left.
• frameborder, digunakan untuk menentukan mau diberi border/garis batas atau tidak pada halaman iframenya.
• width, untuk menentukan lebar dari iframe tersebut, disarankan menggunakan satuan persen agar lebih dinamis.
• height, untuk menentukan tinggi dari iframe tersebut, disarankan menggunakan satuan persen agar lebih dinamis.
• scrolling, untuk menentukan di berikan scroll atau tidak pada iframenya, pilihan value yang bisa kita berikan yaitu yes, no, atau auto.
• src, untuk menampilkan halaman yang akan ditampilkan pada halaman awal/pembuka.

Untuk lebih jelas nya yuk mari kita ikuti secara teknis nya dibawah ini.
Screenshot

Tampilan halaman home.html

Tampilan halaman aboutme.html

Tools

• Web Editor (Notepad ++, DW, dll)
• Web Browser (Mozilla Firefox, Google Chrome, dll)

Cara Pasang
[Membuat dokumen yang dipanggil] [Halaman pertama]
Ketikan sintax dibawah ini

<p>Nama : Uzumaki Naruto <br>

Pengguna Jurus : Rasengan <br>

Ayah dan ibu saya sudah tiada ketika aku masih bayi, sampai akhirnya karena saya mempunyai tekad yang kuat sekarang bisa menggapai mimpi ku untuk menjadi hokage<br>

</p>

Simpan dengan ekstensi *.html atau dengan nama aboutme.html

[Membuat dokumen yang dipanggil] [Halaman kedua]
Ketikan sintax dibawah ini

<p>Website ini digunakan untuk menceritakan perjalanan hidup saya.</p>

Simpan dengan ekstensi *.html atau dengan nama home.html

[Membuat dokumen master] [Halaman ketiga]
Ketikan sintax dibawah ini

<a href="home.html" target="panggil">Home</a> | <a href="aboutme.html" target="panggil">About Me</a>



<iframe name="panggil" src="home.html" height=100% width=100% frameborder=no></iframe>

Simpan dengan ekstensi *.html atau dengan nama home.html

Perlu Diingat !!!

• Untuk mengikuti latihan diatas diharapkan agar sama dalam penulisan sintax nya serta penamaan halamannya, namun apabila sudah mulai paham bisa bebas memberikan penamaan halamannya.
• Dan untuk isi/content nya boleh diganti sesuai selera teman - teman ya, diatas hanya sekedar latihan saja.

Membuat ListBox di HTML dengan mudah - Kembali saya akan membagikan tutorial mengenai bahasa struktur HTML, yang lebih tepatnya tentang pembuatan listbox di HTML. Teman - teman pernah mendengar kata listbox atau mungkin pernah melihatnya? ya. Mungkin ada yang mengetahui namun ada sebagian pula yang belum mengetahuinya, bila anda sedang mencari tool ini maka tepat sekali, maka dari itu silahkan teruskan ya ^_^ .

Apabila kita berbicara HTML ya pasti nya tentang hal yang berbau website, yaitu yang lebih berurusan kepada struktur dari website itu ibaratkan tubuhnya website, buka ke programnya yang berarti menangani tentang fungsi tertentu, nah HTML tidak menangani hal itu. Baik sekali lagi HTML hanyalah untuk membangun suatu struktur HTML bahwa di dalam website tersebut ada apa saja mulai dari atas sampai ke bawah.

Setelah flashback sebentar, baik sekarang kita kembali lagi ke pokok bahasan utama yaitu listbox di html, penggunaan listbox digunakan untuk memberikan pilihan kepada user/visitor agar bisa memilih salah satu diantara beberapa pilihan, dimana pilihan - pilihan tersebut dengan jumlah banyak, sebab apabila melakukan pemilihan dari pilihan yang sedikit cukup dengan radio button saja.

baca juga : membuat radio button di HTML

Tag yang digunakan hampir sama dengan pada pembuatan combo box, namun yang membedakan hanyalah penggunaan attribut size pada tag select, sedangkan pada combo box tidak menggunakannya. Yaitu tag yang digunakan menggunakan select dan mempunyai elemen <option> ... </option> yang harus ada diantara tag <select> dan </select> . Serta mempunyai attribut, diantaranya :

• name, attribut yang dignakan pada tag select ini, untuk penamaan pada listbox apabila kita membuat form mobil, kita bisa memberikan nama "mobil". Biasa nya akan digunakan untuk di panggil ke halaman lain.
• size, attribut yang dignakan pada tag select ini, untuk memberikan ukuran pada bentuk combo box sehingga bentuk nya lebih tinggi dari pada combo box.
• value, attribut yang dignakan pada tag option ini, memberikan nama pada tiap mobil misal pada mobil maka isinya "yaris", pada ford maka isinya "ford", dll. Ini biasanya untuk tingkat lanjut akan digunakan untuk dipanggil serta ditampilkan dihalaman lain.

Dimana kita bisa menemukan listbox ini? biasanya kita temukan di saat kita mengikuti quis online atau survey disalah satu website. Kita akan menemukan listbox ini, yang seperti pada SS(baca : ScreenShot) dibawah ini. Mungkin dari bentuk hampir mirip dengan combo box seperti yang sudah sama - sama kita bahas dipostingan sebelumnya yakni membuat combo box di HTML. bentuk nya agak berbeda sedikit yang membedakan disini dari tingginya pada listbox lebih tinggi dari pada combo box, artinya menggunakan attribut size pada tag select.

Screenshot
Tools

• Web Editor (notepad, DW, dll)
• Web Browser (Mozilla, Chrome, dll)

Cara Pasang
Ketikan sintax/kode dibawah ini di web editor

<form>

<p>Pilih merk mobil:</p>



<select name="Name mobil" size="3">

 <option value="1">Yaris</option>

<option value="2">Ford</option>

<option value="3">Audi</option>

<option value="4">Honda Jazz</option>

<option value="5">JEEP</option>

 </select>

<p><input type="submit" value="submit" /></p>

</form>

Simpan dengan ekstensi *.html atau dengan nama listbox.html dan buka di web browser
Selesai

Memilih Web Editor HTML yang tepat - Web Editor merupakan suatu software aplikasi yang digunakan untuk melakukan penyuntingan serta penulisan sintax/kode program. Bisa dibilang tempat pengeditan suatu program aplikasi/web. Bagaimana sampai ke pengertian sudah terbayang belum web editor itu seperti gimana, tidak akan menjadi hal yang aneh lagi bagi yang sudah tahu, tetapi artikel ini semoga bisa bermanfaat bagi yang sedang belajar atau bahkan yang sudah tahu sekalipun. Karena artikel ini ditujukan untuk semua nya.

baca juga : pengertian web browser beserta contohnya

Seperti pada pengertian diatas dikatan bahwa web editor digunakan untuk melakukan pengeditan program aplikasi/web, ada beberapa macam jenis nama software nya. Katakan saja notepad yang merupakan aplikasi bawaan dari OS Windows itu sendiri, kemudian ada pengembang software yang membuat suatu aplikasi yang bernama notepad++. Yang namanya ++ pasti ada kelebihannya dari pada notepad biasa. Lalu selain itu ada lagi yang bernama adobe dreamweaver dimana fitur nya lebih lengkap dari 2 aplikasi tadi. Bagaimana pasti sudah mendengar nama - namanya ya? ^_^ Untuk lebih asyik lagi mari kita lanjutkan lagi.

Yang lebih tepat yang mana?

Ketepatan memilih software aplikasi dalam membangun project program sangatlah penting sekali, bagaimana tidak, apabila kita salah memilih aplikasi atau lebih tepat nya kurang tepat dalam memilih aplikasi. Maka bisa saja project akan lama dibuat, katakan saja misal project kita sederhana atau sedikit maka tidak perlu menggunakan software yang mempunyai fitur banyak tetapi banyak yang tidak digunakan. Artinya harus sesuai kebutuhan kita. Kemudian ketika posisi kita sebagai pemula dalam hal bahasa pemrograman maka disarankan untuk menggunakan notepad atau lebih rekomen lagi dengan notepad++ karena kaya akan fitur katakan saja ada pemilihan bahasa dari awal, ada highlighter word sehingga bisa menemukan antara tag pembuka dan penutup, serta ada warna pada tiap sintax/kode sehingga tidak membingungkan penggunanya dan masih banyak lagi namun tetap harus diketikan sintax/kode supaya programmer bisa tahu letak sintax nya dimana saja apabila terjadi kesalahan. Namun, apabila kita sudah mahir bisa menggunakan software adobe dreamweaver karena mempunyai fitur drag n drop saja, untuk mempercepat pengerjaan saja. ^_^ Tetapi software ini tidak gratis artinya harus ada SN / crack nya berbeda dengan 2 aplikasi sebelumnya yaitu notepad/notead++ sifatnya gratis.

Bagaimana, pasti sudah paham kan web editor mana yang akan kita gunakan?

Membuat Ekspresi komentar di HTML - Seperti yang telah dibahas pada postingan - postingan paling awal sekali, yakni bahwa HTML merupakan bahasa struktur, dimana output atau hasilnya berupa berbasis website. Namun tahu tidak bahwa HTML mempunyai tag untuk memberikan komentar. Ya. . . pada postingan kali ini akan sama - sama membahas mengenai pembuatan komentar di HTML. Mungkin ada sebagian teman - teman yang tidak tahu komentar itu apa. Oke, komentar digunakan untuk mendisable/menonaktifkan kode HTML yang telah diketikan tanpa harus menghapus nya. Bagaimana sudah terbayang tidak? baik kalo belum mari kita lanjut.

baca juga : Membuat checkbox di HTML

Menulis sebuah bahasa program/struktur pasti sangat menyenangkan bagi yang hobby dalam hal ketik mengetik program, tapi apa jadinya misalkan sintak/kode yang sudah kita ketikan itu gagal, padahal baris nya mencapai 2000 line, misalnya. Apakah mau menghapusnya? itu sangat sayang sekali ya, karena sudah usaha keras untuk mengetik program nya, eh malah program nya error. Apa solusinya? ya harus dikoreksi lagi lah. he.. he.. he.. kita cari lline mana yang salah, apabila yakin di line (baca : baris) itu yang menjadi biang kesalahan program tersebut maka langsung perbaiki, namun apabila kita ragu di line tersebut tetapi di sisi lain ingin mengubahnya di line tersebut. Maka fungsi komentar ini lah sangat berperan penting dalam kasus seperti ini. Bagaimana sudah ada penerangan tentang pembuatan komentar ini? Ok, mari kita lanjut.

Sudah dikatakan sejak awal bahwa dengan upaya seperti ini akan membuat program tidak aktif namun kode yang sudah diketikan tidak akan hilang/hapus, barang kali suatu saat kode ini bisa digunakan lagi tanpa harus mengetik ulang.

Untuk tag yang digunakan dalam membuat komentar ini yaitu ... dan ditutup dengan ... Untuk lebih jelas mari kita ikuti secara teknis nya dibawah ini.

Screenshot

Sintak/kode yang sudah diberikan komentar

Cara pasang
Ketikan kode dibawah ini ke dalam web editor

<!-- Ketikan kode HTML disini -->

Simpan dengan ekstensi *.html

Cara membuat checkbox dengan HTML - Membuat pilihan tentunya yang sering kita lakukan ketika kita bercerita saat bergaul, apalagi disaat masa - masa taman kanak - kanak sering kita menanyakan kepada teman - teman yang lain, "kartun apa saja favorit kamu?" maka macam - macam jawabannya ada yang favorit nya "doraemon, tamiya, dora" atau dengan jawaban lainnya. Memang sangat menyenangkan sekali saat masa - masa TK, banyak sekali pilihan yang menarik. Kemudian saat kita beranjak ke remaja serta dewasa mungkin pilihan - pilihannya beda lagi, pasti akan bermacam - macam.

Namun dari pilihan itu sendiri ada yang baku, artinya kita harus memilih 1 saja diantara pilihan lainnya dan ada juga bisa memilih nya bebas sesuka hati, artinya kita memilih 1 saja tidak apa - apa, memilih lebih dari 2 pun tidak akan menjadi masalah. Nah. . . pada kali ini akan membahas mengenai memilih pilihan dengan bebas bisa 1, bisa juga lebih dari 2 pilihan yang ada. Yang biasa dikenal dengan sebutan "checkbox", artinya kita memilih dengan menceklis kotak yang dipilihnya.

Mungkin dari tadi secara penjelasan, belum begitu terbayang. Agar ingin tahu checkbox itu seperti apa, penulis akan tanya. "Anda punya antivirus di laptop?" apabila punya dan pernah melakukan scan terhadap komputer anda dan komputer tersebut terinveksi virus, maka akan ada pilihan virus yang mana saja yang akan di hapus. Bagaimana? sudah terbayang bentuk mungkin dari fungsinya juga? Ok, apabila sudah, mari kita lanjutkan.

Pada pembuatan checkbox sekarang akan di terapkan pada bahasa struktur HTML, mungkin dengan bahasa pemrograman lain juga bisa, katakan lah vb, java, C#, dll. Pada penulisan checkbox atau yang disebut dengan tag, yaitu dengan tag <input> dan memiliki beberapa attribut didalamnya, diantaranya :
type, digunakan untuk menentukan jenis masukannya, karena sekarang membuat checkbox, maka nilai yang bisa dimasukan pada tag ini adalah "checkbox"
name, untuk penamaan yang nantinya bisa digunakan di halaman lain untuk kebutuhan programer di dalam program.
value, untuk menentukan nama yang nantinya di panggil di halaman lain untuk kebutuhan user sebagai output.

Screenshot
Tools

• Web Editor (notepad)
• Web Browser (mozilla firefox)

Cara Pasang
Ketikan kode dibawah ke dalam web editor

Smartphone apa saja kesukaan anda :<br>

<input type="checkbox" name="check1" value="Samsung">Samsung<br/>

<input type="checkbox" name="check2" value="Smartfren">Smartfren<br/>

<input type="checkbox" name="check3" value="Asus">Asus<br/>

<input type="checkbox" name="check4" value="Lain">Lainnya<br/>

Simpan dengan ekstensi *.html atau dengan nama checkbox.html

Membuat Combo Box dengan HTML - HTML merupakan bahasa struktur yang berbasis web, dengan bahasa inilah kita bisa bereksplorasi membuat website dimulai dari yang sederhana hingga yang rumit. Bermula awalnya keingin tahuan penulis ketika melihat formulir pendaftaran online, seperti misal saat daftar di akun fb, twitter, google, dan sebagainya.  Kita sering melihat bentuk pemilihan data disaat di klik akan turun kebawah atau biasa dikenal dengan drop down, itu lah yang disebut dengan combo box. Pada penerapannya sering ditemukan di formulir pendaftaran online lebih tepatnya disaat memilih agama, bahasa yang bisa kita gunakan pun sangat banyak dalam pembuatan combo box ini, katakanlah bahasa pemrograman java, vb, C#, dll semua nya bisa membuat tool yang satu ini. Untuk kali ini akan dibahas bersama - sama mengenai pembuatan combo box di HTML. Mari sama - sama simak yah . . .

Combo box tentunya mempunyai fungsi yang sangat penting dalam hal pendaftaran online, karena dengan tool ini lah kita bisa menentukan data yang lebih dari satu namun data tersebut bersifat statis artinya sudah ditentukan oleh admin pendaftaran yang bersangkutan. Misal pada formulir agama, bayangkan saja bagaimana jadi nya apabila form agama menggunakan textbox, penulis yakin isi nya akan berbeda - beda yang masuk ke database nya, mungkin ada yang menulis huruf nya kecil semua, ada yang besar semua atau mungkin apabila sistem informasi nya tidak disertai dengan validasi yang bagus para user yang mengisi form pendaftaran online akan mengisi tidak sesuai dengan yang diminta pada form online. Yaa. . . mungkin para user mungkin sedang sibuk situasi dan kondisinya atau yang hanya sekedar iseng(baca : tidak ada kerjaan) saja, jadi apa yang diinputkan masuk saja kedatabase. Ini yang akan menjadi masalah, data yang masuk ke database hanya lah data yang tidak bermakna, itu akan membebankan ke space databasenya. Bisa saja dengan textbox serta di pasang validasi yang komplit, tapi permasalahannya itu akan menjadi kan prosesnya lama dalam mendaftar online, misal dengan keterangan validasi "mohon agar isikan dengan islam, budha, hindu, kristen, dll " itu akan memakan space dan waktu yang banyak dan lama.

Dengan combo box kita bisa mengatasi semua itu, agar mengefesiensikan tempat yang ada serta cepat, cepat maksudnya kita tidak perlu mengetikan tetapi tinggal klik saja maka akan menurun kebawah pilihan - pilihannya tinggal pilih saja, sudah.

Tag yang digunakan pada combo box itu adalah <select>, dan mempunyai elemen yang harus selalu ada di antara <select> dan </select>, yaitu <option> memiliki tag penutup yaitu </option> dan mempunyai beberapa attribut diantaranya :

• name, untuk penamaan pada combo box apabila kita membuat form agama, kita bisa memberikan nama "agama". Biasa nya akan digunakan untuk di panggil ke halaman lain.
• value, memberikan nama pada tiap agama misal pada islam maka isinya "islam", pada kristen maka isinya "kristen", dll. Ini biasanya untuk tingkat lanjut akan digunakan untuk dipanggil serta ditampilkan dihalaman lain.

Screenshot
Tools

• Web Editor (Notepad)
• Web Browser (Mozilla)

Cara Pasang

• Ketikan kode dibawah di web editor

 Agama : <select>

  <option name="agama" value="Islam">Islam</option>

  <option name="agama" value="Kristen">Kristen</option>

  <option name="agama" value="Budha">Budha</option>

  <option name="agama" value="Hindu">Hindu</option>

</select>

• Simpan dengan ekstensi *.html atau dengan nama combo.html dan lihat hasilnya
• Selesai

Apa itu HTML5? Perbedaannya dengan HTML4? - HTML5 merupakan versi terbaru dari bahasa struktur HTML. Yang mana dasar dari HTML sendiri sudah sama - sama kita bahas pada artikel terdahulu pada Dasar Penulisan kode HTML. Seperti yang kita tahu HTML atau singkatan dari Hyper Text Markup Language, menjadikan hal yang sangat penting dalam pembuatan website, karena hampir semua dibuat oleh bahasa struktur ini. Untuk HTML5 sendiri sudah bisa mendukung oleh kebanyakan Web Browser jadi kita selaku programmer tidak perlu ragu untuk menggunakan nya, apalagi ini merupakan versi terbaru nya. Pastinya, terdapat kelebihan - kelebihan yang tidak di miliki oleh versi sebelumnya.
Apabila kamu terbiasa membuat tag seperti ini <div id=cobain>, tapi tidak untuk HTML5. pada HTML5 langsung ke kegunaan dari bagian halaman tersebut. Baik sekarang bisa dilihat perbedaannya, pada sektor sebelah kiri HTML 4, sebelah kanan HTML 5.

HTML4	HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Terlihat dari tabel diatas, HTML5 lebih mudah digunakan dan lebih simple. Disini bisa juga kita sebut HTML5 lebih semantik, karena penulisan HTML ditulis sesuai dengan kegunaannya. Selain itu, format penulisan dokumen dan pengkodean lainnya lebih sederhana.

HTML4	HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	<!DOCTYPE html>
<meta http-equiv="Content-Type" contnt="type/html;charset=utf-8">	<meta charset="utf-8">

Untuk browser yang tidak mendukung seperti Internet Explorer, bisa kamu tanggulangi dengan cara pemasangan kode HTML5Shiv. Hal ini dilakukan untuk menerjemahkan elemen HTML5 yang tidak didukung menjadi div. Kamu bisa masukkan kode dibawah ini pada bagian heading di dokumen HTML5.

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.hs">

<![endif]-->

Untuk penyimpanannya seperti biasa nama_dokumen.html.

Berbicara tentang sejarah, HTML memiliki perjalanan yang begitu panjang, khusus nya antara v4.01 dengan v5. Mari kita lihat perkembangan HTML dari masa ke masa. Yang mana data yang berhasil saya kutip dari situs wikipedia(keyword : HTML), sebagai berikut :

• HTML 2.0 - (RFC 1866) disetujui sebagai standar 22 September 1995
• HTML 3.2 - 14 Januari 1996
• HTML 4.0 - 18 Desember 1997
• HTML 4.01 (minor fixes) - 24 Desember 1999
• ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict) - 15 Mei 2000
• HTML 5.0 (Stabil) rekomendasi W3C (World Wide Web Consortium) - 28 Oktober 2014

Sedikit informasi, kenapa antara HTML v4.01 dengan v5.0 itu rentang waktu nya cukup lama, itu karena pada tahun 1999 perkembangan HTML 4.01 terhenti dan W3C selaku badan yang bertanggung jawab dalam standarisasi teknologi internet termasuk HTML, beralih mengembangkan XHTML yang juga menemui jalan buntu pada versi 2.0.
Sekian ulasan mengenai Apa itu HTML5? perbedaanya dengan HTML4?
Yang kece pasti selalu meninggalkan komentar dibawah sebelum di tutup. ^_^ Terima Kasih.

Membuat button/tombol di HTML - Berbeda dengan postingan sebelumnya yaitu membahas Cara Membuat textbox HTML, kali ini akan sama - sama mengetahui bagaimana cara nya membuat tombol di HTML tentunya dengan cara mengetikan syntax, mungkin akan lumayan lama apabila dengan cara nya seperti ini berbeda dengan hanya drag 'n drop saja, tetapi ketahuilah belajar dimulai dari dasar nya itu akan lebih mengerti, lebih memahami serta bisa lebih menyayangi, karena dengan sayang itu tidak akan lupa untuk kedepannya, walaupun ada kala nya bisa lupa. Namun, tidak akan lupa sepenuhnya, tapi bisa teringat kembali apabila diingatkan atau melihat contoh nya lagi, sehingga tidak akan menjadi sesuatu yang asing lagi ketika kita mengetikan kembali setelah sekian lama tidak mengetikan syntax tersebut.

Baik seperti pada judul kali ini membuat tombol di HTML, biasanya kita menemukan disaat kita login atau daftar ke suatu akun, pasti akan menemukan yang namanya tombol/button. Yang tentunya kali ini akan di terapkan pada bahasa struktur HTML.

Walaupun berbeda dengan postingan sebelumnya tetapi memiliki keterkaitan yang sangat penting, karena kegunaan tombol ini bisa membawa informasi yang diketikan di textbox ke tempat (hasil/output) yang kita inginkan. Yang akan digunakan untuk membuat form/formulir online, untuk bagaimana membuat nya, tunggu ya di postingan - postingan selanjutnya. Tetap stay terus ya di gubugweb ini. He.. he.. he..

Tag yang digunakan yaitu <input>
Attribut
type, untuk memberikan nilai pada attribut type tersebut, yang dipakai yaitu "button"
disabled, untuk menonaktifkan dari tombol tersebut
name, nilai yang digunakan untuk memberikan nama deklarasi pada tombol
value, untuk memberikan nama yang nantinya tampil di tombol
Screenshot

Button html

Testing Tools

• Web Editor (notepad++)
• Web Bowser (mozilla)

Cara Pasang

• Ketikan syntax dibawah ke dalam web editor

 <html>

<head>

<title>button HTML</title>

</head>

<body>



<input type="button" value="submit">



</body>

 </html>

• Simpan dengan ekstensi *.html atau dengan nama tombol.html
• Buka file yang barusan disimpan

Membuat radio button di HTML - Kembali pada kesempatan yang cukup berbahagia ini, penulis akan membagikan tutorial mengenai HTML, lebih tepatnya pada penggunaan radio button, bila kita ingin mengetahui dimana saja kita menemukan fitur yang satu ini, anda pernah daftar facebook, google? atau situs - situs lainnya ketika mendaftar diminta untuk mengisikan form jenis kelamin, disitulah kita bisa menemukan radio button. Ya. . . yang memilih nya harus satu diantara 2 atau lebih pilihan yang ada, lebih sering nya disaat menentukan jenis kelamin ketika mendaftar.

Dengan Radio Button akan memudahkan para pengguna ketika mendaftar serta membuat konsistensi data yang masuk terutama pada data jenis kelamin ketika masuk ke dalam database. Mungkin kebayang apabila data yang dimasukkan tidak menggunakan radio button, maka data yang masuk akan berbeda - beda ke dalam database, terlepas dari itu radio button digunakan apabila data tersebut sudah baku, artinya semua orang pasti mempunyai data diantara dua atau lebih tersebut. Terkecuali jenis kelaminnya yang tidak konsisten, he.. he.. he.., Ok, lanjutkan lagi ke pembahasan dari radio button ini, bahwa bahasa pemrograman yang bisa menampilkan fitur yang satu ini pun banyak semisal java, vb, C#, dll. Namun pada kali ini akan diulas radio button pada HTML yang tentunya berbasis web.

Mengenai radio button di HTML tidak akan terlepas dengan yang namanya tag serta attribut, tag yang digunakan adalah <input> dan mempunyai attribut diantaranya :

• type, menentukan type apa yang akan di masukkan, karena kita sekarang membahas radio button, maka nilai yang bisa dimasukan yaitu "radio".
• name, untuk penamaan dari radio button, yang bisa dipanggil ke halaman lain.
• value, memberikan nama dan bisa ditampilkan di halaman lain.
• checked, harus ada salah satu diantara tag input. Untuk menentukan pilihan secara default disalah satu pilihan. Pada attribut ini tidak membutuhkan nilai.

Screenshot
Tools

• Web Editor (Notepad)
• Web Browser (Mozilla)

Cara Pasang

• Ketikan kode dibawah ini didalam web editor

<input type="radio" name="jkel" value="laki-laki" checked>Laki - laki

<br>

<input type="radio" name="jkel" value="Perempuan">Perempuan

• Simpan dengan ekstensi *.html atau dengan nama radio.html
• Buka dan selesai

Membuat Website sederhana dengan frameset HTML - Membuat website merupakan suatu hal yang di idam - idamkan bagi para pencinta website. Namun bagi anda yang posisinya sekarang dalam tahap belajar atau pemula  atau juga yang ingin sekedar mengingat - ingat masa lalu nya dengan HTML tutorial ini cocok sekali, karena apa? itu karena tema nya sekarang mengenai membuat website sederhana dengan frameset. Disini kita sudah mempelajari di postingan sebelumnya Dasar membuat frameset HTML, disitu masih dasar sekali bagaimana membuat kerangka frame di halaman web.

Sedikit mengulas dari tutorial sebelumnya pada tag sekarang yang akan di praktekan pada dasarnya yaitu menggunakan tag <frameset> .... </frameset> dan mempunyai elemen di dalamnya yaitu tag <frame> tidak mempunyai tag penutup.

baca juga : Cara Membuat Frame HTML lanjutan

Tools

• Web Editor (notepad++)
• Web Browser (mozilla)

Screenshot
Cara Pasang
[halaman logo/header]
Ketikan sintax dibawah ini di web editor

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#00CC00">

<p valign="Middle"><font color="#eee" size=6 face="Monotype Corsiva">Example Collection</font></p>

</body>

</html>

Simpan dengan ekstensi *.html atau dengan nama logo.html

[halaman menu]
Ketikan sintax dibawah ini di web editor

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#BFFEBF">

<a href="home.html" target="home">Home</a><br>

<a href="about.html" target="home">About Us</a>

</body>

</html>

Simpan dengan ekstensi *.html atau dengan nama menu.html

[halaman home]
Ketikan sintax dibawah ini di web editor

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#80FE80">

Toko ini menjual berbagai peralatan aksesoris motor, dimulai dari sparepart sampai ke pemasangan bisa dilakukan disini.

</body>

</html>

Simpan dengan ekstensi *.html atau dengan nama home.html

[halaman about us]
Ketikan sintax dibawah ini di web editor

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#80FE80">

Toko kami bertempat di jl.jendral sudirman desa cihampelas majalengka

</body>

</html>

Simpan dengan ekstensi *.html atau dengan nama about.html

[halaman footer]
Ketikan sintax dibawah ini di web editor

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#00CC00">

<p align="center">Copyright 2015 gubugweb </p>

</body>

</html>

Simpan dengan ekstensi *.html atau dengan nama footer.html

[halaman MASTER]
Ketikan sintax dibawah ini di web editor

 <html>

<head>

<title>FRAME HTML</title>

</head>



<frameset rows="10%,*,5%" border="0">

<frame src="logo.html" >



    <frameset cols="10%,*" border="0" >

    <frame src="menu.html" name="menu">

    <frame src="home.html" name="home" >

 

     



    </frameset>

<frame src="footer.html">

</frameset>



 </html>

Simpan dengan ekstensi *.html atau dengan nama index.html

Cara Membuat textbox HTML - Kembali saya akan mengajak anda untuk sama - sama membuat sesuatu di dokumen HTML, ciyee sesuatu. He..he..he.., kali ini sesuatu tersebut mengenai cara membuat textbox di HTML atau mungkin bahasa lainnya membuat kotak yang bisa di masukan tulisan, dimana tulisan tersebut di masukan oleh user yang membuka halaman web nya buka si pembuat halaman web nya. Gimana sampai sini dulu bisa di mengerti? kalo bisa mari kita lanjut.

Dimanakah kita bisa lihat textbox?
Apabila dilihat dari sering nya kita lihat textbox, ketika kita daftar ke suatu akun, misalnya daftar akun GMAIL, saya ambil contoh satu saja ketika memasukan nama anda ketika register. Nah tempat inputan nama tersebut yang dinamakan textbox. Adapun dari tag nya itu <input> dari namanya saja sudah jelas ya, artinya untuk memasukan data yang kita inginkan.

Ketika kita melihat tag biasanya ada attribut yang setia menemani (meski tidak semua tag mempunyai attribut), untuk kali ini akan mengambil sebagian saja dari berbagai attribut yang ada. diantaranya :

• type, yang berguna untuk menentukan jenis inputan apa yang dibutuhkan. nilai yang diberikan disini "text", "password", "number", dll
• size, untuk menentukan lebar dari textbox, bisa di isi dengan nilai satuan "px" atau "%"
• value, untuk memberikan nama penegas pada textbox tersebut
• disabled, untuk menonaktifkan textbox agar tidak bisa di edit
• Dan masih banyak lagi

Mungkin timbul pertanyaan "kenapa cuma segitu yang di bagikannya?" itu karena yang pada umumnya pada tag <input> menggunakan attribut seperti diatas.Untuk itu mari kita lanjutkan lagi ke tahap selanjutnya.

Screenshot
Cara Pasang
Ketikan sintax dibawah

 <html>

<head>

<title>textbox HTML</title>

</head>

<body bgcolor="#000">



<input type="text" size="40%">



</body>

 </html>

Simpan dengan ekstensi *.html atau dengan nama textbox.html

Textbox dengan pengaturan disabled
Ketikan sintax dibawah

 <html>

<head>

<title>textbox HTML</title>

</head>

<body bgcolor="#000">



<input type="text" size="40%" disabled>



</body>

 </html>

Simpan dengan ekstensi *.html atau dengan nama textbox.html

Note..!
attribut background tidak wajib ada, boleh anda menghapusnya.