Praktikum Pemodelan dan Simulasi - 27 Desember 2010

Bissmillah Hirahmanirahim

Assalamualaikum

Tak terasa pada tanggal 27 Desember 2010 kemarin adalah pertemuan terakhir dalam matakuliah praktikum pemodelan dan simulasi. Pada pertemuan terakhir ini akan dibahas mengenai pembuatan tabel dan pembahasan atau membuat css yang nanti akan dikombinasikan kedalam file HTML (tabel yang nanti akan Kita buat).

• Pembuatan Tabel dengan css Versi 1

Materi kuliah kali ini dibagi menjadi dua sesi, karena kedua pembahasannya mengenai css namun berbeda dalam implementasinya dan sourcecode yang digunakan. Untuk lebih memahaminya ada baiknya liat dan perhatikan gambar dibawah ini.

Fungsi css sendiri adalah mengatur dari desain website itu sendiri, seperti warna background, ukuran/warna/jenis font, paragraf, dll. Sebenarnya dalam file HTML kita biasa menuliskan css tersebut. Namun, hal itu beda dengan yang akan kita pelajari kali ini. File CSS terpisah dengan file HTML. Hal ini yang disebut dengan CSS Eksternal.

 

Gambar 1: Penerapan selectortag.css kedalam Tabel

Praktikum Pemodelan dan Simulasi - 20 Desember 2010

Bissmillah Hirahmanirahim

Assalamualaikum

Pertemuan pada tanggal 20 Desember 2010, mempelajari 2 (dua) materi yaitu penggunaan fungsi Tag Iframe dan pembuatan Form Pembelian. Materi kali ini tidak banyak berbeda dengan materi pembuatan frame yang lalu. Hanya terdapat sedikit modifikasi dibeberapa baris HTML.

• Penggunaan Fungsi Tag Iframe

Fungsi tag Iframe berbeda dengan tag frame biasa. Pada Iframe terdapat bar scrolling disini kanan. Jadi tampilan yang didalam frame tidak ditampilkan keseluruhan. Namun, hanya ditampilkan sebagian saja. Dan untuk melihat isinya secara keseluruhan, dapat di-scroll kebawah atau keatas.

Tampilan dari hasil akhir fungsi Iframe sangat rapih dan teratur, jika dibandingkan dengan tampilan hasil akhir para fungsi frame biasa. Untuk jelasnya bisa dilihat pada gambar berikut.

 Gambar 1: Tampilan Hasil Akhir

Praktikum Pemodelan dan Simulasi - 13 Desember 2010 (Part 2)

Bissmillah Hirahmanirahim

Assalamualaikum

Pertemuan pada tanggal 13 Desember 2010 terbagi menjadi 2 part. Sebab pada pertemuan ini mempraktekan dua metode pembuatan daftar isi dalam frame berkolom-kolom atau berbaris-baris.

Untuk part 1-nya bisa dilihat disini. Untuk part ke-2 ini Kita juga akan membahas mengenai pembuatan daftar isi dengan menggunakan frame-frame. Namun berbeda dengan part 1, pada part ke-2 ini Kita tidak membutuhkan meng-link-kan sebuah file HTML.

Untuk lebih memahami apa yang akan Kita buat, baiknya lihat gambar-gambar berikut ini terlebih dahulu.

Gambar 1 : Isi dari frame-frame pada daftar isi

 Gambar 2 : Tampilan hasil akhir dari praktikum ini

Praktikum Pemodelan dan Simulasi - 13 Desember 2010 (Part 1)

Bissmillah Hirahmanirahim

Assalamualaikum

Materi pada pertemuan kali ini merupakan kelanjutan atau pengembangan dari materi pada minggu lalu. Yang juga membahas tentang pembuatan sebuah tabel. Dapat dilihat disini.

Pada pertemuan kali ini, kita akan membuat sebuah daftar isi berbentuk frame 3 kolom. Untuk materi pembuatan daftar isi dan tabel yang berkolom-kolom bisa diliat di tulisan yang lalu. Cek disini.

Tak sama seperti daftar isi pada umumnya. Daftar isi yang nanti akan Kita buat akan memadukan fungsi hyperlink dan beberapa trik lainnya. Untuk lebih jelasnya bisa dilihat pada gambar-gambar dibawah ini.

 Gambar 1 : Isi dari frame pada kolom pertama

Praktikum Pemodelan dan Simulasi - 6 Desember 2010

Bissmillah Hirahmanirahim

Assalamualaikum

Pertemuan minggu ini sebetulnya perkembangan materi pada minggu ketiga pada tanggal 15 November 2010, yang sedikit membahas tentang pembuatan tabel. Dapat diliat disini

Namun, pada pertemuan minggu ini bentuk tabel dimodifikasi dengan menggabungkan beberapa elemen baris/kolom yang di-merge(digabungkan menjadi satu). Adapun trik atau cara dalam pembuatannya. Namun, sebelum masuk dalam barisan sourcecode ada baiknya liat tampilan website yang sudah jadi, sebagai berikut.

UTS Praktikum Pemodelan dan Simulasi - 29 November 2010

Bissmillah Hirahmanirahim

Assalamualaikum

Pada pertemuan kali ini, lebih memusatkan pada pendalaman materi-materi pada pertemuan-pertemuan sebelumnya. Pertemuan ini pun dijadikan UTS, sebab dalam pertemuan ini memasukan/menerapkan semua metode HTML dimateri-materi lalu. Untuk melihat materi-materi lalu dapar diliat disini. 

Pada tulisan ini sudah tidak membahas lagi mengenai materi-materi yang lalu, hanya saja akan melanjutkan materi mengenai pembuatan daftar isi yang pada pertemuan minggu kemarin.

Kalau dijelaskan secara terperinci, sebenarnya fungsi daftar isi ini tidak jauh berbeda dengan penerapan hyperlink ke halaman blog/situs lainnya. Dengan cara meng-klik suatu tulisan, kita dilarikan/diantarkan ke suatu alamat yang berhubungan dengan judul/tulisan tersebut.

Tahapan Pengerjaan UTS

1. Siapkan source HTML pada pertemuan yang lalu, yakni content1(intro), content2, content3 dan content4.
2. Lakukan modifikasi pada masing-masing source HTML tersebut. Dengan menambahkan coding seperti ini.

<a name="pre"></a>  tambahkan pada content2, sebelum <h2><center>< PRE ></center></h2>

<a name="blockquote"></a> tambahkan pada content2, sebelum <h2><center>< BLOCKQUOTE ></center></h2>

<a name="format teks"></a> tambahkan pada content2, sebelum <h1>Format Teks</h1>

<a name="font"></a> tambahkan pada content2, sebelum <h2><font color="blue"> < FONT > </font></h2>

<a name="ukuran font"></a> tambahkan pada content2, sebelum <h3><font color="red">Ukuran Font</font></h3>

<a name="warna font"></a> tambahkan pada content2, sebelum <h3><font color="red">Warna Font</font></h3>

Praktikum Pemodelan dan Simulasi - 22 November 2010

Assalamualaikum

Bissmillah

Kembali lagi bersama saya di Praktikum Pemodelan dan Simulasi. Setelah kemarin membahas dan mempraktikan tentang "Input Gambar dan Tabel". Pada pertemuan kali ini Kita akan membahas tentang "Pembuatan Form dan Daftar isi".

Oh iy, tag HTML yang nanti akan Kita praktekkan dipisah menjadi 2 bagian. Yang pertama, tag HTML tentang pembuatan form dan yang ke dua tentang pembuatan daftar isi. Dan hasil/file-nya pun dipecah menjadi 2 bagian.

Oke.. agar lebih mudah dalam mempraktekkannya. Kalian dapat melihat hasil/tampilan-tampilan berikut terlebih dahulu.

 Tampilan pada tag HTML "Pembuatan Form"

Praktikum Pemodelan dan Simulasi - 15 November 2010

Assalamualaikum

Bissmilah Hirahmanirahim

Tulisan kali ini adalah lanjutan dari tulisan tentang kegiatan perkuliahan Praktikum Pemodelan dan Simulasi minggu lalu, bisa dicek disini. Kalau pertemuan minggu lalu membahas mengenai membuat teks, merubah teks (warna,ukuran dan juga jenis hurufnya), dan juga membuat daftar/list pada website kita.

Nah, untuk pertemuan diminggu ini akan dibahas mengenai "cara mudah memasukan gambar dalam website" serta "cara mudah dalam membuat sebuah tabel".

Sebuah website mungkin akan tampak sepi jika tidak ada gambar-gambar yang mendukung tulisan/artikel-artikel yang telah kita buat. Maka dari itu keberadaan beberapa gambar dalam website kita amatlah sangat membantu dalam menjelaskan artikel-artikel yang telah kita muat. Begitu juga dengan keberadaan sebuah tabel dalam website kita, fungsinya tak jauh berbeda dari keberadaan sebuah gambar. Selain itu, tabel juga dapat membuat sesuatu tampak rapih.

Oke, tidak panjang lebar dan tidak panjang tulisan. Mari kita lihat dulu tampilan-tampilan website yang nantinya akan terbentuk dari source HTML yang akan kita buat nanti. Berikut tampilannya.

 

Praktikum Pemodelan dan Simulasi - 1 November 2010

Assalamualaikum

Bissmillah Hirahmanirahim

Pembahasan kali ini adalah lanjutan dari materi Praktikum Pemodelan dan Simulasi pada pertemuan sebelumnya. Praktikum kali ini membahas mengenai pembuatan list pada suatu website/memberikan penomoran pada website. Untuk lebih jelasnya bisa lihat gambar berikut.

 

Praktikum Pemodelan dan Simulasi - 18 Oktober 2010

Assalamualaikum

Bissmillah Hirahmanirahim

Dalam pertemuan pertama ini, kelas Kami membahas mengenai pembuatan web yang cukup sederhana. Berikut tampilan hasil dari website yang berhasil di buat.

 

Tampilan Hasil Compile HTML

Untuk membuat website seperti diatas cukup mengikuti script dibawah ini. (Script dapat diketik menggunakan notepad atau software untuk membuat website lainnya, seperti dreamweaver):