RudihartoApakah Anda baru mulai belajar membuat website dan bingung harus memulai dari mana? Saat ini, Anda menemukan artikel yang sangat tepat. Dalam artikel ini kami akan membahas beberapa contoh script HTML untuk pemula yang dapat Anda pelajari.
Apa Itu HTML?
HTML adalah singkatan dari Hypertext Markup Language. HTML merupakan bahasa markup standart yang digunakan untuk menampilkan dokumen atau membuat halaman website agar dapat ditampilkan di browser.
Dengan bahasa markup ini, Anda bisa membuat teks, menambahkan gambar, link, hingga membuat formulir dengan mudah tanpa memiliki keahlian khusus di bidang pemrograman web. Selengkapnya tentang apa itu HTML bisa Anda pelajari di artikel berikut.
Contoh Script HTML Untuk Pemula
Mempelajari bahasa markup ini sangat mudah dan bisa dilakukan oleh siapa saja, bahkan tanpa keahlian khusus di bidang pemrograman web. Hal ini karena kode HTML dapat langsung dijalankan dan hasilnya bisa langsung dilihat, sehingga memudahkan kita untuk memperbaiki jika terjadi kesalahan.
HTML sendiri merupakan bahasa dasar dalam pembuatan website, berfungsi sebagai kerangka atau struktur utama sebuah halaman. Jika digabungkan dengan Cascading Style Sheets (CSS) dan JavaScript, ketiganya akan saling melengkapi. HTML membentuk struktur halaman, CSS mempercantik tampilan, sedangkan JavaScript membuat website menjadi lebih interaktif dan dinamis.
Nah, bagi Anda yang baru ingin belajar HTML, berikut adalah beberapa contoh script HTML untuk pemula yang perlu Anda pelajari.
1. Struktur Dasar HTML
Penulisan kode HTML di awali dengan kode <!DOCTYPE html>. Ini adalah tag deklarasi yang menyatakan format dokumen html dengan versi HTML 5.
Kemudian tepat di bawahnya kode <html lang=”id”>. Attribut attribut lang=”id” , untuk menyatakan dokumen ini dibuat menggunakan Bahasa Indonesia.
Setiap membuka dokumen HTML selalu di awali dengan tag <html> selanjutnya ada tag <head> </head>, <body> </body> di bagian terakhir diisi tag penutup HTML </html>.
Sebenarnya kita bisa saja tidak menyertakan tag deklarasi ini di dalam struktur kode HTML yang kita buat. Tetapi akan melanggar standar aturan oleh W3C.
Berikut contoh penggunaan dan hasilnya:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Judul Halaman Web Saya</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Hallo Rumahweb. Saya sedang belajar HTML!</p>
</body>
</html>
2. Heading dan Paragraf
Kemudian heading dan paragraf pada HTML. Digunakan untuk menyusun struktur teks di dalam dokumen HTML. Mulai dari heading H1 hingga H6. Tag <h1> digunakan untuk judul utama, sampai <h6> untuk subjudul terkecil. Ada juga tag <p> </p> digunakan untuk teks paragraft.
Berikut contoh penggunaan dan hasilnya:
<h1>Ini adalah Judul Utama (H1)</h1>
<p>
Tag h1 digunakan untuk judul utama dari sebuah halaman. Biasanya hanya ada satu tag h1 di setiap halaman web.
</p>
<h2>Ini adalah Subjudul (H2)</h2>
<p>
Tag h2 digunakan untuk subjudul yang membagi konten utama menjadi bagian-bagian.
</p>
<h3>Sub-subjudul (H3)</h3>
<p>
Tag h3 digunakan untuk bagian yang lebih spesifik di bawah subjudul h2.
</p>
<h4>Judul Bagian Kecil (H4)</h4>
<p>
Tag h4 digunakan untuk memecah konten lebih lanjut.
</p>
<h5>Judul Detail (H5)</h5>
<p>
Tag h5 digunakan untuk judul yang sangat spesifik atau detail.
</p>
<h6>Judul Terkecil (H6)</h6>
<p>
Tag h6 adalah judul dengan tingkatan paling rendah, sering digunakan untuk teks tambahan seperti catatan kaki.
</p>
Perlu diperhatikan tag H1 digunakan untuk judul utama dari sebuah halaman. Biasanya hanya ada satu tag H1 di setiap halaman web.
3. Format Teks
HTML bisa mengatur format teks menjadi huruf tebal, huruf miring, underline dengan atau yang biasa disebut Bold, Italic, Underline.
Perbedaan utama tag HTML tersebut ada pada makna dan tujuan tag tersebut, meskipun secara struktur dan tampilanya hampir sama. Berikut penjelasan serta contoh code tag HTML tersebut.
- Tag <b> (Bold)
Tag <b> digunakan untuk membuat teks huruf tebal/bold. Secara semantic, tag ini digunakan untuk menandai teks penting atau yang perlu diperhatikan.
- Tag <u> (Underline)
Tag <u> digunakan untuk membuat teks huruf underline/garis Bawah. Secara semantik, tag ini berfungsi untuk menandai kata/kalimat dengan gaya yang berbeda, seperti penulisan kata/kalimat yang salah.
- Tag <i> (Italic)
Tag <i> digunakan untuk membuat teks huruf miring/italic. Secara semantic, tag ini digunakan untuk menandai teks sebagai suara dalam cerita, istilah teknis, istilah atau frasa Bahasa lain.
Berikut contoh penggunaan dan hasilnya:
<p>Tag BOLD. Ini adalah teks biasa, dan <b>ini adalah teks yang ditebalkan</b>.</p>
<p>Tag UNDERLINE. Ini adalah teks biasa, dan <u>ini adalah teks yang digarisbawahi</u>.</p>
<p>Tag ITALIC. Ini adalah teks biasa, dan <i>ini adalah teks yang dimiringkan</i>.</p>
4. Memasukan Gambar di HTML
Menambahkan atau menampilkan gambar di dokumen HTML sangan mudah dilakukan. Biasanya untuk website memakai extention gif, jpeg/jpg, png, svg. Meskipun bisa memakai extention lainnya.
Untuk menyematkan gambar di dalam HTML, menggunakan tag <img> diikuti atribut <src> untuk menetapkan sumber gambar.
Attrube tambahan yaitu alt digunakan sebagai deskripsi gambar. Teks ini akan muncul saat gambar gagal dimuat. Sedangkan attribut title adalah judul yang akan muncul saat kursor diarahkan kegambar.
Berikut contoh penggunaan dan hasilnya:
<img src="gambar_promo.jpg" alt="Promo spesial produk baru" width="600" height="400" title="Klik untuk melihat detail promo">
Untuk lebih lanjut tentang memasukan gambar di HTML, silakan buka halaman Belajar HTML Part 2: Menambahkan Gambar dan Membuat Tabel.
5. Menambahkan Link pada Teks
Hyperlink atau link pada HTML berfungsi untuk mengarahkan sebuah teks/gambar menuju dokumen lain, baik di halaman website yang sama atau ke link eksternal.
Hyperlink ditulis dengan tag <a> atau yang kenal sebagai anchor (jangkar). Tag <a> selalu diikuti oleh atribut href (hypertext reference) diisi alamat yang akan dituju ketika teks/gambar di klik.
Berikut contoh penggunaan dan hasilnya:
<a href="https://www.rumahweb.com">Klik Disini</a> Untuk menuju halamann Promo Rumahweb.com
6. Menambahkan Bullet & Numberin pada Teks
Pada dokumen HTML kita bisa menggunakan fitur bullet/numbering untuk menampilkan informasi atau data dalam bentuk yang terstruktur dan mudah dibaca.
Terdapat dua jenis type list bullet/numbering di HTML, yaitu Ordered List dan Unordered List. Seperti contoh dibawah ini:
Unordered HTML List
- First item
- Second item
- Third item
- Fourth item
Ordered HTML list
- First item
- Second item
- Third item
- Fourth item
Untuk penjelasan lebih lengkap beserta contoh, silakan mengunjungi halaman Belajar HTML Part 4: Membuat List dan Hyperlink.
7. Membuat Table HTML
Pada HTML kita bisa membuat konten berupa table dihalaman web. Berikut tag yang biasa digunakan untuk membuat table.
- Tag <table> untuk membungkus tabelnya
- Tag <thead> untuk membungkus kepala tabel
- Tag <tbody> untuk membungkus body dari tabel
- Tag <tr> (tabel row) untuk membuat baris pada tabel
- Tag <td> (table data) untuk membuat sel pada table
- Tag <th> (table head) untuk membuat judul pada header
Tag <table>, <tr>, <td>, yang paling penting untuk diingat, sementara tag lainnya adalah optional bisa digunakan ataupun tidak.
Selain itu, kita bisa mengatur table pada HTML tersebut dengan border, cellpadding/spacing, dan bgcolor. Agar tampilan table lebih terstruktur dan mudah dibaca oleh pengunjung.
Untuk mempelajari tentang Table di HTML silakan mengunjungi halaman Membuat Tabel di HTML.
8. Membuat Daftar DropDown
Pada HTML kita dapat membuat fitur daftar dropdown untuk menyediakan pilihan dengan opsi yang sudah ditentukan. Seperti pilihan kota pada formulir, memilih bahasa disebuah website, dan sebagainya.
Kita bisa membuat drop-down di HTML menggunakan tag <select>, kemudian membuat item-item daftarnya menggunakan <option>.
Berikut contoh penggunaan dan hasilnya:
<label for="kota">Kota:</label>
<select name="kota" id="kota">
<option value="" disabled selected>Pilih kota...</option>
<option value="solo">Solo</option>
<option value="jogja">Jogja</option>
<option value="semarang">Semarang</option>
<option value="surabaya">Surabaya</option>
<option value="bandung">Bandung</option>
<option value="jakarta">Jakarta</option>
<option value="bogor">Bogor</option>
<option value="medan">Medan</option>
<option value="makassar">Makassar</option>
<option value="denpasar">Denpasar</option>
</select>
9. Membuat Kotak Centang
Pada sebuah formulir biasanya terdapat pilihan centang sebuah pilihan, seperti persetujuan Term Condition, memilih fitur tambahan, dan sebagainya.
Agar lebih mudah dipahami, berikut contoh code dan hasilnya.
<p>Pilih Hobi Anda:</P>
<input type="checkbox" id="hobi1" name="hobi" value="musik">
<label for="hobi1">Mendengarkan Musik</label><br>
<input type="checkbox" id="hobi2" name="hobi" value="film">
<label for="hobi2">Menonton Film</label><br>
<input type="checkbox" id="hobi3" name="hobi" value="olahraga">
<label for="hobi3">Berolahraga</label><br>
<input type="checkbox" id="hobi4" name="hobi" value="membaca">
<label for="hobi4">Membaca</label><br>
<input type="checkbox" id="hobi5" name="hobi" value="game">
<label for="hobi5">Bermain Game</label><br>
<input type="checkbox" id="hobi6" name="hobi" value="traveling">
<label for="hobi6">Traveling</label><br>
Input checkbox dibuat menggunakan tag <input type=checkbox> . id digunakan sebagai pengenal unik pada setiap kotak yang dicentang. Sedangkan name untuk identifikasi kategori checkbox “Hobi”.
10. Menambahkan Radio Button
Mirip dengan HTML checkbox, bedanya Radio Button hanya bisa memilih salah satu dari pilihan yang disediakan. Misalnya untuk memilih Jenis Kelamin pada sebuah formulir.
Berikut contoh code dan hasilnya.
<p>Pilih Jenis Kelamin:</p>
<input type="radio" id="pria" name="jenis_kelamin" value="pria">
<label for="pria">Pria</label><br>
<input type="radio" id="wanita" name="jenis_kelamin" value="wanita">
<label for="wanita">Wanita</label>
11. Membuat Kolom Datepicker
Masih seputar fitur di formulir, saat ini fitur untuk membuat Datepicker pada HTML. Untuk mengisi tanggal spesifik, seperti tanggal lahir, tanggal booking, dan lainnya.
datepicker dibuat dengan menggunakan tag <input> dengan atribut type=”date”. Atribut id digunakan sebagai pengenal unik untuk elemen. Sedangkan atribut name digunakan saat data formular dikirim ke server.
Berikut contoh code dan hasilnya.
<p>Pilih Tanggal Janji:</p>
<label for="tanggal_janji">Pilih Tanggal Janji:</label>
<input type="date" id="tanggal_janji" name="tanggal_janji">
12. Membuat opsi Upload Gambar
Salah satu fitur yang biasa ada pada sebuah formulir adalah kolom untuk upload file/gambar/dokumen.
method=”post” digunakan sebagai metode pengiriman data. id sebagai pengenal unik untuk elemen input, sedangkan name untuk mengidentifikasi file yang diunggah.
Formulir ini kami buat untuk membatasi file yang bisa diunggah, hanya bisa memilih file png, jpg, dan jpeg. Pengaturan ini terletak di bagian accept=”.png, .jpg, .jpeg
Terakhir adalah tombol untuk mengirim formular ke server.
Berikut contoh code dan hasilnya.
<form action="/upload-gambar" method="post" enctype="multipart/form-data">
<label for="unggah-gambar">Pilih file gambar:</label><br>
<input type="file" id="unggah-gambar" name="gambar_file" accept=".png, .jpg, .jpeg">
<br><br>
<input type="submit" value="Unggah Gambar">
</form>
13. Modifikasi Teks
Bagian ini kami akan membuat contoh modifikasi teks, seperti mengubah warna teks, mengganti font, menyorot teks dengan warna tertentu, mengubah ukuran teks, mengatur rata teks.
Modifikasi teks seperti ini digunakan untuk kebutuhan spesifik, seperti sebuah halaman HTML klien menginginkan jenis font tertentu, lebih menyukai paragraft rata kanan kiri dari pada rata kiri.
Mengatur ukuran font judul, sub judul, dan paragraft penting dilakukan untuk meningkatkan Readability pada halaman website. Menciptakan struktur konten yang rapi, sehingga mudah dibaca dan dipahami oleh pengunjung.
Berikut contoh code dan hasilnya.
<p>1. Mengubah warna teks </p>
<p style="color: blue;">Teks ini diberi warna biru.</p>
</br>
<p>2. Mengubah font teks </p>
<p style="font-family: Arial;">Teks ini menggunakan font Arial.</p>
<p style="font-family: Courier New;">Teks ini menggunakan font Courier New.</p>
</br>
<p>3. Menyorot teks </p>
Layanan <span style="background-color: #5353ec;">AI website builder Rumahweb</span>, membuat website hitungan detik.
</br>
<p>4. Mengubah ukuran teks </p>
<p style="font-size: 18px;">Teks ini diformat dengan ukuran 18px.</p>
<p style="font-size: 28px;">Teks ini diformat dengan ukuran 28px.</p>
</br>
<p>5. Mengatur rata teks </p>
<p style="text-align: left;">Teks ini diformat dengan alignment rata kiri.</p>
<p style="text-align: center;">Teks ini diformat dengan alignment rata tengah.</p>
<p style="text-align: right;">Teks ini diformat dengan alignment rata kanan.</p>
</br>
<p>6. Membuat kutipan teks </p>
<blockquote>
"#ThinkBig #GrowBigger Onlinekan Bisnismu Sekarang dengan Web Hosting Indonesia" - Rumahweb Indonesia.
</blockquote>
14. Memasukan Video dan Audio
Anda bisa memasukan media interaktif seperti audio dan video pada dokumen HTML.
Untuk Audio menggunakan tag <audio>, sedangkan video menggunakan tag <video>. Dengan tambahan atribut controls, pengguna dapat mengatur media Play, Pause, Stop dihalaman web HTMLnya.
Berikut contoh code:
<audio controls>
<source src="musik-favorit.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="video-promosi.mp4" type="video/mp4">
</video>upload media file .mpt dan .mp4 satu direktory dengan file HTML tersebut agar media dapat diputar.
Apabila web HTML sudah diupload ke web hosting dan penggunaan media file sangat besar, free space web hosting akan cepat habis. Untuk itu alternatifnya upload video ke Youtube dan seting sebagai iframe di web HTML.
15. Menggunakan iframe
iFrame adalah teknik html yang memungkinkan Anda untuk melakukan embed data website seperti text, gambar hingga video dalam sebuah halaman website.
Agar lebih jelas dan disertai contoh, silakan mengunjungi halaman Mengenal Apa Itu iFrame Beserta Contoh Script HTML iFrame.
16. Membuat Formulir HTML
Setelah mengenal dasar-dasar HTML, selanjutnya membuat code yang sedikit lebih banyak yaitu seperti formulir.
Formulir disebuah website biasanya berfungsi untuk melakukan pendaftaran atau pendataan. Data yang diisikan diform akan dikirim keserver untuk disimpan dan dikelola.
Silakan menggunakan tag <form> untuk memulai membuat form HTML. Kemudian menambahkan berbagai elemen input, seperti kotak teks, radio button, dan tombol.
Berikut contoh code sederhana:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Isi Komentar: </label>
<textarea name="komentar" rows="4" cols="50" ></textarea> <br /><br />
<label> Asal Kota: </label>
<select name="kota">
<option value="sleman"> Sleman</option>
<option value="bantul"> Bantul</option>
<option value="gunungkidul"> Gunung Kidul</option>
<option value="kulonprogo"> Kulon Progo</option>
<option value="yogyakota"> Yogyakarta Kota</option>
</select>
</form>Agar lebih jelas belajar tentang formulir di HTML, silakan mengunjungi halaman Belajar HTML Part 3: Cara Membuat Form HTML
Tips Belajar HTML untuk Pemula
Berikut adalah beberapa tips belajar HTML untuk pemula.
1. Pahami Struktur Dasar
Mulai dengan memahami struktur dasar pada HTML, seperti tag seperti <html>, <head>, <body>, dan <!DOCTYPE html>. Belajar perlahan hingga menguasai struktur dasar ini akan membuat Anda lebih mudah Menyusun kode secara berkelanjutan.
2. Mulai dari Tag Paling Umum
Belajar dan memulai dari tag paling umum atau tag yang sering digunakan, seperti:
- Heading: <h1> sampai <h6> untuk judul.
- Paragraf: <p> untuk teks.
- Tautan (Link): <a> untuk membuat tautan ke halaman lain.
- Gambar: <img> untuk menyisipkan gambar.
- Daftar: <ul> (tidak berurutan) dan <ol> (berurutan) untuk membuat daftar.
- Input: <input> untuk formulir.
3. Gunakan Editor Kode yang Tepat
Disarankan tidak menggunakan Notepad biasa, tetapi gunakan editor yang memiliki banyak fitur untuk mendukung coding, seperti Visual Studio Code, Sublime Text, atau Atom.
4. Tidak Perlu Banyak Menghafal
Pada saat Menyusun kode HTML, tidak perlu banyak menghafal tag. Fokuslah pada konsep dan fungsinya. Karena jika lupa tag yang seharusnya digunakan, Anda selalu bisa mencari referensi seperti di W3schools.
Penutup
Dengan memahami berbagai contoh script HTML di atas, Anda bisa lebih mudah mengenal dasar-dasar pembuatan website. HTML menjadi fondasi utama sebelum melangkah ke tahap lanjutan seperti CSS maupun JavaScript.
Semakin sering Anda mencoba dan mempraktikkan contoh-contoh sederhana ini, semakin terbiasa pula Anda dalam menulis kode yang rapi dan terstruktur. Mulailah dari hal kecil, lalu kembangkan kreativitas Anda untuk membangun halaman web yang lebih menarik dan interaktif.
Demikian artikel kami tentang contoh script HTML untuk pemula, semoga bermanfaat.
