BAB I PENGENALAN INTERNET, WEB BROWSER, SEARCH

ENGINE, EMAIL DAN HTML

A. Memahami Fungsi Dan Manfaat Internet

1. Sejarah Internet
Awal mula Internet diawali dari Unisovyet, ketika pada tahun 1957 mereka meluncurkan sebuah
satelit bernama Sputnik. Peluncuran Sputnik ini dirasakan sebagai- ancaman oleh musuh besar mereka,
yaitu Amerika Serikat. Presiden Dwight D. Eisenhower menyatakan perlunya membangun sebuah
teknologi yang membuat AS tetap sebagai negara superior. Kemudian dibentuklah sebuah badan yang
disebut Advanced Research Projects Agency (ARPA). ARPA bernaung di bawah Departemen Pertahanan
Amerika Serikat atau Department of Defense (DoD).
Pada tahun 1969, DoD memberi tugas kepada ARPA untuk membangun sebuah mata rantai komunikasi
antara DoD dengan militer yang tidak dapat disabot oleh musuh mereka. Jaringan komunikasi yang
diciptakan ini disebut ARPAnet. Pada awalnya, ARPAnet hanya menghubungkan empat buah situs saja,
yaitu:
a. Stanford Research Institute (SRI)
b. University of California at Santa Barbara (UCSB)
c. University of California at Los Angeles (UCLA)
d. University of Utah
Pada tahun 1970, penelitian yang dilakukan di Stanford University menghasilkan sebuah protokol
yang disebut TCP/IP. Protokol TCP/IP inilah yang berkembang terus hingga sekarang dan menjadi
protokol standar dalam Internet

2. Pengertian Internet
Pengertian Internet adalah sebuah jaringan komputer yang saling terhubung dengan
menggunakan suatu sistem standar global transmission control protocol/internet protocol suite (TCP/IP)
yang digunakan sebagai protokol pertukaran paket dalam melayani miliaran pengguna yang terdapat di
seluruh dunia. Internet merupakan kependekan dari interconnected network. Internet juga dapat
diartikan sebagai jaringan komunikasi global yang terbuka dan menghubungkan jutaaan atau milyaran
jaringan komputer dengan berbagai tipe dan jenis, dengan menggunakan tipe komunikasi misalnya
telepon, satelit, dan sebagainya.

3. Fungsi Internet
Secara sederhana, fungsi internet adalah sebagai berikut :
a. Sebagai media komunikasi
b. Sebagai salah satu tempat untuk akses informasi
c. Berbagi sumber daya atau data
d. Dapat menyiarkan dan mengakses secara langsung baik itu berita dan bertukar data dengan internet
online ke seluruh dunia.

Hal 1
 B. Web Browser
1. Pengertian Web Browser
Web Browser adalah suatu program atau software yang digunakan untuk menjelajahi internet
atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer. Awalnya, web
browser berorientasi pada teks dan belum dapat menampilkan gambar. Namun, web browser
sekarang tidak hanya menampilkan gambar dan teks saja, tetapi juga memutar file multimedia seperti
video dan suara.Web browser juga dapat mengirim dan menerima email, mengelola HTML, sebagai
input dan menjadikan halaman web sebagai hasil output yang informative.
Dengan menggunakan web browser, para pengguna internet dapat mengakses berbagai
informasi yang terdapat di internet dengan mudah :

Beberapa contoh webrowser:

 Safari
 Netscape Navigator
 Opera
 Mozila Firefox
 Google Chrome
 UC Browser

2. Sejarah Singkat Web Browser

Web Browser pertama bernama WorldWideWeb yang di ciptakan Tim BennersLee, kemudian
diubah menjadi nexus. Pada tahun 1993, Marc Andreessen xmelakukan inovasi web browser dengan
membuat Mosaic yang sekarang di kenal dengan Netspace. Hal tersebut membuat sistem internet
menjadi mudah untuk digunakan dan mudah untuk di akses oleh banyak orang. Pada tahum 1994
Netspace ini menjadi browser terpopuler di dunia karena menguasasi 90% dari seluruh pengguna web
browser di dunia.
Pada tahun 1995, Microsoft menanggapi pembuatan web browser oleh Marc Andreessen
tersebut yaitu menciptakan Internet Exproler dan terjadilah perang web browser pertama di industry
internet. Internet Exproler memperoleh dominasi di pasar web browser ini dan meraih pengguna lebih
dari 95% pada tahun 2002. Opera memulai pembuatannya pada tahun 1996, walaupun belum pernah
mencapai penggunaan secara luas tetapi versi mini Opera yaitu Opera Mini memberikan tambahan
karena pengguna web browser di ponsel bertumbuh sangat cepat. Opera Mini terinstall pada lebih dari
40 juta ponsel.
Pada tahun 1998, Netscape meluncurkan yang kemudian menjadi Mozilla Foundation dalam
upaya menghasilkan web browser yang kompetitif. Web browser tersebut akhirnya berkembang
menajdi Firefox, hingga Agustus 2011, Firefox memiliki pangsa pasar 28% web browser di seluruh
dunia. Apple pun mengeluarkan web browser pada Januari 2003 yaitu Safari yang menguasai lebih dari
7% dari pasar web browser di dunia.
Pendatang baru di pasar web browser adalah Google Chrome. Pertama kali dirilis pada
September 2008. Chrome memiliki popularitas yang meningkat secara signifikan dari tahun ke tahun,
peningkatan tersebut berbanding terbalik dengan popularitas Internet Explorer yang cenderung
menurun dari bulan ke bulan. Pada Desember 2011, Google Chrome mengalahkan Internet Explorer 8
sebagai web browser paling banyak digunakan tetapi Internet Explorer lebih unggul jika dibandingkan
dengan jumlah gabungan semua versi Internet Explorer yang digunakan.

Hal 2
C. Search engine
Secara sederhana Search Engine adalah sebuah pemograman yang dibuat untuk membantu orang
dalam mencari serta menemukan sebuah informasi. Jadi kebutuhan anda akan informasi yang tersedia
di internet bisa lebih mudah di temukan dengan menggunaikan search engine.
Sistem kerja Search Engine adalah menyimpan database yang ada di internet untuk kemudian di
tampilkan sesuai dengan kecocok'an kata kunci yang di ketikkan pada search engine dengan database
yang ada. Tentunya akan banyak sekali data yang dimunculkan search engine, untuk urutan yang
pertama ditampilkan adalah hasil yang paling akurat.
Search engine merupakan sebuah situs yang memiliki database besar yang dirancang untuk meng-
index alamat-alamat internet. Informasi yang dapat dibaca bisa berupa teks, gambar, suara, atau video.
Untuk melaksanakan tugasnya ini, search engine memiliki program khusus yang biasanya disebut spider,
bot, atau crawler.
Pada saat Anda mendaftarkan sebuah alamat web (URL), spider dari search engineakan menerima
dan menganalisa URL tersebut. Dengan proses dan prosedur tertentu,spider ini akan memutuskan
apakah web yang anda daftarkan layak diterima atau tidak. Jika layak, spider akan menambahkan alamat
URL dan membaca semua isi atau content yang ada. Rangking sebuah web ditetapkan dengan metode
tertentu sesuai dengan standar masing-masing search engine.

D. Electronic mail ( E-Mail)

