Muhammad Imam

Membuat Form Dengan HTML5 dan CSS

June 20, 2014HTML 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;
}

Membuat Penomoran Otomatis dengan Ms.Word 2013

June 14, 2014Belajar Microsof 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.

Pilih beberapa baris paragraf yang akan diberi format bullet.
Klik tombol Bullet yang terdapat pada grup Paragraph dalam tab Home.
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.

Syair

June 07, 2014Syair 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

Pantun Peribahasa

June 07, 2014Pantun 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

Pantun Nasihat

June 07, 2014Pantun 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

Muhammad Imam

Membuat Form Dengan HTML5 dan CSS

Membuat Penomoran Otomatis dengan Ms.Word 2013

Syair

Pantun Peribahasa

Pantun Nasihat

GOLD PRICE

Labels

Blog Archive

Translate

Categories

Sosial Media

Blog Archive