PRAKTIKUM 2: CSS

Untuk materi dan file HTML praktikum 2 bisa di download disini. (termasuk 960 grid system [960.css])

Tujuan dari menggunakan framework 960 Grid System adalah untuk mempermudah kita membuat layout website. Dengan cara pandang grid yang berupa kolom2.

berikut ini contoh2 layout website pada umumnya :

 

960 menunjukan bahwa maksimal width dari website kita adalah 960 pixel.

Karena terdiri dari kolom2 ada yang 12 , 16 sampai 24 kolom. Untuk tugas ini cukup gunakan 12 saja.









Kebanyakan website terdiri dari header, konten, menu, sidebar, dan footer.

Header posisi selalu diatas, konten merupakan isi artikel website tersebut, menu bisa diposisikan dimana saja sesuai desaign (kebanyakan pada header, atau sampi di sidebar). Sidebar berada disamping dan footer selalu paling bawah yang menyediakan informasi hakcipta, dll.

Untuk menggunakannya gunakan penempatan css external seperti biasanya pada 960.css

Setelah itu silahkan pahami sintaks berikut :



\

"container_12" menunjukan layout yang kita buat tersusun dari 12 kolom.

class "grid_12" menunjukan kita menggunakan keseluruhan kolom. seperti gambar diatas dengan 940 pixel

class "grid_9" menunjukan kita menggunakan 9 kolom.
class "grid_3" menunjukan menggunakan 3 kolom. karena total sudah 12 kolom maka jika mendefinisikan grid lagi otomatis ke bawah.

ok seperti itu,.. haha,. gampang kan?

untuk mengatur height bisa diatur di div masing2, (mendefinisikan css yang lain = header, menu, footer, dll).

Untuk operasi lanjut ada push dan pull, untuk lebih jelasnya silahkan lihat gambar berikut :

 

Ada juga prefix dan suffix, kalau suffix efeknya didepan kalau prefix efeknya di belakang, untuk lebih jelasnya lihat gambar dibawah ini :

ok gampang kan? gampang donk. ok monggo digarap..

Read More

Praktikum 1: HTML

HTML (HyperText Markup Language) merupakan bahasa markah (Markup Language) yang digunakan untuk membuat sebuah halaman website. Sebuah website sebenarnya merupakan kumpulan tag-tag HTML yang isinya berupa plain text .

Agar lebih memahami, silahkan langsung terjun payung lho...lho... terjun ke dunia coding maksudnya..
Silahkan buka notepad dan ketikkan plain text dibawah ini :

Setelah itu save as sebagai "lat_1.html" (tanpa tanda petik), jangan lupa pada saat save as , "save as type" nya diganti menjadi "All files". Setelah itu klik save (jangan cancel wkwk). Akan muncul sebuah file html, tampilan tergantung dari default browser. Jika firefox, tampilan-nya ya firefox, jika chrome ya chrome. Lalu buka file .html tersebut dan amati.

Apa yang dapat anda simpulkan ?

Sebuah tag-tag HTML terdiri dari tag pembuka (marquee) dan tag penutup (</marquee>), didalamnya berisi sebuah konten dan akan berpengaruh pada representasi-nya tergantung dari jenis tag-nya. Untuk marquee, konten akan menjadi bergerak. Sesuatu yang dimulai dari tag pembuka sampai tag penutup disebut elemen HTML. empty element juga dapat terjadi jika tag penutup berada pada tag pembuka atau tidak ada konten sama sekali. contoh : "<br />"

Berikut beberapa contoh tag-tag HTML. (setiap tag menunjukan fungsi yang berbeda-beda).

1. Heading

Heading digunakan untuk membuat judul, tag-nya :
<h1> ---konten--- </h1> . Untuk lebih jelasnya bisa lihat gambar dibawah :

2. Paragraph

untuk membuat sebuah paragraf gunakan tag <p>(jangan lupa tag penutupnya). Untuk lebih jelasnya bisa lihat gambar dibawah :

3. BreakLine

breakline digunakan untuk membuat sebuah baris baru, dengan tag : <br />, anda juga dapat menghilangkan "/". Contoh :

Saya <br /> <br />
Kamu <br />
Dia <br />
menjadi :

Saya

Kamu
Dia

dapat anda simpulkan sendiri. Jika anda langsung meberikan "enter" tanpa memberikan tag "br", maka tidak akan ada garis baru, yang terjadi adalah :

Saya Kamu Dia

4. Font

Untuk menentukan huruf dapat menggunakan tag font. Untuk lebih jelasnya bisa lihat gambar dibawah :

apa yang dapat anda simpulkan?

tag font diatas terdapat atribut "size" yang menunjukan ukuran. setiap tag-tag HTML memungkinkan terdapat atribut. atribut-atribut tersebut dapat kita gunakan untuk merubah keadaan default dari suatu elemen HTML. Berikut beberapa atribut pada tag font

size="2"(number)
face="verdana" (font-family)
color="red" / color="#ff0000" / color="rgb(255,0,0)"

tag font ini tidak support dengan HTML5, jadi disarankan jika ingin merubah warna, huruf, atau ukuran menggunakan CSS (nanti akan kita pelajari).

5. Horizontal Rule (hr)

Gunakan <hr /> untuk memindah sebuah topik. contoh :

---

6. Image

gunakan tag <img> untuk menampilkan sebuah gambar.

<img src="koala.jpg" alt="foto koala" width="100" height="100" />
atribut-atribut diatas seperti src = menunjukan alamat image tersebut, lokasi diatas menunjukan image satu folder dengan file dimana tag image tersebut ditulis. jika image berada pada folder tertentu misalkan pada folder "hewan", gunakan "/hewan/koala.jpg" (tanpa tanda petik). jika image berada di luar dari file html tersebut gunakan "../koala.jpg".

alt menunjukan alternatif jika koneksi yang didapat sangat lambat, sehingga yang akan ditampilkan adalah teks yang ada pada atribut "alt", secara perlahan gambar akan mencul sesuai koneksinya.

Kita juga dapat menentukan panjang dan lebar dari image tersebut dengan menggunakan width dan height, nilai dalam pixel.

7. List

list dibagi menjadi 2, daftar terurur (ordered list) dan daftar tidak terurut (unordered list) untuk yang terurut: gunakan <ol> dan <li> untuk menunjukan item-itemnya. Untuk yang tidak terurut gunakan <ul>. Lihat contoh dibawah :


8. Link Ada yang tidak tau link? pasti udah tau semua, link merupakan sebuah jembatan dimana user dapat mengklik suatu elemen dan setelah itu user akan dibawa ke acuan link tersebut. gunakan tag a untuk membuat link. Untuk lebih jelasnya silahkan ketik html dibawah ini simpan sebagai "hal1.html".



ketik lagi html dibawah ini dan save as sebagai "hal2.html".



Silahkan buka hal1.html dan apa yang dapat anda simpulkan ?

9. Table ciri-ciri tabel selalu diikuti minimal oleh 3 tag, yaitu table, tr, dan td. table digunakan untuk memulai table, tr digunakan untuk membuat baris, td digunakan untuk membuat kolom beserta kontennya. Silahkan coba html dibawah ini :



Silahkan amati dan simpulkan!.
10. Form.

Read More