Setelah web browser berhasil diinstal, untuk membuat kode HTML kita butuh sebuah aplikasi text editor. Dalam tutorial HTML kali ini kita akan membahas tentang cara memilih aplikasi text editor yang sesuai, diantaranya adalah Notepad++ dan Komodo Edit.
Memilih Aplikasi Editor HTML
Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web.
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows sebenarnya sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar HTML kali ini saya akan menggunakan aplikasi Notepad++.
Text Editor Notepad++
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-plus.org/download/ dimana pada saat tutorial ini diupdate pada September 2017, versi terakhir adalah 7.5.1, berukuran sekitar 2,8MB. Notepad++ merupakan aplikasi editor text gratis ringan namun memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code (syntax highlighting). Fitur ini akan memudahkan penulisan HTML.
Text Editor Komodo Edit
Salah satu alasan saya menggunakan Text editor Notepad++ adalah aplikasinya ringan dan berukuran kecil. Tapi tidak jarang ada yang protes kenapa tampilannya terkesan "jadul".
Sebagai alternatif, bisa mencoba Komodo Edit. Teks editor ini juga bisa didapat dengan gratis di: http://komodoide.com/komodo-edit/. Saat artikel ini saya revisi, versi terakhir adalah 10.2.3, berukuran sekitar 75MB.
Komodo Edit merupakan versi ringan dari versi berbayar Komodo IDE (juga dikembangkan oleh perusahaan yang sama). Pada saat membuka halaman diatas, pastikan untuk memilih tombol "Download Komodo Edit", bukan "Try Komodo IDE".
Bagaimana dengan Adobe Dreamweaver?
Aplikasi Adobe Dreamweaver merupakan aplikasi web editor yang paling populer. Dreamweaver menyediakan fitur melimpah untuk sekedar membuat halaman web dengan kode HTML. Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun juga untuk berbagai bahasa pemrograman web lainnya.
Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi ini cenderung 'berat' dan berharga jutaan rupiah untuk versi legalnya.
Sekarang Dreamweaver hanya bisa didapat dengan cara berlangganan setiap bulan dengan harga sekitar Rp 193.000 per bulan. Dreamweaver lebih cocok digunakan jika anda telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi originalnya).
Bagaimana dengan Sublime Text?
Saat ini teks editor Sublime Text juga sedang 'naik daun' dan sangat populer dipakai. Sublime Text adalah teks editor yang mirip seperti Notepad++ atau Komodo Edit namun dengan fitur lebih banyak.
Satu-satunya masalah dengan Sublime Text adalah aplikasi ini tidak gratis, berbayar sekitar $80. Di web resmi https://www.sublimetext.com juga menyediakan versi trial yang bisa di download, tapi terdapat iklan yang cukup menganggu. Selain itu lisensinya mengharuskan membeli versi berbayar jika terus digunakan (a license must be purchased for continued use)
Jadi daripada pakai yang bajakan, lebih baik menggunakan produk yang benar-benar gratis seperti Notepad++ atau Komodo Edit agar ilmu yang di dapat lebih berkah. Fitur-fitur yang ada juga tidak terlalu dibutuhkan untuk proses belajar.
Namun jika anda sanggup membeli lisensi aslinya, teks editor ini memang sangat powerfull dan menjadi standar tidak resmi untuk kalangan web developer professional.
Apapun text editor yang digunakan, sebenarnya tidak menjadi masalah. Karena selama text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup sebagai editor HTML.
Setelah aplikasi web browser dan text editor telah tersedia dalam komputer, saatnya untuk mencoba menjalankan file HTML pertama kita.
maju terus duniailkom bisa gabung ga bro … apa memang dibuka u/ umum pa ada tempat kursus nya.. ditunggu balesanye…
Buat saat ini saya belum membuka kursus mas, tapi baru jasa konsultasi untuk tugas/proyek/skripsi..
Bagi yang ingin belajar lebih 'serius', saya berencana membuat ebook khusus dengan materi yang lebih lengkap dan pembahasan yang sistematis.
Mudah2an tidak lama lagi ebook HTML (plus HTML5) bisa segera rilis… :)
selamat pagi mas Andre, mas mau tanya untuk script yang kita buat di sublime, apakah bisa di copy paste dari gitHub , kemudian di edit yang mana script yang perlu, terima kasih mas
Bisa, karena file PHP pada dasarnya hanya file teks biasa. Tapi kalau sudah diambil dari github, biasanya sudah aplikasi yang cukup besar (terdiri dari beberapa file), jadi tidak bisa sembarang copy paste, kecuali kita sudah paham tentang kode-kode tersebut.
pagi mas andre saya ingin konsultasi dimana saya bisa menghubungi mas ya, bila berkenan bisa hubungi wa saya barangkali liat reply dari saya ini. 085839855634. terimakasih banyak mas.
Mas..aku kesulitan mau membuat tampilan form pemesanan..baca tutorial get and post tetap ga ngerti..
Aku buat tampilan form dgn html di dreamwever*sintaknya berbeda dgn yg dicontohkan..
Sdgkan database mgunakan mysql dn phpmyadmin..
Bagaimana untuk sintak tampilan dr input form pemesanan dn bgmn koneksinya mas..mohon pencerahan..terima kasih
Kalau menggunakan dreamweaver memang akan buat bingung jika kita tidak tau kode-kode yang dihasilkannya. Saran saya coba ulangi belajar form HTML + cara memproses nilainya dengan PHP. Editor yang digunakan sebaiknya text editor seperti Notepad++ (murni dibuat dengan kode-kode), jadi kita bisa paham dengan kode program yang dibuat.
Mengenai tutorial membuat form ini sudah saya buat dengan detail di duniailkom, termasuk tentang GET dan POST PHP. Tapi dasarnya memang harus paham kode-kode HTML untuk form.
Sy punya desain tampilan interfacenya..kika buat di notepad++ msh terlihay berantakan..
Bgmn buat tampilannya menarik dgn notepad++..
Di dreamwever bs di simpan dgn format .php apakah bs dgunakan??
Atau bgmn jika halaman html tersebut disisipkan sintak php apa bs..yg sy baca di halaman html dproses di php dgn sintak action
Mungkin yufita bisa mulai mempelajari secara bertahap dari HTML, CSS dan PHP. Termasuk cara membuat file PHP, apa hubungannya dengan HTML, dan apa fungsi CSS. Ketiga materi ini sangat mutlak dipelajari sebelum masuk ke web design dan perancangan layout. Jika kita langsung masuk ke desain web hanya dengan 'bekal' desain dari Dreamweaver akan sangat sulit untuk langsung mempelajari kode-kodenya.
versi terbaru Notepad + + : v6.7.8.2
Terimakasih updatenya mas :)
Mau tanya, untuk admin dunia ilkom ini apakah ada contact person nya jika ingin saya konsultasi? Boleh tolong diinfokan?
Thanks.. Maju terus dunia ilkom. :)
Silahkan kontak ke [email protected] mas, mudaha2an saya bisa membantu :)
Ok Mas Andre, sudah saya sending email ya. Please check… :)
aplikasi untuk menulis kode program website apa aja?
Kalau untuk web programming, cukup text editor saja kok gan, yang gratis bisa menggunakan Notepad++ atau bisa coba Comodoedit. Untuk yang kelas berat (terutama untuk bahasa PHP) Bisa coba NetBeans, Aptana Studio, atau Eclipse, semua ini bersifat open source dan gratis dipakai.
Yang berbayar bisa coba Sublime Text, PHPstorm, atau Adobe Dreamweaver. Khusus untuk adobe dreamweaver, menurut saya tidak terlalu cocok untuk pemula, karena fiturnya yang 'instan' malah akan membuat bingung, hehe..
konsultasi skripsi kemana ya mas ?
Untuk saat ini lagi di pending mas, soalnya sedang nyelesain eBook PHP, hehe… tapi untuk tanya2 atau diskusi ringan, bisa kontak saya ke [email protected]
mas.. ni yang di terangin.. membuka web lewat java script note pad yang d buat sndiri…. nah ni mau nanya mas.. kalo note pad itu bisa di jadikan alat perintah gak mas.. ? mksutnya di kasi kode html.. yang ujung nya bisa mematikan komputer, menyalakannya.. dll.. itu bisa gak mas.. mohon bantuan nya mas..
HTML dan web programming tidak bisa digunakan membuat aplikasi seperti itu gan. Jika pengen memprogram OS Windows, misalnya mematikan komputer, membuat alarm, dll, bisa coba pelajari bahasa pemrograman Visual Basic.
gimana ya caranya mencerna kode html, saya benar-benar masih bingung dengan bahasa pemograman
Silahkan ikuti tutorial ini secara perlahan gan :)
Semangat Duniailkom, ilmunya (y).. :))))
ms. frontpage itu juga bisa kan?
Yup bisa sis. Tp frontpage itu bisa dibilang aplikasi "jadul". Kalo g salah saya versi terakhirnya keluar di tahun 2003, dan sejak itu udah g dikembangkan lagi.
Kalau tujuannya untuk belajar programming, sebaiknya pakai teks editor full teks saja seperti Notepad++. Ukurannya cuma 7MBan dam gratis. Setahu saya MS Frontpage juga aplikasi berbayar (sepaket dengan MS Office).
Mas , mohon pwncerahannya .. saya kan newbie , kebetulan saya menyukai dunia programing , salah satunya web programing , awalnya semangat belajar html , dalam waktu seminggu udah apal banyak kode (hehe bukan sombong :D) html tapi seiring berjalannya waktu saya suka tergiur dg bahasa programing baru , kayak java script , php , jquery dan bnyak lagi , tapi gak bisa istiqomah , intinya mohon pencerahannya untuk seorang newbie , harus dari mana? , harus apa ? supaya konsist . saya sering belajar tutorial programing dari dunia ilkom dan code politan :D
Web Programming sebenarnya gabungan dari banyak bahasa pemrograman mas, bukan hanya HTML saja. Untuk bisa dibilang paham tentang web programming, setidaknya mesti paham 5 materi dasarnya: HTML, CSS, PHP, MySQL dan JavaScript. Mayoritas website modern dibangun dari kelimanya. Sebagai contoh, website duniailkom ini menggunakan kelimanya sekaligus.
HTML memang dasar dari seluruh website, tapi tidak bisa dengan HTML saja. Bahkan kalau boleh dibilang, HTML itu bukanlah sebuah bahasa pemrograman, tp hanya bahasa "kode". Di dalam HTML tidak ditemukan fitur umum bahasa pemrograman seperti variabel, perlulangan, kondisi if, function, dll. Programmingnya nanti ada di PHP dan JavaScript.
Pembahasan lebih jelas bisa kesini mas: https://www.duniailkom.com/ingin-belajar-web-programming-harus-mulai-dari-mana/
Mahal ya, tetapi setara dengan harga
Yang mahal apa nih gan? hehe…
Mas, saya mau nanya nih. saya baru mau belajar pemrograman menggunakan Html, yang saya mau tanya untuk buat sebuah form tabel caranya gimana ya ? dan biar setiap form saling terhubung dengan form lain gimana ya ? terimakasih
Maksudnya pengen ngedesign form agar rapi y? nanti tag formnya <input> bisa diinput satu2 ke dalam tag table <td>. Tp kalau agan serius pengen belajar web programming, sebaiknya menggunakan CSS untuk design, bukan dari tabel.
halo mas, tadi saya pesan ebook html uncovernya.dibalas ya mas..makasih
Siap, emailnya sudah di balas ya.. terimakasih :)
mas, saya baru belajar html dan css. trs saya bingung kalo professional web developer itu pake dreamweaver atau manual coding? dan lebih bagus mana?
terimakasih.
Programmer professional pakai manual coding. Fitur tampilan seperti yang ada di DW hanya untuk pelengkap saja. Malah menurut saya cukup jarang yang pakai DW karena lisensinya lumayan mahal…
Untuk pemula juga lebih baik tidak mulai dari DW, karena yang kita pelajari itu harusnya kode HTML, CSS, PHP, dll, bukan cara pakai DW.
bro ada contact person. atau sosmed yg bisa dihubungi (chatting). saya punya banyak pertanyaan dibenak saya bro. respon gan
Bisa kontak saya via email saja gan: [email protected]. Kalau untuk chat pribadi, saya batasi bagi yang sudah membeli eBook Duniailkom :)
Selamat siang, saya Meri Oktaviani , mahasiswa semester 4 jurusan manajemen informatika di Politeknik Negeri Sriwijaya. Kami berencana untuk mengundang dari duniailkom untuk menjadi pembicara pada workshop mengenai programing. Untuk lebih lanjut , saya bisa langsung hubungi kemana ya?
Terimakasih atas penawarannya… Tp berhubung saya sedang ada kegiatan lain, belum bisa ngasih materi seminar maupun workshop nih. Mungkin bisa di lain kesempatan :)
mas saya awam sekali di dunia komputer,saya pengen punya web buat promosiin usaha saya biar orang bnyk yang tau,,gimana cara,dan langkah langkahnya biar usaha saya bisa kaya orang orang…trm ksh
Kalau awam dan berangkat dari nol, sebaiknya web tersebut dibuat pakai blogspot saja mas, atau bisa juga menggunakan WordPress. Alternatifnya bisa promosikan di situs marketplace seperti Bukalapak atau Tokopedia.
Membuat website sendiri dengan berangkat dari nol, butuh waktu dan proses yang cukup lama..
Mas terima privat web gak?
Trus ini pusatnya dimana atau store ?makasih
Untuk kursus privat saat ini belum tersedia, dan duniailkom hanya beroperasi via online (belum ada tempat kursus/toko).
Jika berminat, bisa order buku Duniailkom untuk mempelajari web programming dnegan lebih lanjut..caranya bisa menghubungi saya via email ke [email protected]
bro mau tanya nih…untuk buat link referal gmn yah, harus pakai apa yah?????
mksh jawabannya!!!!!!
Link referal untuk apa gan? Jika maksudnya pengen membuat sebuah situs affiliate sendiri, sebaiknya beli script saja. Kalau buat dari nol bisa makan waktu lama dan banyak yang mesti dipelajari…
Gan saya mau tanya
Berarti jika kita ingin membuat halaman web sederhana hanya dgn aplikasi text editor bisa gan?
Lalu web blog yg banyak skrg ini apakah dibuatnya hanya menggunakan text editor? lalu design2, warna2 nya itu ngambil dari mana seperti from menu dan sebagainya.?
Web yang kompleks pun juga bisa dibuat menggunakan teks editor. Beda dari website sederhana dengan yang kompleks, ada di code2 penyusun websitenya. Untuk web yang sederhana, mungkin ratusan atau seribuan baris kode program sudah jadi. Kalau web yang kompleks, bisa terdiri dari 10.000 baris kode program (bahkan lebih).
Tampilan visual seperti warna, form, gambar, dll. Itu semua dihasilkan dari gabungan kode HTML, CSS, PHP dan JavaScript. Semua ini bisa ditulis di text editor seperti Notepad++.
Aplikasi yang besar seperti Dreamweaver juga secara tidak langsung "menuliskan" kode program untuk kita. Ujung2nya file yang dihasilkan juga file teks biasa, yang kemudian dijalankan di web browser.
Kalau memang hanya menggunakan texteditor/notepad saja, lalu php itu utk apa? Php sebuah software yg terlebih dahulu harus kita instal? Lalu cara menjalankannya seperti apa?
Maaf gan saya nanya terlalu banyak, saya udah lumayan banyak baca mengenai pengertian html, php, css tetapi masih belum dapat gambarannya.
Hanya html ngerti sedikit, yg cara jalaninnya itu. Terimakasih
HTML, PHP, CSS dan JavaScript, itu semua adalah jenis kode program yang harus di ketik agar bisa membuat web. Cara menjalankannya pun beda2. Agar lebih paham menurut saya silahkan ikuti saja semua tutorial yang ada di duniailkom ini.
Atau bisa ke https://www.duniailkom.com/ingin-belajar-web-programming-harus-mulai-dari-mana/ Untuk pembahasan singkat mengenai fungsi dari HTML, CSS, PHP, MySQL dan JavaScript,
Thanks gann
bang andre, bisa bantu saya untuk lebih mengerti tentang ilmu komputer ga?
bagi2 ilmu bang.. hehehe makasih
Ilmu komputer ini sangat luas, ada software (programming) dan hardware. Untuk programming, khususnya web programming bisa baca2 tutorial yang ada di duniailkom ini. Tapi kalau pengen yang lebih serius, sekalian kuliah di jurusan ilmu komputer saja, hehe…
Sukses terus untuk duniailkom, isi artikelnya sangat bermanfaat :)
totorial yang lengkap dan jelas, saya sangat brterima kasih,
Min, kalau teks editor yang bagus untuk Mac apa Min?
Saya juga belum test teks editor di Mac, tapi bisa coba Komodo Edit juga (tersedia untuk Mac): https://www.activestate.com/komodo-ide/downloads/edit
cara menjalankan setelat kita koding gimana ya kak untuk menjalankan website yang kita buat di notepad++
Silahkan lanjut ke tutorial berikutnya: https://www.duniailkom.com/belajar-html-part-4-menjalankan-file-html/
Gan mau tanya, baru belajar ototdidak di website ini
saya pakai notepad++, tapi kenapa ga jadi ya di web browsernya?
Silahkan lanjut dulu ke part berikutnya, karena nanti baru akan dibahas tentang kode2 HTML yang mesti ditulis.
Kalo pake aplikasi "visual studio code" bagus gak gan buat html
G masalah, itupun juga bisa dipakai.
klo untu download sublime text gratis gmn ya kk.???
Sublime text merupakan aplikasi berbayar, versi demo-nya bisa dipakai tapi ada iklan setiap beberapa menit sekali. Daripada pakai yang bajakan, lebih baik pakai yang benar2 free seperti Notepad++ atau VS Code.
Untuk VS Code bisa di download ke sini: https://code.visualstudio.com. Dalam banyak hal VS Code bisa menggantikan Sublime Text dan fiturnya juga g kalah.
selamat pagi…saya ada masalah dengan aplikasi HTML, kode saya lupa makanya tida bisa membuka file saya,,,,minta bantuan gimana caranya untuk membuka kembali file saya yang terkunci…terimah kasih
izin gabung gan
Saya mau tanya mas andre, apakah bisa belajar html, css dan javascript di smartphone, dan kalau bisa web browser dan text editornya apa ya, soalnya saya belum punya laptop/komputer…
Terima kasih atas jawabannya
Yup bisa, kalau g salah ada beberapa aplikasi teks editor di Android seperti DroidEdit atau Quoda. Alternatif lain bisa juga pakai text editor online berbasis web seperti codepen.io, jsfiddle.net atau codesandbox.io.
Terimakasih duniailkom