April 22, 2013

MENGHIAS HTML DENGAN CSS

Pada tutorial kali ini kita akan mencoba membahas tentang bagaimana menghias HTML dengan CSS. Pada artikel sebelumnya yaitu membuat CV sederhana dengan menggunakan html, sebenarnya kita telah menggunakan CSS, akan tetapi ada baiknya jika kita mempelajari lagi kodingan apa saja yang merupakan bagian dari CSS tersebut agar kita dapat lebih paham.

Berikut koding HTML dengan CSS :


<html>
<head>
<title>Tugas Pemrograman Berbasis Web</title>
</head>
<body style= "background-color :green">
<div style="margin:auto; background-color:cyan; margin-top:50px;border-radius:10px; width:75%;">
<!--header-->
<div style= "background-color :blue" align="center"><br/><h1>CURICULUM VITAE</h1>
</div>
<!--header-->
<div style="margin-left:50px; margin-right:50px;">
<!--Data Pribadi-->
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama</td>
<td> : Rakhmat Malik Ibrahim</td>
<td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
</td>
</tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Jakarta, 23 Agustus 1991 </td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat</td>
<td> : Pondok Tirta Mandala, Depok II Tengah</td>
</tr>
<tr>
<td>Email </td>
<td> : rakhmat4b@yahoo.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<li>Pendidikan Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN RRI Cisalak</td>
<td>2003</td>
</tr>
<tr>
<td>SLTP Negeri 8 Depok</td>
<td>2006</td>
</tr>
<tr>
<td>SMA Negeri 79 Jakarta</td>
<td>2009</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Masih dalam perkuliahan semester 8</td>
</tr>
</table>
<br/>
<li>Pendidikan Non Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="500">
<tr>
<td align="center"><b>Jenis Pendidikan<b/></td>
<td align="center"><b>TAHUN</b></td>
</tr>
<tr>
<td align="justify"><ol>
<li>Kursus Teknisi Basic I Komputer Einvest Institute</li>
</ol></td>
<td align="center">2009</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Teknologi 2010 di LDK Al-Hikmah STMIK Jakarta STI&K </li>
<li>Seminar Current Trends of Opening System di Universitas Gunadarma</li>
<li>Seminar Sosialisasi Hasil-hasil PHKI Batch III di Universitas Gunadarma</li>
</ol></td>
<td align="center">2010</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Android Menggali Kreativitas & Peluang Bisnis Melalui Flexi Market & Telkomsel Market di Universitas Gunadarma</li>
<li>Seminar Multimedia System di Universitas Gunadarma</li>
</ol></td>
<td align="center">2011</td>
</tr>
</table>
</ul>
</div>
<div align="center"><a href="sertifikat.html">Sertifikat</a><br/>
</div>
</div>
</body>
</html>

Maka akan tampil seperti gambar berikut :


Bandingkan dengan gambar sebelumnya :


Memang tidak jauh berbeda dari gambar sebelumnya, dikarenakan pada pembuatan CV sudah menggunakan koding CSS hanya saja tidak diperjelas yang mana saja kodingan CSS tersebut. Pada pembelajaran kali ini, saya akan menjelaskan yang mana saja yang termasuk kodingan CSS.

Berikut Keterangannya :
  1. style = background-colour: green, ini merupakan pengaturan warna pada CSS, yaitu warna background.
  2. <h1>....<//h1>, ini merupakan salah satu pengaturan font dan text pada CSS.
Margin, Border, Padding , ini merupakan bagian dari CSS Box Model, untuk lebih jelas perhatikan gambar berikut,

Untuk lebih jelas, ada baiknya jika sebelumnya telah membaca dan mempelajari artikel Contoh  Membuat CV (Curriculum Vitae) Sederhana dengan HTML.
 http://rakhmatmalik.blogspot.com/2013/04/tugas-pemrograman-web-contoh-membuat-cv.html

April 14, 2013

CONTOH MEMBUAT CV (CURRICULUM VITAE) SEDERHANA DENGAN HTML

Kali ini kita akan belajar seputar dasar-dasar HTML (Hypertext Transfer Protocol) yang merupakan bahasa yang digunakan untuk membuat website. Langkah pertama pada pembelajaran dasar HTML kali ini kita perlu menyiapkan dan menginstall editor teks yang digunakan untuk mengetikkan kode HTML, yaitu Notepad++. Selanjutnya kita akan membuat contoh halaman HTML, pada contoh kali ini kita akan membuat CV sederhana dengan 2 halaman web dimana halaman pertama adalah identitas pribadi dan kedua gambar sertifikat, perhatikan contoh kode halaman pertama berikut :

