g41150033 Retno Yohaendria A

RINGKASAN MATERI
PEMROGRAMAN BERBASIS WEB
DISUSUN OLEH:
RETNO YOHAENDRIA ADITYANINGSIH
G41150033
GOLONGAN A
SEMESTER IV
KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI

POLITEKNIK NEGERI JEMBER
JURUSAN KESEHATAN
PROGRAM STUDI REKAM MEDIK
2017
Praktikum 1
Pengenalan HTML dan Tag HTML
1.1 Pengenalan HTML

A. Dasar Teori
 HTML (HyperText Markup Language)
HTML merupakan kepanjangan dari HyperText Markup Language bahasa ini
digunakan untuk membuat hypertext page (halaman hypertext) pada Internet.
Pada dokumen kita tidak harus membaca teks secara berurutan baris per baris
atau halaman per halaman, tetapi kita dapat melompat dari satu topik lain yang
kita inginkan.
Yang membedakan dokumen HTML dengan dokumen pada umumnya, adalah

adalanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML
menentukan bagian dan format pada suatu bagian pada struktur dokumen
65HTML.
HTML merupakan bahasa pemrograman yang fleksibel dimana kita dapat

menempatkan script dari bahasa program lain seperti Java, Visual Basic, C++
dan lain-lain. Karena HTML berupa text dokumen biasa (ASCII) maka HTML
dapat dibaca oleh platform yang berlainan seperti Windows, Unix dan lain-
lainnya.
 Struktur Dokumen HTML

Pada dokumen HTML terdapat 3 tag utama yang membentuk struktur HTML
tersebut, yaitu tag:
 <HTML> —- Sebagai tanda awal dokumen HTML.
 <HEAD> —– Sebagai informasi page header. Didalam tag ini kita bisa
meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE
& META.
 <BODY>—— Didalam tag ini bisa diletakkan berbagai page attribute
seperti warna latar belakang, warna teks, warna link, warna visited
link, warna active link dan lain-lain.
Struktur Dokumen HTML terlihat seperti conto dokumen HTML dibawah

ini :
<HTML>
<HEAD>
<TITLE> Pengelan HTML </TITLE>
</HEAD>
<BODY>
<b> Belajar HTML emang paling mengasikan lohhhhhhhhh </b>
</BODY>
</HTML>
B. Soal
Tulis scrip berikut ini
<html>
<head>
<title>Halaman Latihan 1</title>
</head>
<body>
<h1>Ini adalah latihan pemrograman web pertamaku.</h1>
</body>
</html>
C. Jawab
 Input
 Output
1.2 Menambahkan Heading
A. Dasar Teori
 Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang
disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah
halaman web. TAG Heading secara default ditampilkan oleh browser dengan
ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar
untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading
juga sangat penting dalam kaitannya dengan teknik Search Engine
Optimization (SEO).
TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat

penting dan ukurannya. TAG Heading tersebut adalah <h1>, <h2>, <h3>,
<h4>, <h5> dan <h6>. TAG H1 memiliki ukuran paling besar, sedangkan
TAG h6 memiliki ukuran paling kecil.
Perlu diperhatikan bahwa walaupun TAG Heading ini memiliki ukuran yang
bervariasi dan lebih tebal serta besar dari tag biasa, namun jangan gunakan
TAG Heading ini hanya untuk membuat tulisan yang lebih besar. Gunakanlah
TAG Heading hanya untuk membuat judul dan subjudul, bukan untuk
membuat tulisan berukuran besar. Karena pada dasarnya untuk membuat
tulisan besar kita bisa menggunakan CSS.
Biasanya H1 hanya digunakan satu kali dalam sebuah halaman web, yaitu
sebagai judul utama (judul besar). H2, H3 dan seterusnya bisa kita gunakan
beberapa kali sebagai sub judul.
B. Soal
1. Buatlah tampilan seperti dibawah ini
2. Buat Tampilan Data masing2 mhs
DATA PASIEN
No RM/Nama : 00001/Luna Maya
Alamat : Jalan Surabaya no 2 Jakarta
Anamnese : Pusing dan Mual
T.Tgl Lahir : Denpasar, 24 Februari 1992
Tujuan Poli : Poli Interna
3. Buat Tampilan Web

Tampilkan 10 Nama Obat yang anda Ketahui dengan Font dari Besar ke
kecil...
C. Jawab
1.
 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
2.
 Input
<html>
<head>
<title> DATA PASIEN </title>
-</head>
<body>
<h1> <center> DATA PASIEN </center> </h1>
<h3>No RM/Nama : 00001/Retno Yohaendria</h3>
<h3>Alamat : Bades Pasirian Lumajang</h3>
<h3>Anamnese : Pusing dan Mual</h3>
<h3>T.Tgl Lahir : Lumajang, 17 Juni 1996</h3>
<h3>Tujuan Poli : Poli Interna</h3>
-</body>
</html>
 Output
3.
 Input
<html>
<head>
<title> DAFTAR OBAT </title>
</head>
<body>
<h1> <center> NAMA OBAT </center> </h1>
<h1>Amoxicilin</h1>
<h2>Procold</h2>
<h3>Demacolin</h3>
<h4>Ampicilin</h4>
<h5>Rifampicin</h5>
<h6>Decolgin</h6>
<h6>Paracetamol</h6>
<h6>Dexketoprofen</h6>
<h6>Baclofen</h6>
<h6>Chlorpheniramine</h6>
</body>
 Output
Praktikum 2
Menyisipkan Gambar dan Link
A. Dasar Teori
 Link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks
(hypertext) ke dokumen yang lain atau sumber lain. Seperti halnya suatu
kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan
sesuai dengan protokol akses, sebuah komputer dapat diminta untuk
memperoleh sumber yang direferensikan.
 Tujuan dibuatnya link adalah sebagai jalan pintas atau shortcut menuju
halaman atau website lain. Link dapat berupa tulisan ataupun gambar. Cara
mengenali link :
 Pointer akan berubah menjadi sebuah tangan apabila diarahkan ke link,
baik link berupa tulisan ataupun gambar.
 Link berupa tulisan biasanya diberi warna yang terang dan berbeda
dengan tulisan lainnya ataupun diberi garis bawah. Contoh : 4Shared
 Ada beberapa macam-macam link, antara lain :

 Interlink
Interlink (Internal Link) adalah tautan antar artikel dalam suatu website
atau blog, baik artikel baru ataupun lama. Tujuannya agar
mempermudah pengunjung dalam pencarian artikel.
 External Link
External link adalah tautan yang menghubungkan sebuah website atau
blog ke website atau blog lainnya. Selain untuk mempermudah
pencarian, external link bagi blogger (pemilik blog) juga berfungsi agar
blog mereka sering dikunjungi sehingga menghasilkan PR (PageRank)
yang tinggi.
 Broken Link
Broken link adalah sebuah tautan yang menghubungkan suatu website
ke website atau URL yang tidak tersedia seperti halaman “Not Found”
atau error URL lainnya.
 Dalam link juga dikenal istilah Link Exchange atau bertukar link. Link
Exchange banyak digunakan oleh blogger untuk saling bertukar link dengan
tujuan meningkatkan angka berkunjung ke website mereka. Link Exchange
dapat dilakukan dengan cara meninggalakan komentar pada blog atau website
lain atau meninggalkan alamat URL pemilik blog dalam komentar pemilik
blog lain.
 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.
B. Soal
1. Buatlah HTML sebanyak-banyaknya dengan memberi warna font, memberi
gambar, menambahkan link,
C. Jawab
 Input
<html>
<head>
<title> Font Color </title>
</head>
<body>
<b><font color=red> SELAMAT DATANG
<u><font color=blue> DI POLITEKNIK NEGERI JEMBER </b></u>
<BR>
<font color=yellow > <i> JURUSAN KESEHATAN </i> </font><br>
<font color=brown> GOOD LUCK ! </font><br>
<BR>
</body>
</html>
 Output
 Input
<html>
<head>
<title> Font Face </title>
</head>
<body>
<u><b><font face =Aharoni> WELCOME</b></u>
<font face =Algerian> <i> LAB RMD JURUSAN KESEHATAN </i>
</font><br>
<font face =Comic san Ms> GOOD LUCK ! </font><br>
<BR>
</body>
</html>
 Output
 Input
<html>
<head>
<title> Font Size </title>
</head>
<body>
<h1>Hello!!!</h1>
<h2>Saya Retno Yohaendria</h2>
<h3>Prodi Rekam Medik</h3>
<h4>Jurusan Kesehatan</h4>
</body>
 Output
 Input
<HTML>
<i> Hello </i>
<u><b> SELAMAT DATANG LAB KOM RMD </b></i>
<BR>
<font face=ARIAL color="FF00FF" size=16> RETNO <font
color="FFFF00"> YOHAENDRIA </font>
</HTML>
 Output
 Input
<HTML>
<i> Hello </i>
<u><b> SELAMAT DATANG LAB KOM RMD </b></i>
<BR>
<font face=ARIAL color="FF00FF" size=16> RETNO <font
color="FFFF00"> YOHAENDRIA </font>
<BR>
<IMG SRC= "gambar1.JPG" BORDER=1>
</HTML>
 Output
 Input
<HTML>
<font fase=ARIAL color=blue size=15> HELLO </font>
<BR>
<b> <font fase=ARIAL color=black size=18> SELAMAT DATANG </b>
<BR>
<b> <font fase=Arial Rounded MT Bold color=red size=18>DI
POLITEKNIK NEGERI JEMBER</b>
<i> <A HREF= "logo.html"> <font fase=ARIAL color=read size=5>
Klik Disini</i> </A>
</HTML>
 Output
 Input
<HTML>
<i> <font fase=Broadway color=purple size=8> Hel <font=Broadway
color=red size=8> lo </i> </font>
<b> <font fase=ARIAL color=green size=10> SELAMAT <font=ARIAL
color=yellow size=10> BELAJAR PEMROGRAMAN BERBASIS WEB
</b> </font>
<BR>
<u> <font fase=ARIAL color=pink size=10> GAMBAR PEMANDANGAN
</u> </font>
<BR>
<IMG SRC="pemandangan.jpg" BORDER=1>
<BR>
<A HREF="http://andriyhany.blogspot.co.id/2012/09/pengertian-rekam-
medik.html"> <font fase=ARIAL color=black size=10> REKAM MEDIK
</A>
</HTML>
 Output
 Input
<HTML>
<A HREF= "Prak 4b.html"> <IMG SRC= "rekam-medis.jpg" BORDER=1>
</A>
</HTML>
 Output
Praktikum 3
Membuat Table dengan HTML
A. Dasar Teori
Tabel merupakan salah satu elemen utama dalam mendesain web. 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.
Berikut ini adalah atribut dari tag <tr> dan <td> :
 Align
Atribut ini berguna seperti layaknya atribut align pada tag <TR..> yang
digunakan untuk menentukan posisi dari setiap isi sel, apakah ingin rata kiri,
tengah, atau rata kanan. Bedanya penggunaan atribut ini pada tag <TD..>
hanya akan mempengaruhi untuk satu sisi saja, tidak seperti tag <TR..> yang
dapat mempengaruhi satu baris pada table.
 Width
Atribut ini berguna untuk menentukan lebar dari tag <TD..>. Ukuran yang
dapat digunakan adalah pixel dan persen.
 Bgcolor
Sama seperti atribut BGCOLOR pada tag <TABEL..> dan tag <TR..> atribut
ini berguna untuk menentukan warna latar dari sel. Bedanya penggunaan
atribut BGCOLOR pada tag <TD..> hanya akan mempengaruhi satu sel saja.
 Colspan
Atribut ini digunakan untuk menggabungkan dua atau lebih sel dalam baris
yang sama. Fungsinya sama seperti penggunaan “Merge” dalam Mocrosoft
Excel.
B. Soal
1. Sebagai latihan buat sebuah table dengan scrip sebagai berikut :
<html>
<head>
<title> SELAMAT DATANG PRAK 3a </title>
</head>
<body>
<h1>Praktikum Buat Tabel</h1>
</body>
<table>
<tr>
<td>Row 1, cell 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</html>
2. Buatlah beberapa contoh dari atribut Width.
3. Buatlah tabel yang menggunakan atribut Width dan tambahkan gambar.
4. Buatlah contoh dari atribut Align.
5. Buatlah dokumen HTML Untuk menampilkan tabel sebagai berikut ini :
Ketentuan : Judul tabel biru, judul kolom tebal, untuk angka pada nomor ditengah
kolom.
6. Buatlah dokumen HTML Untuk menampilkan tabel Berwarna sebagai berikut ini:
C. Jawab
1.
 Input
 Output
2.
 Input
<html>
<head>
</head>
<body>
<h1> Praktikum Buat Table<h1>
</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>
 Output
 Input
<html>
<head>
</head>
<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
 Input
<html>
<head>
</head>
Tabel Pertama
<tr>
<td width=70%> Halo</td>
<td width=30%> Akprind</td>
</tr>
</table>
<tr>
<td width=70%> Apa</td>
<td width=30%> Kabar</td>
</tr>
</table>
</html>
 Output
3.
 Input
<html>
<head>
</head>
<p align=center >Tabel Pertama</p>
<tr>
<td width=20%> <b>No</b></td>
<td width=40%> <b>Gambar</b></td>
<td width=40%> <b>Keterangan</b></td>
</tr>
<tr>
<td width=20%> 1</td>
<td width=40%> <IMG SRC="thN2MWEIJL.jpg"></td>
<td width=40%> <A HREF="Kuda1.docx">Ket Kuda 1</A></td>
</tr>
<tr>
<td width=20%> 2</td>
<td width=40%> <IMG SRC="kepala-kuda.jpg"></td>
<td width=40%> <A HREF="kuda2.docx">Ket Kuda 2</A></td>
</tr>
</table>
</html>
 Output
4.
 Input
<html>
<hr>
<p align=Center>TABEL RUMUS-RUMUS
</hr>
<ul>
<li>Rumus Air : H<sub>2</sub>O
<li>Rumus Asam Sukfat : H<sub>2</sub>SO<sub>4</sub></li>
<li>Rumus Oksigen : O<sub>2</sub></li>
<li>Rumus Einstein : E = MC<sub>2</sub></li>
</ul>
</html>
 Output
5.
 Input
<html>
<head>
<title> SELAMAT DATANG PRAKTEK 3a </title>
</head>
<body>
<h1><center> <font color=blue DAFTAR MAHASISWA </font> </center>
</body>
<tr>
<td><center><b>No</b></center></td>
<td><center><b>NIM</b></center></td>
<td><center><b>Nama</b></center></td>
</tr>
<tr>
<td><center>1</center></td>
<td> G41150033 </td>
<td> Retno Yohaendria </td>
</tr>
<tr>
<td> G41150090 </td>
<td> Septi Dwi Aryanti </td>
</tr>
<tr>
<td> G41150108 </td>
<td> Danis Ika Novita </td>
</tr>
</table>
</html>
 Output
6.
 Input
<html>
<head>
<title> SELAMAT DATANG PRAKTEK 3A </title>
</head>
<body bgcolor=purple>
<h1><center><font color=blue> Table Daftar Mahasiswa </font>
</center</h1>
</body>
<tr bgcolor=yellow>
<td><center><b>No</b><center></td>
<td><center><b>NIM</b><center></td>
<td><center><b>Nama</b><center></td>
</tr>
<tr bgcolor=aqua>
<td width=10%> <center> 1 </center> </td>
<td width=30%>G41150033</td>
<td width=70%> Retno Yohaendria </td>
</tr>
<tr>
<td bgcolor=blue width=10%> <center> 2 </center></td>
<td bgcolor=red width=30%> G41150108</td>
<td bgcolor=green width=70%> Danis Ika Novita </td>
</tr>
</table>
<html>
 Output
Praktikum 4
Membuat Form dengan HTML
A. Dasar Teori
 From adalah salah satu elemen dalam isi halaman web yang digunakan untuk
mendapatkan masukan(input) dari pengunjung halaman web. Ini adalah salah
satu cirikhas dari halaman web dinamis. Seperti biasanya form dimulai dengan
tag<form> dan diakhiri dengan tag </form>, sedangkan metode dari form
tersebut didefinisikan setelah tag pembuka, contoh:
<FORM METHOD=”POST” ACTION=”go.php”
Ada dua metode untuk mengisi form, yaitu:

 GET : metode defsult, mengirimkan masukan (input) kedalam script
melalui URL. Metode ini memiliki kelemahan yaitu data yang boleh
diinputkan besarnya dibatasi.
 POST : data dikirim melalui suatu transaksi post pada melalui HTTP.
Untuk data yang besar atau membutuhkan keamanan kita dianjurkan
untuk menggunakan metode POST.
 ACTION adalah URL yang menentukan resource yang akan dilakukan
oleh action pada form data, dan memberi respon pada user. Berikut adalah
elemen yang terdapat dalam form.
Berikut ini adalah elemen yang terdapat dalam form :
1. Text Field
Elemen yang digunakan untuk memasukan text dalam satu baris.Lebar
karakter defaultnya adalah 20 karakter.
2. Password Field
Untuk memasukan datu baris teks dengan format
chiphertext/password.Dengan karakter yang disamarkan dengan bulatan
atau tanda “*”.
3. Radio Button
Radio button digunakan agar dapat memilih salah satu pilihan.Contoh
jenis kelamin (male or female).
Penulisannya : Radio Button<input type="radio">
4. Text Area
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari
satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.
5. Check Box
Check Box digunakan untuk dapat memilih lebih dari satu pilihan.
Penulisannya: Check Box<input type="checkbox">
6. Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down
list.
Penulisannya :
<select>
......
</select>
7. Submit Button
Digunakan untuk mengirimkan data dari halaman web ke server. Setiap
elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilinya ke suatu aplikasi yang di tentukan dalam atribut ACTION dlam
elemen FORM.
Penulisannya : Submit<input type="submit">
8. Reset Button
Digunakan untuk membatalkan semua proses ata mereset proses pengisian
data yang dilakukan di elemen input form.
Penulisannya : Reset<input type="reset">
B. Soal
1. Buatlah Form yang menggunakan elemen Password Field.
2. Buatlah Form yang menggunakan elemen Submit dan Reset.
3. Buatlah Form yang menggunakan elemen Checkbox.
4. Buatlah Form yang menggunakan elemen Radio Button.
5. Buatlah Form yang menggunakan elemen Daftar Drop Down.
6. Buatlah Form yang menggunakan elemen Text Area.
C. Jawab
1.
 Input
<html>
<head>
<title> Belajar Membuat From </title>
</head>
<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>
</html>
 Output
2.
 Input
<html>
<head>
<title> Belajar Membuat From (Submit dan Reset) </title>
</head>
<body>
<b>Data Pengunjung: </b> <br>
<form method="post" action="data.html">
<table>
<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>
<input type="submit" value="Simpan" name="t1">
<input type="reset" value="Reset" name="t2">
</form>
</body>
</html>
 Output
 Input
<html>
<head>
<title> Belajar Membuat From (Submit dan Reset2) </title>
</head>
<body>
<b>Data Pengunjung: </b> <br>

<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>
<td colspan=2><div align="center"><input type="submit" value="Simpan"
name="t1"> <input type="reset" value="Reset" name="t2"></td>
</table>
</form>
</body>
</html>
 Output
3.
 Input
<html>
<head>
<title> Belajar Membuat From (Checkbox) </title>
</head>
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>
</html>
 Output
4.
 Input
<html>
<head>
<title> Belajar Membuat From (Radio Button) </title>
</head>
Apakah Anda setuju dengan kenaikan SPP: <br>
<input type="radio" name="ops1" value="ya"> Ya <br>
<input type="radio" name="ops1" value="tidak"> Tidak <br>
<input type="radio" name="ops1" value="ragu-ragu"> Ragu-ragu <br>
</form>
</html>
 Output
 Input
<html>
<head>
<title> Belajar Membuat From (Radio Button2) </title>
</head>
Apakah Anda setuju dengan kenaikan SPP: <br>
<input type="radio" name="ops1" value="ya"> Ya <br>
<input type="radio" name="ops1" value="tidak"> Tidak <br>
<input type="radio" name="ops1" value="ragu-ragu"> Ragu-ragu <br>
Jenis Kelamin: <br>

<input type="radio" name="ops2" value="laki-laki"> Laki-laki <br>
<input type="radio" name="ops2" value="perempuan"> Perempuan <br>
</form>
</html>
 Output
5.
 Input
<html>
<head>
<title> Belajar Membuat From (Daftar Drop Down) </title>
</head>
Jurusan: <br>
<select name="jurusan">
<option value="RM"> Rekam Medik<br>
<option value="GKL"> Gizi Klinik<br>
<option value="--------"> -------------<br>
</form>
</html>
 Output
 Input
<html>
<head>
<title> Belajar Membuat From (Text Area) </title>
</head>
<body>
<b>Komentar: <b><br>
<form method="post"> <textarea rows="10" cols="49" wrap="physical"
name="komentar">
</textarea><br>
</body>
</html>
 Output
Praktikum 5
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. Soal
1. Tulis scrip berikut ini
<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>
2. 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.
C. Jawab
1.
 Input
 Output
2.
 Input
<html>
<head>
<title> Tugas Membuat CSS Tentang Hobi </title>
<style type="text/css">
body {
background-color:hotpink;
color:gold; }
h1 {
color: blue; }
p{
border:1px solid white;
background-color: gray;
color:white;
padding:5px; }
</style>
</head>
<body>
<h1> INI ADALAH HOBI SAYA </h1>
<p><em> Jika boleh saya jujur, saya memang tidak punya hobi. <br> Saya
tipe orang yang tidak mempunyai kesukaan yang berlebih sehingga dalam hal
kegiatan atau aktivitas pun saya tidak punya kesukaan. </em></p>
<p> Tapi saya punya beberapa kegiatan yang menurut saya menyenangkan
</p>
<ul>
<li>Nonton Drama Korea (Tapi tidak setiap hari dilakukan, karena terlalu
sering nonton drakor mengakibatkan BAPER)</li>
<li>Membaca Buku (Ini sebenarnya bukan kegiatan yang menyenangkan
karena saya sering ngantuk, tapi jika difikir-fikir ini kegiatan yang baik)</li>
<li>Stalking (Stalking adalah kegiatan mengepoin orang, ini kegiatan yang
seru disela-sela padatnya Tugas Rekam Medik)</li>
</ul>
</body>
</html>
 Output
Praktikum 6
Membuat Form
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, contoh“http://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. Soal
1. Buatlah Form sesuai dengan Sistem yang telah ditentukan setiap kelompoknya.
C. Jawab
 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>

<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
 Form Data Admin

 Input
<html>
<head>
</head>
<body bgcolor=Lightcoral>
<b><center><font face=Arial Rounded MT Bold color=Sienna
size=30> SISTEM INFORMASI MANAJEMEN RESTORAN
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
<tr bgcolor=Sandybrown> <td colspan=2><div align="center"><input
</table></center>
</form>
</body>
</html>
 Output
 Form Data Suplier

 Input
<html>
<head>
</head>
<body bgcolor=hotpink>
b><center><font face=Arial Rounded MT Bold color=blue size=30>
SISTEM INFORMASI MANAJEMEN RESTORAN
<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
<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
<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
</table></center>
</form>
</body>
</html>
 Output
 Form Data Kasir

 Input
<html>
<head>
</head>
<body bgcolor=Lightskyblue>
<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
<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>
</table></center>
</form>
</body>
</html>
 Output
 Login Admin
 Input
<html>
<head>
</head>
<body bgcolor=Lightcoral>
size=30> Data Admin: </font></center></b> <br>

<center><table bgcolor=Peachpuff border=1 cellpadding=20
<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
 Login Kasir
 Input
<html>
<head>
</head>
<body bgcolor=Lightskyblue>
size=30> Data Kasir: </font></center></b> <br>

<center><table bgcolor= Darkorchid border=1 cellpadding=20
<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>
type="submit" value="Login" name="t1"> <input type="reset"
value="Exit" name="t2"></td> </tr>
</table></center>
</form>
</body>
</html>
 Output

g41150033 Retno Yohaendria A

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

g41150033 Retno Yohaendria A

Diunggah oleh

Hak Cipta:

Format Tersedia

RINGKASAN MATERI

PEMROGRAMAN BERBASIS WEB

KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI

1.1 Pengenalan HTML

Yang membedakan dokumen HTML dengan dokumen pada umumnya, adalah

HTML merupakan bahasa pemrograman yang fleksibel dimana kita dapat

 Struktur Dokumen HTML

Struktur Dokumen HTML terlihat seperti conto dokumen HTML dibawah

<TITLE> Pengelan HTML </TITLE>

<b> Belajar HTML emang paling mengasikan lohhhhhhhhh </b>

<h1>Ini adalah latihan pemrograman web pertamaku.</h1>

TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat

3. Buat Tampilan Web

 Ada beberapa macam-macam link, antara lain :

<table border=5 cellpadding=1 cellspacing=0 width=60%>

<FORM METHOD=”POST” ACTION=”go.php”

Ada dua metode untuk mengisi form, yaitu:

Berikut ini adalah elemen yang terdapat dalam form :

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

Jenis Kelamin: <br>

CSS mampu di berbagai platform, maksudnya dapat dijalankan pada berbagai

 Keuntungan Penggunaan CSS

 Syntax? Rumus dari CSS

Contoh diatas menunjukan:

 Penggunaan Banyak Properties

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

 Form Data Admin

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

 Form Data Suplier

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

 Form Data Kasir

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

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

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

Anda mungkin juga menyukai