Anda di halaman 1dari 34

TUGAS 3

PEMROGRAMAN BERBASIS WEB

DOSEN PENGAMPU:
Dr.Resmi Darni,M.Kom

OLEH:
Hana Sarlia Daulay
20076006

PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA


JURUSAN TEKNIK ELEKTRONIKA
FAKULTAS TEKNIK
UNIVERSITAS NEGERI PADANG
2021
1. Gunakan coding/script latihan pada jobsheet ini untuk membuat halaman web biodata pribadi
anda.
1) Biodata.html
a. Source Code
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Biodata</title>
</head>

<body>
<table border="0" , align="center", bgcolor="white",
style="width: 50%;">
<tr>
<th colspan="2">
<h1 align="center">BIODATA</h1>
</th>
</tr>
<tr>
<td colspan="2">
<h2 align="center">HANA SARLIA DAULAY</h2>
<hr size="5px" , color="red">
</td>
</tr>
<tr>
<td colspan="2", align="center">
<img src="hana foto.png" alt="Pasphoto">
</td>
</tr>
<tr>
<td colspan="2">
<p>
<strong>Halooo...</strong>
<br>Perkenalkan, saya Hana Sarlia
Daulay, NIM 20076006
<br>dari jurusan Teknik Elektronika,
<br>program studi Pendidikan Teknik
Infomatika dan Komputer
<br>
<br>Ini adalah web tugas matakuliah
pemrograman berbasis web
</p>
<hr size="5px" , color="red">
</td>
</tr>
<tr>
<td colspan="2"><strong>BIODATA</strong></td>
</tr>
<tr>
<td>Nama</td>
<td>Hana Sarlia Daulay</td>
</tr>
<tr>
<td>NIM</td>
<td>20076006</td>
</tr>
<tr>
<td>Fakultas</td>
<td>Teknik</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Teknik Elektronika</td>
</tr>
<tr>
<td>Program Studi</td>
<td>Pendidikan Teknik Informatika</td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>Padangsidimpuan</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>5 Maret 2002</td>
</tr>
<tr>
<td>Alamat</td>
<td>Jl.Cendrawasih gg pari no 55</td>
</tr>
<tr>
<td colspan="2"><hr size="5px" ,
color="red"></td>
</tr>
</table>
</body>

</html>
b. ScreenShoot Program
c. ScreenShoot Ouput

2) index.html
a. Source Code
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Tugas2-Pemrogram Web-Hana Sarlia Daulay-
20076006</title>
</head>
<body>
<table border="0" , align="center" , bgcolor="white"
, style="width: 50%;">
<tr>
<td colspan="2">
<h1 style="font-family: 'Courier New',
Courier, monospace;">HOME</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h2>Tugas 2 Pemrograman Berbasis
Web</h2>
<hr size="5px" , color="red">
</td>
</tr>
<tr>
<td colspan="2"><a href="tugas2-
biodata.html">
<h2>BIODATA</h2>
</a>
<hr color="red">
</td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-1.html">
<h2>latihan2-1</h2>
</a>
<hr color="red">
</td>
</tr>
<tr>
<td colspan="2"><a href="latihan2-2.html">
<h2>latihan2-2</h2>
<hr color="red">
</a></td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-3.html">
<h2>latihan2-3</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-4.html">
<h2>latihan2-4</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-5.html">
<h2>latihan2-5</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-6.html">
<h2>latihan2-6</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2">
<a href="latihan2-7.html">
<h2>latihan2-7</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2"><a href="latihan2-8.html">
<h2>latihan2-8</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<td colspan="2"><a href="latihan2-9.html">
<h2>latihan2-9</h2>
<hr color="red">
</a>
</td>
</tr>
<tr>
<th rowspan="3"><img src="hana foto.png"
alt="pasphoto"></th>
<td>HANA SARLIA DAULAY</td>
<tr>
<td>20076006</td>
</tr>
</tr>
</body>

</html>
b. ScreenShoot Program
c. ScreenShoot Ouput
2. Buatlah kesimpulan dari praktikum anda dengan menjelaskan fungsi dan hasil dari
masingmasing latihan pada jobsheet ini.
1) Link biasa, link gambar, link ke window baru, dan link internal (Simpan dengan nama
file: latihan2-1.html)
a. Source Code
<html>
<body>
<p>
<a href="halaman.htm">
Teks ini</a> adalah sebuah link ke suatu halaman
dalam situs Web.
</p>
<p>
<a href="http://www.google.com">
Teks ini</a> adalah sebuah link ke halaman awal
Situs google di World Wide Web.
</p>
<p>
<a href="#C4">
Melompat ke bagian lain dalam halaman ini.
</a>
</p>
<p>
Anda dapat juga menggunakan gambar sebagai sebuah link:
<a href="linkgambar.htm">
<img border="0" src="tombol.gif" width="65" height="38">
</a>
</p>
<a href="baru.htm" target="_blank">halaman Berikutnya</a>
<p>
Bila Anda memberikan atribut target sebuah link menjadi
"_blank",
Link tersebut akan membuka sebuah window browser baru.
</p>
<p>
<p> Ada tulisan disini (lakukan copy dan paste baris ini
untuk baris berikutnya) </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<a name="C4"><h2> Disinilah tujuan lompatan link internal
anda </h2></a>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
</body>
</html>

b. ScreenShoot Program
c. ScreenShoot Ouput
d. Penjelasan Program
 <p> , </p> : Mendefinisikan sebuah paragraph
 <a> : Mendefinisikan sebuah anchor
 <a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a> :
Mendefinisikan heading rata tengah
 target="_blank" Memuat dokumen baru ke dalam window baru yang
kosong

2) Link ke e-mail (Simpan dengan nama file: latihan2-2.html)


a. Source Code
<html>
<body>
<p>
Ini adalah link ke e-mail:
<a href="mailto:saya@gmail.com?Subject=Halo%20lagi">
Kirim e-mail</a>
</p>
<p>
<b>Catatan:</b> Spasi di antara setiap kata sebaiknya
digantikan dengan tanda %20 untuk <b>memastikan</b>
bahwa browser akan menampilkan teks Anda dengan benar.
</p>
<p>
Ini juga contoh link ke e-mail:
<a
href="mailto:anda@gmail.com?
cc=dia@gmail.com&bcc=kamu@gmail.com&subject=Summer
%20Party&body
=Apakah%20Anda%20mau%20diundang%20ke%20pesta%20malam
%20minggu?">Kirim e-mail!</a>
</p>
</body>
</html>

b. ScreenShoot Program
c. ScreenShoot Ouput

d. Penjelasan Program
 <p> , </p> : Mendefinisikan sebuah paragraph
 <a> : Mendefinisikan sebuah anchor

3) Frameset (horisontal dan vertikal) (Simpan dengan nama file: latihan2-3.html)


a. Source Code

html>

<frameset rows="50%,50%">

<frame src="frame1.htm">

<frameset cols="25%,75%">

<frame src="frame2.htm">

<frame src="frame3.htm">

</frameset>

</frameset>

</html>

b. ScreenShoot Program

c. ScreenShoot Ouput
d. Penjelasan Program
 <frameset> Mendefinisikan sebuah himpunan frame
 <frame> Mendefinisikan sebuah sub window (sebuah frame)

4) Frameset dengan atribut no-resize = “true” (Simpan dengan nama file: latihan2-
4.html)
a. Source Code
<html>
<frameset rows="50%,50%">
<frame noresize="true" src="frame1.htm">
<frameset cols="25%,75%">
<frame noresize="true" src="frame2.htm">
<frame noresize="true" src="frame3.htm">
</frameset>
</frameset>
</html>
b. ScreenShoot Program
c. ScreenShoot Ouput

d. Penjelasan Program
 <frameset> Mendefinisikan sebuah himpunan frame
 <frame> Mendefinisikan sebuah sub window (sebuah frame)

5) Frame inline (Simpan dengan nama file: latihan2-5.html)


a. Source Code
<html>
<body>
<iframe src ="default.htm">
</iframe>
<p>Beberapa browser lama tidak mendukung iframe.</p>
<p>Bila browser yang Anda pakai sekarang tidak
mendukung, iframe tak akan terlihat.</p>
</body>
</html>
b. ScreenShoot Program

c. ScreenShoot Ouput
d. Penjelasan Program

 <iframe> : Mendefinisikan sebuah inline sub window (frame)


 <p> , </p>: Mendefinisikan sebuah paragraph

6) Membuat tabel (Simpan dengan nama file: latihan2-6.html)


a. Source Code
<html>
<body>
<p>
Setiap tabel dimulai dengan tag table.
Setiap baris tabel dimulai dengan tag tr.
Setiap data dalam tabel dimulai dengan tag td.
</p>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom dengan border tebal:</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat
tebal:</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
b. ScreenShoot Program
c. ScreenShoot Ouput

d. Penjelasan Program

 <p> , </p> Mendefinisikan sebuah paragraph


 <table> Mendefinisikan sebuah tabel
 <tr> Mendefinisikan suatu barisan dalam tabel
 <td> Mendefinisikan suatu sel dalam table
 <h4> </h4> Mendefinisikan heading rata tengah

7) Sel kosong dalam tabel (Simpan dengan nama file: latihan2-7.html)


a. Source Code
<html>
<body>
<table border="1">
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
<tr>
<td></td>
<td>Teks</td>
</tr>
</table>
<p>
Seperti yang Anda lihat, salah satu sel tidak memiliki
border. Itu terjadi karena sel tersebut kosong. Cobalah
untuk menyisipkan sebuah spasi ke dalam sel tersebut.
Ternyata tetap saja tidak memiliki border.
</p>
<p>
Cara yang benar adalah dengan menyisipkan spasi non-
breaking di dalam sel.
</p>
<p>Spasi non-breaking adalah sebuah entitas karakter.
Bila Anda tidak mengetahui apa yang disebut karakter
entitas, baca kembali materi kuliah tentang hal
tersebut.
</p>
<p>Entitas spasi non-breaking dimulai dengan tanda
ampersand ("&"),
kemudian karakter-karakter "nbsp", dan diakhiri dengan
semicolon (";")
</p>
<p>
</p>
</body>
</html>
b. ScreenShoot Program
c. ScreenShoot Ouput

d. Penjelasan Program

 <p> , </p> Mendefinisikan sebuah paragraph


 <table> Mendefinisikan sebuah tabel
 <tr> Mendefinisikan suatu barisan dalam tabel
 <td> Mendefinisikan suatu sel dalam table
8) Sel tabel yang diperlebar (Simpan dengan nama file: latihan2-8.html)
a. Source Code
<html>
<body>
<h4>Sel yang melebar dua kolom:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel yang melebar dua baris:</h4>
<table border="1">
<tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
b. ScreenShoot Program

c. ScreenShoot Ouput

d. Penjelasan Program

 <p> , </p> Mendefinisikan sebuah paragraph


 <table> Mendefinisikan sebuah tabel
 <tr> Mendefinisikan suatu barisan dalam tabel
 <td> Mendefinisikan suatu sel dalam table
 <h4> </h4> Mendefinisikan heading rata tengah
 <th> Mendefinisikan sebuah header tabel

9) Menambahkan latar belakang ke tabel (Simpan dengan nama file: latihan2-


9.html)
a. Source Code
<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border="1" background="../bg.jpg">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Latar belakang pada sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background="../bg.jpg">
Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>
b. ScreenShoot Program
c. ScreenShoot Ouput

d. Penjelasan Program

 <p> , </p> Mendefinisikan sebuah paragraph


 <table> Mendefinisikan sebuah tabel
 <tr> Mendefinisikan suatu barisan dalam tabel
 <td> Mendefinisikan suatu sel dalam table
 <h4> </h4> Mendefinisikan heading rata tengah
 <th> Mendefinisikan sebuah header tabel

Anda mungkin juga menyukai