Untuk Anda yang bercita-cita menjadi seorang web developer maka langkah pertama yang perlu Anda lakukan adalah memahami HTML. HTML adalah bahasa markup dasar yang akan sering Anda gunakan ketika berhubungan dengan pembuatan web.
Apa itu HTML?
HTML adalah singkatan dari Hypertext Markup Language, secara singkat pengertian HTML adalah bahasa markup yang berguna untuk membuat sebuah struktur dari website. Nantinya HTML sendiri merupakan gabungan dari teks dan juga kode yang akan tersimpan dalam file yang berformat HTML.
Penggunaan HTML sendiri akan banyak Anda gunakan untuk membuat struktur dasar dari sebuah website. Seperti untuk membuat heading ataupun body dari website. Selain itu, HTML juga akan berguna untuk menyusun konten dalam website tersebut seperti mengatur paragraf, memasukan gambar atau video, memasukan hyperlink, dan lain-lain.
Komponen Dasar HTML
Pada penggunaanya nanti bahasa ini juga memiliki beberapa komponen dasar. Komponen-komponen ini akan sering Anda gunakan dalam pembuatan berbagai file dengan format HTML. Komponen dari HTML adalah:
1. Tag
Ini merupakan komponen yang berfungsi untuk memberikan perintah. Nantinya perintah ini akan ditandai dengan tag pembuka dan penutup. Tag HTML sendiri akan ditandai dengan tanda seperti ini <…> untuk tag pembuka, dan tanda </…> untuk tag penutup. Di dalam tanda tersebut nantinya akan berisi nama tag yang berfungsi menjadi perintah
Beberapa contoh tag yang akan sering Anda gunakan antara lain:
- <html> berfungsi untuk membuat halaman HTML
- <head> berguna untuk membuat judul atau deskripsi website
- <title> berfungsi untuk membuat judul website
- <body> berguna untuk membuat isi dari website
- <h1> – <h6> berfungsi untuk membuat heading 1 sampai heading 6
- <p> berfungsi untuk membuat paragraf
2. Elemen
Komponen lain dari HTML adalah elemen. Komponen ini merupakan gabungan dari sebuah kode yang ada pada sebuah tag. Mulai dari tag pembukan sampai tag penutup. Nantinya bagian elemen ini akan berisi teks dan simbol. Komponen elemen akan terdiri dari tag pembuka, isi tag, konten, dan tag penutup
Ini adalah contoh elemen <title>Koding Dasar</title>. Selain itu, sebuah elemen juga bisa terdiri dari elemen lainnya. Tentunya dalam hal ini juga akan terdapat banyak tag. Hal ini disebut dengan nested elements, contohnya adalah seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Koding Dasar</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Pada contoh di atas maka Anda akan melihat jika ada banyak elemen mulai dari <html>, <body>, <title>, sampai dengan </html>. Di dalamnya juga banyak terdapat berbagai macam tag.
3. Attribut
Komponen HTML yang selanjutnya adalah attribut. Ini merupakan komponen yang berfungsi untuk memberikan perintah tambahan pada elemen atau tag.
Sebagai contoh tag <img> yang berguna untuk menampilkan gambar. Maka biasanya juga akan menggunakan attribut src untuk mengambil lokasi gambar, atribut alt untuk memberikan teks alternatif. Dalam penggunaannya contoh seperti berikut
<img src=”foto.jpg” alt=“contoh foto”>Penggunaan atribut ini juga bisa Anda gabungkan dengan bahasa JavaScript. Sehingga website menjadi lebih interaktif dengan bisa melakukan aksi tertentu.
Cara Kerja HTML
Secara sederhana cara kerja dari HTML ini adalah sebagai berikut:
- Pertama Anda membuat dokumen dengan format HTML pada aplikasi text editor. Lalu file tersebut Anda simpan dalam format .html.
- Anda mungkin membutuhkan beberapa file serupa namun dengan kebutuhan berbeda. Hal ini karena pada sebuah website biasanya memiliki lebih dari satu halaman. Mungkin Anda akan membutuhkan dokumen ini untuk main page, halaman about us, halaman kontak, dan lain-lain.
- Nantinya semua file tersebut Anda simpan dalam folder yang sama.
- Untuk melihat semua hasil dari file yang sudah Anda buat maka Anda bisa menggunakan web browser. Namun jika Anda ingin menyebarkan web yang sudah Anda buat agar banyak orang yang bisa mengakses, maka langkah pertama yang perlu Anda lakukan adalah menyewa jasa web hosting. Lalu Anda mengupload semua file tadi ke web hosting tersebut.
- Nantinya web hosting tersebut akan memproses setiap kali ada request terhadap domain Anda. Web hosting akan mengirimkan data file milik website Anda ke web browser. Nantinya web browser akan memformat file HTML Anda menjadi tampilan halaman website. Nantinya orang yang mengakses akan lebih mudah untuk membaca informasi dari website Anda.
Fungsi HTML
Setelah mengetahui cara kerja dari HTML, maka hal selanjutnya yang perlu Anda ketahui adalah fungsi dari bahasa markup. Secara mendasar fungsi bahasa markup adalah sebagai struktur untuk website. Namun selain itu, bahasa markup ini juga memiliki beberapa fungsi lain seperti:
1. Membuat Halaman Website
Ini merupakan fungsi utama dari bahasa markup ini. Hampir semua website dibangun menggunakan file ini. selain itu, ketika Anda baru mulai mempelajari tentang bahasa markup web dasar maka bahasa inilah yang akan Anda pelajari pertama kali.
HTML merupakan bahasa markup yang pengaplikasiannya cukup mudah, sehingga penggunaanya tidak sulit, bahkan untuk pemula sekalipun.
2. Struktur Dasar Website
Penggunaan bahasa markup ini juga akan berfungsi sebagai struktur dasar dari sebuah website. Singkatnya, fungsi lain dari HTML adalah membuat pondasi dari sebuah website.
Nantinya, website yang Anda buat dengan menggunakan bahasa dasar ini bisa juga Anda gabungkan dengan beberapa bahasa pemrograman lain. Hal ini berguna untuk membuat tampilan website menjadi lebih menarik.
Sebagai contoh,untuk membuat tampilan website yang lebih menarik maka Anda bisa menggunakan CSS untuk bagian desain. Selain itu, jika Anda menginginkan website dengan banyak fitur maka Anda bisa menambahkan javascript pada website Anda.
3. Menciptakan Tanda dan Navigasi pada Halaman Website
Berkaitan dengan struktur website, maka fungsi HTML lainnya adalah sebagai penanda dan juga navigasi untuk halaman website. Nantinya bahasa markup ini akan memberikan tanda mana bagian heading dan mana body website.
Selain itu HTML ini juga akan memberikan tanda mana bagian header dan footer, dan lainnya.
Bahkan dalam pembuatan dokumen, HTML juga akan menjadi tanda mana bagian paragraf, mana teks yang dicetak tebal atau miring, dan lain-lain. Termasuk di dalamnya jika Anda membutuhkan gambar pendukung maka HTML juga bisa melakukan hal tersebut.
Sementara untuk masalah navigasi, HTML juga memungkinkan Anda untuk menciptakan alur penggunaan website. Salah satu contohnya adalah Anda bisa menggunakan hyperlink untuk teks yang Anda buat.
4. Memunculkan Multimedia Dalam Website
Seperti sudah dijelaskan sebelumnya, HTML juga berguna ketika Anda akan memasukan gambar pada website Anda. Dengan cara tersebut maka website Anda tidak akan membosankan karena tidak hanya berisi teks saja.
Baca Juga: Cara Membuat Website dengan Bootstrap 4 untuk Pemula
Penggunaan gambar juga bisa menjadi salah satu faktor pendukung bagi konten Anda. Selain gambar, file multimedia lain seperti audio ataupun video juga bisa Anda masukan dengan menggunakan HTML ini.
Mengenal Koding pada HTML
Untuk Anda yang sudah mulai penasaran dengan apa itu HTML, maka Anda bisa mencoba untuk melakukan koding dasar dengan menggunakan HTML. Untuk mulai membuat file HTML maka ada beberapa alat yang perlu Anda persiapkan.
Alat untuk membuat file ini adalah text editor dan untuk mengecek hasilnya Anda membutuhkan web browser.
Untuk text editor, ada beberapa aplikasi yang bisa Anda coba seperti notepad++ contohnya. Dan untuk web browser maka Anda bisa menggunakan Chrome atau Mozilla Firefox.
Koding Dasar HTML
Cara pertama yang Anda perlu lakukan untuk membuat file ini adalah membuka aplikasi text editor lalu mengetikan kode HTML untuk website yang akan Anda buat. Sebagai contoh, ini merupakan kode dasar yang bisa Anda coba buat:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Koding Dasar HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Setelah file tersebut Anda buat maka langkah selanjutnya save file tersebut dengan format .html. Pastikan jika format dan ekstension dari file tersebut adalah .html dan bukan .txt atau yang lain. Hal ini untuk menandakan jika file tersebut merupakan dokumen HTML dan untuk membuat web browser bisa mengenali file tersebut.
Selanjutnya yang perlu Anda lakukan adalah membuka file yang sudah Anda buat tadi. Buka file yang Anda buat tadi menggunakan web browser yang Anda gunakan. Dengan kode tadi, maka tampilan yang akan Anda dapatkan adalah seperti ini
Tampilan di atas merupakan tampilan website yang akan Anda hasilkan dengan kode yang sudah Anda buat sebelumnya. Tentunya, untuk membuat tampilan yang lebih kompleks, Anda juga membutuhkan kode yang lebih banyak dan kompleks juga.
Struktur Dasar HTML
Setiap file HTML maka akan tersusun dengan struktur dasar yang akan selalu Anda gunakan. Secara umum, struktur dasar tersebut akan terdiri dari tiga bagian yaitu deklarasi, Head, dan Body.
Jika menggunakan kode yang Anda buat tadi, maka struktur yang ada adalah sebagai berikut
1. Deklarasi
Struktur ini bertujuan untuk memberikan informasi tentang jenis dokumen tersebut. Pada kode yang tadi Anda buat, maka struktur deklarasi adalah:
<!DOCTYPE html>Kode tersebut akan memberikan informasi jika dokumen tersebut berformat HTML. Selanjutnya ada juga kode <html lang=”en”>. Ini merupakan kode dengan tag html dengan atribut lang=en. Kode ini memberikan informasi jika file HTML yang ada nantinya akan ditulis dalam format bahasa inggris
2. Head
Setelah struktur tentang deklarasi, maka struktur pada file HTML selanjutnya adalah bagian head. Ini merupakan bagian yang bertujuan untuk memberikan informasi tentang website tersebut. Pada kode yang tadi Anda buat maka bagian struktur head adalah:
<head>
<title>Koding Dasar HTML</title>
</head>
Biasanya, selain untuk memberikan title, pada bagian ini juga akan Anda gunakan jika Anda ingin menggunakan berbagai tag meta HTML untuk kebutuhan SEO.
3. Body
Struktur lainnya dari HTML adalah body. Ini merupakan bagian yang menjadi isi dari konten website Anda. Semua konten Anda nantinya akan Anda tulis pada bagian ini. jika menggunakan kode yang tadi, maka bagian ini terletak pada kode ini:
<body>
<p>Hello World!</p>
</body>
Ini adalah bagian inti dari konten website Anda. Pada bagian ini juga Anda akan banyak menggunakan banyak tag dan atribut untuk kebutuhan website Anda. Nantinya Anda mungkin akan membutuhkan tag untuk menampilkan gambar, tag untuk menampilkan tabel, dan lain-lain.
Sudah Tahu Apa itu HTML?
Itulah beberapa hal dasar tentang HTML yang perlu Anda ketahui. Penggunaan HTML ini menjadi penting terutama untuk Anda yang bercita-cita menjadi seorang web developer. Ini merupakan bahasa dasar yang akan sering Anda gunakan.
Untuk Anda yang mulai tertarik untuk belajar HTML, saat ini juga sudah banyak tempat yang menyediakan pelatihan tentang HTML. HTML adalah salah satu bahasa markup penting yang perlu Anda pahami sebelum nantinya Anda juga mempelajari beberapa bahasa lain seperti CSS, Javascript, dan lain-lain.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development