pertemuan ke -3 dan ke -4
TRANSCRIPT
LAPORAN PENGENALAN WEB
PERTEMUAN KE-3 DAN KE-4
Di Susun Oleh :
Nama : Mohamad Hanafi
Nim : 095410134
Jurusan : Teknik Informatika/Strata-1
LABORATORIUM TERPADU
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2011
PERTEMUAN KE-3
MEMBUAT LINK, MENYISIPKAN GAMBAR, MULTIMIDIA
A. DASAR TEORIDapat membuat link untuk menghubungkan ke halaman-halaman lain, mampu menyisipkan gambar sebagai background pada halaman web dan mampu menyisipkan multimidedia berupa suara dan video pada halaman web.
B. PEMBAHASANLinkUntuk membuat link atau hyperlink, dapat menggunakan tag:<a href>....</a>Secara default, link pada halaman web diberi garis bawah dan umumnya berwarna biru. Ada beberapa atribut untuk mengatur warna link dan juga pengaturan lainnya. Atribut-atribut ini diletakkan tab<body>. Berikut atribut yang digunakan untuk mengatur link :
No. Atribut Fungsi1. Link Menentukan warna link2. Alink Menentukan warna link ketika dklik dan halaman link belum
terbuka3. Vlink Menentuka warna link jika link tersebut sudah pernah dibuka
Berikut adalah contoh untuk membuat link :
<HTML><HEAD><TITLE>Halaman Utama</TITLE></HEAD><BODY><H1>Halaman Utama</H1>Silakan klik pada link berikut:<BR><A HREF = "hal_x.html">Halaman X</A><BR></BODY></HTML>
Maka hasil outputnya adalah sebagai berikut :
untuk hal_x.html sebagai berikut :
<HTML><HEAD><TITLE>Halaman X</TITLE></HEAD><BODY>ini adalah yang ditampilkan pada halaman x yang telah dklik tadi<br><H1>Halaman X</H1></BODY></HTML>
Apabila pada halaman utama tadi link yang bertulisan Halaman X maka akan menuju seperti berikut :
Hyperlink tidak terbatas pada halaman-halaman web yang berada pada sistem yang sama seperti contoh diatas tetapi bisa juga dihubungkan ke situs web yang lain yang berada pada sembarang web Server.
Umumnya URL abbsolut memiliki ciri-ciri diawali dengan http://, ftp:// atau URL relatif adalah URL yang menyebutkan nama berkas secara langsung .Kelebihan URL absolut adalah dalam hal pembuatannya yang sangat cepat dibandingkan dengan URL relatif. Namun URL relatif memiliki kelebihan yaitu memungkinkan anda bisa mengubah direktori kerja untuk program-program HTML ataupun berkas-berkas lainnya tanpa mengubah program-program HTML sama sekali.
Menampilkan GambarSebuah gambar dapat dijadikan sebagai link ke halaman lain, baik secara content web maupun sebagai gambar latar belakang web Caranya adalah dengan menggunakan tag <img> diantara pasangan tag<A> dan </A> atau untuk menampilkan gambar sebagai gambar latar belakang halaman web dapat ditambahkan atribut background pada tag <body>.seperti pada contoh di bawah ini:
<html><head><title>Link 2</title></head><body background="pemandangan.jpg"><img src="linux.jpg"><br><a href="help.htm">halaman help</a><br><a href="http://www.bestcamp.net/">bestcamp akakom</a><br><a href="mailto:[email protected]">email akakom</a><a href="help.htm" tabindex"1" target="blank">halaman help</a><br/><a href="http://www.bestcamp.net/" tabindex="3" target="parent">bestcamp akakom</a><br/><a href="mailto:[email protected]" tabindex="2" target="self">kirimkan e~mail jika ada pertanyaan</a><br/></body></html>
Sehingga akan muncul sebagai berikut :
Perhatikan atribut src, dari contoh diatas menunjukkan bahwa berkas gambar berada dalam direktori images.Untuk menggunakan gambar sebagai latar belakang web sebaiknya gunakan gambar berukuran kecil, karena browser akan mengulang gambar tersebut.
Menyisipkan MultimediaMltimedia merupakan teknologi yang memadukan antara teks, gambar diam, animasi gambar, suara dan bahkan video. Sebuah web juga dapat menyertakan multimedia didalamnya. Tipe suara dan video yang dapat disertakan dalam halaman web.Contoh seperti berikut :
<html><head><title>Suara</title></head><body>Jika anda ingin mendengarkan suara klik pada salah satu link berikut:<br/><a href="baru.mp3">Lagu terbaru</a><br/><a href="lama.mp3">Lagu lama</a><br/></body></html>
Hasilnya adalah sebagai berikut :
Script yang berisi lagu tersebut :
<html><head><title>Halaman web diiringi dengan Musik</title></head><body>
Selamat Mendengrakan Musik<bgsound src="baru.mp3" loop="3"></body></html>
Hasilnya adalah sebagai berikut :Apabila link yang bernama Lagu Terbaru maka akan muncul seperti berikut :
Dan apabila link yang bernama Lagu Lama maka dklik akan muncul seperti berikut :
Pada dasarnya adalah dalam membuat link untuk lagu tersebut pada penyimpananya harus pada file yang sama agar dalam pengambilan lagunya html tidak ambigu alias membingungkan maka file yang dijadikan untuk mengambil berkas lagu harus ditaruh file yang sama.
Tag<BGSOUND>Tag ini berfungsi untuk memainkan suara sebagai latar belakang. Atribut yang digunakan dalam taag <BGSOUND> yaitu:
Atribut KegunaanSRC Menentukan nama berkas yang akan dimainkanLOOP Diisi dengan nilai yang menyatakan berapa kali berkasakan dimainkan. Jika diisi
dengan nilai INFINITIF maka suara akan dimainkanterus menerus
Contoh seperti berikut :
<html><head><title>Halaman web diiringi dengan Musik</title></head><body>Selamat Mendengarkan Musik<bgsound src="aisah.mp3" loop="3"></body></html>
Hasil output :
Dalam penyimpanannya sama dengan pengambilan lagu yang sudah dipelajari trus yang bikin beda adalah untuk mendengarkan lagu pada html file namanya harus ditulis sama dengan file lagu dan tipe file lagu harus sama kemudian browser harus support dengan adanya di pakai untuk mendengarkan lagu.
Tag<EMBED>Tag ini digunakan untuk memainkan berkas yang berupa suara ataupun film. Beberapa atribut yang digunakan dalam tag<EMBED> antara lain:
Atribut Kegunaan SRC Menentukan sumber berkas suara atau videoWIDTH Menentukan lebar videoHEIGHT Menentukan tinggi videoUNITS Menentukan satuan untuk videoHIDDEN Menyembunyikan controlAUTOSTART
Diisi dengan nilai TRUE atau FALSE untuk menentukan berkas akan dimainkan secara otomatis atau tidak
LOOP Jika diisi dengan TRUE, maka berkas akan dimainkan berulang-ulangSeperti pada tampilan film berikut ini :
<html><head><title>Menonton video di web</title></head><body>Selamat Menikmati klip video berikut<br><br><embed src="kbc.avi" height="400" width="400" units="pixels"autostart="true" loop="false"></embed></body></html>
Hasilnya :
Pada dasarnya adalah untuk membuat vidio tidak semua browser bisa digunakan hanya browser-browser tertentu yang bisa membaca ekstensi-ekstensi yang dikenal dalam browser
tersebut. seumpama dalam video ini dimasukkan dalam browser mozila firefox tidak akan terbaca atau menampilkan film berikut.
C. KESIMPULANDalam membuat suatu link pada halaman website selalu di tandai dengan <a href=”.” > Untuk menyisipkan suatu gambar pada halaman website selalu di tandai dengan <img src="namagambar "> Dalam pembuatan suatu halaman website kita dapat memperindahnya baik menyisipkan suatu gambar, suara, maupun memberikan sebuah link, dimana dalam hal ini kita harus menyesuaikan ekstensi dari suatu yang akan kita sisipkan baik berupa gambar, suara dan lain sebagainya dimana untuk dasar dari pembuatan link semuanya sama, baik link gambar, link suara, maupun link biasa yang tanpa suara dan gambar. Selain terpisah-pisah tentunya kita dapat juga melakukan penggabungan dari ketiga hal tersebuat dalam sebuah link, baik berupa gambar, suara dan link biasa dapat kita gabungkan menjadi sebuah gambar yang di beri link, mempunyai suara
D. LISTINGTerlampir
E. TUGAS
<html><head><title>Membuat link dengan audio dan video</title></head><body background="pemandangan.jpg"><h2><font color="red">klik link-link berikut ini untuk mendapatkan beda isinya :</h2><br><br></font><font color="aqua"><h3>klik gambar link 1 :<a href="link1.html"><img src="image1.jpg"></a><br><br>klik gambar link 2 :<a href="link2.html"><img src="image2.png"></a><br><br>klik gambar link 3 :<a href="link3.html"><img src="image3.jpg"></a></font></h3></body></html>
Hasilnya :
Isi dari link satu adalah sebagai berikut :
<html><head><title>halaman link 1</title></head><body background="gambar1.jpg"><font color="red"><h1>melihat gambar sambil mendengarkan musik</font></h1><bgsound src="baru.mp3" loop="3"></body></html>
Hasilnya :
Isi dari link 2 :
<html><head><title>halaman link 2</title></head><body background="gambar2.jpg"><font color="aqua"><h1>melihat gambar sambil mendengarkan musik</h1><bgsound src="lama.mp3" loop="3"></body></html>
Hasilnya :
Isi dari link terakhir yaitu link 3 :
<html><head><title>halaman link 3</title></head><body background="gambar3.jpg"><font color="blue"><h2>melihat gambar sambil melihat layar lebar</h2></font><embed src="vidio.avi" height="500" width="500" units="pixels" autostart="true" loop="false"></embed></body></html>
Hasilnya :
PERTEMUAN KE-4
MEMBUAT TABEL
A. DASAR TEORITabel biasanya digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca selain itu dalam halaman web untuk pengguna internet orang awam(pemula) tampilan tersebut lebih rapi dan tidak membingungkan user.
B. PEMBAHASANUntuk menciptakan tabel yang berisi baris (row) dan kolom. Berikut ini adalah beberapa tag ang sering digunakan dalam membuat tabel:
Tag Keterangan <table> Mengawali pembentukan sebuah tabel<caption> Menentukan judul sebuah tabel<tr> Membuat ssebuah baris dalam tabel<td> Membuat sebuah sel data<th> Membuat judul kolom(huruf terlihat tebal)
Contoh :
<html><body><h4>Satu baris satu kolom</h4><table border="1"><tr> <td>100</td></tr></table><h4>Satu baris tiga kolom:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr></table><h4>Dua baris tiga kolom:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr>
</table></body></html>
Hasil outputnya :
Untuk memberi garis pada tabel, kita bisa menggunakan atribut border pada tag <table>. Bentuknya adalah:
<table border=”nilai”>
Pada kode diatas, <table>...</table> merupakan bagian terluar dalam pendefinisiantabel. Didalam pasangan tag tersebut, dalam tabel tersebut tidak disertakan judul tapi judul tersebut diletakkan diluar tabel, seumpama akan dikasih judul pada tabel maka sintaknya <caption>....</caption> dalam sintak diatas tidak menggunakan <caption> tapi langsung menggunakan ukuran huruf.
<tr> <td>100</td></tr>
Digunakan untuk membentuk baris yang berisi satu buah tabel, yakni karena ada satu pasangan <td>...</td>.sebuah baris dibentuk oleh pasangan<tr>...</tr>. Perlu diketahui, pasangan<td>...</td> akan membuat teks dalam keadaan tidak tebal kalau dengan keadaan tebal dengan perintah<th>...</th>.
Jika atribut border tidak disertakan didalam tag table, nilai border dianggap sama dengan nol,sehingga garis tidak akan ditampilkan. Dengan kata lain identik dengan
<table border=”0”>
Contoh apabla atribut border tidak disertakan maka akan muncul seperti berikut :
Contoh dengan keadaan tabel garis yang di tampilkan dengan keadaan tebal :
<html><body><h4>Satu baris satu kolom</h4><table border="10"><tr> <td>100</td></tr></table><h4>Satu baris tiga kolom:</h4><table border="10"><tr> <td>100</td> <td>200</td> <td>300</td></tr></table><h4>Dua baris tiga kolom:</h4><table border="10"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table></body></html>
Hasil outputnya :
Disebabkan pada script yang ada di html pada tag <table border=”10”> maka tabel akan memperbesar sesuai ukuran yang dikasih user(pembuat) untuk ditampilkan ke halaman web.Contoh pada tabel memberikan warna border:
<html><body><h4>Satu baris satu kolom</h4><table border="1" bgcolor="yellow"><tr> <td>100</td></tr></table><h4>Satu baris tiga kolom:</h4><table border="1" bgcolor="green"><tr> <td>100</td> <td>200</td> <td>300</td></tr></table><h4>Dua baris tiga kolom:</h4><table border="1" bgcolor="pink"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table></body></html>
Hasil outputnya:
Untuk memberikan warna latar belakang terhadap tabel, anda bisa menggunakan atribut bgcolor pada tag <table>, nilai yang digunakan untuk bgcolor sudah dijelaskan pada modul sebelumnya, yaitu bisa menggunakan RGB atau bisa juga menggunakan nama warna dalam bahasa inggris.Dari contoh terlihat bahwa background tabel dengan judul “Satu baris satu kolom” berubah warna menjadi kuning kemudian pada background tabel dengan judul “Satu baris tiga kolom” berubah warna menjadi hijau dan yang tabel terakhir dengan judul “Dua baris tiga kolom” berubah warna menjadi pink.Contoh berikut menunjukkan pewarnaan tabel melalui bgcolor pada <table> dan <tr>, dan sekaligus menunjukkan cara mengatur warna teks pada sebuah kolom.
Menggabungkan selHtml memungkinkan kita untuk menggabung sel pada tabel. Baik penggabungan kolom maupun penggabungan baris.Atribut yang digunakan:
Rowspan : untuk menggabungkan beberapa baris Colspan : untuk menggabungkan beberapa kolom
Contoh :
<html><body><h4>gabungan dua kolom:</h4><table border="1"><tr> <th>Nama</th> <th colspan="2">Telepon</th></tr><tr> <td>Eni Susanti</td> <td>555 77 854</td>
<td>555 77 855</td></tr></table><h4>gabungan dua baris:</h4><table border="1"><tr> <th>Nama:</th> <td>Eni Susanti</td></tr><tr> <th rowspan="2">Telepone:</th> <td>555 77 854</td></tr><tr> <td>555 77 854</td></tr></table></body></html>
Hasil outputnya :
Dari contoh diatas untuk judul “golongan dua kolom “ terlihat dua baris dan tiga kolom tapi dalam keluran terlihat 2 kolom dan dua baris dalam hal ini menggunakan colspan.
Untuk judul “golongan dua baris” terlihat 3 baris dan 2 kolom tapi dalam tampilan di html terlihat 2 baris 2 kolom dalam penggabungan ini dinamakan rowspan.
C. KESIMPULANTujuan utama pembuatan tabel dalam sebuah halaman web yaitu selain untuk memperindah tampilan halaman web yang kita buat pembuatan tabel juga di tujukan untuk mengatur agar informasi yang kita buat dapat di sajikan dengan tampilan yang rapi agar mudah dan enak di baca.Taq <table>...</table> merupakan tag yang digunakan dalam membuat tabel dimana tag tersebut digunakan sebagai tanda awal dan tanda akhir dalam pembuatan sebuah tabel.Tag <tr>...</tr> merupakan tag yang digunakan untuk membuata baris dalam sebuah tabel.Tag <td>...</td> merupakan tag yang digunakan dalam pembuatan kolom dalam sebuah tabel yang kita buat.Tag <th>...</th> merupakan sebuah tag yang kita gunakan untuk membuat sebuah judul kolom yang kita buat dalam tabel.Tag <caption>...</caption> merupakan sebuah tag dalam html yang digunakan untuk membuat judul pada tabel yang kita buat.
D. LISTINGTerlampir
E. TUGAS
<html><head><title>Tugas membuat tabel</title></head><body><table border="1"><tr> <td>Namaku Stevany<br><br>Alamatku Solo</td> <td>tentangku: <table border="1"> <tr><td colspan="2" align="center">hobi</td> </tr> <tr><td>memasak</td> <td>nyanyi</td> </tr> </table> </td></tr><tr> <td>buah yang kusuka <p><ul type="disc"> <li>apel</li> <li>nanas</li> <li>anggur</li></p></td> <td valign="middle">HELLO semua</td></tr></table></body></html>
Hasil outputnya :
