ambil ahhh

Transcript ambil ahhh

PEMROGRAMAN BERBASIS WEB
Bab I
Cara kerja WEB
Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu
sebagai berikut:
Web browser
Fungsi dari web browser adalah menerjemahkan kode
(script) HTML yang biasanya ditambahkan JavaScript
menjadi sebuah informasi yang sudah tertata dan
menarik secara visual. Contoh web browser :internet
explorer, opera, google chrome,Mozilla Firefox dll
Web server
Adalah aplikasi yang berguna untuk menrima permintaan
informasi dari pengguna melalui web browser dan
mengirimkan kembali infromasi yang diminta melalui
HTTP (Hiper Text Transfr Protocol). Contoh : apache
Gambar 1.1:
Diagram kerja WEB
Keterangan gambar 1.1:

Untuk menjalankan WEB dari sebuah server cukup
dengan memanggil alamat web tersebut.Lalu browser
akan memunculkan halaman web yang dimaksud sesuai
dengan alamat yang diberikan.

Proses yg terjadi :
1. web browser (client) meminta kepada web server
2. web server akan membaca file index (misal :
index.html, index.php dll)
3. file index tersebut diterjemahkan oleh mesin
penerjemah (misal PHP)
4. mesin penerjemah mengirimkan kembali hasil
terjemahan ke web browser
5. web browser akan menerjemahkan kode HTML
menjadi Halaman WEB





BAB II
Mengenal HTML
HTML (Hyper Text Markup Language) adalah suatu bahasa
pemrograman yg dikenali oleh web browser untuk
menampilkan informasi dengan lebih baik menarik
dibandingkan dengan tulisan teks biasa (plain text).
A. Dari Cara Pemrosesan HTML dibagi menjadi 2 yaitu :
HTML Statis
Prosesnya yaitu script HTML dikirimkan ke client dan
dijalankan pada client tanpa ada pengolahan data.
Kelemahan : Hasil Tampilan Kurang Bagus
Kelebihan : Tidak perlu server untuk pengolahan datanya.






HTML Dinamis
Prosesnya yaitu script Pemrograman dijalankan di
server kemudian hasil pengolahan data dirimkan ke
client yang berupa script HTML yang dibuat secara “on
the fly creation” oleh server untuk dijalankan pada client.
Kelebihan : Halaman web menjadi lebih interaktif dan
real time
Kekurangan : bila banyak permintaan yg masuk ke
server maka akan terjadi overload.karena setiap
permintaan akan menjalankan sendiri-sendiri program
CGI (Common Gateway Interface).
Catatan: CGI merupakan standar interface antara server
dan suatu aplikasi
Sedangkan program CGI adalah program yang dapat
melakukan proses sesuai permintaan server untuk
menghasilkan suatu dokumen yang hasil dokumen
tersebut dalam bentuk HTML (on the fly creation)
B. Tag Yang sering digunakan
1. Tag <!-- >
Digunakan untuk menandai sebuah komentar
suatu kode (script) dengan tanda ini maka
browser tidak akan menerjemahkan.
Contoh :
<!- - latihan html -- >
<! – tag i untuk italic atau cetak miring-- >
<i> coba nulis </i>
Hasil tampilan di browser :
coba nulis
2. Tag <a>
 Singkatan dari anchor, tag ini digunakan
untuk membuat sebuah tautan (link) antar
web.
 Contoh :
 <a href=http://www.yahoo.com>”Link ke
yahoo</a>
 Hasil tampilan di browser :

Link ke yahoo

3. Tag <b>
 Digunakan untuk teks cetak tebal
 Contoh :
 <b>teks ini dicetak tebal</b>
 Hasil tampilan di browser :

teks ini dicetak tebal














4. Tag <big>
Digunakan untuk membuat sebuah tulisan agar nampak
lebih besar. Hal ini berbeda dengan cetak tebal
(bold).Perhatikan kode tersebur .
Contoh:
<html>
<head>
<title>test menggunakan tag b dan big </title>
</head>
<body>
<b> ini menggunakan bold </b>
<br>
<big>ini menggunakan big</big>
</body>
</html>
Hasil tampilan di browser :
Ini menggunakan bold
Ini menggunakan big
5. Tag <body>
 Merupakan bagian dari struktur html yang
digunakan untuk menandai badan (body)
suatu dokumen HTML.
 penggunaannya dapat dilihat pada
rangkaian contoh diatas.













6. Tag <br>
Digunakan untuk mengakhiri suatu baris tulisan, lalu
pindah ke baris berikutnya atau dibawahnya.
Contoh :
<b> ini menggunakan bold </b>
<big>ini menggunakan big</big>
Hasil tampilan di browser :
Ini menggunakan bold
Ini menggunakan big
Bandingkan dengan beerikut :
<b> ini menggunakan bold </b>
<br>
<big>ini menggunakan big</big>
Hasil tampilan di browser :

Ini menggunakan bold

Ini menggunakan big
7. Tag <button>
 Digunakan untuk membuat tombol di web
browser.
 Contoh :
 <button type=”button”>klik di tombol
ini</button>
 Hasil tampilan di browser :



klik di tombol ini

















8. Tag <caption>
Digunakan untuk membuat judul sebuah tabel. Penggunaan tag ini
biasanya bersamaan dengan deklarasi tabel.
Contoh :
<table border=”1”>
<caption>judul Table</caption>
<tr>
<th>bulan</th>
<th>saldo</th>
</tr>
<tr>
<td>January</td>
<td>Rp. 1.000.000,-</td>
</tr>
<tr>
<td>Pebruary</td>
<td>Rp. 2.000.000,-</td>
</tr>



