Cara Belajar Html Untuk Pemula

Apa Itu HTML ?

Bagi pemula sebenarnya belajar HTML itu sangatlah mudah. Pada pembahasan sebelumnya kita pernah menyinggung sedikit tentang HTML di artikel Dasar Pemrograman Web. Bahasa HTML adalah hal utama yang harus kamu pahami dan pelajari dalam membangun sebuah Website. Hyper Text Markup Language atau biasa disebut HTML merupakan bahasa markup yang fungsi utamanya untuk membuat sebuah halaman website. Dari pengertiannya sudah jelas betapa pentingnya bahasa HTML dalam sebuah web, bisa dikatakan sebagai pondasi Website.

Untuk membuat file HTML biasanya di simpan dengan format .html kemudian merunning / mengeksekusinya di web browser seprti Google Chrome, Mozila Firefox, Safari, atau browser lainnya. Pembuatan file HTML sangatlah mudah yaitu dengan notepad yang tersedia di komputer / laptop Anda. Tapi, saya menyarankan gunakanlah editor HTML yang khusus seperti Sublime Text, Notepad++, Dreamweaver, dan yang lainnnya.

Mengulas sedikit Versi HTML

Untuk di zaman yang sekarang ini Anda sebenarnya semakin dimudahkan dalam membuat aplikasi berbasis website. HTML merupakan bahasa kode yang perkembanganya sangat pesat dimana HTML sekarang mengeluarkan versi terbarunya yaitu HTML5. Ada perbedaan yang sangat menonjol antara HTML biasa dengan HTML5. Perbedaan yang menonjol dari segi interface atau tampilan, dimana HTML5 tanpa menggunkan CSS sudah dilengkapi dengan CSS bawaan sehingga lebih nyaman dilihat dan yang paling powerful dari HTML5 yaitu responsive. Responsive ini mengikuti besar kecilnya browser, contoh anda membuka website masbsayir.com dengan komputer pada browser google chrome atau mozila firefox. Kemudian Anda Maximize browser atau besar kecilkan browser. Apabila website itu responsive, maka halaman website akan mengikuti.

Perbedaan yang lainnya HTML biasa sangatlah susah dalam melakukan validasi form. Misalkan Anda menginput data ke Form Login dimana password tidak boleh kurang dari 6 angka. Sedangkan anda menginput 4 angka yang terjadi akan melihat pesan error, nah inilah yang disebut validasi. Untuk membuat validasi di HTML kita harus menggunakan javascript atau PHP, disini masing-masing programer mempunyai caranya sendiri-sendiri. Dengan munculnya HTML5 validasi yang tadinya menjadi hal yang sangat sulit dan rumit sekarang Validasi sudah bisa langsung ditangani oleh HTML5.

Munculnya HTML5, Audio dan Video lebih mudah untuk diputar dan lebih ringan karena sudah tidak memerlukan plugin tambahan seperti flashplayer dan realplayer. Sedangkan HTML biasa apabila Anda memutar Audio atau Video pada website, maka wajib menginstal plugin. Apabila anda masih menemukan website yang mengharuskan anda menginstal plugin berarti website tersebut masih memakai versi HTML biasa. Namun harus hati-hati terkadang ada website yang nakal, dimana ketika kita menginstal plugin sebenarnya bukan untuk memutar Audio atau Video melainkan malwer atau virus.

Keunikan lain dari HTML5 dibandingkan dengan HTML biasa yaitu dalam kemampuan mengcopy atau meindahkan file dengan cara drop dan drag. Kemampuan drop dan drag biasanya hanya dapat dilakukan di Desktop. Dengan versi terbarunya HTML website sudah mampu menyaingi Desktop, ini menandakan era modern yang nantinya bahasa HTML akan menjadi interface tercanggih

Latihan Dasar HTML

Untuk latihan pada kesempatan kali ini saya akan menggunakan editor Notepad. Pertama kita akan belajar menyimpan file HTML dengan format .html. Langkah ini adalah dasar dimana kode HTML dapat berjalan. Apabila Anda meyimpan file HTML tidak menggunakan format .html yang akan terjadi yaitu Error.

Buka Notepad, kemudian isi tulisan terserah Anda. Disini saya mengisi “belajar website dengan masbasyir.com”

Simpan file tadi dengan cara Save atau Save As, kemudian akan muncul halaman seperti gambar dibawah

Keterangan :

Ikuti isi dari gambar diatas. Disini saya menyimpan file di folder Pemrograman > html bisa dilihat dibagian atas

• File Name : dirubah menjadi belajar.html (setiap membuat file html, wajib memberikan akhiran .html)
• Save As Type : dirubah menjadi All Files (All Files ini berfungsi agar file .html bisa dieksekusi di web browser)
• Encoding : tetap ANSI

Setelah selesai semuanya kemudian Save dan liat file yang anda buat tadi. Hasilnya seperti dibawah ini.

Karena browser yang saya gunakan adalah google chrome maka hasilnya berbentuk browser google chrome. Kemudian untuk melihat hasilnya tinggal kita buka saja filenya, dan hasilnya akan seperti ini

Tanpa kodingpun kita sudah bisa membuat tulisan dibrowser. Itu berarti file HTML dengan ekstensi .html yang Anda buat tadi tidak ada error atau kesalahan.

Setelah menyimpan file HTML sudah Anda kuasai, sekarang kita akan berkenalan dengan struktur tag. Tag ini wajib Anda kuasai nantinya sebagai kerangka dari sebuah website.
Tag tersebut yaitu  <html>, <head>, <title>, <body>. Setiap tag diakhiri dengan penutup </html>, </head>, </title>, </body>. Berikut caranya :

<html>
<head>
    <title></title>
</head>
<body>
    (isi Website)
</body>
</html>

Tag <html> merupakan pembungkus semua tag. Untuk tag <head> adalah kepala dokumen dimana tag <head> sangat diperlukan dalam pembuatan judul atau SEO website kita nantinya. Agar lebih paham file belajar.html yang tadi Anda buat silahkan dimodifikasi dengan cara seperti kode dibawah ini :

<html>
<head>
    <title>Mas Basyir</title>
</head>
<body>
</body>
</html>

Tag <title> wajib didalam tag <head>, tag <title> digunakan untuk membuat judul website. Sekarang kita lihat hasilnya, teks yang ada di tag <title> akan muncul dijudul website.

Selanjutnya kita akan membahas tag <body>. Tag <body> merupakan isi dokumen dimana setiap tulisan yang ada di dalam tag <body> akan muncul di halaman website.

<html>
<head>
    <title>Mas Basyir</title>
</head>
<body>
    Belajar bersama mas basyir
</body>
</html>

Hasil Output :

Selanjutnya kita akan membuat paragraf dengan tag <p> dan judul paragraf dengan tag <h1>. Untuk hasilnya nanti teks yang ada di tag <h1> akan lebih tebal dan besar. Sedangkan yang ada di tag <p> teks yang ditampilkan akan berukuran normal.

<html>
<head>
    <title>Mas Basyir</title>
</head>
<body>
    <h1>Belajar Bersama Mas Basyir</h1>
    <p>Situs web ini adalah pembelajaran dasar html. pembelajaran kali ini sangatlah wajib anda               kuasai. Agar kedepannya nanti, tidak ada kesulitan dalam menyelami dunia pemrograman             web.</p>
</body>
</html>

Hasil Output :

Jadi Kesimpulannya ?

Tag merupakan sekumpulan kode yang berfungsi memperkenalkan kepada web browser untuk apa text HTML ditulis. Bagi Anda calon web developer wajib mengetahui HTML. Karena HTML adalah pondasi dari sebuah website. Dengan Anda mengetahui dasar dari HTML maka akan lebih mudah kedepannya dalam menggunakan bahasa HTML versi terbaru yaitu HTML5.

Dari beberapa contoh diatas adalah HTML yang sederhana, hanya sekedar membuat judul website, judul artikel, dan paragraf. Sedangkan website yang dibangun seperti masbasyir.com, detik.com, facebook, dan yang lainnya tidak hanya seperti contoh sederhana diatas. Anda harus membuat wadah atau dalam bahasa pemrograman biasa disebut Gird. Banyak tag yang harus Anda pelajari. Agar terbiasa dengan bahasa program, kuncinya teruslah berlatih berulang-ulang.

Mungkin untuk kedepannya, saya tidak akan menjabarkan terlalu detail tentang dasar Pemrograman Web, melainkan akan saya libatkan langsung dalam membangun aplikasi berbasis web dengan HTML5 agar anda lebih paham nantinya. Jika ada usulan dari Anda silahkan tinggalkan jejak pada kolom komentar dibawah.

Terimakasih