Last Updated on August 11, 2023 by
Belajar bahasa pemrograman HTML adalah langkah awal yang perlu dilakukan jika Anda akan membuat website sendiri. Hal tersebut disebabkan karena HTML yang adalah singkatan dari Hypertext Markup Language itu merupakan dasar dari sebuah halaman website di internet.
Berikut ini akan dijelaskan mengenai panduan belajar bahasa pemrograman dari dasar untuk pemula secara lengkap.
Daftar Isi
Mengapa Harus Belajar Bahasa Pemrograman HTML?
HTML merupakan bahasa pemrograman paling dasar yang digunakan untuk membangun sebuah halaman website. HTML ini pertama kalinya muncul di era 90-an dan hingga kini terus menerus berkembang. Pada dasarnya, HTML ini adalah jenis coding yang hingga kini masih sering dijadikan sebagai materi utama pembelajaran web kode khususnya untuk pemula.
Walaupun saat ini sudah banyak web host yang menawarkan beragam aplikasi dan program agar proses pembangunan sebuah website dapat lebih mudah karena berjalan secara otomatis. Namun belajar bahasa pemrograman HTML masih sangat bermanfaat, khususnya bagi Anda yang masih awam dan tertarik untuk mencoba membuat website sendiri.
Setidaknya ada dua alasan utama mengapa harus belajar pemrograman HTML, yang pertama adalah kebutuhan untuk mengedit atau melakukan tweak halaman website. Meskipun Anda sudah menggunakan program atau editor online ketika membuat website, atau bahkan walau Anda membeli website yang sudah ada, namun ada kalanya Anda juga perlu mengedit website tersebut.
Sementara itu, alasan kedua pentingnya belajar bahasa pemrograman HTML adalah mendapatkan pengetahuan coding, termasuk agar Anda dapat membuat sebuah halaman website yang bersih dan rapi, atau memperbaiki halaman rusak. Nah, maka dari itu, agar lebih mudah belajar HTML, simak saja panduan lengkap di bawah ini.
Panduan Belajar Bahasa Pemrograman HTML
Mempersiapkan Tool untuk Belajar HTML
Langkah pertama yang perlu dilakukan untuk belajar bahasa pemrograman HTML adalah mempersiapkan segala tool (peralatan) yang akan Anda gunakan, diantaranya seperti berikut ini.
Browser
Browser merupakan tool pertama yang Anda butuhkan jika ingin belajar pemrograman HTML. Anda bisa menggunakan berbagai macam browser, misal seperti Chrome, Mozilla dan lain sebagainya.
Halaman editor sederhana
Selain browser, untuk belajar bahasa pemrograman HTML, Anda juga membutuhkan sebuah halaman editor sederhana. Misalnya seperti, jika Anda menggunakan Windows maka Anda bisa menggunakan Notepad. Hanya saja, agar lebih mudah mengelola kode HTML, disarankan Anda menggunakan Notepad++.
Notepad++ adalah sebuah aplikasi editor teks yang berukuran ringan namun kaya fitur, misalnya seperti fitur pewarnaan code (syntax highlighting) sehingga Anda akan lebih mudah pada saat menulis berbagai macam code HTML. Sedangkan, untuk sistem operasi selain Windows, misalnya seperti Linux, Anda bisa menggunakan Pico dan untuk Mac, Anda dapat menggunakan TextEdit.
Memahami Fungsi Web Browser
Seperti yang sudah disebutkan sebelumnya, web browser adalah salah satu perangkat utama yang dibutuhkan jika Anda ingin belajar bahasa pemrograman HTML. Web browser bagai sebuah compiler dan interpreter pada HTML. Browser akan menerjemahkan halaman website yang dikirim lewat HTTP (Hypertext Transfer Protocol) ke dalam tampilan agar dapat dipahami oleh manusia.
Mengetahui Cara Menjalankan File HTML
Setelah mengetahui fungsi dari sebuah web browser, dan setelah selesai proses penginstalan web browser serta halaman editor sudah tersedia, maka selanjutnya, Anda perlu mempelajari bagaimana cara menjalankan file HTML dari web browser. Agar lebih mudah untuk mengakses file, maka buat folder khusus di Drive D. Folder tersebut akan menjadi tempat seluruh halaman HTML yang akan Anda buat tersebut.
Setelah itu, lanjutkan dengan membuka halaman editor Notepad++ atau aplikasi editor teks dan cobalah ketik teks contoh ini:
Selamat datang di website kami!
Lalu, lanjutkan dengan menyimpan teks di atas sebagai hello.html pada folder BelajarBahasaHTML. Kemudian, jalankan file hello.html Anda tersebut dengan cara double klik file tersebut, atau klik kanan.
Setelah itu pilih “Open With” selanjutnya jika Anda menggunakan web browser maka pilih Firefox. Kini, file HTML tersebut sudah dapat berjalan, meski belum ada satupun kode HTML di dalamnya.
Memahami Komponen Dasar HTML
Setelah Anda berhasil menjalankan sebuah file HTML pada web browser, Anda juga perlu mengetahui beberapa komponen dasar HTML, yaitu Tag, Elemen dan Atribut.
Apa yang dimaksud Tag pada HTML?
Sebagai sebuah bahasa pemrograman, maka HTML membutuhkan kode khusus agar web browser tahu fungsi dari teks tersebut, apakah untuk paragraf, list, gambar, link atau lain sebagainya. Nah, itulah yang disebut sebagai tag dalam HTML.
Hampir semua tag yang ada dalam HTML itu ditulis secara berpasangan, misal seperti tag pembuka dan tag penutup, sementara itu, di tengah tag ada objek yang akan dikenai perintah tag tersebut. Dalam hal ini, objek bisa berbentuk, teks, gambar ataupun video.
Penulisan tag berada di antara dua kurung siku, contohnya seperti “<” dan “>”.
Jadi, seperti ini format penulisan tag dalam HTML:
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
Contohnya, seperti berikut ini:
<p> Ini adalah sebuah paragraf </p>
<p> merupakan tag pembuka paragraf, sehingga dalam contoh tersebut p adalah tag untuk paragraf, sedangkan </p> merupakan tag penutup paragraf. Yang menjadi pembeda dengan tag pembuka terletak dari tanda forward slash (/).
Namun, jika Anda lupa memberi penutup tag, pada umumnya browser tidak akan terlalu memperdulikan kesalahan tersebut dan tetap akan menampilkan hasilnya seperti Anda menuliskan tag dengan format yang benar. Tapi biasanya, hal tersebut malah akan membuat Anda semakin bingung.
Apa yang dimaksud dengan Elemen pada HTML?
Element merupakan isi dari tag yang ada diantara tag pembuka dan penutup, termasuk tag itu sendiri dan jika ada atribut yang dimilikinya. Contohnya seperti:
<p> Ini adalah sebuah paragraf </p>
Perlu diketahui pula, bahwa element bukan hanya untuk teks saja, namun juga bisa digunakan untuk tag lain. Contohnya seperti:
<p> Ini adalah sebuah <em>paragraf</em> </p>
Apa yang dimaksud dengan Atribut pada HTML?
Atribut merupakan informasi tambahan yang diberikan kepada tag. Ada berbagai informasi tambahan yang termasuk atribut diantaranya seperti, instruksi untuk warna, besar huruf dan lain sebagainya. Setia atribut pada HTML memiliki pasangan nama dan nilai yang penulisannya seperti berikut ini name=”value”.
Contoh kode HTML:
<a href=”https://www.belajarprogramming.com”> ini adalah sebuah link</a>
Pada kode HTML diatas, href=”https://www.belajarprogramming.com” adalah atribut. href merupakan nama dari atribut, dan https://www.belajarprogramming.com adalah value atau nilai dari atribut tersebut.
Perlu diketahui pula, bahwa tidak semua tag membutuhkan atribut, namun biasanya Anda akan lebih sering melihat sebuah tag dengan atribut, apalagi atribut id dan class yang memang sering dipakai memanipulasi halaman web, baik itu yang menggunakan CSS ataupun JavaScript.
Mengenal Struktur Dasar HTML
Ada beberapa struktur dasar HTML yaitu DTD atau DOCTYPE, tag html, tag head, dan tag body. Agar Anda lebih mudah memahaminya, maka bukalah Notepad++ lalu ketikkan kode berikut ini:
Contoh struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title dari situs webku</title>
</head>
<body>
<p>Selamat Datang di Website Kami!</p>
</body>
</html>
Save sebagai halaman.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan lalu pilih Open With dan kemudian pilih Firefox.
DTD atau DOCTYPE
Seperti yang bisa Anda lihat, bahwa tag paling awal dari contoh HTML tersebut merupakan DTD atau DOCTYPE. DTD merupakan singkatan dari Document Type Declaration dan fungsinya adalah untuk memberi tahu pada web browser mengenai dokumen yang akan diproses.
DTD sebenarnya memiliki begitu banyak versi dan itu semua tergantung pada versi HTML yang Anda gunakan. Jika dilihat dari contoh diatas, maka DTD yang digunakan adalah versi HTML 5, sebab sebelum versi ini DTD terdiri dari teks panjang yang sangat sulit untuk dihafal.
Tag <html>
Kemudian, pada contoh diatas, Anda juga akan menemukan tag <html>. Tag tersebut adalah sebuah tag pembuka dari keseluruhan halaman sebuah situs web. Semua kode HTML tersebut harus ada di dalam tag tersebut
Tag <head>
Selanjutnya, setelah itu, ada elemen pada tag <head>. Tag tersebut umumnya berfungsi sebagai definisi halaman, misalnya seperti kode CSS, JavaScript, dan lain sebagainya yang tidak tampil pada browser. Seperti yang terlihat pada contoh tersebut, tag <title> berfungsi untuk menampilkan title dari sebuah halaman web., yang biasanya diletakkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Situs Webku’ akan ditampilkan pada tab browser.
Tag <body>
Selanjutnya, pada tag <body> maka akan berisi semua elemen yang akan tampil dalam sebuah halaman web, misalnya seperti paragraf, tabel, link, gambar, dan lain sebagainya. Tag body tersebut ditutup dengan </body>. Umumnya, sebagian besar waktu Anda nantinya akan dihabiskan di dalam tag <body> ini, pada saat Anda akan membuat sebuah website.
Membuat Paragraf dalam HTML
Tag p
HTML menyediakan sebuah tag khusus yang akan berfungsi sebagai pembuat paragraf. Penulisannya menggunakan huruf p, contohnya seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>title dari situs webku</title>
</head>
<body>
<p>ini adalah paragraf pertama</p>
<p>ini adalah paragraf kedua</p>
</body>
</html>
Tag Break (<br>)
Selain p, ada cara lain untuk memisahkan kedua paragraf yaitu dengan menggunakan tag <br>. Tag tersebut merupakan singkatan dari break.
Contoh penggunaan tag <br>:
<!DOCTYPE html>
<html>
<head>
<title>title dari situs webku</title>
</head>
<body>
ini adalah paragraf pertama
<br />
ini adalah paragraf kedua
</body>
</html>
Jika tag tersebut Anda jalankan, maka hasilnya hampir sama dengan menggunakan tag <p>. Hanya saja, fungsi sebenarnya dari tag <br> bukan untuk pembuatan paragraf, melainkan untuk memisahkan bagian teks dengan bagian teks lainnya. Jadi, ketika struktur paragraph yang Anda butuhkan, maka tetap gunakan tag <p>.
Membuat Judul dalam HTML
Selain paragraph ada juga tag khusus yang membuat Anda bisa membuat judul dalam HTML atau yang dikenal dengan istilah heading. Tentunya nantinya, heading tersebut akan terpisah dari paragraf. Dalam HTML, tag heading juga terdiri dari beranekar ragam tingkatan, tepatnya 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.
Secara default tag tersebut akan langsung tampil pada web browser dengan huruf yang sudah ditebalkan. Tampilan dari tag header tersebut juga akan dibuat secara bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> paling kecil.
Perlu diketahui pula, bahwa Search Engine seperti Google akan memberi nilai lebih pada bagian heading dari sebuah situs web. Jadi, semakin tinggi tingkat heading maka akan semakin tinggi pula penekanan pada search engine. Tag <h1> dianggap lebih memiliki nilai dari pada <h2>. Oleh sebab itu Tag <h1> umumnya digunakan untuk judul dari sebuah konten / artikel.
Membuat Daftar/List dalam HTML
Tag list dalam HTML terdiri dari 2 jenis, yaitu ordered list dan unordered list. Pada tag list yang beraturan (ordered list) akan ditampilkan dengan angka atau huruf, sementara itu untuk tag list yang tidak beraturan (unordered list) akan ditampilkan dengan bulatan ataupun simbol kotak.
Pada ordered list menggunakan tag <ol> sedangkan pada unordered list menggunakan tag <ul> contohnya seperti :
<!DOCTYPE html>
<html>
<head>
<title>cara menggunakan tag list </title>
</head>
<body>
<h1>daftar menu</h1>
<ol>
<li>nasi goreng</li>
<li>mie goreng</li>
<li>bakso solo</li>
<li>soto ayam</li>
<li>rawon</li>
</ol>
</body>
</html>
Lalu, jika Anda ingin menggunakan unordered list, maka Anda tinggal mengganti tag dari <ol> menjadi <ul>, contohnya seperti:
<!DOCTYPE html>
<html>
<head>
<title>cara menggunakan tag list </title>
</head>
<body>
<h1>daftar menu</h1>
<ul>
<li>nasi goreng</li>
<li>mie goreng</li>
<li>bakso solo</li>
<li>soto ayam</li>
<li>rawon</li>
</ul>
</body>
</html>
Membuat link dalam HTML
Huruf H pada HTML berarti Hypertext merupakan istilah agar sebuah teks yang pada saat di klik akan langsung pindah ke halaman lain. HTML menggunakan tag <a>untuk keperluan ini. Link ditulis menggunakan <a> pada dasarnya adalah singkatan dari anchor (jangkar).
Perlu diketahui pula, bahwa pada setiap tag <a> umumnya akan memiliki sebuah atribut href singkatan dari hypertext reference, yang mana href tersebut adalah alamat yang dituju.
Alamat absolut
Alamat absolut adalah link ke alamat lain di internet. Untuk membuat alamat absolut maka Anda perlu menuliskan alamat link secara lengkap menggunakan http://www.
Alamat relatif
Alamat relatif adalah link yang masih ada di dalam situs yang sama. Untuk membuat alamat relatif, maka Anda cukup mencantumkan alamat file yang dituju relatif kepada file saat ini.
Menambahkan Gambar dalam HTML
Jika Anda ingin menambahkan gambar dalam HTML, maka Anda perlu memahahi penggunaan dua jenis atribut berikut ini:
Atribut SRC
Atribut src merupakan singkatan dari source yang isinya adalah alamat dari gambar yang akan Anda tampilkan pada HTML tersebut. Alamat dari gambar tersebut bisa berupa alamat absolut ataupun relatif. Jika Anda ingin menerapkan atribut src ini pada HTML maka Anda hanya perlu menyediakan sebuah gambar kemudian tempat gambar tersebut dalam sebuah folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, ataupun GIF.
Atribut Alt
Selain atribut src, ada pula atribut alt yang merupakan singkatan dari alternative description. Atribut ini digunakan sebagai keterangan dari gambar apabila gambar tersebut gagal ditampilkan oleh browser. Atau jika web browser telah dilakukan pengaturan untuk tidak menampilkan gambar.
Selain itu, alt juga memiliki peran penting pada mesin pencari, contohnya seperti Google. Hal tersebut disebabkan karena cara kerja yang dilakukan Google adalah hanya melakukan index seluruh situs dengan proses tulisan yang ada. Maka dari itu, Google hanya akan dapat mengetahui gambar dari deskripsi yang ditulis menggunakan atribut alt.
Atribut width dan height
Sementara itu, ada pula atribut width dan height yang memungkinkan Anda untuk menentukan ukuran dari gambar yang akan ditampilkan pada sebuah website. Jika Anda ingin mempertahankan proporsi gambar, namun tetap mengubah gambar menjadi besar/kecil, maka Anda hanya perlu memilih salah satu atribut saja, apakah itu width atau height saja, tidak perlu keduanya.
Contohnya seperti, jika Anda ingin menerapkan atribut width=500px maka Anda tidak perlu mencantumkan ukuran height yang Anda inginkan, sebab web browser yang Anda gunakan akan secara otomatis menghitung tinggi dari gambar tersebut agar tetap terlihat proporsional.
Itulah sekilas tentang belajar bahasa pemrograman HTML yang diulas secara lengkap dari dasar agar lebih mudah dipahami oleh pemula yang ingin mempelajari HTML secara otodidak.
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.
