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>

 

 

1) Sejarah Komputer

Sejarah perkembangan komputer berawal dari penemuan seorang yang bernama Charles Babbage. Dia adalah seorang ilmuan didunia 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 merupakn kalkulator otomatis pertama sebagai cikal bakal komputer. Penemuan tersebut menjadikan Charles Babbage sebagai penemu komputer dan dijuluki sebagai Bapak Komputer.

Sejak dahulu, proses pengolahan data telah dilakukan oleh manusia. Manusia juga menemukan alat-alat mekanik dan elektronik untuk membantu manusia dalam penghitungan dan pengolahan data supaya bisa mendapatkan hasil lebih cepat. Komputer yang kita temui saat ini adalah suatu evolusi panjang dari penemuan-penemuan manusia sejak dahulu kala berupa alat mekanik maupun elektronik.Saat ini komputer dan piranti pendukungnya telah masuk dalam setiap aspek kehidupan dan pekerjaan. Komputer yang ada sekarang memiliki kemampuan yang lebih dari sekedar perhitungan matematik biasa.

Sejarah Komputer Menurut Periodenya:

a) Komputer Generasi Pertama (1946­ – 1959)

Dengan terjadinya Perang Dunia II, negara-­negara yang terlibat dalam perang tersebut berusaha mengembangkan untuk mengeksploit potensi strategis yang dimiliki komputer.Hal ini meningkatkan pendanaan pengembangan komputer serta mempercepat kemajuan teknik komputer.(1) Colassus (2) Mark I (3) ENIAC (4) EDVAC (5) UNIVAC I

b) Komputer Generasi Kedua (1959­ – 1964)

Stretch dan LARC

Mesin pertama yang memanfaatkan teknologi baru ini adalah superkomputer. IBM membuat superkomputer bernama Stretch, dan Sprery­ Rand membuat komputer bernama LARC. Komputer­komputer ini,yang dikembangkan untuk laboratorium energi atom, dapat menangani sejumlah besar data, sebuah kemampuan yang sangat dibutuhkan oleh peneliti atom. Mesin tersebut sangat mahal dan cenderung terlalu kompleks untuk kebutuhan komputasi bisnis, sehingga membatasi kepopulerannya.

Hanya ada dua LARC yang pernah dipasang dan digunakan: satu di Lawrence Radiation Labs di Livermore, California, dan yang lainnya di US Navy Research and Development Center di Washington D.C. Komputer generasi kedua menggantikan bahasa mesin dengan bahasa assembly. Bahasa assembly adalah bahasa yang menggunakan singkatan­singakatan untuk menggantikan kode biner.

Pada awal 1960­an, mulai bermunculan komputer generasi kedua yang sukses di bidang bisnis, di universitas, dan di pemerintahan. Komputer generasi kedua ini merupakan komputer yang sepenuhnya menggunakan transistor. Mereka juga memiliki komponen­komponen yang dapat diasosiasikan dengan komputer pada saat ini: printer, penyimpanan dalam disket, memory, sistem operasi, dan program.

c) Komputer Generasi Ketiga (1964­ – 1970)

Walaupun transistor dalam banyak hal mengungguli tube vakum, namun transistor menghasilkan panas yang cukup besar, yang dapat berpotensi merusak bagian­bagian internal komputer. Batu kuarsa (quartz rock) menghilangkan masalah ini. Jack Kilby, seorang insinyur di Texas Instrument, mengembangkan sirkuit terintegrasi (IC : integrated circuit) di tahun 1958. IC mengkombinasikan tiga komponen elektronik dalam sebuah piringan silikon kecil yang terbuat dari pasir kuarsa.

Pada ilmuwan kemudian berhasil memasukkan lebih banyak komponen­komponen ke dalam suatu chiptunggal yang disebut semikonduktor. Hasilnya, komputer menjadi semakin kecil karena komponen­komponen dapat dipadatkan dalam chip. Kemajuan komputer generasi ketiga lainnya adalah penggunaan system operasi (operating system) yang memungkinkan mesin untuk menjalankan berbagai program yang berbeda secara serentak dengan sebuah program utama yang memonitor dan mengkoordinasi memori komputer.

d) Komputer Generasi Keempat (1979­ – sekarang)

Setelah IC, tujuan pengembangan menjadi lebih jelas: mengecilkan ukuran sirkuit dan komponen­komponen elektrik. Large Scale Integration (LSI) dapat memuat ratusan komponen dalam sebuah chip. Pada tahun 1980­ an, Very Large Scale Integration (VLSI) memuat ribuan komponen dalam sebuah chip tunggal. Ultra­Large Scale Integration (ULSI) meningkatkan jumlah tersebut menjadi jutaan. Kemampuan untuk memasang sedemikian banyak komponen dalam suatu keping yang berukurang setengah keping uang logam mendorong turunnya harga dan ukuran komputer. Hal tersebut juga meningkatkan daya kerja, efisiensi dan keterandalan komputer.

Perkembangan yang demikian memungkinkan orang­-orang biasa untuk menggunakan komputer biasa. Komputer tidak lagi menjadi dominasi perusahaan­perusahaan besar atau lembaga pemerintah.Pada pertengahan tahun 1970­an, perakit komputer menawarkan produk komputer mereka ke masyarakat umum. Komputer­komputer ini, yang disebut minikomputer, dijual dengan paket piranti lunak yang mudah digunakan oleh kalangan awam. Piranti lunak yang paling populer pada saat itu adalah program word processing dan spreadsheet. Pada awal 1980­an, video game seperti Atari 2600 menarik perhatian konsumen pada komputer rumahan yang lebih canggih dan dapat diprogram.

Jepang adalah negara yang terkenal dalam sosialisasi jargon dan proyek komputer generasi kelima. Lembaga ICOT (Institute for new Computer Technology) juga dibentuk untuk merealisasikannya. Banyak kabar yang menyatakan bahwa proyek ini telah gagal, namun beberapa informasi lain bahwa keberhasilan proyek komputer generasi kelima ini akan membawa perubahan baru paradigma komputerisasi di dunia

2) Definisi tentang Komputer

Istilah dari komputer itu sendiri berasal dari bahasa latin computare yang mengandung arti “menghitung” (to compute atau reckon).Komputer adalah perangkat elektronik yang dapat menerima masukan (input) data dan melakukan pemrosesan data (proses) dan mengeluarkan hasil berupa informasi. Serta menjalankan program yang tersimpan didalam memori. Selain itu komputer juga dikatakan sebuah mesin yang dapat menerima dan memproses data sesuai perintah program yang tersimpan dan kemudian memberikan hasil melalui output devices (perangkat keluaran). Sebuah sistem manupulasi elektronik itu didesain dan diatur secara otomatis untuk menerima dan menyimpan, memprosesnya, dan hasil keluaran data masukannya tergantung pada instruksi program yang tersimpan.

Sebagai contoh kamu masukan banyak data menggunakan perangkat masukan, 5 + 4. Kemudian, data ini akan diproses didalam sebuah komputer. Proses ini akan ditahan oleh sebuah perangkat yang disebut prosesor. Setelah proses ini selesai, maka hasilnya akan ditahan oleh sebuah perangkat keluaran. Kadang, komputer perlu menyimpan proses tersebut untuk keperluan tertentu. Sebagai contoh untuk digunakan dimasa mendatang.

Dalam hal ini komputer akan menyimpan prosesnya ke sebuah perangkat yang disebut storage (tempat penyimpanan). Itulah cara komputer bekerja.Sekarang lihat semua perangkat proses. Pertama adalah input device (perangkat masukan). Ada banyak jenis input device. Yang paling umum digunakan adalah keyboard. Lainnya adalah mouse, light pen, microphone, track ball, camera (contoh webcam), dll. Kita dapat mengatakan bahwa input device adalah jenis perangkat yang dapat digunakan untuk memasukan banyak data ke sebuah komputer.

Didalam ilmu komputer terdapat tiga elemen penting yang sering disebut dengan sistem komputer. Adapun sistem komputer tersebut adalah sebagai berikut:

Hardware (perangkat keras) merupakan rangkaian elektronik berupa peralatan-peralatan yang nyata dan dapat kita sentuh.Software (perangkat lunak) merupakan program-program yang dijalankan pada komputer seperti sistem operasi dan berbagai program lainnya.Brandware merupakan seorang yang mengoperasikan komputer atau sering disebut sebagai user (pengguna).

Ketiga komponen diatas saling berkaitan erat , sebab apabila salah satu elemen tersebut tidak ada maka komputer kita tidak akan dapat beroperasi.

Input Output Device Adalah bagian komputer yang berfungsi sebagai penghubung antara komputer dengan peralatan lainnya. Input output device dapat dibagi kedalam dua bagian yaitu:Input device dan Output device .Input Device Adalah media komputer yang beerfungsi menerima masukan dari luar. Adapun contoh dari piranti masukkan ini adalah sebagai berikut: Keyboard,Mouse,Modem,USB,Scanner,Network card (LAN card),Joystick dan lain-lain.Output Device adalah media komputer untuk memberikan suatu pengeluaran (piranti keluar). Adapun contoh dari piranti keluar ini adalah Monitor,Printer,Modem,USB.

[Tanpa Konten]