Pengantar HTMLHTML (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.

Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

- Membuat halaman Web.

- Menampilkan berbagai informasi didalam sebuah browser internet.

- Membuat Link menuju halaman Web lain dengan kode tertentu (hypertext).

- Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

- Menentukan hubungan ke dokumne lain, HTML merupakan suatu bahasa computer yang termasuk dalam kategori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur gambar.

- Menentukan ukuran dan alur tulisan.

- Mengintegerasikan gambar dan tulisan.

- Membuat Pranala.

- Mengintegerasikan berkas suara dan rekaman gambar hidup.

- Membuat form interaktif.

- Kita dapat menampilkan suatu kelompok data dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

- Kita dapat menampilkan tulisan dalam bentuk cetakan tebal.

- Kita dapat menampilkan sekelompok kata dalam bentuk miring.

- Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

- Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Kegunaan HTML

Dengan menggunakan HTML anda dapat membuat antara lain :

a. Membuat link.

Konsep Hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :

- Link menuju bagian lain dari page.

- Link menuju page lain dalam satu web site.

- Link menuju resource atau web site yang berbeda.

b. Memodifikasi format teks.

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

·

- Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

- Kita dapat menampilkan teks dalam bentuk cetakan tebal.

- Kita dapat menampilkan sekelompok kata dalam bentuk miring.

- Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

- Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c. Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar datau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami membuat link.

d. Menyisipkan data

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informasi untuk mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk table

Penampilan informasi dalam bentuk table ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan table ini juga dapat dilakukan untuk manambah nilai estetika dari page yang akan kita rancang.

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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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 _subscript

<br>

Teks ini berisi ^superscript

<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>

 

Sejarah Komputer

Sejarah Komputer tak terlepas dari penemuan-penemuan manusia sejak dahulu kala berupa alat mekanik maupun elektronik. Komputer yang biasa digunakan saat ini merupakan evolusi panjang dari Komputer terdahulu sejak pertama kali diciptakan dimana Komputer sangat terbatas penggunaan dan kegunaannya karena belum dikomersilkan serta memerlukan keahlian khusus untuk mengoperasikannya. Meskipun demikian sejarah Komputer tak terhenti bahkan telah beberapa kali mengalami evolusi ditiap generasinya dan dari tiap generasi menunjukkan perbedaan-perbedaan yang sangat menonjol seiring kemajuan teknologi yang sangat menunjukkan perkembangan Komputer itu sendiri.

Definsi Komputer

Komputer adalah alat yang di pakai untuk mengolah data menurut perintah yang telah di rumuskan. Komputer dapat di definisikan sebagai suatu peralatan elektronik yang terdiri dari dari beberapa komponen yang dapat bekerja sama antara komponen satu dengan yang lain untuk menghasilkan suatu informasi berdasarkan program dan data yang ada. Adapun komponen Komputer adalah meliputi : Layar Monitor, CPU, Keyboard dan Printeer (sebagai pelengkap). Tanpa printer computer tetap dapat melakukan tugasnya sebagai pengolah data namun sebatas terlihat dilayar monitor belum dalam bentuk print out (kertas).

Definisi Perangkat Keras

Pengertian Hardware atau dalam bahasa indonesianya disebut juga dengan nama “Perangkat Keras” adalah salah satu komponen dari sebuah Komputer yang sifat alatnya bias dilihat dan diraba secara langsung atau yang berbentuk nyata, yang berfungsi untuk mendukung proses komputerisasi.

Hardware dapat bekerja berdasarkan perintah yang telah ditentukan ada padanya atau yang juga disebut dengan istilah instruction set. Dengan adanya peritah yang dapat dimengerti oleh hardware tersebut, maka hardware tersebut dapat melakukan berbagai kegiatan yang telah ditentukan oleh pemberi perintah.

a. Motherboard (papan utama)

Motherboard/mainboard adalah komponen utama yang membangun sebuah komputer. Berbentuk papan persegi dengan slot-slot untuk memasukkan komponen-komponen lain. Fungsinya untuk menghubungkan seluruh komponen PC. Perangkat keras komputer lain semuanya melekat langsung pada slot motherboard atau setidaknya terhubung menggunakan kabel.

b. Central Processing Unit (CPU)

Biasa juga kita kenal sebagai “processor” atau “otak” dari komputer. Fungsi dari CPU ini adalah memproses dan mengolah semua kalkulasi dan perintah-perintah yang membuat komputer dapat dioperasikan. Karena panas yang dihasilkannya, CPU selalu dilengkapi dengan kipas dan juga heat sink untuk mengurangi suhunya. Pada jenis-jenis CPU terbaru, sudah dilengkapi pula dengan Graphic Processing Unit (GPU) yang terintegrasi ke dalam CPU, sebagai pengolah data-data grafis.

Random Access Memory (RAM)

RAM berfungsi sebagai tempat transit data sementara untuk operasi-operasi yang tengah dijalankan oleh CPU. RAM bersifat volatile, artinya perangkat ini tidak meyimpan data secara permanen, hanya untuk operasi yang dibutuhkan saja. Kapasitas RAM pada PC yang sering kita temukan cukup beragam , mulai dari 256 MB (MegaBytes) – 16 GB (GigaBytes.

Video Graphic Array (VGA)

VGA card atau kartu grafis berfungsi sebagai penghubung yang memungkinkan pengiriman data-data grafis antara PC dan perangkat display seperti monitor atau proyektor. Sebagian besar komputer memiliki VGA yang terpisah sebagai kartu ekspansi yang dipasang pada slot motherboard. Namun ada juga komputer yang mempunyai VGA terintegrasi pada motherboard atau pada CPU-nya.

Hard Disk Drive(HDD)

Hard-disk berfungsi sebagai tempat penyimpanan data utama dalam sebuah sistem komputer. Sistem Operasi , aplikasi, dan dokumen-dokumen disimpan pada hard-disk ini. Pada PC terbaru, ada juga perangkat keras baru yang bernama Solid State Drive (SSD). Fungsinya sama seperti hard-disk, namun menawarkan kecepatan transfer data yang lebih cepat.

Optical Disc Drive

Optical drive biasa juga dikenal dengan nama CD Drive, DVD Drive atau ODD. Fungsi dari perangkat ini adalah untuk membaca dan juga menyimpan data dari dan ke media cakram optik seperti CD , DVD, atau Blu-Ray Disc.

Power Supply Unit (PSU)

Power Supply berfungsi sebagai pengkonversi dan penyalur energi listrik dari outlet sumber (misalnya listrik PLN) ke bentuk energi listrik yang dapat digunakan untuk menjalankan komponen komputer yang berada di dalam casing. Biasanya, PSU ini diletakkan di bagian belakang casing.

Selain dari perangkat keras komputer yang terdapat di dalam casing, ada juga komponen-komponen yang umum kita lihat diluar casing:

Monitor

Disebut juga screen atau display. Fungsi dari layar monitor adalah untuk menampilkan video dan informasi grafis yang dihasilkan dari komputer melalui alat yang disebut kartu grafis (VGA Card). Monitor ini bentuk fisiknya hampir sama dengan televisi , hanya saja televisi biasanya mampu menampilkan informasi grafis dengan ukuran resolusi yang lebih tinggi.

Keyboard dan Mouse

Keyboard dan mouse berfungsi sebagai alat input untuk memasukkan perintah teks, karakter, atau menggerakkan objek pada antarmuka grafis untuk diproses oleh komputer. Ukuran dan bentuk dari kedua alat ini cukup beragam, namun fungsinya sama saja

.

Definisi Perangkat Lunak

Pengertian Software

Nama lain dari Software adalah perangkat lunak. Karena disebut juga sebagai perangkat lunak, maka sifatnya pun berbeda dengan hardware atau perangkat keras , jika perangkat keras adalah komponen yang nyata yang dapat diliat dan disentuh oleh secara langsung manusia, maka software atau Perangkat lunak tidak dapat disentuh dan dilihat secara fisik, software memang tidak tampak secara fisik dan tidak berwujud benda namun bisa untuk dioperasikan.

Pengertian Software computer adalah sekumpulan data elektronik yang disimpan dan diatur oleh komputer, data elektronik yang disimpan oleh komputer itu dapat berupa program atau instruksi yang akan menjalankan suatu perintah. Melalui sofware atau perangkat lunak inilah suatu komputer dapat menjalankan suatu perintah.

Software berbayar

Software berbayar merupakan perangkat lunak yang didistribusikan untuk tujuan komersil, setiap pengguna yang ingin menggunakan atau mendapatkan software tersebut dengan cara membeli atau membayar pada pihak yang mendistribusikannya. pengguna yang menggunakan software berbayar umumnya tidak diijinkan untuk menyebarluaskan software tersebut secara bebas tanpa ijin ada penerbitnya. contoh software berbayar ini misalnya adalah sistem microsoft windows, microsoft office, adobe photo shop, dan lain-lain.

· Freeware

Freeware atau perangkat lunak gratis adalah perangkat lunak komputer berhak cipta yang gratis digunakan tanpa batasan waktu, berbeda dari shareware yang mewajibkan penggunanya membayar (misalnya setelah jangka waktu percobaan tertentu atau untuk memperoleh fungsi tambahan). Para pengembang perangkat gratis seringkali membuat perangkat gratis freeware “untuk disumbangkan kepada komunitas”, namun juga tetap ingin mempertahankan hak mereka sebagai pengembang dan memiliki kontrol terhadap pengembangan selanjutnya. Freeware juga didefinisikan sebagai program apapun yang didistribusikan gratis, tanpa biaya tambahan. Sebuah contoh utama adalah suite browser dan mail client dan Mozilla News, juga didistribusikan di bawah GPL (Free Software)

· Free Software

Free Software lebih mengarah kepada bebas penggunaan tetapi tidak harus gratis. Pada kenyataannya, namanya adalah karena bebas untuk mencoba perangkat lunak sumber terbuka (Open Source) dan di sanalah letak inti dari kebebasan: program-program di bawah GPL, sekali diperoleh dapat digunakan, disalin, dimodifikasi dan didistribusikan secara bebas. Jadi free software tidak mengarah kepada gratis pembelian tetapi penggunaan dan distribusi. Begitu keluar dari lisensi kita dapat menemukan berbagai cara untuk mendistribusikan perangkat lunak, termasuk freeware, shareware atau Adware. Klasifikasi ini mempengaruhi cara di mana program dipasarkan, dan independen dari lisensi perangkat lunak mana mereka berasal.

Perbedaan yang nyata antara Free Software dan Freeware. Konflik muncul dalam arti kata free dalam bahasa Inggris, yang berarti keduanya bebas dan gratis. Oleh karena itu, dan seperti yang disebutkan sebelumnya, Free Software tidak perlu bebas, sama seperti Freeware tidak harus gratis.

Shareware

Shareware juga bebas tetapi lebih dibatasi untuk waktu tertentu. Shareware adalah program terbatas didistribusikan baik sebagai demonstrasi atau versi evaluasi dengan fitur atau fungsi yang terbatas atau dengan menggunakan batas waktu yang ditetapkan (misalnya 30 hari) . Dengan demikian, memberikan pengguna kesempatan untuk menguji produk sebelum membeli dan kemudian membeli versi lengkap dari program. Sebuah contoh yang sangat jelas dari tipe ini adalah perangkat lunak antivirus, perusahaan-perusahaan ini biasanya memudahkan pelepasan produk evaluasi yang hanya berlaku untuk jumlah hari tertentu. Setelah melewati maksimum, program akan berhenti bekerja dan Anda perlu membeli produk jika Anda ingin tetap menggunakannya.

Kita juga dapat menemukan perangkat lunak bebas sepenuhnya, namun termasuk dalam program periklanan, distribusi jenis ini disebut Adware. Sebuah contoh yang jelas adalah program Messenger dari Microsoft yang memungkinkan penggunaan perangkat lunak bebas dalam pertukaran untuk masuk dengan cara iklan banner atau pop-up.