Struktur Dasar HTML Sebuah Website


Setiap website sebenarnya memiliki struktur yang sama yang terdiri dari beberapa kode HTML dimana bila struktur dasar ini tidak lengkap, maka kemungkinan tampilan website tersebut akan tampak kacau atau bahkan tidak muncul sama sekali. Berikut adalah struktur dasar pembentuk sebuah halaman website utuh.

Struktur sebuah website terbagi menjadi dua bagian yaitu bagian kepala atau head dan bagian tubuh atau body. Pada bagian head berisikan berbagai tag html dasar yang biasanya berisi identifikasi terutama judul dan deskripsi sebuah website, kode tracking yang digunakan oleh mesin pencari juga tertulis di sini, sementara pada bagian body adalah tempat dimana isi website yang sebenarnya akan ditampilkan termasuk header, menu dan footer, terkadang beberapa orang menambahkan sidebar pada website mereka yang juga sering kali berfungsi sebagai tempat menu.

Secara lengkap struktur dasar sebuah website adalah sebagai berikut :

<html>

<head>
     <title></title>
     <meta></meta>
</head>

<body>

</body>

</html>

Setiap kode HTML selalu memiliki tag pembuka (tanpa ‘/’) dan tag penutup (dengan ‘/’) yang menandakan akhir dari pembacaan sebuah struktur tertentu.

Halaman website dimulai dengan tag <html> supaya browser mengenali bahwa kode yang berada di dalam tag ini (sebelum </html>) adalah kode HTML (di dalamnya juga bisa terdapat kode PHP bila file kita simpan dengan ekstensi .php).

Di dalamnya terdapat kode <head> yang berisi judul (sebisa mungkin ada) dan berbagai meta tag yang sifatnya opsional (tidak wajib ada). Judul sebuah halaman website ditulis di dalam tag title yang menunjukkan bahwa apa pun yang tertulis di dalamnya adalah sebuah judul dan akan ditampilkan pada bagian header browser dan judul hasil pencarian.

contoh :
<title>Judul Website Saya</title>

Pada bagian body adalah tempat isi website yang ingin kita tampilkan pada halaman website.

Contoh :

Buatlah sebuah file html berisikan kode berikut dalam text editor

<html>

<head>
     <title>Judul Website Saya</title>
</head>

<body>
<p>Ini isi website saya<br>
Website ini dibuat dengan menggunakan text editor dan kode HTML.
</body>

</html>

Simpan file tersebut dengan nama index.html atau nama lain sesuai selera, tetapi ketika file kita upload ke sebuah layanan hosting, browser akan membaca file index, baik itu html maupun php, terlebih dahulu untuk ditampilkan.

tag <p> menunjukkan bahwa apa yang ada di dalamnya adalah berupa paragraf yang akan menambahkan 1 baris sebagai pemisah antara paragraf satu dengan yang lainnya, sementara tag <br> memberikan perintah pada browser untuk membuat baris baru untuk apapun yang tertulis setelahnya.

Buka file yang sudah anda buat pada browser. Perhatikan pada bagian atas browser akan tertulis judul website sementara pada halaman akan tertulis isi dalam tag body.

Pada bagian berikutnya kita akan membahas mengenai CSS untuk memodifikasi tampilan website.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Jan 27, 2016
Tags : , ,