Jun 6, 2013

Belajar Membuat Halaman HTML Sederhana

, 1 comment
Cara membuat halaman html
Belajar membuat halaman HTML
Seorang manusia nggak bisa berdiri tegak dan melakukan aktifitasnya tanpa adanya kerangka tubuh. Kerangka? Ya, seperti halnya tubuh manusia, sebuah halaman web juga butuh kerangka sehingga bisa terlihat sedemikian rupa seperti yang kita lihat saat ini. Dalam membangun sebuah halaman web, kerangka adalah komponen yang paling penting. Kerangka berfungsi sebagai tempat menempelnya komponen-komponen lain, pengaturan letak, hingga berperan dalam pengaturan layout secara tampilan. Dengan kata lain, kerangka adalah komponen pertama yang harus dibuat lebih dulu sebelum kita membuat komponen-kompenen lainnya.

Nah, sebagai blogger yang baik, kita kan juga harus tau bagaimana seluk-beluk dalam pembangunan halaman web (blog) kita, mulai dari struktur, material, sampai design luarnya. Well, hari ini admin akan berbagi sedikit pelajaran buat kalian semua. Pertama-tama, sebelum kita membahas hal yang lebih jauh, kita akan belajar mengenai komponen yang paling dasar dulu, yaitu kerangka. Nah, kita ini kan pengguna Blogger, jadi kita akan belajar membangun sebuah halaman web sendiri dengan menggunakan HTML (penjelasan klik disini), yaitu bahasa web yang paling universal sekaligus standard yang dipakai oleh Blogger.

Untuk dokumen HTML (yang nantinya menjadi halaman web), pertama-tama kita harus mempersiapkan software-software ini:

      1. Browser (ex: Mozilla Firefox, Google Chrome, dll)
      2. Notepad (sebaiknya pakai Notepad++, download disini)

Sebelum kita mulai, admin akan memberikan sedikit penjelasan tentang kode HTML yang akan kita pakai:

<html> … </html> : Ini adalah tag yang mengapit sebuah dokumen HTML. Tanda titik-titik menandakan isi dari dokumen HTML kita. Segala tag-tag HTML ditulis diantara kode ini. Ini sama saja dengan sampul buku. Fungsinya adalah untuk menandakan supaya tulisan yang diapitnya diterjemahkan sebagai bahasa HTML. 
<head>…</head> : Ini adalah tag yang sangat dasar juga. Head yang berarti kepala, menandakan bahwa ini adalah otak dari sebuah dokumen HTML. Fungsinya adalah untuk memberikan berbagai macam atribut HTML (misalnya identitas dokumen, pengaturan font, dan pengaturan lainnya). Tag-tag yang diletakkan diantara kode ini tidak akan ditampilkan di layar komputer kita, tetapi dijadikan aturan dasar untuk isi dokumen kita nantinya. 
<body>…</body> : Body berarti badan, berarti semua tag-tag yang dimasukkan disini yang akan ditampilkan di layar komputer kita. Berbagai komponen seperti isi blog, header, sidebar, footer, dll diatur didalam tag ini.

Gampangnya, dokumen HTML itu adalah sebuah dokumen yang diawali dengan tanda <html> dan diakhiri dengan tanda </html>. Kemudian dokumen itu dibagi menjadi dua bagian yaitu <head> dan <body>. Berbagai atribut seperti  judul, author dan pengaturan lainnya dimasukan didalam tag <head>. Sementara isi blog yang ingin kita tampilkan dilayar komputer dimasukkan didalam <body>. Gimana? Jelas? Nah, kerangkanya bisa kita lihat di bawah ini:

<html>
        <head>
                Atribut blog (judul, deskripsi halaman, setting, dll)
        </head>
        <body>
                Isi blog
        </body>
</html>

Sekarang kita siapkan contohnya! Pertama, buka Notepad. Lalu tulis seperti yang saya tulis di bawah ini:


<html>
        <head>
                <title>Ini Blog Saya!</title>
        </head>
        <body>
                Hai! Selamat datang di blog saya!
        </body>
</html>

Kemudian save text tersebut dengan nama Dokumen.html (pilih format HTML). Nah, pada dasarnya kamu baru saja bikin dokumen html. Lalu langkah selanjutnya, buka file HTML itu dengan browser! Ini adalah screenshotnya:

Hasilnya:

Membuka file HTML pada Browser
Membuka file HTML pada Browser

Nah lihat kan? Teks “Ini Blog Saya!” yang kita tulis di dalam tag <title> menjadi judul dari halaman web itu. Tag <title> termasuk dalam tag atribut yang admin masukkan ke tag <head>. Sementara itu, teks “Hai! Selamat datang di blog saya!” muncul dilayar komputer sebagai isi halaman. Ini karena kita memasukkannya ke dalam tag <body>. Jelas bukan? Mulai sekarang coba deh praktekkan dengan membuat kreasi kamu sendiri. Well, untuk bantuan tag-tag HTML lainnya silahkan klik link ini:

Mengenal Tag-Tag Dasar HTML

Nah, begitulah pelajaran pertama kita untuk membuat halaman web dengan HTML. Maaf juga kalau kata-katanya beribet dan agak susah dipahami (hehe). Ya, cukup itu dulu, selamat mencoba!

Source: (Own archive)

1 comment:

  1. lanjutannya manah nih om. ditunggu nih mompong lagi semangat. :)

    ReplyDelete