Membuat Form Dengan HTML5 dan CSS

No comments
  Kali ini saya akan memberikan informasi tentang Design Web Dasar menggunakan HTML5 dan CSS. Ilmu ini saya dapatkan dari dosen mata kuliah web Design di kampus saya. Sebelumnya saya memohon maaf kepada bapak dosen saya, karena telah mempublikasikan modulenya. Tapi tindakan saya ini sangat terpujikan pak, hehehehe... ilmu itu harus kita publikasikan kepada orang-orang yang membutuhkan, "Kita loe aja keles".wkwkwkwk...
    Ok langsung saja Form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna, yang berfungsi untuk memberikan informasi tertentu dari pengguna kepada website. Berikut contoh form pendaftaran yang telah saya pelajari dari perkuliahan saya. 

Hasil dari Coding dibawah

HTML :


 

<html>
<head>
<title>Contoh Form Pendaftaran</title>
</head>
<body>
        <form>
                <div id="heading">Pendaftaran Jati Diri Anda</div>
                <content>
                      <p style="font-size:24px;">Mendaftar</p>
                      <p style="font-size:20px;">Gratis, sampai kapanpun.</p>
                      <table>
                            <tr>
                                   <td id="label">
                                           <label for="Namadepan">Nama Depan</label>
                                   </td>
                                   <td>:
                                         <input type="text" name"namadepan"/>
                                   </td>
                                   <td id="label">
                                          <label for="Namabelakang">Nama Belakang</label>
                                   </td>
                                   <td>:
                                          <input type="text" name"namabelakang"/>
                                   </td>
                            </tr>
                            <tr>
                                    <td id="label">
                                            <label for="email">Email Anda</label>
                                    </td>
                                    <td colspan="3">:
                                            <input type="text" name="email" id="email">
                                    </td>
                            </tr>
                            <tr>
                                    <td id="label">
                                            <label for="re_email">Masukkan Ulang Email</label>
                                    </td>
                                    <td colspan="3">:
                                            <input type="text" name="reemail" id="reemail">
                                    </td>
                            </tr>
                             <tr>
                                    <td id="label">
                                           <label for="password">Kata Sandi Baru</label>
                                    </td>
                                    <td colspan="3">:
                                           <input type="text" name="password" id="password">
                                    </td>
                             </tr>
                             <tr>
                                    <td id="label">
                                            <label for="tgllahir">tanggal Lahir</label>
                                    </td>
                                    <td colspan="3">:
                                           Tanggal
                                                   <select name="tgl">
                                                             <option value="">[Pilih]</option>
                                                   </select>
                                           Bulan
                                                    <select name="bln">
                                                             <option value="">[Pilih]</option>
                                                    </select>
                                          Tahun
                                                    <select name="thn">
                                                             <option value="">[Pilih]</option>
                                                    </select>
                                    </td>
                             </tr>
                             <tr>
                                     <td id="label"><label for="jk">Jenis Kelamin</label></td>
                                     <td colspan="3">:
                                            <input type="radio" name="jk" value="perempuan">Perempuan
                                            <input type="radio" name="jk" value="laki-laki">Laki-Laki
                                    </td>
                            </tr>
</table>
<p style="font-weight:normal;">
         <input type="checkbox" name="rule" value="agree">dengan mengklik mendaftar, Anda menyetujui <span>ketentuan</span>kami dan bahwa Anda telah membaca <span>Kebijakan</span>Penggunaan DAta, termasuk <span>Penggunaan Cookie</span>
</p>
</content>
<footer>
         <input type="button" value="Mendaftar"/>
         <input type="reset"/>
</form>
</body>
</html>







CSS :

body {
    width: 600px;
    margin: 0 auto;
}
form {
    background-color: #C4E1FF;
}
#heading {
    height: 30px;
    font-weight: bold;
    color: #ffffff;
    background-color: #3300FF;
    text-align: center;
    padding-top: 5px;
}
p{
    font-weight: bolder;
    margin-left: 10px;
}

