Membuat Halaman Web HTML5 Sederhana • ReeZh Design

Halaman Web HTML5 Sederhana

Tutorial website berikut ini adalah cara membuat halaman web sederhana dengan HTML5 yang direkomendasikan untuk pemula yang ingin membuat halaman website.

Apa itu HTML5?

HTML5 adalah versi terbaru dari Hypertext Markup Language, kode yang menjelaskan halaman web. Sebenarnya ada tiga jenis kode: HTML, yang menyediakan struktur; Cascading Style Sheets (CSS), yang menangani presentasi; dan JavaScript, yang membuat sesuatu terjadi.

Perbedaan HTML dan HTML5

Sebuah browser web HTML5 (teks/html) akan fleksiblel dalam menangani kesalahan sintaks. HTML5 telah di desain agar browser web lama dapat dengan aman menghadapi konstruksi HTML5 yang baru. Perbedaan mendasar dengan HTML 4.01 adalah spesifikasi HTML5 memberikan aturan detail untuk meleksikalkan dan memparsing sebagai persyaratan agar berbagai web tetap memberikan hasil yang sama saat kesalahan terjadi sintaks. Meskipun HTML5 telah memiliki perilaku konsisten untuk menangani dokumen-dokumen “Tag Soup”, seperti dokumen ini tidak dapat di katakan telah memenuhi standar HTML5.

Kenapa menggunakan HTML5?

HTML5 telah di rancang untuk memberikan hampir semua yang ingin Anda lakukan secara online tanpa memerlukan perangkat lunak tambahan seperti plugin browser. Mulai dari animasi hingga aplikasi, musik hingga film, dan juga dapat di gunakan untuk membangun aplikasi yang sangat rumit yang berjalan di browser Anda.

Cara Membuat Halaman Web Sederhana dengan HTML5

Sebelum masuk ke cara membuat halaman web, berikut adalah yang perlu diketahui :

1. Aplikasi Editor Kode HTML5

Untuk membuat sebuah halaman atau beberapa halaman HTML5, di perlukan aplikasi editor kode. Bisa menggunakan editor teks biasa atau aplikasi yang komplit dan mendukung banyak fitur yang bagus. Hal ini dibedakan dengan tipe Tekstual dan tipe WYSWYG.

Keterangan tentang tipe editor bisa di lihat pada artikel : Editor Kode HTML5

2. Struktur HTML5

Contoh halaman web sederhana dengan HTML5 bisa di lihat pada struktur kode di bawah ini :

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title>Contoh HTML5 Sederhana</title>
  <meta name="description" content="Membuat halaman web html5 sederhana">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="Contoh HTML5 Sederhana">
  <meta property="og:type" content="Membuat halaman web html5 sederhana">
  <meta property="og:url" content="https://reezhdesign.com">
  <meta property="og:image" content="https://static.reezhdesign.com/uploads/2021/05/jasa-website-seo-murah-bandung-indonesia.jpg">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>
  <body>
    <h1>Contoh HTML5 Sederhana</h1>
    <p>Membuat halaman web html5 sederhana</p>
  </body>
</html>

3. Validasi Kode HTML5

Setelah membuat contoh halaman website dengan HTML5, lebih baik di periksa dan validasi kode HTML5 Anda. Tempat memeriksa atau cek validasi kode HTML5 bisa di lakukan pada website :

Pemeriksaan validasi Kode di W3C Validator

Pertama, kunjungi dahulu halaman website W3C Validator. Setelah itu, pilih pengaturan yang di inginkan untuk memeriksa kode html5 anda.

HTML5 Validator Start

Kedua, setelah proses tekan tombol Check maka akan di tampilkan hasil dari pemeriksaan.

HTML5 Validator Hasil Pemeriksaan 01

Ketiga, gambar berikut adalah hasil pemeriksaan apabila tidak ada kode html yang bermasalah.

HTML5 Boilerplate

Apabila anda mengetahui HTML5 Boilerplate, tentu akan lebih mudah dalam pembuatan halaman web yang di inginkan. Penggunaan framework yang telah jadi seperti HTML5 Boilerplate sangat berguna bagi Anda sebagai pemula untuk belajar.

Kesimpulan

Sederhana kan, membuat halaman web html5 akan sama seperti anda biasa membuat halaman html sebelumnya. Selanjutnya, tinggal dari kreatifitas Anda yang diperlukan untuk membuat halaman web yang di inginkan. Tunggu tutorial berikutnya dari ReeZh Design. Selamat belajar!