Belajar Coding Html Untuk Pemula adalah materi dasar pemrograman web yang harus kamu kuasai. Sebenarnya Belajar Coding Html sangat mudah j...
Belajar Coding HTML Untuk Pemula Lengkap
Selasa, April 21, 2020
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.
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.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.