Berbagi Informasi: Agustus 2014

Sabtu, 30 Agustus 2014

[Inspirasi] Tak Mau Sekolah Karena Tak Punya Mobil

==== Sangat Menggugah =====
[Inspirasi] Tak Mau Sekolah Karena Tak Punya Mobil
Seorang anak yang duduk di kelas 5 SD tiba-tiba ngambek, tak mau lagi berangkat ke sekolah. Dia merasa malu karena semua temannya diantar pakai mobil. Sementara dirinya hanya diantar dengan sepeda butut oleh ibunya yang miskin.
"Pokoknya aku tak mau sekolah lagi. Malu. Diejek sama teman-teman!" ujarnya ketika ibunya mendesaknya agar tetap bersekolah.
Si ibu tersenyum bijak dan membelai rambut si anak. Dia berkata, "Nak, kamu tahu kenapa Ibu penuh semangat menyekolahkan kamu? Kenapa ibu sangat bersemangat mengantar kamu sekolah, walau hanya dengan sepeda butut itu?"
Si anak menggeleng. "Enggak tahu!"
"Ketahuilah, Nak. Jika kamu tak mau bersekolah lagi, maka nanti ketika kamu sudah jadi ibu, anak kamu akan bernasib sama sepertimu. Kamu hanya bisa mengantar dia ke sekolah naik sepeda butut. Tapi jika kamu terus bersekolah, maka nanti jika kamu sudah jadi ibu, insya Allah kamu bisa mengantar anak kamu ke sekolah dengan mobil paling mewah.
Sekarang kamu pilih yang mana? Mau ngantar anak kamu ke sekolah pakai sepeda butut, atau mobil mewah?"
Si anak tertegun oleh ucapan ibunya. Dia jadi sadar bahwa selama ini dia tidak bersyukur. Seketika, semangat untuk bersekolah pun muncul lagi. Dia bertekad untuk berjuang keras, agar kelak hidupnya bisa sukses.
NB: Cerita di atas adalah sebuah kisah nyata yang pernah dimuat di majalah Reader Digest. Si anak kini sudah menjadi seorang tokoh yang sangat sukses.
‪#‎Reposting_Status_29_November_2013‬

Kamis, 28 Agustus 2014

Bagian-bagian dari Motherboard

Bagian-bagian dari Motherboard:

Chipset
Bagian pertama dan terpenting dari sebuah motherboard adalah chipset, yang berfungsi sebagai penghubung antarmuka antara processor dengan macam-macam komponen eksternal dan buses. Jenis chipset inilah yang dapat menentukan dan menilai fitur dan kemampuan sebuah motherboard.
Ada dua kelompok chipset yang umum kita temui di pasaran. Kelompok chipset intel, yang hanya bisa digunakan untuk CPU Intel, dan chipset AMD untuk processor keluaran AMD. Kedua kelompok ini pun terbagi lagi kepada berbagai macam jenis generasi chipset yang terus berkembang.
Socket/ CPU Slots
Socket adalah tempat “bersemayamnya” processor pada motherboard. Sama seperti chipset, socket ini pun terbagi kepada berbagai macam jenis, tergantung dari jenis processor yang didukungnya.
Basic Input Output System (BIOS) Chip
BIOS adalah adalah sebuah chip yang menyimpan perangkat lunak untuk mengontrol hardware dan berfungsi sebagai interface antara hardware dan operating system (OS). BIOS digunakan oleh komputer untuk mempersiapkan prosess booting (startup) dan mengecek kesiapan sistem dan hardware sebelum komputer dijalankan.
Complimentary Metal Oxide Semicondutor (CMOS) Battery
CMOS adalah sebuah baterai yang mensupply power pada sebuah memory kecil pada motherboard yang berfungsi untuk menyimpan settingan konfigurasi komputer, waktu, dll. CMOS menjaga agar kita tidak perlu mengkonfigurasi hal-hal tersebut setiap kali kita menyalakan komputer
Memory Slots
Slot yang berbentuk agak panjang dan ramping ini berfungsi sebagai tempat di-installnya Random Access Memory (RAM). Di era komputer modern, hampir semua mobo mempunyai setidaknya dua slot RAM, bahkan pada spesifikasi komputer high-end ada motherboard yang dilengkapi sampai 6 slot RAM.
VGA Slots (Graphic Card Slot)
Slot ini berfungsi untuk menginstall komponen graphic card(video card) . Pada komputer modern, umumnya berupa slot dengan interface PCI-Express. Pada motherboard high-end bisa menampung sampai 3 slot graphic card.
Expansion Slots
Expansion slot berfungsi untuk memasang perangkat tambahan seperti Sound Card, LAN Card,dll.
Storage Drive Connector
Fungsinya untuk menghubungkan perangkat penyimpanan data seperti Harddisk Drive, Optical Drive, SSD, dan perangkat storage external. Biasanya berupa interface S-ATA (Serial Advanced Technology Attachment) /ATA.
Port-port lain
Selain slot-slot diatas, ada beberapa port pada motherboard yang fungsinya sangat esensial seperti:

