Cara Membuat Dompet dari Kain Flanel

Cara Membuat Dompet dari Kain Flanel  - Hai berjumpa lagi dengan Tutorial Kerajinan Tangan yang akan memberikan sebuah tips membuat dompet dari kain flanel, yang dilengkapi aksesoris, hiasan maupun bros. Dompet dari Kain Flanel ini bisa dijadikan sebuah tas tangan cantik jika anda membuatnya dalam ukuran besar tetapi jika hanya untuk menyimpan uang saja pun tidak masalah. Pembuatan dompet ini juga hampir sama dengan dompet hp sebelummnya.

Cara Membuat Dompet dari Kain Flanel, ini terbilang cukup mudah. Anda tidak memerlukan mesin jahit untuk menjahit dompet flanel ini. Namun saya tidak bilang dompet ini tanpa di dijahit, karena masih memerlukan jahitan dengan tangan untuk membentuk dompet tersebut. Ok dari pada panjang lebar kesana kesini mending langsung saja simak tutorial cara membuat dompet dari kain flanel berikut ini.

Cara Membuat Dompet dari Kain Flanel

 Bahan yang diperlukan :
1. Kain Flanel
2. Pensil/Ballpoint
3. Kertas
4. Gunting
5. Kancing
6. Jarum Jahit
7. Lilin
8. Lem Bakar / Glue Gun
9. Benang Sulam
10. Cutter atau Silet

Tutorial Membuat  Dompet dari Kain Flanel :

1. Siapkan alat dan bahan yang diperlukan dalam membuat dompet dari kain flanel
2. Buatlah pola dompet dan hiasannya diatas kertas sesuai dengan keinginan.
3. Pilih warna kain flanel yang sesuai dengan pola atau tergantung pada selera masing-masing.
4. Pindahkan atau gambar kembali pola yang telah dibuat ke kain flanel.
5. Gunting kain flanel sesuai dengan pola yang telah dibuat.
6. Jahit tepi kain flanel dengan tusuk feston.
7. Pasangkan kancing dengan menjahitnya, sebagai penutup.
8. Lubangi penutup untuk memasangkan kancing dengan menggunakan cutter atau silet.
9. Tempelkan hiasan dengan menggunakan lem bakar / Glue Gun.
10. Jadilah dompet cantik dari kain flanel.

Cara Menjahit dengan Tusuk Feston

Tusukan Feston banyak dipakai untuk menjahit kain flanel. Tusuk Feston berguna untuk menggabungkan dua buah kain flanel yang ukuran dan bentuknya sama serta merapikan pinggiran kain Flanel . Selain itu Tusukan ini juga berfungsi untuk membuat tampilan pinggiran kain flanel lebih cantik.

1. Siapkan selembar kain flanel yang akan di jahit
2. Mulai dengan tusukan pada lembar atas flanel, Tusukkan jarum dari arah dalam kain yang ada di sisi depan menuju ke arah luar dari kain tersebut.
3. Tusukan kedua pada lembar flanel bawah dengan arah tusukan, dari bawah ke atas (hanya flanel bawah).
4. Setelah jarum berada ditengah-tengah antara kain atas dan bawah, tarik jarum keatas melewati benang pertama.
5. Selanjutnya, taruh benang di bawah jarum, tusukkan jarum hingga tembus kebawah dengan jarak antar benang sama.
6. Tarik kembali, begitu seterusnya. Jahitan dari kiri ke kanan atau melawan arah jarum jam.

Cara menyambung benang di tengah-tengah jahitan karena putus atau kurang panjang
1. Siapkan benang panjang untuk sambungan. Simpul kedua benang (benang pendek dan benang sambungan). Simpulnya simpul yang biasa kita pergunakan dalam kehidupan sehari-hari.
2. Usahakan simpul mepet di kain flanel….jangan sampai ada jarak dengan kain flanel.
3. Buat simpul sekali lagi agar kuat. Simpul harus mepet dengan kain flanel.
4. Satukan kedua benang pendek tersebut. Potong secukupnya (jangan terlalu pendek).
5. Masukkan ujung-ujung benang pendek tadi di antara kain flanel.
6. Mulai lagi jahitan seperti biasa.

Form HTML

Pengertian Form

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung  juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Berikut perintah dasar Form :

<form>

Input elements

</form>

Ada dua atribut yang digunakan pada elemen form yaitu method dan action.

Method yang berfungsi sebagai pengiriman data pada server dengan cara ke tujuan yaitu :

- Get: mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.

- Post : mengirim datanya secara terpisah.

Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

Action yang berfungsi menentukan lokasi dari script yang akan memproses data dari form.

Struktur dasar form akan terlihat sebagai berikut:

<form action="logindata.php" method="post">

...isi form...

</form>

Elemen-elemen Input pada Form

Elemen yang paling penting dalam form adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Berikut ini saya akan membahas tiap-tiap elemen input  form, beserta dengan cara pembuatannya.

1.      Text Field

Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya adalah 20 karakter.

Penulisan :< input type=”text” />

Berikut contohnya :

<form>

First name : <input type=”text” name=”first name” /><br/>

Last name :< input type=”text” name=”last name” />

</form>

2.      Password Field

Untuk memasukan datu baris teks dengan format chiphertext/password. Dengan karakter yang disamarkan dengan bulatan atau tanda “*”.

Penulisan :< input type=”password” />

Berikut contohnya :

<form>

Password : <input type=”password” name=”password”/>

</form>

3.      Radio Button

Radio button digunakan agar dapat memilih salah satu pilihan. Contoh jenis kelamin (male or female).

Penulisannya :  Radio Button<input type="radio">

Berikut contohnya :

<form>

Jenis kelamin <input type =”radio” name=”sex value=”male”/> Male<br/>

<input type =”radio” name=”sex value=”female”/> Female

</form>

4.      Text Area

Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.

Seperti dijelaskan berikut :

Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi

Rows                     = panjang baris dalam karakter

Cols                       = tinggi kotak

Penulisannya : <text area>

                  Name=”name”

Cols=”number”

Row=”number”

...........

</text area>

Berikut contohnya:

Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>

5.      Check Box

Check Box digunakan untuk dapat memilih lebih dari satu pilihan.

Penulisannya: Check Box<input type="checkbox">

Berikut contohnya :

Hobi :

<form>

                        <input type=checkbox name=hobi value=Membaca>Baca Buku

                        <input type=checkbox name=hobi value=Kesenian>kesenian

                        <input type=checkbox name=hobi value=olahraga>Olahraga

                        <input type=checkbox name=hobi value=Traveling>Jalan Jalan

</form>

6.      Select List

Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.

Penulisannya :

<select>

......

</select>

Berikut contohnya:

Pekerjaan :

                        <select name=Pekerjaan>

                                    <option value=Pelajar>Pelajar/Mahasiswa

                                    <option value=PNS>Pegawai Negeri Sipil

                                    <option value=Karyawan>Karyawan

                                    <option value=Wiraswasta>Wiraswasta

                        </select>

7.      Submit Button

Digunakan untuk mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dalam  atribut ACTION dlam elemen FORM.

Penulisannya : Submit<input type="submit">

Berikut contohnya :

<form name=”input” action=”proses input.php” method=”get’>

....................

..................

<input type=submit value=kirim data/>

</form>

8.      Reset Button

Digunakan untuk membatalkan semua proses ata mereset proses pengisian data yang dilakukan di elemen input form.

Penulisannya : Reset<input type="reset">

Berikut contohnya :

<form name=”input” action=”proses input.php” method=”get’>

....................

..................

<input type=submit value=kirim data/>

<input type=reset value=reset data/>

</form>

Jadi beberapa contoh elemen tadi digabungkan akan menjadi seperti berikut :

<html>

<head>

<title bgcolor="Black">Contoh pembuatan Form</title>

</head>

<body>

<form action="prosesinput.php" method="get">

     <p> First name : <input type=”text” name=”first name” /><br/>

 Last name :< input type=”text” name=”last name” />

<p> Password : <input type=”password” name=”password”/>

<p> Jenis kelamin : <input type =radio name=”sex value=”male”/> Male

       <input type =radio name=”sex value=”female”/> Female

<p> Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>

            <p> Hobi :       <input type=checkbox name=hobi value=Membaca>Baca Buku

                                    <input type=checkbox name=hobi value=Kesenian>kesenian

                                    <input type=checkbox name=hobi value=olahraga>Olahraga

                                    <input type=checkbox name=hobi value=Traveling>Jalan Jalan

<p> Pekerjaan :

                                    <select name=Pekerjaan>

                                    <option value=Pelajar>Pelajar/Mahasiswa

                                    <option value=PNS>Pegawai Negeri Sipil

                                    <option value=Karyawan>Karyawan

                                    <option value=Wiraswasta>Wiraswasta

                                    </select>

            <p>Komentar : <textarea name="komentar" cols="25" rows="4"></textarea>

            <p><input type=submit value=kirim data/><input type=reset value=ulang>

</form>

</body>

</html>

Berikut picturenya :

Sekian terimakasih, semoga bermanfaat.

Cascading Style Sheet (CSS)

Pengertian Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext,footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file) Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen Dengan adanya CSSmemungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda >Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996 Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
VersiUntuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

