Mengenal HTML bagian 1
Jika anda ingin mempelajari bagaimana cara membuat website, langkah pertama adalah mempelajari HTML. HTML merupakan dasar dari semua halaman web yang kita lihat di Internet. Tetapi, apa sebenarnya HTML itu? dalam tutorial pertama Belajar HTML Dasar ini kita akan membahas Pengertian HTML.Mengenal HTML
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini, lalu pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome). Akan tampil sebuah halaman baru yang merupakan kode HTML dari halaman ini.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
HTML bukanlah bahasa pemograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.
Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language. xHTML merupakan versi lama dari HTML (sebelum era HTML5 seperti saat ini). xHTML menggunakan aturan penulisan yang lebih ketat. Jika anda menemukan artikel yang membahas xHTML, bisa disamakan dengan HTML, karena perbedaannya tidak terlalu banyak.
File HTML harus dijalankan dari aplikasi web browser.
Pengertian Web Browser
Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima, menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu informasi itu dibuat dalam format HTML.Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan.
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.
Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser membuat aturannya sendiri.
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi programmer web.
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C.
Fungsi Web Browser
Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. Ibarat bahasa pemograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial Belajar HTML ini saya akan menggunakan Mozilla Firefox.Untuk mendapatkan versi terbaru dari web browser populer saat ini, salahkan klik tombol dibawah:
Selain web browser, aplikasi lain yang kita butuhkan untuk mempelajari HTML adalah sebuah text editor,kita
membutuhkan sebuah aplikasi text editor. Dalam tutorial HTML kali ini
kita akan membahas tentang cara memilih aplikasi text editor yang
sesuai, salah satunya adalah Notepad++.
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar HTML ini saya akan menggunakan aplikasi Notepad++.
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-plus.org/download/ dimana pada saat tutorial ini diupdate pada Agustus 2016, versi terakhir adalah 6.9.2, berukuran sekitar 4MB. 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.
Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi ini cenderung ‘berat’ dan berharga jutaan rupiah untuk versi legalnya. Sekarang hanya bisa didapat dengan cara berlangganan setiap bulan. Dreamweaver lebih cocok digunakan jika anda telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi originalnya).
Tetapi apapun text editor yang digunakan, hal ini tidak menjadi masalah. Karena selama text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup sebagai editor HTML.
Sebagai alternatif, aplikasi text editor gratis lain yang bisa anda coba adalah Komodo Edit, Bracket, Atom, Aptana Studio, Eclipse atau Net Beans.
Setelah aplikasi web browser dan text editor telah tersedia dalam komputer, saatnya untuk mencoba menjalankan file HTML pertama kita.
Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder “BelajarHTML” di Drive D. Folder ini akan kita jadikan tempat seluruh halaman HTML yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini:
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 sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar HTML ini saya akan menggunakan aplikasi Notepad++.
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-plus.org/download/ dimana pada saat tutorial ini diupdate pada Agustus 2016, versi terakhir adalah 6.9.2, berukuran sekitar 4MB. 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.
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 pemograman web lainnya.Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi ini cenderung ‘berat’ dan berharga jutaan rupiah untuk versi legalnya. Sekarang hanya bisa didapat dengan cara berlangganan setiap bulan. Dreamweaver lebih cocok digunakan jika anda telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi originalnya).
Tetapi apapun text editor yang digunakan, hal ini tidak menjadi masalah. Karena selama text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup sebagai editor HTML.
Sebagai alternatif, aplikasi text editor gratis lain yang bisa anda coba adalah Komodo Edit, Bracket, Atom, Aptana Studio, Eclipse atau Net Beans.
Setelah aplikasi web browser dan text editor telah tersedia dalam komputer, saatnya untuk mencoba menjalankan file HTML pertama kita.
Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder “BelajarHTML” di Drive D. Folder ini akan kita jadikan tempat seluruh halaman HTML yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini:
Selamat Pagi Dunia, Hello World!
Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan extensi .html. Anda mungkin juga akan menemukan beberapa halaman juga memiliki ekstensi .htm, eksetensi ini digunakan untuk mendukung Windows versi lama yang masih menggunakan ekstensi 3 huruf di belakang sebuah file.
Apa yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Perhatikan bagian alamat pada web browser, diawali dengan “file:///” lalu diikuti dengan alamat file HTML yang disimpan dalam komputer, misalnya: “D:/BelajarHTML/hello.html“. Artinya, kita tidak mesti online untuk membuat dan menjalankan file HTML.
Sekian dulu penjelasan dari saya,semoga jelas kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML dasar 2.
Apa yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Perhatikan bagian alamat pada web browser, diawali dengan “file:///” lalu diikuti dengan alamat file HTML yang disimpan dalam komputer, misalnya: “D:/BelajarHTML/hello.html“. Artinya, kita tidak mesti online untuk membuat dan menjalankan file HTML.
Sekian dulu penjelasan dari saya,semoga jelas kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML dasar 2.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon