Belajar Coding Html Untuk Pemula adalah materi dasar pemrograman web yang harus kamu kuasai.  Sebenarnya Belajar Coding Html sangat mudah j...
Daftar Isi [Tampil]

    Belajar Coding Html Untuk Pemula adalah materi dasar pemrograman web yang harus kamu kuasai. 
    Sebenarnya Belajar Coding Html sangat mudah jika kamu sering praktek langsung apa yang kamu pelajari pada saat itu juga.

    Tetapi sebelum kamu belajar ke coding html-nya langsung, kamu harus tahu dulu teori-teori dasar html, seperti pengertian html, sejarah singkat html, dan software yang di perlukan untuk belajar html.

    Nah oleh sebab itu yuk mari kita pelajari coding html mulai dari dasarnya dulu agar kamu nanti pada saat belajar ke coding html-nya tidak kebingungan.

    Belajar Coding HTML Untuk Pemula

    Pengertian HTML


    Pengertian HTML (Hypertext Markup Language) adalah adalah sebuah bahasa pemrograman web yang berfungsi untuk membuat tampilan halaman web.

    Dan HTML juga adalah salah satu bahasa pemrograman yang termasuk kedalam client side scripting, yaitu bahasa pemrograman web yang pengolahan nya dijalankan di komputer client / pengunjung.

    Sejarah Singkat HTML


    Sejarah singkat HTML yaitu di mulai pada tahun 1980, pada tahun tersebut seorang ahli fisika Tim Berners-Lee dan seorang kontraktor dari CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun ENQUIRE.

    ENQUIRE adalah sebuah sistem yang dibuat untuk para ilmuan di CERN yang dapat membantu membagi dokumen.

    Dan setelah sembilan tahun kemudian Tim Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir tahun 1990.

    Jadi dari pemaparan diatas dapat kita simpulkan bahwa Tim Berners-Lee adalah penemu pertama HTML.

    Sejarah Versi HTML


    Sejarah versi HTML sampai saat ini ada tujuh perkembangan versi HTML yang Panduan Code ketahui sampai saat ini.

    Apa saja versi HTML tersebut?, yuk simak pembahasan singkatnya dibawah ini.

    1. HTML v1.0


    HTML v1.0 adalah versi HTML pertama yang ditemukan oleh Tim Berners-Lee, dan pada versi ini sudah mendukung image heading, hypertext, tulisan cetak tebal, tulisan cetak miring, dan paragraph.

    2. HTML v2.0


    HTML v2.0 (24 November 1995) adalah versi HTML yang sudah lebih rapih dari versi HTML v1.0 dalam penyusunan dokumennya, dan kita juga dapat dapat menyisipkan komentar pada dokumen tersebut.

    3. HTML v3.0


    HTML v3.0 adalah versi HTML  yang sudah mendukung tabel, dan mampu mendukung penggunaan rumus matematika pada dokumen tersebut.

    4. HTML v3.2


    HTML v3.2 (14 Januari 1996) adalah versi pengembangan lanjutan dari versi HTML 3.0, dan pada versi ini W3C mulai mengembangkan dan menstandarisasi.

    Fitur baru dari versi HTML 3.2 yaitu berupa gambar background, style, frame, teks di sekeliling gambar, dan mendukung penggunaan script diluar HTML untuk membuat sebuah dokumen yang optimal.

    Script yang dapat digunakan pada HTML versi 3.2 yaitu seperti Javascript dan VBScript.

    5. HTML v4.0


    HTML v.4.0 (18 Desember 1997) adalah versi HTML yang mengalami banyak perkembangan dari versi sebelumnya, diantara perkembangannya yaitu perkembangan fitur tabel, text, link, image, form, imagemaps, dan meta.

    6. HTML v4.01


    HTML v4.01 (5 Mei 2000) adalah versi revisi dari versi sebelumnya, yang mana pada versi ini ada perbaikan pada bug minor (kecil), dan versi HTML 4.01 menjadi standarisasi atribut script XHTML 1.0 serta elemen.

    7. HTML v5.0


    HTML v5.0 adalah versi HTML yang paling baru dan banyak kita gunakan sampai saat ini, kelebihan versi HTML terbaru ini yaitu dapat membuat sebuah halaman web yang optimal dan praktis.

    Pada HTML v5.0 kita dapat menggabungkan script CSS, Javascript, HTML menjadi satu dokumen atau halam web yang lebih simpel dan praktis.

    Selain itu banyak sekali code-code HTML5 yang baru, seperti salah satu contohnya yaitu cleaner code, dan tentunya masih banyak fitur atau code-code baru pada HTML5 ini.

    Sekarang kita mulai bahas struktur dasar HTML dan code-code dasar html yang harus kamu ketahui sebagai pemula.

    Struktur Dasar HTML


    Struktur dasar HTML yang akan kita bahas adalah struktur dasar HTML5 agar kamu lebih cepat memahami HTML.

    Pada struktur dasar HTML5 kamu akan dikenalkan dengan Tag dan Atribut, oleh sebab itu yuk kita pelajari dulu Tag dan Atribut tersebut.

    Apa Itu Tag?


    Tag pada HTML adalah sebuah tanda pada dokumen HTML yang teridiri dari dua jenis yaitu Tag pembuka, dan Tag penutup.

    Contoh Tag pembuka seperti <nama_tag>, dan contoh untuk Tag penutup seperti </nama_tag>.

    Setiap Tag penutup pasti diawali dengan code " / " (slash atau garis miring) kemudian di ikuti nama Tag yang sama dengan nama Tag pembukanya.

    Namun selain dari Tag tersebut yang terdiri dari Tag pembuka dan Tag penutup ada juga Tag HTML5 yang berdiri sendiri atau dalam kata lain Tag pembuka dan penutupnya digabungkan menjadi satu Tag.

    Dan perlu kamu tahu juga tidak semua Tag HTML5 bisa digabungkan menjadi satu, hanya Tag-tag tertentu yang dapat digabungkan saja.

    Contohnya yaitu Tag <br/>, <hr/>, <img src="" />, dan <script scr="" />.

    Sebenarnya Tag-tag HTML5 diatas dapat kita tulis seperti Tag-tag HTML5 pada umumnya yaitu menggunakan Tag pembuka dan Tag penutup.

    Contohnya seperti <br> </br>, dan <script src=""> </script>.

    Tetapi agar lebih mudah dan simpel kita gunakan Tag yang digabung saja seperti contoh Tag diatas.

    Sekarang kita lanjut ke pembahasan selanjutnya tentang Atribut pada HTML5.

    Apa itu Atribut?


    Atribut pada HTML adalah suatu sifat atau perintah yang khusus yang diberikan pada Tag pembuka.

    Contohnya seperti berikut ini <nama_tag atribut="nilai"> isi dokumen </nama_tag>.

    Kita juga dapat memberikan beberapa atribut kedalam satu Tag HTML, contohnya seperti berikut ini <nama_tag artibut1="nilai" artibut2="nilai"> isi dokumen </nama_tag>.

    Bagaimana sampai disi apakah kamu sudah mulai paham, sekarang yuk kita mulai ke belajar coding html.

    Belajar Coding HTML5 Dasar


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>


    Penjelasan Belajar Coding HTML5 Dasar


    Apa itu !DOCTYPE html?


    Coding tersebut adalah coding yang menandakan sebuah halaman HTML.

    Apa itu html lang="en"?


    Coding atau Tag tersebut adalah Tag pembuka yang berfungsi untuk membuat sebuah dokumen HTML.

    Dan atribut lang="en" adalah artibut yang berfungsi untuk menandakan halaman HTML yang kamu buat berbahasa Inggris.

    Apa itu /html?


    Tag tersebut adalah Tag penutup sebuah halaman HTML.

    Apa itu head?


    Tag tersebut adalah Tag pembuka yang menandakan bagian head / kepala sebuah halaman HTML yang berfungsi untuk membuat informasi sebuah halaman HTML.

    Apa itu /head?


    Tag tersebut adalah Tag penutup dari Tag <head>.

    Apa itu meta charset="UTF-8"?


    Tag dan atribut tersebut berfungsi untuk memberikan informasi kepada browser untuk melakukan pengkodean karakter sesuai dengan UTF-8.

    <meta> adalah Tag yang berfungsi untuk meberikan informasi kepada browser tentang halaman HTML.

    Artibut chatset adalah kumpulan dari jenis-jenis pengkodean seperti huruf, angka, symbol dan lain-lain.

    Dan nilai UTF-8 adalah standarisasi charset pada saat ini untuk bahasa pemrograman, software, system operasi, dan API.

    Apa itu meta name="viewport" content="width=device-width, initial-scale=1.0"?


    Tag dan Atribut tersebut berfungsi untuk memberi perintah kepada browser agar menyesuaikan tampilan halaman HTML kita menjadi responsive.

    Apa itu title?


    Tag tersebut adalah Tag yang diletakan diantara Tag <head> dan </head>, yang berfungsi untuk membuat judul halaman HTML yang kita buat.

    Apa itu /title?


    Tag tersebut adalah Tag penutup dari Tag title.

    Apa itu body?


    Tag body adalah Tag yang berfungsi untuk membuat tubuh dari sebuah dokumen HTML, kamu bisa menambahkan Tag-tag tertentu yang kamu mau untuk menampilkan sebuah informasi pada halaman HTML.

    Contohnya adalah halaman yang sedang kamu lihat saat ini, semua yang tampil dibawah link halaman ini adalah hasil dari Tag-tag, Atribut, Style, dan Javascript yang diletakan diantara Tag pembuka body dan Tag penutup body.

    Apa itu /body?


    Tag tersebut adalah Tag penutup dari Tag <body> yang menandakan akhir dari body halaman HTML.

    Itulah struktur dari coding halaman HTML5 dasar yang harus kamu ketahui dan pahami terlebih dahulu untuk belajar coding html lebih jauh lagi.

    Sekarang kita bahas dulu text editor apa yang bisa digunakan untuk belajar atau membuat halaman HTML.

    Text Editor Untuk Belajar Coding HTML


    Text Editor Untuk Belajar Coding HTML sebenarnya kamu dapat menggunakan banyak sekali text editor bahkan kamu juga bisa menggunakan notepad untuk membuat halaman HTML.

    Tetapi Panduan Code sarankan kamu menggunakan text editor Sublime atau VSCode (Visual Studio Code) jika kamu belajar menggunakan laptop atau komputer.

    Dan untuk kamu yang belajar coding html di Android kamu bisa menggunakan aplikasi yang bernama Dcoder.

    Jadi kamu jangan berkecil hati karena tidak mempunyai laptop atau komputer, karena kamu dapat belajar coding html dengan mudah di Android.

    Sekarang kita belajar ketahap berikutnya yaitu belajar cara membuat halaman HTML.

    Cara Membuat Halaman HTML


    Cara Membuat Halaman HTML sebenarnya sangat mudah ya temen-temen, yuk kita simak pembahasannya dibawah ini.

    1. Buka Text Editor


    Buka text editor apapun yang kamu gunakan, misalnya kamu pakai notepad, atau Dcoder untuk kamu yang belajar coding di Android.

    2. Buat New File


    Jika kamu menggunakan Notepad, maka pada saat Notepad terbuka kamu bisa menuliskan coding HTML-nya langsung seperti pada tahap tiga dibawah.

    Namun jika kamu menggunakan Sublime, VSCode, atau DCoder kamu bisa membuat New File terlebih dahulu kemudian menuliskan coding HTML-nya.

    3. Masukan Coding HTML


    Untuk contoh belajar coding HTML kamu bisa menggunakan coding dibawah ini.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Belajar Coding HTML Dari Panduan Code</title>
    </head>
    <body>
        <h1>Belajar Coding HTML Pertama</h1>
        <h2>Belajar Coding HTML Pertama</h2>
        <h3>Belajar Coding HTML Pertama</h3>
        <h4>Belajar Coding HTML Pertama</h4>
        <h5>Belajar Coding HTML Pertama</h5>
        <h6>Belajar Coding HTML Pertama</h6>
    </body>
    </html>

    Untuk penjelasan coding tersebut sama seperti pada penjelasan struktruk coding HTML dasar diatas, namun bedanya hanya pada coding ini ditambah dengan Tag H1 sampai H6.

    Lalu apa fungsi dari H1 sampai H6?, fungsinya adalah untuk membuat sebuah judul pada halaman HTML yang ada diantara Tag pembuka body dan Tag penutup body.

    Dan ukuran dari masing-masing H1 sampai H6 berbeda-beda, H1 adalah ukuran judul yang paling besar, dan H6 adalah ukuran judul yang paling kecil.

    4. Save File Dengan Format .html


    Untuk kamu yang menggunakan Notepad, VSCode, dan Sublime kamu bisa tekan tombol Ctrl+S kemudian kamu bisa pilih extensi .html dan memberi nama seperti nama_file.html, ingat ya harus berakhiran .html

    Dan tentukan lokasi penyimpanan file HTML kamu agar kamu tidak lupa menyimpannya dimana.

    Sekarang cobalah jalankan Coding HTML kamu di browser, caranya sangat mudah, jika kamu menggunakan laptop atau komputer buka file expoler dan cari file HTML yang kamu buat tadi kemudian klik kanan dan klik Open With lalu kamu pilih salah satu browser yang akan kamu gunakan untuk membuka file HTML.

    Namun jika kamu menggunakan Dcoder kamu bisa langsung menetakan tombol RUN untuk mencobanya.

    Sampai ditahap ini kamu sudah berhasil membuat halaman HTML pertama kamu dan mencobanya, oleh karena itu cukup sekian dulu Belajar Coding HTML Untuk Pemula Lengkap pada kali ini.

    Semoga apa yang Panduan Code sampaikan ini dapat bermanfaat untuk kamu, jika kamu memiliki pertanyaan atau kurang paham dengan penjelasan dari Panduan Code kamu bisa tanyakan pada kolom komentar dibawah.

    Akhir kata dari Panduan Code jangan lupa titik koma.
    Coba cari lagi apa yang ada inginkan pada kolom berikut: DMCA.com Protection Status
    Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
    Donasi
    Hallo sobat panduan code, Anda dapat memberikan suport kepada kami agar lebih semangat dengan cara dibawah ini.

    Dana : 085972737000
    PAYPAL : Panduan Code
    Done
    Color Picker
    Silahkan gunakan tools color picker berikut gratis untuk Anda, salam Admin Panduan Code.

    Pilih Warna

    Done