Mengenal Struktur Dasar HTML

  • Sabtu, 2 Mei 2020
  • Dibaca 1,580x views
Mengenal Struktur Dasar HTML File HTML yang sama jika dibuka menggunakan Atom Text Editor

Kalau kita membicarakan sebuah struktur dokumen, maka kita harus memenuhi kriteria minimum yang telah ditetapkan untuk menjadi satu dokumen utuh.

Begitulah kira-kira jargonnya, dan tentu itu berlaku juga untuk dokumen HTML.

Berikut ini adalah struktur minimal sebuah dokumen HTML, kita menggunakan struktur dasar dari HTML5 yang merupakan versi terbaru dari HTML.

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML bersama Maya</title>
</head>

<body>
    disinilah tempat kita menyimpan isi dari konten HTML
</body>

</html>

Keterangan:

<!DOCTYPE html> harus diletakan di baris paling awal, ini adalah deklarasi, seperti ngasih tau gitu sama browser, yang artinya “Woii .. ini adalah dokumen HTML5”.

Jika kita tidak menulis <!DOCTYPE html> dibaris paling pertama, artinya browser akan membaca bahwa ini dokumen HTML dibawah versi 5.

<html>  Sebuah pernyataan tentang dokumen HTML

<head> adalah kepala, haha.. tempat dimana metadata sebuah dokumen disimpan, salah satunya judul yang sudah kita sertakan disana <title>Belajar HTML bersama Maya</title>

<body> digunakan untuk menyatakan awal dari isi dokumen yang ditampilkan dalam browser, artinya browser hanya akan menampilkan isi yang ada di antara <body> dan </body>

Jika kita lihat, semua tag dalam HTML pasti ada pembuka dan penutup, misalnya:

<html> ujungnya ditutup oleh</html> begitu juga dengan <head></head> dan <body></body>.

Cara Membuat dan Menyimpan Dokumen HTML

File yang Maya Simpan menggunakan nama belajar-html.html
File yang Maya Simpan menggunakan nama belajar-html.html

Sekarang bukalah text editor yang telah Kawan Maya Install, lalu copy dan paste dari struktur minimal yang telah Maya buat diatas.

Simpan dengan nama file belajar-html.html, ingat harus menggunakan ekstensi .html.

Biasanya nama file dokumen HTML harus tanpa spasi, misalnya index.html, atau belajar.html, karyamaya.html, dan lain sebagainya.

Jika ingin menggunakan dua suku kata, sebaiknya dipisah menggunakan tanda hubung (-) atau garis bawah ( _ ), misalnya: belajar-html.html atau belajar_html.html

Kawan Maya juga dapat menyatukan dua suku kata tanpa spasi, misalnya: belajarhtml.html

Biasanya, sih, kalau maya selalu menggunakan semuanya menggunakan huruf kecil bukan huruf besar (kapital).

Ekstensi File HTML

Ekstensi file adalah tulisan di belakang file, yang menunjukan jenis file tertentu.

Ekstensi HTML5 menggunakan .html (dot HTML) ini adalah default-nya, meski ada yang menulis .htm jg bisa, tetapi sekarang sudah tidak ada yg menggunakan.

Semuanya sudah menggunakan nama file .html 4 huruf.

Jadi Maya mah pokoke ikut aja sesuai dengan yang sudah dilakukan para pendahulu kita, haha.

Preview File

Preview file belajar-html.html
Preview file belajar-html.html

Buka file yang barusan Kawan Maya simpan, menggunakan browser apa saja, dan bagaimana tampilannya?

Betul sekali, yang tampil hanya kata “disinilah tempat kita menyimpan isi dari konten HTML” Seperti yang sudah maya sampaikan, bahwa diantara <body> dan </body> sajalah, yang kita perintahkan browser untuk menampilkan.

Catatan: Selama kita belajar bersama tentang HTML, kita akan terus menggunakan file tersebut.

Ditulis oleh: Maya
Maya
Maya adalah tokoh hayalan, hanya tampaknya ada, tetapi nyatanya tidak ada, tokoh Maya dibangun untuk lebih mendekatkan karyamaya pada kalian.

ads by Google