LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

FADHILAH RAMADHANI NASUTION

0701172118

PROGRAM STUDI ILMU KOMPUTER

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SUMATERA UTARA
MEDAN
2023
 KATA PENGANTAR

Segala puji-pujian bagi Allah, Bersyukur kita panjatkan atas ke hadirat

Allah SWT. Atas limpahan rahmat dan karunia-Nya sehingga saya mampu
menyelesaikan Laporan Praktikum Penglahan Citra ini. Tanpa pertolongan-Nya
mungkin saya tidak bisa menyelesaikannya dengan baik. Tak lupa shalawat
berangkai salam kita hadiahkan kepada junjungan kita Nabi Muhammad SAW
yang kita harapkan syafaatnya di kemudian hari.
Dalam penyusunan Laporan Praktikum ini, saya mengucapkan banyak
terimakasih kepada Ibu Sriani, M.Kom selaku Dosen Mata Kuliah Pengolahan
Citra yang telah memberi bimbingan dan kepercayaan. Sehingga, Laporan
Praktikum ini dapat saya susun dengan baik.
Semoga laporan ini dapat bermanfaat terutama untuk saya. Walaupun
Laporan Praktikum ini masih jauh dari kata sempurna, mengingat kurangnya
pengetahuan dan pengalaman saya.

Medan, 1 April 2023

Penyusun

Fadhilah Ramadhani Nst

DAFTAR ISI
DAFTAR TABEL
DAFTAR GAMBAR
 MODUL 1

INSTALASI WEB DAN HTML

1.1 Tujuan Praktikum

1. Tujuan Praktikum ini dilakukan untuk:
2. Mahasiswa mampu melakukan instalasi dan uji coba Web server
3. Mahasiswa mampu memahami konsep pada Web server

1.2 Dasar Teori

Website merupakan kumpulan halaman digital yang berisi informasi
berupa teks, animasi, gambar, suara dan video atau gabungan dari semuanya yang
terkoneksi oleh internet, sehingga dapat dilihat oleh seluruh siapapun yang
yerkoneksi jaringan internet. Sebuah website umumnya adalah barisan kode-kode
yang berisi kumpulan perintah, yang kemudian diterjemahkan melalui sebuah
browser. Web server merupakan perangkat lunak yang digunakan untuk menerima
permintaan melalui Protokol HTTP atau HTTPS dari client, kemudian dikirimkan
kembali dalam bentuk halaman-halaman web. Contoh web server : Xampp,
Apache2Triad, Dll.

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
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. HTML (Hypertext Markup Language)

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.

Browser merupakan software yang di install di mesin client yang

berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Beberapa
browser yang sering digunakan yaitu: Explorer, Netscape Navigator dan masih
banyak lainnya. Program editor yang digunakan untuk membuat dokumen HTML
diantaranya adalah Microsoft Frontpage, Dreamweaver, Notepad.

2. Tag HTML

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.

Jenis – jenis tag dalam HTML :

Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip html,
antara lain sebagai berikut :
 Tabel 1.1 fungsi tag HTML
Tag Fungsi
<html> Untuk mendefinisikan sebuah dokumen HTML
<body> Digunakan untuk membuat bagian isi website.
<title> Digunakan untuk membuat judul.
<h1> sampai Mendefinisikan heading 1 sampai 6, ukuran fontsize judul
<h6> yang besar sampai terkecil.
<p> Digunakan untuk membuat paragraf.
<!--> Digunakan untuk membuat komentar.
<head> Dipakai untuk membuat elemen HTML, mencakup
tampilan deskripsi di hasil pencarian Google, style konten
(CSS), dan lain sebagainya.
<img>…..</img> Mendefinisikan tampilkan gambar

1.3 Praktikum

Pertama lakukan Start Apache pada aplikasi Xampp

Gambar 1.1 Start Apache pada aplikasi Xampp

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

Hasil :
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 Pertama.php

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

Gambar 1.5 pertama.php

 Gambar 1.6 pertama.php

Hasil :
Dapat dilihat melalui Microsof Edge dengan mengakses
http://localhost/web2.com/pertama.php.

Gambar 1.7 Hasil pertama.php

1.3 Kesimpulan dan Saran
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 internet, sehingga
HTML merupakan script atau program standart yang dijalankan di www atau
intrnet. Proyek HTML ini dibuat dengan menggunakanmedia web editor aplikasi
notepad++.
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.
 LEMBAR PENGESAHAN

JUDUL : INSTALASI WEB SERVER DAN HTML

NAMA : FADHILAH RAMADHANI NST
NIM : 0701172118
PROGRAM STUDI : ILMU KOMPUTER

Medan, 4 April 2023

Menyetujui,

Asisten Laboraturium

Paris Alvito

Mengetahui,

Laboran

Muhammad Faris Syuhada, S.Kom

 MODUL 2

LAYOUT SEMANTIK HTML

2.1 Tujuan Praktikum

Tujuan Praktikum ini dilakukan untuk:
1. Mengetahui dan mengerti apa semantik.
2. Mahasiswa mampu untuk memahami tentang layout semantik html
3. Membuat Layout web semantic 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).
“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.
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 Deskripsi
1 <article> Mendefinisikan element artikel web
2 <aside> Mendefinisikan element di samping konten utama
 3 <details> Mendefinisikan element detail atau spoiler
  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

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 index
dengan ekstensi .php (index.php). Difile ini akan menghubungkan halaman
index.php dengan file CSS penulisan ekstensi .css adalah style.css dan linknya di
letakkan dibawah tag title.

Gambar 2.1 Input kode Index.php

 Gambar 2.2 Input kode style.css

Gambar 2.3 Input kode style.css

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

Gambar 2.4 Hasil index.php

2.4 Kesimpulan dan Saran

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
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. 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.
 LEMBAR PENGESAHAN

JUDUL : LAYOUT WEB SEMANTIK

NAMA : FADHILAH RAMADHANI NST
NIM : 0701172118
PROGRAM STUD : ILMU KOMPUTER

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

Asisten Laboratorium

( Paris Alvito )

Mengetahui,

Laboran

( Muhammad Fahri Syuhada, S.Kom )

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