Halo Semuanya Selamat Datang di ZakaTechTutor
Apa itu HTML?
Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa skrip lainnya seperti JavaScript, VBScript, dan PHP.
Pertama tama yang kalian perlukan sebelum kalian mengkoding di html ialah sebuah text editor agar kalian bisa menulis dan mengcompile kode kalian di browser
di era sekarang sudah banyak sekali text editor yang tersedia secara gratis
beberapa text edtiro yang sering digunaka ialah
- Visual Studio Code
- Notepad++
- Sublime text
- Atom
Siapakan Kode Struktur HTML
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, simpan file tersebut dengan nama apapun yang anda mau tapi dibelakang file harus ada .html.
Contoh : belajar.html , pertama.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:
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.
Nah tadi adalah dasar dasar yang kalian perlu kalin ketahui terlebih dahulu sebelum mulai mengkoding HTML
Tentu saja masih banyak lagi yang perlu kalian ketahui untuk membuat sebuah web yang profesional
Sekian.
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments