Belajar HTML Dasar

Text Editor Atom

Materi ini memiliki 2 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Kita kembali ke pelajaran terakhir kita, dimana kita sudah menuliskan kode HTML sederhana dengan notepad seperti yang bisa dilihat pada layar sebelah kanan. Dan hasilnya bisa dilihat pada layar sebelah kiri.

Bisa kita lihat disini bahwa Notepad adalah text editor yang dirancang untuk umum, bukan secara spesifik untuk menuliskan kode. Jadinya disini semua kode yang kita tuliskan kelihatan menggunakan font yang sama, dan warna yang sama. Tidak ada perbedaan antara HTML Tag dan kontennya. Hal ini akan mempersulit kita apabila hendak menuliskan kode untuk situs besar, karena perhatian kita akan dihabiskan untuk mengurus hal-hal kecil seperti mencari tag, mengatur inden, dan lain-lain.

Oleh karena itu, sangat disarankan untuk menggunakan text editor yang memang dirancang untuk menuliskan kode. Ada banyak text editor yang tersedia, seperti Atom, Sublime, Notepad++, Textpad, Eclipse, Visual Studio, Dreamweaver dan lain-lain. Ada yang sepenuhnya gratis, dan ada juga yang berbayar.

Namun yang saya sarankan untuk digunakan disini adalah Atom. Mengapa? Alasan pertama tentunya karena gratis. Dan kemudian karena saya merasa lebih nyaman untuk melihat dan menuliskan kode menggunakan Atom. Selain itu juga ada fitur-fitur yang bisa membantu kita dalam coding. Sekarang kita coba lihat ya, kalau kode yang sama kita buka ulang menggunakan Atom.

Nah sekarang kita sudah melihat kode yang sama, namun di sebelah kiri ditampilkan oleh Atom dan sebelah kanan ditampilkan oleh Notepad. Pada atom, kita bisa melihat jelas yang mana HTML Tag dan yang mana kontennya. Hal ini disebabkan karena elemen pada tag ditampilkan dengan warna merah. Nantinya kalau kita sudah menuliskan banyak tag, hal ini akan sangat membantu kita, terutama dalam hal mencari kesalahan penulisan kode.

Bagaimana cara menginstall Atom? Kita bisa buka browser kita, dan pergi menuju Atom.Io. Dihalaman pertama kita sudah bisa langsung melihat ada tombol Download di sebelah kanan. Situs Atom sudah bisa secara otomatis mendeteksi apakah kita menggunakan operating system Windows Linux, atau MacOS. Disini bisa dilihat bahwa saya sedang menggunakan Windows 64 bit. Dan kalau dilihat dari tombol Downloadnya, akan mengantarkan kita ke download Atom versi Windows 64 bit juga.

Kita tinggal menekan tombol Download. Dan kemudian double klik pada file yang telah kita download dan ikuti instruksi untuk instalasinya.

Dibawah tombol download kita bisa membaca ada deskripsi singkat dari Atom, yaitu “A hackable text editor for the 21st Century”. Maksudnya adalah Atom memberi kesempatan kepada komunitas pemakainya, untuk menambahkan fitur-fitur baru dalam bentuk Package. Kita kembali ke Text Editor Atom ya. Disini kita bisa pilih menu File, Setting, dan kemudian kita pilih Packages.

Nah disini kita bisa lihat ya daftar Packages yang sudah diinstall di Atom milik saya. Community Packages ini adalah packages yang dikembangkan oleh komunitas, jadi bukan fitur utama yang dikembangkan oleh Atom itu sendiri ya. Dan apabila kita ingin menambahkannya, pertama kita klik dulu menu Install pada bagian navigasi. Kemudian kita cari nama package yang hendak kita install. Misalkan kita mencari packages dengan nama beautify. Lalu Atom akan menampilkan daftar packages yang sesuai dengan pencarian kita. Untuk package yang masih belum terinstall, maka ada tombol Install berwarna Biru seperti ini. Sementara package yang sudah terinstall seperti atom-beautify, maka tombolnya adalah seperti ini dimana kita bisa melakukan setting, uninstall atau disable pada package tersebut.

Sekarang kita kembali ke kode kita dan kita hendak mengetik kode halaman HTML secara lengkap. Kita ketik HTML dan kemudian kita tekan tombol Enter. Nah disini karena saya sudah menambahkan package Emmet, maka saya langsung mendapatkan kode HTML Boilerplate. HTML Boilerplate adalah sejumlah kode standart yang harus kita tuliskan di setiap halaman HTML kita. Disinilah salah satu kehebatan dari Atom ya, jadi daripada setiap kali kita hendak membuat halaman baru kita mesti mengetik kode sebanyak ini, kita cukup hanya mengetikan html dan menekan enter, dan secara otomatis sudah langsung mendapatkan kode sebanyak ini.

Apabila Anda ingin melihat hal-hal lain yang dapat kita lakukan dengan package Emmet, kita bisa mengunjungi alamat situs:
https://docs.emmet.io/cheat-sheet/

Disini kita bisa melihat daftar dari shortcut yang perlu kita ketikan, beserta kode lengkap yang akan kita dapatkan dari shortcut tersebut. Dengan membiasakan diri menggunakan fitur Emmet, kita bisa menghemat banyak waktu kita.