</table>
9. Tag <center>
 Digunakan untuk menengahkan suatu teks
halaman











11. Tag <font>
Digunakan untuk memformat bentuk font, warna, ukuran
dari sebuah teks.(tersedia font size : 1 s/d 7)
Contoh :
<font size=”3” color =“black”>tulisan warna merah
dengan ukuran 3</font> <br>
<font size=”7” color =“green”>tulisan warna hijau dengan
ukuran 7</font> <br>
<font face=”stencil” color =“blue”>tulisan warna biru
dengan jenis font stencil</font> <br>
Hasil tampilan di browser :
Tulisan warna merah dengan ukuran 3
Tulisan warna hijau dengan ukuran 7
Tulisan warna biru dengan font stencil








12. Tag <form>
Adalah Tag yang digunakan oleh pengguna untuk
memasukkan data.Tag ini biasanya dibantu oleh
beberapa komponen lain, seperti : input, button, option
dll
Contoh :
<form action=”filePHPrujukan.php” method=”get”>
Nama Anda:<input type=”text” name=”VarNama”/> <br>
Alamat:<input type=”text” name=”VarAlamat”/><br>
<input type=”submit” value=simpan></form>
Hasil tampilan di browser :

Nama Anda :

Alamat:


Simpan










13. Tag <frame> dan <frameset>
Tag Digunakan untuk menampilkan halaman web
lain dalam sebuah halaman web yang
dibuat.Halaman dapat dibuat terpisah dengan
menampilkan halaman web yang berbeda-beda.
Contoh :
<html>
<frameset cols=”25%,50%,25%”>
<frame src=http://www.detik.com/”/>
<frame src=http://www.google.com/”/>
<frame src=http://www.jawapos.com/”/>
</frameset>
</html>













14. Tag <head>
Tag Digunakan untuk menampung elemen-elemen
header dari sebuah halaman.
contoh:
<html>
<head>
<title>test menggunakan tag b dan big </title>
</head>
<body>
<b> ini menggunakan bold </b>
<br>
<big>ini menggunakan big</big>
</body>
</html>














15. Tag <h1>sampai dengan <h6>
Digunakan untuk mendifinisikan tulisan di header.
Contoh :
<HTML>
<HEAD><TITLE>Text Style using Heading</TITLE></HEAD>
<BODY>
<H1 >MENGGUNAKAN HEADING 1</H1>
<H2 >MENGGUNAKAN HEADING 2</H2>
<H3 >MENGGUNAKAN HEADING 3</H3>
<H4 ALIGN=RIGHT>MENGGUNAKAN HEADING 4 RIGHT</H4>
<H5 >MENGGUNAKAN HEADING 5</H5>
<H6 ALIGN=CENTER>MENGGUNAKAN HEADING 6 dan
CENTER</H6>
</BODY>
</HTML>
16. Tag <hr>
 Digunakan untuk membuat garis
horisontal
 Contoh :
 <p>diatas garis</P>
 <hr/>
 <p>dibawah garis</P>










17. Tag <html>
Digunakan untuk memberitahu browser kode yg
dituliskan merupakan dokumen html.
Contoh :
<HTML>
<HEAD><TITLE>contoh dokumen
HTML</TITLE></HEAD>
<BODY>
<H4 ALIGN=RIGHT>MENGGUNAKAN HEADING 4
RIGHT</H4>
</BODY>
</HTML>
18. Tag <i>
 Digunakan untuk membuat cetak miring
 Contoh :
 <i>huruf miring</i>
 Hasil :
 huruf miring

19. Tag <img>
 Digunakan untuk menampilkan gambar
dari server
 Contoh :
 <img src=”kupu.jpeg” alt=”kupu-kupu”/>









20. tag<input>
Digunakan untuk berinteraksi dengan pengguna
dalam memasukkan data ke server.
input mempunyai banyak tipe, yaitu :button,
checkbox, file, hidden, image, password, radio,
reset, submit, dan text.
Contoh :
<form action=”filePHPrujukan.php” method=”get”>
Nama Anda:<input type=”text” name=”VarNama”/> <br>
Alamat:<input type=”text” name=”VarAlamat”/><br>
<input type=”submit” value=”simpan”/></form>















21.Tag <li>
Digunakan untuk menampilkan simbol data berurut, seperti simbol
bullet dan nomor.untuk urutan bernomor diawali dengan tag <ol>,
sedangkan simbol bullet diawali tag<ul>
Contoh:
<html>
<ol>
<li>satu</>
<li>dua</>
<li>tiga</>
</ol>
<ul>
<li>gula</>
<li>garam</>
<li>susu</>
</ul>
</html>







22. tag <link>
Digunakan untuk mendifinisikan hubungan
antara halaman web yang akan dibuat dengan
data atau aturan dari luar. Tag ini biasanya
digunakan pada saat web menggunakan file
css.
Contoh :
<head>
<link rel=”stylesheet” type=”text/css
href=”coba.css”/>
</head>
23.tag <ol>
 Digunakan untuk urutan data bernomor
atau numerik, juga alfabet.
 Contoh :
 <ol>

<li>satu</>
 <li>dua</>
 <li>tiga</>
 </ol>












24.tag <option>
Digunakan untuk mendifinisikan suatu elemen
yg bisa dipilih dalam suatu daftar pilihan.
Contoh :
<html>
<select>
<option> jakarta</option>
<option> bandung</option>
<option> semarang</option>
<option> Yogyakarta</option>
</select>
</html>
25. tag <p>
 Digunakan untuk mendifinisikan suatu
paragraf.
 <p>diatas garis</p>
 <hr/>
 <p>diatas garis</p>
