Pemrograman
Web 1
(Web Programming 1)
Pendahuluan (Introduction)
01
Ilmu Komputer Teknik Informatika W151700011 Teuku Achmad Aliyansyah, S.Kom., M.T.
Abstract Kompetensi
Modul ini menjelaskan mengenai Membuat halaman HTML
teknologi web programming beserta sederhana (Sub-CPMK 1.1)
struktur dasar HTML.
Pembahasan
Sejak Sir Tim Berners-Lee (TimBL), seorang peneliti dan ilmuwan dalam bidang ilmu computer serta
professor di Massachusetts Institute of Technology (MIT), mengusulkan dan mengembangkan sistem
hypertext berbasis internet pada tahun 1989, dan kemudian, pada awal 1990-an, mengembangkan
dokumen HTML pertama. Sejak saat itu, HTML telah menjadi tulang punggung untuk membuat situs
web.
Sementara style sheets telah menjadi bagian dari bahasa markup sejak tahun 1980-an, CSS
(Cascading Style Sheets), yang dibuat untuk memisahkan presentasi (desain) dari konten (dokumen
markup), pertama kali diadopsi pada pertengahan 1990-an; sejak itu, CSS memiliki menjadi bahasa
styling standar untuk Web. Hari ini, HTML dan CSS telah menjadi bagian dari toolkit setiap web
developer.
Sebelum mempelajari tentang HTML (Hypertext Markup Language), CSS (Cascading Style Sheets),
dan JavaScript, penting untuk didapatkan pemahaman yang kuat tentang teknologi yang membantu
mengubah file teks biasa ini ke layar multimedia yang kaya akan content yang dapat dilihat di
komputer atau perangkat genggam saat menjelajahi World Wide Web. Misalnya, file berisi markup
dan kode client-side HTML dan CSS tidak berguna tanpa browser web untuk melihatnya, dan tidak
ada seorang pun selain Anda yang akan melihat konten Anda kecuali menggunakan server web.
Server web membuat konten Anda tersedia kepada orang lain yang, pada gilirannya, menggunakan
browser web mereka untuk menavigasi ke suatu alamat dan menunggu server mengirimkan
informasi kepada mereka. Anda akan terlibat dalam proses penerbitan ini karena Anda harus
membuat file dan kemudian letakkan di server untuk membuatnya tersedia di tempat pertama, dan
Anda harus memastikan bahwa konten Anda akan ditampilkan kepada pengguna akhir seperti yang
Anda inginkan.
Pada tahun 1993, hanya sekitar 100 komputer di seluruh dunia yang dilengkapi untuk menyajikan
halaman HTML. Halaman-halaman yang saling terkait itu dijuluki World Wide Web (WWW), dan
beberapa program browser web telah ditulis untuk memungkinkan orang untuk melihat halaman
web. Karena semakin populernya Web, beberapa programmer segera menulis browser web yang
dapat melihat grafis gambar bersama dengan teks. Sejak saat itu, pengembangan berkelanjutan
perangkat lunak browser web dan standarisasi HTML telah membawa kita ke dunia yang kita tinggali
saat ini, diantaranya lebih dari 110 juta server web menjawab permintaan lebih dari 25 miliar file
teks dan multimedia.
Namun, ada beberapa langkah dalam prosesnya—dan berpotensi beberapa perjalanan antara
browser dan server—sebelum Anda melihat seluruh konten situs yang Anda minta.
Misalkan Anda ingin melakukan pencarian Google, jadi Anda mengetik http://www.google.com di
kolom alamat atau pilih bookmark Google dari daftar bookmark Anda. Hampir segera, browser Anda
akan memunculkan sesuatu seperti apa yang ditunjukkan pada gambar dibawah.
Visiting www.google.com.
Versi sederhana dari proses yang terjadi untuk mengambil teks itu dan gambar dari server web dan
menampilkannya di layar Anda adalah sebagai berikut:
1. Browser web Anda mengirimkan permintaan untuk file index.html yang terletak di alamat
http://www.google.com/. File index.html tidak harus menjadi bagian dari alamat yang Anda
ketik di kolom alamat; kita akan pelajari lebih lanjut tentang file index.html di bab
selanjutnya.
Tag menyediakan atribut yang memberi tahu browser lokasi sumber file (src), lebar (width),
tinggi (height), jenis batas (border), dan teks alternatif (alt) yang diperlukan untuk
menampilkan logo. Anda akan belajar lebih lanjut tentang atribut di seluruh bab selanjutnya.
4. Browser melihat atribut src di tag <img/> untuk menemukan lokasi sumber. Dalam hal ini,
gambar logo.gif dapat ditemukan di direktori logos di alamat web yang sama
(www.google.com) dari di mana browser mengambil file HTML.
5. Browser meminta file di
http://www.google.com/logos/logo.gif web address.
6. Server web menafsirkan permintaan itu, menemukan file, dan mengirim isi file itu ke
browser web yang memintanya.
7. Browser web menampilkan gambar di monitor Anda.
Seperti yang Anda lihat dalam deskripsi proses pengiriman konten web, web browser melakukan
lebih dari sekadar bertindak sebagai bingkai foto tempat Anda dapat melihat konten. Browser
merakit komponen konten web dan atur bagian-bagian tersebut sesuai dengan perintah HTML
dalam file.
Anda harus selalu menguji situs web Anda dengan sebanyak mungkin browser web berikut:
Script dibawah ini menampilkan bagian dari konten web sederhana beberapa baris HTML yang
mencetak “Hello World! Selamat datang di Server Web Saya.” dalam huruf besar dan tebal pada
dua baris di tengah dalam jendela browser.
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1 style=”text-align: center”>Hello World!<br/> Selamat datang di Server Web Saya.</h1>
</body>
</html>
1. Web Statis
Merupakan website yang mempunyai halaman yang tidak berubah. Perubahan suatu
halaman dilakukan secara manual dengan mengedit code yang menjadi stuktur dari website
tersebut.
2. Web Dinamis
Merupakan website yang secara terstruktur diperuntukan untuk diupdate sesering mungkin.
Biasanya disediakan halaman backend untuk melakukan perubahan konten dari website
tersebut.
Contohnya : web portal, web berita, dll.
Struktur Navigasi
Struktur Navigasi adalah bagan hirarki dari suatu website yang menggambarkan isi dari setiap
halaman dan link. Struktur Navigasi dapat dikatakan sebagai gambaran dari hubungan atau rantai
kerja dari seluruh elemen yang akan digunakan dalam aplikasi. Kriteria-kriteria yang digunakan
dalam pengelompokan dari struktur navigasi adalah sebagai berikut: kebutuhan akan objek,
kemudahan pemakaian, interaktif, dan kemudahan membuatnya yang berpengaruh terhadap waktu
pembuatan suatu websites. Dalam penggambarannya Struktur Navigasi terbagi kedalam 4 Struktur
yang berbeda yaitu: Linier, Non Linier, Hierarchical (Hirarki) dan Composit (Campuran).
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses pembuatan
aplikasi web, yaitu:
Hypertext Markup Language (HTML) adalah bahasa pemrograman yang digunakan untuk
menampilkan sebuah website. HTML termasuk dalam bahasa pemrograman gratis, artinya tidak
dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa
dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global. Dokumen HTML
adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dan disimpan dengan file extension
.html . Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan
symbol “ < ” dan berakhir dengan sebuah symbol “ > ”.
Tag
Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML dituliskan diapit oleh tanda lebih
kecil ( < ), tanda lebih besar ( > ), dan garis miring ( / ). Tag dituliskan berpasangan, jika tidak
menggunakan tanda garis miring( / ) setelah penulisan namanya, disebut sebagai tag pembuka.
Namun, jika menggunakan tanda garis miring ( / ) sebelum nama tag, maka disebut sebagai tag
penutup. Tag bersifat incasesensitiv yang dimana penulisan dengan huruf besar, huruf kecil dan
campuran tidak masalah. Namun, untuk standarisasinya tag di tuliskan dalam huruf kecil.
HTML Elements
Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:
Elemen HTML dapat bersarang (ini berarti elemen dapat berisi elemen lain). Semua dokumen HTML
terdiri dari elemen HTML bersarang.
Contoh berikut berisi empat elemen HTML (<html>, <body>, <h1> dan <p>):
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Elemen HTML tanpa konten disebut elemen kosong. Tag <br> mendefinisikan jeda baris, dan
merupakan elemen kosong tanpa tag penutup:
Tag HTML tidak peka huruf besar/kecil: <P> artinya sama dengan <p>. Standar HTML tidak
memerlukan tag huruf kecil, tetapi W3C merekomendasikan huruf kecil dalam HTML, dan menuntut
huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.
HTML Attributes
Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman yang dituju tautan:
Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan jalur
ke gambar yang akan ditampilkan:
<img src="img_girl.jpg">
1. URL Absolut - Tautan ke gambar eksternal yang dihosting di situs web lain. Contoh:
src="https://www.w3schools.com/images/img_girl.jpg".
Catatan: Gambar eksternal mungkin berada di bawah hak cipta. Jika Anda tidak
mendapatkan izin untuk menggunakannya, Anda mungkin melanggar undang-undang hak
cipta. Selain itu, Anda tidak dapat mengontrol gambar eksternal; itu bisa tiba-tiba dihapus
atau diubah.
2. URL Relatif - Tautan ke gambar yang dihosting di dalam situs web. Di sini, URL tidak
menyertakan nama domain. Jika URL dimulai tanpa garis miring, itu akan relatif terhadap
halaman saat ini. Contoh: src="img_girl.jpg". Jika URL dimulai dengan garis miring, itu akan
menjadi relatif terhadap domain. Contoh: src="/images/img_girl.jpg".
Standar HTML tidak memerlukan nama atribut huruf kecil. Atribut title (dan semua atribut lainnya)
dapat ditulis dengan huruf besar atau kecil seperti title atau TITLE. Namun, W3C merekomendasikan
atribut huruf kecil dalam HTML, dan menuntut atribut huruf kecil untuk jenis dokumen yang lebih
ketat seperti XHTML.
Standar HTML tidak memerlukan tanda kutip di sekitar nilai atribut. Namun, W3C
merekomendasikan kutipan dalam HTML, dan meminta kutipan untuk jenis dokumen yang lebih
ketat seperti XHTML.
1. Meloni, Julie C. 2012. Sams Teach Yourself HTML, CSS, and JavaScript All in One.
Pearson.
2. Sari, Ani Oktarini. 2019. Web Programming. Graha Ilmu.
3. www.w3schools.com. 2021. HTML Tutorial.