Selamat siang ??
Nah , pertemuan kali ini saya akan menunjukan hasil oprekan yang telah saya buat dari materi W3school. Saya mengoprek ada 4 hal :
1. Materi membuat tabel (daftar nama kelas).
2. Membuat list (daftar menu).
3. Membuat classes (kelas).
4. Membuat layout (tata letak tulisan).
Materi 1
Membuat table
Gambar 1.1
Untuk materi dasar pembuatan table, Anda dapat langsung mempelajarinya sendiri di http://www.w3schools.com/ . Pada kesempatan kali ini, saya hanya akan berbagi bagaimana cara mengembangkan source code dasar tersebut agar dapat menghasilkan tampilan tabel yang lebih menarik.
Sekarang saya akan membagi contaoh tampilan tabel yang dihasilkan dari source code dasar tanpa dikembangkan.
Gambar 1.2
Menurut
saya, tampilan table seperti gambar 1.2 tidak begitu menarik. Karena,
orang akan bingung yang mana tabel, yang mena tulis biasa, data penting
atau bukanj, semuanya sama, disajikan dalam bentuk menyerupai list. Maka dari itu, source code dasar tersebut harus dikembangkan atau digubah dengan menambahkan source code
yang sebelumnya telah kita pelajari. Seperti menambahkan warna, gambar,
menggabung baris dan kolom, memberikan heading, tulisan bergerak, dll.
Contoh tampilan tabel yang sudah digubah source code-nya.Apakah ada perbedaan setelah di edit pada gambar 1.1 dan gambar 1.2 . Menarik manakah??
Jika anda tertarik mencoba kunjungi situs ini w3schools.
Materi 2
Membuat Daftar Menu
Setelah
membahas bagaimana cara membuat tabel agar tampil lebih menarik,
sekarang saatnya kita belajar cara menyajikan data dalam bentuk daftar.
Sebagai contoh, saya akan memvbuat daftar menu makanan di salah satu
warung. Warung tersebut menyajikan berbagai masakan khas daerah.
Gambar 2.1
<ul>, digunakan sebagai pendefinisi unordered list. Sedangkan <li> digunakan untuk mendefinisikan list item. Untuk mempelajari lebih lanjut, silahkan Anda mengunjungi http://www.w3schools.com/.
Materi 3
Classes
Class digunakan agar kita dapat menampilkan setiap paragraf dalam bentuk berpetak yang diblok. Setiap paragaraf nanttinya akan mengacu kepada sebuah kelas induk. Kelas induk dapat dibuat lebih dari satu kelas, jika Anda ingin menampilkan setiap paragraf memiliki tampilan blok yang berbeda.
Contoh paragraf yang sudah dimasukin kedalam class.
Gambar 3.1
Gambar 3.1menampilkan salah satu paragraf yang tidak dimasukkan kedalam class, sehingga paragraf tersebut tidak berpetak dan terkesan sebagai paragraaf bebas.
Gambar 3.2
Gambar 3.2 telah di masukkin classes.
Materi 4
Membuat Layout
Layout akan menampilkan data yang Anda sajikaqn menyerupai kedalam bentuk tabel, daftar, paragraf, dll. Pada fungsi layout, bahasa CSS juga sudah mulai disisipkan.
Gambar 4.1
Pada gambar 4.1, data mengenai jurusan smk umar fatah rembang dituliskan dalam bentuk layout, sehingga data tersusun rapi dan tampilan akan mejadi lebih cantik.
Gambar 4.2
