Home / HTML / Tutorial HTML Bagian 1: Pengenalan HTML

Tutorial HTML Bagian 1: Pengenalan HTML

Pengenalan HTML. Ketika membuka sebuah website menggunakan browser, maka umumnya kita akan disuguhi halaman yang berisi informasi yang terdiri dari teks, gambar, audio maupun video. Teks yang ditampilkan pada website juga beragam; beragam dari segi varian font dan juga ukuran, ada yang berukuran tebal, jenisnya miring atau bahkan berwarna warni. Begitu juga dengan gambar, terkadang disajikan dalam bentuk slider, tampilannya dapat di perbesar dan perkecil malah kadang dibuat dalam bentuk animasi.

Di beberapa website juga menyediakan kolom inputan data yang memungkinkan kita untuk melakukan pencarian, registrasi dengan mengisikan biodata, login, dan lain sebagainya.

Dalam pemrograman web, terdapat banyak teknologi yang dapat menangani itu semua (menggunakan CSS, JSON, Ajax, javascript, jQuery,Flash, dll), tetapi tanpa HTML tidak ada yang namanya website. Sebuah website tidak akan bisa menampilkan teks, gambar, video, form dan fitur-fitur lain seperti yang saya sebutkan sebelumnya. HTML berada di posisi paling dasar dalam struktur website.

Jadi jika ingin mempelajari cara membuat website maka harus dimulai dari HTML karena menguasai HTML juga merupakan syarat utama yang harus dimiliki oleh web developer.

Pengenalan HTML

HTML (HyperText Markup Language) bukanlah suatu bahasa pemrograman. Dalam HTML kita tidak akan menjumpai adanya variabel, tipe data, pengkondisian maupun perulangan seperti bahasa pemrograman pada umumnya. HTML merupakan sebuah format(markup) yang digunakan untuk membuat dokumen dan aplikasi yang berjalan pada website.

Meskipun bukan sebagai sebuah bahasa pemrograman, tanpa markup dari HTML maka kita tidak akan dapat mengakses content atau informasi dari website. HTML memisahkan content yang di tampilkan di browser(teks, gambar, audio, video, dll) dengan yang sebenarnya di terima browser. HTML bekerja dengan memberi tahu browser bagaimana cara untuk menampilkan content menggunakan beberapa tag-tag yang telah didefinisikan (standardisasi).

Badan yang menentukan standard dalam HTML adalah W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). Kedua badan inilah yang membuat standar internasional dan spesifikasi dari HTML. Perkembangan HTML erat hubungannya dengan sejarah internet, silakan baca Sejarah Internet pada artikel sebelumnya. Pada tahun 2014, HTML sudah rilis versi 5 yang dikenal dengan HTML5.

Struktur dasar HTML

Struktur HTML berisi urutan tag-tag yang sudah di standarisasi dalam membuat halaman website. Struktur dasar HTML adalah sebagai berikut

<!DOCTYPE html>
<html>
<head></title>Hello world</title></head>
<body>
content website
</body>
</html>
  • Setiap membuat dokumen HTML harus menyertakan <!doctype html> pada bagian awal yang berfungsi untuk mendefenisikan dokumen HTML. Untuk HTML5 deklarasi cukup <!doctype html> berbeda dengan HTML versi 4 sebelumnya yang menggunakan <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
  • <html> merupakan tag yang menjadi induk dokumen HTML. Penutup tag ini </html> selalu berada pada akhir dokumen HTML.
  • <head> merupakan tag yang digunakan untuk menuliskan keterangan tentang dokumen HTML. Keterangan yang ditampilkan pada head tidak akan terlihat di browser, kecuali yang berada dalam tag <tittle>. Tag <title>  berfungsi menampilkan judul dokumen pada address bar browser. Tag-tag lain juga dapat disisipkan di dalam tag <head> seperti <base>, <meta> juga tag untuk pemanggilan/penempatan CSS dan javascript.
  • <body> merupakan tag yang berisi semua content website yang ditampilkan browser. Tag HTML yang fungsinya untuk menampilkan content harus ditempatkan diantara tag <body> dan </body>

Cara membuat file HTML

Menggunakan Windows, tag-tag HTML dapat di ketikkan pada Notepad. Untuk membuka notepad, bisa melalui menu Run dengan cara tekan Winkey(logo windows pada keyboard) dan huruf R secara bersamaan. Kemudian ketikkan notepad. Sebagai contoh silakan ketikkan kode berikut:

<!doctype HTML>
<html>
<head></title>Hello world</title></head>
<body>
Apapun yang diketikkan diantara ag pembuka dan penutup BODY akan dicetak dan ditampilkan pada browser web.
</body>
</html>

Selain Notepad bawaan windows, terdapat Editor lain seperti Notepad++, Adobe dreamweaver yang memudahkan kita dalam membuat file HTML. Macam-macam Editor yang mempermudah kita dalam mendesign web akan di bahas secara terpisah.

Cara Menyimpan file HTML

Setelah selesai mengetikkan kode diatas dengan Notepad, untuk menyimpannya klik menu File >> Save atau (ctrl +s).

Pengenalan HTML, Cara menyimpan file HTML

Akan  muncul  kotak  dialog untuk  menentukan  direktori  letak  penyimpanan file seperti gambar dibawah.  Direktori penyimpanan  bebas  ditempatkan pada  drive dan  folder  mana saja. Misalkan, di contoh ini file akan  disimpan di drive D dengan nama folder HTML.

Cara menyimpan file HTML- direktori penyimpanan

Selesai menentukan direktori penyimpanan, maka langkah berikutnya adalah memberikan nama file yang akan disimpan. Misalkan  disimpan  dengan  nama  : contoh_pertama.html pada kolom isian File name dan pada Saves as type pilih All Files  kemudian tekan tombol Save untuk menyelesaikan langkah penyimpanan.

Cara menyimpan file HTML

Cara Menjalankan file HTML

Untuk menjalankan  sebuah  dokumen HTML adalah dengan menggunakan browser seperti Internet Explore, Mozilla, Opera, Google Chrome, atau sejenisnya. Kemudian,  klik  menu  FILE  pada  browser  lalu  pilih  menu Open atau tekan tombol  CTRL + O pada  keyboard. Kemudian cari letak dimana file dokumen HTML yang  telah dibuat dan disimpan sebelumnya.

Alternatif lain membuka file HTML,  yaitu melalui Windows Explorer. Untuk membuka Windows Explorer caranya tekan tombol Winkey + E. Kemudian masuk ke direktori penyimanan file HTML yang akan dijalankan,  lalu pilih filenya dengan klik 2x atau dengan menggunakan klik kanan Open  With…( jika menginginkan  dibuka  dengan  browser  selain defaultnya ). Sehingga hasil tampilan file dokumen HTML saat dijalankan pada browser sebagai berikut :

Cara menjalankan file HTML

Demikian Tutorial Pengenalan HTML. Selamat mencoba dan semoga bermanfaat.

Selanjutnya kita akan membahas Tag, Atribut dan Elemen HTML

 

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial HTML Bagian 3: Membuat Heading di HTML (Tag Heading H1-H6)

Tag Heading <h1> sampai <h6> digunakan untuk memberikan format judul halaman website. Sebuah Teks yang …

Leave a Reply

Your email address will not be published. Required fields are marked *