LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

NIA ZANAH
0701201020

PROGRAM STUDI ILMU KOMPUTER

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SUMATERA UTARA
MEDAN
2023
KATA PENGANTAR
Puji dan syukur kita panjatkan atas kehadirat Allah SWT yang mana telah
memberikan rahmat dan karunia-Nya, sehingga penulis dapat menyelesaikan
tugas penyusunan Laporan Hasil Praktikum mata kuliah Pemrograman Web.
Tidak lupa shalawat serta salam tercurah selalu kepada Rasulullah SAW yang
syafa’atnya kita nantikan diakhir kelak. Penulis ucapkan terima kasih kepada
setiap pihak yang sudah mendukung selama berlangsungnya
pembuatan/penyusunan hasil laporan ini. Terkhusus lagi penulis sampaikan terima
kasih kepada Bapak Muhammad Siddik Hasibuan, M. Kom, selaku dosen
Pembimbing mata kuliah Pemrograman Web yang telah banyak memberi arahan
dalam penyusunan hingga penyelesaian laporan ini.
Praktikum ini bertujuan untuk membuat mahasiswa lebih memahami
tentang dasar-dasar Pemrograman Web. Dimana teori yang telah dipelajari
mahasiswa dapat dikembangkan lagi agar mampu mengaplikasikan teori tersebut
kedalam praktikum dan tercipta pengetahuan yang nyata melalui kegiatan
praktikum ini. Penulis menyadari bahwa banyak terdapat kekurangan-kekurangan
dalam penulisan Laporan Praktikum ini, maka dari itu penulis mengharapkan
kritik dan saran yang konstruktif dari para pembaca demi kesempurnaan makalah
ini.

Medan, 4 April 2021

Penyusun

Nia Zanah

ii
 DAFTAR ISI
KATA PENGANTAR.............................................................................................ii
DAFTAR ISI..........................................................................................................iii
DAFTAR TABEL...................................................................................................iv
DAFTAR GAMBAR...............................................................................................v
MODUL 1................................................................................................................1
INSTALASI WEB SERVER DAN HTML.............................................................1
1.1 Tujuan Praktikum...........................................................................................1
1.2 Dasar Teori.....................................................................................................1
1.3 Praktikum.......................................................................................................3
1.4 Kesimpulan dan Saran....................................................................................7
LEMBAR PENGESAHAN.....................................................................................8
MODUL 2................................................................................................................9
LAYOUT WEB SEMANTIK....................................................................................9
2.1 Tujuan Praktikum......................................................................................9
2.2 Dasar Teori................................................................................................9
2.3 Praktikum................................................................................................11
2.4 Kesimpulan dan Saran.............................................................................13
DAFTAR PUSTAKA............................................................................................15

iii
DAFTAR TABEL

iv
DAFTAR GAMBAR

v
 MODUL 1
INSTALASI WEB SERVER DAN HTML

1.1 Tujuan Praktikum

1. Mahasiswa dapat menginstalisasi web server dan memahami fungsi dari
web Server.
2. Mahasiswa mengetahui jenis-jenis Web Server.
3. Mahasiswa dapat memahami dan mengenal perintah-perintah dasar
HTML.
4. Mahasiswa dapat membuat halaman website sederhana.

1.2 Dasar Teori

Web Server merupakan sebuah perangkat lunak dalam server yang
berfungsi menerima permintaan (request) berupa halaman web melalui HTTP atau
HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali
(response) hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML. Menurut Arief (2011:19) “Web server adalah
program aplikasi yang memiliki fungsi sebagai tempat menyimpan dokumen-
dokumen web”.

1.2.1 Jenis-Jenis Server

Berdasarkan fungsinya server dibedakan menjadi:
1. Web server: Server yang berfungsi untuk memberikan layanan protocol http,
contoh aplikasi web server yaitu: apache, Microsoft IIS (Internet information
Services), Tomcat, Nginx, dll
2. Database server: Server yang berfungsi untuk menyimpan data secara terpusat
dan mendistribusikan ke klien melalui jaringan wireless ataupun kabel, Contoh
database server: MySQL, Postgres, MS SQL Server, Oracle, Interbase, dll
3. FTP Server: Filezilla, FTPd, pro-FTPd, Wu-FTPd, ftpX, Troll-FTPd
4. Mail Server: Mercury, Merak, sendmail, postix, dll

1
 2

5. Print / File server: Samba Serve

6. DNS Server: Server yang berfungsi menerjemahkan alamat host menjadi IP
address, contoh: bind
7. DHCP Server: Server yang bertugas memberikan IP address secara otomatis ke
computer klien

1.2.2 HTML (Hypertext Markup Language)

Bahwa HTML merupakan bahasa Markup, artinya bahasa HTML semata-
mata digunakan untuk me-markup suatu dokumen. Hal ini karena HTML tidak
bisa membuat sebuah website yang dinamis. Jadi, HTML hanya berguna untuk
membangun struktur website saja. Contohnya seperti membuat judul, paragraf,
sub-bagian, link, dan berbagai teks lainnya. Bahasa markup ini sudah memiliki
format yang tertera dalam standar kode internasional yaitu ASCI (American
Standard Code for Information Intercharge).
Menurut Nugroho (2013:5) “HTML adalah kependekan dari (HyperText
Markup Language), merupakan sebuah bahasa Scripting yang berguna untuk
menuliskan halaman Web”.

1.2.3 Tag HTML

Tag HTML adalah tanda awalan dan akhiran dalam perintah HTML yang
bisa dibaca oleh web browser. Tag dibuat dengan menggunakan kurung siku
terbuka dan tertutup, seperti ini, <….> nah, di dalam kurung siku akan berisi
nama tag. Fungsi tag HTML adalah berbeda-beda tergantung dari perintahnya,
seperti membuat judul, paragraf, heading, cetak tebal (bold), miring (italic), dan
lain sebagainya. Contohnya, jika menuliskan perintah <italic>, tag tersebut akan
menampilkan teks dengan format miring/italic di browser. 
Sebuah dokumen HTML harus memiliki struktur minimal head dan body.
Bahasa pemrograman HTML tidsk lepas dari yang namanya TAG. Tag
memilikipembuka <tag>, tetapi tidak semua TAG punya penutup </tag>. Tag
memberi instruksi interpreter kepada browser. Sebuah dokumen HTML memiliki
tag pembuka </html> dan tag penutup </html> untuk menberitahukan kepada
browser bahwa dokumen tersebut adalah dokumen HTML. Penulisan HTML
 3

initidak bersifat case sensitive, artinya tidak dibedakan antara huruf kapital dan
huruf kecil. Semuanya sama saja.
Berikun adalah beberapa fungsi dari tag dasar HTML: 
Tabel 1.1 fungsi tag HTML
Tag Fungsi
<html> Digunakan untuk membuat halaman HTML yang
mencakup semua konten dan elemen.
<head> Dipakai untuk membuat elemen HTML, mencakup
tampilan deskripsi di hasil pencarian Google, style konten
(CSS), dan lain sebagainya.
<title> Digunakan untuk membuat judul.
<body> Digunakan untuk membuat bagian isi website.
<h1> sampai <h6> Digunakan untuk membuat bagian heading pada artikel.
<p> Digunakan untuk membuat paragraf.
<!--> Digunakan untuk membuat komentar.

1.3 Praktikum
Pertama lakukan Start Apache pada aplikasi Xampp
 4

Gambar 1.1 Start Apache pada aplikasi Xampp

1.3.1 Source code HTML dari pertama.html

Membuat source code Hello world, lalu simpan file tersebut pada Direktory
C:/xampp/htdocs/Web2 dengan nama file pertama dengan ekstensi .html
(pertama.html).

Gambar 1.2 pertama.html

Output:
Dapat dilihat melalui Microsof Edge dengan mengakses
http://localhost/web2.com/pertama.html.

Gambar 1.3 Hasil pertama.html

1.3.2 Source code dari Index.php

Membuat source code web Portal Berita UINSU, lalu simpan file tersebut pada
Direktory C:/xampp/htdocs/Web2 dengan nama file index dengan ekstensi .php
(index.php).
 5

Gambar 1.4 index.php

Gambar 1.5 index.php

 6

Gambar 1.6 index.php

Output:
Dapat dilihat melalui Microsof Edge dengan mengakses
http://localhost/web2.com/index.php.

Gambar 1.7 Output index.php

Gambar 1.8 Output index.php

 7

1.4 Kesimpulan dan Saran

1.4. 1 Kesimpulan
HTML adalah sebuah program yang diperuntukan untuk pembuatan desain
web dan diuploadnya ke server, sehingga bisa dibuat secara public. Dalam
Pembentukan website menggunakan HTML tentunya tidak lepas dari yang
namanya tag dan atribut untuk unsur dua komponen penting yaitu www dan
HTML. Dimana www merupakan suaatu protocol standar dari intrnet, sehingga
HTML merupakan script atau program standart yang dijalankan di www atau
intrnet. Proyek HTML ini dibuat dengan menggunakanmedia web editor aplikasi
notepad++.

1.1.2 Saran
Bagi para programmer, khususnya pemula yang ingin membuat HTML
yang baik, sebaiknya sebelum membuat HTML harus mengetahui definisi,
strukntur dasar, komponen-komponen HTML dan elemen-elemen dasarnya. Selain
itu ia juga harus menguasai langkah-langkah membuat HTML beserta tampilannya
yang menarik yang akan diberikan kepada pengguna nantinya.
 8

LEMBAR PENGESAHAN

JUDUL : INSTALASI WEB SERVER DAN HTML

NAMA : NIIA ZANAH
NIM : 0701201020
PROGRAM STUD : ILMU KOMPUTER

Medan, ………………….2023
Menyetujui,

Asisten Laboratorium

( Paris Alvito )

Mengetahui,

Laboran

( Muhammad Fahri Syuhada, S.Kom )

 MODUL 2
LAYOUT WEB SEMANTIK

2.1 Tujuan Praktikum

1. Mengetahui dan mengerti apa semantik.

2. Membuat layout web semantik dengan html5 dan css3

2.2 Dasar Teori

Semantic web atau web semantik merupakan salah satu perkembangan pada
aplikasi web. Semantik adalah ilmu yang mempelajari makna. Menurut bahasa,
web semantik mempunyai arti web yang memiliki makna standar mempromosikan
format data umum dan protokol pertukaran di Web, yang paling fundamental
adalah Resource Description Framework (RDF). Dengan kata lain, web semantik
merupakan suatu aplikasi web yang mempunyai knowledge base tertentu sehingga
bisa dikatakan web semantik mempunyai sifat lebih pintar dari web sebelumnya.
“The Semantic Web memberikan kerangka umum yang memungkinkan data yang
akan dibagi dan digunakan kembali seluruh aplikasi, perusahaan, dan batas-batas
komunitas” – W3C. Istilah ini diciptakan oleh Tim Berners-Lee untuk web data
yang dapat diproses oleh mesin. Sementara kritikus mempertanyakan
kelayakannya, pendukung berpendapat bahwa aplikasi dalam industri, biologi dan
penelitian ilmu manusia telah membuktikan validitas konsep asli.
Web semantic atau semantik web dicetuskan pertama kali oleh Tim Berners-
Lee pada tahun 2001. Web semantik sering disebut sebagai web versi 3.0. Dalam
pembuatan aplikasi web semantik tidak semudah membuat aplikasi web biasa.
Untuk membuat web semantik terdapat beberapa teknologi yang perlu dipelajari,
diantaranya adalah RDF, ontologi, query RDF, RDF Store.
Sebenarnya Web Semantik terdiri atas 2 buah kata yang masing – masing
memiliki pengertian yang cukup berbeda.

9
 10

1. Web: yang dimaksud web di sini adalah jaringan komputer yang luas yaitu
WWW (World Wide Web)
2. Semantik: dapat diartikan sebagai ilmu tentang makna atau tentang arti, yaitu
salah satu dari tiga tataran analisis bahasa; fonologi, gramatika dan semantic.
Jadi web semantik adalah kemampuan aplikasi komputer yang berfungsi
untuk lebih memahami bahasa manusia, bukan hanya bahasa yang baku dari para
penggunanya tetapi juga bahasa yang lebih kompleks, seperti dalam bahasa
percakapan sehingga memudahkan penggunanya untuk berkomunikasi dengan
mesin. Web semantik dapat mengolah bahasa dan mengenali homonim, sinonim,
atau atribut yang berbeda pada suatu database.

2.2.1 Elemen Semantik

Di awal-awal hadirnya HTML dulu elemen semantik belum ada. Orang-orang
membuat layout dengan menggunakan tag yang salah. Ada yang membuatnya
dengan tag <tabel> dan ada juga dengan tag <div>. Ini sebenarnya tidak
sepenuhnya salah, karena membuat layout dengan kedua tag itu benar-benar bisa.
Tapi ini bukanlah cara yang baik dan akan membuat kode HTML kita sulit
terbaca. Karena itu. Hadirlah elemen semantik sebagai solusi. Elemen semantik
mulai ditambahkan pada HTML 5. Elemen semantik adalah elemen-elemen
yang menyatakan makna atau tujuan dari elemen itu sendiri.  Misalnya
tag <footer>, tag ini digunakan untuk membuat elemen footer atau bagian kaki
dari web. Jangan gunakan tag ini di bagian paling atas, karena maknanya sudah
jelas untuk footer. Jadi tidak akan ada lagi yang namanya penyalah gunaan tag.
Karena setiap tag sudah punya tujuan masing-masing. Semantic web
mengindikasikan bahwa makna data pada web dapat dipahami, baik oleh manusia
maupun oleh computer (Passin, 2004).
Berikut beberapa element semantic yang dapat digunakan untuk
mendefinisikan struktur atau layout halaman web:
Tabel 2.1 element semantic
No Tag Semantik Deskrifsi
1 <article> Mendefinisikan element artikel web
2 <aside> Mendefinisikan element di samping konten utama
 3 <details> Mendefinisikan element detail atau spoiler
 11

 4 <figcaption> Mendefinisikan text caption pada figure

 5 <figure> Mendefinisikan figur atau gambar pada artikel
 6 <footer> Mendefinisikan element footer web
 7 <header> Mendefinisikan element header web
 8 <main> Mendefinisikan element utama web
 9 <mark> Mendefinisikan teks yang ditandai
 10 <nav> Mendefinisikan element navbar atau navigasi
 11 <section> Mendefinisikan bagian halaman web
 12 <summary> Mendefinisikan ringkasan artikel web 
 13 <time> Mendefinisikan element waktu

2.3 Praktikum

2.3.1 Source code Menggunakan Semantik

Membuat source code web menggunakan layout semantik, lalu simpan file
tersebut pada Direktory C:/xampp/htdocs/Web2 dengan nama file kedua dengan
ekstensi .php (kedua.php). Difile ini akan menghubungkan halaman kedua.php
dengan file CSS penulisan ekstensi .css adalah lstyle.css dan linknya di letakkan
dibawak tag title.

Gambar 2.1 kedua.php

 12

Gambar 2.2 kedua.php

Gambar 2.3 lstyle.css

Output:
Dapat dilihat melalui Microsof Edge dengan mengakses
http://localhost/web2.com/kedua.php.

Gambar 2.4 Output semantik

2.4 Kesimpulan dan Saran

2.4.1 Kesimpulan
Layout semantik adalah bagian dari teknologi web yang ada saat ini,
dengan adanya web semantik, website tidak hanya bisa dimengerti manusia, tetapi
juga bisa dipahami oleh mesin. Web semantik mampu memahami makna dari
 13

sebuah kata. Web semantik adalah generasi baru dari web yang sudah ada saat ini,
web semantik merupakan pekembangan dari WWW yang ditemukan oleh Tim
Berners-Lee pada tahun 1999. Sasaran dari arsitektur semantic web adalah
menyediakan representasi pengetahuan dari LOD yang mengijinkan
mesin/komputer memproses dalam skala global. Layout adalah tata letak dari
elemen-elemen desain terhadap suatu bidang dalam media tertentu untuk
mendukung konsep atau pesan yang dibuat. Adapun tujuan-tujuan dari layout
adalah memastikan bahwa pesan yang ingin disampaikan pada halaman website
dapat tersampaikan dengan baik kepada audiens.

2.4.2 Saran
Bagi pemula, pembuatan web menggunakan layout semantic html
merupakan dasar yang penting karena dapat membantu kita ketika memulai suatu
proyek web. membuat web dengan layout semantic html yang baik, sebaiknya
sebelum membuat proyek web anda harus mengetahui pengertian, elemen
semantic, dan memahami CSS berfungsi untuk menjelaskan dan menata tampilan
elemen yang tertulis pada HTML.
 14

LEMBAR PENGESAHAN

JUDUL : LAYOUT WEB SEMANTIK

NAMA : NIIA ZANAH
NIM : 0701201020
PROGRAM STUD : ILMU KOMPUTER

Medan, ………………….2023
Menyetujui,

Asisten Laboratorium

( Paris Alvito )

Mengetahui,

Laboran

( Muhammad Fahri Syuhada, S.Kom )

 15

DAFTAR PUSTAKA
Solichin, A., 2005, Pemrograman web dengan php dan mysql. Jakarta: universitas
budi luhur
Suryana, O., 2018, Server dan web server,. Dari: https://www.researchgate.net/
publication /, Diakses: 1 April 2023
Puspa, R., 2022, HTML adalah: Pengertian, Sejaran, Fungsi,. Dari:
https://academy.Alterra.id/blog,html-adalah/, Diakses: 1 April 2023