Tugas Pengantar Komputer
1. Pengantar HTML
HTML (Hypertext Mark up Language) merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML atau HyperText Markup Language merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator).
Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.Markup
Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.
2. Contoh HTML
Heading
Heading digunakan untuk penulisan huruf besar atau pemberian nama bab. Heading memiliki enam level mulai dari yang terbesar sampai yang terkecil yaitu tag <h1> sampai tag <h6>. Contoh Sebagai berikut :
<html>
<head><title> Contoh Heading</title></head>
<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>
</body>
</html>
Posisi heading dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag heading yang diinginkan.
Paragraf
Untuk membuat paragraph dalam web, HTML menyediakan Tag <p> sebagai tag pembuka dan tag </p> sebagai tag penutup. Paragraph dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <p> yang diinginkan Berikut ini contoh pembuatan paragraph.
<html>
<head> <title>Penggunaan Paragraf</title> </head>
<body>
<p>Paragraf ini mengandung spasi dan baris tetapi browser mengabaikannya.</p>
<p align=”center”>
Sedangkan yang ini memiliki spasi panjang.
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda.
</p>
</body>
</html>
Line Break
Untuk membuat satu baris baru di halaman web maka HTML menyediakan tag <br>. Berikut ini contoh pembuatan baris baru atau line break:
<html>
<head> <title>Penggunaan Line Break</title> </head>
<body>
<p align=”center”>
Ini adalah baris pertama, dan <br/> Ini Baris kedua <br/> Kemudian ini baris ke Tiga
</p>
</body>
</html>
Horisontal Dan Komentar Tersembunyi
Tag <hr> digunakan untuk membuat garis horisontal menggunakan sepanjang yang nilai lebar yang diberikan pada tag tersebut. Tag <hr> dapat berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <hr> yang di inginkan. Tag <hr> dapat ditentukan tinggi garisnya dengan atribut SIZE dan dapat dihilangkan bayangan garisnya dengan penggunaan atribut NOSHADE.
berikut ini contoh membuat garis horizontal tanpa bayangan, tinggi = 2 dengan
lebar separuh atau 50% pada layar web browser.
<html>
<head> <title>Penggunaan Horisontal Line</title> </head>
<body>
<hr color=”green” >
Tag hr dengan properties
<hr width=”80%” size=”10” align=”left” noshade>
</p>
<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser –>
</body>
</html>
Pemformatan Teks Dan Preformat
Agar penulisan kode HTML web ditampilkan di web browser seperti dengan format penulisan apa adanya maka digunakan tag <pre> kemudian ditutup dengan tag </pre>. Berikut ini contoh penggunaan tag <pre>.
<html>
<head> <title>Penggunaan Format Text</title> </head>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<i> Teks ini miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
List unordered, ordered list, Definition List, Daftar Menu
Unordered List digunakan untuk menandai setiap item dari daftar/list menggunakan bullet berupa tiga simbol yaitu : Disk (Cakram), Circle (Linkaran), Square (Kotak)
Penulisan unordered list diawali tag <ul> serta diikuti <li> dan ditutup dengan tag </li></ul>.
Ordered List digunakan untuk menandai setiap item dari daftar/list menggunakan penomoran.
Ordered List diawali tag <ol> serta diikuti tag <li> dan ditutup dengan tag </li> dan tag </ol>.
Definition List untuk memberi keterangan pada setiap item dari daftar/list. Definition List diawali tag <dl> serta diikuti tag <dt> dan ditutup dengan tag <dd> dan tag </dl>.
Daftar menu digunakan untuk membuat daftar menu dengan menggunakan tag <menu> dengan diikuti tag </menu>
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
<h4>Sebentuk Definition List :</h4>
<dl>
<dt>Sistem</dt>
<dd>Kumpulan beberapa usnsur dan saling terkait </dd>
<dt>Informasi</dt>
<dd>Sekumpulan data yang mempunyai makna </dd>
<dt>Manajemen</dt>
<dd>Proses untuk mencapai tujuan </dd>
</dl>
</body>
</html>
Untuk property dari list order dan unorder, silahkan anda kembangkan sendiri.
Membuat Link
Agar halaman web dapat mengakses ke halaman satu dengan yang lainnya atau mengakses website yang lain, HTML menyediakan pasangan tag <a> di sertai atribut HREF dan diakhiri </a> dan link juga bisa anda tambah dengan title untuk memberikan informasi tentang link yang dibuat, title ini akan muncul saat link disorot. Link bisa anda buat dengan 2 macam, yaitu link text dan link gambar. Berikut contoh penggunaan link :
<html>
<head> <title>Contoh Link dengan Text dan Gambar</title> </head>
<body>
<h3 color=”blue” align=”center”> Link Gambar</h3>
<hr color=”green”>
Kunjungi Web Gianto
<a href=”http://www.giantowidodo.com” title=”Website Gianto”><img src=”gambar.png”> </a>
<h3 color=”blue” align=”center”> Link Text</h3>
<hr color=”green”>
Atau Klik ini Untuk mengunjungi web gianto
<a href=”http://www.giantowidodo.com” >Klik Gianto</a>
</body>
</html>
Membuat table
Berikut adalah tag yang dipakai untuk membuat table pada halaman web yang nantinya akan kita buat, table ini biasanya dipakai untuk desain website yang akan kita buat.
<html>
<body>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border=”1″>
<tr><td>100</td></tr>
</table>
<h4>Satu baris dan tiga kolom dengan border tebal:</h4>
<table border=”8″>
<tr><td>100</td><td>200</td><td>300</td></tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>
<table border=”15″>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>400</td><td>500</td><td>600</td></tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border=”0″>
<tr><td>100</td><td>200</td></tr>
<tr><td>300</td><td>400</td></tr>
</table>
</body>
</html>
Tag DIV
Tag <div> mempunyai perbedaan dengan tag <p> yaitu tag <div> tidak membuat paragraph baru hanya melakukan pergantian baris terhadap kalimat. Tag <div> dapat membuat dokumen berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <div> yang di inginkan. Dengan ditambahkan atribut CSS tag div ini biasanya juga digunakan untuk desain layout website yang akan dibuat.
Berikut ini contoh penggunaan tag <div>:
<html>
<head>
<title>Contoh Penggunaan Tag div</title>
</head>
<body>
<h3 align=”center”>Web Programming</h3>
<div align=justify> Selain HTML dan CSS untuk mahir mendesain web maka harus mempunyai keahlian dalam desain dan kepekaan terhadap kombinasi warna yang akan ditampilkan dalam website yang akan dibangun.
</div>
<div align=”left”> Untuk menguasai pemrograman website harus memahami logika dan pemrograman serta proses logika matematika.
</div>
<div align=”center”>
Jika ingin mahir memprogram website maka yang diperlukan adalah ketekunan dan pantang menyerah untuk selalu explorasi. </div>
<div align=”right”>
Tulisan ini akan berada di kanan
</div>
</body>
</html>
Tugas Pengantar Komputer
1. Sejarah Komputer
Sejarah perkembangan komputer berawal dari penemuan seorang yang bernama Charles Babbage. Dia adalah seorang ilmuwan di dunia yang telah banyak memberikan kontribusi bagi kehidupan manusia, terutama perkembangan komputer. Penemuan fenomenalnya yaitu Mesin penghitung (Difference Engine no.1) merupakan salah satu penemuan yang paling terkenal dalam sejarah perkembangan komputer dan merupakan kalkulator otomatis pertama sebagai cikal bakal kompuer. Penemuan tersebut menjadikan Charles Babbage sebagai penemu konpur dan dijuluki sebagai bapak komputer.
Berikut ini sejarah komputer dan perkembanganya: 1822: Charles Babbage mengemukakan idenya yaitu sebuah alat yang dapat membantu manusia dalam melakukan penghitungan pada tingkat kompleksitas yang tinggi dan rumit. Mesin buatanya yang belum selesai tersebut saat ini di musiumkan di Museum of Science London. 1937: Dr. John V Atanasoff dan Clifford Berry mulai membuat design komputer digital elektronis pertama. Mereka memberi nama mesin tersebut ABC (Atanasoff-Berry Computer). Kemampuan mesin ABC tersebut hanya sebatas menghitung tambah dan pengurangan. 1943: Pada Perang Dunia 2, Seorang ilmuwan Inggris yang bernama Alan Turing mendesain komputer elektronik yang dibuat khusus bagi tentara Inggris. Tujuan pembuatan komputer tersebut agar dapat digunakan untuk menembus kode pertahanan Jerman. 1944: Howard Hathaway Aiken (Amerika) membuat yang diberi nama Mark I. Merupakan sebuah komputer hitung digital pertama. Komputer tersebut memiliki luas 7,45 kaki x 50 kaki, dengan berat 35 ton. Mark I sudah dapat digunakan untuk menghitung probabilitas. 1945: Dr. John von Neumann menulis sebuah konsep penyimpanan data. Pada saat itu masih berupa ide. 1946: Dr. John W. Mauchly dan J. Presper Eckert, jr. membuat komputer skala besar yang pertama, nama komputer tersebut adalah ENIAC (Electronic Numerical Integrator And Computer). Dunia juga beranggapan kedua orang ini sebagai penemu komputer digital.
ENIAC komputer memiliki berat 30 ton, terdiri dari 18.000 lampu tabung (transistor ukuran besar), dengan lebar 30 kaki x 50 kaki, memakai tenaga 160.000 watt. Saat pertamakali dioperasikan Pertama seluruh jaringan listrik di wilayah Philadelphia mendadak mati. ENIAC sedikit lebih maju dibandingkan Mark I yang hanya dapat menghitung. ENIAC tidak hanya memiliki kemampuan menghitung, tambah, kurang, kali, bagi, tapi juga dapat diprogram untuk melakukan proses sederhana. 1951: The U.S. Bureau of Cencus menginstalasi komputer komersial pertama yang bernama UNIVAC I (Universal Automatic Computer). UNIVAC I ini dikembangkan oleh Mauchly dan Eckert untuk Remington-Rand Corporation. 1947: William Shockley, John Bardeen, dan Walter Brattain merupakan penemu Transistor pertama di dunia. Semenjak ditemukanya transistor, ukuran komputer menjadi semakin kecil.
2. Definisi Komputer
Komputer adalah alat yang dipakai untuk mengolah data menurut prosedur yang telah dirumuskan. Kata computer semula dipergunakan untuk menggambarkan orang yang perkerjaannya melakukan perhitungan aritmatika, dengan atau tanpa alat bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri. Asal mulanya, pengolahan informasi hampir eksklusif berhubungan dengan masalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang tidak berhubungan dengan matematika.
Dalam arti seperti itu terdapat alat seperti slide rule, jenis kalkulator mekanik mulai dari abakus dan seterusnya, sampai semua komputer elektronik yang kontemporer. Istilah lebih baik yang cocok untuk arti luas seperti "komputer" adalah "yang mengolah informasi" atau "sistem pengolah informasi." Selama bertahun-tahun sudah ada beberapa arti yang berbeda dalam kata "komputer", dan beberapa kata yang berbeda tersebut sekarang disebut disebut sebagai komputer.
Kata computer secara umum pernah dipergunakan untuk mendefiniskan orang yang melakukan perhitungan aritmatika, dengan atau tanpa mesin pembantu. Menurut Barnhart Concise Dictionary of Etymology, kata tersebut digunakan dalam bahasa Inggris pada tahun 1646 sebagai kata untuk "orang yang menghitung" kemudian menjelang 1897 juga digunakan sebagai "alat hitung mekanis". Selama Perang Dunia II kata tersebut menunjuk kepada para pekerja wanita Amerika Serikat dan Inggris yang pekerjaannya menghitung jalan artileri perang dengan mesin hitung.
Charles Babbage mendesain salah satu mesin hitung pertama yang disebut mesin analitikal. Selain itu, berbagai alat mesin sederhana seperti slide rule juga sudah dapat dikatakan sebagai komputer.