Pada era digital yang begitu berkembang pesat saat ini, pembuatan halaman web telah menjadi suatu keterampilan yang penting dan relevan. Dua bahasa pemrograman yang menjadi fondasi dalam pengembangan web adalah JavaScript dan HTML. Dalam artikel ini, kita akan membahas dasar-dasar kedua bahasa ini serta bagaimana mereka bekerja bersama untuk menciptakan pengalaman web yang interaktif dan dinamis.
Apa itu HTML?
HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. HTML memberi petunjuk pada peramban web (browser) tentang bagaimana tampilan suatu halaman web harus diatur dan memuat berbagai elemen, seperti teks, gambar, tautan, dan banyak lagi. HTML menggunakan tag atau elemen yang diletakkan di antara tanda kurung sudut, misalnya `<p>` untuk menandai paragraf atau `<img>` untuk gambar.
Contoh sederhana HTML:
<!DOCTYPE html> <html> <head> <title>Contoh Halaman Web</title> </head> <body> <h1>Selamat Datang di Halaman Web Saya</h1> <p>Ini adalah contoh halaman web sederhana.</p> </body> </html>
HTML menciptakan struktur dasar halaman web, tetapi untuk membuatnya lebih menarik dan interaktif, kita perlu memperkenalkan JavaScript.
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi pada halaman web. Ini berarti JavaScript memungkinkan Anda untuk membuat efek, animasi, validasi formulir, dan banyak lagi di dalam halaman web. JavaScript dapat dijalankan di sisi klien (di peramban pengguna) atau di sisi server (menggunakan platform seperti Node.js).
Contoh sederhana JavaScript:
// Ini adalah contoh skrip JavaScript document.getElementById("demo").innerHTML = "Halo, Dunia!";
Di sini, kita menggunakan JavaScript untuk mengganti teks dalam elemen dengan ID "demo" dengan teks "Halo, Dunia!".
Integrasi HTML dan JavaScript
JavaScript dapat disisipkan langsung ke dalam dokumen HTML menggunakan elemen `<script>`. Anda dapat meletakkannya di dalam elemen `<head>` atau `<body>`.
Contoh penempatan skrip JavaScript di dalam elemen `<body>`:
<!DOCTYPE html> <html> <head> <title>Contoh Halaman Web</title> </head> <body> <h1>Selamat Datang di Halaman Web Saya</h1> <p>Ini adalah contoh halaman web sederhana.</p> <script> // Ini adalah contoh skrip JavaScript document.getElementById("demo").innerHTML = "Halo, Dunia!"; </script> </body> </html>
Dalam contoh di atas, JavaScript digunakan untuk mengganti teks pada halaman web setelah halaman selesai dimuat.
Kumpulan Kode Template Plus UI
Syntax Kode HTML
<!--[ Add a classname hl to automatically color syntax ]--> <div class='pre hl notranslate' data-text='.html'> <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre> </div>
Syntax Kode JavaScript
<!--[ Add a classname hl to automatically color syntax ]--> <div class='pre hl language-javascript notranslate' data-text='.js'> <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre> </div>
Daftar Isi Otomatis
<details class='sp toc'> <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary> <div class='toC' id='autoToc'></div> </details>
Daftar Isi Manual
<details class='sp toc' open=''>
<summary data-show='Show all' data-hide='Hide all'>Contents</summary>
<div class='toC'>
<ol>
<li><a href='#heading'>Your_Heading</a></li>
...
...
...
</ol>
<!--[ Sample ToC with subheading ]-->
<ol>
<li><a href='#heading'>Your_Heading</a>
<ol>
<li><a href='#subHeading'>Sub_Heading_1</a></li>
...
...
...
</ol>
</li>
</ol>
</div>
</details>
Postingan Terkait Manual
<div class='pRelate'>
<!--[ Related title ]-->
<b>You may want to read this post :</b>
<ul>
<li><a href='#'>Your_post_title_here</a></li>
<li><a href='#'>Your_post_title_here</a></li>
<li><a href='#'>Your_post_title_here</a></li>
</ul>
</div>
Contoh
Postingan Terkait Otomatis
<details class="sp toc" open=""> <summary data-hide="Hide all" data-show="Show all">Baca Juga</summary> <div class="toC" id="aRel"></div> </details>
Contoh
Baca Juga
Catatan/Note
<p class="note"><b>Judul Bila Perlu</b><br /><br />Catatan Kamu Taruh Sini Ya</p>
Contoh
Bunyi Hukum Oktaf Newlands
Jika unsur-unsur disusun berdasarkan kenaikan massa atom maka sifat unsur
tersebut akan berulang setelah unsur kedelapan.
Tombol Download
Tipe 1 Tanpa Hitung Mundur
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT' data-text='zip'></span>
<div class='fN'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fS'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
Contoh
Tipe 2 Dengan Hitung Mundur
<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='dldSl'>
<div class='dldMe'></div>
</div>
</div>
Contoh
Daftra Pustaka
<p class="note"><b>Daftar Pustaka :</b><br /> <br/><a href="Link 1" rel="nofollow" target="_blank">Judul 1</a><br/> <br/><a href="Link 2" rel="nofollow" target="_blank">Judul 2</a><br/> <br/><a href="Link 3" rel="nofollow" target="_blank">Judul 3</a><br/> </p>
Contoh
Daftar Pustaka :
Judul 1
Judul 2
Judul 3
Kesimpulan
Dengan menggabungkan HTML dan JavaScript, Anda dapat menciptakan pengalaman web yang interaktif, menarik, dan dinamis. Ini adalah fondasi dasar pengembangan web yang harus dipahami oleh siapa pun yang ingin membangun situs web modern. Namun, ini hanya awal dari perjalanan pengembangan web. Terus belajar dan eksperimen dengan konsep dan teknologi baru untuk mengembangkan keterampilan Anda dan menciptakan pengalaman web yang semakin canggih.