Last Updated on August 7, 2023 by
Di era digital seperti saat ini, mayoritas dari kita mengenal website, bahkan sebagian dari Anda ada yang membutuhkan website baik itu untuk personal branding, memperkenalkan produk dan lain sebagainya. Oleh karena itu banyak sekali yang pada akhirnya memutuskan untuk membuat website sendiri. Tapi, tahukah Anda bahwa dalam proses pembuatan website, kita membutuhkan yang namanya bahasa pemrograman HTML.
Daftar Isi
Apa Itu Bahasa Pemrograman HTML?
HTML (Hypertext Markup Language) adalah bahasa markup yang umumnya digunakan oleh developer web, walaupun ini bukan bahasa satu-satunya, karena masih ada bahasa lainnya. Namun, bahasa pemrograman HTML merupakan kode-kode dasar jika Anda ingin mulai belajar membuat web.
Nah, Jika Anda ingin membuat web sendiri, maka mari kita belajar bahasa HTML dari dasar.
Langkah Awal Sebelum Belajar Bahasa Pemrograman HTML
Mungkin sebagian dari Anda masih awam dengan bahasa pemrograman HTML bertanya-tanya, “Apa saja yang dibutuhkan jika kita ingin belajar kode pemrograman HTML?”. Sebenarnya kita hanya butuh perangkat sederhana untuk belajar HTML, Anda hanya membutuhkan browser yang ada di laptop, seperti Mozilla, Chrome atau yang lainnya.
Lantas apakah hanya cukup dengan browser saja? Tentu tidak, ada satu aplikasi sederhana yang sudah tersedia di Windows Anda yang diperlukan, yaitu Notepad. Di Notepad inilah Anda bisa mulai mengetikkan kode pemrograman HTML untuk memulai membuat web.
Bagaimana cara menemukan Notepad di Windows? Untuk menemukan Notepad di Windows, Anda hanya perlu membuka start menu, di antara barisan aplikasi-aplikasi yang tersedia, maka Anda akan menemukan aplikasi Notepad. Setelah menemukannya Anda bisa membuka dan memulai mengetikkan kode pemrograman yang diinginkan.
Apabila Anda menggunakan sistem operasi lain selain Windows, maka Anda tidak akan menemukan aplikasi Notepad di sana. Tapi tenang saja, Anda tetap bisa membuat kode HTML dengan bantuan text editor lain, jika Anda menggunakan Linux bisa menggunakan Atom dan jika Anda menggunakan sistem operasi Mac bisa menggunakan TextWrangler.
Kesimpulannya, di tahap persiapan belajar HTML Anda hanya membutuhkan browser dan aplikasi teks editor saja. Dan untuk menjalankan HTML Anda belum memerlukan koneksi internet.
Berkenalan dengan Web Browser
Perlu Anda ketahui bahwa tujuan Anda belajar bahasa pemrograman HTML adalah untuk membuat web sederhana, oleh karena itu Anda perlu berkenalan dengan yang namanya Web Browser. Apa itu Web Browser? Web browser merupakan aplikasi yang berfungsi menampilkan halaman website dan mengakses seluruh isi di dalam website tersebut.
Jadi Web Browser inilah yang nantinya akan digunakan untuk menampilkan halaman website yang sudah dibuat, Anda bisa menyesuaikan tampilan dengan beberapa device dan melakukan pengecekan apakah sudah responsive atau belum. Walaupun secara sekilas kita melihat perbedaan tampilan pada beberapa Web Browser, namun kalau dilihat secara fungsinya tetap sama.
Asal Usul Bahasa Pemrograman HTML
Sebelum kita belajar dasar-dasar HTML, tentu tidak ada salahnya jika kita belajar sejarah tentang bahasa HTML. Perlu Anda ketahui bahwa bahasa HTML mulai dibuat pada tahun 1990. Bahasa HTML pertama kali dibuat oleh seorang ilmuwan bernama Tim Berners-Lee. Pada mulanya HTML dibuat dengan tujuan untuk memudahkan mengakses dokumen milik para ilmuwan. Sehingga mudah untuk bertukar dokumen satu dengan yang lainnya. Namun dengan perkembangan teknologi digital, Bahasa HTML (Hyper Text Markup Language) justru mampu menampilkan berbagai informasi melalui internet. Sehingga sekarang kita bisa menikmati akses informasi secara lebih leluasa.
Kode Dasar dan Istilah Dalam Bahasa Pemrograman HTML
Sebelum terlalu jauh belajar mengenai bahasa HTML, maka sebelum itu Anda perlu mengetahui apa saja kode dasar HTML. Kode-kode ini merupakan kode-kode dasar sebelum Anda belajar bahasa pemrograman yang levelnya lebih tinggi lagi.
Ada berbagai macam teknologi yang bisa digunakan untuk membuat definisi-definisi dari elemen sebuah website, contohnya seperti CSS, JavaScript, Flash, AJAX dan lainnya. Namun di level rendah halaman website cukup didefinisikan menggunakan HTML.
Berikut adalah kode dasar HTML yang perlu Anda ketahui:
| 1 | <html> |
| 2 | <head> |
| 3 | <title>Judul Laman</title> |
| 4 | <body> |
| 5 | <p>belajar kode HTML</p> |
| 6 | </body> |
| 7 | </head> |
| 8 | </title> |
Kode-kode di atas merupakan contoh dari kode-kode HTML. Di dalam kode HTML, kita akan mengenal istilah yang namanya tag dan elemen. Untuk membedakan antara tag dan elemen, maka bisa Anda bedakan dengan ciri-cirinya. Kalau tag dicirikan dengan tanda “<” di awal dan tanda “>” di akhir elemen. Kalau elemen itu sendiri adalah isi dari tag.
Selain tag dan elemen, kita pun akan mengenal yang namanya atribut. Sama hal nya dengan elemen, atribut merupakan isi dari tag yang berisi informasi tambahan. Untuk informasi lebih jelasnya, mari kita kenal lebih dalam bagian-bagian dari HTML ini secara lebih lengkap.
Penjelasan Mengenai Tag, Elemen dan Atribut Pada Bahasa Pemrograman HTML
Saat bersentuhan dengan bahasa HTML, maka kita tidak akan pernah lepas dari tag, elemen dan atribut. Ketiga hal ini merupakan bagian dari HTML yang saling berkaitan. Seperti yang telah dijelaskan sebelumnya, tag berfungsi sebagai penanda yang akan mengawali dan mengakhiri sebuah elemen.
Secara umum tag terbagi menjadi dua, yaitu tag pembuka dan tag penutup. Contoh tag pembuka adalah <html>, sedangkan tag penutup adalah </html>. Secara sekilas kedua tag ini strukturnya hampir sama, yang membedakan hanya pada tanda miringnya saja.
Setelah berkenalan dengan tag, maka selanjutnya Anda perlu berkenalan dengan elemen. Elemen merupakan isi dari tag. Contoh penggunaan elemen misalnya ketika kita akan membuat ukuran font pada sub judul atau heading pada tulisan di web kita. Saat pembuatan sub judul maka elemen yang digunakan adalah h1, h2, h3, h4 atau h5. Kode h merupakan kepanjangan dari heading.
Inilah cara penulisan kode untuk heading:
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
Ketika kita mengetikkan kode html seperti itu, maka di browser akan tampil ukuran font sub judul yang berbeda-beda. Beralih dari bahasan tentang element, maka sekarang kita bergerak untuk membahas mengenai atribut. Atribut merupakan informasi tambahan dari sebuah elemen. Untuk memasukkan atribut di kode HTML, maka kita perlu mengikuti aturan penulisan atribut yang meliputi:
- Menuliskan tanda sama dengan setelah nama atribut
- Penulisan atribut diawali tanda petik dan diakhiri juga dengan tanda petik
- Apabila kita menggunakan lebih dari satu atribut maka kita perlu memberi spasi agar berjarak satu sama lain
Struktur Penulisan Bahasa Pemrograman HTML
Setelah mengenal bagian-bagian bahasa HTML secara terpisah, maka saatnya kita menyatukan kesemuanya ke dalam struktur dokumen HTML yang utuh. Struktur dokumen HTML memiliki dua bagian, yaitu bagian head (section head) dan bagian body (section body).
Pada bagian header biasanya diawali dengan TITLE, yaitu bagian yang memuat judul pada halaman browser yang akan ditampilkan. Penulisan bagian header di dokumen HTML diapit oleh tag seperti ini; <head>…</head>.
Jika header memuat judul, maka bagian body memuat teks yang akan ditampilkan pada halaman browser. Selain teks, dapat juga memuat link gambar atau link lainnya yang ingin ditampilkan. Penulisannya hampir sama dengan penulisan header, <body>…</body>.
Contoh struktur penulisan HTML secara utuh:
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p align=”center”>Belajar HTML adalah langkah awal untuk belajar membuat website.</p>
</body>
</html>
Daftar Tag Pada Bahasa Pemrograman HTML Beserta Fungsinya
Setelah Anda tahu bagaimana membuat dokumen HTML secara utuh, maka Anda pun perlu menambah pengetahuan mengenai daftar tag pada HTML beserta fungsinya. Ini perlu Anda ketahui karena ketika Anda praktek langsung membuat website, maka Anda memerlukan variasi tag untuk beragam kebutuhan. Agar lebih jelas, maka kita akan melihat rinciannya di bawah ini:
Macam-macam Tag
<html>…</html> : Ini merupakan kode untuk memulai dan mengakhiri dokumen HTML
<head>…</head> : Kode ini berisi informasi umum mengenai halaman web yang akan dibuat
<title>…</title> : Tag yang satu ini berguna jika kita akan membuat judul
<body>…</body> : Untuk memasukkan semua informasi dalam berbagai bentuk, maka kita bisa menginputnya di dalam tag ini.
<b>…</b> : Digunakan jika ingin mengatur teks menjadi tebal
<i>…</i> : Digunakan jika ingin mengatur teks menjadi miring
<u>…</u> : Digunakan jika ingin mengatur teks bergaris bawah
<font> : Berfungsi mengubah gaya suatu huruf
<a>…</a> : Membuat link dokumen bisa menggunakan tag yang satu ini
<Img> : Jika ingin menampilkan gambar, maka Anda bisa memasukkannya ke tag ini
Itulah macam-macam tag yang bisa kita pilih untuk berbagai jenis pemakaian. Sebenarnya masih banyak lagi jenis-jenis tag yang lain. Macam-macam tag ini tidak perlu kita hafalkan semuanya, karena pada prakteknya kita bisa sambil melihat daftar. Jika sudah terbiasa menggunakan kode-kode HTML, maka kita akan mengingat dengan sendirinya.
Cara Membuat Halaman Website Pribadi
Jika Anda sudah mulai mengenal bahasa HTML, maka tidak ada salahnya jika Anda mulai membuat halaman website pribadi. Ingat, untuk membuat website sederhana, Anda hanya memerlukan aplikasi teks editor seperti notepad dan sebuah browser. Browser yang bisa dipilih bisa Internet Explorer, Mozilla, Chrome atau lainnya.
Langkah pertama bukalah aplikasi notepad di laptop atau komputer Anda. Setelah itu ketiklah kode-kode HTML dengan struktur yang lengkap seperti contoh sebelumnya. Agar lebih terstruktur dan lebih mudah dalam pengerjaannya, maka Anda perlu membuat perencanaan.
Apa saja yang perlu direncanakan dalam pembuatan website? Pertama kita perlu menentukan judul utama di website kita, kemudian tulis apa saja informasi yang akan kita sampaikan di website tersebut. Jika semua detailnya sudah kita rencanakan, maka barulah kita mulai eksekusi dalam bentuk kode-kode HTML. Untuk awal mencoba mulailah dengan kode-kode sederhana.
Setelah kode-kode HTML kita ketik dengan struktur dokumen HTML yang lengkap di notepad, maka jangan lupa untuk menyimpannya. Untuk menyimpan dokumen ini maka Anda harus memilih tipe penyimpanan html di pilihan Save as type di halaman Save as.
Apabila langkah-langkah di atas telah kita lakukan semua, maka langkah terakhir adalah melihat hasil file HTML yang kita buat. Dengan melihat hasilnya, kita baru bisa membuktikan apakah dokumen HTML kita berhasil dibuat dengan tepat atau tidak. Cara melihatnya sangat mudah sekali, Anda hanya perlu membukanya melalui browser.
Melengkapi dan Memperbaiki Website
Saran buat Anda para pemula yang baru belajar HTML adalah jangan takut untuk mencoba. Mengapa tidak perlu takut? Ini dikarenakan Anda bisa memperbaiki bahkan melengkapi kode-kode HTML Anda, sehingga website yang Anda buat semakin baik dan menunjang kebutuhan Anda akan sebuah website.
Elemen-elemen website tentunya sangat banyak sekali, namun Anda bisa memperbaikinya atau melengkapinya secara berkala. Elemen yang biasanya ada dalam halaman website terdiri dari judul, sub judul, gambar, tabel, list, link, form, bahkan Anda pun bisa menambahkan video ke dalamnya.
Membuat Tampilan Website Menjadi Lebih Menarik
Fungsi dari kita bisa menggunakan HTML tidak sebatas pada proses pembuatan web saja, tapi kita pun bisa menjadi web developer atau pengembang web. Misalnya saja membuat tampilan web menjadi lebih menarik. Sebuah halaman web akan tampil lebih menarik jika kita menyisipkan gambar-gambar yang sesuai dengan isi web. Biasanya gambar disisipkan di bawah judul utama, dan juga bisa disisipkan setelah subjudul. Untuk memasukkan atau menyisipkan gambar, maka Anda perlu meletakkan gambar dalam satu folder dengan dokumen HTML yang semula dibuat. Misalnya saja file gambarnya diberi nama “belajar-html”, maka Anda bisa membuat kode HTML seperti ini setelah elemen judul atau header.
<img alt=”belajar html” src=”belajar-html.png” height=”350” />
Saat memasukkan kode gambar seperti di atas, maka Anda hanya perlu menggunakan satu tag, yaitu <img/>. Sedangkan alt pada kode HTML di atas adalah keterangan kode untuk gambar yang akan terbaca pada mesin pencari.
Lalu, apa maksud src pada kode HTML gambar di atas? Kode src adalah kode yang menunjukkan nama file dalam satu folder dengan dokumen HTML. Tapi, bila gambar yang Anda masukkan berasal dari website lain, maka Anda perlu memasukkan alamat webnya secara lengkap. Dengan demikian gambar yang Anda masukkan akan terlihat di halaman website Anda.
Selain nama file, Anda juga perlu memperhatikan ukuran gambar. Mengapa demikian? Ini dikarenakan ukuran gambar pun harus kita masukkan dalam dokumen HTML. Agar gambar yang kita masukkan ukurannya proporsional, maka kita harus memilih salah satu antara ukuran height dan width. Jika melihat contoh di atas, maka ukuran yang dimasukkan adalah height.
Membuat Form Pada Halaman Website
Anda pasti pernah melihat website yang menampilkan form isian pendaftaran atau isian survey pada halaman websitenya. Mungkin salah satu dari Anda ada yang bertanya-tanya bagaimana proses pembuatannya. Ternyata, untuk membuat form isian seperti itu bisa Anda lakukan dengan kode-kode HTML.
Ada salah satu jenis tag yang membuat kita bisa membuat form isian seperti itu. Jenis tag HTML itu adalah <FORM>. Sebenarnya banyak sekali fungsi form pada sebuah website, bisa menampung aspirasi pembaca ataupun sebagai media pendaftaran. Selain tag <FORM>, Anda pun membutuhkan tag <INPUT> yang memiliki banyak type berdasarkan kebutuhan, dan tag <INPUT> ini diletakkan diantara <FORM>…</FORM>.
Demikianlah cara-cara singkat dan sederhana untuk belajar bahasa pemrograman HTML dasar untuk pemula. Supaya bisa cepat menguasai, tentunya Anda perlu banyak menggali informasi, dan yang paling penting harus mempraktekkannya.
[website-about]
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
