Kali ini saya memutuskan untuk membuat sesi tutorial baru yaitu tutorial mengenai HTML. Setelah sebelumnya saya hanya fokus pada tutorial mengenai PHP terutama Laravel. Pada bagian 1 dari seri tutorial ini adalah mengenai pengenalan HTML.
Saya tidak akan menjelaskan bagaimana sejarah HTML dan sebagainya karena akan terlalu panjang dan mungkin tidak akan berguna juga di dunia kerja :). Secara singkat HTML adalah sebuah bahasa yang digunakan untuk membuat sebuah halaman web. Jika anda ingin mengetahui lebih banyak mengenai sejarah HTML saya berikan saja link dari wikipedia berikut https://id.wikipedia.org/wiki/HTML
Berikut ini hal-hal yang perlu anda persiapkan dahulu sebelum kita mempelajari HTML lebih jauh
#MENGINSTALL BROWSER
Seperti penjelasan singkat sebelumnya kalau HTML digunakan untuk membuat sebuah web. Jadi langkah pertama yang perlu anda lakukan adalah melakukan instalasi browser terlebih dahulu. Apa guna browser? Browser digunakan untuk melihat hasil atau tampilan dari file HTML yang sudah anda buat. Secara default harusnya komputer anda sudah memiliki browser bawaan yaitu Internet Explorer.
Namun saya sangat menyarankan untuk menginstall browser lain seperti Chrome (dalam seri tutorial ini saya menggunakan browser Chrome), Opera, maupun Mozilla Firefox. Berikut ini adalah link download browser untuk mempercepat pencarian anda :)
Setelah anda selesai menginstall browser kita lanjutkan ke persiapan berikut nya :)
#MENGINSTALL TEXT EDITOR
Persiapan berikutnya adalah melakukan instalasi text editor. Text Editor digunakan untuk membuat kode-kode HTMLyang akan kita pelajari di bagian-bagian tutorial selanjutnya. Sebenarnya untuk text editor ini juga tidak mempunyai ketentuan khusus. Anda bisa juga menggunakan Notepad untuk membuat kode HTML namun tidak saya sarankan dikarenakan fitur-fitur yang dimiliki notepad ini tentu saja sangat terbatas dibandingkan text editor lainnya.
Editor yang biasanya saya gunakan adalah Visual Studio Code. Anda dapat download pada link berikut https://code.visualstudio.com/Download. Kelebihan dengan menggunakan Visual Studio Code ini adalah anda dapat menginstall berbagai macam plugin yang tersedia seperti misalnya HTML snippet. Dengan plugin snippet ini anda tidak perlu mengetikkan lengkap syntax-syntax HTML. Misalnya anda cukup mengetikkan html:5 dan menekan enter nanti secara otomatis akan dibuatkan struktur dasar dari HTML5 yang nanti akan dijelaskan di bawah. Kelebihan berikutnya dari editor Visual Studio Code ini adalah gratis :).
#MEMBUAT HTML5 DASAR
Buatlah sebuah file dan simpan dengan nama index.html. Kemudian tambahkan kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Judul HTML</title>
</head>
<body>
Isi dari halaman ini
</body>
</html>
Pertama yang akan saya jelaskan adalah perbedaan dari penyimpanan nama file antara index.html dengan nama html lainnya. Jika anda nantinya membuat suatu web dengan banyak file HTML di dalam nya, browser akan secara otomatis menggunakan file index.html sebagai tampilan awal dari web yang anda buat.
Kode di atas adalah struktur dasar dari HTML5. Kode-kode HTML yang anda tulis mayoritas akan menggunakan tag pembuka dan tag penutup. Contohnya adalah tag <html> sebagai pembuka dan </html> sebagai penutup. <head> sebagai pembuka dan </head> sebagai penutup.
Kode yang dituliskan di dalam <head>....</head> berisi informasi megenai metadata dari dokumen HTML seperti misalnya
<meta charset="UTF-8"> untuk memberikan informasi ke browser untuk menggunakan pengkodean karakter dengan format UTF-8. Penjelasan mengenai UTF-8 dapat anda baca lengkapnya pada link berikut https://id.wikipedia.org/wiki/UTF-8
<title>Judul HTML</title> akan memberikan judul tab pada browser anda "Judul HTML"
Semua kode yang anda tuliskan di bagian head ini tidak akan ditampilkam oleh browser. Sedangkan semua kode yang anda tuliskan di bagian <body>...</body> nantinya akan ditampilkan oleh browser.
Untuk lebih jelasnya coba anda buka file index.html yang sudah anda buat tadi ke dalam browser. Caranya adalah dengan mengklik kanan file index.html dan kemudian pilih open with dan pilihlah browser yang sudah anda install sebelumnya.
Sekian dulu tutorial mengenai HTML pada bagian 1 ini. Nantinya akan saya jelaskan lebih dalam dan secara bertahap pada bagian-bagian selanjutnya. Pertanyaan-pertanyaan mengenai pengenalan HTML ini dapat anda tuliskan pada kolom komentar di bawah. Sebisa mungkin akan saja jawab melalui kolom komentar juga. Terima kasih.
Tutorial HTML - Pengenalan HTML (Bagian 1)
Reviewed by Donny Winarto
on
December 15, 2019
Rating:
Reviewed by Donny Winarto
on
December 15, 2019
Rating:
No comments: