Web I Laporan 2

PRAKTIKUM PEMROGRAMAN WEB I
DISUSUN OLEH:
NAMA : JUNAIDY CHRISTISON. N

STAMBUK : F 551 17 146
KELAS :B
PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS TADULAKO
2018/2019
1. Teori Dasar
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan
membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk
menampilkan data dalam bentuk tabel. Untuk membuat tabel di HTML, kita membutuhkan
setidaknya 3 tag, yaitu tag <table>, tag <tr>,dan tag <td>:
 Tag <table> digunakan untuk memulai tabel

 Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
 Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Pada tag <table> terdapat atribut border. Atribut border digunakan untuk memberikan

nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan
kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak
ditambahkan, secara default tabel tidak memiliki garis tepi.Selain border,terdapat juga atribut
lain yang dapat digunakan pada tabel seperti pada tabel dibawah ini :
Atribut Tag Fungsi
Untuk menambahkan border
border <table>
pada tabel
Untuk mengatur jarak teks
cellpadding <table>
dengan garis didalam sel
Untuk menambahkan warna
bgcolor <td> atau <tr>
pada sel atau baris
rowspan <td> atau <th> Untuk menggabungkan baris
Untuk menggabungkan
colspan <td> atau <th>
kolom
Untuk menyisipkan gambar atau foto, HTML menyediakan tag khusus yang bernama tag
image, dan ditulis dengan <img>. Tag <img> setidaknya memiliki sebuah atribut src (singkatan
dari source) yang berisi alamat atau lokasi gambar yang akan ditampilkan. Alamat tersebut
bisa relatif maupun absolut. Selain atribut src, pada pembahasan kali ini kita juga akan
mengenal beberapa atribut lainnya yang sering digunakan untuk memformat gambar di HTML.
Atribut Fungsi
Untuk menunjukan URL atau lokasi file
src
gambar
width Untuk mengatur lebar gambar
height Untuk mengatur tinggi gambar
Untuk menentukan posisi teks disekita
align
gambar
Untuk menampilkan teks pengganti jika
alt
gambar tidak dapat ditampilkan
Untuk memberikan keterangan gambar
title
ketika cursor diarahkan pada gambar
border Untuk memberikan bingkai pada gambar
2. A. Kode Program Laporan 1
<!DOCTYPE html>
<html>
<head>
<title>atribut dari tag table</title>
</head>
<body>
<p><b>Contoh 1: Membuat table</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

cellspacing="0" width="100%">
<tr> 
<td>ini kolom 1 pada baris 1</td> 
<td>ini kolom 2 pada baris 1</td> 
</tr> 

<tr>
<td>ini kolom 1 pada baris 2</td>
<td>ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b>Contoh 2 : Membuat table</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

cellspacing="0" width="100%">
<tr bgcolor="blue">
<td align="center">ini kolom 1 pada baris 1</td>
<td align="right">ini kolom 2 pada baris 1</td>
</tr>
<tr>
<td align="center" bgcolor="red"><font color="white">ini kolom 1 pada

baris 2</font></td>
<td align="right">ini kolom 2 baris 2</td>
</tr>
</table>
<p><b><font color="blue">tabel sebagai bingkai dari paragraf</font></b></p>
<table border="1" style="border-collapse: collapse;" cellpadding="8" bgcolor="white"

width="100%" border="black">
<tr>
<td>
<p>tabel memiliki peranan yang sangat penting dalam tampilan sebuah situs web</p>
<p>kala anda perhatikan website yang memiliki tampilan yang tersusun rapih.
sebenarnya itu adalah tabel hanya saja atribut <font
color="red"><b>border="0"</b></font>sehinggal tabel seakan tidak ada(transparan)</p>
<p>tag < table > adalah salah satu yang memiliki atribut terbanyak. lihat tabel daftar tag pada
bab 1untuk melihat daftar atributnya. dalam tag < table > juga terdapat dua tag yang penting
yaitu tag < tr >< /tr > untuk membuat baris dan tag < td >
< /td > untuk membuat kolom</p>
<p align="center">< 
<table border="1" style="border-collapse: collapse;" bgcolor="white" cellpadding="8"

width="80%">
<tr bgcolor="blue">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td>
<td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td>
<td>Rp.245.000,-</td>
</tr> 
</table>
</p>
</p>
</td>
</tr>
</table>
</body>
</html>
Output
B. Kode Program Laporan 2

<html>
<head><h1>ini adalah header 1</h1><br>
<h3>ini adalah header 3</h3></head><br>
<title>wibu ultimet:v</title>
<h1>junaidy</h1>
<body bgcolor ="white">
<b>ini adalah halaman web pertamaku</b><br>

<i>this is italic style</i><br>
nama saya adalah<b><u> Junaidy Christison N</b></u><br>
contoh tulisan rumus<br>
<sup>c2=a2+b2<br>
co2+h2o
</body>
</html>
Output
3. Tugas
A. Kode Program
<!DOCTYPE html>
<html>
<head>
<title>TUGAS PERCOBAAN 2</title>
</head>
<body>
<h1 align="center">BIODATA</h1>
<table align="center" border="1" bordercolor="blue" bgcolor="blue"
cellpadding="3" cellspacing="1" width="40%">
<td colspan="5" align="center"><b>DATA DIRI</b></td>
<tr>
<td bgcolor="white" width="5%">NO STAMBUK</td>
<td bgcolor="white" width="1%">:</td>
<td colspan="2" bgcolor="white" width="20%">F55117146</td>
<td rowspan="10" width="250" align="center"><img
src="C:\Users\User\Documents\New folder/Junaidy Christison Nainggolan.jpg"
width="200px" height="300px"></td>
</tr>
<tr bgcolor="white">
<td width="5%">NAMA</td>
<td width="1%">:</td>
<td colspan="2" width="20%">JUNAIDY CHRISTISON
NAINGGOLAN</td>
</tr>
<td width="5%">AGAMA</td>
<td width="1%">:</td>
<td colspan="2" width="20%">KRISTEN PROTESTAN</td>
</tr>
<tr>
<td bgcolor="white" width="5%">JENIS KELAMIN</td>
<td bgcolor="white" width="1%">:</td>
<td colspan="1" bgcolor="blue" width="100%">LAKI-LAKI</td>
</tr>
<td rowspan="3" width="5%">ALAMAT</td>
<td rowspan="3" width="1%">:</td>
<td width="10%">JL.TOUWA</td>
<tr>
<td bgcolor="white" width="10%">KELURAHAN</td>
<td bgcolor="white" width="10%">BIROBULI</td>
</tr>
<td bgcolor="white" width="10%">KECAMATAN</td>

<td bgcolor="white" width="10%">SIGI</td>
</tr>
<td>EMAIL</td>
<td>:</td>
<td colspan="2" >junaidychristison@gmail.com</td>
</tr>
<td >NOMOR HP</td>
<td >:</td>
<td colspan="2" >082284565426</td>
</tr>
<td >HOBI</td>
<td >:</td>
<td colspan="2" >BACA KOMIK, MANCING, WATCHING ANIME</td>
</tr>
<tr>
<td colspan="5" align="center" bgcolor="blue"><b>RIWAYAT
SEKOLAH</b></td>
</tr>
<td >NO</td>
<td >:</td>
<td colspan="2" >NAMA SEKOLAH</td>
<td colspan="2" >ALAMAT</td>
</tr>
<td>1.</td>
<td>:</td>
<td colspan="2" >SD N 009 KIJANG JAYA </td>
<td colspan="2" >SP.1</td>
</tr>
<td>2.</td>
<td>:</td>
<td colspan="2" >SMP N2 KIJANG JAYA</td>
<td colspan="2" >SP.1</td>
</tr>
<td>3.</td>
<td>:</td>
<td colspan="2" >SMA N2 KIJANG JAYA</td>
<td colspan="2" >SP.2 BUANA</td>
</tr>
<tr>
<td colspan="5" align="center" bgcolor="blue"><b>DATA
KELUARGA</b></td>
</tr>
<td>Nama Ayah</td>
<td>:</td>
<td colspan="2" >My Hero</td>
</tr>
<td>Nama Ibu</td>
<td>:</td>
<td colspan="2" >My Hero</td>
</tr>
</table>
</body>
</html>
B. Output

Web I Laporan 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web I Laporan 2

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM PEMROGRAMAN WEB I

NAMA : JUNAIDY CHRISTISON. N

PROGRAM STUDI TEKNIK INFORMATIKA

 Tag <table> digunakan untuk memulai tabel

Pada tag <table> terdapat atribut border. Atribut border digunakan untuk memberikan

2. A. Kode Program Laporan 1

<title>atribut dari tag table</title>

<p><b>Contoh 1: Membuat table</b></p>

<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

<tr>

</tr>

<td>ini kolom 1 pada baris 2</td>

<td>ini kolom 2 pada baris 2</td>

<p><b>Contoh 2 : Membuat table</b></p>

<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

<td align="center">ini kolom 1 pada baris 1</td>

<td align="right">ini kolom 2 pada baris 1</td>

<td align="center" bgcolor="red"><font color="white">ini kolom 1 pada

<td align="right">ini kolom 2 baris 2</td>

<p><b><font color="blue">tabel sebagai bingkai dari paragraf</font></b></p>

<table border="1" style="border-collapse: collapse;" cellpadding="8" bgcolor="white"

< /td > untuk membuat kolom</p>

<p align="center"><

<table border="1" style="border-collapse: collapse;" bgcolor="white" cellpadding="8"

</tr>

B. Kode Program Laporan 2

<body bgcolor ="white">

<b>ini adalah halaman web pertamaku</b><br>

<td bgcolor="white" width="10%">KECAMATAN</td>

Anda mungkin juga menyukai