Port power 24 Pin/20 Pin – untuk menghubungkan mobo dengan power supply unit (PSU).
Port Power 4pin/6pin – untuk menyalurkan daya ke processor.
Port untuk tombol power/reset pada bagian depan casing.
Port untuk konektor Front USB dan Front Audio.

Disamping sejumlah slot dan port diatas, ada pula bagian dari motherboard yang menghadap ke luar casing dan dapat diakses dari luar. Bagian ini disebut Back Panel I/O, biasanya terletak pada posisi samping sebuah mobo, dan menghadap ke belakang dari casing anda.

Langkah-Langkah Merakit Komputer

Langkah-Langkah Merakit Komputer

1. Memasang Processor ke Motherboard

Alangkah baiknya sebelum motherboard dipasang ke casing, terlebih dahulu memasang processor karena akan lebih mudah cara memasangnya. Cara memasang processor ke motherboard yaitu :

Kita tentukan dulu posisi pin 1 pada prosessor dan socket prosessor di motherboard, umumnya terletak di pojok yang ditandai dengan tanda titik atau lekukan.
Angkat tuas pengunci socket ke atas supaya terbuka
Sesuaikan posisi kaki processor dengan lubang socket, kalau sudah lalu tekan processor ke dalam socket sampai rapat.
Kunci kembali dengan tuas pengunci.

2. Memasang Motherboard

Untuk memasang Motherboard pada casing yaitu letakkan motherboard pada tray casing dan sesuaikan lubang antara casing dan lubang motherboard, lalu kunci dengan sekrup.

3. Memasang Heatsink

Setelah processor terpasang, lalu pasang heatsink supaya processor tidak panas. Heatsink ini diletakkan diatas processor dan diberi penahan supaya tidak lepas. Sebelumnya lapisi heatsink dengan Gel penghantar panas. Apabila heatsink anda ada kipasnya/fan maka konektor power pada kipas/fan hubungkan ke motherboard.

4. Memasang RAM / Memori
Cara memasang Ram / modul memori yaitu : Buka dulu tuas penguncinya, lalu sesuaikan posisi lekukan pada modul memori dengan lekukan pada slot. Kalau sudah pas lalu tekan dan pasang kembali tuas pengunci RAM / memori.

5. Memasang Power Supply
Biasanya kalau kita membeli casing pasti power supply sudah terpasang. Nah apabila power supply belum terpasang caranya memaangnya yaitu :

Letakkan power supply pada tempatnya yang ada dibelakang casing, lalu kunci dengan sekrup.
Pasang konektor power dari power supply ke motherboard berikut kabel-kabelnya.

6. Memasang Kabel Motherboard dan Casing

Pasang kabel konektor IDE primary dan secondary pada motherboard.
Untuk motherboard non ATX, pasang kabel port serial dan pararel pada konektor di motherboard.
Pada bagian belakang casing terdapat lubang untuk memasang port tambahan jenis non slot. Buka sekerup pengunci pelat tertutup lubang port lalumasukkan port konektor yang ingin dipasang dan pasang sekerup kembali.
Hubungkan kabel konektor mouse dan keyboard pada motherboard.
Hubungan kabel konektor yang lainnya seperti LED, speaker internal dan port yang tersedia di casing komputer.

7. Memasang Drive
Untuk memasang drive seperti harddisk, CD-ROM/DVD-ROM caranya yaitu :

Masukkan drive dari depan casing. Atur dulu settingan jumper (sebagai master atau slave) pada drive, lalu pasang sekrup supaya drive tidak lepas.
Hubungkan konektor kabel IDE ke drive dan konektor di motherboard (konektor primer yang dipakai lebih dulu)
Apabila kabel IDE terhubung pada 2 (dua) drive, setting jumpernya yaitu drive pertama disetting sebagai master dan satunya lagi sebagai slave.
Dan konektor IDE sekunder pada motherboard dapat dipakai untuk menghubungkan dua drive tambahan.
Sambungkan kabel power dari catu daya pada masing-masing drive.

8. Memasang Card Adapter

Untuk Card Adapter yang bisanya dipasang adalah sound, video card, modem dan SCSI adapter. Cara pemasangannya yaitu : masukkan Card Adapter pada slot yang tersedia di motherboard, lalu tekan sampai konektor benar-benar masuk, kemudian beri sekrup sebagai penahan card.

9. Tahap terakhir perakitan komputer

Kalau semua langkah-langkah perakitan komputer sudah selesai, kini tutup dengan casing dan beri sekrup. Hubungkan kabel dari catu daya ke soket dinding dan juga hubungkan konektor monitor ke port video card, konektor kabel keyboard dan konektor mouse ke port mouse.

10. Pemeriksaan Hasil Perakitan Komputer

Setelah komputer selesai dirakit, kita lakukan pemeriksaan dan pengetesan hasilnya dengan program BIOS, caranya yaitu :

Nyalakan komputer dan monitor, lihat layar monitor dan juga dengarkan suara dari speaker.
Nah program Fost dari Bios ini akan otomatis mendeteksi hardware apa saja yang sudah dipasang pada komputer.
Lakukan setting untuk nilai dari kapasitas hardisk dan boot sequence.
Kalau sudah lalu simpan hasil settingan dan exit dari setup BIOS, maka komputer meload system operasi dengan urutan pencarian yang disesuaikan dengan settingan boot sequence pada Bios.
Masukkan CD Bootable yang berisi sistem operasi pada drive pencarian.

11. Solusi bila terjadi masalah pada hasil perakitan komputer

Hidupkan komputer, apabila komputer dan monitor tidak hidup, periksa kabel daya pada colokan listrik sudah terhubung apa belum.
Apabila waktu dinyalakan, tampilan layar monitor ngeblank / berwarna hitam, pasti ada kesalahan dan apabila pada CPU terdengar bunyi beep, maka betulkan penempatan RAM / memori pada soket.
Apabila card adapter tidak terdeteksi, periksa penempatan card adapter sudah pas apa belum ke slotnya.
Apabila LED dari harddisk atau CD menyala terus, periksa konektornya sudah terhubung apa belum.

Komponen Dasar Komputer dan Fungsinya

Secara fisik, Komputer terdiri dari beberapa komponen yang merupakan suatu sistem. Apabila salah satu komponen tidak berfungsi, akan mengakibatkan tidak berfungsinya suatu komputer dengan baik. Komponen komputer ini termasuk dalam kategori elemen perangkat keras (hardware).
Berdasarkan fungsinya, perangkat keras komputer dibagi menjadi:

Peralatan Masukan (Input Device)
Peralatan masukan berfungsi sebagai media untuk memasukkan data dari luar system ke dalam suatu memori dan prosesor untuk diolah guna menghasilkan informasi yang diperlukan. Keyboard

Keyboard merupakan peralatan input yang paling penting dalam suatu pengolahan data dengan komputer. Keyboard dapat berfungsi memasukkan huruf, angka, karakter khusus serta sebagai media bagi user (pengguna) untuk melakukan perintah-perintah lainnya yang diperlukan, seperti menyimpan file dan membuka file.
Mouse

Mouse adalah salah satu input device yang berfungsi untuk perpindahan pointer atau kursor secara cepat. Selain itu, dapat sebagai perintah praktis dan cepat dibanding dengan keyboard.
Touchpad

Touchpad digunakan sebagai pengganti mouse pada laptop/notebook.
Microphone

Microphone berfungsi untuk merekam atau memasukkan suara yang akan disimpan dalam memori komputer dan untuk berbicara saat sedang chatting.
Webcam

Berfungsi untuk mengambil gambar/video untuk ditransfer ke internet.
Scanner

Scanner digunakan untuk menyalin/mengambil gambar file dari luar komputer yang hasilnya akan ditampilkan di komputer.

Peralatan Pemrosesan (Process Device)

Motherboard

Processor

RAM

Video Card

Sound Card

Peralatan Keluaran (Output Device)
Peralatan keluaran yaitu peralatan yang berfungsi untuk menampilkan data, instruksi dan informasi dalam bentuk teks dan grafik atau gambar. Monitor

Monitor berfungsi untuk menampilkan data, instruksi dan informasi dalam bentuk teks dan grafik atau gambar di layar monitor.
Speaker

Speaker memiliki fungsi untuk menghasilkan atau mengeluarkan efek suara dari komputer.
Printer

Printer yaitu peralatan keluaran yang digunakan untuk mencetak data/informasi dari komputer dengan kertas.

Sejarah Sistem Operasi

SEJARAH SISTEM OPERASI
Sistem operasi merupakan sebuah penghubung antara pengguna dari komputer dengan perangkat keras komputer. Pengertian sistem operasi secara umum ialah pengelola seluruh sumber-daya yang terdapat pada sistem komputer dan menyediakan sekumpulan layanan (system calls) ke pemakai sehingga memudahkan dan menyamankan penggunaan serta pemanfaatan sumber-daya sistem komputer.
Dalam sejarahnya, sistem operasi mengalami perkembangan yang sangat pesat. Perkembangan tersebut dapat dibagi kedalam lima generasi:
1. Generasi Pertama (1945-1955)
Generasi pertama merupakan awal perkembangan sistem komputasi elektronik sebagai pengganti sistem komputasi mekanik, hal itu disebabkan kecepatan manusia untuk menghitung terbatas dan manusia sangat mudah untuk membuat kecerobohan, kekeliruan bahkan kesalahan. Pada generasi ini belum ada sistem operasi, maka sistem komputer diberi instruksi yang harus dikerjakan secara langsung.
2. Generasi Kedua (1955-1965)
Generasi kedua memperkenalkan Batch Processing System, yaitu Job yang dikerjakan dalam satu rangkaian, lalu dieksekusi secara berurutan.Pada generasi ini sistem komputer belum dilengkapi sistem operasi, tetapi beberapa fungsi sistem operasi telah ada, contohnya fungsi sistem operasi ialah FMS (Fortran Monitoring System) dan IBSYS. Jadi generasi komputer kedua ini merupakan generasi pertama dari sistem Operasi.
3. Generasi Ketiga (1965-1980)
Pada generasi ini perkembangan sistem operasi dikembangkan untuk melayani banyak pemakai
sekaligus, dimana para pemakai interaktif berkomunikasi lewat terminal secara on-line ke komputer, maka sistem operasi menjadi multi-user (di gunakan banyak pengguna sekaligus) dan multi-programming (melayani banyak program sekaligus).
4. Generasi Keempat (Pasca 1980an)
Dewasa ini, sistem operasi dipergunakan untuk jaringan komputer dimana pemakai menyadari
keberadaan komputer-komputer yang saling terhubung satu sama lainnya. Pada masa ini para
pengguna juga telah dinyamankan dengan Graphical User Interface yaitu antar-muka komputer yang berbasis grafis yang sangat nyaman, pada masa ini juga dimulai era komputasi tersebar dimana komputasi-komputasi tidak lagi berpusat di satu titik, tetapi dipecah dibanyak komputer sehingga tercapai kinerja yang lebih baik.
5. Generasi Kelima (Pasca 2001 sampai Sekarang )
Mendefinisikan komputer generasi kelima menjadi cukup sulit karena tahap ini masih dalam perjalanan. Contoh imajinatif komputer generasi kelima adalah komputer fiksi HAL9000 dari novel karya Arthur C. Clarke berjudul 2001:Space Odyssey. HAL menampilkan seluruh fungsi yang diinginkan dari sebuah komputer generasi kelima. Dengan kecerdasan buatan (artificial intelligence), HAL dapat cukup memiliki nalar untuk melakukan percapakan dengan manusia, menggunakan masukan visual, dan belajar dari pengalamannya sendiri. Walaupun mungkin realisasi HAL9000 masih jauh dari kenyataan, banyak fungsi-fungsi yang dimilikinya sudah terwujud. Beberapa komputer dapat menerima instruksi secara lisan dan mampu meniru nalar manusia. Kemampuan untuk menterjemahkan bahasa asing sekarang menjadi mungkin. Fasilitas ini tampak sederhana. Namun fasilitas tersebut menjadi jauh lebih rumit dari yang diduga ketika programmer menyadari bahwa pengertia manusia sangat bergantung pada konteks dan pengertian ketimbang sekedar menterjemahkan katakata secara langsung.