B.     Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. (Wikipedia bahasa Indonesia, 2012)

C.    Versi

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti : multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.  (Wikipedia bahasa Indonesia, 2012)

D.    Penulisan

Kode CSS terdiri dari 3 bagian yaitu selector, property dan value:

Selector {property: value;}

Selector diletakkan terlebih dahulu, diikuti dengan property dan kemudian value. Tiap properti dengan valuenya dipisahkan dengan tanda titik dua dan berakhir dengan semi-kolon. Mereka juga diletakkan dalam braket keriting (curly bracket). Contohnya sebagai berikut:

Body {background-color:red;}

Selector: Elemen html apa yang di aplikasi di bagian ini.

Property: Apa yang akan dirubah pada bagian ini.

Value: Nilai pengaturannya.

Jangan meletakkan spasi diantara property value dengan unitnya karena hanya akan berfungsi pada Internet Explorer saja dan bukan pada Firefox maupun Opera.

CSS bisa diaplikasikan dengan 3 cara untuk dokumen HTML :

• Dengan cara menggunakan attribute style HTML (inline) – contoh:
  
  <body style="background-color: yellow;">

• Dengan cara menyelipkan kode CSS nya diantara style tag (<style>) – contoh:
  
  <html>
  <head>
  <title>Contoh</title>
  <style type="text/css">body {background-color: yellow;}

</style>
</head>

• Dengan cara menyelipkan kode CSS di file terpisah (external style sheet) dan terlink pada dokumen HTML. Link yang menghubungkan itu bisa dibuat dengan meletakkan barisan kode HTML dibawah ini yang diletakkan diantara head tag pembuka dan penutup pada dokumen HTML.

<link rel="stylesheet" type="text/css" href="nama-folder/nama-file.css" />  (Edy, 2009)

Contoh Berkas CSS :

<html>

<head>

<style type="text/css">

body

{background-color:#d0e4fe;}

h1

{color:orange;text-align:center;}

p{font-family:"Times New Roman";font-size:20px;}

</style>

</head>

 <body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p>

</body>

</html>

(Wikipedia bahasa Indonesia, 2012)

E.     Sifat CSS

Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.  (Wikipedia bahasa Indonesia, 2012)

Internal css adalah code css yang diletakan pada file pemanggil seperti HTML. internal css diletakan pada tag <style> dalam header tag <head>. penggunaan ini akan lebih efisien saat diterapkan pada sebuah file HTML saja yang membutuhkan sebuah css dan css tersebut diterapkan pada banyak elemen HTML. contoh penggunaannya :

<html>
<head>
<styletype=”text/css”>
p{color:white;font-style:oblique;}
body{bacground-color:black;}
</style>
</head>
<body>
<p>hallo</p>
</body>
</html>

(Tanjung, 2011)

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.  (Wikipedia bahasa Indonesia, 2012)

Style Sheet external adalah style sheet yang didefinisikan secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file terpisah, maka harus diberikan ekstensi penyimpanannya dengan diakhiri  .css  ( contoh : style.css  ) dan tidak perlu didefinisikan di dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus dihubungkan menggunakan sebuah link untuk mengakses atau memanggilnya.

Sebagai contoh sederhana untuk mempraktikkan Cascade Style Sheet External dapat dicoba dengan mengetikkan kode program berikut ini :

H1{Font-family:"comic sans ms";font-size:16pt;font-weight:bold;Color:blue} 

P{Font-family:"monotype corsiva";font-size:12pt;font weight:bold;Color:red;text-align:justify} 

body{font-family: verdana; font-size: 12px; background-color:green} 

Lalu simpan dengan nama style.css

Setelah itu, ketikkan kode program untuk membuat dokumen HTML berikut ini  dan simpan dengan nama  filehtml.html  agar dapat memanggil Cascade Style Sheet yang telah dibuat terpisah tadi.

<html> 

<head> 

  <title>Membuat CSS External</title> 

<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 

  <h1>Contoh penggunaan Cascade Style Sheet External</h1> 

  <p> Style Sheet external adalah style sheet yang didefinisikan

secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file 

terpisah, maka harus diberikan ekstensi penyimpanannya dengan 

diakhiri  .css  ( contoh : external.css  ) dan tidak perlu didefinisikan di

dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus 

dihubungkan menggunakan sebuah link untuk mengakses atau 

memanggilnya.</p> 

</body> 

</html> 

(heyi, 2012)

F.     Fakta Menggunakan CSS

Fakta Menggunakan CSS diantaranya :

• Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
• Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
• Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
• Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
• Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
• CSS adalah layouting "Masa Depan" dengan penggabungan bersamaXHTML.  (Wikipedia bahasa Indonesia, 2012)