Membuat Web Dengan Bahasa CSS

Asaalamualaikum Wr.Wb.

Hay Sobat !!
Bagaimana kabar kalian.. semoga sehat..

Pada kesempatan kali ini saya akan memberikan informasi cara membuat web dengan bahasa CSS.
Contoh :

pertama kita buat dulu headernya / bagian atas. untuk membuatnya kita kitikkan source code berikut ini pada notepad++ / text editor.


Contoh 1:

<style>
#head{
          width:100px;
          heigth:15px;
          text align:center;
          color:#ee44ee;
          background-color:#ee45ee;
          border-top-left-radius:5px; 
          border-top-right-radius:5px;
          background-image:url('1.png');
          box-shadow:5px 5px 5px 5px rgba(222, 222, 222, 0,9);

   
} 
</style>
<body>
 <div id="head">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;" id="myBlueDiv"></div>
  <div style="background-color:khaki;"></div>
</div>
</body> 

Contoh 2:

<style>
#form{
    width:auto;
    height:auto;
    color:#ffccff;
    background-color:blue;
    border-radius:10px 10px 10px 10px;
    padding:10px;
    margin-top:20px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }
#form1{
    width:30px;
    height:auto;
    text-align:center;
    background-color:6655ff;
    border-radius:5px 5px 5px 5px;
    padding:5px;
    margin-top:10px;
    float:left;
    }
#form1:hover{
    width:30px;
    height:auto;
    background-color:aqua;
    border-radius:10px 10px 10px 10px;
    padding:10px;
    margin-top:20px;
    margin-right:auto;
    }
</style> 
<body>
 <div id="conf">
        <ul>
          <li><a href="default.asp">Home</a></li>
          <li><a href="news.asp">News</a></li>
          <li><a href="contact.asp">Contact</a></li>
          <li><a href="about.asp">About</a></li>
        <li><a href="about.asp">Login</a></li>
        </ul>
    </div>
</body>

contoh 3:

<style>
#left {
    width:24px;
    height:60px;
    float:left;
    color:black;
    text-align:center;
    margin-top:6px;
    background-color:#ee45ee;
    border-top-left-radius:10px;
    box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
    }
</style>
<body>
 <div id="left">
<br><br><br>
Login<br><br><hr>
Email:<br>
<input type="text" id="email"><br><br>
Password:<br>
<input type="password" id="password"><br><br>
<input type="submit" value="Login">
<input type="reset" value="bersih">
</div>
</body>



Contoh 4:

<style>

#right {
    width:75px;
    height:60px;
    float:right;
    color:black;
    background-color:#ee45ee;
    border-top-right-radius:10px;
    margin-left:2px;
    margin-top:6px;
    box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
    }
 div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100px;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999px;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999px;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100px;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<body>
 <div id="right">
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
</div>
</body>

Contoh 5:

<style>
 #footer {
    width:100px;
    height:14px;
    text-align:center;
    color:black;
    background-color:#ee45ee;
    margin-top:375px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
    }
</style>

<body>
 <div id="footer">
<br>
<p>Copyright by Febri Imam</p>
</div>
</body>

Selamat mencoba..
Terima kasih sudah baca artikel saya, jangan lupa baca artikel saya yang lainnya.

Read More

Belajar Table Tingkat Lanjut

Assalamualaikum Wr.Wb.

Sekilas tentang table

Table (table) sangat diperlukan ketika ingin menampilkan data yang berbentuk kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang di pakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolahan data dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Tabel Border

Untuk menentukan batas tabel dalam CSS, menggunakan perbatasan properti.

Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen:

Perkecil Tabel Borders

Border-collapse properti menetapkan apakah perbatasan table harus runtuh ke dalam perbatasan tunggal:

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh lebar  dan tinggi sifat.

Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:

Penyelarasan Horizontal

Align properti menetapkan alignment horizontal (seperti kiri, kanan, atau tengah) dari konten dalam <th> atau <td>.

Secara default, isi dari <th> elemen adalah pusat-aligned dan isi dari <td> elemen yang tersisa-blok.

Contoh berikut kiri meluruskan teks dalam <th> elemen:

Keselarasan vertikal

Vertical-align properti menetapkan alignment vertikal (seperti atas, bawah, atau tengah) dari konten dalam <th> atau <td>.

Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:

Contoh berikut kiri meluruskan teks dalam <th> elemen:

Tabel Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, gunakan bantalan properti pada <td> dan <th> elemen:

Selamat mencoba..
Kalau ada yang jurang jelas silahkan komen atau lihat di w3school.com
terima kasih.

Read More

Belajar PHP

Assalamualaikum Wr.Wb.

Apa itu PHP?

