Cara membuat dokumen file html sederhana

membuat dokumen file html

Sebelum Anda memulai membuat dokumen html silakan Anda siapkan teks editor seperti Notepad atau TextEdit (Mac) dan browser seperti Google Chrome, Mozila, Opera, Internet Explore dll. Sangat disarankan jika Anda baru belajar HTML jangan menggunakan teks editor profesional seperti Sublime text, Visual Studio Code, Atom dll.

Membuat file dokumen html sederhana

Langkah 1: buka notepad

Untuk pengguna Windows 8 atau ke atas:
Buka Layar Start (gambar jendela di bagian kiri bawah pada layar Anda). Ketik Notepad .

Untuk pengguna Windows 7 atau sebelumnya:
Buka Start > Programs> Accessories> Notepad

Langkah 2: menulis dokumen html sederhana

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <h1>Hello Word</h1>
        <p>Paragraf pertama.</p>
    </body>
</html>

Penjelasan disetiap baris code:

  • <!DOCTYPE html>
    mendefinisikan jenis dokumen HTML.
  • <html>
    mendefinisikan elemen akar pertama pada halaman HTML.
  • <head>
    mendefinisikan berisi informasi header pada dokumen HTML.
  • <title>
    mendefinisikan judul halaman untuk dokumen HTML.
  • </title>
    penutup tag title.
  • </head>
    penutup tag head.
  • <body>
    mendefinisikan berisi konten halaman yang akan terlihat.
  • </body>
    penutup tag body.
  • </html>
    penutup tag html.

Silakan Anda salin script di atas ke di file kosong dikomputer Anda.

contoh sebuah dokumen file html

Langkah 3: Simpan file Html

menyimpan html

Simpan file yang tadi Anda buat: Pilih File> Save as.
Nama filenya bebas asal menggunakan extensi .html atau htm. Sebagai contoh: “index.html”

Langkah 4: buka file html dengan browser

Buka file HTML yang tadi Anda buat dengan browser seperti: Google, Mozilla, Opera dll.

Hasilnya akan terlihat seperti ini:

hasil latihan html

Ringkasan pembelajaran

ElemenKegunaanya
<!DOCTYPE html>mendefinisikan jenis dokumen HTML
<html>mendefinisikan elemen akar pertama pada halaman HTML
<head>mendefinisikan berisi informasi header pada dokumen HTML
<title>mendefinisikan judul halaman untuk dokumen HTML
</title>penutup tag title
</head>penutup tag head
<body>mendefinisikan berisi konten halaman yang akan terlihat
</body>penutup tag body
</html>penutup tag html

Leave a Reply

Your email address will not be published. Required fields are marked *