belajar html

Belajar HTML: Tutorial HTML Khusus Untuk Pemula

HTML (Hypertext Markup Language) sangat perlu Anda pelajari tetapi bukan sebatas pengertian HTML saja. Anda harus mengetahui seluk-beluk dari bahasa pemrograman yang satu ini jika ingin mahir menggunakannya. Untuk membantu Anda memulai mempelajari bahasa yang sering digunakan dalam pembangunan web ini, berikut telah kami rangkum informasi yang perlu Anda ketahui tentang HTML.

Mengenal Tentang HTML

Apa itu HTML?

Mengapa kita perlu mempelajarinya?

Kedua pertanyaan diatas sering muncul untuk mereka yang baru belajar membangun web.

belajar html
Belajar HTML: Tutorial Khusus Untuk Pemula

Berbeda dengan bahasa pemrograman, HTML tidak memiliki kemampuan untuk membangun fungsionalitas yang dinamis.

Lalu, bagaimana HTML ini bekerja dan seperti apa fungsinya? Langsung saja kita cari tahu jawabannya di bawah ini.

Apa Itu Pengertian HTML?                         

Mari kita mulai dari definisi dasarnya. HTML sendiri merupakan singkatan dari Hypertext Markup Language, suatu bahasa yang memungkinkan penggunanya untuk membuat serta menyusun paragraph, link, heading, maupun tautan dan blockquote pada sebuah halaman aplikasi dan web.

Fungsi dari HTML ini adalah untuk menampilkan informasi berupa teks, suara, video, gambar, dan lainnya.

Sejarah Tentang HTML

Bahasa markup standar ini dikembangkan oleh Tim Berners-Lee yang merupakan seorang ahli fisika di Swiss. Saat itu ia mempunyai ide tentang sistem hypertext dengan basis internet dan kemudian merilis versi pertama HTML pada tahun 1991. Karena kepopulerannya, HTML akhirnya dianggap sebagai standar web yang resmi sampai saat ini.

Bagaimana Cara Kerja HTML

Lalu, bagaimana cara kerja dari bahasa markup standar ini. Sebelumnya, perlu diketahui jika dokumen HTML adalah file dengan ekstensi .html atau .htm.

Anda bisa melihat ektensi file ini dengan memakai web browser apa saja termasuk Mozilla Firefox, Google Chrome, ataupun Safari. Browser tersebut dapat membaca file HTML dan membut pengguna bisa melihat serta membacanya di internet.

Umumnya, situs web menyertakan beberapa halaman HTML yang berbeda. Misalnya, beranda utama, halaman kontak, dan halaman “tentang kami”, yang ketiganya mempunyai dokumen HTML berbeda.

Masing-masing halaman tersebut terdiri dari sejumlah tags atau biasa juga disebut sebagai elements yang merujuk pada building block halaman web. Tag ini juga mempunyai hirarki tersendiri yang menyusun konten menjadi paragraph, heading, dan lainnya.

Kelebihan dan Kekurangan HTML

Sama halnya dengan berbagai hal lain, HTML juga memiliki beberapa keunggulan dan kekurangan yang membuatnya berbeda dari yang lain. Agar menguasai bahasa pemrograman ini dari awal, penting bagi Anda mengetahui hal ini agar semakin paham seluk-beluk dari bahasa standar web ini.

  1. Kelebihan HTML
    Mari kita mulai dari kelebihan yang dimiliki. Salah satu kelebihannya yang paling utama adalah bahasa ini dipakai secara luas dan mempunyai banyak sumber serta komunitas yang besar. Dengan ini, Anda akan lebih dimudahkan saat ingin mempelajari dan mendalami segala hal tentang HTML. Selain itu, HTML juga dapat dijalankan dengan mudah di setiap web browser.

    Kemudian, HTML juga mempunyai kelebihan lain yaitu tersedianya learning curve yang sederhana. Bukan hanya itu, bahasa markup ini juga konsisten dan rapi sehingga lebih mudah dipahami. HTML juga mudah dikombinasikan dengan bahasa backend seperti Node.js dan PHP. Dan yang tak kalah penting adalah HTML merupakan bahasa markup yang sepenuhnya gratis karena dikembangkan sebagai sebuah open-source project.

  1. Kekurangan HTML
    Meskipun hadir dengan berbagai kelebihan, HTML juga mempunyai beberapa kekurangan yang perlu Anda ketahui. Salah satunya adalah HTML tidak memungkinkan penggunanya untuk menjalankan logic. Sebagai gantinya, semua halaman web wajib dibuat terpisah meskipun memakai elemen yang sama. Selain itu, fitur-fitur baru terkadang tidak dapat dipakai secara cepat di sejumlah browser.

    Selanjutnya, HTML juga lebih sering dipakai pada halaman web statis saja. Jadi, untuk fitur dinamis biasanya Anda harus memakai bahasa lain seperti JavaScript dan PHP. Bukan hanya itu, terkadang perilaku browser tidak mudah untuk diprediksi. Contohnya, browser versi lama tidak selalu berhasil me-render tag yang lebih baru sehingga terjadi masalah.

Yang Harus Anda Pahami Saat Belajar HTML?

Setelah mengetaui lebih dalam mengenai apa itu HTML, sejarah, fungsi, beserta kelebihan dan kekurangannya pada informasi di atas, ini saatnya untuk lebih mendalami hal-hal penting terkait penggunaan HTML dalam prakteknya.

Untuk memudahkan Anda dalam mempelajari bahasa markup yang satu ini, berikut ini beberapa hal yang perlu Anda pahami beserta penjelasannya.

Pahami Apa yang Dibutuhkan untuk Mempelajari HTML

Pertama, Anda harus mempersiapkan beberapa hal terlebih dahulu untuk memulai. Untuk mempelajari bahasa HTML yang satu ini, Anda tentu harus menyiapkan browser terlebih dahulu seperti Chrome, Mozilla, dan lain sebagainya.

belajar html
Aplikasi Notepad Untuk Belajar HTML Dasar

Selanjutnya, Anda juga membutuhkan editor sederhana seperti Notepad pada Windows. Untuk menjalankan HTML, Anda tidak perlu menggunakan koneksi internet terlebih dahulu.

Pahami Soal Web Browser

Kedua, Anda  juga perlu memahami web browser terlebih dahulu. Web browser ialah sebuah aplikasi yang bisa dipakai untuk menampilkan dan mengakses halaman website.

Browser akan menerjemahkan halaman web yang dirikim melalui HTTP atau Hypertext Transfer Protocol supaya dapat dipahami manusia. Meski setiap web browser mempunyai tampilan serta fitur yang berbeda, fungsinya secara umum adalah sama.

Pelajari Tentang Element, Tag, dan Atribut

Ketiga, penting juga untuk mempelajari element, tag, serta atribut.

Element pada HTML ini membentuk suatu struktur dan memberitahu browser mengenai halaman website yang akan diakses. Umumnya element ini terdiri dari tag pembuka, konten, kemudian tag penutup.

Tag disini berfungsi menandai sebuah element pada bagian awal maupun akhir menggunakan tanda “<” dan “>”.

Element

Element terdiri dari semua kode termasuk tag pembuka <em> dan juga tag penutup </em>.

Berikut untuk contoh codingnya: 

<em>Contoh element.</em>

Maka hasilnya adalah seperti dibawah ini: 

Contoh Element. 

Di dalam sebuah element, kita juga bisa membuat sebuah sub judul atau heading. Dalam hal ini, Anda akan menggunakan h1, h2, h3, dan seterusnya. Untuk menulis kode h1 atau heading 1, misalnya, Anda bisa membuatnya seperti ini:

<h1> HTML untuk pemula </h1>

<h2> HTML untuk pemula </h2>

<h3> HTML untuk pemula </h3>

<h4> HTML untuk pemula </h4>

<h5> HTML untuk pemula </h5>

Maka hasilnya akan seperti ini: 

HTML Untuk Pemula

HTML Untuk Pemula

HTML Untuk Pemula

HTML Untuk Pemula

HTML Untuk Pemula

 

Tag

Selanjutnya dalam belajar HTML, Anda juga perlu mempelajari tentang tag. Salah satu hal yang sering menjadi pertanyaan saat mempelajari tag adalah soal penggunaan huruf besar dan kecil dalam penulisan tag tersebut. Meskipun browser tidak mempermasalahkan tentang hal tersebut, penulisan tag umumnya memakai huruf kecil. Beberapa tag yang umum dipakai termasuk: <html>, <title>, dan <body>.

Attribute

Kemudian Anda juga wajib mengetahui tentang attribute atau atribut. Ada beberapa aturan yang perlu Anda ketahui dalam penulisan sebuah attribute. Pertama, nama attribute harus diikuti dengan tanda sama dengan. Kedua, nilai attribute berada diantara dua tanda petik pembuka maupun penutup. Jika terdapat lebih dari satu attribute, maka diberi jarak menggunakan spasi.

Pahami Struktur HTML

Setelah memahami element pada HTML di atas, selanjutnya Anda dapat menggabungkannya ke dalam dokumen HTML. Dalam dokumen HTML tersebut terdapat struktur tertentu yang perlu Anda ketahui juga.

Dalam prakteknya, ada beberapa kode yang perlu Anda ketahui. Salah satunya adalah kode <!DOCTYPE html>, yaitu koden yang mendeklarasikan tipe dokumen apa yang dibuat.

Selanjutnya, ada juga kode <html></html> yang dikenal sebagai element utama sebab semua element ada di dalamnya.

Kemudian, ada <head></head> yang berfungsi memasukan konten yang tidak ingin Anda tampilkan. Konten tersebut bisa berupa deksripsi, CSS, keyword, dan sebagainya.

Ada juga <meta charset=”utf-8”>, yaitu kode yang berfungsi untuk memberitahu browser terkait pengkodean karakter yang sesuai dengan aturan UTF-8.

Langkah Membuat Halaman Website

Ini adalah bagian paling menyenangkan dalam belajar HTML, yaitu membuat halaman website pertama Anda. Setelah mengetahui dasar-dasar HTML di atas, Anda bisa mulai mencoba membuat halaman website dengan pengetahuan yang Anda ketahui. Perlu diingat bahwa ini akan berbeda dengan cara membuat halaman pada WordPress atau Blogspot. Berikut ini langkah-langkah yang perlu Anda ikuti untuk membuat halaman website pertama Anda.

Pertama, Anda harus menyiapkan browser dan text editor seperti yang sudah dibahas diatas.

Kedua, buka text editor tersebut dan buat halaman baru.

Selanjutnya, Anda bisa mulai menulis kode pada halaman baru tersebut. Jika kode telah selesai ditulis, simpan file tersebut ke dalam format HTML. Untuk melihat hasilnya, Anda bisa membuat file tersebut melalui browser.

Lengkapi Halaman Website Tersebut

Jika Anda sudah mencoba untuk membuat halaman website sederhana, Anda bisa melanjutkan dengan mencoba langkah-langkah lanjutan dengan menambahkan beberapa elemen seperti yang umumnya ada di halaman website.

Biasanya sebuah halaman website terdiri dari judul, subjudul, gambar, link, list, komentar untuk code, tabel, dan form. Disini Anda mulai bisa berkreasi untuk membuat halaman menjadi lebih menarik.

Menambahkan list dan link

Saat mempelajari HTML, Anda juga perlu mengetahui cara untuk melengkapi halaman website tersebut dengan menambahkan list.

Untuk menambahkan list tersebut, Anda bisa menggunakan kode berikut ini: <li></li>. Selanjutnya, untuk menambahkan link, Anda membutuhkan attribute href yang tersedia dalam element <a>.

Contohnya ialah:

Ini adalah contoh Link <a href=”https://bootup.ai/”>Sekolah Koding Terbaik</a>

Maka hasilnya adalah: 

Ini adalah contoh Link Sekolah Koding Terbaik

 

Dengan ini, halaman Anda akan tersedia tautan ke halaman yang dituliskan tersebut.

 

Menambahkan gambar dan tabel

Untuk membuat tampilan halaman yang lebih menarik, Anda juga bisa menambahkan gambar pada halaman website yang Anda buat.

Pada contoh kali ini, gambar akan disisipkan di bawah judul, yaitu elemen h1. Sebelumnya, Anda harus menaruh gambar dalam satu folder yang sama dengan file HTML yang Anda buat.

Element yang digunakan dalam hal ini adalah <img/>.

Selain gambar, Anda juga bisa memasukan tabel pada halaman website Anda dengan menggunakan HTML.

Ada beberapa kode yang bisa digunakan dalam pembuatan tabel seperti <table border=”1”>, <tr></tr>, dan <td></td>. Untuk memudahkan dalam mengetahui fungsi kode yang ada, biasanya dapat ditambahkan keterangan atau komentar di atas kode yang sedang dibuat tersebut.

Baca Juga: Cara Kerja Pemrograman Web dan Tahapan dalam Mempelajarinya

Setelah Anda memahami seluruh informasi yang sudah dijelaskan di atas, Anda tentu semakin tertarik untuk mendalami HTML dan menguasainya.

Untuk itu, Anda bisa mencari beberapa tutorial lain untuk membuat HTML sederhana terlebih dahulu sembari mengasah kemampuan Anda. Terakhir, semoga informasi di atas bermafaat untuk Anda dan jangan patah semangat dalam terus mempelajari coding website HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *