Wednesday, November 22, 2017

Cara Membuat Halaman HTML Sederhana

Membuat halaman website sebenarnya tidaklah sulit. Yang diperlukan hanyalah mencoba. Tulisan Berikut ini adalah tutorial cepat bagaimana membuat halaman HTML untuk membangun sebuah website sederhana.

Perlu diketahui, bahasa pemrograman dasar dari tampilan website adalah HTML, dan saat tulisan ini ditulis, bahasa HTML telah mencapai versi HTML5. Setiap halaman website sebenarnya ditulis dalam bentuk bahasa ini, dan web browserlah yang bertugas untuk merender dari kode HTML tersebut, agar halaman website tidak tampil berupa kode-kode program saja, melainkan dengan tampilan yang dapat dimengerti dengan mudah oleh mata manusia.

Alat yang diperlukan untuk membuat halaman HTML adalah text editor seperti Notepad. Jika diperlukan, dapat digunakan aplikasi Notepad++, untuk mempermudah mengenali tag-tag HTML. Dengan Notepad++ ini pula, akan dapat dengan mudah mengatur indentasi, bagi programer yang membutuhkan kerapian.

Membuat Halaman HTML

Membuat halaman HTML dapat dilakukan sama seperti membuat file pada umumnya. Jika menggunakan Notepad++, pilih menu File-New, maka akan terbuka file baru seperti gambar di bawah ini:


Kemudian pilih menu File-Save As, maka akan terbuka dialog Save As file. Masukkan nama file index.html, atau nama lainnya dengan ketentuan berekstensi .htm atau html. Jangan lupa untuk memlih Save as type ke All types (*.*) agar file tidak tersimpan kedalam bentuk text normal (.txt).



Advertisement

Struktur Kode HTML

Dalam halaman HTML diketahui 3 hal utama, yaitu elemen, tag, dan attribute. Elemen adalah bagian kode HTML yang terdapat dalam tanda kurung sudut (< >), dan bagian ini adalah bagian yang tidak ditampilkan web browser. Sedangkan bagian yang diluar kurung sudut disebut dengan konten. Yaitu bagian yang ditampilkan oleh web browser.

Elemen HTML yang disertai dengan tanda kurung sudut disamping-sampingnya disebut dengan tag. Contoh tag adalah <div> untuk opening div tag, dan </div> untuk closing div tag. Tag berguna bagi web browser untuk mengerti bagaimana seharusnya konten yang berada diantara opening dan closing tag tersebut harus ditampilkan.

Tag dapat digunakan dengan dua cara. Yaitu dengan opening and closing secara bersamaan, atau sebagai orphans tag. Contoh penggunaan tag ini berturut-turut adalah sebagai berikut:

<p>Tulisan</p>

dan

<image/>

Cara penulisan tag kedua di atas disebut juga sebagai Self-Closing Element.

Sedangkan yang disebut dengan Attribute adalah informasi tambahan tag yang diletakkan di opening tags, dan terdiri dari nama dan nilainya. Misalnya suatu halaman website, memiliki konten berbahasa inggris Amerika, maka attribusinya:

<htm lang=”en-US”></html>

Struktur Halaman HTML

Pada halaman website, terdapat lima element HTML dasar pembentuk halaman website. Lima element tersebut yaitu:

  • Decotype or DTD. Document Type Declaration yang mengindikasikan versi HTML yang digunakan.
  • HTML. Tag yang menunjukkan mulai dan diakhirinya dokumen HTML.
  • Header. Bagian <head>, yang berisi tentang informasi umum halaman web. Seperti judul, metadata, atau link ke file eksternal.
  • Body. Bagian <body>, yang berisi mayoritas konten yang ditampilkan oleh web browser.
  • Charset dan Encoding. Tag yang digunakan untuk mengindikasikan jenis encoding yang digunakan, umumnya digunakan UTF-8. Informasi dalam tag ini diperlukan oleh web browser sebagai informasi ketika melakukan penyimpanan file, dan informasi bagaimana menampilkan jika terdapat kerakter-karakter tertentu.

Berdasarkan pengalaman penulis, ketiga tag elemen html, head, dan body harus ada. Sedangkan untuk decotype, charset dan encoding, jika tidak diinisialisasikan pada halaman web yang bersangkutan, biasanya browser akan menganggapnya sama dengan nilai default bawaan browser itu sendiri. Bahkan umumnya browser akan menambahkan secara otomatis, jika ketiga elemen decotype, charset dan encoding tidak ada pada halaman website tersebut.


Advertisement

Halaman HTML Sederhana

Berikut ini adalah contoh kode halaman HTML sederhana
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title>Judul Halaman Website</title>
    </head>
    <body>
        <p>Tulisan Konten</p>
    </body>
</html>


Penulisan di Notepad++ adalah sebagaimana Gambar dibawah ini:


Pilih menu File-Save dan untuk melihat hasilnya dapat dilihat menggunakan browser .



Contoh halaman HTML di atas, adalah contoh halaman website sederhana. Selanjutnya di bawah ini contoh kode HTML yang membutuhkan performatan text dan menyertakan gambar.
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title>Judul Halaman Website</title>
    </head>
    <body>
        <h1>Pemandangan</h1>
        <p>Ini adalah contoh dari paragraph 1</p>
        <img src="images/gambar1.jpg"/>     
        <p>Ini adalah contoh dari paragraph 2, dengan contoh <i>italic</i>, <b>bold</b>, dan <u>underline</u></p>
    </body>
</html>


Untuk menempatkan gambar1.jpg adalah pada folder images yang berada pada folder dimana index.html disimpan.


Kemudian gambar dibawah ini adalah ilustrasi bagaimana file-file di atas diupload ke server yang telah disewa oleh penulis menggunakan software CoreFTP, melalui jalur FTP.


Setelah terupload, maka akan dapat diakses melalui domain dari server yang bersangkutan. Seperti contoh gambar dibawah ini, yaitu melalui domain edugameapp.com, karena contoh upload di atas, adalah upload ke server edugameapp.

Referensi


logo

Popular Posts