Selasa, 11 Agustus 2020

Membuat, Menyimpan dan Menjalankan Dokumen HTML - Belajar HTML Dasar 3

Membuat, Menyimpan dan Menjalankan Dokumen HTML - Belajar HTML Dasar 3, langkah selanjutnya setelah mengenal tools yang digunakan untuk membuat dokumen html, maka pada materi kali ini kita akan coba belajar tentang bagaimana cara membuat sebuah dokumen html pertama anda, setelah itu belajar menyimpan dokumen tersebut dan langkah terakhir yaitu menjalankan dokumen html yang telah kita buat.

Setelah web browser dan text editor terinstall di laptop anda langkah selanjutnya untuk memudahkan coba buat sebuah folder dengan nama belajarhtml di driver D:\ kalian, dimana folder tersebut akan digunakan untuk menyimpan seluruh file html yang akan kita pelajari nanti.
Membuat, Menyimpan dan Menjalankan Dokumen HTML - Belajar HTML Dasar 3

Membuat Dokumen HTML Pertama Anda

Setelah membuat folder belajarhtml, selanjutnya silahkan buka text editor anda (notepad++ atau sublime text) lalu ketikkan kode html dibawah ini :
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Menyimpan Dokumen HTML


Setelah itu pilih File -> Save atau Save As lalu arahkan file agar tersimpan di folder belajarhtml, setelah itu simpan file tersebut dengan nama helloworld.html seperti pada tampilan gambar dibawah ini.
Membuat, Menyimpan dan Menjalankan Dokumen HTML - Belajar HTML Dasar 3

untuk dapat melihat ekstensi suatu file seperti .html .docx. .jpeg maka silahkan aktifkan dulu fiturnya dengan cara klik Organize -> Folder and search options -> View -> hilangkan cetang pada Hide extensions for known file types -> Ok

Membuka Dokumen HTML

Setelah membuat dan menyimpan dokumen html tadi, untuk melihat hasilnya, kita harus membuka dokumen html tersebut menggunakan browser web dengan cara double klik (klik dua kali) di file helloworld.html.

atau dengan cara kedua, klik kanan pada file tersebut lalu pilih open with Mozilla Firefox atau Google Chrome maka akan muncul tampilan seperti dibawah ini:
Membuat, Menyimpan dan Menjalankan Dokumen HTML - Belajar HTML Dasar 3

Anjuran Penamaan File Dokumen HTML

Berikut ini beberapa aturan atau anjuran dalam pemberian nama file html yang perlu diperhatikan :

1.Ekstensi File
Seluruh file yang ingin dijadikan dokumen html harus menggunakan ekstensi .html .html atau .xhtml (untuk XHTML), agar web browser membacanya sebagai file hypertext atau file html, karena jika tidak file tersebut hanya akan dibaca sebagai file biasa dan tidak akan diekseskui sebagai web di web browser.

2.Mana Default untuk Homepage Website
Jika nantinya anda membuat sebuah halam website yang sudah banyak, dan ingin membuat salah satu halamannya menjadi sebuah homepage secara otomatis maka anda  bisa memberikan nama file tersebut menjadi index.html ,dimana file html yang diberikan nama index akan secara otomatis di akses sebagai halaman utama sebagai website (anda akan lebih memahami tentang ini pada materi-materi selanjutnya).

3.Hindari Penggunaan Spasi
nama file biasanya tampil pada URL website seperti pada gambar diatas, dan biasanya spasi dibaca karakter %20 makanya jika memberikan nama file html sebaiknya dan usahakan jangan menggunakan spasi.

Contoh Yang Baik :
helloworld.html

Contoh Yang Kurang Tepat :
Hello World.html

4.Konsisten Memberikan Nama
Ketika memberikan nama file html sebaiknya menggunakan huruf kecil (lower case), tidak menggunakan huruf besar (upper case) dan sebaiknya tidak mencampur huruf besar dan huruf kecil, dan juga tidak menggunakan karakter khusus seperti !@#$%^&**()_+

Contoh Yang Benar :
helloworld.html
index.html
websiteku.html

Contoh Yang Salah :
HelloWORLD.html
H3770world.html

Demikian sesi berbagi ilmu tentang cara membuat file html , cara menyimpan file html dan cara membuka file html. Untuk pembahasan tentang kode html yang telah ditulis diatas akan saya jelaskan pada materi selanjutnya tentang struktur dasar halaman html. Jika ada hal yang tidak dimengerti silahkan bertanya di kolom komentar, dan kita sharing sampai sama-sama mengerti. Jangan lupa baca artikel lain tentang Belajar HTML lainnya.

Posting Komentar

Halo Cari Apaki? Ketikmi