Laporan Praktikum Modul 1

Laporan
Praktikum
Pemograman Web
Modul 1
Nama : Griyanda Azhar Yustiani

Nim : 3411201004
Kelas : Informatika - A
Program Studi Informatika Fakultas

Sains Dan Informatika
Universitas Jenderal Achmad Yani
2020
I. Pembahasan
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk
dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu
oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti
JavaScript dan VBScript.
Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam
dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau
lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan
ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan
dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan
instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan
tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada
penggambaran komponen-komponen struktur dan format di dalam halaman web
daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk
menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan
menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke
komputer yang menampilkan halaman web.
Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua
franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna
Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang
terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan
dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada
pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian
pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat
dan berisi Grafika dan Pranala.
II. Latihan
a. Source Code
<!DOCTYPE html>
<html>
<head>
<title>latihan</title>
</head>
<body>
proyek pertama latihan saya
</body>
</html>
b. Hasil Eksekusi
c. Analisis
Pada Latihan pertama ini saya diminta untuk menampilkan sebuah kata dengan
source code dasar yang dipelajari. Cukup untuk memasukkan kata diantara
<body></body> maka kata tersebut aka tampil pada layer setelah di save seuai
dengn keguuan dari <body> itu sendri.
III. Tugas
1. Tugas 1
a. Source Code
<!DOCTYPE html>
<html>
<head>
<title>Tabel 1</title>
</head>
<body>
<table border="1">
<tr>
<th width="70px">No</th>
<th width="370px">Nama</th>
<th width="250px">Nim</th>
</tr>
<tr>
<td>1</td>
<td> Siti </td>
<td> 34101043 </td>
</tr>
<tr>
<td>2</td>
<td> Diki </td>
<td> 34101023 </td>
</tr>
</table>
</body>
</html>
b. Hasil Eksekusi
c. Analisi
Pada tugas 1 ini saya diminta untuk membuat table nama dan nim dengan
menggunakan source code seperrti di atas. Untuk membuat table kita harus
menngunakan <table> yang berguna untuk membuat data yang terdiri dari baris dan
kolom, setelah itu menyelipkan border untuk ketebalan garis. Selain itu menggunakan
tag <th> untuk membuat sel sebuah header dengan diselipkan width untuk ukurannya,
dan diulang sampai pada yang terakhir yaitu memasukkan data nim.
2. Tugas 2
a. Source Code
<!DOCTYPE html>
<html>
<head>
<title> Tabel 2 </title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Data Mahasiswa</th>
</tr>
<tr>
<th width="370px">Nama</th>
<th width="250px">Nim</th>
</tr>
<tr>
<td>1</td>
<td>Siti</td>
<td>34101043</td>
</tr>
<tr>
<td>2</td>
<td>Diki</td>
<td>34101023</td>
</tr>
</table>
</body>
</html>
b. Hasil Eksekusi
c. Analisis
Pada tugas 2 ini, tidak jauh beda dengan tugas pertama. Hanya saja kali ini
menambahkan tag <collspan> untuk menggabungkan kolom “Data Mahasiswa”
dengan 3 kolom yang ada di bawahnya.
3. Tugas 3
a. Source Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="4">Data Penjualan Barang</th>
</tr>
<tr>
<th width="370px">Nama Barang</th>
<th width="230px">Harga</th>
<th width="230px">Sub Total</th>
</tr
<tr>
<td>1</td>
<td>Pepsodent</td>
<td align="right">2500</td>
</tr>
<tr>
<td>2</td>
<td>Sarimi</td>
</tr>
<tr>
<td></td>
<td colspan="2" align="right">Total</td>
<td
align="right"bgcolor="#BCBCBC">80000</td>
</tr>
</table>
</body>
</html>
b. Hasil Eksekusi
c. Analisis
Pada tugas 3 diminta untuk membat table data penjualan barang dan masih tidak
jauh beda dengan tugas 1 dan 2. Yang membedakan adalah dengan memberi
warna pada harga total dengan menggunakan tag <bgcolor> dan tinggal
memasukkan code warna seuai dengan warna yang diinginkan.
4. Tugas 4
a. Source Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="3" bgcolor="#696969"
height="50px" width="750px" ><font face="Calibri"><font
size="6">Selamat datang di Web Unjani </font></font></th>
</tr>
<tr>
<th width="200px" align="center"
height="200px">Link :
<ul>
<li>Unjani</li>
<li>Dikti</li>
<li>ITB</li>
</ul>
</th>
<th align="center">
<img src="unjani.html.jpg"
width="100px"><br>
<p> Unjani adalah universitas Swasta
<br> terbaik di Jawa Barat </p>
</th>
<th><u>Pengumuman</u>
<ol>
<li><u>Diesnatalis</u></li>
<li><u> Seminar TA 1</u></li>
<li><u>Sidang Skripsi</u></li>
</ol>
</th>
<table border="1">
<tr>
<th colspan="3" bgcolor="#B3B3B3"
width="750px" height="50px">Design by: Griyanda Azhar Yustiani
-Nim 3411201004</th>
</tr>
</table>
</tr>
</table>
</body>
</html>
b. Hasil Ekssekusi
c. Analisis
Pada tugas yang yang ke-4 ini diminta untuk membuat tampilan prmbuka web
Unjani. Untuk membauat paragraf memakai tag <p>, dan untuk memasukkan
gambar pada table kita bisa menggunakan tag <img> dengan menyelipkan tag
<src> untuk menjelaskan lokasi tempat tersimpannya gambar yang akan di input.
Selain itu menggunakan tag <ol> atau orser list yang berfungsi untuk membuat
nomor daftar huruf, menggukana tag <li> atau list item untuk tag yang ada di
dalam elemen ol dan ul berbentuk list, untuk mengatur font size bisa
menambahkan tag <size. Apabila ingin membuat garis bawah pada teks, kita bisa
mengguakan tag <u> yang berarti underline.
IV. Kesimpulan
Dari laporan diatas dapat ditarik kesimpulan bahwa didalam praktikum modul
1 ini kita diperkenalkan dengan HTML atau Hypertext Markup Language yaitu
bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan diinternet.
Pada dokumen HTML sebuah tulisan bisa memuat instruksi yang ditandai dengan
kode atau lebih dikenal dengan TAG tertentu. Selain diperkenalkan dengan HTML,
saya juga ditugaskan untuk membuat web yang berisi berbagai macam tabel yang
bertujuan agar kita bisa mengerti dan mengetahui berbagai macam sintax yang
digunakan untuk membuat tabel tersebut serta cara memasukkan gambar kedalam
Web dengan tag yang dimaksud.

Bahasa

Laporan Praktikum Modul 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Laporan Praktikum Modul 1

Diunggah oleh

Hak Cipta:

Laporan

Nama : Griyanda Azhar Yustiani

Program Studi Informatika Fakultas

Anda mungkin juga menyukai