Mulai Belajar HTML ~ Pemrograman dan Teknologi

Semua halaman web yang ada di internet saat ini pada dasarnya adalah halaman yang berisi kode html. Walaupun menggunakan PHP atau script lain, script tersebut akan menghasilkan halaman HTML yang akan ditampilkan oleh browser. Halaman html "asli" ataupun halaman HTML yang dihasilkan suatu script biasanya bisa dilihat dengan menu "view source code". Kalian juga bisa menggunakan inspect element yang ada pada browser.

File html disimpan dalam file yang ekstensi-nya "*.htm" atau "*.html". Artinya, nama filenya diakhiri dengan "htm", misalnya "coba.htm". File explorer pada windows tidak menampilkan ekstensi file, kecuali settingnya diubah.

Text Editor dan Browser

Untuk mengetik dan menyimpan file html kita memerlukan text editor. Kalian bisa menggunakan smartphone, jika kalian tidak memiliki PC atau laptop asalkan kalian punya text editor dan browser untuk menampilkan halaman HTML. Text editor yang bisa kita gunakan misalnya :

Notepad,
notepad++,
scite,
sublime,
vscode,
genie,
leafpad,
dan teks editor lainnya.

Browsernya bisa pakai mozilla firefox, Safari, Chrome, atau browser lainnya. Browsernya lebih baik gunakan yang terbaru karena teknologi untuk website mungkin akan selalu berubah dan berkembang.

Kode HTML Minimal

Jika sudah ada browser dan teks editor, kita bisa mulai belajar HTML. Dibawah ini adalah kode html yang menghasilkan halaman kosong.

<html>
<head>
</head>
<body>
</body>
</html>

Halaman html diapit dengan <HTML> dan </HTML>. Semua bagian dari kode html yang diapit dengan "<" dan ">" disebut dengan tag termasuk <HTML> dan </HTML>. Tag html umumnya berpasangan walaupun ada juga yang berdiri sendiri seperti <BR />, <HR />, <IMG>, dll. Sepasang tag (pembuka dan penutup) beserta isinya disebut dengan Elemen.

Tag VS Element

Tag adalah bagian dari kode HTML yang diapit dengan tanda < dan >. Beberapa artikel di internet sering salah menyebut tag sebagai elemen. Elemen pada kode HTML adalah sepasang tag pembuka & penutup beserta isinya. Beberapa elemen bisa mengapit sekumpulan elemen HTML lainnya. Selain tag yang berpasangan, tag tunggal juga bisa dihitung sebagai satu elemen.

Judul Halaman

Halaman HTML dibagi menjadi head dan body. Head biasanya diisi informasi yang tidak terlihat secara langsung di dalam halaman html pada browser. Pada contoh berikut ini kita akan menambahkan elemen <title> yang berfungsi untuk memberikan judul halaman HTML.

<html>
<head>
    <Title>HTML Pertamaku</Title>
</head>
<body>
</body>
</html>

Buka teks editor dan ketik kode html di atas. Setelah itu, simpan dengan nama "coba.htm", atau namai terserah kalian asalkan akhirnya ".htm" atau ".html". Untuk menjalankannya double klik filenya, atau buka lewat browser. Saat menyimpan pilih tipe filenya. Jika tidak ada "simpan sebagai html", pilih all files.

Setelah dijalankan dan browser terbuka, browser akan menampilkan "halaman kosong" dengan judul "HTML Pertamaku". Judul file html tersebut bisa dilihat pada nama tab jika browser memiliki tab. Untuk internet explorer versi lama yang belum memiliki tab, judul html ada di judul windows / title bar. Sedangkan untuk browser pada smartphone judul biasanya ditampilkan di address bar browser yang digunakan.

Kode html tidak membedakan huruf besar dan kecil pada nama tag. Tapi, untuk "isi" dari elemen HTML, huruf kecil dan besar akan memberikan hasil yang berbeda. Selain itu, sekumpulan spasi dan tab akan dianggap hanya sebagai satu karakter. Untuk menulis spasi atau tab secara berturut-turut, kita perlu karakter khusus. Isi elemen <title> pada contoh di atas adalah "HTML Pertamaku".

Hello World

Seperti halnya saat belajar bahasa pemrograman, kalian bisa memulainya dengan mengetik dan menampilkan "Hello world". Sebelum memulainya, tentu saja kalian perlu membuka text editor untuk membuat file baru.

<HTML>
<HEAD>
    <Title>HTML Pertamaku</Title>
</HEAD>
<BODY background="red">
    <p>Halo Dunia</p>
</BODY>
</HTML>

Ketik dan simpan kode HTML di atas. Buka filenya atau double click untuk melihat hasilnya di browser!

Sebelum mengakhiri pembahasan kita tentang dasar HTML dan lanjut pada bahasan berikutnya sebaiknya kita tahu nama bagian-bagian dasar dari HTML. Berikut ini adalah nama bagian-bagian dari kode HTML yang sebaiknya kalian tahu.

Tag => Bagian dari kode HTML yang diapit oleh "<" dan ">".
Tag pembuka => Tag yang tidak diawali dengan "</".
Tag penutup => Tag yang diawali dengan "</" dan terletak setelah isi atau content.
Content / isi => Bagian yang diapit tag pembuka dan tag penutup.
Atribut => Bagian yang berada bersama dengan nama tag dan menjelaskan pengaturan yang dimiliki tag yang bersangkutan. Atribut digunakan untuk menjelaskan beberapa hal terkait dengan tag HTML.
Nilai atribut => nilai atribut ditulis setelah tanda "=" dan nilai tersebut diapit dengan tanda petik tunggal (') atau tanda kutip(").
Elemen HTML => Sepasang tag pembuka dan tag penutup beserta isi dan atribut-atributnya. Beberapa tag tunggal yang memang tidak memerlukan isi bisa juga disebut dengan elemen.