Senin, 28 Februari 2011

Tugas Praktikum 2 Pemograman Web-Ratna Ayu Sri

Pada pertemuan kedua mata kuliah Pemograman Web, saya mendapat penjelasan mengenai beberapa materi yang lebih lanjut dalam pembuatan web dibandingkan minggu kemarinnya. Ringkasan materi yang dapat saya sampaikan adalah:

  • Untuk Memberi Gambar pada Latar
Dilakukan dengan menggunakan atribut background pada tag<body>, yaitu menjadi : <body background="pic1.jpg">. File gambar dan file xhtml harus berada dalam satu lokasi yang sama.
  • Untuk Menampilkan Gambar pada Tampilan Halaman Web
Digunakan tag <img>, file gambar dan file xhtml harus berada dalam satu lokasi yang sama. Contoh sintaks : <img src="pic1.jpg"/>
Atribut lain yang dapat digunakan dalam tag <img> adalah : <img src="pic1.jpg" align="middle" alt="tulisan yang ingin ditampilkan bila gambar tidak muncul/saat kursor mengarah ke gambar" width="200" height="300"/>
  • Mengenal Tag <marquee>
Digunakan untuk membuat animasi sederhana. Atribut yang digunakan untuk mengatur arah gerak animasi adalah atribut direction. Contoh sintaks : <marquee direction="right">Ini teks animasi</marquee>.
  • Mengenal Tag <bgsound>
Digunakan untuk memutar file audio sebagai suara latar. File lagu dan file xhtml harus ada dalam satu lokasi. Contoh sintaks : <bgsound src="lagu.mp3"loop="2"/>.
  • Mengenal Tag <embed>
Tag ini digunakan untuk memutar file video. Lokasi tempat menyimpan file xhtml dan file video harus sama. Contoh sintaks : <embed src="video.mpg" width="300" height="200" loop="true" autostart="false"/>. Jika menggunakan sintaks loop="true" dan autostart="false", maka video akan memutar ulang dengan sendirinya.
  • Mengenal List
Tipe list ada dua, yaitu :
-Ordered list (memperhatikan urutan, menggunakan tag <ol>)
-Unordered list (Tidak memperhatikan urutan, menggunakan tag <ul>)
  • Ordered List
Ordered list memiliki beberapa tipe atribut, yaitu :
- 1
- A
- a
- I
- i
dan memiliki pilihan start yang ditentukan oleh para pembuat halaman web. Contoh sintaks ordered list :
<ol type="A" start="3">
   <li>buku</li>
   <li>bolpen</li>
   <li>pensil</li>
   <li>penghapus</li>
</ol>
  • Unordered list
Ada beberapa tipe unordered list, yaitu :
- circle
- disc
- square
Contoh sintaks :
<ul type="square">
   <li>buku</li>
   <li>bolpen</li>
   <li>pensil</li>
   <li>penghapus</li>
</ul> 
  • Mengenal Definition List
Dalam definition list terdapat :
- <dl> : merupakan tag dari definition list yang terletak didalam tag <body>.
- <dt> : istilah yang ingin terjemahkan diletakkan diantara tag <dt> dan </dt>.
- <dd> : arti dari istilah yang ingin diterjemahkan ditulis diantara tag <dd> dan </dd>.
  • Mengenal Link / Hyperlink
Untuk membuat sebuah link, dibutuhkan 2 dokumen xhtml. Tag yang digunakan untuk membuat sebuah link adalah : <h1>Ini adalah halaman pertama</h1>
<a href="halaman2.html">ke halaman 2</a>. Buat juga sebuah dokumen xhtml lain yang berisi kebalikan dari tag yang dibuat dihalaman sebelumnya apabila menginginkan link bolak-balik.
  • Mengenal Link pada Jendela Browser Baru
Memberi nilai _blank pada atribut target. Dengan membuat dua dokumen xhtml, maka dapat dibuat juga link untuk jendela browser yang baru. Contoh sintaks :
<h1>Ini adalah halaman pertama</h1>
<a href="halaman2.html" target="_blank">ke halaman 2</a>.
  • Membuat Link ke Alamat Suatu Situs di Internet
Nilai atribut a href disesuaikan dengan alamat situs yang akan dituju. Contoh sintaks :
<a href=http://google.com target="_blank">ke google</a>.
  • Penggunaan Link pada Gambar
Gambar yang terdapat didalam jendela browser dapat dijadikan acuan untuk pindah ke halaman yang dijadikan link jika gambar tersebut diklik. Tag <a> </a> mengapit tag <img />.
Contoh sintaks :
<a href="halaman2.html"target="_blank">
<img src="pic1.jpg" width="100" height="100"/>
</a>
  • Link ke Email
Link yang digunakan untuk menyambung ke email seseorang. Contoh sintaks :
<a href="funny_guys@yahoo.com">email funny</a>

Minggu, 27 Februari 2011

Tugas Praktikum 1 Pemograman Web-Ratna Ayu-1072005

  • Pengertian HTML
HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan format dokumen standar pada web. HTML terbentuk dari tag-tag yang memerintahkan web browser untuk mengesekusi/menerjemahkan perintah-perintah yang dispesifikasikan. XHTML adalah perkembangan dari HTML. Yang meliputi Web Browser adalah :
-Internet Explorer
-Mozilla Firefox
-Opera
-Safari
-Google Crome
Tag adalah penanda dalam dokumen XHTML, diawali tanda '<' dan diakhiri tanda '>', selalu menggunakan huruf kecil.
  • Kerangka Utama Dokumen XHTML
<html>
     <head>
          <title>Judul Dokumen</title>
     </head>
     <body>
           Isi Dokumen dapat ditulis di sini
     </body>
</html>
Membuat dokumen XHTML dapat menggunakan notepad, edit plus, dreamwaver, dll. Dan untuk melihat hasilnya bisa menggunakan web browser.
  • Mengganti Warna background, dan teks
Attribut yang digunakan untuk mengganti warna backraound dalam pembuatan dokumen XHTML adalah attribut bgcolor, sedangkan untuk mengganti warna teks digunakan attribut teks pada tag body. Contoh sintaks : <body bgcolor="yelow" teks="green">
  • Membuat Komentar
Komentar digunakan untuk memberikan keterangan tambahan. Untuk membuat komentar pada dokumen XHTML, diawali dengan tanda <!-- dan diakhiri tanda -->. Komentar tidak akan muncul di layar browser, dan terdapat didalam tag <body>. Contoh sintaks : <!--ini komentarnya-->

  •  Tag <br/>
Digunakan untuk menampilkan tulisan dalam baris yang berbeda, seperti penggunaan tombol Enter. Tag ini tidak berpasangan, trdapat dalam tag <body>. Contoh sintaks : ini tag untuk pindah baris <br/>
  • Tag <p>
Digunakan untuk mengelompokkan suatu teks kedalam suatu paragraf. Tag <p> memiliki kesamaan dengan tag<div>, dan berada di dalam tag <body>. Contoh sintaks : <p align="left"> Tulisan ini<br/> menggunakan tag p </p> 
  • Tag Heading
Heading memiliki 6 ukuran, mulai dari <h1> sampai <h6>, terdapat pada tag <body>. Contoh sintaks : <h1 align="center">heading1</h1>
  • Tag <hr />
digunakan untuk membuat suatu garis mendatar/horisontal, berada di tag <body>. contoh sintaks : <hr width="10%" size="20" align="right" noshade/>
  • Tag <b>, <i>, <u>
Tag <b> digunakan untuk tulisan cetak tebal, tag <i> untuk tulisan cetak miring/italic, dan tag <u> untuk garis bawah/underline. Contoh sintaks : <i>Ini tulisan cetak miring</i> <br/>
  • Tag <big> dan <small>
Untuk memperbesar dan memperkecil ukuran text. Contoh sintaks : <small>Dari kecil</small>
  • Tag <sup>, <sub>, <tt>, dan <del>
Tag <sup> untuk fungsi superscript, tag<sub> untuk fungsi subscript, tag <tt> digunakan untuk memberi efek mesin tik pada teks, dan tag <del> untuk memberikan efek coretan. Contoh sintaks : Kata yang <del>dicoret</del> 
  • Tag <pre>
Digunakan untuk memformat posisi tulisan,contoh tanpa tag <br/> tulisan dapat menjorok kedalam. contoh sintaks : <pre>
                                   Paragraf ini
                                   sangat menarik.
                                   </pre>
  • Tag <font>
Digunakan  untuk melakukan pengaturan huruf. Kita dapat mengubah jenis huruf,ukuran huruf dan juga warna huruf. Contoh sintaks : <font face="arial" size="5" color="yellow">
ini efek font
</font>
  • Tag Basefont
Tag ini digunakan untuk mengatur default font/huruf. Contoh sintaks : <basefont face="verdana" size="3" color="red"/>
  • Tag <acronym>
Tag ini digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan. Contoh sintaks : <acronym title="Sekolah Dasar">SD</acronym>
  • Special Character
Digunakan untuk menampilkan karakter-karakter dari tulisan/kata yang kita ketik pada bagian body. contoh sintaks : &amp.

Minggu, 20 Februari 2011

1. Gambar dan Multimedia




Tag yang digunakan untuk menyisipkan  gambar dan multimedia ke dalam dokumen html adalah tag <img xsrc=”lokasifilegambar”>.
Lokasi file gambar dapat berupa lokasi relatif atau absolut.
Dokumen HTML berbeda dengan dokumen DOC/PDF, karena dokumen DOC/PDF merupakan dokumen yang menggabungkan (embed) file gambar ke dalam dokumen,  sedangkan dokumen HTML hanya mencantumkan link (lokasi) file gambar tersebut, sehingga agar bisa ditampilkan, maka dokumen HTML dan file gambar tersebut harus berada di lokasi yang tepat.
contoh: <img Xsrc="flower.jpg" width="50" height="50"/>
2. List
Daftar disebut juga list. untuk membuat sebuah list, dapat digunakan tag <ol> </ol> (daftar bernomor urut [orderded list]) atau <ul></ul> (daftar tanpa nomor urut [unordered list]). Untuk tiap item daftar digunakan tag <li></li>.
contoh:
<html>
<head> <title>Halaman Web Pertamaku</title> </head>
<body>
<ol>
<li>Paragraf</li>
<li>Gambar</li>
<li>Hiperlink</li>
<li>Daftar</li>
</ol>
</body>
</html>

Jika tag<ol> dan </ol> di atas diganti dengan <ul> dan </ul>, maka nomor urut (1,2,3) akan berganti dengan gambar bullet.
3. Hyperlink(tautan)
Hyperlink merupakan kekuatan HTML(WWW) sebenarnya. Hyperlink, sering juga disebut link, membuat WWW menjadi sangat populer, membuatnya identik dengan internet secara keseluruhan. Link ini secara default ditampilkan dalam teks berwarna biru dan bergaris bawah atau gambar bergaris batas (keliling) warna biru. Tag yang dipergunakan link dalam dokumen HTML adalah <a> </a>. Link sendiri dibagi dua, yaitu internal dan eksternal.
Link internal digunakan sebagi penanda agar mempermudah navigasi pada dokumen yang panjang. Link internal yang biasa kita lihat adalah tulisan back to top/kembali ke atas pada sebuah halaman web. Bila link seperti ini diklik maka dokumen akan menggulung kembali ke bagian atas halaman.
Tag untuk link internal adalah <a link=”namadokumen#namalokasi”> </a>.
Untuk menandai lokasi digunakan tag <a name=”namalokasi”></a>.
Sedangkan link internal menghubungkan dengan dokumen lain, baik dalam satu situs maupun dengan sumber daya lain di internet.
Tag untuk link eksternal adalah <a xhref=”namatujuan”></a>.
Lokasi bisa berupa dokumen HTML, program (aplikasi), gambar, suara, video, atau dokumen tipe lain (PDF, DOC). Jika dokumen selain HTML maka file akan diunduh (download) terlebih dahulu sebelum dibuka dengan aplikasi yang sesuai.

Dalam mengeset tujuan link eksternal dalam sebuah situs kita mengenal istilah lokasi relatif (tidak tetap) dan absolut (tetap). Lokasi relatif ditentukan berdasarkan lokasi (path) dokumen yang bersngkutan.
Misalnya dalam file index.html hendak dicantumkan link ke halaman produk.html dan terletak di path yang sama (c:\My Documents), maka link dituliskan sebagai berikut :
<a xhref="index.html">Produk Kami</a>
Sementara untuk mencantumkan link ke dokumen Daftar.xls di folder c:\My Documents\List, maka link dituliskan sebagai berikut : 
<a xhref="List/Daftar.xls>Daftar Nama</a>
Untuk mencantumkan link ke dokumen Help.pdf di folder c:\Adobe\Reader, maka link dituliskan sebagai berikut :
<a xhref="../Adobe/Reader/Help.pdf">Help File</a>
Sementara, link absolut dituliskan dalam sintaks : namaprotokol ://namaserver/namalokasi/namafile. Seperti contoh di atas, untuk menuliskan link ke dokumen produk.html di server artivisi.com maka harus dituliskan :
<a xhref="http://www.artivisi.com/produk.html">Produk Kami</a>
Untuk link antar website, dipergunakan tag :
<a href=”http://www.agitolearninternet.wordpress.com/”>link antar website</a><br>
Untuk link yang dipergunakan sebagai bookmark, tag yang digunakan :


<a href=”#top”>Link yang digunakan sebagai bookmark</a> <br>

Untuk link dalam satu website, digunakan tag :
<a href=”other-page.html”>link antar file dalam satu website</a> <br>