.svg)
.svg)
Binar Academy - Tahukah kamu bahwa HTML sering digunakan oleh sebagian besar website yang ada saat ini? Oleh karena itu, penting buat kamu untuk belajar HTML. Apalagi jika kamu tertarik untuk membuat pemrograman website, HTML menjadi hal pertama yang wajib kamu kenal loh!
Sebelum mulai, mari kita ketahui apa itu HTML!
HTML atau Hypertext Markup Language mempunyai peran untuk menentukan struktur tampilan dan konten dalam sebuah website. Tentunya HTML tidak bekerja sendiri untuk membangun sebuah website. Diperlukan juga CSS dan JavaScript untuk membuat tampilannya menjadi bagus dan interaktif.
Perlu diketahui bahwa syntax pada HTML selalu dimulai dengan tag di dalam <> dan diakhiri dengan tag </>.
Mempelajari HTML
Untuk mempelajari HTML, kamu perlu menyiapkan 2 tools, yaitu aplikasi text editor dan browser. Text editor berfungsi untuk menuliskan syntax dalam proses coding. Sementara browser berguna untuk melihat hasil kode yang sudah dibuat.
Text editor yang disarankan untuk belajar HTML antara lain Sublime, Notepad++, atau Visual Studio Code. Tapi jika kamu belum mempunyai semua aplikasi tersebut, kamu bisa mulai menggunakan Notepad saja. Sementara browser yang disarankan antara lain Firefox, Chrome, atau Edge.
Baca Juga: Perbedaan Coding dan Programming yang Perlu Diketahui
Siapkan File HTML Pertama Kamu!
Setelah menyiapkan tools diatas, maka mari kita mulai untuk membuat file HTML pertama kamu. Caranya gampang banget loh! Pertama, buka aplikasi text editor yang tadi sudah disiapkan. Kemudian ketik kode seperti contoh di bawah ini.
Jika sudah selesai mengetik, simpan file tersebut dengan nama index.html.
Untuk melihat hasilnya, klik dua kali pada file yang sudah kamu buat tadi. Jika muncul pilihan aplikasi, pilihlah browser untuk membukanya. Maka di browser akan tampak “Halo Dunia!”.
Struktur Dasar HTML
Coba perhatikan lagi kode yang sudah kamu ketik di text editor tadi. Di dalamnya terdapat tiga tag penting, yaitu <html>, <head>, dan <body>. Ketiga tag inilah yang menjadi struktur utama atau struktur dasar penyusun HTML.
Deklarasi
Bagian yang pertama adalah deklarasi. Fungsinya untuk menyatakan jenis dokumen beserta dengan tipenya. Contoh di atas menggunakan deklarasi <!DOCTYPE html> yang menandakan bahwa HTML yang digunakan adalah versi 5.
Di bawah tag tersebut ada <html lang=”en”>. Tag <html> wajib ada dalam setiap dokumen HTML. Tanpa tag tersebut, file HTML tidak bisa di compile dan output nya tidak akan tampil di browser. Sementara atribut lang=”en” menyatakan bahwa dokumen yang kamu buat berbahasa Inggris.
Tag <html> ditutup dengan </html>. Namun sebelum itu masih ada dua tag penting yang akan dibahas di bawah ini.
Head
Head adalah kepada dari file HTML. Pembentukan bagian head dimulai ketika kamu mengetik <head> dan diakhiri dengan tag </head>. Bagian head ini dipakai untuk menulis tag yang akan dibaca oleh mesin. Contoh tag tersebut antara lain:
- Tag <title> untuk memberikan judul pada file HTML.
- Tag meta untuk keperluan SEO.
- Tempat untuk menuliskan kode JavaScript serta CSS, dan masih banyak lagi fungsinya.
Body
Di bawah head terdapat struktur body yang menjadi inti dari dokumen HTML. Semua konten yang kamu lihat di layar browser berasal dari bagian ini. Tak heran kalau biasanya bagian body ini lebih banyak dibandingkan bagian lainnya.
Penulisan bagian body dimulai dengan tag <body> dan di bagian akhir ditutup dengan </body>. Umumnya, setelah tag </body>, file HTML akan berakhir dan ditutup dengan </html>.
Apa itu Tag, Elemen, dan Atribut?
Materi berikutnya yang perlu kamu pahami dalam belajar HTML adalah tag, elemen, serta atribut.
Tag
Tag merupakan penanda untuk awalan dan akhiran dari elemen HTML. Tag dibuat menggunakan kurung siku <>. Di dalam kurung tersebut berisi nama tag. Beberapa tag juga memiliki atribut. Contoh tag yang sering dipakai antara lain <head>, <body>, <p>, dan masih banyak lagi.
Setiap tag memiliki penutup yang dibuat menggunakan kurung siku dan garis miring. Contohnya </head>, </body>, dan <p>. Fungsinya adalah untuk mengakhiri elemen.
Elemen
Pada HTML, elemen merupakan komponen penyusun. Elemen tersusun atas tag pembuka, isi dan penutup. Dalam beberapa kasus juga sering ditambahkan atribut. Contoh elemen bisa kamu lihat di bawah ini.
<p align=”center”>Halo Dunia!<p>
Contoh di atas adalah satu elemen <p> yang memiliki atribut align=”center”. Sementara isinya berupa teks, yaitu Halo Dunia!
Atribut
Atribut merupakan kata khusus yang ditempatkan di dalam tag pembuka. Istilah lain untuk menyebut atribut adalah modifier karena fungsi mengubah perilaku elemen.
Pada contoh di atas, atribut yang digunakan adalah align=”center”. Fungsinya yaitu mengubah agar tulisan Halo Dunia! ada di bagian tengah layar.
Baca Juga: ETL (Extract Transform Load): Pengertian dan Cara Kerjanya
Binar Academy - Tahukah kamu bahwa HTML sering digunakan oleh sebagian besar website yang ada saat ini? Oleh karena itu, penting buat kamu untuk belajar HTML. Apalagi jika kamu tertarik untuk membuat pemrograman website, HTML menjadi hal pertama yang wajib kamu kenal loh!
Sebelum mulai, mari kita ketahui apa itu HTML!
HTML atau Hypertext Markup Language mempunyai peran untuk menentukan struktur tampilan dan konten dalam sebuah website. Tentunya HTML tidak bekerja sendiri untuk membangun sebuah website. Diperlukan juga CSS dan JavaScript untuk membuat tampilannya menjadi bagus dan interaktif.
Perlu diketahui bahwa syntax pada HTML selalu dimulai dengan tag di dalam <> dan diakhiri dengan tag </>.
Mempelajari HTML
Untuk mempelajari HTML, kamu perlu menyiapkan 2 tools, yaitu aplikasi text editor dan browser. Text editor berfungsi untuk menuliskan syntax dalam proses coding. Sementara browser berguna untuk melihat hasil kode yang sudah dibuat.
Text editor yang disarankan untuk belajar HTML antara lain Sublime, Notepad++, atau Visual Studio Code. Tapi jika kamu belum mempunyai semua aplikasi tersebut, kamu bisa mulai menggunakan Notepad saja. Sementara browser yang disarankan antara lain Firefox, Chrome, atau Edge.
Baca Juga: Perbedaan Coding dan Programming yang Perlu Diketahui
Siapkan File HTML Pertama Kamu!
Setelah menyiapkan tools diatas, maka mari kita mulai untuk membuat file HTML pertama kamu. Caranya gampang banget loh! Pertama, buka aplikasi text editor yang tadi sudah disiapkan. Kemudian ketik kode seperti contoh di bawah ini.
Jika sudah selesai mengetik, simpan file tersebut dengan nama index.html.
Untuk melihat hasilnya, klik dua kali pada file yang sudah kamu buat tadi. Jika muncul pilihan aplikasi, pilihlah browser untuk membukanya. Maka di browser akan tampak “Halo Dunia!”.
Struktur Dasar HTML
Coba perhatikan lagi kode yang sudah kamu ketik di text editor tadi. Di dalamnya terdapat tiga tag penting, yaitu <html>, <head>, dan <body>. Ketiga tag inilah yang menjadi struktur utama atau struktur dasar penyusun HTML.
Deklarasi
Bagian yang pertama adalah deklarasi. Fungsinya untuk menyatakan jenis dokumen beserta dengan tipenya. Contoh di atas menggunakan deklarasi <!DOCTYPE html> yang menandakan bahwa HTML yang digunakan adalah versi 5.
Di bawah tag tersebut ada <html lang=”en”>. Tag <html> wajib ada dalam setiap dokumen HTML. Tanpa tag tersebut, file HTML tidak bisa di compile dan output nya tidak akan tampil di browser. Sementara atribut lang=”en” menyatakan bahwa dokumen yang kamu buat berbahasa Inggris.
Tag <html> ditutup dengan </html>. Namun sebelum itu masih ada dua tag penting yang akan dibahas di bawah ini.
Head
Head adalah kepada dari file HTML. Pembentukan bagian head dimulai ketika kamu mengetik <head> dan diakhiri dengan tag </head>. Bagian head ini dipakai untuk menulis tag yang akan dibaca oleh mesin. Contoh tag tersebut antara lain:
- Tag <title> untuk memberikan judul pada file HTML.
- Tag meta untuk keperluan SEO.
- Tempat untuk menuliskan kode JavaScript serta CSS, dan masih banyak lagi fungsinya.
Body
Di bawah head terdapat struktur body yang menjadi inti dari dokumen HTML. Semua konten yang kamu lihat di layar browser berasal dari bagian ini. Tak heran kalau biasanya bagian body ini lebih banyak dibandingkan bagian lainnya.
Penulisan bagian body dimulai dengan tag <body> dan di bagian akhir ditutup dengan </body>. Umumnya, setelah tag </body>, file HTML akan berakhir dan ditutup dengan </html>.
Apa itu Tag, Elemen, dan Atribut?
Materi berikutnya yang perlu kamu pahami dalam belajar HTML adalah tag, elemen, serta atribut.
Tag
Tag merupakan penanda untuk awalan dan akhiran dari elemen HTML. Tag dibuat menggunakan kurung siku <>. Di dalam kurung tersebut berisi nama tag. Beberapa tag juga memiliki atribut. Contoh tag yang sering dipakai antara lain <head>, <body>, <p>, dan masih banyak lagi.
Setiap tag memiliki penutup yang dibuat menggunakan kurung siku dan garis miring. Contohnya </head>, </body>, dan <p>. Fungsinya adalah untuk mengakhiri elemen.
Elemen
Pada HTML, elemen merupakan komponen penyusun. Elemen tersusun atas tag pembuka, isi dan penutup. Dalam beberapa kasus juga sering ditambahkan atribut. Contoh elemen bisa kamu lihat di bawah ini.
<p align=”center”>Halo Dunia!<p>
Contoh di atas adalah satu elemen <p> yang memiliki atribut align=”center”. Sementara isinya berupa teks, yaitu Halo Dunia!
Atribut
Atribut merupakan kata khusus yang ditempatkan di dalam tag pembuka. Istilah lain untuk menyebut atribut adalah modifier karena fungsi mengubah perilaku elemen.
Pada contoh di atas, atribut yang digunakan adalah align=”center”. Fungsinya yaitu mengubah agar tulisan Halo Dunia! ada di bagian tengah layar.
.png)
.png)
