Membuat Web Sederhana

Assalamualaiqum

Kali ini saya akan ngepost tentang cara mendesain web sederhana, kebetulan saya baru dapat tugas desain web juga, jadi gini nih caranya:

Pertama desain bannernya dulu ya. Saya membuat banner dengan menggunakan Photoshop. Kalo bannernya udah jadi, sekarang kita akan membuat header atau bagian atasnya. Berikut codingnya:

<div id="container">

 <div id="header">

   <h1><img src="banner.png" width="717" height="141" /><img src="alamat.png" width="718" height="61" /></h1>

   <table width="719" border="1">

     <tr>

       <td width="501" height="16" bgcolor="#faee8b"> <marquee direction="left">

       Beauty Collection

       </marquee>

       </td>

     </tr>

   </table>

 </div>

Hasilnya:

Selanjutnya kita akan membuat menu barnya sekaligus buat link, gini codingnya:

<div id="sidebar1">

   <blockquote>

     <h3> <a href="home.html"><img src="home.png" width="109" height="60" /></a></h3>

     <h3><a href="property.html"><img src="catalog.png" width="110" height="58" /></a></h3>

     <h3><a href="profil.html"><img src="about.png" width="110" height="63" /></a></h3>  

   </blockquote>

</div>

Hasilnya:

Sekarang kita tinggal buat konten didalamnya deh. Codingnya:

<div id="mainContent">

   <h1> Putry's Shop</h1>

   <p>Bagi anda yang terlalu sibuk dan tidak mempunyai waktu untuk berbelanja langsung ke pusat perbelanjaan, tidak perlu khawatir.</p>

   <p>Sekarang telah hadir Putry's Shop yang memudahkan anda berbelanja secara online dan barang - barang yang tersedia dijamin berkualitas baik.</p>

   <p>Jadi tunggu apalagi....! Segera kunjungi website kami. </p>

<p>

     <!-- end #container --></p>

<p>&nbsp;</p>

 </div></div>

Hasilnya:

Terakhir anda tinggal buat halaman lainnya supaya bisa dilink, caranya sama kok sama yang diatas :)

Sekian postingan kali ini semoga dapat bermanfaat bagi para pembaca.

Wassalamualaiqum wr. wb.

Read More

MEMBUAT TABLE, GAMBAR & ANIMASI, HEADING, BREAK DAN PARAGRAF, STYLE DOKUMEN

MODUL 3

MEMBUAT HEADING, BREAK  DAN PARAGRAF, STYLE DOKUMEN

1. Heading

Heading sangat diperlukan dalam suatu dokumen. Karena heading disini merupakan format tertentu dalam suatu paragraph dan bisa juga dikatakan sebagai judul dari suatu paragraf.

• Sintaknya :

• Hasilnya :

2. Break

Jika menulis dokumen yang panjang, tentu diperlukan pemenggalan kalimat untuk mengefisiensikannya.

• Sintaknya :

• Hasilnya :

3. Paragraf

Membuat barus yang baru dengan memiliki jarak tertentu.

• Sintaknya :

• Hasilnya :

4. Style Dokumen

Digunakan untuk mengatur style font.

• Sintaknya :

• Hasilnya :

5. Mengatur Font

Mengatur font terdapat element font untuk merubah jenis, ukuran dan warna dari tampilan huruf.

• Sintaknya :

• Hasilnya :

6. Mengenal Bullet

Asa 2 jenis bullet yaitu Unordered List <UL>yaitu membuat bullet sejadan dan Ordered List <OL> untuk membuat bullet nomor.

• Sintaknya :

• Hasilnya :

Modul 4

MEMBUAT TABEL

Dalam Html program untukmembuatbarisadalah<TR>sedangkankolomadalah<TD>.

1. Tabel Border

Border adalah yang akan mengelilingi data dalam tabel.Dengan menggunakan perintah <Table Border>. Tabel border bisa diatur ketebalannya :

• Border 0 :digunakan apabila tidak menggunakan border
• Border 1 :digunakan bila menggunakan nilai border standar
• Border 2 :digunakan bila ukuran border tebal.

• Sintaknya :

• Hasilnya :

2. MengaturTabel

• Align= left untuk menempatkan table disebelah kiri.
• Align= right untuk menempatkan table disebelah kanan.

• Align= center untuk menempatkan table ditengah-tengah.

• Sintaknya :

• Hasilnya :

3. Warna

Untuk mengatur warna dalam suatu dokumen atau program HTML kode yang digunakan BGCOLOR(Background Color).

• Sintaknya :

• Hasilnya :

Modul 5

GAMBAR DAN ANIMASI

1. Menampilkan Gambar

Untuk menampilkan dan memasukkan gambar kedalam dokumen HTML banyak yang bias dilakukan, antara lain dengan memanfaatkan Image dengan tanda<IMG>.

• Sintaknya :

• Hasilnya :

2. Gambar Dan Teks

• Sintaknya :

• Hasilnya :

Read More

Kumpulan Script Untuk Membuat Web Sederhana

Assalamualaiqum Wr. Wb.

Setelah sekian lama saya gak ngepost, akhirnya saya balik lagi nih. Hehehe

Kali ini saya akan memposting tentang HTML FORM dan beberapa syntak yang biasa digunakan untuk membuat WEB.

Ok langsung saja kita menuju ke-TKP :D

1. Checkbox

Dengan checkbox kita dapat memilih lebih dari 1 pilihan.

    Berikut syntaknya :

   

    Dan inilah hasilnya:

   

2. Radio Button

Hampir sama seperti checkbox, yang berbeda hanyalah kita hanya dapat memilih 1 pilihan saja.

Berikut syntaknya:

Dan inilah hasilnya:

3. Insert Image

Disini kita dapat menambahkan gambar. Perlu diingat bahwa file gambar harus berada pada satu folder dengan file syntak agar gambar dapat muncul saat running.

Berikut syntaknya:

Hasilnya:

4. Link

Jika kita ingin membuat sebuah alamat atau link, gunakan syntak berikut:

Hasilnya:

5. Text Area

Text Area ini berfungsi sebagai tempat untuk menuliskan sebuah teks. Syntaknya adalah:

Hasilnya:

6. Table

Untuk menambahkan table, gunakan syntak berikut:

   

    Dan hasilnya:

   

7. Table Border

Table border ini digunakan untuk menambahkan bingkai, berikut syntaknya:

Dan hasilnya:

8. Table BGColor

Jika anda ingin memberi warna pada background table gunakan syntak berikut:

Dan hasilnya:

9. Password Field

Untuk membuat sebuah kolom untuk memasukkan password gunakan syntak:

   

    Dan hasilnya:

   

10. Drop Down List

Kita dapat memilh dari pilihan yang ada yaitu beruba daftar pilihan secara menurun. Syntaknya:

   

    Dan hasilnya:

   

11. Caption

Merupakan sebuah judul halaman, berikut syntaknya:

   

    Hasilnya:

   

12. Submit Button

Untuk membuat tombol submit gunakan syntak:

   

    Dan hasilnya:

   

13. Colspan

Colspan berfungsi untuk menggabungkan beberapa kolom, dengan syntak:

Hasilnya:

14. Rowspan

Rowspan berfungsi ntuk menggabungkan beberapa baris, dengan syntak:

   

    Dan hasilnya:   

   

15. Format Text

Berikut syntaknya:

   

Hasilnya adalah:

    Demikian postingan kali ini, semoga dapat bermanfaat bagi para pembaca terutama bagi yang sedang dalam tahap belajar membuat web seperti saya, hehehe

Wassalamualaiqum… ☺

Read More