Cara Membuat Web dengan Notepad
Membuat Website HTML
Cara Membuat Website yang paling mudah adalah dengan menggunakan software Dreamweaver atau Frontpage.
Tapi yang menjadi hambatan bagi pemula yang sedang akan mulai membuat website sendiri adalah harga kedua software diatas relatif masih cukup mahal.
Sebetulnya dasar untuk membuat website adalah HTML.
Dengan HTML ini kita dapat membuat website sendiri tanpa tergantung oleh software mahal seperti Dreamweaver maupun Frontpage.
Memang bagi pemula yang akan mulai belajar membuat website dengan HTML cara ini kelihatannya sangat sulit karena harus memahami banyak kode html yang rumit. Padahal sesungguhnya tidaklah sukar sama sekali.
Apabila kita sudah bisa mulai mengerti penggunaan kode html ini, kita akan mulai merasakan senangnya membuat website sendiri dengan HTML.
Sekarang aku mulai saja menerangkan cara membuat website yang sederhana dengan HTML.
Sesungguhnya kode untuk membuat website dengan HTML adalah sangat sederhana sekali.
Kode dasarnya adalah seperti dibawah ini:
<html >Sederhana, bukan?
< head>
< title> </title >
< /head>
<body >
</body >
</html >
Membuat Website Dan Meng Online kan
Namun untuk mengonlinekannya ada beberapa kode dan isi website yang masih harus ditambahkan supaya website ini bisa dibaca/dilihat oleh pengunjung.Sebagai contoh marilah kita membuat website dengan kode dasar seperti yang ada dibawah ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>Selanjutnya siapkan satu folder dalam komputer Anda yang diberi nama Websiteku. Setelah itu buka dua halaman kosong notepad.
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xml:lang=”en”>
<head>
<title> Judul Setiap Halaman Ditulis Disini</title>
</head>
<body>
Diantara tag<body> dan tag</body> ini diisi artikel, image dan keterangan lainnya yang akan dapat dilihat oleh pengunjung website Anda.
</body>
</html>
Ketik code HTML seperti contoh diatas kedalam dua buah notepad diatas. (di copy paste juga boleh)
Pada notepad yang pertama yang aku buat sebagai Halaman Utama atau Beranda atau Home ini aku sisipkan judul mengenai isi halaman tersebut.
Misalnya judul halaman ini adalah Websiteku Yang Pertama, maka judul ini aku sisipkan diantara tags<title> dan </title>
Judul ini nantinya tidak akan tampak pada halaman website Anda, melainkan tampak pada browser yang Anda buka.
Setelah itu diantara tags <body> dan </body> diisi dengan artikel, image dan keterangan2 lainnya yang akan Anda tampilkan pada website dan bisa dilihat oleh pengunjung.
Misalkan Halaman Utamanya seperti contoh dibawah ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>Setelah notepad diatas siap, lalu save as ke All Files dan simpan kedalam folder Websiteku tadi dengan nama index.html.
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xml:lang=”en”>
<head>
<title> Websiteku Yang Pertama</title>
</head>
<body>
<h1>Belajar Membuat Website </h1>
<p><strong> Beranda</strong> </p>
<p> Ini adalah website pertamaku yang aku buat dengan <strong> HTML</strong> <br />
Sebelumnya aku sama sekali tidak ingin belajar membuat website karena (menurutku) sukar sekali.<br />
Tapi sekarang aku senang sekali karena sudah dapat membuat website sendiri.</p>
<p> Untuk melihat halaman kedua silahkan <a href=”halaman-2.html”> KLIK DISINI</a> </p>
</body>
</html>
Dengan menamakan file notepad ini sebagai index,html, maka setiap kali pengunjung membuka website Anda pasti akan melihat halaman ini. Jadi halaman ini merupakan Halaman Muka atau Beranda. Istilah umumnya adalah Home Page atau Landing Page.
Sekarang kita buat halaman-2 juga dengan kode dasar HTML seperti diatas tadi.
Misalkan halaman keduanya seperti dibawah ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>Save halaman ini ke All Files dengan nama halaman-2.html dan simpan juga kedalam folder Websiteku.
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xml:lang=”en”>
<head>
<title> Pengalamanku</title>
</head>
<body>
<h1> Belajar Membuat Website </h1>
<p> <strong> Halaman 2</strong> </p>
<p> Ketika pertama kali aku mencoba belajar membuat website dengan HTML memang susah sekali.<br/>
Tapi setelah aku mengerti kode HTML, sekarang aku senang sekali membuat website sendiri.<br/>
Demikianlah pengalamanku pada waktu belajar membuat website dengan HTML</p>
<p> Untuk kembali ke halaman utama silahkan <a href=”index.html”>KLIK DISINI</a> </p>
</body>
</html>
Melihat Hasil Dari Membuat Website Sendiri
Sekarang buka folder Websiteku yang ada di komputer Anda.Kalau tadi Anda sudah betul menyimpannya, maka akan terdapat dua buah files dalam folder websiteku tersebut; masing2 adalah:
index.html
halaman-2.html
Cobalah klik 2x pada fileindex.html yang ada di folder Websiteku pada komputer Anda dan website anda akan tampil pada layar monitor Anda.Sebagai contoh Anda boleh mencoba mengklik kalimat index.html ini dan Anda akan melihat halaman website yang kita buat dngan kode HTML diatas.
Anda lihat pada halaman itu ada kalimat KLIK DISINI. Coba klik kalimat itu dan Anda akan dibawa ke halaman-2 dari website Anda.
Pada halaman-2 ini juga ada kalimat KLIK DISINI. Anda boleh mencoba mengklik kalimat itu dan Anda akan dibawa kembali kehalaman utama.
Demikianlah Dasar Membuat Website dengan HTML. Mudah, bukan?
Anda juga bisa menambah halaman website sebanyak yang diperlukan. Misalnya halaman-3, halaman-4 dst.
=========================================================================
Catatan:
Contoh diatas hanyalah untuk website percobaan saja.
Pada pembuatan website yang sebenarnya penulisan kodenya harus berisi lengkap nama domainnya,
misalnya: <a href=”namadomain.com/index.html”>Klik Disini</a>
dan
<a href=”namadomain.com/halaman-2.html”>Klik Disini</a>
tags<p> dan </p> untuk membuat paragraph
tags<br /> untuk pindah alinea
tags<strong> dan </strong> untuk menebalkan text
sedangkan untuk hyperlink dipakai <a href=” “> dan </a>
=========================================================================
Tidak ada komentar:
Posting Komentar