Dalam membuat website, HTML tidak sendirian. Ada beberapa bahasa program lainnya yang membantu dalam pembuatan website agar lebih menarik dan menambah fitur, yaitu bahasa program CSS dan Javascript.
Fungsi CSS dalam pembuatan website adalah untuk memperindah tampilan website, dan fungsi javascript dalam pembuatan website adalah agar website tersebut terlihat hidup. Hidup maksudnya bagaimana ? Dengan javascript, kamu bisa memberikan efek efek menarik dalam website mu.
Sejarah HTML
.jpg "Sejarah HTML")
Sejarah HTML dimulai oleh Tim Berners-Lee, seorang ilmuwan asal Swiss yang bekerja di perusahaan CERN. Versi pertama nya dirilis tahun 1991 dengan 18 tag. HTML juga merupakan implementasi dari SGML (Standard Generalized Markup Language ). Jika ingin menggunakan bahasa HTML, kamu harus menggunakan tag dan attribute. Contoh tag nya seperti : <title>, <h1>, <ul>, <li>, <body> dan sebagainya.
Peralatan untuk Belajar HTML
Diatas kita sudah mengenal apa itu HTML dan sejarah HTML, sekarang kita akan langsung masuk ke dalam materi HTML. Sebelum masuk ke materi nya, kita harus mempersiapkan peralatan yang dibutuhkan untuk belajar HTML. Apa saja peralatan yang dibutuhkan ? Simak selengkapnya dibawah ini
1. Siapkan Text Editor
Apa sih Text Editor itu ? Text Editor adalah sebuah aplikasi yang bisa kamu gunakan untuk menuliskan codingan nya. Ada banyak jenis Text Editor untuk android dan juga untuk laptop. Kamu tinggal bebas pilih sesuai keinginan mu.
2. Siapkan Web Browser
Web Browser tidak kalah penting dalam proses coding. Tanpa web browser kamu tidak akan bisa menjalankan hasil codingan mu. Web Browser juga memiliki banyak jenis nya, diantaranya adalah : Chrome, Firefox, Opera Mini, Uc Turbo, Uc Browser dan lainnya.
Membuat Dokumen HTML
Setelah mengetahui apa saja yang harus disiapkan untuk belajar HTML, sekarang kita akan mencoba membuat dokumen atau file HTML nya. Ikuti langkah langkah nya seperti dibawah
1. Buka text editor yang telah kamu download. Disini saya menggunakan android jadi saya pakai text editor bernama Acode.
2. Silahkan kamu buat file baru dengan ekstensi .html. Disini saya memberikan nama file nya index.html
3. Kemudian tulislah kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title> Pengenalan HTML </title>
</head>
<body>
<p> Selamat Datang di Blog SantriXploit </p>
</body>
</html>
4. Setelah itu kita jalankan. Maka hasilnya seperti ini
5. Selesai.
Struktur Dasar HTML
Diatas kita sudah menuliskan contoh codingan HTML, tetapi kita belum membahas struktur dasar dari HTML. Dalam bahasa HTML setiap tag pembuka harus memiliki tag penutup nya. Tetapi ada juga beberapa tag yang tidak memiliki penutup tag, contohnya adalah tag '<img>'. Mari kita bahas struktur dasar Html.
Kalau kita perhatikan, contoh codingan diatas memiliki tiga struktur penting :
- Bagian Deklarasi
- Bagian Head
- Bagian Body
1. Bagian Deklarasi
Coba kita perhatikan pada baris pertama, disitu saya menuliskan '<!DOCTYPE html>'. Disitu saya menggunakan '<!DOCTYPE html>' karena itu merupakan tag dokumen dan versi nya. Pada contoh diatas, saya menggunakan tag versi HTML5.
Lalu apakah kita boleh menuliskan codingan nya tanpa '<!DOCTYPE html>' ? Sebenarnya sih boleh saja dan tetap bisa dijalankan di web browser, cuma itu melanggar aturan standar yang telah dibuat oleh W3C.
Setelah itu pada baris kedua saya menuliskan '<html lang="en">'. Dalam bahasa HTML, kita wajib menuliskan '<html>'. Kemudian saya menambahkan ‘ lang="en" ‘ untuk menyatakan bahwa dokumen HTML ini menggunakan Bahasa Inggris.
2. Bagian Head
Coba kita perhatikan setelah tag '<html lang="en">' terdapat dua tag yaitu tag '<head>' dan tag '<title>'. Apa sih fungsi kedua tag tersebut ?
Dalam tag '<head>', biasanya kita menuliskan tag yang akan dibacakan dalam dokumen html tersebut. Contohnya seperti :
- Tag meta untuk SEO
- Tempat menuliskan kode CSS dan javascript
- Tag '<title>' untuk judul website
- Dan lainnya
Kalau untuk tag '<title>' sudah saya kasih tau fungsi nya diatas yaitu sebagai judul website nya.
3. Bagian Body
Pada codingan diatas, kita perhatikan terdapat satu tag di dalam tag '<body>'. Tag tersebut adalah tag '<p>'. Nanti tag '<p>' juga akan kita bahas setelah pembahasan tag '<body>'.
Kalau diibaratkan tag '<body>' adalah badan manusia, jadi semua isi codingan nya kita tuliskan dalam tag '<body>'. Misalnya tag '<p>', '<ul>', '<li>', '<img>', '<h1>', '<div>' dan tag lainnya.
Kalau fungsi dari tag '<p>' adalah sebagai menuliskan sebuah paragraf.
Kalau masih ada yang belum dipahami, silahkan bertanya pada kolom komentar dibawah ^_^
Sekian dari saya terimakasih.