MODUL PERKULIAHAN

Pemrograman
Web

Konsep Dasar Web

Program Studi Tatap Muka Kode MK Dosen Pengampuh MK

Nur Oktavin Idris, M.Eng.
01
Sistem Informasi KK01033M5
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

Pemrograman
Web
Konsep HTML

Program Studi Tatap Muka Kode MK Dosen Pengampuh MK

KK01033M5 Nur Oktavin Idris, M.Eng.
02
Sistem Informasi
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 HeaderJudul
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>a
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>a
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>a
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 1Praktikum 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
isik
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. Mengatur F

Tag <FONT> teks </FONT> berguna untuk mengatur jenis, ukuran, maupun warna font. kn

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. Praktikum 1
❑ 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. Praktikum 2:
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