PEMROGRAMAN WEB 1

HTML

Nama Anggota :
Gihonia Dolok Saribu ( 19103114 )
Putu Ayu Adinda Hartawan Giri ( 19103111 )
I Gusti Ayu Belva Prabaningrat ( 19103112 )
Ni Kadek Melati ( 19103115 )

Dosen Mata Kuliah :

I Nyoman Tri Anindia Putra

STMIK Stikom Indonesia

Kelas G
Jurusan Teknik Informatika Komputer Akuntansi Bisnis
Tahun ajaran 2019/2020
 DAFTAR ISI

DAFTAR ISI..............................................................................................................................ii
DAFTAR GAMBAR................................................................................................................iii
DAFTAR TABEL.....................................................................................................................iv
1.1.Pengertian HTML................................................................................................................5
1.2.Kegiatan Praktikum 1 (Praktikum 1.2)................................................................................5
1.2.1.Langkah-Langkah Praktikum 1.2....................................................................................5
1.3.Kegiatan Praktikum 2(Praktikum 1.3).................................................................................7
1.3.1.Langkah-Langkah Praktikum 1.3....................................................................................7
1.4.Kegiatan Praktikum 3 (Praktikum 1.4)................................................................................8
1.4.1.Hal yang di Pelajari Pada Praktikum 1.4........................................................................9
1.5.Praktikum 4 (Praktikum 1.5)..............................................................................................10
DAFTAR PUSTAKA..............................................................................................................12

ii
 DAFTAR GAMBAR

Gambar 1 Input Praktikum 1.2...................................................................................................4

Gambar 2 Output Praktikum 1.2................................................................................................4
Gambar 3 Output Praktikum 1.3................................................................................................6
Gambar 4 Input Praktikum 1.3...................................................................................................6
Gambar 5 Output Praktikum 1.4................................................................................................7
Gambar 6 Input Praktikum 1.4...................................................................................................7
Gambar 7 Input Praktikum 1.5...................................................................................................9
Gambar 8 Output Praktikum 1.5................................................................................................9

iii
 DAFTAR TABEL

Gambar 1 Input Praktikum 1.2...................................................................................................5

Gambar 2 Output Praktikum 1.2................................................................................................5
Gambar 3 Output Praktikum 1.3................................................................................................7
Gambar 4 Input Praktikum 1.3...................................................................................................7
Gambar 5 Output Praktikum 1.4................................................................................................8
Gambar 6 Input Praktikum 1.4...................................................................................................8
Gambar 7 Input Praktikum 1.5.................................................................................................10
Gambar 8 Output Praktikum 1.5..............................................................................................10

iv
 1.1. Pengertian HTML
HTML merupakan kepanjangan dari Hypertext Markup Language. Disebut markup
langguage karena didalamnya terdapat serangkaian markup yang nantinya akan disebut
dengan TAG berfungsi untuk sitobrowser, bagaimana sebuah kontem akan ditampilkan.
HTML sendiri diciptakan oleh Tim Berners-Lee.
HTML memiliki struktur dasar yang berisi tag head dan tag body. Pada tag head
biasanya berisi tag title, tag style, tag script, dan tag meta. Sementara pada tag body,
terdapat banyak tag, diantaranya tag paragraf, tag header, tag strong, tag tabel, dan lain
sebagainya. Pada tag body nantinya akan menampilkan isi dari halaman browser.
Untuk lebih jelasnya, kami akan mengambil contoh pada praktikum 1.2 sampai 1.5
yang terdapat pada buku “KUPAS TUNTAS PEMROGRAMAN WEB I” yang
diterbitkan oleh STMIK Stikom Indonesia, dengan penulis yaitu I Nyoman Tri Anindia
Putra dan I Dewa Made Prasada Kusuma Adiputra.

1.2. Kegiatan Praktikum 1 (Praktikum 1.2)

Aplikasi yang digunakan : atom dan XAMMP
Tujuan : membuat heading dan paragraf

1.2.1. Langkah-
Langkah

Gambar 2 Output Praktikum 1.2

Gambar 1 Input Praktikum 1.2
Praktikum 1.2
Adapun langkah-langkah dalam melakukan praktikum 1 adalah sebagai berikut.
1. Pada langkah pertama, kita diberi petunjuk untuk membuat suatu folder bernama ‘1’.
Folder itu disimpan dengan urutan penyimpanan dari directory C > EXAMPP >
htdoc > Modul, urutan penyimpanan tersebut bertujuan untuk membuat link yang
akan membantu kita untuk menjalankan program lewat browser.
2. Kemudian pada praktikum ini kita akan mengetahui cara menggunakan Header,
paragraf, dan copyright, yang dimana copy right digunakan agar tidak terjadi
tindakan plagiarisme. Namun sebelum memulai coding, kita disarankan untuk

5
 menyimpan file tempat kita mengoding, ke folder Modul dengan nama
‘kegiatanpraktikum1.html’.
Kenapa kita harus memberi embel-embel ‘.html’ dibelakang judul? Apakah itu
diharuskan? Jawabanya adalah harus, karena ini merupakan tanda bahwa file
tersebut merupakan bentuk dari html. Jika tidak tersapat embel-embel tersebut, maka
coding yang telah kalian ketik tidak akan berfungsi atau bekerja.
3. Jika kita telah menyimpan file tersebut dari aplikasi coding, maka kalian akan bisa
memulai untuk mengetik coding. Mulailah dari coding dasar html, kemudian beru isi
sesuai dengan suruhan pada kegiatan praktikum 1 tersebut. Sesuai dengan yang kami
katakan tadi, pada kegiatan praktikum 1 akan membahas mengenai Heading,
paragraf, dan copyright. Jika tadi kami sudah menjelaskan tentang fungsi copyright,
dan kalian pun juga pasti duah mengerti tentang arti paragraf. Maka header sendiri
memiliki fungsi untuk mengatur ukuran tulisan, yang dimana pilihan ukurannya
mulai dari h1 (ukuran paling besar) hingga h6(ukuran yang paling kecil). Biasanya,
header ini digunakan untuk menulis judul pada suatu web.
4. Ketika kalian teleh selesai mengetik coding-koding tersebut, maka kembali save data
tersebut. selanjutnya, kita di beri petunjuk untuk memulai Apache dan MySQL
dengan membuka apliasi xampp. Ini berfungsi untuk menghubungkan program kita
ke browser, sehingga kita dapat membuka hasil coding kita melalui browser dengan
mengetik http://localhost/Modul/1/kegiatanpraktikum1.html . Maka kita dapat
melihat hasil coding yang telah kita kejakan.

6
1.3. Kegiatan Praktikum 2(Praktikum 1.3)
Aplikasi yang digunakan : atom teks dan XAMMP
Tujuan : membuat list

Gambar 3 Output Praktikum 1.3

Gambar 4 Input Praktikum 1.3

1.3.1. Langkah-Langkah Praktikum 1.3

1. Sepeti biasa kita akan mulai dari menyimpan file dari directory C > EXAMPP >
htdoc > Modul, sama seperti di kegiatan praktikum 1. Pada kegiatan praktikum ini
file diberi nama kegiatanpraktikum2.html . Mulailah mengetik coding sesuai dengan
petunjuk di buku.
2. Pada tag header, terdapat tag title yang akan membuat judul pada web browser. Jika
di kegiatan praktikum sebelumnya kita sudah mengenal pragraf, header, dan
copyright, maka di kegiatan praktikum kali ini kita akan menjelaskan tentang :

7
 Tabel 1 Tag Pada HTML
TAG Fungsi
<i> </i> Membuat huruf menjadi cetak miring
<u> </u> Membuat huruf memiliki garis bawah
<b> </b> Membuat huruf menjadi cetak tebal
<ul> </ul> Untuk membuat list yang tidak terurut
<ol> </ol> Membuat list yang terurut
<li> </li> Membuat icon pada list
(jika digabung dengan unorder list, pilihan icon :
disc, circle, square, none)
(jika digabung dengan order list, pilihan icon : 1,
A, a, I, i)
<strong> </strong> Membuat huruf menjadi cetak tebal
Setelah kalian save, maka kalian dapat melihat hasinya di
http://localhost/Modul/1/kegiatanpraktikum2.html

Gambar 5 Output Praktikum 1.4

Gambar 6 Input Praktikum 1.4

8
 1.3.2. Hal yang di Pelajari Pada Praktikum 1.4
Di praktikum
1.1. Kegiatan Praktikum 3 (Praktikum 1.4)
1.4 akan
Aplikasi yang digunakan : atom teks dan XAMMP
membahas
Tujuan : membuat gambar dan tabel
mengenai.
Tabel 2 Daftar Tag Pada Praktikum 1.4
tag fungsi
<center> </center> Tulisan berada di bagian tengah halaman
<img> Menyimpan image
<table> </table> Membuat tabel
<tr> </tr> Baris
<td> </td> Kolom
<a> </a> Menyimpan hyperlink
<br> Membuat spasi

Disini juga akan mempelajari atribut-atribut sebagai berikut.

Tabel 3 Daftar Atribut di Praktikum 1.4

Atribut Keterangan
src Biasanya digunakan pada tag image untuk
mencari gambar yang dituju
width dan height Menentukan ukuran gambar
border Pembatas atau garis pada tabel
align Untuk mensejajarkan tulisan
Setelah selesai dan juga di save, kalian bisa melihat hasil projek ini di
http://localhost/Modul/1/kegiatanpraktikum3.html

9
1.4. Praktikum 4 (Praktikum 1.5)
Aplikasi yang digunakan : sublime teks dan XAMMP
Tujuan : membuat tampilan website foodcourt

Gambar 7 Input Praktikum 1.5

Gambar 8 Output Praktikum 1.5

10
Penjelasan Untuk Kegiatan Praktikum 3
Dalam praktikum ini kita memperlajari hal baru yaitu <FRONT> </FRONT> yang
memiliki fungsi untuk tampilan, ukuran, dan warna pada teks.
Hasil praktikum ini dapat dilihat di http://localhost/Modul/1/tugas1.html

11
 DAFTAR PUSTAKA
Tri Anindia, Made Prasada. 2019. Kupas Tuntas Pemrograman Web I. Bali. STIMIK
STIKOM Indonesia
Sandika Galih. 2015. HTML Dasar. Bandung. Web Programming UNPAS

12