• PHP merupakan singkatan dari "PHP: Hypertext Preprocessor"
• PHP adalah banyak digunakan, open source bahasa scripting
• Script PHP dieksekusi pada server
• PHP adalah gratis untuk men-download dan menggunakan

 Jenis PHP Data

Variabel dapat menyimpan data dari berbagai jenis, dan tipe data yang berbeda dapat melakukan hal-hal yang berbeda.

PHP mendukung jenis data sebagai berikut:

• Tali
• Bilangan bulat
• Mengapung (floating point - juga disebut ganda)
• Boolean
• Susunan
• Obyek dan lain sebagainya.

PHP String

Sebuah string adalah rangkaian karakter, seperti "Halo dunia!".

Sebuah string dapat berupa teks dalam tanda kutip. Anda dapat menggunakan satu atau dua tanda kutip:

Contoh :

Hasil :

PHP Integer

Tipe data integer adalah angka non-desimal antara -2147483648 dan 2147483647.

Aturan untuk bilangan bulat:

• Integer harus memiliki setidaknya satu digit
• Integer tidak harus memiliki titik desimal
• Integer dapat berupa positif atau negatif
• Bilangan bulat dapat ditentukan dalam tiga format: desimal (10-based), heksadesimal (16 berbasis - diawali dengan 0x) atau oktal (8 berbasis - diawali dengan 0)

Dalam contoh berikut $ x adalah bilangan bulat. PHP var_dump () mengembalikan fungsi tipe data dan nilai:

Contoh :

Hasil :

PHP Lampung

Sebuah float (floating point nomor) adalah nomor dengan titik desimal atau nomor dalam bentuk eksponensial.

Dalam contoh berikut $ x adalah pelampung. PHP var_dump () mengembalikan fungsi tipe data dan nilai:

Contoh :

Hasil :

PHP Boolean

Sebuah Boolean merupakan dua kemungkinan negara: TRUE atau FALSE.

Bololeans sering digunakan dalam pengujian bersyarat. Anda akan belajar lebih banyak tentang pengujian kondisional dalam bab selanjutnya dari tutorial ini.

PHP Array

Sebuah array menyimpan beberapa nilai dalam satu variabel tunggal.

Dalam contoh berikut $ mobil adalah array. PHP var_dump () mengembalikan fungsi tipe data dan nilai:

Contoh :

Hasil :

PHP Object

Sebuah objek adalah tipe data yang menyimpan data dan informasi tentang bagaimana untuk mengolah data itu.

Dalam PHP, sebuah objek harus secara eksplisit dinyatakan.

Pertama kita harus mendeklarasikan kelas objek. Untuk ini, kita menggunakan kata kunci class. Kelas A adalah struktur yang dapat berisi properti dan metode:

Contoh :

Hasil :

Selamat Mencoba.

Terima kasih membaca artikel saya, semoga bermanfaat.

Read More

Belajar HTML Form ( Formulir )

Assalamualaikum Wr.Wb

Kali ini saya akan belajar mengenai HTML Form.
Macam-macam HTML Form ( Formulir ) :

Form Element 

• Element input.
• Checkbox.
• Tombol Radio.
• Tombol Submit.

       Dan banyak lagi.

Input Element
   
Input elemen yang paling penting elemen bentuk.

    Input elemen memiliki banyak variasi, yaitu pada jenis atribut.

Contoh :

Tombol radio Masukan

<input type = "radio"> mendefinisikan tombol radio.

Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan.

Contoh :

Submit Tombol

<input type = "submit"> mendefinisikan sebuah tombol untuk pengiriman formulir pada handler.

Bentuk - handler biasanya halaman server dengan script untuk memproses input data.

Bentuk-handler ditentukan dalam form tindakan atribut.

Contoh :

Semoga bermanfaat.

Terima kasih sudah membaca artikel saya.

Read More

Belajar Membuat Web Statis Menggunakan HTML

Assalamualaikum wr.wb

hallo..
bagaimana kabarnya ? Semoga sehat.

Sebelum itu, apa yang dimaksud web statis ?
Web statis adalah website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja. Halaman-halaman web tersebut tidak memiliki database data dan informasi yang ada pada web statis tidak berubah-ubah kecuali diubah sintaksnya.

Contoh dari web statis adalah web yang berisi profil perusahaan. Disana hanya ada beberapa halaman saja dan kontennya hampir sama tidak pernah berubah, karena kontennya langsung diletakkan dal HTML saja.

Contoh gambar :

Dari gambar ini saya akan memberikan contoh sintaksnya.

Sintaks pertama

Sintaks kedua

Sintaks ketiga

Tata Letak Situs Menggunakan HTML5

Jika ingin lebih jelas dan mudah dalam belajar HTML, klik di sini www.w3school.com

Terimah kasih sudah membaca artikel saya  -_-

Read More