Archive for March 2014
Form dan Table di HTML
Sudah kurang lebih 1 Minggu Gudang Receh tidak posting artikel apapun, dikarenakan tugas kuliah yang numpuk dan belum selesai semua (curhat). Namun ada satu tugas yang saya paling sukai, yaitu tugas ini, posting review materi ke blog masing - masing, lumayan untuk menambah posting di blog yang masih sedikit.
Kali ini Gudang Receh membahas tentang Form dan Table pada HTML sebagai tugas review mingguan.
Form
Form adalah kolom yang berfungsi untuk mengumpulkan informasi dari blog / website kita. Misalnya informasi untuk login, register, search, dll.
Contoh form:
 |
| Pada halaman utama facebook terdapat 2 form, form login dan form register. |
 |
| Setelah login terdapat form search, form status, dan form comment. |
Contoh script untuk membuat form dengan informasi yang diminta Nama, Alamat, Jenis Kelamin, Nomor Telepon, Profesi, dan Hobi:
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="#" method="post">
Nama:<br />
<input type="text" name="nama" /><br />
Alamat:<br />
<textarea cols="60" rows="5"></textarea><br />
Jenis kelamin:<br />
<input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan<br />
Nomor telepon:<br />
<input type="text" name="nhp" /><br />
Pekerjaan:<br>
<select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select>
<br />
Hobi:<br />
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Hasilnya akan seperti dibawah ini.
Form
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
Untitled Document
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
<html>Hasilnya akan seperti dibawah ini.
<head>
<title>Tabel</title>
</head>
<body>
<table width="400" border="1">
<tr>
<td width="112">Nama</td>
<td width="21">:</td>
<td width="245"> </td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td> </td>
</tr>
</table>
</body>
</html>
| Nama | : | |
| Alamat | : | |
| Jenis kelamin | : | |
| Nomor telepon | : | |
| Pekerjaan | : | |
| Hobi | : |
Keterangan:
- Tag <tr> adalah table rows
- Tag <td> adalah table data
Kolaborasi Form dan Table
Banyak orang mengkombinasikan fungsi dari table untuk merapikan form. Dan berikut ini adalah script kombinasi keduanya.
<html>Dan hasilnya akan seperti:
<head>
<title>Form & Table</title>
</head>
<body>
<form action="#" method="post">
<table width="647" border="0">
<tr>
<td width="209">Nama</td>
<td width="10">:</td>
<td width="421"><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols="60" rows="5"></textarea></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td><input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan</td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td><input type="text" name="nhp" /></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport</td>
</tr>
</table>
</form>
</body>
</html>
Keterangan:
- Value dari atribut border pada tag <table> dapat diganti - ganti. Agar border tidak terlihat, gunakan 0.
Itulah review dari Gudang Receh tentang Form dan Table, Semoga bermanfaat.
Tags: tugas, tugas html, html, tabel, table, form,
Tag :
Programming,
Web Programming
Notepad++
Notepad++ adalah sebuah text editor pengganti Notepad yang mendukung beberapa bahasa termasuk HTML, PHP, CSS, dll. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan source code berbagai bahasa pemrograman.
Notepad++ didistribusikan sebagai perangkat lunak bebas. Proyek ini dilayani oleh Sourceforge.net telah diunduh lebih dari 27 juta kali dan dua kali memenangkan penghargaan SourceForge Community Choice Award for Best Developer Tool.
Bahasa Pemrograman yang didukung Oleh Notepad++:
- ActionScript, Ada, ASP, Assembler, autoIt
- Batch
- C, C++, C#, Caml, Cmake, COBOL, CSS
- D, Diff
- Flash ActionScript, Fortran
- Gui4CLI
- Haskell, HTML
- Berkas INI, InnoSetup
- Java, Javascript, JSP
- KiXtart
- LISP, Lua
- Makefile, Matlab, MS-DOS
- NSIS
- Objective-C
- Pascal, Perl, PHP, Postscript, PowerShell, Properties file, Python
- R, Resource file, Ruby
- Shell, Scheme, Smalltalk, SQL
- TCL, TeX
- Visual Basic, VHDL, Verilog
- XML
- YAML
Tags: html, notepad, notepad++, editor, text, text editor,
Marquee, Insert Image, & Link
Gudang Receh - Apa jadinya sebuah website apabila tanpa gambar & link ?
Pasti hanya akan menjadi web statis yang sangat monoton. Melanjutkan posting sebelumnya tentang HTML dan juga masih bagian dari tugas kuliah, kali ini Gudang Receh akan membagi cara untuk menambahkan gambar, membuat link, dan membuat animasi teks sederhana menggunakan marquee.
Marquee
Marquee
Marquee adalah tag untuk membuat teks berjalan.
Contoh:
<html>
<head>
<title>Latihan Insert Image</title>
</head>
<body>
<marquee>Teks ini berjalan</marquee>
</body>
</html>
Hasil:
<marquee>Teks ini berjalan</marquee>Banyak atribut marquee yang bisa dicoba & apabila web builder anda adalah DreamWeaver.
Contoh:
<html>
<head>
<title>Latihan Insert Image</title>
</head>
<body>
<marquee>Teks ini berjalan</marquee>
</body>
</html>
Hasil:
Cara menambahkan gambar
Cara menambahkan gambar pada page HTML adalah dengan script:
<img src="image_URL" />Juga bisa di tambah dengan atribut "alt", "width", "height", dll.
Keterangan:
- image_URL adalah tempat dimana file terletak, jangan lupa tulis sampai ekstensinya juga, misal JPG/JPEG.
Contoh:
<html>Hasilnya akan seperti ini:
<head>
<title>Latihan Insert Image</title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5MydPEOx8lPfUS0vxWBeJ7tGpje6jZUvcbtE-2Zf0td1hd1sscBHIMkstT_p6VDELDxpfcnkm_pjGFLsmonpPVBDSsqL1LMTkfnZEAmI9ysAqX3UOhwJL9OPUGyz9-UbkxF_kciibsSv/s1600/www1.gif" alt="gambar" width="558" height="350" />
</body>
</html>
Keterangan:
- Gambar diambil dari internet. Jadi jika anda mencoba script tersebut koneksi internet, gambar tidak bisa tampil.
Link
Link adalah yang menghubungkan antara suatu page ke page lainnya.
Cara membuat link:
<a href="http://adf.ly/dWxFV">Teks ini adalah link</a>Bisa juga ditambah dengan atribut "target", dll.
Contoh:
<html>Hasilnya akan seperti dibawah ini:
<head>
<title>Latihan Insert Image</title>
</head>
<body>
<a href="http://adf.ly/dWxFV" target="_blank">Teks ini adalah link</a>
</body>
</html>
Teks ini adalah link
Keterangan:
- "_blank" adalah untuk membuka link di jendela/tab baru.
Selamat mencoba dan happy coding.
Tags: html, link, image, marquee, insert, web, page, webpage, site, website,
Tag :
Web Programming
Pengenalan Perancangan Web
Di era IT ini, sebagai manusia yang terampil apalagi berstatus mahasiswa, terlebih mahasiswa IT, kita dituntut untuk mengerti & dapat mengolah suatu data menjadi informasi, dan juga memanfaatkannya. Salah satu media informasi adalah website, dan pada post kali ini Gudang Receh membahas sedikit tentang website, yang juga sebagai tugas mata kuliah yang diberikan oleh dosen pengampu.
Website
Website adalah alamat URL (Uniform Resource Locator) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan topik tertentu. Suatu situs web terdiri atas Webpage & Home page.
Web Page
Web page merupakan halaman khusus dari website tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik dalam web page yang sama maupun web page yang lain pada website yang berbed.
Homepage
Homepage merupakan halaman pertama atau sampul dari suatu website yang biasanya digunakan untuk memberikan informasi singkat mengenai isi dari website tersebut dan siapa pemiliknya. Dan biasanya file untuk homepage bernama index dengan berbagai macam ekstensi, misal index.php, index.html, index.asp, dll.
Jenis Website dibagi menjadi 2, yaitu Website statis & Website dinamis.
Website Statis
Web Statis yaitu web berisi/menampilkan informasi-informasi yang sifatnya statis (tetap). Website statis tidak menggunakan database dalam isinya. Dan untuk merubah/update informasi maupun data yang ada dalam website statis, admin harus melakukannya melalui software web builder.
Web Dinamis
Web Dinamis merupakan web yang dapat menampilkan informasi secara dinamis dan up-to-date serta dapat melakukan interaksi dengan user. Agar dapat memberikan informasi yang relevan, website dinamis biasanya terhubung dengan database sehingga informasi yang ditampilkan pada website sesuai dengan data yang ada pada database. Untuk membuat website yang bersifat dinamis dan interaktif diperlukan bahasa pemrograman khusus seperti php, asp, dsb.
Teknologi Pemrograman Web dibagi Menjadi 2, yaitu:
Client-side Programming
Client-side programming merupakan teknik pemrograman web dimana perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, maka script tersebut akan didownload dari servernya kemudian dieksekusi pada browser yang bersangkutan. Pemrograman web yang tergolong client-side programming: JavaScript, VbScript, HTML.
Server-side Programming
Pada server-side programming, perintah-perintah program (script) terlebih dahulu dieksekusi di web server, kemudian hasilnya dikirimkan ke browser dalam bentuk HTML biasa. Pemrograman web yang tergolong server-side programming: CGI/Perl, ASP, JSP, PHP, ColdFussion, dan sebagainya.
Beberapa bahasa yang sering digunakan untuk membangun sebuah halaman suatu website.
HTML
HTML adalah singkatan dari Hyper Text Markup Language, yang merupakan suatu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa dan disebut markup language karena menggunakan tanda-tanda tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada browser.
Contoh script HTML sederhana yang biasanya menjadi default pada software web builder seperti Adobe DreamWeaver, dll.
<html>Penjelasan:
<head>
<title></title>
</head>
<body>
</body>
</html>
- Teks yang berada dalam tag <title>....</title> akan menjadi judul sebuah web page.
- Hampir semua unsur tampilan pada suatu web page diletakkan di dalam tag <body>....</body>
CSS
CSS adalah singkatan dari "Cascading Style Sheet" adalah sebuah script yang fungsinya untuk memperindah tampilan web page html. CSS diletakkan di dalam tag <head>....</head>.
PHP
PHP adalah singkatan dari Hypertext Preprocessor adalah bahasa pemrograman yang dapat diterapkan dalam sebuah website yang fungsinya sebagai pemroses data dalam suatu website. Sering digunakan untuk membuat dan mengembangkan website dinamis.
Itulah sedikit bahasan tentang website yang juga adalah materi kuliah pertemuan pertama dari mata kuliah Pengenalan Perancangan Web di STMIK AMIKOM
Tags: web, website, websites, site, website statis, website dinamis, client, server, html, css, php, gudangreceh, gudang receh,
Tag :
Web Programming
Pemformatan Tulisan Pada HTML
Sebuah tampilan webpage hampir sama layaknya sebuah dokumen yang menggunakan pemformatan dalam tampilannya. Namun cara pemformatan dalam sebuah webpage (html) tidak semudah pemformatan pada word doccument. Namun seiring bertambah canggihnya software webpage builder saat ini, pemformatan pada html juga sudah lebih mudah dengan adanya fitur WYSIWYG editor. Namun kali ini Gudang Receh akan membahas sedikit tentang pemformatan tulisan pada html, tidak dengan WYSIWYG mode, melainan dengan kode-kode html agar para pembaca lebih mengenal sebuah webpage yang dibangun dengan html. Dan posting kali ini juga sebagai tugas review materi mata kuliah yang diberikan oleh dosen pengampu. Berikut adalah contoh – contoh pemformatan tulisan pada html:
Pemformatan font:
Coba script ini pada software web builder yang anda gunakan, paling sederhana adalah dengan menggunakan "Notepad" dan simpan dengan ekstensi "nama_file.html".
<html>
<head>
<title></title>
</head>
<body>
<p><b>Teks ini tebal/bold.</b></p>
<p><i>Teks ini miring/italic.</i></p>
<p><u>Teks ini bergaris bawah/underline.</u></p>
<p><b><u><i>Teks ini tebal, miring, dan bergaris bawah.</i></u></b></p>
<p><mark>Teks ini bergaris ditandai/disorot.</mark></p>
</body>
</html>
Penjelasan:
- Tag <b>....</b> berfungsi untuk membuat teks tebal/bold.
- Tag <i>....</i> berfungsi untuk membuat teks miring/italic.
- Tag <u>....</u> berfungsi untuk membuat teks bergaris bawah/underline.
- Tag <mark>....</mark> berfungsi untuk membuat teks ditandai/disorot.
Warna, Jenis, dan Ukuran font.
- Tag <font color="green">....</font> membuat font yang ada di dalamnya berwarna hijau.
- Tag <font size="5>....</font> membuat font yang ada di dalamnya berukuran 5.
- Tag <font face="calibri">....</font> membuat font yang ada di dalamnya berjenis calibri.
- Tag <font color="green" size="5" face="calibri"> membuat font berwarna hijau, berukuran 5, dan berjenis calibri.</font>
List:
Coba script ini pada software web builder yang anda gunakan, paling sederhana adalah dengan menggunakan "Notepad" dan simpan dengan ekstensi "nama_file.html".
Ordered List:
- Tag <li>....</li> menunjukkan bahwa teks tersebut adalah list.
- Tag
<ol>
.
.
.
</ol>
menunjukkan jenis list yang di gunakan, yaitu OL = Ordered List.
Unordered List:
- Tag <li>....</li> menunjukkan bahwa teks tersebut adalah list.
- Tag
<ul>
.
.
.
</ul>
menunjukkan jenis list yang di gunakan, yaitu UL = Unordered List.
Itulah tadi sedikit review yang masih teringat di ingatan. Bagi para pembaca silahkan mencoba dan jangan lupa tinggalkan komentar. Tetap nantikan tulisan - tulisan menarik di Gudang Receh.
Tags: html, webpage, page, wysiwyg,
- Tag <b>....</b> berfungsi untuk membuat teks tebal/bold.
- Tag <i>....</i> berfungsi untuk membuat teks miring/italic.
- Tag <u>....</u> berfungsi untuk membuat teks bergaris bawah/underline.
- Tag <mark>....</mark> berfungsi untuk membuat teks ditandai/disorot.
Warna, Jenis, dan Ukuran font.
<html>Penjelasan:
<body>
<p><font color="green">Teks ini berwarna hijau.</font></p>
<p><font size="5">Teks ini berukuran 5.</font></p>
<font face="calibri">Teks ini menggunakan font calibri.</font>
<p><font color="green" size="5" face="calibri">Teks ini berwarna hijau</font></p>
</body>
</html>
- Tag <font color="green">....</font> membuat font yang ada di dalamnya berwarna hijau.
- Tag <font size="5>....</font> membuat font yang ada di dalamnya berukuran 5.
- Tag <font face="calibri">....</font> membuat font yang ada di dalamnya berjenis calibri.
- Tag <font color="green" size="5" face="calibri"> membuat font berwarna hijau, berukuran 5, dan berjenis calibri.</font>
List:
Coba script ini pada software web builder yang anda gunakan, paling sederhana adalah dengan menggunakan "Notepad" dan simpan dengan ekstensi "nama_file.html".
Ordered List:
<html>Penjelasan:
<head>
<title></title>
</head>
<body>
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</body>
</html>
- Tag <li>....</li> menunjukkan bahwa teks tersebut adalah list.
- Tag
<ol>
.
.
.
</ol>
menunjukkan jenis list yang di gunakan, yaitu OL = Ordered List.
Unordered List:
<html>Penjelasan:
<head>
<title></title>
</head>
<body>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
</html>
- Tag <li>....</li> menunjukkan bahwa teks tersebut adalah list.
- Tag
<ul>
.
.
.
</ul>
menunjukkan jenis list yang di gunakan, yaitu UL = Unordered List.
Itulah tadi sedikit review yang masih teringat di ingatan. Bagi para pembaca silahkan mencoba dan jangan lupa tinggalkan komentar. Tetap nantikan tulisan - tulisan menarik di Gudang Receh.
Tags: html, webpage, page, wysiwyg,
Tag :
Web Programming
Iptekini