1. Pengertian E-mail
E-mail (electronic mail) adalah surat dalam bentuk elektronik. E-mail merupakan salah satu
fasilitas atau aplikasi internet yang paling banyak digunakan dalam hal surat-menyurat. Hal ini
dikarenakan e-mail merupakan alat komunikasi yang murah, cepat, dan efisien. Menggunakan e-mail
memungkinkan kita untuk mengirimkan pesan dalam bentuk surat ke seluruh dunia dalam waktu yang
sangat cepat dan biaya yang murah. E-mail yang dikirimkan akan sampai ke alamat yang dituju sesaat e-
mail tersebut dikirimkan. Biaya yang dikluarkan pun hanyalah biaya untuk mengakses internet pada saat
kita mengirimkan/ membuka untuk menerima email tersebut. Komunikasi menggunakan e-mail
dilakukan dengan cara mengaktifkan pesan yang akan kita kirim pada software yang dikhususkan untuk
keperluan ini, misalnya Microsoft Outlook .
Manfaat/kegunaan e-mail
a. Media komunikasi
E-mail atau surat elektronik adalah media komunikasi yang biasa dilakukan secara persoal atau
umum (komunitas).
b. Media pengiriman
Dengan e-mail anda bisa melakukan pengiriman data ke seluruh dunia dan tentunya pengirim dan
yang dikirimi data sama-sama menggunakan alamat email, bukan alamat rumah. Tidak hanya itu,
dengan menggunakan e-mail anda bisa mengirimkan data ke banyak orang hanya dalam hitung
menit bahkan detik.
c. Efektif, efisien, dan murah
Melakukan pengiriman data melalui e-mail sangat efektif, efisien, dan murah. Maksudnya, anda tidak
perlu keluar rumah dan pergi ke kantor pos hanya untuk mengirim foto atau lamaran pekerjaan.
Cukup melalui koneksi internet dan alamat e-mail anda, pengiriman akan cepat sampai ke alamat
tujuan dan tidak perlu biaya mahal.
d. Media promosi
Jika anda bisa memiliki usaha di internet atau bisnis online, anda bisa mengirimkan promosi produk
ke para pelanggan anda dengan memanfaatkan daftar e-mail pelanggan yang ada.

Hal 3
 e. Media informasi
Melalui e-mail, anda bisa mendapatkan informasi-informasi terbaru dari seluruh dunia yang anda
inginkan dengan cara menjadi pelanggan informasi dari media yang anda tentukan.
f. Membuat blog atau website
Dengan e-mail anda bisa membuat blog dan website.
g. Sosial media
Dengan e-mail, anda bisa menjalin hubungan dengan teman atau orang lain. Baik menggunakan e-
mail itu sendiri atau melalui jejaring sosial seperti facebook, twitter, atau google.

E. Hypertext Markup Language ( HTML )

1.Pengertian Hypertext Markup Language (HTML)
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web
Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat
menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat
lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan
perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia
penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML
adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini
merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

2.Memahami struktur dasar di Hypertext Markup Language

(HTML)
Mendesain html berarti melakukan suatu tindakan pemrograman. Namun html bukanlah
sebuah Bahasa pemrograman. Namun html hanyalah berisi perintah‐perintah yang telah terstruktur
berupa tag‐tag penyusun.
Mendesain html adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari
html adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar
para pengunjung homepage yang kita buat merasa senang dan bermanfaat. Mendesain html dapat
dilakukan dengan dua cara :
1. Menggunakan html Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, Sublime dan lain‐lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag‐tag html ke dalam dokumen html.

Hal 4
 Tag HTML Dasar :

Tag Deskripsi
<!DOCTYPE> Menunjukkan Dokumen
<html> Menunjukkan Dokumen HTML
<head> Menunjukkan informasi tentang dokumen
<title> Menunjukkan judul untuk dokumen
<body> Menunjukkan isi dokumen
<h1> to <h6> Menunjukkan judul HTML
<p> Menunjukkan sebuah paragraf
<br> Menyisipkan jeda baris tunggal
<hr> Menunjukkan perubahan tematis dalam konten
<!--...--> Menunjukkan komentar
Contoh :
1. Ketik kode html seperti berikut pada note pad :

2. Kemudian simpan dengan nama Contoh1.html

3. Buka file Contoh1 dengan cara klik kanan >> Open with >> Google Chrome

4. Maka akan muncul tampilan seperti berikut :

Hal 5
 Manipulasi text dengan HTML :

 HEADING

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu
dokumen html. html menyediakan enam tingkatan heading. Heading level 1 biasanya untuk
judul utama.

Contoh :

Ketiklah kode html berikut dan simpan dengan nama heading.html:

Hasil :

Hal 6
 PARAGRAF

Untuk membuat paragraf digunakan tag <p> . Setelah tag <p> Anda bisa menulis isi
paragraf dan paragraph tersebut harus diakhiri dengan penutup </p> . Anda bisa mengatur
posisi paragraf dengan attribut align.

Contoh : Ketiklah kode html berikut dan simpan dengan nama paragraf.html:

<!DOCTYPE html>
<html>
<head>
<title>Paragraf</title>
</head>
<body>

<h1>Contoh Paragraf</h1>

<p align="right">
Guru merupakan aspek besar dalam penyebaran ilmu, apalagi jika yang disebarkan
adalah ilmu agama yang mulia ini. Para pewaris nabi begitu julukan mereka para
pemegang kemulian ilmu agama. Tinggi kedudukan mereka di hadapan Sang Pencipta.
</p>
<p align="center">
Ketahuilah saudaraku para pengajar agama mulai dari yang mengajarkan iqra sampai
para ulama besar, mereka semua itu ada di pesan Rasulullah Shallallahu’alaihi Wasallam.
Beliau bersabda,
</p>
<p align="left">
“Tidak termasuk golongan kami orang yang tidak menghormati yang lebih tua dan
menyayangi yang lebih muda serta yang tidak mengerti hak ulama” (HR. Ahmad dan
dishahihkan Al Albani dalam Shahih Al Jami).
</p>
<p align="justify">
Tersirat dari perkatanya shallahu ‘alaihi wa salam, bahwa mereka para ulama wajib di
perlakukan sesuai dengan haknya. Akhlak serta adab yang baik merupakan kewajiban
yang tak boleh dilupakan bagi seorang murid.

Guru kami DR. Umar As-Sufyani Hafidzohullah mengatakan, “Jika seorang murid
berakhlak buruk kepada gurunya maka akan menimbulkan dampak yang buruk pula,
hilangnya berkah dari ilmu yang didapat, tidak dapat mengamalkan ilmunya, atau tidak
dapat menyebarkan ilmunya. Itu semua contoh dari dampak buruk.”
</p>

</body>
</html>

Hal 7
 Kemudia buka di google chrome :

 UKURAN, JENIS DAN WARNA FONT

Untuk mengatur huruf dokumen html digunakan tag <font size>,untuk mengatur jenis font di gunakan tag
<font face> dan menggunakan attribute color seperti berikut < font color>. Untuk warna bisa
menggunakan nama warna seperti red,blue,green, white, dll. Sedangkan cara kedua adalah dengan
menggunakan kode .
Contoh:
Ketiklah kode html berikut dan simpan dengan nama Ukuran_font.html:

Hal 8
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Font</title>
</head>
<body>

<font size=1 face ="Verdana" color=red>Ukuran font 1</font><br>

<font size=2 face ="Comic Sans MS" color=#800000>Ukuran font 2</font><br>
<font size=3 face ="Impact" color=blue>Ukuran font 3</font><br>
<font size=4 face ="Bauhaus 93" color=#C0C0C0>Ukuran font 4</font><br>
<font size=5 face ="Century Gothic" color=yellow>Ukuran font 5</font><br>
<font size=6 face ="Cooper Black" color=#8F00FF>Ukuran font 6</font><br>
<font size=7 face ="Times New Roman" color=pink>Ukuran font 7</font>

</body>
</html>

Hal 9
 BAB II MEMBUAT TABLE, TAG GAMBAR, & LINK DI HTML
1. Table
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan
membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan
data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTMLini kita akan
membahas cara penggunaannya. Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag,
yaitu
tag <tabel>, tag <tr>, dan tag <td> :
 Tag <tabel> digunakan untuk memulai tabel
 Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
 Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel. Agar lebih jelas,
kita akan langsung menggunakan contoh kode HTML,

Ketik Sintaks dibawah ini dan simpan dengan nama file contoh_tabel.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>

<h2 align="center">CONTOH TABEL</h2>

<table width="300" border="1" align="center" >

<tr>
<td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td rowspan="2" align="center">warna-warna</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru muda</td>
</tr>
</table>

</body>
</html>

Hal 10
 2. Gambar

Untuk memasukkan sebuah gambar dalam halaman web digunakan tag <img> . Setelah tag
<img> Anda bisa menulis isi paragraf dan paragraph tersebut harus diakhiri dengan penutup </> . Anda
bisa mengatur posisi paragraf dengan attribut align.

Contoh :

Ketiklah kode html berikut dan simpan dengan nama Latihan.html:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Gambar</title>
</head>
<body>

<h1>Belajar Tag Gambar</h1>

<img src="prodistik.png" />

<h1>Belajar Tag Gambar</h1>

<img alt="Gambar Pemandangan" src="prodistik.png" height="350" width="600" />

</body>
</html>

3. Link
Perintah anchor <a> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen
html lain digunakan perintah <a href = “nama_dokumen”>Teks pada browser</a>.
Anda juga bisa membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan nama
anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut name pada
tag <a>. Misalnya <a name = “Bugs”</a>. Cara melakukan link ke bagian tersebut adalah <a
href=“#nama_anchor”>teks pada browser</a>

Contoh :

Ketiklah kode html berikut dan simpan dengan nama contoh_link.html:

Hal 11
 <!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>

<h2 align="center">LATIHAN LINK</h2>

<a name="lengkap">Nama Kyai Kyai di Indonesia</a>

<blockquote>
<p>Syeikh Maulana Abdullah Sholih Istambul, Maqbaroh Tambak Ngadi Kediri</p>
<p>Syeikh Muhammad Hirman Arruman, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Anis Ibrahim, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Ahmad Siddiq, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Bani’askar, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Hamim Djazuli (Gus Miek), Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Imam Thoha, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Yasin Yusuf, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Ma’ruf Alhafidh, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Muslim Hanan, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Rochmad Zuber, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Abu Syamsuddin Batuampar Sampang Madura</p>
<p>Kyai Ahmad (Joko Tole) Sumenep Madura</p>
<p>Syech Kholil Batuampar Bangkalan Madura <a href="#khkholil">info
lengkap</a></p>
<p>Datuk Ibrahim Lateng Banyuwangi</p>
<p>Sayyid Ahmad Lateng Banyuwangi</p>
<p>Kyai Abdullah Mun’im Kemayan, Ngadi, Mojo Kediri</p>
<p>Kyai Jazuli Usman Ploso, Mojo Kediri</p>
<p>Kyai Dimyati Wlingi Blitar</p>
<p>Kyai Kholil Nggebongan Blitar</p>

<p><a href="link_tujuan.html">kalo mau tahu lagi klik disini</a></p>

</blockquote>

<p><a name="khkholil">Syech Kholil Batuampar Bangkalan Madura</a></p>

<blockquote>
<p>

</p>
</blockquote>
<p><a href="#lengkap">kembali ke atas</a></p>
</body>
</html>

Hal 12
Kemudian ketiklah kode html berikut dan simpan dengan nama link_tujuan.html

<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>

<h2 align="center">LINK TUJUAN</h2>

<a name="lengkap">Lanjutan Nama Kyai Kyai di Indonesia</a>

<blockquote>
<p>Syeikh Maulana Abdullah Sholih Istambul, Maqbaroh Tambak Ngadi Kediri</p>
<p>Syeikh Muhammad Hirman Arruman, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Anis Ibrahim, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Ahmad Siddiq, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Bani’askar, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Hamim Djazuli (Gus Miek), Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Imam Thoha, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Yasin Yusuf, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Ma’ruf Alhafidh, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Muslim Hanan, Maqbaroh Tambak Ngadi Kediri</p>
<p>KH. Rochmad Zuber, Maqbaroh Tambak Ngadi Kediri</p>
<p>Kyai Abu Syamsuddin Batuampar Sampang Madura</p>
<p>Kyai Ahmad (Joko Tole) Sumenep Madura</p>
<p>Syech Kholil Batuampar Bangkalan Madura
<p>Datuk Ibrahim Lateng Banyuwangi</p>
<p>Sayyid Ahmad Lateng Banyuwangi</p>
<p>Kyai Abdullah Mun’im Kemayan, Ngadi, Mojo Kediri</p>
<p>Kyai Jazuli Usman Ploso, Mojo Kediri</p>
<p>Kyai Dimyati Wlingi Blitar</p>
<p>Kyai Kholil Nggebongan Blitar</p>

<p><a href="contoh_link.html">Kembali</a></p>
</blockquote>

</body>
</html>

Hal 13
 LATIHAN MANDIRI !

1. Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :
(nama_siswa)_Latihan_tabel.html
 Title : Latihan Tabel
 Warna background tabel : # 00FFCC
 Warna Kolom : "0000FF"
 Warna Baris : "#00CCFF"
 Cellpadding=”2”
 Cellspacing=”2”
 Border=”2”
 Lebar tabel : 600

Hingga menghasilkan seperti ini :

Hal 14
BAB III FROM DI HTML

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai
dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan
data antar halaman web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan
membahas cara penggunakan tag form di dalam HTML.

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form
biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan
akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di
dalam tabel MySQL. Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah
tag form, input, textarea, select dan option.

1. Pengertian tag <form>

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form>
dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat
berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form
akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP
yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian
form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get
(dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan
terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method
postbiasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau
registrasi user. Data hasil form tidak akan terlihat pada browser. Struktur dasar form akan
terlihat sebagai berikut:
<form action="prosesdata.php" method="post">
...isi form...
</form>
2. Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak
bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol
submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima
input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang
berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai
tampilan awal dari text
 <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang
diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk
inputan yang sensitif seperti password.

Hal 15
  <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di
centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkboxmemiliki
atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox
langsung terpilih pada aat pertama kali halaman ditampilkan. Contoh inputancheckbox berupa
hobi, yang oleh user dapat dipilih beberapa hobi.
 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara
pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah
satunya. Contoh inputan type radio adalah jenis kelamin.
 <input type=”submit” /> akan menampilkan tombol untuk memproses form.

Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text
tombol submit berubah sesuai inputan nilai value.

3. Mengenal Atribut: Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses
oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau
ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya
adalah sebagai berikut:
<input type="text" name="username">
<input type="text" name="email">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-
masing akan dibedakan menurut atribut name.
Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk
membuat sebuah form HTML.
Contoh penggunaan tag form, ketiklah file html di bawah ini dan simpan dengan nama :
contoh_form.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan Membuat Form</title>
</head>
<body>

<h2 align="center">CONTOH FORM</h2>

<form action="#" method="get">

<h3 align="center">Formulir Biodata</h3>
<table width="400" border="1" cellpadding="0" cellspacing="2"
bordercolor="#666666" align="center">
<tr>
<td width="100">Nama</td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td>Alamat</td>

Hal 16
<td>Alamat</td>
<td><textarea name="textarea"></textarea></td>
</tr>
<tr>
<td>Tempat</td>
<td><input type="text" name="textfield2"></td>
</tr>
<tr>
<td>Tanggal Lahir </td>
<td><select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

Hal 17
 <select name="select2">
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>

<select name="select3">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select></td>
</tr>
<tr>

<td>Jenis Kelamin </td>

<td><input name="radiobutton" type="radio" value="radiobutton"> Pria
<input name="radiobutton" type="radio" value="radiobutton"> Wanita</td>
</tr>
<tr>
<td>Hobi</td>
<td><input type="checkbox" name="checkbox" value="checkbox"> Olah raga
</td>
</tr>
<tr>
<td>&nbsp;</td>

Hal 18
 <td><input type="checkbox" name="checkbox2" value="checkbox"> Baca Buku
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" name="checkbox3" value="checkbox">
Internetan</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit">
<input name="Reset" type="reset" id="Reset" value="Reset"></td>
</tr>
</table>
</form>

</body>
</html>

Hasinya seperti ini :

Hal 19
 Tugas Akhir !
Buatlah website sederhana dengan tahap2 yang telah di contohkan !!

MODUL 1 : MENGENAL MICROSOFT WORD 2010

Materi :
Memahami interface dan icon Word 2010
Menggunakan menu-menu Word 2010

Microsoft Word adalah aplikasi pengolah kata yang dikembangkan oleh Microsoft dan di dalamnya
terdapat satu paket microsoft office yang berisi microsoft word, microsoft excel, microsoft power point,
microsoft office publisher microsoft office access dan lain-lain. Microsoft Word 2010 ini merupakan hasil
pengembangan dari versi sebelumnya dengan penambahan beberapa fitur untuk memudahkan
pengguna. Beberapa fitur tambahan tersebut di antaranya :
 Dapat menyimpan langsung dalam format PDF tanpa bantuan pihak ketiga ( File – Save as – PDF)
 Tambahan fitur Text effect seperti yang ada pada Microsoft power point bisa juga digunakan pada
Microsoft word 2010 ini.
 Pada menu Insert terdapat tambahan menu Screenshoot yang memudahkan untuk meng capture
lebih cepat tanpa harus mengedit terlebih dahulu.
 Fitur baru Paste option Microsoft word 2010 memudahkan pengguna untuk meng-copy teks dari
website.
 Terdapat menu INFO yang bisa memberikan fasilitas keamanan data bagi penggunanya, dengan
cara memberikan proteksi pada dokumen ( File – Info –Protect – Document).

Dan masih banyak lagi tambahan fitur lainnya. Microsoft Word memiliki fungsi utama untuk mengetik
teks atau mengolah kata menjadi informasi yang dibutuhkan, Mengolah tabel dan perhitungannya,
Mengolah data menjadi grafik dan masih banyak lagi. Sehingga sangat bermanfaat membantu pengguna
komputer dalam mengerjakan tugas sehari-hari, seperti membuat surat, membuat karya tulis, skripsi,
dan CV (Curriculum Vitae).

1.1. Interface dan icon di Microsoft Word

Beberapa langkah untuk membuka aplikasi komputer termasuk Microsoft word di antaranya :
1. Klik Start button lalu lanjutkan klik All Program > Klik Microsoft Office > pilih Microsoft Word

Hal 20
 2. Double klik shortcut yang ada pada tampilan desktop komputer

3. Tekan tombol windows + R bersamaan, pada kotak dialog Run ketikkan “winword” > klik OK
atau tekan enter

Berikut adalah interface dan icon Microsoft word 2010

 Tab File
Merupakan tombol yang berisi perintah-perintah standard untuk mengoperasikan file
 Quick Access
Tombol perintah pada microsoft office yang kemungkinan sering digunakan.
 Tab Menu
Bagian yang berbentuk tabulasi dan berisi serangkaian group yang memuat beberapa tombol
perintah.
 Title Bar
Menampilkan judul/nama dari dokumen yang sedang aktif
 Ribbon Menu
merupakan area yang menampilkan tab yang aktif yang didalamnya terdiri dari group –group.
 Control Windows
Minimize : mengecilkan atau menyembunyikan jendela Microsoft Word.
Restore/Maximize : memperbesar kembali jendela Microsoft Word.
Close/Exit : menutup jendela atau keluar dari Microsoft Word
 View Ruler
Menampak atau menyembunyikan penggaris

Hal 21
  Ruler Horizontal
Penggaris horizontal yang digunakan untuk mengatur margin pada lembar kerja.
 Ruler Vertikal
Penggaris Vertikal yang digunakan untuk mengatur margin pada lembar kerja
 Scroll Bar
menggerakan halaman secara vertikal maupun horizontal.
 Text Area
Halaman kosong yang digunakan untuk membuat dokomen teks, gambar, tabel atau grafik
 Documen View
Mengatur tampilan halaman kerja.
 Control Zoom
Memperbesar dan memperkecil tampilan lembar kerja.
 Control Tabulasi
Pengaturan tabulasi yang akan digunakan untuk mengatur pengetikan
 Status Bar
menampilkan informasi tentang halaman, kita bisa mengaturnya dengan menekan tombol klik
kanan pada bar status tersebut
 Text Area
tempat untuk mengetikan teks/dokumen yang akan dibuat

1.2. Mengaktifkan menu-menu yang ada di Microsoft Word

Sebelum mengenal lebih jauh menu Microsoft Word, perlu dipahami terlebih dahulu apa itu Tab,
Ribbon dan Group.
 Tab adalah sederetan menu yang ditandai dengan teks. terdiri dari tab File, Insert, Page Layout,
References, Maillings, Review, View

 Ribbon adalah sekumpulan menu dalam setiap Tab.

 Group adalah kelompok menu/icon dalam tiap Ribbon

1. Tab Home (Alt + H)

a. Group Clipboard, terdiri dari :
Paste : menempelkan hasil copy atau cut.
Cut : memotong teks/objek terpilih.
Copy : menggandakan teks/objek terpilih.
Format Painter : meniru formathalaman dokumen ke dalam
dokumen lainnya.

Hal 22
b. Group Font, terdiri dari :

Font : memilih jenis huruf

Font Size : mengatur ukuran huru
Grow Font : memperbesar ukuran huruf secara instan
Shrink Font : memperkecil ukuran huruf secara instan
Change Case : mengubah status huruf kapital/huruf kecil
Clear Formatting : menghapus pemformatan teks terpilih
Bold : menebalkan teks terpilih
Italic : memiringkan Teks terpilih
Underline : memberikan garis bawah pada teks terpilih
Strikethrough : memberikan tanda coret padateks terpilih
Subscript : mengetik karakter pemangkatan
Superscript : mengetik karakter pemangkatan
Text Effect : memberikan efek artistik pada teks terpilih
Font Color : mengatur warna teks terpilih.
Text Highlight Color : memberikan warna stabilo di belakang teks terpilih

c. Group Paragraph, terdiri dari :

d. Group Styles,terdiri dari :

Heading Styles : berisi pilihan format penjudulan paragraf terpilih

Change Styles : berisi pilihan pengaturan tema paragraf

Hal 23
 e. Group Editing, terdiri dari :
Find : mencari kata tertentu berdasarkan input
keyword tertentu dalam suatu file
Replace : mencari dan mengganti kata yang ditemukan untuk diganti
dengan kata tertentu dalam suatu file
Select : memilih objek atau teks tertentu di dalam suatu file

2. Tab Insert (Alt + N)

a. Group Pages, terdiri dari :
Cover Page : menyisipkan serta memilih jenis
halaman sampul.
Blank Page : menyisipkan halaman kosong baru dalam suatu
file dokumen.
Break Page : memisah suatu halaman file dokumen.

b. Group Tables, terdiri dari :

Insert Table : menyisipkan tabel melalui dialog Insert Table.
Draw Table : menyisipkan tabel dengan cara menggambar di halaman
dokumen.

Convert Text to Table : menjadikan teks terpilih berada dalam tabel.

Excel Spreadsheet : menyisipkan tabel dalam bentuk lembar kerja Excel.
Quick Tables : menyisipkan tabel instan yang sudah tersedia jenis dan bentuknya
di dalam MS. Word 2010

c. Group Illustrations, terdiri dari :

Picture : menyisipkan gambar yang tersimpan di komputer.

Clip Art : menyisipkan gambar-gambar ilustrasi yang tersedia dilibrary program.
Shapes : menyisipkan objek gambar autoshape.
SmartArt : menyisipkan gambar dalam bentuk organization.
Chart : menyisipkan grafik/diagram.
Screenshot : mengambil dan menyisipkan objek tertentu dari layar komputer.

d. Group Links, terdiri dari :

Hyperlink : menautkan teks/objek terpilih dengan file lain.
Bookmark : membuat penanda buku.
Cross-reference : membuat referensi antar file.

Hal 24
 e. Group Header & Footer, terdiri dari :
Header : mengatur kepala halaman suatu file.
Footer : melakukan setting terhadap kaki halaman suatu file.
Page Number : melakukan setting terhadap homor halaman.

f. Group Text, terdiri dari :

Text Box : menyisipkan kotak yang dapat diisi dengan teks.

Quick Parts : mengatur teks otomatis dll.
WordArt : menyisipkan teks bergaya artistik.
Drop Cap : menyisipkan huruf kapital besar pada awal paragraf.
Signature Line : menyisipkan tanda tangan digital.
Date & Time : menyisipkan tanggal dan waktu terkini.
Object : menyisipkan objek dengan ekstensi OLE (Object Linking Embedded)
g. Group Symbol, terdiri dari :
Equation : menyisipkan simbol-simbol persamaan, terutama dalam
bidang MIPA.
Symbol : menyisipkan karakter khusus.

3. Tab Page Layout (Alt + P)

a. Group Themes, terdiri dari :
Themes : mengatur tema yang meliputi tampilan halaman, warna
halaman, dan warna font.
Colors : mengatur warna tema halaman.
Fonts : mengubah tema huruf yang akan digunakan.
Effects : mengatur efek pada objek shape yang berada pada tema.

b. Group Page Setup, terdiri dari :

Margins : mengatur batas teks pada dokumen.

Orientation : mengatur posisi halaman
(potrait/landscape).
Size : mengatur ukuran kertas yang digunakan.
Columns : mengatur kolom pada dokumen.
Breaks : mengatur kontinuitas halaman maupun kolom.
Line Numbers : memisahkan suku kata dengan tanda hubung secara otomatis.
Hyphenation : mengatur kontinuitas nomor baris teks.

Hal 25
 c. Group Page Background, terdiri dari :

Watermark : memberikan efek air di belakang teks.

Page Color : memberikan warna halaman pada dokumen.
Page Borders : memberikan garis tepi pada halaman.

4. Tab References (Alt + S)

a. Group Footnotes, terdiri dari :
Insert Footnote : menyisipkan catatan kaki (rujukan yang berada
di bagian bawah halaman atau footer).
Endnote : menyisipkan catatan di akhir bab.
Next Footnote : memantau footnote dan endnote.
Show Notes : memperlihatkan lokasi catatan, baik footnote
maupun endnote.

5. Tab Mailings (Alt + M)

a. Group Create, terdiri dari :
Envelopes : membuat dan mencetak amplop
Labels : membuat dan mencetak label

b. Group Start Mail Merge, terdiri dari :

Start Mail Merge : membuat surat yang biasa atau berupa
email untuk banyak orang.
Select Recipients : membuat daftar penerima surat.
Edit Recepient List : mengubah daftar penerima surat.

6. Tab View (Alt + W)

a. Group Document Views, terdiri dari :

Print Layout : mengubah tampilan layar ke bentuk print view

Full Screen Reading : menampilkan dokumen dalam satu layar penuh
Web Layout : mengubah tampilan layar dalam bentuk web view
Outline : mengubah tampilan layar ke bentuk outline view
Draft : menampilkan draft teks untuk mempercepat pengeditan

b. Group Show, terdiri dari :

Ruler : menampilkan dan menyembunyikan mistar/garis
pengatur
Gridlines : menampilkan tanda garis pada lembar kerja
Navigation Pane : untuk mengetahui atau menjelajahi dunia tulisan

Hal 26
c. Group Zoom, terdiri dari :
Zoom : menentukan ukuran tampilan lembar kerja pada
layar
100% : memperbesar hasil lembar kerja ke ukuran normal
One Page : membuka satu halaman
Two Page : membuka dua halaman
Page Width : mengetahui ukuran halaman

Hal 27
 MODUL 2 : MENGOLAH DOKUMEN
Materi :
Membuat, menyimpan, membuka dan mencetak dokumen

2.1. Membuat, menyimpan, dan membuka dokumen

a. Membuat Dokumen
Klik Menu File Pilih New lanjutkan klik Blank Document lalu Create atau (Ctrl + N)

b. Menyimpan Dokumen
Setelah mengetikan dokumen langkah untuk menyimpannya adalah

1. Klik Menu File lalu klik Save/Save As/Ctrl S/klik ikon , tentukan Directory/folder tempat
menyimpan file

2. Pada File Name ketikan “LATIHAN 1” dan pilih Word Document pada Save as Type atau
memilih Word 97-2003 document agar dokumen bisa dibuka di versi yang lebih rendah.
3. Klik tombol Save

c. Membuka Dokumen
1. Klik menu File lalu klik Open ( Ctrl + O) akan muncul kotak dialog Open

2. Cari lokasi dokumen, apabila sudah ketemu klik file dokumen yang akan dibuka, klik Open

Hal 28
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
d. Mencetak dokumen
Print Preview
Setelah data/dokumen sudah selesai diedit, saatnya mencetak pada kertas yang dikehendaki.
Sebelumnya, dokumen tersebut dapat ditampilkan/dicetak terlebih dahulu pada layar
laptop/PC, yang dikenal dengan istilah Print Preview (pra cetak). Dengan menggunakan tampilan
pra cetak ini, kita dapat mengetahui perkiraan hasil cetak yang akan kita dapatkan nantinya,
sehingga terhindar dari kesalahan seting.
Berikut langkah-langkahnya :
1. Klik menu File klik Print

2. Jika benar, maka akan muncul kotak dialog Print Preview berikut

Hal 29
 LATIHAN 1
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Simpan dengan nama file Latihan Awal – Nama – Kelas

SABAR PELITA HATI

Sabar adalah salah satu akhlak yang paling utama dalam diri seorang muslim, karenanya
balasan bagi orang yang sabar sangat tinggi nilainya disisi Allah SWT. Sabar itu sendiri
mengandung arti menahan diri atas segala sesuatu yang tidak disukai karena mengharap
keridloan Allah SWT. Secara bahasa, sabar berarti menahan dan mengekang.

Sabar erat hubungannya dengan keimanan, karena kesabaran merupakan

pelaksanaan keimanan yang paling penting, sebagaimana firman Allah SWT dalam
surat Al-Baqarah : 177 yang berbunyi “Dan orang-orang yang sabar dalam
kesempitan, penderitaan dan dalam peperangan. Mereka itulah orang-orang yang
benar (keimanannya) dan mereka itu orang-orang yang bertaqwa”.

Rasulullah SAW ketika ditanya tentang iman menjawab, “Iman adalah

sabar”. Sabar merupakan ciri khas manusia yang tidak dimiliki binatang sebagai
faktor kekurangannya atau dimiliki malaikat sebagai faktor kesempurnaannya.
Sabar dapat mengantar manusia menuju kehidupan bahagia di akhirat. Sabar
juga menjadi tiket ke surga dan sarana mendapat sambutan para malaikat,
seperti tertulis dalam surat Al-Furqon : 75, yang artinya “Mereka itulah orang-
orang yang dibalasi dengan martabat yang tinggi dalam surga karena
kesabaran mereka dan mereka disambut dengan penghormatan dan ucapan
selamat didalamnya”.

Hal 30
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
MODUL 3 : MENGATUR LEMBAR KERJA
Materi :
Mengatur page layout (size, margin dan orientasi) lembar kerja
Mengatur tabulasi
Bekerja dengan gambar

3.1. Mengatur layout

Pada tab Page Layout, dibagian Group Page Setup, kita bisa mengatur Margins, Paper dan Layout

a. Tab Margins
1. Margins
Top : mengatur jarak/batas antara bagian atas teks pada dokumen
dengan tepi kertas bagian atas
Bottom : mengatur jarak/batas antara bagian bawah teks pada dokumen dengan
tepi kertas bagian bawah
Left : mengatur jarak/batas antara bagian kiri teks pada dokumen dengan tepi
kertas bagian kiri
Right : mengatur jarak/batas antara bagian kanan teks pada dokumen dengan
tepi kertas bagian kanan
Gutter : memberi jarak tertentu pada tepi kiri atau atas kertas dengan tujuan
memberi ruang kosong untuk penjilidan
Gutter Position : menentukan pada posisi mana gutter ini diterapkan (kiri atau atas)

2. Orientation
Portrait : menentukan posisi kertas dengan arah tegak (vertical)
Landscape : menentukan posisi kertas dengan arah melebar (horizontal)

b. Tab Paper
Paper Size
untuk memilih ukuran kertas. anda bisa menentukan ukuran kertas sendiri dengan memilih
“custom size” atau langsung ketik ukuran lebar di width dan panjang di height.

Hal 31
 3.2. Mengatur Tabulasi
Tabulasi adalah bagian dari Ruler yang berada di bawah menu ribbon dan merupakan salah satu
fasilitas untuk mengatur teks dengan menggunakan bantuan tombol Tab pada keyboard agar
Nampak rapi dan lurus. Dengan menekan tombol Tab kursor akan melompat sejauh 1,27 cm atau
0,5 inch.

Untuk mengetahui atau mengganti tanda tabulasi klik pada kotak control tabulasi. Ada beberapa
jenis tabulasi, antara lain :

Tanda Left Tab berfungsi untuk meratakan Sebelah kiri

Tanda Center Tab berfungsi membuat perataan tengah lurus tanda tab

Tanda Right Tab berfungsi untuk meratakan Sebelah kanan

Tanda Desimal Tab berfungsi untuk memformat perataan angka decimal sesuai dengan tanda
koma.

Pengaturan Tab juga bisa dilakukan dengan cara :

1. klik tanda panah pada menu Group Paragraph
2. Setelah muncul kotak dialog Paragraph lanjutkan dengan klik Tabs…

Hal 32
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
 3. Pada kotak dialog Tabs isikan pengaturan Tab sesuai dengan kebutuhan

Tab stop position : untuk mengisikan jarak berhentinya

lompatan Tab
Alignment : untuk memilih perataan / Tab yang akan
digunakan
Leader : untuk memberikan tanda lompatan Tab
Set : mengunci tanda Tab
Clear : menghapus tanda Tab
Clear All : membersihkan seluruh tanda

3.3. Bekerja dengan Gambar

Menyisipkan Gambar
1. Buka sebuah file word
2. Letakkan kursor pada paragraf yang akan disisipkan gambar

3. Klik Tab Insert pilih icon Picture pada group Illustrations

4. Pada kotak dialog Insert Picture cari file gambar yang akan sisipkan lalu klik Insert

Hal 33
 LATIHAN 2
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Paper Size : A4
4. Margin : Top = 2, bottom : 2, Left = 3 , Right = 2
5. Simpan dengan nama file Latihan Cover – Nama – Kelas

JENIS-JENIS NARKOBA DAN EFEK NEGATIFNYA

Makalah Tugas Microsoft Word

Prodistik SMAISI

Disusun oleh:

AHMAD MUHAMMAD
NO. INDUK : 2018
KELAS : X-MIA-1

]
PROGRAM TERAPAN TEKNOLOGI INFORMASI DAN KOMUNIKASI
SMA ISLAM ALMAARIF SINGOSARI
September 2018

