MODUL PERKULIAHAN

Pemrograman
Web

Konsep Dasar Web

Program Studi Tatap Muka Kode MK Dosen Pengampuh MK

Sistem Informasi KK01033M5 Nur Oktavin Idris, M.Eng.
01
A. Pengenalan Web
Apakah web :

Web (World Wide Web) memudahkan pengguna komputer dalam berinteraksi dengan pengguna
lainnya melalui layanan yang terhubung ke internet yang diperoleh oleh pengguna komputer dalam
mencari informasi yang diperlukan

Web browser :

Browser web merupakan sebuah aplikasi perangkat lunak yang menampilkan sumber informasi

dari server web. Contoh web browser: Opera, Mozilla, Internet Explorer, Chrome

Web server :

Web server adalah software yang berfungsi melayani permintaan yang dikirimkan melalui browser
kemudian tanggapan permintaan diberikan dalam bentuk halaman situs web atau lebih umumnya
dalam dokumen HTML. Jadi web server bertugas mengatur semua komunikasi yang terjadi antara
browser dengan server untuk memproses sebuah website. Selain itu web server berfungsi untuk
membersihkan cache dan penyimpanan yang tidak terpakai, serta melakukan pemeriksaan
kemananan terhadap HTTP request yang dikirimkan browser. Contoh dari web server : IIS, Apache.
Sebagai bagian dari hardware maupun software, web server memiliki pengertian yang berbeda,
dimana dari sisi hardware, web server digunakan untuk menyimpan semua data seperti HTML
dokumen, gambar, file CSS, dan file Java Script. Sedangkan dari sisi software, web server berfungsi
sebagai pusat pengontrol proses permintaan yang diterima dari browser. Adapun cara kerja dari web
server ditunjukkan pada Gambar berikut.

B. Software Pendukung
Untuk mendukung pembelajaran perkuliahan pemrograman web, berikut instalasi software dan
konfigurasi yang dilakukan pada sistem operasi Windows. Bagi yang menggunakan versi lain silahkan
menyesuaikan. Software yang akan digunakan diantaranya:
 Text Editor (Notepad++, Visual Studio Code, Sublime Text)
 Web Browser (Firefox, Opera, Chrome, atau lainnya)
 XAMPP for Windows
Notepad++
Notepad++ merupakan salah satu software editor yang direkomendasikan untuk pemula dalam
belajar pemrograman, seperti PHP atau HTML, Java, C++ dan lainnya. Berikut Langkah-langkah cara
menginstal notepad++.
1. Tahap pertama download langsung di situs https://notepad-plus-plus.org

Berdasarkan versi terbaru yang ditampilkan pada situs resminya, berada pada versi 7.8.9. Namun
versi tersebut kemungkinan akan di update lagi versi yang terbaru saat mengunjungi situs tersebut,
sehingga tidak perlu khawatir karena pada dasarnya cara install notepad++ nya sama. Jadi dapat
memilih versi berapa yang akan di install, contohnya mengambil versi Notepad++ 7.8.8 release.

Selanjutnya akan diarahkan kehalaman tombol download

dengan menyesuaikan versi windows yang digunakan
apakah 32 bit atau 64 bit.
Klik link Installer untuk mengunduh file installer notepad+
+nya.
Apabila error atau muncul pesan “Request time out” dicoba
kembali dengan cara refresh halaman browser atau cara
optionalnya di download menggunakan file installer yang
sudah di comprase ke dalam bentuk zip package.

Setelah berhasil Mengunduh file installer

notepad++ nya, selanjutnya buka file tersebut
untuk memulai instalasi. Pilih bahasa yang
akan digunakan saat instalasi, Pilih saja bahasa
inggris lalu tekan Ok.
 Tahap selanjutnya, masuk ke setup awal
penginstalan notepad++ v7.8.8, dan klik
tombol Next >

Kemudian masuk pada halaman lisensi.

Langsung saja klik tombol I Agree

Pada tahap selanjutnya untuk

pemilihan lokasi direktori yang akan
diinstal. Secara default destination
folder yang dipilih berada
pada C:\Program Files\Notepad++.
Klik Next untuk melanjutkan.

Selanjutnya masuk pada pemilihan

komponen yang akan di install. Secara
default sistem sudah mencentang
komponen yang perlu di install, namun
jika kalian menghendaki beberapa
komponen yang tidak perlu diinstall
bisa unchecklist pada list komponennya.
 Setelah pemilihan komponen, selanjutnya
centang create Shortcut on Desktop.

Terakhir Klik Finish untuk menyelesaikan

instalasi.

Tunggu sampai proses ini selesai

Berikut Tampilannya di dekstop

Demikian cara menginstal Notepad++ di windows. Semoga bermanfaat terutama yang ingin
memulai belajar pemrograman lewat aplikasi editor sederhana dan sangat direkomendasikan
bagi pemula.
MODUL PERKULIAHAN

Pemrograma
n Web
Konsep HTML

Program Studi Tatap Muka Kode MK Dosen Pengampuh MK

Sistem Informasi KK01033M5 Nur Oktavin Idris, M.Eng.
02
A. Struktur Dokumen HTML
Dalam pemrograman web, diperlukan suatu file teks yang bernama atau berekstensi
HTML (Hypertext Markup Language). Dokumen HTML disusun oleh elemen-elemen seperti :
head, body, table, paragraf dan list.
Untuk menandai berbagai elemen atau perintah dalam suatu dokumen HTML, biasanya
disebut TAG. Tag digunakan untuk menentukan tampilan dari dokumen HTML. Tag
umumnya berpasangan, misalkan tag awal <H1> berpasangan dengan tag akhir </H1>.
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag
<html>, <head>, <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag
head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body
untuk menampilkan isi dokumen HTML yang berisi teks yang tersusun dari link, grafis,
paragraf dan elemen lainnya. Adapun tag <title> </title> digunakan sebagai judul dari
dokumen HTML yang ditampilkan pada judul jendela browser

Berikut ini adalah pola dasar sebuah dokumen HTML :

<html>

<head>

…. Informasi tentang dokumen HTML.

</head>

<body>

…. Informasi tentang yang akan ditampilkan dalam browser web.

</body>

</html>

B. Atribut dalam Tag

Beberapa tag mengandung atribut di dalamnya. Contoh :

<P ALIGN=”CENTER”>

Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut.
Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai
untuk atribut ALIGN

Tag <BR>
Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris.

Contoh :
<HTML>
<HEAD>
<TITLE>Tag BR</TITLE>
</HEAD>
<BODY>
 Selamat Belajar HTML<BR>
Semoga Sukses !

</BODY>
</HTML>

Tag <P>
Tag <P> digunakan untuk membuat paragraph.
Contoh :
<HTML>
<HEAD>
<TITLE>Contoh Paragraf</TITLE>
</HEAD>
<BODY>

Pesona Tanaman Hias<P>

Keindahan tanaman hias<BR>
membawa suatu pesona
tersendiri<BR> Warna-warni
bunga<BR>
aneka rupa corak daun<BR>
membuat orang dengan senang
hati mengoleksinya

</BODY>
</HTML>

Tag Header
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang
dijadikan sebagai judul baba tau sub bab dalam dokumen. Tag-tag headerini berupa :
ƒ <H1> ... </H1>
ƒ <H2> ... </H2>
ƒ <H3> ... </H3>
ƒ <H4> ... </H4>
ƒ <H5> ... </H5>
ƒ <H6> ... </H6>

Ada enam tingkatan header mulai dari H1 hingga H6. H1 adalah header yang terbesar
dan H6 adalah yang terkecil

Contoh :

<HTML>
<HEAD>
<TITLE>Tag H1-H6</TITLE>
</HEAD>
<BODY>

<H1>Tag H1</H1>
<H2>Tag H2</H2>
<H3>Tag H3</H3>
<H4>Tag H4</H4>
<H5>Tag H5</H5>
<H6>Tag H6</H6>

</BODY>
</HTML>

Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai
yang dapat diberikan pada ALIGN adalah :
LEFT (default): mengatur teks rata kiri terhadap halaman, RIGHT : mengatur teks rata
kanan terhadap halaman, CENTER : menempatkan judul di tengah-tengah layar pada baris
yang bersangkutan, JUSTIFY : mengatur teks rata kiri dan rata kanan. Efeknya terlihat
untuk teks yang sangat panjang.

Contoh:

<HTML>
<HEAD>
<TITLE>ALIGN</TITLE>
</HEAD>
<BODY>

<H1 align="center"> ini contoh HTML untuk H1 </H1>

<H2 align="left"> ini contoh HTML untuk H2 </H2>

<H3 align="Right"> ini contoh HTML untuk H3 </H3>

<H4 align="Justify"> ini contoh HTML untuk H4 sekarang kita mempelajari

align dari header dimana header adalah huruf-huruf berukuran khusus yang
digunakan
untuk menuliskan judul bab atau sub bab. ada enam tingkatan header mulai
dari h1 hingga h6. H1 adalah header yang paling besar dan H6 adalah header
yang paling kecil. Coba anda menuliskan dalam notepad anda. Kemudian
simpan hasil tulisan anda ke dalam format file html kemudian buka dalam
browser dan hasilnya akan terlihat di browser seperti contoh yang telah
diberikan </h4>

</BODY>
</HTML>

Tag <HR>
Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis
horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag
<HR>.

Contoh :
<HTML>
<HEAD>
<TITLE>Tag HR</TITLE>
</HEAD>
<BODY>

<H2> Aneka Tanaman Hias </H2>

<HR> Aglaonema atau Sri rejeki
<HR> Begonia
<HR> Bromelia
<HR> dll
<HR>

</BODY>
</HTML>

Daftar atribut tag <HR>

Atribut Keterangan
SIZE Menentukan ketebalan garis
WIDTH Menentukan lebar garis
ALIGN Menentukan peletakkan teks dalam baris
NOSHADE Mengatur agar garis tidak disertai bayangan
Contoh:

<HTML>
<HEAD>
<TITLE>atribut Tag HR</TITLE>
</HEAD>
<BODY>

<H2>Aneka Tanaman Hias</H2>

<HR> Aglaonema
<HR size=100> Begonia
<HR width=300> Bromelia
<HR width= 300 align="right"> dll
<HR noshade> contoh
<HR>

</BODY>
</HTML>

Tag <Center>
Agar posisi suatu teks berada di tengah, bisa juga digunakan tag <CENTER>.
Tentu saja, untuk mengakhiri teks yang ditengah (yakni agar teks berikutnya tidak
ditengahkan), perlu disertakan </CENTER>.

Contoh :

<HTML>
<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>

<CENTER>
<H2> Berbagai Jenis Buah:
</H2> Apel <BR>
Anggur <BR>
Jeruk <BR>
Mangga <BR>
Manggis <BR>
Pepaya <BR>
</CENTER>

</BODY>
</HTML>

Tag <DIV>
Tag divisi (<DIV>) berguna untuk mengelompokkan sejumlah baris teks yang memiliki
karakteristik yang sama.
Contoh :
<HTML>
<HEAD>
<TITLE> Tag DIV </TITLE>
</HEAD>
<BODY>

<DIV ALIGN = "RIGHT">

<H1> STMIK Ichsan Gorontalo </H1>
<H2> Jl. Achmad Nadjamuddin </H2>
<H2> Gorontalo </H2>
</DIV>

<DIV ALIGN = "CENTER">

<H1> STMIK Ichsan Gorontalo </H1>
<H2> Jl. Achmad Nadjamuddin </H2>
<H2> Gorontalo </H2>
 </DIV>

</BODY>
</HTML>

Praktikum 1
Bukalah notepad atau program text editor yang lain.
Ketikkan script berikut :

<HTML>
<HEAD>
<TITLE> World Wide Web </TITLE>
<BODY>

<CENTER><H1> Definisi World Wide Web</H1></CENTER>

<P align="left">
WWW adalah layanan yang paling sering digunakan dan memiliki
perkembangan yang sangat cepat karena dengan layanan ini kita bisa
menerima informasi dalam berbagai format (multimedia). Untuk
mengakses layanan WWW dari sebuah komputer (yang disebut WWW server
atau web server) digunakan program web client yang disebut web
browser atau browser saja.

<P align="right">
Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia
maya atau web. Tampilan web yang sangat artistik yang tidak hanya
menampilkan teks tapi juga gambar-gambar yang di tata sedemikian
rupa sehingga selalu membuat betah netter untuk surfing berjam-jam.
Karena itu para netter harus sangat memperhitungkan rencana web mana
saja yang akan dikunjungi atau batasi informasi yang ingin diakses.
</P>

</BODY>
</HTML>

Simpan (File|Save As), dengan nama praktikum1.html, pada kolom Save As

Type, pilihlah (.html).
Buka web browser anda (internet explorer / chrome / mozilla)
Bukalah/klik dokumen yang anda buat tadi.
Lihatlah hasilnya :
C. Paragraf dan Format
Karakter Pengaturan Teks
Daftar tag untuk mengatur teks secara fisik

Pemakaian Tag Keterangan

<B> Teks </B> Teks tercetak tebal
<BIG> Teks </BIG> Teks ditampilkan dengan ukuran lebih besar dari ukuran normal
<I> Teks </I> Teks tercetak miring
<SMALL> Teks </SMALL> Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal
<SUB> Teks </SUB> Teks ditampilkan sebagai subscript
<SUP> Teks </SUP> Teks ditampilkan sebagai superscript (pangkat)
<TT> Teks </TT> Teks ditampilkan dalam bentuk seperti ketikan mesin tik
<U> Teks </U> Teks ditampilkan dengan diberi garis bawah

Daftar tag untuk mengatur teks secara logis

Pemakaian Tag Keterangan

<CITE> Teks </CITE>
<CODE> Teks </CODE>
<EM> Teks </EM>
<KBD> Teks </KBD>
<SAMP> Teks </SAMP>
<STRONG> Teks </STRONG>
<VAR> Teks </VAR>
Menyatakan teks adalah kutipan
Menyatakan bahwa teks adalah kode atau program komputer.
Umumnya teks ditampilkan dengan font monoskrip.
Menyatakan penekanan pada teks. Umumnya teks ditampilkan
miring.
Menyatakan teks adalah masukan dari keyboard. Teks seperti
ini
umumnya ditampilkan dengan font monospasi.
Menyatakan bahwa teks adalah suatu konstanta sederetan
karakter. Biasanya ditampilkan dengan font monospasi.
Menyatakan bahwa teks yang sangat penting untuk
diperhatikan
orang. Biasanya disajikan dengan ditebalkan.
Menyatakan teks adalah variabel atau ekspresi matematika atau
program komputer. Teks akan disajikan dalam bentuk miring.

Pengaturan Font
Tag <FONT> teks </FONT> berguna untuk mengatur jenis, ukuran, maupun warna

font. Untuk ukuran font ditentukan oleh atribut SIZE.

Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang
berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur,
pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Tag
BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna
teks pada keseluruhan body dokumen.

Daftar nama warna pada atribut penentu warna

Nama Warna RGB Nama Warna RGB

aqua 00FFFF navy 000080
black 000000 olive 808000
blue 0000FF purple 800080
fuchsia FF00FF red FF0000
gray 808080 silver C0C0C0
green 008000 teal 008080
lime 00FF00 yellow FFFF00
maroon 800000 white FFFFFF
Praktikum 2
Ketikkan script berikut menggunakan teks editor.
 Simpan dengan nama Internet.html
<html>
<head><title> Interconnected Network</title>
</head>
<body bgcolor="pink">

<center>
<font face=”arial” size=6 color=red> Interconnected Network
alias Internet</font>
</center>

<hr>
<font face=”helvetica” size=4 color=red>

<p align=”left”>
<I>Interconnected Network</I> - atau yang lebih populer dengan
sebutan Internet - adalah sebuah sistem komunikasi global yang
menghubungkan komputer-komputer dan jaringan-jaringan komputer
di seluruh dunia. Setiap komputer dan jaringan terhubung -
secara langsung maupun tidak langsung - ke beberapa jalur utama
yang disebut <I> internet backbone </I> dan dibedakan satu
dengan yang lainnya menggunakan <I>unique name</I> yang biasa
disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230
</font></p>

<font face=”garamond” size=4 color=blue>

<p align=”right”>
Bila anda mempunyai Komputer minimal prosessor 486, Windows 95,
Modem, dan line telepon, maka anda telah bisa bergabung dengan
ribuan juta komputer lain dari seluruh dunia dan mengakses
harta karun informasi di internet.
</font> </p>

<hr>
<center>
<font face=”century” size=3 color=brown>&copy STMIK Ichsan
Gorontalo <br><b>Gorontalo</b></font>
</center>

</body>
</html>

Praktikum 3
Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
Simpan dengan nama Lulusan_kompetitif.html.

Lulusan S-1 yang Kompetitif

Sebuah perenungan untuk anda para mahasiswa

SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan bisa memperoleh
pekerjaan dengan mudah. Namun, sekarang keadaan berubah dimana tidak sedikit lulusan
 sarjana yang menganggur karena tidak mendapat pekerjaan (menganggur) dan tidak bisa
membuka usaha sendiri. Menganggurnya lulusan S-1 tidak saja akibat kondisi di luar,
tetapi juga akibat kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa yang tidak
menyiapkan diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah
mana harus melangkah.

Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan
bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan?
Lalu, ke mana setelah itu? Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin?
Lulus kuliah, mencari pekerjaan, kemudian menikah, dan seterusnya?

Apakah para mahasiswa tidak melihat dunia di luarnya seperti adanya pasar global yang dinamis
dan menuntut daya saing sangat kompetitif? Pedulikah mereka pada pengakuan kualitas
kelulusan mereka oleh negara lain yang sangat penting untuk persaingan global dan pasar
bebas?
Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di antara SDM bangsa
lain?

Praktikum 4
Ketikkan script berikut menggunakan teks editor.

<HTML>
<HEAD>
<TITLE> karakter </TITLE> </HEAD>
<BODY>

Copyright &copy; <br>

Trademark &trade; <br>
Registered &reg; <br>
Poundsterling &pound; <br>
Yen &yen; <br>
Euro &euro;<br>

</BODY>
</HTML>

Simpan dengan nama

karakter.html Lihat hasilnya dengan
browser.
Praktikum 5
 Ketikkan script berikut menggunakan teks editor.
<HTML>
<HEAD>
<TITLE> Format Font </TITLE>
</HEAD>
<BODY>

<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<S>strikethrough</s>
<BR>
CO²
<BR>
H₂O

</BODY>
</HTML>

 Simpan dengan nama font.html

 Lihat hasilnya dengan browser.

D. List (Daftar) di HTML

List merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar

sesuatu. Jenis-jenis list dalam HMTL :

List dengan nomor (OL : Ordered List)

Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst
sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang
lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada
tag
<ol>. Contoh untuk list dengan angka romawi : <ol type=”I”>
 List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada
tag <ul> Contoh <ul type=”box”> : bila ingin bullet berbentuk kotak.

List setiap item ditandai dengan tag <LI>

Praktikum 5
 Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> Ordered List & Unordered List</TITLE>
</HEAD>
<BODY>

<h4>An ordered List : </h4>

<ol>
<li>Coffee</li>
<li>Tea</li>

<li>Milk</li>
</ol>
<h4>An unordered List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</BODY>
</HTML>

Simpan dengan nama list.html

Jalankan dengan web browser

Selain memiliki jenis OL dan UL, HTML masih memiliki jenis list lainnya, yakni Description
List. Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi
deskripsi atau daftar penjelasan. Untuk membuat list yang berisi penjelasan istilah-istilah
dengan keterangannya, mungkin bisa menggunakan list jenis ini. Kita akan
mempelajari cara membuat description list dalam HTML menggunakan tag <dl> dan
</dl> dimana seluruh list harus berada di dalam pasangan tag, Untuk setiap deskripsi
atau judul istilah, kita menggunakan tag <dt> dan </dt>. Sedangkan untuk penjelasan
istilah tersebut, kita menggunakan tag <dd> dan </dd>

Praktikum 6
Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> description list </TITLE>
</HEAD>
<BODY>
 <DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
<DT>Ice Cream</DT>
<DD>sweet Cold drink</DD>
</DL>

</BODY>
</HTML>

 Simpan dengan nama description.html

 Jalankan dengan web browser