cara membuat desain web

Sunday, February 17, 2013

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

· Daftar Tag Pada HTML

ELEMEN DASAR
Jenis Dokumen	<HTML></HTML>	(terdapat pada awal dan akhir dari file HTML)
Judul	<TITLE></TITLE>	(harus selalu terdapat pada mukadimah)
Mukadimah (Header)	<HEAD></HEAD>	(keterangan umum, seperti judul dsb.)
Batang Tubuh	<BODY></BODY>	(isi dari halaman HTML)

FORMAT TAMPILAN
Huruf Tebal	<B></B>	(Bold)
Huruf Miring	<I></I>	(Italic)
Garis Bawah	<U></U>	(Underline - jarang digunakan)
Rata Tengah	<CENTER></CENTER>	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	<BLINK></BLINK>	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	<FONT SIZE=?></FONT>	(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf	<FONT COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf	<FONT FACE="***"></FONT>

PEMISAH
Paragraf	<P></P>	(tag penutup seringkali tak diperlukan)
Align Text	<P ALIGN=LEFT\|CENTER\|RIGHT></P>
Pndah Baris	<BR>	(pindah ke baris berikut)
Garis Datar	<HR>	(Horizontal Rule)
Penataan Letak Garis	<HR ALIGN=LEFT\|RIGHT\|CENTER>
Tebal Garis	<HR SIZE=?>	(dalam satuan pixel)
Lebar Garis	<HR WIDTH=?>	(dalam satuan pixel)
Lebar Garis Persentasi	<HR WIDTH="%">	(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar	<BODY BACKGROUND="URL">	(Tiled Background)
Warna Latar Belakang	<BODY BGCOLOR="#$$$$$$"	(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks	<BODY TEXT="#$$$$$$">

TABEL
Rancangan Tabel	<TABLE></TABLE>
Garis Batas Tabel	<TABLE BORDER=?></TABLE>
Lebar Tabel	<TABLE WIDTH=?>	(dalam satuan pixel)
Lebar Tabel Persentasi	<TABLE WIDTH="%">	(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel	<TR></TR>
Penataan Letak Baris	<TR ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Sel dalam Tabel	<TD></TD>	(harus ada dalam setiap baris tabel)
Penataan Letak Sel	<TD ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Kepala Tabel	<TH></TH>	(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel	<TH ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Warna Kepala Tabel	<TH BGCOLOR="#$$$$$$">

A. Dasar dasar HTML

1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:

<html>

<head>

<title> My First HTML Project </title>

</head>

WELCOME TO MY WEBSITE

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

Gambar 1. Judul Tab Halaman

2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>

<head>

</head>

<body>

<p>Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga. <br><br></p>

<p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

<hr> Ini adalah garis horizontal.

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

Gambar 2. Mengatur Paragraf

3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title> Tag Heading </title>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

Gambar 3. Ukuran Huruf

4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title>format tulisan</titele>

</head>

<body>

teks normal <br>

<small> teks small </small><br>

<b> teks tebal </b><br>

<i> teks miring </i><br>

<u> teks bergaris bawah </u><br>

Contoh superscript : x <sup>2</sup><br>

Contoh subscript : H<sub>2</sub>O<br>

<strike> Ini teks tercoret </strike><br>

menggunakan tag font

</font>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:

Gambar 4. Format tulisan

5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title> From komentar </title>

</head>

<body>

<table>

<tr>

<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>

</tr>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td valign=top>Komentar</td>

</tr>

<tr>

<td colspan="3"><input type=submit name="submit"

value=submit></td>

</tr>
</table>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

Gambar 5. From komentar

6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

<html>

<head>

<title>warna-warna</title>

</head>

<body>

<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="#FF9900">Orange</td>

</tr>

<tr>

<td bgcolor="#663300">Cokelat</td>

<td bgcolor="#FF00FF">Merah muda</td>

</tr>

</table>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

Gambar 6. Tabel

B. Hyperlink

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title> Judul tab </title>

</head>

<body>

Ini hyperlink ke wordpress

<a href="http://www.wordpress.com/" title="Masuwordpress"> Wordpress </a>

<br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo </a>

<br>Masuk ke facebook anda

<a href="http://http://www.facebook.com/" title="Masuk ke facebook"> Facebook </a>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:

Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title> Judul tab </title>

</head>

<body>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="ke Rumah"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg" border="0" width="80" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html" title="Profilku"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg" border="0" width="100" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html" title="Kode Warna Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg" border="0" width="150" height="30"/></a>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:

Gambar 8. Link Antar Bagian Dalam Web

C. Membuat Website Sederhana

1. Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>login web</title><link rel='icon' href='gambar/B.png'>

</head>

<body>

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)</font>

</p>

<br>

<label><font color="#FF6600">Email Atau telepon:</label>

<br>

<input type="text" name="Email" value=""></br><label><font color="#FF6600">Alamat:</label>

<br>

<label><font color="#FF6600">Tanggal Lahir </label>

<br>

</select>

<option value="1">Januari</option>

<option value="2">Februari</option>

<option value="3">Maret</option>

<option value="4">April</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></br>

<label><font color="#FF6600">Jenis Kelamin </label>

<br><font color="red">Pria

<font color="#CCFF00">Wanita</br>

</td>

</table>

<p align="center"> <font size="1" color="#FF6600" ><BLINK>..... Dalam penggisiannya harus jujur yaa, jangan bo'onk :) ......

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

</head>

<body>

</td>

</tr>

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

</ul></left>

</td>

</tr>

<tr>

<p><font color="yellow" size="5">~Dasar-dasar Membuat Website Berbasis HTML~</font>

<p align="lift"><font color="white">Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

<br />

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.<br />

<br />

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.<br />

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: <td> text yang ditampilkan

</td>.<br />

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.<br />

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td> </td><br />

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.<br />

<b>LANGKAH 1</b><br />

<ul>

<li>MEMBUKA NOTEPAD.</li>

</ul>

<b>LANGKAH 2</b> <br />

<ul>

<li>MENGETIKKAN SINTAK/SYNTAX.</li>

</ul>

Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />

pertama, ketikkan<br /><html><br />

tekan enter, kemudian ketik<br /><head><br />Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti ini:<br /><head> <title> judul halaman web </title> </head><br />

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.<br />Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br />

<html><br /><head><br /><title> Judul Halaman Web </title><br />

</head><br />

</body><br />?<br />

  <br />

<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :<br /><body><br />Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br /></body><br />terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :<br /><html><br /><head><br />

<title> Judul Halaman Web </title><br />

</head><br /><body><br />Contoh text yang ditampilkan di halaman web, By: Rian Hidayat<br />

</body><br />

</html><br />

kalo udah, sekarang save dengan nama dasarHTML.<br />

kalo udah disave, buka data yang tadi di save.<br />?<br />Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???<br />Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

</textarea>

<font="left" form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">

Enter your comments here...

</textarea><br>

</form>

</td>

</p>

</tr>

</table>

<b>TUTORIAL HTML</b>

<ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td>

</tr>

s<td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr>

</table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

</div>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

3. Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>Profilku</title>

</head>

<body>

<tr>

</td>

</tr>

<td><tr><td colspan="2" align="center"><font face="Bauhaus 93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>

<td><font size="5"color="#00FFFF">: Rian Hidayat</p></td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

<td><font size="4"color="#00FFFF">: Weru, Sukoharjo</td></tr>

<td><font size="5"color="#00FFFF">: Sukoharjo, 09-November-1993</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

<td><font size="5"color="#00FFFF">: Tidur</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>EMAIL</p></b></td>

<td><font size="5"color="#00FFFF">: hrian89@gmail.com</td>

</tr></table>

<td><font size="5"color="#00FFFF">: Bram Putra P.</p></td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

<td><font size="4"color="#00FFFF">: Laweyan, Surakarta</td></tr>

<td><font size="5"color="#00FFFF">: Surakarta, 13-April-1992</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

<td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX </td>

</tr></table></td>

</p></tr>

</table>

<b>TUTORIAL HTML</b>

<ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr>

<tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr></table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

</div>

</div>

</body>

</html>

4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:

<html>

<head>

<title>Profilku</title>

</head>

<body>

<tr>

</td>

</tr>

<left>

</ul></left>

</td></tr>

<tr>

<td>

<p><b><center><font face="Bauhaus 93" size="7" color='#0000FF'>Galery</font></center></b></p><b>

<tr><p align="center"><font color="#00FFFF" size='6'>Album Kegiatan Teknisi</font>

</table>

</td>

</p></tr></table>

<b>TUTORIAL HTML</b><ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr>

<td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr></table>

</body>

</html>

5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>Cara membuat tulisan bergerak</title>

</head>

<body>

<tr>

</td>

</tr>

<left>

</ul></left>

</td>

</tr>

<tr>

<b><center><span style="font-size: large;" align='center'><font color='#0066FF' size='5'>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b>

<br />

<br /><font color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br />

<br />

<b>Teks Bergerak Ke Bawah...</b></center>

</marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="right"><b>Teks Bergerak Ke Kanan...</b></marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="left"><b>Teks Bergerak Ke Kiri...</b></marquee>

</div>

<br />

<b>Teks Bergerak Ke Atas...</b></center>

</marquee>

</div>

<br />

<a name='more'></a><br /><br /><span style="font-size: large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br />

<br />

<b><span style="color: #FFFF00;">right</span></b><span style="color: white;">">This text scrolls right...</marquee></span></div><br />

<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style="color:#FFFF00;">kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.</font><br /><br />

<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style="font-size: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>

<div class="code"><br /><span style="color: white;"><marquee scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span style="color: white;">"></span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;"></marquee>

</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang bewarna <b><span style="color:#FF6600;">Oren</span></b> untuk mengubah kelajuan.</font>

<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks ini seperti Siput..</b></marquee></div><br />

<div class="code"><br/><span style="color: white;"><marquee scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span style="color: white;">">Teks ini seperti Siput..</marquee>

</span></div><br /><br /><b><span style="font-size: large;"><font color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.

</font><br /><br /><div style="color: #6600CC;"><marquee behavior="alternate"><b>Teks ini Melantun</b></marquee>

</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.

</font><br /><br />

<div class="code"><br /><span style="color: white;"><marquee behavior="alternate"></span><b style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;"></marquee>

</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak

</font><br /><br /><div style="color: #0066FF;">

<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class="code"><br />

<span style="color: white;"><marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">">Teks ini bergerak dalam kelebaran 200 width</marquee></span></div>

<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style="color: #00FF00;">hijau</span></b>.

</font><br /><br /><span style="font-size: large;"><b><font color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

</font><br /><br />

<div style="color: #33FF33;"><marquee behavior=”alternate” scrollamount=”30” width=”400”><b>Teks Paling Awesome</b></marquee></div>

<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.

</font><br /><br />

<br />

<span style="color: white;"><marquee behavior="alternate" width="400" scrollamount="30"></span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;"></marquee>

</span></div>

<br />

<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td>

</p></tr></table>

<b>TUTORIAL HTML</b>

<ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr><tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr>

</table>

</div>

</body>

</html>