Pemrograman Web &

Perangkat Bergerak

SMK Negeri 2 Surakarta

SEMESTER 1 Penulis
2018 / 2019 Arika Prihastanti S, S.Pd
 BAB I
PENGENALAN WEBSITE
A. TAHAP MEMBANGUN PROYEK WEBSITE

Dalam membangun sebuah website diperlukan tahapan sebagai berikut.

B. HTML
Untuk membangun websites, Anda harus mengetahui tentang HTML — teknologi
dasar yang digunakan untuk menentukan struktur halaman web. HTML digunakan
untuk menentukan apakah konten web Anda 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 Anda tetapkan.
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertextkarena
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).
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 anda 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 aneh, tapi jika anda telah
mengenal bahasa pemrograman lain, dalam HTML tidak akan ditemukan struktur yang
biasa di temukan dalam bahasa pemrograman seperti IF, LOOP,

2|Pemrograman Web & Perangkat Bergerak Arika P.S,S.Pd

 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.

Versi terbaru HTML: HTML5

Saat ini versi terbaru dari HTML adalah HTML5. HTML5 berisi beberapa fitur baru, tapi
tetap membawa mayoritas fitur dari versi HTML sebelumnya, yakni HTML 4 dan xHTML.

C. 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, 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 perangkat utama yang kita
butuhkan. Ibarat bahasa pemrograman lainnya, Web Browser
adalah compilerdan intrepreter HTML. Anda bebas menggunakan web browser yang

3|Pemrograman Web & Perangkat Bergerak Arika P.S,S.Pd

 disukai, namun dalam tutorial Belajar HTML ini saya akan menggunakan Mozilla
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 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

4|Pemrograman Web & Perangkat Bergerak Arika P.S,S.Pd

 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. coba adalah 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:

5|Pemrograman Web & Perangkat Bergerak Arika P.S,S.Pd

 Save teks diatas sebagai hello.html pada folder BelajarHTML. Setelah itu jalankan
file hello.html kita dengan cara double klik file tersebut, atau klik kanan –> Open With
–> Firefox (jika anda menggunakan web browser firefox)

Selamat! file HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada
satupun kode HTML didalamnya. Dari percobaan ini kita dapat melihat bahwa setiap
halaman HTML harus diakhiri dengan ekstensi .html. Anda 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.

6|Pemrograman Web & Perangkat Bergerak Arika P.S,S.Pd