Sekarang kita kembali ke kode kita. Dan kita bandingkan kembali ya Atom dengan Notepad. Misalkan kita copy boilerplate ke kode di Notepad. Dan kemudian kita pindahkan judul konten ke dalam tag Body. Dan kita lakukan hal yang sama di Atom.

Bisa kita lihat disini bahwa kode yang ditampilkan di Atom jauh lebih enak untuk dilihat. Terutama karena warnanya ya. Disini kita bisa melihat bahwa elemen ditampilkan dengan warna merah, attribute dengan warna kuning, sedangkan nilai attribute berwarna hijau. Sedangkan kalau kita lihat di notepad, kita akan kesulitan untuk membedakan konten dengan tag.

Dan satu hal lagi yang paling penting adalah masalah inden. Di Atom bisa kita lihat bahwa kode konten pada pelajaran pertama yang kita pindahkan ke dalam tag Body secara otomatis diberikan inden lebih dalam daripada body. Bisa kita lihat bahwa tag H1 berada disini, sedangkan tag Body berada disini. Inden ini sangat penting ya dalam penulisan kode HTML. Mengapa? Karena hal yang paling penting dalam pemograman HTML adalah setiap kali kita membuat tag pembuka, maka kita juga harus menuliskan tag penutupnya. Dengan menggunakan inden, kita bisa dengan lebih mudah memeriksa dimana tag pembuka kita dan dimana tag penutup kita.

Dan disini kita bisa melihat juga bahwa Atom secara otomatis membantu kita mencarikan dimana tag pembuka dan dimana tag penutup kita. Misalkan saya klik ke tag Body. Bisa kita ada garis bawah berwarna biru pada tag pembuka Body dan tag penutup Body. Dan misalkan saya pindahkan ke tag H1, maka kita bisa melihat juga ada garis bawah berwarna biru pada tag pembuka H1 dan tag penutup H1.

Sekarang kita lihat kode HTML kita secara keseluruhan ya. Seluruh kode HTML kita berada di dalam tag HTML. Bisa dilihat disini. Dan Tag HTML itu isinya hanya 2 ya, yaitu tag Header, dan tag Body. Disini kita bisa melihat bahwa di dalam tag boleh ada tag lagi. Dan seluruh isi dari tag HTML berada di inden pertama.

Kemudian kita lihat di dalam tag Head, terdapat 2 buat tag yaitu meta dan title. Tag meta dan title ini berada di inden kedua. Bisa dilihat disini bahwa tag pembuka head dan tag penutupnya berada di posisi sejajar, sedangkan tag meta dan title berada lebih dalam daripada tag head.

Apabila kita menuliskan kode dengan inden yang berantakan, misalnya semua tag header disini saya ubah agar tidak memiliki inden sama sekali, maka kita bisa menggunakan package atom-beautify untuk secara otomatis merapikan kembali kode tersebut. Caranya sangat mudah. Kita klik saja dan pilih bagian mana yang perlu dirapikan, lalu kita pilih menu Packages, Atom Beautify dan Beautify. Atom akan secara otomatis merapikan kembali inden kode HTML kita. Tentunya untuk melakukan hal ini, kita harus menginstall package atom-beautify terlebih dahulu.

Pada kesempatan ini kita sudah mempelajari mengenai mengapa lebih baik menggunakan Text Editor Atom? Karena gratis, nyaman untuk digunakan dan banyak fitur tambahan dari Communities Packagesnya.

Kita ulangi lagi ya aturan umum penulisan HTML Tag. Tag kita tuliskan di dalam tanda kurung siku, kemudian diikuti oleh kontennya. Lalu diakhir konten kita tuliskan kembali tag tersebut dalam tanda kurung siku namun ditambahkan dengan tanda slash/. Sebagai contoh bisa kita lihat disini bahwa kita menandakan konten Alice’s Adventures in Wonderland sebagai tag Header tingkat pertama. Tulisan h1 di dalam tag, yang dituliskan dalam font berwarna merah, kita sebut dengan nama elemen.

Selanjutnya kita melihat lagi aturan umum penulisan Attribute. Attribute dituliskan di dalam tanda kurung siku tag, dan harus berada setelah elemen. Jadi elemen harus selalu berada di paling kiri, setelah itu baru diikuti dengan nama attribute. Apabila attribute tersebut memiliki nilai, maka kita menambahkan tanda sama dengan setelah nama attribute, dan menuliskan nilainya di dalam tanda petik dua.

Sebagai contoh dibawah ini bisa kita lihat tag dengan elemen HTML yang berwarna merah. Lalu nama attributenya lang dan dir yang berwarna kuning. Sedangkan nilai attribute adalah en dan ltr yang diberi warna hijau.

Kita dapat menambahkan tag di dalam tag, alias tag bertingkat. Di contoh ini kita bisa melihat bahwa di dalam tag HTML terdapat tag head, dan kemudian didalamnya terdapat tag meta. Untuk penulisan kode yang lebih rapi, biasanya kita memberikan inden untuk konten dari tag.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.