<html>
<head>
<title>Tugas Pemrograman Berbasis Web</title>
</head>
<body style= "background-color :yellow">
<div style= "background-color :red" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Rakhmat Malik Ibrahim </td>
<td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
</td></tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Jakarta, 23 Agustus 1991 </td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Pondok Tirta Mandala, Depok II Tengah</td>
</tr>
<tr>
<td>Email </td>
<td> : rakhmat4b@yahoo.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<li>Pendidikan Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN RRI Cisalak</td>
<td>2003</td>
</tr>
<tr>
<td>SLTP Negeri 8 Depok</td>
<td>2006</td>
</tr>
<tr>
<td>SMA Negeri 79 Jakarta</td>
<td>2009</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Masih dalam perkuliahan semester 8</td>
</tr>
</table>
<br/>
<li>Pendidikan Non Formal</li>
<table border="1" cellpadding="1" cellspacing="1.5" width="850">
<tr>
<td align="center"><b>Jenis Pendidikan<b/></td>
<td align="center"><b>TAHUN</b></td>
</tr>
<tr>
<td align="justify"><ol>
<li>Kursus Teknisi Basic I Komputer Einvest Institute</li></ol></td>
<td align="center">2009</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Teknologi 2010 di LDK Al-Hikmah STMIK Jakarta STI&K</li>
<li>Seminar Current Trends of Opening System di Universitas Gunadarma</li>
<li>Seminar Sosialisasi Hasil-hasil PHKI Batch III di Universitas Gunadarma</li>
<ol>
</td>
<td align="center">2010</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Android Menggali Kreativitas & Peluang Bisnis Melalui Flexi Market & Telkomsel Market di Universitas Gunadarma</li>
<li>Seminar Multimedia System di Universitas Gunadarma</li>
</ol>
</td>
<td align="center">2011</td>
</tr>
</table>
</ul>
</div>
<div align="center"><a href="sertifikat.html">Sertifikat</a><br/>
</div>
</body>
</html>

Keterangan :
  1. Pada <html>kode HTML</html> semua yang berada di dalam <html> akan dianggap dokumen HTML.
  2. Pada <head>kode HTML</head> kode HTML akan dianggap sebagai informasi mengenai halaman web.
  3. Pada <title>kode HTML<./title> merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
  4. Pada <body>kode HTML</body> digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
  5. Pada <body> terdapat style = "background-color: yellow" kode tersebut digunakan untuk menampilkan background warna pada bagian body halaman web yang kita buat.
  6. Pada <h1>kode HTML</h1> digunakan untuk menampilkan heading pada konten halaman web.
  7. Pada <div>kode HTML</div> digunakan untuk memisahkan bagian satu dengan bagian lainnya, seperti pada <div style= "background-color :red" align="center"><h1>CURICULUM VITAE</h1></div> hanya kata "CURICULUM VITAE" yang rata tengah dan memiliki bakground merah.
  8. Sebelum membuat kode untuk memasukan gambar pada halaman web pastikan gambar yang akan di masukkan berada dalam satu folder yang sama dengan halaman web yang kita buat. Perhatikan gambar berikut :
  9. Pada kode HTMl <ul><li>Kode HTML</li></ul> digunakan untuk membuat list berjenis unorder list yaitu list bulletsedangkan <ol><li>Kode HTML</li></ol> digunakan untuk membuat list berjenis order list yaitu angka.
  10. Pada kode HTML <a href="sertifikat.html">Sertifikat</a> digunakan untuk membuat link lanjutan pada halaman web berikutnya sesuai dengan link yang disebutkan, dalam contoh kali ini link berikutnya yaitu sertifikat.html.
  11. Pada bagian kode HTML yang digunakan untuk membuat tabel adalah pada bagian :
  12. <table width="500">
    <tr>
    <td>Nama </td>
    <td> : Rakhmat Malik Ibrahim </td>
    <td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
    </td></tr>
    .....
    .....
    .....
    <tr>
    <td>Universitas Gunadarma</td>
    <td>Masih dalam perkuliahan semester 8</td>
    </tr>
    </table>
    Pada bagian tag <table> adalah tag pembungkus pada pembuatan tabel. Di tabel ada 2 istilah yaitu row (baris) yang dibuat dengan tag <tr> dan sel-sel data (kolom) yang di buat dengan tag <td>
Berikut hasil dari kode di atas :



Selanjutnya kita akan membuat halaman kedua yaitu halaman web yang berisi konten gambar sertifikat, perhatikan contoh kode halaman kedua berikut :

<html>
<head>
<title>Tampilan Gambar Sertifikat</title>
</head>
<body>
<div style= "background-color :orange" align="center"><h1>Someday the dream will end</h1>
</div>
<div style="margin-left:150;">
<h2>Sertifikat</h2>
<table>
<tr>
<td>Tahun 2009 :</td>
</tr>
<tr>
<td><p><img src="scan0011.jpg"/></p></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Tahun 2010 :</td>
</tr>
<tr>
<td><p><img src="scan0010.jpg"/></p></td>
<td><p><img src="scan0003.jpg"/></p></td>
<td><p><img src="scan0005.jpg"/></p></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Tahun 2011</td>
</tr>
<tr>
<td><p><img src="scan0009.jpg"/></p></td>
<td><p><img src="scan0006.jpg"/></p></td>
</tr>
</table>
</div>
<br/>
<div align="center"><a href="Tugas.html">Identitas Pribadi</a><br/>
</div>
</body>
</html>

Berikut merupakan tampilan dari halaman web kedua :


Keterangan :
Untuk keterangan kode halaman web kedua bisa dilihat dan dipahami pada bagian keterangan halaman web pertama.

April 01, 2013

ETIKA PADA TEKNOLOGI SISTEM INFORMASI YANG HARUS DILAKUKAN OLEH PENGGUNA, PENGELOLA DAN PEMBUAT


Sebelum membahas etika pada teknologi sistem informasi pada pengguna, pengelola dan pembuat ada baiknya kita mengetahui tentang pengertian etika tersebut.
Etika adalah ilmu yang membahas perbuatan baik dan buruk manusia sejauh yang dapat dipahami oleh pikiran manusia.
Sesuatu hal dikatakan baik bila ia mendatangkan rahmat, dan memberikan perasaan senang, atau bahagiaa (Sesuatu dikatakan baik bila ia dihargai secara positif).
Pengertian buruk yaitu, segala yang tercela. Perbuatan buruk berarti perbuatan yang bertentangan dengan normaa-norma masyarakat.

Pembuat dalam Teknologi Teknologi Informasi (TSI) adalah seseorang yang membuat atau menciptakan pesan elektronik untuk dapat digunakan atau difungsikan oleh orang lain.
Pengelola dalam Teknologi Teknologi Informasi (TSI)adalah seseorang yang mengelola, meneruskan, menyimpan, atau menyalurkan setiap pesan elektronik atau menjadikan setiap pesan elektronik dapat dikirim, disimpan, atau disalurkan kepada orang lain.
Pengguna dalam Teknologi Teknologi Informasi (TSI) adalah seseorang yang mengguna atau dimaksudkan untuk mengunakan data elektronik dari pembuat.Etika TIS adalah sekumpulan azas atau nilai yang berkenaan dengan akhlak, tata cara (adat, sopan santun) nilai mengenai benar dan salah, hak dan kewajiban tentang TIK yang dianut oleh suatu golongan atau masyarakat dalam pendidikan.

Sepuluh Perintah Etika Komputer 
Koalisi etika komputer yang tergabung dalam lembaga etika komputer (CEI) memfokuskan pada kemajuan teknologi informasi, etika dan perusahaan serta kebijakan publik serta telah menciptakan sepuluh etika komputer :
1. Tidak menggunakan komputer untuk merugikan orang lain
2. Tidak mengganggu pekerjaan komputer orang lain
3. Tidak memata-matai file komputer orang lain
4. Tidak menggunakan komputer untuk mencuri
5. Tidak menggunakan komputer untuk bersaksi palsu
6. Tidak menyalin atau menggunakan kepemilikan perangkat lunak dimana anda belum membayarnya
7. Tidak menggunakan sumber daya komputer orang lain tanpa otorisasi atau kompensasi yang sesuai
8. Tidak mengambil untuk diri sendiri karya intelektual orang lain
9. Harus memikirkan tentang konsekuensi sosial program yang anda tulis bagi sistem yang anda desain
10. Harus menggunakan komputer yang menjamin pertimbangan dan bagi sesama manusia. 

Tujuan Penggunaan Teknologi Sistem Informasi
Dalam undang-undang ite telah ditetapkan tentang pemanfaatan teknologi informasi. Pengaturan pemanfaatan teknologi informasi harus dilaksanakan dengan tujuan untuk :
a.  mendukung persatuan dan kesatuan bangsa serta mencerdaskan kehidupan bangsa sebagai bagian dari masyarakat informasi dunia.
b. mendukung perkembangan perdagangan dan perekonomian nasional dalam rangka meningkatkan kesejahteraan masyarakat dan pertumbuhan ekonomi nasional. 
c. mendukung efektivitas komunikasi dengan memanfaatkan secara optimal teknologi informasi untuk tercapainya keadilan dan kepastian hukum. 
d. memberikan kesempatan seluas-luasnya kepada setiap orang untuk mengembangkan pemikiran dan kemampuannya di bidang teknologi informasi secara bertanggung jawab dalam rangka menghadapi perkembangan teknologi informasi dunia.

Referensi
1.http://mkusuma.staff.gunadarma.ac.id/Downloads/files/8224/RUU+-+Pemanfaatan+Teknologi+Informasi.pdf
2. http://mkusuma.staff.gunadarma.ac.id/Downloads/files/11837/W01-Pengertian%2BEtika.pdf
3.file.upi.edu/Direktori/FPMIPA/PRODI._ILMU_KOMPUTER/196603252001121-MUNIR/Artikel_TIK/Etika_Penggunaan_Teknologi_Informasi_dan_Komunikasi_dalam_Pendidikan.pdf
4. http://kk.mercubuana.ac.id/files/92020-13-176460088429.doc