footer {
    background-color: #3300FF;
    text-align: center;
    paddding-top: 10px;
    height: 35px;
}



table {
    margin-left: 10px;
}
td#label {
    width: 105px;
}
#email, #reemail, #password {
    width: 410px;
}
span {
    color: blue;
}
Share:
Read More

Membuat Penomoran Otomatis dengan Ms.Word 2013

No comments
      Microsof Word memiliki fasilitas penomoran otomatis untuk teks atau naskah sehingga kita tidak perlu lagi mengetik naskah dengan penomorannya. Kita dapat memberikan penomoran otomatis dengan memanfaatkan fasilitas bullet dan number. Bullet untuk pemberian simbol otomatis pada setiap paragraf yang terpilih atau kita blok. sedangkan Number untuk pemberian nomor otomatis pada setiap paragraf yang terpilih. Microsoft Word juga menyediakan fasilitas untuk penomoran otomatis bertingkat yang disebut sistem Multilevel List.
Pada
Ok.. langsung saja kita menuju langkah-langkahnya :

A. Membuat Simbol Otomatis (Bullet)
Kita dapat dengan mudah membuat bullet dengan memilih paragraf dan menekan tombol Bullets yang terdapat pada toolbar Formatting. 

  1. Pilih beberapa baris paragraf yang akan diberi format bullet.
  2. Klik tombol Bullet  yang terdapat pada grup Paragraph dalam tab Home.
  3. Untuk menghapus format bullet, pilih paragraf tersebut dan klik sekali lagi tombol Bullet.


B. Membuat Penomoran Otomatis (Number)
Langkahya sama seperti membuat bullet, tetapi kita dicara ini memilih Numbering . Sebagai contoh lihat perbedaan dari gambar dibawah.
Share:
Read More

Syair

No comments
Dengarkan tuan ayahanda berperi
Kepada anakanda muda bestari
Jika benar kepada diri
Nasihat kebajikan ayahanda beri

Aduhai anakanda muda remaja
Jika anakanda mengerjakan raja
Hati yang betul hendaklah disahaja
Serta rajin pada bekerja

Jika anakanda menjadi besar
Tutur dan kata janganlah kasar
Janganlah seperti orang sasar
Banyaklah orang menaruh gusar

Itulah orang akalnya kurang
Menyangka diri pandai seorang
Takabur tidak membilang orang
Dengan manusia selalu berperang

Anakanda jauhkan kelakuan ini
Sebab kebencian Tuhan Rahmadi
Jiwa dibawa ke sana-sini
Tiada laku suatu hari
 Kesukaan orang anakanda cari
Supaya hatinya jangan lari
Masyhurlah anakanda dalam negeri
Sebab kelakuan bijak bestari

Nasihat ayahanda anakanda fikiran
Keliru syaitan anakanda jagakan
Orang berakal anakanda lampirkan
Orang jahat anakanda jauhkan

Setelah orang besar fakir yang karu
Tidak mengikut pengajaran guru
Tutur dan kata haru-biru
Kelakuan seperti anjing pemburu

Tingkah dan laku tidak kelulu
Perkataan kasar keluar selalu
Tidak memikirkan punya malu
Bencilah orang hilir dan hulu 

 Patut juga mencari jasa
Kepada raja yang itu masa
Tetapi dengan budi bahasa
Supaya negeri ramai temasya
 
Share:
Read More

Pantun Peribahasa

No comments
Berakit-rakit ke dahulu
Berenang-renang ke tepian
Bersakit-sakit dahulu
Bersenang-senang kemudian

Ke hulu memotong pagar
Jangan terpotong batang durian
Cari guru tempat belajar
Jangan jadi sesal kemudian
Kerat-kerat kayu di ladang
Hendak dibuat hulu cangkul
Berapa berat mata memandang
Berat lagi bahu memikul

Pohon pepaya di dalam semak
Pohong manggis sebesar lengan
Kawan tertawa memang banyak
Kawan menangis diharap jangan

 
Share:
Read More

Pantun Nasihat

No comments
Jalan-jalan ke kota Bilitar
Jangan lupa beli sukun
Jika kamu ingin pintar
Belajarlah dengan tekun

Anak ayam turun sepuluh
Mati satu tinggal sembilan
Tuntut ilmu bersungguh-sungguh
Suatu jangan ketinggalan

Perang ditetak ke batang sena
Belah bulu taruhlah temu
Barang dikerja takkan sempurna
Bila tak pernah menaruh ilmu
Kayu cendana diatas batu
Sudah diikat dibawa pulang
Adat dunia memang begitu
Benda yang buruk memangterbuang

Kemuning ditengah balai
Bertumbuh terus semakin tinggi
Berunding dengan orang tak pandai
Bagaikan alu pencungkil duri
Share:
Read More

Cara Membuat Tabel Dengan Microsoft Word 2013

No comments
    Dulu pada saat saya mengenal Ms.Word, saya kira aplikasi ini hanya untuk pengolahan kata saja atau mengetik teks saja. Ternyata setelah saya pelajari dan pelajari dan terus mengotak-atik isi fungsi dalam Ms.Word. hehehehe.... macam tukang bedah bengkel aja ya diotak-atik. Akhirnya saya telah menemukan hal baru yang memang belum saya tau ternyata bukan di Ms Excel saja yang bisa membuat tabel, di Ms Word juga dapat membuat dokumen dalam bentuk tabel.

     Suatu tabel terdiri dari kolom dan baris. Perpotongan antara kolom dan baris dinamakan sel. Dapat juga menyisipkan teks ataupun objek-objek gambar dalam sel-sel tersebut. Ok... sobat bloggerrrr, jangan berlama-lama, langsung saja kita akan membuat tabel :

  1. Letakkan insertion point pada tempat dimana tabel akan disisipkan dalam dokumen.
  2. Klik tombol Insert Table pada grup Tables dalam tab Insert sehingga akan tampak kotak tabel dibawah tombol Insert Table.
    Tampilan Insert Table
  3. Geser mouse diatas kota-kotak sampai mendapatkan ukuran atau jumlah tabel yang diinginkan dan lepaskan mouse. Misalnya, geser mouse hingga membentuk blok 4 kolom dan 3 baris seperti pada gambar diatas. Atau dapat juga memilih menu pada Insert Table sehingga muncul kotak dialog Insert Table.
    Tampilan kotak dialog Insert Table

    Setelah langkah diatas, Microsoft Word akan menampilkan tabel kosong sesuai dengan jumlah baris dan jumlah kolom yang dibuat dalam menempatkan Insertion Point pada sel pertama.
    Hasil pembentukan Tabel baru
Share:
Read More

Cara Membuat Kolom Koran Pada Microsoft Word 2013

2 comments
Disini kita akan mengenal dan mempelajari cara membuat kolom pada Microsof Word 2013 yangakan membagi kolom-kolom tersebut ke dalam ukuran yang sama pada dokumen kita. Langsung saja mari kita baca langkah-langkah untuk memformat dokumen ke dalam tampilan kolom adalah :
  1. Pastikan tampilan dokumen dalam kondisi Print Layout. Blok paragraf yang akan diformat menjadi kolom.
Teks Paragraf
Dalam menentukan blok area yang akan diformat kolom, jika ingin sebgian teks yang akan diformat dalam bentuk kolom, pilih teks (blok teks) yang akan diformat dalam bentuk kolom. kalau sluruh dokumen maka kita hanya pilih Columns dan tentukan jumlah kolom.
  1. Klik tombol perintah Columns yang terdapat pada grup Page Setup dalam tab Page Layout untuk menampilkan daftar pilihan format kolom.
  2. Sebagai contoh, klik pilihan Two yang berfungsi untuk membagi dokumen/paragraf menjadi 2 kolom. perhatikan hasilnya. 
    Pilihan format dalam tombol Columns

  3. Hasil pembentukan kolom
  4. Dapat mengatur lebar atau jarak antar kolom dengan menggunakan garis mistar/ruler. perhatikan ilustrasi gambar dibawah ini.
penggaris untuk mengatur jarak kolom
Setelah kolom dibuat, kita bisa memodifikasi format kolom yang telah berbentuk dengan cara mengklik tombol perintah Columns yang terdapat  pada grup Page Setup dalam tab Page Layout, kemudian pilih pilihan More Columns untuk membuka kotak dialog Columns.

Kotak dialog Columns

Perhatikan keterangan berikut :
  • Presets, untuk menentukan jumlah kolom dengan format pilihan yang telah disediakan Microsoft Word. Pilihan Left dan Right digunakan untuk membagi dokumen menjadi 2 kolom engan lebar berbeda.
  • Number of Columns, untuk menentukan jumlah kolom apabila kolom tersebut tidak tersedia pada bagian Presets.
  • Width and Spacing, untuk mengatur lebar dan jarak antar kolom.
  • Equal Columns Width, aktifkan kotak periksa ini untuk menampilkan garis pembatas antar kolom.
  • Line Between, aktifkan kotak periksa ini untuk menampilkan garis pembatas antar kolom.
  • Apply To, untuk memasang tatanan format.
     Whole Document, berarti format kolom akan diberlakukan pada seluruh dokumen.
    This Section, berarti format kolom akan diberlakukan pada bagian/Section yang pada posisi di dalam insertion point berbeda.
    Selection Text, format kolom akan diberlakukan pada bagian teks yang terpilih.
    This Point Forward, format kolom akan diberlakukan mulai dari paragraf di mana insertion point berada sampai akhir dokumen.
    Perhatikan beberapa contoh hasil modifikasi bentuk kolom pada gambar dibawah ini: 
 
Share:
Read More

Cara Membuat Drop Cap dengan Microsoft Word 2013

No comments
Drop Cap merupakan huruf/kata pada awal paragraf yang ditampilkan dengan ukuran besar dan dibentuk dengan format yang berbeda dengan teks lainnya. Drop Cap hanya dapat digunakan satu karakter dan tidak dapat digunakan pada data tabel, Header / judul kepala dan Footer (judul kaki). Untuk melihat hasil Drop Cap, pastikan lembar kerja Microsoft Word tampil dalam tampilan Print Layout View. Langsung saja mari kita ikuti langkah-langkah berikut untuk membuat Drop Cap :


  1. Letakkkan insertion point pada sembarang paragraf yang akan dimasukkan Drop Cap. Atau, blok kita pada awal paragraf untuk membuat Drop Cap kata.
  2. Pilih tab Insert, klik tombol Drop Cap yang terletak dalam grup Text.
  3. Pilih salah satu format drop cap dan perhatikan perubahannya. Lihat contoh hasil drop cap dibawah ini:
  4. Untuk menormalkan format tampilan teks, pilih pilihan None.
  5. Atur format Drop Cap melalui Drop Cap Option, sesuai keinginan anda. Seperti Drop cap, jenis font untuk drop cap, besar drop cap yang diukur dalam baris dan jarak antara drop cap dengan teks. Beberapa fungsinya :  
    •  Position, untuk mengatur posisi drop cap.

ü)  None, untuk menghapus format drop cap yang telah terpasang.

ü ) Dropped, untuk meletakkan drop cap dalam area teks.

ü)  In margin, untuk meletakkan drop cap dalam area margin

  • Font, untuk mengubah jenis font untuk drop cap.
  • Lines to drop, untuk mengatur jumlah baris yang akan diletakkan disamping kanan  drop cap.
  • Distance from text, untuk mengatur jarak drop cap dengan teks dalam dokumen. 


     6.   Klik tombol Ok ketika selesai mengatur format drop cap. 
Share:
Read More

GOLD PRICE

Powered By Blogger

Translate