Desain WEB dengan CSS

salam damai brada & sista,,
pada pertemuan kali ini ane ingin berbagi tips membuat desain web menggunakan CSS,
sebelumnya pada taukan CSS itu apa ??, kalo belum ane akan singgung sedikit mengenai CSS,
CSS adalah singkatan dari Cascading Style Sheets. aliran dari suatu kode ke kode lain yang saling berhubungan. kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.Singkatnya dengan CSS anda dapat merubah font, Warna background serta besar kecilnya huruf atau font dll dari halaman Web atau HTML.

okee,, langsung aja ke TKP,
perangkat yang dibutuhkan :
1. PC/ laptop , usahakan idup :D
2. XAMPP
3. note pad / note pad ++
4. jangan lupa kopinya mand,,  hahha,,,

jika semua bahan terkumpul maka kita langsung pada proses pembuatannya,
1. buka disk C: / localdisk C:
2. buka folder XAMPP, kemudian buka folder htdoc,
3. setelah itu buat folder baru , kita contohkan nama foldernya "css".
4. buat file baru dengan nama " index.php "
5. kemudian siapkan image untuk tampilan header web anda , misal kayak gini,

 

header.jpg

6. image untuk isi webnya ,

susu.jpg

7. jangan lupa image kumpul jadi satu sama index.php tadi,

8. setelah itu buka note pad ++ , tuliskan source berikut di file index.php

tampilan awal seperti berikut ,

jangan lupa XAMPP nya di jalankan dulu untuk paket apache nya, 

selanjutnya tugas kita :

1.Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)

2.Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.

3.Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb).

4.Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman

oke kita mulai dari no 1 .
untuk menyamakan text pengertian susu dan kandungannya maka perlu edit sourcenya pada bagian ini,

mengacu pada source yang diatas

maka kita tambahkan saja komponen <ul> di awal dan </ul> di akhir text kandungan,

lanjut ke no 2, pada panel , depan, profil, produk, kontak dan forum , supaya ketika kursor di arahkan akan berubah warna maka perlu edit pada source ini

tambahkan <a href=" ">

gmana mand ? uda berubah ??
pastinya dong,,

lanjut ke no 3, Isi bagian sebelah kanan halaman yang berwarna biru dengan suatu daftar artikel,

maka yang perlu di tambahkan yaitu pada source ini, 

 kita tambahkan seperti ini, 

terakhir mand no 4, ngasih judul di header, nah yang perlu kita ubah sebelah sini mand,, 

kita tambahin "scooterist indonesia"

setelah selesai , yukk mari kita lihat hasil akhirnya:

tugas 2

Angka 1


Operator
+ - * /

Angka 2

=






Penjelasan :
1. source code

2. tampilan utama program 

3. tampilan ketika inputan kosong

4. source untuk menangkap error ketika inputan kosong

5. source proses perhitungan 

. 

6. source combo box  

7. source hasil output

tugas 1

FORM REGISTRASI

tidak boleh kosong *
Nama* :
Tempat Lahir* : LUMAJANG JEMBER PROBOLINGGO BONDOWOSO
Tanggal Lahir :
Jenis Kelamin : pria</>wanita
Domisili : LUMAJANG JEMBER PROBOLINGGO BONDOWOSO
No Telpon :
Alamat Web :
Email :

keterangan :

<marquee>FORM REGISTRASI </marquee> <!-- tag marque berfungsi agar text berjalan -->

<p /> <!-- tag p diguakan untuk paragraf -->

tidak boleh kosong *<br/> <!-- tag br digunakan untuk baris --> 

Nama*               : <input type="text" name="nama" /><p/> <!-- type="text" digunakan untuk teks-->

Tempat Lahir*   : 

<select> <!-- tag select digunakan sebagai pilihan -->

<option value="    "> 

<option value="Lumajang">LUMAJANG

<option value="Jember">JEMBER

<option value="Probolinggo">PROBOLINGGO

<option value="Bondowoso">BONDOWOSO

<select/></p>

Tanggal Lahir   : <input type="date" name="tgl" /><p /> <!-- type="date" digunakan untuk tanggal -->

Jenis Kelamin   : <input type="radio" name="jk"  />pria</><input type="radio" name="jk"  />wanita<p /> <!-- type="radio" digunakan untuk radio button-->

No Telpon : <input type="text" name="phone" /><p />

Alamat Web   : <input type="url" name="web" /><p/> <!-- type="url" digunakan untuk alamat web -->

Email : <input type="email" name="email" /><p /> <!-- type="email" digunakan penulisan email-->

<input type="submit" /> <!-- type="submit" digunakan untuk button submit -->