SERIES HTML5 - CHAPTER 1 : MEMULAI DENGAN HTML

Dayat Miftahul Jannah
12:26:22 PM

 

 
Di postingan kali ini saya akan membuat series postingan tentang HTML5. Sebelum masuk ke inti pembahsan, kalian bisa lihat terlebih dahulu mengenai versi, spesifikasi dan tahun rilis dari HTML ini sendiri.

Version Specification Release Date
1.0 N/A 01-01-1994
2.0 RFC 1866 11-24-1995
3.2 W3C: HTML 3.2 Specification 01-14-1997
4.0 W3C: HTML 4.0 Specification 04-24-1998
4.01 W3C: HTML 4.01 Specification 12-24-1999
5 WHATWG: HTML Living Standard 10-28-2014
5.1 W3C: HTML 5.1 Specification 11-01-2016

HTML (Hypertext Markup Language) menggunakan sistem markup yang terdiri dari elemen-elemen yang mewakili spesifik konten atau isi. Markup berarti bahwa dengan HTML kalian mendeklarasikan apa yang disajikan kepada pemirsa (viewer), bukan bagaimana penyajiannya. Visual representasi didefinisikan oleh Cascading Style Sheets (CSS) dan direalisasikan oleh browser. Masih ada elemen yang memungkinkan seperti itu, seperti misalnya font, "sepenuhnya usang, dan tidak boleh digunakan oleh penulis.


HTML oleh beberapa programmer kadang-kadang masih atau sering disebut bahasa pemrograman tetapi tidak memiliki logika, begitu juga bahasa markup. tag HTML memberikan makna semantik (semantic meaning) dan keterbacaan mesin ke konten di sebuah halaman.

Sebuah elemen biasanya terdiri dari tag pembuka (<element_name>), tag penutup (</element_name>), yang berisi nama elemen dikelilingi oleh kurung sudut, dan konten misalnya: <element_name>...konten...</element_name>.
 
Ada beberapa elemen HTML yang tidak memiliki tag penutup atau konten apa pun. Ini disebut elemen kosong. Beberapa elemen kosong di antaranya <img>, <meta>, <link> dan <input>.
 
Nama elemen dapat dianggap sebagai kata kunci deskriptif untuk konten yang dikandungnya, seperti video, audio, tabel, footer.

Halaman HTML dapat terdiri dari ratusan elemen yang berpotensi dibaca oleh web browser, ditafsirkan dan dirender menjadi konten yang dapat dibaca atau didengar oleh manusia melalui layar gawai mereka.

Untuk dokumen ini, penting untuk memperhatikan perbedaan antara elemen dan tag:
  • Elemen: video, audio, tabel, footer 
  • Tag: <video>, <audio>, <table>, <footer>, </html>, </body>
 

Elemen Insight


Mari kita bedah sebuah tag... 

  • Tag <p> mewakili paragraf umum.

Elemen biasanya memiliki tag pembuka dan tag penutup. Tag pembuka berisi nama elemen dalam kurung sudut (<p>). Tag penutup identik dengan tag pembuka dengan penambahan garis miring (/) di antara kurung buka dan nama elemen (</p>). Konten kemudian dapat berada di antara dua tag ini: <p> Ini adalah paragraf sederhana. </p>.
 

Membuat halaman sederhana


Contoh, source code HTML dibawah ini membuat halaman web "Hello World" sederhana. File HTML sendiri bisa dibuat menggunakan text editor apa pun. File harus disimpan dengan ekstensi .html atau .htm secara berurutan untuk dikenali sebagai file HTML. Setelah dibuat, file ini dapat dibuka di browser web apa pun.
 
1:  !DOCTYPE html>  
2:  <html lang="en">  
3:       <head>  
4:            <meta charset="UTF-8">  
5:            <title>Hello!</title>  
6:       </head>  
7:       <body>  
8:            <h1>Hello World!</h1>  
9:            <p>Ini adalah paragraf sederhana</p>  
10:       </body>  
11:  </html>

Mari kita bedah isi source code diatas, ini adalah tag yang kita gunakan dalam contoh d iatas :

  • <!DOCTYPE> : Tag yang mendefinisikan versi HTML yang digunakan dalam dokumen. Dalam hal ini adalah HTML5. Lihat topik doctypes untuk informasi lebih lanjut. 
  • <html> : Tag yang membuka halaman. Tidak boleh ada markup setelah tag penutup (</html>). Atribut lang yang menyatakan bahasa utama halaman menggunakan kode bahasa ISO (en untuk bahasa Inggris). Lihat topik Bahasa Konten untuk informasi lebih lanjut. 
  • <head> : Tag yang membuka bagian kepala (header), yang tidak muncul di jendela browser utama tetapi sebagian besar berisi informasi tentang dokumen HTML, yang disebut metadata. Itu juga dapat berisi impor dari luar stylesheet (external stylesheets) dan jugs script. Tag penutupnya adalah </head>. 
  • <meta> : Tag yang memberi browser beberapa metadata tentang dokumen. Atribut charset menyatakan karakter pengkodean (character encodeing). Dokumen HTML modern harus selalu menggunakan UTF-8, meskipun itu bukan keharusan. Di HTML, tag <meta> tidak memerlukan tag penutup. Lihat topik Meta untuk informasi lebih lanjut. 
  • <title> :  Tag yang di gunakan untuk mendekskripsikan judul halaman. Teks yang ditulis di antara tag pembuka dan penutup ini (</title>) akan menjadi ditampilkan pada tab halaman atau di bilah judul browser. 
  • <body> : Tag yang membuka bagian isi dari dokumen yang ditampilkan kepada pengguna, yaitu semua konten halaman yang terlihat atau terdengar. Tidak ada konten harus ditambahkan setelah tag penutup </body>. 
  • <h1> : Adalah Tag judul level 1 untuk halaman. Lihat postingan tentang Heading (judul) untuk informasi lebih lanjut. 
  • <p> : Tag yang mewakili paragraf umum teks.
 

Sedikit informasi tambahan:

 
  1. HTML5, 11.2 Fitur yang tidak sesuai 
  2. .htm diwarisi dari batas ekstensi file tiga karakter DOS lama.
 
Mungkin sampai disini dulu untuk postingan chapter 1 Memulai / Pengenalan dengan HTML5, kita akan berjumpa di postingan / chapter berikutnya tentang DOCTYPE HTML.