Anda di halaman 1dari 10

MODUL PERKULIAHAN

Pemrograman
Web 1
(Web Programming 1)

Pendahuluan (Introduction)

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

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.

Sir Timothy John Berners-Lee


https://en.wikipedia.org/wiki/Tim_Berners-Lee

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.

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


2 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Proses ini terjadi dengan sangat cepat—pada urutan milidetik—dan terjadi di belakang layar. Dengan
kata lain, meskipun kita mungkin berpikir bahwa yang kita lakukan hanyalah membuka browser web,
mengetik alamat web, dan langsung melihat konten yang kita minta, teknologi di latar belakang
bekerja untuk menampilkan konten yang diinginkan. Gambar berikut menunjukkan interaksi dasar
antara browser dan server.

A browser request and a server response.

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.

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


3 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
2. Setelah menerima permintaan untuk file tertentu, server web memproses mencari di konten
direktorinya untuk file tertentu, membukanya, dan mengirim isi file itu kembali ke browser
web Anda.
3. Browser web menerima konten file index.html, yaitu teks ditandai dengan kode HTML, dan
membuat konten berdasarkan kode-kode HTML ini. Saat merender konten, browser terjadi
pada kode HTML untuk logo Google, kode HTML terlihat seperti ini:
<img src=”/logos/logo.gif” width=”384” height=”121” border=”0” alt=”Google”/>

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:

• Apple Safari (http://www.apple.com/safari/) for Mac and Windows


• Google Chrome (http://www.google.com/chrome) for Windows
• Mozilla Firefox (http://www.mozilla.com/firefox/) for Mac, Windows, and Linux
• Microsoft Edge (https://www.microsoft.com/en-us/edge) for Windows
• Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX

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>

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


4 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Untuk membuat konten ini, buka editor teks pilihan Anda, seperti Notepad (di Windows) atau
TextEdit (di Mac). Jangan gunakan WordPad, Microsoft Word, atau perangkat lunak pengolah kata
berfitur lengkap lainnya karena program tersebut membuatjenis file yang berbeda dari file teks biasa
yang kita gunakan untuk konten web.

Jenis Kategori Website:

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:

1. Struktur Navigasi Linier


Pada Struktur navigasi linier merupakan rangkaian urutan tampilan dari sebuah halaman
website yang ditampilkan secara berurut menurut urutannya. Tampilan yang dapat
ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman
sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

Struktur Navigasi Linier

2. Struktur Navigasi Hirarki


Pada Struktur navigasi hirarki merupakan suatu struktur yang mengandalkan percabangan
untuk menampilkan data berdasarkan kriteria tertentu. Jika digambarkan, maka struktur
navigasi hirarki ada halaman web yang disebut sebagai Master Page (halaman utama
pertama). Pada halaman utama ini mempunyai halaman percabangan yang disebut Slave
Page (halaman pendukung). Dan jika halaman pendukung diklik, maka dia akan berubah

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


5 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
menjadi Master Page dan kemudian memiliki percabangan halaman pendukung lainnya, dan
seterusnya. Dalam struktur navigasi ini tidak diperbolehkan adanya tampilan secara linier.

Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier


Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan dari
struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang ada pada struktur nonlinier ini berbeda dengan percabangan yang ada
pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat
percabangan, tetapi tiap-tiap tampilan mempunyai tingkatan yang sama yaitu tidak ada
Master Page(halaman utama website) dan Slave Page(halaman pendukung website).

Struktur Navigasi Non-Linier

4. Struktur Navigasi Campuran


Struktur navigasi campuran disebut struktur navigasi bebas. Dimana didalamnya terdapat
beberapa gabungan dari struktur navigasi lainnya. Struktur navigasi campuran ini banyak
digunakan dalam membuat website, karena struktur ini dapat memberikan tingkat interaksi
yang lebih tinggi. Dan keterikatan dalam halaman website dapat dibuat lebih efisien dan
menarik.

Struktur Navigasi Campuran

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


6 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Pengertian Hypertext Markup Language (HTML)

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:

<tagname>Content goes here...</tagname>


Contoh beberapa elemen HTML:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Nested HTML Elements

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>

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


7 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Empty HTML Elements

Elemen HTML tanpa konten disebut elemen kosong. Tag <br> mendefinisikan jeda baris, dan
merupakan elemen kosong tanpa tag penutup:

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

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

• Semua elemen HTML dapat memiliki atribut


• Atribut memberikan informasi tambahan tentang elemen
• Atribut selalu ditentukan di tag awal
• Atribut biasanya datang dalam pasangan nama/nilai seperti: name="value"

Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman yang dituju tautan:

<a href="https://www.w3schools.com">Visit W3Schools</a>

Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan jalur
ke gambar yang akan ditampilkan:

<img src="img_girl.jpg">

Ada dua cara untuk menentukan URL di atribut src:

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".

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


8 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Tip: Hampir selalu yang terbaik adalah menggunakan URL relatif. Mereka tidak akan rusak
jika Anda mengubah domain.

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.

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


9 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id
Daftar Pustaka

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.

2021 Web Programming 1 Pusat Bahan Ajar dan eLearning


10 Teuku Achmad Aliyansyah, S.Kom., M.T. https://www.mercubuana.ac.id

Anda mungkin juga menyukai