Hal 34
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
MODUL 4 : FORMAT DOKUMEN
Materi :
Menggunakan bullet numbering
Menggunakan header dan footer
Menampilkan nomor halaman dan catatan kaki

4.1. Menggunakan Bullet dan Number

1. Seleksi Teks yang akan diberikan tanda Bullet
2. Klik Icon Bullets pada tab menu Home Group Paragraf, pilih Bullets yang sesuai dengan
keinginan

3. Perhatikan hasilnya, coba rubah dengan model bullets yang lain

4. Dengan cara yang sama, bisa digunakan untuk mengatur number

4.2. Bekerja dengan Header & Foother

1. Siapkan file yang akan diberi Header & Footer
2. Klik tab menu Insert, pada group tab Header & Footer klik Header pilih Blank

3. Ketikan pada kotak Header teks “ Microsoft Word 2010” buat perataan kanan.

Hal 35
 4. Klik tanda

5. Hasilnya

6. Klik icon Go to Footer

7. Ketikan pada kotak Footer teks “PRODISTIK - ITS” buat perataan KANAN

8. Hasilnya :

9. Untuk menghapus Header &Footer, double klik Header atau Footer lalu klik
menu Design lanjutkan dengan klik Header pilih Remove

Hal 36
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
4.3. Menampilkan Nomor Halaman dan Catatan Kaki
a. Menampilkan Nomor Halaman
Langkah menampilkan nomor halaman (page number) dalam sebuah dokumen bisa dilakukan
dengan cara sebagai berikut :
1. Klik tab menu Insert – Page Number, maka akan muncul menu seperti berikut

2. Tentukan pilihan peletakan nomor halaman di dokumen

b. Membuat catatan kaki (footnote)

Secara bahasa berarti catatan kaki maksudnya adalah catatan dibawah halaman. Ketika
membuat makalah penulisan footnote ini sering di anggap penting, hal ini diperlukan untuk
mengetahui sumber makalah tersebut supaya makalah tersebut dapat dinyatakan sebagai
makalah/karya tulis ilmiah yang valid. Namun, terkadang sebagian dari pembuat makalah
mengalami kesulitan untuk membuat footnote di karya tulis ilmiah.
Contohnya :

Berikut langkah-langkahnya :
1. Letakkan kursor pada tempat akan disisipi Footnote
2. Klik References - Insert Footnote,

maka akan muncul angka di bagian bawah lembar kerja aktif

Hal 37
 3. Ketikkan teks footnote disamping angka yang muncul tersebut, misal : Wikipedia.or.id, diakses
Minggu, tanggal 02 Oktober 2016, pukul 22.38 WIB
4. Adapun footnote selanjutnya, akan berurutan secara otomatis/menyesuaikan dari
angka/nomor footnote sebelumnya. Adapun cara membuatnya sama dengan yang pertama.
5. Untuk menghapus footnote, cukup anda menuju ke nomor footnote. Setelah itu, hapus
dengan backspace/delete.

Hal 38
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
LATIHAN 3
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Paper Size : Folio/F4
4. Margin : Top = 1, bottom : 1, Left = 2 , Right = 1
5. Atur tabulasi dan bordernya
6. Simpan dengan nama file Latihan Daftar Isi – Nama – Kelas

DAFTAR ISI

LEMBAR PERSETUJUAN SKRIPSI ........................................................................................ i

KATA PENGANTAR ...................................................................................................................... ii
ABSTRAKSI....................................................................................................................................... iv
DAFTAR ISI ....................................................................................................................................... v
DAFTAR TABEL ............................................................................................................................. viii
DAFTAR GAMBAR ........................................................................................................................ ix

BAB I. PENDAHULUAN............................................................................................................ 1
Latar belakang ................................................................................................................ 1
Rumusan Masalah ......................................................................................................... 3
Batasan Masalah ............................................................................................................ 4
Tujuan................................................................................................................................. 4
Metodologi ....................................................................................................................... 5
Sistematika Pembahasan .......................................................................................... 6

BAB II. TEORI UMUM .............................................................................................................. 7

Relay Arus Lebih ........................................................................................................ 7
Macam-macam Relay Arus Lebih ....................................................................... 10
Circuit Breaker ............................................................................................................ 17
Proses Pemadaman Busur Api ............................................................................ 19
Rangkaian Trip ............................................................................................................ 22

BAB III. JENIS GANGGUAN, SETTING CB DAN RELAY............................................ 35

Tinjauan Umum .......................................................................................................... 35
Gangguan Hubung Singkat .................................................................................... 38
Setting Relay Arus Lebih ........................................................................................ 51
Data Teknis ................................................................................................................... 55

BAB IV. ANALISA DATA .......................................................................................................... 65

Analisa Perhitungan Impedansi .......................................................................... 65
Analisa Gangguan Hubung Singkat.................................................................... 78
Perhitungan Gangguan di GI ................................................................................. 81
Perhitungan Gangguan di Penyulang ............................................................... 85
Perhitungan Setting Relay Arus Lebih ............................................................. 92

Hal 39
 LATIHAN 4
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Paper Size : Folio/F4
4. Margin : Top = 3, bottom : 4, Left = 3 , Right = 3 – Spasi baris 1,5
5. Atur font, tabulasi, indetasi dan numbernya
6. Simpan dengan nama file Latihan Pendahuluan – Nama – Kelas

BAB I
PENDAHULUAN

1.1 Latar Belakang

Narkotika dan obat-obatan terlarang merupakan zat aditif yang jika dikonsumsi tanpa aturan dan
dosis yang sesuai dapat membahayakan kesehatan. Narkoba sendiri terdiri dari narkotika,
psikotropika, dan zat aditif lainnya. Menurut Badan Narkotika Nasional (BNN), narkotika adalah zat
atau obat yang berasal dari tanaman atau bukan tanaman baik sintetis maupun semi sintetis yang
dapat menyebabkan penurunan atau perubahan kesadaran, hilangnya rasa, mengurangi sampai
menghilangkan rasa nyeri, dan dapat menimbulkan ketergantungan, yang dibedakan ke dalam
golongan-golongan sebagaimana terlampir dalam undang-undang ini atau yang kemudian ditetapkan
dengan Keputusan Menteri Kesehatan. Sedangkan psikotropika adalah zat atau obat bukan narkotika
baik alamiah maupun sintesis yang memiliki khasit psikoaktif melalui pengaruh siliktif pada susunan
saraf pusat yang menyebabkan perubahan khas pada aktivitas normal dan prilaku. Psikotropika adalah
obat yang digunakan oleh dokter untuk mengobati gangguan jiwa. Yang terakhir adalah zat aditif,
yaitu zat selain narkotika dan psikotropika yang dapat menyebabkan ketergantungan.
Maraknya peredaran narkoba sangat meresahkan masyarakat. Tidak hanya kaum remaja dan anak
muda yang terjerumus dalam penggunaan narkoba ini, namun juga orangtua yang notabene
seharusnya lebih mengerti akan bahaya narkoba.

1.2 Rumusan Masalah

1. Apa saja jenis narkoba dan bagaimana efek yang ditimbulkan setelah mengkonsumsi?
2. Mengapa orang-orang dapat terjerumus dalam narkoba?
3. Bagaimana upaya untuk menangani penyalahgunaan narkoba dan bagaimana upaya
pencegahannya?

1.1 Tujuan
1. Menjelaskan jenis-jenis narkoba dan efek yang ditimbulkannya.
2. Menjelaskan alasan beberapa orang mengkonsumsi narkoba.
3. Menjelaskan upaya yang dapat ditempuh untuk menanggulangi resiko penyalahgunaan narkoba
dan upaya pencegahannya.

Hal 40
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
LATIHAN 5
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Paper Size : Folio/F4
4. Margin : Top = 3, bottom : 3, Left = 4 , Right = 3 – Spasi baris 1,5
5. Atur font, tabulasi, indetasi dan numbernya
6. Simpan dengan nama file Latihan Pembahasan – Nama – Kelas

BAB II
PEMBAHASAN

2.1 Pengertian dan Jenis Narkoba

Narkotika dan obat-obatan terlarang adalah sekumpulan zat yang dapat menimbulkan kecanduan
dan membahayakan bagi kesehatan tubuh. Narkoba sendiri dibagi menjadi tiga jenis, yaitu narkotika,
psikotropika, dan zat aditif lainnya.
a. Narkotika
Dalam Undang-undang Nomor 35 Tahun 2009 tentang Narkotika ditegaskan bahwa
narkotika adalah zat atau obat yang berasal dari tanaman atau bukan tanaman, baik sintetis
maupun semisintetis, yang dapat menyebabkan penurunan atau perubahan kesadaran, hilangnya
rasa, mengurangi sampai menghilangkan rasa nyeri, dan dapat menimbulkan ketergantungan.
Bambang Riyadi dan Mukhsin (1999:34) mengemukakan “bahwa yang dimaksud dengan
narkotika adalah candu, ganja, kokain, zat-zat yang bahan mentahnya diambil dari benda-benda
tersebut yakni morphine, heroin, codein, hesisch, cocain. Dan termasuk juga narkotika sintesis
yang menghasilkan zat-zat, obat-obat yang tergolong dalam Hallucinogen dan Stimulant.”
Berikut jenis-jenis dari narkotika dan efek yang ditimbulkan:
 Ganja
Ganja atau cannabis sativa merupakan salah satu jenis narkotika yang pada awalnya
berguna untuk mengobati keracunan ringan. Bagian dari ganja yang dikonsumsi antara
lain daun, batang, dan biji. Cara pengkonsumsiannya adalah dengan mengisapnya seperti
rokok atau mencampurkannya dengan makanan agar makanan tersebut lebih nikmat.
Efek yang ditimbulkan dari ganja antara lain:
 Rasa gembira yang berlebihan.
 Rasa percaya diri yang berlebihan sehingga tidak peduli dengan lingkungan
sekitarnya.
 Menimbulkan halusinasi, dsb.

Hal 41
 LATIHAN 5
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Gunakan menu-menu yang ada di Microsoft Word
3. Paper Size : Folio/F4
4. Margin : Top = 3, bottom : 3, Left = 4 , Right = 3 – Spasi baris 1,5
5. Atur font, tabulasi, indetasi dan numbernya
6. Simpan dengan nama file Latihan Pembahasan – Nama – Kelas

DAFTAR PUSTAKA

http://www.bnn.go.id
http://www.negarahukum.com/hukum/pengertian-narkotika.html
http://www.anneahira.com/narkotika.htm
http://edukasi.net/index.php?mod=script&cmd=Bahan%20Belajar/Materi%20Pokok/view&id=350&uniq
=3455mediabelajaronline.blogspot.com

Hal 42
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
MODUL 5 : BEKERJA DENGAN GRAFIS
Materi :
Membuat textbox, word art dan clip art
Menyisipkan gambar, shape dan simbol
Membuat bingkai teks
Bekerja dengan drop caps
Bekerja dengan equation

5.1. Bekerja dengan Textbox, Word Art & Clip Art

a. Menyisipkan Text Box
1. Siapkan naskah yang akan disisipi text boX

2. Klik tab menu Insert, klik icon text box

3. Pada kotak dialog Text box klik Drawing Text Box

4. Ketikkan teks di dalam box

b. Menyisipkan Word Art

1. Siapkan file yang akan disisipi Word art
2. Klik tab menu Insert, lalu pilih icon word Art pada group Text, lanjutkan dengan memilih
model word art

Hal 43
 c. Menyisipkan Clip Art
1. Siapkan file yang akan disisipi Clip art
2. Klik tab menu Insert, lalu pilih icon Clip Art pada group Illustrations
3. Pada kotak dialog Clip Art klik Go, pilih gambar, lalu klik gambar akan masuk ke dokumen

4. Atur posisi ClipArt dengan double klik objek gambar, klik tab menu format, lalu klik Wrap Text
pilih in front of text agar gambar mudah dipindah.

5.2. Bekerja Shape dan Simbol

a. Menyisipkan Shapes
1. Klik tab Insert pada group Illustration, Klik icon Shape
2. Dalam menu Shape terdapat
berbagai macam bentuk Shape, klik
shape yang akan ditampilkan.
3. Klik kiri dan drag mouse untuk
menghasilkan bentuk dan ukuran shape
yang sesuai dengan keinginan.
4. Double klik Shape yang sudah dibuat
untuk di format yang bertujuan
memberikan efek pada objek shape.

Hal 44
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
 5. Muncul tab Format Drawing Tools

 Shape style digunakan untuk menerapkan style dari bentuk shape itu sendiri,
dan fungsi lain seperti :
1) Shape Fill digunakan memberikan warna objek gambar, transparan, tekstur dan
Patern pada Shape.
2) Shape Outline digunakan untuk mengatur ukuran, warna dan variasi garis shape
atau menghilangkan garis shape.
3) Shape Effect digunakan untuk memberikan effect khusus pada shape.
 WordArt Styles untuk membuat Teks ukuran besar dengan variasi efek sehingga
teks akan lebih bagus.

c. Menyisipkan Simbol
1. Ketik alamat teks berikut :
INSTITUT TEKNOLOGI SEPULUH NOPEMBER
PROGRAM KERJASAMA ITS DENGAN MA/SMA BIDANG TIK (PRODISTIK)
Sekretariat : Gedung KPA Lt. 2 – ITS, Kampus ITS Sukolilo - Surabaya 60111
0821 1515 4449 / Prodistik@gmail.com
2. Letakkan kursor di sebelah nomor telepon, pada tab menu Insert, klik Symbol
lalu pilih More Symbol

3. Pada kotak dialog Symbol, jenis font : Wingdings, pilih symbol Telepon

5. Perhatikan hasilnya, ulangi langkah yang sama untuk membuat symbol surat di sebelah kiri
alamat E-mail.

Hal 45
 5.3. Membuat Bingkai Dokumen
1. Untuk membuat bingkai halaman, letakkan kursor pada halaman yang akan di bingkai.
2. Pilih tab menu Page Layout, klik Page Borders
3. Pada kotak dialog Border and Shading klik tab Page border, setting : Box, pilih model bingkai
pada tab Art, tab Width isikan nilai angka sesuai dengan kebutuhan, lalu klik OK

4. Perhatikan hasilnya, coba rubah dengan model bingkai yang lain

5.4. Menggunakan Drop Cap

Adalah menampilkan huruf atau kata pada awal paragraf dalam ukuran yang lebih besar agar
kelihatan mencolok. Adapun langkahnya adalah sebagai berikut :
1. Letakkan kursor pada awal paragraph baris pertama.
2. Klik tab menu Insert pada group Text, klik icon Drop cap pilih Dropped
3. Pilihan Dropped huruf yang dibesarkan berada dalam paragraf, sedangkan In margin hurufnya
diluar paragraf, dan untuk mengatur ukuran besar kecilnya huruf gunakan Drop Cap options…

Dropped

In Margin

Hal 46
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
5.5. Menggunakan Equation dan Watermark
a. Menggunakan Equation
Equation adalah salah satu menu tambahan di Microsoft Word yang sering dibutuhkan ketika
kita melakukan pengetikan naskah berupa rumus-rumus yang sering kali membutuhkan model
penulisan atau karakter yang tidak tersedia di papan ketik standar
Cara membuat equation adalah sebagai berikut :
1. Klik tab menu Insert – Equation

2. Pilih bentuk yang dibutuhkan, jika tidak ada, bisa membuat sendiri dengan memilih Insert
New Equation

3. Setelah masuk ke ketikan equation, silahkan mulai membuat equation dengan bantuan menu
yang sudah disediakan

Hal 47
 b. Menggunakan Watermark
Langkah-langkah untuk mengaktifkan watermark adalah sebagai berikut :
1. Klik tab menu Page Layout – Watermark
2. Pilih bentuk yang diinginkan, jika ingin membuat sendiri, maka pilih Custon Watermark...

3. Untuk watermark berupa teks, silahkan diatur pada menu text watermark

4. Untuk watermark berupa gambar, silahkan diatur pada menu picture watermark

Hal 48
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)
LATIHAN 6
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Paper Size : Folio/F4
3. Margin : Top = 1, bottom : 1, Left = 2 , Right = 1
4. Simpan dengan nama file Latihan Akhir 1 – Nama – Kelas

Percaya atau Tidak

(Ripley’s : Believe it or not)

TUMBUHAN TANDUK

P
enghijauan yang dianjurkan pemerintah memang banyak manfaatnya, antara lain
bisa mengurangi dampak polusi udara. Tapi bagi Carl dan Elaine Norton,
penghijauan dengan tanaman sudah biasa. Maka mereka menggunakan tumbuhan
lain, yaitu menanam tanduk rusa lebih dari 12000 tanduk. Kalian boleh deh melihat-lihatnya di
halaman rumah mereka di Wellington, Utah, USA.

CERITA PERTAMA

Seorang Presiden dan Menpen (Menteri Penerangan) di era Pemerintahan Orde Baru mempunyai
pengalaman menarik ketika menunaikan ibadah haji di Mekkah. Pengalaman ini khususnya terjadi pada
saat dia (menpen) melakukan ibadah melempar jumrah. Kejadiannya
adalah sebagai berikut setiap kali dia (menpen) melempar jumrah ke arah
tugu yang diibaratkan sebagai rumah setan tersebut, maka batu yang dia
lempar selalu berbalik (memantul) menimpa dahinya. Sudah tujuh kali
batu yang dia lontarkan berbalik menimpa dahinya dengan cara yang
sama. Sudah tentu dia bingung dan mulai ketakutan. Dia menoleh ke
kanan dan ke kiri. Mau minta petunjuk presiden tentu tidak mungkin,
karena sama-sama sedang sibuk. Di tengah kebingungannya itulah, tiba-tiba dia mendengar suara halus
di telinganya, “Hai, sesama setan dilarang saling melempar! entar kualat, baru tau rasa kamu.”

CONTOH EQUATION

2
k
 k

u 2
i fi  u i fi 
s i i 1
  i 1   1
n  n  12
 
 

Hal 49
 LATIHAN 7
Ketiklah naskah berikut dengan ketentuan :
1. Bacalah Basmalah lebih dahulu, fokus dan yakin pasti bisa!
2. Paper Size : A4, Orientasi : Landscape
3. Beri Header “SMAI Almaarif Singosari - MAJU”
4. Beri Footer “Nama dan Kelas masing-masing”
5. Atur Header dan Footer sesuai selera
6. Silahkan atur warna dan efek shape sesuai selera
7. Simpan dengan nama file Latihan Akhir 2 – Nama – Kelas

Kepala Sekolah

Komite Tata Usaha

Sekolah

Waka. Urusan Waka. Urusan Waka. Urusan Waka. Urusan

Kurikulum Kesiswaan Sarana Humas

BK

Guru
Bidang
Studi
Siswa

Hal 50
PROGRAM KERJASAMA ITS & SMA ISLAM ALMAARIF SINGOSARI
PROGRAM PENDIDIKAN TERAPAN
BIDANG TEKNOLOGI INFORMASI & KOMUNIKASI (PRODISTIK)