Membuat Kerangka Dasar Website Dengan Html5 - Pondasi Pembuatan Website Dengan Html5, Css3, Dan Javascript - Bagian 5

: 78 | : 0 | : 29 September 2017 | Programming


Ryo Suwito
- Contributor

Tags | HTML5

Pada saat kita akan membuat sebuah website, akan lebih mudah jika kita memulainya dari sebuah template dasar.

Untuk memulainya buatlah sebuah Folder baru dengan nama HTML, buka folder tersebut lalu buatlah sebuah file baru di dalamnya dengan software pengolah teks seperti Sublime Text, Atom, atau cukup Notepad jika kamu menggunakan OS Windows. 

Untuk membuat sebuah template dasar yang dapat kita gunakan berulang ulang, ketiklah beberapa baris kode ini dengan software pengolah teks tersebut. Sebaiknya kamu mengetik semuanya satu persatu agar otak kita lebih mudah untuk memahami struktur sebuah dokumen HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="javascript.js"></script>
</head>
<body>

</body>
</html>

Simpan file tersebut dengan nama "index.html" tanpa tanda petik. Kemudian jika kamu membuka file tersebut di browser, kamu akan melihat sebuah halaman kosong.

Sekarang mari kita bahas satu persatu kode diatas ya.
<!DOCTYPE html> disebut dengan document type definition (dtd). Potongan kode inilah yang membedakan dokumen HTML5 dengan HTML versi sebelumnya. Dengan adanya potongan kode ini, browser akan mengerti bahwa dokumen index.html milik kita adalah sebuah dokumen HTML5.

<html lang="en"> adalah tag pembuka dokumen index.html. Sebuah file html hanya dapat berisikan satu tag <html>. Hampir semua tag dalam bahasa html itu berpasangan, misalnya <html> dan </html>. Tag ini disebut dengan tag pembuka dan tag penutup. Tapi ada juga tag html yang tidak berpasangan misalnya <br/>, <hr/> dll.

lang="en" maksudnya adalah isi dari dokumen ini adalah dalam bahasa inggris. 

langdisebut dengan attribute, sementara "en" disebut dengan value. Hampir semua tag html seperti <div>,<img> dll bisa kita tambahkan dengan attribute dan value yang sesuai.
Jika kita ingin membuat sebuah website berbahasa Indonesia maka gunakan lang="id" pada tag html pembuka.

Selanjutnya, ini adalah kepala dokumen html yang berisikan informasi penting tentang website kita.
<head>
<meta charset="utf-8">
<title>New Document</title>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>

Semua isi dari head tidak akan tampil di halaman browser kecuali kata-kata yang ada di dalam tag <title></title>.
<meta charset="utf-8"> tag ini memberitahukan kepada browser bahwa dokumen ini di encode dengan utf-8, jadi jika kamu ingin menampilkan huruf arab, rusia dll di halaman web kamu, pakailah charset="utf-8".
Berikutnya tag <title></title> adalah judul dari halaman website kita, biasanya judul akan muncul di bagian atas browser yang kita gunakan ketika kita mengunjungi sebuah halaman website.

TIPS : Jika kamu ingin membuat website berita atau forum yang berisikan artikel, gunakan tag title ini untuk headline artikel kita agar website kita dapat ditemukan oleh pengguna saat mereka melakukan pencarian di google, yahoo dsb.

Selanjutnya adalah tag "stylesheet" yaitu tag yang kita gunakan untuk memformat tampilan website kita. Dan tag script kita gunakan untuk mengeksekusi kode berbahasa JavaScript. Untuk lebih jelasnya akan kita bahas nanti ya.
 
Semua isi website kita yang tampil di browser akan kita tempatkan diantara tag <body> dan </body>. Selanjutnya jangan lupa dengan tag penutup </html> di akhir dokumen.

Selamat, kamu baru saja membuat halaman website pertama mu sekaligus sebuah template atau kerangka HTML5 dasar yang dapat kita gunakan berulang-ulang.
 

Photo cover : Designed by Freepik

Login untuk melihat komentar


Powered by: