Resume Uts

RINGKASAN MATERI
PEMROGRAMAN BERBASIS WEB
DISUSUN OLEH:
DANIS IKA NOVITA KANARISWARI
G41150108
GOLONGAN A
SEMESTER IV
KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI

POLITEKNIK NEGERI JEMBER
JURUSAN KESEHATAN
PROGRAM STUDI REKAM MEDIK
2017
Praktikum :1
Judul Praktikum : Pengenalan HTML dan tag-tag HTML
Tanggal : 27 Februari 2017
A. Dasar Teori
HTML atau HyperText Markup Language adalah sebuah bahasa pemrograman
yang digunakan untuk membuat sebuah halaman website dan menampilkan
berbagai informasi yang terdapat dalam sebuah browser internet. HTML bermula
dari sebuah bahasa yang sebelumnya banyak digunakan pada dunia penerbitan
dan percetakan yang disebut dengan SGML atau Standard Generalized Markup
Language). HTML saat ini merupakan standar internet yang didefinisikan dan
dikendalikan oleh penggunanya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan browser web seperti
Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh
aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser. HTML mempunyai file perluasan (extention) htm atau html.
Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file
dokumen HTML dengan extention ".htm" atau ".html".
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam
dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau
lebih dikenal dengan TAG tertentu. Dalam penggunaannya sebagian besar kode
HTML tersebut harus terletak di antara tag kontainer. Elemen utama dari file
HTML dibuka dari tag <html> dan ditutp dengan </html> dilanjutkan dengan tag
<head></head> dan tag <body></body> di tag inilah semua isi web dituliskan.
B. Praktikum
1. Manambah Judul Halaman HTML
Halaman HTML yang baik harus memiliki judul agar user dapat mengenali
halaman yang di akses dengan mudah. Berikut ini cara menambahkan judul pada
halaman html:
Input
<html>
<head>
<title>Halaman Latihan 1</title>
</head>
<body>
<h1> Ini adalah latihan pemrograman web pertamaku </h1>
</body>
</html>
2. Menambah Heading
Cara menambah heading dengan menggunakan tag <h> yang terdiri dari
h1,h2,h3,h4,h5, dan h6. Contoh :
Input
<html>
<head>
<title> SELAMAT DATANG PRAK 1
</title>
</head>
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
</html>
Output
Input
<html>
<head>
<title>Daftar Obat</title>
</head>
<body>
<h1>Asam Mefenamat</h1>
<h2>Paracetamol</h2>
<h2>Metoprolol</h2>
<h3>Penicilin</h3>
<h3>Setraline</h3>
<h4>Ibuprofen</h4>
<h4>Trifalgin</h4>
<h5>Singuliar</h5>
<h5>Decolgen</h5>
<h6>Atenorol</h6>
</body>
</html>
Output
3. Mengatur Tampilan dengan Paragraf
Tag <p> digunakan untuk menampilkan tulisan dalam sebuah baris. Tag <br>
digunakan untuk membuat baris baru
Input
<html>
<head>
<title>Praktikum1b</title>
</head>
<body>
<p>
<img src="anonymous1.jpg" align+"left" width="120" height="133" >
</p>
<pre>
<h1><center> DATA PASIEN </h1><br></center>
<h2> No RM / Nama : 00011 / Danis Ika<br>
<h2> Alamat : Krajan RT 003 RW 004 Desa Andongsari Kec Ambulu<br>
<h2> Anamnase : Pusing dan Mual<br>
<h2> T. Tgl Lahir : Jember, 11 November 1997<br>
<h2> Tujuan Poli : Poli Interna<br>
</pre>
</body>
</html>
Output
Praktikum :2
Judul Praktikum : Menyisipkan Gambar dan Link
Tanggal : 06 Maret 2017
A. Dasar Teori
Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita harus
menyediakan terlebih dahulu file gambar yang dibutuhkan. File gambar ini biasanya
berekstensi GIF, JPG atau BMP. Bila file gambar itu telah tersedia, dan kita
mengetahui nama dan letak (lokasi) file gambar itu, barulah kita bisa
menyisipkannya ke dalam halaman web kita dengan menggunakan tag <IMG
SRC=file_gambar>. Gambar ini digunakan untuk mempercantik halaman website.
Hyperlink atau Link adalah sebuah kata, kalimat atau gambar yang dapat sobat klik
untuk melompat/berpindah dari satu halaman web ke halaman web lainnya. Tujuan
dari penggunaan Hyperlink atau Link adalah sebagai penyedia referensi sebuah titik
acuan untuk tujuan pengkodean yang pada umumnya ditulis dari HTML Hyperlink.
Link dapat ditemukan pada hampir semua halaman web. Link mengijinkan
penggunanya untuk mengklik link tersebut sebagai cara untuk melompat/berpindah
dari satu halaman web ke halaman web lainnya. Link pada HTML didefinisikan
dengan menggunakan Tag <a> yang dapat digunakan dengan 2 cara :
Membuat sebuah link pada halaman lain dengan menggunakan
atribut href.
Membuat sebuah bookmark di dalam sebuah halaman dengan
menggunakan atribut name.
B. Praktikum
1. Mengatur Font
Input
<html>
<i>Hello</i>
<u><b> SELAMAT DATANG LAB.KOM RMD </b></u><BR>
<fontface = "ARIAL" color = "F0F0FF" size = "16">
PARAMITA <font color = "FF0000"> RUSADI
</font>
</html>
Output
2. Menambahkan gambar
Input
<html>
<head>
<i>Selamat Datang di Politeknik Negeri Jember </i>
<BR>
<BR>
<b> <font face = "Arial" color = "red" size = "20"> Semangat Pagi </b>
</font>
<BR>
<BR>
<font face = "Arial" color = "Magenta" size = "16"> Pejuang S.ST
</font>
<BR>
<BR>
<IMG SRC="semangat.gif" BORDER=1>
</html>
Output
3. Menambahkan dua gambar
Input
<html>
<head>
<i><font face = "Comic Sans" color = "red" size = "20"> Semangat Pagi
</i> </font>
<BR>
<BR>
<u><font face = "Arial" color = "Magenta" size = "16"> Pejuang S.ST
</u></font>
<BR>
<BR>
<IMG SRC="sarjana.jpg" BORDER=1>
<IMG SRC="yuhuu.jpg" BORDER=3>
</html>
</head>
Output
4. Menambahkan link
Input
html>
<head>
<b> <A HREF = "annyeong.jpg"> <font face = "Comic Sans" color = "red"
size = "24"> Bonjour </b> </font>
<BR>
<BR>
<IMG SRC ="sarjana.jpg" BORDER = 1>
<BR>
<BR>
<BR>
<A HREF = "biodata.doc"> <font face = "Comic Sans" color = "Magenta"
size = "16"> BIODATA DIRI </font> <BR>
</html>
</head>
Output
5. Menambah dari Link menuju Link
Pada praktikum ini akan menampilakan hasil sebuah gambar dimana gambar
tersebut jika diklik maka akan menuju ke link pada nomer 4
Input
<html>
<TITLE> Klik PAda Gambar</TITLE>
<font color = "RED" size = "18">
<A HREF = "E:\Danis\PBW\06 Mar 2017\prak2d.html">
<IMG SRC = "E:\Danis\PBW\06 Mar 2017\klik.jpg"
BORDER = 0>
</A>
</html>
Output
Klik pada gambar
Praktikum :3
Judul Praktikum : Membuat Table dengan HTML
A. Dasar Teori
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Tabel dibuat menggunakan tag <table>. Sebuah tabel
dibagi menjadi baris-baris, dan tiap baris dibagi kedalam cell-cell. Baris dibuat
dengan tag <tr> dan cell-cell yang akan membentuk kolom dibuat dengan tag
<td>. Berikut ini adalah atribut dari tag <tr> dan <td> :
1. Width = pada tabel menunjukkan berapa persen lebar tabel dibanding layar
2. Border = angka yang menunjukkan tebal bingkai tabel
3. Cellpadding = angka yang menunjukkan skala besarnya kotak tabel
4. Cellspacing = angka yang menunjukkan jarak antar sel
5. Align = untuk menentukan posisi dari setiap isi sel, apakah ingin rata kanan
atau kiri, atau rata tengah.
6. Bgcolor = untuk menentukan warna latar dari sel.
B. Praktikum
1. Membuat Tabel
Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3a </title>
</head>
<body>
<h1>Praktikum buat Tabel</h1>
</body>
<table>
<tr>
<td>Row 1 cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</html>
Output
2. Contoh penggunaan Widht

Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3b </title>
</head>
<body>
</body>
<TABLE>
<TR> <TD WIDTH=200>Belajar</TD> <TD
WIDTH=400>HTML</TD> </TR>
<TR> <TD>Asik</TD> <TD>dan</TD> </TR>
<TR> <TD>di</TD> <TD>PHP</TD> </TR>
</TABLE>
</html>
Output
3. Menambah Border
Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3c </title>
</head>
<body>
</body>
<table border=5 cellpadding=1 cellspacing=0 width=60%>
<tr>
<td width=70%> Halo</td>
<td width=30%> Akprind</td>
</tr>
<tr>
<td width=70%> Apa</td>
<td width=30%> Kabar</td>
</tr>
</table>
</html>
Output
4. Contoh penggunaan cellpadding dan cellspacing
Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3d </title>
</head>
<body>
</body>
Tabel Pertama
<tr>
<td width=70%> Halo</td>
<td width=30%> Akprind</td>
</tr>
</table>
Tabel Kedua
<tr>
<td width=70%> Apa</td>
<td width=30%> Kabar</td>
</tr>
</table>
</html>
Output
5. Menambah Link didalam Tabel

Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3e </title>
</head>
<body>
</body>
<p align=center> Tabel Pertama</p>
<br>
<tr>
<td width=20%> <b>No</td>
<td width=40%> <b>Gambar</td>
<td width=40%> <b>Keterangan</td>
</tr>
<tr>
<td width=20%> 1</td>
<td width=40%> <IMG SRC="doraemon.gif"> </td>
<td width=40%> <A HREF="ket1.doc">Doraemon</A></td>
</tr>
<tr>
<td width=20%> 2</td>
<td width=40%> <IMG SRC="Spongebob.gif"> </td>
<td width=40%> <A HREF="ket2.doc">Spongebob</A></td>
</tr>
</html>
Output
6. Contoh penggunaan align

Input
<html>
<head>
<title> SELAMAT DATANG PRAK 3f </title>
</head>
<p align=center> TABEL RUMUS-RUMUS</p>

<HR>
<UL>
<LI>Rumus Air : H<SUB>2</SUB>O
<LI>Rumus Asam Sulfat : H<SUB>2</SUB>SO<SUB>4</SUB></LI>
<LI>Rumus Oksigen : O<SUB>2</SUB></LI>
<LI>Rumus Einstein : E = NC<SUP>2</SUP></LI>
</UL>
</html>
Output
C. Tugas
1. Buatlah dokumen HTML Untuk menampilkan tabel sebagai berikut ini :
Ketentuan : Judul tabel biru, judul kolom tebal, untuk angka pada nomor ditengah
kolom
Jawab:
<html>
<head>
<title>Tabel Daftar Mahasiswa</title>
</head>
<body>
<p align=center><font color=black>DAFTAR MAHASISWA</font></p>
<center><table border="1" width="270px">
<tr>
<th width="30px"><b>No</th>
<th width="40px"><b>NIM</th>
<th width="200px"><b>Nama</th>
</tr>
<tr>
<td><p align=center>1</p></td>
<td>G0011002</td>
<td>Renafisah Dwi Adelia</td>
</tr>
<tr>
<td><p align=center>2</p></td>
<td>G0011002</td>
<td>Aksanul Wildan</td>
</tr>
</table>
</body>
</html>
2. Buatlah dokumen HTML Untuk menampilkan tabel sebagai berikut ini :
Ketentuan : Judul tabel biru, judul kolom tebal, untuk angka pada nomor ditengah
kolom
Jawab :
<html>
<head>
<title>Tabel Daftar Mahasiswa</title>
</head>
<body bgcolor="#FF00FF">
<p align=center><font color=black>Tabel Daftar
Mahasiswa</font></p>
<center><table border="1" width="270px" bgcolor="white">
<tr>
<th width="30px" bgcolor="#FFFF00"><b>No</th>
<th width="40px" bgcolor="#FFFF00"><b>NIM</th>
<th width="200px" bgcolor="#FFFF00"><b>Nama</th>
</tr>
<tr>
<td bgcolor="#00FFFF"><p align=center>1</p></td>
<td bgcolor="#00FFFF">RMD11001</td>
<td bgcolor="#00FFFF">Renafisah Dwi Adelia</td>
</tr>
<tr>
<td bgcolor="blue"><p align=center>2</p></td>
<td bgcolor="red">RMD11002</td>
<td bgcolor="lightbue">Aksanul Wildan</td>
</tr>
</table>
</body>
</html>
Praktikum :4
Judul Praktikum : Membuat Form dengan HTML
A. Dasar Teori
Form merupakan salah satu elemen dalam HTML yang digunakan untuk
menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web
dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data
melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea,
submit button, dropdown dan lain-lain. Selain itu pengunjung juga dapat
melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain
combo box atau drop-down list. Form membuat sebuah halaman web menjadi
web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi
pengembang website untuk mendapatkan informasi dari pengguna, sedangkan
metode dari form didefinisikan setelah tag pembuka.
Tag <form> adalah tag yang digunakan untuk mendefinisikan sebuah form. Jadi,
sebuah form dibentuk oleh pasangan tag <form> .. </form>. Pada tag <form>
terdapat dua atribut yaitu atribut method dan action yang mempunyai fungsi
sebagai berikut:
Atribut Fungsi
Digunakan untuk menentukan cara mengirimkan data yang

dimasukkan user ke web server (metode pengolahan form).
Dimana terdapat dua metode yaitu GET dan POST. Metode
POST mengirimkan seluruh data dari form yang terpisah dari
URL. Sedangkan, metode GET mengirimkan data pada server
Method dengan meletakkannya pada bagian akhir URL.
Digunakan untuk menentukan lokasi atau URL dari file yang

Action akan digunakan untuk mengolah form tersebut.
B. Praktikum
1. Contoh penggunaan Password Field
Untuk memasukan datu baris teks dengan format chiphertext/password.Dengan
karakter yang disamarkan dengan bulatan atau tanda *.
Input
<body>
<b>login: <b> <BR>
<form method="post">
<table>
<tr><td>User:</td> <td><input type="text" name="user" size="20"></td></tr>
<tr><td>Password:</td> <td><input type="password" name="password"
size="20"></td></tr>
</table>
</form>
</body>
Output
2. Reset Button
Digunakan untuk membatalkan semua proses ata mereset proses pengisian data yang
dilakukan di elemen input form. Penulisannya : Reset<input type="reset">
Input
<body>
<b>Data Pengunjung: <b><br>
<form method ="post" action="data.html">
<table border="1">
<tr><td> Nama:</td> <td><input type="text" name="nama" size="20"></td></tr>
<tr><td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>
</table>
<table border="1">
<input type="submit" value="simpan" name="t1">
<input type="reset" value="reset" name="t2">
</form>
</table>
</body>
Output
3. Check Box
Digunakan untuk dapat memilih lebih dari satu pilihan. Penulisannya: Check
Box<input type="checkbox">
Input
Bacaan yang anda sukai: <br>
<input type="checkbox" name=="bacaan" value="novel"> Novel<br>
<input type="checkbox" name="bacaan" value="koran"> Koran<br>
<input type="checkbox" name="bacaan" value="majalah"> Majalah<br>
<input type="checkbox" name="bacaan" value="tabloid"> Tabloid<br>
</form>
Output
4. Radio Button
Radio button digunakan agar dapat memilih salah satu pilihan.Contoh jenis kelamin
(male or female).
Input
<form method="post>
Apakah anda setuju dengan kenaikan SPP: <br>
<input type="radio" name="opsi" value="ya"> Ya<br>
<input type="radio" name="opsi" value="tidak"> Tidak<br>
<input type="radio" name="opsi" value="ragu-ragu"> Ragu-Ragu<br>
Jenis Kelamin: <br>

<input type="radio" name="opsi" value="Perempuan"> Perempuan<br>
<input type="radio" name="opsi" value="Laki-Laki"> Laki-Laki<br>
</form>
Output
5. Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.
Penulisannya :
<select>
......
</select>
Input
Jurusan: <br>
<select name="jurusan">
<option value="TInf"> Teknik Informatika<br>
<option value="RMD"> D4 Rekam Medik<br>
<option value="GKL"> D4 Gizi Klinik<br>
</select>
</form>
Output
6. Text Area
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris.
Elemen ini mempunyai atribut yaitu name, cols, dan rows.
Input
<html>
<head>
<title> Pengguna Text Area</title>
</head>
<body>
<b>Komentar:<b><br>
<form method="post"> <textarea rows="10" cols="40" wrap="physical"
name="komentar">
</textarea><br>
</html>
Output
7. Gabungan beberapa Elemen

Input
<body>
<b>Login: <b> <br>
<from method="post">
<table>
<tr> <td>User:</td> <td><input type="user" size="20"></td></tr>
<tr> <td>Password:</td> <td><input type="password" name="password"
name="password" size="20"></td></tr>
</table>
</from>
</body>
<body>
<b>Data Pengunjung: <b> <br>
<from method=" action=login.html">
<table>
<tr> <td>Nama:</td> <td><input type="text" name="namaa" size="20"></td></tr>
<tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>
<table>
<input type="submit" value="simpan" name="t1">
<input type="reset" value="reset" name="t2">
</from>
</body>
<p>Bacaan yang Anda Sukai: <br>
<input type="checkbox" name="bacaan" value="novel"> Novel <br>
<input type="checkbox" name="bacaan" value="koran"> Koran <br>
<input type="checkbox" name="bacaan" value="majalah"> Majalah <br>
<input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>
</from>
<p>Apakah Anda Setuju Dengan Kenaikan SPP: <br>
<input type="radio" name="opsi" value="iya"> Ya <br>
<input type="radio" name="opsi" value="tidak"> Tidak <br>
<input type="radio" name="opsi" value="ragu"> Ragu-Ragu <br>
</from>
<p>Jurusan: <br>
<select name="Jurusan">
<option value="RMD"> Rekam Medik <br>
<option value="GKL"> Gizi Klinik <br>
<option value="TI"> Teknik Industri <br>
</select>
</from>
<html>
<head>
<title> Penggunaan Text Area </title>
</head>
<body>
<b><p>Komentar: <b> <br>
<from method="post"> <textarea rows="10" cols="40" wrap="physical"
name="komentar">
</textarea><br>
</html>
Output
Praktikum :5
Judul Praktikum : Pengenalan CSS
A. Dasar Teori
CSS (Cascading Style Sheet) merupakan suatu bahasa program web yang
digunakan untuk mengendalikan dan membangun berbagai komponen dalamn
web yang digunakan untuk mengendalikan dan membangun berbagai komponen
dalam web sehingga tampilan web akan lebihrapi, terstruktur dan seragam. CSS
merupakan pemrograman wajib yang harus dikuasi oleh setiap pembuat program
(Web Programmer), terlebih lagi itu adalah pendesain web (web designer). CSS
saat ini dikembangkan oleh World Wide Web Consortium (W3C) dan menjadi
bahasa standar dalam pembuatan web. CSS difungsikan sebagai penopang atau
pendukung, dan pelengkap dari file html yang berperan dalam penataan kerangka
dan layout. CSS mampu di berbagai platform, maksudnya dapat dijalankan pada
berbagai macam sistem operasi dan web browser. Secara umum, yang dilakukan
oleh CSS adalah pengaturan layout, kerangka, teks, gambar, warna, tabel, spasi,
dan lain sebagainya. Kita akan mengetahui masing-masing pengaturan tersebut
pada pembahasan selanjutnya.
Keuntungan Penggunaan CSS, Jika anda memiliki beberapa halaman website
dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan
dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu
halaman webside anda dan merubah tipe font arial menjadi trebuchet. Dengan
menggunakan CSS, dimana semua halaman web memakai CSS yang sama, anda
cukup merubah satu baris kode CSS untuk merubah font di semua halaman web
dari arial ke trebuchet.
Syntax? Rumus dari CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
1 property, 1 value.
Format penulisan kalimat CSS :
Selector { property: value }
Selector itu untuk menunjukan bagaimana yang hendak diatur / diformat.

Propery untuk menunjukan, bagian (properti) dari selector yang hendak
diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color : red }
Contoh diatas menunjukan:

Selector: h1
Property: color
Value: red
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS-nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 { color:red; font-family:arial; font-size:150%; }
Pada contoh diatas, tag h1, h2, dan h3 di atur agar menggunakan warna merah,
dengan type font arial, dan ukuran font 150%.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda
untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan
komentar. Segala teks yang berada diantara tag /* dan */ tidak akan dibaca
sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
P
{
text-align: justify;
/* Tulis komentar anda disini */
color: blue;
font-family: arial;
}
B. Praktikum
Membuat CSS sederhana
Input
<html>
<head>
<title>Membuat css sederhana</title>
<style type="text/css">
body {
background-color:#33CC00;
color:#0000CC;}
h1 {
color:#000066;}
p{
border:1px solid #ccc;
background-color:#FF0000;
padding:5px; }
</style>
</head>
<body
<h1>Selamat datang di Website saya</h1>
<p><marquee> Saya sedang belajar membuat css
sederhana</marquee></p><p><marquee> Ternyata membuat css sederhana itu
sangat mudah</marquee></p>
</body>
</html>
Output
C. Tugas
Buatlah sebuah halaman website yang menceritakan tentang hobi kalian. Buatlah sebuah
cerita pendek yang menjelaskan hobi kalian mulai dari alasan kalian menyukai hobi
tersebut dan apa saja yang harus kalian siapkan dalam melakukan hobi tersebut. Gunakan
heading 1 untuk judul cerita dan gunakan elemen lain seperti <p>, <em>, <li>, <a> dsb
yang sebelumnya diatur terlebih dahulu dengan CSS.
Jawab :
Input
<html>
<head>
<title>Hobi</title>
<style type="text/css">
body {
background-color:lightblue;
color:#FFE4C4;}
h2 { color:#FF0000;}
h1 { color: hotpink;}
p{
border:1px solid #ccc;
background-color:#E9967A;
padding:5px; }
</style>
</head>
<body>
<h2><center>Menceritakan tentang hobi saya</center></h2>
<p><marquee> Hobi saya adalah mendengarkan musik. Saya sangat senang
mendengarkan musik di manapun dan kapanpun.
<br> karena mendengarkan musik adalah hal yang paling menyenangkan untuk
dilakukan.
<br> Saya merasa tenang, nyaman, dan damai bila saat mendengar musik.
<br> Logikanya apa yang kita dengarkan, secara tak langsung dapat
mempengaruhi diri kita </marquee></p>
<ul>
<li><h3>Nonton Drama Korea juga merupakan salah satu hobi saya.</h3></li>
<h1>Kegiatan saya lakukan semata-mata untuk menghibur diri dan
menghilangkan rasa Stress</h1>
<h1>Karena di program studi D-IV REKAM MEDIK tugasnya yaa lumayan lah
ya. lumayan banyak maksutnya</h1>
</ul>
</body>
</html>
Output
Praktikum :6
Judul Praktikum : Membuat Form
Tanggal : 03 April 2017
A. Dasar Teori
Form adalah salah satu tag HTML yang dipakai untuk penempatan inputan yang
akan diisikan oleh user untuk dieksekusi selanjutnya. HTML Form sering digunakan
untuk meminta inputan dari user yang kemudian diproses oleh server side scripting
seperti PHP, JSP, dan sebagainya. Form HTML diapit oleh tag <form> </form>.
Form dalam sebuah HTML juga demikian, terdiri dari bentuk jawaban yang berbeda-
beda, atau biasa disebut dengan elemen. Elemen-elemen form dalam HTML
misalnya berupa button, checkbox, option, select, text, dan textarea. Dua attribut
yang paling sering digunakan dalam penggunaan form adalah :
Action : Nilai dari attribut ini menunjukkan lokasi dari file pemrosesan dari
form inputan. Dapat berupa relatif URI, contoh folderX/file1.php atau absolut
URI, contohhttp://contoh.com/file1.php.
Method : Nilai dari attribut yang menentukan metode data yang dikirimkan ke
file pemroses, apakah melalui metode GET atau POST. <form
action=file1.php method=POST>
...
</form>
B. Praktikum
1. Form Data Pengunjung
Input
<html>
<head>
<title> Membuat From</title>
</head>
<body bgcolor=black>
<b><center><font face=Arial Rounded MT Bold color=gray size=30> SISTEM
INFORMASI MANAJEMEN RESTORAN </font></center></b> <br>
<b><center><font face=Arial Rounded MT Bold color=gray size=30> Data
Pengunjung: </font></center></b> <br>
<form method="post" action="data.html">

<center><table bgcolor=grey border=1 cellpadding=20 cellspacing=20 width=40%>
<tr bgcolor=pink> <td>ID : </td> <td><input type="text" name="nama"
size="50"></td> </tr>
<tr bgcolor=pink> <td>NAMA : </td> <td><input type="text" name="alamat"
size="50"> </td> </tr>
<tr bgcolor=pink> <td colspan=2><div align="center"><input type="submit"
value="Simpan" name="t1"> <input type="reset" value="Reset" name="t2"></td>
</tr>
</table></center>
</form>
</body>
</html>
Output
2. Form Data Admin

Input
<html>
<head>
</head>
<body bgcolor=Lightcoral>
b><center><font face=Arial Rounded MT Bold color=Sienna size=30> SISTEM
<b><center><font face=Arial Rounded MT Bold color=Sienna size=30> Data
Admin: </font></center></b> <br>

<center><table bgcolor=Peachpuff border=1 cellpadding=20 cellspacing=20
width=40%>
<tr bgcolor=Sandybrown> <td>ID_Admin : </td> <td><input type="text"
name="nama" size="50"></td> </tr>
<tr bgcolor=Sandybrown> <td>NAMA : </td> <td><input type="text"
name="alamat" size="50"> </td> </tr>
<tr bgcolor=Sandybrown> <td>Alamat : </td> <td><input type="text"
<tr bgcolor=Sandybrown> <td colspan=2><div align="center"><input type="submit"
</tr>
</table></center>
</form>
</body>
</html>
Output
3. Form Data Suplier
Input
<html>
<head>
</head>
<body bgcolor=hotpink>
b><center><font face=Arial Rounded MT Bold color=blue size=30> SISTEM
<b><center><font face=Arial Rounded MT Bold color=blue size=30> Data Suplier:
</font></center></b> <br>

<center><table bgcolor=goldenrod border=1 cellpadding=20 cellspacing=20
width=40%>
<tr bgcolor=indianred> <td>ID : </td> <td><input type="text" name="id"
size="50"></td> </tr>
<tr bgcolor=indianred> <td>NAMA : </td> <td><input type="text" name="nama"
size="50"> </td> </tr>
<tr bgcolor=indianred> <td>ALAMAT : </td> <td><input type="text"
<tr bgcolor=indianred> <td>NO_TELP : </td> <td><input type="text"
name="no_telp" size="50"> </td> </tr>
<tr bgcolor=indianred> <td colspan=2><div align="center"><input type="submit"
</tr>
</table></center>
</form>
</body>
</html>
Output
4. Form Data Kasir
Input
<html>
<head>
</head>
<body bgcolor=Lightskyblue>
b><center><font face=Arial Rounded MT Bold color=Darkred size=30> SISTEM
<b><center><font face=Arial Rounded MT Bold color=Darkred size=30> Data
Kasir: </font></center></b> <br>

<center><table bgcolor= Darkorchid border=1 cellpadding=20 cellspacing=20
width=40%>
<tr bgcolor=pink> <td>ID Kasir : </td> <td><input type="text"
name="ID Kasir" size="40"></td> </tr>
<tr bgcolor=pink> <td>Nama Kasir : </td> <td><input type="text"
name="Nama Kasir" size="40"> </td> </tr>
<tr bgcolor=pink> <td>Alamat Kasir : </td> <td><input type="text"
name="Alamat Kasir" size="40"> </td> </tr>
</tr>
</table></center>
</form>
</body>
</html>
Output
5. Login Admin
Input
<html>
<head>
</head>
<body bgcolor=Lightcoral>
<b><center><font face=Arial Rounded MT Bold color=Sienna size=30> SISTEM
<b><center><font face=Arial Rounded MT Bold color=Sienna size=30> Data
Admin: </font></center></b> <br>

<center><table bgcolor=Peachpuff border=1 cellpadding=20 cellspacing=20
width=40%>
<tr bgcolor=Sandybrown> <td>ID_Admin : </td> <td><input type="text"
name="nama" size="50"></td> </tr>
<tr bgcolor=Sandybrown> <td>Password : </td> <td><input type="text"
name="password" size="50"> </td></tr>
<tr bgcolor=Sandybrown> <td colspan=2><div align="center"><input type="submit"
value="Login" name="t1"> <input type="reset" value="Exit" name="t2"></td> </tr>
</table></center>
</form>
</body>
</html>
Output
6. Login Kasir
Input
<html>
<head>
</head>
<body bgcolor=Lightskyblue>
<b><center><font face=Arial Rounded MT Bold color=Darkred size=30> SISTEM
<b><center><font face=Arial Rounded MT Bold color=Darkred size=30> Data
Kasir: </font></center></b> <br>

<center><table bgcolor= Darkorchid border=1 cellpadding=20 cellspacing=20
width=40%>
<tr bgcolor=pink> <td>ID Kasir : </td> <td><input type="text"
name="ID Kasir" size="40"></td> </tr>
<tr bgcolor=pink> <td>Password : </td> <td><input type="text"
name="Password" size="40"> </td> </tr>
value="Login" name="t1"> <input type="reset" value="Exit" name="t2"></td> </tr>
</table></center>
</form>
</body>
</html>
Output

Resume Uts

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

Resume Uts

Diunggah oleh

Hak Cipta:

Format Tersedia

RINGKASAN MATERI

PEMROGRAMAN BERBASIS WEB

KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI

2. Contoh penggunaan Widht

5. Menambah Link didalam Tabel

6. Contoh penggunaan align

<p align=center> TABEL RUMUS-RUMUS</p>

Digunakan untuk menentukan cara mengirimkan data yang

Digunakan untuk menentukan lokasi atau URL dari file yang

Jenis Kelamin: <br>

7. Gabungan beberapa Elemen

Selector itu untuk menunjukan bagaimana yang hendak diatur / diformat.

Contoh diatas menunjukan:

<form method="post" action="data.html">

2. Form Data Admin

<form method="post" action="data.html">

<form method="post" action="data.html">

<form method="post" action="data.html">

<form method="post" action="data.html">

<form method="post" action="data.html">

Anda mungkin juga menyukai