MODUL
Konsep Teknologi Informasi
A. Tujuan Pembelajaran
1) Memahami konsep teknologi informasi
2) Memahami tahapan membangun proyek website
3) Menjelaskan definisi HTML
4) Menjelaskan definisi web browser
B. Materi Pembelajaran
1. Tahap Membangun
Proyek Website
Gambar 1. Tahap Membangun Proyek Website
2. Definisi HTML
Untuk
membangun website, kalian harus mengetahui tentang HTML sebagai
teknologi dasar yang digunakan untuk menentukan struktur halaman web. HTML
digunakan untuk menentukan apakah konten web kalian harus diakui sebagai
paragraf, daftar, judul, link, gambar, multimedia player, form, atau salah satu
dari banyak elemen lain yang tersedia atau bahkan elemen baru yang kalian
tetapkan.
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.
HTML
merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web,
jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemrograman
web yang ditujukan untuk memanipulasi kode HTML, seperti Javascript dan PHP.
Akan tetapi sebelum kalian belajar Javascript maupun PHP, memahami HTML
merupakan hal yang paling awal.
HTML
bukanlah bahasa pemrograman (programming language), tetapi bahasa markup
(Markup Language), hal ini terdengar sedikit aneg, tetapi jika kalian
telah mengenal bahasa pemrograman lain, dalam HTML tidak akan ditemukan
struktur yang biasa ditemukan dalam bahasa pemrograman 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
kalian menemukan artikel yang membahas xHTML, bisa disamakan dengan HTML,
karena perbedaannya tidak terlalu banyak.
Versi terbaru HTML: HTML5
Saat ini versi terbaru dari HTML adalah
HTML5. HTML5 berisi beberapa fitur baru, tetapi tetap membawa mayoritas fitur
dari versi HTML sebelumnya, yakni HTML4 dan xHTML.
3. Definisi Web
Browser
Web
browser (atau bisa 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 diperlukan 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 (IE),
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, termasuk web browser terbaru mereka: Microsoft
Edge Penggunaan Web Browser terbanyak. Menarik juga untuk disimak, apa
saja web browser yang paling banyak dipakai saat ini. Bagi kita sebagai web
developer, informasi ini sangat relevan dan perlu diperhatikan. Berdasarkan
situs w3counter.com yang diakses per September 2017, Google Chrome digunakan
oleh sekitar 56% pengguna internet, yang kemudian diikuti oleh web browser
Safari dan Firefox masing-masing 14% dan 9%. Artinya, Google Chrome sangat
dominan dipakai sebagai web browser.
Fungsi Web Browser
Untuk
mempelajari HTML, web browser adalah perangat utama yang kita butuhkan.
Ibarat bahasa pemrograman lainnya, Web browser adalah compiler
dan interpreter HTML. Kalian bebas menggunakan web browser yang
disukai, namun dalam tutorial Belajar HTML ini, saya akan menggunakan Opera
ataupun Google Chrome ataupun Mozill Firefox.
Memilih Aplikasi Editor HTML (Notepad++)
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 mmebuat 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 akan 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 didownload secara gratis dari http://notepad-plus-plus.org/download/ dimana pada saat tutorial ini di-update
pada September 2017, versi terakhir adalah 7.5.1, berukuran sekitar 2,8MB.
Notepad++ merupakan aplikasi editor text gratis ringan namun banyak
fitur. Salah satunya adalah fitur pewarnaan code (syntax highlighting).
Fitur ini akan memudahkan penulisan HTML.
Gambar 2. Editor text menggunakan Notepad++
Text Editor Komodo Edit
Salah
satu alasan saya menggunakan text editor Notepad++ adalah aplikasinya
ringan dan berukuran kecil. Tetapi 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/ dan 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 di atas, 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. Dreamweaver tidak hanya sebuah text editor untuk HTML saja,
namun juga untuk berbagai bahasa pemrograman web lainnya.
Dibalik
keunggulannya, 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
kalian 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 text 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 didownload, tetapi terdapat
iklan yang cukup mengganggu. 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 didapat
lebih berkah. Fitur-fitur yang ada juga tidak terlalu dibutuhkan untuk proses
belajar.
Namun
jika kalian 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. Terdapat text editor lain
seperti 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.
Cara Menjalankan File HTML
Setelah Web
browser selesai diinstal, dan Text Editor sudah tersedia, kali ini
kita akan membahas tentang cara menjalankan file HTML dari web
browser. Selanjutnya, buka aplikasi Notepad++, atau aplikasi text editor
lainnya, lalu ketik text berikut ini:
Gambar 3. Hasil dari penulisan di Notepad++
Selamat!
File HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada satupun kode
HTML di dalamnya. Dari percobaan ini kita dapat melihat bahwa setiap halaman
HTML harus diakhiri dengan eksistensi .html. Kalian mungkin juga akan menemukan
beberapa halaman juga memiliki ekstensi .htm, ekstensi ini digunakan untuk
mendukung Windows versi lama yang masih menggunakan ekstensi 3 huruf di
belakang sebuah file.
C. Tugas Pembelajaran
1) Dari penjelasan di atas, apa itu text
editor Notepad++ ?
2) Dari penjelasan di atas, apa itu
kelebihan dari text editor Komodo Edit ?
3) Dari penjelasan di atas, mengapa browser
Internet Explorer sangat populer pada tahun 2000-an ?
4) Dari penjelasan di atas, mengapa Sublime
Text saat ini banyak yang menggunakan ?
D. Referensi
1) Prihastanti S, Arika. (2018). Pemrograman
Web dan Perangkat Bergerak Semester 1. SMK Negeri 2 Surakarta
Komentar
Posting Komentar