Bagi pemula yang ingin belajar menjadi web developer, HTML adalah bahasa markup yang wajib dipelajari. Selain menjadi bahasa standar untuk membuat website, HTML juga cukup mudah dipahami oleh para pemula.
Setelah menguasai HTML, biasanya web developer pemula akan mempelajari bahasa pemrograman lain sesuai dengan pilihan karirnya. Misalnya CSS dan Javascript untuk yang memilih berkarir sebagai front-end developer atau PHP dan C# jika ingin menjadi back-end developer.
Apapun pilihanmu nantinya, kamu wajib menguasai HTML sepenuhnya sebelum melangkah lebih jauh. Untuk itu, yuk simak penjelasan tentang pengertian, fungsi, dan cara membuat HTML di artikel ini!
Apa Itu HTML?
HyperText Markup Language atau yang dikenal dengan HTML adalah bahasa markup yang digunakan oleh para web developer untuk membuat website. Dalam HTML ada atribut (tag) tertentu yang memberikan instruksi pada browser untuk menampilkan berbagai konten seperti teks, gambar, video, dan lainnya.
Walau dapat menampilkan berbagai konten, HTML hanya ditulis menggunakan teks dan simbol. Dengan kata lain, kamu tidak bisa menambahkan konten multimedia secara langsung seperti menulis di Microsoft Words atau Google Docs.
Untuk menambahkan konten, kamu harus mengikuti aturan dan struktur khusus yang terdapat dalam American Standard Code for Information Interchange (ASCII).
Fungsi HTML
Pada awalnya HTML diciptakan untuk membantu para ilmuwan di Komisi Eropa untuk Penelitian Fisika Nuklir (CERN) berbagi dokumen hasil penelitian. Seiring berjalannya waktu, HTML mulai digunakan untuk mengembangkan sebuah website seperti membuat struktur halaman website, membuat hyperlink, menambahkan konten, mengatur format dan tata letak, serta menandai teks.
Membuat Struktur Halaman Website
HTML adalah dasar utama untuk membuat struktur halaman website yang dapat memuat beberapa bahasa pemrograman seperti CSS dan Javascript. Dengan menggunakan HTML, CSS, dan Javascript, seorang web developer bisa membuat website yang tampilannya menarik dan dinamis.
Membuat Hyperlink
Fungsi HTML yang kedua adalah untuk membuat hyperlink. Hyperlink sendiri merupakan fitur dalam website yang bisa membantu pembaca berpindah dari satu halaman ke halaman lainnya melalui sebuah link yang disematkan. Tak hanya itu, hyperlink juga memudahkan pembaca berpindah ke website lain dengan cepat.
Menambahkan Konten ke Website
Fungsi HTML yang selanjutnya adalah menambahkan konten multimedia seperti gambar, video, animasi, infografis, teks, dan konten lainnya ke website. Melalui konten-konten ini, kamu bisa menyampaikan informasi dengan lebih menarik sehingga pembaca betah nongkrong di website-mu.
Mengatur Format dan Tata Letak konten Website
Dengan HTML kamu juga bisa mengatur format serta tata letak konten dalam website. Misalnya mengatur posisi gambar, mengubah ukuran huruf, memilih warna huruf, mengganti jenis huruf, dan masih banyak lagi.
Penanda Teks dan Bagian Website
Terakhir, kamu bisa menandai teks dengan format tebal, miring, atau memberikan garis bawah agar teksnya mudah dikenali. Di samping itu, HTML juga bisa menandai bagian tertentu dalam website seperti bagian header, body, navigation, dan footer.
Struktur HTML
Sebagai sebuah bahasa, HTML harus ditulis menggunakan struktur dasar yang telah ditentukan oleh ASCII. Struktur HTML ini terdiri dari lima elemen yang membentuk suatu kesatuan. Berikut ini adalah lima elemen tersebut:
<!Doctype>
<!DOCTYPE> adalah elemen yang bertugas memberi tahu browser tentang versi HTML yang digunakan. Saat ini, versi HTML yang banyak digunakan adalah HTML 5, namun selain itu ada juga versi lain seperti HTML 2.0, HTML 3.0, HTML 4.0, hingga HTML 4.01.
<html>
Elemen <html> berguna untuk menyampaikan informasi kepada browser bahwa dokumen yang sedang ditampilkan adalah dokumen HTML. Selain itu, elemen ini bisa juga menjadi root dari halaman HTML dan XHTML serta menjadi wadah (container) untuk semua tag yang ada di dokumen HTML.
<head>
<head> merupakan elemen yang terletak di antara <html> dan <body>. Fungsinya untuk menampung metadata dari dokumen HTML. Oleh karena itu, elemen ini tidak ditampilkan oleh browser kepada pengguna internet.
<title>
Seperti namanya, elemen <title> berfungsi untuk membuat judul dari sebuah halaman website. Biasanya para praktisi SEO menggunakan elemen ini untuk meletakkan keyword agar halaman website-nya mendapatkan peringkat yang tinggi di hasil penelusuran mesin pencari (SERP).
<body>
Elemen yang terakhir adalah <body> yang bertugas menampung berbagai atribut yang akan ditampilkan oleh browser. Misalnya seperti atribut <p> untuk menampilkan paragraf, atribut <img> untuk menampilkan gambar, dan lain sebagainya.
Elemen <body> harus berada di dalam elemen <html>, letaknya antara elemen <head> dan <html>. Dalam satu dokumen HTML, elemen <body> hanya bisa digunakan satu kali saja. Dengan kata lain, kamu harus memasukkan semua atribut yang akan ditampilkan oleh browser ke dalam elemen ini.
Cara Membuat HTML
Untuk memahami lima elemen dalam struktur HTML yang telah disebutkan sebelumnya, kamu harus membuat sebuah dokumen HTML. Nah, berikut ini langkah-langkah membuat HTML sederhana untuk pemula:
Menyiapkan Editor HTML
Langkah yang pertama, kamu harus menyiapkan software editor HTML terlebih dulu. Ada banyak software yang bisa kamu gunakan, mulai dari yang sederhana seperti Notepad atau Notepad++ sampai yang kompleks seperti Microsoft Visual Audio Code dan Adobe Dreamweaver.
Download software pilihanmu lalu install di komputer atau laptop. Setelah itu, buka software tersebut dan buat dokumen baru.
Membuat Struktur Dasar HTML
Setelah membuat dokumen baru, lanjutkan dengan membuat struktur dasar HTML. Struktur dasar ini harus disusun secara berurutan mulai dari <!Doctype>, <html>, <head>, <title>, hingga <body>.
Biar lebih jelas, berikut contoh penulisan struktur dasar HTML:
Membuat Judul Halaman
Selanjutnya, buat judul halaman pada elemen <title> yang terletak setelah elemen <head>. Judul ini akan ditampilkan pada title bar browser, jadi sebaiknya buat judul yang sesuai dengan konten.
Sebagai contoh, kamu bisa membuat judul “Tutorial HTML Untuk Pemula”. Jika judul ini dimasukkan pada struktur dasar HTML yang telah kamu buat, maka hasilnya akan jadi seperti ini:
Menambahkan Heading
Langkah selanjutnya, tambahkan atribut heading pada elemen <body> untuk menandai judul dan sub-judul dari halaman website yang kamu buat. Dalam HTML, kamu bisa menggunakan enam jenis heading, yaitu:
- Heading 1 <h1></h1>
- Heading 2 <h2></h2>
- Heading 3 <h3></h3>
- Heading 4 <h4></h4>
- Heading 5 <h5></h5>
- Heading 6 <h6></h6>
Misalnya kamu ingin menambahkan tiga buah heading pada struktur HTML yang tadi, cara penulisannya adalah sebagai berikut:
Membuat Paragraf
Setelah menambahkan heading, kamu bisa mulai membuat paragraf menggunakan atribut <p>. Pastikan atribut <p> ini terletak di elemen <body> agar bisa ditampilkan oleh browser. Supaya lebih jelas, berikut contoh penempatan atribut <p> dalam struktur yang telah kamu buat sebelumnya:
Mengatur Format Teks Paragraf
Terakhir, atur format teks paragraf yang telah kamu tambahkan. Untuk mengatur formatnya, kamu bisa menggunakan berbagai atribut seperti:
- <i>teks</i> untuk membuat teks menjadi miring
- <b>teks</b> untuk membuat teks tebal
- <u>teks</u> untuk membuat teks dengan garis bawah
- <del>teks</del> untuk membuat teks yang dicoret atau strikethrough text
- dan masih banyak lagi
Berikut contoh penulisannya pada dokumen HTML:
Contoh HTML
Berikut ini adalah beberapa contoh HTML dengan berbagai atribut serta tampilannya di browser.
-
Contoh HTML Teks Selamat Datang
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Teks Selamat Datang</title>
</head>
<body>
<h1>Selamat Datang di Website Digitaloka</h1>
</body>
</html>
Saat kode HTML di atas ditampilkan oleh website, hasilnya akan jadi seperti ini:
-
Contoh HTML Bahan-Bahan Nasi Goreng Spesial
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Bahan-bahan Nasi Goreng Spesial</title>
</head>
<body>
<h1>Bahan-bahan Nasi Goreng Spesial</h1>
<b>Bahan-bahan:</b>
<ul>
<li>Garam secukupnya</li>
<li>1 Buah telur ayam</li>
<li>Bawang putih</li>
<li>Bawang merah</li>
<li>Tomat</li>
<li>Nasi satu porsi</li>
</ul>
</body>
</html>
Berikut tampilan website untuk kode HTML di atas:
-
Contoh HTML Paragraf Singkat
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Paragraf Singkat</title>
</head>
<h1>Paragraf Singkat</h1>
<body>
<p>Web hosting adalah sebuah layanan yang digunakan untuk menyimpan semua data website di internet agar bisa diakses oleh pengguna internet. Data-data yang disimpan tidak terbatas pada gambar dan teks saja, tetapi juga kode HTML, video, email, database, aplikasi, script, plugin, dan lain sebagainya.</p>
</body>
</html>
Tampilan kode HTML lorem ipsum pada website adalah sebagai berikut:
Rekomendasi Tempat Belajar HTML Untuk Pemula
Saat ini ada banyak sekali tempat belajar HTML untuk pemula yang gratis di internet. Tentunya setiap tempat belajar memiliki materi dan cara penyampaian yang berbeda-beda. Berikut ini lima rekomendasi tempat belajar HTML yang berkualitas dan terpercaya:
Udemy
Udemy adalah sebuah website untuk belajar HTML dari nol sehingga cocok bagi para pemula. Materi pembelajarannya diberikan melalui video, artikel, dan juga pelatihan praktis yang menarik. Dengan begitu, kamu bisa belajar membuat HTML kapan saja dan di mana saja.
W3Schools
W3Schools dikenal sebagai website belajar HTML dengan tutorial yang lengkap dan juga mudah dipahami. Materinya diberikan secara terpisah berdasarkan topik seperti Elemen HTML, Format Teks, Link, Media, dan lain sebagainya.
Di samping itu, W3Schools juga memberikan fasilitas praktik langsung yang bisa kamu manfaatkan untuk mempraktekkan materi yang telah dipelajari.
CodeAcademy
Di kalangan web developer pemula, CodeAcademy terkenal sebagai tempat belajar HTML yang efektif sekaligus menyenangkan. Setiap materi dilengkapi dengan platform interaktif, video, dan ujian.
Tak hanya itu, CodeAcademy juga membuat forum yang menjadi tempat berkomunikasi dan berbagi pengetahuan antara sesama pengguna. Kamu bisa memanfaatkan forum ini untuk mengatasi kesulitan yang dihadapi saat belajar HTML.
CodeWars
Website yang satu ini merupakan tempat belajar HTML yang cukup menantang karena materinya dibagi menjadi beberapa level. Setiap level memberikan tantangan tertentu yang dirancang khusus untuk menguji skill programming setiap penggunanya.
FreeCodeCamp
Di website FreeCodeCamp kamu bisa belajar konsep dasar HTML dan materi lainnya secara efektif. Selain itu, kamu juga bisa meningkatkan kredibilitas sebagai seorang web developer dengan mengikuti program sertifikasi.
Apa Perintah Yang Paling Pertama dalam Mengawali Pembuatan HTML?
Untuk mengawali pembuatan HTML kamu bisa menggunakan perintah <!Doctype> lalu dilanjutkan dengan perintah <html>. Dengan menggunakan perintah <html> kamu memberi tahu pada browser bahwa halaman yang kamu unggah berisi kode HTML.
HTML Merupakan Singkatan Dari?
HTML merupakan singkatan dari HyperText Markup Language. Banyak orang yang keliru menganggap HTML sebagai bahasa pemrograman. Padahal sebenarnya, HTML merupakan bahasa markup yang menjadi bahasa standar untuk membuat sebuah halaman website.
Penutup
HTML adalah bahasa standar yang digunakan untuk membuat sebuah halaman website. Oleh karena itu, setiap orang yang ingin menjadi web developer wajib menguasai HTML sebelum mempelajari bahasa pemrograman yang lainnya.
Kamu bisa belajar membuat HTML melalui berbagai website atau kursus online yang tersedia di internet secara gratis. Saat ini, website belajar HTML tersebut telah dilengkapi dengan fitur praktik real-time untuk mempraktekkan materi yang kamu pelajari.
Referensi:
- https://itkoding.com/struktur-dasar-html/
- https://www.domainesia.com/berita/html-adalah
