LAPORAN RESMI

MODUL I
HTML

PEMROGRAMAN BERBASIS WEB

NAMA : FAUZIAH REZA OKTAVIYANI

N.R.P : 190441100075
DOSEN : FIFIN AYU MUFARROHA S.Kom.,M.Kom
ASISTEN : RAMADHAN QORIDHATUL ALFARIZI
TGL PRAKTIKUM : SENIN, 29 MARET 2021

Disetujui : Minggu, 04 April 2021

Asisten

RAMADHAN QORIDHATUL ALFARIZI

18.04.411.00098

LABORATORIUM BISNIS INTELIJEN SISTEM

JURUSAN SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA

1|Page
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Pada era teknologi seperti zaman sekarang, internet sungguh mengalami
perkembangan pesat. Hampir semua orang menggunakan internet dalam
kesehariannya, salah satunya dengan mengakses informasi melalui browser
atau website. Website adalah kumpulan halaman web yang saling terhubung
dan file-filenya saling terkait satu sama lain. Web terdiri dari page/halaman,
dan kumpulan halaman yang disebut homepage. Homepage berada pada
posisi teratas, dengan halaman-halaman terkait yang berada di bawahnya.
Biasanya setiap halaman di bawah homepage disebut child page, yang berisi
hyperlink ke halaman lain dalam web (Gregorius: 2000).

Website merupakan salah satu produk dari ilmu pemrograman berbasis

web. Pemrograman berbasis web adalah proses penulisan code untuk
membuat suatu website. Salah satu penyusun dalam pembuatan suatu website
adalah dengan menggunakan HTML. HTML (Hyper Text Markup Language)
adalah scipt yang digunakan untuk membuat tampilan halaman web.

HTML sangat penting di dalam pemrograman berbasis web. Oleh karena

itu penting bagi kita untuk mempelajari HTML agar nantinya kita bisa
membuat suatu website sendiri.

1.2 Tujuan
1. Mampu menjelaskan pengertian HTML.
2. Mampu menjelaskan struktur dasar HTML.
3. Mampu menjelaskan tag-tag HTML.
4. Mampu membuat aplikasi dengan perintah HTML.

2|Page
 BAB II
DASAR TEORI
2.1 Pengertian HTML
HTML kependekan dari Hyper Text Markup Language. Dokumen HTML
adalah file text murni yang dapat dibuat dengan editor teks sembarang.
Dokumen ini dikenal sebagai web page. File-file HTML ini berisi instruksi-
instruksi yang kemudian diterjemahkan oleh browser yang ada dikomputer
client (user) sehingga isi informasinya dapat ditampilkan secara visual
dikomputer pengguna (user).

HTML dikenal sebagai standar bahasa yang digunakan untuk

menampilkan dokumen web. Yang bisa dilakukan dengan HTML yaitu :

1. Mengontrol tampilan dari web page dan contentnya.

2. Mempublikasikan dokumen secara online sehingga bisa diakses dari
seluruh dunia.
3. Membuat online form yang bisa digunakan untuk menangani
pendaftaran, transaksisecara online.
4. Menambahkan obyek-obyek seperti image, audio, video dan juga java
applet dalamdokumen HTML.

2.2 Browser dan Editor

Ada dua cara untuk membuat sebuah web page yaitu dengan HTML editor
atau dengan editor text biasa (misalnya notepad atau editplus). Untuk latihan
atau mencoba materi sebaiknya menggunakan notepad, setelah itu pada
bagian mendekati akhir dapat menggunakan editor HTML, hal ini
dimaksudkan agar mudah memahami dan terbiasa secara primitif membuat
dokumen web. Sedangkan HTML editor dapat menggunakan software
DreamWeaver. Software ini merupakan salah satu software untuk mendesain
website atau homepage, selain software front page yang sering kita dengar.

Untuk melakukan penamaan dokumen maka pilih suatu nama, sembarang

nama kemudian tambahkan sebuah ekstensi ”.htm” atau ”.html” (tanda kutip
tidak perlu dituliskan karena digunakan sebagai penjelas saja). Dan dokumen
HTML disusun oleh elemen-elemen. ”Elemen” merupakan istilah bagi

3|Page
 komponen-komponen dasar pembentuk dokumen HTML. Beberapa Contoh
elemen adalah: head, body, table, paragraf, dan list. Elemen dapat berupa teks
murni, atau bukan teks atau keduanya. Untuk itu komponen-komponen yang
diperlukan dalam mendesain web adalah:

1. Sebuah komputer yang siap web. Komputer dengan windows 95/98/NT,

Mac atau Unix.
2. Editor text, notepad atau yang lainnya.
3. Koneksi ke server web (kalau mungkin koneksi ke internet).
4. Browser web, direkomendasi Internet Explorer atau Netscape Navigator.
5. Langkah berikutnya adalah surfing Internet, melihat-lihat website untuk
mendapatkan dan membangun ide dari apa yang dilihat.

2.3 Struktur Dasar HTML

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML,
dinyatakan dengan tag-tag sebagai berikut:

1. HTML
Setiap dokumen HTML selalu diawali dan ditutup dengan tag HTML.
2. HEAD
Bagian head biasanya berisikan tag TITLE, meta tag dan semua script
java atau yang lain yang akan dieksekusi di browser. Dibagian inilah kita
memberikan bookmark untuk keperluan pencarian (searching) dengan
keyword.
3. BODY
Bagian body digunakan untuk emnampilkan text, image link dan semua
yang akan ditampilkan pada web page. Semua umum dokumen web
dibagi menjadi dua section (bagian), yaitu section head dan section body.
Sehingga setiap dokumen html harus mempunyai pola dasar sebagai
berikut:

4|Page
 Setiap dokumen HTML harus diawali dengan menuliskan tag dan diakhir
dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini
adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen
HTML. Section atau elemen head dimulai dengan tag diawal, dan tag
diakhir. Section ini berisi informasi tentang dokumen htmlnya. Minimal
informasi yang dituliskan dalam elemen ini adalah judul dari dokumen,
judul ini akan ditampilkan pada caption bar dari window browser,
ditandai dengan menggunakan tag . Sehingga bagian yang diapit oleh tag
HEAD merupakan header dari halaman HTML dan tidak ditampilkan
pada browser. Sedangkan tag TITLE yang berfungsi untuk mengeluarkan
judul pada title bar window web browser. Section atau elemen body
ditandai dengan tag
diawal dan tag
diakhir. Section body merupakan elemen terbesar didalam dokumen
HTML. Pada bagian ini anda akan menuliskan semua jenis informasi
berupa teks dengan bermacam format maupun gambar yang ingin
disampaikan pada pengguna nantinya.

2.4 Tag-tag dalam <body>

1. Warna latar belakang
Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
2. Menggunakan gambar
<body background=”nama_file_gambar”> . . . </body>
3. Heading
Untuk judul atau sub judul dalam dokumen HTML
<h1 [align=”left”|“center”|“right”]> . . . </h1>
<h2 [align=”left”|“center”|“right”]> . . . </h2>

5|Page
 <h6 [align=”left”|“center”|“right”]> . . . </h6>
4. Paragraph
Untuk mengatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|“right”]> . . . </p>
5. Preformatted text
Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen
HTML:
<pre> . . . </pre>
6. Blockquote
Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen
HTML:
<blockquote> . . . </blockquote>
7. Break
Untuk menulis teks pada baris berikutnya:
<br>
8. Font
Ukuran font
<font size=”n”> . . . </font>
Jenis font
<font size=”n” face=”jenis_font”> . . . </font>
Warna font
<font size=”n” face=”jenis_font” color=”warna”> . . . </font>
9. Untuk format dokumen
Bold:
<b> . . . </b>
Emphasized:
<em> . . . </em>
Italic:
<i> . . . </i>
Superscript:
^{. . .}
Subscripted:

6|Page
 _{. . .}
Struck trough:
<del> . . . </del>
10. Gambar
Untuk memuat gambar ke dalam halaman web
<img src=”URL”|”name” height=”n” width=”n”
align=”top”|”center”|”bottom”]/>
11. Untuk hypertext link
Format:
<a href=”adress”> . . . </a>
Link ke dokumen lain:
<a href=”nama_dokumen”> . . . </a>
Link ke bagian tertentu dalamdokumen yang sama:
<a href=”#target”> . . . </a>
<a href=”target”> . . . </a>
Link ke alamat URL atau WebSite:
<a href=”alamat_URL”> . . . </a>
Link ke alamat Email:
<a href=”mailto:alamat_email”> . . . </a>
Link File yang akan didownload:
<a href=”nama_file”> . . . </a>

7|Page
 BAB III
TUGAS PENDAHULUAN
3.1 Tugas Pendahuluan
1. Apakah yang anda ketahui tentang World Wide Web (WWW)?
Jawab:
Website atau World Wide Web, sering disingkat sebagai www atau “web”
saja, yakni sebuah sistem dimana informasi dalam bentuk teks, gambar,
suara, dan lain-lain dipresentasikan dalam bentuk hypertext dan dapat
diakses oleh perangkat lunak yang disebut browser. Informasi di web pada
umumnya ditulis dalam format HTML.
Keistimewaan inilah yang telah menjadikan web sebagai service yag
paling cepat pertumbuhannya. Web mengizinkan pemberian highlight
(penyorotan) pada kata-kata atau gambar dalam sebuah dokumen untuk
menghubungkan atau menunjuk ke media lain seperti dokumen, frase,
movie clip, atau file suara. Web dapat menghubungkan dari sebarang
tempat dalam sebuah dokumen atau gambar ke sebarang tempat di
dokumen lain. Dengan sebuah browser yang memiliki Graphical User
interface (GUI), link-link dapat dihubungkan ketujuannya dengan
menunjuk link Tersebut dengan mouse dan menekannya.

2. Sebutkan tiga komponen pokok yang menjadi tulang punggung

keberadaan sebuah web dan jelaskan masing-masing komponen tersebut!
Jawab:
1) Web browser: software yang digunakan untuk menampilkan informasi
dari server software yang digunakan untuk menampilkan informasi
dari server web web.
2) Web server: komputer yang digunakan untuk menyimpan dokumen
komputer yang digunakan untuk menyimpan dokumen-dokumen web,
komputer ini akan melayani permintaan dokumen web dari klie web,
komputer ini akan melayani permintaan dokumen web dari kliennya
3) Web programming: server-side programming (CGI/ side programming
(CGI/Perl Perl, ASP, JSP, PHP, CFM), ASP, JSP, PHP, CFM) dan

8|Page
 danclient client-side programming (untuk membuat web yang statis
statis,seperti Java Script, VB Java Script, VB Script, HTML) Script,
HTML)

3. Apa yang anda ketahui tentang URL (Uniform Resource Locator)?

Jawab:
URL pertama kali diciptakan oleh Tim Berners-Leepada tahun 1991 agar
penulis-penulis dokumen dapat mereferensikan pranala ke World Wide
Web. Sejak 1994, konsep URL telah dikembangkan menjadi istilah
Uniform Resource Indentifier (URI) yang sifatnya lebih umum. Walaupun
demikian, istilah URL masih tetap digunakan secara luas.
URL atau Uniform Resource Locator adalah rangkaian karakter menurut
suatu format standar tertentu, yang digunakan untuk menunjukkan alamat
suatu sumber seperti dokumen dan gambar di internet. Dalam hal ini,
alamat URL merupakan alamat khusus untuk file tertentu yang bias
diakses oleh internet. Akan tetapi perlu diketahui, alamat URL tidak hanya
mencakup file HTML, namun termasuk juga jenis-jenis file lain yang bias
diakses oleh internet. Misalnya file image yang bertipe jpg, gif, dll. URL
dapat diakses dengan berbagai metode dan bisa jadi bukan hanya sekedar
file, karena URL dapat menunjukkan query-query, dokumen yang
disimpan dalam database, hasil dari suatu perintah finger atau archie, atau
apa pun yang berkaitan dengan data hasil proses.

4. Apa yang anda ketahui tentang HTTP dan sebutkan macam-macam

protokol web?
Jawab:
HTTP adalah sebuah protokol meminta atau menjawab antara client dan
server. Sebuh client HTTP seperti web browser, biasanya memulai
permintaan dengan membuat hubungan TCP/IP ke port tertentu di tuan
rumah yang jauh (biasanya port 80).
Macam-macam protocol web:
1) TCP

9|Page
 TCP/IP (singkatan dari Transmission Control Protocol/Internet
Protocol) jika diterjemahkan adalah Protokol Kendali
Transmisi/Protokol Internet, adalah gabungan dari protokol TCP
(Transmission Control Protocol) dan IP (Internet Protocol) sebagai
sekelompok protokol yang mengatur komunikasi data dalam proses
tukar-menukar data dari satu komputer ke komputer lain di dalam
jaringan internet yang akan memastikan pengiriman data sampai ke
alamat yang dituju.
2) UDP (User Datagram Protocol)
UDP merupakan salah satu protokol yang berada pada lapisan TCP/IP,
dan dapat mendukung komunikasi yang tidak andal (unrealiable).
3) RTP (Real Time Protocol)
RTP atau Real Time Protokol adalah salah satu protokol jaringan yang
menyediakan fungsi untuk mengantarkan data secara real time. Seperti
misalnya data audio, video, dan lain-lain biasanya data dapat dikirim
melalui layanan jaringan multicast atau layanan unicast
4) DNS (Domain Name System)
DNS merupakan protokol jaringan dan biasa digunakan pada aplikasi
yang terhubung ke jaringan internet, misalnya seperti peramban
internet, email, dan aplikasi lainnya. DNS ini juga dapat membantu
memetakan hostname dari sebuah komputer ke IP address.
5) FTP (File Transfer Protocol)
Protokol jenis ini biasanya digunakan untuk melakukan unggah
maupun unduh file. Keamanannya sendiri didasarkan pada username
dan password yang dibuat komputer, namun terkadang tidak sedikit
juga anonymous diperbolehkan login.

5. Dalam struktur HTML dokumen terdapat tiga tag penting yaitu HTML,
HEAD dan BODY. Apa yang dimaksud dari tiga tag tersebut dan
bagaimana cara penggunaannya?
Jawab:

10 | P a g
1) HTML
HTML adalah singkatan dari Hypertext Markup Language. HTML
memungkinkan seorang user untuk membuat dan menyusun bagian
paragraf, heading, link atau tautan, dan blockquote untuk halaman web
dan aplikasi.
Cara penggunaannya:
Setiap dokumen HTML harus diawali dengan menuliskan tag dan
diakhir dokumen. Tag ini menandai elemen HTML, yang berarti
dokumen ini adalah dokumen HTML.
<html> . . . </html>

2) HEAD
Head atau biasa dikenal <head> adalah salah satu elemen penting yang
dimiliki oleh sebuah file html selain body. Di head lah tempat para
programmer biasanya memasukkan elemen script, link, style, title,
meta, dll. Tidak seperti body, ketika anda memasukkan teks di body,
maka ketika halaman dijalankan, teks yang anda masukkan di dalam
body tadi akan ditampilkan di UI(User Interface).
Cara penggunaannya:
Dengan cara menambahkan tag <head> diawal dan diakhir.
<head> . . . </head>

3) BODY
Tag body adalah elemen yang mewakili isi dokumen HTML. segala
sesuatu yang ada didalam elemen ini ditampilkan di halaman utama
browser. <body> berisi semua dokumen HTML, seperti teks,
hyperlink, gambar, tabel, list dan lain-lain.
Cara penggunaannya:
cara penulisan tag body, <body> sebagai tag pembuka dan </body>
adalah tag penutup.
<body> . . . </body>

11 | P a g
 BAB IV
IMPLEMENTASI
4.1 Bahan Praktikum
Bahan yang diperlukan untuk pelaksanaan praktikum :

1. Text editor : Visual Studio Code

2. Browser : Microsoft Edge

4.2 Tugas Praktikum

1. Buatlah halaman web sebagai homepage pribadi yang berisi tentang data
pribadi misalkan nama, NRP, alamat rumah, tempat & tanggal lahir,
riwayat pendidikan, email, hobby, karya-karya penelitian/ program yang
pernah dibuat, pengalaman kerja, kesan pertama masuk Universitas
Trunojoyo, citacita, pengalaman suka dan duka, bahasa program yang
dikuasai, program-program komputer (software) yang pernah dicoba,
system operasi yang dikuasai dan lain-lain. Gunakan semua tag-tag yang
telah dipelajari diatas.

Penyelesaian:

1. Source code:
Home.html

Biodata.html

12 | P a g
CV.html

Kesan.html

13 | P a g
Pengalaman.html

14 | P a g
Komp.html

15 | P a g
2. Output:
Home.html

Biodata.html

16 | P a g
CV.html

Kesan.html

17 | P a g
Pengalaman.html

Komp.html

18 | P a g
19 | P a g
 BAB V
PENUTUP
5.1 Analisa
Dari hasil praktikum, saya menganalisa bahwa dalam membuat suatu website,
kita memerlukan ilmu pemrograman berbasis web. Untuk bisa membuat web,
biasanya kita menggunakan HTML sebagai dasar pembuatannya. HTML
sendiri merupakan scipt yang digunakan untuk membuat tampilan halaman
web.
Dalam HTML terdapat beberapa tag dasar yang biasanya digunakan
diantaranya:
<html> Tag untuk membuat sebuah dokumen HTML
<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
5.2 Kesimpulan
1. Pemrograman Web merupakan suatu ilmu atau proses yang digunakan
untuk membuat suatu website
2. Dalam dasar pemrograman Web terdapat HTML. HTML merupakan scipt
yang digunakan untuk membuat tampilan halaman web
3. HTML memiliki beberapa tag dasar seperti <html>, <tittle>, <head>,
<body>, <h1> to <h6>, <p>, <br>, <table>, <hr>, <tr>, <td>, <th>, dll.
4. Dalam table ada atribut rowspan (gabung baris) dan colspan (gabung
kolom).