Rabu, 25 April 2012

Modul 4 - DHTML dan Javascript

Studi kasus : Kalkulator Sederhana











Tugas praktikum





onibudi.blogspot.com
Diposting oleh di Tidak ada komentar:
Belajar Web Programming : Studi Kasus Modul 3 - CSS


Selamat pagi teman-teman =) Nah, pertemuan kali ini saya dituntut untuk menguasai CSS. Nah-nah, mau tahu caranya membuat border yang lucu-lucu dengan CSS? Silakan dipelajari sintaksnya =)

<!DOCTYPE html>
<html lang="en">
<!-- Niko Bagus Karuniawan             -100533402581 - S1 PTI 2010 / Off-D -->
<head>
<title>Studi Kasus Modul 3 - CSS</title>
<style type="text/css">

<!--
.bulat{
background-color:#ff99ff;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #660099;
padding : 30px;
width : 120px;
height : 120px;
font-family : arial;
font-size : medium;
color : red;
}
-->

<!--
.kotak_rounded{
background-color:#0000cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #33ffcc;
padding : 10px;
width : 250px;
height : 100px;
font-family : arial;
font-size : medium;
color : white;
}
-->

<!--
.berbayang{
background-color:#00ff66;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 7px 5px #99ff66;
-webkit-border-radius: 10px;
border : 1px solid #009900;
padding : 10px;
width : 250px;
height : 50px;
font-family : arial;
font-size : big;
color : #003333;
}
-->
</style>
</head>

<body>
<div class="bulat" align="center">
Kalau ingat<br/>
yang BUNDER?<br/><br/>
...yaa INTAN...<br/>
...yaa DIAN...<br/>
...yaa VE...<br>
</div>
<br />

<div class="kotak_rounded">
Kalo yang ganteng-ganteng?<br/><br/>
...yaa AGUNG...<br/>
...yaa ALIF...<br/>
...yaa RASTRA...<br/>
</div>

<br />

<div class="berbayang">
jadi terbayang-bayang...<br/>
kece-BONG
</div>

</body>

</html>


Ini hasil screenshotnya


http://ajungpangi.blogspot.com/2011/02/belajar-web-programming-studi-kasus_20.html
Diposting oleh di Tidak ada komentar:
Belajar Web Programming : Studi Kasus Modul 2 - Komponen HTML Lanjut

Hai semua =) Sekarang dengan bahasan yang baru, yaitu komponen HTML tingkat lanjut diantaranya adalah tabel dan kawan-kawannya. Adapun saya mendapatkan tugas studi kasus berupa penggunaan tabel dan hiperlink dalam pembuatan tabel berkorespondensi. Mau tahu?
Screenshoot 1:
Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "http://www37.indowebster.com/a9237ff0315fb6e61d5cd995525cc7f3.avi"title="Doraemon"><font face = "arial" size = 4>Doraemon</font></a></li>
<li><a href = "http://www5.indowebster.com/a1d5335318135a0fa1c31aa738405dbd.avi"title="Detective Conan"><font face = "arial" size = 4>Detective Conan</font></a></li>
<li><a href = "http://www28.indowebster.com/c2cf8875651499341a9cd4b57d331968.avi"title='SpongeBob'><font face = "arial" size = 4>Spongebob</font></a></li>
</ol>
</td>
</table>

</body>
</html>


Screenshoot 2:
Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "pi-2011.zip"title="Praktik Industri"><font face = "arial" size = 4>Praktik Industri</font></a></li>
<li><a href = "big.doc"title='Try Out BIG'><font face = "arial" size = 4>Try Out Bahasa Inggris</font></a></li>
<li><a href = "mat.doc"title='Try Out MAT'><font face = "arial" size = 4>Try Out Matematika</font></a></li>
</ol>
</td>
</table>

</body>
</html>

Screenshot 3:
Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "http://dc102.4shared.com/download/33043371/33a88e2d/file.mp3?tsid=20110126-054743-7817d87c"title="Hari Ini Esok dan Seterusnya - Nirina"><font face = "arial" size = 4>Hari Ini Esok dan Seterusnya - Nirina</font></a></li>
<li><a href = "http://dc93.4shared.com/download/4GeU3cIS/Maia_Ft1Pasto-Yang_Penting_Hap.mp3?tsid=20110126-082149-146172d8"title='Yang Penting Hepi'><font face = "arial" size = 4>Yang Penting Hepi</font></a></li>
<li><a href = "http://dc143.4shared.com/download/5z4D-MnU/Rod_Stewart_-_You_Are_Everythi.mp3?tsid=20110203-093850-6a4da2ad"title='Youre My Everything'><font face = "arial" size = 4>You're My Everything</font></a></li>
</ol>
</td>
</table>

</body>
</html>

onibudi.blogspot.com
Diposting oleh di Tidak ada komentar:
Modul 1 Dasar - dasar HTML
MODUL 1
DASAR-DASAR HTML
Dalam modul ini anda akan berlatih untuk menggunakan berbagai tag dasar untuk pemrograman web menggunakan HTML, Ketikkan setiap kelompok tag dalam sebuah file, simpan dalam folder anda sendiri yang telah di teantukan, kemudian jalankan di web browser yang relah terinstal, Ketikkan setiap sumber apa asanya terlebih dahulu ( termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag HTML yang anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi anda sebelum menjalankan ulang di dalam browser.
HTML DASAR
<html>
<body>
Isi dari elemen body akan ditampilkan dalam browser anda
</body>
</html>

PARAGRAF SEDERHANA
<html>
<body>
<p>Ini adalah paragraph.</p>
<p>Ini adalah paragraph.</p>
<p>Ini adalah paragraph.</p>
<p>Elemen paragraph didefinisikan oleh tag p.</p>
</body>
</html>

PARAGRAF YANG LEBIH KOMPLEKS
<html>
<body>
<p>
Paragraph ini
Mengandung banyak baris
Dalam kode sumbernya,
Tetapi browser
Akan mengabaikannya.
</p>
<p>
Paragraph ini
Mengandung banyak spasi
Dalam kode sumbernya ,
Tetapi browser
akan mengabaikannya.
</p>
<p>
Jumlah baris dalam setiap paragraph tergantung pada ukuran window browser anda. Bila anda mengubah ukuran window browser, jumlah baris dalam paragraph akan berubah.
</p>
</body>
</html>
LINE BREAK
<html>
<body>
<p>
Untuk memotong <br>baris<br>dalam sebuah <br>paragraph,<br>gunakan tag br.
</p>
</body>
</html>

MASALAH PEMFORMATAN   
<html>
<body>
<p>
    Satu-satu, aku sayang ibu
    Dua-dua, aku sayng ayah.
   Tiga-tiga, aku sayang kakak
   Satu, dua, tiga, sayang semuanya.
</p>
<p>perhatikan bahwa browser begiti saja mengabaikan pemformatan anda!>/p>
</body>
</html>

HEADING
<html>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
<p>gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu.
</p>
</body>
</html>

HEADER YANG DI LETAKKAN DI TENGAH
<html>
<body>
<h1 align=”center”>ini adalah heading 1</h1>
<p>heading di atas telah diposisikan untuk berada di tengah halaman ini. Heading di atas telah di posisikan untuk berada di tengah halaman ini. Heading di atasa telah di posisikan untuk berada di tengah halaman ini.</p>
</body>
</html>

GARIS HORISONTAL
<html>
<body>
<p>tag hr mendefinisikan sebuah garis horizontal:</p>
<hr>
<p>ini adalah sebuah paragraph</p>
<hr>
<p>ini adalah sebuah paragraph</p>
<hr>
<p>ini adalah sebuah paragraph</p>
</body>
</html>

KOMENTAR TERSEMBUNYI
<html>
<body>
<!—ini adalah komentar yang tidak akan ditampilkan -- >
<p> Yang ini adalah paragraph biasa</p>
</body>
</html>

WARNA LATAR BELAKANG
<html>
<body bgcolor=”yellow”>
<h2>lihatlah: latar belakang berwarna!</h2>
</body>
</html>

http://ahmadrizal.wordpress.com/2009/11/12/modul-1-pemograman-web-dengan-menggunakan-html/
Diposting oleh di Tidak ada komentar:

Sabtu, 10 September 2011

RESUME

Pengantar Teknologi Informasi
A. Teknologi Informasi
Data merupakan representasi fakta dunia nyata yang mewakili suatu objek yang direkam dalam bentuk angka, huruf, simbol, teks, gambar, bunyi, atau kombinasinya. Untuk menjadi suatu informasi, data yang diperoleh perlu mengalami tahap pemrosesan.

Contoh jenis Data ada Teks, Gambar,Audio atau Suara,Video,Angka, huruf, simbol

Sifat informasi yang dihasilkan ada 2 macam, yakni informasi perfect (sempurna) dan imperfect (tidak sempurna). Informasi yang perfect merupakan informasi yang pasti kebenarannya, sedangkan informasi yang imperfect merupakan informasi yang masih memiliki unsur keragu-raguan (ketidakpastian).

Informasi adalah Data yang sudah diolah (diproses)

Gambaran Data dan Informasi
Data mentah ---> proses ---> informasi

Sumber informasi : Pengataman lapangan (observasi), Kuesioner, Kejadian/event (pencatatan/perekaman), Pemodelan (simulasi, forecasting), Media massa, Alat telekomunikasi & Alat elektronik

Karakteristik informasi yang baik: Tepat waktu, Akurat, Mudah diakses, Menghilangkan keraguan, Berhubungan, Berdasarkan fakta

Abad Informasi
a. Abad Pertanian (Tahun < 1800)
b. Abad Industri (1800 – 1957)
c. Abad Informasi (1957 – sekarang)

Teknologi : Ilmu yang berhubungan dengan sains atau seni meggunakan ilmu sains ke dalam bentuk yang praktis

Teknologi Informasi Adalah ilmu atau penggunaan peralatan elektronika untuk menyimpan, mengola, menganalisis, dan mendistribusikan berbagai informasi.


B. Komponen Teknologi Informasi
1. Komponen Utama
a. Hardware : perangkat keras , contoh : monitor, printer, keyboard, dll
b. Software : terdiri dari Program, Dokumen, dan Data
c. Brainware : manusia (user) yang menggunakan Teknologi Informasi
2. Komponen Lain
- Firmware : software yang “ditanamkan” di hardware (setengah dari hardware & software)
Contoh : BIOS, intruksi yang disimpan permanen di ROM - Infoware : User manual, SOP, cyber law C.
Penerapan TI
- Industri : mobil, obat-obatan, rumahtangga - Perbankan : sistem ATM, tranfer uang, dll
- Pendidikan : Sistem informasi sekolah, Absensi, dll
- Kesehatan : Pengolahan informasi penyakit, dll
- Pemerintah : Komunikasi pemerintahan daerah, Pendataan kegiatan pemerintahan, dll
- Hiburan : Game, Internet, dll
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)