Tutorial HTML
Teknik Membuat Layout Website Dalam 5 Menit
Baiklah kali ini saya akan mencoba membahas secara rinci mengenai teknik membuat layout website secara mudah dan cepat. Untuk tutorial kali ini saya akan mencoba berbagi trik dengan jaminan layout akan beres hanya dalam 5 menit. Gimana keren kan???? Oke, yang pertama kita butuhkan adalah Notepad (saya lebih prefer sofwer ini, kalo sahabat AJN pake sofwer text editor kayak DW, Notepad++, atau apapun itu gak masalah, yang penting text editor). Untuk tahap awal silahakn buat potongan layout utama seperti berikut! <!DOCTYPE html> <html> <head> <title>Judul Website</title> </head> <body> <div class="wrapper"> <header>HEADER</header> <section> <article>CONTENT</article> <aside>SIDEBAR</aside> </section> <footer>FOOTER</footer> </div> </body> </html> ...
Dasar Membuat Layout Website
Baiklah, kita telah mengetahui berbagai hal tentang HTML, dan kali ini saya mencoba berbagi mengenai rancang dasar pembuatan layout website dengan HTML. Ini adalah hal paling mendasar sebelum memasuki tahapan berikutnya, yakni ke pemrograman PHP. Bekal dasar yang diperlukan adalah pemahaman seputar CSS. Layout sebuah website amat beraneka ragam, namun secara garis besar kalau dilihat dari modelnya dibedakan menjadi 2, yakni layout fixed dan fluid. Layout Fixed Layout fixed adalah layout website yang dimensi lebarnya ditentukan dengan satuan pixel, persen, dan lain sebagainya. Layout ini lebih mudah dalam pengelolaannya karena ukuran lebarnya yang pasti. Di bawah ini adalah beberapa contoh layout...
Menyisipkan Gambar Kedalam Webpage
Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain : GIF (Grafical Interchange Format) (.gif) JPEG (Joint Photographic Expert Image) (.jpg) PNG( Portable Network Graphic) (.png) BMP (Bitmap) (.bmp) Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag <IMG>. Tag tersebut memiliki elemen tambahan sebagai berikut : Atribut Nilai Keterangan src URL gambar Diisi dengan alamat yang menunjuk pada sumber file gambar alt teks Menentukan tulisan yang akan ditampilkan (biasanya ditempatkan antara tanda petik). Apabila browser tidak dapat menampilkan gambar untuk alasan tertentu align Center |...
Menampilkan Kode HTML pada Web Page
Untuk menampilkan kode sumber halaman (HTML) sebuah halaman website caranya cukup mudah. Anda bisa melihatnya dengan mambuka menu View > Source atau tekan Ctrl+U. Berikut ini contoh dari beberapa browser yang berhasil saya kumpulkan
Membuat dan Menambahkan Daftar dan Penomoran (Bullet and Numbering)
Salah satu cara yang efektif dan mudah untuk dibaca dalam menyampaikan informasi adalah dengan menggunakan daftar. HTML mewnyediakan beberapa jenis daftar, yaitu : Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad) Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet) Menu list (daftar menu) Directory list Definition list (glossary/daftar istilah) Ordered list (Numbering) Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item, menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list : ...
Memodifikasi Input Form pada Halaman Web
Sekarang kita akan membahas cara membuat form seperti ini Nama : Alamat : Agama : Islam Kristen Budha Hindu Password : Jenis kelamin: Pria Wanita Hobi: Sepakbola Bulutangkis Komputer Permainan video Internet Komentar <HTML> <HEAD> <TITLE>Contoh Membuat Form</TITLE></HEAD> <BODY> <H1>FORM PENDAFTARAN ONLINE</H1> <FORM method="POST" action="proses.htm"> <TABLE> <TR> <TD><B>Nama :</B></TD> <TD><INPUT type="Text" name="varNama" size="15"></TD> </TR> <TR> <TD><B>Alamat :</B></TD> <TD><INPUT type="Text" name="varAlamat" size="30"></TD> </TR> <TR> <TD><B>Agama :</B></TD> <TD><SELECT name="agama" size="1"> <OPTION>Islam</OPTION> <OPTION>Kristen</OPTION> <OPTION>Budha</OPTION> <OPTION>Hindu</OPTION> </SELECT> </TD> </TR> <TR> <TD><B>Password :</B></TD> <TD><INPUT type="Password" name="varPassword" size="10"></TD> </TR> </TABLE> <B>Jenis kelamin: </B><INPUT checked type="Radio" name="Kelamin" value="Pria">Pria <INPUT type="Radio"...
Memodifikasi Tabel pada Web Page
Perataan Tabel dan Sel Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN <h4> Perataan Pada Tabel</h4> <table border=5 width="250"> <tr> <th width="50"></th> <th width="50">Kiri</th> <th width="50">Tengah</th> <th width="50">Kanan</th> </tr> <tr> <th width="50" height="50">Atas</th> <td align="left" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td> <td align="center" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td> <td align="right" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td> </tr> <tr> <th width="50" height="50">Tengah</th> <td align="left" valign="middle" width="50"...
Menyisipkan Link
Link atau hyperlink adalah sebuah teks yang apabila di klik akan menuju ke dokumen lainnya baik dalam satu halaman ataupun luar halaman web page. Untuk membuat sebuah teks hyperlink diperlukan tag anchor <a>...</a> dengan atribut dasar href. Keberadaan link dalam sebuah web merupakan sesuatu yang sangat penting karena hyperlink lah yang menghubungkan antara satu halaman dengan halaman lain dalam sebuah website. <a href="URL">...</a> Sebuah tag anchor memiliki beberapa atribut seperti berikut: href : diisi dengan URL atau lokasi halaman web yang ingin dituju, bisa halaman internal ataupun eksternal, domain internal ataupun domain eksternal. name : nama dari sebuah anchor, harus berupa...
Menggunakan Heading Untuk Judul Dokumen Web
Mungkin sudah menjadi sesuatu yang wajib dalam sebuah dokumen --entah web maupun office, dll-- memiliki judul. Sebenarnya tidak masalah sebuah tulisan tidak tertera judul, namun alangkah bijaknya bila di setiap tulisan disertakan judul, ya antisipasinya ketika ada orang lain yang membaca akan mengetahui apa inti materi tersebut. Oya takut salah.... alangkah baiknya kalo sebelumnya saya sampaikan dulu bahwa yang dimaksud judul di sini bukan judul yang akan tampil di title bar, tapi sekedar judul dalam dokumen web Nah kali ini saya akan mencoba membahas cara membuat judul pada dokumen web, tentunya dengan HTML. Dalam dokumen HTML, blok judul dibagi menjadi 6...
Teknik Memanipulasi Tampilan Paragraph pada Halaman Web
Saya yakin pasti Anda mengenal sebuah program keluaran Microsoft ini. Produk Microsoft Office tentunya, dan program tersebut adalah Microsoft Word. Siapa yang gak kenal coba?? Anak SD aja udah bisa tuh . Naaah.. dalam bahasan sekarang saya akan mencoba berbagi untuk membuat dokumen pada halaman web menjadi lebih cantik layaknya kita membuat dokumen pada Ms. Word. Oke dari pada berlama-lama, mendingan kita langsung aja ke inti permasalahannya 1. Merapikan Paragraph Untuk merapikan paragraph cukup menambahkan atribut align pada tag <p> dan diisi dengan nilai perataan yang diinginkan. Ada empat pilihan yang tersedia dalam atribut align ini yaitu left, right, center dan...