Adsense

Cara Membuat Halaman Web Sederhana dengan Notepad

if.Blogger | 6.12.12
Setiap hari, kita mengakses berbagai situs web. Namun, terkadang kita bertanya-tanya, sulitkah untuk membuat situs web sendiri? Di artikel ini, Anda akan dipandu untuk Membuat halaman web HTML sederhana, hanya dengan menggunakan Notepad. Penyunting teks yang merupakan program bawaan yang tersedia di setiap komputer Windows, dan dapat ditemukan di menu Start.

Sebelum memulainya, Anda harus memahami dasar-dasar HTML terlebih dahulu. Tanda (tag) pada HTML (Hypertext Markup Language) berada dalam <kurung sudut>. Tanda tersebut berfungsi untuk membangun situs web Anda. Untuk mengakhiri kode HTML, gunakan tanda penutup (end tag), seperti : </text>. Tanda penutup tersebut berguna untuk menutup berbagai tanda, seperti tanda huruf tebal atau paragraf, dll.

Langkah-langkah Membuat Halaman Web Sederhana dengan Notepad adalah sebagai berikut :

  1. Bukalah Notepad di Komputer atau di Labtop Anda.
  2. Setelah Notepad terbuka, klik File > Save As, lalu pilih All Files pada kolom Save as Type. Simpan dengan nama sesuai selera Anda dalam format HTML, misal web.html. Umumnya, halaman utama sebuah situs memiliki nama file "index.html".
  3. Awali halaman web Anda dengan memasukkan tanda <html>, dan gunakan tanda penutup atau end tag </html>
  4. Selanjutnya di antara kode <html>, masukkan tanda <head> untuk memasukkan berbagai informasi web, diikuti tag penutup </head>. Lalu masukkan Tanda <title> diantara tag head yang berfungsi untuk mengatur judul halaman. Diantara tag <title></title> masukkan Judul Web, misal <title>Belajar Web</title>
  5. Selanjutnya membuat halaman isi web, dengan menggunakan tanda <body> untuk memasukkan isi halaman, yang diikuti dengan tag penutup </body>. Pada tag pembuka <body> tambahkan kode bgcolor untuk mengatur warna halaman. Contoh seperti gambar dibawah:
  6. Kemudian isi halaman web di antara tag <body></body>. Diawali dengan Judul Web atau bagian situs dengan huruf berukuran besar. Judul web ini dibuat dengan tanda <h1> hingga <h6>. Tanda <h1> dapat Anda gunakan untuk membuat judul web karena ukuran hurufnya besar. Misalnya : <h1>BELAJAR WEB</h1>. Pastikan Anda menutup tanda <h1> di akhir kalimat dengan tag </h1>. Untuk memposisikan tulisannya tepat berada ditengah-tengah, maka gunakan tag <center></center>. Contoh seperti gambar dibawah:
  7. Setelah judul web selesai, lalu buatlah deskripsi web, dengan menggunakan tanda <h1> hingga <h6>. Misal kita gunakan <h2> dengan deskripsi web “Membuat Web Itu Mudah”. Untuk mengubah warna tulisan deskripsi maka tag <h2> kita beri kode style, menjadi <h2 style=”color: red;”>. Untuk membuat garis pemisah antar Header dan Isi web, maka gunakan tag <hr>. Contoh seperti gambar dibawah:
  8. Selanjutnya untuk mengisi halaman web dengan informasi. Agar terlihat berbeda dengan warna dasar web, maka gunakan tag <div> dengan kode style untuk membuat kotak:

    <div style="border: 1px #bfb8b8 solid; padding: 10px; background-color: #ffffff; text-align: left;">
Isi Web
</div>

    Contoh seperti gambar dibawah:
    Selengkapnya tentang membuat kotak dengan HTML, silakan baca di Artikel ini.
  9. Setelah kotaknya selesai, saatnya mengisi kotak tersebut dengan informasi web. Buatlah paragraf di halaman dengan tanda <p>. Misalnya, <p>Paragraf 1</p>. Untuk membuat baris baru dalam 1 paragram, maka gunakan tanda <br>. Gunakan berbagai tanda atau kode untuk memformat teks pada halaman web, seperti <b> untuk menebalkan teks, <i> untuk memiringkan teks, dan <u> untuk menggarisbawahinya. Setelah menggunakan tag, jangan lupa untuk selalu menutupnya.
  10. Sampai dilangkah ini, dasar-dasar membuat website sederhana telah selesai. Anda dapat menambahkan gambar dengan tanda <img> untuk memperindah postingan web dan menambahkan informasi yang tidak dapat dijelaskan dalam bentuk teks. Tanda <img> memerlukan informasi tertentu agar berfungsi. Kode lengkapnya seperti ini:

    <img src="#" width="100%" height="auto">

    Parameter src pada tanda berfungsi untuk menulis nama file gambar, dan width serta height berfungsi untuk menjelaskan panjang dan lebarnya. Nilai diatas menunjukkan style gambar dibuat responsive. Tanda # diisi dengan link sumber gambar.
  11. Selain gambar, buatlah tautan dengan tulisan “Selengkapnya” yang mengarah ke halaman lain dengan tanda <a>, dengan kode :

    <a href="#">Selengkapnya</a>

    Teks di tengah tanda adalah teks yang akan muncul di halaman, sementara parameter href berisi halaman tujuan. Tanda # diisi dengan halaman tujuan.
Berikut hasil akhirnya :

Rangkuman dari keseluruhan kode HTML Halaman Web Sederhana dengan Notepad, dari nomor 1 s.d terakhir adalah sebagai berikut :

<html>
<head>
<title>Nama Web</title>
</head>

<body bgcolor="yellow">
<h1><center>HEADER WEB</center></h1>
<h2 style="color: red;"><center>Deskripsi</center></h2>
<hr>

<div style="border: 1px #bfb8b8 solid; padding: 10px;
background-color: #ffffff; text-align: left;">

<h1>Judul Postingan</h1><hr>
<img src="Link Gambar" width="100%" height="auto">
<p>Isi Postingan.... <a href="#">Selengkapnya</a></p>

</div>
</body>
</html>

Halaman Web Sederhana dengan Notepad selesai. Anda dapat mengembangkannya dengan memodifikasi tampilan halaman web dengan CSS. Demikian tutorial Cara Membuat Halaman Web Sederhana dengan Notepad. Semoga bermanfaat

Tags

Posting Komentar

1 Komentar

  1. Kang Nugraha8 Desember 2012 pukul 23.45

    Sangat menarik untuk di coba. Jangan lupa berkunjung ke otakblogger.blogspot.com -> Cara Sebenarnya Menambah Jumlah Followers Twitter Secara Cepat dan Aman.

    BalasHapus

Stop Komentar SPAM
Berkomentarlah dengan Sopan
Salam Anak Bangsa